/* ============================================================
   BASE — lo compartido del editor TR3BOL
   Etapa 0 del rediseño de flujo: andamios invisibles. Este archivo NO agrega ni cambia
   nada de lo que se ve; solo saca del <style> de index.html las reglas que ya usaban
   dos o más vistas (o dos o más módulos) y las pone donde se puedan leer de una.

   POR QUÉ EL <link> VA ÚLTIMO, DESPUÉS DE LOS 8 MÓDULOS
   Hasta ahora estas reglas vivían en el <style> del index, que va después de todos los
   <link>: en un empate de especificidad contra banco.css / marca.css / etc., ganaban
   ellas. Con el <link> de base.css al final de la lista, ese orden queda igual. Moverlo
   más arriba cambiaría quién gana los empates — que es exactamente la clase de cosa que
   esta etapa promete no hacer.

   Solo tokens de /tokens.css. Los dos hex que quedan (var(--sobre-ambar) y var(--sobre-turquesa)) vienen tal cual
   de donde estaban: son texto sobre ámbar y sobre turquesa, no tienen token todavía y
   esta etapa no inventa valores nuevos.
   ============================================================ */

/* ---------- 1 · reset y elementos ----------
   marca.css:5 documenta que depende de la regla de select/button/textarea/input de acá:
   si esta se mueve o se toca, esa hoja se entera. */
*{ box-sizing: border-box; }
body{
  margin: 0; background: var(--bg); color: var(--ink);
  font: 14px/1.45 var(--f-ui);
}
select, button, textarea, input{
  font: inherit; background: var(--s2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-4);
}
button{ cursor:pointer; }
button:hover{ border-color: var(--ink-2); }
button.primary{ background: var(--ambar); color:var(--sobre-ambar); border-color: var(--ambar); font-weight:600; }
button.primary:hover{ filter: brightness(1.08); }
button:disabled{ opacity:.4; cursor:not-allowed; }
:focus-visible{ outline: 2px solid var(--turquesa); outline-offset: 2px; }

/* ---------- el dedo ----------
   Medido a 390px: «Producir» y «Responder» —los dos botones que mueven el trabajo— salían
   de 24px de alto, y la hamburguesa de 27. Apple pide 44 y Material 48: la app entera
   estaba dimensionada para un mouse. Sube el MÍNIMO, no el tamaño: un botón que ya llega
   no se mueve, así que en escritorio no cambia nada y a 390 los controles dejan de pedir
   puntería. El padding vertical baja a la mitad para que el texto siga centrado sin que la
   fila crezca más de lo necesario.

   `hover: none` además del ancho: una tablet táctil de 900px tiene el mismo dedo que un
   teléfono, y una ventana angosta en una compu con mouse no lo necesita — pero el `or` de
   la coma cubre las dos, que es lo prudente cuando el costo de equivocarse es un botón
   grande de más. */
@media (hover: none), (max-width: 700px){
  button, .button, select, [role="button"], a.button{
    min-height:44px; padding-top:var(--sp-1); padding-bottom:var(--sp-1);
  }
  /* Solo el mínimo y el padding. NO se toca el `display` ni se agrega `gap`: un botón ya
     centra su contenido vertical solo, y ponerle inline-flex con gap le cambia la
     distribución ADENTRO — las solapas de sección, que llevan un puntito, el nombre y dos
     contadores, se ensanchaban hasta empujar «Números» fuera de la pantalla. */
  /* Los que son un enlace de texto adentro de una frase no se inflan: convertirlos en
     cajas de 44px rompe el párrafo donde viven. Se les da alto de línea generoso y ya. */
  a:not(.button){ line-height:1.7; }
}

/* ---------- 2 · raíz del layout ----------
   Compartida: panel-crear.css también escribe reglas sobre .app. */
.app{ display:flex; min-height:100vh; }

/* ---------- 3 · tarjeta y campos ----------
   .field y .field-hint-fijo son las clases más reusadas de la app: las escriben banco,
   branding, conocimiento, ia, marca y métricas además del index. */
.card{
  background: var(--s1); border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--sp-6); margin-bottom:var(--sp-5);
}
.card h3{ margin: 0 0 var(--sp-4); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.card h3 .n{ color: var(--ambar-ink); font-family: var(--f-mono); }
.field{ margin-bottom: var(--sp-3); }
.field label{ display:block; font-size: var(--fs-xs); color: var(--ink-2); margin-bottom: 3px; }
.field-hint{ font-size:10.5px; color:var(--ink-3); margin:2px 0 var(--sp-1); line-height:1.35; }
.field-hint-fijo{ font-size:10.5px; color:var(--ink-3); margin:2px 0 var(--sp-1); line-height:1.35; }
.ayudas-ocultas .field-hint{ display:none; }
.field textarea, .field input{ width: 100%; resize: vertical; }

/* ---------- 4 · texto auxiliar ---------- */
.readonly{ color: var(--ink-2); font-size:var(--fs-sm); }
.empty{ color: var(--ink-2); padding: 40px; text-align:center; }

/* ---------- 5 · .spacer, una sola vez ----------
   El "empujá lo que sigue hasta la otra punta" estaba escrito catorce veces, con cuatro
   nombres distintos y siempre la misma declaración. Se define una vez y los nombres
   viejos entran como alias: NADA se renombra en el HTML ni en el JS, así que todo lo que
   ya decía class="mk-sp" o class="fb-spacer" sigue funcionando igual. */
.spacer,
.cr-sp,     /* carrusel — index.html */
.mk-sp,     /* marca.js */
.fb-spacer  /* feedback.js */
{ flex:1; }

/* ---------- 6 · alias .on == .active ----------
   .on es la clase de "seleccionado" del repo (design/ARQUITECTURA-PANTALLA.md:212-218
   documenta la colisión que causó .sel). Hoy conviven .on y .active según quién escribió
   cada control. Acá se declara el alias para que la migración pueda ser gradual: las dos
   valen, y en esta etapa no se migra ni un solo nodo. Las declaraciones son copia exacta
   de sus .active, que siguen viviendo en el <style> del index. */
.nav-item.on{ color:var(--ink); font-weight:600; }
.nav-item.on::before{
  content:""; position:absolute; left:calc(var(--gut) - 3px); top:7px; bottom:7px;
  width:2px; background:var(--turquesa); border-radius:2px;
}
.nav-item.on .nav-badge{ background:var(--turquesa-dim); color:var(--turquesa-ink); }
.tabs button.on{ background: var(--turquesa); color:var(--sobre-turquesa); border-color: var(--turquesa); }
.seg button.on{ background:var(--s1); color:var(--ink); font-weight:600; }
.seg-lg button.on .paso{ color:var(--ambar-ink); }

/* ============================================================
   COMPONENTES DEFINIDOS Y TODAVÍA SIN USAR
   Nada del HTML ni del JS de hoy los toca: existen para que las etapas siguientes del
   rediseño tengan dónde apoyarse sin volver a inventar el patrón. Mientras nadie escriba
   estas clases, no pintan un solo píxel.

   NO SON RESTOS DE ALGO QUE SE BORRÓ, Y NADIE SE OLVIDÓ DE SACARLOS. Al 2026-08-26 ya
   pasaron las etapas 0, 1, 3 y 4 y los cuatro siguen sin un solo consumidor, que es
   exactamente lo previsto: quien los va a escribir es
     · .dlg / .dlg-fondo        → etapa 5 (un solo sistema de drawers y diálogos: es el
                                  destino de los prompt() y confirm() que quedan)
     · .menu / .menu-pop        → etapa 6 (jerarquía de acciones: la barra de perfil de
                                  Marca baja de 6 controles a 3 + menú)
     · .acciones-hover          → etapa 6 (las acciones de cada fila dejan de estar
                                  siempre visibles)
     · .aviso-deshacer          → etapa 6, junto con window.TR3BOL_DESHACER (base.js)
   Antes de borrar cualquiera de los cuatro por "no lo usa nadie", mirar el plan de nueve
   etapas en BACKLOG.md. Si esas etapas se descartan, ahí sí se van a legacy/.
   ============================================================ */

/* ---------- menú "…" (botón + popover) ----------
   El comportamiento (abrir, Escape, click afuera) vive en base.js. */
.menu{ position:relative; display:inline-block; }
.menu > .menu-btn{
  padding:3px 7px; font-size:var(--fs-sm); line-height:1;
  background:none; border:1px solid var(--line); color:var(--ink-2);
}
.menu > .menu-btn:hover{ border-color:var(--ink-2); color:var(--ink); }
.menu > .menu-pop{
  display:none; position:absolute; right:0; top:calc(100% + var(--sp-1)); min-width:172px;
  background:var(--s2); border:1px solid var(--line); border-radius:var(--r-sm);
  box-shadow:var(--shadow); padding:var(--sp-1); z-index:var(--z-drawer);
}
.menu.on > .menu-pop{ display:block; }
.menu-pop button{
  display:block; width:100%; text-align:left; background:none; border:0;
  border-radius:var(--r-xs); padding:var(--sp-2) var(--sp-3);
  font-size:var(--fs-sm); color:var(--ink-2);
}
.menu-pop button:hover{ background:var(--s3); color:var(--ink); border-color:transparent; }
.menu-pop button[disabled]{ opacity:.4; }
.menu-pop .menu-sep{ height:1px; background:var(--line-soft); margin:var(--sp-1) 0; }
.menu-pop .peligro{ color:var(--rojo-ink); }

/* ---------- diálogo chico ----------
   Destino de los prompt() y confirm() que todavía quedan. Se usa con .dlg-fondo afuera y
   .dlg adentro, como ya hace .banco-modal-overlay / .banco-modal. */
.dlg-fondo{
  position:fixed; inset:0; background:var(--velo); z-index:var(--z-dialog);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.dlg-fondo[hidden]{ display:none; }
.dlg{
  background:var(--s1); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); width:min(400px, 100%); padding:var(--sp-7) var(--sp-7) var(--sp-6);
}
.dlg h3{
  margin:0 0 var(--sp-4); font-size:var(--fs-sm); text-transform:uppercase;
  letter-spacing:.04em; color:var(--ink-2);
}
.dlg-texto{ font-size:var(--fs-md); color:var(--ink); line-height:var(--lh-base); }
.dlg .field{ margin-top:var(--sp-5); }
.dlg-acciones{ display:flex; align-items:center; gap:var(--sp-3); margin-top:var(--sp-7); }

/* ---------- acciones que aparecen al hover ----------
   El patrón está copiado a mano en .tema-row (index.html) y en las tarjetas del banco
   (banco.css). Acá queda una sola vez, con sus dos redes:
     · @media (hover:none)  → en touch el hover no existe nunca, así que se muestran
                              siempre en vez de quedar inalcanzables;
     · prefers-reduced-motion → sin transición, pero igual aparecen.
   Y :focus-within, que es lo que las hace alcanzables con el teclado.
   La altura queda reservada porque el nodo nunca sale del flujo: se apaga con opacity,
   no con display, así que la fila no salta cuando el mouse entra. */
.acciones-hover{
  display:flex; gap:var(--sp-2); flex:none;
  opacity:0; transition:opacity .12s ease;
}
*:hover > .acciones-hover,
*:focus-within > .acciones-hover,
.acciones-hover:focus-within{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .acciones-hover{ transition:none; } }
@media (hover: none){ .acciones-hover{ opacity:1; } }

/* ---------- aviso con Deshacer (window.TR3BOL_DESHACER) ----------
   El markup lo arma base.js. Visual copiado de .banco-aviso, que es de donde sale el
   patrón; la diferencia es que este es global y por eso va fijo abajo y centrado, en vez
   de empujar el contenido de una vista. */
.aviso-deshacer{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%);
  z-index:var(--z-aviso); max-width:min(560px, calc(100vw - var(--sp-9)));
  display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-5); border-radius:var(--r-sm);
  background:var(--turquesa-dim); border:1px solid var(--turquesa-line);
  color:var(--ink-2); font-size:var(--fs-sm); box-shadow:var(--shadow);
}
.aviso-deshacer[hidden]{ display:none; }
.aviso-deshacer button{
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--turquesa-ink); font-size:var(--fs-sm); font-weight:600; text-decoration:underline;
}


/* ---------- el botón de tema (pie de la sidebar) ----------
   Copia la forma de .fb-toggle, que es su vecino: los dos son "cosas de la app", no
   destinos del trabajo, y tienen que leerse como una misma lista. */
.tema-btn{
  display:flex; align-items:center; gap:var(--sp-3); width:100%; text-align:left;
  background:none; border:0; border-radius:0; cursor:pointer;
  padding:var(--sp-1) 0 var(--sp-1) var(--gut);
  font-family:var(--f-ui); font-size:var(--fs-sm); color:var(--ink-3);
}
.tema-btn:hover{ color:var(--turquesa-ink); }

/* El logo del header es `tr3bol-horizontal-white-text.png`: texto BLANCO, que sobre la
   sidebar clara desaparece. El Design System tiene la variante con texto oscuro al lado, y
   el server la sirve en /assets/logo-claro.png. Se cambia con `content` y no con JS para
   que no haya un parpadeo del logo equivocado: el <html> ya trae `data-tema` desde el
   <head>, así que la primera pintada ya sale con el que corresponde. */
:root[data-tema="claro"] .brand img{ content:url("/assets/logo-claro.png"); }
.tema-btn:focus-visible{ outline:2px solid var(--turquesa); outline-offset:2px; }
.tema-btn .tema-ico{ font-size:var(--fs-md); line-height:1; }
/* En el menú de 390 el pie tiene más aire y el botón es un blanco de dedo, no de mouse:
   44px es el mínimo de área táctil que recomienda tanto Apple como Material. */
@media (max-width: 900px){
  .tema-btn{ min-height:44px; font-size:var(--fs-md); }
}