/* ==========================================================================
   LA CARA DE BIOBLAS — una sola hoja para todas las pantallas del sistema.

   GENERADO por tools/construir_casa.py desde el estilo del tablero, que es
   el modelo que eligió Marcos Blasoni el 23-09-2026: «la que uso yo creo que
   está bien, con esa comenzamos, y que todo el mundo la vea así».

   NO SE EDITA A MANO. Se cambia el modelo y se vuelve a correr el programa;
   si se edita aquí, el próximo cambio del tablero lo borra.
   ========================================================================== */

/* Las letras de la marca no se piden aquí: las pone el servidor sin frenar el dibujo
   (herramientas.poner_la_cara y pwa.inyectar, tanda 11). */


/* ---------- LOS COLORES DE LA CASA (tema claro) ---------- */
:root{
  --ground: #EDF0F2;
  --surface: #FFFFFF;
  --surface-2: #F6F8F9;
  --surface-3: #E3E8EB;
  --ink: #0D1A20;
  --ink-2: #41545F;
  --ink-3: #6E828D;
  --line: #D3DBE0;
  --line-2: #C0CBD2;
  --accent: #1264A8;
  --accent-soft: #E4EEF7;
  --accent-ink: #0B4C82;
  --rojo: #C63A34;
  --rojo-ink: #A22B26;
  --rojo-soft: #FAE9E8;
  --ambar: #D68C0A;
  --ambar-ink: #8E5C05;
  --ambar-soft: #FBF0DC;
  --verde: #0F8F63;
  --verde-ink: #0A6647;
  --verde-soft: #E1F2EB;
  --cerrado: #CBD5DB;
  --cerrado-2: #B6C3CB;
  --shadow: 0 1px 2px rgba(13,26,32,.06), 0 8px 24px -12px rgba(13,26,32,.18);
  --shadow-lg: 0 2px 6px rgba(13,26,32,.08), 0 24px 48px -20px rgba(13,26,32,.32);
  --r: 10px;
  --r-s: 6px;
  --f-display: 'Poppins',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --f-body: 'Poppins',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --f-mono: 'Poppins',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --medida: 100ch;
  --lec-tope: .9rem;
  --marca: #08355F;
  --logo-filtro: none;
}

/* ---------- TEMA OSCURO: el del teléfono, y el que se elige a mano ----------
   El logo es azul oscuro sobre fondo transparente: sin el filtro DESAPARECE.
   No es cosmético — está en el manual de identidad. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
      --ground: #0C1317;
      --surface: #141D22;
      --surface-2: #1A252B;
      --surface-3: #25333A;
      --ink: #E8EFF2;
      --ink-2: #A3B5BF;
      --ink-3: #7A8D97;
      --line: #25333A;
      --line-2: #33454E;
      --accent: #4796DC;
      --accent-soft: #132B3F;
      --accent-ink: #7FB8EA;
      --rojo: #EE5A57;
      --rojo-ink: #F4837F;
      --rojo-soft: #2E1717;
      --ambar: #D9A62A;
      --ambar-ink: #E7BC55;
      --ambar-soft: #2B2210;
      --verde: #25A876;
      --verde-ink: #4CC496;
      --verde-soft: #0F2620;
      --cerrado: #0A1014;
      --cerrado-2: #182228;
      --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
      --shadow-lg: 0 2px 6px rgba(0,0,0,.5), 0 24px 48px -20px rgba(0,0,0,.8);
      --marca: #7FB2DA;
      --logo-filtro: brightness(0) invert(1) opacity(.92);
  }
}

:root[data-theme="dark"]{
  --ground: #0C1317;
  --surface: #141D22;
  --surface-2: #1A252B;
  --surface-3: #25333A;
  --ink: #E8EFF2;
  --ink-2: #A3B5BF;
  --ink-3: #7A8D97;
  --line: #25333A;
  --line-2: #33454E;
  --accent: #4796DC;
  --accent-soft: #132B3F;
  --accent-ink: #7FB8EA;
  --rojo: #EE5A57;
  --rojo-ink: #F4837F;
  --rojo-soft: #2E1717;
  --ambar: #D9A62A;
  --ambar-ink: #E7BC55;
  --ambar-soft: #2B2210;
  --verde: #25A876;
  --verde-ink: #4CC496;
  --verde-soft: #0F2620;
  --cerrado: #0A1014;
  --cerrado-2: #182228;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.5), 0 24px 48px -20px rgba(0,0,0,.8);
  --marca: #7FB2DA;
  --logo-filtro: brightness(0) invert(1) opacity(.92);
}

/* ---------- LOS SINÓNIMOS ----------
   Cada hoja se escribió con su propio vocabulario: medido el 23-09, hay 174
   nombres distintos para los mismos colores. En vez de reescribir 29 hojas,
   la casa entiende los dos idiomas: una hoja que dice var(--acento) ya está
   mostrando el acento de la casa.

   Solo el NÚCLEO. Un color propio del contenido de una hoja se queda en esa
   hoja: no es identidad, es información. */
:root{
  --acento: var(--accent);
  --acento-soft: var(--accent-soft);
  --acento-ink: var(--accent-ink);
  --azul-vivo: var(--accent);
  --enlace: var(--accent);
  --accion: var(--accent);
  --tinta: var(--ink);
  --texto: var(--ink);
  --ink-soft: var(--ink-2);
  --tinta-2: var(--ink-2);
  --texto-2: var(--ink-2);
  --muted: var(--ink-2);
  --tinta-3: var(--ink-3);
  --ink-faint: var(--ink-3);
  --gris: var(--ink-3);
  --tinta-suave: var(--ink-3);
  --gris-suave: var(--ink-3);
  --papel: var(--surface);
  --superficie: var(--surface);
  --sup: var(--surface);
  --tarjeta: var(--surface);
  --card: var(--surface);
  --panel: var(--surface);
  --papel-2: var(--surface-2);
  --sup-2: var(--surface-2);
  --panel-2: var(--surface-2);
  --suave: var(--surface-2);
  --raised: var(--surface-2);
  --papel-3: var(--surface-3);
  --fondo: var(--ground);
  --claro: var(--ground);
  --linea: var(--line);
  --borde: var(--line);
  --rule: var(--line);
  --marco: var(--line);
  --line-soft: var(--line);
  --rule-soft: var(--line);
  --linea-2: var(--line-2);
  --rule-2: var(--line-2);
  --ok: var(--verde);
  --ok-soft: var(--verde-soft);
  --ok-bg: var(--verde-soft);
  --ok-suave: var(--verde-soft);
  --good: var(--verde);
  --good-soft: var(--verde-soft);
  --si: var(--verde);
  --si-soft: var(--verde-soft);
  --si-ink: var(--verde-ink);
  --pos: var(--verde);
  --pos-soft: var(--verde-soft);
  --verde-suave: var(--verde-soft);
  --verde-fondo: var(--verde-soft);
  --verde-f: var(--verde);
  --alert: var(--rojo);
  --alerta: var(--rojo);
  --alert-soft: var(--rojo-soft);
  --alerta-soft: var(--rojo-soft);
  --alerta-suave: var(--rojo-soft);
  --risk: var(--rojo);
  --risk-bg: var(--rojo-soft);
  --no: var(--rojo);
  --no-soft: var(--rojo-soft);
  --no-ink: var(--rojo-ink);
  --neg: var(--rojo);
  --neg-soft: var(--rojo-soft);
  --stop: var(--rojo);
  --stop-soft: var(--rojo-soft);
  --rojo-fondo: var(--rojo-soft);
  --rojo-f: var(--rojo);
  --warn: var(--ambar);
  --warn-soft: var(--ambar-soft);
  --warn-bg: var(--ambar-soft);
  --senal: var(--ambar);
  --senal-suave: var(--ambar-soft);
  --ambar-fondo: var(--ambar-soft);
  --ambar-f: var(--ambar);
  --sombra: var(--shadow);
  --sh: var(--shadow);
  --radius: var(--r);
  --radio: var(--r);
  --f-d: var(--f-display);
  --display: var(--f-display);
  --f-b: var(--f-body);
  --cuerpo: var(--f-body);
  --sans: var(--f-body);
  --f-m: var(--f-mono);
  --dato: var(--f-mono);
}

/* ---------- LAS PIEZAS COMUNES ----------
   Lo que toda pantalla del sistema comparte: la barra de arriba con el logo,
   el ancho de la página, la tarjeta y el rótulo. Copiadas del mismo modelo. */
body{
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

/* LA BARRA DE ARRIBA — es la que hace que dos pantallas se reconozcan como la misma casa. */
.casa-barra{
  position: sticky; top: 0; z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.casa-barra-in{
  display: flex; align-items: center; gap: 18px;
  padding: 11px 24px; max-width: 1340px; margin: 0 auto; flex-wrap: wrap;
}
/* El logo conserva su proporción: nunca alto Y ancho a la vez. */
.casa-logo{ height: 27px; width: auto; flex: none; display: block; filter: var(--logo-filtro); }
.casa-titulo{ font-family: var(--f-display); font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.casa-sep{ flex: 1 1 auto; }
.casa-quien{ font-size: 13px; color: var(--ink-3); }
/* 40 px de alto: lo mínimo cómodo para el pulgar en un teléfono. */
.casa-salir{
  color: var(--ink-2); text-decoration: none; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); border-radius: var(--r-s);
  padding: 9px 13px; min-height: 40px; display: inline-flex; align-items: center;
}
.casa-salir:hover{ color: var(--accent); border-color: var(--accent); }

.casa-wrap{ max-width: 1340px; margin: 0 auto; padding: 0 24px; }
.casa-card{
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow);
}
.casa-eyebrow{
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}

/* En el teléfono se achica el margen lateral, no el contenido. */
@media (max-width: 720px){
  .casa-barra-in{ padding: 10px 15px; gap: 10px; }
  .casa-wrap{ padding: 0 15px; }
  .casa-logo{ height: 23px; }
}