/* VERSION TEST 3 */

/* Estilo general para el cuerpo */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background-color: #f2f2f2;
    overflow-x: hidden;
}

/* Empuja el footer al fondo del viewport en páginas con poco contenido, en
   vez de dejarlo pegado justo debajo del contenido con un hueco gris hasta
   el final de la pantalla. */
main {
    flex: 1 0 auto;
}

.header-title {
    white-space: nowrap; /* Evita que el título cambie de línea */
}

/* Lockup de marca (símbolo + "PARTESAPP") -- ver BRAND.md y
   templates/_brand_lockup.html. var(--bs-primary) en vez de #0d6efd a mano:
   es el mismo azul de marca, ya definido por bootstrap.min.css. La
   variante --invert (fondos oscuros/azules, p.ej. la cabecera) pone todo
   el texto en blanco; el símbolo cambia de SVG (azulejo blanco en vez de
   azul) desde el propio partial, no desde aquí. */
.pa-logo {
    display: inline-flex;
    align-items: center;
    gap: .23em;
    text-decoration: none;
}

.pa-logo img {
    display: block;
}

.pa-logo__text {
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: 22px;
    line-height: 1;
    letter-spacing: -.01em;
    color: #10192B;
}

.pa-logo__text span {
    font-weight: 400;
}

.pa-logo__text b {
    font-weight: 800;
    color: var(--bs-primary);
}

.pa-logo--invert .pa-logo__text,
.pa-logo--invert .pa-logo__text b {
    color: #fff;
}

.navbar-collapse {
    display: flex;
    justify-content: flex-end; /* Distribuye los elementos del menú */
    width: 100%; /* Asegura que el menú ocupe todo el ancho disponible */
}

.navbar-nav {
    display: flex;
    flex-direction: column; /* Alinea los elementos verticalmente */
    align-items: flex-end; /* Alinea los elementos hacia la izquierda */
    /* Sin flex-wrap a propósito -- no queremos que el menú de escritorio
       baje a una segunda línea si no cabe, preferimos que ese rango de
       anchos muestre directamente la hamburguesa (ver navbar-expand-xl en
       base.html: con 7 elementos de primer nivel para un transportista y
       cada nav-item en flex-shrink:0 más abajo, hacía falta el margen que
       da el breakpoint xl -- 1200px -- para garantizar que la fila
       horizontal completa siempre entra de sobra, así que nunca hace
       falta partirla). */
    gap: 0.5rem; /* Espacio entre los elementos del menú */
}

.navbar-nav .nav-item {
    flex-shrink: 0; /* Evita que los elementos se reduzcan de tamaño */
}

.navbar-nav .nav-link {
    display: flex;
    align-items: center;
    padding: 0 1rem; /* Ajusta el padding para dar más o menos espacio a cada elemento */
    white-space: nowrap; /* Evita que el texto dentro de los enlaces cambie de línea */
}

.navbar-nav .nav-item:first-child {
    margin-top: 0.5rem; /* Ajusta este valor según la cantidad de espacio que desees */
}

.navbar-nav .nav-item:last-child {
    margin-right: 0; /* Elimina el margen a la derecha del último elemento */
}

#navbarToggleIcon {
    font-size: 1.5rem;
    color: var(--pa-ink-2, #3C4658);
    line-height: 1;
}

.navbar-account-divider {
    border: 0;
    border-top: 1px solid var(--pa-line-soft, #EEF1F6);
    margin: 0.5rem 0;
}

/* Menú móvil colapsado: los desplegables (Datos maestros, Listados,
   Configuración) se expanden como un acordeón dentro de la misma lista
   azul en vez de abrir una tarjeta blanca flotante encima -- y el menú se
   alinea a la izquierda para no dejar media pantalla de azul vacío junto a
   cada enlace. Solo se aplica por debajo del breakpoint de
   navbar-expand-xl (1200px, ver base.html): en escritorio el navbar sigue
   siendo una fila horizontal con los desplegables flotantes de siempre. */
@media (max-width: 1199.98px) {
    /* El propio menú colapsado flota sobre el contenido de la página en vez
       de empujarlo hacia abajo -- mismo motivo que los desplegables: así
       abrir el menú no hace crecer el header ni desplaza el Dashboard/lo
       que haya debajo, que queda tapado detrás mientras el menú está
       abierto. .navbar ancla el posicionamiento absoluto. */
    .navbar {
        position: relative;
    }

    /* Solo en móvil: la fila del logo+hamburguesa necesita todo el ancho
       para que justify-content:between separe el título del botón. Un
       simple w-100 (width:100% !important de Bootstrap) hacía justo esto
       pero SIN estar limitado a móvil -- en escritorio, .container-fluid
       es flex en las dos anchuras, así que ese width:100% competía por la
       fila contra #navbarNav (su hermano flex), y como ambos acaban con
       flex-basis efectivo de "quiero el 100%", el navegador terminaba
       repartiendo el ancho disponible más o menos a medias entre los dos
       -- #navbarNav se quedaba con la mitad del ancho real disponible sin
       importar cuántos elementos tuviera el menú, y por eso bajaba de
       línea aunque sobrara espacio de sobra en la pantalla. flex-grow (no
       width) además respeta el reparto real de flexbox en vez de forzar
       un porcentaje fijo que compite con el hermano. */
    .header-row {
        flex-grow: 1;
    }

    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1040;
        background-color: var(--pa-surface, #fff);
        border-bottom: 1px solid var(--pa-line, #E3E8F0);
        padding: 0.5rem 1rem 1rem;
    }

    .navbar-collapse.justify-content-end {
        justify-content: flex-start !important;
    }

    .navbar-nav {
        align-items: flex-start;
        width: 100%;
    }

    /* Bootstrap trae "position: static" a propósito para los dropdown-menu
       de un navbar (así el propio framework nunca instancia Popper para
       ellos) -- lo forzamos a "absolute" para que el desplegable flote
       sobre el resto del menú en vez de empujarlo hacia abajo. Como no hay
       Popper calculando la posición, el top/left hay que fijarlo a mano. */
    .navbar-nav .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: auto;
        min-width: 230px;
        margin-top: 0.25rem;
        padding: 0.35rem;
        background-color: var(--pa-surface, #fff);
        border: 1px solid var(--pa-line, #E3E8F0);
        border-radius: 8px;
    }

    .navbar-nav .dropdown-item {
        color: var(--pa-ink-2, #3C4658);
        background-color: transparent;
        padding: 0.5rem 0.75rem;
        border-radius: 6px;
    }

    .navbar-nav .dropdown-item:hover,
    .navbar-nav .dropdown-item:focus {
        color: var(--pa-ink, #10192B);
        background-color: var(--pa-line-faint, #F3F6FA);
    }
}

.form-group {
    margin-bottom: 0.2rem;
    display: flex;
    flex-direction: column;
}


.form-group .input-group {
    display: flex;
    align-items: center;
}

.form-group .input-group-append {
    margin-left: 10px;
}

.input-group-append button {
    margin-left: 10px; /* Ajusta este valor según sea necesario */
}

.divider {
    border: 0;
    height: 2px; /* Grosor de la línea */
    background-image: linear-gradient(to right, #0d6efd, #fff); /* Degradado de azul a blanco */
    margin: 20px 0; /* Espaciado superior e inferior */
}

/* El FAB de "volver a inicio" del conductor (#fab-home) se quitó del todo
   (base.html) -- aparecía en páginas que no debía y solo lo ocultaba a
   medias un override en partesapp-driver.css, en vez de no existir. */

/* Estilos para deshabilitar acciones (usado por _pa_pager.html y
   superadmin_carriers.html -- no es solo de FABs pese al comentario
   original). */
.disabled {
    pointer-events: none;
    opacity: 0.8;
}



#error-message-container .alert {
    margin-top: 10px;
    padding: 15px;
    font-size: 16px;
    border-radius: 5px;
}
#error-message-container .alert ul {
    margin: 0;
    padding-left: 20px;
}

/* Espaciado entre botones de acción (editar/eliminar/PDF...) en las tablas
   de listados -- por defecto quedan pegados unos a otros. */
td .btn-sm + .btn-sm,
td .btn-sm + form.d-inline,
td form.d-inline + .btn-sm,
td form.d-inline + form.d-inline {
    margin-left: 6px;
}

.form-group select {
    min-width: 0;
    width: 100%;
}

#id_camion {
    padding: 0.5rem 0.75rem; /* Ajusta el padding para aumentar la altura del campo */
    font-size: 1.25rem; /* Aumenta el tamaño de la fuente para hacer el campo más grande */
    height: auto; /* Asegura que el campo se ajuste al contenido */
    line-height: 1.5; /* Alineación vertical del texto */
    border-radius: 0.25rem; /* Mantén los bordes redondeados */
}



@media (max-width: 480px) {    

    /* Ajustar el tamaño de los iconos dentro de los botones */
    .btn.btn-outline-light i {
        font-size: 1.2rem;      /* Ajuste del tamaño del icono */
    }

    .btn-login .btn-text {
        display: none; /* Oculta el texto */
    }

    /* Ajustar el margen de los botones con la clase ms-2 en pantallas pequeñas */
    .ms-2 {
        margin-left: 0rem;     /* Reducir el margen izquierdo en pantallas pequeñas */
        margin-right: 0rem;     /* Reducir el margen izquierdo en pantallas pequeñas */
    }

    .container, .container-fluid {
        max-width: 100% !important; /* Asegura que el contenedor no exceda el 100% del ancho */
        padding-left: 0.2rem !important;
        padding-right: 0.2rem !important;
    }
    
    .mt-5 {
    margin-top: 1rem !important;
    }

    .navbar-nav {
        flex-direction: column; /* Alinea verticalmente en pantallas pequeñas */
        align-items: flex-start;
    }


}

/* .kpi-icon: sigue viva en importar_exportar.html (fuera del alcance del
   rediseño de partesapp-ui.css). .kpi-grid/.kpi-header quedaron muertas al
   reconstruir home_transportista.html con .pa-kpi-grid/.pa-kpi -- borradas. */
.kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}

/* Indicador persistente de "sin conexión" (ver static/js/base.js). Barra fija
   arriba del todo, por encima de navbar/toasts/FABs, oculta por defecto y
   deslizada hacia dentro solo cuando navigator.onLine es false. */
.connectivity-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    background-color: #dc3545;
    color: #fff;
    text-align: center;
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    transform: translateY(-100%);
    transition: transform 0.25s ease;
}

.connectivity-indicator.is-visible {
    transform: translateY(0);
}

/* Banner "Instalar app" (ver static/js/base.js, evento beforeinstallprompt).
   Android/Chrome no ofrece la instalación de forma visible salvo que se abra
   el menú de tres puntos -- este botón hace lo mismo con un toque, algo que
   importa de verdad para un conductor que solo usa el móvil. */
/* Abajo del todo chocaría con la barra de acción fija de la app del
   conductor (.pa-dbar/.pa-save-foot, siempre visible) -- por defecto (móvil)
   se ancla arriba, debajo de la cabecera; en escritorio, donde no hay ese
   conflicto, se mueve a una tarjeta discreta abajo a la derecha. */
.pa-install-banner {
    position: fixed; left: 0; right: 0; top: 0; z-index: 1400;
    background: var(--pa-surface); color: var(--pa-ink);
    border-bottom: 1px solid var(--pa-line);
    padding: 10px 14px; display: flex; align-items: center; gap: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}
.pa-install-banner__text { flex: 1; font-size: 13.5px; line-height: 1.4; }
.pa-install-banner__btn {
    background: var(--pa-blue); color: #fff; border: 0; border-radius: 6px;
    padding: 8px 14px; font-size: 13.5px; font-weight: 600; white-space: nowrap;
}
.pa-install-banner__close {
    background: none; border: 0; color: var(--pa-muted); font-size: 20px;
    line-height: 1; padding: 0 4px; cursor: pointer;
}
@media (min-width: 768px) {
    .pa-install-banner {
        left: auto; top: auto; right: 20px; bottom: 20px; max-width: 380px;
        border-radius: 10px; border: 1px solid var(--pa-line); border-bottom: 1px solid var(--pa-line);
    }
}