/**
 * assets/css/presupuesto.css — Sussanich Turismo
 * Estilos específicos de presupuesto.php (Paso 8).
 * NO toca tokens.css ni base.css.
 * Usa SOLO tokens CSS de tokens.css. Sin hex hardcodeados. Sin rem.
 * Paso 8 — 2026-05-19
 */

/* ═══════════════════════════════════════════════════════════════════════════
   SECCIÓN 02 — PRESUPUESTO FORM (tabla wishlist + contact form)
   Referencia: 12-Presupuesto/despiece/secciones/02-presupuesto-form.webp
               12-Presupuesto/despiece/elementos/card-presupuesto-item.webp
               12-Presupuesto/despiece/elementos/presupuesto-form.webp
═══════════════════════════════════════════════════════════════════════════ */

.section-presupuesto-form {
    background: var(--color-background);
    padding: var(--space-8) 0 var(--space-9);
}

.pre-subtitulo {
    font-family: var(--font-body);
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-6);
    text-align: left;
}

/* ─── TABLA WISHLIST ─────────────────────────────────────────────────────── */

.pre-tabla-wrapper {
    margin-bottom: var(--space-7);
}

.pre-tabla-vacia {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--color-text-muted);
    text-align: center;
    padding: var(--space-7) var(--space-4);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
}

.pre-tabla {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
}

.pre-tabla th {
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--ls-kicker);
    border-bottom: 2px solid var(--color-border);
    padding: var(--space-2) var(--space-3);
    text-align: left;
}

.pre-tabla th:last-child {
    text-align: right;
}

.pre-tabla td {
    vertical-align: middle;
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border-soft);
    font-size: var(--fs-body-sm);
    color: var(--color-text-primary);
}

.pre-tabla__nombre {
    font-weight: var(--fw-medium);
    min-width: 180px;
}

/* Fila total */
.pre-tabla__fila-total td {
    border-top: 2px solid var(--color-border);
    border-bottom: none;
    font-weight: var(--fw-bold);
    font-size: var(--fs-body);
    padding-top: var(--space-4);
}

.pre-tabla__total-label {
    text-align: right;
}

.pre-tabla__total-valor {
    text-align: right;
    color: var(--color-primary);
    font-size: var(--fs-price);
    white-space: nowrap;
}

/* ─── DATEPICKER ─────────────────────────────────────────────────────────── */

.pre-datepicker {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 130px;
}

.pre-datepicker input[type="date"] {
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    color: var(--color-text-primary);
    background: var(--color-surface-card);
    outline: none;
    cursor: pointer;
}

.pre-datepicker input[type="date"]:focus {
    border-color: var(--color-primary);
}

.pre-datepicker__icon {
    width: 16px;
    height: 16px;
    opacity: 0.5;
}

/* ─── STEPPERS ───────────────────────────────────────────────────────────── */

/* Each pax column is its own <td>; center the stepper inside */
.pre-tabla__pax {
    text-align: center;
    white-space: nowrap;
}

.pre-stepper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-05);
}

.pre-stepper__label {
    font-size: var(--fs-caption);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-kicker);
    font-weight: var(--fw-semibold);
}

.pre-stepper__controls {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.pre-stepper__btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--fs-body);
    color: var(--color-text-secondary);
    padding: 0;
    line-height: 1;
    transition: border-color var(--dur-fast), color var(--dur-fast);
}

.pre-stepper__btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.pre-stepper__value {
    min-width: 20px;
    text-align: center;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text-primary);
}

/* ─── PRECIO Y DELETE ────────────────────────────────────────────────────── */

.pre-tabla__precio {
    text-align: right;
    white-space: nowrap;
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary);
}

.pre-tabla__delete {
    text-align: right;
}

.pre-btn-delete {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-1);
    opacity: 0.7;
    transition: opacity var(--dur-fast);
}

.pre-btn-delete:hover {
    opacity: 1;
}

.pre-btn-delete img {
    width: 18px;
    height: 18px;
    /* El ícono es de color rojo según el despiece */
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM DE CONTACTO DEL PRESUPUESTO
   Mismo patrón que contacto.css pero sin el wrapper .con-form para evitar
   colisiones si se carga contacto.css en otra página.
═══════════════════════════════════════════════════════════════════════════ */

.pre-form {
    max-width: 720px;
    margin: 0 auto;
    padding-top: var(--space-7);
    border-top: 1px solid var(--color-border);
}

.pre-form__grid-2 {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.pre-form__grid-2 .pre-form-group {
    flex: 1 1 0;
    margin-bottom: 0;
}

.pre-form-group {
    margin-bottom: var(--space-4);
}

.pre-form-group label {
    display: block;
    font-family: var(--font-body);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
}

.pre-form-group input[type="text"],
.pre-form-group input[type="email"],
.pre-form-group input[type="tel"],
.pre-form-group textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--color-text-primary);
    background: var(--color-surface-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-sizing: border-box;
    transition: border-color var(--dur-fast) var(--ease-base);
    outline: none;
}

.pre-form-group input:focus,
.pre-form-group textarea:focus {
    border-color: var(--color-primary);
}

.pre-form-group input::placeholder,
.pre-form-group textarea::placeholder {
    color: var(--color-text-muted);
}

.pre-form-group textarea {
    min-height: 120px;
    resize: vertical;
}

/* Radios de canal */
.pre-radios {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.pre-radio {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--color-text-primary);
}

.pre-radio input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.pre-form__actions {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECCIÓN 03 — TE PUEDE INTERESAR
   Referencia: 12-Presupuesto/despiece/secciones/03-te-puede-interesar.webp
═══════════════════════════════════════════════════════════════════════════ */

.section-pre-tpi {
    background: var(--color-background);
    padding: var(--space-8) 0;
}

.pre-tpi__titulo {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: var(--fw-regular);
    color: var(--color-text-primary);
    text-align: center;
    margin: 0 0 var(--space-2);
}

.pre-tpi__subtitulo {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--color-text-secondary);
    text-align: center;
    margin: 0 0 var(--space-7);
    line-height: var(--lh-normal);
}

.pre-tpi__ver-todas {
    text-align: center;
    margin-top: var(--space-6);
}

.btn-outline-dark {
    display: inline-block;
    padding: var(--space-3) var(--space-7);
    background: transparent;
    color: var(--color-text-primary);
    border: 2px solid var(--color-text-primary);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: var(--fs-btn);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-btn);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur-base), color var(--dur-base);
}

.btn-outline-dark:hover {
    background: var(--color-text-primary);
    color: var(--color-text-on-dark);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════════════ */

/* ── O4 fix 2026-06-23: carrito en mobile apilado vertical ───────────────
   ≤768px: ocultar thead, cada <tr> como tarjeta, cada <td> muestra su label
   vía ::before { content: attr(data-label) }. Desktop: tabla horizontal sin cambios.
   Steppers y botón borrar quedan usables apilados. NO toca schema localStorage. */
@media (max-width: 768px) {
    .pre-tabla {
        display: block;
    }
    .pre-tabla thead {
        display: none;
    }
    .pre-tabla tbody {
        display: block;
    }
    .pre-tabla tr {
        display: block;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        margin-bottom: var(--space-4);
        padding: var(--space-3);
        background: var(--color-surface-card);
    }
    .pre-tabla td {
        display: block;
        padding: var(--space-1) 0;
        white-space: normal;
    }
    .pre-tabla td::before {
        content: attr(data-label);
        display: inline-block;
        font-family: var(--font-body);
        font-size: var(--fs-caption);
        font-weight: var(--fw-semibold);
        color: var(--color-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 2px;
        min-width: 80px;
    }
    /* Fila subtotal: mostrar como bloque sin label */
    .pre-tabla__fila-total {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: none;
        border-top: 1px solid var(--color-border);
        border-radius: 0;
        margin-bottom: 0;
        padding: var(--space-2) 0;
        background: transparent;
    }
    .pre-tabla__fila-total td {
        display: inline-block;
        padding: 0;
    }
    .pre-tabla__fila-total td::before {
        display: none;
    }
    /* Stepper en tarjeta mobile */
    .pre-stepper__controls {
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .pre-form__grid-2 {
        flex-direction: column;
        gap: var(--space-4);
    }

    .pre-form {
        padding: var(--space-6) 0 0;
    }

    .pre-steppers {
        gap: var(--space-2);
    }
}

@media (max-width: 480px) {
    .pre-subtitulo {
        font-size: var(--fs-h4);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TANDA 3 — RESUMEN MOBILE (mockup cliente 2026-06-23)
   ≤768px: bloque mobile visible; tabla desktop oculta.
   ≥769px: bloque mobile oculto; tabla desktop visible.
   NO cambia el schema localStorage ni la lógica de precios.
═══════════════════════════════════════════════════════════════════════════ */

/* Por defecto (desktop): ocultar bloque mobile */
.pre-mobile-resumen {
    display: none;
}

@media (max-width: 768px) {
    /* Ocultar tabla desktop y mostrar bloque mobile */
    .pre-tabla-wrapper .pre-tabla,
    .pre-tabla-wrapper thead {
        display: none !important;
    }
    .pre-mobile-resumen {
        display: block;
        margin-bottom: var(--space-6);
    }

    /* ── Encabezado RESUMEN DE RESERVA + TOTAL ── */
    .pre-m-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: var(--space-2);
        margin-bottom: var(--space-4);
        padding-bottom: var(--space-3);
        border-bottom: 2px solid var(--color-border);
    }

    .pre-m-header__titulo {
        font-family: var(--font-body);
        font-size: var(--fs-body-sm);
        font-weight: var(--fw-bold);
        color: var(--color-text-primary);
        letter-spacing: var(--ls-kicker);
        text-transform: uppercase;
    }

    .pre-m-header__total {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 2px;
    }

    .pre-m-total-label {
        font-family: var(--font-body);
        font-size: var(--fs-body-sm);
        font-weight: var(--fw-regular);
        color: var(--color-text-secondary);
    }

    .pre-m-total-sep {
        font-family: var(--font-body);
        font-size: var(--fs-body-sm);
        color: var(--color-text-secondary);
        padding: 0 2px;
    }

    .pre-m-total-monto {
        font-family: var(--font-body);
        font-size: var(--fs-body-sm);
        font-weight: var(--fw-bold);
        color: var(--color-text-primary);
    }

    /* ── Card por ítem ── */
    .pre-m-card {
        background: var(--color-surface-card);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        margin-bottom: var(--space-3);
        padding: var(--space-3);
        box-shadow: var(--shadow-sm);
    }

    .pre-m-card__titulo {
        font-family: var(--font-body);
        font-size: var(--fs-body-sm);
        font-weight: var(--fw-bold);
        color: var(--color-text-primary);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding: var(--space-1) 0;
        line-height: var(--lh-base);
    }

    .pre-m-divider {
        height: 1px;
        background: var(--color-border-soft);
        margin: var(--space-2) 0;
    }

    /* Fila genérica dentro del card */
    .pre-m-card__row {
        display: flex;
        align-items: center;
        padding: var(--space-1) 0;
    }

    /* Fila fecha: ícono + input date */
    .pre-m-card__fecha {
        gap: var(--space-1);
    }

    .pre-m-card__fecha .pre-datepicker__icon {
        flex-shrink: 0;
    }

    .pre-m-card__fecha .pre-date-input {
        padding: var(--space-05) var(--space-1);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        font-family: var(--font-body);
        font-size: var(--fs-caption);
        color: var(--color-text-primary);
        background: var(--color-surface-card);
        outline: none;
        cursor: pointer;
        min-width: 0;
        flex: 1;
        max-width: 160px;
    }

    .pre-m-card__fecha .pre-date-input:focus {
        border-color: var(--color-primary);
    }

    /* Fila steppers inline: A −n+  N −n+  B −n+ */
    .pre-m-card__steppers {
        gap: var(--space-3);
        flex-wrap: nowrap;
    }

    .pre-m-stepper {
        display: inline-flex;
        align-items: center;
        gap: 3px;
    }

    .pre-m-stepper__label {
        font-family: var(--font-body);
        font-size: var(--fs-caption);
        font-weight: var(--fw-bold);
        color: var(--color-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-right: 1px;
    }

    .pre-m-stepper .pre-stepper__btn {
        width: 22px;
        height: 22px;
        font-size: 13px;
    }

    .pre-m-stepper .pre-stepper__value {
        min-width: 16px;
        font-size: var(--fs-caption);
        font-weight: var(--fw-semibold);
    }

    /* Fila importe + borrar */
    .pre-m-card__importe-row {
        justify-content: space-between;
        align-items: center;
    }

    .pre-m-importe {
        display: flex;
        align-items: baseline;
        gap: 0;
    }

    .pre-m-importe__label {
        font-family: var(--font-body);
        font-size: var(--fs-caption);
        font-weight: var(--fw-regular);
        color: var(--color-text-secondary);
        letter-spacing: 0.06em;
    }

    .pre-m-importe__valor {
        font-family: var(--font-body);
        font-size: var(--fs-body-sm);
        font-weight: var(--fw-bold);
        color: var(--color-text-primary);
    }

    .pre-m-card__importe-row .pre-btn-delete img {
        /* Color terracota/naranja para el ícono de borrar */
        filter: invert(45%) sepia(90%) saturate(400%) hue-rotate(0deg) brightness(105%);
    }

    /* ── Compactar el form en mobile ── */
    .pre-form-group {
        margin-bottom: var(--space-3);
    }

    /* Nombre + apellido en 2 columnas en mobile (en desktop ya estaban en 2 col) */
    .pre-form__grid-2 {
        flex-direction: row !important;
        gap: var(--space-2) !important;
    }

    .pre-form__grid-2 .pre-form-group {
        margin-bottom: 0;
    }

    .pre-form-group input[type="text"],
    .pre-form-group input[type="email"],
    .pre-form-group input[type="tel"],
    .pre-form-group textarea {
        padding: var(--space-2) var(--space-3);
        font-size: var(--fs-body-sm);
    }

    .pre-form {
        padding-top: var(--space-5);
    }

    .pre-radios {
        margin-bottom: var(--space-3);
    }
}

/* Viewport muy angosto: apilar nombre+apellido si no caben */
@media (max-width: 359px) {
    .pre-form__grid-2 {
        flex-direction: column !important;
    }
}