/* =============================================================================
   Chamba · estilos
   =============================================================================
   DOS ESCALAS, Y NADA FUERA DE ELLAS.

   Antes había 20 tamaños de letra distintos y 23 de espaciado, elegidos uno por
   uno: 14.5px, 12.5px, 11.5px, gaps de 3, 5, 7, 9, 11, 13... Ningún sistema
   produce un 14.5. Y el efecto no es que algo se vea grande o pequeño: es que
   nada guarda relación con nada.

   Ahora todo se apoya en estas variables. Si un valor no está en la escala, se
   sube o se baja al más cercano; no se inventa uno nuevo.

   EL TEXTO NO CAMBIA DE TAMAÑO entre móvil y escritorio. Lo que cambia es el
   espaciado y el ancho de columna. Un 13px legible en un teléfono lo es también
   en un monitor; lo que sobra en el monitor es aire, no letra.

   La jerarquía se hace con PESO y COLOR antes que con tamaño. Tres pesos: 400
   normal, 600 destacado, 700 título. Nada más.
   ========================================================================== */

:root {
  /* --------------------------------------------------------------- color */
  /* LA PALETA APROBADA. Ningun color suelto en ningun sitio: todo sale de
     aqui. Las medidas de contraste estan comprobadas con la formula de WCAG,
     no a ojo — ver el bloque de reglas debajo.

     Los nombres viejos (--azul, --tinta2, --fondo...) siguen existiendo mas
     abajo como ALIAS de estos. No se renombraron 655 lineas de CSS y treinta
     estilos en linea del JS para cambiar una paleta: renombrar es donde se
     cuelan los errores, y esto es un cambio de valores. */
  --marino:           #1F3864;   /* base                                   */
  --marino-hondo:     #16294A;   /* fondos                                 */
  --marino-tenue:     #E7EBF2;   /* etiquetas                              */
  --terracota:        #D96C4F;   /* marca — GRAFICOS Y BORDES, nunca texto */
  --terracota-hondo:  #A8452A;   /* botones y texto terracota              */
  --terracota-tenue:  #F6E6DF;   /* etiquetas                              */
  --hueso:            #F7F5F2;   /* lienzo                                 */
  /* EL DEL PDF DE IDENTIDAD, sin tocar. Da 1.22:1 sobre hueso, o sea que el
     filo casi no se ve; la alternativa que llega a 3:1 es #9D8B71 y se ve
     bastante mas pesada. Esta puesto el del documento hasta que Ivan decida
     viendo las dos en /_arena. */
  --arena:            #E4DFD8;   /* bordes                                 */
  /* 4.50:1 sobre hueso, MEDIDO. Era #8C857C y daba 3.35:1: por debajo del
     minimo de texto normal de WCAG 2.2 AA. La regla de "14 px o mas" no
     salvaba nada, porque "texto grande" empieza en 18.66 px negrita o 24 px
     normal, no en 14.

     5.06:1, no 4.50. Se descarto #767068 —que da exactamente 4.50— porque un
     contraste que cumple por dos centesimas deja de cumplir en cuanto alguien
     cambie un fondo. Mismo matiz calido, un escalon mas. */
  --gris-calido:      #6E6860;   /* secundario                             */
  --piedra:           #55504A;   /* cuerpo                                 */
  --tinta:            #2A2622;   /* titulares                              */
  --papel:            #FFFFFF;

  /* Sobre un bloque grande terracota el texto va en este marron, NO en
     blanco: blanco sobre #D96C4F da 3.38:1 y esto da 5.28:1. Medido. */
  --sobre-terracota:  #2A1008;

  /* ------------------------------------------------------------ RESERVADOS
     Verde, ambar y rojo viven EXCLUSIVAMENTE dentro del anillo de afinidad y
     su etiqueta. Ni en el logo, ni en botones, ni en fondos, ni en avisos.
     Antes estaban en los chips de estado, en los avisos y en el panel; ahi
     ahora va la paleta de arriba.

     Y EL COLOR NUNCA VA SOLO: el anillo lleva siempre el numero dentro y la
     etiqueta escrita al lado. Asi sirve impreso en blanco y negro y para
     quien no distingue el verde del rojo — que es una de cada doce personas,
     o sea que con diez usuarios es probable. */
  --verde:     #81A91A;
  --ambar:     #E0A422;
  --rojo:      #C0433A;

  /* -------------------------------------------------------------- ALIAS
     Los nombres que ya usaban las 655 lineas de abajo, apuntando a la paleta
     nueva. No se inventa ningun valor: cada uno cae en el mas cercano. */
  --azul:      var(--marino);
  --azul2:     var(--terracota-hondo);  /* enlaces: 5.44:1 sobre hueso      */
  --tinta2:    var(--piedra);
  --tinta3:    var(--piedra);
  --gris:      var(--gris-calido);
  --gris2:     var(--gris-calido);
  --linea:     var(--arena);
  --linea2:    var(--arena);
  --fondo:     var(--hueso);

  /* ----------------------------------------------------------- espaciado */
  --e1:  4px;
  --e2:  8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;

  /* ---------------------------------------------------------- tipografía */
  /* La pila del sistema, sin descargar nada. Bricolage Grotesque es SOLO para
     el logotipo y portadas de marca; dentro del producto, nunca.

     PISO DURO EN 14 px. Antes --t1 era 12: ningun texto de la plataforma baja
     ya de 14, y por eso --t1 y --t2 valen lo mismo. Se conservan los dos
     nombres para no tocar las 655 lineas de abajo; lo que cambia es el valor. */
  --t1: 14px;   /* metadato 14/400 · antetitulo 14/700       */
  --t2: 14px;   /* era 13: sube al piso                      */
  --t3: 16px;   /* cuerpo 16/400                             */
  --t4: 19px;   /* tarjeta 19/700                            */
  --t5: 23px;   /* seccion 23/700                            */
  --t6: 30px;   /* titular 30/700                            */
  --t-control: 15px;  /* control 15/600                      */

  --peso-normal:   400;
  --peso-fuerte:   600;
  --peso-titulo:   700;

  --linea-alta:    1.6;    /* cuerpo 16/400 interlinea 1.6 */
  --linea-corta:   1.3;    /* títulos                  */

  /* ------------------------------------------------------------ controles */
  --control:       44px;
  /* Alto de la cabecera. Está declarado porque hay DOS barras pegajosas —la
     cabecera y los filtros del panel— y la de abajo tiene que pegarse debajo de
     la de arriba, no encima. Sin este número, las dos se quedan en top:0 y la
     segunda tapa el título y el avatar. Múltiplo de 8, como el resto. */
  --cabecera-alto: 72px;   /* alto mínimo de lo que se toca            */
  --control-bajo:  36px;   /* chips y botones secundarios              */
  --icono:         20px;

  /* --------------------------------------------------------------- radios */
  --r1:    6px;   /* controles pequeños  */
  --r2:   10px;   /* tarjetas y campos   */
  --r3:  999px;   /* píldoras            */

  --sombra: 0 1px 2px rgba(31,40,48,.06), 0 2px 8px rgba(31,40,48,.05);

  /* --------------------------------------------------------------- layout */
  --barra:        56px;    /* alto de la barra inferior de móvil */
  --lateral:     232px;    /* ancho del menú de escritorio       */
  --columna:     980px;    /* ancho máximo de lectura                    */
  --columna-form: 480px;   /* formularios cortos: más estrecho, se lee mejor */

  /* El ALTA. 480px sirve para un formulario de cuatro campos y no para la
     pantalla donde alguien decide entregarnos sus datos: ahí hay textos legales
     que se leen enteros, y en un monitor quedaba una franja estrecha en el
     centro con media pantalla vacía a los lados.

     760 es lo que cabe cómodo sin pasarse: por encima de ~80 caracteres por
     renglón el ojo pierde el salto de línea y leer un contrato se vuelve peor,
     no mejor. Esto es un máximo; en móvil manda el ancho de la pantalla. */
  --columna-alta:  760px;
  --alto-recorte: 168px;   /* vista previa de un texto largo             */
  /* Los textos legales del alta. 168px son seis renglones: leer un contrato así
     es hacer scroll dentro de scroll, y quien lo intenta abandona y acepta sin
     leer — que es exactamente lo que una autorización no puede provocar. */
  --alto-legal: 460px;
  --alto-recorte-largo: 336px;  /* el doble, para el texto desplegado    */
  --etiqueta-barra: 128px; /* ancho de la etiqueta en las barras de datos */
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--t3);
  line-height: var(--linea-alta);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--azul2); }

/* ------------------------------------------------------------------ arranque */
.arranque {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--e2);
  background: var(--azul);
}
.arranque-marca { color: var(--papel); font-size: var(--t6); font-weight: var(--peso-titulo); }
.arranque-nota  { color: var(--marino-tenue); font-size: var(--t2); }

/* ================================================================= ESTRUCTURA */

.marco { min-height: 100vh; display: flex; }

/* --- Menú lateral: SOLO escritorio ---------------------------------------- */
.lateral {
  display: none;
  width: var(--lateral); flex: 0 0 var(--lateral);
  background: var(--azul); color: var(--marino-tenue);
  padding: var(--e4) var(--e3); gap: var(--e1);
  position: sticky; top: 0; height: 100vh;
  flex-direction: column;
}
.lateral-marca {
  color: var(--papel); font-size: var(--t5); font-weight: var(--peso-titulo);
  padding: var(--e1) var(--e3) var(--e4);
}
.lateral button {
  display: flex; align-items: center; gap: var(--e3);
  width: 100%; text-align: left; border: none; background: transparent;
  border-radius: var(--r1); padding: var(--e3); min-height: var(--control);
  font-size: var(--t2); font-weight: var(--peso-normal); color: var(--marino-tenue);
}
.lateral button:hover { background: rgba(255,255,255,.07); color: var(--papel); }
.lateral button.activo { background: rgba(255,255,255,.13); color: var(--papel); font-weight: var(--peso-titulo); }
.lateral button.admin.activo { background: var(--terracota-hondo); }
.lateral .icono { font-size: var(--t4); width: var(--icono); text-align: center; }
.lateral .pie { margin-top: auto; padding: var(--e2) var(--e3); font-size: var(--t1); color: var(--gris-calido); }

/* --- Barra inferior: SOLO móvil ------------------------------------------- */
.barra-inferior {
  display: flex;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--papel);
  border-top: 1px solid var(--linea2);
  padding-bottom: env(safe-area-inset-bottom);
}
.barra-inferior button {
  position: relative;
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--e1);
  background: none; border: none; padding: var(--e2) var(--e1);
  min-height: var(--barra);
  color: var(--gris2); font-size: var(--t1); font-weight: var(--peso-fuerte);
}
.barra-inferior button.activo { color: var(--azul); }
.barra-inferior .icono { font-size: var(--t4); line-height: 1; }

.badge {
  background: var(--terracota-hondo); color: var(--papel);
  font-size: var(--t1); font-weight: var(--peso-titulo);
  border-radius: var(--r3); padding: 0 var(--e2);
  min-width: var(--e5); text-align: center;
}
.lateral .badge { margin-left: auto; }
.barra-inferior .badge {
  position: absolute; transform: translate(var(--e3), calc(var(--e1) * -1.5));
  padding: 0 var(--e1);
}

/* --- Contenido ------------------------------------------------------------ */
.contenido {
  flex: 1; min-width: 0;
  padding: 0 0 calc(var(--barra) + env(safe-area-inset-bottom) + var(--e3));
}
.cabecera {
  position: sticky; top: 0; z-index: 30;
  background: var(--papel); border-bottom: 1px solid var(--linea2);
  /* min-height declarado para que --cabecera-alto no sea una suposicion: la
     barra de filtros del panel se pega justo debajo usando ese mismo valor. */
  min-height: var(--cabecera-alto); box-sizing: border-box;
  padding: var(--e3) var(--e4); display: flex; align-items: center; gap: var(--e3);
}
.cabecera h1 { margin: 0; font-size: var(--t4); font-weight: var(--peso-titulo); color: var(--azul); }
.cabecera .crecer { flex: 1; }
.zona { padding: var(--e4); max-width: var(--columna); }

/* ------------------------------------------- el único punto de corte: 900px */
/* Lo que cambia es el AIRE y el ancho, nunca el tamaño de la letra. */
@media (min-width: 900px) {
  .lateral        { display: flex; }
  .barra-inferior { display: none; }
  .contenido      { padding-bottom: var(--e5); }
  .zona           { padding: var(--e5) var(--e6); }
  .cabecera       { padding: var(--e4) var(--e6); }
}

/* ==================================================================== PIEZAS */

.tarjeta {
  background: var(--papel); border: 1px solid var(--linea2);
  border-radius: var(--r2); box-shadow: var(--sombra);
  padding: var(--e4); margin-bottom: var(--e3);
}
.tarjeta.pulsable:active { transform: scale(.995); }

.fila { display: flex; align-items: center; gap: var(--e3); }
.crecer { flex: 1; min-width: 0; }
.apilado { display: flex; flex-direction: column; gap: var(--e1); min-width: 0; }
.truncado { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Jerarquía por PESO y COLOR, no por tamaño: cargo y empresa comparten cuerpo
   y se distinguen por peso y tinta. */
.cargo   { font-weight: var(--peso-titulo); font-size: var(--t3); color: var(--tinta); line-height: var(--linea-corta); }
.empresa { font-size: var(--t2); font-weight: var(--peso-normal); color: var(--gris); }
.meta    { font-size: var(--t1); color: var(--gris2); }

.anillo {
  width: var(--e7); height: var(--e7); flex: 0 0 var(--e7); border-radius: 50%;
  display: grid; place-items: center; font-weight: var(--peso-titulo); font-size: var(--t2);
}
.anillo > span {
  width: var(--e6); height: var(--e6); border-radius: 50%;
  background: var(--papel); display: grid; place-items: center;
}

.etiqueta {
  display: inline-flex; align-items: center; gap: var(--e1);
  font-size: var(--t1); font-weight: var(--peso-fuerte); padding: var(--e1) var(--e2);
  border-radius: var(--r3); border: 1px solid transparent; white-space: nowrap;
}
.etiquetas { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e2); }

/* --- Filtros -------------------------------------------------------------- */
.filtros { display: flex; flex-direction: column; gap: var(--e2); margin-bottom: var(--e3); }
.chips {
  display: flex; gap: var(--e2); overflow-x: auto; padding-bottom: var(--e1);
  scrollbar-width: none; -ms-overflow-style: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  border: 1px solid var(--linea); background: var(--papel); color: var(--tinta3);
  border-radius: var(--r3); padding: var(--e2) var(--e3); font-size: var(--t2);
  font-weight: var(--peso-fuerte); white-space: nowrap; min-height: var(--control-bajo);
}
.chip.activo { background: var(--azul); border-color: var(--azul); color: var(--papel); }
.chips-titulo {
  font-size: var(--t1); font-weight: var(--peso-titulo); color: var(--gris2);
  text-transform: uppercase; letter-spacing: .4px;
}

.buscador {
  width: 100%; border: 1px solid var(--linea); border-radius: var(--r2);
  padding: var(--e3); background: var(--papel); min-height: var(--control);
}

/* --- Formularios ---------------------------------------------------------- */
.campo { margin-bottom: var(--e4); }
.campo label { display: block; font-size: var(--t2); font-weight: var(--peso-fuerte); margin-bottom: var(--e1); color: var(--tinta2); }
.campo .ayuda { font-size: var(--t1); color: var(--gris2); margin-top: var(--e1); }
.campo .error { font-size: var(--t1); color: var(--terracota-hondo); margin-top: var(--e1); font-weight: var(--peso-fuerte); }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%; border: 1px solid var(--linea); border-radius: var(--r1);
  padding: var(--e3); background: var(--papel); min-height: var(--control);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--azul2); outline-offset: -1px; border-color: var(--azul2);
}

.boton {
  border: none; border-radius: var(--r1); padding: var(--e3) var(--e4);
  min-height: var(--control);
  font-weight: var(--peso-titulo); font-size: var(--t2);
  background: var(--azul); color: var(--papel);
}
.boton:disabled { opacity: .5; }
.boton.suave  { background: var(--papel); color: var(--azul); border: 1px solid var(--linea); }
.boton.verde  { background: var(--marino); }
.boton.rojo   { background: var(--terracota-hondo); }
.boton.ancho  { width: 100%; }

/* --- Avisos --------------------------------------------------------------- */
.aviso { border-radius: var(--r2); padding: var(--e3); font-size: var(--t2); margin-bottom: var(--e3); }
.aviso.error { background: var(--terracota-tenue); border: 1px solid var(--terracota); color: var(--terracota-hondo); }
.aviso.ok    { background: var(--marino-tenue); border: 1px solid var(--marino-tenue); color: var(--marino); }
.aviso.info  { background: var(--marino-tenue); border: 1px solid var(--marino-tenue); color: var(--marino); }

.vacio { text-align: center; padding: var(--e7) var(--e5); color: var(--gris2); }
.vacio .icono { font-size: var(--t6); display: block; margin-bottom: var(--e3); opacity: .5; }

/* --- Cifras --------------------------------------------------------------- */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e3); margin-bottom: var(--e4); }
@media (min-width: 620px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi {
  background: var(--papel); border: 1px solid var(--linea2); border-radius: var(--r2);
  padding: var(--e3); text-align: center; box-shadow: var(--sombra);
}
.kpi .n { font-size: var(--t6); font-weight: var(--peso-titulo); color: var(--azul); line-height: var(--linea-corta); }
.kpi .l { font-size: var(--t1); color: var(--gris); margin-top: var(--e1); }

.barra-dato { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e2); font-size: var(--t2); }
.barra-dato .et  { width: var(--etiqueta-barra); flex: 0 0 var(--etiqueta-barra); color: var(--tinta3); }
.barra-dato .via { flex: 1; height: var(--e2); background: var(--linea2); border-radius: var(--r3); overflow: hidden; }
.barra-dato .rel { height: 100%; background: var(--azul2); }
.barra-dato .vl  { width: var(--e6); text-align: right; font-weight: var(--peso-titulo); color: var(--tinta2); }
/* El motivo de cada criterio se alinea bajo su barra, sin un offset inventado. */
.barra-dato-motivo {
  font-size: var(--t1); color: var(--gris2);
  margin-left: calc(var(--etiqueta-barra) + var(--e3));
}

/* --- Panel de administrador ---------------------------------------------- */
.admin-marco { border-top: 3px solid var(--terracota-hondo); }
.admin-aviso {
  background: var(--terracota-tenue); border: 1px solid var(--terracota); color: var(--terracota-hondo);
  border-radius: var(--r2); padding: var(--e3); font-size: var(--t2);
  font-weight: var(--peso-fuerte); margin-bottom: var(--e4);
}
.tabla {
  width: 100%; border-collapse: collapse; font-size: var(--t2); background: var(--papel);
  border: 1px solid var(--linea2); border-radius: var(--r2); overflow: hidden;
}
.tabla th {
  text-align: left; background: var(--hueso); padding: var(--e3); font-size: var(--t1);
  text-transform: uppercase; letter-spacing: .4px; color: var(--gris); font-weight: var(--peso-titulo);
}
.tabla td { padding: var(--e3); border-top: 1px solid var(--linea2); }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Bloques de texto largo (legales, CV leído) --------------------------- */
.texto-largo {
  font-size: var(--t2); line-height: var(--linea-alta); white-space: pre-wrap;
  background: var(--fondo); border-radius: var(--r1); padding: var(--e3);
  margin-top: var(--e2);
}

/* --- Accesibilidad -------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--azul2); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ============================================================ panel del piloto
   Estructura copiada de la maqueta de diseno/. Todo en la escala: ningún px
   suelto en padding, margin, gap ni font-size.

   La ZONA de colocación rompe la paleta a propósito —crema y rojo— porque es
   lo que el producto NO controla, y esa separación visual es la que impide leer
   una contratación como mérito de la herramienta.                             */

.panel-cabeza {
  background: var(--azul); color: var(--papel); border-radius: var(--r1);
  padding: var(--e5); margin-bottom: var(--e4);
  display: flex; gap: var(--e5); flex-wrap: wrap; align-items: flex-start;
}
.panel-titulo { margin: var(--e1) 0 0; font-size: var(--t5); font-weight: var(--peso-titulo); }
.panel-bajada { margin-top: var(--e2); font-size: var(--t2); color: var(--marino-tenue); max-width: 46ch; }
.panel-kicker {
  font-size: var(--t1); text-transform: uppercase; letter-spacing: .6px;
  font-weight: var(--peso-fuerte); color: var(--gris2);
}
.panel-cabeza .panel-kicker { color: var(--marino-tenue); }
.panel-minis { display: flex; gap: var(--e3); flex-wrap: wrap; margin-left: auto; }
.panel-mini {
  background: var(--marino-hondo); border: 1px solid var(--marino); border-radius: var(--r1);
  padding: var(--e2) var(--e3); min-width: 0;
}
.panel-mini-valor { font-size: var(--t3); font-weight: var(--peso-fuerte); margin-top: var(--e1); }

.panel-filtros {
  /* Debajo de la cabecera, no encima: z-index menor Y desplazada su alto. */
  position: sticky; top: var(--cabecera-alto); z-index: 20;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--r1); padding: var(--e3) var(--e4); margin-bottom: var(--e4);
  display: flex; gap: var(--e5); align-items: flex-end; flex-wrap: wrap;
}
.panel-grupo { display: flex; flex-direction: column; gap: var(--e2); min-width: 0; }
.panel-chips { display: flex; gap: var(--e2); flex-wrap: wrap; }
.panel-chip {
  min-height: var(--control-bajo); padding: var(--e1) var(--e3);
  border: 1px solid var(--linea); border-radius: var(--r3);
  background: var(--papel); color: var(--gris); font-size: var(--t2); cursor: pointer;
}
.panel-chip.activo { background: var(--azul); color: var(--papel); border-color: var(--azul); }
.panel-n { margin-left: auto; color: var(--azul); font-weight: var(--peso-fuerte); font-size: var(--t2); }

.panel-tarjeta {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--r1); padding: var(--e4); margin-bottom: var(--e4);
}
.panel-destacada { border-top: 4px solid var(--terracota); }
.panel-h3 { margin: 0; font-size: var(--t3); font-weight: var(--peso-titulo); color: var(--tinta); }
.panel-sub { font-size: var(--t2); color: var(--gris); margin-top: var(--e1); }
.panel-apoyo { font-size: var(--t1); color: var(--gris); margin-top: var(--e3); line-height: 1.5; }

.panel-cifrona {
  font-size: var(--t6); font-weight: var(--peso-titulo); color: var(--marino);
  line-height: 1.1; margin-top: var(--e3);
}
.panel-cifra {
  font-size: var(--t5); font-weight: var(--peso-titulo); color: var(--azul); margin-top: var(--e2);
}
.panel-de { font-size: var(--t3); color: var(--gris2); font-weight: var(--peso-normal); }
.panel-frase { font-size: var(--t3); color: var(--tinta2); margin-top: var(--e1); }

.panel-grid-clave, .panel-grid2 { display: grid; gap: var(--e4); margin-bottom: var(--e4); }
.panel-grid4 { display: grid; gap: var(--e4); margin-bottom: var(--e4); }
.panel-grid-clave > *, .panel-grid2 > *, .panel-grid4 > * { margin-bottom: 0; }
@media (min-width: 760px) {
  .panel-grid2 { grid-template-columns: 1fr 1fr; }
  .panel-grid4 { grid-template-columns: repeat(4, 1fr); }
  .panel-grid-clave { grid-template-columns: 1fr 2fr; }
}

/* "No lo sabemos" tiene su propio aspecto y NO se parece a un cero. */
.panel-sindato {
  border: 1px dashed var(--linea); border-radius: var(--r1);
  padding: var(--e4); margin-top: var(--e3); background: var(--fondo);
}
.panel-sindato-titulo { font-size: var(--t3); color: var(--gris); font-weight: var(--peso-fuerte); }
.panel-sindato-chico {
  font-size: var(--t2); color: var(--gris2); font-style: italic; margin-top: var(--e2);
}

.panel-apilada {
  display: flex; height: var(--e5); border-radius: var(--r1);
  overflow: hidden; margin-top: var(--e3); background: var(--fondo);
}
.panel-tramo { height: 100%; }
.panel-leyenda { display: flex; gap: var(--e4); flex-wrap: wrap; margin-top: var(--e3); }
.panel-leyenda-item { font-size: var(--t1); color: var(--gris); display: flex; align-items: center; gap: var(--e1); }
.panel-punto { width: var(--e2); height: var(--e2); border-radius: var(--r3); display: inline-block; }

.panel-barras { margin-top: var(--e3); display: flex; flex-direction: column; gap: var(--e2); }
.panel-barra-fila { display: flex; align-items: center; gap: var(--e3); }
.panel-barra-etiqueta { font-size: var(--t2); color: var(--tinta2); flex: 0 0 auto; width: 14ch; }
.panel-barra-pista { flex: 1; background: var(--fondo); border-radius: var(--r1); min-width: 0; }
.panel-barra { height: var(--e4); border-radius: var(--r1); min-width: 2px; }
.panel-barra-valor { font-size: var(--t2); color: var(--tinta); font-weight: var(--peso-fuerte); width: 5ch; text-align: right; }

.panel-semanas { display: flex; gap: var(--e2); align-items: flex-end; margin-top: var(--e4); overflow-x: auto; }
.panel-semana { display: flex; flex-direction: column; align-items: center; gap: var(--e1); min-width: var(--e6); }
.panel-semana-pista { height: var(--e7); width: 100%; display: flex; align-items: flex-end; background: var(--fondo); border-radius: var(--r1); }
.panel-semana-barra { width: 100%; background: var(--azul2); border-radius: var(--r1); min-height: 2px; }
.panel-semana-valor, .panel-semana-eti { font-size: var(--t1); color: var(--gris); }

.panel-seccion { border-top: 2px solid var(--azul); padding-top: var(--e3); margin: var(--e6) 0 var(--e4); }

.panel-colocacion {
  background: var(--hueso); border: 1px solid var(--terracota-tenue); border-left: 5px solid var(--terracota-hondo);
  border-radius: var(--r1); padding: var(--e5); margin: var(--e6) 0 var(--e4);
}
.panel-h3-rojo { margin: 0; font-size: var(--t4); font-weight: var(--peso-titulo); color: var(--terracota-hondo); }
.panel-bajada-rojo { font-size: var(--t2); color: var(--piedra); margin-top: var(--e2); max-width: 70ch; }
.panel-embudo { margin-top: var(--e4); display: flex; flex-direction: column; gap: var(--e2); }

.tabla-desliza { overflow-x: auto; margin-top: var(--e3); }

/* Encuestas del piloto y citas del panel. */
.encuesta { border-left: 4px solid var(--azul2); }
.escala { display: flex; gap: var(--e1); flex-wrap: wrap; }
.escala .chip { min-width: var(--control-bajo); justify-content: center; }
.panel-cita {
  border-left: 3px solid var(--azul2); padding-left: var(--e3);
  font-size: var(--t3); color: var(--tinta2);
}

/* Detalle de vacante: borradores y citas. */
.titulo-bloque { margin: 0 0 var(--e2); font-size: var(--t3); color: var(--tinta2); font-weight: var(--peso-titulo); }
.sub-bloque { font-size: var(--t1); color: var(--gris); margin-bottom: var(--e3); line-height: 1.5; }
.rotulo {
  font-size: var(--t1); text-transform: uppercase; letter-spacing: .4px;
  color: var(--gris2); font-weight: var(--peso-titulo); margin-bottom: var(--e2);
}
.borrador {
  background: var(--fondo); border: 1px solid var(--linea2); border-radius: var(--r1);
  padding: var(--e3); font-size: var(--t2); line-height: 1.6; color: var(--tinta2);
  white-space: pre-line;      /* los saltos de parrafo del borrador son del texto */
}
.borrador.recortado { max-height: 108px; overflow: hidden; }
.fila-botones { display: flex; gap: var(--e2); margin-top: var(--e2); flex-wrap: wrap; }
.boton.texto { background: none; border: none; color: var(--azul2); padding: var(--e2) 0; }
.cita { border-left: 3px solid var(--azul2); padding-left: var(--e3); margin-bottom: var(--e3); }
.cita-texto { font-size: var(--t3); line-height: 1.55; color: var(--tinta2); }
.cita-pie { font-size: var(--t1); color: var(--gris); margin-top: var(--e1); }
.vacio-suave {
  border: 1px dashed var(--linea); border-radius: var(--r1);
  padding: var(--e4); background: var(--fondo);
}

/* ------------------------------------------------- pantallas de ancho completo
   `.zona` limita a --columna (980px) porque ese es el ancho en que se lee un
   texto sin perder el renglon. Un TABLERO no es un texto: sus tarjetas se
   comparan de un vistazo, y estrecharlas a 980 deja media pantalla vacia a la
   derecha mientras las columnas se apilan sin necesidad.

   Se marca la pantalla, no se toca `.zona`: los formularios y las lecturas
   siguen necesitando la columna estrecha.                                     */
.zona.ancha { max-width: none; }

/* ------------------------------------------- detalle de vacante en tres franjas
   El reparto sigue el TAMANO de lo que va dentro, no la simetria:

     1. cabecera + veredicto            ancho completo
     2. por que esta nota | hoja de vida   dos columnas parejas
     3. lo que dice la oferta, mensaje y carta   ancho completo

   La version anterior tenia dos columnas de arriba abajo. La derecha se agotaba
   enseguida —cuatro filas de hojas de vida— y dejaba medio metro de blanco al
   lado del texto, mientras las citas de la oferta salian estrujadas en una
   columna estrecha con ese vacio al lado.

   Las dos que se quedan enfrentadas son las dos LISTAS CORTAS: cinco criterios y
   cuatro versiones. Se parecen en alto, asi que se alinean solas.

   `align-items: stretch` para que las dos tarjetas midan lo mismo aunque su
   contenido no: sin eso, la mas corta deja un escalon.                        */
.detalle-columnas {
  display: flex; gap: var(--e4); align-items: stretch; flex-wrap: wrap;
  margin-bottom: var(--e4);
}
.detalle-col { flex: 1 1 360px; min-width: 320px; display: flex; }
.detalle-col > .tarjeta { flex: 1; margin-bottom: 0; }

/* La cabecera: identidad a la izquierda, estado y accion a la derecha. */
.cabecera-vacante { display: flex; gap: var(--e4); align-items: flex-start; flex-wrap: wrap; }
/* 340 y no 300: con 300 los chips de estado —"Descartada", "En entrevista"— se
   salian por el borde y quedaban cortados a media palabra. Y `min-width:0` para
   que el grupo de chips pueda encogerse y envolver en vez de desbordar: un hijo
   flex se niega por defecto a bajar de su ancho de contenido. */
.cabecera-acciones { flex: 0 1 340px; min-width: 300px; }
.cabecera-acciones .chips { flex-wrap: wrap; min-width: 0; }
.cabecera-acciones .chip { flex: 0 1 auto; }

/* En movil todo se apila en una columna, que es lo que hace flex-wrap solo con
   estas bases. No hace falta media query: 360+320 no caben por debajo de ~700px
   y caen uno debajo del otro. */
@media (max-width: 700px) {
  .cabecera-acciones { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------- estadísticas
   Misma retícula que la maqueta: KPIs en fila que se reacomodan, y dos filas de
   dos tarjetas que se apilan solas por flex-wrap, sin media query.            */
.cifras-cabeza { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e4); }
.cifras-titulo { margin: 0; font-size: var(--t5); font-weight: var(--peso-titulo); color: var(--azul); }
.pildora {
  background: var(--marino-tenue); border: 1px solid var(--marino-tenue); border-radius: var(--r3);
  padding: var(--e1) var(--e3); font-size: var(--t2); color: var(--azul);
}
.cifras-kpis { display: flex; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e4); }
.cifras-kpi {
  flex: 1 1 150px; min-width: 145px; background: var(--papel);
  border: 1px solid var(--linea); border-radius: var(--r2); padding: var(--e4);
}
.cifras-kpi-n { font-size: var(--t6); font-weight: var(--peso-titulo); line-height: 1.1; }
.cifras-kpi-sindato { font-size: var(--t3); color: var(--gris2); font-style: italic; padding: var(--e2) 0; }
.cifras-kpi-l { font-size: var(--t2); color: var(--gris); margin-top: var(--e1); }

.cifras-fila { display: flex; gap: var(--e4); flex-wrap: wrap; }
.cifras-fila > .tarjeta { flex: 1 1 300px; min-width: 280px; }

/* La linea de contexto: de donde salio el material. NO es una etapa, y por eso
   va en palabras y sin barra. Ver el comentario de ETAPAS en ui/cifras.js. */
.embudo-contexto {
  font-size: var(--t1); color: var(--gris); line-height: 1.5;
  padding-bottom: var(--e2); margin-bottom: var(--e3);
  border-bottom: 1px solid var(--linea2);
}

.embudo-fila { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e2); }
.embudo-eti { flex: 0 0 100px; font-size: var(--t2); color: var(--tinta3); }
.embudo-pista { flex: 1; min-width: 0; }
.embudo-barra { height: var(--e5); border-radius: var(--r3); min-width: 2px; }
/* 34 px daban para dos cifras. Al salir «Sugeridas» de las barras el numero mas
   grande pasa a ser el de «Revisadas», que son centenas: con el ancho viejo se
   cortaba igual que se cortaba el de la grafica por semana. */
.embudo-n {
  flex: 0 0 auto; min-width: 4ch; text-align: right;
  font-size: var(--t2); font-weight: var(--peso-titulo);
}

/* EL NUMERO YA NO SE CORTA.
   La caja media 128 px de alto FIJOS y dentro tenian que caber la pista de 88,
   el numero y la etiqueta. Con la escala nueva —el piso subio de 12 a 14 px—
   dejaron de caber y el numero de encima quedaba cortado por el borde de la
   tarjeta: se leia «50» a medias. Ahora el alto lo pone el contenido y la
   pista es lo unico con medida fija.
   Y las columnas NO se estiran: con una sola semana de datos, `flex: 1` daba
   una barra del ancho de toda la tarjeta con el resto vacio. */
.cifras-columnas { display: flex; align-items: flex-end; gap: var(--e3); margin-top: var(--e3); padding-top: var(--e2); overflow-x: auto; }
.cifras-columna { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: var(--e1); flex: 0 0 auto; width: 56px; }
.cifras-columna-pista { width: 100%; max-width: 26px; height: 96px; display: flex; align-items: flex-end; margin: 0 auto; }
.cifras-columna-barra { width: 100%; background: var(--marino); border-radius: var(--r1) var(--r1) 0 0; min-height: 6px; }
.cifras-columna-n { font-size: var(--t2); font-weight: var(--peso-titulo); }
.cifras-columna-eti { font-size: var(--t2); color: var(--gris2); }

.barra-bloque { margin-bottom: var(--e3); }
.barra-cabecera { display: flex; justify-content: space-between; gap: var(--e2); font-size: var(--t2); color: var(--tinta3); margin-bottom: var(--e1); }
.barra-pista { height: var(--e2); background: var(--fondo); border-radius: var(--r3); overflow: hidden; }
.barra-relleno { height: 100%; border-radius: var(--r3); }

.antes-despues { display: flex; align-items: baseline; gap: var(--e4); flex-wrap: wrap; margin-top: var(--e3); }
.antes   { font-size: var(--t6); font-weight: var(--peso-titulo); color: var(--gris); }
.despues { font-size: var(--t6); font-weight: var(--peso-titulo); color: var(--marino); }
.flecha  { font-size: var(--t5); color: var(--gris-calido); }

/* La hoja de vida recomendada, marcada con tres señales a la vez: una sola se
   pasa por alto. Fondo y borde propios, sello con la palabra, y botón primario. */
.hoja-fila {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e3); border-top: 1px solid var(--linea2);
  /* Con la palabra dentro del boton, en la columna estrecha el boton baja a su
     renglon en vez de estrujar el nombre de la version. */
  flex-wrap: wrap;
}
/* El boton no se encoge y el texto no se estruja: sin esto, el nombre de la
   version se partia en cuatro renglones contra el borde de la columna. */
.hoja-fila > .boton { flex: 0 0 auto; }
.hoja-fila > .crecer { min-width: 0; }
.hoja-fila.recomendada {
  background: var(--marino-tenue); border: 1px solid var(--marino-tenue); border-radius: var(--r1);
  /* Filo terracota: es la misma senal de "esto es lo importante" que llevan las
     tarjetas destacadas. Papel GRAFICO, no texto. */
  border-left: 3px solid var(--terracota);
  margin-top: var(--e2);
}
.sello-recomendada {
  font-size: var(--t1); color: var(--marino); font-weight: var(--peso-titulo);
  margin-top: var(--e1);
}

/* --------------------------------------------------------------- bienvenida
   Barra de pasos. Numerada y con marca de hecho: sin ella, quien va por el
   segundo de tres no sabe si le quedan dos o veinte, y abandonar a mitad de un
   trámite sin final visible es lo más fácil del mundo.                        */
.pasos { display: flex; gap: var(--e3); flex-wrap: wrap; }
.paso {
  display: flex; align-items: center; gap: var(--e2);
  font-size: var(--t2); color: var(--marino-tenue);
}
.paso.actual { color: var(--papel); font-weight: var(--peso-fuerte); }
.paso.hecho  { color: var(--marino-tenue); }
.paso-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--e5); height: var(--e5); border-radius: var(--r3);
  border: 1px solid currentColor; font-size: var(--t1); flex: 0 0 auto;
}
.paso.actual .paso-n { background: var(--papel); color: var(--azul); border-color: var(--papel); }
.paso.hecho .paso-n  { background: var(--marino-tenue); color: var(--marino-hondo); border-color: var(--marino-tenue); }

.titulo-paso { margin: var(--e4) 0 var(--e1); font-size: var(--t4); color: var(--azul); }
.sub-paso { margin: 0 0 var(--e4); font-size: var(--t2); color: var(--gris); line-height: 1.5; }

/* La casilla del alta, a tamaño de dedo y de vista. El cuadradito de 13px que
   pone el navegador por defecto es un objetivo táctil de la mitad del mínimo, y
   en la pantalla donde alguien autoriza el tratamiento de sus datos no puede
   ser lo más pequeño de la página. */
.tarjeta label > div > input[type=checkbox] {
  /* LA CAJA SE VE DE 24 px Y SE TOCA EN 44. La escala nueva pone piso duro de
     44 px a todo control tactil, y esta casilla medida en pantalla daba 24:
     justo en la pantalla donde alguien firma un documento legal. Se agranda el
     AREA, no el dibujo — una casilla de 44 px pintados se ve como un boton y
     deja de parecer una casilla. */
  width: var(--e5); height: var(--e5); accent-color: var(--marino); cursor: pointer;
  min-width: var(--e5); flex: none;
  outline-offset: 4px;
}
.tarjeta label > div:has(> input[type=checkbox]) {
  min-height: var(--control);
  display: flex; align-items: center;
}
/* `:has` no llega a todos los navegadores viejos; el respaldo es que la
   etiqueta entera ya es clicable, asi que el area util nunca es solo la caja. */
.tarjeta label { cursor: pointer; }

/* ------------------------------------------------ anillo de afinidad + etiqueta */
/* El color NUNCA va solo: el numero dentro y la palabra al lado. Ver
   ui/base.js:anillo. Y esta pieza NO es el logo, aunque se parezcan a
   proposito: el anillo del producto va cerrado y el del logo, abierto. */
.anillo-con-etiqueta { display: flex; flex-direction: column; align-items: center; gap: var(--e1); flex: none; }
.anillo-etiqueta {
  font-size: var(--t1); font-weight: var(--peso-titulo);
  color: var(--piedra); white-space: nowrap; letter-spacing: .02em;
}

/* --------------------------------------------------------------- marca y pie */
.lateral-marca .marca-svg { height: 30px; width: auto; display: block; color: var(--papel); }
.lateral .pie .eslogan {
  font-size: var(--t1); font-weight: var(--peso-titulo);
  color: var(--marino-tenue); line-height: var(--linea-corta);
  margin-bottom: var(--e1);
}

/* ============================================================================
   AUTORIZACIONES · el reparto de la pantalla donde alguien entrega sus datos
   ============================================================================
   Estaba en una columna de 760 px: en un monitor de 1920 quedaba una franja
   estrecha en el centro con medio metro de blanco a cada lado, y los textos
   legales dentro de una caja con barra propia — scroll dentro de scroll.

   Tres tramos, y solo tres. El de en medio y el de abajo son el mismo reparto;
   lo que cambia entre ellos es el ancho máximo. Ver ui/consentimiento.js:
   recolocar(), que mueve los nodos entre las dos mitades.
   ========================================================================== */
/* El paso del asistente que NO es un formulario corto. */
.zona.paso-estrecho { max-width: var(--columna-alta); margin: 0 auto; }
/* El paso de las autorizaciones no es un formulario: es un documento que
   hay que leer, y lo reparte `.consent`. Aqui solo se quita el tope. */
.zona.paso-ancho { max-width: none; padding-left: 0; padding-right: 0; }

/* Y el hueco entre la barra de pasos y el primer bloque: era el padding de
   `.zona` sumado al margen del parrafo de arriba. Se cierra. */
.consent { max-width: 1040px; margin: 0 auto; padding-top: var(--e2); }
.consent-der:empty { display: none; }

.consent-intro {
  font-size: var(--t2); color: var(--gris-calido);
  margin: 0 0 var(--e4);
}

/* Cada documento: su título y su texto, fluyendo. Sin caja y sin scroll. */
.consent-doc { margin: 0 0 var(--e6); }
.consent-doc-titulo {
  font-size: var(--t4); font-weight: var(--peso-titulo);
  color: var(--tinta); margin: 0 0 var(--e2); line-height: var(--linea-corta);
}
.consent-texto {
  font-size: var(--t3); line-height: var(--linea-alta);
  color: var(--piedra); white-space: pre-wrap;
}
/* El recorte de los largos. No es una ventana con barra: es el texto plegado,
   y el botón lo despliega entero dentro de la página. */
.consent-texto.recortado {
  display: -webkit-box; -webkit-line-clamp: 14; -webkit-box-orient: vertical;
  overflow: hidden;
}
.consent-mas { margin-top: var(--e2); }

/* La casilla y su título. */
.consent-casilla {
  display: flex; gap: var(--e3); align-items: flex-start;
  cursor: pointer; padding: var(--e2) 0; min-height: var(--control);
  margin-bottom: var(--e2);
}
.consent-casilla.opcional { border-top: 1px dashed var(--arena); padding-top: var(--e3); }
.consent-marca {
  display: block; font-size: var(--t1); font-weight: var(--peso-titulo);
  color: var(--gris-calido); text-transform: uppercase; letter-spacing: .4px;
}
.consent-titulo {
  display: block; font-size: var(--t3); font-weight: var(--peso-fuerte);
  color: var(--tinta); line-height: var(--linea-corta); margin-top: 2px;
}
.consent-nota {
  display: block; font-size: var(--t2); color: var(--gris-calido); margin-top: var(--e1);
  font-weight: var(--peso-normal);
}
.consent-casilla input[type=checkbox] {
  width: var(--e5); height: var(--e5); min-width: var(--e5);
  accent-color: var(--marino); cursor: pointer; flex: none;
}

/* -------------------------------------------------- dos columnas a 1200 px */
/* EL CORTE ESTA EN 1200, no en 1400.
   Los dos equipos mas comunes que existen son un portatil de 1366 y una
   pantalla de 1920 con Windows al 125 %, que reporta 1536 px CSS. Con el corte
   en 1400 el segundo entraba raspando y el PRIMERO se quedaba fuera: la
   pantalla donde alguien entrega sus datos caia en una sola columna justo en
   los equipos que mas se usan.
   A 1200 entran los dos. Y las dos columnas siguen cabiendo: 1200 - 380 de la
   columna fija - 48 de separacion = 772 px para el texto, que a 16 px son unos
   85 caracteres por renglon... por encima de los 75 del limite de lectura, asi
   que la columna de texto se topa en 720 px y el resto es margen. */
@media (min-width: 1200px) {
  .consent-ancho { grid-column: 1 / -1; }
  .consent {
    display: grid;
    /* La columna de texto se topa en 720 px: a 16 px son ~75 caracteres por
       renglon, que es el limite de lectura. Lo que sobra es margen, no texto
       mas ancho. */
    grid-template-columns: minmax(0, 720px) 380px;
    gap: var(--e6);
    justify-content: center;
    max-width: 1480px;
    align-items: start;
  }
  .consent-der {
    position: sticky; top: var(--e4);
    background: var(--papel); border: 1px solid var(--arena);
    border-radius: var(--r2); padding: var(--e5);
  }
  /* El botón y la lista de casillas se ven SIEMPRE, así que en ningún momento
     del scroll la persona pierde de vista qué le falta por marcar. */
  .consent-der .boton { width: 100%; }
}

/* ============================================================================
   EL TERRACOTA EN SU PAPEL GRAFICO
   ============================================================================
   El color de marca casi no se veia: estaba en las variables y en el arranque
   del anillo del logo, y en ningun sitio mas. Aqui se le da presencia SOLO como
   grafico —filos, reglas, subrayados, separadores, iconos—, que es donde puede
   estar sin romper el contraste. Para texto sobre claro sigue prohibido: ahi va
   #A8452A (--terracota-hondo).

   CADA USO, MEDIDO contra su fondo real. El minimo es 3:1, que es lo que pide
   el criterio 1.4.11 de WCAG 2.2 para objetos graficos:

     filo de tarjeta        sobre papel         3.38:1
     regla de antetitulo    sobre papel/hueso   3.38 / 3.11:1
     subrayado del menu     sobre marino        3.43:1
     separador de seccion   sobre hueso         3.11:1
     iconos del lateral     sobre marino        3.43:1

   El unico que NO llega es terracota sobre marino-tenue (2.83:1), asi que en la
   fila de la hoja recomendada el filo va en terracota-hondo, que da 4.95:1.
   ========================================================================== */

/* 1 · El filo izquierdo de las tarjetas. */
.tarjeta { border-left: 3px solid var(--terracota); }

/* 2 · La regla bajo los antetitulos. */
.panel-kicker, .consent-marca {
  border-bottom: 2px solid var(--terracota);
  padding-bottom: var(--e1); display: inline-block;
}

/* 3 · El subrayado del elemento activo del menu lateral. */
.lateral button.activo { box-shadow: inset 3px 0 0 var(--terracota); }

/* 4 · Separadores de seccion. */
.panel-seccion { border-top: 2px solid var(--terracota); padding-top: var(--e4); }

/* 5 · Los iconos del lateral. */
.lateral button .icono { color: var(--terracota); }
.lateral button.activo .icono { color: var(--papel); }

/* 6 · La fila de la hoja recomendada: sobre marino-tenue el terracota se queda
       en 2.83:1, asi que ahi va el hondo. */
.hoja-fila.recomendada { border-left-color: var(--terracota-hondo); }

/* La marca en las pantallas de entrada. Hereda el color del contenedor: blanco
   sobre las bandas marino, marino sobre las claras. */
.marca-pantalla .marca-svg { height: 30px; width: auto; display: block; }
.marca-pantalla { color: currentColor; margin-bottom: var(--e2); }

/* La cifra sola de una tarjeta de estadistica. */
.cifra-grande { font-size: var(--t6); font-weight: var(--peso-titulo); color: var(--marino); line-height: 1.1; margin-top: var(--e2); }
.cifra-unidad { font-size: var(--t3); font-weight: var(--peso-normal); color: var(--gris-calido); }