:root {
    /* Marca — sin cambios entre temas */
    --green: #e27942;
    --green-hover: #ef8d5a;

    /* Superficie */
    --gs-bg: #F5F6F8;
    --gs-surface: #FFFFFF;
    --gs-surface-alt: #F1F3F5;
    --gs-shadow-card: 0 1px 2px rgba(16, 24, 32, 0.04), 0 8px 20px rgba(16, 24, 32, 0.06);

    /* Texto */
    --gs-text-primary: #1A1D21;
    --gs-text-secondary: #5B6169;
    --gs-text-muted: #8A9099;

    /* Borde */
    --gs-border: rgba(15, 23, 32, 0.08);
    --gs-border-strong: rgba(15, 23, 32, 0.16);

    /* Marca aplicada */
    --gs-primary: #E27942;
    --gs-primary-hover: #EF8D5A;
    --gs-primary-ink: #B85A2A;
    --gs-primary-soft: rgba(226, 121, 66, 0.10);
    --gs-primary-soft-strong: rgba(226, 121, 66, 0.18);

    /* Campos de formulario */
    --gs-field: #F1F3F5;
    --gs-field-focus: #E8EAED;

    /* Superficies translucidas (topbar, login card) */
    --gs-surface-translucent: rgba(255, 255, 255, 0.88);
    --gs-overlay: rgba(255, 255, 255, 0.75);

    /* Alias retrocompatibles usados en este archivo */
    --black: var(--gs-text-primary);
    --grey: var(--gs-text-secondary);
    --field: var(--gs-field);
    --field-focus: var(--gs-field-focus);
}

html[data-theme="dark"] {
    --gs-bg: #000000;
    --gs-surface: #121212;
    --gs-surface-alt: rgba(255, 255, 255, 0.04);
    --gs-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.5);

    --gs-text-primary: #FFFFFF;
    --gs-text-secondary: #B3B3B3;
    --gs-text-muted: #8E8E8E;

    --gs-border: rgba(255, 255, 255, 0.08);
    --gs-border-strong: rgba(255, 255, 255, 0.16);

    --gs-primary-ink: #EF8D5A;
    --gs-primary-soft: rgba(226, 121, 66, 0.14);
    --gs-primary-soft-strong: rgba(226, 121, 66, 0.22);

    --gs-field: rgba(255, 255, 255, 0.06);
    --gs-field-focus: rgba(255, 255, 255, 0.1);

    --gs-surface-translucent: rgba(18, 18, 18, 0.88);
    --gs-overlay: rgba(0, 0, 0, 0.6);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.mud-dialog {
    border: 1px solid rgba(226, 121, 66, 0.55);
}

html,
body {
    height: 100%;
    font-family: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    background: var(--gs-bg);
    color: var(--gs-text-primary);
    overflow: hidden;
}

a,
.btn-link {
    color: var(--gs-primary-ink);
}

.login-stage {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient(
            600px circle at var(--mx, 50%) var(--my, 50%),
            rgba(226, 121, 66, 0.16),
            rgba(226, 121, 66, 0.05) 40%,
            transparent 70%),
        linear-gradient(180deg, var(--gs-surface) 0%, var(--gs-bg) 100%);
    transition: background 0.15s ease-out;
}

.login-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        350px circle at var(--mx, 50%) var(--my, 50%),
        rgba(239, 141, 90, 0.15),
        transparent 65%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.login-stage:hover .login-glow {
    opacity: 1;
}

.login-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 420px;
    background: var(--gs-surface-translucent);
    backdrop-filter: blur(6px);
    border: 1px solid var(--gs-border);
    border-radius: 12px;
    padding: 40px 32px 32px;
    box-shadow: var(--gs-shadow-card);
}

.login-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
}

.login-wordmark {
    font-size: 48px;
    font-weight: 400;
    letter-spacing: -1px;
    color: var(--green);
    line-height: 1;
    font-family: "Poppins", "Segoe UI", Arial, sans-serif;
}

.login-wordmark .dot {
    color: var(--green);
}

.login-title {
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.4px;
}

.login-field {
    margin-bottom: 16px;
}

.login-field label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
}

.login-field input[type="text"],
.login-field input[type="password"] {
    width: 100%;
    padding: 14px;
    background: var(--field);
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--gs-text-primary);
    font-size: 14px;
    transition: border-color 0.15s, background 0.15s;
}

.login-field input::placeholder {
    color: var(--gs-text-muted);
}

.login-field input:focus {
    outline: none;
    background: var(--field-focus);
    border-color: var(--gs-primary);
}

.login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 24px;
    gap: 12px;
}

.login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--grey);
    cursor: pointer;
}

.login-remember input {
    accent-color: var(--green);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.login-button {
    width: 100%;
    padding: 14px;
    background: var(--green);
    color: #1A1D21;
    border: none;
    border-radius: 500px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.1s ease, background 0.15s ease;
    text-transform: uppercase;
}

.login-button:hover {
    background: var(--green-hover);
    transform: scale(1.03);
}

.login-button:active {
    transform: scale(0.99);
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0;
    color: var(--grey);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--gs-border-strong);
}

.login-link {
    text-align: center;
    font-size: 14px;
    color: var(--grey);
}

.login-link a {
    color: var(--gs-text-primary);
    text-decoration: underline;
    font-weight: 600;
}

.login-link a:hover {
    color: var(--green-hover);
}

.forgot-link {
    color: var(--grey);
    font-size: 13px;
    text-decoration: underline;
}

.forgot-link:hover {
    color: var(--gs-text-primary);
}

.forgot-link.is-loading {
    pointer-events: none;
    opacity: 0.85;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.inline-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(15, 23, 32, 0.15);
    border-top-color: var(--green);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.login-error {
    margin: 0 0 12px;
    color: #C13B3B;
    font-size: 13px;
    font-weight: 600;
}

.login-info {
    margin: 0 0 12px;
    color: #1F8F5D;
    font-size: 13px;
    font-weight: 600;
}

.app-spinner-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWRoPSI1NiIgaGVpZ2h0PSI0OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgb3ZlcmZsb3c9ImhpZGRlbiI+PGRlZnM+PGNsaXBQYXRoIGlkPSJjbGlwMCI+PHJlY3QgeD0iMjM1IiB5PSI1MSIgd2lkdGg9IjU2IiBoZWlnaHQ9IjQ5Ii8+PC9jbGlwUGF0aD48L2RlZnM+PGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwKSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIzNSAtNTEpIj48cGF0aCBkPSJNMjYzLjUwNiA1MUMyNjQuNzE3IDUxIDI2NS44MTMgNTEuNDgzNyAyNjYuNjA2IDUyLjI2NThMMjY3LjA1MiA1Mi43OTg3IDI2Ny41MzkgNTMuNjI4MyAyOTAuMTg1IDkyLjE4MzEgMjkwLjU0NSA5Mi43OTUgMjkwLjY1NiA5Mi45OTZDMjkwLjg3NyA5My41MTMgMjkxIDk0LjA4MTUgMjkxIDk0LjY3ODIgMjkxIDk3LjA2NTEgMjg5LjAzOCA5OSAyODYuNjE3IDk5TDI0MC4zODMgOTlDMjM3Ljk2MyA5OSAyMzYgOTcuMDY1MSAyMzYgOTQuNjc4MiAyMzYgOTQuMzc5OSAyMzYuMDMxIDk0LjA4ODYgMjM2LjA4OSA5My44MDcyTDIzNi4zMzggOTMuMDE2MiAyMzYuODU4IDkyLjEzMTQgMjU5LjQ3MyA1My42Mjk0IDI1OS45NjEgNTIuNzk4NSAyNjAuNDA3IDUyLjI2NThDMjYxLjIgNTEuNDgzNyAyNjIuMjk2IDUxIDI2My41MDYgNTFaTTI2My41ODYgNjYuMDE4M0MyNjAuNzM3IDY2LjAxODMgMjU5LjMxMyA2Ny4xMjQ1IDI1OS4zMTMgNjkuMzM3IDI1OS4zMTMgNjkuNjEwMiAyNTkuMzMyIDY5Ljg2MDggMjU5LjM3MSA3MC4wODg3TDI2MS43OTUgODQuMDE2MSAyNjUuMzggODQuMDE2MSAyNjcuODIxIDY5Ljc0NzVDMjY3Ljg2IDY5LjczMDkgMjY3Ljg3OSA2OS41ODc3IDI2Ny44NzkgNjkuMzE3OSAyNjcuODc5IDY3LjExODIgMjY2LjQ0OCA2Ni4wMTgzIDI2My41ODYgNjYuMDE4M1pNMjYzLjU3NiA4Ni4wNTQ3QzI2MS4wNDkgODYuMDU0NyAyNTkuNzg2IDg3LjMwMDUgMjU5Ljc4NiA4OS43OTIxIDI1OS43ODYgOTIuMjgzNyAyNjEuMDQ5IDkzLjUyOTUgMjYzLjU3NiA5My41Mjk1IDI2Ni4xMTYgOTMuNTI5NSAyNjcuMzg3IDkyLjI4MzcgMjY3LjM4NyA4OS43OTIxIDI2Ny4zODcgODcuMzAwNSAyNjYuMTE2IDg2LjA1NDcgMjYzLjU3NiA4Ni4wNTQ3WiIgZmlsbD0iI0ZGRTUwMCIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9nPjwvc3ZnPg==) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: #fff;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* Zona de arrastrar/seleccionar archivo (usada donde se necesite reemplazar el input
   nativo del navegador). Se declara aqui, global, porque los elementos que renderiza
   el componente <InputFile> no reciben el atributo de scope del CSS aislado por archivo. */
.gs-file-drop {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1.5px dashed rgba(15, 23, 32, 0.2);
    border-radius: 8px;
    color: var(--gs-text-secondary);
    font-size: 0.78rem;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.gs-file-drop:hover,
.gs-file-drop.gs-file-drop--dragover {
    border-color: #E27942;
    background-color: rgba(226, 121, 66, 0.1);
    color: #E27942;
}

.gs-file-drop input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

@media (max-width: 600px) {
    .login-card {
        padding: 32px 20px 24px;
    }

    .login-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Impresion (Ctrl+P): oculta el chrome de MainLayout (sidebar, topbar) y cualquier
   elemento marcado .no-print, y libera los contenedores que en pantalla dependen de
   altura fija / overflow:auto para que el contenido completo (incl. graficas) se
   pagine en vez de recortarse. Vive aca (no en el CSS aislado de cada pagina) porque
   el aislamiento de Blazor no permite que Dashboard.razor.css alcance MainLayout.razor. */
@media print {
    html,
    body {
        overflow: visible !important;
        height: auto !important;
    }

    .sidebar-panel,
    .sidebar-scrim,
    .top-strip,
    .no-print {
        display: none !important;
    }

    .app-shell {
        display: block !important;
        height: auto !important;
    }

    .workspace-panel {
        display: block !important;
    }

    .workspace-content {
        overflow: visible !important;
        padding: 0 !important;
    }

    .chart-card,
    .dash-panel,
    .gs-card,
    .gerencial-kpi,
    .kpi-card {
        break-inside: avoid;
    }
}