/* 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;
}

/*
    Las notificaciones de RadzenNotificationService (.rz-notification) traen de
    fábrica z-index: 1002 (hardcoded en el CSS del tema "software" de Radzen,
    NO expuesto como variable --rz-*-zindex como el resto de planos) — por
    debajo de los modales que subimos arriba a 1051 y muy por debajo del
    diálogo de importación de tarifas (10050). Resultado: el toast quedaba
    tapado por cualquier modal/diálogo abierto. Orden de planos de mayor a
    menor: notificación (10060) > diálogo de importación de tarifas (10050) >
    modal regular (1051) > side dialog (1001, default Radzen). La notificación
    debe verse siempre por encima de cualquier diálogo, incluida la importación.
*/
.rz-notification {
    z-index: 10060 !important;
}

/*
    Diálogos (Bug1044). Radzen no limita un diálogo a la ventana: con un tamaño recordado mayor que la
    pantalla, la cabecera o parte del contenido quedaban fuera de alcance. Se limita al 95 % de la
    ventana y lo que no quepa se desplaza dentro del diálogo en lugar de cortarse (un ContentCssClass
    propio, como overflow-hidden, sigue mandando). La cabecera no selecciona texto: si el navegador
    empieza a seleccionar el título mientras se arrastra, el arrastre se interrumpe.
*/
.rz-dialog {
    max-width: 95vw;
    max-height: 95vh;
}

.rz-dialog-content {
    overflow: auto;
    min-height: 0;
}

.rz-dialog-titlebar {
    user-select: none;
}

/*
    Formulario "Nuevo servicio" dentro del diálogo de la ficha del activo (Bug1044). Sus filas son
    RadzenStack horizontales con la etiqueta al 33 % y el campo al 66 % (w-33 / w-66, con !important),
    y la tarjeta es inline-block con margen izquierdo: en un diálogo estrecho las etiquetas largas no
    cabían. Dentro del diálogo la tarjeta ocupa todo el ancho, la etiqueta tiene un ancho legible y
    puede partirse en dos líneas, y si no queda sitio el campo pasa debajo. Acotado a
    .rz-dialog-content para no cambiar la página /service/create, que usa el mismo componente.
*/
.rz-dialog-content .service-create-form {
    display: block !important;
    width: 100%;
    height: auto !important;
    margin-left: 0 !important;
}

.rz-dialog-content .service-create-form .rz-stack:has(> .w-33) {
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.75rem;
}

.rz-dialog-content .service-create-form .rz-stack:has(> .w-33) > .w-33 {
    flex: 0 0 11rem;
    width: auto !important;
    white-space: normal;
}

.rz-dialog-content .service-create-form .rz-stack:has(> .w-33) > .w-66 {
    flex: 1 1 16rem;
    width: auto !important;
    min-width: 0;
}

.rz-dialog-content .service-create-form .rz-stack:has(> .w-33) > p {
    flex-basis: 100%;
    margin: 0;
}


/*
    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);
    }
}

/*
    Iconos por ligadura (<span class="material-symbols-outlined">notifications</span>).
    La app no carga la hoja de Google Fonts: la fuente es la "Material Symbols" (Outlined) que
    ya trae el tema de Radzen (@font-face de software-base.css, la misma que usan RadzenIcon y
    .rzi). Sin font-family el navegador pintaba el nombre del icono como texto (INC-37-ui).
    Mismas propiedades que la clase oficial de Google y que .rzi de Radzen.
*/
.material-symbols-outlined {
    font-family: var(--rz-icon-font-family, 'Material Symbols');
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    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;
    }
}

/* Cifras tabulares para columnas de importes (MoneyDisplay.TabularCssClass): todos los dígitos del
   mismo ancho, así los importes se leen en columna. */
.tabular-nums {
    font-variant-numeric: tabular-nums;
}