/* ===========================================================================
 * PIEZA: las calculadoras de parentesco y de plazos (dias habiles).
 *
 * NO esta en `css/piezas/` a proposito: el cargador encolaria esta hoja en
 * todas las paginas, y solo hace falta en dos articulos. La encola la pieza
 * (`inc/piezas/calculadoras.php`) cuando la entrada lleva el shortcode.
 *
 * Mismo lenguaje que `calculadora-finiquito.css`: caja blanca con sombra
 * suave, azul de marca solo en LA accion y en el resalte del titulo, cifra
 * grande en tinta. Color solo por tokens de `css/tokens.css`. Selectores con
 * `.single` delante para ganarle al CSS del Personalizador (los dos
 * articulos son `post`, asi que el body ya lleva la clase).
 * ======================================================================== */

.single .dl-calc {
  box-sizing: border-box;
  margin: var(--dl-esp-lg) 0 var(--dl-esp-2xl);
  padding: 22px 24px 24px;
  background: var(--dl-superficie);
  border: 1px solid var(--dl-linea);
  border-radius: 6px;
  /* Sombra mas marcada que la de finiquito (usuario, 2026-09-18: «ponle
     sombreado a la tarjeta»). */
  box-shadow: 0 1px 3px rgba(14, 58, 97, 0.10), 0 14px 36px -10px rgba(14, 58, 97, 0.32);
}

.single .dl-calc *,
.single .dl-calc *::before,
.single .dl-calc *::after {
  box-sizing: border-box;
}

.single .dl-calc,
.single .dl-calc span,
.single .dl-calc label,
.single .dl-calc li {
  text-align: left;
}

.single .dl-calc__cabecera,
.single .dl-calc__cabecera span,
.single .dl-calc__espera,
.single .dl-calc__espera span,
.single .dl-calc__cabecera-resultado,
.single .dl-calc__cabecera-resultado span {
  text-align: center;
}

.single .dl-calc [hidden] {
  display: none !important;
}

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

.single .dl-calc__cabecera {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
}

.single .dl-calc__actualizado {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--dl-azul-100);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--dl-azul-900);
}

.single .dl-calc__titulo {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  color: #2B3238;
  text-align: center;
}

.single .dl-calc__titulo::after {
  content: none;
}

/* «grado de parentesco»: rotulador inclinado, una banda azul translucida detras de la
   mitad baja de las letras, con las puntas torcidas como pasada a mano
   (usuario, 2026-09-18, elegida en el artifact de doce opciones; antes,
   la etiqueta rellena, y antes, el trazo a mano alzada). Sin animacion. */
.single .dl-calc__resalte {
  position: relative;
  z-index: 0;
  display: inline-block;
  white-space: nowrap;
}

.single .dl-calc__resalte::after {
  content: "";
  position: absolute;
  left: -0.1em;
  right: -0.06em;
  bottom: -0.02em;
  height: 0.62em;
  z-index: -1;
  background: rgba(30, 114, 189, 0.22);
  border-radius: 3px 8px 4px 9px;
  transform: skew(-8deg) rotate(-1deg);
}

/* En movil la etiqueta no cabe en la misma linea que «Calcula el» sin
   salirse por la derecha (medido a 360 px el 2026-09-18): va sola en su
   linea, centrada. */
@media (max-width: 480px) {
  .single .dl-calc__resalte {
    display: block;
    width: fit-content;
    margin: 4px auto 0;
  }
  /* En movil el tema alinea los h2 a la izquierda con una regla que gana a
     la de arriba (visto a 360 px el 2026-09-18): el titulo se queda pegado
     a la izquierda con la etiqueta centrada debajo. Aqui si hace falta el
     `!important`. */
  .single .dl-calc__titulo {
    text-align: center !important;
  }
}

/* --- Modos (botones segmentados) ------------------------------------------ */

.single .dl-calc__segmentos {
  display: flex;
  margin: 0 0 18px;
  border: 1px solid var(--dl-linea);
  border-radius: var(--dl-radio);
  overflow: hidden;
}

.single .dl-calc__segmento {
  display: flex; /* para que las dos mitades midan lo mismo aunque una vaya a dos lineas */
  flex: 1 1 0;
  margin: 0;
  min-width: 0;
}

.single .dl-calc__segmento + .dl-calc__segmento {
  border-left: 1px solid var(--dl-linea);
}

.single .dl-calc__segmento input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.single .dl-calc__segmento span {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  padding: 11px 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--dl-tinta-suave);
  cursor: pointer;
  transition: background var(--dl-dur) var(--dl-ease), color var(--dl-dur) var(--dl-ease);
}

.single .dl-calc__segmento input:checked + span {
  background: var(--dl-azul-700);
  color: #fff;
}

.single .dl-calc__segmento input:focus-visible + span {
  outline: 2px solid var(--dl-foco);
  outline-offset: -2px;
}

/* --- Campos ---------------------------------------------------------------- */

.single .dl-calc__intro {
  display: block;
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--dl-tinta-suave);
}

.single .dl-calc__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 18px;
  margin: 0 0 14px;
}

.single .dl-calc__campos--una {
  grid-template-columns: 1fr;
}

.single .dl-calc__campo {
  display: block;
  margin: 0 0 14px;
  min-width: 0;
}

.single .dl-calc__campos .dl-calc__campo {
  margin: 0;
}

.single .dl-calc__etiqueta {
  display: block;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dl-tinta);
}

.single .dl-calc input[type="date"],
.single .dl-calc input[type="number"],
.single .dl-calc input[type="text"],
.single .dl-calc select {
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--dl-linea);
  border-radius: var(--dl-radio);
  background: var(--dl-superficie);
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  color: var(--dl-tinta);
  transition: border-color var(--dl-dur) var(--dl-ease);
}

.single .dl-calc input:focus,
.single .dl-calc select:focus {
  outline: none;
  border-color: var(--dl-azul-700);
  box-shadow: 0 0 0 3px rgba(25, 82, 132, 0.18);
}

.single .dl-calc input::placeholder {
  color: #949CA4;
}

.single .dl-calc__ayuda {
  display: block;
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--dl-tinta-suave);
}

/* El plazo: numero y unidad en la misma fila. */
.single .dl-calc__plazo {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(150px, 2fr);
  gap: 8px;
}

.single .dl-calc__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--dl-tinta);
  cursor: pointer;
}

.single .dl-calc__check input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  flex: 0 0 auto;
  accent-color: var(--dl-azul-700);
}

.single .dl-calc__nota {
  display: block;
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--dl-tinta-suave);
}

.single .dl-calc__sinjs {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  color: var(--dl-tinta-suave);
}

.single .dl-calc__error {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-left: 3px solid #B94A48;
  background: #FBF0F0;
  font-size: 15px;
  line-height: 1.45;
  color: #7A2E2C;
}

/* --- Botones ---------------------------------------------------------------- */

.single .dl-calc__botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}

.single .dl-calc__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  min-height: 46px;
  margin: 0;
  padding: 11px 22px;
  border: 1px solid var(--dl-azul-700);
  border-radius: var(--dl-radio);
  background: var(--dl-azul-700);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: background var(--dl-dur) var(--dl-ease), transform var(--dl-dur) var(--dl-ease);
}

.single .dl-calc__boton:hover,
.single .dl-calc__boton:focus {
  background: #14456F;
  border-color: #14456F;
  color: #fff;
}

.single .dl-calc__boton:focus-visible {
  outline: 2px solid var(--dl-foco);
  outline-offset: 2px;
}

.single .dl-calc__boton:active {
  transform: translateY(1px);
}

.single .dl-calc__boton--otra {
  background: transparent;
  border-color: var(--dl-linea);
  color: var(--dl-tinta);
}

.single .dl-calc__boton--otra:hover,
.single .dl-calc__boton--otra:focus {
  background: var(--dl-papel);
  border-color: #B9C2CB;
  color: var(--dl-tinta);
}

.single .dl-calc__botones--resultado {
  margin-top: 20px;
}

/* --- La espera ---------------------------------------------------------------- */

.single .dl-calc__espera {
  padding: 8px 0 0;
}

.single .dl-calc__espera-titulo {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: var(--dl-tinta);
}

.single .dl-calc__progreso {
  position: relative;
  height: 8px;
  margin: 16px auto 12px;
  max-width: 420px;
  border-radius: 999px;
  background: var(--dl-azul-100);
  overflow: hidden;
}

.single .dl-calc__progreso i {
  position: absolute;
  inset: 0;
  width: 100%;
  background: var(--dl-azul-500);
  transform-origin: left center;
  animation: dl-calc-progreso var(--dl-espera, 4s) linear forwards;
}

@keyframes dl-calc-progreso {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.single .dl-calc__espera-pista {
  display: block;
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--dl-tinta-suave);
}

/* El anuncio de la caja, entre los campos y el boton. */
.single .dl-calc__anuncio {
  margin: 4px 0 14px;
}

.single .dl-calc__anuncio--cuerpo {
  margin: 8px 0 24px;
}

/* --- El resultado -------------------------------------------------------------- */

/* Las tres cuentas de «dias entre dos fechas», en fila. */
.single .dl-calc__cuentas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.single .dl-calc__cuentas li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--dl-linea);
  border-radius: var(--dl-radio);
  background: var(--dl-superficie);
}

.single .dl-calc__cuentas b {
  font-family: var(--dl-display);
  font-size: 30px;
  line-height: 1.1;
  color: var(--dl-tinta);
  font-variant-numeric: tabular-nums;
}

.single .dl-calc__cuentas span {
  font-size: 15px;
  font-weight: 600;
  color: var(--dl-tinta);
}

.single .dl-calc__cuentas i {
  font-style: normal;
  font-size: 13px;
  line-height: 1.4;
  color: var(--dl-tinta-suave);
}


.single .dl-calc__resultado {
  outline: none;
}

.single .dl-calc__cabecera-resultado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 4px 0 20px;
  padding: 18px 16px;
  border-radius: 6px;
  background: var(--dl-papel);
}

.single .dl-calc__cabecera-resultado--parentesco {
  background: var(--dl-azul-100);
  border: 1px solid var(--dl-linea);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.single .dl-calc__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
}

.single .dl-calc__chip {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--dl-linea);
  background: var(--dl-superficie);
  font-size: 13px;
  font-weight: 600;
  color: var(--dl-tinta);
}

.single .dl-calc__chip--consanguinidad {
  border-color: transparent;
  background: var(--dl-azul-700);
  color: #fff;
}

.single .dl-calc__chip--afinidad {
  border-color: transparent;
  background: #6B4A0E;
  color: #fff;
}

/* --- El camino de generaciones ------------------------------------------- */

.single .dl-calc__camino {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 4px;
  padding: 14px 10px;
  border: 1px dashed var(--dl-linea);
  border-radius: 6px;
  background: var(--dl-papel);
}

.single .dl-calc__nodo {
  display: inline-block;
  padding: 7px 12px;
  border: 1px solid var(--dl-linea);
  border-radius: 999px;
  background: var(--dl-superficie);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--dl-tinta);
  text-align: center;
}

.single .dl-calc__nodo--origen,
.single .dl-calc__nodo--destino {
  border-color: var(--dl-azul-700);
  background: var(--dl-azul-700);
  color: #fff;
}

.single .dl-calc__nodo--tronco {
  border-color: var(--dl-azul-500);
  border-style: dashed;
  color: var(--dl-azul-900);
}

.single .dl-calc__flecha {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 34px;
  height: 22px;
  flex: 0 0 auto;
}

.single .dl-calc__flecha i {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--dl-azul-500);
}

.single .dl-calc__flecha i::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--dl-azul-500);
  border-right: 2px solid var(--dl-azul-500);
  transform: translateY(-50%) rotate(45deg);
}

.single .dl-calc__flecha b {
  position: absolute;
  left: 50%;
  top: -12px;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 700;
  color: var(--dl-azul-700);
}

.single .dl-calc__flecha--arriba i::after {
  border-color: var(--dl-azul-500);
}

.single .dl-calc__camino-pie {
  display: block;
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  color: var(--dl-tinta-suave);
}

.single .dl-calc__rotulo {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dl-tinta-suave);
}

.single .dl-calc__grande {
  font-family: var(--dl-display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--dl-tinta);
}

.single .dl-calc__grande--fecha {
  font-size: 30px;
}

.single .dl-calc__sub {
  max-width: 560px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--dl-tinta-suave);
}

.single .dl-calc__bloque {
  margin: 0 0 18px;
}

.single .dl-calc__bloque-titulo {
  display: block;
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--dl-tinta);
}

.single .dl-calc__pasos {
  margin: 0;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--dl-tinta);
}

.single .dl-calc__pasos li {
  margin: 0 0 6px;
  padding: 0;
}

.single .dl-calc__efectos {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.single .dl-calc__efecto {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 12px;
  align-items: start;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--dl-linea);
  border-radius: var(--dl-radio);
  background: var(--dl-superficie);
}

.single .dl-calc__efecto-marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}

.single .dl-calc__efecto--si .dl-calc__efecto-marca {
  background: #E4F3EA;
  color: #1F6B3E;
}

.single .dl-calc__efecto--no .dl-calc__efecto-marca {
  background: #F6E6E6;
  color: #8A3130;
}

.single .dl-calc__efecto--info .dl-calc__efecto-marca {
  background: var(--dl-azul-100);
  color: var(--dl-azul-900);
}

.single .dl-calc__efecto-txt {
  display: block;
  min-width: 0;
}

.single .dl-calc__efecto-txt b {
  display: block;
  margin: 0 0 2px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--dl-tinta);
}

.single .dl-calc__efecto-txt span {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dl-tinta-suave);
}

.single .dl-calc__detalle {
  margin: 10px 0 0;
  font-size: 14px;
}

.single .dl-calc__detalle summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--dl-azul-700);
}

.single .dl-calc__excluidos {
  margin: 8px 0 0;
  padding-left: 20px;
  line-height: 1.5;
  color: var(--dl-tinta);
}

.single .dl-calc__excluidos li {
  margin: 0 0 3px;
}

.single .dl-calc__aviso,
.single .dl-calc__nota-resultado {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-left: 3px solid var(--dl-azul-500);
  background: var(--dl-azul-100);
  font-size: 14px;
  line-height: 1.5;
  color: var(--dl-azul-900);
}

.single .dl-calc__aviso {
  border-left-color: #C98A1C;
  background: #FBF3E3;
  color: #6B4A0E;
}

/* El aviso «claro» del conyuge y la pareja de hecho: mas grande y en azul,
   es la respuesta, no una advertencia. */
.single .dl-calc__aviso--claro {
  border-left-color: var(--dl-azul-700);
  background: var(--dl-azul-100);
  color: var(--dl-azul-900);
  font-size: 15px;
  line-height: 1.55;
}

.single .dl-calc__aviso--claro b {
  display: block;
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--dl-azul-900);
}

@media (max-width: 600px) {
  .single .dl-calc {
    padding: 18px 14px 20px;
  }
  .single .dl-calc__titulo {
    font-size: 21px;
  }
  .single .dl-calc__grande {
    font-size: 32px;
  }
  .single .dl-calc__grande--fecha {
    font-size: 24px;
  }
  .single .dl-calc__efecto {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .single .dl-calc__efecto-marca {
    justify-self: start;
  }
  .single .dl-calc__boton {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .single .dl-calc__progreso i {
    animation: none;
  }
  .single .dl-calc__progreso i {
    transform: none;
  }
}

/* --- El texto plegado («Leer mas»), solo en /calculadora-dias-habiles/ --------
 * Copiado de la calculadora de finiquito (mismas clases, misma logica): el
 * texto de la pagina va dentro de `.dl-plegable`, el JS le pone `--plegado`
 * al arrancar (sin JS se ve entero), se ensena un trozo, se difumina y un
 * enlace lo abre. Los anuncios de dentro se piden al desplegar. */

.single .dl-plegable {
  position: relative;
  margin: 0 0 var(--dl-esp-2xl);
}

.single .dl-plegable--plegado .dl-plegable__cuerpo {
  max-height: 460px;
  overflow: hidden;
}

.single .dl-plegable--plegado .dl-plegable__cuerpo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  height: 70px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85));
  pointer-events: none;
}

.single .dl-plegable__pie {
  display: flex;
  justify-content: center;
  padding: 6px 0 0;
}

.single .dl-plegable__boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dl-azul-500);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

.single .dl-plegable__boton::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.single .dl-plegable__boton:hover,
.single .dl-plegable__boton:focus-visible {
  color: var(--dl-azul-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;
}

.single .dl-plegable__cuerpo > :last-child {
  margin-bottom: 0;
}

/* --- La intro plegada en movil (solo en los articulos) --------------------------
 * `dl_calculadoras_plegar_intro()` envuelve lo que va antes de la caja. La
 * clase `--plegado` la pone el JS solo en pantallas estrechas: aqui el
 * recorte va dentro de la media query para que en PC no cambie nada aunque
 * la clase estuviera. */

.single .dl-calc-intro {
  position: relative;
}

/* El pie lleva `hidden` hasta que el JS decide plegar: sin esto, el
   `display: flex` de abajo le ganaria al atributo y en PC se veria el enlace. */
.single .dl-calc-intro [hidden] {
  display: none !important;
}

.single .dl-calc-intro__pie {
  display: flex;
  justify-content: center;
  margin: 0 0 18px;
}

.single .dl-calc-intro__boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dl-azul-500);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

.single .dl-calc-intro__boton::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

@media (max-width: 600px) {
  .single .dl-calc-intro--plegado .dl-calc-intro__cuerpo {
    max-height: 7.2em; /* unas cuatro lineas del primer parrafo */
    overflow: hidden;
  }
  .single .dl-calc-intro--plegado .dl-calc-intro__cuerpo::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 34px;
    height: 48px;
    background: linear-gradient(to bottom, rgba(248, 248, 248, 0), rgba(248, 248, 248, 0.92));
    pointer-events: none;
  }
}