/* ============================================================================
   Calculadora de ahorro — PAGINA DE PRUEBA
   ----------------------------------------------------------------------------
   Esto va en su propio archivo, no en styles.css, a proposito: mientras la
   calculadora sea una prueba no debe poder romper nada de la web publicada.
   Reutiliza los tokens de color y los botones de styles.css, que se carga
   antes.
   ========================================================================== */

.calc-body { background: var(--bg); color: var(--cream); }

/* Cinta de aviso: que nadie confunda esta pagina con la web de verdad. */
.calc-cinta {
  margin: 0; padding: .6rem 1rem;
  background: repeating-linear-gradient(135deg, #2B1F04, #2B1F04 12px, #2B1F04 12px, #2B1F04 24px);
  color: #D89A22; text-align: center;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .02em;
}
.calc-cinta strong { color: var(--marca-azul-osc); }

.calc { padding-block: clamp(1.8rem, 4vw, 3rem) 4rem; }

.calc-head { max-width: 660px; margin-bottom: 1.8rem; }
/* block, no inline-block: con inline-block el rotulo de debajo (.kicker,
   que es inline-flex) se le subia a la misma linea */
.calc-volver {
  display: block; width: fit-content; margin-bottom: 1.2rem;
  font-family: var(--mono); font-size: .8rem; color: var(--cream-3);
}
.calc-volver:hover { color: var(--accent); }
.calc-head h1 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.1; margin-top: .5rem; }
.calc-sub { margin-top: .8rem; color: var(--cream-2); font-size: 1.02rem; line-height: 1.55; }

/* --- barra de pasos --------------------------------------------------- */
.calc-pasos {
  list-style: none; margin: 0 0 1.4rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
}
.calc-paso {
  display: flex;
  font-size: .84rem; color: var(--cream-3);
  transition: color .3s;
}
/* El rotulo de cada paso es un boton para poder volver a corregir un dato.
   Hereda color y tipografia del <li>, asi las reglas de is-actual y
   is-hecho siguen valiendo tal cual. */
.calc-paso-btn {
  display: flex; align-items: center; gap: .5rem;
  font: inherit; color: inherit; text-align: left;
  background: none; border: 0;
  /* El area pulsable crece hacia arriba y abajo sin mover nada: el
     margen negativo devuelve el espacio que ocupa el padding. Con los
     25px del rotulo pelado era un blanco pequeno para el dedo. */
  padding-block: .5rem; margin-block: -.5rem;
  padding-inline: 0; margin-inline: 0;
  transition: opacity .25s;
}
/* Un paso al que todavia no se ha llegado no se puede pulsar; se deja
   con el mismo aspecto de antes, sin cursor de mano. */
.calc-paso-btn:disabled { cursor: default; }
.calc-paso-btn:not(:disabled) { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .calc-paso-btn:not(:disabled):hover { opacity: .75; }
}
.calc-paso-btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px;
}
.calc-paso span {
  width: 25px; height: 25px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  border: 1px solid var(--line);
  font-family: var(--mono); font-size: .76rem;
  transition: background-color .3s, color .3s, border-color .3s;
}
.calc-paso.is-actual { color: var(--accent); }
.calc-paso.is-actual span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.calc-paso.is-hecho { color: var(--cream-2); }
.calc-paso.is-hecho span { background: rgba(216,154,34,.18); color: var(--accent); border-color: rgba(216,154,34,.4); }

/* --- tarjeta de cada paso --------------------------------------------- */
.calc-tarjeta {
  display: none;
  background: var(--bg-3); border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 3vw, 2.1rem);
  max-width: 880px;
}
.calc-tarjeta.is-visible { display: block; }
.calc-tarjeta h2 {
  display: flex; align-items: center; gap: .6rem;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
}
.calc-tarjeta h2 svg { width: 22px; height: 22px; flex: none; color: var(--accent); }
.calc-ayuda { margin-top: .7rem; color: var(--cream-2); font-size: .92rem; line-height: 1.55; }
.calc-ayuda strong { color: var(--cream); }
.calc-nota { margin-top: .8rem; font-size: .8rem; color: var(--cream-3); line-height: 1.45; }

/* Volver a corregir desde el estudio. Va en tono discreto: es una salida
   de emergencia, no una de las acciones que queremos que se pulsen. */
.calc-corregir {
  margin-top: 1.4rem; display: flex; flex-wrap: wrap; align-items: center;
  gap: .5rem .9rem;
  font-size: .88rem; color: var(--cream-2);
}
.calc-corregir button {
  font: inherit; color: var(--accent); background: none;
  border: 1px solid rgba(216,154,34,.4); border-radius: 999px;
  padding: .35rem .85rem; cursor: pointer;
  transition: background-color .25s, border-color .25s;
}
@media (hover: hover) and (pointer: fine) {
  .calc-corregir button:hover { background: rgba(216,154,34,.12); border-color: var(--accent); }
}
.calc-corregir button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.calc-acciones {
  margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .7rem;
}
.calc-acciones .btn { padding: .85rem 1.4rem; font-size: .94rem; }
.calc-acciones .btn:disabled { opacity: .45; pointer-events: none; }
/* El boton de descarga lleva icono; .btn ya es inline-flex con hueco. */
.calc-acciones .btn svg { width: 17px; height: 17px; flex: none; }

.calc-error {
  margin-top: .9rem; padding: .65rem .85rem; border-radius: 10px;
  background: rgba(197,48,30,.15); border: 1px solid rgba(197,48,30,.35);
  font-size: .85rem; line-height: 1.45; color: #ff9c8a;
}

/* --- paso 1: subir la factura ----------------------------------------- */
.calc-suelta { margin-top: 1.1rem; position: relative; }
/* El input se esconde sin display:none para que siga llegando con el
   tabulador; el foco se pinta sobre la zona. */
.calc-file {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; clip: rect(0 0 0 0); overflow: hidden;
}
.calc-suelta-zona {
  display: flex; align-items: center; gap: .85rem;
  padding: 1.1rem 1.2rem;
  border: 1px dashed rgba(11,36,47,.28); border-radius: 12px;
  background: var(--bg-2); cursor: pointer;
  transition: border-color .25s, background-color .25s;
}
.calc-suelta-zona:hover,
.calc-suelta.is-encima .calc-suelta-zona { border-color: var(--accent); background: rgba(216,154,34,.07); }
.calc-file:focus-visible + .calc-suelta-zona { outline: 2px solid var(--accent); outline-offset: 2px; }
.calc-suelta-zona svg { width: 24px; height: 24px; flex: none; color: var(--accent); }
.calc-suelta-texto { display: flex; flex-direction: column; gap: .12rem; }
.calc-suelta-texto strong { font-size: .98rem; }
.calc-suelta-texto small { font-size: .78rem; color: var(--cream-3); }

.calc-archivo {
  margin: .6rem 0 0; font-size: .85rem; color: var(--cream-2);
  display: flex; align-items: center; gap: .5rem;
}
.calc-archivo.is-cargando::after {
  content: ""; width: 14px; height: 14px; flex: none;
  border: 2px solid rgba(216,154,34,.3); border-top-color: var(--accent);
  border-radius: 50%; animation: calcGira .8s linear infinite;
}
@keyframes calcGira { to { transform: rotate(360deg); } }

.calc-leido {
  margin-top: 1.2rem; padding-top: 1.2rem;
  border-top: 1px solid var(--line-soft);
}
.calc-leido-titulo { margin: 0 0 .9rem; font-size: .9rem; color: var(--cream-2); }
.calc-leido-titulo strong { color: var(--accent); }

.calc-campos {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.calc-campos label {
  display: flex; flex-direction: column; gap: .35rem;
  font-size: .82rem; color: var(--cream-3);
}
.calc-campos em { font-style: normal; opacity: .75; }
.calc-campos input,
.calc-campos select {
  width: 100%; padding: .7rem .85rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--cream);
  font: inherit; font-size: .95rem;
  transition: border-color .25s;
}
.calc-campos input:focus,
.calc-campos select:focus { border-color: var(--accent); outline: none; }

/* --- paso 2: el mapa --------------------------------------------------- */
.calc-buscar { margin-top: 1.1rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.calc-buscar input {
  flex: 1 1 260px; padding: .8rem 1rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--cream);
  font: inherit; font-size: .95rem;
}
.calc-buscar input:focus { border-color: var(--accent); outline: none; }
.calc-buscar .btn { padding: .8rem 1.3rem; font-size: .92rem; }

.calc-mapa-caja { margin-top: 1rem; }
.calc-mapa {
  height: clamp(300px, 52vh, 460px);
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
/* OJO con el selector: Leaflet pone la clase leaflet-container en EL MISMO
   div del mapa, no dentro. ".calc-mapa .leaflet-container" (descendiente)
   no casa con nada; hay que escribirlo pegado. */
.calc-mapa.leaflet-container { font: inherit; }

/* Cruz en vez de la manito de arrastrar. Con la manito el mapa parece algo
   que se mueve; con la cruz, algo donde hay que marcar. Es la diferencia
   entre que el visitante entienda la tarea o no. */
.calc-mapa.leaflet-grab,
.calc-mapa .leaflet-pane,
.calc-mapa .leaflet-tile,
.calc-mapa .leaflet-marker-icon,
.calc-mapa .leaflet-interactive { cursor: crosshair; }
/* Leaflet cambia a "grabbing" mientras se arrastra; tambien se pisa. */
.calc-mapa.leaflet-dragging,
.calc-mapa.leaflet-dragging .leaflet-pane,
.calc-mapa.leaflet-dragging .leaflet-interactive,
.calc-mapa.leaflet-dragging .leaflet-grab { cursor: crosshair; }
/* Los controles y los enlaces conservan su cursor: ahi no se marca nada. */
.calc-mapa .leaflet-control a,
.calc-mapa .leaflet-control button,
.calc-mapa .leaflet-control-attribution a { cursor: pointer; }
.calc-mapa .leaflet-control-attribution {
  background: rgba(255,255,255,.85); color: var(--cream-3); font-size: .68rem;
}
.calc-mapa .leaflet-control-attribution a { color: var(--cream-2); }

.calc-mapa-barra { margin-top: .7rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.calc-mini {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .85rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--cream-2);
  font: inherit; font-size: .82rem; cursor: pointer;
  transition: border-color .2s, color .2s;
}
.calc-mini:hover { border-color: var(--accent); color: var(--accent); }
.calc-mini:disabled { opacity: .4; pointer-events: none; }
.calc-mini svg { width: 14px; height: 14px; }

.calc-medida {
  margin-top: 1rem;
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.calc-medida > div {
  padding: .9rem 1rem; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--line-soft);
}
.calc-medida strong {
  display: block; font-family: var(--display);
  font-size: 1.4rem; color: var(--accent); line-height: 1.15;
}
.calc-medida span { display: block; margin-top: .25rem; font-size: .8rem; color: var(--cream-3); }

/* --- paso 4: el resultado ---------------------------------------------- */
.calc-resultado { margin-top: 1.3rem; display: grid; gap: 1rem; }
.calc-cifras {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.calc-cifra {
  padding: 1.1rem 1.2rem; border-radius: 14px;
  background: var(--bg-2); border: 1px solid var(--line-soft);
}
.calc-cifra.is-destacada {
  background: linear-gradient(135deg, rgba(216,154,34,.16), rgba(216,154,34,.06));
  border-color: rgba(216,154,34,.4);
}
.calc-cifra b {
  display: block; font-family: var(--display); font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); color: var(--accent); line-height: 1.1;
}
.calc-cifra span { display: block; margin-top: .3rem; font-size: .85rem; color: var(--cream-2); }
.calc-cifra small { display: block; margin-top: .35rem; font-size: .76rem; color: var(--cream-3); line-height: 1.4; }

.calc-barra-cobertura {
  margin-top: .2rem; padding: 1rem 1.2rem; border-radius: 14px;
  background: var(--bg-2); border: 1px solid var(--line-soft);
}
.calc-barra-cobertura p { margin: 0 0 .6rem; font-size: .88rem; color: var(--cream-2); }
.calc-barra-pista {
  height: 12px; border-radius: 999px; overflow: hidden;
  background: rgba(11,36,47,.10);
}
.calc-barra-relleno {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transition: width .8s var(--ease-out);
}

.calc-supuestos {
  margin-top: 1.6rem; padding-top: 1.2rem;
  border-top: 1px solid var(--line-soft);
}
.calc-supuestos h3 {
  font-family: var(--mono); font-size: .78rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cream-3);
}
.calc-supuestos ul {
  margin: .8rem 0 0; padding: 0; list-style: none;
  display: grid; gap: .45rem;
}
.calc-supuestos li {
  font-size: .84rem; color: var(--cream-2); line-height: 1.45;
  padding-left: 1rem; position: relative;
}
.calc-supuestos li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.calc-aviso-final {
  margin-top: 1.1rem; padding: .8rem .95rem; border-radius: 10px;
  background: rgba(216,154,34,.08); border: 1px solid rgba(216,154,34,.22);
  font-size: .84rem; line-height: 1.5; color: var(--cream-2);
}
.calc-aviso-final strong { color: var(--accent); }

@media (max-width: 560px) {
  .calc-acciones .btn { width: 100%; justify-content: center; }
}
/* --- grafico de consumo mes a mes ---------------------------------------
   Barras = lo que consume el cliente (azul frio, como la red); linea =
   lo que generaria el sol (dorado). El color cuenta la historia sin
   necesidad de leer la leyenda.
   El SVG lleva viewBox y width:100%, asi que se adapta solo al ancho. */
.calc-grafico {
  margin: .2rem 0 0; padding: 1.2rem 1.2rem 1rem;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255,255,255,.88), rgba(238,242,245,.92));
  border: 1px solid rgba(216,154,34,.22);
}
.calc-grafico figcaption {
  font-family: var(--mono); font-size: .76rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 1rem;
}
.calc-grafico svg { width: 100%; height: auto; display: block; overflow: visible; }
.calc-grafico > p { margin: 1rem 0 0; font-size: .9rem; color: var(--cream-2); line-height: 1.5; }

.g-rejilla { stroke: rgba(11,36,47,.16); stroke-width: 1; }
.g-barra { fill: #3f7fd4; fill-opacity: .78; }
.g-gen { fill: none; stroke: #0a707e; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.g-gen-punto { fill: #0a707e; stroke: #ffffff; stroke-width: 1.4; }

.g-etiq { font-family: var(--mono); font-size: 11px; fill: var(--cream-3); }
.g-etiq-y { text-anchor: end; }
.g-etiq-x { text-anchor: middle; }
.g-etiq-leg { text-anchor: start; fill: var(--cream-2); font-size: 11px; }

@media (max-width: 560px) {
  .calc-grafico { padding: 1rem .8rem .8rem; }
  .g-etiq, .g-etiq-leg { font-size: 13px; }
}

/* Cierre del estudio: lo que viene despues del boton. */
.calc-cierre {
  margin-top: .9rem; padding: .85rem 1rem;
  border-radius: 12px;
  background: rgba(216,154,34,.10);
  border: 1px solid rgba(216,154,34,.28);
  font-size: .9rem; line-height: 1.55; color: var(--cream-2);
  max-width: 640px;
}
.calc-cierre strong { color: var(--accent); }

/* ============================================================================
   Fondo fotografico y color
   La foto de la portada, fija, con un velo CLARO encima — el mismo
   criterio que Contacto y el resto de la web: fondo crema, la imagen
   por detras y el texto en verde oscuro. Antes iba al reves (fondo
   oscuro y texto claro), y la calculadora era la unica pantalla que
   rompia el tono del sitio.

   Va en ::before y no como background del body para poder fijarla sin
   depender de background-attachment:fixed, que en iOS no funciona.
   ========================================================================== */
.calc-body {
  position: relative;
  background: var(--marca-crema);
  /* Tokens invertidos, igual que en .section: lo que en una zona oscura
     es el color del texto, aqui es el del fondo. */
  --cream: var(--marca-azul-mas-osc);
  --cream-2: var(--marca-azul);
  --cream-3: #2C4F63;
  --accent: var(--marca-azul-osc);
  --accent-2: var(--marca-azul);
  /* La tinta de los botones primarios tambien se da la vuelta: el boton
     pasa a ser verde oscuro, asi que lo que va encima tiene que ser
     claro. Sin esto quedaba tinta oscura sobre verde oscuro. */
  --accent-ink: #f2f5f8;
  --line: rgba(11,36,47,.18);
  --line-soft: rgba(11,36,47,.09);
}
.calc-body::before {
  content: ""; position: fixed; inset: 0; z-index: -2;
  background: url("assets/img/hero.webp") center / cover no-repeat;
  filter: saturate(1.1) brightness(1.02) contrast(1.02);
}
.calc-body::after {
  content: ""; position: fixed; inset: 0; z-index: -1;
  /* Velo crema. Denso arriba, donde el titular va suelto sobre la foto;
     de la mitad para abajo mandan las tarjetas, que traen su propio
     fondo, y el velo puede aflojar para que la imagen se vea. */
  background:
    radial-gradient(130% 90% at 18% -10%, rgba(238,242,245,.28), transparent 58%),
    linear-gradient(180deg, rgba(238,242,245,.90) 0%, rgba(238,242,245,.78) 28%, rgba(238,242,245,.68) 60%, rgba(238,242,245,.80) 100%);
}

/* Las tarjetas flotan sobre la foto: translucidas y con desenfoque detras.
   Si el navegador no soporta backdrop-filter, el color de fondo ya es
   bastante opaco para que el texto se lea igual. */
.calc-tarjeta {
  background: linear-gradient(165deg, rgba(255,255,255,.92), rgba(238,242,245,.95));
  border: 1px solid rgba(11,36,47,.12);
  box-shadow: 0 30px 70px -34px rgba(11,36,47,.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Titular con el dorado de la marca, que es lo que da el golpe de color. */
/* Degradado del titular, ahora en verdes oscuros: sobre crema los
   mentas claros de antes desaparecian. */
.calc-head h1 {
  background: linear-gradient(100deg, #1D5670 0%, #164356 45%, #0F2E3C 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  /* Reserva: si background-clip:text falla, el titular se queda dorado
     macizo en vez de invisible. */
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .calc-head h1 { color: var(--accent); -webkit-text-fill-color: currentColor; }
}
/* Estos dos van sueltos sobre la foto, sin tarjeta que los respalde.
   Antes llevaban sombra negra porque el texto era claro; con el fondo
   crema la sombra solo ensuciaba, y el velo de arriba ya es denso. */
.calc-sub { color: var(--cream-2); text-shadow: none; }
.calc-volver { color: var(--cream-2); text-shadow: none; }
.calc-head .kicker { text-shadow: none; }
.calc-head h1 { filter: none; }
.calc-paso { text-shadow: none; }

/* Paso actual: pildora de menta maciza en vez de un circulito apagado.
   La tinta va fijada en verde oscuro y no con --accent-ink, que en esta
   pagina es claro para los botones: sobre la menta quedaba en 1,16:1. */
.calc-paso.is-actual span {
  background: linear-gradient(135deg, #F6C86A, #C08416);
  color: var(--marca-azul-profundo);   /* con --marca-azul-mas-osc: 4,44:1 */
  box-shadow: 0 0 0 4px rgba(216,154,34,.22);
}
.calc-pasos { padding: .2rem 0; }

/* Campos y zonas: un punto mas de contraste sobre el fondo translucido. */
.calc-campos input,
.calc-campos select,
.calc-buscar input,
.calc-suelta-zona,
.calc-mini { background: rgba(255,255,255,.80); }

.calc-medida > div,
.calc-barra-cobertura {
  background: linear-gradient(160deg, rgba(255,255,255,.86), rgba(238,242,245,.9));
  border-color: rgba(11,36,47,.14);
}
.calc-medida strong { color: var(--marca-azul-osc); }

.calc-cifra { background: linear-gradient(160deg, rgba(255,255,255,.86), rgba(238,242,245,.9)); }
.calc-cifra.is-destacada {
  background: linear-gradient(150deg, rgba(216,154,34,.24), rgba(216,154,34,.07));
  border-color: rgba(216,154,34,.5);
  box-shadow: 0 0 40px -18px rgba(216,154,34,.6);
}
/* Las cifras del estudio, en verde oscuro: sobre la tarjeta clara la
   menta se desvanecia. */
.calc-cifra b { color: var(--marca-azul-osc); }

/* El mapa es lo unico que NO se oscurece: hay que ver el techo. */
.calc-mapa { border-color: rgba(216,154,34,.3); }

/* --- candidatos del buscador de direcciones ----------------------------- */
.calc-candidatos {
  margin-top: .9rem; padding: .9rem 1rem;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(238,242,245,.93));
  border: 1px solid rgba(216,154,34,.28);
}
.calc-candidatos-titulo {
  margin: 0 0 .7rem; font-size: .86rem; color: var(--cream-2);
}
.calc-candidatos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.calc-candidato {
  width: 100%; display: flex; align-items: center; gap: .6rem;
  padding: .6rem .75rem; border-radius: 9px;
  border: 1px solid var(--line); background: rgba(255,255,255,.72);
  color: var(--cream-2); font: inherit; font-size: .86rem; text-align: left;
  cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}
.calc-candidato:hover,
.calc-candidato:focus-visible {
  border-color: var(--accent); color: var(--cream);
  background: rgba(216,154,34,.10);
}
.calc-candidato svg { width: 16px; height: 16px; flex: none; color: var(--accent); }

/* --- consumo mes a mes (opcional) --------------------------------------- */
.calc-meses { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line-soft); }
.calc-meses-abrir {
  width: 100%; display: flex; align-items: center; gap: .75rem;
  padding: .7rem .85rem; border-radius: 11px;
  border: 1px dashed rgba(11,36,47,.28); background: rgba(255,255,255,.62);
  color: var(--cream-2); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.calc-meses-abrir:hover { border-color: var(--accent); background: rgba(216,154,34,.07); }
.calc-meses-abrir > svg:first-child { width: 20px; height: 20px; flex: none; color: var(--accent); }
.calc-meses-abrir span { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.calc-meses-abrir strong { font-size: .92rem; color: var(--cream); }
.calc-meses-abrir small { font-size: .78rem; color: var(--cream-3); line-height: 1.4; }
.calc-meses-flecha {
  width: 18px; height: 18px; flex: none; margin-left: auto; color: var(--cream-3);
  transition: transform .25s var(--ease-out);
}
.calc-meses-abrir.is-abierto .calc-meses-flecha { transform: rotate(180deg); }

.calc-meses-caja { margin-top: .9rem; }
/* Doce campos pequeños: cuatro por fila en móvil, seis en pantalla ancha. */
.calc-meses-grid {
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
}
.calc-mes { display: flex; flex-direction: column; gap: .25rem; }
.calc-mes span {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--cream-3);
}
.calc-mes input {
  width: 100%; padding: .5rem .55rem; border-radius: 8px;
  border: 1px solid var(--line); background: rgba(255,255,255,.82); color: var(--cream);
  font: inherit; font-size: .9rem;
  transition: border-color .2s;
}
.calc-mes input:focus { border-color: var(--accent); outline: none; }

.calc-meses-estado { margin: .8rem 0 0; font-size: .82rem; line-height: 1.45; color: var(--cream-3); }
.calc-meses-estado.is-completo { color: var(--accent); }

/* El mes de la factura, destacado: es el dato que ya teníamos. */
.calc-mes.es-base span { color: var(--accent); }
.calc-mes.es-base input { border-color: rgba(216,154,34,.45); }