/* Colores de marca del Portal Marino.
   Espejo de Components/Layout/BrandColors.cs para que los .css de los componentes
   puedan usarlos (los archivos CSS no pueden consumir constantes de C#).
   Si cambiás un color, actualizá AMBOS lados. */
:root {
    --brand-blue: #4A6DA7;
    --brand-blue-dark: #3E5C8C;
    --brand-blue-light: #5F81B8;
    --brand-navy: #110E2D;
    --brand-light-canvas: #F0F2F5;
    --brand-dark-canvas: #1A1A27;
}

.tar {
    text-align: right;
}

.tac {
    text-align: center;
}

.visible_above_450 {
    display: none;
    /* Oculto por defecto */
}

@media screen and (min-width: 451px) {
    .visible_above_450 {
        display: block;
        /* Visible cuando el ancho es mayor a 450px */
    }
}

.visible_above_350 {
    display: none;
    /* Oculto por defecto */
}

@media screen and (min-width: 351px) {
    .visible_above_350 {
        display: block;
        /* Visible cuando el ancho es mayor a 450px */
    }
}

.min-ellipsis {
    min-width: 100px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

.min-ellipsis_400 {
    min-width: 100px;
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

.align-right-numeric input {
    text-align: right;
}

.date_time_right {
    text-align: right;
    width: 250px;
    max-width: 250px;
}

/* Evita el parpadeo de fondo antes de la hidratación de Blazor:
   el script inline de App.razor setea html[data-theme] leyendo la cookie
   (el MudThemeProvider toma el control después). */
html[data-theme="dark"],
html[data-theme="dark"] body {
    background-color: var(--brand-dark-canvas);
}

html[data-theme="light"],
html[data-theme="light"] body {
    background-color: var(--brand-light-canvas);
}

/* Drawer lateral (MainLayout): clase exclusiva propia (app-drawer) aplicada al
   MudDrawer vía Class=, en lugar de pisar la clase .mud-drawer de MudBlazor.
   Oculta la barra de scroll vertical sin deshabilitar el scroll: en pantallas
   bajas el menú sigue siendo navegable con rueda/táctil/teclado.
   ⚠️ Vive en site.css (no en MainLayout.razor.css) porque el CSS aislado del
   padre no alcanza la raíz del componente de librería: probado, el selector
   scoped .mud-drawer[b-...] no aplica (el <aside> no lleva el scope del padre).
   ⚠️ En MudBlazor 9 el overflow está en .mud-drawer (el <aside>), no en
   .mud-drawer-content. */
.app-drawer {
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* Edge/IE legacy */
}

.app-drawer::-webkit-scrollbar {
    display: none;                /* Chrome/Safari/Edge */
}

/* Badge de reCAPTCHA v3 minimizado a un iconito (práctica permitida por Google:
   el badge sigue visible y clickeable, solo compacto). Se expande al hover.
   Global porque el badge aparece en todas las páginas (la API se carga en App.razor).
   Los !important son necesarios: Google inyecta estilos inline. */
.grecaptcha-badge {
    width: 70px !important;
    right: 0 !important;          /* anula el desplazamiento inline (-186px) de Google */
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    border-radius: 8px 0 0 8px !important;
    box-shadow: none !important;
}

.grecaptcha-badge:hover {
    width: 256px !important;
    box-shadow: 0 0 10px rgb(0 0 0 / 0.15) !important;
}