/* Brand design tokens, ported from the original Debida Diligencia app.css (:root --gf-* palette). */
:root {
    /* Paleta principal del manual de marca Garces Fruit:
         #EF4135  Pantone 032 C   rojo
         #80BA27  Pantone 368 C   verde claro
         #007D32  Pantone 356 C   verde oscuro  <- el primario de esta app
         #000000  negro
       Los tres primeros son los unicos colores de marca; cualquier otro acento sale de aqui o de la
       paleta secundaria (#E9500E, #3DB7B0, #BC0A7E), no de una paleta generica. */
    --gf-primary: #007D32;

    /* Antes eran #e7f2ff y #0d4b94: un celeste y un AZUL que no pertenecen a ninguna de las dos
       paletas del manual, usados como acento en el menu, el portal publico y las alertas.
       El acento pasa al verde 356 C. Cuesta contraste —el azul daba 8.57:1 sobre blanco y el verde da
       5.28:1— pero sigue cumpliendo AA para texto normal, y sobre la superficie clara de abajo el par
       queda en 4.69:1, tambien AA.
       El verde claro 368 C NO sirve aqui: 2.34:1 sobre blanco, solo alcanza para formas decorativas
       como el filete del login. */
    --gf-primary-soft: #EAF4EE;
    --gf-primary-accent: #007D32;
    --gf-grey-50: #f9f9f9;
    --gf-grey-100: #f3f4f6;
    --gf-grey-200: #eeeeee;
    --gf-grey-300: #dcddde;
    --gf-grey-500: #8e9198;
    --gf-grey-700: #676a72;
    --gf-grey-800: #393b40;
    --gf-grey-900: #2c2d30;
    --gf-light: #ffffff;

    /* Colores de estado, en su tono legible sobre fondo claro. No son de la paleta del manual —el
       manual no prescribe colores de estado— sino los que la aplicación ya usaba. Viven acá porque los
       comparten dos vistas y el CSS con ámbito de una no alcanza a la otra.
       Siguen escritos a mano en RiskBadge, MainLayout, ComplianceAlert y Reportes: consolidarlos mueve
       píxeles en pantallas que nadie pidió tocar, así que es una decisión de diseño aparte. */
    --gf-status-aprobado: #047857;
    --gf-status-revision: #b45309;
    --gf-status-rechazado: #b91c1c;
    --gf-status-vencida: #c2410c;

    /* Tipografía de cuerpo del manual de marca. Raleway primero; Inter queda detrás porque Raleway
       no trae subconjunto griego y el respaldo se resuelve por glifo (ver css/fonts-local.css).
       Un token y no tres declaraciones sueltas: la fuente de títulos que falta —Campton, de pago—
       entra el día que se compre la licencia cambiando esto y nada más. */
    --gf-font-body: 'Raleway', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Re-tint Radzen's Material theme to the Garcés Fruit brand green so buttons/accents match. */
    --rz-primary: #007D32;
    --rz-primary-dark: #00692a;
    --rz-primary-light: #2e9d57;

    /* Sin esto la tipografía de marca no llega a casi nada. El tema Material de Radzen resuelve su
       fuente por --rz-text-font-family, que vale "Roboto, sans-serif" por defecto y nadie sobreescribía:
       cada grilla, botón, diálogo y campo —o sea la mayor parte de la interfaz— venía cayendo en la
       fuente del sistema, porque Roboto tampoco está servida localmente. La declaración de html/body
       solo alcanzaba al marcado propio. */
    --rz-text-font-family: var(--gf-font-body);
}

html, body {
    margin: 0;
    font-family: var(--gf-font-body);

    /* Raleway trae cifras de estilo antiguo por defecto: el 0 y el 1 quedan a altura de x y el
       3, 4, 5, 7 y 9 bajan de la linea base. En texto corrido es una eleccion tipografica valida;
       aca no, porque casi todos los numeros de esta aplicacion son codigos, RUT y montos, y mezclados
       con mayusculas se leen como si tuvieran tamanos distintos. lining-nums las alinea a la altura
       de las mayusculas, que es como se veian antes de adoptar Raleway.

       Ojo al tocar esto: font-variant-numeric NO se acumula. Cualquier regla que declare solo
       tabular-nums mas abajo REEMPLAZA este valor y devuelve las cifras antiguas — por eso las hojas
       de las fichas de resultado declaran las dos palabras juntas. */
    font-variant-numeric: lining-nums;

    overflow-x: hidden;
}

.loading-app {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    color: #666;
}

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

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

/* ══ Pantalla de acceso ═══════════════════════════════════════════════════════════════════════
   Dos paneles: marca a la izquierda, formulario a la derecha. La proporcion 5:7 deja el formulario
   como el area dominante — es lo que la persona vino a usar; la marca solo tiene que identificar el
   sistema, no competir con el.

   Todo en app.css y no en un .razor.css porque la CSP declara style-src 'self' (nada inline) y porque
   Login.razor no renderiza ningun elemento HTML propio al que Blazor pueda colgar el atributo de
   scope: todo lo que hay ahi son componentes de Radzen. */
.auth-shell {
    display: grid;
    grid-template-columns: 5fr 7fr;
    min-height: 100vh;
    background: var(--gf-light);
}

/* ── Panel de marca ──────────────────────────────────────────────────────────────────────────── */
.auth-brand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(2rem, 4vw, 3.5rem);
    color: var(--gf-light);
    /* El degradado va del verde de marca a un tono mas profundo del mismo tinte, no a un negro
       neutro: mezclar con gris apaga el color y lo vuelve institucional-generico. */
    background:
        radial-gradient(120% 90% at 15% 0%, rgba(128, 186, 39, 0.28) 0%, transparent 55%),
        linear-gradient(160deg, #00893a 0%, var(--gf-primary) 45%, #00532a 100%);
    position: relative;
    overflow: hidden;
}

/* Textura: lineas diagonales finisimas, casi al limite de lo perceptible. Lo justo para que el panel
   no se lea como un rectangulo plano de color. Decorativa, por eso aria-hidden via ::before. */
.auth-brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.05) 0px,
        rgba(255, 255, 255, 0.05) 1px,
        transparent 1px,
        transparent 11px);
    pointer-events: none;
}

.auth-brand-content,
.auth-brand-foot {
    position: relative; /* por encima de la textura */
}

/* Tres zonas —marca arriba, mensaje al centro, nota al pie— en vez de un unico bloque centrado.
   Antes los tres elementos quedaban apelotonados al medio con dos vacios enormes arriba y abajo: un
   panel alto con el contenido amontonado en el centro se lee inacabado, no espacioso. */
.auth-brand-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-block: auto;
    max-width: 26rem;
}

/* El isotipo blanco va directo sobre el verde, sin superficie de apoyo: es la forma que el manual
   prescribe para fondos de color. La sombra suave lo despega del degradado sin alterar la marca. */
/* Va en su propia zona, arriba del todo. A 56px se leia como un caracter tipografico suelto; a 72
   vuelve a leerse como la marca que es. */
.auth-brand-mark {
    align-self: flex-start;
    flex: none;
    width: 72px;
    height: 65px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.22));
}

/* color explicito y no heredado: el tema de Radzen trae `h1, .h1 { color: ... }` con un tono oscuro,
   y sin esta linea gana el suyo — el titulo salia negro sobre el verde. */
.auth-brand-title {
    color: var(--gf-light);
    margin: 0;
    font-size: clamp(1.75rem, 3.2vw, 2.6rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

/* Filete en el verde claro corporativo (Pantone 368 C, paleta principal del manual). Estaba sin usar,
   y da estructura entre el titulo y la bajada sin agregar un elemento nuevo que leer. */
.auth-brand-title::after {
    content: "";
    display: block;
    width: 3.5rem;
    height: 3px;
    margin-top: 1.1rem;
    border-radius: 2px;
    background: #80BA27;
}

.auth-brand-tagline {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.86);
    max-width: 22rem;
}

.auth-brand-foot {
    margin: 0;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.78);
}

/* ── Panel del formulario ────────────────────────────────────────────────────────────────────── */
.auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 3rem);
    background: var(--gf-light);
}

.auth-card {
    width: 100%;
    max-width: 26rem;
}

/* ── Angosto: la marca pasa a franja superior ────────────────────────────────────────────────────
   No se oculta: es lo que le dice a la persona en que sistema esta entrando antes de teclear una
   credencial. Solo se compacta a una linea con el logo y el nombre. */
@media (max-width: 56rem) {
    .auth-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .auth-brand {
        flex-direction: row;
        align-items: center;
        gap: 0.9rem;
        padding: 1rem 1.25rem;
    }

    .auth-brand-content {
        flex-direction: row;
        align-items: center;
        gap: 0.9rem;
        margin-block: 0;
        max-width: none;
    }

    .auth-brand-mark {
        width: 34px;
        height: 31px;
        filter: none;
    }

    .auth-brand-title::after { display: none; }

    .auth-brand-title { font-size: 1.125rem; letter-spacing: 0; }

    /* En una franja no hay sitio para el argumento largo ni para la nota de pie. */
    .auth-brand-tagline,
    .auth-brand-foot { display: none; }

    .auth-main { align-items: flex-start; padding-top: 2rem; }
}

/* Pantallas muy bajas —un portatil con el teclado virtual abierto— donde la franja estorba mas de lo
   que aporta. */
@media (max-height: 30rem) and (max-width: 56rem) {
    .auth-brand { padding-block: 0.5rem; }
}

/* ── Autorrelleno del navegador en la pantalla de login ────────────────────────────────────────
   Radzen sube la etiqueta flotante con `.rz-textbox:not(:placeholder-shown)`. Chrome PINTA el valor
   autorrellenado pero no lo expone a la pagina hasta que la persona interactua —es una proteccion de
   privacidad, no un bug del navegador—, asi que `:placeholder-shown` sigue coincidiendo, la etiqueta
   se queda abajo y queda encima del texto: se lee "UsuariomatiasbarrIa@..." superpuesto.

   `:-webkit-autofill` SI coincide en ese estado, y es lo unico que lo distingue. Las declaraciones de
   abajo son las mismas que aplica Radzen al estado flotante, con sus propias variables, para que
   sigan al tema si cambia. Van en app.css y no en un `.razor.css` porque la CSP de esta app declara
   `style-src 'self'` (nada inline) y porque Login.razor no tiene ningun elemento HTML propio al que
   Blazor pueda colgar el atributo de scope: todo lo que renderiza son componentes de Radzen.

   Acotado a `.auth-shell` para no tocar los formularios del resto de la aplicacion.

   El :-moz-autofill no existe; Firefox no tiene este problema porque sí expone el valor. */
.auth-shell .rz-form-field.rz-floating-label .rz-textbox:-webkit-autofill ~ .rz-form-field-label {
    inset-inline-start: var(--rz-form-field-label-inset-inline-start);
    inset-inline-end: auto;
    inset-block-start: var(--rz-form-field-label-floating-top);
    padding-block-start: 0;
    padding-block-end: 0;
    transform: translate(0, 0);
    color: var(--rz-input-placeholder-color);
    background-color: var(--rz-form-field-label-floating-background-color);
    font-size: var(--rz-form-field-label-floating-font-size, 0.75rem);
    line-height: 1rem;
    max-width: calc(100% - 1.5rem);
}

/* El amarillo/azul del autorrelleno tapa el fondo del input y desentona con la tarjeta. No se puede
   cambiar `background` —Chrome lo ignora en este estado—, pero si pintar una sombra interior solida,
   que es el idioma establecido para esto. La transicion larguisima evita el destello del color propio
   del navegador en el primer frame. */
.auth-shell .rz-textbox:-webkit-autofill,
.auth-shell .rz-textbox:-webkit-autofill:hover,
.auth-shell .rz-textbox:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--gf-light) inset;
    -webkit-text-fill-color: var(--gf-grey-900);
    transition: background-color 5000s ease-in-out 0s;
}

.material-icons-round{
    color: var(--gf-primary)
}

.h1 {
    font-size: 1.5rem;
}
/* Marcador de carga del cuerpo mientras se resuelve la sesion (Authorizing de AuthorizeRouteView).
   Vive aca y no en un .razor.css porque App.razor no tiene CSS con alcance propio. Se acota el ancho
   para que el bloque no se estire de lado a lado en pantallas grandes. */
.gf-body-loading {
    max-width: 960px;
}

/* Modal informativo de documentos (DocumentoInfoDialog). Radzen pinta el ícono del título (DialogOptions.Icon)
   inline dentro de .rz-dialog-title, alineado a baseline, y el ícono queda por encima del texto. Se corrige
   alineando ícono y texto en una fila centrada. Vive en app.css (global) y no en un .razor.css porque el
   titlebar lo renderiza RadzenDialog fuera del alcance del CSS scoped; se acota a .docinfo-dialog (via
   DialogOptions.CssClass) para no tocar los demás diálogos. */
.docinfo-dialog .rz-dialog-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Panel de la campana (NotificationBell). El contenedor del side dialog lo pinta RadzenDialog fuera del
   alcance del CSS scoped; sin quitarle el padding, el header verde del panel no llega a los bordes. */
.gf-notification-side-content {
    padding: 0;
    height: 100%;
}