/* 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}