/* Global styles for the AssetsManagement application */


/* 
    loader
*/
.loader {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    background-color: #f1f1f2;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* 
    blazorise picker workaround for https://github.com/Megabit/Blazorise/issues/4917
*/
.flatpickr-calendar.static {
    top: unset !important;
}



/*
    Assista customization
*/

:root {
    --assista-primary-color: rgb(177, 4, 14);
    --assista-primary-selected-color: #795252;
    --assista-secondary-color: #0d6efd;
    --assista-secondary-focus-color: #73a8f5;
    --assista-tertiary-color: #4f0426;
    --rz-primary: var(--assista-primary-color) !important;
    --rz-datepicker-trigger-icon-color: var(--assista-primary-color) !important;
    --rz-menu-top-item-color: var(--assista-primary-color) !important;
    --rz-sidebar-background-color: var(--assista-primary-color) !important;
    --rz-panel-menu-item-background-color: var(--assista-primary-color) !important;
    --rz-panel-menu-item-active-background-color: var(--assista-primary-selected-color) !important;
    --rz-panel-menu-item-2nd-level-background-color: #910000 !important;
    --rz-link-color: var(--assista-primary-color) !important;
    --rz-input-height: 1.75rem !important;
    --rz-input-padding-block: 0.21rem !important;
    --rz-grid-header-font-size: 0.6rem !important;
    --rz-body-font-size: 0.75rem !important;
}

.navbar-light .navbar-nav .nav-link {
    color: var(--assista-secondary-color);
}

    .navbar-light .navbar-nav .nav-link:focus,
    .navbar-light .navbar-nav .nav-link:hover {
        color: var(--assista-secondary-focus-color);
    }

.nav-assista .btn,
.nav-assista .dropdown-item,
.nav-assista,
.navbrand-assista {
    color: var(--assista-primary-color);
}

    .nav-assista .btn:focus,
    .nav-assista .btn:hover
    .nav-assista .dropdown-item:focus,
    .nav-assista .dropdown-item:hover,
    .nav-assista:focus,
    .nav-assista:hover,
    .nav-assista span:focus,
    .nav-assista span:hover {
        color: var(--assista-secondary-focus-color);
    }

.navbar-light .navbar-brand {
    color: var(--assista-primary-color);
}

a {
    color: var(--assista-tertiary-color);
}

a:hover {
    color: var(--assista-primary-selected-color);
}

.label-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.input-container {
    position: relative;
    width: 100%; 
}

    .input-container input {
        width: 100%;
        padding: 0px 40px 0px 0px;  
        box-sizing: border-box;
    }

.input-container-i {
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--assista-primary-color);
}

.input-container button:hover {
    background-color: #0056b3;
}

.as-validation-message {
    background-color: var(--rz-danger-dark);
    color: white;
    border-radius: var(--rz-border-radius-2);
}

.required::after {
    content: "*";
    color: var(--rz-danger); /* Puedes cambiar el color seg�n tus necesidades */
    margin-left: 5px; /* Espacio entre el texto y el asterisco */
}


/*
    Dialogo laterales
*/

.vertical-button-container {
    position: fixed;
    right: 10px; /* Distancia desde el borde derecho */
    top: 50px; /* Centrado verticalmente */
    transform: translateY(-50%); /* Ajuste para centrar completamente */
    z-index: 1000; /* Asegura que el bot�n est� por encima de otros elementos */
    transform: rotate(270deg); /* Gira el bot�n 90 grados */
    transform-origin:  right; /* Define el punto de rotaci�n en el centro */
}

.vertical-button {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 90% 90% 0% 0% !important; /* Bot�n circular */
    width: 105px;
    height: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra */
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: var(--rz-body-font-size) !important ;
}

    .vertical-button:hover {
        background-color: #795252; /* Color al pasar el rat�n */
    }

@keyframes right-side-open {
    0% {
        transform: translateX(100%); /* Estado inicial */
    }

    100% {
        transform: translateX(0); /* Estado final */
    }
}


.right-side-dialog {
    -moz-animation-name: right-side-open;
    -o-animation-name: right-side-open;
    -webkit-animation-name: right-side-open;
    animation-name: right-side-open;
    -moz-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;

}

/* Force the tariff import dialog above any parent Radzen dialog */
.rz-dialog-wrapper.tariff-import-dialog-top {
    z-index: 10050 !important;
}

.rz-dialog-mask:has(+ .rz-dialog-wrapper.tariff-import-dialog-top),
.rz-dialog-mask:has(~ .rz-dialog-wrapper.tariff-import-dialog-top) {
    z-index: 10049 !important;
}

/*
    Side dialogs (DialogService.OpenSideAsync) y modales (DialogService.OpenAsync)
    comparten en Radzen la misma variable --rz-dialog-zindex (1001), por lo que
    un modal abierto sobre un aside ya visible se renderiza por debajo.
    Subimos solo el modal regular por encima del side dialog, dejando los
    defaults de Radzen para el side. No se baja el z-index del side porque su
    contenedor compartiría plano con .rz-dialog-wrapper (fixed a pantalla
    completa) y los clicks se interceptarían en el overlay del modal.
    Defaults Radzen: --rz-dialog-mask-zindex: 1000 / --rz-dialog-zindex: 1001.
*/
:root {
    --rz-modal-dialog-zindex: 1051;
    --rz-modal-dialog-mask-zindex: 1050;
}

.rz-dialog-wrapper {
    z-index: var(--rz-modal-dialog-zindex) !important;
}

.rz-dialog-mask:has(+ .rz-dialog-wrapper),
.rz-dialog-mask:has(~ .rz-dialog-wrapper) {
    z-index: var(--rz-modal-dialog-mask-zindex) !important;
}


/*
    Dashboard de servicios
*/

.dashboard-summary {
    display: flex;
    gap: 1.5rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, var(--assista-tertiary-color), var(--assista-primary-color));
    border-radius: var(--rz-border-radius);
    color: white;
    flex-wrap: wrap;
}

.dashboard-summary-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

    .dashboard-summary-item .material-symbols-outlined {
        font-size: 2rem;
        opacity: 0.85;
    }

.dashboard-summary-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.dashboard-summary-label {
    font-size: 0.75rem;
    opacity: 0.85;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.dashboard-group-card {
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

    .dashboard-group-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transform: translateY(-2px);
    }

.dashboard-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

    .dashboard-card-header h4 {
        margin: 0;
        font-size: 0.85rem;
        font-weight: 600;
        flex: 1;
    }

    .dashboard-card-header .material-symbols-outlined {
        font-size: 1.25rem;
    }

.dashboard-card-amount {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.dashboard-state-breakdown {
    border-top: 1px solid #e5e7eb;
    padding-top: 0.5rem;
    margin-top: 0.25rem;
}

.dashboard-state-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem 0.25rem;
    font-size: 0.7rem;
    border-radius: var(--rz-border-radius);
    cursor: pointer;
}

    .dashboard-state-row:hover {
        background: #f3f4f6;
    }

.dashboard-state-count {
    font-weight: 600;
    background: #e5e7eb;
    border-radius: 9999px;
    padding: 0 0.4rem;
    min-width: 1.2rem;
    text-align: center;
}

.dashboard-finalized {
    opacity: 0.75;
}

/* Spinner de arranque del WASM */
.spinner {
    width: 40px;
    height: 40px;
    position: relative;
    margin: 35vh auto;
}

    /* El spinner es contenido estático, hermano de <Routes> dentro de #ApplicationContainer:
   Blazor no lo sustituye, renderiza la app a su lado. Lo ocultamos en cuanto el spinner
   tiene un hermano-elemento posterior (= la app ya montada por el WASM). Mientras carga el
   runtime, tras el spinner solo hay un marcador-comentario de Blazor (no es elemento), así
   que permanece visible justo durante el arranque. */
    .spinner:has(~ *) {
        display: none;
    }

    .spinner .double-bounce1,
    .spinner .double-bounce2 {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: var(--assista-primary-color);
        opacity: .6;
        position: absolute;
        top: 0;
        left: 0;
        animation: sk-bounce 2s infinite ease-in-out;
    }

    .spinner .double-bounce2 {
        animation-delay: -1s;
    }

@keyframes sk-bounce {
    0%, 100% {
        transform: scale(0);
    }

    50% {
        transform: scale(1);
    }
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    user-select: none;
}

/*
    Utilidades de ancho en tercios (w-33 / w-66).
    Bootstrap solo trae 25/50/75/100/auto; estas dos las aportaba el antiguo
    bundle global.css del tema ABP (Blazorise), eliminado al quitar Blazorise.
    Las páginas las usan ampliamente (grids de formularios en tercios), así que
    se reconstruyen aquí con los mismos valores que tenía el bundle.
*/
.w-33 {
    width: 33.333333% !important;
}

.w-66 {
    width: 66.666667% !important;
}

/*
    Resto de utilidades custom que aportaba el antiguo bundle global.css del tema
    ABP (Blazorise) y que Bootstrap estándar no incluye. Se usan en varias páginas
    y se reconstruyen aquí con los mismos valores que tenían en el bundle.
*/
.cursor-pointer {
    cursor: pointer;
}

.overflow-auto-hidden {
    overflow: auto hidden !important;
}

.overflow-auto-scroll {
    overflow: auto scroll !important;
}

/* Altura responsive en el breakpoint lg (Bootstrap solo trae h-100 sin variantes) */
@media (min-width: 992px) {
    .h-lg-100 {
        height: 100% !important;
    }
}