/* ===========================================================================
 * PIEZA: la calculadora de finiquito (/calculadora-finiquito/).
 *
 * NO esta en `css/piezas/` a proposito: el cargador encolaria esta hoja en
 * todas las paginas del sitio, y solo hace falta en una. La encola la propia
 * pieza (`inc/piezas/calculadora-finiquito.php`) cuando la pagina lleva el
 * shortcode, igual que hace `shortcodes.php` con `shortcodes-su.css`.
 *
 * Color: solo tokens de `css/tokens.css`. El azul de marca va en el boton de
 * accion (es LA accion de la pagina, como el de descarga en /modelos/) y en el
 * numero del paso actual. El resultado es una cifra grande en tinta, no en
 * azul: el total tiene que leerse como un dato, no como un reclamo.
 *
 * Tipografia: la del sitio, sin fuentes web. Los importes en `tabular-nums`
 * para que las columnas de cifras cuadren.
 *
 * Selectores con `.single` delante por lo mismo que en el resto de piezas:
 * el CSS del Personalizador se imprime despues y hay que ganarle en
 * especificidad (la pieza pone la clase `single` en el body de esta pagina).
 * ======================================================================== */

.single .dl-finiquito {
  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 suave para que la caja se despegue del fondo (usuario, 2026-09-18). */
  box-shadow: 0 1px 2px rgba(14, 58, 97, 0.06), 0 10px 30px -12px rgba(14, 58, 97, 0.22);
}

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

/* El tema justifica el texto del contenido: en una herramienta con frases
   cortas eso abre huecos entre palabras. Aqui todo va a la izquierda. */
.single .dl-finiquito,
.single .dl-finiquito span,
.single .dl-finiquito label,
.single .dl-finiquito legend {
  text-align: left;
}

.single .dl-finiquito__cabecera,
.single .dl-finiquito__cabecera span,
.single .dl-finiquito__espera,
.single .dl-finiquito__espera span {
  text-align: center;
}

/* Los pasos y los botones se esconden con el atributo `hidden`. Cualquier
   `display` declarado abajo le ganaria al del navegador, asi que se fija
   aqui con la maxima fuerza: sin esto se ven los tres botones a la vez. */
.single .dl-finiquito [hidden] {
  display: none !important;
}

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

.single .dl-finiquito__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-finiquito__titulo {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  color: #2B3238;
  text-align: center;
}

/* GeneratePress pinta un filete bajo cada h2 del contenido. Este es el titulo
   de una herramienta, no una seccion del articulo: sin filete. */
.single .dl-finiquito__titulo::after {
  content: none;
}

/* «4 pasos»: 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-finiquito__resalte {
  position: relative;
  z-index: 0;
  display: inline-block;
  white-space: nowrap;
}

.single .dl-finiquito__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 va sola en su linea, centrada (2026-09-18). */
@media (max-width: 480px) {
  .single .dl-finiquito__resalte {
    display: block;
    width: fit-content;
    margin: 4px auto 0;
  }
  /* El tema alinea los h2 a la izquierda en movil con mas fuerza: aqui si
     hace falta el `!important` (2026-09-18). */
  .single .dl-finiquito__titulo {
    text-align: center !important;
  }
}

/* --- Los cuatro pasos, arriba --------------------------------------------- */

.single .dl-finiquito__pasos {
  display: flex;
  gap: 6px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.single .dl-finiquito__paso-indice {
  flex: 1;
  display: flex;
  margin: 0;
  padding: 0;
  border-bottom: 3px solid var(--dl-linea);
  color: var(--dl-tinta-suave);
  white-space: nowrap;
}

/* Cada paso es un boton: se puede saltar a el (hacia delante, si lo anterior
   esta relleno). Se viste como texto para que el indice no parezca una botonera. */
.single .dl-finiquito__paso-boton {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 0 8px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.single .dl-finiquito__paso-boton:hover {
  color: var(--dl-tinta);
}

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

.single .dl-finiquito__paso-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--dl-linea);
  font-size: 12px;
  line-height: 1;
}

.single .dl-finiquito__paso-indice--actual {
  color: var(--dl-tinta);
  border-bottom-color: var(--dl-azul-700);
}

.single .dl-finiquito__paso-indice--actual .dl-finiquito__paso-boton {
  cursor: default;
}

.single .dl-finiquito__paso-indice--actual .dl-finiquito__paso-num {
  background: var(--dl-azul-700);
  border-color: var(--dl-azul-700);
  color: #fff;
}

.single .dl-finiquito__paso-indice--hecho {
  border-bottom-color: var(--dl-azul-700);
}

.single .dl-finiquito__paso-indice--hecho .dl-finiquito__paso-num {
  border-color: var(--dl-azul-700);
  color: var(--dl-azul-700);
}

/* --- Cada paso -------------------------------------------------------------- */

.single .dl-finiquito__paso {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.single .dl-finiquito__legend {
  display: block;
  width: 100%;
  margin: 0 0 14px;
  padding: 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--dl-tinta);
}

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

.single .dl-finiquito__campo {
  display: block;
  margin: 0;
  min-width: 0;
}

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

.single .dl-finiquito input[type="date"],
.single .dl-finiquito input[type="number"],
.single .dl-finiquito input[type="text"],
.single .dl-finiquito 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; /* 16 y no menos: iOS hace zoom en campos mas pequenos. */
  line-height: 1.4;
  color: var(--dl-tinta);
  transition: border-color var(--dl-dur) var(--dl-ease);
}

/* Fechas en movil (usuario, 2026-09-18). iOS pinta `type=date` como un
   control propio: sin `appearance:none` ignora el alto y el relleno, y con el
   valor vacio deja el campo en blanco, sin pista. Se fuerza el aspecto de
   campo normal, se garantiza el alto del valor y, solo en iOS, se pinta
   «dd/mm/aaaa» mientras esta vacio (Chrome ya lo hace por su cuenta). */
.single .dl-finiquito input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  min-width: 0;
  background: var(--dl-superficie);
  color: var(--dl-tinta);
}

.single .dl-finiquito input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  min-height: 1.4em;
  line-height: 1.4;
}

.single .dl-finiquito__campo {
  position: relative;
}

@supports (-webkit-touch-callout: none) {
  .single .dl-finiquito__campo:has(input[type="date"]:invalid)::after {
    content: "dd/mm/aaaa";
    position: absolute;
    left: 13px;
    bottom: 13px;
    font-size: 16px;
    color: #949CA4;
    pointer-events: none;
  }
}

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

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

/* El campo del salario con el simbolo del euro pegado a la derecha. */
.single .dl-finiquito__importe {
  position: relative;
  display: block;
}

.single .dl-finiquito__importe input {
  padding-right: 38px;
}

.single .dl-finiquito__unidad {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--dl-tinta-suave);
  pointer-events: none;
}

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

/* --- Botones segmentados (al mes / al ano, 2 pagas / prorrateadas) ---------- */

.single .dl-finiquito__segmentos {
  display: flex;
  border: 1px solid var(--dl-linea);
  border-radius: var(--dl-radio);
  overflow: hidden;
  min-height: 46px;
}

.single .dl-finiquito__segmento {
  flex: 1;
  position: relative;
  display: flex;
  margin: 0;
  cursor: pointer;
}

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

.single .dl-finiquito__segmento input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.single .dl-finiquito__segmento span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  font-size: 15px;
  color: var(--dl-tinta);
  transition: background var(--dl-dur) var(--dl-ease);
}

.single .dl-finiquito__segmento input:checked + span {
  background: var(--dl-azul-100);
  font-weight: 600;
}

.single .dl-finiquito__segmento input:focus-visible + span {
  box-shadow: inset 0 0 0 2px var(--dl-foco);
}

/* --- Las tarjetas del paso 1 ---------------------------------------------- */

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

.single .dl-finiquito__opcion {
  position: relative;
  display: block;
  margin: 0;
  padding: 12px 14px 12px 40px;
  border: 1px solid var(--dl-linea);
  border-radius: var(--dl-radio);
  cursor: pointer;
  transition: border-color var(--dl-dur) var(--dl-ease), background var(--dl-dur) var(--dl-ease);
}

.single .dl-finiquito__opcion:hover {
  border-color: #B9C2CB;
}

.single .dl-finiquito__opcion input {
  position: absolute;
  left: 14px;
  top: 15px;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--dl-azul-700);
}

.single .dl-finiquito__opcion:has(input:checked) {
  border-color: var(--dl-azul-700);
  background: var(--dl-azul-100);
}

.single .dl-finiquito__opcion:has(input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(25, 82, 132, 0.18);
}

.single .dl-finiquito__opcion-titulo {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--dl-tinta);
}

.single .dl-finiquito__opcion-ayuda {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--dl-tinta-suave);
}

.single .dl-finiquito__otro {
  margin: 12px 0 0;
  padding: 12px 14px;
  background: var(--dl-papel);
  border-radius: var(--dl-radio);
  font-size: 14px;
  line-height: 1.5;
}

.single .dl-finiquito__otro a {
  font-weight: 600;
}

.single .dl-finiquito__preaviso {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--dl-linea);
}

/* --- Error y botones -------------------------------------------------------- */

.single .dl-finiquito__error {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-left: 3px solid #B4453A;
  background: #FBF1EF;
  font-size: 14px;
  color: #6E2B24;
}

.single .dl-finiquito__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
}

.single .dl-finiquito__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  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; /* GeneratePress pone los botones en mayusculas. */
  letter-spacing: 0;
  cursor: pointer;
  transition: background var(--dl-dur) var(--dl-ease), transform var(--dl-dur) var(--dl-ease);
}

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

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

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

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

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

/* Botones centrados (usuario, 2026-09-18). El principal va a la derecha del
   secundario, con un ancho minimo para que se vea como LA accion. */
.single .dl-finiquito__form .dl-finiquito__botones {
  justify-content: center;
  margin-top: 14px;
}

.single .dl-finiquito__boton--siguiente,
.single .dl-finiquito__boton--calcular {
  min-width: 220px;
}

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

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

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

.single .dl-finiquito__cabecera-resultado {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 0 0 18px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--dl-linea);
}

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

.single .dl-finiquito__total {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--dl-tinta);
  font-variant-numeric: tabular-nums;
}

.single .dl-finiquito__total-nota {
  font-size: 14px;
  color: var(--dl-tinta-suave);
}

.single .dl-finiquito__resumen {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dl-tinta-suave);
}

.single .dl-finiquito__resumen > :first-child {
  font-weight: 600;
  color: var(--dl-tinta);
}

.single .dl-finiquito__desglose {
  display: flex;
  flex-direction: column;
  margin: 0 0 18px;
  border-top: 1px solid var(--dl-linea);
}

.single .dl-finiquito__fila {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--dl-linea);
}

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

.single .dl-finiquito__fila-importe {
  font-size: 17px;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
  color: var(--dl-tinta);
  font-variant-numeric: tabular-nums;
}

.single .dl-finiquito__fila-formula {
  grid-column: 1 / -1;
  font-size: 13px;
  line-height: 1.5;
  color: var(--dl-tinta-suave);
}

.single .dl-finiquito__fila--cero .dl-finiquito__fila-importe {
  color: var(--dl-tinta-suave);
  font-weight: 500;
}

.single .dl-finiquito__fila--resta .dl-finiquito__fila-importe {
  color: #8A3A31;
}

.single .dl-finiquito__aviso {
  margin: 0 0 10px;
  padding: 11px 14px;
  background: var(--dl-azul-100);
  border-radius: var(--dl-radio);
  font-size: 14px;
  line-height: 1.55;
  color: var(--dl-tinta);
}

.single .dl-finiquito__aviso--destacado {
  border-left: 3px solid var(--dl-azul-700);
}

.single .dl-finiquito__aviso--fina {
  background: transparent;
  padding: 0;
  color: var(--dl-tinta-suave);
  font-size: 13px;
}

.single .dl-finiquito__botones--resultado {
  justify-content: center;
  margin-top: 16px;
}

/* «Descargar en PDF»: el boton principal del resultado, con icono. Abre el
   dialogo de impresion, que en todos los navegadores permite guardar en PDF
   (el CSS de impresion deja solo el resultado). */
.single .dl-finiquito__boton--pdf {
  gap: 9px;
  min-width: 220px;
}

.single .dl-finiquito__boton--pdf svg {
  flex: none;
  transition: transform var(--dl-dur) var(--dl-ease);
}

.single .dl-finiquito__boton--pdf:hover svg,
.single .dl-finiquito__boton--pdf:focus svg {
  transform: translateY(2px);
}

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

@media (max-width: 700px) {
  .single .dl-finiquito {
    margin: var(--dl-esp-md) 0 var(--dl-esp-xl);
    padding: 16px 14px 18px;
  }

  .single .dl-finiquito__titulo {
    font-size: 21px;
  }

  /* En movil el indice no cabe con texto: solo los numeros, y la palabra la
     lleva la leyenda del paso. */
  .single .dl-finiquito__paso-boton {
    font-size: 0;
    gap: 0;
    justify-content: center;
  }

  .single .dl-finiquito__paso-num {
    font-size: 12px;
  }

  .single .dl-finiquito__legend {
    font-size: 17px;
  }

  .single .dl-finiquito__opciones,
  .single .dl-finiquito__campos {
    grid-template-columns: 1fr;
  }

  .single .dl-finiquito__total {
    font-size: 34px;
  }

  .single .dl-finiquito__boton {
    flex: 1 1 auto;
  }

  .single .dl-finiquito__anuncio--1,
  .single .dl-finiquito__anuncio--espera {
    margin-left: -14px;
    margin-right: -14px;
  }
}

/* --- Impresion: solo el resultado ------------------------------------------- */

@media print {
  .single .dl-finiquito {
    border: 0;
    padding: 0;
  }

  .single .dl-finiquito__pasos,
  .single .dl-finiquito__form,
  .single .dl-finiquito__botones--resultado {
    display: none !important;
  }

  /* Con un resultado en pantalla, al papel va solo el resultado: ni cabecera,
     ni menu, ni anuncios, ni el articulo. Sin resultado se imprime la pagina
     normal, que es lo que se espera de Ctrl+P sobre un articulo. */
  .single:has(.dl-finiquito--calculado) .site-header,
  .single:has(.dl-finiquito--calculado) .site-footer,
  .single:has(.dl-finiquito--calculado) .sidebar,
  .single:has(.dl-finiquito--calculado) .dl-migas,
  .single:has(.dl-finiquito--calculado) .dl-anuncio,
  .single:has(.dl-finiquito--calculado) .entry-content > :not(.dl-finiquito) {
    display: none !important;
  }
}

/* ===========================================================================
 * Segunda version (2026-09-18, tarde): calculadora arriba del todo, barra de
 * proporcion en el resultado, boton del ejemplo, huecos de anuncio y los dos
 * bloques del texto (indice de anclas y las tres claves).
 * ======================================================================== */

/* --- La barra de proporcion --------------------------------------------------
 * Cuatro azules del mismo tono, del mas oscuro al mas claro, en el orden en
 * que salen los conceptos. Sin rojo ni verde: no hay «bueno» ni «malo». */

.single .dl-finiquito__barra {
  display: flex;
  height: 14px;
  margin: 0 0 8px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--dl-linea);
}

.single .dl-finiquito__tramo {
  display: block;
  height: 100%;
  min-width: 2px;
}

.single .dl-finiquito__tramo + .dl-finiquito__tramo {
  box-shadow: inset 2px 0 0 #fff;
}

.single .dl-finiquito__tramo--salario-mes   { background: var(--dl-azul-900); }
.single .dl-finiquito__tramo--vacaciones    { background: var(--dl-azul-700); }
.single .dl-finiquito__tramo--pagas-extra   { background: var(--dl-azul-500); }
.single .dl-finiquito__tramo--indemnizacion { background: #8DBBE3; }

.single .dl-finiquito__leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--dl-tinta-suave);
}

.single .dl-finiquito__leyenda-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.single .dl-finiquito__leyenda-item b {
  color: var(--dl-tinta);
  font-variant-numeric: tabular-nums;
}

.single .dl-finiquito__punto {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* --- Los huecos de anuncio de esta pagina ----------------------------------- */

.single .dl-finiquito__anuncio {
  margin: 0 0 var(--dl-esp-lg);
}

/* El primero va dentro de la caja, entre el paso y los botones. Los dos
   huecos de dentro de la caja (este y el de la espera) se salen del relleno
   lateral para ocupar el ancho entero: el creativo de escritorio mas ancho es
   de 900 px y la caja mide 913 por dentro; con el relleno de 24 px a cada
   lado quedaban 865 y el banner salia cortado (usuario, 2026-09-18). */
.single .dl-finiquito__anuncio--1 {
  margin: 8px -24px 0;
}

.single .dl-finiquito__anuncio--espera {
  margin-left: -24px;
  margin-right: -24px;
  width: auto;
}

/* --- El texto plegado («Leer mas») ------------------------------------------
 * Todo el texto de la pagina va dentro de `.dl-plegable`. El JS le pone
 * `--plegado` al arrancar (sin JS se ve entero, que es lo que tiene que ver
 * el rastreador y quien no lo ejecute): se ensena un trozo, se difumina y un
 * boton lo abre. Se cierra solo desde la altura, sin `display:none`, para
 * que el contenido siga en el arbol y con su tamano. */

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

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

/* El degradado es corto y suave: solo insinua que el texto sigue. Un velo
   blanco de 180 px se notaba demasiado (decision del usuario, 2026-09-18). */
.single .dl-plegable--plegado .dl-plegable__cuerpo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px; /* la altura del pie con el enlace */
  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; /* centrado (usuario, 2026-09-18) */
  padding: 6px 0 0;
}

/* «Leer mas» como texto, no como boton: un enlace normal del sitio. */
.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;
}

/* La caja de fuentes es lo ultimo del plegable: sin margen extra debajo. */
.single .dl-plegable__cuerpo > :last-child {
  margin-bottom: 0;
}

/* --- Las tres claves -------------------------------------------------------- */

.single .dl-claves {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 0 0 var(--dl-esp-xl);
}

.single .dl-clave {
  padding: 16px 18px;
  border-top: 3px solid var(--dl-azul-700);
  background: var(--dl-papel);
  border-radius: 0 0 var(--dl-radio) var(--dl-radio);
}

.single .dl-clave p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  text-align: left;
}

.single .dl-clave__titulo {
  margin: 0 0 6px !important;
  font-size: 16px;
  font-weight: 700;
  color: var(--dl-tinta);
}

/* Los H2 con ancla: que el salto no los deje pegados al menu fijo. */
.single .entry-content h2[id] {
  scroll-margin-top: 80px;
}

@media (max-width: 700px) {
  .single .dl-claves {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* --- La pantalla de «Calculando» ---------------------------------------------
 * Barra de unos segundos (la duracion la pone PHP en `--dl-espera`) y un
 * anuncio debajo, como en el puente de descarga. Centrado, sin caja: es un
 * estado de la propia calculadora, no otro bloque. */

.single .dl-finiquito__espera {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 0 4px;
}

.single .dl-finiquito__espera-titulo {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--dl-tinta);
  margin: 0 0 16px;
}

.single .dl-finiquito__progreso {
  width: 340px;
  max-width: 100%;
  height: 5px;
  margin: 0 0 12px;
  background: var(--dl-linea);
  overflow: hidden;
}

.single .dl-finiquito__progreso i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--dl-azul-700);
  animation: dl-finiquito-avanza var(--dl-espera, 5s) linear forwards;
}

@keyframes dl-finiquito-avanza {
  from { width: 0; }
  to   { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .single .dl-finiquito__progreso i {
    width: 100%;
    animation: none;
  }
}

.single .dl-finiquito__espera-pista {
  display: block;
  max-width: 520px;
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dl-tinta-suave);
}

/* El anuncio de la espera lleva su rotulo, que estas unidades no lo traen:
   el mismo que el del puente (10 px, pegado al hueco), y sin el margen de
   32 px que `.dl-anuncio` trae para el cuerpo de los articulos. */
/* Solo arriba y abajo: los margenes laterales negativos (ancho completo) los
   pone el bloque de mas arriba y su media query de movil. */
.single .dl-finiquito__anuncio--espera {
  margin-top: 0;
  margin-bottom: 0;
}

.single .dl-finiquito__anuncio--espera::before {
  content: "Publicidad";
  display: block;
  margin: 0;
  font: 600 10px/20px var(--dl-texto);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dl-tinta-suave);
}

.single .dl-finiquito__anuncio--espera .dl-anuncio {
  margin: 0;
}