/* ==========================================================================
   El Ayudador de Pibes — Componentes
   Versión 1.0 · Fuente de verdad: docs/SISTEMA-VISUAL.md

   Este archivo consume exclusivamente las variables de tokens.css
   (y las clases base de base.css). Ningún color, tamaño, radio o
   espaciado literal se declara aquí.
   ========================================================================== */

/* --- Saltar al contenido ----------------------------------------------------- */

.saltar-enlace {
  position: absolute;
  top: -100%;
  left: var(--esp-4);
  z-index: 100;
  padding: var(--esp-2) var(--esp-4);
  background: var(--acento);
  color: var(--acento-contra);
  border-radius: var(--radio-sm);
  font-size: var(--txt-peq);
  transition: top var(--dur) var(--curva);
}

.saltar-enlace:focus-visible {
  top: var(--esp-4);
}

/* --- Encabezado --------------------------------------------------------------- */

.encabezado {
  border-bottom: 1px solid var(--borde);
  background: var(--superficie);
}

.encabezado__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  padding-block: var(--esp-3);
}

.marca {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--txt-h3);
  font-weight: 600;
  letter-spacing: var(--tracking-titulo);
  color: var(--texto-1);
  text-decoration: none;
}

.marca img {
  width: var(--esp-8);
  height: var(--esp-8);
  border-radius: var(--radio-sm);
}

.marca:hover {
  color: var(--acento);
}

.nav-principal {
  display: flex;
  align-items: center;
  gap: var(--esp-6);
}

.nav-principal ul {
  display: flex;
  gap: var(--esp-6);
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-principal a {
  color: var(--texto-2);
  text-decoration: none;
  font-size: var(--txt-cuerpo);
}

.nav-principal a:hover {
  color: var(--acento);
}

/* --- Botón de tema --------------------------------------------------------------
   Ícono discreto, sin fondo ni borde: una preferencia menor no debe competir
   visualmente con la marca ni la navegación (SISTEMA-VISUAL.md, sección 7). */

.boton-tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--toque-min);
  min-width: var(--toque-min);
  background: none;
  border: none;
  color: var(--texto-2);
  cursor: pointer;
}

.boton-tema:hover {
  color: var(--acento);
}

/* No hay token de tamaño de ícono; 1.25em escala con el font-size heredado
   en vez de fijar un valor desconectado de la tipografía. */
.icono-tema {
  width: 1.25em;
  height: 1.25em;
}

/* Qué ícono se ve lo decide el tema efectivo, resuelto en CSS igual que los
   propios tokens de color — así no hay parpadeo esperando a que corra JS. */
.icono-sol {
  display: none;
}

.icono-luna {
  display: inline;
}

:root[data-tema="oscuro"] .icono-luna {
  display: none;
}

:root[data-tema="oscuro"] .icono-sol {
  display: inline;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .icono-luna {
    display: none;
  }

  :root:not([data-tema="claro"]) .icono-sol {
    display: inline;
  }
}

/* --- Botones ------------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--toque-min);
  padding-inline: var(--esp-6);
  border-radius: var(--radio-sm);
  font-family: var(--fuente-texto);
  font-size: var(--txt-cuerpo);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--dur) var(--curva),
    border-color var(--dur) var(--curva), color var(--dur) var(--curva);
}

.boton[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.boton--primario {
  background: var(--acento);
  color: var(--acento-contra);
}

.boton--primario:hover,
.boton--primario:active {
  background: var(--acento-hundido);
}

.boton--secundario {
  background: transparent;
  color: var(--acento);
  border-color: var(--borde-interactivo);
}

.boton--secundario:hover,
.boton--secundario:active {
  border-color: var(--acento);
  background: var(--acento-tenue);
}

.boton--terciario {
  background: transparent;
  color: var(--texto-2);
}

.boton--terciario:hover,
.boton--terciario:active {
  color: var(--texto-1);
  background: var(--superficie-hundida);
}

.boton--destructivo {
  background: transparent;
  color: var(--error);
  border-color: var(--error);
}

.boton--destructivo:hover,
.boton--destructivo:active {
  background: var(--error-tenue);
}

/* --- Pie de página -------------------------------------------------------------- */

.pie {
  border-top: 1px solid var(--borde);
  background: var(--superficie);
  margin-top: var(--esp-24);
}

.pie__interior {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-8);
  padding-block: var(--esp-12);
}

@media (min-width: 600px) {
  .pie__interior {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pie__columna h2 {
  font-size: var(--txt-peq);
  text-transform: uppercase;
  letter-spacing: var(--tracking-etiqueta);
  color: var(--texto-3);
  margin-bottom: var(--esp-3);
}

.pie__columna ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

.pie__columna a {
  color: var(--texto-2);
  text-decoration: none;
  font-size: var(--txt-peq);
}

.pie__columna a:hover {
  color: var(--acento);
}

.pie__privacidad {
  color: var(--texto-2);
  font-size: var(--txt-peq);
  max-width: var(--medida-lectura);
}

.pie__copyright {
  color: var(--texto-3);
  font-size: var(--txt-micro);
  padding-block: var(--esp-4);
  border-top: 1px solid var(--borde);
}

/* --- Utilidades de layout ------------------------------------------------------- */

.seccion {
  padding-block: var(--esp-16);
}

.pila {
  display: flex;
  flex-direction: column;
  gap: var(--esp-6);
}

/* --- Área de trabajo (páginas de herramienta) -----------------------------------
   Reemplaza a .contenedor (1140px) como envoltorio de la sección principal en
   toda página de herramienta — .contenedor queda reservado para portada y
   catálogo. 760px es un valor explícito pedido para compactar la plantilla;
   no mapea a ningún token de la escala, documentado como excepción puntual
   igual que otros valores fuera de escala del sistema (ver PENDIENTES.md).

   El h1 y la entradilla (.txt-cuerpo-lg) de una página de herramienta bajan
   de tamaño acá mismo, por selector descendiente — sin tocar las reglas
   globales de h1 ni la clase .txt-cuerpo-lg, que siguen usándose en su
   tamaño normal en portada, catálogo y páginas de sitio. El protagonista de
   una página de herramienta es la herramienta, no su título. */

.area-trabajo {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--esp-4);
}

@media (min-width: 600px) {
  .area-trabajo {
    padding-inline: var(--esp-6);
  }
}

@media (min-width: 1024px) {
  .area-trabajo {
    padding-inline: var(--esp-8);
  }
}

.area-trabajo h1 {
  font-size: var(--txt-h3);
}

.area-trabajo .txt-cuerpo-lg {
  font-size: var(--txt-peq);
}

/* --- Disposición de dos columnas (herramientas con archivo) ---------------------
   A partir de 900px: zona de carga + previsualización a la izquierda (1fr),
   controles en una columna fija a la derecha. Abajo de 900px, todo apilado
   en una sola columna (mobile-first, orden natural del documento).

   220px y el punto de quiebre de 900px son valores explícitos pedidos para
   esta disposición — no mapean a la escala de espaciado; 900px además
   coincide con el punto de quiebre ya usado por el navbar de categorías
   (sección 6.bis de SISTEMA-VISUAL.md), así que no suma un breakpoint
   nuevo al sistema. */

.grilla-herramienta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-6);
}

@media (min-width: 900px) {
  .grilla-herramienta {
    grid-template-columns: 1fr 220px;
    align-items: start;
  }
}

.grilla-herramienta__visual,
.grilla-herramienta__controles {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}

/* --- Catálogo ------------------------------------------------------------------- */

.catalogo-controles {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}

.catalogo-etiqueta {
  font-size: var(--txt-peq);
  color: var(--texto-2);
}

.catalogo-buscador {
  min-height: var(--toque-min);
  padding-inline: var(--esp-4);
  border: 1px solid var(--borde-interactivo);
  border-radius: var(--radio-sm);
  background: var(--superficie);
  color: var(--texto-1);
  font-family: var(--fuente-texto);
  font-size: var(--txt-cuerpo);
}

.catalogo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque-min);
  padding-inline: var(--esp-4);
  border: 1px solid var(--borde);
  border-radius: var(--radio-full);
  background: var(--superficie-hundida);
  color: var(--texto-2);
  font-family: var(--fuente-texto);
  font-size: var(--txt-peq);
  cursor: pointer;
}

/* Selección: violeta de marca. El punto de categoría (abajo) es identidad,
   nunca el fondo del chip — el chip en sí es un control accionable. */
.chip[aria-pressed="true"] {
  background: var(--acento-tenue);
  color: var(--acento);
  border-color: var(--acento);
}

.chip__punto {
  display: inline-block;
  width: var(--esp-2);
  height: var(--esp-2);
  border-radius: var(--radio-full);
  background: var(--color-cat, var(--borde));
  margin-right: var(--esp-2);
}

/* Marcadores de categoría: fijan --color-cat vía clase, no vía atributo
   style="" en línea — así script-src/style-src pueden ser 'self' sin
   'unsafe-inline' en el CSP (feature/fase1-headers). El id de cada clase
   coincide con el id de categorías en data/herramientas.js. */
.marcador-imagenes {
  --color-cat: var(--cat-imagenes);
}

.marcador-pdf {
  --color-cat: var(--cat-pdf);
}

.marcador-texto {
  --color-cat: var(--cat-texto);
}

.marcador-programacion {
  --color-cat: var(--cat-programacion);
}

.marcador-seguridad {
  --color-cat: var(--cat-seguridad);
}

.marcador-estudiantes {
  --color-cat: var(--cat-estudiantes);
}

.catalogo-estado {
  color: var(--texto-2);
}

.catalogo-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-4);
}

@media (min-width: 600px) {
  .catalogo-lista {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .catalogo-lista {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Barra de 4px = identidad de categoría. Nunca fondo: la tarjeta en sí no es
   un control accionable, pero tampoco se pinta como si lo fuera. */
.catalogo-tarjeta {
  border: 1px solid var(--borde);
  border-left-width: var(--esp-1);
  border-left-color: var(--color-cat, var(--borde));
  border-radius: var(--radio-md);
  padding: var(--esp-4);
  background: var(--superficie);
}

/* --- Páginas legales / de contenido --------------------------------------------- */

/* Aviso de borrador: NO usa --ambar ni --error. En este sistema esos colores
   tienen un significado fijo (transmisión de datos / error) — un borrador legal
   no es ninguna de las dos cosas, así que se distingue por tipografía, no por
   color, para no romper la regla de la sección 2 de SISTEMA-VISUAL.md. */
.aviso-borrador {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-2) var(--esp-4);
  margin-block-end: var(--esp-6);
  border: 1px solid var(--borde-interactivo);
  border-radius: var(--radio-sm);
  background: var(--superficie-hundida);
  color: var(--texto-1);
  font-size: var(--txt-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-etiqueta);
}

.pagina-legal h2 {
  margin-top: var(--esp-12);
  margin-bottom: var(--esp-3);
}

.pagina-legal p,
.pagina-legal li {
  color: var(--texto-2);
}

.pagina-legal p + p {
  margin-top: var(--esp-4);
}

/* --- Preguntas frecuentes (detalles nativos) ------------------------------------ */

.faq {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}

.faq details {
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  padding: var(--esp-4);
  background: var(--superficie);
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--texto-1);
}

.faq p {
  margin-top: var(--esp-3);
}

/* --- Navbar de categorías (sección 6.bis) --------------------------------------- */

.nav-categorias {
  position: relative;
  list-style: none;
}

.nav-categorias__enlace,
.nav-categorias__disparador {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  min-height: var(--toque-min);
  background: none;
  border: none;
  padding: 0;
  color: var(--texto-2);
  text-decoration: none;
  font-family: var(--fuente-texto);
  font-size: var(--txt-cuerpo);
  cursor: pointer;
}

.nav-categorias__enlace:hover,
.nav-categorias__disparador:hover {
  color: var(--acento);
}

/* Sin esto, [hidden] pierde contra el display:inline-flex de arriba: el
   atributo hidden se maneja con una regla `[hidden] { display: none }` del
   user-agent que un selector de clase le gana en especificidad. */
.nav-categorias__enlace[hidden],
.nav-categorias__disparador[hidden] {
  display: none;
}

.nav-categorias__disparador::after {
  content: "▾";
  font-size: var(--txt-peq);
}

.nav-categorias__panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  margin-top: var(--esp-2);
  min-width: 20rem;
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--esp-4);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-menu);
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--dur-menu) var(--curva),
    transform var(--dur-menu) var(--curva);
}

.nav-categorias__panel[hidden] {
  display: none;
}

.nav-categorias__cerrar {
  display: none;
}

.nav-categorias__grupos {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}

/* Filete de 4px = identidad de categoría, igual que en las tarjetas del
   catálogo. Nunca fondo del grupo ni de un enlace. */
.nav-categorias__grupo {
  border-left: var(--esp-1) solid var(--color-cat, var(--borde));
  padding-left: var(--esp-3);
}

.nav-categorias__titulo {
  color: var(--texto-1);
  font-weight: 600;
  margin-bottom: var(--esp-2);
}

.nav-categorias__grupo ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
}

.nav-categorias__grupo a {
  color: var(--texto-2);
  text-decoration: none;
  font-size: var(--txt-peq);
}

.nav-categorias__grupo a:hover {
  color: var(--acento);
}

.nav-categorias__ver-todas {
  display: block;
  margin-top: var(--esp-4);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--borde);
  color: var(--acento);
  font-weight: 600;
  text-decoration: none;
  font-size: var(--txt-peq);
}

@media (max-width: 900px) {
  .nav-categorias__panel {
    position: fixed;
    inset: 0;
    z-index: 200;
    margin-top: 0;
    min-width: 0;
    max-height: none;
    border-radius: 0;
    border: none;
  }

  .nav-categorias__cerrar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--toque-min);
    min-width: var(--toque-min);
    background: none;
    border: none;
    color: var(--texto-2);
    font-size: var(--txt-h3);
    cursor: pointer;
    margin-bottom: var(--esp-4);
  }

  .nav-categorias__grupo a {
    display: flex;
    align-items: center;
    min-height: var(--toque-min);
  }
}

/* --- Tira de procedencia (sección 6 de SISTEMA-VISUAL.md) -----------------------
   El estado (local/servidor) lo decide js/tira-procedencia.js leyendo
   data/herramientas.js — nadie puede escribir "local" a mano en una
   herramienta que en realidad usa backend.

   Nota de implementación: el documento dice "borde izquierdo de 3px", valor
   que no existe en la escala de espaciado (4·8·12·16·24·32·48·64·96). Se usa
   var(--esp-1) (4px), igual que las demás barras de identidad del sitio, en
   vez de un literal fuera de la escala. Queda anotado en PENDIENTES.md. */

.tira-procedencia {
  display: block;
  border-left: var(--esp-1) solid var(--borde);
  background: var(--superficie-hundida);
  border-radius: var(--radio-sm);
  margin-block: var(--esp-6);
}

.tira-procedencia--local {
  border-left-color: var(--acento);
  background: var(--acento-tenue);
}

.tira-procedencia--servidor {
  border-left-color: var(--ambar);
  background: var(--ambar-tenue);
}

.tira-procedencia--desconocido {
  border-left-color: var(--error);
  background: var(--error-tenue);
}

.tira-procedencia__resumen {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-3);
  cursor: pointer;
  list-style: none;
  overflow: hidden;
}

.tira-procedencia__resumen::marker,
.tira-procedencia__resumen::-webkit-details-marker {
  display: none;
  content: "";
}

.tira-procedencia__etiqueta {
  font-family: var(--fuente-dato);
  text-transform: uppercase;
  font-size: var(--txt-micro);
  letter-spacing: var(--tracking-etiqueta);
  font-weight: 600;
  white-space: nowrap;
}

.tira-procedencia--local .tira-procedencia__etiqueta {
  color: var(--acento);
}

.tira-procedencia--servidor .tira-procedencia__etiqueta {
  color: var(--ambar);
}

.tira-procedencia--desconocido .tira-procedencia__etiqueta {
  color: var(--error);
}

.tira-procedencia__texto {
  color: var(--texto-2);
  font-size: var(--txt-peq);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tira-procedencia__accion {
  color: var(--texto-2);
  font-size: var(--txt-peq);
  text-decoration: underline;
  white-space: nowrap;
}

.tira-procedencia__explicacion {
  padding: 0 var(--esp-4) var(--esp-4);
  color: var(--texto-2);
  font-size: var(--txt-peq);
}

.tira-procedencia__explicacion > * + * {
  margin-top: var(--esp-3);
}

/* --- Migas de pan (sección 10) --------------------------------------------------- */

.migas {
  color: var(--texto-3);
  font-size: var(--txt-peq);
}

.migas a {
  color: var(--texto-3);
}

.migas a:hover {
  color: var(--acento);
}

.migas [aria-current="page"] {
  color: var(--texto-2);
}

/* --- Mensaje de error de herramienta ---------------------------------------------
   Reutilizable por cualquier herramienta que necesite mostrar un error de
   validación o de proceso (JSON invalido, Base64 invalido, etc). */

.mensaje-error {
  border-left: var(--esp-1) solid var(--error);
  background: var(--error-tenue);
  color: var(--error);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-sm);
}

.mensaje-error[hidden] {
  display: none;
}

/* --- Campo de texto genérico (herramientas de texto/código) --------------------- */

.campo-texto {
  width: 100%;
  min-height: var(--esp-24);
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--borde-interactivo);
  border-radius: var(--radio-sm);
  background: var(--superficie);
  color: var(--texto-1);
  font-family: var(--fuente-texto);
  font-size: var(--txt-cuerpo);
  resize: vertical;
}

.campo-texto--mono {
  font-family: var(--fuente-dato);
  font-size: var(--txt-dato-peq);
}

/* Resultado inline invalido (ej. division por cero): mismo color que
   .mensaje-error, sin la caja completa, para resultados cortos en linea. */
.texto-invalido {
  color: var(--error);
}

/* Aviso permanente neutro (no es error ni transmision: no usa --error ni
   --ambar). Misma familia visual que .aviso-borrador de las paginas
   legales, pero de proposito general en vez de exclusivo de "borrador". */
.aviso {
  display: block;
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--borde-interactivo);
  border-radius: var(--radio-sm);
  background: var(--superficie-hundida);
  color: var(--texto-1);
  font-size: var(--txt-peq);
  font-weight: 600;
}

/* Fila flexible para grupos de campos generados dinamicamente (ej. filas
   de nota+peso en la calculadora de notas). */
.fila {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--esp-3);
}

.fila > label {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  font-size: var(--txt-peq);
  flex: 1;
  min-width: 8rem;
}

/* --- Comparador de textos (diff de líneas) ---------------------------------------
   A propósito NO usa --acento ni --error para marcar agregado/eliminado: esos
   colores tienen un significado fijo (acción / error) en este sistema, y una
   línea agregada no es "algo accionable" ni una línea eliminada es "un error".
   La diferencia se comunica con texto (prefijo +/−) y tipografía, nunca solo
   con color, para no depender de la percepción de color del lector. */

.lista-diff {
  font-family: var(--fuente-dato);
  font-size: var(--txt-dato-peq);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  overflow: auto;
  max-height: calc(var(--esp-24) * 5);
}

.diff-linea {
  padding: var(--esp-1) var(--esp-3);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.diff-linea--igual {
  color: var(--texto-2);
}

.diff-linea--eliminada {
  background: var(--superficie-hundida);
  color: var(--texto-3);
  text-decoration: line-through;
}

.diff-linea--agregada {
  background: var(--superficie-hundida);
  color: var(--texto-1);
  font-weight: 600;
}

/* --- Zona de carga de archivos (sección 7 de SISTEMA-VISUAL.md) -----------------
   El <input type="file"> real va oculto solo visualmente (.sr-solo) y el
   <label> asociado es la superficie grande clicable/soltable — así sigue
   siendo un campo de formulario real, accesible por teclado, en vez de un
   <div> con eventos de arrastre que excluiría a quien no usa mouse.

   Nota: el documento dice "radio 6px", valor que no existe tal cual en la
   escala. Se usa var(--radio-md) (10px en v2; sigue siendo el token para
   "tarjetas y paneles", la categoría a la que pertenece esta zona).

   La altura mínima es un valor explícito de 168px pedido para compactar la
   plantilla de herramienta (antes calc(var(--esp-24) * 2), 192px) — no
   mapea a la escala de espaciado, documentado como excepción puntual igual
   que otros valores del sistema. Anotado en PENDIENTES.md. */

.zona-carga {
  position: relative;
  display: flex;
  min-height: 168px;
  border: 2px dashed var(--borde-interactivo);
  border-radius: var(--radio-md);
  background: var(--superficie-hundida);
}

.zona-carga--arrastrando {
  border-style: solid;
  border-color: var(--acento);
  background: var(--acento-tenue);
}

.zona-carga__etiqueta {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  padding: var(--esp-6);
  text-align: center;
  color: var(--texto-2);
  cursor: pointer;
}

.zona-carga input[type="file"]:focus-visible + .zona-carga__etiqueta {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: var(--radio-sm);
}

/* Nombre del archivo elegido: una sola línea, con puntos suspensivos si no
   entra — evita que un nombre de archivo largo estire la zona de carga. El
   tamaño y detalles (peso, dimensiones, páginas) van en una línea aparte,
   en Mono (.dato-micro de base.css), debajo. */
.zona-carga__nombre {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Tarjeta de práctica (tarjetas de estudio) ----------------------------------- */

.tarjeta-practica {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--esp-3);
  min-height: calc(var(--esp-24) * 2);
  padding: var(--esp-6);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background: var(--superficie);
  text-align: center;
  cursor: pointer;
}

.tarjeta-practica:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

/* --- Planificador semanal --------------------------------------------------------
   .planificador-pantalla envuelve lo que solo tiene sentido en pantalla
   (entradilla, controles) para poder ocultarlo al imprimir sin afectar
   otras páginas — a diferencia de .encabezado/.pie/.migas/.tira-procedencia/
   .pagina-legal de acá abajo, que se ocultan al imprimir en *cualquier*
   página, porque nadie quiere el header, el footer ni el contenido
   explicativo en una hoja impresa. */

.planificador {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-4);
}

@media (min-width: 900px) {
  .planificador {
    grid-template-columns: repeat(7, 1fr);
  }
}

.planificador__dia {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  background: var(--superficie);
}

.planificador__dia h2 {
  font-size: var(--txt-peq);
  text-transform: uppercase;
  letter-spacing: var(--tracking-etiqueta);
  color: var(--texto-3);
}

.planificador__dia label {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  font-size: var(--txt-micro);
  color: var(--texto-3);
}

@media print {
  .encabezado,
  .pie,
  .migas,
  .tira-procedencia,
  .saltar-enlace,
  .pagina-legal,
  .planificador-pantalla {
    display: none !important;
  }

  /* El papel no tiene tema claro/oscuro: se fuerza negro sobre blanco,
     nunca los tokens de color de pantalla. */
  body {
    background: #fff;
    color: #000;
  }

  .planificador__dia {
    border: 1px solid #000;
    break-inside: avoid;
  }

  .planificador__dia h2 {
    color: #000;
  }

  .planificador__dia input {
    border: none;
    color: #000;
  }
}

/* --- Organizador de PDF (grilla de miniaturas) ------------------------------------ */

.organizador-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--esp-24) * 2), 1fr));
  gap: var(--esp-4);
}

.organizador-pagina {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  background: var(--superficie);
}

.organizador-pagina canvas {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--borde);
}

.organizador-pagina__botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1);
  justify-content: center;
}

/* --- Vista previa de imagen (herramientas de imágenes) ---------------------------- */

/* max-height es un valor explícito de 320px pedido para compactar la
   plantilla de herramienta — no mapea a la escala de espaciado, documentado
   como excepción puntual igual que otros valores del sistema. */
.vista-previa {
  display: block;
  max-width: 100%;
  max-height: 320px;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  background: var(--superficie);
}

/* --- Muestras de color (extractor de paleta) --------------------------------------
   El color de fondo de .muestra-color__cuadro es siempre un valor calculado en
   JS a partir de la imagen que subió la persona usuaria — no existe (ni puede
   existir) un token para "el color dominante de esta foto en particular", así
   que ese único valor se asigna inline en JS. Todo lo demás sale de tokens. */

.grilla-muestras {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--esp-24) * 1.6), 1fr));
  gap: var(--esp-4);
}

.muestra-color {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-3);
  border: 1px solid var(--borde);
  border-radius: var(--radio-md);
  background: var(--superficie);
}

.muestra-color__cuadro {
  width: 100%;
  height: calc(var(--esp-24) * 1.2);
  border-radius: var(--radio-sm);
  border: 1px solid var(--borde);
}

/* --- Bloque de código para copiar (generador de favicon) -------------------------- */

.bloque-codigo {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}