/* Gala Worklab · hoja común de las dos webs. NO EDITAR fuera de la sesión coordinadora.
   v3.1 · 15/10/2026: identidad v3.1 (Identidad-GALA/v3/: gala-worklab-tokens-v3.css + sistema-de-diseno/gala-worklab-ds.css).
   Fondo BLANCO en todo lo digital, banda #F3F4F9, gris de texto #646C84 y verde de texto #56700F (AA), botones índigo en píldora,
   azul intenso #3A4A8C, plantilla de puntos a todo color. Logotipo, signo, letra y 8 colores de herramienta: sin cambios.
   Los nombres de variable de la v2 se conservan (cientos de páginas los leen): solo cambian sus valores.
   v2.0 · 14/10/2026: papel frío, logotipo «Gala Worklab.», 8 colores de herramienta y lote 1 de la auditoría de legibilidad. */
/* 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;
}

/* ---------- Tokens v3.1 (Identidad-GALA/v3/gala-worklab-tokens-v3.css; nombres de la v2) ---------- */
:root{
  /* Fondo, tinta y líneas. v3: fondo BLANCO en todo lo digital; el papel #F7F7F4 queda solo para impresos (--papel-impreso).
     --papel conserva su nombre v2 porque es el fondo de página de cientos de páginas: ahora vale blanco. */
  --fondo:#FFFFFF; --papel:var(--fondo); --banda:#F3F4F9; --papel-banda:var(--banda); --tarjeta:#FFFFFF; --linea:#E1E4EC;
  --papel-impreso:#F7F7F4; --banda-impresa:#EEF0F7;
  --tinta:#121A33; --texto-2:#46506B; --texto-3:#646C84;   /* v3: 5,2:1 sobre blanco, 4,8:1 sobre banda */
  --indigo:#2B3A67; --indigo-hover:#22305A; --punto:#8FAF2E; --punto-texto:#56700F; --error:#B5533C;
  --azul-intenso:#3A4A8C;   /* v3: bloques que piden más luz que el índigo */
  --punto-reposo:var(--indigo); --suave:#DCE0EB; --blanco:#FFFFFF; --punto-noche:#A6C63F;
  --worklab:#6170A6; --worklab-tinta:#AEBBE3;   /* «Worklab» del logotipo a dos tonos (sin cambios en la v3) */
  --sobre-oscuro-1:#FFFFFF; --sobre-oscuro-2:#DDE2F5; --sobre-oscuro-3:#C3CBE6;   /* respuesta · pregunta · rótulos sobre índigo, azul o tinta */
  /* Plantilla de puntos (imagen clave): colores VIVOS, nunca para texto (v3.1) */
  --plantilla-1:#2B3A67; --plantilla-2:#6170A6; --plantilla-3:#3E9FD0; --plantilla-4:#5C7FB8;
  --plantilla-5:#C98A1B; --plantilla-6:#2F7F86; --plantilla-7:#9A4D6E; --plantilla-8:#6E66A8;
  /* Letra: solo Barlow; IBM Plex Mono solo para citar normas, códigos y fechas */
  --fuente:'Barlow',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --fuente-datos:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --t-respuesta:800; --t-pregunta:600; --t-texto:400; --ls-respuesta:-.04em; --ls-cifra:-.045em;
  /* Paneles oscuros (no cambian de modo: el pie y los bloques de tinta) */
  --panel:#121A33; --panel-2:#1B2547; --panel-t:#EEF0F6; --panel-t2:#B7BED0;
  /* Color de herramienta: solo bordes superiores, rótulos y el punto del icono */
  --prod-tablas-salariales:#3E9FD0; /* 1 · Tablas salariales */
  --prod-escritos:#5C7FB8;          /* 2 · Escritos */
  --prod-convenios:#C98A1B;         /* 3 · Convenios */
  --prod-calculadoras:#2B3A67;      /* 4 · Calculadoras */
  --prod-compliance:#2F7F86;        /* 6 · Compliance */
  --prod-acoso:#9A4D6E;             /* 7 · Prevención del acoso */
  --prod-formacion:#6E66A8;         /* 8 · Formación */
  --prod-transparencia:#6B8420;     /* 9 · Transparencia */
  /* Versión para TEXTO de menos de 18 px (rótulos, enlaces de tarjeta, leyendas): ≥ 4,5:1 sobre papel y banda (APLICAR-V2 §1.3).
     Bordes superiores, puntos, iconos y rellenos siguen con el color base. */
  --prod-tablas-salariales-texto:#2C7295; --prod-escritos-texto:#4E6B9C; --prod-convenios-texto:#906313; --prod-calculadoras-texto:#2B3A67;
  --prod-compliance-texto:#2B767C; --prod-acoso-texto:#9A4D6E; --prod-formacion-texto:#6B63A4; --prod-transparencia-texto:#5E741C;
  /* Estados (chips; manual: ok, tr, rv, bj). Texto oscurecido por legibilidad (auditoría 14/10) */
  /* v3 (sistema de diseño): hecho · pendiente · en trámite · error, siempre con palabra */
  --estado-alta:#56700F;    --estado-alta-bg:#EDF2DC;
  --estado-tramite:#2C7295; --estado-tramite-bg:#E6F1F9;
  --estado-revisar:#906313; --estado-revisar-bg:#F7EEDC;
  --estado-baja:#9A4130;    --estado-baja-bg:#F8E7E3;
  /* Movimiento */
  --mov-rapido:160ms; --mov-medio:320ms; --mov-lento:640ms; --mov-paso:70ms;
  --mov-curva:cubic-bezier(.2,.7,.2,1); --mov-rebote:cubic-bezier(.34,1.56,.64,1);
  /* Espaciado, radios y sombras tintadas */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s14:56px; --s16:64px;
  --radius-xs:4px; --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --radius-xl:32px; --radius-pill:999px;
  --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);
  --ring:0 0 0 2px var(--tarjeta),0 0 0 4px var(--indigo);   /* foco ≥ 3:1 en los dos modos */
  --container:1320px;

  /* OBSOLETO · alias de los nombres antiguos: cientos de páginas los usan. No usar en código nuevo. */
  --paper-0:var(--tarjeta); --paper-1:var(--papel); --paper-2:var(--papel-banda); --hairline:var(--linea);
  --ink-1:var(--tinta); --ink-2:var(--texto-2); --ink-3:var(--texto-3);
  --accent:var(--indigo); --accent-hover:var(--indigo-hover); --accent-2:var(--punto); --accent-2-deep:var(--punto-texto);
  --on-accent:var(--blanco);
  --celeste:var(--prod-tablas-salariales); --gold:var(--prod-convenios);
  --success:var(--estado-alta); --warning:var(--estado-revisar); --danger:var(--error);
  --soft-green:var(--estado-alta-bg); --soft-blue:var(--estado-tramite-bg); --soft-gold:var(--estado-revisar-bg); --soft-red:var(--estado-baja-bg);
  --gradient-ink:var(--panel);   /* sin degradado ni brillo */
  --prod-tablas:var(--prod-tablas-salariales); --celeste-texto:var(--prod-tablas-salariales-texto); --gold-texto:var(--prod-convenios-texto);
  --data-1:var(--indigo); --data-2:var(--punto); --data-3:var(--prod-tablas-salariales); --data-4:var(--prod-convenios);
  --data-5:var(--punto-texto); --data-6:var(--error);
  --ease:var(--mov-curva);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper-1); color:var(--ink-1);
  font-family:'Barlow',system-ui,sans-serif; font-size:16px; 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:72px; line-height:1.05; font-weight:800; letter-spacing:-.025em; color:var(--accent); margin:0}
h1,.h1{font-size:clamp(36px,5.2vw,56px); line-height:1.04; font-weight:800; letter-spacing:-.022em; color:var(--accent); margin:0}
h2,.h2{font-size:40px; line-height:1.06; 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(--punto-texto)}   /* la palabra final del titular */
.eyebrow{font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--indigo); 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 ---------- */
/* (v2) El logotipo es .logo: ver «Logotipo v2» más abajo. La marca nunca va en mayúsculas. */

/* ---------- 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(--indigo)}   /* OBSOLETO: el verde no es decoración; se ve como la tarjeta normal */
.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(--panel); border:0; color:var(--blanco)}
.stat.oscura .valor{color:var(--blanco)}
.stat.oscura .kpi-label{color:rgba(255,255,255,.75)}
.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(--panel); color:var(--blanco);
  border-radius:var(--radius-xl); padding:40px; box-shadow:var(--shadow-lg);
}
.panel-tinta h2,.panel-tinta .h2{color:var(--blanco); position:relative}
.panel-tinta .eyebrow{color:rgba(255,255,255,.75)}
.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:''; width:6px; height:6px; border-radius:50%; background:var(--indigo); flex:none}
.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(--prod-tablas-salariales-texto)}
.pildora.oro{background:var(--soft-gold); border-color:transparent; color:var(--prod-convenios-texto)}
.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:var(--blanco);
  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:color-mix(in srgb,var(--papel) 90%,transparent); 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(--panel); color:rgba(255,255,255,.72); padding:32px 0; font-size:13px; margin-top:56px}

@media print{
  body{background:var(--blanco)}
  .nav,.gala-rev-bar,.gala-rev-num{display:none !important}
  .card,.panel-tinta{box-shadow:none}
}

/* ---------- Modo noche: el papel se vuelve tinta (no cambia en la v2) ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fondo:#0F1529; --papel:#0F1529; --banda:#141B33; --papel-banda:#141B33; --tarjeta:#19213D; --linea:#2A3352;
    --tinta:#EEF0F6; --texto-2:#B7BED0; --texto-3:#848CA3;
    --indigo:#C3CDF0; --indigo-hover:#DCE2F7; --punto:#A6C63F; --punto-texto:#B5D157; --error:#E08A73;
    --suave:#28315A; --on-accent:#121A33; --worklab:#8E9CD0;
    --panel:#0A0F20; --panel-2:#19213D;
    /* propuesta de tokens noche v2.0.1 (control de marca): --prod-* aclarados */
    --prod-tablas-salariales:#6DB8E0; --prod-escritos:#8FA8D6; --prod-convenios:#DDA43F; --prod-calculadoras:#C3CDF0;
    --prod-compliance:#5DB3BA; --prod-acoso:#CF8AAA; --prod-formacion:#A8A1DD; --prod-transparencia:#A6C63F;
    --prod-tablas-salariales-texto:#6DB8E0; --prod-escritos-texto:#8FA8D6; --prod-convenios-texto:#DDA43F; --prod-calculadoras-texto:#C3CDF0;
    --prod-compliance-texto:#5DB3BA; --prod-acoso-texto:#CF8AAA; --prod-formacion-texto:#A8A1DD; --prod-transparencia-texto:#A6C63F;
    --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;
    --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"]{
  --fondo:#0F1529; --papel:#0F1529; --banda:#141B33; --papel-banda:#141B33; --tarjeta:#19213D; --linea:#2A3352;
  --tinta:#EEF0F6; --texto-2:#B7BED0; --texto-3:#848CA3;
  --indigo:#C3CDF0; --indigo-hover:#DCE2F7; --punto:#A6C63F; --punto-texto:#B5D157; --error:#E08A73;
  --suave:#28315A; --on-accent:#121A33; --worklab:#8E9CD0;
  --panel:#0A0F20; --panel-2:#19213D;
  /* propuesta de tokens noche v2.0.1 (control de marca): --prod-* aclarados */
  --prod-tablas-salariales:#6DB8E0; --prod-escritos:#8FA8D6; --prod-convenios:#DDA43F; --prod-calculadoras:#C3CDF0;
  --prod-compliance:#5DB3BA; --prod-acoso:#CF8AAA; --prod-formacion:#A8A1DD; --prod-transparencia:#A6C63F;
  --prod-tablas-salariales-texto:#6DB8E0; --prod-escritos-texto:#8FA8D6; --prod-convenios-texto:#DDA43F; --prod-calculadoras-texto:#C3CDF0;
  --prod-compliance-texto:#5DB3BA; --prod-acoso-texto:#CF8AAA; --prod-formacion-texto:#A8A1DD; --prod-transparencia-texto:#A6C63F;
  --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;
  --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 v2: signo 3×3 + «Gala Worklab.» │ PRODUCTO (lo escribe Compartido/marca.py) ---------- */
.logo{display:inline-flex; align-items:center; gap:.36em; text-decoration:none; color:var(--accent); line-height:1;
  font-family:'Barlow',system-ui,sans-serif; font-weight:800; letter-spacing:-.02em; white-space:nowrap; text-transform:none}
.nav .logo{font-size:19px}
.logo svg.simbolo{width:.93em; height:.93em; flex:none; overflow:visible}
/* Dos enlaces (14/10): .logo-marca lleva a la portada de la web y .pr a la de la herramienta; el filete queda fuera */
.logo .logo-marca{display:inline-flex; align-items:center; gap:.36em; color:inherit; text-decoration:none; flex:none}
.logo .logo-marca:hover{text-decoration:none}
.logo a.pr{text-decoration:none; padding-block:12px; margin-block:-12px}     /* área táctil de 44 px sin mover nada */
.logo a.pr:hover{text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; text-decoration-color:currentColor}
.logo a:focus-visible{outline:none; box-shadow:var(--ring); border-radius:4px}
.logo .nombre{font-weight:800; letter-spacing:-.02em; text-transform:none}
.logo .nombre i,.logo > i{font-style:normal; color:var(--punto)}
.logo .wl{color:var(--worklab)}            /* dos tonos: «Gala» índigo, «Worklab» índigo medio; no cambia con la herramienta */
.logo > .wl{margin-left:-.12em}             /* en flex, el hueco entre palabras es el gap */
.logo > i{margin-left:-.36em}
.logo.blanco .wl,.pie .logo .wl,.sobre-tinta .logo .wl{color:var(--worklab-tinta)}
.logo.negro,.logo.negro .wl,.logo.negro i{color:var(--tinta)}
.logo .fil{width:1.5px; height:.7em; background:var(--hairline); margin-inline:.32em; flex:none}
.logo .pr{font-size:max(.5em,12px); letter-spacing:.12em; text-transform:uppercase; font-weight:700;   /* nunca mayor que «Gala Worklab.» */
  color:var(--prod-logo,var(--accent))}
.logo .pr[data-prod="tablas"]{--prod-logo:var(--prod-tablas-salariales-texto)}
.logo .pr[data-prod="escritos"]{--prod-logo:var(--prod-escritos-texto)}
.logo .pr[data-prod="convenios"]{--prod-logo:var(--prod-convenios-texto)}
.logo .pr[data-prod="calculadoras"]{--prod-logo:var(--prod-calculadoras-texto)}
.logo .pr[data-prod="compliance"]{--prod-logo:var(--prod-compliance-texto)}
.logo .pr[data-prod="acoso"]{--prod-logo:var(--prod-acoso-texto)}
.logo .pr[data-prod="formacion"]{--prod-logo:var(--prod-formacion-texto)}
.logo .pr[data-prod="transparencia"]{--prod-logo:var(--prod-transparencia-texto)}
.logo.blanco,.pie .logo{color:var(--blanco)}
.logo.blanco .fil,.pie .logo .fil{background:rgba(255,255,255,.4)}
.logo.blanco .pr,.pie .logo .pr{color:var(--blanco)}
.logo.blanco .simbolo circle,.pie .logo .simbolo circle,.sobre-tinta .simbolo circle{fill:var(--blanco)}  /* fondo oscuro: blanco puro */
.logo.blanco .simbolo circle.activo,.pie .logo .simbolo circle.activo,.sobre-tinta .simbolo circle.activo{fill:var(--punto)}
@media(max-width:420px){.nav .logo{font-size:17px}.nav .logo .pr{letter-spacing:.1em}}
@media(max-width:400px){.nav .logo .pr{letter-spacing:.08em}}
.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)}
/* v2 (manual §09): «Revisado por Gala Worklab · fecha» con el signo de la herramienta, bajo cada resultado y cada tabla */
.sello,.sello-linea{display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; color:var(--ink-2)}
.sello .simbolo,.sello .sg,.sello-linea .simbolo{width:16px; height:16px; flex:none}
.sello b{color:var(--ink-1)}
.sello time,.sello-linea time{font-family:'IBM Plex Mono',monospace; font-size:12px}
.sello-linea b{color:var(--ink-1)}
.porconfirmar{font-family:'IBM Plex Mono',monospace; font-size:.85em; color:var(--prod-convenios-texto); 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 ---------- */
/* Valen en body, main o cualquier elemento (también las casillas de la portada de galaworklab.com) */
[data-producto="tablas"],[data-producto="tablas-salariales"]{--prod:var(--prod-tablas-salariales); --prod-texto:var(--prod-tablas-salariales-texto)}
[data-producto="escritos"]{--prod:var(--prod-escritos); --prod-texto:var(--prod-escritos-texto)}
[data-producto="convenios"]{--prod:var(--prod-convenios); --prod-texto:var(--prod-convenios-texto)}
[data-producto="calculadoras"]{--prod:var(--prod-calculadoras); --prod-texto:var(--prod-calculadoras-texto)}
[data-producto="compliance"]{--prod:var(--prod-compliance); --prod-texto:var(--prod-compliance-texto)}
[data-producto="acoso"]{--prod:var(--prod-acoso); --prod-texto:var(--prod-acoso-texto)}
[data-producto="formacion"]{--prod:var(--prod-formacion); --prod-texto:var(--prod-formacion-texto)}
[data-producto="transparencia"]{--prod:var(--prod-transparencia); --prod-texto:var(--prod-transparencia-texto)}
.card[data-producto]{border-top-color:var(--prod)}
[data-producto] .eyebrow{color:var(--indigo)}

/* ---------- 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 time,.fuente .fecha{font-family:inherit; white-space:nowrap}
.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}

/* ---------- Legibilidad y navegación ---------- */
/* Notas y eyebrows legibles: 14 px y contraste AA */
.nota{font-size:14px}
.eyebrow,[data-producto] .eyebrow{font-size:11px; letter-spacing:.14em; color:var(--indigo)}
/* Rótulo v2 (control de marca 14/10): texto en índigo y el color de la herramienta en un punto de 8 px delante */
.eyebrow::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--prod,var(--indigo)); display:inline-block; margin-right:8px; vertical-align:1px; flex:none}
.panel-tinta .eyebrow::before,.sobre-tinta .eyebrow::before{background:var(--prod-sobre-tinta,rgba(255,255,255,.75))}
.panel-tinta .eyebrow{color:rgba(255,255,255,.75)}

/* Preguntas frecuentes con marcador propio */
details.faq summary{list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:baseline}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:'+'; font-weight:800; color:var(--indigo); flex:none}
details.grupo summary::after{color:var(--indigo)}
details.faq[open] summary::after{content:'−'}
details.faq summary:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--radius-xs)}

/* Menú común de cabecera v2 (APLICAR-V2 §1.12; lo escribe Compartido/menu.py): icono + nombre, activa en cápsula,
   buscador «Tu oficio o convenio» siempre visible. En móvil: solo la activa y el buscador; el resto en «Menú». */
.nav .wrap{gap:12px}
.menu{display:flex; align-items:center; gap:2px; margin-left:auto; min-width:0}
.menu a{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--texto-2); text-decoration:none; padding:7px 10px; border-radius:var(--radius-pill); white-space:nowrap}
.menu a:hover{color:var(--indigo); background:var(--papel-banda)}
.menu a[aria-current]{color:var(--indigo); background:var(--papel-banda)}
.menu .ico,.menu-movil .ico,.menu-buscar .ico{width:16px; height:16px; flex:none; color:var(--indigo)}
.menu a:focus-visible,.menu-movil summary:focus-visible,.menu-buscar input:focus-visible{outline:none; box-shadow:var(--ring)}
.menu-buscar{position:relative; display:flex; align-items:center; margin-left:8px; min-width:0}
.menu-buscar .ico{position:absolute; left:11px; pointer-events:none}
.menu-buscar input{height:36px; width:210px; font-size:13px; padding:0 12px 0 34px; border-radius:var(--radius-pill); background:var(--tarjeta); border:1px solid var(--linea); color:var(--tinta)}
.menu-movil{display:none; position:relative; flex:none}
.menu-movil summary{list-style:none; cursor:pointer; font-size:13px; font-weight:700; color:var(--indigo); padding:7px 14px; border:1px solid var(--linea); border-radius:var(--radius-pill); background:var(--tarjeta)}
.menu-movil summary::-webkit-details-marker{display:none}
.menu-movil[open] summary{background:var(--indigo); color:var(--on-accent,var(--blanco)); border-color:var(--indigo)}
.menu-movil .panel{position:absolute; right:0; top:calc(100% + 8px); z-index:60; width:min(300px,calc(100vw - 32px)); display:grid; gap:2px; padding:10px;
  background:var(--tarjeta); border:1px solid var(--linea); border-radius:var(--radius-md); box-shadow:var(--shadow-lg)}
.menu-movil .panel a{display:flex; align-items:center; gap:10px; padding:10px 12px; font-size:15px; font-weight:600; color:var(--tinta); text-decoration:none; border-radius:var(--radius-sm)}
.menu-movil .panel a[aria-current]{color:var(--indigo); background:var(--papel-banda)}
@media(max-width:1120px){.menu-buscar input{width:170px}.menu a{padding:7px 8px}}
@media(max-width:960px){
  /* dos filas: logotipo + «Menú» arriba; la sección activa y el buscador debajo, a todo el ancho */
  .nav .wrap{flex-wrap:wrap; height:auto; min-height:64px; padding-block:10px; row-gap:8px}
  .menu{order:3; flex:1 1 100%; margin-left:0; gap:8px}
  .menu a:not([aria-current]){display:none}
  .menu-buscar{flex:1 1 auto; margin-left:0}
  .menu-buscar input{width:100%}
  .menu-movil{display:block; margin-left:auto}
}
/* galaworklab: botón «Haz el diagnóstico» dentro del menú; en móvil sigue visible junto a la sección activa */
.menu-gw a.btn{display:inline-flex; align-items:center; margin-left:8px; padding:8px 16px; font-weight:700; color:var(--on-accent,var(--blanco)); background:var(--indigo); text-decoration:none}
.menu-gw a.btn:hover{background:var(--indigo-hover)}
@media(max-width:960px){ .menu-gw a.btn{display:inline-flex; margin-left:auto} }
@media print{.menu,.menu-movil{display:none}}

/* =====================================================================
   v2.0 · Lote 1 de la auditoría de legibilidad (14/10/2026)
   Contrastes medidos con la fórmula WCAG 2.x (ver informe de la coordinadora)
   ===================================================================== */
/* 1 · pie fijo en tinta en los dos modos (en oscuro daba 1,07:1) */
.pie{background:var(--panel); color:rgba(255,255,255,.72)}   /* fijo en los dos modos */
.pie a{color:var(--blanco)}
/* 3 · etiqueta «¿Eres empresa?» por encima de la regla de producto (calculadoras.css) */
.panel-tinta .eyebrow,[data-producto] .panel-tinta .eyebrow,[data-producto="calculadoras"] .panel-tinta .eyebrow{color:rgba(255,255,255,.75)}  /* sin verde de adorno */
/* verde de titulares: lima 2,4:1 → verde profundo; en oscuro el token ya es claro */
.verde{color:var(--accent-2-deep)}
.panel-tinta .verde,.stat.oscura .verde{color:var(--accent-2)}
/* placeholders legibles */
::placeholder{color:var(--ink-2); opacity:1}
/* líneas de lectura de 68 caracteres como máximo */
main p,.lead{max-width:68ch}
/* tamaños: base 16, tablas 15, nada por debajo de 12 */
body{font-size:16px}
tbody td{font-size:15px}
.kpi-label,thead th,.estado,.pildora,.fuente b{font-size:12px}
.eyebrow{font-size:11px; letter-spacing:.14em}   /* rótulo v2: 11/800 */
/* foco visible en todo lo que se puede tocar (anillo ≥ 3:1) */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--radius-xs)}

/* ---------- Páginas legales y 404 (marca.py les pone body.legal y esta hoja) ---------- */
body.legal main{padding:48px 0 24px}
body.legal main>.wrap{max-width:760px}
body.legal h1{margin:0 0 8px}
body.legal h2{font-size:22px; line-height:1.2; margin:40px 0 0}
body.legal p,body.legal li{color:var(--ink-2)}
body.legal .actualizado{font-size:14px; color:var(--ink-3)}
body.legal table{margin-top:16px}
body.legal th{font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); text-align:left; padding:0 10px 10px; border-bottom:2px solid var(--ink-1)}
body.legal td{padding:10px; border-bottom:1px solid var(--hairline); vertical-align:top; color:var(--ink-2); font-size:15px}
body.legal .ficha{background:var(--paper-0); border:1px solid var(--hairline); border-top:3px solid var(--accent); border-radius:var(--radius-md); padding:20px 24px; margin-top:24px}
body.legal .ficha p{margin:4px 0}
body.legal .pendiente{background:var(--estado-revisar-bg); color:var(--estado-revisar); font-weight:700; padding:0 4px; border-radius:4px}
body.legal .pie .wrap{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
.pie button.enlace{font:inherit; color:var(--blanco); background:none; border:0; padding:0; text-decoration:underline; cursor:pointer}
@media(max-width:600px){
  body.legal h1{font-size:32px}
  body.legal thead{display:none}
  body.legal table,body.legal tbody,body.legal tr,body.legal td{display:block; width:100%}
  body.legal tr{border-bottom:1px solid var(--hairline); padding:8px 0}
  body.legal td{border:0; padding:4px 0}
  body.legal td::before{content:attr(data-col); display:block; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
}

/* ---------- Pie de las calculadoras insertables (body.insertada) ---------- */
.insertada .vuelta .logo{font-size:15px; vertical-align:middle}

/* ---------- Movimiento: quien pide menos movimiento no ve animaciones ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}

/* Cabecera en móvil estrecho: el rótulo largo («TABLAS SALARIALES») no puede empujar el botón Menú fuera de la pantalla */
.nav .wrap{min-width:0}
.nav .logo{min-width:0}
@media (max-width:400px){
  .nav .logo .pr{letter-spacing:.08em}   /* mínimo 10 px (APLICAR-V2 §1.3) */
  .nav .logo .fil{margin-inline:.22em}
}
@media (max-width:350px){ .nav .logo .fil, .nav .logo .pr{display:none} }

/* =====================================================================
   v2.0 · Piezas de identidad (APLICAR-V2.md §3; CSS del manual, cap. 06–09)
   El verde solo donde hay respuesta: punto del nombre, punto activo, resultado y final del titular.
   ===================================================================== */
/* Titular con remate verde: la última palabra o el punto (cap. 06) */
:is(h1,h2,h3,.h1,.h2,.display) :is(.v,.verde){color:var(--accent-2-deep)}  /* solo en titulares */
.panel-tinta :is(h1,h2,h3,.h1,.h2) :is(.v,.verde),.sobre-tinta :is(h1,h2,h3,.h1,.h2) :is(.v,.verde){color:var(--accent-2)}
h1,.h1,.display{text-wrap:balance}
/* Bandas alternas (cap. 05) */
section.alterna,.banda{background:var(--paper-2)}
/* Tarjeta de herramienta: borde superior en su color (cap. 05) */
.card[data-producto],[data-producto] .card.herramienta{border-top:4px solid var(--prod)}
/* Resultado (cap. 09): borde verde, cifra grande y signo que late una vez */
.res,.resultado{border-left:4px solid var(--punto); padding:4px 0 4px 18px; display:grid; gap:4px}
.res .cifra,.resultado .cifra{font-weight:800; font-size:44px; letter-spacing:-.025em; color:var(--accent); font-variant-numeric:tabular-nums; line-height:1.05}
.res .que{font-size:14px; color:var(--ink-2)}
.res-cab{display:flex; align-items:center; gap:10px}
.res-cab .simbolo,.res-cab .sg{width:22px; height:22px; flex:none}
.cuenta{font-weight:800; letter-spacing:-.025em; color:var(--accent); font-variant-numeric:tabular-nums}
@media(max-width:600px){h2,.h2{font-size:30px}.display{font-size:48px}.res .cifra,.resultado .cifra{font-size:36px}}
/* Signo animado (cap. 07). Marcado: <svg class="simbolo a-carga|a-resp|a-lleg" data-pos="…"> con 9 círculos */
.simbolo circle{transform-box:fill-box; transform-origin:center}
/* Cargando: vuelta de 1,6 s; el centro queda quieto. Mientras se calcula o se genera un documento */
.simbolo.a-carga circle{opacity:.22; animation:gwCarga 1.6s linear infinite}
.simbolo.a-carga circle:nth-child(5){opacity:1; animation:none}
.simbolo.a-carga circle:nth-child(1){animation-delay:-1.6s}
.simbolo.a-carga circle:nth-child(2){animation-delay:-1.4s}
.simbolo.a-carga circle:nth-child(3){animation-delay:-1.2s}
.simbolo.a-carga circle:nth-child(6){animation-delay:-1.0s}
.simbolo.a-carga circle:nth-child(9){animation-delay:-.8s}
.simbolo.a-carga circle:nth-child(8){animation-delay:-.6s}
.simbolo.a-carga circle:nth-child(7){animation-delay:-.4s}
.simbolo.a-carga circle:nth-child(4){animation-delay:-.2s}
@keyframes gwCarga{0%{fill:var(--punto);opacity:1}35%{fill:var(--punto-reposo);opacity:.55}70%,100%{fill:var(--punto-reposo);opacity:.22}}
.cargando{display:inline-flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-2)}
.cargando .simbolo{width:28px; height:28px}
/* Respuesta: el punto activo late una vez al aparecer el resultado (añadir .a-resp al pintar la cifra) */
.simbolo.a-resp circle.activo{animation:gwLatido var(--mov-lento) var(--mov-curva) 1}
@keyframes gwLatido{0%,40%{transform:scale(1)}50%{transform:scale(1.32)}62%{transform:scale(.94)}72%,100%{transform:scale(1)}}
/* Llegada: los nueve puntos entran de uno en uno (70 ms) y el activo se vuelve verde */
.simbolo.a-lleg circle{transform:scale(0); animation:gwLlega var(--mov-medio) var(--mov-rebote) forwards}
.simbolo.a-lleg circle:nth-child(2){animation-delay:70ms}.simbolo.a-lleg circle:nth-child(3){animation-delay:140ms}
.simbolo.a-lleg circle:nth-child(4){animation-delay:210ms}.simbolo.a-lleg circle:nth-child(5){animation-delay:280ms}
.simbolo.a-lleg circle:nth-child(6){animation-delay:350ms}.simbolo.a-lleg circle:nth-child(7){animation-delay:420ms}
.simbolo.a-lleg circle:nth-child(8){animation-delay:490ms}.simbolo.a-lleg circle:nth-child(9){animation-delay:560ms}
@keyframes gwLlega{to{transform:scale(1)}}
/* Ilustración con puntos (cap. 08): personas como puntos, nunca caras */
.puntos{display:grid; grid-template-columns:repeat(var(--cols,20),minmax(0,1fr)); gap:5px}
.puntos span{aspect-ratio:1; border-radius:50%; background:var(--hairline); transition:background-color var(--mov-medio) var(--mov-curva), transform var(--mov-medio) var(--mov-rebote)}
.puntos span.a{background:var(--punto-reposo)}
.puntos span.b{background:var(--prod,var(--prod-tablas-salariales))}
.puntos span.v{background:var(--punto)}
.puntos span.fuera{background:transparent; box-shadow:inset 0 0 0 1.5px var(--hairline)}
.leyenda-puntos{display:flex; flex-wrap:wrap; gap:16px; font-size:13px; color:var(--ink-2)}
.leyenda-puntos span{display:inline-flex; align-items:center; gap:7px}
.leyenda-puntos span::before{content:''; width:10px; height:10px; border-radius:50%; background:var(--c)}
/* Tramas de puntos como fondo de héroes y cierres (tramas/*.svg) */
.trama{background-color:var(--paper-1); background-image:radial-gradient(circle,var(--hairline) 7.5px,transparent 8px); background-size:40px 40px}
.trama.tinta,.panel-tinta.trama{background-color:var(--panel); background-image:radial-gradient(circle,var(--panel-2) 7.5px,transparent 8px)}
/* Sello en una tinta (fax, sellos): todo en tinta y el punto activo como anillo */
.simbolo.una-tinta circle{fill:currentColor}
.simbolo.una-tinta circle.activo{fill:none; stroke:currentColor; stroke-width:2}

@media (prefers-reduced-motion: reduce){
  .simbolo.a-carga circle,.simbolo.a-resp circle.activo,.simbolo.a-lleg circle{animation:none !important; transform:none !important}
  .simbolo.a-carga circle{opacity:1}
  .simbolo.a-lleg circle.activo{fill:var(--punto)}
}

/* ---------- Sello «Revisado por Gala Worklab · fecha» (decisión de Gala 14/10: discreto y SOLO en el pie; lo pone marca.py) ----------
   Junto a un resultado o una tabla va solo la línea de fuente: <span class="fuente"><b>FUENTE</b>BOE … · actualizado el <time datetime="2026-10-13">13/10/2026</time></span> */
.pie .sello-pie{display:flex; align-items:center; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.12); font-size:12px; color:rgba(255,255,255,.72)}
.pie .sello-pie .simbolo{width:14px; height:14px; flex:none}
.pie .sello-pie .simbolo circle{fill:var(--blanco)}
.pie .sello-pie .simbolo circle.activo{fill:var(--punto)}
.pie .sello-pie b{color:var(--blanco); font-weight:700}
.pie .sello-pie time{font-family:'IBM Plex Mono',monospace}

/* ---------- Pestañas (manual, Interfaz · APLICAR-V2 §1.12): control en cápsula; la activa en blanco, índigo y con el punto verde delante ----------
   <div class="pestanas" role="tablist" aria-label="…"><button type="button" role="tab" id="t1" aria-selected="true" aria-controls="p1">Anual</button>…</div>
   <div role="tabpanel" id="p1" aria-labelledby="t1">…</div>   (Compartido/assets/movimiento.js las hace funcionar con teclado) */
.pestanas,.pest{display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; background:var(--papel-banda); border:1px solid var(--linea); border-radius:var(--radius-pill); max-width:100%}
.pestanas [role="tab"],.pest button{font:700 15px 'Barlow',system-ui,sans-serif; background:none; border:0; padding:9px 18px; color:var(--texto-2); cursor:pointer; border-radius:var(--radius-pill); display:inline-flex; align-items:center; gap:8px;
  transition:background var(--mov-rapido) var(--mov-curva), color var(--mov-rapido)}
.pestanas [role="tab"]:hover,.pest button:hover{color:var(--indigo)}
.pestanas [role="tab"][aria-selected="true"],.pest button[aria-selected="true"]{background:var(--tarjeta); color:var(--indigo); box-shadow:0 1px 2px rgba(18,26,51,.08),0 4px 12px rgba(18,26,51,.08)}
.pestanas [role="tab"][aria-selected="true"]::before,.pest button[aria-selected="true"]::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--punto)}
.pestanas [role="tab"]:focus-visible,.pest button:focus-visible{outline:none; box-shadow:var(--ring)}
[role="tabpanel"][hidden]{display:none}
@media(max-width:420px){.pestanas [role="tab"],.pest button{padding:8px 12px; font-size:14px}}

/* ---------- Confirmación (toast): fondo tinta y texto papel (se invierte de noche), 15 px, con el signo y una línea de detalle ----------
   <div class="toast" role="status" aria-live="polite"><svg class="simbolo" …></svg><span>Kit descargado<small>Está en tu carpeta de descargas</small></span></div>
   GW.toast('Kit descargado', 'Está en tu carpeta de descargas') lo crea abajo a la derecha durante 4 s. */
.toast{display:flex; align-items:center; gap:12px; background:var(--tinta); color:var(--papel); padding:14px 18px; border-radius:var(--radius-md); font-size:15px; font-weight:600; box-shadow:0 12px 32px rgba(18,26,51,.22); max-width:min(420px,calc(100vw - 32px))}
.toast .simbolo,.toast .sg{width:22px; height:22px; flex:none}
.toast .simbolo circle{fill:var(--papel)}
.toast .simbolo circle.activo{fill:var(--punto)}
.toast small{display:block; font-weight:400; font-size:13px; opacity:.75}
.toasts{position:fixed; right:16px; bottom:16px; z-index:90; display:grid; gap:8px; justify-items:end; pointer-events:none}
.toasts .toast{pointer-events:auto; animation:gwToast var(--mov-medio) var(--mov-curva)}
@keyframes gwToast{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){.toasts .toast{animation:none}.pestanas [role="tab"],.pest button{transition:none}}

/* Cabecera a 360 px: margen de 16 px y el rótulo se recorta antes que desbordar */
@media(max-width:480px){
  .nav .wrap{padding-inline:16px}
  .nav .logo{flex:0 1 auto}
  .nav .logo .pr{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
}

/* La línea de fuente no puede desbordar en móvil (control de marca, 14/10) */
.fuente{flex-wrap:wrap; max-width:100%; min-width:0; overflow-wrap:anywhere}
.fuente b{white-space:normal}

/* Menú común de galaworklab.com (mismo que el de la Tienda; lo pone integrar.py en todas sus páginas) */
.gw-menu{display:flex; align-items:center; gap:22px; font-size:14px; font-weight:600}
.gw-menu a{text-decoration:none; color:var(--ink-2)}
.gw-menu a:hover,.gw-menu a[aria-current="page"]{color:var(--accent)}
.gw-menu .btn{height:36px; padding:0 16px; font-size:13px; color:var(--on-accent,#fff)}
@media(max-width:820px){.gw-menu a:not(.btn){display:none}}
@media(max-width:400px){.gw-menu .btn{padding:0 12px}}

/* «Avísame» en móvil: en columna, flex:1 dejaba la casilla del correo sin altura (flex-basis 0). Barlow 600 18 px como pide la v2. */
.gw-cap-fila input{font:600 18px/1.2 'Barlow',system-ui,sans-serif}
@media (max-width:420px){ .gw-cap-fila input{flex:none; width:100%; height:48px} }

/* «Saltar al contenido» (auditoría I2): visible solo al llegar con el teclado */
.saltar{position:absolute; left:16px; top:-64px; z-index:1000; background:var(--indigo,#2B3A67); color:#fff; font:700 15px/1 'Barlow',system-ui,sans-serif; padding:12px 16px; border-radius:8px; text-decoration:none; transition:top var(--mov-rapido,160ms) var(--mov-curva,ease)}
.saltar:focus,.saltar:focus-visible{top:12px; outline:none; box-shadow:var(--ring)}
@media (prefers-reduced-motion:reduce){.saltar{transition:none}}

/* ---------- Rótulo largo y corto (14/10): por debajo de 420 px «TABLAS» y «PREVENCIÓN»; por encima, el nombre entero ---------- */
.logo .pr .corto{display:none}
@media(max-width:419.98px){.logo .pr .largo{display:none}.logo .pr .corto{display:inline}}
/* Red de seguridad: si otro rótulo no cabe, se recorta con elipsis en vez de montarse sobre «Menú» */
.nav .logo{min-width:0; flex:1 1 auto}
.nav .logo .pr{flex:0 1 auto; min-width:0}

/* =====================================================================
   v3.1 · 15/10/2026 · Identidad-GALA/v3 (manual v3, sistema-de-diseno/gala-worklab-ds.css, skill §Web)
   Va al final para mandar sobre lo anterior sin tocar el marcado de las páginas.
   ===================================================================== */
/* Fondo blanco en todo lo digital; secciones alternas en banda #F3F4F9 */
body{background:var(--fondo); font-family:var(--fuente)}
section.alterna,.banda{background:var(--banda)}
.nav{background:color-mix(in srgb,var(--fondo) 92%,transparent)}
.wrap{padding-inline:max(16px,4vw)}

/* Letra: la pareja pregunta → respuesta. Titulares 800 índigo más apretados; cifras −0,045 em */
h1,.h1{letter-spacing:-.03em}
.display{letter-spacing:-.04em}
h2,.h2{letter-spacing:-.025em}
.stat .valor,.res .cifra,.resultado .cifra,.cuenta{letter-spacing:var(--ls-cifra); font-variant-numeric:tabular-nums}
.mono,.fuente,.sello time,.pie .sello-pie time{font-family:var(--fuente-datos)}
.fuente{color:var(--texto-3)}
/* Rótulo v3: 800, mayúsculas, +0,16 em, gris de texto 3; el color de la herramienta sigue en el punto de delante */
.eyebrow,[data-producto] .eyebrow{font-size:12px; letter-spacing:.16em; color:var(--texto-3)}
.kpi-label,thead th{letter-spacing:.16em; color:var(--texto-3)}
/* El verde de texto (#56700F) solo en la palabra o el punto final de una respuesta */
.verde,:is(h1,h2,h3,.h1,.h2,.display) :is(.v,.verde){color:var(--punto-texto)}

/* Botones v3: índigo, texto blanco, píldora, 700 · uno principal por pantalla · NUNCA verde */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:auto; min-height:44px; padding:10px 22px;
  font-size:16px; font-weight:700; line-height:1.2; border-radius:var(--radius-pill); border:1.5px solid var(--indigo); background:var(--indigo);
  color:var(--on-accent,var(--blanco)); text-decoration:none; transition:background var(--mov-rapido) var(--mov-curva),border-color var(--mov-rapido),transform var(--mov-rapido) var(--mov-curva)}
.btn:hover{background:var(--indigo-hover); border-color:var(--indigo-hover)}
.btn:active{transform:scale(.97)}
.btn.secundario{background:transparent; color:var(--indigo); border-color:var(--indigo)}
.btn.secundario:hover{background:var(--banda); border-color:var(--indigo)}
.btn.ghost{background:transparent; border-color:transparent; color:var(--indigo); text-decoration:underline; text-underline-offset:3px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.4; pointer-events:none}
.panel-tinta .btn:not(.secundario):not(.ghost){background:var(--blanco); border-color:var(--blanco); color:var(--indigo)}
.gw-menu .btn,.menu-gw a.btn{min-height:40px; height:auto; padding:8px 18px; font-size:14px; border-radius:var(--radius-pill)}

/* Campos v3: 1,5 px de filete, radio 12, 48 px de alto, 17 px (sin zoom en iPhone) */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select{min-height:44px; border-width:1.5px; border-radius:12px}
.menu-buscar input{min-height:36px; border-width:1px; border-radius:var(--radius-pill)}

/* Tarjetas: blancas con filete; sombra solo en la destacada */
.card{box-shadow:none}
.card.destacada{box-shadow:var(--shadow-md)}

/* Píldoras y estados v3 (siempre con palabra) */
.estado{font-size:12.5px; font-weight:700; letter-spacing:.02em; text-transform:none}
.estado::before{width:7px; height:7px}

/* Resultado = respuesta: cifra 800 −0,045 em; el borde verde es el único verde del bloque */
.res .cifra,.resultado .cifra{font-weight:800}

/* Paneles de color: índigo y azul intenso; textos claros v3 */
.panel-tinta p,.panel-tinta .lead{color:var(--sobre-oscuro-2)}
.panel-tinta .eyebrow,.sobre-tinta .eyebrow{color:var(--sobre-oscuro-3)}
.bloque-indigo{background:var(--indigo); color:var(--blanco)}
.bloque-azul{background:var(--azul-intenso); color:var(--blanco)}

/* Pie v3: tinta, logotipo blanco con el centro verde, enlaces blancos */
.pie{background:var(--panel); color:var(--sobre-oscuro-2)}
.pie .sello-pie{color:var(--sobre-oscuro-3)}

/* ---------- Plantilla de puntos v3.1: colores VIVOS, en rejilla, hueco limpio alrededor del verde, nunca detrás del texto ----------
   Archivos en /assets/puntos/ (Compartido/herramientas/puntos.py). Para piezas nuevas: <svg class="gw-campo" data-cols="18" data-filas="6"></svg>
   y /assets/gw-puntos.js (galaPuntos). */
.trama{background-color:var(--fondo); background-image:url(/assets/puntos/franja.svg); background-size:auto 100%; background-repeat:no-repeat; background-position:left center; border:0}
.trama.tinta,.panel-tinta.trama{background-color:var(--panel); background-image:url(/assets/puntos/franja-oscura.svg)}
.trama.una{background-image:url(/assets/puntos/tu-punto.svg)}
.trama.una::after{content:none}
.gw-campo{display:block; width:100%; height:auto}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .trama{background-image:url(/assets/puntos/franja-oscura.svg)}
  :root:not([data-theme="light"]) .trama.una{background-image:url(/assets/puntos/tu-punto-oscuro.svg)}
}
:root[data-theme="dark"] .trama{background-image:url(/assets/puntos/franja-oscura.svg)}
:root[data-theme="dark"] .trama.una{background-image:url(/assets/puntos/tu-punto-oscuro.svg)}

/* ---------- Sistema de diseño v3 (gala-worklab-ds.css) dentro de class="gw" ----------
   Las piezas .gw-* del manual solo actúan dentro de un contenedor .gw (la Tienda ya usa nombres .gw-* propios). */
:root{
  --gw-fondo:var(--fondo); --gw-banda:var(--banda); --gw-papel:var(--papel-impreso); --gw-tarjeta:var(--tarjeta); --gw-linea:var(--linea); --gw-suave:var(--suave);
  --gw-tinta:var(--tinta); --gw-texto-2:var(--texto-2); --gw-texto-3:var(--texto-3);
  --gw-indigo:var(--indigo); --gw-indigo-hover:var(--indigo-hover); --gw-worklab:var(--worklab); --gw-azul:var(--azul-intenso);
  --gw-punto:var(--punto); --gw-punto-texto:var(--punto-texto);
  --gw-ok:var(--estado-alta); --gw-ok-bg:var(--estado-alta-bg); --gw-aviso:var(--estado-revisar); --gw-aviso-bg:var(--estado-revisar-bg);
  --gw-info:var(--estado-tramite); --gw-info-bg:var(--estado-tramite-bg); --gw-error:var(--estado-baja); --gw-error-bg:var(--estado-baja-bg);
  --gw-fuente:var(--fuente); --gw-mono:var(--fuente-datos);
  --gw-r-s:8px; --gw-r-m:14px; --gw-r-l:22px; --gw-sombra:var(--shadow-md);
  --gw-rapido:var(--mov-rapido); --gw-medio:var(--mov-medio); --gw-lento:var(--mov-lento); --gw-curva:var(--mov-curva); --gw-rebote:var(--mov-rebote);
}
.gw .gw-pregunta{font-weight:600; color:var(--gw-texto-3); font-size:clamp(17px,1.8vw,22px); letter-spacing:-.005em; margin:0}
.gw .gw-respuesta{font-weight:800; color:var(--gw-indigo); font-size:clamp(36px,5vw,64px); line-height:.95; letter-spacing:-.04em; margin:0; text-wrap:balance}
.gw .gw-cifra{font-weight:800; color:var(--gw-indigo); font-size:clamp(56px,8vw,112px); line-height:.9; letter-spacing:-.045em; font-variant-numeric:tabular-nums; margin:0}
.gw .gw-punto{color:var(--gw-punto)}
.gw .gw-texto{font-size:17px; color:var(--gw-texto-2); max-width:62ch; margin:0}
.gw .gw-etiqueta{font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--gw-texto-3)}
.gw .gw-fuente-legal{font-family:var(--gw-mono); font-size:12.5px; color:var(--gw-texto-3)}
.gw .gw-respuesta-card{display:flex; flex-direction:column; gap:12px; background:var(--gw-tarjeta); border:1px solid var(--gw-linea); border-radius:var(--gw-r-l); padding:clamp(22px,3vw,36px)}
.gw .gw-respuesta-card .gw-respuesta{font-size:clamp(30px,3.6vw,46px)}
.gw .gw-respuesta-card--oscura{background:var(--gw-indigo); border-color:var(--gw-indigo)}
.gw .gw-respuesta-card--oscura .gw-pregunta{color:var(--sobre-oscuro-2)}
.gw .gw-respuesta-card--oscura .gw-respuesta{color:#FFFFFF}
.gw .gw-punto-pop{display:inline-block; width:.2em; height:.2em; border-radius:50%; background:var(--gw-punto); margin-left:.05em; animation:gw-pop var(--gw-medio) var(--gw-rebote) both}
@keyframes gw-pop{from{transform:scale(0)}to{transform:scale(1)}}
.gw .gw-sobrio{border-left:4px solid var(--gw-indigo); background:var(--gw-banda); border-radius:0 var(--gw-r-m) var(--gw-r-m) 0; padding:18px 20px; display:flex; flex-direction:column; gap:8px}
.gw .gw-recorrido{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; position:relative; list-style:none; margin:0; padding:0}
.gw .gw-recorrido::before{content:""; position:absolute; top:13px; left:12%; right:12%; height:2px; background:var(--gw-suave)}
.gw .gw-recorrido li{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; font-size:14px; color:var(--gw-texto-2); position:relative}
.gw .gw-recorrido li::before{content:""; width:28px; height:28px; border-radius:50%; background:var(--gw-indigo)}
.gw .gw-recorrido li.gw-actual{color:var(--gw-tinta); font-weight:700}
.gw .gw-recorrido li.gw-actual::before{background:var(--gw-punto)}
.gw .gw-recorrido li.gw-futuro::before{background:var(--gw-fondo); box-shadow:inset 0 0 0 2px var(--gw-suave)}
@media (prefers-reduced-motion:reduce){.gw .gw-punto-pop{animation:none}}

/* ---------- Enlaces dentro del texto (15/10, fallo visto por Gala): que se vean como enlaces ----------
   Índigo, 600 y subrayado visible en párrafos, notas, celdas y definiciones. Botones, tarjetas y menús no cambian. */
:is(p,dd,small,figcaption,td,blockquote,.nota,.aviso,.lead,.ayuda) a:not(.btn):not(.pr):not(.logo-marca){
  color:var(--indigo); font-weight:600; text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--indigo) 50%,transparent)}
:is(p,dd,small,figcaption,td,blockquote,.nota,.aviso,.lead,.ayuda) a:not(.btn):not(.pr):not(.logo-marca):hover{text-decoration-color:var(--indigo); text-decoration-thickness:2px}
:is(.pie,.panel-tinta,.sobre-tinta,.bloque-indigo,.bloque-azul,.v2-hero,.nav) :is(p,dd,small,figcaption,td,blockquote,.nota,.aviso,.lead,.ayuda) a:not(.btn):not(.pr):not(.logo-marca){color:#FFFFFF; text-decoration-color:color-mix(in srgb,#FFFFFF 60%,transparent)}
/* label.btn (p. ej. «Elegir archivos»): texto centrado en vertical en todos los navegadores */
label.btn{display:inline-flex; align-items:center; justify-content:center; margin:0}

/* =====================================================================
   Documentos de los kits · una sola familia v3.1 (15/10/2026)
   Registro retributivo (.doc de transparencia), protocolo de acoso y planes (.doc de igualdad/comun/documentos.js)
   y desconexión digital y protección de datos (.doc de compliance/asistente.js). Vista previa y PDF iguales:
   cabecera = logotipo del kit «Gala Worklab. │ HERRAMIENTA» (assets/logos/v3/productos/), Barlow, títulos 800 índigo,
   rótulos 800 +0,16 em, tablas con filete de tinta, huecos en amarillo, márgenes A4 22 × 20 mm y pie con la página.
   Es papel: colores fijos, no cambian con el modo oscuro. El Word sigue las mismas medidas (GW.docx y compliance/asistente.js).
   ===================================================================== */
.doc{font-family:'Barlow',system-ui,sans-serif; color:#121A33; line-height:1.55; text-align:left}
.doc::before{content:""; display:block; height:26px; margin:0 0 22px -4px; background:url(/assets/logos/v3/productos/logo-transparencia-color.svg) left center/auto 100% no-repeat;
  -webkit-print-color-adjust:exact; print-color-adjust:exact}
[data-producto="acoso"] .doc::before{background-image:url(/assets/logos/v3/productos/logo-acoso-color.svg)}
[data-producto="compliance"] .doc::before{background-image:url(/assets/logos/v3/productos/logo-compliance-color.svg)}
[data-producto="formacion"] .doc::before{background-image:url(/assets/logos/v3/productos/logo-formacion-color.svg)}
/* título del documento */
.doc :is(.d-portada h1,.doc-titulo,.doc-h1){font-weight:800; color:#2B3A67; letter-spacing:-.03em; line-height:1.08; text-wrap:balance}
/* secciones y subsecciones */
.doc :is(h2.d-h1,.doc-h2,h2:not([class])){font-size:17px; font-weight:800; color:#2B3A67; letter-spacing:-.015em; line-height:1.2; margin:26px 0 8px; padding-top:0; border-top:0}
.doc :is(h3.d-h2,h4.d-h3,h3:not([class]),h4:not([class])){font-size:14.5px; font-weight:700; color:#121A33; letter-spacing:0; margin:18px 0 4px}
/* rótulo de empresa o marca del documento */
.doc :is(.d-empresa,.doc-marca){font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#646C84}
.doc :is(.d-sub,.doc-sub,.d-linea){color:#46506B}
/* nota: banda y filete índigo (el verde no decora) */
.doc :is(.d-nota,p.doc-nota){background:#F3F4F9; border-left:3px solid #2B3A67; border-radius:0 6px 6px 0; padding:9px 13px; font-size:12.5px; font-style:normal; color:#46506B}
/* tablas */
.doc table{border-collapse:collapse; width:100%; font-variant-numeric:tabular-nums}
.doc thead th{font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#646C84; text-align:left; border-bottom:2px solid #121A33; padding:0 8px 6px}
.doc tbody td{border-bottom:1px solid #E1E4EC; padding:7px 8px; vertical-align:top}
/* firmas */
.doc :is(.d-firmas,.doc-firmas){display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:36px 32px; margin:40px 0 16px; font-size:12px; color:#46506B}
.doc :is(.d-raya,.doc-raya,.doc-firmas .raya){display:block; border:0; border-bottom:1px solid #121A33; height:44px; margin:0 0 6px}
/* huecos para rellenar: amarillo en los cuatro («lo amarillo se rellena») */
.doc :is(.campo,mark.hueco){background:#FFF3A3; color:#5A4A00; border-radius:2px; padding:0 3px; font-family:inherit; font-size:inherit;
  -webkit-print-color-adjust:exact; print-color-adjust:exact}
@media print{
  @page{size:A4; margin:22mm 20mm;
    @bottom-left{content:"Gala Worklab."; font:700 8.5pt 'Barlow',sans-serif; color:#646C84}
    @bottom-right{content:counter(page) " / " counter(pages); font:400 8.5pt 'IBM Plex Mono',monospace; color:#646C84}}
  .doc{font-size:11pt; line-height:1.5}
  .doc::before{height:24px; margin-bottom:18px}
  .doc :is(.d-portada h1,.doc-titulo){font-size:26pt}
  .doc .doc-h1{font-size:18pt}
  .doc :is(h2.d-h1,.doc-h2,h2:not([class])){font-size:13pt}
  .doc :is(h3.d-h2,h4.d-h3,h3:not([class]),h4:not([class])){font-size:11.5pt}
  .doc thead th{font-size:7.5pt}
  .doc tbody td{font-size:9.5pt}
}

/* ---------- Cabecera en color (15/10, Gala: «el encabezado blanco es soso») ----------
   Bloque índigo v3 (#2B3A67, fijo en los dos modos), logotipo en blanco con «Worklab» #AEBBE3 y el centro verde,
   rótulo de la herramienta en su color claro (paleta sobre oscuro de la v3), menú claro y botón blanco. */
.nav{--nav-fondo:#2B3A67; background:var(--nav-fondo); border-bottom:0; backdrop-filter:none; color:#FFFFFF}
.nav .logo,.nav .logo .logo-marca{color:#FFFFFF}
.nav .logo .wl{color:#AEBBE3}
.nav .logo .nombre i{color:var(--punto)}
.nav .logo .simbolo circle{fill:#FFFFFF}
.nav .logo .simbolo circle.activo{fill:var(--punto)}
.nav .logo .fil{background:rgba(255,255,255,.35)}
.nav .logo .pr{color:#DDE2F5}
.nav .logo .pr[data-prod="tablas"]{color:#6DB8E0}
.nav .logo .pr[data-prod="escritos"]{color:#A9BDE3}
.nav .logo .pr[data-prod="convenios"]{color:#E2B25C}
.nav .logo .pr[data-prod="calculadoras"]{color:#C3CDF0}
.nav .logo .pr[data-prod="compliance"]{color:#6FC2C9}
.nav .logo .pr[data-prod="acoso"]{color:#E0A3BE}
.nav .logo .pr[data-prod="formacion"]{color:#B9B3E6}
.nav .logo .pr[data-prod="transparencia"]{color:#B7D45A}
.nav .logo a:focus-visible{box-shadow:0 0 0 2px var(--nav-fondo),0 0 0 4px #FFFFFF}
.nav .menu a{color:#DDE2F5}
.nav .menu a:hover,.nav .menu a[aria-current]{color:#FFFFFF; background:rgba(255,255,255,.12)}
.nav .menu .ico,.nav .menu-buscar .ico{color:#C3CBE6}
.nav .menu-buscar .ico{color:var(--indigo)}
.nav .menu-buscar input{background:#FFFFFF; border-color:transparent; color:#121A33}
.nav .menu-movil summary{background:transparent; color:#FFFFFF; border-color:rgba(255,255,255,.45)}
.nav .menu-movil[open] summary{background:#FFFFFF; color:#2B3A67; border-color:#FFFFFF}
.nav .menu-movil .panel a{color:#121A33}
.nav .menu-movil .panel .ico{color:#2B3A67}
.nav .menu-gw a.btn,.nav .gw-menu .btn{background:#FFFFFF; border-color:#FFFFFF; color:#2B3A67}
.nav .menu-gw a.btn:hover,.nav .gw-menu .btn:hover{background:#DDE2F5; border-color:#DDE2F5}
.nav .gw-menu a:not(.btn){color:#DDE2F5}
.nav .gw-menu a:not(.btn):hover,.nav .gw-menu a[aria-current="page"]{color:#FFFFFF}
.nav :is(a,summary,input):focus-visible{box-shadow:0 0 0 2px var(--nav-fondo),0 0 0 4px #FFFFFF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .nav{--nav-fondo:#19213D}}
:root[data-theme="dark"] .nav{--nav-fondo:#19213D}
.nav{box-shadow:inset 0 -1px 0 rgba(255,255,255,.14)}   /* separa la cabecera de los héroes índigo */