/* Calculadora de intereses de demora. Se carga después de estilo.css y reutiliza sus variables. */

.calc-hero{padding:48px 0 52px}
@media(min-width:960px){.calc-hero{padding:64px 0 64px}}
.calc-intro{position:relative;max-width:780px}
.calc-intro h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.calc-intro .sub{margin-top:18px}

/* rejilla formulario / resultado */
.calc{position:relative;display:grid;gap:24px;margin-top:34px;align-items:start}
@media(min-width:960px){.calc{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:28px}}
.calc-form{padding:28px}
@media(max-width:520px){.calc-form{padding:22px 16px}}
.calc-form input[type=date]{min-height:52px;font-variant-numeric:tabular-nums}

/* cada factura */
.calc-facturas{display:grid;gap:16px;margin-bottom:16px}
.factura{position:relative;margin:0;padding:18px 18px 8px;border:1px solid var(--linea);border-radius:var(--r-m);background:var(--papel)}
.factura legend{padding:0 8px;margin-left:-8px;font-family:var(--serif);font-size:1.15rem;font-weight:500;color:var(--tinta)}
.factura .campo{margin-bottom:14px}
.factura .campo input{background:var(--blanco)}
.factura > .ayuda{font-size:.84rem;color:var(--gris);margin:-4px 0 12px}
.campo-doble{display:grid;gap:0 14px}
@media(min-width:560px){.campo-doble{grid-template-columns:1fr 1fr}}
.opcional{font-weight:400;color:var(--gris)}
.quitar{position:absolute;top:-12px;right:12px;padding:4px 12px;font:500 .84rem var(--sans);color:var(--no);background:var(--blanco);border:1px solid var(--linea-2);border-radius:999px;cursor:pointer}
.quitar:hover{border-color:var(--no)}
.quitar[hidden]{display:none}
.casilla{display:inline-flex;align-items:center;gap:10px;font-size:.94rem;color:var(--texto);cursor:pointer;margin-bottom:6px;min-height:32px}
.casilla input{width:18px;height:18px;accent-color:var(--tinta);margin:0}
.nota-venc{margin:0 0 8px;font-size:.88rem;color:var(--ok);font-weight:500}
.nota-venc:empty{display:none}

.btn-sec{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;font:600 .94rem var(--sans);color:var(--tinta);background:var(--blanco);border:1px solid var(--linea-2);border-radius:999px;cursor:pointer;transition:border-color .2s,background-color .2s}
.btn-sec:hover{border-color:var(--tinta-2);background:var(--papel)}
.btn-sec[hidden]{display:none}
#calc-anadir{margin-bottom:20px}
.calc-privado{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--gris);margin:14px 0 0}
.calc-privado svg{width:18px;height:18px;flex:none;margin-top:2px;fill:none;stroke:var(--ambar-osc);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* resultado */
.calc-resultado{background:var(--tinta);color:#dfe5ef;border-radius:var(--r-l);padding:30px 28px;box-shadow:var(--sombra-alta);scroll-margin-top:84px}
@media(max-width:520px){.calc-resultado{padding:24px 18px}}
.calc-resultado .etiqueta{color:var(--ambar-claro)}
.calc-resultado strong{color:#fff}
.calc-vacio-texto{font-family:var(--serif);font-size:1.45rem;line-height:1.3;color:#fff;max-width:30ch;margin:0}
.calc-total{font-family:var(--serif);font-size:clamp(2.6rem,6vw,3.6rem);font-weight:500;letter-spacing:-.02em;line-height:1;color:#fff;margin:0 0 22px;font-variant-numeric:tabular-nums}
.calc-suma{margin:0 0 18px;border-top:1px solid rgba(255,255,255,.14)}
.calc-suma div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.calc-suma dt{color:#c4cddc}
.calc-suma dd{margin:0;color:#fff;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.calc-avisos{margin:0 0 18px;padding:12px 14px 12px 32px;background:rgba(232,163,61,.14);border-left:3px solid var(--ambar);border-radius:var(--r-s);font-size:.9rem;color:#f4e3c4}
.calc-avisos li+li{margin-top:6px}
.calc-avisos[hidden]{display:none}
.calc-vacio .calc-avisos{margin-top:18px}

.calc-detalle{border:0;margin:0 0 18px}
.calc-detalle summary{padding:8px 0;font-size:1.05rem;color:#fff}
.calc-detalle summary::after{width:26px;height:26px;background-color:rgba(255,255,255,.95)}
.calc-detalle summary:hover{color:var(--ambar-claro)}
.calc-detalle summary:hover::after{background-color:#fff}

.tabla-tramos{width:100%;border-collapse:collapse;font-size:.9rem;font-variant-numeric:tabular-nums;margin:6px 0 14px}
.tabla-tramos caption{text-align:left;padding:4px 0 8px;font-size:.88rem;color:#c4cddc}
.tabla-tramos th,.tabla-tramos td{padding:8px 6px;text-align:left;border-bottom:1px solid rgba(255,255,255,.12);vertical-align:top}
.tabla-tramos thead th{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#9fb0c8}
.tabla-tramos .num{text-align:right;white-space:nowrap}
.tabla-tramos .nw{white-space:nowrap}
.tabla-tramos small{display:block;font-size:.74rem;color:#9fb0c8}
.tabla-tramos tfoot th,.tabla-tramos tfoot td{font-weight:600;color:#fff;border-bottom:0}
.calc-resultado .tabla-tramos th:first-child,.calc-resultado .tabla-tramos td:first-child{padding-left:0}
.calc-resultado .tabla-tramos .num:last-child{padding-right:0}

.calc-texto{background:var(--blanco);color:var(--texto);border-radius:var(--r-m);padding:20px 20px 16px;margin:0 0 18px}
.calc-h{font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ambar-osc);margin:0 0 10px;line-height:1.3}
#r-parrafo{font-size:.95rem;line-height:1.6;margin:0 0 14px;color:#2a3242}
.calc-botones{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.calc-texto .nota{margin:0;font-size:.84rem}

.calc-cta p{font-size:.95rem;color:#dfe5ef;margin:0 0 16px}
.calc-cta .btn{width:100%}

@media(max-width:520px){.tabla-tramos{font-size:.82rem}.tabla-tramos th,.tabla-tramos td{padding:7px 4px}.tabla-ejemplo th,.tabla-ejemplo td{padding:9px 8px}}
@media(max-width:480px){.cabecera .solo-ancho{display:none}}

/* hero: el aviso ocupa todo el ancho */
.calc-hero .aviso{margin-top:28px}

/* cómo se calcula */
.calc-pasos{margin:0 0 1.4em;padding-left:1.3em;max-width:64ch}
.calc-pasos li{margin-bottom:.6em;padding-left:.3em}
.calc-pasos li::marker{font-family:var(--serif);font-style:italic;color:var(--ambar-osc);font-weight:600}
.calc-h3{font-family:var(--serif);font-size:1.5rem;font-weight:500;margin:1.6em 0 .4em}
.rejilla-cambio > *,.calc > *{min-width:0}
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabla-ejemplo{max-width:640px;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-m);border-collapse:separate;border-spacing:0;overflow:hidden}
.tabla-ejemplo th,.tabla-ejemplo td{border-bottom:1px solid var(--linea);padding:10px 14px}
.tabla-ejemplo thead th{color:var(--gris);background:var(--papel)}
.tabla-ejemplo small{color:var(--gris)}
.tabla-ejemplo tfoot th,.tabla-ejemplo tfoot td{color:var(--tinta);border-bottom:0}
.tabla-ejemplo tfoot tr:first-child th,.tabla-ejemplo tfoot tr:first-child td{border-bottom:1px solid var(--linea)}
.tabla-ejemplo tfoot tr:last-child{background:rgba(232,163,61,.12)}

/* tabla de tipos */
.calc-tipos-intro{max-width:70ch;color:#343c4d}
.tabla-tipos{width:100%;min-width:560px;border-collapse:separate;border-spacing:0;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-l);overflow:hidden;font-size:.94rem;font-variant-numeric:tabular-nums;box-shadow:var(--sombra)}
.tabla-tipos caption{caption-side:top;text-align:left;padding:0 2px 12px;font-size:.9rem;color:var(--gris)}
.tabla-tipos th,.tabla-tipos td{padding:11px 18px;text-align:left;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla-tipos tbody tr:last-child th,.tabla-tipos tbody tr:last-child td{border-bottom:0}
.tabla-tipos thead th{background:var(--papel);font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.tabla-tipos tbody th{font-weight:600;color:var(--tinta)}
.tabla-tipos small{display:block;font-size:.78rem;font-weight:400;color:var(--gris)}
.tabla-tipos .num{text-align:right;white-space:nowrap}
.tabla-tipos .tipo{font-family:var(--serif);font-size:1.12rem;font-weight:600;color:var(--tinta)}
.tabla-tipos tbody tr:first-child{background:rgba(232,163,61,.1)}
.calc-tipos-nota{margin-top:16px;max-width:70ch}
@media(max-width:600px){
  .tabla-tipos{min-width:0;font-size:.86rem}
  .tabla-tipos th,.tabla-tipos td{padding:10px 8px}
  .tabla-tipos th:nth-child(2),.tabla-tipos td:nth-child(2){display:none}
  .tabla-tipos .t-largo{display:none}
  .tabla-tipos .tipo{font-size:1rem}
  .tabla-tipos td a{white-space:nowrap;font-size:.8rem}
}

/* cierre */
.calc-final-caja{display:grid;gap:24px;align-items:center;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r-l);padding:34px;box-shadow:var(--sombra-alta)}
@media(min-width:900px){.calc-final-caja{grid-template-columns:1fr auto;gap:48px;padding:44px 48px}}
@media(max-width:520px){.calc-final-caja{padding:24px 18px}}
.calc-final-caja h2{font-size:clamp(1.8rem,3.6vw,2.5rem)}
.calc-final-caja p:not(.etiqueta){color:var(--gris);max-width:62ch;margin:0}

@media print{
  .cabecera,.calc-form,.calc-cta,.calc-botones,.calc-final,.pie-pagina,#tipos,#dudas,#como-se-calcula,.calc-intro .sub,.ceja{display:none!important}
  .calc{display:block}
  .calc-resultado{background:#fff;color:#000;box-shadow:none;position:static}
  .calc-resultado *{color:#000!important}
}