/* Bloque calculadora-presupuesto.
 *
 * Dos columnas: a la izquierda lo que la pareja sabe (invitados y menú), a la
 * derecha el resultado. En móvil el resultado va primero para que se vea el
 * número sin tener que bajar.
 */

.bl-calc-cont { max-width: 1400px; margin: 0 auto; padding: var(--bl-aire, 72px) 20px; }

.bl-calc-cabecera { max-width: 760px; margin: 0 auto clamp(30px, 3.4vw, 52px); text-align: center; }
.bl-calc-antetitulo {
    display: inline-block; margin: 0 0 18px; padding: 10px 20px;
    background: var(--bl-antetitulo-fondo, #f3c9d4); color: var(--bl-antetitulo-color, #2c2c2c);
    font-size: clamp(14px, 1.15vw, 17px); letter-spacing: .06em; text-transform: uppercase; line-height: 1.2;
}
.bl-calc-titulo { font-size: clamp(28px, 3.1vw, 46px); line-height: 1.18; font-weight: 300; margin: 0 0 14px; }
.bl-calc-titulo strong { font-weight: 700; }
.bl-calc-texto { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.55; color: #5a5a5a; margin: 0; }

.bl-calc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; align-items: start; }
/* Sin min-width:0 las dos columnas no bajan de su min-content y en una pantalla
   de 320 la herramienta entera se salía por la derecha. */
.bl-calc-panel, .bl-calc-res { min-width: 0; }

/* ── Panel de entradas ─────────────────────────────────────────────── */
.bl-calc-panel { background: #fff; border-radius: 22px; padding: 28px; box-shadow: 0 4px 24px rgba(0,0,0,.06); }
.bl-calc-campo { margin-bottom: 24px; }
.bl-calc-campo:last-child { margin-bottom: 0; }
.bl-calc-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 600; margin-bottom: 10px; }
.bl-calc-valor { font-size: 20px; font-weight: 700; color: #7a2540; white-space: nowrap; }
.bl-calc-ayuda { color: #8a8a8a; font-size: .86em; line-height: 1.45; margin: 8px 0 0; }

.bl-calc-rango { width: 100%; accent-color: #d9899f; height: 26px; }
.bl-calc-num {
    width: 100%; border: 1px solid #e6e0da; border-radius: 12px; padding: 12px 14px;
    font: inherit; font-weight: 600; background: #fdfcfb;
}
.bl-calc-num:focus { outline: 2px solid #f3c9d4; outline-offset: 1px; }

.bl-calc-tipos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bl-calc-tipo {
    min-width: 0;
    border: 1px solid #e6e0da; background: #fff; border-radius: 12px; padding: 12px 6px;
    cursor: pointer; font: inherit; font-size: .9em; line-height: 1.3; text-align: center;
    transition: border-color .18s ease, background .18s ease;
}
.bl-calc-tipo b { display: block; font-size: 1.02em; overflow-wrap: anywhere; }
.bl-calc-tipo span { color: #8a8a8a; font-size: .84em; }
.bl-calc-tipo:hover { border-color: #d9899f; }
.bl-calc-tipo[aria-pressed="true"] { border-color: #b0455f; background: #fdeef1; }

/* ── Resultado ─────────────────────────────────────────────────────── */
.bl-calc-res { background: #fff; border-radius: 22px; padding: 28px; box-shadow: 0 4px 24px rgba(0,0,0,.06); }
/* El total va FIJO al hacer scroll. La lista mide unos 1.600 px y el panel de
   controles 540: en una ventana normal se editaban las doce partidas con la
   estimacion fuera de pantalla, que es justo el numero que se esta mirando.
   Los margenes negativos tapan el padding de la tarjeta para que las filas no
   se vean pasar por los lados al deslizarse por debajo. */
.bl-calc-total {
    text-align: center; border-bottom: 1px solid #f0ece8;
    position: sticky; top: 88px; z-index: 2; background: #fff;
    margin: -28px -28px 0; padding: 22px 28px;
    border-radius: 22px 22px 0 0;
}
.bl-calc-total-lbl { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #a8637a; font-weight: 700; }
.bl-calc-total-num { font-size: clamp(38px, 4.6vw, 58px); font-weight: 700; line-height: 1.05; margin: 6px 0 4px; }
.bl-calc-total-sub { color: #8a8a8a; font-size: .9em; }

/* Barra de comparación con el tope que se ha puesto la pareja. */
.bl-calc-tope { margin-top: 18px; }
.bl-calc-barra { height: 10px; border-radius: 999px; background: #f0ece8; overflow: hidden; }
.bl-calc-barra i { display: block; height: 100%; background: #d9899f; border-radius: 999px; transition: width .3s ease, background .3s ease; }
.bl-calc-barra.pasado i { background: #b0455f; }
.bl-calc-pista { margin: 10px 0 0; font-size: .9em; line-height: 1.45; color: #8a8a8a; }
.bl-calc-tope-txt { margin-top: 8px; font-size: .88em; color: #5a5a5a; text-align: center; }
.bl-calc-tope-txt.pasado { color: #b0455f; font-weight: 600; }

/* Quitar una partida no hacia nada visible: .bl-calc-fila declara display:grid
   y una clase gana al [hidden] de la hoja del navegador, asi que la fila
   marcada como oculta se seguia viendo. Vale para el resto del bloque. */
.bl-calc [hidden] { display: none !important; }

.bl-calc-lista { margin-top: 6px; }
.bl-calc-fila {
    display: grid; grid-template-columns: 1fr auto; gap: 10px 14px;
    align-items: center; padding: 13px 0; border-bottom: 1px solid #f4f1ee;
}
.bl-calc-fila-izq { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.bl-calc-fila-der { display: flex; align-items: center; gap: 4px; }

/* El nombre es un input que no lo parece hasta que se toca: la fila tiene que
   leerse como una lista, no como un formulario. */
input.bl-calc-fila-nombre {
    font: inherit; font-weight: 600; color: inherit;
    border: 1px solid transparent; border-radius: 8px; padding: 5px 8px;
    background: none; width: 100%; min-width: 0; max-width: 100%;
}
input.bl-calc-fila-nombre:hover { border-color: #e6e0da; }
input.bl-calc-fila-nombre:focus { outline: 2px solid #f3c9d4; outline-offset: 1px; background: #fff; }
.bl-calc-fila-nombre.es-fijo { font-weight: 600; padding: 5px 8px; }

.bl-calc-quitar {
    border: 0; background: none; cursor: pointer; padding: 4px 8px; border-radius: 8px;
    font-size: 20px; line-height: 1; color: #c9c2bb;
    opacity: 0; transition: opacity .18s ease, color .18s ease, background .18s ease;
}
.bl-calc-fila:hover .bl-calc-quitar,
.bl-calc-quitar:focus-visible { opacity: 1; }
.bl-calc-quitar:hover { color: #b0455f; background: #fdeef1; }
/* En táctil no hay hover: ahí se ve siempre, en gris muy suave. */
@media (hover: none) { .bl-calc-quitar { opacity: .55; } }

.bl-calc-anadir {
    display: block; width: 100%; margin-top: 14px; padding: 12px;
    border: 1px dashed #ddd5cd; border-radius: 12px; background: none;
    font: inherit; font-weight: 600; color: #8a7f77; cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.bl-calc-anadir:hover { border-color: #d9899f; color: #b0455f; background: #fdf7f9; }
.bl-calc-fila:last-child { border-bottom: 0; }
.bl-calc-fila-nombre { font-weight: 600; }
.bl-calc-fila-pct { color: #a09890; font-weight: 400; font-size: .85em; margin-left: 6px; }
.bl-calc-fila-nota { grid-column: 1 / -1; margin: 2px 0 0; font-size: .85em; line-height: 1.45; color: #8a8a8a; }
.bl-calc-fila-nota a { color: #b0455f; }
.bl-calc-fila-in {
    width: 116px; text-align: right; border: 1px solid transparent; border-radius: 10px;
    padding: 8px 10px; font: inherit; font-weight: 700; background: #faf8f6;
}
.bl-calc-fila-in:hover { border-color: #e6e0da; }
.bl-calc-fila-in:focus { outline: 2px solid #f3c9d4; outline-offset: 1px; background: #fff; }
.bl-calc-fila.tocada .bl-calc-fila-in { background: #fdeef1; }

.bl-calc-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.bl-calc-acciones .boton { flex: 1 1 auto; justify-content: center; }
.bl-calc-legal { margin: 18px 0 0; font-size: .84em; line-height: 1.5; color: #8a8a8a; }
.bl-calc-pie { margin-top: clamp(32px, 3.4vw, 52px); text-align: center; }

/* Solo con dos columnas: por debajo de 1000 px la rejilla es de una sola y
   fijar el panel estorbaria. */
@media (min-width: 1001px) {
    .bl-calc-panel { position: sticky; top: 88px; }
}

@media (max-width: 1000px) {
    /* En una columna va primero lo que se rellena («¿Cuántos vais a ser?») y
       después el resultado. Estaba al revés (order:-1 en los resultados) y en
       el móvil se veían los gastos antes de haber dicho cuántos sois. */
    .bl-calc-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 560px) {
    .bl-calc-cont { padding: var(--bl-aire, 48px) 16px; }
    .bl-calc-panel, .bl-calc-res { padding: 20px; }
    .bl-calc-total { margin: -20px -20px 0; padding: 18px 20px; }
    .bl-calc-fila-in { width: 100px; }
}
/* Por debajo de 480 la fila no cabe en una linea: el nombre se quedaba en
   25px, que no sirve para escribir nada. Se apila, con el importe debajo y a
   la derecha. */
@media (max-width: 480px) {
    .bl-calc-fila { grid-template-columns: 1fr; gap: 4px; }
    .bl-calc-fila-izq { width: 100%; }
    input.bl-calc-fila-nombre { border-color: #efe9e3; }
    .bl-calc-fila-der { justify-content: flex-end; }
    .bl-calc-fila-in { width: 130px; }
    .bl-calc-tipos { grid-template-columns: 1fr; }
    .bl-calc-tipo { display: flex; align-items: baseline; gap: 8px; text-align: left; padding: 10px 12px; }
    .bl-calc-tipo b { display: inline; }
    /* Los botones del sitio llevan nowrap: «Imprimir o guardar en PDF» no cabe
       en una pantalla de 320 y empujaba la página. Aquí sí pueden partirse. */
    .bl-calc-acciones .boton { white-space: normal; flex: 1 1 100%; }
}
/*
 * Hoja de impresión. La monta script.js (montarHoja) al pulsar «Imprimir o
 * guardar en PDF» o al imprimir con Ctrl/Cmd+P, y la quita al acabar: en
 * pantalla nunca se ve, y al imprimir se oculta todo lo demás de la página.
 */
.bl-calc-impresion { display: none; }
@media print {
    @page { margin: 16mm 14mm; }
    /* Fondo blanco en todas las hojas: el html lleva el gris de la web y se
       colaba en la segunda página. */
    html, body.bl-calc-imprimiendo { background: #fff !important; }
    body.bl-calc-imprimiendo > *:not(.bl-calc-impresion) { display: none !important; }
    body.bl-calc-imprimiendo .bl-calc-impresion { display: block; }

    .bl-calc-impresion {
        color: #1c1c1b; font-size: 11pt; line-height: 1.4;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    .bl-calc-impresion .bl-ci-cab {
        display: flex; justify-content: space-between; align-items: center;
        padding-bottom: 8pt; margin-bottom: 14pt; border-bottom: 1.5pt solid #2d4c47;
    }
    .bl-calc-impresion .bl-ci-cab img { height: 26pt; width: auto; }
    .bl-calc-impresion .bl-ci-cab span { font-size: 9pt; color: #666; }
    .bl-calc-impresion h1 { font-size: 20pt; font-weight: 300; line-height: 1.2; margin: 0 0 12pt; padding: 0; position: static; }

    .bl-calc-impresion dl {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 6pt 16pt;
        margin: 0 0 14pt; padding: 8pt 12pt; background: #f4f0e9; border-radius: 6pt;
    }
    .bl-calc-impresion dl div { display: flex; flex-direction: column; }
    .bl-calc-impresion dt { font-size: 8pt; text-transform: uppercase; letter-spacing: .06em; color: #666; }
    .bl-calc-impresion dd { margin: 0; font-weight: 600; }

    .bl-calc-impresion table { width: 100%; border-collapse: collapse; }
    .bl-calc-impresion th {
        text-align: left; font-size: 8pt; text-transform: uppercase; letter-spacing: .06em;
        color: #666; font-weight: 600; border-bottom: 1pt solid #1c1c1b; padding: 0 0 5pt;
    }
    .bl-calc-impresion td { padding: 4pt 0; border-bottom: .5pt solid #ddd; vertical-align: top; }
    .bl-calc-impresion td small { display: block; font-size: 8.5pt; color: #777; }
    .bl-calc-impresion .num { text-align: right; white-space: nowrap; }
    .bl-calc-impresion .pct { width: 40pt; color: #777; }
    .bl-calc-impresion tr { break-inside: avoid; }
    .bl-calc-impresion tfoot td { border-bottom: 0; font-weight: 700; font-size: 13pt; padding-top: 8pt; border-top: 1.5pt solid #1c1c1b; }
    .bl-calc-impresion tfoot tr.sub td { font-size: 10pt; font-weight: 400; color: #555; border-top: 0; padding-top: 2pt; }

    .bl-calc-impresion .tope { margin: 10pt 0 0; padding: 8pt 12pt; border-radius: 6pt; background: #eef6f1; color: #2a7a55; font-weight: 600; }
    .bl-calc-impresion .tope.pasado { background: #fdeef0; color: #b0455f; }

    .bl-calc-impresion .bl-ci-pie { break-inside: avoid; margin-top: 16pt; padding-top: 8pt; border-top: .5pt solid #ddd; font-size: 8pt; color: #888; }
    .bl-calc-impresion .bl-ci-pie p { margin: 0 0 3pt; }
}