/*
 * AsEp · Design system
 * Visual idea: a calm service desk where report status and the next action
 * stay easy to scan. Brand blue grounds navigation; orange marks action.
 */
:root {
    color-scheme: dark;
    --asep-brand-blue: #03357a;
    --asep-brand-orange: #ff571b;
    --asep-canvas: #0d1726;
    --asep-surface: #121f31;
    --asep-surface-raised: #192a40;
    --asep-surface-inset: #0f1a2a;
    --asep-ink: #f2f5fa;
    --asep-ink-muted: #a7b4c7;
    --asep-line: rgba(170, 190, 218, .14);
    --asep-line-strong: rgba(170, 190, 218, .24);
    --asep-ring: rgba(255, 87, 27, .34);
    --asep-shadow: 0 18px 48px rgba(3, 9, 19, .2);
    --asep-radius: 15px;
    --asep-radius-sm: 10px;
    --asep-ease: cubic-bezier(.2, .75, .25, 1);

    --bg-main: var(--asep-canvas);
    --bg-card: var(--asep-surface);
    --bg-card-hover: var(--asep-surface-raised);
    --bg-surface: var(--asep-surface-inset);
    --bg-sidebar: #0a1320;
    --color-text: var(--asep-ink);
    --color-heading: #f7f9fc;
    --color-text-secondary: #c7d1df;
    --color-text-muted: var(--asep-ink-muted);
    --border-light: var(--asep-line);
    --border-strong: var(--asep-line-strong);
    --color-primary: var(--asep-brand-orange);
    --color-primary-hover: #ff7648;
    --color-primary-active: #e44712;
    --color-primary-soft: rgba(255, 87, 27, .12);
    --color-primary-border: rgba(255, 87, 27, .3);
    --color-secondary: #5b98e8;
    --color-secondary-hover: #77acef;
    --input-bg: #0e1a2b;
    --button-primary-gradient: var(--asep-brand-orange);
    --button-primary-text: #10213b;
    --dashboard-padding: clamp(1rem, 2vw, 1.8rem);
    --dashboard-gap: clamp(.85rem, 1.45vw, 1.25rem);
}

[data-theme="light"] {
    color-scheme: light;
    --asep-canvas: #f2f5f8;
    --asep-surface: #fff;
    --asep-surface-raised: #f8fafc;
    --asep-surface-inset: #edf1f6;
    --asep-ink: #1b2b42;
    --asep-ink-muted: #5c6b80;
    --asep-line: rgba(26, 48, 78, .11);
    --asep-line-strong: rgba(26, 48, 78, .2);
    --asep-ring: rgba(184, 61, 27, .23);
    --asep-shadow: 0 16px 42px rgba(24, 43, 68, .09);
    --bg-sidebar: #fff;
    --color-heading: #16263d;
    --color-primary: #b83d1b;
    --color-primary-hover: #9f3216;
    --color-primary-active: #832911;
    --color-primary-soft: rgba(184, 61, 27, .09);
    --color-primary-border: rgba(184, 61, 27, .22);
    --color-secondary: var(--asep-brand-blue);
    --color-secondary-hover: #022b65;
    --input-bg: #fff;
    --button-primary-gradient: var(--asep-brand-orange);
}

html { scroll-behavior: smooth; background: var(--asep-canvas); }
body {
    color: var(--asep-ink);
    background: var(--asep-canvas);
    font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { color: var(--color-heading); letter-spacing: -.025em; }
p, small, .text-muted { color: var(--asep-ink-muted); }
a { text-underline-offset: .18em; }
:focus-visible {
    outline: 2px solid var(--color-primary) !important;
    outline-offset: 2px;
}
::selection { color: #fff; background: #a83717; }

/* Quiet branded canvas: the faint grid echoes a service diagram without
   competing with real content or relying on extra image assets. */
.hero-bg {
    background:
        radial-gradient(ellipse at 12% 8%, rgba(3, 53, 122, .18), transparent 36rem),
        radial-gradient(ellipse at 90% 88%, rgba(255, 87, 27, .07), transparent 30rem),
        var(--asep-canvas) !important;
}
.hero-bg::before {
    background-image:
        linear-gradient(rgba(145, 169, 199, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(145, 169, 199, .035) 1px, transparent 1px) !important;
    background-position: center center !important;
    background-size: 44px 44px !important;
    opacity: .65 !important;
    animation: none !important;
}
.hero-bg::after {
    background-image: radial-gradient(circle, rgba(255, 87, 27, .17) 1px, transparent 1.5px) !important;
    background-position: 50% 50% !important;
    background-size: 32px 32px !important;
    opacity: .12 !important;
    animation: none !important;
}
.hero-light, .hero-noise { opacity: .4; }
.hero-light::before { animation: none !important; }
[data-theme="light"] .hero-bg {
    background:
        radial-gradient(ellipse at 12% 8%, rgba(3, 53, 122, .075), transparent 38rem),
        radial-gradient(ellipse at 90% 88%, rgba(217, 75, 35, .05), transparent 30rem),
        var(--asep-canvas) !important;
}
[data-theme="light"] .hero-bg::before { opacity: .42 !important; }
[data-theme="light"] .hero-bg::after { opacity: .1 !important; }

/* Application shell and navigation */
.dashboard-shell, .dashboard-workspace { background: var(--asep-canvas); }
.dashboard-sidebar {
    background: var(--bg-sidebar);
    border-right: 1px solid var(--asep-line);
    box-shadow: 8px 0 28px rgba(3, 10, 22, .08);
}
.sidebar-header { min-height: 100px; padding: .9rem; }
.dashboard-sidebar .sidebar-logo { width: 66px; height: 66px; }
.sidebar-divider { background: var(--asep-line); }
.sidebar-menu { padding: .65rem .65rem 1rem; }
.menu-group { margin-bottom: .85rem; }
.menu-group-title {
    padding-inline: .7rem;
    color: var(--asep-ink-muted);
    font-size: .67rem;
    letter-spacing: .12em;
}
.menu-item {
    min-height: 43px;
    margin-block: 2px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--asep-ink-muted);
    transition: background-color .18s var(--asep-ease), color .18s var(--asep-ease), border-color .18s var(--asep-ease), transform .18s var(--asep-ease);
}
.menu-item:hover { color: var(--asep-ink); background: var(--asep-surface-raised); transform: translateX(2px); }
.menu-item.active {
    color: var(--asep-ink);
    background: color-mix(in srgb, var(--color-primary) 11%, var(--asep-surface));
    border-color: var(--color-primary-border);
}
.menu-item.active .menu-icon { color: var(--color-primary); }
.dashboard-navbar {
    background: color-mix(in srgb, var(--asep-surface) 94%, transparent);
    border-bottom: 1px solid var(--asep-line);
    box-shadow: 0 3px 16px rgba(3, 10, 22, .05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.navbar-page-label { color: var(--asep-ink-muted); font-size: .68rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.navbar-page-title { font-size: 1.05rem; }
.navbar-icon, .navbar-toggle, .navbar-search { border: 1px solid var(--asep-line); background: var(--asep-surface-inset); border-radius: 10px; }
.navbar-search:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--asep-ring); }

/* Content surfaces and page hierarchy */
.dashboard-main { min-width: 0; }
.dashboard-panel, .card, .module-card, .table-card, .form-card, .dashboard-card, .summary-card, .stat-card {
    border: 1px solid var(--asep-line);
    border-radius: var(--asep-radius);
    background: var(--asep-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.module-header { gap: .75rem; }
.module-title { font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.2; }
.module-description, .module-subtitle { max-width: 72ch; color: var(--asep-ink-muted); }
.module-toolbar { gap: .55rem; border-color: var(--asep-line); }
.module-card:hover, .summary-card:hover, .stat-card:hover { border-color: var(--asep-line-strong); box-shadow: var(--asep-shadow); }
.dashboard-content.dashboard-admin { background: var(--asep-canvas); }
.dashboard-content.dashboard-admin::before {
    background:
        radial-gradient(circle at 86% 5%, rgba(255, 87, 27, .045), transparent 28rem),
        linear-gradient(rgba(137, 163, 195, .018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(137, 163, 195, .018) 1px, transparent 1px) !important;
    background-size: auto, 42px 42px, 42px 42px !important;
}
.dashboard-content.dashboard-admin .dashboard-main { padding-top: clamp(1.1rem, 2.2vw, 1.8rem); }
.dashboard-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    max-width: 1600px;
    margin: 0 auto 1.2rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--asep-line);
}
.dashboard-intro-copy { min-width: 0; }
.dashboard-intro-eyebrow {
    margin: 0 0 .25rem;
    color: var(--color-primary);
    font-size: .69rem;
    font-weight: 750;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.dashboard-intro h1 { margin: 0; font-size: clamp(1.4rem, 2vw, 1.85rem); line-height: 1.2; }
.dashboard-intro p:last-child { margin: .35rem 0 0; color: var(--asep-ink-muted); font-size: .9rem; }
.dashboard-content.dashboard-admin .dashboard-kpis { gap: var(--dashboard-gap); }
.dashboard-content.dashboard-admin .dashboard-kpis > .stat-card,
.dashboard-content.dashboard-admin .dashboard-panel,
.dashboard-content.dashboard-admin .dashboard-summary > .summary-card {
    border-color: var(--asep-line);
    border-radius: 13px;
    box-shadow: 0 2px 9px rgba(0, 0, 0, .045);
}
.dashboard-content.dashboard-admin .dashboard-panel-header { border-bottom-color: var(--asep-line); }
.dashboard-content.dashboard-admin .dashboard-panel-footer { border-top-color: var(--asep-line); }
.dashboard-content.dashboard-admin .dashboard-table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }

/* Forms, controls and actions. Hidden and submit inputs retain native sizing. */
label, .form-label { color: var(--color-heading); font-weight: 600; }
.form-control, .form-select, select,
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="color"]),
textarea {
    max-width: 100%;
    min-height: 42px;
    color: var(--asep-ink);
    background-color: var(--input-bg);
    border: 1px solid var(--asep-line-strong);
    border-radius: 9px;
}
textarea.form-control, textarea { min-height: 96px; }
.form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--asep-ink-muted); opacity: .82; }
.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
    color: var(--asep-ink);
    background-color: var(--input-bg);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--asep-ring);
}
input[type="file"]::file-selector-button {
    min-height: 32px;
    margin: 0 .65rem 0 0;
    padding: .35rem .7rem;
    color: var(--asep-ink);
    background: var(--asep-surface-raised);
    border: 1px solid var(--asep-line-strong);
    border-radius: 7px;
    font: inherit;
    cursor: pointer;
}
input[type="file"]::file-selector-button:hover { border-color: var(--color-primary); }
.btn, button.btn, .option-btn {
    min-height: 40px;
    border-radius: 9px;
    font-weight: 650;
    transition: transform .16s var(--asep-ease), box-shadow .16s var(--asep-ease), background-color .16s var(--asep-ease), border-color .16s var(--asep-ease);
}
.btn-primary, .btn-naranja { color: #10213b !important; background: var(--button-primary-gradient); border-color: transparent; }
.btn-primary:hover, .btn-naranja:hover { color: #10213b !important; background: #ff7648 !important; filter: none; transform: translateY(-1px); }
[data-theme="dark"] .btn-primary, [data-theme="dark"] .btn-naranja { color: #10213b !important; }
[data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .btn-naranja:hover { color: #10213b !important; background: #ff7648 !important; }
.btn:active, button:active { transform: translateY(0); }
.btn:disabled, button:disabled { cursor: not-allowed; opacity: .58; transform: none; }

/* Tables, feedback and shared system components */
.table-responsive { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
table { color: var(--asep-ink) !important; }
table th { color: var(--asep-ink-muted); font-size: .72rem; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
table td, table th { vertical-align: middle; border-color: var(--asep-line) !important; }
tbody tr { transition: background-color .15s ease; }
tbody tr:hover { background-color: color-mix(in srgb, var(--color-secondary) 6%, transparent); }
.badge, .status-badge, .status-label { border-radius: 999px; font-weight: 650; }
.modal-content, .dropdown-menu, .notification-panel, .forgot-password-dialog {
    color: var(--asep-ink);
    background: var(--asep-surface);
    border: 1px solid var(--asep-line-strong);
    border-radius: var(--asep-radius);
    box-shadow: var(--asep-shadow);
}
.modal-header, .modal-footer { border-color: var(--asep-line); }
.alert, .flash-message, .notification-item { border-radius: 10px; }
.empty-state { border-color: var(--asep-line); }
.dashboard-footer, .app-footer { color: var(--asep-ink-muted); border-color: var(--asep-line); }

/* Home: the two real entry points sit beside the brand statement. */
body:has(.home-page) { overflow-x: hidden; }
body:has(.home-page) .app { height: auto; min-height: 100dvh; overflow: visible; }
body:has(.home-page) .app-main { min-height: 0; overflow: visible; }
.home-page {
    min-height: 100%;
    height: auto;
    padding: clamp(1rem, 3vw, 2.75rem);
    overflow: visible;
}
.home-card {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
    align-items: stretch;
    gap: 0;
    width: min(1120px, 100%);
    max-height: none;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--asep-line-strong);
    border-radius: 22px;
    background: color-mix(in srgb, var(--asep-surface) 96%, transparent);
    box-shadow: var(--asep-shadow);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: asEpSurfaceEnter .42s var(--asep-ease) both;
}
.home-card::before { display: none; }
.hero-section {
    align-items: flex-start;
    justify-content: center;
    padding: clamp(2rem, 5vw, 4rem);
    text-align: left;
}
.hero-logo { width: 120px; height: 120px; justify-content: flex-start; margin-bottom: 1.15rem; }
.home-logo { width: clamp(82px, 10vw, 120px); height: auto; }
.hero-content { align-items: flex-start; text-align: left; }
.company-name { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: .35rem; font-size: clamp(2.35rem, 3.7vw, 3.2rem); line-height: 1.05; }
.company-word { display: inline; }
.home-page .brand-name { display: inline-block; margin-top: 0; }
.company-slogan { max-width: 28rem; margin-top: .7rem; font-size: .96rem; }
.company-desc { max-width: 38ch; margin-top: .8rem; font-size: 1rem; line-height: 1.7; }
.home-page .company-slogan, .home-page .company-desc { font-family: inherit; }
.home-divider { display: none; }
.options-grid {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: .8rem;
    padding: clamp(1.25rem, 3vw, 2.5rem);
    border-left: 1px solid var(--asep-line);
    background: color-mix(in srgb, var(--asep-surface-inset) 48%, transparent);
}
.option-card {
    min-width: 0;
    min-height: 150px;
    border: 1px solid var(--asep-line);
    border-radius: 13px;
    background: var(--asep-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    transition: transform .2s var(--asep-ease), border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.option-card::before { display: none; }
.option-card:hover { transform: translateY(-2px); border-color: var(--color-primary-border); background: var(--asep-surface-raised); box-shadow: var(--asep-shadow); }
.home-page .option-link {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 1rem;
    width: 100%;
    height: auto;
    min-height: 148px;
    padding: 1rem 1.15rem;
    line-height: 1.45;
    text-decoration: none;
}
.home-page .option-header { grid-column: 1; grid-row: 1; margin: 0; }
.home-page .option-content { grid-column: 2; grid-row: 1; align-items: flex-start; width: auto; margin: 0; text-align: left; }
.home-page .option-action { grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; margin: 0; padding: 0; border: 0; }
.option-icon { width: 40px; height: 40px; border: 1px solid var(--asep-line); border-radius: 11px; background: var(--asep-surface-inset); color: var(--color-primary); }
.home-page .option-title { padding: 0; font-family: inherit; font-size: 1rem; }
.home-page .option-desc { max-width: 45ch; margin: .35rem 0 0; font-family: inherit; font-size: .84rem; line-height: 1.55; }
.home-page .option-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    width: max-content;
    min-height: 0;
    padding: .35rem 0;
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--color-primary) !important;
    font-family: inherit;
    font-size: .81rem;
    white-space: nowrap;
}
.option-card:focus-within { outline: 2px solid var(--color-primary); outline-offset: 3px; }
[data-theme="light"] .home-card { background: rgba(255, 255, 255, .92); }
[data-theme="light"] .options-grid { background: rgba(237, 241, 246, .65); }

/* Login: brand and form have separate, quiet zones; form contracts stay intact. */
.login-page-container { min-height: 100%; padding: clamp(1rem, 3vw, 2.5rem); }
.login-wrapper { width: min(940px, 100%); }
.login-page-container .login-card {
    display: grid;
    grid-template-columns: minmax(260px, .82fr) minmax(350px, 1fr);
    grid-template-rows: auto 1fr auto;
    width: 100%;
    max-width: none;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--asep-line-strong);
    border-radius: 21px;
    background: var(--asep-surface);
    box-shadow: var(--asep-shadow);
    animation: asEpSurfaceEnter .42s var(--asep-ease) both;
}
.login-page-container .login-card::before,
.login-page-container .login-card::after { display: none; }
.login-page-container .page-actions { grid-column: 1 / -1; grid-row: 1; padding: 1rem 1.25rem 0; }
.login-page-container .login-header {
    position: relative;
    grid-column: 1;
    grid-row: 2 / 4;
    align-items: flex-start;
    justify-content: center;
    gap: .65rem;
    margin: 0;
    padding: clamp(1.6rem, 3vw, 2.8rem);
    overflow: hidden;
    border-right: 1px solid var(--asep-line);
    background:
        radial-gradient(circle at 90% 10%, rgba(16, 75, 143, .14), transparent 14rem),
        var(--asep-surface-inset);
    text-align: left;
}
.login-page-container .login-header::after {
    content: "";
    position: absolute;
    right: -3.5rem;
    bottom: -4rem;
    width: 14rem;
    aspect-ratio: 1;
    border: 1px solid var(--asep-line);
    border-radius: 50%;
    box-shadow: 0 0 0 14px color-mix(in srgb, var(--asep-line) 48%, transparent), 0 0 0 30px color-mix(in srgb, var(--asep-line) 30%, transparent);
    pointer-events: none;
}
.login-eyebrow { color: var(--color-primary); font-size: .68rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.login-page-container .login-logo { width: 104px; height: 104px; margin: 0 0 .3rem; object-fit: contain; }
.login-page-container .login-title { margin: 0; font-size: clamp(1.8rem, 3vw, 2.5rem); text-align: left; }
.login-page-container .login-subtitle { max-width: 26ch; margin: .25rem 0 0; text-align: left; }
.login-page-container .login-divider { width: 48px; height: 3px; margin: .8rem 0 0; }
.login-form-heading { margin-bottom: .2rem; }
.login-form-heading h2 { margin: 0; font-size: 1.2rem; }
.login-form-heading p { margin: .25rem 0 0; color: var(--asep-ink-muted); font-size: .86rem; }
.login-page-container .login-body { grid-column: 2; grid-row: 2; gap: 1.1rem; padding: 1.8rem clamp(1.4rem, 3vw, 2.4rem) 1.15rem; }
.login-page-container .login-body .form-group { gap: .42rem; }
.login-page-container .form-control:focus-visible { outline: none !important; box-shadow: 0 0 0 3px var(--asep-ring); }
.login-page-container .login-body .form-control { min-height: 48px; border-radius: 9px; }
.login-page-container .login-meta { gap: .75rem; flex-wrap: wrap; font-size: .82rem; }
.login-page-container .forgot-link { white-space: normal; text-align: right; }
.login-page-container .btn-login { min-height: 48px; border-radius: 9px; color: #10213b; background: var(--button-primary-gradient); box-shadow: 0 7px 18px rgba(255, 87, 27, .18); }
.login-page-container .btn-login:hover { color: #10213b; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(255, 87, 27, .24); }
.login-page-container .login-footer { grid-column: 2; grid-row: 3; margin: 0 1.5rem; padding: .9rem 0 1.25rem; border-top: 1px solid var(--asep-line); }
.login-page-container .login-footer p { margin: 0; }
.login-page-container .login-support { gap: .45rem; }
[data-theme="light"] .login-page-container .login-header { background: linear-gradient(145deg, #f4f7fb, #eaf0f7); }

@keyframes asEpSurfaceEnter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Motion stays short and functional; reduced-motion leaves states immediate. */
@media (max-width: 980px) {
    .home-card { grid-template-columns: minmax(0, .82fr) minmax(330px, 1.18fr); }
    .hero-section { padding: 2rem; }
    .options-grid { padding: 1.4rem; }
    .login-page-container .login-card { grid-template-columns: minmax(230px, .76fr) minmax(330px, 1fr); }
}
@media (max-width: 760px) {
    .home-card { grid-template-columns: minmax(0, 1fr); }
    .hero-section { padding: 1.5rem 1.5rem 1.1rem; }
    .hero-logo { width: 76px; height: 76px; flex-basis: 76px; margin-bottom: .75rem; }
    .home-logo { width: 72px; }
    .company-name { font-size: clamp(2rem, 8.5vw, 2.65rem); }
    .company-slogan { margin-top: .4rem; font-size: .85rem; }
    .company-desc { margin-top: .45rem; font-size: .92rem; }
    .options-grid { border-top: 1px solid var(--asep-line); border-left: 0; padding: 1rem; }
    .home-page .option-link {
        grid-template-columns: 40px minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: start;
        column-gap: .75rem;
        row-gap: .65rem;
        min-height: 0;
        padding: 1rem;
    }
    .home-page .option-header { grid-column: 1; grid-row: 1 / span 2; }
    .home-page .option-content { grid-column: 2; grid-row: 1; }
    .home-page .option-action { grid-column: 2; grid-row: 2; justify-content: flex-start; }
    .login-page-container .login-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
    .login-page-container .page-actions { grid-column: 1; grid-row: auto; padding: 1rem 1.1rem 0; }
    .login-page-container .login-header {
        grid-column: 1;
        grid-row: auto;
        display: grid;
        grid-template-columns: 54px minmax(0, 1fr);
        align-items: center;
        column-gap: .9rem;
        row-gap: .15rem;
        padding: 1rem 1.25rem;
        border-right: 0;
        border-bottom: 1px solid var(--asep-line);
        background: transparent;
    }
    .login-page-container .login-header::after { display: none; }
    .login-page-container .login-logo { grid-column: 1; grid-row: 1 / span 4; width: 54px; height: 54px; margin: 0; }
    .login-page-container .login-eyebrow,
    .login-page-container .login-title,
    .login-page-container .login-subtitle,
    .login-page-container .login-divider { grid-column: 2; }
    .login-page-container .login-title { font-size: 1.55rem; }
    .login-page-container .login-subtitle { max-width: none; font-size: .78rem; }
    .login-page-container .login-divider { width: 32px; margin-top: .25rem; }
    .login-page-container .login-body { grid-column: 1; grid-row: auto; padding: 1.25rem; }
    .login-page-container .login-footer { grid-column: 1; grid-row: auto; margin-inline: 1.25rem; padding: .8rem 0 1rem; }
}
@media (max-width: 480px) {
    .dashboard-navbar { padding-inline: .65rem; gap: .4rem; }
    .navbar-page-label { display: none; }
    .navbar-page-title { max-width: min(48vw, 230px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .navbar-right { gap: .3rem; }
    .navbar-user-info { display: none; }
    .dashboard-main { padding: .9rem .75rem 1.1rem; }
    .module-toolbar { flex-wrap: wrap; }
    .module-toolbar > *, .module-toolbar form { max-width: 100%; }
    .module-toolbar .btn { flex: 1 1 auto; }
    .form-card, .table-card, .dashboard-panel { padding: .9rem !important; }
    .table-responsive table { min-width: 620px; }
    .dashboard-intro { align-items: flex-start; flex-direction: column; gap: .7rem; margin-bottom: .85rem; }
    .dashboard-content.dashboard-admin .dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .dashboard-content.dashboard-admin .dashboard-kpis > .stat-card { min-height: 152px; padding: .82rem; border-radius: 12px; }
    .dashboard-content.dashboard-admin .dashboard-kpis > .stat-card:last-child { grid-column: 1 / -1; }
    .dashboard-content.dashboard-admin .dashboard-kpis .stat-label { font-size: .72rem; }
    .dashboard-content.dashboard-admin .dashboard-kpis .stat-extra { font-size: .67rem; }
}
@media (max-width: 370px) {
    .dashboard-content.dashboard-admin .dashboard-kpis { grid-template-columns: minmax(0, 1fr) !important; }
    .dashboard-content.dashboard-admin .dashboard-kpis > .stat-card:last-child { grid-column: auto; }
    .login-page-container .login-meta { align-items: flex-start; flex-direction: column; }
    .login-page-container .forgot-link { text-align: left; }
}
@media (max-height: 620px) and (min-width: 761px) {
    .home-page { padding-block: .8rem; }
    .hero-section { padding-block: 1rem; }
    .home-logo { width: 72px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .home-card, .login-page-container .login-card { animation: none !important; }
    .option-card:hover, .menu-item:hover, .btn-primary:hover, .btn-naranja:hover { transform: none; }
}
@media print {
    .dashboard-navbar, .dashboard-sidebar, .module-toolbar, .app-footer { box-shadow: none !important; }
}