/* ============================================================
   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-list .prof-color-row,
.settings-list-static .prof-color-row {
    padding: 0.55rem 0.75rem;
}

.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; }
.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 — neutral (sin tinte violeta), el foco usa celeste en vez de
   violeta para que los campos de texto/búsqueda no compitan visualmente con
   los acentos violeta de botones, nav y badges. */
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:#161d2e !important;
    border:1px solid rgba(148,163,184,.22) !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(56,189,248,.5) !important;
    background:#182234 !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: celeste — neutral respecto al violeta de botones/nav/badges */
body.theme-dark input:focus,
body.theme-dark select:focus,
body.theme-dark textarea:focus,
body.theme-dark .form-input:focus {
    border-color: rgba(56,189,248,0.55) !important;
    box-shadow: 0 0 0 3px rgba(56,189,248,0.16) !important;
    background: rgba(255,255,255,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 {
    /* Paleta del login, en el teal de la marca pública. #0f766e es exactamente
       el fondo de logo-teal2, así que el logo y la pantalla son el mismo color.
       El interior de la app usa violeta; el teal es del login y la landing. */
    --lg-brand:       #0f766e;
    --lg-brand-mid:   #0d9488;
    --lg-brand-vivid: #14b8a6;
    --lg-brand-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;
    /* Sin fondo: el logo ya es un tile. Antes había un degradado acá y el
       SVG encima, lo que dejaba un recuadro dentro de otro. */
    background: none;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 32px rgba(15,118,110,.45);
    margin-bottom: 2rem;
    flex-shrink: 0;
}

.login-brand-logo-img {
    /* Ocupa todo el contenedor: el PNG ya trae su propio tile redondeado, así
       que el wrap solo define la medida. */
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Sin `filter: brightness(0) invert(1)`. Ese filtro existía para pintar de
       blanco un SVG monocromo; sobre el logo a color lo dejaba como una
       silueta blanca, perdiendo el diente y los acentos. */
}

/* 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-brand-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: none;
    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,.35);
    flex-shrink: 0;
}

.login-mobile-logo-mark .login-brand-logo-img {
    width: 100%; height: 100%;
}

.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: var(--lg-brand-vivid) !important;
    background: rgba(15,118,110,.2) !important;
    box-shadow: 0 0 0 3.5px rgba(20,184,166,.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: var(--lg-brand-mid);
}
.login-forgot-row .login-link-btn:hover { color: var(--lg-brand); }

/* ── 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, var(--lg-brand) 0%, var(--lg-brand-mid) 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: var(--lg-brand-mid);
    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: var(--lg-brand-vivid) !important;
    box-shadow: 0 0 0 3.5px rgba(20,184,166,.25) !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: var(--lg-brand-vivid) !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: var(--lg-brand-mid); }
.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: var(--lg-brand-mid); }
.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:  var(--lg-brand-vivid) !important;
    box-shadow:    0 0 0 3.5px rgba(20,184,166,.25) !important;
}

/* ── Indicador de hora actual en calendario (day view) ────────────────────── */
.cal-now-line {
    position:       absolute;
    left:           0;
    right:          0;
    height:         2px;
    background:     linear-gradient(90deg, #ef4444 0%, rgba(239,68,68,.18) 100%);
    z-index:        40;
    pointer-events: none;
    transform:      translateY(-1px);
}
.cal-now-dot {
    position:       absolute;
    left:           -5px;
    top:            50%;
    transform:      translateY(-50%);
    width:          10px;
    height:         10px;
    border-radius:  50%;
    background:     #ef4444;
    box-shadow:     0 0 0 3px rgba(239,68,68,.20),
                    0 0 8px rgba(239,68,68,.35);
}
.cal-now-gutter {
    position:       absolute;
    right:          4px;
    transform:      translateY(-50%);
    z-index:        40;
    pointer-events: none;
}
.cal-now-time-badge {
    display:        inline-block;
    font-size:      9.5px;
    font-weight:    700;
    letter-spacing: .02em;
    color:          #ef4444;
    background:     #fff;
    padding:        1px 5px;
    border-radius:  4px;
    border:         1.5px solid rgba(239,68,68,.30);
    line-height:    1.5;
    box-shadow:     0 1px 4px rgba(239,68,68,.12);
}

/* Dark mode */
body.theme-dark .cal-now-line {
    background: linear-gradient(90deg, #f87171 0%, rgba(248,113,113,.12) 100%);
}
body.theme-dark .cal-now-dot {
    background:  #f87171;
    box-shadow:  0 0 0 3px rgba(248,113,113,.22),
                 0 0 10px rgba(248,113,113,.40);
}
body.theme-dark .cal-now-time-badge {
    color:       #f87171;
    background:  #1e293b;
    border-color: rgba(248,113,113,.35);
    box-shadow:  0 1px 4px rgba(248,113,113,.15);
}

/* ── Ficha clínica: pestañas ──────────────────────────────────────────────── */
.clinical-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 32px;
    margin-bottom: 26px;
    padding: 6px;
    background: var(--gray-100, #f3f4f6);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 14px;
}
.clinical-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gray-500, #6b7280);
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s, background .15s, box-shadow .15s;
}
.clinical-tab:hover {
    color: var(--primary-600, #0d9488);
    background: rgba(124,58,237,.06);
}
.clinical-tab.is-active {
    color: var(--primary-700, #0f766e);
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.02);
}
.clinical-tab i {
    font-size: 14px;
    opacity: .85;
}
.clinical-tab-panel {
    display: none;
    animation: clinicalTabFade .18s ease;
}
.clinical-tab-panel.is-active {
    display: block;
}
@keyframes clinicalTabFade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Badge de alergias — siempre visible, alerta de seguridad */
.clinical-allergy-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 320px;
    margin-bottom: 8px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 700;
    color: #b91c1c;
    background: #fef2f2;
    border: 1.5px solid #fecaca;
    border-radius: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.clinical-allergy-badge i { flex-shrink: 0; }

/* Al imprimir la historia: solo Clínico y Tratamientos (lo pedido para la
   ficha impresa). Recetas/Presupuestos/Archivos tienen su propia impresión. */
.printing-clinical-history .clinical-tab-panel { display: none !important; }
.printing-clinical-history .clinical-tab-panel[data-tab="clinico"],
.printing-clinical-history .clinical-tab-panel[data-tab="tratamientos"] { display: block !important; }
.printing-clinical-history .clinical-tabs { display: none !important; }

/* Dark mode */
body.theme-dark .clinical-tabs { background: #172234; border-color: rgba(255,255,255,.07); }
body.theme-dark .clinical-tab { color: var(--gray-400, #9ca3af); }
body.theme-dark .clinical-tab:hover { background: rgba(45,212,191,.10); color: #2dd4bf; }
body.theme-dark .clinical-tab.is-active {
    color: #2dd4bf;
    background: #0f1729;
    box-shadow: 0 1px 3px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04);
}
body.theme-dark .clinical-allergy-badge {
    color: #fca5a5;
    background: rgba(153,27,27,.18);
    border-color: rgba(248,113,113,.35);
}

/* Archivos clínicos: botón eliminar solo-ícono (sin texto) — compacto y cuadrado */
.clinical-image-action-btn.clinical-image-action-icon-only {
    gap: 0;
    padding: 0.42rem;
    width: 30px;
    height: 30px;
    justify-content: center;
}

/* PWA instalada (iOS/Android): compensar notch y barra de gestos con safe-area-inset.
   Scopeado a display-mode:standalone para no afectar el uso normal en navegador. */
@media (display-mode: standalone) {
    .app-header {
        padding-top: env(safe-area-inset-top, 0px);
    }
    #app-view aside {
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    body {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* ── Antecedentes médicos (cuestionario) ──────────────────────────────── */
.mh-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2.5rem;
}
@media (max-width: 720px) {
    .mh-grid { grid-template-columns: 1fr; gap: 0; }
}
.mh-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--gray-100, #f3f4f6);
    font-size: 0.9rem;
}
.mh-label { color: var(--gray-700, #374151); }
.mh-toggle { display: flex; gap: 0.9rem; flex-shrink: 0; }
.mh-opt {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--gray-600, #4b5563);
    cursor: pointer;
    white-space: nowrap;
}
.mh-opt input { cursor: pointer; accent-color: var(--primary-600, #4f46e5); }
.mh-text-section { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.85rem; }
.mh-row-text {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem 0.75rem;
    background: var(--gray-50, #f9fafb);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 0.6rem;
}
.mh-row-inline { border-bottom: none; padding: 0; }
.mh-text { font-size: 0.88rem; }

/* Dark mode */
body.theme-dark .mh-row { border-bottom-color: rgba(255,255,255,.07); }
body.theme-dark .mh-label { color: #cbd5e1; }
body.theme-dark .mh-opt { color: #94a3b8; }
body.theme-dark .mh-row-text { background: #1e293b; border-color: rgba(255,255,255,.1); }

/* Impresión: mostrar antecedentes en la historia impresa si es la pestaña activa */
body.printing-clinical-history .clinical-tab-panel[data-tab="antecedentes"].is-active { display: block !important; }

/* Botón "Importar con IA" — distintivo violeta para diferenciarlo del Excel */
.btn.btn-ia {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border: none;
}
.btn.btn-ia:hover {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff;
}
.btn.btn-ia i { color: #fff; }

/* Botón "Dictar" en Observaciones — más grande y notorio, es un feature clave */
.btn.btn-ia[onclick^="startDictation"] {
    font-size: 0.95rem !important;
    padding: 0.75rem 1.4rem !important;
}

/* Ícono de eliminar dentro de .btn-icon (que por defecto es violeta) — el rojo
   necesita !important para ganarle al color violeta de .btn-icon. */
.btn-icon.btn-icon-danger,
.btn-icon.btn-icon-danger:hover {
    color: #ef4444 !important;
}

/* ================================================================
   RESPONSIVE MOBILE — Tabla de pacientes como tarjetas
   ----------------------------------------------------------------
   En celular la tabla medía 827px dentro de ~344px, obligando a
   arrastrar de costado para leer cada fila. El markup ya traía
   data-label en cada <td> (preparado para esto pero sin CSS), así
   que acá cada fila pasa a ser una tarjeta apilada legible.
   ================================================================ */
@media screen and (max-width: 640px) {
    .patients-scroll-inner {
        overflow-x: hidden;
        height: auto;
        max-height: none;
        min-height: 0;
    }

    #patients-table,
    #patients-table tbody,
    #patients-table tr,
    #patients-table td {
        display: block;
        width: 100%;
    }

    /* calendar.css y components.css fuerzan min-width:720px a las tablas en
       mobile (pensado para el scroll horizontal). Como acá ya no es una tabla
       sino tarjetas apiladas, hay que anularlo o la fila sigue midiendo 720px. */
    .table-container.table-container-patients #patients-table,
    #patients-table {
        min-width: 0 !important;
        width: 100% !important;
    }
    .table-container.table-container-patients {
        overflow-x: hidden !important;
    }

    #patients-table thead {
        display: none; /* los encabezados los reemplaza data-label */
    }

    #patients-table tbody tr {
        border: 1px solid var(--gray-200, #e5e7eb);
        border-radius: 0.85rem;
        padding: 0.9rem 1rem;
        margin-bottom: 0.75rem;
        background: #fff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    }

    #patients-table tbody td {
        border: none !important;
        padding: 0.3rem 0 !important;
    }

    /* Nombre + avatar: encabezado de la tarjeta, sin etiqueta */
    #patients-table td[data-label="Paciente"] {
        display: flex !important;
        align-items: center;
        gap: 0.7rem;
        font-size: 1rem;
        font-weight: 700;
        padding-bottom: 0.6rem !important;
        margin-bottom: 0.4rem;
        border-bottom: 1px solid var(--gray-100, #f3f4f6) !important;
    }

    /* Resto de campos: etiqueta chica arriba del valor */
    #patients-table td[data-label="Contacto"]::before,
    #patients-table td[data-label="DNI"]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--gray-400, #9ca3af);
        margin-bottom: 0.15rem;
    }

    /* Acciones: fila de botones táctiles al pie de la tarjeta */
    #patients-table td[data-label="Acciones"] {
        margin-top: 0.6rem;
        padding-top: 0.6rem !important;
        border-top: 1px solid var(--gray-100, #f3f4f6) !important;
    }
    #patients-table td[data-label="Acciones"] .patient-actions {
        justify-content: flex-start;
        gap: 0.5rem;
    }
    #patients-table td[data-label="Acciones"] .patient-actions .btn {
        min-width: 42px;
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.6rem;
        background: var(--gray-50, #f9fafb);
    }

    body.theme-dark #patients-table tbody tr {
        background: rgba(255, 255, 255, 0.03);
        border-color: rgba(148, 163, 184, 0.18);
        box-shadow: none;
    }
    body.theme-dark #patients-table td[data-label="Paciente"] {
        border-bottom-color: rgba(148, 163, 184, 0.14) !important;
    }
    body.theme-dark #patients-table td[data-label="Acciones"] {
        border-top-color: rgba(148, 163, 184, 0.14) !important;
    }
    body.theme-dark #patients-table td[data-label="Acciones"] .patient-actions .btn {
        background: rgba(255, 255, 255, 0.05);
    }
}

/* ================================================================
   RESPONSIVE MOBILE — Objetivos táctiles y campos de formulario
   ----------------------------------------------------------------
   Medido en celular: .btn-sm quedaba en 26px de alto y los botones
   de período de caja en 28px. La guía de Apple pide 44px mínimo y
   la de Android 48dp; abajo de ~40px se falla el toque seguido.
   Además, iOS hace zoom automático al enfocar un input con fuente
   menor a 16px, lo que descuadra toda la pantalla.
   ================================================================ */
@media screen and (max-width: 640px) {
    .btn,
    .btn-sm,
    .caja-period-btn,
    .settings-tab,
    button.tab-btn {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* .btn-sm trae padding e !important desde calendar.css */
    .btn-sm {
        padding: 0.5rem 0.9rem !important;
        font-size: 0.85rem !important;
    }

    /* Botones que son solo un ícono: cuadrados y cómodos de tocar */
    .btn.btn-icon,
    .btn.p-1,
    .btn-ghost.p-1 {
        min-width: 40px;
        min-height: 40px;
    }

    /* Evita el zoom automático de iOS al enfocar (necesita >=16px) */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    select,
    textarea,
    .form-input {
        font-size: 16px !important;
        min-height: 44px;
    }

    textarea {
        min-height: 90px;
    }

    /* Los botones de acción principales ocupan el ancho para no quedar
       apretados contra el borde en pantallas angostas */
    .modal-footer .btn,
    .modal-actions .btn {
        min-height: 44px;
        flex: 1 1 auto;
    }
}

/* El cuadrito de color del profesional es el disparador del selector:
   34px es incómodo de acertar con el dedo. */
@media screen and (max-width: 640px) {
    .prof-color-swatch {
        width: 2.75rem;
        height: 2.75rem;
    }
}

/* ================================================================
   RESPONSIVE MOBILE — Tablas de facturación / caja
   ----------------------------------------------------------------
   calendar.css aplica `table { min-width: 700px }` a TODA tabla bajo
   768px. Eso deja sin efecto el ocultado de columnas (.col-hide-sm /
   .col-hide-xs): aunque queden 5 de 7 columnas, la tabla igual se
   estira a 700px y obliga a arrastrar de costado. Acá se libera el
   ancho para que las columnas visibles entren en pantalla.
   ================================================================ */
@media screen and (max-width: 640px) {
    .table-container table.table-nowrap,
    .table-container table {
        min-width: 0 !important;
    }

    /* Sin nowrap las celdas pueden partirse y acomodarse al ancho real */
    .table-nowrap th,
    .table-nowrap td {
        white-space: normal !important;
    }

    /* Compacta un poco para que entren las columnas que quedan visibles */
    .table-container table th,
    .table-container table td {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        font-size: 0.8rem;
    }

    /* Los importes no deben partirse en dos líneas */
    .table-container table td:last-child,
    .caja-amount,
    .billing-amount {
        white-space: nowrap !important;
    }
}

/* ================================================================
   RESPONSIVE — Configuración: la grilla se desbordaba en pantallas
   muy angostas (320px). .settings-area es un grid de una columna sin
   `grid-template-columns` explícito, así que la columna tomaba el
   min-content de su hijo más ancho (314px) y se salía del contenedor
   de 291px. minmax(0,1fr) permite que la columna se achique.
   ================================================================ */
.settings-area {
    grid-template-columns: minmax(0, 1fr);
}
.settings-area > * {
    min-width: 0;
}

@media screen and (max-width: 400px) {
    .settings-nav-card,
    .settings-panel-card {
        padding: 0.9rem;
    }
}

/* ================================================================
   RESPONSIVE — Objetivos táctiles en tablets
   ----------------------------------------------------------------
   La regla de arriba corta en 640px, pero una tablet de 768-1024px
   también se usa con el dedo. `pointer: coarse` detecta el dispositivo
   de entrada real en vez de adivinar por el ancho, así que cubre
   tablets y celulares en horizontal sin agrandar botones en una
   notebook chica manejada con mouse.
   ================================================================ */
@media (pointer: coarse) {
    .btn,
    .btn-sm,
    .caja-period-btn {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .btn-sm {
        padding: 0.5rem 0.9rem !important;
    }
    .btn.btn-icon,
    .btn.p-1,
    .btn-ghost.p-1 {
        min-width: 40px;
        min-height: 40px;
    }
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    select,
    textarea,
    .form-input {
        min-height: 44px;
    }
}

/* ================================================================
   FIX — Barra clara en el borde inferior del celular (modo oscuro)
   ----------------------------------------------------------------
   patches.css fija `html { background:#f0effa !important }` y
   dark-theme.css intentaba revertirlo con `body.theme-dark html`,
   que es un selector imposible: <html> es el ANCESTRO de <body>,
   nunca su descendiente. Esa regla jamás se aplicó, así que el
   <html> quedaba claro. En el celular, donde el <body> no llega a
   pintar (franja del safe-area y el rebote del scroll), asomaba ese
   color y se veía como una barra clara fija abajo.
   `html:has(body.theme-dark)` sí selecciona el elemento correcto.
   ================================================================ */
html:has(body.theme-dark) {
    background: #0d1117 !important;
}

/* ================================================================
   FIX — Utilidad `.flex-wrap` que nunca existió
   ----------------------------------------------------------------
   El markup usa `class="flex gap-2 flex-wrap"` en 8 lugares (barra
   de acciones de Pacientes, Facturación, Configuración, etc.),
   heredado de Tailwind — pero Tailwind no está cargado en este
   proyecto y `.flex-wrap` no está definida en ningún CSS. Resultado:
   los botones quedaban en una sola línea sin poder bajar, apretados
   a ~75px cada uno en el celular con el texto partido.
   ================================================================ */
.flex-wrap {
    flex-wrap: wrap;
}

/* En pantallas chicas los botones de acción se reparten de a dos por
   fila en vez de encogerse hasta volverse ilegibles. */
@media screen and (max-width: 640px) {
    .section-hero-card .flex-wrap > .btn {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 0;
        white-space: nowrap;
    }
}

/* ================================================================
   FIX — Campos de fecha/hora en iOS Safari
   ----------------------------------------------------------------
   En iOS los <input type="date"> y "time" toman un ancho intrínseco
   propio (del control nativo) e ignoran el ancho del contenedor, así
   que se salen de su tarjeta — por eso el campo "Nacimiento" de la
   ficha se veía desbordado en el celular pero correcto en la
   emulación de Chrome. Anulando la apariencia nativa vuelven a
   comportarse como un input normal.
   ================================================================ */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    /* iOS alinea el texto arriba dentro del control nativo */
    display: block;
    text-align: left;
}

/* El indicador del calendario no debe empujar el ancho del campo */
input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
    min-width: 0;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    margin-left: auto;
    flex-shrink: 0;
}

/* ================================================================
   Combobox de paciente (modal de turnos)
   ----------------------------------------------------------------
   Reemplaza al <datalist> nativo, que no despliega de forma
   confiable en móviles. El panel usa position:fixed (posicionado
   por JS) para que no lo recorte el scroll del cuerpo del modal.
   ================================================================ */
.combo-wrap {
    position: relative;
}

.combo-wrap .form-input {
    width: 100%;
    padding-right: 2.5rem; /* espacio para la flecha */
}

.combo-toggle {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.4rem;
    cursor: pointer;
    color: var(--gray-400, #9ca3af);
    font-size: 0.8rem;
    line-height: 1;
    border-radius: 0.4rem;
}
.combo-toggle:hover { color: var(--gray-600, #4b5563); }

.combo-panel {
    position: fixed;
    z-index: 10050; /* por encima del overlay del modal */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 0.7rem;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    padding: 0.3rem;
}
.combo-panel[hidden] { display: none; }

.combo-option {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.6rem 0.7rem;
    border-radius: 0.5rem;
    cursor: pointer;
    min-height: 44px;         /* cómodo de tocar con el dedo */
    justify-content: center;
}
.combo-option:hover,
.combo-option.is-active {
    background: var(--primary-50, #eef2ff);
}
.combo-option-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-800, #1f2937);
}
.combo-option-dni {
    font-size: 0.75rem;
    color: var(--gray-500, #6b7280);
}
.combo-empty {
    padding: 0.9rem 0.7rem;
    font-size: 0.85rem;
    color: var(--gray-500, #6b7280);
    text-align: center;
}

body.theme-dark .combo-panel {
    background: #161b27;
    border-color: rgba(148, 163, 184, 0.22);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
body.theme-dark .combo-option:hover,
body.theme-dark .combo-option.is-active {
    background: rgba(148, 163, 184, 0.14);
}
body.theme-dark .combo-option-name { color: #e2e8f0; }
body.theme-dark .combo-option-dni  { color: #94a3b8; }
body.theme-dark .combo-empty       { color: #94a3b8; }

/* ================================================================
   FIX — Visor de fotos clínicas en celular
   ----------------------------------------------------------------
   Dos problemas reportados:
   1) El visor quedaba pegado arriba y los botones del encabezado
      (cerrar y zoom) caían debajo de la barra de estado / notch,
      porque usaba 100vh sin contemplar env(safe-area-inset-*).
   2) No se podía pasar de foto: el epígrafe está en position:absolute
      y quedaba por encima de las flechas, comiéndose los toques.
   ================================================================ */
@media screen and (max-width: 768px) {
    .clinical-image-viewer-overlay {
        padding: 0 !important;
        align-items: stretch !important;
    }

    .clinical-image-viewer {
        width: 100% !important;
        max-width: none !important;
        max-height: none !important;
        height: 100% !important;
        border: none !important;
        border-radius: 0 !important;
        /* Deja libre la franja del notch/barra de estado y la de gestos */
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* El encabezado queda siempre visible y alcanzable */
    .clinical-image-viewer-header {
        position: sticky;
        top: 0;
        z-index: 5;
        flex-wrap: wrap;
        row-gap: 0.5rem;
        padding: 0.85rem 0.9rem;
    }

    .clinical-image-viewer-close,
    .clinical-image-viewer-zoom-btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Flechas de navegación: más grandes y por encima del epígrafe */
    .clinical-image-viewer-nav {
        width: 48px !important;
        height: 56px !important;
        z-index: 6 !important;
    }
    .clinical-image-viewer-nav.prev { left: 0.5rem !important; }
    .clinical-image-viewer-nav.next { right: 0.5rem !important; }

    /* El epígrafe es informativo: nunca debe interceptar toques */
    .clinical-image-viewer-caption {
        pointer-events: none !important;
        z-index: 1 !important;
    }

    .clinical-image-viewer-stage {
        position: relative;
    }
}

/* ================================================================
   FIX — Franja fija abajo / app corrida hacia abajo en el celular
   ----------------------------------------------------------------
   `.view-section.active` aplica la animación v6-slide-up, que va de
   translateY(14px) a translateY(0) con fill-mode `both`. El problema
   es que #app-view NO es una vista común: es el contenedor fijo de
   toda la app (position:fixed; inset:0; alto 100vh). Al quedar
   transformado 14px, la app entera baja y sus últimos 14px quedan
   fuera de la pantalla, dejando una franja visible abajo.
   Además, un ancestro con transform rompe el position:fixed de todo
   lo que tenga adentro (menús, overlays).
   El login sí conserva la animación; acá la sacamos solo del shell,
   que igual anima por dentro con #main-content (v6-fade-in).
   ================================================================ */
#app-view.view-section.active {
    animation: none !important;
    transform: none !important;
}

/* ================================================================
   FIX — Franja fija abajo en el celular: 100vh -> 100dvh
   ----------------------------------------------------------------
   En móviles `100vh` NO es el alto visible: es el alto "grande" del
   viewport, que incluye la zona que ocupan la barra del navegador y
   la barra de gestos. Como el shell de la app mide 100vh y está en
   position:fixed, su parte final queda por debajo del área visible y
   se percibe como una franja fija abajo que tapa el contenido.
   `dvh` (dynamic viewport height) sí sigue el alto realmente visible
   y se ajusta cuando la barra del navegador se muestra u oculta.
   Se deja `vh` primero como respaldo para navegadores viejos: los que
   no entienden `dvh` simplemente ignoran la segunda línea.
   Esto no se reproduce en la emulación de escritorio, donde el
   viewport es fijo y no hay barras dinámicas.
   ================================================================ */
#app-view {
    height: 100vh !important;
    height: 100dvh !important;
}

#app-view main {
    height: 100vh;
    height: 100dvh;
}

#app-view aside {
    height: 100vh;
    height: 100dvh;
}

#login-view {
    height: 100vh !important;
    height: 100dvh !important;
}

/* Mismo criterio para modales y visor: con 100vh el alto calculado
   supera el área visible del celular y el pie del modal queda debajo
   de la barra del navegador. */
@media screen and (max-width: 768px) {
    .modal-content {
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem);
    }
    .clinical-image-viewer {
        max-height: 100vh;
        max-height: 100dvh;
    }
    .modal-overlay {
        max-height: 100vh;
        max-height: 100dvh;
    }
}

/* ================================================================
   FIX — Franja crema visible en el borde inferior (modo claro)
   ----------------------------------------------------------------
   El área de la app (#app-view main) es #f0effa, pero el <body> y el
   <html> quedaban en #F7F6F2 (crema, heredado de refresh.css). En el
   celular, cualquier franja donde la app no llega a pintar —la zona
   del safe-area / barra de gestos, o el rebote del scroll— deja ver
   ese crema, y se percibe como una barra fija abajo que tapa el
   contenido.
   Igualando los tres colores la costura desaparece, sin importar de
   dónde salga la franja.
   ================================================================ */
html,
body {
    background: #f0effa !important;
}

html:has(body.theme-dark),
body.theme-dark {
    background: #0d1117 !important;
}


/* dark-theme.css usa `body.bg-gray-50 { background:#F7F6F2 !important }` — con
   más especificidad que un `body` a secas, por eso el crema seguía ganando.
   Se iguala al color real del área de contenido (#main-content = #f4f4f8)
   para que la franja inferior no se distinga del resto. */
html,
body,
body.bg-gray-50 {
    background: #f4f4f8 !important;
}

html:has(body.theme-dark),
body.theme-dark,
body.bg-gray-50.theme-dark {
    background: #0d1117 !important;
}


/* ================================================================
   FIX — El login quedaba encima de la app tapando/bloqueando cosas
   ----------------------------------------------------------------
   Más arriba en este mismo archivo hay `#login-view { display:flex
   !important }`. Al ser un selector de ID le gana a la clase
   `.hidden { display:none !important }` de base.css, así que después
   de iniciar sesión el login NO se ocultaba: seguía como una capa
   position:fixed a pantalla completa sobre la app.
   Quedaba con opacity 0 (no se veía) pero seguía existiendo, y por
   lo tanto se comía los toques del usuario: comprobado con
   elementFromPoint, en la franja inferior el elemento que recibía el
   toque era .login-form-side y no el contenido de la app.
   La especificidad ID+clase (1,1,0) le gana al ID solo (1,0,0).
   ================================================================ */
#login-view.hidden,
#app-view.hidden {
    display: none !important;
}

/* ================================================================
   Visor de imágenes: el zoom queda contenido dentro del visor
   ----------------------------------------------------------------
   `touch-action: none` le dice al navegador que no interprete los
   gestos (pinch/doble toque) en esta superficie, así el zoom deja de
   aplicarse a la página entera. Ampliar sigue siendo posible con los
   botones + / − / ajustar del propio visor y con el pinch sobre la
   imagen, que maneja el JS.
   Se limita al visor: el resto de la app conserva el zoom del
   navegador, que hace falta por accesibilidad.
   ================================================================ */
.clinical-image-viewer-overlay,
.clinical-image-viewer {
    touch-action: none;
}

/* La imagen ampliada no debe dispararle el menú de "guardar imagen"
   ni la selección al mantener presionado mientras se hace zoom. */
.clinical-image-viewer-img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* El listado de archivos sí conserva el scroll normal con el dedo. */
.clinical-images-grid {
    touch-action: pan-y;
}

/* ================================================================
   Archivos clínicos: acciones compactas en celular
   ----------------------------------------------------------------
   "Ver" y "Bajar" con texto ocupaban casi todo el ancho de la tarjeta
   del PDF. En pantallas chicas quedan solo los íconos (ojo y flecha
   de descarga), con área táctil de 40px.
   ================================================================ */
@media screen and (max-width: 640px) {
    .clinical-image-actions .clinical-image-action-btn span {
        display: none;
    }
    .clinical-image-actions .clinical-image-action-btn {
        gap: 0;
        width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
        font-size: 0.95rem;
    }
    .clinical-image-actions {
        gap: 0.4rem;
    }
}

/* Botón de descarga dentro del visor (es un <a>, se alinea con los de zoom) */
.clinical-image-viewer-download {
    text-decoration: none;
}
@media screen and (max-width: 768px) {
    .clinical-image-viewer-download {
        min-width: 44px;
        min-height: 44px;
    }
}

/* La tira de miniaturas y el epígrafe del visor deben seguir pudiendo
   desplazarse con el dedo: `touch-action:none` en el overlay bloquea todo
   gesto, así que se les devuelve el paneo. */
.clinical-image-viewer-thumbs {
    touch-action: pan-x;
}
.clinical-image-viewer-panel {
    touch-action: pan-y;
}

/* ── Ícono "Cómo cargar pacientes" (siempre visible, no solo con la lista vacía) ── */
.section-title { display: flex; align-items: center; gap: 0.5rem; }
.patients-info-btn {
    background: none;
    border: none;
    padding: 0.2rem;
    cursor: pointer;
    color: var(--gray-400, #9ca3af);
    font-size: 0.85em;
    line-height: 1;
    display: inline-flex;
    border-radius: 50%;
}
.patients-info-btn:hover { color: var(--primary-600); background: var(--primary-50, #eef2ff); }
body.theme-dark .patients-info-btn { color: #64748b; }
body.theme-dark .patients-info-btn:hover { color: #a5b4fc; background: rgba(148,163,184,0.12); }

/* Método "Importar con IA" en el instructivo — mismo estilo violeta que .btn-ia */
.patients-empty-method-icon--ia {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    color: #7c3aed;
}
body.theme-dark .patients-empty-method-icon--ia {
    background: rgba(124,58,237,0.18);
    color: #c4b5fd;
}

/* ================================================================
   Calendario — vista de Día: tarjeta con sombra suave (opción B)
   ----------------------------------------------------------------
   Se veía muy plano: borde apenas visible, sin ningún acento, y el
   resto un bloque vacío sin ninguna referencia visual entre horas.
   Se le suma:
   - Borde + sombra pareja y suave + esquinas redondeadas.
   - Franjas horarias alternadas muy sutiles (zebra) para que se
     pueda "leer" la grilla de un vistazo, no solo con las líneas.
   (Se probaron otras variantes con acento de color en el encabezado
   y se descartaron a favor de este estilo, más discreto.)
   ================================================================ */
body .cal-scroll-wrap.cal-scroll-wrap-day {
    /* !important porque más arriba en este mismo archivo hay
       `body:not(.theme-dark) .cal-scroll-wrap { border:none!important;
       box-shadow:none!important; border-radius:0!important }` — pensada
       para el scroll semanal/mensual (que delega el marco a un hijo), pero
       en la vista de Día el propio .cal-scroll-wrap ES la tarjeta visible. */
    border: 1px solid var(--gray-200) !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 16px rgba(15,23,42,0.08) !important;
    background: #fff !important;
    overflow: hidden;
}

.cal-grid-day {
    border-radius: inherit;
    overflow: hidden;
}

.cal-prof-header {
    padding: 0.95rem 0.75rem 0.8rem;
    border-bottom: 1px solid var(--gray-200);
    position: relative;
}

.cal-prof-schedule-badge {
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: var(--gray-100);
    color: var(--gray-500);
    font-weight: 600;
}

/* Bandas horarias sutiles: cada bloque mide una hora de grilla (84px). El
   desplazamiento lo calcula appointments.js con la misma formula que las
   lineas, porque la vista empieza unos minutos antes del horario configurado. */
.cal-prof-body {
    background-image: linear-gradient(
        to bottom,
        rgba(99, 102, 241, 0.025) 0px,
        rgba(99, 102, 241, 0.025) 84px,
        transparent 84px,
        transparent 168px
    );
    background-size: 100% 168px;
    background-position: 0 var(--cal-hour-stripe-offset, 0px);
    background-repeat: repeat-y;
}

.cal-gutter-header {
    border-bottom: 1px solid var(--gray-200);
}
.cal-hour-label {
    font-size: 0.66rem;
    color: var(--gray-500);
}
.cal-h-line {
    border-top-color: var(--gray-150, rgba(148,163,184,0.28));
}

body.theme-dark .cal-scroll-wrap.cal-scroll-wrap-day {
    border-color: rgba(148,163,184,0.16) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.28) !important;
    background: transparent !important;
}
body.theme-dark .cal-prof-body {
    background-image: linear-gradient(
        to bottom,
        rgba(148,163,184,0.035) 0px,
        rgba(148,163,184,0.035) 84px,
        transparent 84px,
        transparent 168px
    ) !important;
    background-size: 100% 168px !important;
    background-position: 0 var(--cal-hour-stripe-offset, 0px) !important;
    background-repeat: repeat-y !important;
}
body.theme-dark .cal-prof-schedule-badge {
    background: rgba(255,255,255,0.05);
    color: #94a3b8;
}

/* ── Antecedentes médicos dentro de Nuevo/Editar Paciente (colapsable) ── */
.patient-mh-details {
    margin-top: 0.6rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.65rem;
    overflow: hidden;
}
.patient-mh-details summary {
    padding: 0.7rem 0.9rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--gray-700);
    background: var(--gray-50);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
}
.patient-mh-details summary::-webkit-details-marker { display: none; }
.patient-mh-details summary::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--gray-400);
    transition: transform 0.15s ease;
}
.patient-mh-details[open] summary::after { transform: rotate(180deg); }
.patient-mh-hint {
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--gray-400);
}
.patient-mh-body {
    padding: 0.9rem;
    border-top: 1px solid var(--gray-200);
}
.patient-mh-body .mh-grid { grid-template-columns: 1fr; gap: 0; }

body.theme-dark .patient-mh-details { border-color: rgba(148,163,184,0.16); }
body.theme-dark .patient-mh-details summary { background: rgba(255,255,255,0.03); color: #e2e8f0; }
body.theme-dark .patient-mh-body { border-top-color: rgba(148,163,184,0.14); }

/* ================================================================
   Tamaño de letra general — un poco más grande
   ----------------------------------------------------------------
   La mayoría de la app usa `rem` para tipografía, así que subir el
   font-size del <html> escala todo el texto proporcionalmente (títulos,
   botones, tablas, formularios) sin tener que tocar cada componente
   uno por uno. De 16px (default del navegador) a ~17px — un aumento
   sutil, no un cambio drástico de escala.
   ================================================================ */
html {
    font-size: 106.25%;
}

/* ================================================================
   INSTALACIÓN PWA — banner e instructivo de iOS
   Va al final de patches.css, que es la última hoja que carga
   index.html: así no hay que pelear con !important de las capas
   anteriores.
   ================================================================ */

#pwa-install-banner {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 14px;
    width: calc(100% - 32px);
    max-width: 460px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    animation: pwa-install-in 260ms ease-out;
}

@keyframes pwa-install-in {
    from { opacity: 0; transform: translateX(-50%) translateY(12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Quien pidió no ver animaciones tampoco quiere que un aviso se le deslice
   en pantalla. */
@media (prefers-reduced-motion: reduce) {
    #pwa-install-banner { animation: none; }
}

.pwa-install-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--primary-50, #eef2ff);
    color: var(--primary-600, #4f46e5);
    font-size: 17px;
}

.pwa-install-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pwa-install-text strong {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
}

.pwa-install-text span {
    font-size: 0.78rem;
    line-height: 1.35;
    color: #64748b;
}

.pwa-install-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pwa-install-accept,
.pwa-install-dismiss {
    border: none;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.pwa-install-accept {
    background: var(--primary-600, #4f46e5);
    color: #ffffff;
}

.pwa-install-dismiss {
    background: transparent;
    color: #94a3b8;
    font-weight: 600;
}

.pwa-install-dismiss:hover { color: #475569; }

/* Instructivo de iOS: en Safari no existe API de instalación, así que lo único
   posible es explicar los pasos. */
#pwa-ios-help {
    position: fixed;
    inset: 0;
    z-index: 9100;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.55);
}

.pwa-ios-help-card {
    width: 100%;
    max-width: 380px;
    padding: 24px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.28);
}

.pwa-ios-help-card h3 {
    margin: 0 0 14px;
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
}

.pwa-ios-help-card ol {
    margin: 0 0 20px;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 0.86rem;
    line-height: 1.45;
    color: #475569;
}

.pwa-ios-help-close {
    width: 100%;
    border: none;
    border-radius: 10px;
    padding: 11px;
    background: var(--primary-600, #4f46e5);
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
}

/* Modo oscuro */
body.theme-dark #pwa-install-banner {
    background: var(--gray-900, #0f172a);
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

body.theme-dark .pwa-install-text strong { color: #f1f5f9; }
body.theme-dark .pwa-install-text span   { color: #94a3b8; }

body.theme-dark .pwa-install-icon {
    background: rgba(99, 102, 241, 0.16);
    color: #a5b4fc;
}

body.theme-dark .pwa-ios-help-card {
    background: var(--gray-900, #0f172a);
}

body.theme-dark .pwa-ios-help-card h3 { color: #f1f5f9; }
body.theme-dark .pwa-ios-help-card ol { color: #cbd5e1; }

/* En pantallas chicas los botones van al lado, no apilados: el banner ocupa
   demasiado alto si no. */
@media (max-width: 420px) {
    #pwa-install-banner { gap: 10px; padding: 12px; }
    .pwa-install-icon { display: none; }
    .pwa-install-actions { flex-direction: row; align-items: center; }
}

/* ================================================================
   FILA "INSTALAR APLICACIÓN" — pie del sidebar
   Mismo patrón que el control de "Modo oscuro" (etiqueta a la
   izquierda, acción a la derecha) pero más compacta: es un control
   ocasional, no una preferencia que se toca seguido.
   Va al final de patches.css, la última hoja que carga index.html,
   para no pelear contra los !important de las capas anteriores.
   La fila solo existe en el DOM cuando la app es instalable — la
   crea sincronizarBotonInstalar() en app.js.
   ================================================================ */

.sidebar-install-control {
    margin-top: 0.6rem;
    padding: 0.5rem 0.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border: 1px solid rgba(99, 102, 241, 0.20);
    border-radius: 0.75rem;
    /* Un violeta muy tenue lo distingue del control de tema sin gritar. */
    background: linear-gradient(180deg, #ffffff 0%, #f5f5ff 100%);
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.06);
}

.sidebar-install-label {
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: var(--gray-700, #374151);
}

/* El ícono solo no comunica nada por sí mismo; la etiqueta de al lado es la
   que da el significado. Por eso el botón es chico y la fila mantiene texto. */
.sidebar-install-btn {
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 0.55rem;
    background: #4f46e5;
    color: #ffffff;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.sidebar-install-btn:hover {
    background: #4338ca;
    transform: translateY(-1px);
}

body.theme-dark .sidebar-install-control {
    background: rgba(99, 102, 241, 0.10);
    border-color: rgba(99, 102, 241, 0.22);
    box-shadow: none;
}

body.theme-dark .sidebar-install-label {
    color: #c7d2fe;
}

body.theme-dark .sidebar-install-btn {
    background: #6366f1;
    color: #ffffff;
}

body.theme-dark .sidebar-install-btn:hover {
    background: #818cf8;
}

/* ================================================================
   MARCAS DE LOGO — el contenedor no dibuja nada
   ================================================================
   Los cuatro contenedores de marca (sidebar, header móvil, y los dos
   del login) venían de una época en que adentro iba un SVG monocromo:
   cada uno pintaba su propio tile con degradado violeta, su padding y
   su anillo. Ahora adentro va un PNG que YA ES un tile redondeado, así
   que quedaba un marco alrededor del logo — y encima con otro radio
   (0.6rem, 0.75rem y 0.85rem según cuál de las cuatro reglas en
   conflicto ganara) que no coincidía con el del logo.

   Acá se apagan todos: el contenedor solo define la medida y el logo
   ocupa el 100%. Va al final de patches.css, la última hoja que carga
   index.html, para ganarle a las reglas anteriores sin tocarlas.
   ================================================================ */

.app-brand-mark,
.mobile-header-brand-mark,
.login-brand-logo-wrap,
.login-mobile-logo-mark {
    background: none !important;
    background-image: none !important;
    padding: 0 !important;
    border: none !important;
    /* 20.5% es el radio real del tile de los PNG (105px de 512, medido
       sobre el canal alfa). Con este valor la sombra sigue exactamente
       la silueta del logo.

       Antes había un 28% acá —heredado del SVG viejo, que sí tenía ese
       radio— y como el contenedor recortaba con `overflow: hidden`, le
       comía las esquinas al logo: se veía redondeado de más arriba.
       Sin overflow no hace falta recortar nada: la transparencia del
       propio PNG define la forma. */
    border-radius: 20.5% !important;
    overflow: visible !important;
}

/* Sombra suave y del color de cada contexto, sin el anillo de 1px que
   antes delineaba el contenedor. */
.app-brand-mark,
.mobile-header-brand-mark {
    box-shadow: 0 6px 16px rgba(76, 64, 230, 0.28) !important;
}

.app-brand-mark > img,
.mobile-header-brand-mark > img,
.login-brand-logo-wrap > img,
.login-mobile-logo-mark > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: inherit;
    display: block;
}

/* ================================================================
   Color por profesional — banda por fila también en modo claro

   En oscuro cada fila ya se lee como una tarjeta: rgb(36,51,71) sobre
   un contenedor rgb(30,41,59), o sea un escalón MÁS CLARO que su fondo.
   En claro la fila era transparente y las tres quedaban pegadas sin
   separación visible.

   Se replica el mismo gesto, no el mismo color: el escalón hacia arriba
   en claro es el blanco puro contra el gris muy suave de .settings-subsection
   (#f8fafc al 78%). Es además el tratamiento que ya tienen las filas de
   .checkbox-group en este mismo panel, así que la sección queda coherente
   en vez de tener dos estilos de fila distintos.
   ================================================================ */
.settings-list-static .prof-color-row,
.settings-list .prof-color-row {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 0.95rem;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

/* En oscuro manda la regla que ya existía; solo se le suma el radio y el
   borde para que las dos filas tengan la misma silueta en ambos temas. */
body.theme-dark .settings-list-static .prof-color-row,
body.theme-dark .settings-list .prof-color-row {
    border: 1px solid rgba(132, 151, 202, 0.16);
    border-radius: 0.95rem;
    box-shadow: none;
}

/* Botón de WhatsApp en la lista de pacientes. Es un <a> y no un <button> como
   los otros de la fila (abre una URL externa), así que necesita alinearse a
   mano: sin esto queda con el baseline de texto y sube respecto del resto. */
.btn-whatsapp-patient {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #25d366;
    text-decoration: none;
}
.btn-whatsapp-patient:hover {
    color: #1da851;
}

/* ================================================================
   Editor del mensaje de confirmación
   ================================================================ */

.msg-token-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

/* Los marcadores se ven como piezas insertables, no como botones de acción:
   monoespaciado y con las llaves visibles, para que se entienda que lo que se
   agrega al texto es literalmente eso. */
.msg-token {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(99, 102, 241, 0.3);
    background: rgba(99, 102, 241, 0.08);
    color: #4f46e5;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.msg-token:hover  { background: rgba(99, 102, 241, 0.16); }
.msg-token:active { transform: scale(0.97); }

/* La vista previa imita una burbuja de mensaje: el objetivo es que se juzgue
   como lo va a leer el paciente, no como un campo de formulario más.
   white-space: pre-wrap conserva los saltos de línea que se escriban. */
.msg-preview {
    white-space: pre-wrap;
    word-break: break-word;
    padding: 0.85rem 1rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: #ffffff;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--gray-800, #1f2937);
    min-height: 3.5rem;
}

.msg-warn {
    margin-top: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #b45309;
}

#confirmation-message-text {
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    min-height: 8rem;
}

body.theme-dark .msg-token {
    border-color: rgba(129, 140, 248, 0.28);
    background: rgba(129, 140, 248, 0.12);
    color: #a5b4fc;
}
body.theme-dark .msg-token:hover { background: rgba(129, 140, 248, 0.2); }

body.theme-dark .msg-preview {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(132, 151, 202, 0.16);
    color: var(--gray-900);
}

body.theme-dark .msg-warn { color: #fbbf24; }


/* ================================================================
   MOVIMIENTOS DE CUENTA CORRIENTE — desplegable dentro de la ficha
   Antes la tabla estaba siempre abierta y tapaba los presupuestos.
   Mismo patron visual que "Turnos finalizados" del dashboard.
   ================================================================ */
.cc-movs-details {
    border: 1px solid var(--border-soft, rgba(0,0,0,0.08));
    border-radius: 0.75rem;
    background: rgba(0,0,0,0.015);
}

.cc-movs-summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    padding: 0.6rem 0.9rem;
    border-radius: 0.75rem;
    transition: background 0.15s ease;
}
.cc-movs-summary::-webkit-details-marker { display: none; }
.cc-movs-summary:hover { background: rgba(0,0,0,0.035); }
.cc-movs-summary:focus-visible {
    outline: 2px solid var(--primary-600, #4c40e6);
    outline-offset: 2px;
}

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

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

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

/* La tabla ya trae su propio borde: adentro del desplegable se separa del
   summary con un margen y se recorta a los bordes del contenedor. */
.cc-movs-details > .table-container {
    margin: 0 0.55rem 0.55rem;
}

body.theme-dark .cc-movs-details {
    border-color: rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
}
body.theme-dark .cc-movs-summary:hover { background: rgba(255,255,255,0.05); }
body.theme-dark .cc-movs-summary-inner { color: #a1a1aa; }
body.theme-dark .cc-movs-chevron { color: #71717a; }

/* ================================================================
   BOTON FLOTANTE DE AYUDA
   Abajo a la derecha. z-index por debajo del overlay de modales
   (50) para que un modal abierto lo tape.
   ================================================================ */
.odentara-fab-dock {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    z-index: 44;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
}

/* Sin sesion (login) o con el menu lateral abierto en movil, estorban. */
#app-view.hidden ~ .odentara-fab-dock { display: none; }
#app-view.sidebar-open ~ .odentara-fab-dock {
    opacity: 0;
    pointer-events: none;
}

.odentara-fab {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: #ffffff;
    color: #334155;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.odentara-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
}
.odentara-fab:active { transform: translateY(0); }
.odentara-fab.is-hidden { display: none; }

.odentara-fab-help {
    background: var(--primary-600, #4c40e6);
    border-color: transparent;
    color: #ffffff;
}
.odentara-fab-help:hover { background: var(--primary-700, #3f34c4); }

.odentara-fab-whatsapp {
    background: #25d366;
    border-color: transparent;
    color: #ffffff;
    text-decoration: none;
    font-size: 1.25rem;
}
.odentara-fab-whatsapp:hover {
    background: #1ebe5d;
    color: #ffffff;
}
.odentara-fab-whatsapp:focus-visible {
    outline: 3px solid rgba(37, 211, 102, 0.32);
    outline-offset: 3px;
}

/* ================================================================
   BARRA "VOLVER" — arriba a la izquierda del contenido
   Es un elemento del flujo, no flotante: cuando se oculta no deja
   hueco y no tapa nada de la vista.
   ================================================================ */
.nav-back-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    /* El padding de abajo importa: sin el, el borde inferior del boton queda
       pegado al inicio de #main-content y el boton se ve aplastado contra el
       contenido. */
    padding: 0.7rem 1.5rem 0.5rem;
}
.nav-back-bar.is-hidden { display: none; }

/* Cuando la barra esta visible, el padding de arriba de #main-content se suma
   al de la barra y el contenido termina demasiado abajo. La barra ya aporta la
   separacion, asi que el contenido cede la suya. Lleva !important porque el
   padding de #main-content esta declarado asi en las reglas responsive. */
.nav-back-bar:not(.is-hidden) + #main-content {
    padding-top: 0.5rem !important;
}

.nav-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem 0.5rem 0.85rem;
    line-height: 1.2;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: #ffffff;
    color: #475569;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    max-width: 100%;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.nav-back-btn:hover {
    background: var(--primary-50, #eef2ff);
    border-color: var(--primary-600, #4c40e6);
    color: var(--primary-700, #3f34c4);
}
.nav-back-btn:focus-visible {
    outline: 2px solid var(--primary-600, #4c40e6);
    outline-offset: 2px;
}
.nav-back-btn i { font-size: 0.78rem; }

/* El titulo de la pantalla anterior puede ser largo ("Pacientes & Historia
   Clinica"): se recorta en vez de estirar el boton fuera de la pantalla. */
.nav-back-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.theme-dark .nav-back-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    box-shadow: none;
}
body.theme-dark .nav-back-btn:hover {
    background: rgba(129, 140, 248, 0.16);
    border-color: rgba(129, 140, 248, 0.45);
    color: #c7d2fe;
}

@media screen and (max-width: 1024px) {
    .nav-back-bar { padding: 0.6rem 1rem 0.45rem; }
}

@media screen and (max-width: 640px) {
    .nav-back-bar { padding: 0.55rem 1rem 0.4rem; }
    .nav-back-btn { font-size: 0.78rem; }
}

/* Al imprimir la ficha clinica no tiene sentido. */
@media print {
    .nav-back-bar { display: none !important; }
}

body.theme-dark .odentara-fab {
    background: #1e293b;
    border-color: rgba(255,255,255,0.12);
    color: #e2e8f0;
    box-shadow: 0 8px 22px rgba(0,0,0,0.45);
}
body.theme-dark .odentara-fab-help {
    background: var(--primary-600, #4c40e6);
    border-color: transparent;
    color: #ffffff;
}
body.theme-dark .odentara-fab-whatsapp {
    background: #25d366;
    border-color: transparent;
    color: #ffffff;
}

@media screen and (max-width: 640px) {
    .odentara-fab-dock {
        right: 14px;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        gap: 8px;
    }
    .odentara-fab {
        width: 42px;
        height: 42px;
        font-size: 0.92rem;
    }
}

/* Con la ayuda abierta el dock estorba: la burbuja ya tiene sus controles. */
body.help-guide-open .odentara-fab-dock {
    opacity: 0;
    pointer-events: none;
}

/* ================================================================
   AYUDA CONTEXTUAL — burbuja guiada
   ================================================================ */
.help-guide-layer {
    position: fixed;
    inset: 0;
    z-index: 9500;
}
.help-guide-layer.is-hidden { display: none; }

.help-guide-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
}

/* El "foco": un recuadro transparente con una sombra gigante que oscurece
   todo lo de afuera. Es la forma de recortar un agujero en el fondo sin
   tener que dibujar cuatro rectangulos. */
.help-guide-spot {
    position: fixed;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55);
    border: 2px solid rgba(255, 255, 255, 0.85);
    pointer-events: none;
    transition: top 0.18s ease, left 0.18s ease, width 0.18s ease, height 0.18s ease;
}
.help-guide-spot.is-hidden { display: none; }

/* Si hay foco, el fondo plano sobra: la sombra del foco ya oscurece. */
.help-guide-layer:has(.help-guide-spot:not(.is-hidden)) .help-guide-backdrop {
    background: transparent;
}

.help-guide-bubble {
    position: fixed;
    width: min(340px, calc(100vw - 24px));
    background: #ffffff;
    border-radius: 14px;
    padding: 16px 18px 14px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.28);
    border: 1px solid rgba(15, 23, 42, 0.08);
}
.help-guide-bubble.is-centered {
    left: 50%;
    top: auto;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
}

.help-guide-arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    background: inherit;
    border: 1px solid rgba(15, 23, 42, 0.08);
    transform: translateX(-50%) rotate(45deg);
}
.help-guide-arrow.is-up {
    top: -7px;
    border-right: none;
    border-bottom: none;
}
.help-guide-arrow.is-down {
    bottom: -7px;
    border-left: none;
    border-top: none;
}

.help-guide-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    border-radius: 50%;
    color: #94a3b8;
    cursor: pointer;
    font-size: 0.85rem;
}
.help-guide-close:hover { background: rgba(15,23,42,0.06); color: #475569; }

.help-guide-eyebrow {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary-600, #4c40e6);
    padding-right: 28px;
}

.help-guide-title {
    margin: 4px 0 6px;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
    padding-right: 28px;
}

.help-guide-text {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: #475569;
}

.help-guide-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.help-guide-dots {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.help-guide-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.18);
}
.help-guide-dot.is-active {
    background: var(--primary-600, #4c40e6);
    transform: scale(1.25);
}

.help-guide-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

/* El elemento senalado se levanta por encima del fondo oscurecido. */
.help-guide-target {
    position: relative;
    z-index: 9501;
}

body.help-guide-open { overflow: hidden; }

body.theme-dark .help-guide-bubble {
    background: #1e293b;
    border-color: rgba(255,255,255,0.10);
}
body.theme-dark .help-guide-arrow { border-color: rgba(255,255,255,0.10); }
body.theme-dark .help-guide-title { color: #f1f5f9; }
body.theme-dark .help-guide-text  { color: #cbd5e1; }
body.theme-dark .help-guide-close:hover { background: rgba(255,255,255,0.08); color: #e2e8f0; }
body.theme-dark .help-guide-dot { background: rgba(255,255,255,0.20); }
body.theme-dark .help-guide-spot { border-color: rgba(255,255,255,0.75); }

@media screen and (max-width: 640px) {
    .help-guide-bubble {
        width: calc(100vw - 20px);
        left: 50% !important;
        top: auto !important;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        transform: translateX(-50%);
    }
    .help-guide-actions { width: 100%; justify-content: flex-end; }
}

/* ================================================================
   CAJA — una card por moneda, con sus tres numeros adentro
   Reemplaza a las tres metric-card que apilaban pesos y dolares
   dentro del mismo numero. Ver renderCajaCards() en billing.js.
   ================================================================ */
.caja-monedas-grid {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.caja-moneda-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.1rem 1.35rem;
}

/* ── Cabecera: simbolo + nombre de la moneda + periodo ── */
.caja-moneda-head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    /* Ancho fijo para que las metricas de las dos cards queden alineadas
       en columna aunque "Pesos" y "Dolares" midan distinto. */
    flex: 0 0 auto;
    min-width: 11.5rem;
}

.caja-moneda-simbolo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.85rem;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: var(--primary-50, #eef2ff);
    color: var(--primary-700, #3f34c4);
    flex: 0 0 auto;
}

.caja-moneda-titulo h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--gray-900, #0f172a);
    line-height: 1.2;
}

.caja-moneda-titulo small {
    display: block;
    margin-top: 1px;
    font-size: 0.72rem;
    color: var(--gray-400, #94a3b8);
}

/* ── Las tres metricas, en fila ── */
.caja-moneda-metricas {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.5rem;
}

.caja-metrica {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-left: 1.1rem;
    border-left: 1px solid var(--border-soft, rgba(15, 23, 42, 0.08));
}
.caja-metrica:first-child { border-left: none; padding-left: 0; }

.caja-metrica-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-500, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.caja-metrica-valor {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.caja-ico-verde,   .caja-valor-verde   { color: var(--success, #16a34a); }
.caja-ico-rojo,    .caja-valor-rojo    { color: var(--danger, #dc2626); }
.caja-ico-violeta, .caja-valor-violeta { color: var(--primary-600, #4c40e6); }

/* ── Dark mode ── */
body.theme-dark .caja-moneda-simbolo {
    background: rgba(129, 140, 248, 0.14);
    color: #a5b4fc;
}
body.theme-dark .caja-moneda-titulo h3 { color: #f1f5f9; }
body.theme-dark .caja-moneda-titulo small { color: #64748b; }
body.theme-dark .caja-metrica { border-left-color: rgba(255, 255, 255, 0.08); }
body.theme-dark .caja-metrica-label { color: #94a3b8; }
body.theme-dark .caja-ico-verde,   body.theme-dark .caja-valor-verde   { color: #4ade80; }
body.theme-dark .caja-ico-rojo,    body.theme-dark .caja-valor-rojo    { color: #f87171; }
body.theme-dark .caja-ico-violeta, body.theme-dark .caja-valor-violeta { color: #a5b4fc; }

/* ── Tablet: la cabecera pasa arriba para que las metricas respiren ── */
@media screen and (max-width: 900px) {
    .caja-moneda-card {
        flex-direction: column;
        align-items: stretch;
        gap: 0.9rem;
    }
    .caja-moneda-head {
        min-width: 0;
        padding-bottom: 0.85rem;
        border-bottom: 1px solid var(--border-soft, rgba(15, 23, 42, 0.08));
    }
    body.theme-dark .caja-moneda-head { border-bottom-color: rgba(255, 255, 255, 0.08); }
}

/* ── Movil: las tres metricas pasan a filas etiqueta / valor.
      En 375px no entran tres importes de siete cifras en una fila; forzarlo
      terminaba en numeros recortados, que en una pantalla de plata es lo peor
      que puede pasar. ── */
@media screen and (max-width: 640px) {
    .caja-moneda-card { padding: 1rem 1.1rem; }

    .caja-moneda-metricas {
        flex-direction: column;
        gap: 0;
    }
    .caja-metrica {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.6rem 0 0.55rem;
        border-left: none;
        border-top: 1px solid var(--border-soft, rgba(15, 23, 42, 0.07));
    }
    .caja-metrica:first-child { border-top: none; padding-top: 0; }
    body.theme-dark .caja-metrica { border-top-color: rgba(255, 255, 255, 0.07); }

    .caja-metrica-label { font-size: 0.68rem; }
    .caja-metrica-valor { font-size: 1.15rem; }
}

/* ================================================================
   DASHBOARD MOVIL — color de fila uniforme + WhatsApp compacto
   ================================================================ */

/* Todas las celdas de la fila toman el color de la MISMA fuente: la variable
   --row-bg que pone renderDashboard() en el <tr>. Antes la fila se pintaba con
   un background y la celda sticky de Hora con otro inline, y en los anchos
   donde el sticky cambia de modo los dos no coincidian: la columna Hora se veia
   de un color distinto al de Paciente y Estado. */
.dashboard-main-card tbody td {
    background: var(--row-bg, transparent);
}

/* ================================================================
   PACIENTES — filas estables y acciones compactas en tabla

   La celda Paciente debe seguir siendo una celda real. Las acciones tienen
   un ancho predecible para que WhatsApp no caiga solo a una segunda línea.
   El separador se dibuja sobre la fila y queda continuo entre columnas.
   ================================================================ */
@media screen and (min-width: 641px) {
    #patients-table td[data-label="Paciente"] {
        display: table-cell !important;
        vertical-align: middle;
        white-space: normal;
    }

    #patients-table td[data-label="Paciente"] .patient-list-avatar {
        display: inline-flex;
        vertical-align: middle;
        margin-right: 0.7rem;
    }

    #patients-table th:nth-child(1),
    #patients-table td:nth-child(1) {
        width: 28% !important;
    }

    #patients-table th:nth-child(2),
    #patients-table td:nth-child(2) {
        width: 25% !important;
    }

    #patients-table th:nth-child(3),
    #patients-table td:nth-child(3) {
        width: auto !important;
    }

    #patients-table th:nth-child(4),
    #patients-table td:nth-child(4) {
        width: 256px !important;
    }

    #patients-table td[data-label="Contacto"] span,
    #patients-table td[data-label="DNI"] {
        white-space: nowrap;
    }

    #patients-table td[data-label="Acciones"] {
        padding-left: 0.55rem !important;
        padding-right: 0.55rem !important;
    }

    #patients-table .patient-actions {
        display: flex;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 0.4rem;
    }

    #patients-table .patient-actions .btn {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        flex: 0 0 40px;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #patients-table tbody tr + tr {
        background-image: linear-gradient(
            to right,
            transparent 1rem,
            var(--gray-200, #e5e7eb) 1rem,
            var(--gray-200, #e5e7eb) calc(100% - 1rem),
            transparent calc(100% - 1rem)
        );
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100% 1px;
    }

    #patients-table tbody tr + tr td {
        border-top: 0 !important;
    }

    body.theme-dark #patients-table tbody tr + tr {
        background-image: linear-gradient(
            to right,
            transparent 1rem,
            rgba(148, 163, 184, 0.16) 1rem,
            rgba(148, 163, 184, 0.16) calc(100% - 1rem),
            transparent calc(100% - 1rem)
        );
    }
}

/* Recetas y presupuestos — acción de envío de PDF por WhatsApp. */
.btn-whatsapp-document {
    min-width: 38px;
    color: #047857 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    background: rgba(16, 185, 129, 0.09) !important;
}

.btn-whatsapp-document:hover {
    color: #fff !important;
    border-color: #10b981 !important;
    background: #10b981 !important;
}

.btn-whatsapp-document i {
    color: inherit !important;
    font-size: 1rem;
}

body.theme-dark .btn-whatsapp-document {
    color: #6ee7b7 !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
    background: rgba(16, 185, 129, 0.12) !important;
}

@media screen and (max-width: 1366px) {
    .clinical-prescriptions-table .clinical-responsive-actions,
    .clinical-budgets-table .clinical-responsive-actions {
        white-space: nowrap !important;
    }

    .clinical-prescriptions-table .clinical-responsive-actions .btn,
    .clinical-budgets-table .clinical-responsive-actions .btn {
        min-width: 38px;
        min-height: 38px;
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }
}

.dashboard-patient-cell {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.dashboard-patient-cell > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.btn.dashboard-clinical-btn {
    flex: 0 0 auto;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    justify-content: center;
    color: var(--text-muted, #64748b);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    box-shadow: none;
}

.btn.dashboard-clinical-btn:hover,
.btn.dashboard-clinical-btn:focus-visible {
    color: var(--primary, #0d9488);
    background: rgba(13, 148, 136, 0.09);
    border-color: rgba(13, 148, 136, 0.18);
}

body.theme-dark .btn.dashboard-clinical-btn {
    color: #94a3b8;
}

body.theme-dark .btn.dashboard-clinical-btn:hover,
body.theme-dark .btn.dashboard-clinical-btn:focus-visible {
    color: #5eead4;
    background: rgba(45, 212, 191, 0.1);
    border-color: rgba(45, 212, 191, 0.2);
}

/* ================================================================
   MODELOS ODONTOLÓGICOS STL
   ================================================================ */

.clinical-stl-card {
    cursor: default !important;
}

.clinical-stl-preview {
    position: relative;
    width: 100%;
    height: 180px;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    overflow: hidden;
    border: 0;
    color: #0f766e;
    background:
        radial-gradient(circle at 50% 45%, rgba(45, 212, 191, 0.2), transparent 37%),
        linear-gradient(145deg, #ecfdf8 0%, #e6f5f2 55%, #dcefeb 100%);
    cursor: pointer;
}

.clinical-stl-preview::before,
.clinical-stl-preview::after,
.clinical-stl-preview-orbit {
    content: '';
    position: absolute;
    width: 128px;
    height: 58px;
    border: 1px solid rgba(13, 148, 136, 0.24);
    border-radius: 50%;
    transform: rotate(-12deg);
}

.clinical-stl-preview::after {
    transform: rotate(48deg);
}

.clinical-stl-preview-orbit {
    transform: rotate(108deg);
}

.clinical-stl-preview i {
    position: relative;
    z-index: 1;
    font-size: 3rem;
    filter: drop-shadow(0 8px 14px rgba(13, 148, 136, 0.2));
    transition: transform 0.2s ease;
}

.clinical-stl-preview > span:last-child {
    position: relative;
    z-index: 1;
    padding: 0.18rem 0.48rem;
    border-radius: 999px;
    color: #115e59;
    background: rgba(255, 255, 255, 0.7);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.clinical-stl-preview:hover i {
    transform: scale(1.08) rotate(-3deg);
}

body.theme-dark .clinical-stl-preview {
    color: #5eead4;
    background:
        radial-gradient(circle at 50% 45%, rgba(45, 212, 191, 0.17), transparent 38%),
        linear-gradient(145deg, #0f2421 0%, #0c1d1b 100%);
}

body.theme-dark .clinical-stl-preview > span:last-child {
    color: #99f6e4;
    background: rgba(15, 118, 110, 0.25);
}

.clinical-stl-upload-hint {
    margin-top: 0.35rem;
    color: var(--gray-500);
    font-size: 0.78rem;
}

.clinical-stl-overlay {
    z-index: 90;
    padding: 1.25rem;
    background: rgba(2, 6, 23, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.clinical-stl-viewer {
    width: min(1180px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 1.15rem;
    color: #f8fafc;
    background: #091311;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.52);
}

.clinical-stl-header {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.clinical-stl-kicker {
    display: block;
    margin-bottom: 0.15rem;
    color: #5eead4;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.clinical-stl-header h3 {
    margin: 0;
    color: #f8fafc;
    font-size: 1rem;
}

.clinical-stl-header p {
    margin: 0.2rem 0 0;
    color: #94a3b8;
    font-size: 0.78rem;
}

.clinical-stl-header-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.clinical-stl-stage {
    position: relative;
    width: 100%;
    height: min(72vh, 720px);
    min-height: 430px;
    overflow: hidden;
    background: #091311;
    touch-action: none;
}

.clinical-stl-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: grab;
}

.clinical-stl-canvas:active {
    cursor: grabbing;
}

.clinical-stl-loading {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 2rem;
    color: #cbd5e1;
    text-align: center;
    background: #091311;
}

.clinical-stl-loading i {
    color: #5eead4;
    font-size: 1.6rem;
}

.clinical-stl-loading span {
    color: #94a3b8;
    font-size: 0.8rem;
}

.clinical-stl-loading.is-error i {
    color: #fbbf24;
}

.clinical-stl-help {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 0.85rem;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 999px;
    color: #94a3b8;
    background: rgba(2, 6, 23, 0.66);
    font-size: 0.7rem;
    white-space: nowrap;
    pointer-events: none;
}

@media (max-width: 640px) {
    .clinical-stl-overlay {
        padding: 0;
    }

    .clinical-stl-viewer {
        width: 100vw;
        max-height: 100dvh;
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
    }

    .clinical-stl-header {
        padding: 0.8rem;
    }

    .clinical-stl-stage {
        flex: 1;
        height: auto;
        min-height: 0;
    }

    .clinical-stl-help span:last-child {
        display: none;
    }
}

/* ================================================================
   FACTURACION RESPONSIVE — movimientos resumidos y expandibles
   ================================================================ */
.billing-movements-mobile-list {
    display: none;
}

.billing-movement-card[hidden],
.billing-movements-desktop tr[hidden] {
    display: none !important;
}

@media screen and (max-width: 1366px) {
    .billing-movements-desktop {
        display: none !important;
    }

    .billing-movements-mobile-list {
        display: grid;
        width: 100%;
        min-width: 0;
        gap: 0.7rem;
        margin-top: 1rem;
    }

    .billing-movement-card {
        min-width: 0;
        overflow: hidden;
        border: 1px solid var(--gray-200, #e5e7eb);
        border-radius: 0.9rem;
        background: #fff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    }

    .billing-movement-summary {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) auto 14px;
        align-items: center;
        gap: 0.7rem;
        min-height: 68px;
        padding: 0.75rem 0.85rem;
        cursor: pointer;
        list-style: none;
    }

    .billing-movement-summary::-webkit-details-marker {
        display: none;
    }

    .billing-movement-summary:focus-visible {
        outline: 3px solid rgba(99, 102, 241, 0.22);
        outline-offset: -3px;
    }

    .billing-movement-icon {
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        border-radius: 0.75rem;
        font-size: 0.85rem;
    }

    .billing-movement-icon.is-payment {
        color: #047857;
        background: #d1fae5;
    }

    .billing-movement-icon.is-debt {
        color: #b45309;
        background: #fef3c7;
    }

    .billing-movement-main {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }

    .billing-movement-main strong {
        overflow: hidden;
        color: var(--gray-800, #1f2937);
        font-size: 0.9rem;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .billing-movement-main small {
        color: var(--gray-500, #64748b);
        font-size: 0.72rem;
    }

    .billing-movement-amount {
        max-width: 9rem;
        overflow-wrap: anywhere;
        text-align: right;
        font-size: 0.95rem;
        font-weight: 800;
        line-height: 1.15;
    }

    .billing-movement-chevron {
        color: var(--gray-400, #94a3b8);
        font-size: 0.7rem;
        transition: transform 0.18s ease;
    }

    .billing-movement-card[open] .billing-movement-chevron {
        transform: rotate(180deg);
    }

    .billing-movement-detail {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        padding: 0.85rem;
        border-top: 1px solid var(--gray-100, #f3f4f6);
        background: var(--gray-50, #f9fafb);
    }

    .billing-movement-field {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
    }

    .billing-movement-field-wide,
    .billing-movement-actions {
        grid-column: 1 / -1;
    }

    .billing-movement-field span {
        color: var(--gray-400, #94a3b8);
        font-size: 0.64rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .billing-movement-field strong {
        overflow-wrap: anywhere;
        color: var(--gray-700, #374151);
        font-size: 0.82rem;
        font-weight: 650;
        line-height: 1.35;
    }

    .billing-movement-actions {
        display: flex;
        justify-content: flex-end;
        padding-top: 0.15rem;
    }

    .billing-movement-actions .btn {
        color: var(--danger, #dc2626);
    }

    .billing-movement-empty {
        min-height: 110px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 1rem;
        border: 1px dashed var(--gray-300, #d1d5db);
        border-radius: 0.9rem;
        color: var(--gray-400, #94a3b8);
        text-align: center;
    }

    body.theme-dark .billing-movement-card {
        border-color: rgba(148, 163, 184, 0.16);
        background: #111827;
        box-shadow: none;
    }

    body.theme-dark .billing-movement-main strong,
    body.theme-dark .billing-movement-field strong {
        color: #e2e8f0;
    }

    body.theme-dark .billing-movement-detail {
        border-top-color: rgba(148, 163, 184, 0.12);
        background: rgba(255, 255, 255, 0.025);
    }

    body.theme-dark .billing-movement-icon.is-payment {
        color: #6ee7b7;
        background: rgba(16, 185, 129, 0.14);
    }

    body.theme-dark .billing-movement-icon.is-debt {
        color: #fcd34d;
        background: rgba(245, 158, 11, 0.14);
    }

    /* En tablet se descartan antes los datos secundarios de las tablas que no
       tienen una card de detalle propia. */
    .clinical-history-card .col-hide-sm {
        display: none !important;
    }

    .settings-tables-grid > .settings-card:first-child th:nth-child(2),
    .settings-tables-grid > .settings-card:first-child td:nth-child(2),
    .settings-tables-grid > .settings-card:first-child th:nth-child(4),
    .settings-tables-grid > .settings-card:first-child td:nth-child(4),
    .settings-tables-grid > .settings-card:nth-child(2) th:nth-child(4),
    .settings-tables-grid > .settings-card:nth-child(2) td:nth-child(4),
    .settings-tables-grid > .settings-card:nth-child(2) th:nth-child(5),
    .settings-tables-grid > .settings-card:nth-child(2) td:nth-child(5) {
        display: none;
    }
}

@media screen and (max-width: 520px) {
    .billing-movement-summary {
        grid-template-columns: 36px minmax(0, 1fr) auto 12px;
        gap: 0.55rem;
        padding: 0.7rem;
    }

    .billing-movement-icon {
        width: 36px;
        height: 36px;
    }

    .billing-movement-amount {
        max-width: 6.8rem;
        font-size: 0.88rem;
    }

    .billing-movement-detail {
        grid-template-columns: 1fr;
    }

    .billing-movement-field-wide,
    .billing-movement-actions {
        grid-column: auto;
    }

    .billing-movement-actions .btn {
        width: 100%;
    }
}

/* El resumen por profesional también pasa a cards en teléfonos: son cinco
   valores contables y comprimirlos en columnas vuelve ilegibles los importes. */
@media screen and (max-width: 768px) {
    .billing-balances-container {
        overflow: visible !important;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .billing-balances-table,
    .billing-balances-table tbody {
        display: block;
        width: 100% !important;
    }

    .billing-balances-table thead {
        display: none;
    }

    .billing-balances-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem 1rem;
        width: 100%;
        margin-bottom: 0.7rem;
        padding: 0.85rem;
        border: 1px solid var(--gray-200, #e5e7eb);
        border-radius: 0.85rem;
        background: #fff;
    }

    .billing-balances-table tbody td {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
        padding: 0 !important;
        border: 0 !important;
        overflow-wrap: anywhere;
        white-space: normal !important;
    }

    .billing-balances-table tbody td:first-child {
        grid-column: 1 / -1;
        padding-bottom: 0.55rem !important;
        border-bottom: 1px solid var(--gray-100, #f3f4f6) !important;
    }

    .billing-balances-table tbody td::before {
        content: attr(data-label);
        color: var(--gray-400, #94a3b8);
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    body.theme-dark .billing-balances-table tbody tr {
        border-color: rgba(148, 163, 184, 0.16);
        background: #111827;
    }

    body.theme-dark .billing-balances-table tbody td:first-child {
        border-bottom-color: rgba(148, 163, 184, 0.12) !important;
    }
}

/* Las acciones de usuarios/profesionales no pueden desaparecer en celular.
   Se mueven al pie de cada card y conservan objetivos tactiles amplios. */
@media screen and (max-width: 640px) {
    .settings-entity-card {
        flex-wrap: wrap;
        align-items: center;
    }

    .settings-entity-actions {
        display: flex !important;
        flex: 1 0 100%;
        justify-content: flex-end;
        gap: 0.45rem;
        padding-top: 0.65rem;
        border-top: 1px solid var(--gray-100, #f3f4f6);
    }

    .settings-entity-actions .btn {
        min-width: 40px;
        min-height: 40px;
    }

    .clinical-history-card .col-hide-xs {
        display: none !important;
    }

    body.theme-dark .settings-entity-actions {
        border-top-color: rgba(148, 163, 184, 0.12);
    }
}

@media screen and (max-width: 480px) {
    .settings-entity-card .user-role-badges {
        flex: 1 0 100%;
        justify-content: flex-start !important;
        padding-left: 3.25rem;
    }
}

/* ================================================================
   PACIENTES RESPONSIVE — scroll solo vertical
   ================================================================ */

/* El scroll de esta pantalla vive en el hijo para conservar el encabezado
   sticky. Se mantiene el eje vertical y se elimina el horizontal: la tabla y
   las acciones se reparten dentro del ancho disponible. */
.table-container-patients,
.patients-scroll-inner {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.patients-scroll-inner {
    overflow-y: auto;
    overflow-x: hidden;
}

.table-container.table-container-patients #patients-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    table-layout: fixed;
}

@media screen and (min-width: 641px) {
    #patients-table th:nth-child(1),
    #patients-table td:nth-child(1) { width: 25%; }
    #patients-table th:nth-child(2),
    #patients-table td:nth-child(2) { width: 24%; }
    #patients-table th:nth-child(3),
    #patients-table td:nth-child(3) { width: 15%; }
    #patients-table th:nth-child(4),
    #patients-table td:nth-child(4) { width: 36%; }
}

#patients-table th,
#patients-table td {
    min-width: 0;
    overflow-wrap: anywhere;
}

#patients-table .patient-actions {
    display: flex;
    max-width: 100%;
    flex-wrap: wrap !important;
    justify-content: flex-start;
    gap: 0.5rem;
}

@media screen and (min-width: 641px) and (max-width: 1024px) {
    #patients-table th,
    #patients-table td {
        padding-left: 0.65rem !important;
        padding-right: 0.65rem !important;
    }

    #patients-table th:nth-child(1),
    #patients-table td:nth-child(1) { width: 27%; }
    #patients-table th:nth-child(2),
    #patients-table td:nth-child(2) { width: 24%; }
    #patients-table th:nth-child(3),
    #patients-table td:nth-child(3) { width: 14%; }
    #patients-table th:nth-child(4),
    #patients-table td:nth-child(4) { width: 35%; }

    #patients-table .patient-actions .btn {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 0 !important;
        justify-content: center;
    }
}

/* ================================================================
   DASHBOARD — fondo uniforme en Hora, Paciente y Estado

   Hora conserva la clase histórica de columna sticky, que le imponía blanco
   tanto al encabezado como a la celda. El color se define ahora una sola vez
   para todo el header y cada fila sigue tomando --row-bg sin excepciones.
   ================================================================ */
.dashboard-appointments-table thead {
    --dashboard-head-bg: rgba(248, 246, 255, 0.96);
}

.dashboard-appointments-table thead th,
.dashboard-appointments-table thead th.col-sticky-left {
    background: var(--dashboard-head-bg) !important;
}

.dashboard-appointments-table tbody td,
.dashboard-appointments-table tbody td.col-sticky-left {
    background: var(--row-bg, transparent) !important;
}

body.theme-dark .dashboard-appointments-table thead {
    --dashboard-head-bg: #111827;
}

/* ================================================================
   HORARIOS MÉDICOS — editor responsive

   La primera adaptación móvil apilaba día, Desde y Hasta en tres renglones.
   Siete días hacían un modal enorme y el pie terminaba fuera de la pantalla.
   El modal ahora tiene header/footer fijos, cuerpo con scroll propio y las dos
   horas permanecen juntas aun cuando el nombre del día pasa arriba.
   ================================================================ */
@media screen and (max-width: 768px) {
    .modal-content-schedule {
        display: flex;
        flex-direction: column;
        width: calc(100vw - 1rem) !important;
        max-width: 680px !important;
        max-height: calc(100dvh - 1rem) !important;
        margin: 0.5rem auto 0 !important;
        overflow: hidden;
    }

    .modal-content-schedule .modal-header {
        position: relative;
        flex: 0 0 auto;
        padding: 0.85rem 1rem !important;
    }

    .modal-content-schedule .modal-header h3 {
        min-width: 0;
        margin: 0;
        font-size: 1rem;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .modal-content-schedule #schedule-form {
        display: flex;
        flex: 1 1 auto;
        min-height: 0;
        flex-direction: column;
    }

    .modal-content-schedule .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none !important;
        padding: 0.75rem !important;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .modal-content-schedule .schedule-form-shell {
        gap: 0.6rem;
    }

    .modal-content-schedule .schedule-form-intro {
        font-size: 0.8rem;
        line-height: 1.35;
    }

    .modal-content-schedule .schedule-days-list {
        gap: 0.5rem;
    }

    .modal-content-schedule .schedule-day-row {
        grid-template-columns: minmax(100px, 125px) minmax(0, 1fr) !important;
        gap: 0.65rem !important;
        align-items: center;
        padding: 0.65rem 0.7rem !important;
        border-bottom: 1px solid rgba(226, 232, 240, 0.95);
    }

    .modal-content-schedule .schedule-day-row + .schedule-day-row {
        padding-top: 0.65rem !important;
    }

    .modal-content-schedule .schedule-day-check {
        min-height: 40px;
        gap: 0.55rem;
    }

    .modal-content-schedule .schedule-day-check input {
        width: 1.15rem;
        height: 1.15rem;
    }

    .modal-content-schedule .schedule-day-name {
        min-width: 0;
        font-size: 0.84rem;
        overflow-wrap: anywhere;
    }

    .modal-content-schedule .schedule-time-grid {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
        gap: 0.4rem !important;
        align-items: end;
    }

    .modal-content-schedule .schedule-time-field,
    .modal-content-schedule .stp-wrap {
        width: 100%;
        min-width: 0;
    }

    .modal-content-schedule .stp-trigger {
        width: 100%;
        min-width: 0;
        min-height: 42px;
        padding: 0.4rem 0.35rem;
        font-size: 0.95rem;
    }

    .modal-content-schedule .schedule-time-separator {
        min-height: 42px;
        padding: 0;
    }

    .modal-content-schedule .schedule-modal-footer {
        position: relative;
        flex: 0 0 auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.6rem;
        padding: 0.7rem 0.75rem calc(0.7rem + env(safe-area-inset-bottom)) !important;
    }

    .modal-content-schedule .schedule-modal-footer .btn {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding-left: 0.55rem !important;
        padding-right: 0.55rem !important;
        white-space: normal;
    }
}

@media screen and (max-width: 540px) {
    .modal-content-schedule {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .modal-content-schedule .schedule-day-row {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.35rem !important;
        padding: 0.55rem 0.65rem !important;
    }

    .modal-content-schedule .schedule-day-row + .schedule-day-row {
        padding-top: 0.55rem !important;
    }

    .modal-content-schedule .schedule-day-check {
        min-height: 32px;
    }

    .modal-content-schedule .schedule-time-caption {
        font-size: 0.62rem;
    }

    .modal-content-schedule .stp-dropdown {
        min-width: min(138px, calc(50vw - 1rem));
        max-width: calc(100vw - 1rem);
    }

    .modal-content-schedule .stp-col {
        height: min(32dvh, 160px) !important;
    }
}

@media screen and (max-width: 360px) {
    .modal-content-schedule .modal-header {
        padding: 0.7rem 0.75rem !important;
    }

    .modal-content-schedule .modal-body {
        padding: 0.55rem !important;
    }

    .modal-content-schedule .schedule-time-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.35rem !important;
    }

    .modal-content-schedule .schedule-time-separator {
        display: none;
    }

    .modal-content-schedule .schedule-modal-footer {
        gap: 0.4rem;
        padding-left: 0.55rem !important;
        padding-right: 0.55rem !important;
    }

    .modal-content-schedule .schedule-modal-footer .btn {
        font-size: 0.78rem !important;
    }
}

@media screen and (max-width: 768px) and (max-height: 600px) {
    .modal-content-schedule .schedule-form-intro {
        display: none;
    }

    .modal-content-schedule .schedule-day-row {
        padding-top: 0.45rem !important;
        padding-bottom: 0.45rem !important;
    }

    .modal-content-schedule .schedule-day-row + .schedule-day-row {
        padding-top: 0.45rem !important;
    }
}

/* ================================================================
   ARCHIVOS CLÍNICOS — filtros por tipo
   ================================================================ */
.clinical-files-filter {
    display: grid;
    grid-template-columns: repeat(3, minmax(140px, 1fr)) auto;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.clinical-files-filter-btn {
    min-width: 0;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.55rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 0.85rem;
    color: #475569;
    background: #fff;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 750;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.clinical-files-filter-btn i {
    flex: 0 0 auto;
    color: #7c3aed;
    font-size: 0.95rem;
}

.clinical-files-filter-btn span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.clinical-files-filter-btn strong {
    min-width: 1.6rem;
    margin-left: auto;
    padding: 0.14rem 0.4rem;
    border-radius: 999px;
    color: #64748b;
    background: #f1f5f9;
    font-size: 0.7rem;
    text-align: center;
}

.clinical-files-filter-btn.is-active {
    border-color: rgba(124, 58, 237, 0.42);
    color: #5b21b6;
    background: #f5f3ff;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.12);
}

.clinical-files-filter-btn.is-active strong {
    color: #fff;
    background: #7c3aed;
}

.clinical-files-latest {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    color: #64748b;
    font-size: 0.72rem;
    white-space: nowrap;
}

[data-clinical-file-kind][hidden],
[data-clinical-files-empty][hidden] {
    display: none !important;
}

body.theme-dark .clinical-files-filter-btn {
    border-color: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
    background: #111827;
}

body.theme-dark .clinical-files-filter-btn strong {
    color: #cbd5e1;
    background: #1e293b;
}

body.theme-dark .clinical-files-filter-btn.is-active {
    border-color: rgba(167, 139, 250, 0.45);
    color: #ddd6fe;
    background: rgba(124, 58, 237, 0.18);
}

body.theme-dark .clinical-files-filter-btn.is-active strong {
    color: #fff;
    background: #7c3aed;
}

@media screen and (max-width: 900px) {
    .clinical-files-filter {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .clinical-files-latest {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media screen and (max-width: 520px) {
    .clinical-images-shell {
        padding: 0.75rem !important;
    }

    .clinical-files-filter {
        gap: 0.4rem;
        margin-bottom: 0.75rem;
    }

    .clinical-files-filter-btn {
        min-height: 62px;
        flex-direction: column;
        justify-content: center;
        gap: 0.25rem;
        padding: 0.45rem 0.25rem;
        font-size: 0.68rem;
        line-height: 1.15;
        text-align: center;
    }

    .clinical-files-filter-btn strong {
        min-width: 1.4rem;
        margin-left: 0;
        padding: 0.1rem 0.32rem;
        font-size: 0.64rem;
    }
}

/* ================================================================
   FICHA CLÍNICA — tablas como tarjetas en pantallas angostas
   ================================================================ */
@media screen and (max-width: 640px) {
    .clinical-responsive-table,
    .clinical-responsive-table tbody {
        display: block;
        width: 100% !important;
    }

    .clinical-responsive-table thead {
        display: none;
    }

    .clinical-responsive-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem 1rem;
        width: 100%;
        margin-bottom: 0.65rem;
        padding: 0.85rem;
        border: 1px solid var(--gray-200, #e5e7eb);
        border-radius: 0.85rem;
        background: #fff;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    }

    .clinical-responsive-table tbody td,
    .clinical-responsive-table .col-hide-sm,
    .clinical-responsive-table .col-hide-xs {
        min-width: 0;
        width: auto;
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.18rem;
        padding: 0 !important;
        border: 0 !important;
        overflow-wrap: anywhere;
        white-space: normal !important;
        text-align: left !important;
    }

    .clinical-responsive-table tbody td::before {
        content: attr(data-label);
        color: var(--gray-400, #94a3b8);
        font-size: 0.61rem;
        font-weight: 800;
        letter-spacing: 0.065em;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .clinical-treatments-table td[data-label="Observaciones"],
    .clinical-prescriptions-table td[data-label="Diagnóstico"],
    .clinical-prescriptions-table td[data-label="Rp"],
    .clinical-budgets-table td[data-label="Título"],
    .clinical-account-table td[data-label="Concepto"],
    .clinical-responsive-table .clinical-responsive-actions {
        grid-column: 1 / -1;
    }

    .clinical-responsive-table .clinical-responsive-actions {
        flex-direction: row !important;
        align-items: center;
        justify-content: flex-end;
        gap: 0.45rem;
        padding-top: 0.55rem !important;
        border-top: 1px solid var(--gray-100, #f3f4f6) !important;
    }

    .clinical-responsive-table .clinical-responsive-actions::before {
        margin-right: auto;
    }

    .clinical-responsive-table .clinical-responsive-empty-row {
        display: block;
    }

    .clinical-responsive-table .clinical-responsive-empty-row td {
        display: block !important;
        padding: 1.25rem !important;
        text-align: center !important;
    }

    .clinical-responsive-table .clinical-responsive-empty-row td::before {
        content: none;
    }

    body.theme-dark .clinical-responsive-table tbody tr {
        border-color: rgba(148, 163, 184, 0.16);
        background: #111827;
        box-shadow: none;
    }

    body.theme-dark .clinical-responsive-table .clinical-responsive-actions {
        border-top-color: rgba(148, 163, 184, 0.12) !important;
    }
}

@media screen and (max-width: 900px) {
    .dashboard-patient-cell {
        min-width: 0;
    }

    .btn.dashboard-clinical-btn {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
    }
}

/* En movil chico el sticky se apaga, pero el color se sigue tomando de la
   variable en vez de forzarse transparente, para que no vuelva a haber dos
   fuentes de verdad. */
@media (max-width: 479px) {
    .dashboard-main-card tbody td.col-sticky-left {
        background: var(--row-bg, transparent) !important;
    }
}

/* ── WhatsApp: solo el logo cuando no hay ancho ──────────────────────────
   El boton "Enviar" con texto no entra: la tabla se pasaba del ancho de la
   pantalla y el boton quedaba cortado fuera de la vista. El logo de WhatsApp
   solo ya se entiende, y el texto queda en el title/aria-label. */
@media screen and (max-width: 900px) {
    .dashboard-wa-btn .wa-btn-texto,
    .wa-sent-badge .wa-btn-texto {
        display: none;
    }

    /* 40px y no menos: hay reglas de min-height:40px para .btn en movil y en
       (pointer: coarse) que son el area tactil minima. Achicar el boton las
       peleaba y lo dejaba ovalado -33 de ancho por 40 de alto-. Se respeta el
       tactil y se lo hace cuadrado, que es lo que lo vuelve un circulo.
       Doble clase porque .btn.btn-sm ya declara su propio padding. */
    .btn.dashboard-wa-btn {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 0;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        gap: 0;
        flex: 0 0 auto;
    }
    .btn.dashboard-wa-btn i {
        font-size: 1.05rem;
        margin: 0;
    }

    /* "Enviado" se distingue de "Enviar" por color y relleno, no por texto:
       verde macizo el que ya se mando, contorno el que falta. */
    .wa-sent-badge {
        width: 40px;
        height: 40px;
        padding: 0;
        line-height: 1;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        gap: 0;
        background: rgba(22, 163, 74, 0.12);
        color: #16a34a;
    }
    .wa-sent-badge i {
        font-size: 1.05rem;
        margin: 0;
    }
    body.theme-dark .wa-sent-badge {
        background: rgba(74, 222, 128, 0.16);
        color: #4ade80;
    }
}

/* En movil el sticky se apaga: la hora deja de reservar ancho fijo y comparte
   el espacio disponible con las otras columnas visibles. */
@media screen and (max-width: 479px) {
    /* .col-sticky-left trae nowrap para que la columna fija no se parta al
       scrollear. Sin sticky ese nowrap solo obliga a "09:30 (30m)" a ocupar una
       linea larga, y esos pixeles son los que terminaban de pasar la tabla del
       ancho de la pantalla. */
    .dashboard-main-card .col-sticky-left {
        white-space: normal;
    }

    /* Con tres columnas en 375px cada pixel de padding cuenta. */
    .dashboard-main-card th,
    .dashboard-main-card tbody td {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .dashboard-main-card th:first-child,
    .dashboard-main-card tbody td:first-child {
        padding-left: 0.65rem;
    }
}

/* ================================================================
   PACIENTES MOVIL — contacto y DNI en la misma fila
   La tarjeta tenia cuatro renglones apilados (nombre / contacto /
   DNI / acciones) y quedaba mas alta de lo necesario: contacto y
   DNI son cortos y entran holgados uno al lado del otro.
   ================================================================ */
@media screen and (max-width: 640px) {
    /* La fila pasa de bloque a grilla de dos columnas. Va con `tbody tr` para
       ganarle en especificidad al `display:block` declarado mas arriba. */
    #patients-table tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 0.9rem;
        align-items: start;
    }

    /* Las celdas traen width:100% del layout de bloque; en la grilla las
       posiciona el grid y ese 100% solo estorba. */
    #patients-table tbody td {
        width: auto;
    }

    /* Nombre y botones siguen ocupando el ancho completo. */
    #patients-table td[data-label="Paciente"],
    #patients-table td[data-label="Acciones"] {
        grid-column: 1 / -1;
    }

    /* Un telefono o documento largo corta adentro de su columna en vez de
       estirarla y descuadrar la grilla. */
    #patients-table td[data-label="Contacto"],
    #patients-table td[data-label="DNI"] {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

/* ================================================================
   ARCHIVOS CLÍNICOS — biblioteca visual
   ================================================================ */
.clinical-files-section {
    --files-border: rgba(148, 163, 184, 0.22);
    --files-muted: #64748b;
}

.clinical-files-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1rem;
    padding: 0.25rem 0.15rem;
}

.clinical-files-heading {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.clinical-files-heading-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(124, 58, 237, 0.16);
    border-radius: 0.9rem;
    color: #7c3aed;
    background: linear-gradient(145deg, rgba(124, 58, 237, 0.12), rgba(167, 139, 250, 0.05));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.clinical-files-eyebrow {
    display: block;
    margin-bottom: 0.1rem;
    color: #7c3aed;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.clinical-files-heading h3 {
    margin: 0;
    color: #111827;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.025em;
}

.clinical-files-heading p {
    margin: 0.18rem 0 0;
    color: var(--files-muted);
    font-size: 0.76rem;
}

.clinical-files-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.clinical-files-action-divider {
    width: 1px;
    height: 28px;
    margin: 0 0.15rem;
    background: var(--files-border);
}

.clinical-files-actions .btn {
    min-height: 36px;
    border-radius: 0.72rem !important;
}

.clinical-images-shell {
    padding: 1.1rem !important;
    border-color: var(--files-border) !important;
    border-radius: 1.15rem !important;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%) !important;
    box-shadow: 0 10px 35px rgba(15, 23, 42, 0.055) !important;
}

.clinical-images-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.15rem;
}

.clinical-images-summary > .clinical-files-stat {
    min-height: 78px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--files-border);
    border-radius: 0.9rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025);
}

.clinical-images-summary .clinical-files-stat-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 0.75rem;
    font-size: 0.95rem;
    letter-spacing: 0;
}

.clinical-images-summary .clinical-files-stat-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    color: inherit;
    letter-spacing: 0;
    text-transform: none;
}

.clinical-files-stat-copy small {
    color: #64748b;
    font-size: 0.64rem;
    font-weight: 750;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.clinical-images-summary .clinical-files-stat-copy strong {
    margin: 0;
    color: #0f172a;
    font-size: 1.05rem;
    line-height: 1.15;
}

.clinical-files-stat-images .clinical-files-stat-icon {
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.1);
}
.clinical-files-stat-pdf .clinical-files-stat-icon {
    color: #dc2626;
    background: rgba(239, 68, 68, 0.1);
}
.clinical-files-stat-models .clinical-files-stat-icon {
    color: #0f766e;
    background: rgba(13, 148, 136, 0.1);
}
.clinical-files-stat-latest .clinical-files-stat-icon {
    color: #0369a1;
    background: rgba(14, 165, 233, 0.1);
}

.clinical-images-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}

.clinical-image-card {
    min-width: 0;
    border-color: rgba(148, 163, 184, 0.25);
    border-radius: 0.95rem;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.clinical-image-card:hover {
    transform: translateY(-2px);
    border-color: rgba(124, 58, 237, 0.24);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.1);
}

.clinical-image-preview,
.clinical-stl-preview {
    height: 205px;
    min-height: 205px;
}

.clinical-image-preview {
    transition: transform 0.35s ease;
}

.clinical-photo-card:hover .clinical-image-preview {
    transform: scale(1.025);
}

.clinical-image-actions {
    top: 0.65rem;
    right: 0.65rem;
    gap: 0.35rem;
}

.clinical-image-action-btn {
    min-height: 34px;
    padding: 0.36rem 0.62rem;
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(15, 23, 42, 0.76);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16);
}

.clinical-image-body {
    padding: 0.8rem 0.9rem 0.9rem;
}

.clinical-image-meta {
    margin-bottom: 0.35rem;
}

.clinical-image-description {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.clinical-image-empty {
    grid-column: 1 / -1;
}

body.theme-dark .clinical-files-heading h3,
body.theme-dark .clinical-images-summary .clinical-files-stat-copy strong {
    color: #f1f5f9;
}

body.theme-dark .clinical-files-heading p,
body.theme-dark .clinical-files-stat-copy small {
    color: #94a3b8;
}

body.theme-dark .clinical-files-heading-icon {
    border-color: rgba(167, 139, 250, 0.22);
    color: #c4b5fd;
    background: rgba(124, 58, 237, 0.14);
    box-shadow: none;
}

body.theme-dark .clinical-images-shell {
    background: linear-gradient(180deg, #111827 0%, #0d1420 100%) !important;
    border-color: rgba(148, 163, 184, 0.16) !important;
}

body.theme-dark .clinical-images-summary > .clinical-files-stat,
body.theme-dark .clinical-image-card {
    border-color: rgba(148, 163, 184, 0.16);
    background: #111827;
}

@media screen and (max-width: 1280px) {
    .clinical-images-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (max-width: 900px) {
    .clinical-files-header {
        align-items: flex-start;
        flex-direction: column;
    }
    .clinical-files-actions {
        width: 100%;
        justify-content: flex-start;
    }
    .clinical-images-summary,
    .clinical-images-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 560px) {
    .clinical-files-heading p,
    .clinical-files-action-divider {
        display: none;
    }
    .clinical-files-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .clinical-files-actions .btn {
        width: 100% !important;
        justify-content: center;
    }
    .clinical-files-download {
        grid-column: 1 / -1;
    }
    .clinical-images-summary {
        gap: 0.55rem;
    }
    .clinical-images-summary > .clinical-files-stat {
        min-height: 68px;
        gap: 0.55rem;
        padding: 0.65rem;
    }
    .clinical-images-summary .clinical-files-stat-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }
    .clinical-images-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   LAYOUT ADAPTABLE — sin desplazamiento horizontal en tablas
   ================================================================ */

/* Un hijo flex toma por defecto el ancho mínimo de su contenido. Con una tabla
   ancha eso hacía crecer el main en vez de dejar que las columnas se ajustaran. */
#app-view main,
#main-content,
#main-content > * {
    min-width: 0;
    max-width: 100%;
}

.table-container {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

.table-container > .overflow-x-auto,
.table-container.overflow-x-auto,
.dashboard-main-card > .overflow-x-auto,
.finished-apts-details > .overflow-x-auto {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

.dashboard-main-card,
.finished-apts-details {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
}

.table-container table,
.dashboard-main-card table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    table-layout: fixed;
}

/* El ancho fijo vive en las celdas, no en un <colgroup>. De ese modo las
   columnas que se ocultan por breakpoint dejan de ocupar espacio y las que
   quedan visibles siempre completan el ancho de la tarjeta. */
.dashboard-appointments-table .col-sticky-left {
    width: 120px;
}

@media screen and (max-width: 1200px) {
    .table-container table,
    .dashboard-main-card table {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100%;
        table-layout: fixed;
    }

    .table-container th,
    .table-container td,
    .dashboard-main-card th,
    .dashboard-main-card td {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .dashboard-appointments-table .col-sticky-left {
        width: 92px !important;
        min-width: 0 !important;
    }

    .dashboard-main-card .col-sticky-left {
        position: static;
        width: auto;
        box-shadow: none;
        white-space: normal;
    }

    .dashboard-patient-cell {
        min-width: 0;
    }

    .dashboard-patient-cell > span {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

/* Se conserva el scroll vertical de los turnos largos, pero sin una barra que
   ocupe lugar. El contenido horizontal ya entra completo. */
.dashboard-main-card > .overflow-x-auto,
#app-sidebar,
#sidebar-nav {
    scrollbar-width: none;
}
.dashboard-main-card > .overflow-x-auto::-webkit-scrollbar,
#app-sidebar::-webkit-scrollbar,
#sidebar-nav::-webkit-scrollbar {
    display: none;
}

/* En notebooks el menú cede ancho al contenido. En tablet ya se convierte en
   panel superpuesto mediante las reglas existentes. */
@media screen and (min-width: 1025px) and (max-width: 1280px) {
    #app-view aside#app-sidebar {
        width: 14rem !important;
        min-width: 14rem !important;
    }

    #app-sidebar .app-brand {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    #app-sidebar .nav-item {
        margin-left: 0.55rem !important;
        margin-right: 0.55rem !important;
        padding-left: 0.8rem !important;
        padding-right: 0.8rem !important;
    }
}

#app-sidebar,
#sidebar-nav,
#app-sidebar .nav-item,
#app-sidebar .nav-sub-item {
    max-width: 100%;
    overflow-x: hidden;
}

#app-sidebar .nav-item,
#app-sidebar .nav-sub-item {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Si el alto es escaso, el menú reduce aire antes de necesitar desplazarse. */
@media screen and (min-width: 1025px) and (max-height: 820px) {
    #app-sidebar .app-brand {
        padding-top: 0.8rem !important;
        padding-bottom: 0.8rem !important;
    }

    #sidebar-nav {
        padding-top: 0.4rem !important;
        padding-bottom: 0.4rem !important;
    }

    #app-sidebar .nav-item {
        margin-top: 0.08rem !important;
        margin-bottom: 0.08rem !important;
        padding-top: 0.52rem !important;
        padding-bottom: 0.52rem !important;
        font-size: 0.8rem !important;
    }

    #app-sidebar .nav-sub-item {
        padding-top: 0.38rem !important;
        padding-bottom: 0.38rem !important;
    }

    #app-sidebar .sidebar-user-wrap {
        padding: 0.65rem !important;
    }
}

/* Las tablas de configuración son las más densas. En celular priorizan identidad,
   rol/estado y acción; los datos completos siguen disponibles al editar. */
@media screen and (max-width: 640px) {
    .settings-tables-grid > .settings-card:first-child th:nth-child(2),
    .settings-tables-grid > .settings-card:first-child td:nth-child(2),
    .settings-tables-grid > .settings-card:first-child th:nth-child(4),
    .settings-tables-grid > .settings-card:first-child td:nth-child(4),
    .settings-tables-grid > .settings-card:nth-child(2) th:nth-child(4),
    .settings-tables-grid > .settings-card:nth-child(2) td:nth-child(4),
    .settings-tables-grid > .settings-card:nth-child(2) th:nth-child(5),
    .settings-tables-grid > .settings-card:nth-child(2) td:nth-child(5) {
        display: none;
    }

    .table-container th,
    .table-container td,
    .dashboard-main-card th,
    .dashboard-main-card td {
        padding-left: 0.45rem !important;
        padding-right: 0.45rem !important;
    }
}

/* ================================================================
   SIDEBAR RESPONSIVE — prioridad para la navegación

   En pantallas bajas el pie anterior podía ocupar más de un tercio del alto
   (usuario + tema + timbre + instalación), dejando apenas visible el menú.
   En tablet y móvil esos controles pasan a una sola barra compacta y el nav
   es la única zona flexible/con scroll.
   ================================================================ */
@media screen and (max-width: 1024px) {
    #app-view aside#app-sidebar {
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        padding-bottom: env(safe-area-inset-bottom);
    }

    #app-sidebar .app-brand {
        flex: 0 0 auto;
        min-height: 64px;
        padding: 0.7rem 0.85rem !important;
        align-items: center !important;
        gap: 0.65rem !important;
    }

    #app-sidebar .app-brand-mark {
        align-self: center !important;
    }

    #sidebar-nav {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        padding: 0.4rem 0 0.6rem !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    #app-sidebar .nav-item {
        min-height: 42px;
        margin: 0.1rem 0.65rem !important;
        padding: 0.62rem 0.78rem !important;
        border-radius: 0.75rem !important;
        font-size: 0.84rem !important;
    }

    #app-sidebar .nav-sub-item {
        min-height: 36px;
        margin: 0.05rem 0.65rem 0.05rem 1.65rem !important;
        padding: 0.45rem 0.7rem !important;
    }

    #app-sidebar .pa-impersonate-banner {
        flex: 0 0 auto;
        margin: 0.4rem 0.65rem 0.25rem;
        padding: 0.35rem 0.5rem;
    }

    #app-sidebar .sidebar-user-wrap {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.5rem !important;
    }

    #app-sidebar .user-profile {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 46px;
        padding: 0.35rem 0.45rem !important;
        gap: 0.45rem !important;
        border-radius: 0.8rem !important;
    }

    #app-sidebar .user-profile #user-initials {
        width: 2.15rem !important;
        height: 2.15rem !important;
        min-width: 2.15rem;
        font-size: 0.82rem !important;
        border-radius: 0.7rem !important;
    }

    #app-sidebar .user-profile #user-name {
        margin: 0 !important;
        font-size: 0.82rem !important;
        line-height: 1.15 !important;
    }

    #app-sidebar .user-profile #user-role-display {
        display: none;
    }

    #app-sidebar .sidebar-logout-btn,
    #app-sidebar .theme-toggle-btn,
    #app-sidebar .sidebar-install-btn {
        width: 2.35rem !important;
        height: 2.35rem !important;
        min-width: 2.35rem;
        min-height: 2.35rem;
        border-radius: 0.72rem !important;
    }

    #app-sidebar .sidebar-theme-control,
    #app-sidebar .sidebar-install-control {
        flex: 0 0 auto;
        width: auto;
        height: auto;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #app-sidebar .sidebar-theme-label,
    #app-sidebar .sidebar-install-label {
        display: none;
    }
}

/* Celulares en horizontal y equipos con muy poco alto: se conserva una franja
   útil de navegación aun con varios controles personales habilitados. */
@media screen and (max-width: 1024px) and (max-height: 600px) {
    #app-sidebar .app-brand {
        min-height: 52px;
        padding: 0.42rem 0.65rem !important;
    }

    #app-sidebar .app-brand-mark {
        width: 2.15rem !important;
        height: 2.15rem !important;
        min-width: 2.15rem !important;
        min-height: 2.15rem !important;
    }

    #app-sidebar .app-brand-subtitle {
        display: none;
    }

    #sidebar-nav {
        padding-top: 0.25rem !important;
        padding-bottom: 0.35rem !important;
    }

    #app-sidebar .nav-item {
        min-height: 36px;
        padding-top: 0.45rem !important;
        padding-bottom: 0.45rem !important;
    }

    #app-sidebar .nav-sub-item {
        min-height: 32px;
        padding-top: 0.32rem !important;
        padding-bottom: 0.32rem !important;
    }

    #app-sidebar .sidebar-user-wrap {
        padding: 0.35rem !important;
    }

    #app-sidebar .user-profile {
        min-height: 40px;
        padding-top: 0.2rem !important;
        padding-bottom: 0.2rem !important;
    }

    #app-sidebar .sidebar-logout-btn,
    #app-sidebar .theme-toggle-btn,
    #app-sidebar .sidebar-install-btn {
        width: 2.15rem !important;
        height: 2.15rem !important;
        min-width: 2.15rem;
        min-height: 2.15rem;
    }
}

/* ================================================================
   PACIENTES — separadores continuos en tabla

   La utilidad .flex aplicada al primer <td> lo sacaba del layout de tabla:
   el borde de la fila terminaba al final del nombre y reaparecía recién en
   Contacto. Desde tablet en adelante la celda vuelve a ser table-cell y solo
   el avatar se comporta como elemento flex en línea. En móvil siguen vigentes
   las tarjetas definidas arriba.
   ================================================================ */
@media screen and (min-width: 641px) {
    #patients-table td[data-label="Paciente"] {
        display: table-cell !important;
        vertical-align: middle;
    }

    #patients-table td[data-label="Paciente"] .patient-list-avatar {
        display: inline-flex;
        vertical-align: middle;
        margin-right: 0.75rem;
    }
}

/* Ajuste final por ancho útil: en 1280px el sidebar deja menos lugar que el
   breakpoint del viewport sugiere. Cinco acciones quedan en una sola línea y
   cada fila conserva un separador continuo de extremo a extremo. */
@media screen and (min-width: 641px) {
    #patients-table th:nth-child(1),
    #patients-table td:nth-child(1) {
        width: 28% !important;
    }

    #patients-table th:nth-child(2),
    #patients-table td:nth-child(2) {
        width: 25% !important;
    }

    #patients-table th:nth-child(3),
    #patients-table td:nth-child(3) {
        width: auto !important;
    }

    #patients-table th:nth-child(4),
    #patients-table td:nth-child(4) {
        width: 256px !important;
    }

    #patients-table td[data-label="Contacto"] span,
    #patients-table td[data-label="DNI"] {
        white-space: nowrap;
    }

    #patients-table td[data-label="Acciones"] {
        padding-left: 0.55rem !important;
        padding-right: 0.55rem !important;
    }

    #patients-table .patient-actions {
        display: flex;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 0.4rem;
    }

    #patients-table .patient-actions .btn {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        flex: 0 0 40px;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #patients-table tbody tr + tr {
        background-image: linear-gradient(
            to right,
            transparent 1rem,
            var(--gray-200, #e5e7eb) 1rem,
            var(--gray-200, #e5e7eb) calc(100% - 1rem),
            transparent calc(100% - 1rem)
        );
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100% 1px;
    }

    #patients-table tbody tr + tr td {
        border-top: 0 !important;
    }

    body.theme-dark #patients-table tbody tr + tr {
        background-image: linear-gradient(
            to right,
            transparent 1rem,
            rgba(148, 163, 184, 0.16) 1rem,
            rgba(148, 163, 184, 0.16) calc(100% - 1rem),
            transparent calc(100% - 1rem)
        );
    }
}