/* plantilla.css — la vista de las ocho calculadoras (Task 9 del plan F1, lote C1).
 *
 * Este fichero NO declara tokens: `tokens.css` es su unico origen, y `tests/web/
 * test_calc_plantilla.py` lo comprueba. Por eso casi todo lo que se ve aqui es un token prestado,
 * y los numeros sueltos que quedan (anchos de rejilla, radios) son medidas de COMPOSICION de esta
 * vista, no del mundo: si mañana el mundo Brasa encoge un campo, esta caja se queda como esta
 * porque es suya. El color, el tiempo y la tipografia no tienen permiso de salir de tokens.
 *
 * La hoja se enlaza DESPUES de tokens.css (lo inyecta el publicador, lote C3), y solo pinta lo que
 * esta dentro de `.calc`: el resto de la pagina —el texto del articulo, el menu, la prosa— no se
 * toca. Una hoja de una vista que se lleva por delante la tipografia del articulo no es una hoja
 * de una vista.
 */

.calc {
  /* Una columna en el telefono y dos en escritorio. A 390px una sola: dos columnas de campo ahi
     darían 170px de ancho útil, y un campo de 170px no se rellena con el dedo sin taparlo. */
  display: grid;
  gap: var(--escenario-espacio-bloque);
  margin-block: var(--escenario-espacio-acciones);
  color: var(--hueso);
  font: 400 var(--escenario-dato)/1.5 var(--prosa);
  /* Un `fieldset` trae un borde y un min-width por defecto que en una rejilla estrecha empuja la
     pagina hacia los lados: sin esto, el borde del navegador es el que causa el scroll horizontal. */
  min-width: 0;
}

.calc-campos {
  /* `clear: both` es la mitad del truco del `legend` flotado de arriba: sin el, la rejilla de
     campos se coloca AL LADO de un flotante que ya ocupa el 100% del ancho, se queda con 0 px
     de ancho util y sus `input` se salen de la pagina. Es el scroll horizontal de 390 px. */
  clear: both;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--escenario-campo)), 1fr));
  gap: var(--escenario-espacio-chico) var(--escenario-espacio-bloque);
}

/* ——— P2: cada paso es una tarjeta ———
   Un `fieldset` sin borde ni relleno es un borde de mas entre lineas de texto. Con superficie,
   borde y radio, el paso se lee como una pieza y la pagina deja de ensuciarse. El relleno es
   `--ds-esp-5` en vez de 0, asi que el `legend` ya no se apoya en el borde: entra dentro. */
.calc-paso {
  min-width: 0;
  margin: 0;
  padding: var(--ds-esp-5);
  border: 1px solid var(--ds-borde);
  border-radius: var(--ds-radio-m);
  background: var(--ds-superficie-1);
}

/* El `float: left; width: 100%` es lo que devuelve el `legend` a su sitio: sin el, el navegador
   lo dibuja SOBRE el borde del `fieldset` y la tarjeta sale con un hueco en el filo. Flotado y
   al 100% se comporta como un bloque normal, y el `fieldset` (que es un BFC) lo contiene. */
.calc-paso-legend {
  float: left;
  display: flex;
  align-items: center;
  gap: var(--ds-esp-3);
  width: 100%;
  padding: 0 0 var(--ds-esp-4);
  color: var(--hueso);
  font: 500 var(--ds-titulo-3)/var(--ds-linea-titulo) var(--condensada);
  letter-spacing: var(--tracking-texto);
  text-transform: none;
}

/* El numero va en pildora y NO junto al titulo (`plantilla.js` los mete en dos `span`): un «1»
   suelto pegado a un texto se lee como parte de la frase. */
.calc-paso-numero {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 1.75em;
  height: 1.75em;
  padding-inline: var(--ds-esp-2);
  border-radius: var(--ds-radio-pildora);
  background: var(--ds-superficie-3);
  color: var(--hueso-2);
  font: 500 var(--ds-rotulo)/1 var(--datos);
  font-variant-numeric: tabular-nums;
}

.calc-paso-titulo { min-width: 0; }

.calc-campo { min-width: 0; }

.calc-campo-etiqueta {
  display: block;
  margin-bottom: var(--margen-campo-basico);
  color: var(--hueso-2);
  font: 400 var(--escenario-dato-label)/1.4 var(--prosa);
}

/* El control es la posicion que hace posible el sufijo pegado a la derecha sin que se coma la
   cifra: `position: relative` aqui, el hueco reservado con `padding-inline-end` en el input, y el
   sufijo anclado. Es el mismo truco que usa el campo de Escenarios con `--ancho-sufijo`. */
.calc-control { position: relative; }

.calc-input {
  width: 100%;
  min-height: var(--alto-campo);
  /* 16px de letra es lo que evita el zoom automatico de iOS al enfocar: por debajo, Safari
     agranda la pagina y el campo se sale de la pantalla. */
  font: 400 1rem/1.2 var(--datos);
  font-variant-numeric: tabular-nums;
  color: var(--hueso);
  background: var(--pozo);
  border: 1px solid var(--bronce);
  border-radius: var(--ds-radio-s);
  padding: 0 calc(var(--ancho-sufijo) + 12px) 0 12px;
  transition: border-color var(--t-golpe) ease, background-color var(--t-golpe) ease;
}

.calc-input:hover { border-color: var(--hueso-3); }

.calc-input[aria-invalid='true'] {
  /* El campo malo se marca con el color de aviso Y con el atributo `aria-invalid`: el color solo
     no se ve en un lector de pantalla, y el atributo solo no se ve. */
  border-color: var(--aviso);
}

.calc-sufijo {
  position: absolute;
  inset-inline-end: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hueso-3);
  font: 400 var(--escenario-dato-label)/1 var(--datos);
  pointer-events: none;
}

.calc-error {
  margin: var(--margen-error) 0 0;
  min-height: 1.2em;
  color: var(--aviso);
  font: 400 var(--escenario-detalle)/1.4 var(--prosa);
}


/* ——— el resultado ———
   El resultado es la respuesta a la pregunta de la pagina, y por eso se levanta UN escalon por
   encima de los pasos: superficie 2 en vez de 1, mas el brillo superior. En tema oscuro la
   elevacion es mas LUZ de superficie, no sombra — y por eso el brillo va en `inset`, que es
   luz que entra por el filo de arriba. */
.calc-resultado {
  min-width: 0;
  padding: var(--ds-esp-5);
  border: 1px solid var(--ds-borde);
  border-radius: var(--ds-radio-l);
  background: var(--ds-superficie-2);
  box-shadow: var(--ds-brillo-superior);
}

.calc-cifra {
  margin: 0;
  color: var(--hueso);
  font: 400 var(--ds-titulo-1)/1.05 var(--condensada);
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
  /* Un numero largo de euros no se parte a la mitad a 390px: `anywhere` deja que baje de linea
     antes que empujar la pagina hacia los lados. */
  overflow-wrap: anywhere;
}

/* Cuando no hay cifra (un `Infinity` con etiqueta), la etiqueta ocupa el lugar del numero y no se
   inventa una cifra aproximada: se ve mas grande porque AHORA es el resultado entero. */
.calc-cifra-sin-numero { color: var(--hueso); }

.calc-cifra-etiqueta {
  margin: 0 0 var(--escenario-espacio-acciones);
  color: var(--hueso-2);
  font: 400 var(--escenario-label)/1.4 var(--prosa);
}

/* El detalle es una TABLA de lectura, no una columna de cifras: la etiqueta manda y la cifra se
   alinea a la derecha para que el ojo compare por la fila. El problema de la version anterior era
   la primera columna en `auto`: con una etiqueta larga —«Tasa de saldo (n/d: sin ingresos no hay
   nada que dividir)»— el `auto` se la comia entera y el numero quedaba aplastado contra el borde
   de una columna de 320 px. Con `minmax(0, 1fr)` la etiqueta CEDE y se parte en lineas, y la cifra
   conserva siempre su ancho, que es lo que se lee. */
.calc-detalle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--escenario-espacio-chico) var(--escenario-espacio-bloque);
  /* Mas aire por encima que por debajo: el filete separa la cifra que responde de las que la
     desglosan, y el margen de abajo es el que la despega de la tabla «Si cambias…». */
  margin: 0 0 var(--escenario-espacio-acciones);
  padding-top: var(--escenario-espacio-lectura);
  border-top: 1px solid var(--ds-borde);
}

.calc-detalle-etiqueta {
  color: var(--hueso-2);
  font: 400 var(--escenario-detalle)/1.5 var(--prosa);
  text-wrap: pretty;
}
.calc-detalle-valor { margin: 0; text-align: end; }
.calc-detalle-cifra {
  color: var(--hueso);
  font: 400 var(--escenario-detalle)/1.5 var(--datos);
  font-variant-numeric: tabular-nums;
}

/* Un `n/d` no es un dato pequeño: es la AUSENCIA de uno, y por eso no se pinta con el mismo peso
   que los numeros de al lado. Apagado y sin las cifras tabulares (unas cifras tabulares alinean
   columnas de numeros; alinean menos un «n/d» de tres letras pegado a un «9.600,00 €»), con el
   motivo escrito en la etiqueta, que es donde ya se lee. La diferencia se marca al pintarla
   (`plantilla.js`), no aqui, porque aqui no hay forma de saber que valor es. */
.calc-detalle-cifra-sin-dato {
  color: var(--hueso-3);
  font-family: var(--prosa);
  font-variant-numeric: normal;
}

/* ——— el gráfico ——— */
.calc-grafico { margin: 0 0 var(--escenario-espacio-bloque); min-width: 0; }

.calc-grafico-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.calc-rejilla { stroke: var(--rejilla); stroke-width: 1; }
.calc-marca-x { stroke: var(--bronce); stroke-width: 1; }
.calc-texto { fill: var(--hueso-3); font: 400 12px var(--datos); font-variant-numeric: tabular-nums; }
.calc-referencia-rotulo { fill: var(--oro); }

/* Las lineas de serie: `--catodo` es la unica brasa RELLENA de la vista y aqui va como trazo. La
   segunda serie usa el oro y la tercera la crema apagada, que es la jerarquia que ya usa el
   grafico de Escenarios: dos lineas tienen que distinguirse SIN leer la leyenda. */
.calc-linea { fill: none; stroke: var(--catodo); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.calc-linea-1 { stroke: var(--oro); }
.calc-linea-2 { stroke: var(--hueso-2); }
.calc-linea-3 { stroke: var(--bronce); stroke-dasharray: 5 4; }

.calc-referencia { stroke: var(--oro); stroke-width: 1; stroke-dasharray: 5 4; opacity: .8; }

.calc-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--escenario-espacio-chico) var(--escenario-espacio-bloque);
  margin: var(--escenario-espacio-chico) 0 0;
  padding: 0;
  list-style: none;
}


/* ——— la tabla «Si cambias…» ———
   Una tabla de dos columnas, no un acordeon ni un desplegable: la pregunta («y si fuera otro?») se
   tiene que poder responder sin tocar nada, y una tabla cabe en la pantalla sin interaccion. Va
   DESPUES del grafico, y por eso lleva el margen de bloque de las otras piezas de la salida.

   `table-layout: fixed` con dos columnas medidas en fraccion es lo que evita el scroll horizontal a
   390 px: una tabla con dos columnas se reparte el ancho disponible sin calcular nada, y
   `overflow-wrap: anywhere` deja partir un saldo de siete cifras en vez de empujar la pagina. Sin
   las dos cosas, un importe largo sale del ancho y aparece el scroll que P2 prohibe. */
.calc-sensibilidad {
  width: 100%;
  margin: var(--escenario-espacio-bloque) 0 0;
  border-collapse: collapse;
  table-layout: fixed;
  font: 400 var(--escenario-detalle)/1.5 var(--prosa);
  color: var(--hueso);
}

/* El `caption` es el titulo de la tabla y va arriba (`caption-side: top` es el defecto, se dice igual
   para que no dependa de el). En minusculas porque la frase empieza por «Si cambias» y en
   mayusculas ahi pareceria otro titulo de seccion. */
.calc-sensibilidad caption {
  caption-side: top;
  padding-bottom: var(--ds-esp-2);
  color: var(--hueso-2);
  font: 500 var(--escenario-dato-label)/1.4 var(--prosa);
  text-align: start;
}

.calc-sensibilidad-supuesto { width: 38%; }
.calc-sensibilidad-resultado { width: 62%; }

/* Los dos bordes: el de abajo separa fila de fila sin caja alrededor, que es un borde de mas entre
   lineas de texto. */
.calc-sensibilidad thead th {
  padding: 0 var(--ds-esp-2) var(--ds-esp-2);
  border-bottom: 1px solid var(--bronce);
  color: var(--hueso-3);
  font: 500 var(--ds-rotulo)/1.4 var(--prosa);
  text-align: start;
}

.calc-sensibilidad thead th.calc-sensibilidad-resultado { text-align: end; }

.calc-sensibilidad th,
.calc-sensibilidad td {
  padding: var(--ds-esp-2);
  border-bottom: 1px solid var(--ds-borde);
  overflow-wrap: anywhere;
  font-weight: 400;
  text-align: start;
  vertical-align: baseline;
}

/* El supuesto de la fila va a la derecha de su celda, como la cifra: son las dos mitades de la
   misma pregunta y asi se leen alineadas al escanear la columna. */
.calc-sensibilidad .calc-sensibilidad-valor,
.calc-sensibilidad .calc-sensibilidad-cifra {
  text-align: end;
  font-variant-numeric: tabular-nums;   /* el numero se reescribe en cada tecla */
  font-family: var(--datos);
}

/* La fila actual: la misma cuenta que esta justo arriba en la cifra grande. Se distingue con la
   superficie y no con un color de texto (un color mas que distinguir, y el texto tiene que seguir
   siendo legible), y ademas con una nota escrita: el resaltado solo no se ve en un modo de alto
   contraste ni lo anuncia un lector de pantalla. */
.calc-sensibilidad .calc-sensibilidad-actual {
  background: var(--ds-superficie-2);
}

.calc-sensibilidad-actual-nota { color: var(--hueso-3); }

/* ——— compartir y los dos avisos ——— */
.calc-compartir { display: flex; flex-wrap: wrap; align-items: center; gap: var(--escenario-acciones-gap); }

/* Boton secundario, no la brasa: la brasa rellena de esta vista es el resultado, y un boton de
   compartir que compite con el numero es un boton que se pulsa sin querer. */
.calc-boton {
  min-height: 44px;   /* por debajo de 44px, en un telefono, no se toca bien */
  padding: 0 var(--ds-esp-5);
  border: 1px solid var(--bronce);
  border-radius: var(--ds-radio-pildora);
  background: transparent;
  color: var(--hueso);
  font: 500 var(--escenario-dato-label)/1 var(--condensada);
  letter-spacing: var(--tracking-texto);
  cursor: pointer;
  transition: border-color var(--t-golpe) ease, color var(--t-golpe) ease;
}

.calc-boton:hover { border-color: var(--hueso-2); }

.calc-compartir-aviso {
  margin: 0;
  color: var(--hueso-3);
  font: 400 var(--escenario-detalle)/1.5 var(--prosa);
}

/* La frase que sustituye al boton cuando la calculadora no se comparte. Mismo sitio, mismo peso y
   mismo apagado que el aviso de «Copiar enlace»: es el mismo puesto de la vista —el cierre de la
   pagina— y lo que cambia es que aqui no se ofrece nada que copiar. No lleva filete ni caja
   propia porque no es un aviso legal: los dos `.calc-aviso` de abajo ya llevan el cierre. */
.calc-sin-compartir {
  margin: var(--escenario-espacio-bloque) 0 0;
  color: var(--hueso-3);
  font: 400 var(--escenario-detalle)/1.5 var(--prosa);
  text-wrap: pretty;
}

.calc-aviso {
  margin: var(--escenario-espacio-bloque) 0 0;
  padding-inline-start: var(--margen-campo-etiqueta);
  border-inline-start: 2px solid var(--bronce);
  color: var(--hueso-2);
  font: 400 var(--escenario-detalle)/1.6 var(--prosa);
}

/* La linea de IA (art. 50.4, version conservadora) se ve aparte del aviso fijo, aunque las dos
   sean del mismo bloque: son dos Frontieras distintas y esconder una en un parrafo largo seria
   volver a esconderla. */
.calc-aviso-ia { border-inline-start-color: var(--catodo); }

/* ——— el foco ———
   `:focus-visible` y no `:focus`: con `outline: none` + `:focus` el foco tambien aparece al
   pinchar con el raton, y en un formulario de ocho campos eso es un contorno fantasma en el
   campo que acabas de tocar. aqui el foco sale con el teclado, que es cuando hace falta. */
.calc :focus-visible {
  outline: 2px solid var(--catodo);
  outline-offset: 3px;
  border-radius: 2px;
}

.calc-input:focus-visible { border-color: var(--ds-borde-activo); }

/* ——— P2: a 1024 px la vista se parte en dos columnas ———
   El defecto que esto tapa: el resultado caia DEBAJO de todos los campos, y a 1440 px tambien,
   porque la vista era una sola pila. Aqui el formulario baja a la izquierda y la salida se queda
   a la derecha, pegada al scroll, de modo que el numero que responde a la pregunta esta siempre a
   la vista mientras se rellenan los supuestos. Por debajo de 1024 NO hay nada: una columna, que
   es la de hoy, porque a 390 px dos columnas de campo darian 170 px de ancho util.

   El hueco entre columnas sube a `--ds-esp-7`: con 12 px las dos mitades se leen como la misma
   columna partida, y lo que separa el formulario de la respuesta tiene que verse. */
@media (min-width: 1024px) {
  .calc {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
    column-gap: var(--ds-esp-7);
  }

  /* Sin esto, el `sticky` no travels: la celda se estira a la altura de la fila —la del
     formulario, que es la alta— y el resultado se pega al fondo de una caja tan alta como el
     formulario, es decir, no se mueve. */
  .calc-salida {
    grid-column: 2;
    align-self: start;
    position: sticky;
    top: calc(var(--alto-barra) + var(--ds-esp-5));
  }

  .calc-form { grid-column: 1; }

  /* Los dos avisos y el boton de compartir se quedan a todo el ancho. Son el cierre legal de la
     vista y metidos en la columna de 320-440 px salen partidos en dos lineas cortas. La frase de
     «aquí no hay enlace» es el mismo cierre y se coloca igual, o se quedaria sola en la columna
     del formulario, debajo de unos campos que no son suyos. */
  .calc-aviso,
  .calc-compartir,
  .calc-sin-compartir { grid-column: 1 / -1; }
}

/* ——— la valvula del movimiento ———
   Reduce el movimiento, no el contenido: el estado cambia igual y lo que se apaga es el travel.
   Sin este bloque, el borde de un campo en error aparecia de golpe y el resultado se hacia notar
   con una transicion que a alguien con `prefers-reduced-motion` no le hace falta para nada. */
@media (prefers-reduced-motion: reduce) {
  .calc *,
  .calc *::before,
  .calc *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

.calc-leyenda-item { display: flex; align-items: center; gap: var(--margen-campo-basico); }
.calc-leyenda-nombre { color: var(--hueso-2); font: 400 var(--escenario-detalle)/1.4 var(--prosa); }

/* La muestra de la leyenda lleva EXACTAMENTE el color de su linea: es el mismo dato en dos
   formatos, y si se desincronizan la leyenda pasa a mentir sobre el dibujo. */
.calc-muestra { width: 14px; height: 2px; background: var(--catodo); }
.calc-muestra-1 { background: var(--oro); }
.calc-muestra-2 { background: var(--hueso-2); }
.calc-muestra-3 { background: var(--bronce); }