/* ==========================================================================
   PAGINA PROPIA DE CADA CALCULADORA - REITOR
   --------------------------------------------------------------------------
   Las paginas /calculadoras/<slug>.html las escribe generar-seo.py.

   El formulario que llevan dentro es el MISMO panel que vive en el banco de
   herramientas de index.html, recortado de ahi. Por eso conservan la clase
   .calculators-hub: js/calculators.js se engancha a ese contenedor y todo su
   CSS (paneles, campos, resultados) sigue aplicando sin tocar nada.

   Lo unico que hay que corregir es que ahi el hub es una seccion de portada
   a pantalla completa, y aqui es un bloque dentro de un articulo. Eso, mas el
   texto que rodea a la herramienta, es lo que hay en este archivo.
   ========================================================================== */

:root {
  --calc-navy: #0b2347;
  --calc-navy-2: #12335f;
  --calc-lime: #8ccb32;
  --calc-surface: #f4f7fa;
  --calc-muted: #65758b;
  --calc-border: #dfe6ee;
  --calc-shadow: 0 14px 36px rgba(11, 35, 71, 0.1);
}

body.pagina-calculadora {
  background: var(--calc-surface);
}

/* ---------------------------------------------------------- Estructura */

.calculadora-main {
  /* 88px es el alto de la cabecera fija del sitio */
  padding: calc(88px + 1.5rem) 1.5rem 4rem;
}

.calculadora-shell {
  max-width: 1040px;
  margin: 0 auto;
}

/* --------------------------------------------------------------- Migas */

.calculadora-migas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  color: var(--calc-muted);
  font-size: 0.82rem;
}

.calculadora-migas a {
  color: var(--calc-muted);
  text-decoration: none;
}

.calculadora-migas a:hover {
  color: var(--calc-navy);
  text-decoration: underline;
}

.calculadora-migas span[aria-hidden] {
  opacity: 0.5;
}

.calculadora-migas-actual {
  color: var(--calc-navy);
  font-weight: 600;
}

/* ------------------------------------------------------------ Cabecera */

.calculadora-cabecera {
  margin-bottom: 1.5rem;
}

.calculadora-kicker {
  display: inline-block;
  margin-bottom: 0.6rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgba(140, 203, 50, 0.16);
  color: #4f7a12;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.calculadora-cabecera h1 {
  margin: 0 0 0.7rem;
  color: var(--calc-navy);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.2;
}

.calculadora-entradilla {
  margin: 0 0 0.9rem;
  max-width: 68ch;
  color: #3d4f66;
  font-size: 1.02rem;
  line-height: 1.65;
}

/* ------------------------------------------------- El hub, ya sin portada */

/* En index.html el hub es una seccion a pantalla completa con degradado y
   circulos decorativos. Dentro de esta pagina tiene que comportarse como un
   bloque mas: sin relleno de seccion, sin fondo propio y sin adornos. */
.pagina-calculadora .calculators-hub {
  padding: 0;
  background: none;
  overflow: visible;
}

.pagina-calculadora .calculators-hub::before,
.pagina-calculadora .calculators-hub::after {
  display: none;
}

.pagina-calculadora .calculators-shell {
  max-width: 100%;
}

/* Con una sola herramienta el panel no se oculta nunca: no hay pestanas que
   lo activen, asi que no puede depender de la clase .active para verse. */
.pagina-calculadora .calculator-panel {
  display: block;
}

/* --------------------------------------------- Las otras herramientas */

.calculadora-otras {
  margin-top: 1.75rem;
}

.calculadora-otras h2 {
  margin: 0 0 0.8rem;
  color: var(--calc-navy);
  font-size: 1.05rem;
}

.calculadora-otras-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.calculadora-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--calc-border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--calc-navy);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.22s ease, background 0.22s ease;
}

.calculadora-chip:hover {
  border-color: var(--calc-lime);
  background: rgba(140, 203, 50, 0.1);
}

.calculadora-chip i {
  color: var(--calc-lime);
}

/* ----------------------------------------------------------- El texto */

.calculadora-texto {
  margin-top: 2.5rem;
  padding: 2rem;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: var(--calc-shadow);
}

.calculadora-texto h2 {
  margin: 2rem 0 0.9rem;
  color: var(--calc-navy);
  font-size: 1.3rem;
}

.calculadora-texto h2:first-child {
  margin-top: 0;
}

.calculadora-texto p {
  margin: 0 0 1rem;
  max-width: 72ch;
  color: #3d4f66;
  font-size: 0.98rem;
  line-height: 1.7;
}

.calculadora-puntos {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.calculadora-puntos li {
  position: relative;
  padding: 0.4rem 0 0.4rem 1.7rem;
  color: #3d4f66;
  font-size: 0.95rem;
  line-height: 1.6;
}

.calculadora-puntos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--calc-lime);
}

/* ------------------------------------------------ Preguntas frecuentes */

.calculadora-faq {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.calculadora-pregunta {
  border: 1px solid var(--calc-border);
  border-radius: 14px;
  background: #fbfcfe;
  overflow: hidden;
}

/* Es un <details>: se abre y cierra sin JavaScript, y su contenido esta en
   el HTML aunque este plegado, que es lo que necesita el buscador. */
.calculadora-pregunta > summary {
  padding: 0.95rem 1.2rem;
  color: var(--calc-navy);
  font-size: 0.96rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.calculadora-pregunta > summary::-webkit-details-marker {
  display: none;
}

.calculadora-pregunta > summary::after {
  content: "+";
  float: right;
  color: var(--calc-lime);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}

.calculadora-pregunta[open] > summary::after {
  content: "\2212";
}

.calculadora-pregunta > div {
  padding: 0 1.2rem 1.1rem;
}

.calculadora-pregunta p {
  margin: 0;
  font-size: 0.93rem;
}

/* ------------------------------------------------- Base legal y aviso */

.calculadora-legal {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--calc-border);
}

.calculadora-legal p {
  margin: 0 0 0.6rem;
  color: var(--calc-muted);
  font-size: 0.83rem;
  line-height: 1.6;
}

.calculadora-legal strong {
  color: var(--calc-navy);
}

/* ------------------------------------------------ Articulos que amplian */

.calculadora-articulos {
  margin-top: 2.5rem;
}

.calculadora-articulos h2 {
  margin: 0 0 1.1rem;
  color: var(--calc-navy);
  font-size: 1.35rem;
}

.calculadora-articulos-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.calculadora-articulo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--calc-border);
  border-radius: 16px;
  background: #ffffff;
  text-decoration: none;
  transition: border-color 0.22s ease, transform 0.22s ease,
    box-shadow 0.22s ease;
}

.calculadora-articulo:hover {
  border-color: var(--calc-lime);
  transform: translateY(-3px);
  box-shadow: var(--calc-shadow);
}

.calculadora-articulo h3 {
  margin: 0;
  color: var(--calc-navy);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.calculadora-articulo p {
  margin: 0;
  color: var(--calc-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* ------------------------------------------------------------- Movil */

@media (max-width: 900px) {
  .calculadora-main {
    padding: calc(72px + 1rem) 1rem 3rem;
  }

  .calculadora-texto {
    padding: 1.4rem 1.25rem;
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .calculadora-chip,
  .calculadora-articulo {
    transition: none;
  }

  .calculadora-articulo:hover {
    transform: none;
  }
}

/* ------------------------------------------------ Nota de desambiguacion */

/* Dos calculadoras de este banco se confunden entre si porque la DGII llama
   "Retenciones" a lo que aqui es el ISR de personas fisicas. Esta nota va
   sobre el formulario, no debajo: tiene que leerse antes de usar la que no
   era. Se pinta desde el campo verTambien de js/calculadoras.js. */

.calculadora-vertambien {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  margin: 0 0 1.1rem;
  padding: 0.85rem 1rem;
  max-width: 68ch;
  border-left: 3px solid var(--calc-lime);
  border-radius: 0 10px 10px 0;
  background: rgba(140, 203, 50, 0.1);
  color: #3d4f66;
  font-size: 0.94rem;
  line-height: 1.55;
}

.calculadora-vertambien i {
  flex: 0 0 auto;
  margin-top: 0.28em;
  color: #4f7a12;
}

.calculadora-vertambien a {
  color: var(--calc-navy);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.calculadora-vertambien a:hover,
.calculadora-vertambien a:focus-visible {
  color: #4f7a12;
}

/* ------------------------------------------- Aclaracion dentro del panel */

/* Ancho completo bajo la rejilla de campos: dentro de una celda estiraba la
   fila. Hoy solo la usa el ISR, para avisar de que la casilla de la TSS es
   la razon de que su cifra no coincida con la de la DGII. */

.calculator-hint {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  margin: 0.9rem 0 0;
  color: #5a6b80;
  font-size: 0.86rem;
  line-height: 1.5;
}

.calculator-hint i {
  flex: 0 0 auto;
  margin-top: 0.2em;
  color: #7d8fa5;
}

@media (max-width: 600px) {
  .calculadora-vertambien {
    font-size: 0.9rem;
    padding: 0.75rem 0.85rem;
  }
}