/* Plantilla común de galaworklab.com (29/10/2026, revisión UI/UX, puntos 1–8 de 00_AHORA/UX-GALAWORKLAB-29-10/HALLAZGOS.md).
   La enlaza Compartido/plantilla_gw.py en todas las páginas de galaworklab (salvo la escuela), la ÚLTIMA de las hojas,
   para que mande sobre las hojas propias de cada sección. Un solo sitio para: cabecera, pie, migas, escala del titular,
   tres botones (primario, secundario, enlace), texto mínimo de 12 px y objetivos táctiles de 24 × 24 px (WCAG 2.2). */

/* ---------- 2 · Cabecera única: <header class="cabecera-gw"> envuelve el menú común y es la que se queda fija ---------- */
.cabecera-gw{position:sticky; top:0; z-index:50}
.cabecera-gw > .nav{position:relative; top:auto}
.cabecera-gw .nav .wrap{height:64px; min-height:64px}
@media(max-width:960px){.cabecera-gw .nav .wrap{height:auto; min-height:64px}}
/* el logotipo «Gala Worklab.» con 44 px de alto de toque sin mover nada */
.cabecera-gw .logo-marca{min-height:44px; padding-block:0}

/* ---------- 3 · Un solo tamaño de titular: 64 px en escritorio, 36 px en móvil ---------- */
body h1{font-size:clamp(36px, 5.2vw, 64px) !important; line-height:1.02 !important; letter-spacing:-.025em}

/* ---------- 4 · Tres botones: primario, secundario y enlace ---------- */
:is(.btn, .boton, button.btn, label.btn, a.btn, .gws-boton, .ce-btn, .ca-btn, .vpt-btn, #gw-ayuda-boton, .gw-cookies button, .aviso-cookies button, [class*=cookies]:not(body):not(html) button){
  font-family:inherit; font-size:16px !important; font-weight:700; line-height:1.2;
  min-height:44px; height:auto; padding:10px 22px; border-radius:999px !important;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; text-align:center; text-decoration:none;
  border:1.5px solid var(--indigo,#2B3A67); cursor:pointer}
/* primario: índigo lleno */
:is(.btn, .boton, .gws-boton-indigo, .ce-btn, .ca-btn, .vpt-btn):not(.secundario):not(.sec):not(.ca-sec):not(.vpt-btn-2):not(.ghost):not(.gws-boton-claro){
  background:var(--indigo,#2B3A67) !important; color:#FFFFFF !important}
:is(.btn, .boton, .gws-boton-indigo, .ce-btn, .ca-btn, .vpt-btn):not(.secundario):not(.sec):not(.ca-sec):not(.vpt-btn-2):not(.ghost):not(.gws-boton-claro):hover{
  background:var(--indigo-hover,#1F2B50) !important}
/* secundario: blanco con borde índigo */
:is(.btn.secundario, .gws-boton-claro, .ce-btn.sec, .ca-btn.ca-sec, .vpt-btn-2){
  background:#FFFFFF !important; color:var(--indigo,#2B3A67) !important}
:is(.btn.secundario, .gws-boton-claro, .ce-btn.sec, .ca-btn.ca-sec, .vpt-btn-2):hover{background:var(--papel-banda,#F3F4F9) !important}
/* enlace: sin caja */
:is(.btn.ghost, button.enlace){background:transparent !important; border-color:transparent !important; color:var(--indigo,#2B3A67) !important;
  text-decoration:underline; text-underline-offset:3px; padding-inline:4px; min-height:24px}
.pie button.enlace{color:#FFFFFF !important}
/* opciones para elegir (tramos, modos, respuestas): misma cápsula; la elegida, en índigo */
:is(.gws-reto-op, button.modo, .em-chips button, .dg-atajo-bs button, .pasos-nav button, .tam button, .ins-tabs button){font-size:16px !important; border-radius:999px !important; min-height:44px}
button.modo.activo{background:var(--indigo,#2B3A67) !important; color:#FFFFFF !important}
button.quita{font-size:16px !important; border-radius:999px !important; background:transparent !important; border-color:transparent !important;
  color:var(--indigo,#2B3A67) !important; text-decoration:underline; text-underline-offset:3px}
:is(.btn, .boton, .gws-boton, .ce-btn, .ca-btn, .vpt-btn):focus-visible{outline:none; box-shadow:var(--ring,0 0 0 3px rgba(43,58,103,.35))}

/* ---------- 5 · Migas de pan ---------- */
.migas-gw{border-bottom:1px solid var(--hairline,#E2E5EE); background:var(--papel,#FFFFFF)}
.migas-gw ol{list-style:none; margin:0; padding:6px 0; display:flex; flex-wrap:wrap; align-items:center; gap:0 4px; font-size:14px; color:var(--texto-2,#46506B)}
.migas-gw li{display:inline-flex; align-items:center; min-height:32px}
.migas-gw li + li::before{content:'›'; margin-right:4px; color:var(--texto-3,#646C84)}
.migas-gw a{display:inline-flex; align-items:center; min-height:32px; padding-inline:2px; color:var(--indigo,#2B3A67); font-weight:600; text-decoration:none}
.migas-gw a:hover{text-decoration:underline; text-underline-offset:3px}
.migas-gw [aria-current]{color:var(--tinta,#121A33); font-weight:600}

/* ---------- 1 · Pie único ---------- */
.pie .pie-gw{display:grid; gap:12px}
.pie .pie-gw p{margin:0; color:rgba(255,255,255,.85)}
.pie .pie-gw-enlaces{display:flex; flex-wrap:wrap; gap:0 18px; font-size:14px}
.pie .pie-gw-copia{font-size:13px; color:rgba(255,255,255,.72)}
.pie .pie-gw b{color:#FFFFFF}
.pie a{display:inline-flex; align-items:center; min-height:24px; padding-block:2px; color:#FFFFFF}
.pie .pie-confianza p, .pie .sello-pie{color:rgba(255,255,255,.85) !important}

/* ---------- 6 · Contraste: el gris terciario de la marca (4,8:1 sobre la banda) en todas las hojas ---------- */
:root{--texto-3:#646C84; --ink-3:#646C84}
.saltar:not(:focus){color:transparent !important}

/* ---------- 7 · Nada por debajo de 12 px ---------- */
:is(.eyebrow, .kpi-label, .du-fuente, .du-fuente b, button small, .btn small, thead th, th, .ct-rot, .dh-fam, .ca-paso legend, .ca-sello,
  .ca-sig a i, .ce-sig a i, .dc-sig a i, .qd-sig a i, .ce-bloque b, .dc-grupo, .qd-rot, .qd-caja b, .qd-cal span, .gws-col dt){font-size:12px !important}

/* ---------- 8 · Objetivos táctiles de 24 × 24 px como mínimo ---------- */
input:is([type=checkbox],[type=radio]){width:24px !important; height:24px !important; min-width:24px; flex:none; accent-color:var(--indigo,#2B3A67)}
/* casillas ocultas tras una opción dibujada: la casilla cubre toda la opción, así el toque es la opción entera */
label.opcion{position:relative}
label.opcion > input:is([type=checkbox],[type=radio]){position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;
  margin:0 !important; opacity:0 !important; clip:auto !important; clip-path:none !important; cursor:pointer; z-index:1}
/* enlaces sueltos dentro de una etiqueta o de una tarjeta: zona de toque de 24 px sin mover el texto */
label a, .gw-kit > a, .gw-cap-acepto a{display:inline-block; padding-block:5px; margin-block:-5px}
:is(h2, h3, h4) > a, .cv-indice a{display:inline-block; padding-block:3px; margin-block:-3px}
input[type=range]{height:24px !important; min-height:24px}
/* la opción elegida: todo su texto en blanco sobre índigo */
button.modo.activo *{color:#FFFFFF !important}
/* barra de multas «muy grave»: la cifra lleva su propio fondo rojo, el de la barra (mismo aspecto, contraste medible) */
.escala .aplica .barra span{background:var(--danger,#B5533C)}

/* =================== Ronda 2 (29/10, HALLAZGOS-VISUALES.md) =================== */

/* 1 · Lo útil bajo el titular */
.lead-resto{margin:10px 0 0; max-width:720px; font-size:16px; line-height:1.55; color:var(--texto-2,#46506B)}
:is(.lead, .cl-cab-lead){max-width:720px; text-wrap:pretty}
main h1{max-width:960px}
/* ficha de documento: quién · tiempo · precio en una fila, y el selector de tamaño pequeño debajo */
.gw-ficha:not(.guia){margin-top:16px; padding-top:12px}
.gw-ficha:not(.guia) .gw-ficha-datos{display:flex; flex-wrap:wrap; gap:4px 28px; margin:0}
.gw-ficha:not(.guia) .gw-ficha-datos > div{display:flex; gap:6px; align-items:baseline}
.gw-ficha:not(.guia) .gw-ficha-datos dt{font-size:13px; font-weight:700; color:var(--texto-3,#646C84)}
.gw-ficha:not(.guia) .gw-ficha-datos dd{margin:0; font-size:15px; font-weight:700; color:var(--tinta,#121A33)}
.gw-ficha-tam{margin-top:10px}
/* firma, documento relacionado y selector, al final del contenido */
.gw-ficha-final{padding:24px 0 8px}
.gw-ficha-final .gw-ficha{margin:0; padding-top:18px; border-top:1px solid var(--linea,#E1E4EC)}

/* 2 · Cabeceras sin huecos ni bandas */
body.legal main{padding-top:0}
:is(.hero-grid, .ct-hero){align-items:start !important}
:is(.hero-grid, .ct-hero) > .cifras{align-self:start; margin-top:12px !important}
.cifras > div{justify-content:flex-start}
@media(max-width:600px){ .cifras{grid-template-columns:1fr !important} }
.gw-hero.gw-trama{padding-bottom:8px !important}

/* 3 · Tarjetas a la misma altura y pastillas informativas sin forma de botón */
.sellos{display:flex; flex-wrap:wrap; gap:4px 18px}
.sellos .pildora, .sellos .pildora.plana{border:0 !important; background:none !important; padding:0 !important; min-height:0;
  border-radius:0; box-shadow:none; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--texto-2,#46506B);
  display:inline-flex; align-items:center; gap:8px}
.sellos .pildora::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--indigo,#2B3A67); flex:none}
.gw-tj-tit{min-height:2.2em}
.manuales > a{justify-content:flex-start !important}
.escalera{align-items:start !important}
.escalera .escalon{margin-top:0 !important; transform:none !important}
.gw-tarjetas > li, .gw-tarjetas .gw-tj{height:100%}

/* 4 · Solo índigo y un verde: la familia, como punto junto a la palabra */
.cl-cab-raya{background:var(--indigo,#2B3A67) !important}
:is(.cl-cab-et, .cl-cab-fam b, .gw-bq-n, .gw-fam33-nombre, .gw-rot){color:var(--indigo,#2B3A67) !important}
.cl-cab-fam{border-top-color:var(--linea,#E1E4EC) !important}
.gw-tj, .gw-tj:hover{border-top:1px solid var(--linea,#E1E4EC) !important}
.gw-tj:hover{border-color:var(--indigo,#2B3A67) !important}
.gw-bq-top{border-bottom:1px solid var(--linea,#E1E4EC) !important}
.gw-car-it{border-left:1px solid var(--linea,#E1E4EC) !important}
.gw-car-ic{background:var(--banda,#F3F4F9) !important}
fieldset.paso > legend{color:var(--indigo,#2B3A67) !important}
main[data-gw-ruta="/"] .cl-ley{display:none}

/* 5 · Tablas de multas como tarjetas en el móvil */
@media(max-width:600px){
  table[data-gw-tarjetas], table[data-gw-tarjetas] tbody, table[data-gw-tarjetas] tr, table[data-gw-tarjetas] td{display:block; width:100%}
  table[data-gw-tarjetas] thead{display:none}
  table[data-gw-tarjetas] tr{margin:0 0 12px; padding:12px 14px; border:1px solid var(--linea,#E1E4EC); border-radius:18px; background:#FFFFFF}
  table[data-gw-tarjetas] td{padding:4px 0 !important; border:0 !important; text-align:left !important}
  table[data-gw-tarjetas] td[data-col]::before{content:attr(data-col); display:block; font-size:12px; font-weight:700; letter-spacing:.06em;
    text-transform:uppercase; color:var(--texto-3,#646C84)}
  .tabla-scroll:has(table[data-gw-tarjetas]){overflow:visible}
  .multas .multa{grid-template-columns:1fr !important}
}
/* precios: el primer importe en la primera pantalla */
main[data-gw-ruta="/precios/"] .gw-hero{padding-top:24px !important}
main[data-gw-ruta="/precios/"] .gw-claim33-sub{margin-top:6px}
main[data-gw-ruta="/precios/"] .gw-hero + section{padding-top:16px !important}

/* leyenda de familia: punto de color, palabra en índigo */
.cl-ley-fija span{color:var(--indigo,#2B3A67)!important}
@media (prefers-color-scheme:dark){.cl-ley-fija span{color:#E6E8F2!important}}

/* Letra de reserva con las medidas de Barlow (Arial ajustada): mientras llega la
   fuente, el texto ocupa lo mismo y no empuja nada al cambiar (CLS) */
@font-face{font-family:'Barlow Reserva';font-weight:400 500;src:local('Arial'),local('ArialMT'),local('Helvetica'),local('Roboto');size-adjust:94.2%;ascent-override:106.2%;descent-override:21.2%;line-gap-override:0%}
@font-face{font-family:'Barlow Reserva';font-weight:600 900;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Roboto Bold');size-adjust:91%;ascent-override:110%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:'Plex Reserva';src:local('Courier New'),local('CourierNewPSMT'),local('Roboto Mono');size-adjust:100%;ascent-override:102.5%;descent-override:27.5%;line-gap-override:0%}
body,:is(h1,h2,h3,h4,h5,h6,button,input,select,textarea){font-family:'Barlow','Barlow Reserva',system-ui,sans-serif}
:is(code,kbd,samp,pre,.mono){font-family:'IBM Plex Mono','Plex Reserva',monospace}

/* A4 · aviso de cookies compacto en móvil: texto en dos o tres líneas, Rechazar y Aceptar
   iguales y «Configurar» como enlace; ocupa ~95 px y deja a la vista el arranque de la respuesta */
@media (max-width:599px){
  .aviso-cookies:has(.aviso-detalle[hidden]){padding:7px 10px 8px; font-size:12px; line-height:1.3}
  .aviso-cookies:has(.aviso-detalle[hidden]) > p{margin-bottom:4px}
  .aviso-cookies:has(.aviso-detalle[hidden]) .aviso-botones{grid-template-columns:auto 1fr 1fr; align-items:center; gap:8px; margin-top:2px}
  /* !important: la regla común de botones lleva un id en su lista y pesa más */
  .aviso-cookies:has(.aviso-detalle[hidden]) .aviso-botones button{min-height:38px !important; padding:6px 10px !important}
  .aviso-cookies:has(.aviso-detalle[hidden]) .aviso-botones [data-accion="configurar"]{order:-1; padding:6px 4px !important; background:none !important; border:0 !important; color:var(--indigo,#2B3A67) !important; font-weight:600; text-decoration:underline; text-underline-offset:3px}
}
@media (max-width:599px) and (prefers-color-scheme:dark){
  .aviso-cookies:has(.aviso-detalle[hidden]) .aviso-botones [data-accion="configurar"]{color:inherit !important}
}

/* El aviso «Avísame cuando esté» se monta con JavaScript: su hueco se reserva desde el
   principio para que el pie no salte al aparecer (CLS de las páginas «muy pronto») */
[data-captacion^="pronto:"]:empty{min-height:213px}
@media (max-width:600px){[data-captacion^="pronto:"]:empty{min-height:280px}}

/* botón con aspecto de enlace dentro de un párrafo: 24 px de alto mínimo para el dedo */
button.enlace-texto{min-height:24px; padding-block:2px}

/* B5 · botón de ayuda fijo en las herramientas: píldora blanca con filete índigo (no compite con el
   botón principal), abajo a la derecha y siempre por encima del aviso de cookies */
.gw-ayuda-fija{position:fixed; right:16px; bottom:calc(var(--aviso-alto,0px) + 16px); z-index:150;
  display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:6px 18px 6px 8px;
  border-radius:999px; background:#FFFFFF; border:1.5px solid var(--indigo,#2B3A67); color:var(--indigo,#2B3A67);
  font:600 15px/1.2 'Barlow','Barlow Reserva',system-ui,sans-serif; text-decoration:none;
  box-shadow:0 6px 20px rgba(18,26,51,.14); transition:opacity .2s, transform .2s}
.gw-ayuda-fija b{font-weight:800}
.gw-ayuda-fija-p{display:inline-grid; place-items:center; width:32px; height:32px; flex:none; border-radius:50%;
  background:var(--indigo,#2B3A67); color:#FFFFFF; font-weight:800; font-size:17px}
.gw-ayuda-fija:hover{background:#F3F4F9}
.gw-ayuda-fija:focus-visible{outline:none; box-shadow:0 0 0 2px #FFFFFF,0 0 0 4px var(--indigo,#2B3A67)}
.gw-ayuda-fija-oculta{opacity:0; transform:translateY(12px); pointer-events:none; visibility:hidden}
@media (max-width:599px){
  .gw-ayuda-fija{right:10px; bottom:calc(var(--aviso-alto,0px) + 10px); min-height:44px; padding:4px 14px 4px 6px; font-size:14px; gap:8px}
  .gw-ayuda-fija-p{width:30px; height:30px}
  body:has(#gw-ayuda-fija) main{padding-bottom:64px}   /* el final de la herramienta no queda debajo del botón */
}
@media (prefers-reduced-motion:reduce){.gw-ayuda-fija{transition:none}}
@media (prefers-color-scheme:dark){.gw-ayuda-fija{background:#1B2340; color:#E6E8F2; border-color:#8E9AD0}
  .gw-ayuda-fija:hover{background:#232D52}}
@media print{.gw-ayuda-fija{display:none}}
/* solo en pruebas: por encima del botón «Comentar» de la revisión, que va en la misma esquina */
body:has(.gwr-btn) .gw-ayuda-fija{bottom:calc(var(--aviso-alto,0px) + 104px)}
/* B5 retoque: con el resultado fijo arriba (coste de despido en el móvil), el botón va dentro, a la derecha;
   la etiqueta y la cifra se quedan a su izquierda, sin nada encima */
.gw-ayuda-fija.gw-ayuda-en-res{position:absolute !important; top:50%; right:10px; bottom:auto !important; transform:translateY(-50%);
  box-shadow:none; width:132px; min-height:44px; padding:4px 10px; font-size:12px; line-height:1.2; z-index:1}
.gw-ayuda-fija.gw-ayuda-en-res .gw-ayuda-fija-p{display:none}
.gw-ayuda-tiene > :not(.gw-ayuda-fija){display:block; max-width:calc(100% - 140px)}
.gw-ayuda-tiene .cifra{font-size:28px !important; white-space:nowrap}