/* Gala Worklab · herramienta «Contrato y hoja informativa» (familia Escritos y modelos)
 * Se apoya en /assets/gala-worklab.css (tokens) y en /empresas/igualdad/comun/documentos.css (asistente, pasos,
 * campos, vista previa y hoja de impresión). Aquí solo lo propio: buscador de convenio (.bc-), tarjetas de la
 * herramienta y bloques de la guía de modalidades (.ct-). Clases únicas, nada de .a ni .q sueltas.
 * Identidad 3.3: fondo blanco, índigo en botones y titulares, el color de la familia solo como punto o filo de 4 px.
 */

/* ---------- Buscador de convenio (Compartido/assets/buscador-convenio.js) ---------- */
.bc{display:grid; gap:6px}
.bc > label{font-size:13px; font-weight:700; color:var(--ink-2)}
.bc-campo{position:relative}
.bc-campo input{width:100%; font:inherit; font-size:15px; color:var(--ink-1); background:var(--paper-0); border:1px solid var(--hairline); border-radius:var(--radius-md); padding:11px 14px}
.bc-campo input:focus-visible{outline:none; box-shadow:var(--ring); border-color:var(--accent)}
.bc-lista{list-style:none; margin:4px 0 0; padding:4px; position:absolute; z-index:30; left:0; right:0; max-height:280px; overflow:auto; background:var(--paper-0); border:1px solid var(--hairline); border-radius:var(--radius-md); box-shadow:var(--shadow-md)}
.bc-lista li{display:grid; gap:1px; padding:9px 11px; border-radius:var(--radius-sm); cursor:pointer}
.bc-lista li b{font-size:14px; font-weight:700; color:var(--ink-1); line-height:1.3}
.bc-lista li span{font-size:12.5px; color:var(--ink-3)}
.bc-lista li.act,.bc-lista li:hover{background:var(--paper-2)}
.bc-ayuda{margin:0; font-size:13px; color:var(--ink-3)}
.bc-elegido{margin:0; font-size:13.5px; color:var(--ink-2); background:var(--paper-2); border-left:4px solid var(--prod-escritos, #D4E157); border-radius:var(--radius-sm); padding:9px 12px}
.bc-elegido b{color:var(--ink-1)}
.bc-quitar{font:inherit; font-size:13px; font-weight:700; color:var(--accent); background:none; border:0; border-bottom:1px solid currentColor; padding:0; margin-left:8px; cursor:pointer}

/* ---------- Cifras que llegan del convenio ---------- */
.ct-delconvenio{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin-top:14px}
.ct-delconvenio div{background:var(--paper-0); border:1px solid var(--hairline); border-radius:var(--radius-md); padding:14px}
.ct-delconvenio b{display:block; font-size:26px; font-weight:800; letter-spacing:var(--ls-cifra, -.03em); color:var(--accent); line-height:1.05; font-variant-numeric:tabular-nums}
.ct-delconvenio span{display:block; font-size:12.5px; color:var(--ink-3); margin-top:5px}

/* ---------- Tarjetas de las tres piezas ---------- */
.ct-piezas{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr))}
.ct-piezas > li{display:flex}
.ct-pieza{display:grid; gap:8px; align-content:start; flex:1; text-decoration:none; background:var(--paper-0); border:1px solid var(--hairline); border-top:4px solid var(--prod-escritos, #D4E157); border-radius:var(--radius-md); padding:22px}
.ct-pieza:hover{border-color:var(--accent)}
.ct-pieza .ct-rot{display:flex; align-items:center; gap:7px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.ct-pieza .ct-rot i{width:9px; height:9px; border-radius:50%; background:var(--prod-escritos, #D4E157)}
.ct-pieza h2,.ct-pieza h3{margin:0; font-size:19px; font-weight:800; letter-spacing:-.02em; color:var(--accent); line-height:1.2}
.ct-pieza p{margin:0; font-size:14px; color:var(--ink-2)}
.ct-pieza .ct-ir{font-size:13.5px; font-weight:700; color:var(--accent); margin-top:4px}
@media(max-width:900px){.ct-piezas{grid-template-columns:1fr}}

/* ---------- Guía de modalidades: una modalidad por bloque ---------- */
.ct-modalidades{display:grid; gap:14px; margin-top:24px}
.ct-mod{background:var(--paper-0); border:1px solid var(--hairline); border-radius:var(--radius-md); padding:24px}
.ct-mod > h3{margin:0 0 2px; font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--accent)}
.ct-mod .ct-art{font-family:var(--gw-mono,'IBM Plex Mono',monospace); font-size:12px; color:var(--ink-3)}
.ct-mod .ct-cuando{margin:14px 0 0; font-size:15px; color:var(--ink-1)}
.ct-mod dl{display:grid; gap:10px; grid-template-columns:150px 1fr; margin:16px 0 0; font-size:14px}
.ct-mod dt{font-weight:700; color:var(--ink-2)}
.ct-mod dd{margin:0; color:var(--ink-2)}
.ct-mod dd ul{margin:0; padding-left:18px}
.ct-mod dd li{margin-bottom:4px}
@media(max-width:620px){.ct-mod{padding:20px} .ct-mod dl{grid-template-columns:1fr; gap:3px} .ct-mod dd{margin-bottom:9px}}

/* Qué hay que comunicar: dos avisos que valen para todas las modalidades */
.ct-comunicar{display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:24px}
.ct-comunicar > div{background:var(--paper-2); border-left:4px solid var(--accent); border-radius:var(--radius-md); padding:20px}
.ct-comunicar h3{margin:0 0 6px; font-size:17px; font-weight:800; color:var(--accent)}
.ct-comunicar p{margin:0 0 8px; font-size:14px; color:var(--ink-2)}
.ct-comunicar .ct-plazo{display:inline-block; font-family:var(--gw-mono,'IBM Plex Mono',monospace); font-size:12px; background:var(--paper-0); border:1px solid var(--hairline); border-radius:var(--radius-xs); padding:2px 8px; color:var(--ink-2)}
@media(max-width:760px){.ct-comunicar{grid-template-columns:1fr}}

/* Modelos oficiales del SEPE: enlaces, nunca contratos nuestros */
.ct-sepe{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.ct-sepe a{display:block; text-decoration:none; font-size:14px; font-weight:700; color:var(--accent); background:var(--paper-0); border:1px solid var(--hairline); border-radius:var(--radius-md); padding:13px 16px}
.ct-sepe a:hover{border-color:var(--accent)}
.ct-sepe a span{display:block; font-weight:400; font-size:12.5px; color:var(--ink-3); margin-top:2px}

/* ---------- Columna de descargas del asistente ---------- */
.ct-docs{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:24px; align-items:start}
.ct-lateral{display:grid; gap:14px; position:sticky; top:80px}
.ct-lateral .card{background:var(--paper-0); border:1px solid var(--hairline); border-radius:var(--radius-md); padding:18px}
.ct-lateral .kpi-label{margin:0 0 4px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.ct-lateral .nota{margin:0; font-size:13px; color:var(--ink-3)}
@media(max-width:1000px){.ct-docs{grid-template-columns:1fr} .ct-lateral{position:static}}

/* ---------- Componentes que usan estas páginas y que no define ninguna hoja común ----------
   Regla de Gala: si una página usa una clase, que la defina ella; nada de heredar el CSS de otra
   página. Cifras, preguntas y «Lo que suele venir después» solo estaban en documentos.css, que el
   índice y la guía de modalidades no cargan: a 375 px la cifra y su texto se pegaban («17apartados»).
   Mismos valores que en documentos.css, para que las cuatro páginas se vean igual. */
.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; font-variant-numeric:tabular-nums}
.cifras span{display:block; margin-top:4px; 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 summary::marker{color:var(--accent)}
.preguntas p{margin:10px 0 0; font-size:14.5px; color:var(--ink-2)}

.enlaces-sig{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin-top:22px}
.enlaces-sig a{display:block; text-decoration:none; background:var(--paper-0); border:1px solid var(--hairline); border-radius:var(--radius-md); padding:18px 20px; font-size:14px; color:var(--ink-2)}
.enlaces-sig a b{display:block; color:var(--accent); font-size:15.5px; margin-bottom:4px}
.enlaces-sig a:hover{border-color:var(--accent)}

.docs-cabecera{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px}

/* Membrete del documento en la identidad 3.3: el logotipo de marca, no el logo por herramienta de la v3.2
   (retirado). El acento del documento es el verde de texto de la familia Escritos, legible sobre blanco (AA).
   Se aplica a la vista previa (.ct-docs) y a la hoja de impresión que monta documentos.js (#gw-impresion). */
.ct-docs .doc,
#gw-impresion .doc{--doc-acento:#5A6A00}
.ct-docs .doc::before,
#gw-impresion .doc::before{background-image:url(/assets/logos/v3/logo-gala-worklab-color.svg)}

/* Huecos que quedan por rellenar: el documento nunca afirma lo que la empresa no ha dicho, así que lo
   que falta sale en amarillo y se cuenta aquí y en la pestaña de cada documento. */
.ct-huecos{margin:10px 0 0; font-size:13px; color:var(--ink-2); background:var(--soft-gold); border-radius:var(--radius-sm); padding:10px 12px}
.ct-huecos b{color:var(--ink-1)}
.ct-huecos-n{display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; margin-left:5px; border-radius:999px; background:var(--soft-gold); color:#5a4a00; font-size:11px; font-weight:700}
.docs-tabs button[aria-selected="true"] .ct-huecos-n{background:rgba(255,255,255,.22); color:#fff}

/* Aviso de modelo orientativo: igual en la web y en el documento */
.ct-orienta{margin:18px 0 0; font-size:13.5px; color:var(--ink-2); background:var(--paper-2); border-left:4px solid var(--accent); border-radius:var(--radius-sm); padding:12px 14px}
.ct-orienta b{color:var(--ink-1)}