/* Estilos propios de /calculadora/. Van acá y no en css/tamiz.css porque esa
   hoja la toca sólo la integración (misión del 26/10). Usa sólo los tokens de
   tamiz.css, así funciona igual en los dos temas sin declarar colores. Los
   campos copian la pinta del formulario de consulta de la home (.consulta). */

.calc {
  margin-top: calc(var(--grano) * 4);
  padding: calc(var(--grano) * 3);
  background: var(--tarjeta);
  border: 1px solid var(--tarjeta-borde);
  border-radius: 16px;
}
.articulo .calc-titulo { margin-top: 0; font-size: clamp(1.2rem, 2.4vw, 1.45rem); }

.calc-campos { display: grid; gap: calc(var(--grano) * 2.5); margin-top: calc(var(--grano) * 2.5); }
@media (min-width: 760px) {
  .calc-campos { grid-template-columns: repeat(3, 1fr); }
  /* en tres columnas los rótulos ocupan de una a tres líneas: sin esto los campos quedan a distinta altura */
  .calc-campo label { min-height: 4.2em; }
}
.calc-campo { display: grid; gap: calc(var(--grano) * 0.8); align-content: start; }
.calc-campo label {
  font-family: var(--fuente-dato);
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.4;
  color: var(--texto-3);
}
.calc-campo input {
  font: inherit; font-size: 1.05rem; color: var(--texto);
  font-variant-numeric: tabular-nums;
  background: var(--superficie);
  border: 1px solid var(--tarjeta-borde); border-radius: 12px;
  padding: calc(var(--grano) * 1.2) calc(var(--grano) * 1.4);
  width: 100%; box-sizing: border-box; min-width: 0;
}
.calc-campo input::placeholder { color: var(--texto-3); }
.calc-campo input:focus { outline: none; border-color: var(--senal); }
.calc-campo input[aria-invalid="true"] { border-color: var(--hilo); }
.articulo .calc-ayuda, .articulo .calc-error { margin-top: 0; font-size: 0.86rem; line-height: 1.45; }
.articulo .calc-ayuda { color: var(--texto-3); }
.articulo .calc-error { color: var(--hilo); font-weight: 600; }
.articulo .calc-error:empty { display: none; }

/* los resultados: la monoespaciada para los números, como .cifras del caso */
.calc-resultados {
  display: grid; gap: calc(var(--grano) * 2.5);
  margin-top: calc(var(--grano) * 3); padding-top: calc(var(--grano) * 2.5);
  border-top: 1px solid var(--borde);
}
@media (min-width: 600px) { .calc-resultados { grid-template-columns: 1fr 1fr; } }
.articulo .calc-rotulo {
  margin-top: 0;
  font-family: var(--fuente-dato); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--texto-3);
}
/* en el celular un año de pesos grande no entra en una línea: se deja cortar */
.calc-periodo .cifra-numero { margin-top: calc(var(--grano) * 0.8); white-space: normal; overflow-wrap: anywhere; }
.articulo .calc-estado { margin-top: calc(var(--grano) * 2); font-size: 0.92rem; color: var(--texto-2); }
/* el único ámbar de la sección: el filete de los resultados cuando están los tres datos */
.calc-completa .calc-resultados { border-top-color: var(--senal); }

.calc-cta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: calc(var(--grano) * 1.5) calc(var(--grano) * 2.5);
}
.articulo p.calc-cta { margin-top: calc(var(--grano) * 3); }

@media (max-width: 640px) {
  .calc { padding: calc(var(--grano) * 2); }
}