/* ==========================================================================
   Titanes del Dinero · calculadoras.css
   Lo que las calculadoras añaden a lectura.css (§6.13): campos de lista y de sí o no, unidades largas, errores,
   la frase con su tono, la cifra grande, barras por tono, acciones de copiar, la calculadora en grande de su
   página (cifras | resultado), las tarjetas del índice /calculadoras/ y la banda del vídeo de origen.
   Se carga solo donde hay una calculadora (inc/calculadoras.php, filtro titanes_hojas). Requiere base y lectura.
   ========================================================================== */

/* ---------- La calculadora (también dentro de las guías) ---------- */
.calc__titulo { margin: 0 0 .5rem; font-size: var(--t-xl); font-weight: 760; letter-spacing: -0.028em; line-height: 1.1; text-wrap: balance; }
.calc__cab .antetitulo { margin-bottom: var(--e-3); }
.calc--embebida .calc__campos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.calc__campos { align-items: start; }

/* Unidad dentro del campo: el hueco crece con su largo (€, €/mes, % al año) */
.campo__control[style] input { padding-right: calc(1.5rem + var(--u, 1) * .6em); }
.campo__control input[aria-invalid="true"], .campo__control select[aria-invalid="true"] { border-color: var(--rojo); box-shadow: inset 0 0 0 1px var(--rojo); }
.campo__ayuda { display: block; color: var(--texto-3); font-size: .8125rem; line-height: 1.45; }
.campo__error { display: block; color: var(--rojo); font-size: .875rem; font-weight: 650; line-height: 1.4; }
.campo__error:empty { display: none; }

/* Lista desplegable con el mismo aspecto que los campos */
.campo__control--lista select {
  width: 100%; height: 52px; padding: 0 2.75rem 0 1rem; border-radius: var(--r-2); border: 1.5px solid var(--borde-campo);
  background-color: var(--fondo); color: var(--texto); font: 620 1.0625rem/1.2 var(--sans);
  -webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.35rem) 50%, calc(100% - 1rem) 50%; background-size: .36rem .36rem; background-repeat: no-repeat;
}
.campo__control--lista select:hover { border-color: var(--texto-2); }
.campo__control--lista select:focus-visible { outline: 3px solid var(--foco); outline-offset: 1px; border-color: var(--texto); }

/* Sí o no: dos píldoras (radios de verdad, accesibles con teclado) */
.campo--opciones { margin: 0; padding: 0; border: 0; min-width: 0; }
.campo--opciones legend { padding: 0; margin-bottom: .4rem; font-weight: 650; font-size: .9375rem; line-height: 1.3; }
.opciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.opcion { position: relative; display: inline-flex; }
.opcion input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opcion span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 5.5rem; min-height: 48px; padding: .5rem 1.1rem;
  border-radius: var(--r-p); border: 1.5px solid var(--borde-campo); background: var(--fondo); font-weight: 650; color: var(--texto);
}
.opcion input:hover + span { border-color: var(--texto-2); }
.opcion input:checked + span { background: var(--boton); color: var(--boton-texto); border-color: var(--boton); }
.opcion input:focus-visible + span { outline: 3px solid var(--foco); outline-offset: 2px; }

.calc__botones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin: 0 0 var(--e-5); }
.calc__botones .boton, .calc__compartir .boton { white-space: normal; text-align: left; }

/* Resultado */
.calc__etq { margin: 0 0 var(--e-2); font: 650 var(--t-mono)/1.2 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--texto-2); }
.calc__frase { padding-left: .9rem; border-left: 4px solid var(--borde-campo); text-wrap: pretty; }
.calc__frase--bueno { border-left-color: var(--ok); }
.calc__frase--neutro { border-left-color: var(--oro); }
.calc__frase--malo { border-left-color: var(--mal); }
.calc__salida { transition: opacity var(--rapido) var(--suave); }
.calc__resultado--viejo .calc__salida { opacity: .4; }
.calc__grande { display: grid; gap: .45rem; margin: 0 0 var(--e-5); padding: var(--e-4) 0 0; border-top: 2px solid var(--texto); }
.calc__grande .cifra__valor { font-size: var(--t-cifra); line-height: .95; overflow-wrap: anywhere; white-space: normal; }
.calc--embebida .calc__grande .cifra__valor { font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem); }
.calc__grande .cifra__texto { margin: 0; font-size: 1rem; }
.calc__cifras .cifra__valor { white-space: normal; overflow-wrap: anywhere; }
.calc__cifras .cifra__texto { font-size: .9375rem; }

.calc__barras { gap: var(--e-3); margin-bottom: var(--e-5); }
.calc__barras .barras__barra { height: 1rem; border-radius: 5px; }
.calc__barras .barras__cab span { font-size: .875rem; color: var(--texto-2); font-weight: 600; }
.barras__seg--bueno { background: var(--ok); }
.barras__seg--neutro { background: var(--oro); }
.barras__seg--malo { background: repeating-linear-gradient(45deg, var(--mal) 0 4px, color-mix(in srgb, var(--mal) 80%, #fff) 4px 8px); }

.calc__tabla { margin: 0 0 var(--e-4); }
/* En el móvil, la columna de los conceptos no se queda en 6,5rem: «Máximo sin hijos a cargo y a jornada completa»
   ocupaba cinco líneas en «Tu paro, al mes». */
@media (max-width: 47.99rem) { .calc__tabla .tabla tbody th { min-width: 9rem; } }
.calc__supuestos { border-top: 1px solid var(--borde); }
.calc__supuestos summary { gap: .6rem; }
.calc__supuestos ul { margin: 0 0 var(--e-3); }
.calc__n { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .4rem; border-radius: var(--r-p); background: var(--sup-3); font: 650 .75rem/1 var(--mono); color: var(--texto-2); }

.calc__compartir { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--borde); }
.calc__estado { font: 650 var(--t-mono)/1.3 var(--mono); color: var(--ok); }
.calc__nota { display: flex; gap: .45rem; align-items: baseline; line-height: 1.45; }
.calc__nota .ico { flex: none; transform: translateY(.12em); }
.calc__abrir { margin: var(--e-4) 0 0; }

/* En móvil y tableta, la cifra del resultado va pegada abajo mientras se rellenan los campos */
.calc__mini { display: none; }
@media (max-width: 63.99rem) {
  .calc__mini {
    position: sticky; bottom: calc(var(--e-3) + env(safe-area-inset-bottom)); z-index: 5;
    /* Etiqueta encima y cifra debajo, a todo el ancho: «965 € · 579 € · 386 €» cabe en una línea (antes, en tres) */
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "etq ver" "cifra ver"; align-items: center; column-gap: .75rem; row-gap: .1rem;
    margin: var(--e-2) 0 0; min-height: 52px; padding: .45rem .5rem .5rem 1.1rem; border-radius: 1.6rem;
    background: var(--noche); color: var(--crema); text-decoration: none; box-shadow: var(--sombra-2); border: 1px solid rgb(254 254 234 / .22);
  }
  .con-barra-movil .calc__mini { bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
  .calc__mini-etq { grid-area: etq; font: 600 .75rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: #c9cbb6; }
  /* La cifra nunca se corta con «…»: si no cabe en una línea, pasa a dos (y en pantallas estrechas la etiqueta se va). */
  .calc__mini b { grid-area: cifra; min-width: 0; font-weight: 700; font-size: 1.0625rem; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: normal; overflow-wrap: normal; }
  .calc__mini-ver { grid-area: ver; display: inline-flex; min-height: 40px; align-items: center; gap: .3rem; padding: .45rem .8rem; border-radius: var(--r-p); background: var(--oro); color: var(--noche); font-weight: 700; font-size: .875rem; }
  .calc__mini:focus-visible { outline: 3px solid var(--oro-claro); outline-offset: 2px; }
  /* Mientras se rellenan los campos, la pastilla fija no tapa el campo con el foco ni su ayuda. */
  html:root:has(.calc__mini) { scroll-padding-bottom: calc(4.6rem + 52px + 1.5rem + env(safe-area-inset-bottom)); }
  /* Dos columnas solo si caben de verdad (unos 330 px de caja): en el móvil, una, que los textos son largos */
  .calc__cifras { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap: var(--e-4); }
  .calc__cifras .cifra__valor { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 1.875rem); }
}

/* ---------- La calculadora en grande, en su página ---------- */
.calc--pagina { margin: 0; }
.calc--pagina .calc__cab { margin-bottom: var(--e-5); }
.calc--pagina .calc__campos { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
@media (max-width: 63.99rem) {
  .calc--pagina .calc__resultado { margin-top: var(--e-2); }
}
@media (min-width: 64rem) {
  .calc--pagina { padding: var(--e-6); }
  .calc--pagina .calc__cuerpo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--e-6); align-items: stretch; }
  /* Las cifras quedan a mano mientras se lee el resultado: el formulario se queda fijo solo si cabe entero en la
     pantalla (calc__form--fijo, lo pone arranque.js). Sin alto máximo ni scroll propio: la rueda nunca se queda atrapada. */
  .calc--pagina .calc__form { margin: calc(var(--e-2) * -1); padding: var(--e-2); }
  .calc--pagina .calc__form--fijo { position: sticky; top: calc(var(--cab) + 1rem); }
  .calc--pagina .calc__botones { margin-bottom: 0; }
  .calc--pagina .calc__resultado { padding-top: 0; border-top: 0; padding-left: var(--e-6); border-left: 1px solid var(--borde); }
  .calc--pagina .calc__form { align-self: start; }
}

/* ---------- Página de una calculadora ---------- */
.calc-pagina__cab { padding-block: var(--e-5) var(--e-6); }
.calc-pagina__cab .migas { margin-bottom: var(--e-5); }
.calc-pagina__h1 { max-width: 52rem; margin: 0 0 var(--e-4); font-size: clamp(1.875rem, 1.25rem + 2.6vw, 3.25rem); font-weight: 780; letter-spacing: -0.036em; word-spacing: .04em; line-height: 1.04; text-wrap: balance; }
.calc-pagina__cab .entradilla { max-width: 46rem; margin: 0 0 var(--e-5); }
.calc-pagina__cab .firma { margin: 0; }
.calc-pagina__calc { padding-bottom: var(--seccion); }

.calc-video__rejilla { display: grid; gap: var(--e-5); align-items: start; }
@media (min-width: 64rem) { .calc-video__rejilla { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e-7); } }
.calc-video__rejilla .reproductor { grid-area: auto; }
.calc-video__texto { display: grid; gap: var(--e-4); align-content: start; }
.calc-video__etq { margin: 0; font: 650 var(--t-mono)/1.2 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--oro-texto); }
.calc-video__respuesta { padding-left: var(--e-4); border-left: 3px solid var(--oro); color: var(--texto-2); }
.calc-video__respuesta p { margin: 0 0 .6em; }
.calc-video__respuesta strong { color: var(--texto); }
.calc-pagina__guia { margin: var(--e-5) 0 0; }
.calc-pagina__articulo .prosa > :first-child { margin-top: 0; }

.calc-mas__guias { margin-bottom: var(--e-7); }
.calc-mas__h3 { margin: 0 0 var(--e-4); font-size: var(--t-xl); letter-spacing: -0.028em; }

/* ---------- Índice /calculadoras/ y tarjetas ---------- */
.calc-indice__cab { padding-bottom: var(--e-5); }
.calc-indice__cab .entradilla { max-width: 46rem; margin-bottom: var(--e-5); }
.calc-indice__datos { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 0; padding: 0; list-style: none; font: 550 var(--t-mono)/1.4 var(--mono); color: var(--texto-2); }
.calc-indice__datos li { display: inline-flex; align-items: center; gap: .45rem; }
.calc-indice__datos .ico { color: var(--acento-tinta); }
.calc-indice .filtros .ico { width: 1.1em; height: 1.1em; }
.calc-indice__vacio { color: var(--texto-2); }
.calc-indice__texto { max-width: 42rem; }

.calc-rejilla { display: grid; gap: var(--hueco); margin: 0; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); }
.calc-rejilla > li { display: grid; min-width: 0; }
@media (min-width: 40rem) { .calc-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .calc-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.calc-tarjeta {
  position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; align-content: start; gap: .5rem; padding: var(--e-5);
  border-radius: var(--r-4); background: var(--sup); border: 1px solid var(--borde); min-width: 0;
}
.calc-tarjeta:hover { border-color: var(--borde-campo); }
.calc-tarjeta:has(h3 a:focus-visible, h2 a:focus-visible, h4 a:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
.calc-tarjeta__icono { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--sup-2); color: var(--acento-tinta); }
.calc-tarjeta .cifra { font-size: clamp(2.25rem, 1.9rem + 1.4vw, 3rem); margin: .15rem 0 .35rem; overflow-wrap: anywhere; }
.calc-tarjeta .cifra--larga { font-size: clamp(1.625rem, 1.4rem + 1vw, 2.125rem); line-height: 1.05; }
.calc-tarjeta h2, .calc-tarjeta h3, .calc-tarjeta h4 { margin: 0; font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.2; }
.calc-tarjeta h2 a, .calc-tarjeta h3 a, .calc-tarjeta h4 a { color: inherit; text-decoration: none; }
.calc-tarjeta h2 a:focus-visible, .calc-tarjeta h3 a:focus-visible, .calc-tarjeta h4 a:focus-visible { outline: none; }
.calc-tarjeta h2 a::after, .calc-tarjeta h3 a::after, .calc-tarjeta h4 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.calc-tarjeta p { align-self: start; margin: 0; color: var(--texto-2); font-size: .9375rem; line-height: 1.5; }
.calc-tarjeta__pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .6rem; padding-top: .75rem; border-top: 1px solid var(--borde); color: var(--texto-2); }
.calc-tarjeta__pie a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .4rem; min-height: 32px; font: 600 var(--t-mono)/1.2 var(--mono); color: var(--texto-2); }
.calc-tarjeta__pie a:hover { color: var(--texto); }
.calc-tarjeta__pie .avisame { position: relative; z-index: 1; }
.calc-tarjeta--pronto { background: transparent; border-style: dashed; border-color: var(--borde-2); }
.calc-tarjeta--pronto .cifra { color: var(--texto-3); }

@media (prefers-reduced-motion: reduce) { .calc__salida { transition: none; } }
@media print {
  .calc__compartir, .calc__botones, .calc-video, .calc-mas { display: none !important; }
  .calc--pagina .calc__form { position: static; max-height: none; overflow: visible; }
}