/* Revisión de traducciones: tokens de marca de Cleo (cleverdx/DESIGN.md, paleta Clever Solar 2026), claro y oscuro,
   móvil primero, sin dependencias externas. Fira Sans va servida desde /static/fonts (OFL). Derivados que DESIGN.md no
   trae como token: --tenue (gris pizarra mezclado 15 % con carbón: sobre el fondo gris #F3F4F6 el pizarra puro da 4,39:1),
   rellenos sólidos de OK y Cambiar (el semántico oscurecido un 40 %, como las alertas: el teal y el ámbar con blanco no llegan a AA),
   --acento-hover en oscuro (azur → info) y el texto de los avisos de error en oscuro (el rojo aclarado un 15 %, como bg-label-danger).
   --borde-campo (campos, chips y botones de estado) va en el pizarra de la marca (#6B7280 claro, #9CA3AF oscuro) para llegar a 3:1 (WCAG 1.4.11);
   el #D1D5DB de DESIGN.md daba 1,47:1. Decisión de Jose, 27-oct. */
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/FiraSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/FiraSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/FiraSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/FiraSans-Bold.woff2") format("woff2"); }
:root {
  --fondo: #F3F4F6; --superficie: #FFFFFF; --texto: rgba(33, 39, 45, .87); --titulo: #111827; --tenue: #606774;
  --borde: #E5E7EB; --borde-campo: #6B7280; --hover-sec: #f3f4f5;
  --acento: #195A8F; --acento-hover: #175181; --acento-texto: #FFFFFF; --enlace-hover: #306b9a; --foco: #195A8F;
  --ok: #156e6a; --ok-borde: #23B8B1; --ok-fondo: #156e6a; --ok-texto: #FFFFFF;
  --cambiar: #935f07; --cambiar-borde: #F59E0B; --cambiar-fondo: #935f07; --cambiar-texto: #FFFFFF;
  --error: #8f2929; --error-borde: #EF4444; --error-fondo: #fde3e3; --error-sobre: #8f2929;
  --aviso-fondo: #e4f1fe; --aviso-texto: #2c6295; --codigo-fondo: #EDEEEF;
  --r: 6px; --r-sm: 4px; --margen: max(16px, 5vw); --lectura: 75ch;
  --sombra-card: 0 .25rem 1.125rem rgba(33, 39, 45, .08); --sombra-boton: 0 2px 4px rgba(33, 39, 45, .12);
  --sombra-pequena: 0 .125rem .25rem rgba(33, 39, 45, .08); --sombra-flotante: 0 .31rem 1.25rem 0 rgba(33, 39, 45, .12);
  --fuente: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "PingFang TC", "Noto Sans TC",
    "Microsoft JhengHei", sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0F172A; --superficie: #1E293B; --texto: rgba(255, 255, 255, .87); --titulo: rgba(255, 255, 255, .87); --tenue: #9CA3AF;
    --borde: #334155; --borde-campo: #9CA3AF; --hover-sec: #334155;
    --acento: #4AA4F8; --acento-hover: #8BCBFF; --acento-texto: #000000; --enlace-hover: #8BCBFF; --foco: #4AA4F8;
    --ok: #34D399; --ok-borde: #34D399; --ok-fondo: #34D399; --ok-texto: #0F172A;
    --cambiar: #FBBF24; --cambiar-borde: #FBBF24; --cambiar-fondo: #FBBF24; --cambiar-texto: #0F172A;
    --error: #F87171; --error-borde: #F87171; --error-fondo: #413544; --error-sobre: #f98686;
    --aviso-fondo: #2f435a; --aviso-texto: #9cd3ff; --codigo-fondo: #323d4e;
    --sombra-card: 0 .25rem 1.25rem rgba(0, 0, 0, .3); --sombra-boton: 0 2px 4px rgba(0, 0, 0, .3);
    --sombra-pequena: 0 .125rem .25rem rgba(0, 0, 0, .3); --sombra-flotante: 0 .31rem 1.25rem 0 rgba(0, 0, 0, .4);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 16px/1.5 var(--fuente); }
a { color: var(--acento); }
a:hover { color: var(--enlace-hover); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2 { color: var(--titulo); }
h1 { font-size: 1.375rem; font-weight: 700; line-height: 1.37; margin: .5rem 0 1rem; }
h2 { font-size: 1.125rem; font-weight: 600; line-height: 1.37; margin: 1.75rem 0 .75rem; }
code { background: var(--codigo-fondo); border-radius: var(--r-sm); padding: 0 .3em; font-size: .9em; }
.clave { font: .8rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--tenue); word-break: break-all; }

/* Botones: mínimo 44 px de alto */
button, .btn-secundario, .btn-principal { font: inherit; min-height: 44px; border-radius: var(--r); cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .6; }
.btn-principal { background: var(--acento); color: var(--acento-texto); border: 0; padding: .6rem 1.25rem; font-weight: 500; box-shadow: var(--sombra-boton); }
.btn-principal:hover:not(:disabled) { background: var(--acento-hover); }
.btn-secundario { display: inline-flex; align-items: center; gap: .4rem; background: var(--superficie); color: var(--tenue);
  border: 1px solid var(--tenue); padding: .5rem .9rem; font-weight: 500; text-decoration: none; }
.btn-secundario:hover { background: var(--hover-sec); color: var(--tenue); }
.btn-texto { background: none; border: 0; color: var(--acento); padding: .5rem .6rem; }
.btn-texto[aria-current="true"] { color: var(--titulo); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* Cabecera (se desplaza) y barra fija de avance */
.cabecera { background: var(--superficie); box-shadow: var(--sombra-pequena); }
.cabecera-in { padding: .25rem var(--margen); display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; }
.marca { font-weight: 700; color: var(--titulo); text-decoration: none; margin-right: auto; min-height: 44px; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 .6rem; }
.marca:hover { color: var(--titulo); }
.marca-logo { display: block; height: 26px; width: auto; }
.marca-nombre { font-size: 1.125rem; }
.marca-sub { font-weight: 400; color: var(--tenue); }
.cabecera form { margin: 0; display: flex; }
.quien { color: var(--tenue); }
.volver { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; padding: .5rem .6rem; color: var(--acento); font-weight: 600; }
.barra-in.con-volver { grid-template-columns: auto 1fr auto; }
.con-volver .volver { grid-column: 1; grid-row: 1 / span 2; }
.con-volver .avance, .con-volver .guardado { grid-column: 2; }
.con-volver #abrir-glosario { grid-column: 3; }
.barra-fija { position: sticky; top: 0; z-index: 5; background: var(--superficie); border-bottom: 1px solid var(--borde); box-shadow: var(--sombra-pequena); }
.barra-in { padding: .4rem var(--margen); display: grid; grid-template-columns: 1fr auto; gap: .1rem .75rem; align-items: center; }
.avance { min-width: 0; }
.avance progress { width: 100%; height: 8px; accent-color: var(--acento); display: block; }
.avance-txt { margin: .15rem 0 0; font-size: .9rem; font-variant-numeric: tabular-nums; }
.guardado { grid-column: 1; margin: 0; font-size: .85rem; color: var(--tenue); }
.guardado[data-tipo="offline"], .guardado[data-tipo="sesion"], .guardado[data-tipo="error"] { color: var(--error); font-weight: 600; }
#abrir-glosario { grid-column: 2; grid-row: 1 / span 2; }

.pagina { padding: .5rem var(--margen) 4rem; }
.aviso { background: var(--aviso-fondo); color: var(--aviso-texto); border-radius: var(--r); padding: .75rem 1rem; font-weight: 500; }
.aviso-error { background: var(--error-fondo); color: var(--error-sobre); font-weight: 600; }
.vacio { color: var(--tenue); padding: 1rem 0; }

.instrucciones { background: var(--superficie); border-radius: var(--r); box-shadow: var(--sombra-card); padding: .25rem 1rem; margin-bottom: 1rem; }
.instrucciones summary { cursor: pointer; font-weight: 600; color: var(--titulo); min-height: 44px; display: flex; align-items: center; }
.instrucciones ol { padding-left: 1.25rem; margin: .25rem 0 .75rem; }
.instr-propias { white-space: pre-line; border-top: 1px solid var(--borde); padding: .75rem 0; }

/* Filtros */
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.chip { background: var(--superficie); color: var(--texto); border: 1px solid var(--borde-campo); padding: .35rem .8rem; font-weight: 500; }
.chip[aria-pressed="true"] { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); }
.cuenta { font-variant-numeric: tabular-nums; margin-left: .25rem; opacity: .85; }
.buscar { display: grid; gap: .25rem; font-size: .9rem; color: var(--tenue); margin-bottom: .5rem; max-width: 36rem; }
input, textarea { font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borde-campo);
  border-radius: var(--r); padding: .55rem .7rem; width: 100%; min-height: 44px; }
textarea { resize: vertical; line-height: 1.45; }
input:focus, textarea:focus { border-color: var(--acento); }

/* Tarjetas */
.grupo h2 { position: relative; }
.cuenta-grupo { color: var(--tenue); font-weight: 400; font-size: .9rem; }
.tarjeta { background: var(--superficie); border: 0; border-left: 3px solid transparent; box-shadow: var(--sombra-card);
  border-radius: var(--r); padding: .75rem 1rem 1rem; margin-bottom: .75rem; content-visibility: auto; contain-intrinsic-size: auto 320px; }
.tarjeta[data-estado="ok"] { border-left-color: var(--ok-borde); }
.tarjeta[data-estado="cambiar"] { border-left-color: var(--cambiar-borde); }
.tarjeta.con-fallo { border: 1px solid var(--error-borde); border-left-width: 3px; }
.tarjeta-cab { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.confianza { display: inline-block; font-family: var(--fuente); font-size: .75rem; padding: 0 .4rem; border-radius: var(--r-sm);
  border: 1px solid var(--borde-campo); color: var(--tenue); margin-left: .35rem; }
.confianza-duda { border-color: var(--cambiar-borde); color: var(--cambiar); font-weight: 600; }
.etq-estado { font-size: .85rem; font-weight: 600; color: var(--tenue); white-space: nowrap; }
.tarjeta[data-estado="ok"] .etq-estado { color: var(--ok); }
.tarjeta[data-estado="cambiar"] .etq-estado { color: var(--cambiar); }
.textos { margin: .5rem 0; display: grid; gap: .4rem; }
.textos div { display: grid; grid-template-columns: 9.5rem 1fr; gap: .75rem; }
.textos dt { color: var(--tenue); font-size: .85rem; padding-top: .1rem; }
.textos dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; max-width: var(--lectura); }
.textos .actual dd { font-size: 1.15rem; font-weight: 600; color: var(--titulo); }
.nota { font-size: .9rem; color: var(--tenue); margin: .25rem 0 .5rem; max-width: var(--lectura); }
.acciones { display: flex; gap: .5rem; margin: .75rem 0 .5rem; }
.btn-estado { flex: 1 1 0; max-width: 12rem; background: var(--superficie); color: var(--texto); border: 2px solid var(--borde-campo); font-weight: 600; }
.btn-estado[data-accion="ok"][aria-pressed="true"] { background: var(--ok-fondo); border-color: var(--ok-fondo); color: var(--ok-texto); }
.btn-estado[data-accion="cambiar"][aria-pressed="true"] { background: var(--cambiar-fondo); border-color: var(--cambiar-fondo); color: var(--cambiar-texto); }
.propuesta { margin: .5rem 0; }
.propuesta label, .etq-comentario { display: block; font-size: .9rem; color: var(--tenue); margin: .5rem 0 .25rem; }
.propuesta textarea { font-size: 1.1rem; }
.nota-tabla { color: var(--tenue); font-size: .9rem; margin: -.25rem 0 .75rem; max-width: var(--lectura); }
.ayuda-admin { margin-top: 1.75rem; }
.ayuda-admin dt { font-weight: 600; margin-top: .75rem; }
.ayuda-admin dd { margin: .15rem 0 0; overflow-wrap: anywhere; max-width: var(--lectura); }
.ayuda-admin dl { margin: 0 0 .75rem; }
.requisitos { font-size: .85rem; color: var(--tenue); margin: .35rem 0 0; }
.validacion .fallo-tit { color: var(--error); font-weight: 600; margin: .5rem 0 .25rem; }
.validacion ul { margin: 0; padding-left: 1.25rem; color: var(--error); font-size: .9rem; overflow-wrap: anywhere; }
.aviso-cambio { background: var(--error-fondo); color: var(--error-sobre); font-weight: 600; border-radius: var(--r); padding: .5rem .75rem; margin: .5rem 0; }
.validacion .igual { color: var(--tenue); font-size: .9rem; margin: .35rem 0 0; }

/* Tablas: en el móvil cada fila pasa a tarjeta con su etiqueta */
.tabla-envoltorio { overflow-x: auto; border-radius: var(--r); box-shadow: var(--sombra-card); }
.tabla { width: 100%; border-collapse: collapse; background: var(--superficie); }
.tabla th, .tabla td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla thead th { font-size: .8125rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--titulo); }
.tabla tbody th { font-weight: 600; color: var(--titulo); }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .clave { word-break: normal; white-space: nowrap; }
.acciones-fila a { display: inline-block; padding: .55rem .4rem; min-height: 44px; }
.marca-fallo { color: var(--error); font-weight: 600; }
@media (max-width: 640px) {
  .textos div { grid-template-columns: 1fr; gap: 0; }
  .tabla:not(.tabla-glosario) thead { display: none; }
  .tabla:not(.tabla-glosario) tr { display: block; border-bottom: 2px solid var(--borde); padding: .25rem 0; }
  .tabla:not(.tabla-glosario) th, .tabla:not(.tabla-glosario) td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .3rem .75rem; text-align: right; }
  .tabla:not(.tabla-glosario) td::before { content: attr(data-etq); color: var(--tenue); text-align: left; }
  .btn-estado { max-width: none; }
  .barra-in.con-volver { grid-template-columns: 1fr auto; }
  .con-volver .volver { grid-column: 1 / -1; grid-row: 1; justify-self: start; padding-left: 0; }
  .con-volver .avance, .con-volver .guardado { grid-column: 1; }
  .con-volver #abrir-glosario { grid-column: 2; grid-row: 2 / span 2; }
}

/* Pantalla ancha (≥ 1024 px): el ancho se aprovecha, no solo se estira. Original a la izquierda, acción a la derecha;
   las instrucciones en dos columnas; los párrafos siguen en --lectura (75ch). Por debajo, todo apilado como antes. */
@media (min-width: 1024px) {
  .tarjeta-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .col-origen { padding-right: 2rem; }
  .col-accion { padding-left: 2rem; border-left: 1px solid var(--borde); }
  .col-accion .acciones { margin-top: .5rem; }
  .instr-cuerpo { display: grid; grid-template-columns: minmax(0, var(--lectura)) minmax(0, 1fr); gap: 0 2rem; }
  .instr-cuerpo ol { margin-bottom: .75rem; }
  .instr-propias { border-top: 0; border-left: 1px solid var(--borde); padding: .25rem 0 .25rem 2rem; max-width: 48em; }
  .lista-idiomas { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
  .panel { width: min(64rem, calc(100vw - 10vw)); }
}

/* Entrada */
.entrada { max-width: 24rem; margin: 10vh auto 0; padding: 0 16px; }
.entrada-marca { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; font-weight: 700; color: var(--titulo); }
.entrada .marca-logo { height: 36px; }
.entrada .sub { color: var(--tenue); margin-top: -.75rem; }
.form-entrada { display: grid; gap: .4rem; }
.form-entrada label { margin-top: .5rem; font-weight: 600; }
.form-entrada button { margin-top: 1rem; }
.lista-idiomas { list-style: none; padding: 0; display: grid; gap: .75rem; }

/* Glosario */
.panel { border: 0; border-radius: var(--r); box-shadow: var(--sombra-flotante); background: var(--superficie); color: var(--texto);
  width: min(42rem, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0 1rem 1rem; }
.panel::backdrop { background: rgb(0 0 0 / .45); }
.panel-cab { position: sticky; top: 0; background: var(--superficie); display: flex; justify-content: space-between; align-items: center; padding-top: .5rem; }
.panel-cab h2 { margin: .5rem 0; }
.tabla-glosario td { overflow-wrap: anywhere; }