/* Gala Worklab · componentes de los generadores de igualdad y acoso.
   Solo usa los tokens de /assets/gala-worklab.css: no redefine ninguno. */

/* ---------- Asistente ---------- */
.asistente{background:var(--paper-0); border:1px solid var(--hairline); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); overflow:hidden; scroll-margin-top:80px}
.pasos-nav{display:flex; gap:4px; overflow-x:auto; padding:12px; border-bottom:1px solid var(--hairline); background:var(--paper-2); scrollbar-width:thin}
.pasos-nav button{flex:none; font:inherit; font-size:13px; font-weight:700; color:var(--ink-2); background:transparent; border:1px solid transparent; border-radius:var(--radius-pill); padding:6px 12px; cursor:pointer; display:inline-flex; gap:6px; align-items:center; white-space:nowrap}
.pasos-nav button .n{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--paper-0); border:1px solid var(--hairline); font-size:11px; color:var(--accent)}
.pasos-nav button.visto .n{background:var(--soft-green); border-color:transparent; color:var(--accent-2-deep)}
.pasos-nav button[aria-current="step"]{background:var(--paper-0); border-color:var(--hairline); color:var(--accent); box-shadow:var(--shadow-xs)}
.pasos-nav button[aria-current="step"] .n{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.paso{padding:28px; display:grid; gap:18px}
.paso > header h2{font-size:24px}
.paso > header p{margin-top:6px; color:var(--ink-2)}
.paso-pie{display:flex; justify-content:space-between; gap:12px; padding:16px 28px; border-top:1px solid var(--hairline); background:var(--paper-1)}
.campos{display:grid; gap:16px; grid-template-columns:repeat(2, minmax(0,1fr))}
.campos .ancho{grid-column:1 / -1}
@media(max-width:700px){.campos{grid-template-columns:1fr} .paso{padding:20px} .paso-pie{padding:14px 20px}}
.ayuda{font-size:12.5px; color:var(--ink-3); margin-top:5px; line-height:1.45}
fieldset{border:0; padding:0; margin:0; min-width:0}
legend{font-size:13px; font-weight:700; color:var(--ink-1); margin-bottom:8px; padding:0}

/* Opciones en tarjeta (radio y casilla) */
.opciones{display:grid; gap:10px; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr))}
.opcion{position:relative; display:block; margin:0; cursor:pointer}
.opcion input{position:absolute; opacity:0; width:1px; height:1px}
.opcion span{display:block; height:100%; border:1px solid var(--hairline); border-radius:var(--radius-md); padding:12px 14px; background:var(--paper-0); font-weight:400; font-size:13.5px; color:var(--ink-2); transition:border-color 150ms var(--ease)}
.opcion span b{display:block; color:var(--ink-1); font-size:14.5px; margin-bottom:2px}
.opcion input:checked + span{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); background:var(--paper-1)}
.opcion input:focus-visible + span{box-shadow:var(--ring)}
.casilla{display:flex; gap:10px; align-items:flex-start; font-weight:400; font-size:14px; color:var(--ink-2); cursor:pointer; margin:0}
.casilla input{width:18px; height:18px; flex:none; margin-top:2px; accent-color:var(--accent)}
.casillas{display:grid; gap:10px}

/* ---------- Avisos dentro del asistente ---------- */
.aviso-caja{border-radius:var(--radius-md); padding:12px 16px; font-size:14px; background:var(--soft-blue); color:var(--ink-1)}
.aviso-caja.oro{background:var(--soft-gold)}
.aviso-caja.verde{background:var(--soft-green)}
.aviso-caja.rojo{background:var(--soft-red)}
.aviso-caja b{color:var(--ink-1)}

/* ---------- Documento: vista previa con aspecto de papel ---------- */
.previa-marco{position:relative; background:var(--paper-2); border-radius:var(--radius-md); padding:16px; height:min(80vh, 880px); overflow:auto}
.doc{background:#fff; color:#121A33; max-width:780px; margin:0 auto; padding:48px 56px; box-shadow:var(--shadow-sm); border-radius:4px; font-size:14px; line-height:1.6; text-align:left}
.doc h2,.doc h3,.doc h4{color:#2B3A67; letter-spacing:-.01em}
.doc .d-h1{font-size:21px; margin:28px 0 10px}
.doc .d-h2{font-size:16.5px; margin:22px 0 6px}
.doc .d-h3{font-size:14.5px; color:#121A33; margin:16px 0 4px}
.doc p{margin:0 0 9px}
.doc ul,.doc ol{margin:0 0 10px; padding-left:22px}
.doc li{margin-bottom:4px}
.doc .campo{background:#FFF3A3; color:#5a4a00; padding:0 3px; border-radius:2px}
.doc .d-portada{padding:40px 0 48px; border-bottom:1px solid #E1E4EC; margin-bottom:12px}
.doc .d-portada h1{font-size:30px; line-height:1.15; color:#2B3A67; margin:8px 0 10px}
.doc{--doc-acento:var(--prod-transparencia, #6B8420)}
[data-producto="acoso"] .doc{--doc-acento:var(--prod-acoso, #9A4D6E)}
.doc .d-empresa{font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--doc-acento); margin:0}
.doc .d-sub{font-size:17px; color:#46506B}
.doc .d-linea{color:#46506B; margin:0 0 4px}
.doc .d-nota{background:#EEF0F7; border-left:4px solid var(--doc-acento); padding:10px 14px; margin:10px 0 14px; font-size:13px}
.doc table{font-size:12.5px; margin:6px 0 14px; color:#121A33}
.doc .d-tabla{overflow-x:auto}
.doc thead th{font-size:10px; color:#46506B; border-bottom:2px solid #121A33; padding:6px 8px; letter-spacing:.08em}
.doc tbody td{padding:7px 8px; border-bottom:1px solid #E1E4EC; font-size:12.5px; vertical-align:top}
.doc .d-campos th{text-align:left; width:36%; font-weight:700; padding:7px 8px; border-bottom:1px solid #E1E4EC; vertical-align:top}
.doc .d-campos td{border-bottom:1px solid #E1E4EC}
.doc .d-firmas{display:grid; grid-template-columns:1fr 1fr; gap:40px 32px; margin:36px 0 20px}
.doc .d-firmas div{display:grid; gap:6px; font-size:12px; color:#46506B}
.doc .d-raya{display:block; border-bottom:1px solid #121A33; height:44px}
.doc .d-salto{border:0; border-top:1px dashed #C9CDD8; margin:32px -56px}
@media(max-width:700px){.doc{padding:24px 16px; font-size:13.5px} .doc .d-portada{padding:16px 0 24px} .doc .d-portada h1{font-size:23px} .doc .d-salto{margin:24px -20px} .previa-marco{padding:8px; height:70vh} .doc .d-firmas{grid-template-columns:1fr}}

/* Vista previa bloqueada: se lee, no se copia */
.previa-marco.bloqueada .doc{user-select:none; -webkit-user-select:none}
.previa-marco.bloqueada .doc::before{content:'VISTA PREVIA · GALA WORKLAB'; position:sticky; top:40%; display:block; height:0; text-align:center; font-weight:800; font-size:clamp(20px, 5vw, 40px); letter-spacing:.12em; color:rgba(43,58,103,.09); transform:rotate(-18deg); pointer-events:none; white-space:nowrap; z-index:2}

/* ---------- Pestañas de documentos del paquete ---------- */
.docs-tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px}
.docs-tabs button{font:inherit; font-size:13px; font-weight:700; border:1px solid var(--hairline); background:var(--paper-0); color:var(--ink-2); border-radius:var(--radius-pill); padding:6px 12px; cursor:pointer}
.docs-tabs button[aria-selected="true"]{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.docs-tabs button .candado{font-size:10px; margin-left:4px; opacity:.7}

/* ---------- Caja de compra ---------- */
.compra{display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))}
.plan{background:var(--paper-0); border:1px solid var(--hairline); border-radius:var(--radius-md); padding:20px; display:grid; gap:10px; align-content:start}
.plan.recomendado{border-color:var(--accent); box-shadow:var(--shadow-md)}
.plan .precio{font-size:34px; font-weight:800; color:var(--accent); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.plan .precio small{font-size:13px; font-weight:600; color:var(--ink-3); letter-spacing:0}
.plan ul{margin:0; padding-left:18px; font-size:13.5px; color:var(--ink-2)}
.plan li{margin-bottom:4px}
.plan a.btn{display:inline-flex; align-items:center; justify-content:center; text-decoration:none}
.descargas{display:flex; flex-wrap:wrap; gap:10px}
.descargas[hidden]{display:none}
.desbloqueado{display:none}
.pagado .desbloqueado{display:block}
.pagado .solo-sin-pago{display:none}

/* ---------- Línea de tiempo de lo que falta ---------- */
.linea-tiempo{list-style:none; margin:0; padding:0; display:grid; gap:0}
.linea-tiempo li{display:grid; grid-template-columns:28px 1fr; gap:12px; position:relative; padding-bottom:18px}
.linea-tiempo li::before{content:''; position:absolute; left:13px; top:22px; bottom:0; width:2px; background:var(--hairline)}
.linea-tiempo li:last-child::before{display:none}
.linea-tiempo .lt-punto{width:28px; height:28px; border-radius:50%; border:2px solid var(--hairline); background:var(--paper-0); display:block; position:relative; z-index:1}
.linea-tiempo li.hecho .lt-punto{background:var(--accent-2); border-color:var(--accent-2)}
.linea-tiempo li.hecho .lt-punto::after{content:''; position:absolute; left:8px; top:4px; width:6px; height:11px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg)}
.linea-tiempo li.ahora .lt-punto{border-color:var(--accent); box-shadow:0 0 0 4px var(--soft-blue)}
.linea-tiempo li.ahora .lt-punto::after{content:''; position:absolute; inset:6px; border-radius:50%; background:var(--accent)}
.linea-tiempo li > div > b{display:block; color:var(--ink-1); font-size:15px; padding-top:3px}
.linea-tiempo .lt-plazo{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-2); background:var(--paper-2); border-radius:var(--radius-xs); padding:1px 6px; margin-top:4px}
.linea-tiempo p{margin:4px 0 0; font-size:13.5px; color:var(--ink-2)}
.linea-tiempo .campo{background:var(--soft-gold); padding:0 3px; border-radius:2px}

/* ---------- Bloques de contenido de las páginas ---------- */
.enlaces-sig{display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); margin-top:20px}
.enlaces-sig a{display:block; text-decoration:none; background:var(--paper-0); border:1px solid var(--hairline); border-radius:var(--radius-md); padding:16px 18px; color:var(--ink-2); font-size:13.5px}
.enlaces-sig a b{display:block; color:var(--accent); font-size:15.5px; margin-bottom:4px}
.enlaces-sig a:hover{border-color:var(--accent)}
.cifras{display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); margin-top:22px}
.cifras div{background:var(--paper-0); border:1px solid var(--hairline); border-radius:var(--radius-md); padding:14px 16px}
.cifras b{display:block; font-size:26px; font-weight:800; color:var(--accent); letter-spacing:-.02em; line-height:1.1}
.cifras span{font-size:13px; color:var(--ink-2)}
.preguntas details{border-bottom:1px solid var(--hairline); padding:14px 0}
.preguntas summary{font-weight:700; cursor:pointer; color:var(--ink-1); font-size:15.5px}
.preguntas details p{color:var(--ink-2)}
.tabla-scroll{overflow-x:auto}
.oculto{display:none !important}

/* ---------- Impresión: solo el documento ---------- */
#gw-impresion{display:none}
@media print{
  body.gw-imprimiendo > *:not(#gw-impresion){display:none !important}
  body.gw-imprimiendo #gw-impresion{display:block}
  body.gw-imprimiendo{background:#fff}
  #gw-impresion .doc{box-shadow:none; padding:0; max-width:none; font-size:11pt}
  #gw-impresion .d-salto{border:0; margin:0; page-break-after:always; break-after:page}
  #gw-impresion .d-portada{min-height:80vh; border:0; page-break-after:always; break-after:page; padding-top:30vh}
  #gw-impresion .campo{background:#FFF3A3 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  #gw-impresion .d-firmas, #gw-impresion tr{break-inside:avoid}
  #gw-impresion h2, #gw-impresion h3, #gw-impresion h4{break-after:avoid}
  body:not(.gw-imprimiendo) .previa-marco{display:none}
  @page{margin:18mm 16mm}
}
[hidden]{display:none !important}