/**FullCalendar Style**/
.fc .fc-daygrid-day-number {
    width: 1.875rem;
    height: 1.875rem;
    text-align: center;
    text-decoration: none !important;
    border-radius: 50%;
    line-height: 1.875rem;
    padding: 0 !important;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.fc .fc-day-today:not(.fc-popover) .fc-daygrid-day-number {
    background-color: #3874ff !important;
    color: #fff
}

.fc .fc-daygrid-day.fc-day-other {
    background-color: rgb(128, 128, 128,.2);
}

.fc .fc-col-header-cell-cushion {
    text-transform: capitalize;
}

.fc .fc-col-header-cell {
    padding: .1rem .5rem !important
}

/**Secciones dentro de formularios largos**/
/* El .separator del tema es gray-200 (#F1F1F4): sobre la tarjeta blanca queda en
   ~1.1:1, practicamente invisible, asi que los grupos no se leian como grupos.
   Se sube a gray-300 y se le da aire al encabezado, que iba pegado al primer campo. */
form .separator {
    border-bottom-color: var(--bs-gray-300);
}

form h4.fs-6.fw-semibold.text-gray-800 {
    margin-bottom: .75rem !important;
}

/**Portada de modulo: lista de enlaces**/
/* Las columnas se reparten por ancho disponible, no por numero de grupos: en una
   tarjeta angosta sale una sola columna y en una a todo lo ancho (modulos con un
   unico grupo, como Compensacion) salen varias, en vez de una lista larguisima. */
.modulo-inicio-enlaces {
    columns: 15rem auto;
    column-gap: 2rem;
}

    .modulo-inicio-enlaces > a,
    .modulo-inicio-enlaces > .modulo-inicio-pendiente {
        display: flex;
        align-items: center;
        padding: .35rem 0;
        break-inside: avoid;
    }

/**Entradas de menu cuya pagina todavia no esta migrada**/
/* De las 243 entradas de MenuBuilder con Controller+Action, 100 apuntan a paginas
   que aun no existen. asp-page no genera href cuando la pagina no esta, asi que
   se veian como enlaces normales que al pulsarlos no hacian nada. Ahora la vista
   pregunta por PaginasPublicadas y las pinta como texto marcado, no como enlace.

   El sidebar tiene fondo OSCURO (#202B46) y la portada de modulo tarjeta blanca,
   asi que cada contexto lleva su propio par de colores. Medido en vivo: el color
   de enlace del sidebar (#8D98AF sobre #202B46) da 4.84:1, justo por encima del
   4.5:1 de AA, asi que no queda margen para "apagar" mas el texto sin bajar de
   AA. La diferencia la marcan el distintivo, el cursor y la ausencia de hover;
   el texto conserva el color del tema. */
.modulo-inicio-pendiente {
    color: var(--bs-text-gray-500);
}

/* Metronic pinta fondo y color de acento en :hover de .menu-link y le pone
   cursor:pointer con un selector mas especifico que una sola clase (por eso hacen
   falta el selector largo y el !important). Aqui no hay nada que pulsar. */
.menu .menu-item .menu-link.menu-link-pendiente,
.menu .menu-item .menu-link.menu-link-pendiente:hover {
    cursor: default;
    background-color: transparent !important;
}

.menu-link-pendiente .bullet,
.modulo-inicio-pendiente .bullet {
    background-color: var(--bs-gray-500) !important;
}

/* El distintivo. badge-light-warning del tema daba 1.58:1 (#F6C000 sobre #FFF8DD):
   ilegible en los dos fondos. */
.badge-pendiente {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: .325rem;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
}

.menu-link-pendiente .badge-pendiente {
    color: #DCE3F0;
    background-color: rgba(255, 255, 255, .14);
}

.modulo-inicio-pendiente .badge-pendiente {
    color: var(--bs-gray-700);
    background-color: var(--bs-gray-200);
}

/**Barra superior: 11 modulos**/
/* Al pasar la barra a conmutador plano quedaron 11 modulos visibles. Sumados al
   bloque de la derecha (busqueda, notificaciones, usuario) piden ~1290 px, asi que
   en un portatil de 1366 no caben. En vez de dejar que rompan el layout o empujen
   el bloque de la derecha, la tira de modulos se desplaza en horizontal.
   Por debajo de lg Metronic ya la convierte en cajon lateral, asi que solo aplica
   al rango de escritorio. */
@media (min-width: 992px) {
    /* Los 11 modulos pedian ~991 px y solo habia ~919: un deficit del 7%. Se recupera
       apretando el relleno lateral de cada item (8 px x 11 = 88 px), que era el
       espacio mas barato, en vez de recortar la etiqueta.
       Si aun asi no cabe (portatiles estrechos), la tira SE PARTE EN DOS FILAS en
       lugar de desplazarse: asi no se corta ningun modulo ni aparece barra de
       scroll. Por debajo de lg, Metronic ya la convierte en cajon lateral. */
    #kt_app_header_menu {
        flex-wrap: wrap;
        row-gap: .25rem;
    }

        #kt_app_header_menu > .menu-item > .menu-link {
            padding-left: .5rem;
            padding-right: .5rem;
            font-size: .8125rem;
            line-height: 1.15;
            text-align: center;
        }
}

/**Contraste del texto secundario**/
/* Los grises de texto del tema no llegan al 4.5:1 que pide WCAG AA para texto
   normal, y no se usan como decoracion sino en contenido real: etiquetas de campo
   ("Placa", "Kilometraje"), subtitulos de tarjeta y el cuerpo de las tablas.
       --bs-text-gray-500 / --bs-text-muted  #99A1B7  ->  2.58:1   (937 + 273 usos)
       --bs-text-gray-600                    #78829D  ->  3.83:1   (296 usos)
   Se suben al minimo que cumple AA conservando la jerarquia (500 mas claro que
   600 mas claro que 700), en lugar de aplanarlo todo a gray-700:
       #69738C  4.74:1        #5F6982  5.48:1        gray-700 sin tocar  7.27:1
   Solo se tocan las variables de TEXTO: --bs-gray-* (fondos y bordes) siguen igual,
   asi que los separadores y las superficies no cambian. */
[data-bs-theme="light"] {
    --bs-text-gray-500: #69738C;
    --bs-text-muted: #69738C;
    --bs-text-gray-600: #5F6982;
}

/**DataTables — control "Ver _MENU_ reg. por pag."**/
/* Metronic aplica display:block y width:100% a .form-select, asi que el <select>
   ocupaba todo el <label> y partia el texto en tres lineas ("Ver" / select /
   "reg. por pag."). La clase dt-length-fix la inyecta el `dom` de SetDataTables
   en samtec-utils.js. */
.dt-length-fix label {
    display: flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
    margin-bottom: 0;
}

.dt-length-fix select {
    display: inline-block;
    width: auto;
    min-width: 4.5rem;
}

/**Acciones de fila: de <a href="#"> a <button>**/
/* Los botones de accion de las tablas eran <a href="#" onclick="Editar(...)">.
   El onclick no cancelaba el evento, asi que ademas de ejecutar la accion el
   navegador navegaba a "#" y mandaba el scroll al principio: editar la fila 40
   devolvia al usuario arriba. Pasan a <button type="button">.

   .dropdown-item es de Bootstrap y ya contempla <button> (medido: fondo
   transparente, borde 0). .menu-link es de Metronic y solo esperaba <a>/<span>,
   asi que dejaba asomar el aspecto nativo del boton: medido fondo #F0F0F0 y
   borde de 2px, o sea una caja gris donde antes habia una fila plana. */
button.menu-link {
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    border: 0;
    width: 100%;
    text-align: inherit;
}

/**Celdas de acciones de las tablas**/
/* Los botones de editar/borrar son elementos en linea dentro de un <td> estrecho,
   asi que en pantallas angostas se apilaban en vertical y disparaban la altura de
   la fila (se veian 3 registros donde caben 6). Con nowrap se mantienen en una
   sola linea. :has() se aplica solo a celdas que realmente contienen botones. */
.table td:has(> .btn) {
    white-space: nowrap;
}

/**Breadcrumb**/
/* NOTA: el breadcrumb esta comentado en Pages/Shared/Components/Toolbar.cshtml y
   sustituido por el reloj/empresa, asi que estas reglas hoy no aplican a nada.
   Se conservan por si se reactiva la navegacion de migas. Ver docs/UI_UX_AUDIT.md */
.breadcrumb {
    padding: 0;
    background: #D4D4D4;
    list-style: none;
    margin: 1rem 0;
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    overflow-x: auto; /* Prevent overflow on very small screens */
    overflow-y: hidden;
}

    /* Remove unnecessary pseudo-element for separators */
    .breadcrumb > li + li:before {
        content: none;
    }

    /* Use Flexbox for list items */
    .breadcrumb li {
        flex: 0 0 auto; /* Allow items to take their natural width */
    }

        /* Active and completed states */
        .breadcrumb li.active a {
            background-color: var(--bs-warning);
        }

        .breadcrumb li.completed a {
            background-color: var(--bs-success);
        }

        .breadcrumb li.active a:after {
            border-left: 1.5rem solid var(--bs-warning); /* Reduced size for responsiveness */
        }

        .breadcrumb li.completed a:after {
            border-left: 1.5rem solid var(--bs-success);
        }

        /* Anchor styles */
        .breadcrumb li a {
            color: white;
            text-decoration: none;
            padding: 0.5rem 0 0.5rem 2rem; /* Reduced padding for smaller screens */
            position: relative;
            display: block;
            font-size: 1rem; /* Relative font size */
        }

            /* Arrow effect after each item */
            .breadcrumb li a:after {
                content: " ";
                display: block;
                width: 0;
                height: 0;
                border-top: 2rem solid transparent; /* Reduced size for responsiveness */
                border-bottom: 2rem solid transparent;
                border-left: 1.5rem solid var(--bs-secondary-active);
                position: absolute;
                top: 50%;
                transform: translateY(-50%); /* Center vertically */
                left: 100%;
                z-index: 2;
                overscroll-behavior-y:none;
            }

            /* Arrow effect before each item */
            .breadcrumb li a:before {
                content: " ";
                display: block;
                width: 0;
                height: 0;
                border-top: 2rem solid transparent; /* Reduced size */
                border-bottom: 2rem solid transparent;
                border-left: 1.5rem solid white;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                margin-left: 1px;
                left: 100%;
                z-index: 1;
            }

        /* First item padding */
        .breadcrumb li:first-child a {
            padding-left: 1rem; /* Reduced padding */
        }

        /* Hover effect */
        .breadcrumb li a:hover {
            background: var(--bs-primary);
        }

            .breadcrumb li a:hover:after {
                border-left-color: var(--bs-primary);
            }

/* Media query for tablets and smaller screens (max-width: 768px) */
@media (max-width: 768px) {
    .breadcrumb li a {
        padding: 0.4rem 0 0.4rem 1.5rem; /* Further reduce padding */
        font-size: 0.9rem; /* Slightly smaller font */
    }

        .breadcrumb li a:after,
        .breadcrumb li a:before {
            border-top: 1.5rem solid transparent; /* Smaller arrows */
            border-bottom: 1.5rem solid transparent;
            border-left: 1rem solid; /* Adjust size */
        }
}

/* Media query for mobile devices (max-width: 480px) */
@media (max-width: 480px) {
    .breadcrumb {
        flex-direction: column; /* Stack items vertically */
        align-items: flex-start;
    }

        .breadcrumb li {
            width: 100%; /* Full width for each item */
        }

            .breadcrumb li a {
                padding: 0.5rem 1rem; /* Simplified padding */
                font-size: 0.85rem; /* Smaller font for mobile */
            }

                /* Simplify or remove arrows for mobile */
                .breadcrumb li a:after,
                .breadcrumb li a:before {
                    display: none; /* Remove arrows for simplicity */
                }

            /* Add a simple separator for mobile */
            .breadcrumb li + li:before {
                color: #333;
                padding: 0.5rem;
                display: block;
            }

            .breadcrumb li:first-child a {
                padding-left: 1rem;
            }
}