/* PAGINA PRESUPUESTO */
.presupuesto-contenedor {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    min-height: 100vh;
    background-color: #1a1a1a;
    padding: 80px;
    gap: 60px;
}

/* COLUMNA IZQUIERDA */
.presupuesto-izquierda {
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
}

.presupuesto-ciudades {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--marca-blanco);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.presupuesto-titulo {
    font-family: 'Outfit', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
}

.presupuesto-subtitulo {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--marca-blanco);
}

.presupuesto-texto {
    font-family: DM Sans, sans-serif;
    font-size: 1rem;
    color: #aaaaaa;
    line-height: 1.7;
}

.presupuesto-precio {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.presupuesto-precio .precio-desde {
    font-size: 0.85rem;
    color: #aaaaaa;
}

.presupuesto-precio .precio-cantidad {
    font-size: 3rem;
    font-weight: 800;
    color: var(--marca-blanco);
}

.presupuesto-precio .precio-dia {
    font-size: 0.85rem;
    color: #aaaaaa;
}

/* COLUMNA DERECHA */
.presupuesto-derecha {
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px;
}

.formulario-titulo {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--marca-blanco);
    margin-bottom: 8px;
}

.formulario-subtitulo {
    font-family: DM Sans, sans-serif;
    font-size: 0.95rem;
    color: #aaaaaa;
    margin-bottom: 32px;
    line-height: 1.6;
}

/* FORMULARIO */
.formulario {
    background-color: #2d2d2d;
    border-radius: 12px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 700px;
    justify-content: space-around;
}

.formulario-titulo {
    text-align: center;
}

.formulario-subtitulo {
    text-align: center;
}

.campo-formulario {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.campo-formulario label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #aaaaaa;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.campo-formulario input,
.campo-formulario select {
    background-color: #2d2d2d;
    border: 1px solid #3d3d3d;
    border-radius: 8px;
    padding: 14px 16px;
    color: #ffffff;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s ease;
}

.campo-formulario input:focus,
.campo-formulario select:focus {
    border-color: var(--marca-rojo);
}

.campo-formulario input::placeholder {
    color: #666666;
}

.campo-formulario select option {
    background-color: #2d2d2d;
}

.campos-fechas {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* INPUT DATE */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.5;
    cursor: pointer;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* CHECKBOX */
/* Las casillas de consentimiento se estilan en global.css: las comparten
   esta pagina y el formulario de la ficha de coche, que no carga esta
   hoja. Estaban aqui cuando solo existia el formulario de presupuesto. */

/* BOTON */
.btn-formulario {
    width: 100%;
    padding: 16px;
    font-size: 1rem;
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-formulario:hover {
    background-color: #e07a45;
    transform: translateY(-2px);
}

.input-error {
    border-color: #ff4444 !important;
}

.error-campo {
    font-size: 0.8rem;
    color: #ff4444;
    margin-top: 4px;
}

#presupuesto-resultado {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    display: none;
}

#presupuesto-resultado.resultado-exito {
    display: block;
    background-color: rgba(75, 181, 67, 0.15);
    color: #4bb543;
}

#presupuesto-resultado.resultado-error {
    display: block;
    background-color: rgba(255, 107, 107, 0.15);
    color: #ff6b6b;
}

/* FLATPICKR - TEMA OSCURO PRESUPUESTO */
.flatpickr-calendar {
    background: #1e1e1e !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
span.flatpickr-weekday {
    background: #1e1e1e !important;
    color: #aaaaaa !important;
}
.flatpickr-day {
    color: #dddddd !important;
    border-radius: 6px !important;
}
.flatpickr-day:hover:not(.flatpickr-disabled) {
    background: rgba(233, 33, 35,0.2) !important;
}
.flatpickr-day.selected {
    background: var(--marca-rojo) !important;
    border-color: var(--marca-rojo) !important;
    color: #fff !important;
}
.flatpickr-day.flatpickr-disabled {
    color: #555 !important;
    text-decoration: line-through !important;
    background: rgba(255,68,68,0.15) !important;
}
.flatpickr-day.today {
    border-color: var(--marca-rojo) !important;
}
.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    fill: #aaaaaa !important;
}
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
    fill: var(--marca-rojo) !important;
}

@media (max-width: 1024px) {
    .presupuesto-contenedor {
        flex-direction: column;
        padding: 100px 20px 40px;
        gap: 60px;
        align-items: center;
    }

    .presupuesto-izquierda {
        width: 100%;
        text-align: center;
        gap: 16px;
    }

    .presupuesto-precio {
        justify-content: center;
    }

    .presupuesto-ciudades {
        font-size: 0.75rem;
    }

    .presupuesto-titulo {
        font-size: 2rem;
    }

    .presupuesto-subtitulo {
        font-size: 1.5rem;
    }

    .presupuesto-texto {
        font-size: 0.9rem;
    }

    .presupuesto-precio .precio-cantidad {
        font-size: 2.5rem;
    }

    .presupuesto-derecha {
        width: 100%;
        max-width: 500px;
        padding: 0 10px;
    }

    .formulario-titulo {
        font-size: 1.5rem;
    }

    .formulario-subtitulo {
        font-size: 0.85rem;
        margin-bottom: 20px;
    }

    .formulario {
        padding: 24px 20px;
        min-height: auto;
        gap: 16px;
    }

    .campo-formulario input,
    .campo-formulario select {
        padding: 12px 14px;
        /* 16px como minimo: por debajo, Safari en iOS hace zoom al enfocar.
           Ademas 44px de alto para que el campo sea comodo de tocar. */
        font-size: 1rem;
        min-height: 44px;
    }

    .btn-formulario {
        padding: 14px;
    }
}

/* ─── MOVIL: 768px (R-08) ──────────────────────────────────────────────
   Hasta 768px la cabecera es position:absolute y se superpone, por eso el
   contenedor lleva 100px de padding arriba. A partir de aqui la cabecera es
   position:relative y ocupa su propio espacio: esos 100px se convertian en
   aire muerto entre la cabecera y el titulo. */
@media (max-width: 768px) {
    .presupuesto-contenedor {
        padding: 32px 20px 40px;
        gap: 40px;
    }
}

/* ─── TELEFONO ESTANDAR Y PEQUENO: 480px (R-04) ────────────────────────
   Antes de esto el unico corte por debajo de escritorio estaba en 768px, asi
   que un iPhone SE de 320px recibia EXACTAMENTE la misma tipografia que un
   iPad de 768px: titular de 32px y precio de 40px. Aqui se reduce la escala
   tipografica y el margen lateral.
   NO se toca el font-size de los campos del formulario: deben seguir en 16px
   o Safari en iOS hace zoom al enfocarlos (R-02). */
@media (max-width: 480px) {
    .presupuesto-contenedor {
        padding: 28px 16px 32px;
    }

    .presupuesto-titulo {
        font-size: 1.625rem;
        line-height: 1.2;
    }

    .presupuesto-subtitulo {
        font-size: 1.25rem;
    }

    .presupuesto-texto {
        font-size: 0.875rem;
    }

    .presupuesto-precio .precio-cantidad {
        font-size: 2rem;
    }

    .formulario-titulo {
        font-size: 1.25rem;
    }

    .formulario {
        padding: 20px 16px;
    }

    .presupuesto-derecha {
        padding: 0;
    }
}

/* ─── TELEFONO EN APAISADO (R-05) ──────────────────────────────────────
   Con 390px de alto util no sobra ni un pixel vertical: se recorta el aire
   pero no la altura de los campos ni de los botones (siguen en 44px). */
@media (max-width: 1024px) and (max-height: 500px) {
    .presupuesto-contenedor {
        padding: 20px 20px 28px;
        gap: 24px;
    }

    .presupuesto-titulo {
        font-size: 1.5rem;
        line-height: 1.2;
    }

    .presupuesto-subtitulo {
        font-size: 1.125rem;
    }

    .formulario {
        padding: 20px 16px;
        gap: 12px;
    }
}