/* ============================================================
   patches.css — extraído de styles.css
   Líneas originales 8562–13547
   NO modificar el orden de carga en index.html
   ============================================================ */

/* ===== DARK THEME FIXES ===== */
body.theme-dark .bg-white,
body.theme-dark .bg-gray-50,
body.theme-dark .bg-primary-50,
body.theme-dark table.bg-white,
body.theme-dark .table-container .bg-white,
body.theme-dark .table-container .bg-gray-50 {
    background: rgba(15, 22, 40, 0.88) !important;
}

body.theme-dark .metric-info h3 {
    color: #4e5a72 !important;
}

body.theme-dark .metric-info p {
    color: #e2e8f0 !important;
}

body.theme-dark .metric-icon {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

body.theme-dark .metric-blue {
    background: rgba(59,130,246,0.13) !important;
    color: #60a5fa !important;
}

body.theme-dark .metric-green {
    background: rgba(16,185,129,0.13) !important;
    color: #34d399 !important;
}

body.theme-dark .metric-orange {
    background: rgba(245,158,11,0.13) !important;
    color: #fbbf24 !important;
}

body.theme-dark .metric-red {
    background: rgba(239,68,68,0.13) !important;
    color: #f87171 !important;
}

body.theme-dark .metric-purple {
    background: rgba(99,102,241,0.13) !important;
    color: #818cf8 !important;
}

body.theme-dark .table-container table,
body.theme-dark .table-container tbody,
body.theme-dark .table-container tr,
body.theme-dark .table-container td {
    background-color: transparent !important;
}

body.theme-dark .billing-summary-card .table-container,
body.theme-dark .billing-summary-card table,
body.theme-dark .billing-summary-card thead,
body.theme-dark .billing-summary-card tbody,
body.theme-dark .billing-summary-card tr,
body.theme-dark .billing-summary-card td,
body.theme-dark .billing-summary-card th {
    background: rgba(15, 22, 40, 0.88) !important;
}

body.theme-dark .billing-summary-card table thead th {
    background: rgba(255,255,255,0.04) !important;
}

body.theme-dark .text-success {
    color: #86efac !important;
}

body.theme-dark .schedules-hint i,
body.theme-dark .text-primary-500 {
    color: #a5b4fc !important;
}

/* ===== DARK THEME TARGETED FIXES ===== */
body.theme-dark .settings-subsection {
    background: rgba(255,255,255,0.02) !important;
    border-color: rgba(132, 151, 202, 0.14) !important;
}

body.theme-dark .settings-subsection h4,
body.theme-dark .settings-subsection p,
body.theme-dark .settings-box .sublabel {
    color: var(--gray-800) !important;
}

body.theme-dark .settings-list,
body.theme-dark .settings-list-static {
    background: rgba(255,255,255,0.035) !important;
    border: 1px solid rgba(132, 151, 202, 0.16) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

body.theme-dark .settings-list div {
    background: transparent !important;
}

body.theme-dark .checkbox-group {
    min-height: 3rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(132, 151, 202, 0.12) !important;
}

body.theme-dark .checkbox-group:last-child {
    border-bottom: none !important;
}

body.theme-dark .checkbox-group label,
body.theme-dark .settings-list label {
    color: var(--gray-900) !important;
}

body.theme-dark .checkbox-group input[type="checkbox"] {
    accent-color: var(--primary-500);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(132, 151, 202, 0.3);
    border-radius: 0.3rem;
}

body.theme-dark .table-modern {
    background: transparent !important;
}

body.theme-dark .table-modern thead th {
    color: var(--gray-600) !important;
    border-bottom-color: rgba(132, 151, 202, 0.16) !important;
}

body.theme-dark .table-modern tbody tr,
body.theme-dark .table-modern tbody tr:hover {
    background: transparent !important;
}

body.theme-dark .table-modern tbody td,
body.theme-dark .hover-row td {
    background: transparent !important;
    border-bottom-color: rgba(132, 151, 202, 0.12) !important;
}

body.theme-dark .table-modern tbody tr:last-child td {
    border-bottom-color: transparent !important;
}

body.theme-dark .table-name,
body.theme-dark .table-name strong {
    color: var(--gray-900) !important;
}

body.theme-dark .btn-edit-schedule {
    background: rgba(255,255,255,0.045) !important;
    border-color: rgba(132, 151, 202, 0.18) !important;
    color: var(--gray-900) !important;
    box-shadow: none !important;
}

body.theme-dark .btn-edit-schedule:hover {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(132, 151, 202, 0.28) !important;
    color: var(--gray-950) !important;
}

body.theme-dark .table-agenda-professionals tbody tr {
    box-shadow: none !important;
    background-image: none !important;
}

body.theme-dark .table-agenda-professionals tbody tr:first-child {
    box-shadow: none !important;
}

body.theme-dark .table-agenda-professionals td,
body.theme-dark .table-agenda-professionals th {
    border-bottom: none !important;
}

body.theme-dark .table-agenda-professionals tbody tr + tr td {
    border-top: none !important;
}

body.theme-dark .table-agenda-professionals tbody tr + tr {
    background-image: linear-gradient(
        to right,
        transparent 1.25rem,
        rgba(132, 151, 202, 0.16) 1.25rem,
        rgba(132, 151, 202, 0.16) calc(100% - 1.25rem),
        transparent calc(100% - 1.25rem)
    ) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 1px !important;
    background-position: center top !important;
}

body.theme-dark .table-agenda-professionals tbody tr:hover td {
    background: transparent !important;
}

body.theme-dark .cal-legend {
    background: rgba(15, 22, 40, 0.92) !important;
    border-color: rgba(132, 151, 202, 0.16) !important;
}

body.theme-dark .cal-legend-horizontal {
    background: rgba(15, 22, 40, 0.96) !important;
}

body.theme-dark .cal-prof-select.is-active .cal-legend-chip {
    box-shadow: 0 10px 22px rgba(1, 6, 18, 0.28);
}

/* ===== CALENDAR PAGE SCROLL FIX ===== */
.cal-scroll-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
}

body.theme-dark .cal-scroll-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
}

/* ===== SETTINGS CHECKLIST POLISH ===== */
.settings-subsection {
    padding: 1.15rem 1.15rem 1.05rem;
}

.settings-subsection h4 {
    margin-bottom: 0.3rem;
}

.settings-subsection p {
    margin-bottom: 0.85rem;
}

.settings-list,
.settings-list-static {
    display: grid;
    gap: 0.75rem;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.settings-list-static {
    overflow: visible !important;
}

.settings-list div,
.settings-list-static div {
    padding: 0;
}

.settings-subsection .checkbox-group {
    min-height: 0;
    margin: 0;
    padding: 0.9rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 0.95rem;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.settings-subsection .checkbox-group input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    flex-shrink: 0;
}

.settings-subsection .checkbox-group label {
    margin: 0;
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.25;
}

body.theme-dark .settings-list,
body.theme-dark .settings-list-static {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.theme-dark .settings-subsection .checkbox-group {
    padding: 0.9rem 1rem;
    border: 1px solid rgba(132, 151, 202, 0.16) !important;
    border-radius: 0.95rem;
    background: rgba(255,255,255,0.04) !important;
    box-shadow: none;
}

body.theme-dark .settings-subsection .checkbox-group label {
    color: var(--gray-900) !important;
}

body.theme-dark .settings-subsection .checkbox-group input[type="checkbox"] {
    border-color: rgba(132, 151, 202, 0.32);
}

/* ===== VISUAL REFRESH V5 — Diseño Moderno ===== */

/* ---- Nueva paleta: Índigo Profundo ---- */
:root {
    --primary-50:  #eef2ff;
    --primary-100: #e0e7ff;
    --primary-200: #c7d2fe;
    --primary-300: #a5b4fc;
    --primary-400: #818cf8;
    --primary-500: #6366f1;
    --primary-600: #4f46e5;
    --primary-700: #4338ca;
    --primary-800: #3730a3;

    --gray-50:  #f8f9fb;
    --gray-100: #f1f3f7;
    --gray-200: #e2e6f0;
    --gray-300: #cdd4e3;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    --gray-950: #060d1a;

    --success: #10b981;
    --danger:  #ef4444;
    --warning: #f59e0b;
    --info:    #3b82f6;
    --purple:  #8b5cf6;

    --surface-0:    rgba(255,255,255,0.70);
    --surface-1:    rgba(255,255,255,0.90);
    --surface-2:    #ffffff;
    --border-soft:  rgba(15,23,42,0.07);
    --border-strong:rgba(15,23,42,0.12);

    --shadow-sm: 0 4px 16px rgba(15,23,42,0.05);
    --shadow-md: 0 12px 32px rgba(15,23,42,0.08);
    --shadow-lg: 0 20px 56px rgba(15,23,42,0.11);
    --shadow-xl: 0 32px 80px rgba(15,23,42,0.14);

    --sidebar-bg:             #0f172a;
    --sidebar-border:         rgba(255,255,255,0.06);
    --sidebar-text:           rgba(148,163,184,0.9);
    --sidebar-text-active:    #f1f5f9;
    --sidebar-hover:          rgba(255,255,255,0.07);
    --sidebar-active-bg:      rgba(99,102,241,0.20);
    --sidebar-active-border:  #6366f1;
}

/* ---- Fuente ---- */
html { background: linear-gradient(180deg, #f8f9fb 0%, #f1f3f7 100%); }

body {
    font-family: 'Plus Jakarta Sans', 'Instrument Sans', sans-serif;
    background: transparent;
    color: var(--gray-800);
}

.section-title,
.table-header h3,
.treatments-header h3,
.odontogram-header h3,
.settings-panel-card > header h3,
.billing-patient-search-head h4,
.cal-prof-name,
.metric-info p,
.cal-day-summary-count,
.cal-month-summary-count {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ---- Sidebar oscuro ---- */
#app-sidebar {
    background: var(--sidebar-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-right: 1px solid var(--sidebar-border) !important;
    box-shadow: 4px 0 32px rgba(0,0,0,0.28) !important;
}

.app-brand {
    background: rgba(255,255,255,0.03) !important;
    border-bottom: 1px solid var(--sidebar-border) !important;
}

.app-brand h1,
.app-brand .app-brand-copy h1 { color: #f1f5f9 !important; }

.app-brand-subtitle { color: rgba(148,163,184,0.75) !important; }

.app-brand-mark,
.mobile-header-brand-mark {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    box-shadow: 0 8px 20px rgba(99,102,241,0.45) !important;
    border-radius: 0.75rem !important;
}

.nav-item {
    color: var(--sidebar-text) !important;
    border-left: 3px solid transparent !important;
}

.nav-item i { color: rgba(148,163,184,0.7) !important; }

.nav-item:hover {
    background: var(--sidebar-hover) !important;
    color: var(--sidebar-text-active) !important;
    box-shadow: none !important;
}

.nav-item:hover i { color: #a5b4fc !important; }

.nav-item.active {
    background: var(--sidebar-active-bg) !important;
    color: #a5b4fc !important;
    border-left: 3px solid var(--sidebar-active-border) !important;
    box-shadow: none !important;
}

.nav-item.active i { color: #a5b4fc !important; }

.nav-sub-item { color: rgba(148,163,184,0.65) !important; }
.nav-sub-item:hover {
    background: rgba(255,255,255,0.06) !important;
    color: rgba(241,245,249,0.85) !important;
}
.nav-sub-item.active {
    background: rgba(99,102,241,0.16) !important;
    color: #a5b4fc !important;
}

.sidebar-user-wrap {
    border-top: 1px solid var(--sidebar-border) !important;
    background: rgba(0,0,0,0.15) !important;
}

.user-profile {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: none !important;
}

#user-initials {
    background: linear-gradient(135deg, rgba(99,102,241,0.4) 0%, rgba(139,92,246,0.3) 100%) !important;
    color: #a5b4fc !important;
    box-shadow: none !important;
}

#user-name { color: #f1f5f9 !important; }
#user-role-display { color: rgba(148,163,184,0.75) !important; }

.sidebar-logout-btn {
    background: rgba(255,255,255,0.07) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: rgba(148,163,184,0.7) !important;
}

.sidebar-logout-btn:hover {
    color: #f87171 !important;
    background: rgba(239,68,68,0.14) !important;
    border-color: rgba(239,68,68,0.22) !important;
}

/* ---- Main content ---- */
#app-view main { background: #f8f9fb; }

.app-header {
    background: rgba(248,249,251,0.92) !important;
    border-bottom: 1px solid var(--border-soft) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.9) !important;
}

/* ---- Botones ---- */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-500) 100%) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(79,70,229,0.32) !important;
    border: none !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-600) 100%) !important;
    box-shadow: 0 10px 28px rgba(79,70,229,0.42) !important;
}

.btn-secondary,
.btn-ghost {
    background: rgba(255,255,255,0.9) !important;
    color: var(--gray-700) !important;
    border: 1px solid var(--border-strong) !important;
}

.btn-secondary:hover,
.btn-ghost:hover {
    background: #fff !important;
    border-color: var(--primary-300) !important;
    color: var(--primary-700) !important;
}

.cal-view-switcher .btn.is-active {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-500) 100%) !important;
    box-shadow: 0 8px 18px rgba(79,70,229,0.28) !important;
}

/* ---- Formularios ---- */
.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus,
.form-input:focus {
    border-color: rgba(99,102,241,0.5) !important;
    box-shadow: 0 0 0 4px rgba(99,102,241,0.1) !important;
}

/* ---- Login ---- */
#login-view {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.22) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 20%, rgba(139,92,246,0.18) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 85%, rgba(56,189,248,0.14) 0%, transparent 50%),
        linear-gradient(135deg, #0f172a 0%, #1e1b4b 55%, #0c1445 100%) !important;
}

.login-decoration .shape-1 {
    background: rgba(99,102,241,0.55) !important;
    width: 520px !important; height: 520px !important;
    filter: blur(110px) !important;
}

.login-decoration .shape-2 {
    background: rgba(139,92,246,0.45) !important;
    width: 420px !important; height: 420px !important;
    filter: blur(100px) !important;
}

.login-card {
    background: rgba(255,255,255,0.98) !important;
    border-radius: 1.75rem !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.15),
        0 40px 100px rgba(0,0,0,0.55),
        0 16px 40px rgba(79,70,229,0.22) !important;
}

.logo-icon {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-500) 100%) !important;
    box-shadow: 0 10px 24px rgba(79,70,229,0.32) !important;
}

/* ---- Cards y contenedores ---- */
.card,
.settings-card,
.table-container,
.clinical-history-card,
.clinical-images-shell {
    background: rgba(255,255,255,0.93) !important;
    border: 1px solid rgba(226,232,240,0.75) !important;
    box-shadow: 0 4px 20px rgba(15,23,42,0.05), inset 0 1px 0 rgba(255,255,255,0.9) !important;
}

.card:hover,
.settings-card:hover {
    box-shadow: 0 14px 40px rgba(15,23,42,0.09) !important;
    transform: translateY(-2px) !important;
}

/* ---- Métricas ---- */
.metric-blue {
    background: linear-gradient(135deg, rgba(99,102,241,0.14) 0%, rgba(99,102,241,0.06) 100%) !important;
    color: var(--primary-600) !important;
}
.metric-green {
    background: linear-gradient(135deg, rgba(16,185,129,0.14) 0%, rgba(16,185,129,0.06) 100%) !important;
    color: var(--success) !important;
}
.metric-orange {
    background: linear-gradient(135deg, rgba(245,158,11,0.14) 0%, rgba(245,158,11,0.06) 100%) !important;
    color: var(--warning) !important;
}
.metric-red {
    background: linear-gradient(135deg, rgba(239,68,68,0.14) 0%, rgba(239,68,68,0.06) 100%) !important;
    color: var(--danger) !important;
}

/* ---- Tablas ---- */
table thead th { background: rgba(248,249,251,0.9) !important; }

/* ---- Settings subnav ---- */
.settings-subnav-item i { color: var(--primary-600) !important; }
.settings-subnav-item.active {
    background: linear-gradient(180deg, rgba(99,102,241,0.10) 0%, rgba(255,255,255,0.92) 100%) !important;
    border-color: rgba(99,102,241,0.25) !important;
    box-shadow: 0 8px 24px rgba(79,70,229,0.1) !important;
}

/* ---- Calendario ---- */
.cal-today-header { background: rgba(99,102,241,0.06) !important; }
.cal-today-badge  { background: var(--primary-600) !important; color: #fff !important; }
.cal-day-header:hover { background: rgba(99,102,241,0.04) !important; }
.cal-month-dayhead:hover { background: rgba(99,102,241,0.03) !important; }
.cal-day-summary-card:hover,
.cal-month-summary-card:hover {
    border-color: rgba(99,102,241,0.4) !important;
    box-shadow: 0 8px 24px rgba(79,70,229,0.1) !important;
}

/* ---- Facturación ---- */
.billing-patient-result:hover {
    border-color: rgba(99,102,241,0.25) !important;
    box-shadow: 0 12px 30px rgba(79,70,229,0.08) !important;
}
.billing-patient-search-count {
    background: rgba(99,102,241,0.08) !important;
    color: var(--primary-700) !important;
}
.billing-patient-search-empty i { color: var(--primary-500) !important; }

/* ---- Hero cards ---- */
.section-hero-card {
    background:
        radial-gradient(circle at top left, rgba(99,102,241,0.07), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(248,249,251,0.88) 100%) !important;
}
.section-eyebrow { color: var(--primary-600) !important; }

/* ---- Pacientes avatar ---- */
#patients-table td:first-child > div:first-child {
    background: linear-gradient(135deg, rgba(99,102,241,0.13) 0%, rgba(255,255,255,0.96) 100%) !important;
    color: var(--primary-700) !important;
}

/* ---- Spinner ---- */
.app-loading-spinner { border-top-color: var(--primary-600) !important; }

/* ---- Dashboard date filter ---- */
.dashboard-date-filter:focus,
.dashboard-status-select:focus {
    border-color: var(--primary-400) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1) !important;
}

/* ---- Toasts & dialogs ---- */
.feedback-toast-info .feedback-toast-icon,
.feedback-dialog-info .feedback-dialog-badge {
    background: rgba(99,102,241,0.12) !important;
    color: var(--primary-600) !important;
}

/* ---- Mobile header brand mark ---- */
.mobile-header-brand-mark {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    box-shadow: 0 8px 20px rgba(99,102,241,0.38) !important;
}

/* ---- Cal toolbar ---- */
.calendar-toolbar,
.agenda-toolbar,
.cal-toolbar {
    background: rgba(255,255,255,0.88) !important;
    border: 1px solid var(--border-soft) !important;
}

/* ===== VISUAL REFRESH V6 — Obsidian + Animaciones ===== */

/* ---- Keyframes ---- */
@keyframes v6-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}
@keyframes v6-glow-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139,92,246,0); }
    50%       { box-shadow: 0 0 0 8px rgba(255,255,255,0.07); }
}
@keyframes v6-slide-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes v6-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes v6-scale-in {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}
@keyframes v6-float {
    0%, 100% { transform: translateY(0px) scale(1); }
    50%       { transform: translateY(-18px) scale(1.04); }
}
@keyframes v6-btn-shine {
    from { left: -100%; }
    to   { left: 200%; }
}

/* ---- Nueva paleta: Violet / Obsidian ---- */
:root {
    --primary-50:  #f5f3ff;
    --primary-100: #ede9fe;
    --primary-200: #ddd6fe;
    --primary-300: #c4b5fd;
    --primary-400: #a78bfa;
    --primary-500: #8b5cf6;
    --primary-600: #7c3aed;
    --primary-700: #6d28d9;
    --primary-800: #5b21b6;

    --gray-50:  #fafafa;
    --gray-100: #f4f4f5;
    --gray-200: #e4e4e7;
    --gray-300: #d4d4d8;
    --gray-400: #a1a1aa;
    --gray-500: #71717a;
    --gray-600: #52525b;
    --gray-700: #3f3f46;
    --gray-800: #27272a;
    --gray-900: #18181b;
    --gray-950: #09090b;

    --success: #10b981;
    --danger:  #ef4444;
    --warning: #f59e0b;
    --info:    #0ea5e9;
    --purple:  #a78bfa;

    --surface-0:     rgba(255,255,255,0.65);
    --surface-1:     rgba(255,255,255,0.94);
    --surface-2:     #ffffff;
    --border-soft:   rgba(0,0,0,0.07);
    --border-strong: rgba(0,0,0,0.11);

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.10);
    --shadow-xl: 0 24px 64px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.07);

    --sidebar-bg:            #09090b;
    --sidebar-border:        rgba(255,255,255,0.06);
    --sidebar-text:          rgba(161,161,170,0.9);
    --sidebar-text-active:   #fafafa;
    --sidebar-hover:         rgba(255,255,255,0.06);
    --sidebar-active-bg:     rgba(139,92,246,0.18);
    --sidebar-active-border: #8b5cf6;
}

/* ---- Global ---- */
html { background: #fafafa; }
body { font-family: 'Plus Jakarta Sans', 'Instrument Sans', sans-serif; background: #fafafa !important; color: var(--gray-800); }

/* Animate pages on load */
.view-section.active { animation: v6-slide-up 0.38s cubic-bezier(0.16,1,0.3,1) both; }
#main-content         { animation: v6-fade-in  0.32s ease both; }

/* ---- Sidebar negro ---- */
#app-sidebar {
    background: var(--sidebar-bg) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    border-right: 1px solid var(--sidebar-border) !important;
    box-shadow: none !important;
}
.app-brand {
    background: rgba(255,255,255,0.02) !important;
    border-bottom: 1px solid var(--sidebar-border) !important;
}
.app-brand h1 { color: #fafafa !important; letter-spacing: -0.04em !important; }
.app-brand-subtitle { color: rgba(113,113,122,0.8) !important; }

.app-brand-mark,
.mobile-header-brand-mark {
    background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%) !important;
    box-shadow: 0 0 0 1px rgba(139,92,246,0.3), 0 8px 24px rgba(124,58,237,0.42) !important;
    border-radius: 0.85rem !important;
}

/* Nav items */
.nav-item {
    color: var(--sidebar-text) !important;
    border-left: 2px solid transparent !important;
    border-radius: 0.75rem !important;
    margin: 0.18rem 0.75rem !important;
    padding: 0.78rem 1rem !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.2s cubic-bezier(0.16,1,0.3,1) !important;
}
.nav-item i { color: rgba(113,113,122,0.8) !important; transition: color 0.2s !important; width: 1.1rem !important; }
.nav-item:hover {
    background: var(--sidebar-hover) !important;
    color: var(--sidebar-text-active) !important;
    transform: translateX(3px) !important;
    box-shadow: none !important;
}
.nav-item:hover i { color: #c4b5fd !important; }
.nav-item.active {
    background: var(--sidebar-active-bg) !important;
    color: #c4b5fd !important;
    border-left: 2px solid var(--sidebar-active-border) !important;
    box-shadow: none !important;
    animation: v6-glow-pulse 2.8s ease-in-out infinite;
}
.nav-item.active i { color: #a78bfa !important; }

.nav-sub-item { color: rgba(113,113,122,0.75) !important; }
.nav-sub-item:hover  { background: rgba(255,255,255,0.05) !important; color: rgba(250,250,250,0.85) !important; }
.nav-sub-item.active { background: rgba(139,92,246,0.14) !important; color: #c4b5fd !important; }

/* Sidebar footer */
.sidebar-user-wrap {
    border-top: 1px solid var(--sidebar-border) !important;
    background: rgba(0,0,0,0.18) !important;
}
.user-profile {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: none !important;
    transition: background 0.2s ease !important;
}
.user-profile:hover { background: rgba(255,255,255,0.08) !important; }
#user-initials {
    background: linear-gradient(135deg, rgba(124,58,237,0.45), rgba(139,92,246,0.3)) !important;
    color: #c4b5fd !important; border-radius: 0.85rem !important; box-shadow: none !important;
}
#user-name         { color: #fafafa !important; font-weight: 700 !important; }
#user-role-display { color: rgba(113,113,122,0.85) !important; }
.sidebar-logout-btn {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: rgba(113,113,122,0.8) !important;
    transition: all 0.2s ease !important;
}
.sidebar-logout-btn:hover {
    color: #f87171 !important; background: rgba(239,68,68,0.14) !important;
    border-color: rgba(239,68,68,0.24) !important; transform: translateY(-1px) !important;
}

/* ---- Main area ---- */
#app-view main { background: #fafafa !important; }
.app-header {
    background: rgba(250,250,250,0.94) !important;
    backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    box-shadow: none !important;
}

/* ---- Cards ---- */
.card,
.settings-card,
.table-container,
.clinical-history-card,
.clinical-images-shell {
    background: #ffffff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 1rem !important;
    box-shadow: var(--shadow-sm) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}
.card:hover,
.settings-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.09) !important;
    transform: translateY(-2px) !important;
}
.metric-card { animation: v6-slide-up 0.4s cubic-bezier(0.16,1,0.3,1) both; }
.metrics-grid > *:nth-child(1) { animation-delay:  40ms; }
.metrics-grid > *:nth-child(2) { animation-delay:  90ms; }
.metrics-grid > *:nth-child(3) { animation-delay: 140ms; }
.metrics-grid > *:nth-child(4) { animation-delay: 190ms; }

/* Section hero */
.section-hero-card {
    background: linear-gradient(135deg, rgba(124,58,237,0.04) 0%, #ffffff 40%) !important;
    border: 1px solid rgba(139,92,246,0.1) !important;
}
.section-eyebrow { color: var(--primary-600) !important; }

/* ---- Botones con efecto shine ---- */
.btn {
    position: relative !important; overflow: hidden !important;
    transition: all 0.22s cubic-bezier(0.16,1,0.3,1) !important;
}
.btn-primary {
    background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(124,58,237,0.35) !important;
    border: none !important;
}
.btn-primary::after {
    content: '';
    position: absolute; top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
    transition: left 0.55s ease;
    pointer-events: none;
}
.btn-primary:hover::after { left: 180%; }
.btn-primary:hover {
    background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%) !important;
    box-shadow: 0 8px 24px rgba(124,58,237,0.48) !important;
    transform: translateY(-1px) !important;
}
.btn-primary:active { transform: translateY(0) scale(0.98) !important; }

.btn-secondary,
.btn-ghost {
    background: #ffffff !important; color: var(--gray-700) !important;
    border: 1px solid var(--gray-200) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}
.btn-secondary:hover,
.btn-ghost:hover {
    border-color: var(--primary-300) !important; color: var(--primary-700) !important;
    box-shadow: 0 4px 14px rgba(255,255,255,0.07) !important;
}
.cal-view-switcher .btn.is-active {
    background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%) !important;
    box-shadow: 0 4px 14px rgba(124,58,237,0.35) !important; border: none !important;
}

/* ---- Formularios ---- */
.input-group input,
.input-group select,
.input-group textarea,
.form-input {
    background: #ffffff !important; border: 1px solid var(--gray-200) !important;
    border-radius: 0.75rem !important; transition: all 0.2s ease !important;
}
.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus,
.form-input:focus {
    border-color: var(--primary-400) !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.07) !important; background: #ffffff !important;
}

/* ---- Login ---- */
#login-view {
    background:
        radial-gradient(ellipse at 15% 40%,  rgba(124,58,237,0.28) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 15%,  rgba(139,92,246,0.22) 0%, transparent 50%),
        radial-gradient(ellipse at 55% 92%,  rgba(14,165,233,0.18) 0%, transparent 50%),
        linear-gradient(135deg, #09090b 0%, #1a0533 55%, #0c0a1e 100%) !important;
}
.login-decoration .blob { animation: v6-float 9s ease-in-out infinite; }
.login-decoration .shape-2 { animation-delay: -4.5s; }
.login-decoration .shape-1 {
    background: rgba(124,58,237,0.62) !important;
    width: 580px !important; height: 580px !important; filter: blur(130px) !important;
}
.login-decoration .shape-2 {
    background: rgba(14,165,233,0.42) !important;
    width: 400px !important; height: 400px !important; filter: blur(110px) !important;
}
.login-card {
    background: #ffffff !important; border: 1px solid rgba(0,0,0,0.06) !important;
    border-radius: 1.5rem !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 32px 80px rgba(0,0,0,0.52), 0 12px 32px rgba(124,58,237,0.2) !important;
    animation: v6-scale-in 0.5s cubic-bezier(0.16,1,0.3,1) both;
}
.logo-icon {
    background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%) !important;
    box-shadow: 0 8px 20px rgba(124,58,237,0.38) !important;
}

/* ---- Métricas ---- */
.metric-blue   { background: linear-gradient(135deg, rgba(124,58,237,0.11), rgba(124,58,237,0.04)) !important; color: #7c3aed !important; }
.metric-green  { background: linear-gradient(135deg, rgba(16,185,129,0.13), rgba(16,185,129,0.04)) !important; color: #059669 !important; }
.metric-orange { background: linear-gradient(135deg, rgba(245,158,11,0.13), rgba(245,158,11,0.04)) !important; color: #d97706 !important; }
.metric-red    { background: linear-gradient(135deg, rgba(239,68,68,0.12),  rgba(239,68,68,0.04))  !important; color: #dc2626 !important; }
.metric-icon   { transition: transform 0.25s ease !important; }
.metric-card:hover .metric-icon { transform: scale(1.1) !important; }

/* ---- Tablas ---- */
table thead th { background: var(--gray-50) !important; }
table tbody tr { transition: background 0.15s ease !important; }
table tbody tr:hover td { background: rgba(124,58,237,0.02) !important; }

/* ---- Settings ---- */
.settings-subnav .settings-subnav-item:nth-child(1) { animation: v6-slide-up 0.32s  40ms both; }
.settings-subnav .settings-subnav-item:nth-child(2) { animation: v6-slide-up 0.32s  90ms both; }
.settings-subnav .settings-subnav-item:nth-child(3) { animation: v6-slide-up 0.32s 140ms both; }
.settings-subnav .settings-subnav-item:nth-child(4) { animation: v6-slide-up 0.32s 190ms both; }
.settings-subnav .settings-subnav-item:nth-child(5) { animation: v6-slide-up 0.32s 240ms both; }
.settings-subnav .settings-subnav-item:nth-child(6) { animation: v6-slide-up 0.32s 290ms both; }
.settings-subnav-item i { color: var(--primary-600) !important; }
.settings-subnav-item { transition: all 0.2s ease !important; }
.settings-subnav-item:hover {
    border-color: rgba(139,92,246,0.2) !important;
    box-shadow: 0 4px 16px rgba(124,58,237,0.1) !important;
}
.settings-subnav-item.active {
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, #ffffff 100%) !important;
    border-color: rgba(139,92,246,0.24) !important;
    box-shadow: 0 4px 18px rgba(255,255,255,0.07) !important;
}

/* ---- Calendario ---- */
.cal-today-header { background: rgba(124,58,237,0.05) !important; }
.cal-today-badge  { background: var(--primary-600) !important; color: #fff !important; }
.cal-day-header:hover  { background: rgba(124,58,237,0.03) !important; }
.cal-month-dayhead:hover { background: rgba(124,58,237,0.03) !important; }
.cal-view-switcher .btn { transition: all 0.2s ease !important; }
.cal-day-summary-card,
.cal-month-summary-card { transition: all 0.22s ease !important; }
.cal-day-summary-card:hover,
.cal-month-summary-card:hover {
    border-color: rgba(124,58,237,0.35) !important;
    box-shadow: 0 6px 22px rgba(124,58,237,0.13) !important;
    transform: translateY(-2px) !important;
}
.cal-apt-block { transition: filter 0.15s ease, box-shadow 0.15s ease !important; }
.cal-apt-block:hover {
    box-shadow: 0 8px 22px rgba(0,0,0,0.22) !important; z-index: 10 !important;
}
.calendar-toolbar,
.agenda-toolbar,
.cal-toolbar {
    background: #ffffff !important; border: 1px solid var(--gray-200) !important;
    box-shadow: var(--shadow-sm) !important; backdrop-filter: none !important;
}

/* ---- Modales ---- */
.modal-overlay {
    background: rgba(9,9,11,0.55) !important;
    backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important;
}
.modal-overlay.active .modal-content,
.modal-overlay.active .modal-content-treatment,
.modal-overlay.active .modal-content-patient {
    animation: v6-scale-in 0.3s cubic-bezier(0.16,1,0.3,1) both !important;
}
.modal-content,
.modal-content-treatment,
.modal-content-patient,
.feedback-dialog {
    background: #ffffff !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 1.25rem !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.12) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}

/* ---- Toasts ---- */
.feedback-toast {
    background: #ffffff !important; border: 1px solid var(--gray-200) !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.12) !important; backdrop-filter: none !important;
}
.feedback-toast-info .feedback-toast-icon,
.feedback-dialog-info .feedback-dialog-badge {
    background: rgba(124,58,237,0.10) !important; color: var(--primary-600) !important;
}

/* ---- Facturación ---- */
.billing-patient-result { transition: all 0.2s ease !important; }
.billing-patient-result:hover {
    border-color: rgba(139,92,246,0.25) !important;
    box-shadow: 0 6px 22px rgba(124,58,237,0.09) !important;
    transform: translateY(-1px) !important;
}
.billing-patient-search-count { background: rgba(255,255,255,0.05) !important; color: var(--primary-700) !important; }
.billing-patient-search-empty i { color: var(--primary-500) !important; }

/* ---- Misc ---- */
.app-loading-spinner { border-top-color: var(--primary-600) !important; }
#patients-table td:first-child > div:first-child {
    background: linear-gradient(135deg, rgba(124,58,237,0.1), rgba(255,255,255,0.96)) !important;
    color: var(--primary-700) !important;
}
.dashboard-date-filter:focus,
.dashboard-status-select:focus {
    border-color: var(--primary-400) !important;
    box-shadow: 0 0 0 3px rgba(139,92,246,0.1) !important;
}
.mobile-header-brand-mark {
    background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%) !important;
    box-shadow: 0 6px 16px rgba(124,58,237,0.4) !important;
}
.badge-primary { background: rgba(255,255,255,0.07) !important; color: #7c3aed !important; }

/* ===== VISUAL REFRESH V7 — Dark Canvas · Cards Flotantes · Bold ===== */

/* ── Keyframes nuevos ────────────────────────────────────────── */
@keyframes v7-orb-drift {
    0%,100% { transform: translate(0,0) scale(1); }
    33%      { transform: translate(40px,-30px) scale(1.06); }
    66%      { transform: translate(-20px,20px) scale(0.97); }
}
@keyframes v7-orb-drift-2 {
    0%,100% { transform: translate(0,0) scale(1); }
    33%      { transform: translate(-50px,30px) scale(1.08); }
    66%      { transform: translate(30px,-40px) scale(0.95); }
}
@keyframes v7-card-appear {
    from { opacity:0; transform:translateY(18px) scale(0.98); }
    to   { opacity:1; transform:translateY(0)   scale(1); }
}
@keyframes v7-number-pop {
    0%  { transform:scale(0.85); opacity:0; }
    60% { transform:scale(1.06); }
    100%{ transform:scale(1);    opacity:1; }
}
@keyframes v7-gradient-x {
    0%,100% { background-position:0% 50%; }
    50%      { background-position:100% 50%; }
}
@keyframes v7-border-glow {
    0%,100% { opacity:.5; }
    50%      { opacity:1; }
}

/* ── Fondo oscuro con orbes animados ─────────────────────────── */
html { background:#0d1117 !important; }

body { background:#0d1117 !important; font-family:'Plus Jakarta Sans','Instrument Sans',sans-serif; color:var(--gray-800); }

#app-view { background:#0d1117 !important; }

#app-view main {
    position:relative;
    background:#0d1117 !important;
    overflow:hidden;
}

/* Orbes de fondo animados */
#app-view main::before,
#app-view main::after {
    content:'';
    position:fixed;
    border-radius:50%;
    pointer-events:none;
    z-index:0;
    filter:blur(90px);
    opacity:.55;
}
#app-view main::before {
    width:600px; height:600px;
    background:radial-gradient(circle, rgba(124,58,237,.5) 0%, transparent 70%);
    top:-150px; right:-100px;
    animation: v7-orb-drift 18s ease-in-out infinite;
}
#app-view main::after {
    width:500px; height:500px;
    background:radial-gradient(circle, rgba(14,165,233,.35) 0%, transparent 70%);
    bottom:-120px; left:-80px;
    animation: v7-orb-drift-2 22s ease-in-out infinite;
}

/* Contenido encima de los orbes */
.app-header,
#main-content { position:relative; z-index:1; }

/* Scrollable area */
#main-content { background:transparent !important; }

/* ── App header oscuro ───────────────────────────────────────── */
.app-header {
    background:rgba(12,12,20,.82) !important;
    backdrop-filter:blur(20px) !important;
    -webkit-backdrop-filter:blur(20px) !important;
    border-bottom:1px solid rgba(255,255,255,.07) !important;
    box-shadow:none !important;
}
.app-header .mobile-header-brand span { color:#f4f4f5 !important; }
.sidebar-toggle-btn {
    background:rgba(255,255,255,.08) !important;
    border:1px solid rgba(255,255,255,.1) !important;
    color:#a1a1aa !important;
}
.sidebar-toggle-btn:hover { background:rgba(255,255,255,.12) !important; color:#f4f4f5 !important; }

/* ── Section headline (fuera de cards) → texto claro ─────────── */
.section-headline,
.section-headline .section-title,
.section-headline .section-title-sm,
.section-headline .section-subtitle,
.section-headline .section-eyebrow { color:#f4f4f5 !important; }
.section-headline .section-eyebrow { color:#a78bfa !important; }
.section-headline .section-subtitle { color:#71717a !important; }

/* ── Section hero card → glass oscuro ───────────────────────── */
.section-hero-card {
    background:rgba(255,255,255,.04) !important;
    backdrop-filter:blur(24px) !important;
    -webkit-backdrop-filter:blur(24px) !important;
    border:1px solid rgba(255,255,255,.09) !important;
    box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 16px 40px rgba(0,0,0,.35) !important;
}
.section-hero-card .section-title,
.section-hero-card .section-title-sm { color:#f4f4f5 !important; -webkit-text-fill-color:#f4f4f5 !important; background:none !important; }
.section-hero-card .section-subtitle  { color:rgba(161,161,170,.85) !important; }
.section-hero-card .section-eyebrow   { color:#a78bfa !important; }
.section-hero-card .dashboard-date-label { color:#71717a !important; }
.section-hero-card h3 { color:#f4f4f5 !important; }

/* ── Cards regulares → blancas flotantes ─────────────────────── */
.card,
.settings-card,
.table-container,
.clinical-history-card,
.clinical-images-shell,
.cal-scroll-wrap,
.cal-month-board,
.cal-legend {
    background:#ffffff !important;
    border:1px solid rgba(0,0,0,.07) !important;
    border-radius:1.1rem !important;
    box-shadow:0 4px 6px rgba(0,0,0,.07), 0 24px 48px rgba(0,0,0,.32) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    animation: v7-card-appear .38s cubic-bezier(.16,1,.3,1) both;
}
.card:hover,
.settings-card:hover {
    box-shadow:0 4px 6px rgba(0,0,0,.07), 0 32px 64px rgba(0,0,0,.42) !important;
    transform:translateY(-3px) !important;
}

/* Stagger cards */
.metrics-grid > *:nth-child(1) { animation-delay: 30ms; }
.metrics-grid > *:nth-child(2) { animation-delay: 80ms; }
.metrics-grid > *:nth-child(3) { animation-delay:130ms; }
.metrics-grid > *:nth-child(4) { animation-delay:180ms; }

/* ── Metric cards → color sólido + texto blanco (:has) ───────── */
/* ── Metric cards: diseño refinado — sin fondos sólidos de colores ── */
.card.metric-card {
    background: #ffffff !important;
    border: 1px solid rgba(15,23,42,0.07) !important;
    box-shadow: 0 1px 3px rgba(15,23,42,0.05), 0 4px 12px rgba(15,23,42,0.04) !important;
    border-radius: 1rem !important;
    padding: 1.35rem 1.5rem !important;
    position: relative !important;
    overflow: hidden !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}

.card.metric-card:hover {
    box-shadow: 0 4px 12px rgba(15,23,42,0.09), 0 8px 24px rgba(15,23,42,0.06) !important;
    transform: translateY(-1px) !important;
}

/* Accent line en la parte superior — color según tipo */
.card.metric-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2.5px;
    border-radius: 1rem 1rem 0 0;
}
.card.metric-card:has(.metric-blue)::before   { background: linear-gradient(90deg, #0d9488, #14b8a6); }
.card.metric-card:has(.metric-green)::before  { background: linear-gradient(90deg, #059669, #10b981); }
.card.metric-card:has(.metric-orange)::before { background: linear-gradient(90deg, #d97706, #f59e0b); }
.card.metric-card:has(.metric-red)::before    { background: linear-gradient(90deg, #be123c, #e11d48); }
.card.metric-card:has(.metric-purple)::before { background: linear-gradient(90deg, #6d28d9, #8b5cf6); }

/* Texto de las cards — colores sobre fondo blanco */
.card.metric-card .metric-info h3 {
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.09em !important;
    color: #94a3b8 !important;
    margin-bottom: 0.4rem !important;
}
.card.metric-card .metric-info p {
    font-size: 1.85rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -0.04em !important;
    line-height: 1 !important;
}

/* Iconos — pequeños y sutiles */
.card.metric-card .metric-icon {
    width: 2.4rem !important;
    height: 2.4rem !important;
    font-size: 1rem !important;
    border-radius: 0.7rem !important;
    box-shadow: none !important;
}
.card.metric-card:has(.metric-blue)   .metric-icon { background: #f0fdf9 !important; color: #0d9488 !important; }
.card.metric-card:has(.metric-green)  .metric-icon { background: #f0fdf4 !important; color: #059669 !important; }
.card.metric-card:has(.metric-orange) .metric-icon { background: #fffbeb !important; color: #d97706 !important; }
.card.metric-card:has(.metric-red)    .metric-icon { background: #fff1f2 !important; color: #be123c !important; }
.card.metric-card:has(.metric-purple) .metric-icon { background: #faf5ff !important; color: #6d28d9 !important; }
.card.metric-card .metric-icon i { color: inherit !important; }
/* Número animado */
.metric-info p { animation: v7-number-pop .5s cubic-bezier(.16,1,.3,1) both; animation-delay:.1s; }

/* ── Titles dentro de cards blancas → gradient text ─────────── */
.section-hero-card .section-title { -webkit-text-fill-color:#f4f4f5 !important; }

.table-header h3,
.treatments-header h3,
.odontogram-header h3,
.modal-header h3 {
    background:linear-gradient(90deg,#7c3aed,#a78bfa,#06b6d4);
    background-size:200% auto;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    animation: v7-gradient-x 4s linear infinite;
}

/* ── Table header ─────────────────────────────────────────────── */
.table-header,
.modal-header {
    background:linear-gradient(180deg,rgba(124,58,237,.04),rgba(255,255,255,0)) !important;
    border-bottom:1px solid rgba(0,0,0,.06) !important;
}
table thead th {
    background:rgba(124,58,237,.04) !important;
    color:var(--gray-500) !important;
    font-weight:800 !important;
    letter-spacing:.06em !important;
}
table tbody tr:hover td { background:rgba(124,58,237,.03) !important; }

/* ── Sidebar ─────────────────────────────────────────────────── */
/* (ya está configurado en V6, solo refinamos) */
#app-sidebar { box-shadow:none !important; }

/* Thin gradient bar top of sidebar */
#app-sidebar::before {
    content:'';
    display:block;
    height:3px;
    background:linear-gradient(90deg,#7c3aed,#a78bfa,#06b6d4);
    background-size:200% auto;
    animation: v7-gradient-x 3s linear infinite;
    flex-shrink:0;
}

/* ── Cal toolbar / scroll ─────────────────────────────────────── */
.calendar-toolbar,
.agenda-toolbar,
.cal-toolbar {
    background:#ffffff !important;
    border:1px solid rgba(0,0,0,.07) !important;
    box-shadow:0 4px 6px rgba(0,0,0,.07), 0 12px 28px rgba(0,0,0,.22) !important;
    backdrop-filter:none !important;
}
.cal-day-header { background:#ffffff !important; }
.cal-gutter-col { background:rgba(248,248,250,.9) !important; }

/* ── Modal backdrop ───────────────────────────────────────────── */
.modal-overlay {
    background:rgba(0,0,0,.72) !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
}
.modal-content,
.modal-content-treatment,
.modal-content-patient,
.feedback-dialog {
    background:#ffffff !important;
    border:1px solid rgba(0,0,0,.08) !important;
    box-shadow:0 32px 80px rgba(0,0,0,.45), 0 8px 24px rgba(255,255,255,0.07) !important;
    backdrop-filter:none !important;
    animation: v7-card-appear .32s cubic-bezier(.16,1,.3,1) both !important;
}
.modal-header { border-bottom:1px solid rgba(0,0,0,.07) !important; background:linear-gradient(180deg,rgba(124,58,237,.04),transparent) !important; }
.modal-footer { border-top:1px solid rgba(0,0,0,.06) !important; background:rgba(248,248,250,.9) !important; }

/* ── Botón primario ───────────────────────────────────────────── */
.btn-primary {
    background:linear-gradient(135deg,#7c3aed,#a78bfa) !important;
    background-size:200% auto !important;
    color:#fff !important;
    border:none !important;
    box-shadow:0 4px 16px rgba(124,58,237,.4) !important;
    transition:all .22s cubic-bezier(.16,1,.3,1) !important;
}
.btn-primary:hover {
    background-position:right center !important;
    box-shadow:0 8px 28px rgba(124,58,237,.55) !important;
    transform:translateY(-1px) !important;
}
.btn-primary:active { transform:scale(.98) !important; }
.btn-secondary,.btn-ghost {
    background:#fff !important; color:var(--gray-700) !important;
    border:1px solid rgba(0,0,0,.1) !important;
    box-shadow:0 1px 3px rgba(0,0,0,.07) !important;
}
.btn-secondary:hover,.btn-ghost:hover {
    border-color:rgba(139,92,246,.35) !important; color:#7c3aed !important;
    box-shadow:0 4px 14px rgba(124,58,237,.14) !important;
}
.cal-view-switcher .btn.is-active {
    background:linear-gradient(135deg,#7c3aed,#a78bfa) !important;
    color:#fff !important; border:none !important;
    box-shadow:0 4px 14px rgba(124,58,237,.4) !important;
}

/* ── Inputs ───────────────────────────────────────────────────── */
.input-group input,
.input-group select,
.input-group textarea,
.form-input {
    background:#fff !important;
    border:1px solid rgba(0,0,0,.1) !important;
    border-radius:.75rem !important;
    color:var(--gray-800) !important;
    transition:all .2s ease !important;
}
.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus,
.form-input:focus {
    border-color:rgba(124,58,237,.45) !important;
    box-shadow:0 0 0 3px rgba(255,255,255,0.07) !important;
    background:#fff !important;
}
.input-group label { color:var(--gray-600) !important; font-weight:700 !important; }

/* ── Login (refinado V7) ──────────────────────────────────────── */
#login-view {
    background:
        radial-gradient(ellipse at 15% 40%,  rgba(124,58,237,.3) 0%, transparent 55%),
        radial-gradient(ellipse at 88% 15%,  rgba(14,165,233,.22) 0%, transparent 50%),
        radial-gradient(ellipse at 55% 95%,  rgba(16,185,129,.14) 0%, transparent 45%),
        #09090b !important;
}
.login-card {
    background:#fff !important;
    border:1px solid rgba(255,255,255,.08) !important;
    border-radius:1.5rem !important;
    box-shadow:0 32px 80px rgba(0,0,0,.55), 0 8px 28px rgba(124,58,237,.22) !important;
    animation: v7-card-appear .5s cubic-bezier(.16,1,.3,1) both;
}
.logo-icon {
    background:linear-gradient(135deg,#7c3aed,#a78bfa) !important;
    box-shadow:0 8px 22px rgba(124,58,237,.42) !important;
}
.login-decoration .shape-1 { background:rgba(124,58,237,.65) !important; width:580px !important; height:580px !important; filter:blur(130px) !important; animation: v7-orb-drift 14s ease-in-out infinite; }
.login-decoration .shape-2 { background:rgba(14,165,233,.45) !important; width:420px !important; height:420px !important; filter:blur(110px) !important; animation: v7-orb-drift-2 18s ease-in-out infinite; }

/* ── Sidebar — barra top animada ─────────────────────────────── */
.app-brand-mark,
.mobile-header-brand-mark {
    background:linear-gradient(135deg,#7c3aed 0%,#a78bfa 100%) !important;
    box-shadow:0 0 0 1px rgba(139,92,246,.4), 0 8px 24px rgba(124,58,237,.45) !important;
    border-radius:.85rem !important;
}

/* ── Settings subnav ─────────────────────────────────────────── */
.settings-subnav-item {
    background:#fff !important;
    border:1px solid rgba(0,0,0,.08) !important;
    box-shadow:0 1px 3px rgba(0,0,0,.06) !important;
    transition:all .2s ease !important;
}
.settings-subnav-item i { color:#7c3aed !important; }
.settings-subnav-item:hover {
    border-color:rgba(139,92,246,.25) !important;
    box-shadow:0 6px 20px rgba(255,255,255,0.07) !important;
    transform:translateY(-2px) !important;
}
.settings-subnav-item.active {
    background:linear-gradient(135deg,rgba(255,255,255,0.05),#fff) !important;
    border-color:rgba(139,92,246,.28) !important;
    box-shadow:0 6px 22px rgba(255,255,255,0.07) !important;
}

/* ── Calendario ──────────────────────────────────────────────── */
.cal-today-header { background:rgba(255,255,255,0.04) !important; }
.cal-today-badge  { background:#7c3aed !important; color:#fff !important; }
.cal-apt-block {
    border-radius:.9rem !important;
    border:1px solid rgba(255,255,255,.35) !important;
    box-shadow:0 4px 14px rgba(0,0,0,.22) !important;
    transition:all .15s ease !important;
}
.cal-apt-block:hover {
    box-shadow:0 10px 26px rgba(0,0,0,.3) !important;
    z-index:10 !important;
}
.cal-day-summary-card:hover,
.cal-month-summary-card:hover {
    border-color:rgba(124,58,237,.35) !important;
    box-shadow:0 8px 24px rgba(124,58,237,.14), 0 24px 48px rgba(0,0,0,.32) !important;
    transform:translateY(-2px) !important;
}

/* ── Billing ─────────────────────────────────────────────────── */
.billing-patient-result {
    background:#fff !important; border:1px solid rgba(0,0,0,.07) !important;
    box-shadow:0 1px 3px rgba(0,0,0,.05) !important;
    transition:all .2s ease !important;
}
.billing-patient-result:hover {
    border-color:rgba(139,92,246,.28) !important;
    box-shadow:0 8px 24px rgba(124,58,237,.1) !important;
    transform:translateY(-1px) !important;
}
.billing-patient-search-card {
    background:rgba(255,255,255,.06) !important;
    border:1px solid rgba(255,255,255,.1) !important;
}
.billing-patient-search-card h4 { color:#f4f4f5 !important; }
.billing-patient-search-card p  { color:#71717a !important; }
.billing-patient-search-count { background:rgba(255,255,255,0.07) !important; color:#a78bfa !important; }

/* ── Section eyebrow / title en areas fuera de section-hero ──── */
.section-eyebrow { color:#a78bfa !important; }

/* ── Toasts ──────────────────────────────────────────────────── */
.feedback-toast {
    background:#fff !important;
    border:1px solid rgba(0,0,0,.08) !important;
    box-shadow:0 12px 36px rgba(0,0,0,.18) !important;
    backdrop-filter:none !important;
}

/* ── Misc ────────────────────────────────────────────────────── */
.app-loading-spinner { border-top-color:#7c3aed !important; }
.app-loading-card { background:rgba(255,255,255,.96) !important; }
.section-hero-card .btn-primary { box-shadow:0 4px 16px rgba(124,58,237,.45) !important; }
.clinical-info-item,
.clinical-info-summary > div {
    background:rgba(248,248,250,.95) !important;
    border:1px solid rgba(0,0,0,.07) !important;
}
.odontogram-wrapper {
    background:rgba(248,248,250,.96) !important;
    border:1px solid rgba(0,0,0,.07) !important;
}
.dashboard-date-filter {
    background:#fff !important;
    border:1px solid rgba(0,0,0,.1) !important;
    color:var(--gray-700) !important;
}
/* ── Sidebar backdrop (mobile) ───────────────────────────────── */
.sidebar-backdrop { background:rgba(0,0,0,.65) !important; backdrop-filter:blur(4px) !important; }

/* ===== VISUAL REFRESH V8 — Light/Dark bien diferenciados ===== */

/* ══════════════════════════════════════════════════════════════
   BASE GLOBAL — fondo siempre en claro por defecto
   ══════════════════════════════════════════════════════════════ */

html { background:#f0effa !important; }
body { background:#f0effa !important; }
#app-view { background:#f0effa !important; }
#app-view main { background:#f0effa !important; overflow:hidden; position:relative; }

/* Sin orbes en modo claro */
body:not(.theme-dark) #app-view main::before,
body:not(.theme-dark) #app-view main::after { display:none !important; }

/* App header — blanco limpio en modo claro */
body:not(.theme-dark) .app-header {
    background:#fff !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border-bottom:1px solid rgba(0,0,0,.09) !important;
    box-shadow:0 1px 3px rgba(0,0,0,.06) !important;
}
body:not(.theme-dark) .app-header .mobile-header-brand span { color:#1c1c2e !important; }
body:not(.theme-dark) .sidebar-toggle-btn {
    background:#f4f3ff !important;
    border:1px solid rgba(255,255,255,0.07) !important;
    color:#7c3aed !important;
}

/* Section headline — texto oscuro en modo claro */
body:not(.theme-dark) .section-headline,
body:not(.theme-dark) .section-headline .section-title,
body:not(.theme-dark) .section-headline .section-title-sm { color:#1c1c2e !important; }
body:not(.theme-dark) .section-headline .section-subtitle { color:#71717a !important; }
body:not(.theme-dark) .section-eyebrow { color:#7c3aed !important; }

/* Section hero card — en claro: blanca con acento violeta sutil */
body:not(.theme-dark) .section-hero-card {
    background:#fff !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border:1px solid rgba(255,255,255,0.07) !important;
    box-shadow:0 4px 24px rgba(255,255,255,0.05), 0 1px 3px rgba(0,0,0,.06) !important;
}
body:not(.theme-dark) .section-hero-card .section-title,
body:not(.theme-dark) .section-hero-card .section-title-sm {
    color:#1c1c2e !important;
    -webkit-text-fill-color:#1c1c2e !important;
    background:none !important;
}
body:not(.theme-dark) .section-hero-card .section-subtitle { color:#71717a !important; }
body:not(.theme-dark) .section-hero-card h3 { color:#1c1c2e !important; }

/* Cards en modo claro — blancas, sombra ligera */
body:not(.theme-dark) .card,
body:not(.theme-dark) .settings-card,
body:not(.theme-dark) .table-container,
body:not(.theme-dark) .clinical-history-card,
body:not(.theme-dark) .clinical-images-shell,
body:not(.theme-dark) .cal-scroll-wrap,
body:not(.theme-dark) .cal-month-board,
body:not(.theme-dark) .cal-legend {
    background:#fff !important;
    border:1px solid rgba(0,0,0,.07) !important;
    box-shadow:0 2px 8px rgba(0,0,0,.06), 0 8px 24px rgba(255,255,255,0.04) !important;
}
body:not(.theme-dark) .card:hover,
body:not(.theme-dark) .settings-card:hover {
    box-shadow:0 4px 16px rgba(0,0,0,.08), 0 16px 40px rgba(124,58,237,.1) !important;
    transform:translateY(-2px) !important;
}

/* Modales en modo claro */
body:not(.theme-dark) .modal-content,
body:not(.theme-dark) .modal-content-treatment,
body:not(.theme-dark) .modal-content-patient,
body:not(.theme-dark) .feedback-dialog {
    background:#fff !important;
    box-shadow:0 24px 64px rgba(0,0,0,.18), 0 8px 24px rgba(124,58,237,.1) !important;
}
body:not(.theme-dark) .modal-footer { background:rgba(248,247,255,.9) !important; }

/* Billing search en modo claro */
body:not(.theme-dark) .billing-patient-search-card {
    background:linear-gradient(135deg,#f4f3ff,#ede9fe) !important;
    border:1px solid rgba(124,58,237,.14) !important;
}
body:not(.theme-dark) .billing-patient-search-card h4 { color:#1c1c2e !important; }
body:not(.theme-dark) .billing-patient-search-card p  { color:#6b7280 !important; }

/* Calendario en modo claro */
body:not(.theme-dark) .cal-gutter-col { background:rgba(240,239,250,.9) !important; }
body:not(.theme-dark) .cal-day-header { background:#fff !important; }
body:not(.theme-dark) .calendar-toolbar,
body:not(.theme-dark) .agenda-toolbar,
body:not(.theme-dark) .cal-toolbar {
    background:#fff !important;
    border:1px solid rgba(0,0,0,.07) !important;
    box-shadow:0 2px 8px rgba(0,0,0,.06) !important;
}

/* ══════════════════════════════════════════════════════════════
   MODO OSCURO — dark canvas, orbes animados, cards flotantes
   ══════════════════════════════════════════════════════════════ */

body.theme-dark { background:#0d1117 !important; }
body.theme-dark #app-view { background:#0d1117 !important; }
body.theme-dark #app-view main {
    background:#0d1117 !important;
    position:relative;
    overflow:hidden;
}

/* Orbes animados — SOLO en dark */
body.theme-dark #app-view main::before,
body.theme-dark #app-view main::after {
    display:block !important;
    content:'';
    position:fixed;
    border-radius:50%;
    pointer-events:none;
    z-index:0;
    filter:blur(90px);
    opacity:.55;
}
body.theme-dark #app-view main::before {
    width:600px; height:600px;
    background:radial-gradient(circle, rgba(124,58,237,.5) 0%, transparent 70%);
    top:-150px; right:-100px;
    animation: v7-orb-drift 18s ease-in-out infinite;
}
body.theme-dark #app-view main::after {
    width:500px; height:500px;
    background:radial-gradient(circle, rgba(14,165,233,.35) 0%, transparent 70%);
    bottom:-120px; left:-80px;
    animation: v7-orb-drift-2 22s ease-in-out infinite;
}

/* App header en dark — glass oscuro */
body.theme-dark .app-header {
    background:rgba(12,12,20,.85) !important;
    backdrop-filter:blur(20px) !important;
    -webkit-backdrop-filter:blur(20px) !important;
    border-bottom:1px solid rgba(255,255,255,.07) !important;
    box-shadow:none !important;
}
body.theme-dark .app-header .mobile-header-brand span { color:#f4f4f5 !important; }
body.theme-dark .sidebar-toggle-btn {
    background:rgba(255,255,255,.08) !important;
    border:1px solid rgba(255,255,255,.1) !important;
    color:#a1a1aa !important;
}

/* Section headline — texto claro en dark */
body.theme-dark .section-headline,
body.theme-dark .section-headline .section-title,
body.theme-dark .section-headline .section-title-sm { color:#f4f4f5 !important; }
body.theme-dark .section-headline .section-eyebrow { color:#a78bfa !important; }
body.theme-dark .section-headline .section-subtitle { color:#71717a !important; }
body.theme-dark .section-eyebrow { color:#a78bfa !important; }

/* Section hero card — glass oscuro en dark */
body.theme-dark .section-hero-card {
    background:rgba(255,255,255,.04) !important;
    backdrop-filter:blur(24px) !important;
    -webkit-backdrop-filter:blur(24px) !important;
    border:1px solid rgba(255,255,255,.09) !important;
    box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 16px 40px rgba(0,0,0,.4) !important;
}
body.theme-dark .section-hero-card .section-title,
body.theme-dark .section-hero-card .section-title-sm {
    color:#f4f4f5 !important;
    -webkit-text-fill-color:#f4f4f5 !important;
    background:none !important;
}
body.theme-dark .section-hero-card .section-subtitle { color:rgba(161,161,170,.85) !important; }
body.theme-dark .section-hero-card h3 { color:#f4f4f5 !important; }

/* Cards en dark — blancas con sombra profunda */
body.theme-dark .card,
body.theme-dark .settings-card,
body.theme-dark .table-container,
body.theme-dark .clinical-history-card,
body.theme-dark .clinical-images-shell,
body.theme-dark .cal-scroll-wrap,
body.theme-dark .cal-month-board {
    background:#ffffff !important;
    border:1px solid rgba(0,0,0,.07) !important;
    box-shadow:0 4px 6px rgba(0,0,0,.07), 0 28px 56px rgba(0,0,0,.55) !important;
}

/* En agenda dark, la leyenda de profesionales no debe quedar blanca. */
body.theme-dark .cal-legend,
body.theme-dark .cal-legend-horizontal,
body.theme-dark .cal-legend-compact,
body.theme-dark .cal-wrapper .cal-legend,
body.theme-dark .cal-wrapper .cal-legend-horizontal,
body.theme-dark .cal-wrapper .cal-legend-compact,
body.theme-dark .cal-wrapper-mobile .cal-legend,
body.theme-dark .cal-wrapper-mobile .cal-legend-horizontal,
body.theme-dark .cal-wrapper-mobile .cal-legend-compact {
    background: linear-gradient(180deg, rgba(19, 28, 49, 0.98) 0%, rgba(12, 19, 34, 0.99) 100%) !important;
    border: 1px solid rgba(132, 151, 202, 0.24) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.38) !important;
}
body.theme-dark .card:hover,
body.theme-dark .settings-card:hover {
    box-shadow:0 4px 6px rgba(0,0,0,.07), 0 36px 72px rgba(0,0,0,.65) !important;
    transform:translateY(-3px) !important;
}

/* Billing search en dark */
body.theme-dark .billing-patient-search-card {
    background:rgba(255,255,255,.06) !important;
    border:1px solid rgba(255,255,255,.1) !important;
}
body.theme-dark .billing-patient-search-card h4 { color:#f4f4f5 !important; }
body.theme-dark .billing-patient-search-card p  { color:#71717a !important; }

/* Calendario en dark */
body.theme-dark .cal-gutter-col { background:rgba(20,20,32,.9) !important; }
body.theme-dark .cal-day-header { background:#0d1117 !important; }
body.theme-dark .calendar-toolbar,
body.theme-dark .agenda-toolbar,
body.theme-dark .cal-toolbar {
    background:#161b27 !important;
    border:1px solid rgba(255,255,255,.07) !important;
    box-shadow:0 4px 6px rgba(0,0,0,.2) !important;
}

/* ── V8 FIX: Calendario oscuro unificado en dark mode ────────── */

/* El cal-month-board en dark debe ser oscuro como sus celdas, no blanco */
body.theme-dark .cal-scroll-wrap {
    background:rgba(14,21,38,.95) !important;
    overflow:hidden !important;
    border:1px solid rgba(132,151,202,.1) !important;
    box-shadow:0 4px 6px rgba(0,0,0,.1), 0 28px 56px rgba(0,0,0,.45) !important;
}
body.theme-dark .cal-month-board {
    background:rgba(14,21,38,.95) !important;
    overflow:hidden !important;
}

/* Tambien en modo claro: overflow hidden para que no se vean bordes en esquinas */
body:not(.theme-dark) .cal-scroll-wrap,
body:not(.theme-dark) .cal-month-board { overflow:hidden !important; }

/* Grid lines: un poco mas sutiles en dark */
body.theme-dark .cal-month-cell {
    border-color:rgba(100,120,160,.12) !important;
}
body.theme-dark .cal-month-weekdays {
    background:rgba(12,17,32,1) !important;
    border-bottom:1px solid rgba(100,120,160,.15) !important;
}
body.theme-dark .cal-month-weekday {
    color: #64748b !important;
    border-right-color:rgba(100,120,160,.1) !important;
}
/* Numero del dia en dark */
body.theme-dark .cal-month-daynum {
    color:#e2e8f0 !important;
}

/* ── V8 FIX 2: Calendario — eliminar bordes visibles ─────────── */

/* El scroll-wrap NO debe tener border-radius (tiene overflow-x:auto)
   → lo ponemos transparent y dejamos que el board tenga los bordes */
body.theme-dark .cal-scroll-wrap,
body:not(.theme-dark) .cal-scroll-wrap {
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    border-radius:0 !important;
    padding:0 !important;
}

/* El board es el que tiene el look de "card" */
body:not(.theme-dark) .cal-month-board {
    background:#fff !important;
    border:1px solid rgba(0,0,0,.08) !important;
    border-radius:1.1rem !important;
    overflow:hidden !important;
    box-shadow:0 2px 8px rgba(0,0,0,.06), 0 8px 24px rgba(255,255,255,0.04) !important;
}

body.theme-dark .cal-month-board {
    background:rgba(14,21,38,1) !important;
    border:1px solid rgba(132,151,202,.1) !important;
    border-radius:1.1rem !important;
    overflow:hidden !important;
    box-shadow:0 4px 6px rgba(0,0,0,.1), 0 28px 56px rgba(0,0,0,.45) !important;
}

/* Celdas: sin fondo propio visible, solo los bordes de grid sutiles */
body.theme-dark .cal-month-cell {
    border-right:1px solid rgba(100,120,160,.1) !important;
    border-bottom:1px solid rgba(100,120,160,.1) !important;
}
body.theme-dark .cal-month-grid {
    background:rgba(14,21,38,1) !important;
}
body.theme-dark .cal-month-weekdays {
    background:rgba(10,15,28,1) !important;
    border-bottom:1px solid rgba(100,120,160,.14) !important;
}

/* ===== V9 FIX — Scroll + Dark mode completo ===== */

/* ── SCROLL FIX: flex items necesitan min-height:0 para que
   overflow-y:auto funcione dentro de un contenedor flex-col ── */
#app-view main {
    min-height: 0 !important;
}
#main-content {
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 1 0% !important;
}

/* ══════════════════════════════════════════════════════════════
   DARK MODE COMPLETO — todo oscuro
   ══════════════════════════════════════════════════════════════ */

/* Fondo general */
body.theme-dark,
body.theme-dark #app-view,
body.theme-dark #app-view main,
body.theme-dark #main-content { background:#0d1117 !important; }

/* Cards y contenedores: glass oscuro en vez de blanco */
body.theme-dark .card,
body.theme-dark .settings-card,
body.theme-dark .table-container,
body.theme-dark .clinical-history-card,
body.theme-dark .clinical-images-shell,
body.theme-dark .modal-content,
body.theme-dark .modal-content-treatment,
body.theme-dark .modal-content-patient,
body.theme-dark .modal-content-schedule,
body.theme-dark .feedback-dialog {
    background:#1e293b !important;
    border:1px solid rgba(255,255,255,0.07) !important;
    color:#e2e8f0 !important;
}

/* Section hero card */
body.theme-dark .section-hero-card {
    background:rgba(255,255,255,0.05) !important;
    border:1px solid rgba(139,92,246,.2) !important;
}

/* Settings subnav items */
body.theme-dark .settings-subnav-item {
    background:#243347 !important;
    border:1px solid rgba(139,92,246,.18) !important;
}
body.theme-dark .settings-subnav-item span,
body.theme-dark .settings-subnav-item p { color:#a1a1aa !important; }
body.theme-dark .settings-subnav-item strong,
body.theme-dark .settings-subnav-item h4 { color:#e2e8f0 !important; }

/* Form inputs */
body.theme-dark .input-group input,
body.theme-dark .input-group select,
body.theme-dark .input-group textarea,
body.theme-dark .form-input,
body.theme-dark select,
body.theme-dark input[type="text"],
body.theme-dark input[type="email"],
body.theme-dark input[type="password"],
body.theme-dark input[type="number"],
body.theme-dark textarea {
    background:#12122a !important;
    border:1px solid rgba(139,92,246,.2) !important;
    color:#e2e8f0 !important;
}
body.theme-dark .input-group input::placeholder,
body.theme-dark .input-group textarea::placeholder { color:#52525b !important; }
body.theme-dark .input-group label { color:#a1a1aa !important; }
body.theme-dark .input-group input:focus,
body.theme-dark .input-group select:focus {
    border-color:rgba(139,92,246,.5) !important;
    background:#172234 !important;
}

/* Botones secundarios */
body.theme-dark .btn-secondary,
body.theme-dark .btn-ghost {
    background:#243347 !important;
    border:1px solid rgba(139,92,246,.2) !important;
    color:#c4b5fd !important;
}

/* Checkboxes y settings-subsection */
body.theme-dark .settings-subsection { background:#1e293b !important; border-color:rgba(255,255,255,0.07) !important; }
body.theme-dark .settings-subsection h4 { color:#e2e8f0 !important; }
body.theme-dark .settings-subsection p,
body.theme-dark .settings-subsection label { color:#a1a1aa !important; }
body.theme-dark .settings-list div,
body.theme-dark .checkbox-group { background:#243347 !important; border-color:rgba(255,255,255,0.07) !important; }
body.theme-dark .checkbox-group label { color:#c4b5fd !important; }
body.theme-dark .checkbox-group input[type="checkbox"] {
    accent-color:#7c3aed !important;
    background:#12122a !important;
}

/* Table interior */
body.theme-dark table thead { background:#172234 !important; }
body.theme-dark table thead th { color:#a1a1aa !important; background:#172234 !important; }
body.theme-dark table tbody tr { border-bottom:1px solid rgba(255,255,255,0.05) !important; }
body.theme-dark table tbody td { color:#e2e8f0 !important; background:transparent !important; }
body.theme-dark table tbody tr:hover td { background:rgba(255,255,255,0.04) !important; }

/* Modal header/footer */
body.theme-dark .modal-header {
    background:rgba(255,255,255,0.04) !important;
    border-bottom:1px solid rgba(255,255,255,0.07) !important;
}
body.theme-dark .modal-footer {
    background:#172234 !important;
    border-top:1px solid rgba(139,92,246,.1) !important;
}

/* Textos generales en dark */
body.theme-dark .card p,
body.theme-dark .settings-card p,
body.theme-dark .card span:not(.badge):not(.chip) { color:#a1a1aa !important; }
body.theme-dark .card h3,
body.theme-dark .card h4,
body.theme-dark .settings-card h3,
body.theme-dark .settings-card h4 { color:#e2e8f0 !important; }

/* Sidebar theme toggle — estilos movidos al bloque "Sidebar footer Dark" */

/* Billing results */
body.theme-dark .billing-patient-result {
    background:#1e293b !important;
    border:1px solid rgba(255,255,255,0.07) !important;
}

/* Clinical info */
body.theme-dark .clinical-info-item,
body.theme-dark .clinical-info-summary > div {
    background:#1e293b !important;
    border:1px solid rgba(255,255,255,0.07) !important;
}
body.theme-dark .odontogram-wrapper {
    background:#1e293b !important;
    border:1px solid rgba(255,255,255,0.07) !important;
}

/* Cal month board en dark — coherente con el resto */
body.theme-dark .cal-scroll-wrap { background:transparent !important; border:none !important; box-shadow:none !important; border-radius:0 !important; }
body.theme-dark .cal-month-board { background:#1e293b !important; border:1px solid rgba(255,255,255,0.07) !important; border-radius:1.1rem !important; overflow:hidden !important; }
body.theme-dark .cal-month-grid { background:#1e293b !important; }
body.theme-dark .cal-month-weekdays { background:#172234 !important; border-bottom:1px solid rgba(255,255,255,0.07) !important; }
body.theme-dark .cal-month-cell { background:#1e293b !important; border-right:1px solid rgba(255,255,255,0.05) !important; border-bottom:1px solid rgba(255,255,255,0.05) !important; }
body.theme-dark .cal-month-cell.is-outside-month { background:#0d1117 !important; }

/* Toast */
body.theme-dark .feedback-toast { background:#1e293b !important; border:1px solid rgba(255,255,255,0.08) !important; color:#e2e8f0 !important; }

/* ===== V9B FIX — Eliminar espacio blanco en body ===== */

/* El body no debe ser scrolleable ni mostrar fondo */
html {
    height: 100% !important;
    overflow: hidden !important;
}
body {
    height: 100% !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* #app-view debe llenar todo el viewport */
#app-view {
    height: 100vh !important;
    width: 100vw !important;
    overflow: hidden !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
}

/* Login view igual */
#login-view {
    height: 100vh !important;
    width: 100vw !important;
    overflow: auto !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
}

/* ===== Odontogram Toolbar ===== */
.odontogram-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.09);
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.07);
    margin-top: 12px;
    flex-wrap: wrap;
}

/* Color buttons */
.odonto-color-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
}

.odonto-color-btn {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
    background: #f5f5f5;
}
.odonto-color-btn.odonto-rojo { background: #ef4444; }
.odonto-color-btn.odonto-azul { background: #2563eb; }
.odonto-color-btn.is-active   { border-color: #1c1c2e; box-shadow: 0 0 0 2px rgba(0,0,0,.15); transform: scale(1.1); }
.odonto-color-btn:hover       { transform: scale(1.08); }
.odonto-color-btn::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.58);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.8);
    transition: opacity .15s ease, transform .15s ease;
    pointer-events: none;
}
.odonto-color-btn.is-active::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Treatment buttons */
.odonto-treat-group {
    display: flex;
    gap: 6px;
    align-items: center;
    flex: 1;
    flex-wrap: wrap;
}

.odonto-treat-btn {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    border: 2px solid rgba(0,0,0,.1);
    background: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all .15s ease;
    padding: 3px;
    position: relative;
    overflow: visible;
}
.odonto-treat-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7px;
    display: block;
}
.odonto-treat-label {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30,20,50,.85);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    z-index: 100;
}
.odonto-treat-label::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(30,20,50,.85);
}
.odonto-treat-btn:hover .odonto-treat-label { opacity: 1; }
.odonto-treat-btn:hover    { border-color: #7c3aed; box-shadow: 0 2px 8px rgba(124,58,237,.2); transform: translateY(-1px); }
.odonto-treat-btn.is-active { border-color: #7c3aed; background: rgba(255,255,255,0.05); box-shadow: 0 2px 8px rgba(124,58,237,.25); }

.odonto-infantil-toggle {
    width: 100%;
    max-width: 56rem;
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 4px 0;
    transition: color .15s;
}
.odonto-infantil-toggle:hover { color: #64748b; }
.odonto-infantil-toggle-line {
    flex: 1;
    height: 1px;
    border-top: 1.5px dashed #cbd5e1;
}
.odonto-infantil-toggle i { font-size: 0.65rem; flex-shrink: 0; }

.odonto-jaw-gap {
    height: 18px;
    flex-shrink: 0;
}

/* Action buttons */
.odonto-action-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
    margin-left: auto;
}

.odonto-apply-btn {
    background: #16a34a;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: .04em;
    transition: all .15s ease;
    white-space: nowrap;
}
.odonto-apply-btn:hover { background: #15803d; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(22,163,74,.35); }

/* LIMPIAR — inactivo: gris neutro con borde */
.odonto-clear-btn {
    background: #f1f5f9;
    color: #64748b;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: .04em;
    transition: all .15s ease;
    white-space: nowrap;
}
.odonto-clear-btn:hover {
    background: #e2e8f0;
    color: #475569;
    transform: translateY(-1px);
}

/* LIMPIAR — activo: naranja fuerte con glow */
.odonto-clear-btn.is-clearing {
    background: #ea580c;
    color: #fff;
    border-color: #ea580c;
    box-shadow: 0 0 0 3px rgba(234,88,12,.30);
    animation: odonto-eraser-pulse 1.1s ease-in-out infinite;
}
.odonto-clear-btn.is-clearing:hover {
    background: #c2410c;
    border-color: #c2410c;
    transform: translateY(-1px);
}

@keyframes odonto-eraser-pulse {
    0%,100% { box-shadow: 0 0 0 3px rgba(234,88,12,.30); }
    50%      { box-shadow: 0 0 0 6px rgba(234,88,12,.15); }
}

/* Cursor goma persistente */
.odontogram-wrapper.odontogram-erasing,
.odontogram-wrapper.odontogram-erasing * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M9 20l9-9 5 5-6.5 6.5H11z' fill='%23f5eeeb' stroke='%23dc2626' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M6 23h14' stroke='%23dc2626' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M13 16l5 5' stroke='%23c08080' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 8 22, cell;
}
body.theme-dark .odontogram-wrapper.odontogram-erasing,
body.theme-dark .odontogram-wrapper.odontogram-erasing * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M9 20l9-9 5 5-6.5 6.5H11z' fill='%231a1a2e' stroke='%23f87171' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M6 23h14' stroke='%23f87171' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M13 16l5 5' stroke='%23f4f4f5' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 8 22, cell;
}

/* Dark mode */
body.theme-dark .odontogram-toolbar {
    background: #1e293b;
    border-color: rgba(139,92,246,.2);
}
body.theme-dark .odonto-treat-btn {
    background: #243347;
    border-color: rgba(139,92,246,.2);
}
body.theme-dark .odonto-color-btn { border-color: rgba(255,255,255,.2); }
body.theme-dark .odonto-color-btn.is-active { border-color: #f4f4f5; }

/* ===== Odontogram Responsive Stability ===== */
.clinical-history-card .clinical-odontogram-block {
    display: block !important;
}

.clinical-history-card .odontogram-wrapper {
    transform: none !important;
    transform-origin: top center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1rem 0.85rem 1.1rem !important;
}

.clinical-history-card .tooth-box {
    width: clamp(34px, 8vw, 52px) !important;
    min-width: clamp(34px, 8vw, 52px) !important;
    height: clamp(50px, 10vw, 66px) !important;
    padding-top: 0.18rem !important;
}

.clinical-history-card .odontogram-wrapper .tooth-box > .tooth-svg-box {
    min-width: clamp(32px, 7vw, 46px) !important;
    min-height: clamp(32px, 7vw, 46px) !important;
}

@media (max-width: 768px) {
    .clinical-history-card .clinical-odontogram-block {
        margin-top: 1.2rem !important;
    }

    .clinical-history-card .odontogram-header {
        align-items: flex-start;
    }

    .clinical-history-card .odontogram-wrapper {
        padding: 0.85rem 0.55rem 1rem !important;
        border-radius: 1rem !important;
    }

    .clinical-history-card .odontogram-toolbar {
        padding: 0.6rem !important;
        gap: 0.55rem !important;
    }

    .clinical-history-card .odonto-treat-group {
        flex-basis: 100%;
        order: 3;
    }

    .clinical-history-card .odonto-action-group {
        width: 100%;
        margin-left: 0;
        flex-direction: row;
    }

    .clinical-history-card .odonto-apply-btn,
    .clinical-history-card .odonto-clear-btn {
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 420px) {
    .clinical-history-card .tooth-box {
        width: 34px !important;
        min-width: 34px !important;
        height: 50px !important;
    }

    .clinical-history-card .odontogram-wrapper {
        padding-inline: 0.4rem !important;
    }
}

/* ===== Dark Mode Fix: Profesionales (Agenda) ===== */
body.theme-dark .cal-wrapper .cal-legend,
body.theme-dark .cal-wrapper .cal-legend-horizontal,
body.theme-dark .cal-wrapper .cal-legend-compact {
    background: linear-gradient(180deg, rgba(19, 28, 49, 0.96) 0%, rgba(12, 19, 34, 0.98) 100%) !important;
    border: 1px solid rgba(132, 151, 202, 0.2) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.34) !important;
}

body.theme-dark .cal-wrapper .cal-legend-title {
    color: #9aa7c7 !important;
}

body.theme-dark .cal-wrapper .cal-prof-select .cal-legend-chip {
    opacity: 0.92;
}

body.theme-dark .cal-wrapper .cal-prof-select.is-active .cal-legend-chip {
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16), 0 10px 24px rgba(0, 0, 0, 0.38) !important;
}

/* ===== Hard Override: Leyenda Profesionales en Dark ===== */
body.theme-dark .cal-legend,
body.theme-dark .cal-legend-horizontal,
body.theme-dark .cal-legend-compact,
body.theme-dark .calendar-legend,
body.theme-dark .calendar-filter-legend {
    background: linear-gradient(180deg, rgba(19, 28, 49, 0.98) 0%, rgba(12, 19, 34, 0.99) 100%) !important;
    border: 1px solid rgba(132, 151, 202, 0.24) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.38) !important;
}

body.theme-dark .cal-legend-title {
    color: #9aa7c7 !important;
}

/* ================================================================
   LIGHT MODE — Sidebar claro
   ================================================================ */
body:not(.theme-dark) #app-sidebar {
    background: #ffffff !important;
    border-right: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 2px 0 16px rgba(0,0,0,0.05) !important;
    backdrop-filter: none !important;
}
body:not(.theme-dark) .app-brand {
    background: transparent !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
}
body:not(.theme-dark) .app-brand h1 {
    color: #18181b !important;
}
body:not(.theme-dark) .app-brand-subtitle {
    color: #71717a !important;
}

/* Nav items en light */
body:not(.theme-dark) .nav-item {
    color: #52525b !important;
    border-left: 2px solid transparent !important;
}
body:not(.theme-dark) .nav-item i {
    color: #a1a1aa !important;
}
body:not(.theme-dark) .nav-item:hover {
    background: rgba(255,255,255,0.04) !important;
    color: #7c3aed !important;
}
body:not(.theme-dark) .nav-item:hover i {
    color: #8b5cf6 !important;
}
body:not(.theme-dark) .nav-item.active {
    background: rgba(124,58,237,0.10) !important;
    color: #7c3aed !important;
    border-left: 2px solid #7c3aed !important;
    box-shadow: none !important;
}
body:not(.theme-dark) .nav-item.active i {
    color: #7c3aed !important;
}
body:not(.theme-dark) .nav-sub-item {
    color: #71717a !important;
}
body:not(.theme-dark) .nav-sub-item:hover {
    background: rgba(124,58,237,0.05) !important;
    color: #7c3aed !important;
}
body:not(.theme-dark) .nav-sub-item.active {
    background: rgba(255,255,255,0.05) !important;
    color: #7c3aed !important;
}

/* ── Sidebar footer — Light ── */
body:not(.theme-dark) .sidebar-user-wrap {
    background: rgba(0,0,0,0.02) !important;
    border-top: 1px solid rgba(0,0,0,0.07) !important;
}
body:not(.theme-dark) .user-profile {
    background: rgba(99,102,241,0.05) !important;
    border: 1px solid rgba(99,102,241,0.12) !important;
    box-shadow: none !important;
}
body:not(.theme-dark) .user-profile:hover {
    background: rgba(99,102,241,0.10) !important;
}
body:not(.theme-dark) #user-initials {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #fff !important;
}
body:not(.theme-dark) #user-name {
    color: #18181b !important;
    font-weight: 700 !important;
}
body:not(.theme-dark) #user-role-display {
    color: #71717a !important;
}
body:not(.theme-dark) .sidebar-logout-btn {
    color: #71717a !important;
    background: transparent !important;
    border: 1px solid transparent !important;
}
body:not(.theme-dark) .sidebar-logout-btn:hover {
    background: rgba(99,102,241,0.07) !important;
    color: #6366f1 !important;
    border-color: rgba(99,102,241,0.15) !important;
}

/* ── Sidebar footer — Dark ── */
body.theme-dark .sidebar-user-wrap {
    background: transparent !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
}
body.theme-dark .user-profile {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: none !important;
}
body.theme-dark .user-profile:hover {
    background: rgba(255,255,255,0.08) !important;
}
body.theme-dark #user-initials {
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    color: #fff !important;
    box-shadow: none !important;
}
body.theme-dark #user-name {
    color: #e2e8f0 !important;
    font-weight: 700 !important;
}
body.theme-dark #user-role-display {
    color: #4e5a72 !important;
}
body.theme-dark .sidebar-logout-btn {
    color: #4e5a72 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
}
body.theme-dark .sidebar-logout-btn:hover {
    background: rgba(239,68,68,0.10) !important;
    color: #f87171 !important;
    border-color: rgba(239,68,68,0.18) !important;
}
body.theme-dark .sidebar-theme-control {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.08) !important;
    box-shadow: none !important;
}
body.theme-dark .sidebar-theme-label {
    color: #64748b !important;
}
body.theme-dark .sidebar-theme-btn {
    color: #94a3b8 !important;
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.10) !important;
}
body.theme-dark .sidebar-theme-btn:hover {
    background: rgba(255,255,255,0.10) !important;
    color: #e2e8f0 !important;
}

/* ================================================================
   TURNOS FINALIZADOS — collapsible pill
   ================================================================ */
.finished-apts-details {
    margin-top: 0.5rem;
    border-top: 1px solid var(--border-soft, rgba(0,0,0,0.07));
}

.finished-apts-summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    padding: 0.55rem 1rem;
    border-radius: 0.65rem;
    transition: background 0.15s ease;
}
.finished-apts-summary::-webkit-details-marker { display: none; }
.finished-apts-summary:hover {
    background: rgba(0,0,0,0.03);
}

.finished-apts-summary-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-500, #71717a);
}

.finished-apts-chevron {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
    color: var(--gray-400, #a1a1aa);
}
.finished-apts-details[open] .finished-apts-chevron {
    transform: rotate(90deg);
}

.finished-apts-count {
    font-size: 0.72rem !important;
    padding: 0.1rem 0.5rem !important;
    font-weight: 700;
}

/* Dark mode */
body.theme-dark .finished-apts-details {
    border-top-color: rgba(255,255,255,0.07);
}
body.theme-dark .finished-apts-summary:hover {
    background: rgba(255,255,255,0.04);
}
body.theme-dark .finished-apts-summary-inner {
    color: #71717a;
}
body.theme-dark .finished-apts-chevron {
    color: #52525b;
}

/* ================================================================
   PROFESSIONAL UI OVERHAUL — Light + Dark mode polish
   Prioridad máxima: este bloque gana a todo lo anterior
   ================================================================ */

/* ── Settings: tablas responsive (Usuarios / Profesionales existentes) ── */
.settings-panel-card .table-container,
.settings-area .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}
.settings-panel-card table,
.settings-area table {
    min-width: 560px;
}
/* En móvil, la columna ACCIÓN no necesita tanto espacio */
@media screen and (max-width: 768px) {
    .settings-panel-card table,
    .settings-area table {
        min-width: 480px;
        font-size: 0.82rem;
    }
    .settings-panel-card td,
    .settings-area td {
        padding-top: 0.55rem !important;
        padding-bottom: 0.55rem !important;
    }
}

/* ── Calendario: horario del profesional en header ── */
.cal-prof-schedule-badge {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--gray-400);
    margin-left: 0.5rem;
    opacity: 0.8;
}

/* ── Calendario: card "no trabaja" (vista día) ── */
.cal-no-work-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    background: var(--surface-1, #fff);
    border: 1px solid var(--border-soft, rgba(0,0,0,0.07));
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
}
.cal-no-work-icon {
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
    border-radius: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}
.cal-no-work-body h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 0.2rem;
}
.cal-no-work-body p {
    font-size: 0.82rem;
    color: var(--gray-400);
    margin: 0;
}
body.theme-dark .cal-no-work-card {
    background: #1e293b;
    border-color: rgba(255,255,255,0.07);
}
body.theme-dark .cal-no-work-body h4 { color: #e2e8f0; }
body.theme-dark .cal-no-work-body p  { color: #52525b; }

/* ── Calendario semana: columna sin trabajo ── */
.cal-day-col-no-work {
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 8px,
        rgba(0,0,0,0.025) 8px,
        rgba(0,0,0,0.025) 9px
    ) !important;
    opacity: 0.75;
}
.cal-day-no-work {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1.5rem 0.5rem;
    color: var(--gray-400);
    text-align: center;
}
.cal-day-no-work i { font-size: 1.1rem; opacity: 0.4; }
.cal-day-no-work span { font-size: 0.73rem; font-weight: 600; }

.cal-day-sched-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--gray-400);
    margin-top: 0.25rem;
    letter-spacing: 0.01em;
}

/* ── Calendario semana: grid fila única + header con nombre de día ── */
.cal-week-grid {
    grid-auto-rows: minmax(180px, 1fr);
}

.cal-week-dayhead {
    flex-direction: column !important;
    gap: 0.12rem !important;
    padding: 0.55rem 0.5rem 0.5rem !important;
    min-height: 0 !important;
}

.cal-week-dayname {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--gray-500);
    line-height: 1;
}

body.theme-dark .cal-week-dayname { color: var(--gray-400); }

.cal-week-sched-line {
    font-size: 0.67rem;
    font-weight: 600;
    color: var(--gray-400);
    text-align: center;
    padding: 0.15rem 0 0.3rem;
    letter-spacing: 0.01em;
}

body.theme-dark .cal-week-sched-line { color: var(--gray-500); }

/* ── Calendario mes: celda sin trabajo ── */
.cal-month-cell-no-work {
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 6px,
        rgba(0,0,0,0.03) 6px,
        rgba(0,0,0,0.03) 7px
    ) !important;
}
.cal-month-no-work {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.4rem;
    color: var(--gray-300);
    font-size: 0.68rem;
    font-weight: 600;
}
.cal-month-no-work i { font-size: 0.65rem; opacity: 0.5; }

body.theme-dark .cal-day-col-no-work {
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 8px,
        rgba(255,255,255,0.02) 8px,
        rgba(255,255,255,0.02) 9px
    ) !important;
}
body.theme-dark .cal-month-cell-no-work {
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 6px,
        rgba(255,255,255,0.025) 6px,
        rgba(255,255,255,0.025) 7px
    ) !important;
}
body.theme-dark .cal-no-work-day p { color: var(--gray-500); }
body.theme-dark .cal-month-no-work { color: #3f3f46; }

/* ── Caja: barra de período ── */
.caja-period-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
    flex-wrap: wrap;
}
.caja-period-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}
.caja-period-options {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.caja-period-btn {
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--border-strong, rgba(0,0,0,0.11));
    background: transparent;
    color: var(--gray-500);
    cursor: pointer;
    transition: all 0.15s ease;
}
.caja-period-btn:hover {
    border-color: var(--primary-400, #a78bfa);
    color: var(--primary-600, #7c3aed);
    background: rgba(124,58,237,0.05);
}
.caja-period-btn.is-active {
    background: var(--primary-600, #7c3aed);
    border-color: var(--primary-600, #7c3aed);
    color: #fff;
    box-shadow: 0 2px 8px rgba(124,58,237,0.25);
}
body.theme-dark .caja-period-btn {
    border-color: rgba(139,92,246,0.2);
    color: #71717a;
}
body.theme-dark .caja-period-btn:hover {
    border-color: #a78bfa;
    color: #c4b5fd;
    background: rgba(255,255,255,0.05);
}
body.theme-dark .caja-period-btn.is-active {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #fff;
}

/* ── Dashboard: filas coloreadas por profesional ── */
.dash-prof-chip {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ── TIPOGRAFÍA: Plus Jakarta Sans como única fuente ── */
body,
.card, .settings-card, .table-container,
.modal-content, .login-card, h1, h2, h3, h4, h5, p, td, th, label, button, input, select, textarea {
    font-family: 'Plus Jakarta Sans', 'Instrument Sans', sans-serif !important;
}

/* ── LIGHT MODE: Fondo con sutil diferencia entre body y cards ── */
body:not(.theme-dark) #app-view main,
body:not(.theme-dark) #main-content {
    background: #f4f4f8 !important;
}
body:not(.theme-dark) .card,
body:not(.theme-dark) .settings-card,
body:not(.theme-dark) .table-container {
    background: #ffffff !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(0,0,0,0.07) !important;
}

/* ── LIGHT MODE: section eyebrow en purple correcto ── */
.section-eyebrow { color: var(--primary-600) !important; }

/* ── DARK MODE: Acento unificado en purple (no amber) ── */

/* Variables purple para dark */
body.theme-dark {
    --accent-dark: #a78bfa;          /* Texto accent visible sobre oscuro */
    --accent-dark-bg: rgba(139,92,246,0.18);
    --accent-dark-border: rgba(255,255,255,0.12);
    --accent-dark-shadow: rgba(255,255,255,0.08);
}

/* Nav active: purple */
body.theme-dark .nav-item.active {
    background: rgba(255,255,255,0.08) !important;
    color: #c4b5fd !important;
    border-color: rgba(139,92,246,0.35) !important;
    box-shadow: 0 2px 12px rgba(124,58,237,0.18) !important;
}
body.theme-dark .nav-item.active i,
body.theme-dark .nav-item.active span {
    color: #c4b5fd !important;
}
body.theme-dark .nav-sub-item.active {
    background: rgba(255,255,255,0.07) !important;
    color: #c4b5fd !important;
}
body.theme-dark .nav-item:hover { color: #e9d5ff !important; }
body.theme-dark .nav-item:hover i { color: #e9d5ff !important; }

/* Input focus: purple */
body.theme-dark input:focus,
body.theme-dark select:focus,
body.theme-dark textarea:focus,
body.theme-dark .form-input:focus {
    border-color: rgba(139,92,246,0.55) !important;
    box-shadow: 0 0 0 3px rgba(139,92,246,0.16) !important;
    background: rgba(139,92,246,0.04) !important;
}

/* Badges info/primary: purple */
body.theme-dark .badge-info,
body.theme-dark .badge-primary {
    background: rgba(139,92,246,0.18) !important;
    color: #c4b5fd !important;
    border-color: rgba(167,139,250,0.28) !important;
}

/* Feedback toast info: purple */
body.theme-dark .feedback-toast-info .feedback-toast-icon,
body.theme-dark .feedback-dialog-info .feedback-dialog-badge {
    background: rgba(255,255,255,0.08) !important;
    color: #c4b5fd !important;
}

/* ---- WhatsApp sent badge ---- */
.wa-sent-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #16a34a;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    white-space: nowrap;
}
body.theme-dark .wa-sent-badge {
    background: rgba(22, 163, 74, 0.14);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.22);
}

/* ---- Status select – dark mode mejorado ---- */
body.theme-dark .dashboard-status-select {
    background: rgba(20, 28, 50, 0.92) !important;
    color: var(--gray-800) !important;
    border-color: rgba(132, 151, 202, 0.28) !important;
}
body.theme-dark .dashboard-status-select.badge-warning {
    background: rgba(180, 95, 6, 0.22) !important;
    color: #fcd34d !important;
    border-color: rgba(251, 191, 36, 0.30) !important;
}
body.theme-dark .dashboard-status-select.badge-info {
    background: rgba(59, 130, 246, 0.20) !important;
    color: #93c5fd !important;
    border-color: rgba(96, 165, 250, 0.30) !important;
}
body.theme-dark .dashboard-status-select.badge-success {
    background: rgba(22, 163, 74, 0.20) !important;
    color: #86efac !important;
    border-color: rgba(34, 197, 94, 0.30) !important;
}
body.theme-dark .dashboard-status-select.badge-danger {
    background: rgba(220, 38, 38, 0.20) !important;
    color: #fca5a5 !important;
    border-color: rgba(248, 113, 113, 0.30) !important;
}
body.theme-dark .dashboard-status-select.badge-purple {
    background: rgba(124, 58, 237, 0.20) !important;
    color: #ddd6fe !important;
    border-color: rgba(167, 139, 250, 0.30) !important;
}

/* btn-primary: purple coherente */
body.theme-dark .btn-primary {
    background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%) !important;
    box-shadow: 0 8px 24px rgba(124,58,237,0.35) !important;
    border: none !important;
    color: #fff !important;
}

/* ===== Custom status dropdown ===== */
.status-dropdown { position: relative; display: inline-block; }
.status-dropdown-trigger {
    display: inline-flex; align-items: center; gap: 0.4rem;
    min-width: 140px; padding: 0.38rem 0.7rem 0.38rem 0.85rem;
    border-radius: 999px; border: 1.5px solid transparent;
    cursor: pointer; font-size: 0.76rem; font-weight: 600;
    letter-spacing: 0.02em; transition: opacity 0.15s; white-space: nowrap;
}
.status-dropdown-trigger:hover { opacity: 0.85; }
.status-dropdown-chevron { font-size: 0.6rem; margin-left: auto; transition: transform 0.2s; }
.status-dropdown.is-open .status-dropdown-chevron { transform: rotate(180deg); }

.status-dropdown-trigger.badge-warning { background:#fef3c7; color:#92400e; border-color:#fde68a; }
.status-dropdown-trigger.badge-info    { background:#dbeafe; color:#1e40af; border-color:#bfdbfe; }
.status-dropdown-trigger.badge-success { background:#d1fae5; color:#065f46; border-color:#a7f3d0; }
.status-dropdown-trigger.badge-purple  { background:#ede9fe; color:#5b21b6; border-color:#ddd6fe; }
.status-dropdown-trigger.badge-danger  { background:#fee2e2; color:#991b1b; border-color:#fecaca; }

body.theme-dark .status-dropdown-trigger.badge-warning { background:rgba(180,95,6,.22);  color:#fcd34d; border-color:rgba(251,191,36,.3); }
body.theme-dark .status-dropdown-trigger.badge-info    { background:rgba(59,130,246,.2); color:#93c5fd; border-color:rgba(96,165,250,.3); }
body.theme-dark .status-dropdown-trigger.badge-success { background:rgba(22,163,74,.2);  color:#86efac; border-color:rgba(34,197,94,.3); }
body.theme-dark .status-dropdown-trigger.badge-purple  { background:rgba(124,58,237,.2); color:#ddd6fe; border-color:rgba(167,139,250,.3); }
body.theme-dark .status-dropdown-trigger.badge-danger  { background:rgba(220,38,38,.2);  color:#fca5a5; border-color:rgba(248,113,113,.3); }

.status-dropdown-menu {
    display: none;
    position: absolute; top: calc(100% + 5px); left: 0; z-index: 200;
    min-width: 160px; background: #fff;
    border: 1px solid rgba(0,0,0,0.09); border-radius: 0.85rem;
    padding: 0.3rem; box-shadow: 0 8px 24px rgba(0,0,0,0.13);
    flex-direction: column; gap: 2px;
}
.status-dropdown.is-open .status-dropdown-menu { display: flex; }
body.theme-dark .status-dropdown-menu {
    background: #161e36; border-color: rgba(255,255,255,0.08);
    box-shadow: 0 8px 32px rgba(0,0,0,0.38);
}

.status-opt {
    display: block; width: 100%; text-align: left;
    padding: 0.42rem 0.75rem; border-radius: 0.55rem;
    border: none; cursor: pointer; font-size: 0.8rem; font-weight: 500;
    background: transparent; color: var(--gray-700); transition: background 0.12s;
}
.status-opt:hover { background: rgba(0,0,0,0.055); }
.status-opt.is-current { font-weight: 700; }

.status-opt.badge-warning { color: #92400e; }
.status-opt.badge-info    { color: #1e40af; }
.status-opt.badge-success { color: #065f46; }
.status-opt.badge-purple  { color: #5b21b6; }
.status-opt.badge-danger  { color: #991b1b; }
.status-opt.badge-warning.is-current { background: rgba(254,243,199,0.7); }
.status-opt.badge-info.is-current    { background: rgba(219,234,254,0.7); }
.status-opt.badge-success.is-current { background: rgba(209,250,229,0.7); }
.status-opt.badge-purple.is-current  { background: rgba(237,233,254,0.7); }
.status-opt.badge-danger.is-current  { background: rgba(254,226,226,0.7); }

body.theme-dark .status-opt { color: var(--gray-600); }
body.theme-dark .status-opt:hover { background: rgba(255,255,255,0.07); }
body.theme-dark .status-opt.badge-warning { color: #fcd34d; }
body.theme-dark .status-opt.badge-info    { color: #93c5fd; }
body.theme-dark .status-opt.badge-success { color: #86efac; }
body.theme-dark .status-opt.badge-purple  { color: #ddd6fe; }
body.theme-dark .status-opt.badge-danger  { color: #fca5a5; }
body.theme-dark .status-opt.is-current    { background: rgba(255,255,255,0.08); }

/* ── Presencia en sala ── */
.presence-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.65rem; border-radius: 999px;
    border: 1.5px solid transparent; cursor: pointer;
    font-size: 0.72rem; font-weight: 600; white-space: nowrap;
    transition: all 0.15s ease; background: transparent;
}
.presence-btn:hover { opacity: 0.8; transform: translateY(-1px); }

.presence-none       { color: #9ca3af; border-color: #e5e7eb; background: #f9fafb; }
.presence-waiting    { color: #92400e; border-color: #fde68a; background: #fef3c7; }
.presence-consulting { color: #065f46; border-color: #6ee7b7; background: #d1fae5; }
.presence-done       { color: #1e3a5f; border-color: #bfdbfe; background: #dbeafe; }

body.theme-dark .presence-none       { color: #6b7280; border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); }
body.theme-dark .presence-waiting    { color: #fcd34d; border-color: rgba(251,191,36,0.35); background: rgba(180,95,6,0.18); }
body.theme-dark .presence-consulting { color: #6ee7b7; border-color: rgba(52,211,153,0.35); background: rgba(16,185,129,0.15); }
body.theme-dark .presence-done       { color: #93c5fd; border-color: rgba(96,165,250,0.35); background: rgba(59,130,246,0.15); }

body.theme-dark .btn-primary:hover {
    background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%) !important;
    box-shadow: 0 12px 32px rgba(124,58,237,0.48) !important;
}

/* ── BTN-ICON: sin borde ni fondo en ambos modos ── */
.btn-icon,
.settings-card .btn-icon,
.settings-subsection .btn-icon,
td .btn-icon {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0.35rem 0.45rem !important;
    border-radius: 0.5rem !important;
    color: var(--purple, #8b5cf6) !important;
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    font-size: 0.9rem !important;
    margin-top: 0 !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    transform: none !important;
}
.btn-icon:hover,
.settings-card .btn-icon:hover,
td .btn-icon:hover {
    background: rgba(255,255,255,0.05) !important;
    color: #7c3aed !important;
    box-shadow: none !important;
    transform: translateY(-1px) !important;
}
body.theme-dark .btn-icon,
body.theme-dark .settings-card .btn-icon,
body.theme-dark td .btn-icon {
    color: #a78bfa !important;
    background: transparent !important;
    border: none !important;
}
body.theme-dark .btn-icon:hover,
body.theme-dark td .btn-icon:hover {
    background: rgba(255,255,255,0.07) !important;
    color: #c4b5fd !important;
}

/* ── DARK MODE: Fondo #0d1117, cards #1e293b (prioridad máxima) ── */
body.theme-dark,
body.theme-dark #app-view,
body.theme-dark #app-view main,
body.theme-dark #main-content {
    background: #0d1117 !important;
    color: #e2e8f0 !important;
}
body.theme-dark .card,
body.theme-dark .settings-card,
body.theme-dark .table-container {
    background: #1e293b !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.25) !important;
    color: #e2e8f0 !important;
}

/* ── DARK MODE: section eyebrow ── */
body.theme-dark .section-eyebrow { color: #64748b !important; }

/* ── DARK MODE: Sidebar */
body.theme-dark #app-sidebar {
    background: #0f1923 !important;
    border-right: 1px solid rgba(255,255,255,0.07) !important;
}

/* ── DARK MODE: Header */
body.theme-dark .app-header {
    background: rgba(12,12,20,0.85) !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    backdrop-filter: blur(12px) !important;
}

/* ── DARK MODE: Table header */
body.theme-dark table thead th {
    background: rgba(255,255,255,0.04) !important;
    color: #64748b !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
body.theme-dark table tbody tr:hover td {
    background: rgba(255,255,255,0.03) !important;
}

/* ── DARK MODE: Settings subnav items activos */
body.theme-dark .settings-subnav-item.active {
    background: rgba(99,102,241,0.10) !important;
    border-color: rgba(99,102,241,0.22) !important;
    box-shadow: none !important;
}

/* ── DARK MODE: modal overlay más oscuro */
body.theme-dark .modal-overlay,
body.theme-dark .feedback-dialog-overlay {
    background: rgba(0,0,0,0.65) !important;
    backdrop-filter: blur(4px) !important;
}

/* ── DARK MODE: Text hierarchy */
body.theme-dark h1, body.theme-dark h2, body.theme-dark h3, body.theme-dark h4 {
    color: #f1f1f3 !important;
}
body.theme-dark p, body.theme-dark td, body.theme-dark label {
    color: #a1a1aa;
}
body.theme-dark .subtle, body.theme-dark .subtext { color: #71717a !important; }


/* ================================================================
   RESPONSIVE FIXES — comprehensive pass
   ================================================================ */

/* --- Calendar grid: remove forced min-width that causes h-scroll --- */
.cal-grid {
    min-width: 0;
}
@media screen and (max-width: 1024px) {
    .cal-grid {
        min-width: calc(60px + var(--day-cols, 7) * 100px);
    }
}
@media screen and (max-width: 640px) {
    .cal-grid {
        min-width: calc(48px + var(--day-cols, 7) * 80px);
    }
}

/* --- Calendar month board --- */
@media screen and (max-width: 768px) {
    .cal-month-board {
        min-width: 560px !important;
    }
}
@media screen and (max-width: 540px) {
    .cal-month-board {
        min-width: 480px !important;
    }
}

/* --- Calendar day body height --- */
.cal-day-body {
    height: min(600px, calc(100dvh - 220px));
}

/* --- Appointment form: 2-col → 1-col on phones --- */
@media screen and (max-width: 540px) {
    .appointment-form-row {
        grid-template-columns: 1fr;
    }
}

/* --- Patient form: 3-col → 2-col on tablet, 1-col on phone --- */
@media screen and (max-width: 700px) {
    .modal-content-patient #patient-form .modal-body > .patient-form-row-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media screen and (max-width: 540px) {
    .modal-content-patient #patient-form .modal-body > .patient-form-row-3,
    .modal-content-patient #patient-form .modal-body > .patient-form-row-2 {
        grid-template-columns: 1fr;
    }
}

/* --- Schedule modal: day row collapse on mobile --- */
@media screen and (max-width: 480px) {
    .schedule-day-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--gray-200);
    }
    .schedule-day-row + .schedule-day-row {
        padding-top: 0.25rem;
    }
}

/* --- Clinical images: smaller minmax on mobile --- */
@media screen and (max-width: 540px) {
    .clinical-images-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
    .clinical-images-summary {
        grid-template-columns: 1fr;
    }
}

/* --- Odontogram: scale down on mobile (zoom ya cubría 768px arriba) --- */
@media screen and (max-width: 640px) {
    .odontogram-wrapper {
        zoom: 0.37;
    }
}
@media screen and (max-width: 480px) {
    .odontogram-wrapper {
        zoom: 0.3;
    }
}

/* --- Touch targets: minimum 44px for key interactive elements --- */
@media screen and (max-width: 1024px) {
    .cal-prof-select-btn,
    .presence-btn,
    .odonto-color-btn,
    .odonto-clear-btn,
    .odonto-apply-btn {
        min-height: 44px;
    }
    .badge-state {
        min-height: 44px;
        padding: 0 0.75rem;
    }
}

/* --- Modal padding: reduce on very small screens --- */
@media screen and (max-width: 400px) {
    .modal-body {
        padding: 1rem;
    }
    .modal-footer {
        padding: 0.75rem 1rem;
    }
    .feedback-dialog {
        padding: 1.1rem 1rem 1rem;
    }
}

/* --- Dashboard table: don't overflow on mobile header --- */
@media screen and (max-width: 640px) {
    .table-header h3 {
        font-size: 0.95rem;
    }
    .dashboard-date-filter-wrap {
        width: 100%;
    }
}

/* --- Settings card: presence btn shouldn't be full width --- */
.presence-btn {
    flex-shrink: 0;
    width: auto !important;
}

/* --- Status dropdown trigger: not full width --- */
.status-dropdown,
.status-dropdown-trigger {
    width: auto !important;
}

/* --- Clinical compact grid: ensure 1 col on very small phones --- */
@media screen and (max-width: 400px) {
    .clinical-edit-grid,
    .clinical-edit-grid-compact {
        grid-template-columns: 1fr;
    }
}

/* --- Sidebar: on very small phones leave a sliver visible --- */
@media screen and (max-width: 360px) {
    #app-view aside {
        width: min(92vw, 300px) !important;
        min-width: min(92vw, 300px) !important;
    }
}

/* --- Metrics card grid: 2-col on small phones, 1-col on tiny --- */
@media screen and (max-width: 480px) {
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.65rem;
    }
}
@media screen and (max-width: 340px) {
    .metrics-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Improve readability: bump tiny font sizes on mobile --- */
@media screen and (max-width: 640px) {
    .cal-day-name {
        font-size: 0.7rem;
    }
    .badge-state,
    .badge {
        font-size: 0.72rem;
    }
    .clinical-section-title {
        font-size: 0.75rem;
    }
    .subtext {
        font-size: 0.78rem;
    }
}

/* --- Botón cerrar sidebar (solo mobile) --- */
.sidebar-close-btn {
    display: none;
    margin-left: auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--gray-500);
    font-size: 1.15rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.sidebar-close-btn:hover {
    background: var(--gray-100);
    color: var(--gray-800);
}
body.theme-dark .sidebar-close-btn {
    color: #9ca3af;
}
body.theme-dark .sidebar-close-btn:hover {
    background: rgba(255,255,255,0.08);
    color: #f1f5f9;
}

@media screen and (max-width: 1024px) {
    .sidebar-close-btn {
        display: flex;
    }
}

/* --- Nombre clínica en header mobile --- */
.mobile-header-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}
.mobile-header-brand-text > span:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mobile-header-clinic-name {
    font-size: 0.65rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mobile-header-clinic-name:empty {
    display: none;
}

/* ── Column visibility helpers ── */
@media screen and (max-width: 640px) {
    .col-hide-sm { display: none !important; }
}
@media screen and (max-width: 480px) {
    .col-hide-xs { display: none !important; }
}

/* ── Tables: prevent runaway text wrap, ensure scroll ── */
.table-nowrap th,
.table-nowrap td {
    white-space: nowrap;
}
.table-container {
    overflow-x: auto;
}

/* ── Settings subtext: no truncar ── */
.settings-nav-card .subtext,
.settings-panel-card .subtext,
.settings-area .subtext {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

/* ── Odontograma: ocultar en mobile ── */
@media screen and (max-width: 768px) {
    .odontogram-toolbar,
    .odontogram-wrapper,
    .odontogram-legend {
        display: none !important;
    }
}

/* ── col-show-sm: visible only on mobile (<640px) ── */
.col-show-sm {
    display: none !important;
}
@media screen and (max-width: 640px) {
    .col-show-sm {
        display: table-cell !important;
    }
}

/* ── col-hide-lg: hidden on screens <900px (secondary cols: Estado dropdown, Whatsapp) ── */
@media screen and (max-width: 900px) {
    .col-hide-lg { display: none !important; }
}

/* ── col-show-lg: visible only on screens <900px (Estado badge fallback) ── */
.col-show-lg {
    display: none !important;
}
@media screen and (max-width: 900px) {
    .col-show-lg {
        display: table-cell !important;
    }
}

/* ── Odontogram mobile notice ── */
.odontogram-mobile-notice {
    display: none;
}
@media screen and (max-width: 768px) {
    .odontogram-mobile-notice {
        display: flex;
        align-items: center;
        gap: 0.9rem;
        padding: 0.85rem 1rem;
        border: 1px dashed var(--gray-300);
        border-radius: 0.85rem;
        background: var(--gray-50);
        color: var(--gray-500);
        margin-bottom: 0.5rem;
    }
    .odontogram-mobile-notice i {
        font-size: 1.5rem;
        flex-shrink: 0;
        color: var(--primary-400);
    }
    .odontogram-mobile-notice strong {
        display: block;
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--gray-700);
        margin-bottom: 0.15rem;
    }
    .odontogram-mobile-notice span {
        font-size: 0.76rem;
        line-height: 1.4;
    }
}
body.theme-dark .odontogram-mobile-notice {
    display: none;
}
@media screen and (max-width: 768px) {
    body.theme-dark .odontogram-mobile-notice {
        display: flex;
        border-color: rgba(148,163,184,0.25);
        background: rgba(255,255,255,0.04);
        color: #94a3b8;
    }
    body.theme-dark .odontogram-mobile-notice strong {
        color: #e2e8f0;
    }
}

/* ── Clinical image viewer: hide redundant panel on mobile ── */
@media screen and (max-width: 768px) {
    .clinical-image-viewer-panel {
        display: none !important;
    }
    .clinical-image-viewer-figure {
        height: 52vh !important;
    }
    .clinical-image-viewer-caption {
        position: absolute !important;
        margin-top: 0 !important;
        flex-direction: row !important;
        align-items: center !important;
    }
    .clinical-image-viewer-caption strong {
        text-align: right !important;
    }
}

/* ── Treatments table: btn not full-width inside header ── */
.treatments-header .btn {
    width: auto !important;
    flex-shrink: 0;
}

/* ── Dashboard: compact table layout on mobile ── */
@media screen and (max-width: 640px) {
    .dashboard-card,
    .finished-apts-details {
        font-size: 0.82rem;
    }
}

/* ── Professional schedule card list (Horarios de Atención) ── */
.prof-schedule-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.prof-schedule-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem;
    background: var(--white, #fff);
    border: 1px solid var(--gray-200);
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.prof-schedule-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-color: var(--primary-200, #c4b5fd);
}

.prof-schedule-avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 800;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.prof-schedule-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.prof-schedule-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--gray-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prof-schedule-specialty {
    font-size: 0.75rem;
    color: var(--gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prof-schedule-btn {
    flex-shrink: 0;
    gap: 0.45rem;
}

.prof-schedule-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2.5rem 1rem;
    color: var(--gray-400);
    font-size: 0.9rem;
    border: 1px dashed var(--gray-300);
    border-radius: 1rem;
}

body.theme-dark .prof-schedule-card {
    background: rgba(255,255,255,0.05);
    border-color: rgba(148,163,184,0.18);
}

body.theme-dark .prof-schedule-name {
    color: #e2e8f0;
}

/* ── Sticky first column in dashboard table ── */
.col-sticky-left {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    white-space: nowrap;
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    padding-right: 0.5rem;
}

thead .col-sticky-left {
    z-index: 3; /* El header sticky debe quedar sobre las celdas de datos */
}

body.theme-dark .col-sticky-left {
    background: var(--dark-surface, #1e293b);
}

/* El table del dashboard necesita min-width para que el overflow-x scroll
   se active en mobile antes de que las columnas se compriman y se superpongan */
.dashboard-main-card > .overflow-x-auto > table {
    min-width: 420px;
}

/* En mobile chico (solo 3 cols visibles) no hace falta scroll horizontal:
   desactivamos el sticky y el min-width para que la hora no tape al paciente */
@media (max-width: 479px) {
    .dashboard-main-card > .overflow-x-auto > table {
        min-width: 0;
    }
    .col-sticky-left {
        position: static;
        box-shadow: none;
        width: auto;
        min-width: 0;
        max-width: none;
        background: transparent !important;
    }
}

/* ── Table card rows: mobile card transformation ── */
@media screen and (max-width: 640px) {
    .table-card-rows {
        display: block;
    }
    .table-card-rows thead {
        display: none;
    }
    .table-card-rows tbody {
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
    }
    .table-card-rows tr {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.85rem 1rem;
        background: var(--white, #fff);
        border: 1px solid var(--gray-200);
        border-radius: 0.9rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .table-card-rows .table-name {
        flex: 1;
        min-width: 0;
    }
    /* Hide everything except table-name and last 2 cells */
    .table-card-rows td:not(.table-name) {
        display: none;
    }
    /* Always show status (second to last) and actions (last) */
    .table-card-rows td:nth-last-child(1),
    .table-card-rows td:nth-last-child(2) {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }
    body.theme-dark .table-card-rows tr {
        background: rgba(255,255,255,0.04);
        border-color: rgba(148,163,184,0.18);
    }
}

/* ── Hide extra action buttons on mobile ── */
@media screen and (max-width: 640px) {
    .btn-hide-mobile {
        display: none !important;
    }
}

/* ── Utility: overflow-x scrollable ── */
.overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ================================================================
   DASHBOARD — Sticky header for "Turnos de hoy" table
   ================================================================ */
.dashboard-main-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(255,255,255,0.04);
    /* NO overflow:hidden — it would break position:sticky and clip inner scroll */
    margin-top: 1.5rem;
}

body.theme-dark .dashboard-main-card {
    background: #1e293b;
    border-color: rgba(255,255,255,0.07);
    box-shadow: 0 4px 24px rgba(0,0,0,0.35);
}

/* Clip the overflow-x-auto child so it respects the card's border-radius */
.dashboard-main-card > .overflow-x-auto {
    border-radius: 0 0 1rem 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dashboard-sticky-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.07);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

body.theme-dark .dashboard-sticky-header {
    background: #1e293b;
    border-bottom-color: rgba(255,255,255,0.07);
}

.dashboard-sticky-header h3 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--gray-900);
    letter-spacing: -0.03em;
    margin: 0;
}

body.theme-dark .dashboard-sticky-header h3 {
    color: #f1f1f3;
}

.dashboard-date-label {
    font-size: 0.78rem;
    color: var(--gray-500);
    margin-top: 0.1rem;
}

.dashboard-date-filter-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.dashboard-date-filter-wrap label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-500);
    white-space: nowrap;
}

@media screen and (max-width: 640px) {
    .dashboard-sticky-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 0.85rem 1rem;
        gap: 0.65rem;
    }
    .dashboard-date-filter-wrap {
        width: 100%;
    }
    .dashboard-date-filter-wrap input[type="date"] {
        flex: 1;
    }
}

/* ================================================================
   SETTINGS — Entity card list (Usuarios / Profesionales existentes)
   ================================================================ */
.settings-entity-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.settings-entity-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: rgba(248,248,250,0.7);
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 0.9rem;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden; /* clip any accidental overflow */
}

.settings-entity-card:hover {
    background: rgba(255,255,255,0.95);
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.patient-list-avatar {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    border-radius: 50%;
    background: var(--primary-100, #ede9fe);
    color: var(--primary-700, #6d28d9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    flex-shrink: 0;
    letter-spacing: 0.04em;
}

.settings-entity-avatar {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    color: var(--primary-700, #7c3aed);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 800;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.settings-entity-info {
    flex: 1 1 0px; /* 0px basis so it grows but won't force container wider */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    overflow: hidden;
}

.settings-entity-name {
    font-size: 0.88rem;
    font-weight: 700;
    /* Force visible text — override any gradient/fill inherited from parent rules */
    color: #1e293b !important;
    -webkit-text-fill-color: #1e293b !important;
    background: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

body.theme-dark .settings-entity-name {
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
}

.settings-entity-sub {
    font-size: 0.74rem;
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    background: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

body.theme-dark .settings-entity-sub {
    color: #71717a !important;
    -webkit-text-fill-color: #71717a !important;
}

.settings-entity-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.settings-entity-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem 1rem;
    color: var(--gray-400);
    font-size: 0.88rem;
    border: 1px dashed var(--gray-300);
    border-radius: 0.9rem;
}

/* Mobile: ocultar botones de acción, mostrar nombre y badge */
@media screen and (max-width: 640px) {
    .settings-entity-actions {
        display: none !important;
    }
    .settings-entity-card > .badge {
        flex-shrink: 0;
    }
}

/* Dark mode */
body.theme-dark .settings-entity-card {
    background: rgba(255,255,255,0.04);
    border-color: rgba(139,92,246,0.14);
}

body.theme-dark .settings-entity-card:hover {
    background: rgba(255,255,255,0.07);
    box-shadow: none;
}

body.theme-dark .settings-entity-name {
    color: #e2e8f0;
}

body.theme-dark .settings-entity-sub {
    color: #71717a;
}

body.theme-dark .settings-entity-empty {
    border-color: rgba(148,163,184,0.22);
    color: #52525b;
}

body.theme-dark .modal-close-x {
    color: rgba(148,163,184,0.7);
}
body.theme-dark .modal-close-x:hover {
    background: rgba(255,255,255,0.08);
    color: #e2e8f0;
}
body.theme-dark .btn-cancel-apt {
    border-color: rgba(239,68,68,0.25);
    background: rgba(239,68,68,0.08);
    color: #f87171;
}
body.theme-dark .btn-cancel-apt:hover {
    background: rgba(239,68,68,0.15);
    border-color: rgba(239,68,68,0.4);
}

/* ================================================================
   PATIENTS TABLE — Layout stability + entrance animation
   ================================================================ */

/* .table-container-patients es solo el wrapper visual (border/radius).
   El scroll real vive en .patients-scroll-inner, lo que permite que
   position:sticky en thead th funcione correctamente (overflow:hidden
   en el padre .table-container rompería sticky si pusieramos el scroll
   directamente sobre .table-container-patients). */
.table-container-patients {
    /* sin overflow propio — hereda overflow:hidden de .table-container
       que solo sirve para clipear el border-radius */
}

.patients-scroll-inner {
    height: calc(100vh - 300px);
    min-height: 300px;
    max-height: 820px;
    overflow-y: auto;
    overflow-x: auto;
}

/* Sticky header — funciona porque el scroll ancestor es .patients-scroll-inner,
   que no tiene overflow:hidden */
.patients-scroll-inner thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: #ffffff !important;
    box-shadow: 0 1px 0 var(--gray-200) !important;
}

body.theme-dark .patients-scroll-inner thead th {
    background: #1e293b !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.07) !important;
}

/* Mobile: reduce offset */
@media (max-width: 768px) {
    .patients-scroll-inner {
        height: calc(100vh - 420px);
        min-height: 260px;
    }
}

/* Row entrance animation */
@keyframes patientRowIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#patients-table tbody tr {
    animation: patientRowIn 220ms ease-out both;
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    #patients-table tbody tr {
        animation: none;
    }
}

/* ================================================================
   CALENDAR — Visual polish (Google Calendar / Notion style)
   elevation-consistent · gridline-subtle · state-clarity
   ================================================================ */

/* Scroll container — borde y sombra más nítidos */
.cal-scroll-wrap {
    border: 1px solid rgba(15,23,42,0.10) !important;
    box-shadow: 0 2px 16px rgba(15,23,42,0.07), 0 1px 3px rgba(15,23,42,0.05) !important;
    border-radius: 1rem !important;
}

/* Header sticky — fondo ligeramente diferenciado + sombra de separación */
.cal-header-row {
    background: #f8fafc !important;
    border-bottom: 1px solid rgba(15,23,42,0.10) !important;
    box-shadow: 0 2px 4px rgba(15,23,42,0.04) !important;
}

.cal-day-header {
    border-left: 1px solid rgba(15,23,42,0.07) !important;
    transition: background 0.15s;
}
.cal-day-header:hover { background: rgba(99,102,241,0.04) !important; }

/* Líneas de hora — más definidas, media hora más suave */
.cal-cell-hour {
    border-top: 1px solid rgba(15,23,42,0.10) !important;
}
.cal-cell-half {
    border-top: 1px dashed rgba(15,23,42,0.055) !important;
}

/* Separador vertical de columnas */
.cal-cell {
    border-left: 1px solid rgba(15,23,42,0.07) !important;
}

/* Hover de fila: sutil pero perceptible */
.cal-row:hover {
    background: rgba(99,102,241,0.03) !important;
}

/* Etiqueta de hora: mejor contraste y peso */
.cal-time-label {
    color: rgba(15,23,42,0.38) !important;
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

/* Bloque de turno: borde izquierdo de acento + sombra + brillo superior */
.cal-apt-block {
    border-radius: 8px !important;
    border-left: 3.5px solid rgba(0,0,0,0.20) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.14), 0 1px 2px rgba(0,0,0,0.08) !important;
    transition: box-shadow 0.15s ease, transform 0.12s ease !important;
}

/* Brillo interno sutil en la parte superior del bloque */
.cal-apt-block::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, transparent 45%);
    pointer-events: none;
    border-radius: inherit;
}

/* Hover: sube ligeramente, sombra más fuerte */
.cal-apt-block:hover {
    filter: none !important;
    transform: translateY(-1px) scale(1.002) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18), 0 2px 4px rgba(0,0,0,0.10) !important;
    z-index: 5;
}

/* Panel lateral de profesionales */
.cal-legend {
    border: 1px solid rgba(15,23,42,0.09) !important;
    box-shadow: 0 1px 6px rgba(15,23,42,0.05) !important;
    border-radius: 1rem !important;
}

/* Chips de profesionales — mejor sombra activa */
.cal-prof-select.is-active .cal-legend-chip {
    box-shadow: 0 4px 14px rgba(15,23,42,0.18), 0 1px 4px rgba(15,23,42,0.10) !important;
    transform: translateY(-1px) !important;
}

/* ── DARK MODE ─────────────────────────────────────────────────── */
body.theme-dark .cal-scroll-wrap {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
body.theme-dark .cal-header-row {
    background: #0d1117 !important;
    border-bottom-color: rgba(255,255,255,0.07) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}
body.theme-dark .cal-day-header {
    border-left-color: rgba(255,255,255,0.06) !important;
}
body.theme-dark .cal-day-header:hover {
    background: rgba(255,255,255,0.04) !important;
}
body.theme-dark .cal-cell-hour {
    border-top-color: rgba(255,255,255,0.07) !important;
}
body.theme-dark .cal-cell-half {
    border-top-color: rgba(255,255,255,0.035) !important;
}
body.theme-dark .cal-cell {
    border-left-color: rgba(255,255,255,0.05) !important;
}
body.theme-dark .cal-row:hover {
    background: rgba(255,255,255,0.04) !important;
}
body.theme-dark .cal-time-label {
    color: rgba(255,255,255,0.3) !important;
}
body.theme-dark .cal-legend {
    border-color: rgba(255,255,255,0.07) !important;
    background: #1e293b !important;
}
body.theme-dark .cal-apt-block::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 45%);
}

/* ================================================================
   CALENDAR APT BLOCK — Nombre + hora en una sola fila
   ================================================================ */

/* Nombre: crece, trunca si no hay espacio */
.cal-apt-name {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

/* Chip de hora/duración: siempre visible, fondo semitransparente */
.cal-apt-meta {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(0,0,0,0.18) !important;
    border-radius: 5px !important;
    padding: 1px 7px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    letter-spacing: 0.01em !important;
}

/* Overbook: fuente un poco más chica pero mismo layout */
.cal-apt-overbook .cal-apt-name  { font-size: 0.68rem !important; }
.cal-apt-overbook .cal-apt-meta  { font-size: 0.62rem !important; padding: 1px 5px !important; }

/* Contenido: siempre centrado verticalmente */
.cal-apt-content {
    align-items: center !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* Dark mode: chip más suave */
body.theme-dark .cal-apt-meta {
    background: rgba(0,0,0,0.25) !important;
    color: rgba(255,255,255,0.9) !important;
}

/* ================================================================
   DASHBOARD — Altura fija en tabla de turnos para evitar layout shift
   Offset: hero card (~130px) + metrics (~110px) + card header (~70px)
   + paddings y gaps (~120px) = ~430px total
   ================================================================ */
.dashboard-main-card > .overflow-x-auto {
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    overflow-x: auto;
}

@media (max-width: 768px) {
    .dashboard-main-card > .overflow-x-auto {
        max-height: calc(100vh - 440px);
    }
}

/* ══════════════════════════════════════════════════════════════════
   LOGIN V9 — Split-panel · Teal brand identity
   ══════════════════════════════════════════════════════════════════ */

/* ── Tokens locales ──────────────────────────────────────────────── */
#login-view {
    --lg-teal:       #0f766e;
    --lg-teal-mid:   #0d9488;
    --lg-teal-vivid: #14b8a6;
    --lg-teal-light: #99f6e4;
    --lg-panel-bg:   #040f0d;
    --lg-panel-mid:  #071510;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    background: var(--lg-panel-bg) !important;
}

/* ── LEFT: Brand panel ───────────────────────────────────────────── */
.login-brand-side {
    display: none; /* shown via @media (min-width: 768px) below */
    position: relative;
    width: 44%;
    min-width: 340px;
    max-width: 520px;
    flex-shrink: 0;
    background:
        radial-gradient(ellipse at 15% 25%, rgba(15,118,110,.65) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 75%, rgba(20,184,166,.3) 0%, transparent 50%),
        linear-gradient(160deg, #030e0c 0%, #051a15 60%, #040f0d 100%);
    overflow: hidden;
    padding: 3rem 2.5rem;
    flex-direction: column;
}

/* Dot grid texture */
.login-brand-side::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(20,184,166,.08) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}

.login-brand-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    animation: lb-fade-up .7s cubic-bezier(.16,1,.3,1) both;
}

@keyframes lb-fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.login-brand-logo-wrap {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--lg-teal) 0%, var(--lg-teal-vivid) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px rgba(20,184,166,.4), 0 12px 32px rgba(15,118,110,.55);
    margin-bottom: 2rem;
    flex-shrink: 0;
}

.login-brand-logo-img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* SVG inline: ya tiene colores propios, no necesita el filter */
.login-brand-logo-svg {
    width: 38px;
    height: 38px;
    display: block;
}

.login-brand-name {
    font-size: 2.25rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 .75rem !important;
    letter-spacing: -.04em !important;
    line-height: 1.05 !important;
}

.login-brand-tagline {
    font-size: .9375rem;
    color: rgba(255,255,255,.45);
    line-height: 1.7;
    margin-bottom: 3rem;
    max-width: 290px;
}

.login-feature-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.login-feature-item {
    display: flex;
    align-items: flex-start;
    gap: .875rem;
    animation: lb-fade-up .7s cubic-bezier(.16,1,.3,1) both;
}
.login-feature-item:nth-child(1) { animation-delay: .1s; }
.login-feature-item:nth-child(2) { animation-delay: .18s; }
.login-feature-item:nth-child(3) { animation-delay: .26s; }

.login-feature-icon {
    width: 38px;
    height: 38px;
    background: rgba(20,184,166,.12);
    border: 1px solid rgba(20,184,166,.25);
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lg-teal-vivid);
    flex-shrink: 0;
    font-size: 13px;
}

.login-feature-item > div:last-child strong {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: rgba(255,255,255,.9);
    margin-bottom: 3px;
}

.login-feature-item > div:last-child span {
    font-size: .78rem;
    color: rgba(255,255,255,.35);
    line-height: 1.45;
}

/* Orbs — familia teal coherente */
.login-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.login-orb-1 {
    width: 500px; height: 500px;
    background: rgba(15,118,110,.45);
    filter: blur(120px);
    top: -180px; right: -150px;
    animation: lg-orb-drift 18s ease-in-out infinite;
}

.login-orb-2 {
    width: 340px; height: 340px;
    background: rgba(20,184,166,.22);
    filter: blur(100px);
    bottom: -100px; left: -90px;
    animation: lg-orb-drift 22s ease-in-out infinite reverse;
}

.login-orb-3 {
    width: 180px; height: 180px;
    background: rgba(6,182,212,.18);
    filter: blur(70px);
    top: 50%; right: 15%;
    animation: lg-orb-drift 28s ease-in-out infinite 4s;
}

@keyframes lg-orb-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%       { transform: translate(30px, -20px) scale(1.06); }
    66%       { transform: translate(-15px, 25px) scale(.96); }
}

/* Brand panel bottom url */
.login-brand-side::after {
    content: 'odentara.app';
    position: absolute;
    bottom: 2rem;
    left: 2.5rem;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .08em;
    color: rgba(255,255,255,.18);
    z-index: 2;
    text-transform: lowercase;
}

/* ── RIGHT: Form panel ───────────────────────────────────────────── */
.login-form-side {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #080f0e;
    overflow-y: auto;
    position: relative;
    padding: 2.5rem 2rem;
    min-height: 100dvh;
}

.login-form-inner {
    width: 100%;
    max-width: 380px;
    position: relative;
    animation: v7-card-appear .5s cubic-bezier(.16,1,.3,1) both;
}

/* ── Top bar: mobile logo + theme toggle ─────────────────────────── */
.login-form-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.5rem;
}

.login-mobile-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.login-mobile-logo-mark {
    width: 34px; height: 34px;
    background: linear-gradient(135deg, #0f766e, #14b8a6);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(15,118,110,.4);
    flex-shrink: 0;
}

.login-mobile-logo-mark .login-brand-logo-img {
    width: 19px; height: 19px;
    filter: brightness(0) invert(1);
}

.login-mobile-logo span {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: -.02em;
}

/* ── Form header ─────────────────────────────────────────────────── */
.login-form-header {
    margin-bottom: 1.875rem;
}

.login-form-header h2 {
    font-size: 1.625rem !important;
    font-weight: 700 !important;
    color: #f1f5f9 !important;
    margin: 0 0 .4rem !important;
    letter-spacing: -.03em !important;
    line-height: 1.2 !important;
}

.login-form-header p {
    font-size: .875rem;
    color: #94a3b8;
    line-height: 1.58;
    margin: 0;
}

/* ── Inputs ──────────────────────────────────────────────────────── */
.login-form-inner .input-group {
    margin-bottom: 1rem;
}

.login-form-inner .input-group label {
    font-size: .8125rem !important;
    font-weight: 600 !important;
    color: #cbd5e1 !important;
    display: block;
    margin-bottom: .4rem;
}

.login-form-inner .input-group input,
.login-form-inner .pwd-wrap input {
    height: 46px !important;
    border-radius: .75rem !important;
    border: 1.5px solid rgba(20,184,166,.22) !important;
    background: rgba(15,118,110,.12) !important;
    font-size: .9375rem !important;
    color: #f1f5f9 !important;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
    padding: 0 .9rem !important;
}

.login-form-inner .input-group input:focus,
.login-form-inner .pwd-wrap input:focus {
    border-color: #0d9488 !important;
    background: rgba(15,118,110,.2) !important;
    box-shadow: 0 0 0 3.5px rgba(15,118,110,.25) !important;
    outline: none !important;
}

.login-form-inner .pwd-wrap input {
    padding-right: 44px !important;
}

/* ── Forgot-password link row ────────────────────────────────────── */
.login-forgot-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: .5rem;
    margin-top: -.25rem;
}

.login-forgot-row .login-link-btn {
    font-size: .78rem;
    color: #0d9488;
}
.login-forgot-row .login-link-btn:hover { color: #0f766e; }

/* ── Submit button ───────────────────────────────────────────────── */
.login-form-inner .btn-primary {
    height: 48px !important;
    border-radius: .875rem !important;
    font-size: .9375rem !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
    width: 100% !important;
    background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%) !important;
    box-shadow: 0 6px 20px rgba(15,118,110,.35) !important;
    color: #fff !important;
    border: none !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
}
.login-form-inner .btn-primary:hover:not(:disabled) {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 28px rgba(15,118,110,.45) !important;
}

/* ── Turnstile ───────────────────────────────────────────────────── */
#turnstile-container {
    margin-top: .75rem;
    display: flex;
    justify-content: center;
}
#turnstile-container:empty { margin-top: 0; }

/* ── Submit wrap (disabled state) ────────────────────────────────── */
.login-submit-wrap {
    margin-top: 0.5rem;
    width: 100%;
}
.login-submit-wrap:has(#login-submit-btn:disabled) { cursor: not-allowed; }

#login-submit-btn:disabled {
    opacity: 0.42;
    background: var(--gray-400, #9ca3af) !important;
    color: var(--gray-200, #e5e7eb) !important;
    box-shadow: none !important;
    pointer-events: none;
    transform: none !important;
}
.login-submit-wrap:has(#login-submit-btn:disabled):hover #login-submit-btn {
    background: var(--gray-400, #9ca3af) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* ── Secondary buttons ───────────────────────────────────────────── */
.login-form-inner .btn-ghost {
    height: 44px !important;
    border-radius: .875rem !important;
    font-size: .9rem !important;
    margin-top: 0 !important;
}

/* ── Success states (forgot/reset) ──────────────────────────────── */
.login-success-state {
    text-align: center;
    padding: 16px 0 8px;
    animation: lb-fade-up .5s cubic-bezier(.16,1,.3,1) both;
}
.login-success-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(15,118,110,.1);
    border: 1.5px solid rgba(15,118,110,.25);
    color: #0d9488;
    font-size: 1.375rem;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.25rem;
}
.login-success-icon--green {
    background: rgba(16,185,129,.1);
    border-color: rgba(16,185,129,.25);
    color: #059669;
}
.login-success-title {
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    color: #f1f5f9 !important;
    margin: 0 0 .5rem !important;
}
.login-success-body {
    font-size: .8375rem !important;
    color: #94a3b8 !important;
    line-height: 1.65 !important;
    margin: 0 0 1.5rem !important;
}

/* ── Footer ──────────────────────────────────────────────────────── */
.login-form-footer {
    text-align: center;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #1e293b;
    color: #475569;
    font-size: .72rem;
    letter-spacing: .04em;
}

/* ── Hide legacy ─────────────────────────────────────────────────── */
.login-container,
.login-card,
.login-decoration,
.logo-container,
.login-subtitle {
    display: none !important;
}

/* ══ Responsive ══════════════════════════════════════════════════ */

/* Desktop: show brand panel */
@media (min-width: 768px) {
    .login-brand-side {
        display: flex !important;
    }

    /* Hide mobile logo mark on desktop since brand panel is visible */
    .login-mobile-logo {
        display: none !important;
    }

    .login-form-topbar {
        justify-content: flex-end;
        margin-bottom: 2.5rem;
    }
}

/* Mobile: stack vertically, hide brand side */
@media (max-width: 767px) {
    #login-view {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .login-brand-side {
        display: none !important;
    }

    .login-mobile-logo {
        display: flex !important;
    }

    .login-form-side {
        padding: 1.75rem 1.25rem 2rem !important;
        min-height: 100dvh !important;
        align-items: flex-start !important;
        padding-top: 2rem !important;
    }

    .login-form-inner {
        max-width: 100% !important;
    }
}

/* ══ Dark mode ═══════════════════════════════════════════════════ */
body.theme-dark .login-form-side {
    background: #080f0e !important;
}

body.theme-dark .login-mobile-logo span {
    color: #e2ede9 !important;
}

body.theme-dark .login-form-header h2 {
    color: #e2ede9 !important;
}

body.theme-dark .login-form-header p {
    color: rgba(255,255,255,.4) !important;
}

body.theme-dark .login-form-inner .input-group label {
    color: rgba(255,255,255,.6) !important;
}

body.theme-dark .login-form-inner .input-group input,
body.theme-dark .login-form-inner .pwd-wrap input {
    background: rgba(15,118,110,.12) !important;
    border-color: rgba(20,184,166,.22) !important;
    color: #e2ede9 !important;
}

body.theme-dark .login-form-inner .input-group input:focus,
body.theme-dark .login-form-inner .pwd-wrap input:focus {
    background: rgba(15,118,110,.2) !important;
    border-color: #14b8a6 !important;
    box-shadow: 0 0 0 3.5px rgba(20,184,166,.2) !important;
}

body.theme-dark .login-form-footer {
    border-color: rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.18) !important;
}

body.theme-dark .login-form-inner .btn-ghost {
    color: rgba(255,255,255,.6) !important;
    border-color: rgba(255,255,255,.1) !important;
}

body.theme-dark .login-forgot-row .login-link-btn,
body.theme-dark .login-form-inner .login-link-btn {
    color: #14b8a6 !important;
}

body.theme-dark .login-success-title {
    color: #e2ede9 !important;
}

body.theme-dark .login-success-body {
    color: rgba(255,255,255,.45) !important;
}

body.theme-dark .login-success-icon {
    background: rgba(20,184,166,.1) !important;
    border-color: rgba(20,184,166,.25) !important;
}

/* Brand panel stays dark by design — no change needed */
body.theme-dark .login-brand-side { /* already dark */ }

/* ═══════════════════════════════════════════════════════════════════
   STAT CARDS — rediseño completo, reemplaza metric-card con IA-look
   Dirección: números protagonistas, sin cajas de íconos, acento sutil
═══════════════════════════════════════════════════════════════════ */
.stat-card {
    display: flex;
    flex-direction: column;
    padding: 1.4rem 1.6rem 1.3rem;
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.07);
    border-top: 3px solid transparent;
    border-radius: 0 0 0.875rem 0.875rem;
    box-shadow: 0 1px 4px rgba(15,23,42,0.04);
    gap: 0.45rem;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
    position: relative;
}

.stat-card:hover {
    box-shadow: 0 4px 16px rgba(15,23,42,0.09);
    transform: translateY(-2px);
}

/* Número — protagonista absoluto */
.stat-value {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.06em;
    color: #0f172a;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Label con ícono inline */
.stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Período */
.stat-period {
    font-size: 0.7rem;
    color: #cbd5e1;
    margin-top: 0.1rem;
}

/* Colores — borde top + ícono */
.stat-teal   { border-top-color: #0d9488; }
.stat-emerald { border-top-color: #059669; }
.stat-rose   { border-top-color: #e11d48; }
.stat-violet { border-top-color: #6d28d9; }
.stat-amber  { border-top-color: #d97706; }

.stat-teal   .stat-label i { color: #0d9488; }
.stat-emerald .stat-label i { color: #059669; }
.stat-rose   .stat-label i { color: #e11d48; }
.stat-violet .stat-label i { color: #6d28d9; }
.stat-amber  .stat-label i { color: #d97706; }

/* Dark mode */
body.theme-dark .stat-card {
    background: #1e293b;
    border-color: rgba(148,163,184,0.1);
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
body.theme-dark .stat-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
body.theme-dark .stat-value { color: #f1f5f9; }
body.theme-dark .stat-label { color: #475569; }
body.theme-dark .stat-period { color: #334155; }

/* ── Calendario dark: color azul uniforme igual al toolbar ─── */
body.theme-dark .cal-day-body,
body.theme-dark .cal-grid-day,
body.theme-dark .cal-grid-v2,
body.theme-dark .cal-prof-body,
body.theme-dark .cal-month-grid,
body.theme-dark .cal-grid-v2 .cal-day-body { background: #161b27 !important; }

body.theme-dark .cal-day-header,
body.theme-dark .cal-grid-v2 .cal-day-header { background: #1a2030 !important; }

body.theme-dark .cal-gutter-col { background: rgba(22,27,39,.95) !important; }

body.theme-dark .cal-month-cell.is-outside-month { background: #131720 !important; }

body.theme-dark .cal-row:hover { background: rgba(255,255,255,0.03) !important; }

body.theme-dark .cal-cell-hour { border-color: rgba(255,255,255,0.05) !important; }

/* ── LOGIN — reglas definitivas (siempre al final, siempre ganan) ──────────
   Evita FOUC: el formulario usa el mismo fondo en light y dark mode.
   La brand-side siempre es teal independientemente del tema.
   ──────────────────────────────────────────────────────────────────────── */
#login-view                        { background: #040f0d !important; }
.login-form-side                   { background: #080f0e !important; }
body.theme-dark .login-form-side,
html[data-theme="dark"] .login-form-side { background: #080f0e !important; }

/* ── Dashboard sticky header — esquinas superiores redondeadas como el card ── */
.dashboard-sticky-header {
    border-top-left-radius:  inherit !important;
    border-top-right-radius: inherit !important;
}

/* ── Prof color rows — fondo transparente en dark mode para heredar del card ── */
body.theme-dark .prof-color-row    { background: transparent !important; }

/* ── Brand sidebar — nombre de clínica wrappea hacia abajo, logo no se achica ── */
.app-brand                         { align-items: flex-start !important; }
.app-brand-copy                    { overflow: visible !important; min-width: 0; flex: 1; }
.app-brand-subtitle                {
    white-space: normal        !important;
    overflow: visible          !important;
    text-overflow: unset       !important;
    word-break: break-word     !important;
    max-width: 100%            !important;
    line-height: 1.3           !important;
}
.app-brand-mark                    { flex-shrink: 0 !important; align-self: flex-start !important; }

/* Inputs del login — siempre teal, nunca slate-blue */
.login-form-inner .input-group input,
.login-form-inner .pwd-wrap input  {
    background:    rgba(15,118,110,.12) !important;
    border-color:  rgba(20,184,166,.22) !important;
    color:         #f1f5f9             !important;
}
.login-form-inner .input-group input:focus,
.login-form-inner .pwd-wrap input:focus {
    background:    rgba(15,118,110,.20) !important;
    border-color:  #14b8a6             !important;
    box-shadow:    0 0 0 3.5px rgba(20,184,166,.20) !important;
}