/* ==========================================================
   REPORTES AsEp — VISUAL REDESIGN
   Design direction:
   - Preserve the AsEp blue/orange identity.
   - Dense information with strong hierarchy.
   - Quiet surfaces, crisp borders, restrained shadows.
   - Motion is purposeful and short.
   - No changes to application behavior or DOM contracts.
   ========================================================== */

:root {
    --asep-ink: #0b1730;
    --asep-ink-soft: #34445d;
    --asep-blue: #1459d9;
    --asep-blue-deep: #0d47a1;
    --asep-orange: #f05a28;
    --asep-orange-soft: #ff8357;
    --asep-surface: #ffffff;
    --asep-surface-2: #f8fafc;
    --asep-surface-3: #eef3f8;
    --asep-border: rgba(15, 31, 58, .09);
    --asep-border-strong: rgba(15, 31, 58, .16);
    --asep-shadow-1: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px rgba(15, 23, 42, .05);
    --asep-shadow-2: 0 18px 50px rgba(15, 23, 42, .09);
    --asep-shadow-blue: 0 14px 34px rgba(20, 89, 217, .18);
    --asep-radius-sm: 10px;
    --asep-radius-md: 14px;
    --asep-radius-lg: 20px;
    --asep-radius-xl: 26px;
    --asep-motion-fast: 160ms cubic-bezier(.22, 1, .36, 1);
    --asep-motion: 220ms cubic-bezier(.22, 1, .36, 1);
}

[data-theme="dark"] {
    --asep-ink: #f5f8ff;
    --asep-ink-soft: #aab9d2;
    --asep-blue: #6ea8ff;
    --asep-blue-deep: #4e8df4;
    --asep-orange: #ff8a57;
    --asep-orange-soft: #ff9d72;
    --asep-surface: #101b2c;
    --asep-surface-2: #0c1727;
    --asep-surface-3: #15243a;
    --asep-border: rgba(148, 163, 184, .12);
    --asep-border-strong: rgba(148, 163, 184, .19);
    --asep-shadow-1: 0 1px 2px rgba(0, 0, 0, .22), 0 12px 34px rgba(0, 0, 0, .18);
    --asep-shadow-2: 0 20px 50px rgba(0, 0, 0, .26);
    --asep-shadow-blue: 0 14px 34px rgba(37, 99, 235, .22);
}

/* ----------------------------------------------------------
   Global surfaces and type
   ---------------------------------------------------------- */

html {
    background: var(--bg-main);
    scroll-behavior: smooth;
}

body {
    font-family: "Aptos", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--color-text);
    background:
        radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--color-primary) 6%, transparent), transparent 28rem),
        radial-gradient(circle at 8% 100%, color-mix(in srgb, var(--color-secondary) 5%, transparent), transparent 24rem),
        var(--bg-main);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.navbar-page-title,
.module-title,
.login-title,
.company-name {
    font-family: "Aptos Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    letter-spacing: -.025em;
}

::selection {
    background: color-mix(in srgb, var(--color-primary) 24%, transparent);
    color: var(--color-heading);
}

:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--color-primary) 78%, white 22%);
    outline-offset: 3px;
}

/* Reduce the old global transition-all behavior. */
* {
    transition-property: none;
}

button,
a,
input,
select,
textarea,
.menu-item,
.card,
.stat-card,
.summary-card,
.module-card,
.table-action,
.navbar-icon,
.navbar-toggle,
.option-card,
.login-card,
.btn,
.notification-panel,
.dropdown-menu,
.modal-content {
    transition-property: transform, opacity, background-color, border-color, box-shadow, color;
    transition-duration: var(--asep-motion-fast);
    transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}

/* ----------------------------------------------------------
   Dashboard shell
   ---------------------------------------------------------- */

.dashboard-shell {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-main) 92%, white 8%), var(--bg-main));
}

.dashboard-workspace {
    background:
        radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--color-primary) 5%, transparent), transparent 30rem),
        var(--bg-main);
}

.dashboard-main {
    padding-top: calc(var(--dashboard-padding) + 1.25rem);
}

.dashboard-content {
    isolation: isolate;
}

/* ----------------------------------------------------------
   Sidebar — more editorial, less bulky
   ---------------------------------------------------------- */

.dashboard-sidebar {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-sidebar) 97%, var(--color-secondary) 3%), var(--bg-sidebar));
    border-right: 1px solid var(--border-light);
    box-shadow: 10px 0 30px rgba(15, 23, 42, .035);
}

.sidebar-header {
    padding: 1.15rem .95rem 1rem;
}

.dashboard-sidebar .sidebar-logo {
    width: 62px;
    height: 62px;
}

.sidebar-divider {
    margin: 0 .95rem;
    background: var(--border-light);
}

.sidebar-menu {
    padding: 1rem .65rem 1.25rem;
}

.menu-group {
    margin-bottom: 1.2rem;
}

.menu-group-title {
    padding: 0 .7rem;
    margin-bottom: .55rem;
    font-size: .66rem;
    letter-spacing: .16em;
    font-weight: 750;
    color: var(--color-text-muted);
}

.menu-item {
    gap: .75rem;
    min-height: 46px;
    margin-bottom: .24rem;
    padding: .5rem .62rem;
    border-radius: 13px;
    color: var(--color-text-secondary);
}

.menu-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 11px;
    background: transparent;
    color: var(--color-text-muted);
}

.menu-item:hover {
    transform: translateX(2px);
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
    color: var(--color-heading);
}

.menu-item:hover .menu-icon {
    background: color-mix(in srgb, var(--color-primary) 11%, transparent);
    color: var(--color-primary);
}

.menu-item.active {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
    color: var(--color-heading);
    box-shadow: inset 3px 0 0 var(--color-primary), 0 3px 14px color-mix(in srgb, var(--color-primary) 6%, transparent);
}

.menu-item.active .menu-icon {
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
}

.menu-item.active .menu-text {
    font-weight: 700;
}

.sidebar-footer {
    padding: .8rem;
    border-top: 1px solid var(--border-light);
}

.logout-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 44px;
    padding: .55rem .7rem;
    border-radius: 12px;
    color: var(--color-text-muted);
    text-decoration: none;
}

.logout-item:hover {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

/* ----------------------------------------------------------
   Navbar — floating control bar
   ---------------------------------------------------------- */

.dashboard-navbar {
    background: color-mix(in srgb, var(--bg-main) 84%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--border-light) 80%, transparent);
    box-shadow: 0 8px 28px rgba(15, 23, 42, .035);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.navbar-left {
    gap: .75rem;
}

.navbar-page-label {
    font-size: .64rem;
    font-weight: 750;
    letter-spacing: .16em;
}

.navbar-page-title {
    font-size: 1.12rem;
    font-weight: 760;
}

.navbar-search input {
    height: 42px;
    border-color: var(--border-light);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-card) 82%, transparent);
}

.navbar-search input:hover {
    border-color: var(--border-normal);
}

.navbar-search input:focus {
    border-color: color-mix(in srgb, var(--color-primary) 48%, var(--border-normal));
    box-shadow: 0 0 0 4px var(--color-primary-soft), 0 8px 22px rgba(15, 23, 42, .05);
}

.navbar-toggle,
.navbar-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
}

.navbar-toggle:hover,
.navbar-icon:hover {
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    color: var(--color-primary);
    transform: translateY(-1px);
}

.navbar-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
    box-shadow: var(--asep-shadow-blue);
}

.navbar-user-info strong {
    font-weight: 700;
}

/* ----------------------------------------------------------
   Module headers and toolbars
   ---------------------------------------------------------- */

.module-header {
    margin-bottom: 1.35rem;
}

.module-header-content {
    gap: 1rem;
}

.module-title {
    font-size: clamp(1.55rem, 2vw, 2.1rem);
    font-weight: 760;
    color: var(--color-heading);
}

.module-description {
    max-width: 760px;
    color: var(--color-text-muted);
    font-size: .93rem;
}

.module-toolbar {
    margin-bottom: 1.1rem;
    padding: .7rem;
    gap: .7rem;
    border: 1px solid var(--border-light);
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
    box-shadow: 0 8px 28px rgba(15, 23, 42, .035);
}

.toolbar-search .form-control,
.module-toolbar .form-control {
    min-height: 42px;
    border-radius: 11px;
}

/* ----------------------------------------------------------
   Cards / panels / KPI blocks
   ---------------------------------------------------------- */

.card,
.glass-card,
.dashboard-panel,
.stat-card,
.summary-card,
.module-card,
.table-card,
.form-card {
    border: 1px solid var(--border-light);
    background: color-mix(in srgb, var(--bg-card) 96%, transparent);
    box-shadow: var(--asep-shadow-1);
}

.card,
.dashboard-panel,
.module-card,
.table-card,
.form-card {
    border-radius: var(--asep-radius-lg);
}

.card:hover,
.stat-card:hover,
.summary-card:hover,
.module-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--asep-shadow-2);
}

.card-header,
.dashboard-panel-header,
.module-card-heading {
    border-bottom-color: var(--border-light);
}

.card-title-icon,
.panel-icon,
.module-card-icon,
.stat-icon,
.summary-icon {
    border-radius: 12px;
}

.stat-card {
    position: relative;
    min-height: 142px;
    padding: 1.15rem;
    overflow: hidden;
    border-radius: 18px;
}

.stat-card::after {
    content: "";
    position: absolute;
    inset: auto -15% -42% auto;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 9%, transparent), transparent 68%);
    pointer-events: none;
}

.stat-value,
.summary-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.04em;
}

.stat-value {
    font-size: clamp(1.7rem, 2.4vw, 2.25rem);
    font-weight: 780;
}

.stat-label,
.summary-label {
    font-weight: 680;
}

.stat-extra,
.summary-extra {
    color: var(--color-text-muted);
}

.kpi-sparkline {
    opacity: .85;
}

.summary-card {
    position: relative;
    overflow: hidden;
    padding: 1rem 1.05rem;
    border-radius: 17px;
}

.summary-watermark {
    opacity: .035;
    font-size: 5rem;
}

.module-card {
    overflow: hidden;
}

.module-card-main {
    padding: 1.35rem;
}

.module-card-footer {
    padding: .85rem 1.1rem;
    border-top: 1px solid var(--border-light);
    background: color-mix(in srgb, var(--bg-card) 88%, var(--color-primary) 2%);
}

.module-card-button {
    min-height: 38px;
    border-radius: 10px;
}

/* ----------------------------------------------------------
   Tables — readable and quieter
   ---------------------------------------------------------- */

.table-responsive {
    border-color: var(--border-light);
    border-radius: 16px;
    box-shadow: 0 6px 22px rgba(15, 23, 42, .03);
}

.table thead {
    background: color-mix(in srgb, var(--color-secondary) 5%, var(--bg-card));
}

.table thead th {
    padding: .8rem .9rem;
    color: var(--color-text-muted);
    font-size: .72rem;
    font-weight: 780;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-light);
}

.table tbody td {
    padding: .85rem .9rem;
    border-bottom: 1px solid var(--border-light);
}

.table tbody tr {
    background: transparent;
}

.table tbody tr:hover {
    background: color-mix(in srgb, var(--color-primary) 4%, transparent);
}

.table-action {
    width: 34px;
    height: 34px;
    border-radius: 10px;
}

/* ----------------------------------------------------------
   Forms — calm inputs, strong focus
   ---------------------------------------------------------- */

.form-label {
    font-size: .82rem;
    font-weight: 740;
    letter-spacing: .01em;
    color: var(--color-heading);
}

.form-control,
.form-select,
.form-textarea {
    min-height: 44px;
    border-color: var(--input-border);
    border-radius: 11px;
    background: var(--input-bg);
}

.form-control:hover,
.form-select:hover,
.form-textarea:hover {
    border-color: var(--border-strong);
}

.form-control:focus,
.form-select:focus,
.form-textarea:focus {
    box-shadow: 0 0 0 4px var(--color-primary-soft), 0 8px 18px rgba(15, 23, 42, .04);
}

.form-check-input {
    border-radius: 5px;
}

/* ----------------------------------------------------------
   Buttons — one clear primary action
   ---------------------------------------------------------- */

.btn {
    min-height: 42px;
    border-radius: 11px;
    font-weight: 700;
    letter-spacing: -.005em;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary,
.btn-naranja {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 9px 22px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.btn-primary:hover,
.btn-naranja:hover {
    background: linear-gradient(135deg, var(--color-primary-hover), var(--color-accent));
    border-color: transparent;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.btn-secondary {
    background: var(--bg-card);
}

.btn-outline-primary,
.btn-outline {
    border-color: color-mix(in srgb, var(--color-primary) 40%, var(--border-strong));
}

/* ----------------------------------------------------------
   Badges / status pills
   ---------------------------------------------------------- */

.badge,
.status-badge,
.status-label {
    border-radius: 999px;
    padding: .34rem .62rem;
    font-size: .72rem;
    font-weight: 760;
    letter-spacing: .02em;
}

/* ----------------------------------------------------------
   Notifications / overlays / modals
   ---------------------------------------------------------- */

.notification-panel,
.modal-content,
.dropdown-menu {
    border: 1px solid var(--border-light);
    border-radius: 16px;
    background: var(--bg-card);
    box-shadow: var(--asep-shadow-2);
}

.notification-panel {
    overflow: hidden;
}

.modal-header,
.modal-footer {
    border-color: var(--border-light);
}

/* ----------------------------------------------------------
   Public Home
   ---------------------------------------------------------- */

body:has(.home-page) {
    background:
        radial-gradient(circle at 20% 10%, rgba(20, 89, 217, .12), transparent 24rem),
        radial-gradient(circle at 84% 80%, rgba(240, 90, 40, .12), transparent 28rem),
        var(--bg-main);
}

.home-card {
    width: min(100%, 1180px);
    padding: clamp(1rem, 2vw, 2rem);
    border-radius: 28px;
    border: 1px solid color-mix(in srgb, var(--border-light) 80%, white 20%);
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
    box-shadow: 0 26px 80px rgba(15, 23, 42, .10);
    backdrop-filter: blur(16px) saturate(145%);
    -webkit-backdrop-filter: blur(16px) saturate(145%);
}

[data-theme="dark"] .home-card {
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
    box-shadow: 0 28px 90px rgba(0, 0, 0, .28);
}

.options-grid {
    gap: 1rem;
}

.option-card {
    border-radius: 19px;
    border: 1px solid var(--border-light);
    background: color-mix(in srgb, var(--bg-card) 96%, transparent);
    box-shadow: var(--asep-shadow-1);
}

.option-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--color-primary) 20%, var(--border-light));
    box-shadow: var(--asep-shadow-2);
}

.option-link {
    padding: 1.1rem 1.15rem;
}

.option-icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
}

.option-title {
    font-size: 1.1rem;
    font-weight: 740;
}

.option-desc {
    color: var(--color-text-muted);
    line-height: 1.6;
}

.option-btn {
    border-radius: 10px;
}

/* ----------------------------------------------------------
   Login
   ---------------------------------------------------------- */

body:has(.login-page-container) {
    background:
        radial-gradient(circle at 22% 18%, rgba(20, 89, 217, .10), transparent 23rem),
        radial-gradient(circle at 84% 78%, rgba(240, 90, 40, .09), transparent 25rem),
        var(--bg-main);
}

.login-card {
    border-radius: 24px;
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
    border: 1px solid var(--border-light);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .10);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.login-title {
    font-size: clamp(1.8rem, 4vw, 2.25rem);
    font-weight: 780;
}

.login-subtitle {
    color: var(--color-text-muted);
}

.login-divider {
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    border-radius: 999px;
}

.btn-login,
.login-actions .btn {
    min-height: 52px;
    border-radius: 13px;
    box-shadow: var(--asep-shadow-blue);
}

/* ----------------------------------------------------------
   Footer
   ---------------------------------------------------------- */

.dashboard-footer,
.app-footer {
    color: var(--color-text-muted);
    border-top-color: var(--border-light);
}

/* ----------------------------------------------------------
   Empty / error states
   ---------------------------------------------------------- */

.empty-state,
.table-empty {
    color: var(--color-text-muted);
}

.empty-state-icon {
    border-radius: 16px;
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    color: var(--color-primary);
}

/* ----------------------------------------------------------
   Responsive refinements
   ---------------------------------------------------------- */

@media (max-width: 991px) {
    .dashboard-main {
        padding-top: calc(var(--dashboard-padding) + .9rem);
    }

    .module-toolbar {
        align-items: stretch;
    }
}

@media (max-width: 768px) {
    .dashboard-main {
        padding-top: calc(var(--dashboard-padding) + .7rem);
    }

    .dashboard-panel,
    .card,
    .module-card,
    .table-card,
    .form-card {
        border-radius: 16px;
    }

    .module-title {
        font-size: 1.45rem;
    }

    .home-card {
        border-radius: 21px;
    }
}

@media (max-width: 576px) {
    .dashboard-main {
        padding: 1rem .85rem;
        padding-top: calc(1rem + .7rem);
    }

    .module-toolbar {
        padding: .55rem;
    }

    .btn {
        min-height: 40px;
    }

    .home-card {
        padding: .8rem;
    }
}

@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;
    }
}

@media print {
    .dashboard-navbar,
    .dashboard-sidebar,
    .module-toolbar,
    .navbar-search {
        box-shadow: none !important;
    }
}