/* Estilos generales de los helpers de html/ (layout.php y sus traits) y utilidades comunes a todos
   los proyectos. Lo carga putHead de layout.php, después de Bootstrap. Lo propio de cada proyecto va
   en su /css/proyecto.css, que carga headProyecto después de este. */

/* Las tablas van con el interlineado del navegador y no con el 1.5 del body de Bootstrap.
   El sistema se dibujó cuando las páginas caían en quirks mode, donde las tablas no heredan el
   line-height: quedaban filas de una línea sin aire de más, y así entran 3 o 4 registros más en
   pantalla. 'normal' es exactamente el valor que les daba el navegador en ese modo, no una
   aproximación. En el texto corrido el 1.5 se mantiene, que es donde sirve. */
table {
    line-height: normal;
}

/* Los botones de las tablas van sin el interlineado 1.5 de .btn: Bootstrap se lo declara al propio
   .btn, así que la regla de arriba no los alcanza y quedan como el elemento más alto de la celda
   (con el padding de table-sm, un botón de ícono pasa de 21px a 27px y estira toda la fila). */
table .btn {
    line-height: 1;
}

@media screen and (max-width: 720px) {
    input.cel {
        min-width: 160px;
    }
    select.cel{
        min-width: 160px;
    }
}

/* Para Chrome, Safari, Edge y Opera */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Para Firefox */
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.alias {
    cursor: alias;
}

.all-scroll {
    cursor: all-scroll;
}

.auto {
    cursor: auto;
}

.cell {
    cursor: cell;
}

.context-menu {
    cursor: context-menu;
}

.col-resize {
    cursor: col-resize;
}

.copy {
    cursor: copy;
}

.crosshair {
    cursor: crosshair;
}

.default {
    cursor: default;
}

.e-resize {
    cursor: e-resize;
}

.ew-resize {
    cursor: ew-resize;
}

.grab {
    cursor: -webkit-grab;
    cursor: grab;
}

.grabbing {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

.help {
    cursor: help;
}

.move {
    cursor: move;
}

.n-resize {
    cursor: n-resize;
}

.ne-resize {
    cursor: ne-resize;
}

.nesw-resize {
    cursor: nesw-resize;
}

.ns-resize {
    cursor: ns-resize;
}

.nw-resize {
    cursor: nw-resize;
}

.nwse-resize {
    cursor: nwse-resize;
}

.no-drop {
    cursor: no-drop;
}

.none {
    cursor: none;
}

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

.pointer {
    cursor: pointer;
}

.progress {
    cursor: progress;
}

.row-resize {
    cursor: row-resize;
}

.s-resize {
    cursor: s-resize;
}

.se-resize {
    cursor: se-resize;
}

.sw-resize {
    cursor: sw-resize;
}

.text {
    cursor: text;
}

.url {
    cursor: url(myBall.cur), auto;
}

.w-resize {
    cursor: w-resize;
}

.wait {
    cursor: wait;
}

.zoom-in {
    cursor: zoom-in;
}

.zoom-out {
    cursor: zoom-out;
}

.display-7 {
    font-size: 1.25rem;
}

.display-9 {
    font-size: 0.75rem;
}

.loader {
    animation: rotate 1s infinite;
    height: 50px;
    width: 50px;
}

.loader:before,
.loader:after {
    border-radius: 50%;
    content: "";
    display: block;
    height: 20px;
    width: 20px;
}

.loader:before {
    animation: ball1 1s infinite;
    background-color: #A5D7E8;
    box-shadow: 30px 0 0 #576CBC;
    margin-bottom: 10px;
}

.loader:after {
    animation: ball2 1s infinite;
    background-color: #576CBC;
    box-shadow: 30px 0 0 #A5D7E8;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg) scale(0.8)
    }

    50% {
        transform: rotate(360deg) scale(1.2)
    }

    100% {
        transform: rotate(720deg) scale(0.8)
    }
}

@keyframes ball1 {
    0% {
        box-shadow: 30px 0 0 #576CBC;
    }

    50% {
        box-shadow: 0 0 0 #576CBC;
        margin-bottom: 0;
        transform: translate(15px, 15px);
    }

    100% {
        box-shadow: 30px 0 0 #576CBC;
        margin-bottom: 10px;
    }
}

@keyframes ball2 {
    0% {
        box-shadow: 30px 0 0 #A5D7E8;
    }

    50% {
        box-shadow: 0 0 0 #A5D7E8;
        margin-top: -20px;
        transform: translate(15px, 15px);
    }

    100% {
        box-shadow: 30px 0 0 #A5D7E8;
        margin-top: 0;
    }
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-thumb {
    background-color: #666;
    /* border-radius: 5px; */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #333;
}

::-webkit-scrollbar-track {
    background-color: #f0f0f0;
}

.bg-primary-subtle-hover:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.15); /* Sutil variante del color primary */
}

.bg-body-secondary-hover:hover {
    background-color: rgba(var(--bs-secondary), 0.15); /* Sutil variante del color primary */
}

.img-hover-container:hover .download-button {
    display: block !important;
}

.cardBorderBello {
    border-left-width: 5px;
    border-radius: 0.75rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
}

.loading-bar-wrap {
    height: 3px;
    background: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
}

.loading-bar-inner {
    height: 100%;
    width: 40%;
    background: #0d6efd;
    border-radius: 3px;
    animation: loadingSlide 1.2s ease-in-out infinite;
}

@keyframes loadingSlide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}