/* TuAgendaMédica · interfaz elegante 2026
   Capa visual exclusiva para el sistema privado y sus pantallas de acceso. */

:root {
    --primary: #0f766e;
    --primary-dark: #0b5f5a;
    --accent: #0891b2;
    --success: #0f9f72;
    --warning: #d99012;
    --danger: #dc4c5c;
    --dark: #102632;
    --ink: #102632;
    --app-teal: #0f766e;
    --app-blue: #3f63dd;
    --app-canvas: #f3f7f7;
    --gray-900: #18313d;
    --gray-700: #38515d;
    --gray-600: #536a74;
    --gray-500: #71868f;
    --gray-400: #98a8ae;
    --gray-300: #c7d2d5;
    --gray-200: #dfe7e8;
    --gray-100: #edf2f2;
    --gray-50: #f7f9f9;
    --gradient: linear-gradient(135deg, #0f766e 0%, #0891b2 52%, #3f63dd 100%);
    --gradient-warm: linear-gradient(145deg, #12a594 0%, #087f78 54%, #3f63dd 100%);
    --shadow-sm: 0 2px 8px rgba(16,38,50,.05);
    --shadow-md: 0 12px 28px rgba(16,38,50,.09);
    --shadow-lg: 0 24px 65px rgba(5,25,34,.17);
}

/* Estructura principal */
.app-body {
    background:
        radial-gradient(circle at 86% 2%, rgba(8,145,178,.07), transparent 22rem),
        linear-gradient(135deg, #f7faf9 0%, #f1f6f6 55%, #f6f8fb 100%);
    color: var(--ink);
}

.app-body .layout {
    grid-template-columns: 264px minmax(0, 1fr);
}

.app-body .sidebar {
    background:
        radial-gradient(circle at 18% -4%, rgba(45,212,191,.22), transparent 21rem),
        radial-gradient(circle at 105% 32%, rgba(63,99,221,.18), transparent 18rem),
        linear-gradient(180deg, #092c35 0%, #08242f 44%, #071d29 100%);
    padding: 17px 12px 14px;
    border-right: 1px solid rgba(255,255,255,.09);
    box-shadow: 16px 0 42px rgba(7,29,41,.08);
}

.app-body .brand {
    min-height: 60px;
    gap: 11px;
    margin: 0 2px 10px;
    padding: 4px 9px 15px;
    border-color: rgba(255,255,255,.09);
    font-size: 1.12rem;
}

.app-body .brand-icon {
    width: 43px;
    height: 43px;
    border-radius: 14px;
    background: linear-gradient(145deg, #20c4ad 0%, #0b7d78 58%, #3658ca 100%);
    box-shadow: 0 12px 28px rgba(3,17,25,.3), inset 0 1px 0 rgba(255,255,255,.32);
}

.app-body .brand strong {
    background: linear-gradient(110deg, #73ead8, #a9d8ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.app-body .sidebar-collapse-btn {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.1);
    color: #bdd2d8;
    border-radius: 10px;
}

.app-body .sidebar-collapse-btn:hover {
    background: rgba(45,212,191,.13);
    border-color: rgba(94,234,212,.24);
    color: #fff;
}

.app-body .nav { gap: 3px; }

.app-body .nav-group-title {
    color: rgba(203,224,228,.61);
    font-size: .64rem;
    letter-spacing: .12em;
    padding: 15px 10px 6px;
}

.app-body .nav-group-title::before {
    width: 5px;
    height: 5px;
    background: #52d9c4;
    box-shadow: 0 0 0 4px rgba(82,217,196,.09);
}

.app-body .nav-item {
    min-height: 43px;
    gap: 10px;
    padding: 6px 9px;
    border-radius: 11px;
    color: rgba(222,235,238,.76);
    font-size: .84rem;
    font-weight: 620;
}

.app-body .nav-item > svg {
    box-sizing: content-box;
    width: 17px;
    height: 17px;
    padding: 6px;
    border-radius: 9px;
    background: rgba(255,255,255,.055);
    color: #a9c4ca;
    opacity: 1;
}

.app-body .nav-item:hover {
    transform: none;
    background: rgba(255,255,255,.075);
    border-color: rgba(255,255,255,.08);
}

.app-body .nav-item:hover > svg {
    transform: none;
    background: rgba(82,217,196,.11);
    color: #75ead7;
}

.app-body .nav-item.active {
    color: #fff;
    background: linear-gradient(110deg, rgba(35,182,163,.19), rgba(62,101,203,.13));
    border-color: rgba(93,222,203,.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 9px 20px rgba(0,15,22,.17);
}

.app-body .nav-item.active::before {
    left: -1px;
    width: 3px;
    height: 25px;
    background: #62e6d2;
    box-shadow: 0 0 12px rgba(98,230,210,.6);
}

.app-body .nav-item.active > svg {
    color: #fff;
    background: linear-gradient(145deg, #1caa99, #2e69b8);
    box-shadow: 0 6px 14px rgba(0,19,27,.2);
}

.app-body .sidebar-footer {
    border-color: rgba(255,255,255,.09);
    padding-top: 12px;
}

.app-body .user-card {
    padding: 9px;
    border-radius: 13px;
    background: rgba(255,255,255,.065);
    border-color: rgba(255,255,255,.09);
}

.app-body .user-avatar {
    border-radius: 11px;
    background: linear-gradient(145deg, #1bb7a4, #3c60d0);
}

.app-body .logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 11px;
    background: rgba(255,255,255,.045);
}

.app-body .logout-btn svg { width: 17px; height: 17px; }

/* Cabecera y área de trabajo */
.app-body .main {
    padding: 0 30px 38px;
}

.app-body .topbar {
    min-height: 94px;
    margin-bottom: 23px;
    padding: 15px 0;
    border-color: rgba(197,211,214,.72);
    background: rgba(246,250,249,.88);
    backdrop-filter: blur(20px) saturate(145%);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
}

.app-body .topbar-left { gap: 13px; }

.app-body .topbar-page-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(15,118,110,.13);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(227,242,240,.9));
    color: #0f766e;
    box-shadow: 0 7px 18px rgba(13,71,76,.08), inset 0 1px 0 #fff;
}

.app-body .topbar-page-icon svg { width: 22px; height: 22px; }

.app-body .topbar-heading .topbar-clinic {
    max-width: 46vw;
    margin-bottom: 1px;
    color: #0c8077;
    font-size: .66rem;
    letter-spacing: .105em;
}

.app-body .topbar h1 {
    color: #102b36;
    font-size: clamp(1.45rem, 1.8vw, 1.88rem);
}

.app-body .topbar-heading small {
    display: block;
    margin-top: 2px;
    color: #748890;
    font-size: .76rem;
    font-weight: 500;
    white-space: nowrap;
}

.app-body .command-trigger,
.app-body .global-new-appointment {
    min-height: 42px;
    border-radius: 11px;
}

.app-body .command-trigger {
    background: rgba(255,255,255,.82);
    border-color: #d8e3e3;
    color: #435b65;
    box-shadow: 0 4px 12px rgba(16,38,50,.04);
}

.app-body .command-trigger:hover {
    border-color: rgba(15,118,110,.3);
    color: #0f766e;
    background: #fff;
}

.app-body .command-trigger kbd {
    border-color: #d6e0e1;
    background: #f2f6f6;
    color: #72848c;
}

.app-body .global-new-appointment {
    background: linear-gradient(135deg, #0f766e 0%, #098b91 58%, #315bc7 100%);
    box-shadow: 0 9px 20px rgba(15,118,110,.2);
}

.app-body .global-new-appointment:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(15,118,110,.25);
}

.app-body .content { max-width: 1540px; }

/* Componentes generales */
.app-body .btn {
    min-height: 40px;
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: -.005em;
}

.app-body .btn svg { width: 17px; height: 17px; }

.app-body .btn-primary {
    background: linear-gradient(135deg, #0f766e 0%, #0a8e91 56%, #315cc9 100%);
    box-shadow: 0 8px 18px rgba(15,118,110,.19);
}

.app-body .btn-primary:hover {
    box-shadow: 0 12px 25px rgba(15,118,110,.24);
}

.app-body .btn-secondary {
    border-color: #d7e1e2;
    background: rgba(255,255,255,.91);
    color: #334b56;
    box-shadow: 0 3px 9px rgba(16,38,50,.035);
}

.app-body .btn-secondary:hover {
    border-color: rgba(15,118,110,.35);
    color: #0f766e;
    background: #fff;
}

.app-body .card,
.app-body .table-wrap,
.app-body .agenda-wrap,
.app-body .onboarding-panel {
    border-color: rgba(199,211,214,.76);
    border-radius: 17px;
    box-shadow: 0 8px 25px rgba(16,38,50,.055);
}

.app-body .card,
.app-body .agenda-wrap { background: rgba(255,255,255,.94); }

.app-body .card:hover,
.app-body .table-wrap:hover {
    border-color: rgba(139,165,171,.72);
    box-shadow: 0 12px 31px rgba(16,38,50,.075);
}

.app-body .flash {
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(16,38,50,.045);
}

.app-body .field label {
    color: #38515d;
    font-weight: 700;
}

.app-body .field input,
.app-body .field select,
.app-body .field textarea,
.app-body input[type="search"],
.app-body input[type="date"],
.app-body select {
    border-color: #d5e0e1;
    border-radius: 10px;
    background: #fbfcfc;
    color: #203a45;
}

.app-body .field input:hover,
.app-body .field select:hover,
.app-body .field textarea:hover,
.app-body input[type="search"]:hover,
.app-body input[type="date"]:hover,
.app-body select:hover { border-color: #b8c9cc; }

.app-body .field input:focus,
.app-body .field select:focus,
.app-body .field textarea:focus,
.app-body input:focus,
.app-body select:focus,
.app-body textarea:focus {
    border-color: #15968b;
    box-shadow: 0 0 0 4px rgba(15,118,110,.1);
    outline: none;
}

.app-body .table-wrap { overflow: hidden; background: #fff; }
.app-body table.data th {
    background: #f2f6f6;
    color: #60747d;
    font-size: .72rem;
    letter-spacing: .075em;
}
.app-body table.data td { color: #2b434e; border-color: #edf1f2; }
.app-body table.data tbody tr:hover td { background: #f5faf9; }

.app-body .badge {
    border: 1px solid currentColor;
    border-color: color-mix(in srgb, currentColor 20%, transparent);
    font-weight: 700;
}

/* Indicadores */
.app-body .stats-grid {
    gap: 14px;
    margin-bottom: 23px;
}

.app-body .stat-card {
    min-height: 164px;
    padding: 19px;
    border: 1px solid rgba(199,211,214,.75);
    border-radius: 16px;
    background: rgba(255,255,255,.95);
    box-shadow: 0 7px 22px rgba(16,38,50,.05);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.app-body .stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(15,118,110,.22);
    box-shadow: 0 13px 29px rgba(16,38,50,.08);
}

.app-body .stat-card::after {
    content: "";
    position: absolute;
    inset: auto 17px 0;
    height: 3px;
    border-radius: 99px 99px 0 0;
    opacity: .8;
}

.app-body .stat-card-blue::after { background: #3f63dd; }
.app-body .stat-card-teal::after { background: #0d9b9d; }
.app-body .stat-card-violet::after { background: #7f62cf; }
.app-body .stat-card-emerald::after { background: #0f9f72; }

.app-body .stat-card .stat-icon {
    width: 43px;
    height: 43px;
    margin-bottom: 13px;
    border-radius: 12px;
}

.app-body .stat-card .stat-value {
    color: #122d38;
    font-size: 1.85rem;
    letter-spacing: -.045em;
}

.app-body .stat-card .stat-label { color: #687d86; font-weight: 600; }

.app-body .stat-foot {
    display: block;
    margin-top: 8px;
    color: #9aa9af;
    font-size: .7rem;
    font-weight: 650;
}

/* Bienvenida y accesos del inicio */
.app-body .dashboard-welcome {
    position: relative;
    display: grid;
    grid-template-columns: minmax(300px,.86fr) minmax(520px,1.4fr);
    gap: 24px;
    align-items: center;
    min-height: 196px;
    margin-bottom: 18px;
    padding: 25px 27px;
    overflow: hidden;
    border: 1px solid rgba(93,222,203,.16);
    border-radius: 19px;
    background:
        radial-gradient(circle at 93% 10%, rgba(87,220,199,.16), transparent 18rem),
        radial-gradient(circle at 12% 120%, rgba(63,99,221,.17), transparent 22rem),
        linear-gradient(125deg, #092f38 0%, #0b4650 55%, #173f60 100%);
    color: #fff;
    box-shadow: 0 18px 42px rgba(7,38,49,.15);
}

.app-body .dashboard-welcome::after {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    right: -75px;
    top: -100px;
    border: 38px solid rgba(255,255,255,.035);
    border-radius: 50%;
}

.app-body .dashboard-welcome-copy,
.app-body .dashboard-quick-actions { position: relative; z-index: 1; }

.app-body .dashboard-welcome-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    color: #a8f1e5;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .105em;
    text-transform: uppercase;
}

.app-body .dashboard-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5ce0c9;
    box-shadow: 0 0 0 5px rgba(92,224,201,.11), 0 0 12px rgba(92,224,201,.55);
}

.app-body .dashboard-welcome h2 {
    margin-bottom: 7px;
    color: #fff;
    font-size: clamp(1.55rem,2.25vw,2.18rem);
    line-height: 1.1;
}

.app-body .dashboard-welcome-copy > p {
    max-width: 490px;
    color: rgba(225,241,243,.75);
    font-size: .89rem;
}

.app-body .dashboard-welcome-date {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 17px;
    color: rgba(225,241,243,.68);
    font-size: .73rem;
    font-weight: 650;
    text-transform: none;
}

.app-body .dashboard-welcome-date svg { width: 16px; height: 16px; color: #62dfcd; }

.app-body .dashboard-quick-actions {
    display: grid;
    gap: 8px;
}

.app-body .dashboard-quick-action {
    display: grid;
    grid-template-columns: 39px minmax(0,1fr) 17px;
    gap: 11px;
    align-items: center;
    min-height: 48px;
    padding: 7px 11px 7px 8px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 13px;
    background: rgba(255,255,255,.075);
    color: #fff;
    backdrop-filter: blur(8px);
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.app-body .dashboard-quick-action:hover {
    transform: translateX(3px);
    background: rgba(255,255,255,.12);
    border-color: rgba(126,234,217,.25);
}

.app-body .dashboard-quick-action.is-primary {
    background: linear-gradient(110deg, rgba(34,187,166,.25), rgba(63,99,221,.18));
    border-color: rgba(99,231,210,.23);
}

.app-body .dashboard-quick-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(255,255,255,.11);
    color: #7aebda;
}

.app-body .dashboard-quick-icon svg { width: 19px; height: 19px; }
.app-body .dashboard-quick-action strong { display: block; font-size: .84rem; }
.app-body .dashboard-quick-action small { display: block; margin-top: 1px; color: rgba(225,241,243,.63); font-size: .69rem; }
.app-body .dashboard-action-arrow { width: 16px; height: 16px; color: rgba(225,241,243,.55); }

/* Onboarding */
.app-body .onboarding-panel {
    padding: 23px;
    background: rgba(255,255,255,.96);
}

.app-body .onboarding-kicker {
    color: #0f766e;
    background: #e9f7f5;
    border-color: rgba(15,118,110,.13);
}

.app-body .onboarding-score strong { color: #0f766e; }
.app-body .onboarding-progress { background: #e8efef; }
.app-body .onboarding-progress span { background: linear-gradient(90deg,#15a492,#0e8a94,#3f63dd); }
.app-body .onboarding-shortcut { border-radius: 13px; }
.app-body .onboarding-shortcut.is-primary { border-color: rgba(15,118,110,.25); background: #eef9f7; }
.app-body .onboarding-shortcut span,
.app-body .onboarding-next-label,
.app-body .onboarding-step-action { color: #0f766e; }
.app-body .onboarding-next { border-color: rgba(15,118,110,.17); background: linear-gradient(110deg,#f0faf8,#f2f7fb); }
.app-body .onboarding-step { border-radius: 13px; }
.app-body .onboarding-step.is-done { border-color: rgba(15,159,114,.22); background: #f1faf7; }

/* Calendario y reportes */
.app-body .agenda-wrap { padding: 16px; }
.app-body .fc .fc-toolbar-title { color: #18333f; font-size: 1.18rem !important; }
.app-body .fc-button-primary {
    background: linear-gradient(135deg,#0f766e,#2476a3) !important;
    border-radius: 9px !important;
    box-shadow: 0 6px 14px rgba(15,118,110,.16) !important;
}
.app-body .fc-theme-standard td,
.app-body .fc-theme-standard th { border-color: #e2e9ea !important; }
.app-body .fc .fc-col-header-cell-cushion { color: #38515d; font-size: .76rem; }
.app-body .fc .fc-timegrid-slot-label-cushion { color: #6f828a; font-size: .76rem; }
.app-body canvas { max-width: 100%; }

.app-body .modal {
    border: 1px solid rgba(199,211,214,.8);
    border-radius: 19px;
    box-shadow: 0 28px 80px rgba(7,29,41,.24);
}
.app-body .modal-backdrop { background: rgba(7,29,41,.6); backdrop-filter: blur(7px); }

/* Ajustes de las vistas más utilizadas */
.app-body.page-agenda-index .agenda-toolbar {
    gap: 7px;
}
.app-body.page-agenda-index .agenda-toolbar .btn,
.app-body.page-agenda-index .agenda-toolbar select,
.app-body.page-agenda-index .agenda-search input {
    min-height: 42px;
    border-radius: 10px;
}
.app-body.page-agenda-index .agenda-toolbar select {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-body.page-agenda-index .agenda-toolbar .btn-ghost {
    border: 1px solid transparent;
    color: #516872;
}
.app-body.page-agenda-index .agenda-toolbar .btn-ghost:hover {
    border-color: #d7e3e3;
    background: #fff;
    color: #0f766e;
}
.app-body.page-agenda-index .agenda-search input {
    border-color: #d7e1e2;
    background: rgba(255,255,255,.9);
}

.app-body.page-pacientes-index .stat-grid {
    gap: 12px;
    margin-bottom: 17px;
}
.app-body.page-pacientes-index .stat-grid .stat-card {
    min-height: 126px;
    padding: 18px;
}
.app-body.page-pacientes-index .filters {
    display: grid;
    grid-template-columns: minmax(260px,1.55fr) repeat(3,minmax(145px,.8fr)) auto auto;
    align-items: center;
    gap: 9px;
    margin-bottom: 15px;
    padding: 14px;
    border: 1px solid rgba(199,211,214,.75);
    border-radius: 15px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 7px 22px rgba(16,38,50,.045);
}
.app-body.page-pacientes-index .filters input,
.app-body.page-pacientes-index .filters select {
    width: 100%;
    min-width: 0 !important;
    min-height: 40px;
    border-color: #d5e0e1;
    border-radius: 10px;
    background: #fbfcfc;
}
.app-body.page-pacientes-index .patient-birthday-filter {
    min-height: 40px;
    padding: 0 9px;
    border-radius: 9px;
    color: #5e737c;
    white-space: nowrap;
}
.app-body.page-pacientes-index .patient-birthday-filter input[type="checkbox"] {
    width: 17px;
    height: 17px;
    min-width: 17px !important;
    min-height: 17px;
    padding: 0;
    margin: 0;
    accent-color: #0f766e;
}
.app-body.page-pacientes-index .patient-search-field { min-width: 0; }
.app-body.page-pacientes-index .patient-search-field input { width: 100%; min-width: 0 !important; }

.app-body.page-reportes-index .report-tabs {
    gap: 5px;
    margin-bottom: 17px;
    padding: 5px;
    border-color: #d7e1e2;
    border-radius: 12px;
    background: #eaf0f0;
}
.app-body.page-reportes-index .report-tab {
    min-height: 38px;
    padding: 8px 13px;
    border-radius: 9px;
    color: #5d727b;
}
.app-body.page-reportes-index .report-tab:hover { color: #0f766e; background: rgba(255,255,255,.62); }
.app-body.page-reportes-index .report-tab.active {
    color: #0f766e;
    background: #fff;
    box-shadow: 0 5px 13px rgba(16,38,50,.08);
}
.app-body.page-reportes-index .report-filter input {
    min-height: 42px;
    border-color: #d5e0e1;
    border-radius: 10px;
}
.app-body.page-reportes-index .report-stats .stat-card { min-height: 138px; }
.app-body.page-reportes-index .report-grid { gap: 15px; }
.app-body.page-reportes-index .report-grid > .card { border-radius: 17px; }

.app-body .command-palette-panel {
    border-color: rgba(166,188,191,.75);
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(7,29,41,.23);
}
.app-body .command-palette-result:hover,
.app-body .command-palette-result.active { background: #eaf7f5; color: #0c6e67; }

/* Acceso */
.auth-page {
    min-height: 100vh;
    background: #072732;
    color: #14303b;
}

.auth-page .auth-wrap { display: contents; }

.auth-scene {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 112px 24px 86px;
    background:
        linear-gradient(rgba(107,219,202,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(107,219,202,.035) 1px, transparent 1px),
        radial-gradient(circle at 18% 16%, rgba(31,191,169,.24), transparent 28rem),
        radial-gradient(circle at 85% 82%, rgba(63,99,221,.24), transparent 31rem),
        linear-gradient(135deg, #061e29 0%, #07333b 48%, #0b2940 100%);
    background-size: 42px 42px, 42px 42px, auto, auto, auto;
}

.auth-scene::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, rgba(255,255,255,.018), transparent 45%, rgba(255,255,255,.012));
    pointer-events: none;
}

.auth-ambient {
    position: absolute;
    border: 1px solid rgba(140,237,222,.12);
    border-radius: 50%;
    pointer-events: none;
}
.auth-ambient-one { width: 360px; height: 360px; left: -145px; top: 12%; box-shadow: inset 0 0 80px rgba(29,180,163,.04); }
.auth-ambient-two { width: 280px; height: 280px; right: -85px; bottom: 7%; box-shadow: inset 0 0 80px rgba(63,99,221,.05); }

.auth-brand {
    position: absolute;
    top: 31px;
    left: 38px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 11px;
    color: #fff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.08rem;
    font-weight: 700;
}

.auth-brand-icon {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(41,210,186,.94), rgba(39,92,181,.94));
    box-shadow: 0 12px 30px rgba(0,15,24,.25), inset 0 1px 0 rgba(255,255,255,.3);
}
.auth-brand-icon svg { width: 22px; height: 22px; }
.auth-brand > span:last-child { line-height: 1.05; }
.auth-brand strong { color: #7ce8d7; }
.auth-brand small { display: block; margin-top: 5px; color: rgba(222,241,243,.6); font-family: Inter,sans-serif; font-size: .64rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }

.auth-page .auth-card-elegant {
    position: relative;
    z-index: 2;
    width: min(100%, 474px);
    max-width: none;
    padding: 43px 44px 35px;
    border: 1px solid rgba(255,255,255,.78);
    border-radius: 24px;
    background: rgba(255,255,255,.965);
    box-shadow: 0 32px 90px rgba(0,14,23,.32), inset 0 1px 0 #fff;
    backdrop-filter: blur(18px);
}

.auth-page .auth-card-reset { width: min(100%, 520px); }

.auth-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: #0f766e;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .105em;
    text-transform: uppercase;
}
.auth-kicker > span { width: 20px; height: 2px; border-radius: 99px; background: linear-gradient(90deg,#13a795,#3f63dd); }

.auth-page .auth-card h1 {
    margin: 0 0 9px;
    color: #102d38;
    font-size: clamp(1.75rem,4vw,2.08rem);
    line-height: 1.14;
    letter-spacing: -.045em;
}

.auth-intro {
    margin-bottom: 27px;
    color: #6a7f88;
    font-size: .91rem;
    line-height: 1.6;
}

.auth-page .auth-form { gap: 17px; }
.auth-page .field label { margin-bottom: 7px; color: #3d555f; font-size: .79rem; font-weight: 750; }
.auth-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth-label-row a { margin-bottom: 7px; color: #0f766e; font-size: .75rem; font-weight: 750; }

.auth-input-shell { position: relative; }
.auth-input-shell > svg {
    position: absolute;
    z-index: 1;
    left: 14px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    color: #7a929a;
    pointer-events: none;
}

.auth-page .auth-input-shell input {
    width: 100%;
    min-height: 50px;
    padding: 12px 46px 12px 43px;
    border: 1px solid #d6e1e2;
    border-radius: 12px;
    background: #f8fbfa;
    color: #19343f;
    font-family: Inter,sans-serif;
    font-size: .91rem;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.auth-page .auth-input-shell input::placeholder { color: #9aabb1; }
.auth-page .auth-input-shell input:hover { border-color: #bdcdcf; background: #fff; }
.auth-page .auth-input-shell input:focus { outline: none; border-color: #139286; background: #fff; box-shadow: 0 0 0 4px rgba(15,118,110,.1); }
.auth-page .auth-input-shell:focus-within > svg { color: #0f766e; }

.auth-password-toggle {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 9px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    border-radius: 9px;
    background: transparent;
    color: #7e929a;
}
.auth-password-toggle:hover,
.auth-password-toggle.is-visible { background: #eaf5f3; color: #0f766e; }
.auth-password-toggle svg { width: 18px; height: 18px; }

.auth-remember {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #657a83;
    font-size: .78rem;
    line-height: 1.4;
    cursor: pointer;
}
.auth-remember input { width: 16px; height: 16px; margin-top: 1px; accent-color: #0f766e; }

.auth-page .auth-submit {
    min-height: 51px;
    justify-content: space-between;
    padding: 12px 16px 12px 20px;
    border-radius: 12px;
    background: linear-gradient(110deg,#0f766e 0%,#098e91 56%,#315bc7 100%);
    box-shadow: 0 12px 25px rgba(15,118,110,.22);
}
.auth-page .auth-submit:hover { transform: translateY(-1px); box-shadow: 0 16px 31px rgba(15,118,110,.28); }
.auth-page .auth-submit svg { width: 19px; height: 19px; }

.auth-card-footer {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 25px;
    padding-top: 21px;
    border-top: 1px solid #e7eded;
    color: #7b8d94;
    font-size: .79rem;
}
.auth-card-footer a { color: #0f766e; font-weight: 800; }

.auth-trust {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 28px;
    display: flex;
    gap: 18px;
    transform: translateX(-50%);
    color: rgba(220,239,241,.64);
    font-size: .7rem;
    font-weight: 650;
    white-space: nowrap;
}
.auth-trust span { display: inline-flex; align-items: center; gap: 5px; }
.auth-trust svg { width: 14px; height: 14px; color: #5be0cc; }

.auth-back-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 23px;
    color: #617881;
    font-size: .76rem;
    font-weight: 750;
}
.auth-back-link:hover { color: #0f766e; }
.auth-back-link svg { width: 16px; height: 16px; }
.auth-help { margin-top: 21px; padding: 12px 14px; border-radius: 11px; background: #f1f7f6; color: #667d85; font-size: .74rem; line-height: 1.5; text-align: center; }
.auth-field-help { display: block; margin-top: 6px; color: #83959c; font-size: .7rem; }

/* Adaptación */
@media (max-width: 1180px) {
    .app-body .dashboard-welcome { grid-template-columns: 1fr 1.25fr; }
    .app-body.page-pacientes-index .filters {
        grid-template-columns: minmax(260px,1.4fr) repeat(2,minmax(150px,.8fr));
    }
}

@media (max-width: 1100px) and (min-width: 901px) {
    .app-body .layout { grid-template-columns: 238px minmax(0,1fr); }
    .app-body.sidebar-collapsed .layout { grid-template-columns: 82px minmax(0,1fr); }
    .app-body .dashboard-welcome { grid-template-columns: 1fr; }
    .app-body .dashboard-quick-actions { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .app-body .dashboard-quick-action { grid-template-columns: 36px minmax(0,1fr); }
    .app-body .dashboard-action-arrow { display: none; }
}

@media (max-width: 900px) {
    .app-body .main { padding: 0 15px 24px; }
    .app-body .topbar { min-height: 76px; }
    .app-body .topbar-page-icon { width: 40px; height: 40px; border-radius: 12px; }
    .app-body .topbar-page-icon svg { width: 19px; height: 19px; }
    .app-body .dashboard-welcome { grid-template-columns: 1fr; padding: 22px; }
    .app-body .dashboard-quick-actions { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .app-body .dashboard-quick-action { grid-template-columns: 36px minmax(0,1fr); }
    .app-body .dashboard-action-arrow { display: none; }
    .app-body .mobile-dock { border-radius: 19px; border-color: rgba(173,194,197,.74); box-shadow: 0 17px 38px rgba(7,29,41,.18); }
    .app-body .mobile-dock-item { border-radius: 12px; }
    .app-body .mobile-dock-item.active { color: #0f766e; background: #eaf7f5; }
    .app-body .mobile-dock-command-icon { background: linear-gradient(145deg,#13a795,#365dcb); }
    .app-body.page-pacientes-index .filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .app-body.page-pacientes-index .patient-search-field { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
    .auth-scene { display: flex; flex-direction: column; justify-content: center; padding: 96px 15px 88px; }
    .auth-brand { top: 23px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
    .auth-page .auth-card-elegant { padding: 34px 25px 29px; border-radius: 20px; }
    .auth-trust { gap: 11px; bottom: 24px; }
    .auth-trust span:nth-child(2) { display: none; }
}

@media (max-width: 640px) {
    .app-body .main { padding: 0 9px 18px; }
    .app-body .topbar {
        grid-template-columns: minmax(0,1fr) auto;
        padding: 9px 0 11px;
    }
    .app-body .topbar-left { gap: 8px; }
    .app-body .topbar-page-icon { display: none; }
    .app-body .topbar-heading small { display: none; }
    .app-body .topbar-heading .topbar-clinic { max-width: calc(100vw - 180px); }
    .app-body .dashboard-welcome { min-height: auto; padding: 19px; border-radius: 16px; }
    .app-body .dashboard-quick-actions { grid-template-columns: 1fr; }
    .app-body .dashboard-quick-action { grid-template-columns: 38px minmax(0,1fr) 16px; }
    .app-body .dashboard-action-arrow { display: block; }
    .app-body .stats-grid,
    .app-body .stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 9px; }
    .app-body .stat-card { min-height: 136px; padding: 14px; border-radius: 14px; }
    .app-body .stat-card .stat-icon { width: 36px; height: 36px; }
    .app-body .stat-card .stat-value { font-size: 1.5rem; }
    .app-body .stat-foot { display: none; }
    .app-body .card,
    .app-body .table-wrap,
    .app-body .agenda-wrap,
    .app-body .onboarding-panel { border-radius: 14px; }
    .app-body.page-pacientes-index .filters { grid-template-columns: 1fr; padding: 11px; }
    .app-body.page-pacientes-index .patient-search-field { grid-column: auto; }
}

@media (max-width: 380px) {
    .auth-page .auth-card-elegant { padding-left: 20px; padding-right: 20px; }
    .auth-card-footer { flex-direction: column; align-items: center; }
    .auth-trust span:nth-child(3) { display: none; }
}

/* Evolucion comercial v5: mas energia visual con menos carga cognitiva */
:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --accent: #06b6d4;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef476f;
    --app-teal: #0ea5a4;
    --app-blue: #2563eb;
    --app-canvas: #f4f7fc;
    --gradient: linear-gradient(135deg, #2563eb 0%, #0ea5e9 52%, #14b8a6 100%);
    --gradient-warm: linear-gradient(135deg, #4f46e5 0%, #2563eb 46%, #06b6d4 100%);
}

@keyframes tam-page-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes tam-gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
@keyframes tam-soft-float {
    0%, 100% { transform: translate3d(0,0,0); }
    50% { transform: translate3d(0,-8px,0); }
}
@keyframes tam-shine {
    0% { transform: translateX(-170%) skewX(-20deg); }
    65%, 100% { transform: translateX(260%) skewX(-20deg); }
}
@keyframes tam-live-pulse {
    0%, 100% { box-shadow: 0 0 0 5px rgba(125,249,232,.12), 0 0 12px rgba(125,249,232,.55); }
    50% { box-shadow: 0 0 0 8px rgba(125,249,232,.04), 0 0 22px rgba(125,249,232,.78); }
}

.app-body {
    background:
        radial-gradient(circle at 91% 3%, rgba(37,99,235,.1), transparent 25rem),
        radial-gradient(circle at 28% 95%, rgba(20,184,166,.07), transparent 24rem),
        linear-gradient(135deg, #f8faff 0%, #f1f5fc 56%, #f7fbfb 100%);
}
.app-body .content { animation: tam-page-in .38s cubic-bezier(.2,.8,.2,1) both; }

.app-body .sidebar {
    background:
        radial-gradient(circle at 12% -4%, rgba(34,211,238,.3), transparent 19rem),
        radial-gradient(circle at 112% 40%, rgba(99,102,241,.3), transparent 21rem),
        linear-gradient(180deg, #071a3d 0%, #082752 46%, #07182f 100%);
    border-right-color: rgba(117,203,255,.16);
    box-shadow: 18px 0 46px rgba(7,24,47,.13);
}
.app-body .brand-icon,
.auth-brand-icon {
    background: linear-gradient(145deg, #22d3ee 0%, #2563eb 56%, #7c3aed 100%);
    background-size: 180% 180%;
    animation: tam-gradient-shift 7s ease infinite;
}
.app-body .brand strong { background: linear-gradient(110deg, #67e8f9, #c4b5fd); -webkit-background-clip: text; background-clip: text; }

.app-body .nav { gap: 6px; }
.app-body .nav-essential {
    display: grid;
    gap: 4px;
    margin: 0 0 8px;
    padding: 9px;
    border: 1px solid rgba(125,211,252,.13);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.035));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.app-body .nav-essential-label {
    padding: 1px 7px 4px;
    color: rgba(207,235,255,.58);
    font-size: .61rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.app-body .nav-essential .nav-item { min-height: 45px; }
.app-body .nav-essential .nav-item > svg {
    background: rgba(255,255,255,.085);
    color: #b9dcf1;
}
.app-body .nav-essential .nav-item.active {
    background: linear-gradient(110deg, rgba(37,99,235,.55), rgba(6,182,212,.35));
    border-color: rgba(103,232,249,.34);
    box-shadow: 0 10px 24px rgba(0,12,39,.22), inset 0 1px 0 rgba(255,255,255,.12);
}
.app-body .nav-essential .nav-item.active > svg { background: linear-gradient(145deg,#22d3ee,#4f46e5); }
.app-body .nav-group-title { display: none; }

.app-body .nav-section {
    border: 1px solid transparent;
    border-radius: 14px;
    transition: background .2s ease, border-color .2s ease;
}
.app-body .nav-section.is-open {
    border-color: rgba(125,211,252,.12);
    background: rgba(255,255,255,.038);
}
.app-body .nav-section-toggle {
    width: 100%;
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    padding: 6px 9px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: rgba(218,235,246,.74);
    font-family: Inter,sans-serif;
    font-size: .78rem;
    font-weight: 720;
    cursor: pointer;
    transition: color .18s ease, background .18s ease;
}
.app-body .nav-section-toggle:hover { color: #fff; background: rgba(255,255,255,.065); }
.app-body .nav-section-label { min-width: 0; display: flex; align-items: center; gap: 10px; }
.app-body .nav-section-icon {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(125,211,252,.13);
    border-radius: 10px;
    background: linear-gradient(145deg, rgba(37,99,235,.25), rgba(6,182,212,.13));
    color: #9bdff5;
}
.app-body .nav-section-icon svg { width: 16px; height: 16px; }
.app-body .nav-section-chevron { width: 15px; height: 15px; color: rgba(191,219,234,.5); transition: transform .22s ease; }
.app-body .nav-section.is-open .nav-section-toggle { color: #fff; }
.app-body .nav-section.is-open .nav-section-icon { color: #fff; background: linear-gradient(145deg,#2563eb,#06b6d4); box-shadow: 0 7px 16px rgba(2,15,38,.2); }
.app-body .nav-section.is-open .nav-section-chevron { transform: rotate(90deg); color: #67e8f9; }
.app-body .nav-section-items {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .24s ease;
}
.app-body .nav-section.is-open .nav-section-items { grid-template-rows: 1fr; }
.app-body .nav-section-items-inner { min-height: 0; overflow: hidden; }
.app-body .nav-section-items-inner .nav-item { margin: 2px 6px; padding-left: 12px; min-height: 39px; font-size: .79rem; }
.app-body .nav-section-items-inner .nav-item > svg { width: 15px; height: 15px; padding: 5px; }
.app-body.sidebar-collapsed .nav-essential { padding: 7px 4px; }
.app-body.sidebar-collapsed .nav-essential-label,
.app-body.sidebar-collapsed .nav-section { display: none; }

.app-body .topbar-page-icon {
    border-color: rgba(37,99,235,.17);
    background: linear-gradient(145deg,#fff,#eaf2ff 56%,#e7fbfb);
    color: #2563eb;
    box-shadow: 0 9px 22px rgba(37,99,235,.11), inset 0 1px 0 #fff;
}
.app-body .topbar-heading .topbar-clinic { color: #2563eb; }
.app-body .command-trigger:hover { border-color: rgba(37,99,235,.35); color: #2563eb; }

.app-body .global-new-appointment,
.app-body .btn-primary,
.auth-page .auth-submit {
    position: relative;
    overflow: hidden;
    background: linear-gradient(110deg,#4f46e5 0%,#2563eb 45%,#06b6d4 100%);
    background-size: 170% 170%;
    box-shadow: 0 10px 24px rgba(37,99,235,.27);
    animation: tam-gradient-shift 7s ease infinite;
}
.app-body .global-new-appointment::after,
.app-body .btn-primary::after,
.auth-page .auth-submit::after {
    content: "";
    position: absolute;
    inset: -30% auto -30% -20%;
    width: 25%;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);
    transform: translateX(-170%) skewX(-20deg);
    animation: tam-shine 4.8s ease-in-out infinite;
    pointer-events: none;
}
.app-body .global-new-appointment:hover,
.app-body .btn-primary:hover,
.auth-page .auth-submit:hover { transform: translateY(-2px); box-shadow: 0 15px 32px rgba(37,99,235,.32); }

.app-body .card,
.app-body .table-wrap,
.app-body .agenda-wrap,
.app-body .onboarding-panel {
    border-color: rgba(183,199,222,.72);
    box-shadow: 0 10px 30px rgba(27,54,93,.065);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.app-body .card:hover,
.app-body .table-wrap:hover { transform: translateY(-1px); border-color: rgba(37,99,235,.22); box-shadow: 0 16px 38px rgba(27,54,93,.1); }
.app-body table.data tbody tr { transition: transform .16s ease, box-shadow .16s ease; }
.app-body table.data tbody tr:hover td { background: #f1f7ff; }

.app-body .stat-card {
    overflow: hidden;
    border-color: rgba(181,198,222,.7);
    box-shadow: 0 9px 26px rgba(27,54,93,.065);
}
.app-body .stat-card::before {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    right: -36px;
    top: -40px;
    border-radius: 50%;
    background: currentColor;
    opacity: .045;
    pointer-events: none;
}
.app-body .stat-card:hover { transform: translateY(-4px); border-color: rgba(37,99,235,.28); box-shadow: 0 18px 38px rgba(27,54,93,.12); }
.app-body .stat-card .stat-icon { transition: transform .2s ease, box-shadow .2s ease; }
.app-body .stat-card:hover .stat-icon { transform: scale(1.06) rotate(-3deg); box-shadow: 0 8px 18px rgba(37,99,235,.13); }
.app-body .stat-card-blue::after { background: linear-gradient(90deg,#4f46e5,#2563eb); }
.app-body .stat-card-teal::after { background: linear-gradient(90deg,#06b6d4,#14b8a6); }
.app-body .stat-card-violet::after { background: linear-gradient(90deg,#8b5cf6,#ec4899); }
.app-body .stat-card-emerald::after { background: linear-gradient(90deg,#10b981,#84cc16); }

.app-body .dashboard-welcome {
    border-color: rgba(255,255,255,.2);
    background:
        radial-gradient(circle at 92% 12%, rgba(103,232,249,.3), transparent 19rem),
        radial-gradient(circle at 14% 120%, rgba(196,181,253,.28), transparent 23rem),
        linear-gradient(120deg,#3730a3 0%,#2563eb 46%,#0891b2 78%,#0f9f8c 100%);
    background-size: auto, auto, 180% 180%;
    box-shadow: 0 22px 50px rgba(37,67,150,.24);
    animation: tam-page-in .4s ease both, tam-gradient-shift 12s ease infinite;
}
.app-body .dashboard-welcome::before {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    left: 42%;
    bottom: -112px;
    border: 28px solid rgba(255,255,255,.055);
    border-radius: 50%;
    animation: tam-soft-float 7s ease-in-out infinite;
}
.app-body .dashboard-live-dot { background: #7df9e8; animation: tam-live-pulse 2.2s ease-in-out infinite; }
.app-body .dashboard-quick-action { border-color: rgba(255,255,255,.2); background: rgba(7,27,83,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.app-body .dashboard-quick-action:hover { transform: translateX(5px); background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34); }
.app-body .dashboard-quick-action.is-primary { background: rgba(255,255,255,.94); color: #1e40af; border-color: #fff; box-shadow: 0 12px 26px rgba(17,39,114,.19); }
.app-body .dashboard-quick-action.is-primary .dashboard-quick-icon { background: linear-gradient(145deg,#2563eb,#06b6d4); color: #fff; }
.app-body .dashboard-quick-action.is-primary small { color: #64748b; }
.app-body .dashboard-quick-action.is-primary .dashboard-action-arrow { color: #2563eb; }

.app-body .onboarding-kicker { color: #1d4ed8; background: #eaf2ff; border-color: rgba(37,99,235,.17); }
.app-body .onboarding-score strong { color: #2563eb; }
.app-body .onboarding-progress span { background: linear-gradient(90deg,#4f46e5,#2563eb,#06b6d4,#10b981); }
.app-body .onboarding-guide-details { margin-top: 15px; border-top: 1px solid #e5ebf4; padding-top: 13px; }
.app-body .onboarding-guide-summary {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border: 1px solid #dce5f3;
    border-radius: 12px;
    background: #f7f9fd;
    color: #334155;
    cursor: pointer;
    list-style: none;
    transition: border-color .18s ease, background .18s ease;
}
.app-body .onboarding-guide-summary::-webkit-details-marker { display: none; }
.app-body .onboarding-guide-summary:hover { border-color: rgba(37,99,235,.28); background: #f1f6ff; }
.app-body .onboarding-guide-summary > svg:first-child { width: 19px; height: 19px; color: #2563eb; }
.app-body .onboarding-guide-summary > span { min-width: 0; flex: 1; }
.app-body .onboarding-guide-summary strong { display: block; font-size: .84rem; }
.app-body .onboarding-guide-summary small { display: block; margin-top: 2px; color: #758398; font-size: .7rem; }
.app-body .onboarding-guide-chevron { width: 17px; height: 17px; color: #8b9bb2; transition: transform .2s ease; }
.app-body .onboarding-guide-details[open] .onboarding-guide-chevron { transform: rotate(180deg); }
.app-body .onboarding-guide-content { padding-top: 14px; animation: tam-page-in .22s ease both; }

.app-body .section-heading-icon {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}
.app-body .section-heading-icon > span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: linear-gradient(145deg,#eaf2ff,#e7fbfb);
    color: #2563eb;
}
.app-body .section-heading-icon svg { width: 18px; height: 18px; }
.app-body .section-heading-icon h3 { margin: 0; }

.app-body .command-palette-result:hover,
.app-body .command-palette-result.active { background: #eaf2ff; color: #1d4ed8; }
.app-body .mobile-dock-command-icon { background: linear-gradient(145deg,#4f46e5,#2563eb,#06b6d4); }

.auth-page { background: #071a46; }
.auth-scene {
    background:
        linear-gradient(rgba(147,197,253,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(147,197,253,.05) 1px, transparent 1px),
        radial-gradient(circle at 16% 18%, rgba(34,211,238,.38), transparent 30rem),
        radial-gradient(circle at 84% 82%, rgba(139,92,246,.38), transparent 32rem),
        linear-gradient(135deg,#06153d 0%,#123a9a 48%,#087b91 100%);
    background-size: 42px 42px,42px 42px,auto,auto,180% 180%;
    animation: tam-gradient-shift 15s ease infinite;
}
.auth-ambient { border-color: rgba(191,219,254,.2); animation: tam-soft-float 8s ease-in-out infinite; }
.auth-ambient-two { animation-delay: -3.5s; }
.auth-page .auth-card-elegant { overflow: hidden; border-color: rgba(255,255,255,.9); box-shadow: 0 36px 100px rgba(1,12,42,.43), inset 0 1px 0 #fff; }
.auth-page .auth-card-elegant::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg,#4f46e5,#2563eb,#06b6d4,#10b981);
}
.auth-kicker,
.auth-label-row a,
.auth-card-footer a { color: #2563eb; }
.auth-kicker > span { background: linear-gradient(90deg,#4f46e5,#06b6d4); }
.auth-page .auth-input-shell input:focus { border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,.11); }
.auth-page .auth-input-shell:focus-within > svg { color: #2563eb; }
.auth-password-toggle:hover,
.auth-password-toggle.is-visible { background: #eaf2ff; color: #2563eb; }
.auth-remember input { accent-color: #2563eb; }
.auth-trust svg { color: #67e8f9; }

@media (max-width: 900px) {
    .app-body.sidebar-collapsed .nav-section { display: block; }
    .app-body.sidebar-collapsed .nav-essential-label { display: block; }
    .app-body .nav-section-toggle { min-height: 46px; }
}

@media (max-width: 640px) {
    .app-body .dashboard-welcome { background-size: auto,auto,220% 220%; }
    .app-body .stat-card:hover { transform: none; }
    .app-body .card:hover,
    .app-body .table-wrap:hover { transform: none; }
    .app-body .onboarding-guide-summary small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .app-body *, .auth-page * { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}