/* Gala Worklab · hoja común de las dos webs. NO EDITAR fuera de la sesión coordinadora. */
/* Tipografías alojadas en el propio sitio: no se conecta con Google */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fuentes/barlow-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fuentes/barlow-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fuentes/barlow-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fuentes/barlow-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fuentes/barlow-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fuentes/barlow-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fuentes/barlow-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fuentes/barlow-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fuentes/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fuentes/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* GALA · Sistema de diseño personal — tokens y componentes base · v1.0 */

:root{
  /* Papel y tinta */
  --paper-0:#FFFFFF; --paper-1:#FBF9F4; --paper-2:#F4F0E6;
  --ink-1:#121A33; --ink-2:#46506B; --ink-3:#8A91A3;
  --hairline:#E4E1D9;

  /* Acentos */
  --accent:#2B3A67; --accent-hover:#22304F; --accent-2:#8FAF2E; --accent-2-deep:#6B8420;
  --celeste:#3E9FD0; --gold:#C98A1B;

  /* Semánticos */
  --success:#6B8420; --warning:#C98A1B; --danger:#B5533C;
  --soft-green:#EDF2DC; --soft-blue:#E6F1F9; --soft-gold:#F7EEDC; --soft-red:#F8E7E3;

  /* Series de gráfico */
  --data-1:#2B3A67; --data-2:#8FAF2E; --data-3:#3E9FD0; --data-4:#C98A1B;
  --data-5:#6B8420; --data-6:#B5533C;

  /* Espaciado base 4 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s14:56px; --s16:64px;

  /* Radios */
  --radius-xs:4px; --radius-sm:8px; --radius-md:14px; --radius-lg:22px;
  --radius-xl:32px; --radius-pill:999px;

  /* Sombras tintadas, nunca negras */
  --shadow-xs:0 1px 2px rgba(18,26,51,.04);
  --shadow-sm:0 2px 8px rgba(18,26,51,.04);
  --shadow-md:0 8px 28px rgba(18,26,51,.07);
  --shadow-lg:0 18px 48px rgba(18,26,51,.10);

  --gradient-ink:linear-gradient(135deg,#121A33 0%,#2B3A67 100%);
  --ring:0 0 0 3px #C9D0E4;
  --ease:cubic-bezier(.2,.7,.2,1);
  --container:1320px;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper-1); color:var(--ink-1);
  font-family:'Barlow',system-ui,sans-serif; font-size:15px; line-height:1.55; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--container); margin:0 auto; padding-inline:max(24px,4vw)}

/* ---------- Tipografía ---------- */
.display{font-size:64px; line-height:1.05; font-weight:800; letter-spacing:-.025em; color:var(--accent); margin:0}
h1,.h1{font-size:44px; line-height:1.08; font-weight:800; letter-spacing:-.022em; color:var(--accent); margin:0}
h2,.h2{font-size:30px; line-height:1.1; font-weight:800; letter-spacing:-.02em; color:var(--accent); margin:0}
h3,.h3{font-size:20px; line-height:1.2; font-weight:700; color:var(--ink-1); margin:0}
.lead{font-size:17px; line-height:1.55; color:var(--ink-2); margin:12px 0 0}
p{margin:12px 0 0}
.verde{color:var(--accent-2)}          /* la palabra final del titular */
.eyebrow{font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--celeste); margin:0 0 8px}
.kpi-label{font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.mono{font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:400; color:var(--ink-2)}
.nota{font-size:13px; color:var(--ink-3); margin-top:6px}
a{color:var(--accent); text-decoration-color:var(--hairline); text-underline-offset:3px}

/* ---------- Marca ---------- */
.marca{font-weight:800; font-size:14px; letter-spacing:.07em; color:var(--accent); text-transform:uppercase}
.marca .guion{color:var(--accent-2); margin:0 6px}
.marca .artefacto{color:var(--celeste)}
.sobre-tinta .marca{color:#fff}

/* ---------- Secciones ---------- */
section{padding:56px 0 24px}
section.alterna{background:var(--paper-2)}
.section-head{margin-bottom:36px}

/* ---------- Tarjetas ---------- */
.card{
  background:var(--paper-0); border:1px solid var(--hairline); border-radius:var(--radius-md);
  padding:24px; box-shadow:var(--shadow-sm); border-top:3px solid var(--accent);
}
.card.destacada{border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:32px}
.card.celeste{border-top-color:var(--celeste)}
.card.oro{border-top-color:var(--gold)}
.card.verde{border-top-color:var(--accent-2)}
.grid{display:grid; gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:880px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ---------- Cifras ---------- */
.stat .valor{
  font-size:32px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
  color:var(--accent); margin:8px 0 4px; display:block;
}
.stat .valor.grande{font-size:40px}
.stat .valor.verde{color:var(--accent-2-deep)}
.stat .unidad{font-size:.55em; font-weight:800; margin-left:2px}
.stat.oscura{background:var(--gradient-ink); border:0; color:#fff}
.stat.oscura .valor{color:#fff}
.stat.oscura .kpi-label{color:var(--accent-2)}
.stat.oscura .nota{color:rgba(255,255,255,.65)}
.antes{text-decoration:line-through; color:var(--ink-3); font-variant-numeric:tabular-nums}
.diferencia{color:var(--accent-2-deep); font-weight:800; font-variant-numeric:tabular-nums}

/* ---------- Panel de tinta ---------- */
.panel-tinta{
  position:relative; overflow:hidden; background:var(--gradient-ink); color:#fff;
  border-radius:var(--radius-xl); padding:40px; box-shadow:var(--shadow-lg);
}
.panel-tinta::after{
  content:''; position:absolute; right:-80px; top:-80px; width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle,rgba(143,175,46,.28) 0%,transparent 70%); pointer-events:none;
}
.panel-tinta h2,.panel-tinta .h2{color:#fff; position:relative}
.panel-tinta .eyebrow{color:var(--accent-2)}
.panel-tinta p,.panel-tinta .lead{color:rgba(255,255,255,.65)}

/* ---------- Píldoras y etiquetas ---------- */
.pildora{
  display:inline-flex; align-items:center; gap:8px; border-radius:var(--radius-pill);
  border:1px solid var(--hairline); background:var(--paper-0); padding:6px 14px;
  font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
}
.pildora::before{content:'●'; color:var(--accent-2); font-size:9px}
.pildora.plana::before{content:none}
.pildora.verde{background:var(--soft-green); border-color:transparent; color:var(--accent-2-deep)}
.pildora.info{background:var(--soft-blue); border-color:transparent; color:var(--celeste)}
.pildora.oro{background:var(--soft-gold); border-color:transparent; color:var(--gold)}
.pildora.error{background:var(--soft-red); border-color:transparent; color:var(--danger)}

/* ---------- Tablas ---------- */
table{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
thead th{
  font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  text-align:left; padding:0 12px 10px; border-bottom:2px solid var(--ink-1);
}
tbody td{padding:12px; border-bottom:1px solid var(--hairline); font-size:14px}
td.num,th.num{text-align:right}
tfoot td{padding:12px; font-weight:800; color:var(--accent); border-top:2px solid var(--ink-1)}

/* ---------- Controles ---------- */
.btn{
  font-family:inherit; font-size:14px; font-weight:700; height:40px; padding:0 20px;
  border-radius:var(--radius-sm); border:1px solid var(--accent); background:var(--accent); color:#fff;
  cursor:pointer; transition:background 180ms var(--ease), transform 140ms var(--ease);
}
.btn:hover{background:var(--accent-hover)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none; box-shadow:var(--ring)}
.btn.secundario{background:var(--paper-0); color:var(--accent)}
.btn.secundario:hover{background:var(--paper-2)}
.btn.ghost{background:transparent; border-color:transparent; color:var(--accent)}
input,select,textarea{
  font-family:inherit; font-size:14px; width:100%; height:40px; padding:0 12px;
  border:1px solid var(--hairline); border-radius:var(--radius-sm); background:var(--paper-0); color:var(--ink-1);
}
textarea{height:auto; padding:10px 12px; line-height:1.5}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent); box-shadow:var(--ring)}
label{font-size:13px; font-weight:700; color:var(--ink-1); display:block; margin-bottom:6px}

/* ---------- Nav y pie ---------- */
.nav{
  position:sticky; top:0; z-index:50; background:rgba(251,249,244,.9); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline);
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.pie{background:var(--ink-1); color:rgba(255,255,255,.65); padding:32px 0; font-size:13px; margin-top:56px}
.pie .marca{color:#fff}

@media print{
  body{background:#fff}
  .nav,.gala-rev-bar,.gala-rev-num{display:none !important}
  .card,.panel-tinta{box-shadow:none}
}
/* =====================================================================
   GALA WORKLAB · Herramientas laborales · extensión de GALA v1.0 → v1.2
   Se pega DESPUÉS de gala-tokens.css. No sustituye nada de GALA: añade
   el signo, el color por producto, el modo noche y los componentes
   propios de RRHH (calculadora, resultado, fuente legal, tabla salarial,
   brecha, persona, sellos de confianza).
   v1.0 · octubre 2026
   ===================================================================== */

:root{
  /* Marca */
  --punto:#8FAF2E;              /* el punto verde: la persona, el resultado */
  --punto-reposo:#2B3A67;       /* los ocho puntos índigo del signo */
  --on-accent:#FFFFFF;          /* texto sobre botón primario */

  /* Color de producto: solo bordes superiores, eyebrows y punto activo del favicon */
  --prod-tablas:#3E9FD0;        /* Tablas salariales · celeste */
  --prod-convenios:#C98A1B;     /* Convenios · oro */
  --prod-calculadoras:#2B3A67;  /* Calculadoras · índigo */
  --prod-transparencia:#6B8420; /* Transparencia · verde profundo */

  /* Estados laborales (chips de estado, nunca fondos grandes) */
  --estado-alta:#6B8420;  --estado-alta-bg:#EDF2DC;
  --estado-tramite:#3E9FD0; --estado-tramite-bg:#E6F1F9;
  --estado-revisar:#C98A1B; --estado-revisar-bg:#F7EEDC;
  --estado-baja:#B5533C;  --estado-baja-bg:#F8E7E3;
}

/* ---------- Modo noche: el papel se vuelve tinta ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper-0:#19213D; --paper-1:#0F1529; --paper-2:#141B33;
    --ink-1:#EEF0F6; --ink-2:#B7BED0; --ink-3:#848CA3; --hairline:#2A3352;
    --accent:#C3CDF0; --accent-hover:#DCE2F7; --on-accent:#121A33;
    --accent-2:#A6C63F; --accent-2-deep:#B5D157; --punto:#A6C63F; --punto-reposo:#C3CDF0;
    --celeste:#6DB8E0; --gold:#DDA43F; --success:#A6C63F; --danger:#E08A73;
    --soft-green:#1F2A1A; --soft-blue:#16273A; --soft-gold:#2E2516; --soft-red:#33201E;
    --estado-alta:#A6C63F; --estado-alta-bg:#1F2A1A; --estado-tramite:#6DB8E0; --estado-tramite-bg:#16273A;
    --estado-revisar:#DDA43F; --estado-revisar-bg:#2E2516; --estado-baja:#E08A73; --estado-baja-bg:#33201E;
    --ring:0 0 0 3px #3A4675;
    --shadow-sm:0 2px 8px rgba(0,0,0,.25); --shadow-md:0 8px 28px rgba(0,0,0,.35); --shadow-lg:0 18px 48px rgba(0,0,0,.45);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper-0:#19213D; --paper-1:#0F1529; --paper-2:#141B33;
  --ink-1:#EEF0F6; --ink-2:#B7BED0; --ink-3:#848CA3; --hairline:#2A3352;
  --accent:#C3CDF0; --accent-hover:#DCE2F7; --on-accent:#121A33;
  --accent-2:#A6C63F; --accent-2-deep:#B5D157; --punto:#A6C63F; --punto-reposo:#C3CDF0;
  --celeste:#6DB8E0; --gold:#DDA43F; --success:#A6C63F; --danger:#E08A73;
  --soft-green:#1F2A1A; --soft-blue:#16273A; --soft-gold:#2E2516; --soft-red:#33201E;
  --estado-alta:#A6C63F; --estado-alta-bg:#1F2A1A; --estado-tramite:#6DB8E0; --estado-tramite-bg:#16273A;
  --estado-revisar:#DDA43F; --estado-revisar-bg:#2E2516; --estado-baja:#E08A73; --estado-baja-bg:#33201E;
  --ring:0 0 0 3px #3A4675;
  --shadow-sm:0 2px 8px rgba(0,0,0,.25); --shadow-md:0 8px 28px rgba(0,0,0,.35); --shadow-lg:0 18px 48px rgba(0,0,0,.45);
  color-scheme:dark;
}
.btn{color:var(--on-accent)}
.btn.secundario,.btn.ghost{color:var(--accent)}
.nav{background:color-mix(in srgb,var(--paper-1) 90%,transparent); top:env(safe-area-inset-top,0px)}

/* ---------- Logotipo: signo + GALA — PRODUCTO ---------- */
.logo{display:inline-flex; align-items:center; gap:.55em; text-decoration:none; color:var(--accent); line-height:1}
.logo svg{width:1.25em; height:1.25em; flex:none}
.logo .nombre{font-weight:800; letter-spacing:.07em; text-transform:uppercase}
.logo .guion{color:var(--punto); font-weight:800}
.logo .producto{font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--celeste)}
.simbolo circle{fill:var(--punto-reposo)}
.simbolo circle.activo{fill:var(--punto)}

/* ---------- Sello de revisión: la marca responde, nunca una persona ---------- */
.firma-nombre{font-weight:800; letter-spacing:-.02em; color:var(--accent)}
.firma-nombre i{font-style:normal; color:var(--punto)}
.sello{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; background:var(--paper-0); border:1px solid var(--hairline); border-radius:var(--radius-md); padding:14px 18px; box-shadow:var(--shadow-xs)}
.sello .quien{display:grid; gap:2px; font-size:14px; min-width:0}
.sello .quien b{font-size:15px; color:var(--ink-1)}
.sello .quien span{color:var(--ink-2)}
.sello .quien .cuando{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-3)}
.sello-linea{display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; color:var(--ink-2)}
.sello-linea .simbolo{width:18px; height:18px; flex:none}
.sello-linea b{color:var(--ink-1)}
.porconfirmar{font-family:'IBM Plex Mono',monospace; font-size:.85em; color:var(--gold); background:var(--soft-gold); border-radius:var(--radius-xs); padding:1px 6px}
.simbolo circle{fill:var(--punto-reposo)}
.simbolo circle.activo{fill:var(--punto)}

/* ---------- Producto: firma de color ---------- */
[data-producto="tablas"]{--prod:var(--prod-tablas)}
[data-producto="convenios"]{--prod:var(--prod-convenios)}
[data-producto="calculadoras"]{--prod:var(--prod-calculadoras)}
[data-producto="transparencia"]{--prod:var(--prod-transparencia)}
.card[data-producto]{border-top-color:var(--prod)}
[data-producto] .eyebrow{color:var(--prod)}

/* ---------- Sellos de confianza (bajo el titular de cada herramienta) ---------- */
.sellos{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}

/* ---------- Calculadora ---------- */
.calc{background:var(--paper-0); border:1px solid var(--hairline); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); overflow:hidden; display:grid; grid-template-columns:1.1fr 1fr}
.calc .entradas{padding:28px; display:grid; gap:16px; align-content:start}
.calc .salida{padding:28px; background:var(--paper-2); border-left:1px solid var(--hairline); display:grid; gap:14px; align-content:start}
@media(max-width:880px){.calc{grid-template-columns:1fr}.calc .salida{border-left:0; border-top:1px solid var(--hairline)}}

/* ---------- Resultado: el único bloque con borde izquierdo ---------- */
.resultado{border-left:4px solid var(--punto); padding:4px 0 4px 18px}
.resultado .cifra{font-size:44px; font-weight:800; letter-spacing:-.025em; font-variant-numeric:tabular-nums; color:var(--accent); line-height:1.05; display:block}
.resultado .que{font-size:14px; color:var(--ink-2); margin-top:6px}
.desglose{display:grid; gap:0}
.desglose div{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--hairline); font-size:14px; font-variant-numeric:tabular-nums}
.desglose div span:last-child{font-weight:700; color:var(--ink-1)}

/* ---------- Fuente legal: toda cifra lleva de dónde sale ---------- */
.fuente{display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-2); background:var(--paper-0); border:1px solid var(--hairline); border-radius:var(--radius-xs); padding:4px 8px}
.fuente b{font-family:'Barlow',sans-serif; font-weight:800; font-size:10px; letter-spacing:.14em; color:var(--accent)}
.aviso{font-size:13px; color:var(--ink-3); border-top:1px solid var(--hairline); padding-top:12px; margin-top:4px}

/* ---------- Estados ---------- */
.estado{display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; border-radius:var(--radius-pill); padding:4px 10px}
.estado::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor}
.estado.alta{color:var(--estado-alta); background:var(--estado-alta-bg)}
.estado.tramite{color:var(--estado-tramite); background:var(--estado-tramite-bg)}
.estado.revisar{color:var(--estado-revisar); background:var(--estado-revisar-bg)}
.estado.baja{color:var(--estado-baja); background:var(--estado-baja-bg)}

/* ---------- Persona (solo en ejemplos: iniciales ficticias, nunca fotos) ---------- */
.persona{display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--paper-2); color:var(--accent); font-weight:800; font-size:14px; letter-spacing:.02em; border:1px solid var(--hairline)}

/* ---------- Brecha: dos barras, una lectura ---------- */
.brecha{display:grid; gap:10px}
.brecha .fila{display:grid; grid-template-columns:90px 1fr 92px; gap:12px; align-items:center; font-size:13px}
.brecha .pista{height:12px; background:var(--paper-2); border-radius:var(--radius-pill); overflow:hidden}
.brecha .barra{height:100%; border-radius:var(--radius-pill); background:var(--accent)}
.brecha .barra.b{background:var(--celeste)}
.brecha .val{text-align:right; font-weight:700; font-variant-numeric:tabular-nums}