/* Gestor público de pictogramas. Colores y tipografías de tokens.css;
   la tarjeta usa la receta compartida del marco (--marco-*, ADR-0005).
   Los neutros se derivan de los tokens con color-mix, no se inventan. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Lado nominal de la celda de la rejilla; las proporciones del marco
     se calculan sobre él, como hace el kiosk sobre su celda. */
  --celda: 160px;
  --tinta: var(--color-primary);
  --tinta-suave: color-mix(in srgb, var(--color-primary) 55%, white);
  --fondo-suave: color-mix(in srgb, var(--color-primary) 6%, white);
  --borde-suave: color-mix(in srgb, var(--color-primary) 15%, white);
}

body {
  font-family: var(--font-body), sans-serif;
  color: var(--tinta);
  background: var(--color-white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- cabecera ---------- */

.cabecera {
  background: var(--color-primary);
  color: var(--color-white);
  padding: 1.2rem clamp(1rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.marca img { height: 44px; display: block; }
.cabecera-titulos h1 {
  font-family: var(--font-heading), serif;
  font-weight: 400;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
}
.cabecera-titulos p {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--color-white) 75%, transparent);
}

main {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 3rem;
}

/* ---------- página de licencia ---------- */

main.licencia { max-width: 720px; }
main.licencia p { margin-bottom: 1rem; line-height: 1.7; }
main.licencia a { color: var(--color-accent); }
.licencia-badge { margin-top: 1.5rem; margin-bottom: 0.5rem; }
main.licencia .licencia-copyright {
  font-size: 0.8rem;
  color: var(--tinta-suave);
}

/* Línea discreta de licencia bajo el título de la cabecera navy. */
.cabecera-licencia {
  font-size: 0.78rem;
  margin-top: 0.25rem;
}
.cabecera-licencia,
.cabecera-licencia a {
  color: color-mix(in srgb, var(--color-white) 65%, transparent);
}
.cabecera-licencia a { text-decoration: underline; }
.cabecera-licencia a:hover {
  color: var(--color-white);
}

/* ---------- controles ---------- */

.buscador {
  width: 100%;
  font: inherit;
  font-size: 1.05rem;
  padding: 0.75rem 1rem;
  border: 2px solid var(--borde-suave);
  border-radius: 12px;
  color: var(--tinta);
  outline: none;
}
.buscador:focus { border-color: var(--color-accent); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1rem 0 0.8rem;
}
.chip {
  font: inherit;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3rem 0.7rem;
  border: 1.5px solid var(--borde-suave);
  border-radius: 50px;
  background: var(--color-white);
  color: var(--tinta);
  cursor: pointer;
}
.chip:hover { border-color: var(--tinta-suave); }
.chip[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, white);
}
.chip-color {
  width: 0.8em; height: 0.8em;
  border-radius: 50%;
  border: 1px solid var(--borde-suave);
}

/* El chip de vocabulario nuclear abre la fila, separado de las categorías. */
.chip-nucleo { margin-right: 0.8rem; font-weight: 500; }

/* Selector de colecciones (el árbol de etiquetas, agrupado). */
.fila-colecciones {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.fila-colecciones label { font-size: 0.85rem; color: var(--tinta-suave); }
.fila-colecciones select {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.4rem 0.6rem;
  border: 1.5px solid var(--borde-suave);
  border-radius: 8px;
  color: var(--tinta);
  background: var(--color-white);
  max-width: 100%;
}

.contador {
  margin-top: 0.4rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--tinta);
}

/* ---------- rejilla de tarjetas ---------- */

.rejilla {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--celda), 1fr));
  gap: 12px;
}

/* Tarjeta limpia, como los raw: solo el dibujo sobre blanco.
   Al pasar el ratón (o enfocar con teclado) la tarjeta se sombrea con el
   color de su pictograma y la palabra aparece en blanco sobre el
   sombreado. El sombreado se oscurece con el navy porque los colores de
   la paleta son pasteles y el blanco no leería. */
.tarjeta {
  position: relative;
  aspect-ratio: 1;
  background: var(--color-white);
  border: 1.5px solid var(--borde-suave);
  border-radius: 12px;
  transition: border-color 0.15s ease;
}
.tarjeta:hover, .tarjeta:focus-within { border-color: var(--color-cat); }
.tarjeta-abrir {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  padding: 12%;
  text-decoration: none;
  cursor: pointer;
}
.tarjeta-abrir img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tarjeta-palabra {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem;
  border-radius: inherit;
  background: color-mix(in srgb,
    color-mix(in srgb, var(--color-cat) 55%, var(--color-primary)) 88%,
    transparent);
  color: var(--color-white);
  font-weight: 700;
  text-transform: uppercase; /* como la etiqueta del kiosk y el h1 de la ficha */
  text-align: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.tarjeta:hover .tarjeta-palabra,
.tarjeta:focus-within .tarjeta-palabra { opacity: 1; }

/* Táctil: no hay hover, así que la palabra vive siempre visible en una
   banda inferior del mismo tinte, sin tapar el dibujo. */
@media (hover: none) {
  .tarjeta-abrir { padding-bottom: 2.4rem; }
  .tarjeta-palabra {
    opacity: 1;
    top: auto;
    bottom: 0;
    display: block;
    padding: 0.35rem 0.5rem;
    font-size: 0.82rem;
    border-radius: 0 0 10px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.tarjeta-descarga {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-white);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
}
.tarjeta:hover .tarjeta-descarga,
.tarjeta:focus-within .tarjeta-descarga {
  opacity: 1;
  visibility: visible;
}
.tarjeta-descarga:hover { background: var(--color-accent); }
.tarjeta-descarga svg { width: 1.2rem; height: 1.2rem; }
/* Descarga deshabilitada (ADR-0004): atenuada y con cursor de no-permitido,
   con el porqué en el title — que parezca «aún no», nunca «roto». */
.tarjeta-descarga.descarga-inactiva,
.tarjeta-descarga.descarga-inactiva:hover {
  background: color-mix(in srgb, var(--color-primary) 30%, white);
  cursor: not-allowed;
}

/* ---------- paginación ---------- */

.paginacion {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.pagina-btn {
  font: inherit;
  font-size: 0.9rem;
  min-width: 2.3rem;
  height: 2.3rem;
  padding: 0 0.5rem;
  border: 1.5px solid var(--borde-suave);
  border-radius: 8px;
  background: var(--color-white);
  color: var(--tinta);
  cursor: pointer;
}
.pagina-btn:hover:not(:disabled) { border-color: var(--tinta-suave); }
.pagina-btn:disabled { opacity: 0.4; cursor: default; }
.pagina-btn.actual {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
  font-weight: 700;
}
.pagina-elipsis { color: var(--tinta-suave); padding: 0 0.2rem; }

.estado-vacio {
  margin-top: 2.5rem;
  text-align: center;
  color: var(--tinta-suave);
}

/* ---------- ficha (página propia: pictograma.html?id=…) ---------- */

.titulo-palabra { text-transform: uppercase; }

.volver-rejilla {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  color: var(--color-accent);
  text-decoration: none;
}
.volver-rejilla:hover { text-decoration: underline; }

.ficha-pagina {
  border: 1.5px solid var(--borde-suave);
  border-radius: 16px;
  background: var(--color-white);
}

.ficha-cuerpo {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1.5rem;
  padding: 2rem;
}
@media (max-width: 720px) {
  .ficha-cuerpo { grid-template-columns: 1fr; }
}

.ficha-vista { min-width: 0; }
#lienzo {
  display: block;
  width: min(100%, 380px);
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--borde-suave);
  border-radius: 8px;
}
/* Tablero de ajedrez estándar de los editores: solo previsualización
   (es fondo CSS del elemento; el bitmap del canvas queda transparente). */
#lienzo.transparente {
  background: repeating-conic-gradient(#e4e4e4 0% 25%, #ffffff 0% 50%)
    0 0 / 20px 20px;
}

.ficha-datos { margin-top: 1.2rem; font-size: 0.9rem; }
.ficha-datos > div {
  display: flex;
  gap: 0.6rem;
  padding: 0.3rem 0;
  border-top: 1px solid var(--fondo-suave);
}
.ficha-datos > div[hidden] { display: none; }
.ficha-datos dt { color: var(--tinta-suave); min-width: 9.5em; }
.ficha-datos dd { flex: 1; }
.cat-punto {
  display: inline-block;
  width: 0.75em; height: 0.75em;
  border-radius: 50%;
  border: 1px solid var(--borde-suave);
  margin-right: 0.35em;
}

/* Distintivo discreto de vocabulario nuclear, junto a la categoría. */
.insignia-nucleo {
  display: inline-block;
  margin-left: 0.6em;
  padding: 0.1em 0.6em;
  border-radius: 50px;
  background: color-mix(in srgb, var(--color-accent) 14%, white);
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, white);
  color: var(--color-primary);
  font-size: 0.82em;
  white-space: nowrap;
  cursor: help;
}

.ficha-opciones h2 {
  font-family: var(--font-heading), serif;
  font-weight: 400;
  font-size: 1.15rem;
  margin-bottom: 0.8rem;
}
.opcion {
  display: block;
  font-size: 0.92rem;
  margin-bottom: 0.65rem;
}
.opcion-color {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.opcion-color input[type="color"] {
  inline-size: 2.6rem;
  block-size: 1.6rem;
  border: 1px solid var(--borde-suave);
  border-radius: 6px;
  padding: 0;
  background: none;
  cursor: pointer;
}
/* Configuración del texto: visible solo con el check activado. */
.texto-config { display: none; }
.opcion-texto-grupo:has(#opTexto:checked) .texto-config { display: block; }
.texto-config input[type="text"] {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 0.92rem;
  margin-top: 0.35rem;
  padding: 0.4rem 0.6rem;
  border: 1.5px solid var(--borde-suave);
  border-radius: 8px;
  color: var(--tinta);
}
.texto-posicion {
  display: flex;
  gap: 1rem;
  margin-top: 0.35rem;
  font-size: 0.88rem;
}
.texto-mayusculas {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.88rem;
}

.opcion-texto input, .opcion-texto select {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 0.92rem;
  margin-top: 0.25rem;
  padding: 0.4rem 0.6rem;
  border: 1.5px solid var(--borde-suave);
  border-radius: 8px;
  color: var(--tinta);
}

.ficha-acciones {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.2rem;
}
.btn-primario, .btn-secundario {
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.65rem 1rem;
  border-radius: 50px;
  cursor: pointer;
  text-align: center;
}
.btn-primario {
  background: var(--color-accent);
  color: var(--color-white);
  border: none;
}
.btn-primario:hover { background: var(--color-accent-hover); }
.btn-primario:disabled,
.btn-primario:disabled:hover {
  background: color-mix(in srgb, var(--color-accent) 35%, white);
  cursor: not-allowed;
}
.btn-secundario {
  background: var(--color-white);
  color: var(--tinta);
  border: 1.5px solid var(--borde-suave);
}
.btn-secundario:hover { border-color: var(--tinta-suave); }

.ficha-terminos {
  margin-top: 1rem;
  font-size: 0.78rem;
  color: var(--tinta-suave);
}

/* ---------- pie ---------- */

.pie {
  background: var(--fondo-suave);
  padding: 2rem clamp(1rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: flex-start;
}
.terminos { max-width: 640px; }
.terminos h2 {
  font-family: var(--font-heading), serif;
  font-weight: 400;
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}
.terminos p { font-size: 0.9rem; line-height: 1.6; }
.terminos a, .volver { color: var(--color-accent); text-decoration: none; }
.terminos a:hover, .volver:hover { text-decoration: underline; }
.volver { font-size: 0.9rem; }