/*
 * Estilos propios del proyecto.
 *
 * Se carga después de theme/css/style.css para poder sobreescribirlo sin editar
 * el CSS del tema, que es vendorizado (viene tal cual de demo/assets).
 */

/*
 * Oculta visualmente sin ocultar a lectores de pantalla ni a los buscadores.
 * Tailwind trae .sr-only, pero el CSS compilado del tema la purgó por no usarse.
 * Definición equivalente a la de Tailwind.
 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/*
 * El mensaje del cargador solo existe entre pasos; en la carga inicial va vacío.
 * Se oculta para que no consuma el gap del contenedor y descentre la rueda.
 * No se usa la utilidad empty:hidden de Tailwind porque el CSS compilado del
 * tema la purgó por no aparecer en el demo.
 */
#preloader-message:empty {
    display: none;
}

/*
 * Fila de campos del buscador.
 *
 * No se usan utilidades de Tailwind porque el CSS del tema viene compilado y
 * purgado contra el demo: xl:grid-cols-5 y grid-cols-[...] no existen ahí, así
 * que la fila se quedaba en dos columnas sin que nada lo delatara.
 *
 * En escritorio: cuatro campos de igual ancho y el botón ocupando solo lo suyo,
 * pegado a la derecha.
 */
.search-row {
    display: grid;
    gap: 10px;
    align-items: end;
    grid-template-columns: minmax(0, 1fr);
}

/* Apilado: el botón ocupa el ancho completo, al final. */
.search-row .search-submit .primary-btn {
    width: 100%;
    justify-content: center;
}

/*
 * Tablet: dos columnas para los campos, pero el botón cruza la fila entera y se
 * alinea a la derecha. Sin esto quedaba solo en la primera columna de una
 * tercera fila, es decir abajo a la izquierda.
 */
@media (min-width: 768px) {
    .search-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .search-row .search-submit {
        grid-column: 1 / -1;
        justify-self: end;
    }

    .search-row .search-submit .primary-btn {
        width: auto;
    }
}

/*
 * Escritorio: los cuatro campos en una línea y el botón ocupando solo lo suyo,
 * pegado a la derecha.
 *
 * El corte va en 1200px y no en el 1280 de Tailwind: una ventana de portátil que
 * no esté maximizada se queda justo por debajo de 1280 y caía al reparto de dos
 * columnas.
 */
@media (min-width: 1200px) {
    /*
     * Las dos primeras columnas llevan fecha y hora juntas, así que necesitan más
     * ancho que el tipo de vehículo y el código: con cuatro columnas iguales la
     * fecha se recortaba.
     */
    .search-row {
        grid-template-columns:
            minmax(0, 1.45fr) minmax(0, 1.45fr)
            minmax(0, 1fr) minmax(0, 1fr)
            auto;
    }

    .search-row .search-submit {
        grid-column: auto;
        justify-self: end;
    }
}

/*
 * Cabecera de un campo del buscador: la etiqueta de texto o la casilla que
 * despliega la sucursal de devolución.
 *
 * Ambas se fuerzan a la misma altura porque no la tienen por sí solas: la línea
 * de texto mide unos 17.5px (--text-sm) y la casilla 20px con su borde. Sin esto
 * la columna de la casilla quedaba unos píxeles más baja y los dos selectores no
 * alineaban.
 */
.search-head {
    display: flex;
    align-items: center;
    min-height: 24px;
    margin-bottom: 5px;
}

/*
 * Par de fecha y hora dentro de una columna del buscador.
 *
 * La fecha necesita más espacio que la hora: debe mostrar dd/mm/aaaa completo
 * más el icono del calendario, mientras que la hora es "10:00 AM". Con el
 * reparto al 50/50 que había, la fecha se recortaba.
 */
.search-datetime {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
    .search-datetime {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }
}

/*
 * Utilidades que el sitio usa y el CSS del tema no trae.
 *
 * Tailwind compiló style.css contra el HTML del demo, así que cualquier clase
 * que no aparezca allí simplemente no existe y no da error: el elemento se
 * muestra sin el estilo. Estas son las que necesitan las vistas nuevas.
 */

/* Proporción de las fotos de sucursal (545x300); sin esto object-cover no recorta. */
.aspect-\[545\/300\] {
    aspect-ratio: 545 / 300;
}

/* Casillas y radios en el color de la marca. */
.accent-primary {
    accent-color: var(--color-primary, #154898);
}

.cursor-not-allowed {
    cursor: not-allowed;
}

.items-start {
    align-items: flex-start;
}

/* El selector de idioma va deshabilitado a propósito; no debe verse apagado. */
.disabled\:opacity-100:disabled {
    opacity: 1;
}

/*
 * Color de error de los formularios.
 *
 * El tema no trae ninguno: --color-primary es azul (#154898), así que los
 * mensajes de validación se pintaban del mismo azul que el resto de la interfaz
 * y no se leían como un error. Se define aquí y se aplica al contenedor que
 * genera ActiveForm (.help-block) y al campo marcado (.has-error).
 */
:root {
    --color-error: #B3261E;
}

.dark {
    --color-error: #FF8A80;
}

#reserve-form .help-block {
    color: var(--color-error);
}

#reserve-form .has-error .form-input,
#reserve-form .has-error select,
#reserve-form .has-error textarea {
    border-color: var(--color-error) !important;
}

#reserve-form .has-error label {
    color: var(--color-error);
}

/*
 * Estado deshabilitado del botón de confirmar.
 *
 * El CSS del tema es un bundle precompilado de Tailwind y no trae ninguna
 * utilidad `disabled:`, así que las clases del marcado no existían y el botón
 * deshabilitado se veía idéntico a uno normal.
 *
 * pointer-events:none es deliberado y no cosmético: un botón deshabilitado no
 * despacha eventos de ratón, de modo que el clic nunca llegaría al contenedor
 * que lo escucha para marcar los campos que faltan. Dejándolo transparente al
 * puntero, el clic atraviesa hasta el envoltorio en cualquier navegador.
 */
#reserve-submit:disabled {
    opacity: 0.5;
    pointer-events: none;
}

#reserve-submit-wrap {
    display: inline-flex;
}

#reserve-submit-wrap:has(#reserve-submit:disabled) {
    cursor: not-allowed;
}

/*
 * Formulario de gestión (Mi Reserva): input + botón en una sola fila.
 *
 * No se usan utilidades de Tailwind arbitrarias porque el bundle del tema no las
 * incluye: el grid se definía con clases como grid-cols-[1fr_auto] que no existían
 * en la hoja compilada y el botón quedaba debajo del input.
 */
.manage-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}