/* Gala Worklab · Calculadoras · estilos propios de esta sección (los tokens y componentes base vienen de /assets/gala-worklab.css) */

[hidden]{display:none !important}
.fuente .actualizado{font-family:'IBM Plex Mono',monospace; color:var(--ink-3)}
.pie .sello-linea{color:rgba(255,255,255,.65)}
.pie .sello-linea b{color:#fff}
.pie .simbolo circle{fill:#FFFFFF} /* en el pie, los puntos del signo en blanco; el activo sigue verde */
.pie .simbolo circle.activo{fill:var(--punto)}
/* El índigo de producto no se ve sobre fondo oscuro: el acento sí se adapta */
[data-producto="calculadoras"] .eyebrow{color:var(--accent)}

/* Cabecera */
.cab-calc{padding-bottom:8px}
.cab-calc .lead{max-width:720px}
.migas{font-size:13px; color:var(--ink-3); margin:0 0 14px}
.migas a{color:var(--ink-2)}

/* Formulario */
.calc{margin-top:28px}
.calc > *{min-width:0}
@media(max-width:880px){.calc{grid-template-columns:minmax(0,1fr)}}
.calc input,.calc select{min-width:0; max-width:100%}
.calc form{display:grid; gap:16px}
.campos{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.campos .ancho{grid-column:1/-1}
.campos > *{min-width:0}
@media(max-width:560px){.campos{grid-template-columns:minmax(0,1fr)}.calc .entradas,.calc .salida{padding:20px}.compara{grid-template-columns:minmax(0,1fr)}}
.ayuda{font-size:12.5px; color:var(--ink-3); margin:6px 0 0; line-height:1.4}
.check{display:flex; gap:10px; align-items:flex-start; font-weight:600; font-size:14px; cursor:pointer}
.check input{width:18px; height:18px; flex:none; margin-top:2px; accent-color:var(--accent)}
.segmentos{display:flex; flex-wrap:wrap; gap:6px}
.segmentos label{margin:0; display:inline-flex}
.segmentos input{position:absolute; opacity:0; width:1px; height:1px}
.segmentos span{display:inline-block; padding:9px 14px; border:1px solid var(--hairline); border-radius:var(--radius-pill); background:var(--paper-0); font-size:13px; font-weight:700; color:var(--ink-2); cursor:pointer; transition:all 160ms var(--ease)}
.segmentos input:checked+span{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.segmentos input:focus-visible+span{box-shadow:var(--ring)}
.error-msg{color:var(--danger); font-size:13px; font-weight:700; min-height:1em; margin:0}
.calc .salida .resultado .cifra{font-size:clamp(36px,7vw,52px)}
.calc .salida .fuente a{color:inherit}
.fuentes{display:flex; flex-wrap:wrap; gap:6px}

/* Caja de convenio (cuando llega ?convenio=) */
.conv-caja{background:var(--papel-banda); border-radius:var(--radius-md); padding:14px 16px; display:grid; gap:6px}
.conv-caja .conv-nombre{margin:0; font-weight:700; font-size:14px}
.conv-caja label{margin:6px 0 0}

/* Comparativa de dos cifras */
.compara{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.compara > div{background:var(--paper-0); border:1px solid var(--hairline); border-radius:var(--radius-sm); padding:12px 14px}
.compara .v{display:block; font-size:22px; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.compara .activo{border-color:var(--indigo); box-shadow:inset 0 0 0 1px var(--indigo)} /* el verde, solo en el resultado principal */
.compara-dif{font-size:14px; color:var(--ink-2); margin:0}

/* «Y ahora qué» */
.ahora{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:24px}
@media(max-width:880px){.ahora{grid-template-columns:1fr}}
.ahora .card{display:grid; gap:8px; align-content:start}
.ahora .card p{margin:0; color:var(--ink-2)}
.ahora .dato{font-size:26px; font-weight:800; color:var(--accent); letter-spacing:-.015em; font-variant-numeric:tabular-nums; line-height:1.15}
.ahora .card a.ir{font-weight:700; text-decoration:none}
.ahora .card a.ir::after{content:' →'}
.urgente{border-top-color:var(--danger) !important}

/* Desglose en tabla */
.tabla-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tabla-scroll table{min-width:520px}
.desglose-calc td:nth-child(2){color:var(--ink-2); font-size:13px}

/* Siguiente paso */
.pasos{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:24px}
.paso{display:grid; gap:6px; align-content:start; text-decoration:none; color:inherit; background:var(--paper-0); border:1px solid var(--hairline); border-top:3px solid var(--accent); border-radius:var(--radius-md); padding:20px; box-shadow:var(--shadow-sm); transition:transform 160ms var(--ease), box-shadow 160ms var(--ease)}
.paso:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.paso b{font-size:17px; color:var(--accent)}
.paso span{font-size:14px; color:var(--ink-2)}
.paso.verde{border-top-color:var(--indigo)}
.paso.celeste{border-top-color:var(--celeste)}
.paso.oro{border-top-color:var(--gold)}

/* ¿Eres empresa? */
.empresa{display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center}
.empresa .btn{display:inline-flex; align-items:center; text-decoration:none; background:#fff; border-color:#fff; color:var(--indigo)}
@media(max-width:720px){.empresa{grid-template-columns:1fr}}

/* Preguntas */
.faq{display:grid; gap:0; margin-top:20px; max-width:860px}
.faq details{border-bottom:1px solid var(--hairline); padding:14px 0}
.faq summary{cursor:pointer; font-weight:700; font-size:16px; color:var(--ink-1); list-style:none; display:flex; justify-content:space-between; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; color:var(--indigo); font-weight:800; font-size:20px; line-height:1}
.faq details[open] summary::after{content:'−'}
.faq details p{color:var(--ink-2); max-width:760px}

/* Reglas (tarjetas explicativas) */
.reglas .card p{color:var(--ink-2)}

/* Insertar en tu web */
.insertar textarea{font-family:'IBM Plex Mono',monospace; font-size:12px; min-height:92px; resize:vertical; margin-top:12px}
.insertar .acciones{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}

/* Semáforo */
.semaforo{display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:15px}
.semaforo i{width:14px; height:14px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px color-mix(in srgb,currentColor 20%,transparent)}
.semaforo.ok{color:var(--estado-alta)}
.semaforo.justo{color:var(--estado-revisar)}
.semaforo.mal{color:var(--estado-baja)}

/* Pie: botón «Configurar cookies» con aspecto de enlace */
.enlace{background:none; border:0; padding:0; font:inherit; color:inherit; text-decoration:underline; cursor:pointer}

/* Versión insertable (iframe) */
body.insertada{background:var(--paper-0)}
body.insertada .calc{margin:0; box-shadow:none; border-radius:var(--radius-md)}
body.insertada .vuelta{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 4px 0; font-size:12px; color:var(--ink-3)}
body.insertada .vuelta a{font-weight:700; color:var(--accent)}

@media print{.pasos,.empresa,.insertar,.hueco-anuncio,.nav,.faq{display:none !important}}

/* Las columnas de la calculadora nunca crecen por su contenido */
.calc .entradas,.calc .salida,.calc form{grid-template-columns:minmax(0,1fr)}
.kpi-label{overflow-wrap:anywhere}
@media(max-width:420px){.compara{grid-template-columns:minmax(0,1fr)}}

/* Tabla con frase explicativa: en móvil la frase pasa bajo el concepto */
.frase{display:none}
@media(max-width:640px){
  .con-frase{min-width:0 !important}
  .con-frase th:nth-child(2),.con-frase td:nth-child(2){display:none}
  .con-frase .frase{display:block; font-size:12.5px; color:var(--ink-3); margin-top:2px; line-height:1.35}
  .con-frase td,.con-frase th{padding-left:6px; padding-right:6px}
}

/* Buscador de convenio */
.conv-resultados{display:grid; gap:6px}
.conv-resultados button{display:grid; gap:2px; text-align:left; background:var(--paper-0); border:1px solid var(--hairline); border-radius:var(--radius-sm); padding:9px 12px; font:inherit; color:var(--ink-1); cursor:pointer}
.conv-resultados button:hover,.conv-resultados button:focus-visible{border-color:var(--accent); outline:none; box-shadow:var(--ring)}
.conv-resultados b{font-size:13.5px; text-transform:capitalize; color:var(--accent)}
.conv-resultados span{font-size:12px; color:var(--ink-3); line-height:1.35}
.cambiar-conv{font-size:12.5px; color:var(--ink-2); justify-self:start; margin-top:4px}
.conv-aviso{margin:0; font-size:12.5px; color:var(--estado-revisar); background:var(--estado-revisar-bg); border-radius:var(--radius-xs); padding:6px 9px}
.nota-provisional{margin:0; font-size:12.5px; color:var(--ink-3); font-style:italic}

/* Auditoría antes de abrir (U1–U3): lo entendido, estados del resultado y rótulo de ejemplo */
.eco{font-size:12.5px; color:var(--ink-2); margin:6px 0 0; min-height:0}
.eco:empty{display:none}
.eco.dudoso{color:var(--estado-revisar); font-weight:700}
input[aria-invalid="true"]{border-color:var(--danger); box-shadow:0 0 0 1px var(--danger)}
.estado-msg{margin:0; font-size:14px; font-weight:700; color:var(--ink-1); background:var(--papel-banda); border-radius:var(--radius-sm); padding:10px 12px}
body.gw-error .estado-msg{color:var(--danger); background:var(--soft-red)}
body.gw-incompleto .salida .resultado,body.gw-incompleto .salida .compara,body.gw-incompleto .salida .compara-dif,body.gw-incompleto .salida .desglose,
body.gw-error .salida .resultado,body.gw-error .salida .compara,body.gw-error .salida .compara-dif,body.gw-error .salida .desglose,
body.gw-incompleto .desglose-calc,body.gw-error .desglose-calc,body.gw-incompleto .ahora,body.gw-error .ahora{opacity:.25; filter:grayscale(1)}
body.gw-incompleto .salida .resultado .cifra{visibility:hidden}
.rotulo-ejemplo{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-1); background:var(--papel-banda); border:1px dashed var(--ink-3); border-radius:var(--radius-xs); padding:2px 8px; margin-bottom:6px}
body.gw-ejemplo .salida .fuente > b{font-size:0}
body.gw-ejemplo .salida .fuente > b::after{content:'EJEMPLO'; font-size:10px}
@keyframes gw-late{0%{transform:scale(1)}40%{transform:scale(1.035)}100%{transform:scale(1)}}
.resultado.late .cifra{animation:gw-late var(--mov-medio,320ms) var(--ease,ease) 1; transform-origin:left center}
@media (prefers-reduced-motion: reduce){.resultado.late .cifra{animation:none}}
.campo-grupo{border:0; padding:0; margin:0; min-width:0}
.campo-grupo legend{font-size:13px; font-weight:700; color:var(--ink-1); padding:0; margin-bottom:6px}

/* Revisión de Gala 15/10: letra más grande, centrado y vuelta atrás visible */
.ayuda,.eco{font-size:14px; line-height:1.45}
.desglose-calc td{font-size:15px}
.desglose-calc td:nth-child(2){font-size:14.5px}
.con-frase .frase{font-size:14px}
.desglose div{font-size:15px}
.compara .v{font-size:26px}
.resultado .que{font-size:15px}
.desglose-calc thead th{text-align:center}
.desglose-calc td.num,.desglose-calc tfoot td.num{text-align:center}
.ahora .card{text-align:center; justify-items:center}
.migas{font-size:14px; margin:0 0 16px}
.migas a.volver{display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--indigo); text-decoration:none; background:var(--papel-banda); border-radius:var(--radius-pill); padding:5px 12px; margin-right:6px}
.migas a.volver::before{content:'←'}
/* Fuente legal: etiqueta, «Norma:» y la norma corta; nunca desborda su caja */
.fuente{display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; max-width:100%; min-width:0; overflow-wrap:anywhere; font-size:12.5px}
.fuente .norma-et{font-family:'Barlow',sans-serif; color:var(--ink-3)}
.cual-es{margin-top:8px; font-size:14px}
.cual-es summary{cursor:pointer; font-weight:700; color:var(--indigo)}
.cual-es ul{margin:8px 0 0; padding-left:18px; display:grid; gap:6px; color:var(--ink-2)}
.lista-145{margin:10px 0 0; padding-left:18px; display:grid; gap:6px; color:var(--ink-2)}
#modelo-145 textarea{width:100%}

/* Móvil: la tabla del desglose pasa a filas apiladas (sin scroll lateral ni desbordes) */
@media(max-width:600px){
  .tabla-scroll table.desglose-calc{min-width:0 !important}
  .desglose-calc thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .desglose-calc tr{display:block; border-bottom:1px solid var(--hairline); padding:10px 0}
  .desglose-calc td{display:flex; justify-content:space-between; gap:12px; border:0; padding:3px 0; text-align:right}
  .desglose-calc td::before{content:attr(data-col); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); text-align:left; flex:none; max-width:45%}
  .desglose-calc td:first-child{font-weight:700; text-align:left}
  .desglose-calc td:first-child::before{content:none}
  .desglose-calc tfoot tr{border-top:2px solid var(--ink-1)}
  .con-frase th:nth-child(2),.con-frase td:nth-child(2){display:none}
}

/* Regla de Gala (un comentario vale para toda la web): «muy pequeño» → mínimo 14 px en todo el texto de lectura */
.segmentos span,.check,.error-msg,.aviso,.estado-msg,.cambiar-conv,.nota-provisional,.cual-es,.migas{font-size:14px}
.conv-resultados b{font-size:15px}
.conv-resultados span{font-size:13.5px}
.conv-caja .conv-nombre{font-size:15px}
.paso span{font-size:15px}
.reglas .card p,.faq details p,.ahora .card p{font-size:15px}
.insertar textarea{font-size:13px}
/* Página de nómina y bruto anual */
.nomina{font-size:15px !important}
.linea .et small{font-size:13px !important}
.explica .como{font-size:14px !important}
.explica p{font-size:15px}
.fila-toca small{font-size:13.5px !important}
.avisos p{font-size:14px !important}
/* Tablas y tarjetas centradas en todas las calculadoras (no solo en el neto) */
.desglose-calc tfoot td{text-align:center}
.paso-seccion{font-size:14px; font-weight:700; color:var(--ink-2); margin:-6px 0 14px}
.paso-seccion a{color:var(--indigo)}

/* La fuente, una sola vez y al final (regla de Gala) */
main .fuente{display:none !important}
.fuente-corta{margin:0; font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink-3)}
.fuente-corta a{color:var(--ink-2)}
.fuentes-pagina{padding:32px 0 8px}
.fuentes-pagina ul{list-style:none; margin:8px 0 0; padding:0; display:grid; gap:6px; font-size:14px; color:var(--ink-2)}
.fuentes-pagina li.actualizado{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink-3)}
/* Preguntas visibles (se buscan con ⌘F): sin plegables */
.faq .pregunta{border-bottom:1px solid var(--hairline); padding:14px 0}
.faq .pregunta h3{font-size:17px; margin:0}
.faq .pregunta p{color:var(--ink-2); margin:6px 0 0; max-width:760px; font-size:15px}
.cual-es-t{margin:0; font-weight:700; color:var(--indigo); font-size:14px}