/* --- Base CSS & Variables --- */
:root {
    /* Primary Color Palette — Ámbar Dorado */
    --primary-50: #fffbeb;
    --primary-100: #fef3c7;
    --primary-200: #fde68a;
    --primary-300: #fcd34d;
    --primary-400: #fbbf24;
    --primary-500: #f59e0b;
    --primary-600: #d97706;
    --primary-700: #b45309;
    
    /* Grayscale */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    /* Semantic */
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --info: #3b82f6;
    --purple: #8b5cf6;

    /* Shadows & Transitions */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    overflow-x: hidden;
}

body {
    font-family: 'Instrument Sans', sans-serif;
    background-color: var(--gray-50);
    color: var(--gray-800);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* --- Layout Utilities --- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.w-full { width: 100%; }
.h-screen { height: 100vh; }
.flex-1 { flex: 1; }
.hidden { display: none !important; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Spacing */
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mt-4 { margin-top: 1rem; }
.mr-2 { margin-right: 0.5rem; }

/* Text & Colors */
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-center { text-align: center; }
.text-gray-500 { color: var(--gray-500); }
.text-gray-800 { color: var(--gray-800); }
.text-primary-600 { color: var(--primary-600); }
.text-danger { color: var(--danger); }
.bg-white { background-color: #ffffff; }

/* Shared Component Styles */
.card {
    background: #fff;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    transition: box-shadow var(--transition-base), transform var(--transition-fast);
}

.settings-area {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.settings-top-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

.settings-tables-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.settings-card {
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.settings-card.full-width {
    grid-column: span 2;
}

.settings-card header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1rem;
}

.settings-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

.settings-card .subtext {
    font-size: 0.85rem;
    color: var(--gray-500);
    margin-top: 0.15rem;
}

.settings-nav-card {
    padding: 1.25rem;
}

.settings-nav-header {
    display: flex;
    justify-content: flex-start;
    align-items: end;
    gap: 1rem;
    margin-bottom: 1rem;
}

.settings-subnav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
}

.settings-subnav-item {
    border: 1px solid var(--gray-200);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 1rem;
    padding: 1rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    color: var(--gray-700);
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.settings-subnav-item i {
    font-size: 1rem;
    color: var(--primary-600);
}

.settings-subnav-item span {
    font-weight: 700;
    color: var(--gray-900);
}

.settings-subnav-item small {
    font-size: 0.82rem;
    color: var(--gray-500);
}

.settings-subnav-item:hover {
    transform: translateY(-1px);
    border-color: var(--primary-300);
    box-shadow: var(--shadow-sm);
}

.settings-subnav-item.active {
    border-color: var(--primary-500);
    background: linear-gradient(180deg, #eef2ff 0%, #ffffff 100%);
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.12);
}

.settings-subpage-content {
    min-height: 280px;
}

.settings-panel-card {
    padding: 1.25rem;
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.68rem;
}

.checkbox-group input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--primary-600);
}

.cal-legend {
    border: 1px solid var(--gray-200);
    border-radius: 0.8rem;
    background: #ffffff;
    padding: 0.75rem;
}

.cal-legend-title {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}

.badge-info { background: #f0f9ff; color: #0c4a6e; }
.badge-warning { background: #fef9c3; color: #854d0e; }
.badge-success { background: #dcfce7; color: #166534; }
.badge-primary { background: #e0e7ff; color: #3730a3; }
.badge-gray { background: #f3f4f6; color: #4b5563; }

.table-modern {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.table-modern th,
.table-modern td {
    border-bottom: 1px solid var(--gray-200);
    padding: 0.62rem 0.75rem;
    text-align: left;
}

.table-modern th {
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
}

.table-modern tbody tr:hover {
    background: #f8fafc;
}

.table-compact td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-badge {
    margin-top: 0.25rem;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.settings-form-row {
    display: grid;
    gap: 0.75rem;
}

.settings-form-row.columns-2 {
    grid-template-columns: 1fr 1fr;
}

.settings-form-row.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.clinical-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.clinical-info-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    background: #f9fafb;
    padding: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid var(--gray-200);
}

.clinical-info-item {
    padding: 0.75rem;
    border-radius: 0.75rem;
    background: #f9fafb;
    border: 1px solid var(--gray-200);
}

.clinical-info-item.col-span-full {
    grid-column: 1 / -1;
}

.clinical-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

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

.clinical-info-grid > .clinical-edit-grid,
.clinical-info-grid > .clinical-edit-actions {
    grid-column: 1 / -1;
}

.clinical-static-value {
    margin-top: 0.55rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
}

.clinical-readonly {
    background: #f3f4f6;
    color: var(--gray-500);
    cursor: not-allowed;
}

.clinical-info-item-compact {
    padding: 0.55rem 0.65rem;
    border-radius: 0.85rem;
}

.clinical-info-item-compact strong {
    display: block;
    margin-bottom: 0.28rem;
    font-size: 0.62rem;
    letter-spacing: 0.07em;
}

.clinical-info-item-compact .form-input,
.clinical-info-item-compact input {
    min-height: 40px;
    padding: 0.55rem 0.7rem;
    font-size: 0.9rem;
}

.clinical-info-item-compact .clinical-static-value {
    margin-top: 0.15rem;
    min-height: 40px;
    display: flex;
    align-items: center;
    font-size: 0.92rem;
    font-weight: 700;
}

.clinical-info-item-wide {
    grid-column: span 2;
    justify-self: start;
    width: 100%;
    max-width: 540px;
}

.clinical-edit-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 0.55rem;
    margin-bottom: 0.55rem;
    padding-top: 0.1rem;
}

.clinical-edit-actions .btn {
    min-width: 220px;
}

.odontogram-wrapper {
    max-width: 100%;
    zoom: 0.82;
    padding: 1.15rem 1.1rem 1.35rem;
    margin-bottom: 1.8rem;
    background: #fff;
    border-radius: 1rem;
    border: 1px solid #cbd5e1;
}

.odontogram-wrapper .flex {
    gap: 0.38rem;
}

.tooth-box {
    width: 52px;
    height: 82px;
    min-width: 52px;
    cursor: pointer;
    justify-content: flex-start;
    padding-top: 0.2rem;
    gap: 2px;
}

.tooth-ind-slot {
    width: 100%;
    height: 13px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 2px;
}

.tooth-box svg {
    overflow: visible;
}

.tooth-box:hover {
    transform: translateY(-1px) scale(1.06);
    transition: transform 100ms ease;
}

.tooth-face {
    pointer-events: all;
    transition: opacity 0.1s;
}
.tooth-face:hover { opacity: 0.78; }

.tooth-box > span {
    display: block;
    width: 100%;
    margin-bottom: 0.1rem;
    line-height: 1;
    letter-spacing: 0.02em;
}

.tooth-svg-box {
    width: 48px;
    height: 48px;
}

.odontogram-wrapper .tooth-box > .tooth-svg-box {
    min-height: 46px;
    min-width: 46px;
}

.badge-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
}

#btn-add-treatment {
    padding-inline: 0.95rem;
    margin-left: auto;
    margin-top: 0.35rem;
    margin-bottom: 0.45rem;
}

/* Notebooks medianas (1280px) */
@media screen and (max-width: 1280px) {
    .odontogram-wrapper {
        zoom: 0.7;
    }
}

/* Tablets landscape y notebooks chicas (1024px) */
@media screen and (max-width: 1024px) {
    .odontogram-wrapper {
        zoom: 0.58;
    }
    .tooth-box {
        width: 44px;
        height: 72px;
        min-width: 44px;
        padding-top: 0.22rem;
    }
    .tooth-svg-box {
        width: 40px;
        height: 40px;
    }
}

/* Tablets portrait (768px) */
@media screen and (max-width: 768px) {
    .odontogram-wrapper {
        zoom: 0.46;
    }
    .tooth-box {
        width: 48px;
        height: 74px;
        min-width: 48px;
    }
    .tooth-svg-box {
        width: 44px;
        height: 44px;
    }
}

.clinical-history-card {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    border: 1px solid #e2e8f0;
}

.odontogram-header,
.treatments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.odontogram-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.clinical-section-title {
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.6rem;
}

.badge-state {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.42rem 0.72rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}

.badge-sano { background: #e5e7eb; color: #374151; border-color: #cbd5e1; }
.badge-caries { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.badge-restauracion { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }
.badge-ausente { background: #e2e8f0; color: #334155; border: 1px solid #64748b; }

.appointment-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

/* ── Banner impersonación de plataforma ── */
.pa-impersonate-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin: 8px 12px 4px;
    padding: 7px 10px;
    background: linear-gradient(135deg, #1e1b4b, #312e81);
    border: 1px solid #4338ca;
    border-radius: 8px;
    font-size: 11px;
    color: #a5b4fc;
}
.pa-impersonate-banner button {
    background: #4338ca;
    border: none;
    border-radius: 5px;
    padding: 4px 8px;
    font-size: 10px;
    color: #e0e7ff;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}
.pa-impersonate-banner button:hover { background: #3730a3; }

.modal-content-appointment {
    max-width: 560px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 4rem);
}

.modal-content-appointment form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.modal-content-appointment .modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 1rem;
}

.appointment-modal-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--border-soft) !important;
}

.app-loading-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 120;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

.app-loading-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.app-loading-active {
    overflow: hidden;
}

.app-loading-card {
    min-width: min(92vw, 340px);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(203, 213, 225, 0.9);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
}

.app-loading-spinner {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 3px solid rgba(99, 102, 241, 0.16);
    border-top-color: var(--primary-600);
    animation: app-loading-spin 0.8s linear infinite;
    flex-shrink: 0;
}

.app-loading-eyebrow {
    margin: 0 0 0.2rem;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.app-loading-message {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    color: #0f172a;
}

@keyframes app-loading-spin {
    to {
        transform: rotate(360deg);
    }
}


@media screen and (min-width: 768px) {
    .clinical-info-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .odontogram-wrapper {
        transform: scale(1);
    }
}

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

@media screen and (max-width: 820px) {
    .clinical-edit-grid-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .clinical-info-item-wide {
        grid-column: 1 / -1;
    }
}

@media screen and (max-width: 560px) {
    .clinical-edit-grid-compact {
        grid-template-columns: 1fr;
    }

    .clinical-info-item-wide {
        grid-column: 1 / -1;
    }
}

.btn-primary {
    border-radius: 0.55rem;
    padding: 0.67rem 1.15rem;
    font-size: 0.89rem;
}

@media screen and (max-width: 1200px) {
    .settings-top-grid,
    .settings-tables-grid {
        grid-template-columns: 1fr;
    }

    .settings-card.full-width {
        grid-column: inherit;
    }
}

@media screen and (max-width: 1024px) {
    #app-view {
        position: relative;
    }

    #app-view aside {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100vh;
        transform: translateX(-100%);
        transition: transform var(--transition-base);
        box-shadow: var(--shadow-xl);
        z-index: 40;
    }

    #app-view.sidebar-open aside {
        transform: translateX(0) !important;
    }

    #app-view.sidebar-open .sidebar-backdrop {
        opacity: 1;
        visibility: visible;
    }

    .sidebar-toggle-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .app-header {
        position: sticky;
        top: 0;
    }

    #main-content {
        padding: 1.25rem;
    }

    .metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .table-container,
    .card,
    .settings-card,
    .clinical-history-card {
        border-radius: 0.9rem;
    }

    .cal-layout {
        flex-direction: column;
    }

    .cal-legend {
        width: 100%;
        min-width: 0;
        order: -1;
    }

    .cal-month-board {
        min-width: 840px;
    }
}

@media screen and (max-width: 768px) {
    .login-container {
        width: 100%;
        max-width: 460px;
        padding: 0.4rem 0 1rem;
    }

    .login-card {
        max-width: 100%;
        padding: 1.35rem 1.2rem;
        border-radius: 1.2rem;
    }

    #main-content {
        padding: 1rem;
    }

    .app-header {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .metrics-grid {
        grid-template-columns: 1fr;
    }

    .table-container {
        overflow-x: auto;
    }

    table {
        min-width: 720px;
    }

    .settings-subnav {
        grid-template-columns: 1fr;
    }

    .cal-toolbar {
        padding: 0.85rem !important;
    }

    .cal-toolbar .flex {
        flex-wrap: wrap;
    }

    .modal-content,
    .modal-content-treatment,
    .modal-content-patient {
        width: calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
        max-height: calc(100vh - 0.75rem);
        margin: 0.5rem auto 0;
        border-radius: 1.1rem 1.1rem 0 0;
        transform: translateY(16px);
    }

    .modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .modal-overlay.active .modal-content {
        transform: translateY(0);
    }

    .modal-header,
    .modal-footer {
        position: sticky;
        z-index: 2;
    }

    .modal-header {
        top: 0;
        background: #fff;
    }

    .modal-footer {
        bottom: 0;
        background: rgba(249, 250, 251, 0.96);
        backdrop-filter: blur(10px);
    }

    .modal-body {
        max-height: calc(100vh - 13rem);
        overflow-y: auto;
        padding: 1rem;
    }

    .clinical-history-card {
        max-width: 100%;
        border-radius: 1rem;
    }

    .clinical-history-card .p-6 {
        padding: 1rem;
    }

    .clinical-info-grid {
        gap: 0.65rem;
    }

    .settings-nav-card,
    .settings-panel-card {
        padding: 1rem;
    }

    .settings-subpage-content {
        min-height: 0;
    }

    #login-view {
        height: 100dvh;
        min-height: 100dvh;
        align-items: center;
        justify-content: center;
        padding: max(1rem, env(safe-area-inset-top)) 0.85rem max(1rem, env(safe-area-inset-bottom));
        overflow-y: hidden;
    }

    .login-decoration {
        display: none;
    }

    .login-subtitle {
        margin-bottom: 1.1rem;
    }

    .login-card .btn-primary {
        min-height: 52px;
        font-size: 0.98rem;
        border-radius: 0.85rem;
    }
}

@media screen and (max-width: 540px) {
    #login-view {
        padding: max(0.75rem, env(safe-area-inset-top)) 0.7rem max(0.85rem, env(safe-area-inset-bottom));
    }

    .login-container {
        max-width: 100%;
        padding: 0;
    }

    .login-card {
        padding: 1rem 0.95rem;
        border-radius: 1rem;
    }

    .logo-container {
        gap: 0.55rem;
    }

    .logo-container h2 {
        font-size: 1.25rem;
    }

    .logo-icon {
        font-size: 1.45rem;
    }

    .login-card .btn-primary {
        min-height: 54px;
        font-size: 0.95rem;
    }

    .input-group {
        margin-bottom: 0.9rem;
    }

    .input-group input,
    .input-group select,
    .input-group textarea,
    .form-input {
        min-height: 46px;
    }

    .settings-card {
        padding: 0.85rem;
    }

    .odontogram-header {
        align-items: stretch;
    }
    .treatments-header {
        align-items: center;
    }

    .odontogram-legend {
        justify-content: flex-start;
        gap: 0.5rem;
    }

    #btn-add-treatment {
        margin-left: 0;
        align-self: flex-start;
    }

    .treatment-form-row-3,
    .treatment-form-row-2 {
        grid-template-columns: 1fr;
    }

    .modal-content-patient #patient-form .modal-body > .patient-form-row {
        grid-template-columns: 1fr;
    }

    .table-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    #app-view aside {
        width: min(88vw, 320px);
        min-width: min(88vw, 320px);
    }

    .app-brand {
        padding: 1rem;
        justify-content: flex-start;
        gap: 0;
    }

    .app-brand-copy {
        display: none;
    }

    .app-brand-mark {
        width: 2.55rem !important;
        height: 2.55rem !important;
        min-width: 2.55rem;
        min-height: 2.55rem;
    }

    .nav-item {
        padding: 0.8rem 1rem;
    }

    .sidebar-user-wrap {
        padding: 1rem;
    }

    .dashboard-date-filter-wrap {
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
    }

    .dashboard-date-filter {
        width: 100%;
        min-width: 0;
    }

    .clinical-edit-grid {
        grid-template-columns: 1fr;
    }

    .settings-nav-header {
        flex-direction: column;
        align-items: stretch;
    }

    .settings-form-row.columns-2,
    .settings-form-row.columns-3 {
        grid-template-columns: 1fr;
    }
    /* Solo botones de acción de formulario/modal — no los inline de tabla */
    .modal-footer .btn,
    .settings-panel-card > form .btn,
    .settings-card > form .btn,
    #new-user-form .btn,
    #new-prof-form .btn {
        width: 100%;
    }
}
.settings-box h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    border-bottom: 1px solid var(--gray-100);
    padding-bottom: 0.65rem;
    margin-bottom: 0.85rem;
}

.settings-box .sublabel {
    font-size: 0.8rem;
    color: var(--gray-500);
    margin-bottom: 0.6rem;
}

.settings-list {
    max-height: 240px;
    overflow-y: auto;
    padding-right: 0.2rem;
    border-radius: 0.6rem;
    border: 1px solid var(--gray-200);
    background: #fafafa;
}

.settings-list-static {
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

.settings-list div {
    padding: 0.35rem 0.5rem;
}

.settings-list label {
    font-size: 0.88rem;
    color: var(--gray-700);
}

.settings-subsection {
    background: #f9fafb;
    padding: 0.85rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.85rem;
    margin-bottom: 0.85rem;
}

.settings-subsection h4,
.settings-subsection h5 {
    margin-bottom: 0.4rem;
    color: #1f2937;
}

.settings-subsection p {
    margin-bottom: 0.7rem;
    color: var(--gray-500);
    font-size: 0.85rem;
}

.settings-box, .settings-card {
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: 1rem;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.settings-divider {
    border-top: 1px dashed var(--gray-200);
    margin: 1rem 0;
}

.settings-wide {
    grid-column: span 2;
}
.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    border: none;
    transition: all var(--transition-base);
}

.settings-card .btn,
.settings-subsection .btn {
    width: 100%;
    max-width: 100%;
    margin-top: 0.75rem;
}
.btn:active {
    transform: scale(0.98);
}
.btn-primary {
    background: var(--primary-600);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.2);
}
.btn-primary:hover {
    background: var(--primary-700);
    box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.3);
}

.btn-secondary {
    background: var(--primary-50);
    color: var(--primary-700);
}
.btn-secondary:hover {
    background: var(--primary-100);
}

.btn-ghost {
    background: transparent;
    color: var(--gray-600);
}
.btn-ghost:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

/* Forms */
.input-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.25rem;
}
.input-group label {
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
}
.input-group input, .input-group select, .input-group textarea, .form-input {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--gray-300);
    background: #fff;
    font-family: inherit;
    font-size: 0.875rem;
    transition: all var(--transition-fast);
    color: var(--gray-800);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
.input-group textarea, .form-input {
    width: 100%;
}
.input-group textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
}
.input-group input::placeholder, .input-group textarea::placeholder, .form-input::placeholder {
    color: var(--gray-400);
}
.input-group input:focus, .input-group select:focus, .input-group textarea:focus, .form-input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}
.form-feedback {
    display: none;
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(239, 68, 68, 0.18);
    background: linear-gradient(180deg, rgba(254, 242, 242, 0.98) 0%, rgba(255, 247, 247, 0.98) 100%);
    color: #b91c1c;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.45;
}
.form-feedback.is-visible {
    display: block;
}
.input-invalid {
    border-color: rgba(239, 68, 68, 0.65) !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1) !important;
    background: rgba(255, 250, 250, 0.98) !important;
}
.field-error-message {
    margin-top: 0.45rem;
    color: #dc2626;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
}
#search-patient {
    margin-bottom: 1rem;
    border-radius: 0.85rem;
    border-color: var(--gray-200);
    background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
    box-shadow: var(--shadow-sm);
}
#search-patient:focus {
    border-color: var(--primary-400);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}
#apt-patient {
    margin-bottom: 0.65rem;
    border-radius: 0.85rem;
    border-color: var(--gray-200);
    background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
}
#apt-patient:focus {
    border-color: var(--primary-400);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}
#p-general-notes {
    border-radius: 0.85rem;
    background: rgba(255, 251, 235, 0.75);
    line-height: 1.55;
    min-height: 130px;
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.checkbox-group input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--primary-600);
}
.checkbox-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    cursor: pointer;
}

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 1rem;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}
.modal-content {
    background: #fff;
    border-radius: 1rem;
    width: 100%;
    max-width: 500px;
    box-shadow: var(--shadow-xl);
    transform: scale(0.95) translateY(10px);
    transition: transform var(--transition-base);
    overflow: hidden;
    margin: auto;
}
.modal-overlay.active .modal-content {
    transform: scale(1) translateY(0);
}
.modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-header > .btn-ghost {
    display: none;
}
.modal-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
}
.modal-body {
    padding: 1.5rem;
}
.modal-content-treatment {
    max-width: 720px;
}
.modal-content-patient {
    max-width: 760px;
    width: min(760px, calc(100vw - 2rem));
}
/* ── Modal detalles de turno ── */
.apt-view-info-grid {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 1.25rem;
}
.apt-view-row {
    display: flex;
    gap: 0.5rem;
    font-size: 0.88rem;
    line-height: 1.4;
}
.apt-view-row strong {
    color: var(--gray-500);
    font-weight: 600;
    min-width: 90px;
    flex-shrink: 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.apt-view-row span {
    color: var(--gray-900);
    font-weight: 500;
}
.apt-view-row-full {
    flex-direction: column;
    gap: 0.2rem;
}

/* Selector de estado inline en el modal */
.apt-view-status-row {
    border-top: 1px solid var(--gray-100);
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.apt-view-status-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-500);
}
.apt-view-status-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.apt-view-status-btn {
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: opacity 0.15s, transform 0.12s;
    opacity: 0.65;
}
.apt-view-status-btn:hover:not(:disabled) {
    opacity: 1;
    transform: translateY(-1px);
}
.apt-view-status-btn.is-active {
    opacity: 1;
    border-color: currentColor;
    cursor: default;
}
.apt-view-status-btn:disabled {
    cursor: default;
}

body.theme-dark .apt-view-row strong { color: #94a3b8; }
body.theme-dark .apt-view-row span   { color: #e2e8f0; }
body.theme-dark .apt-view-status-row { border-top-color: rgba(255,255,255,0.08); }

.modal-content-schedule {
    max-width: 720px;
    width: min(720px, calc(100vw - 2rem));
}
.modal-content-billing {
    max-width: 540px;
    width: min(540px, calc(100vw - 2rem));
}
.modal-content-billing .modal-body {
    padding: 1.2rem 1.35rem;
}
.modal-content-billing .input-group + .input-group {
    margin-top: 0.15rem;
}
.modal-content-billing .modal-footer {
    background: var(--gray-50);
}
.modal-content-patient #patient-form .modal-body > .patient-form-row {
    display: grid;
    gap: 1rem;
}
.modal-content-patient #patient-form .modal-body > .patient-form-row-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.modal-content-patient #patient-form .modal-body > .patient-form-row-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.treatment-form-row {
    display: grid;
    gap: 1rem;
}
.treatment-form-row-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.treatment-form-row-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.modal-footer {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    background: var(--gray-50);
}

.schedule-form-shell {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.schedule-form-intro {
    margin: 0;
    color: var(--gray-600);
    font-size: 0.88rem;
    line-height: 1.45;
}

.schedule-days-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.schedule-day-row {
    display: grid;
    grid-template-columns: minmax(132px, 160px) minmax(0, 1fr);
    gap: 0.85rem;
    align-items: center;
    padding: 0.78rem 0.9rem;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,250,252,0.92) 100%);
}

.schedule-day-check {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.schedule-day-check input {
    flex-shrink: 0;
}

.schedule-day-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--gray-800);
}

.schedule-time-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: end;
}

.schedule-time-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.schedule-time-caption {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-500);
    padding-left: 0.1rem;
}

.schedule-time-separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.6rem;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--gray-400);
    padding-bottom: 0.05rem;
}

.schedule-time-input {
    min-height: 2.65rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.02em;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

/* ── Custom schedule time picker ── */
.stp-wrap {
    position: relative;
    display: inline-flex;
}

.stp-trigger {
    min-width: 4.8rem;
    min-height: 2.65rem;
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 0.55rem;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    text-align: center;
    padding: 0.45rem 0.65rem;
    transition: background 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 8px rgba(99,102,241,0.25);
}

.stp-trigger:hover {
    background: #4f46e5;
    box-shadow: 0 4px 14px rgba(99,102,241,0.35);
}

.stp-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 0.9rem;
    padding: 0.65rem 0.65rem 0.55rem;
    box-shadow: 0 16px 40px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 120px;
}

.stp-dropdown[hidden] {
    display: none !important;
}

@media (max-width: 640px) {
    .stp-wrap {
        width: 100%;
    }
    .stp-trigger {
        width: 100%;
    }
    .stp-dropdown {
        left: 0;
        transform: none;
        right: auto;
        min-width: 130px;
    }
}

@media (max-width: 400px) {
    .stp-item {
        height: 38px;
        font-size: 1rem;
    }
    .stp-col {
        height: 190px;
    }
}

.stp-cols {
    display: flex;
    align-items: flex-start;
    gap: 0.2rem;
}

.stp-col-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
}

.stp-col-label {
    text-align: center;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #475569;
    text-transform: uppercase;
}

.stp-col {
    height: 168px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
}

.stp-col::-webkit-scrollbar { display: none; }

.stp-item {
    scroll-snap-align: start;
    flex-shrink: 0;
    height: 34px;
    background: transparent;
    border: none;
    border-radius: 0.45rem;
    color: #64748b;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    padding: 0;
    transition: background 0.1s, color 0.1s;
}

.stp-item:hover:not(.is-sel) {
    background: #1e293b;
    color: #cbd5e1;
}

.stp-item.is-sel {
    background: #6366f1;
    color: #fff;
    font-weight: 700;
    border-radius: 0.45rem;
}

.stp-sep {
    font-size: 1.1rem;
    font-weight: 700;
    color: #334155;
    align-self: center;
    padding: 0 0.1rem;
    margin-top: 1.4rem;
}

.stp-confirm {
    width: 100%;
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    padding: 0.45rem 0;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: background 0.15s;
}

.stp-confirm:hover { background: #4f46e5; }

body.theme-dark .stp-trigger {
    box-shadow: 0 2px 10px rgba(99,102,241,0.3);
}

.schedule-modal-footer {
    background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(248,250,252,0.95) 100%);
}

/* Login View Adjustments */
body:has(#login-view.active) {
    overflow: hidden;
}

#login-view {
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-50) 0%, #fff 100%);
    position: relative;
    padding: 1.5rem;
    overflow-x: hidden;
    overflow-y: hidden;
}
.login-container {
    display: flex;
    justify-content: center;
    position: relative;
    width: min(100%, 440px);
    margin: 0 auto;
    isolation: isolate;
}
.login-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 2rem;
    border-radius: 1.5rem;
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 400px;
    overflow: hidden;
    position: relative;
    z-index: 2;
}
.login-card form {
    display: flex;
    flex-direction: column;
}
.login-card .btn-primary {
    min-height: 48px;
    width: 100%;
    margin-top: 0.45rem;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.logo-icon {
    font-size: 1.75rem;
    color: var(--primary-600);
}
.logo-container h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
}
.app-brand {
    background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
}
.app-brand-mark {
    box-shadow: 0 10px 18px rgba(79, 70, 229, 0.18);
}
.app-brand-subtitle {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: 0.15rem;
}
.login-subtitle {
    text-align: center;
    color: var(--gray-500);
    margin-bottom: 2rem;
}

/* ── Login: botón-link "¿Olvidaste tu contraseña?" ──────────────────────────── */
.login-link-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--primary-600, #7c3aed);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s;
}
.login-link-btn:hover { color: var(--primary-700, #6d28d9); }

/* ── Toggle de contraseña dentro del login ───────────────────────────────────── */
.login-pwd-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    font-size: 14px;
    transition: color 0.15s;
}
.login-pwd-toggle:hover { color: var(--gray-600); }

.login-test-users {
    display: grid;
    gap: 0.55rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.9rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    color: var(--gray-600);
    font-size: 0.84rem;
}

.login-test-users strong {
    color: var(--gray-900);
}

.login-decoration {
    position: absolute;
    inset: -18%;
    z-index: 0;
    pointer-events: none;
}

.login-decoration .blob {
    position: absolute;
    filter: blur(80px);
    z-index: 0;
    opacity: 0.6;
    border-radius: 50%;
}
.login-decoration .shape-1 {
    width: 400px;
    height: 400px;
    background: var(--primary-300);
    top: -100px;
    left: -100px;
}
.login-decoration .shape-2 {
    width: 300px;
    height: 300px;
    background: #c4b5fd;
    bottom: -50px;
    right: -50px;
}

.role-selector {
    margin-bottom: 1.5rem;
    padding: 1rem;
}

/* Sticky left menu */
#app-view aside {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    overflow-y: auto;
    z-index: 20;
    width: 16rem;
    min-width: 16rem;
    flex-shrink: 0;
}

#app-view main {
    overflow-y: auto;
    height: 100vh;
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.48);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
    z-index: 35;
}

.sidebar-toggle-btn {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.85rem;
    background: #fff;
    color: var(--gray-700);
    box-shadow: var(--shadow-sm);
    position: relative;
    z-index: 2;
}

.role-selector {
    background: var(--gray-50);
    border-radius: 0.5rem;
    border: 1px dashed var(--gray-300);
}
.role-selector label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 0.5rem;
}
.role-selector select {
    width: 100%;
    padding: 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid var(--gray-300);
}

/* Sidebar Navigation */
.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    color: var(--gray-600);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all var(--transition-fast);
    cursor: pointer;
    border-left: 3px solid transparent;
}
.nav-item:hover {
    background: var(--primary-50);
    color: var(--primary-700);
}
.nav-item.active {
    background: var(--primary-50);
    color: var(--primary-700);
    border-left-color: var(--primary-600);
}
.sidebar-user-wrap {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.user-profile {
    align-items: center;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 1rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    padding: 0.85rem 0.9rem;
    gap: 0.8rem;
    min-height: 72px;
}
.user-profile #user-initials {
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 0.95rem;
    background: linear-gradient(135deg, #eef2ff 0%, #dbeafe 100%);
    color: var(--primary-700);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}
.user-profile #user-name {
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.15;
    margin-bottom: 0.15rem;
}
.user-profile #user-role-display {
    font-size: 0.78rem;
    color: var(--gray-500);
    line-height: 1.2;
}
.sidebar-logout-btn {
    width: 2.15rem;
    height: 2.15rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 0.75rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    color: var(--gray-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.sidebar-logout-btn:hover {
    color: #dc2626;
    border-color: rgba(248, 113, 113, 0.35);
    background: #fff5f5;
    transform: translateY(-1px);
}
.app-header {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 45;
    display: none;
}
.header-actions {
    margin-left: auto;
    width: fit-content;
}
.mobile-header-left {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    position: relative;
    z-index: 2;
}
.mobile-header-brand {
    display: none;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gray-900);
    position: relative;
    z-index: 2;
}
.mobile-header-brand-mark {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-600);
    color: #fff;
    box-shadow: 0 10px 18px rgba(79, 70, 229, 0.18);
}

.cal-toolbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cal-toolbar-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
}

.cal-toolbar-date {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-weight: 700;
    line-height: 1.35;
}

.cal-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.cal-view-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.cal-view-switcher .btn.is-active {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-400) 100%);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(79, 70, 229, 0.18);
}

.brand-logo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Dashboard Metrics */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.metric-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.metric-icon {
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}
.metric-blue { background: var(--primary-100); color: var(--primary-600); }
.metric-green { background: #d1fae5; color: var(--success); }
.metric-orange { background: #fef3c7; color: var(--warning); }
.metric-red { background: #fee2e2; color: var(--danger); }

.metric-info {
    min-width: 0;
}

.metric-info h3 {
    font-size: 0.875rem;
    color: var(--gray-500);
    font-weight: 500;
}
.metric-info p {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.2;
}

/* Data Tables */
.table-container {
    background: #fff;
    border-radius: 1rem;
    border: 1px solid var(--gray-200);
    overflow: hidden;
}
.table-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.table-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
}
.dashboard-date-label {
    margin-top: 0.2rem;
    font-size: 0.85rem;
    color: var(--gray-500);
}
.dashboard-date-filter-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.dashboard-date-filter-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-500);
}
.dashboard-date-filter {
    min-width: 170px;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--gray-300);
    border-radius: 0.75rem;
    background: #fff;
    font: inherit;
    color: var(--gray-700);
}
.dashboard-date-filter:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
table {
    width: 100%;
    border-collapse: collapse;
}
th {
    background: var(--gray-50);
    padding: 0.75rem 1.5rem;
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--gray-500);
    border-bottom: 1px solid var(--gray-200);
}
td {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.875rem;
    color: var(--gray-700);
}
tr:last-child td {
    border-bottom: none;
}
tr:hover td {
    background: var(--gray-50);
}
.tr-sobreturno {
    background: rgba(139, 92, 246, 0.05);
}
.tr-sobreturno td {
    border-bottom: 1px dashed rgba(139, 92, 246, 0.3);
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}
.badge-success { background: #d1fae5; color: #065f46; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-info { background: #dbeafe; color: #1e40af; }
.badge-purple { background: #ede9fe; color: #5b21b6; }
.dashboard-wa-btn {
    white-space: nowrap;
}

/* Micro-animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fadeIn var(--transition-base) forwards;
}

/* View transitions */
.view-section {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}
.view-section.active {
    opacity: 1;
    visibility: visible;
    position: relative;
}

/* ===== CALENDAR STYLES ===== */
.cal-wrapper { display: flex; flex-direction: column; height: 100%; }

.cal-toolbar { padding: 0.75rem 1.25rem !important; }

.cal-layout {
    display: flex;
    gap: 1rem;
    flex: 1;
    min-height: 0;
}

.cal-scroll-wrap {
    flex: 1;
    overflow: auto;
    border-radius: 0.75rem;
    border: 1px solid var(--gray-200);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.cal-grid {
    display: flex;
    flex-direction: column;
    min-width: calc(80px + var(--day-cols, 7) * 140px);
}

/* Header row */
.cal-header-row {
    display: grid;
    grid-template-columns: 64px repeat(var(--day-cols, 7), 1fr);
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    border-bottom: 2px solid var(--gray-200);
}

.cal-time-gutter { width: 64px; }

.cal-day-header {
    padding: 0.5rem 0.25rem;
    text-align: center;
    border-left: 1px solid var(--gray-100);
    width: 100%;
    background: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
}

.cal-day-name {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gray-500);
    letter-spacing: 0.05em;
}

.cal-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-top: 2px;
}

.cal-day-count {
    display: block;
    margin-top: 0.18rem;
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--gray-500);
    line-height: 1.2;
}

.cal-today-header .cal-day-name { color: var(--primary-600); }
.cal-today-badge {
    background: var(--primary-600);
    color: #fff !important;
}

/* Body rows */
.cal-body { flex: 1; overflow: hidden; }

.cal-row {
    display: grid;
    grid-template-columns: 64px repeat(var(--day-cols, 7), 1fr);
}

.cal-row:hover { background: rgba(99, 102, 241, 0.01); }

.cal-time-label {
    width: 64px;
    padding: 4px 8px 0;
    font-size: 0.65rem;
    color: var(--gray-400);
    text-align: right;
    font-weight: 500;
    position: relative;
    top: -6px;
    white-space: nowrap;
}

.cal-cell {
    border-left: 1px solid var(--gray-100);
    min-height: 30px;
    padding: 2px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cal-cell-hour { border-top: 1px solid var(--gray-200); }
.cal-cell-half { border-top: 1px dashed var(--gray-100); }

/* Appointment blocks */
.cal-apt-block {
    border-radius: 6px;
    padding: 4px 6px;
    font-size: 0.72rem;
    min-height: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: filter 0.15s, transform 0.1s;
    position: relative;
    overflow: hidden;
    line-height: 1.3;
}

.cal-apt-block:hover { filter: brightness(0.9); transform: scale(1.02); z-index: 5; }

.cal-apt-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-apt-meta {
    font-size: 0.64rem;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-apt-actions {
    display: none;
    position: absolute;
    bottom: 2px;
    right: 2px;
    gap: 2px;
}

.cal-apt-block:hover .cal-apt-actions { display: flex; }

.cal-apt-btn {
    background: rgba(0,0,0,0.2);
    border: none;
    color: #fff;
    border-radius: 4px;
    width: 18px;
    height: 18px;
    font-size: 0.6rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s;
}
.cal-apt-btn:hover { background: rgba(0,0,0,0.4); }

/* Sidebar legend */
.cal-legend {
    width: 248px;
    min-width: 248px;
    background: rgba(255,255,255,0.84);
    border: 1px solid var(--border-soft);
    border-radius: 1.25rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    box-shadow: var(--shadow-sm);
    height: fit-content;
    position: sticky;
    top: 0.5rem;
}

.cal-legend-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.cal-legend-title {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gray-500);
    margin-bottom: 0.15rem;
}

.cal-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    text-align: left;
}

.cal-legend-item input[type="checkbox"] {
    accent-color: var(--primary-600);
    width: 14px;
    height: 14px;
    cursor: pointer;
    flex-shrink: 0;
}

.cal-prof-select .cal-legend-chip {
    width: 100%;
    min-height: 2.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.82;
    transition: transform 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.cal-prof-select.is-active .cal-legend-chip {
    opacity: 1;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14);
    transform: translateY(-1px);
}

.cal-prof-select:hover .cal-legend-chip {
    opacity: 1;
    transform: translateY(-1px);
    filter: saturate(1.04);
}

.cal-legend-chip {
    flex: 1;
    padding: 0.65rem 0.85rem;
    border-radius: 0.8rem;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* btn-sm */
.btn-sm {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.8rem !important;
}

/* badge extra */
.badge-purple { background: #ede9fe; color: #5b21b6; }
.badge-info { background: #dbeafe; color: #1e40af; }
.badge-success { background: #d1fae5; color: #065f46; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-purple.badge { background: #ede9fe; color: #5b21b6; }

.dashboard-status-select {
    min-width: 170px;
    padding: 0.5rem 2rem 0.5rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--gray-200);
    font-size: 0.79rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
        calc(100% - 16px) calc(50% - 1px),
        calc(100% - 11px) calc(50% - 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.dashboard-status-select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.dashboard-status-select option {
    background: #ffffff;
    color: var(--gray-800);
}

.dashboard-status-select.badge-success {
    background-color: #f4fbf7;
    color: #166534;
    border-color: #b7e4c7;
}

.dashboard-status-select.badge-info {
    background-color: #f4f9ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.dashboard-status-select.badge-warning {
    background-color: #fffaf0;
    color: #9a3412;
    border-color: #fcd34d;
}

.dashboard-status-select.badge-danger {
    background-color: #fff5f5;
    color: #b91c1c;
    border-color: #fecaca;
}

.dashboard-status-select.badge-purple {
    background-color: #faf5ff;
    color: #6d28d9;
    border-color: #ddd6fe;
}

/* ===== CALENDAR V2 — Absolute-positioned blocks ===== */
.cal-grid-v2 {
    display: flex;
    min-width: max-content;
    border-top: 2px solid var(--gray-200);
}

/* Left time gutter */
.cal-gutter-col {
    width: 60px;
    flex-shrink: 0;
    border-right: 1px solid var(--gray-200);
    background: var(--gray-50);
    position: sticky;
    left: 0;
    z-index: 10;
}

.cal-gutter-header {
    height: 48px;
    border-bottom: 2px solid var(--gray-200);
    background: var(--gray-50);
}

.cal-gutter-body {
    position: relative;
}

.cal-hour-label {
    position: absolute;
    right: 6px;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--gray-400);
    transform: translateY(-50%);
    white-space: nowrap;
    line-height: 1;
}

.cal-h-line {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--gray-200);
    pointer-events: none;
    width: 100%;
}

.cal-h-half {
    border-top-style: dashed;
    border-top-color: var(--gray-100);
}

/* Day columns */
.cal-day-col {
    flex: 1;
    min-width: 120px;
    border-right: 1px solid var(--gray-100);
    display: flex;
    flex-direction: column;
}

.cal-day-col:last-child { border-right: none; }

.cal-day-header {
    height: 48px;
    padding: 6px 4px;
    text-align: center;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: 2px solid var(--gray-200);
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 5;
    flex-shrink: 0;
}

.cal-day-header:hover {
    background: rgba(99, 102, 241, 0.04);
}

.cal-day-header:focus-visible,
.cal-month-dayhead:focus-visible {
    outline: 2px solid rgba(99, 102, 241, 0.42);
    outline-offset: -2px;
}

.cal-today-header {
    background: var(--primary-50);
}

.cal-day-name {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--gray-500);
    letter-spacing: 0.05em;
}

.cal-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--gray-700);
}

/* Day body — appointments go here absolutely */
.cal-day-body {
    position: relative;
    flex: 1;
}

/* Appointment block — absolute within day body */
.cal-apt-block {
    position: absolute;
    left: 3px;
    right: 3px;
    border-radius: 6px;
    padding: 0.38rem 0.5rem;
    font-size: 0.72rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: filter 0.15s, transform 0.1s, box-shadow 0.1s;
    overflow: hidden;
    line-height: 1.3;
    z-index: 2;
    border-left: 4px solid transparent;
}

.cal-apt-content {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    min-width: 0;
    max-width: 100%;
}

.cal-apt-block:hover {
    filter: brightness(0.92);
    transform: scaleX(1.02);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    z-index: 3;
}

.cal-apt-name {
    display: block;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;
}

.cal-apt-meta {
    display: block;
    font-size: 0.65rem;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
    min-width: 0;
    max-width: 100%;
}

.cal-apt-tag {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 4px;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(255,255,255,0.72);
}

.cal-apt-actions {
    display: none;
    position: absolute;
    bottom: 3px;
    right: 3px;
    gap: 3px;
}

.cal-apt-btn {
    background: rgba(0,0,0,0.25);
    border: none;
    color: #fff;
    border-radius: 4px;
    width: 20px;
    height: 20px;
    font-size: 0.6rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s;
}
.cal-apt-btn:hover { background: rgba(0,0,0,0.45); }

.cal-apt-overbook {
    left: 52%;
    right: 3px;
    min-height: 26px;
    padding: 0.24rem 0.4rem 0.26rem;
    z-index: 20 !important;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.22);
}

.cal-apt-overbook:hover {
    z-index: 21 !important;
}

.cal-apt-overbook .cal-apt-name {
    font-size: 0.64rem;
    line-height: 1.15;
}

.cal-apt-overbook .cal-apt-meta {
    font-size: 0.53rem;
    line-height: 1.05;
}

.cal-apt-overbook .cal-apt-content {
    gap: 0.02rem;
    padding-right: 5.2rem;
}

.cal-apt-overbook .cal-apt-tag {
    position: absolute;
    top: 0.22rem;
    right: 0.24rem;
    margin-top: 0;
    max-width: calc(100% - 0.5rem);
    padding: 0.08rem 0.34rem;
    font-size: 0.5rem;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-apt-overbook .cal-apt-actions {
    bottom: 2px;
    right: 2px;
}

/* ── Turno cancelado: rayas rojas diagonales ── */
.cal-apt-cancelled {
    opacity: 0.72;
    border-left-color: #ef4444 !important;
    box-shadow: none !important;
}
.cal-apt-cancelled:hover {
    opacity: 0.88;
    filter: none !important;
    transform: none !important;
}
.cal-apt-name-cancelled {
    text-decoration: line-through;
    opacity: 0.75;
}
.cal-apt-tag-cancelled {
    background: rgba(239, 68, 68, 0.18) !important;
    color: #991b1b;
    font-weight: 800;
}
body.theme-dark .cal-apt-tag-cancelled {
    background: rgba(239, 68, 68, 0.28) !important;
    color: #fca5a5;
}

/* Tarjeta compacta cancelada (vista semana/mes mobile) */
.cal-mobile-card.is-cancelled {
    opacity: 0.68;
    background: repeating-linear-gradient(
        135deg,
        #fee2e2 0px, #fee2e2 7px,
        #fecaca 7px, #fecaca 14px
    ) !important;
}
body.theme-dark .cal-mobile-card.is-cancelled {
    background: repeating-linear-gradient(
        135deg,
        rgba(220,38,38,0.18) 0px, rgba(220,38,38,0.18) 7px,
        rgba(220,38,38,0.08) 7px, rgba(220,38,38,0.08) 14px
    ) !important;
}

.cal-legend-mobile {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.65rem;
    align-items: center;
}

.cal-legend-mobile .cal-legend-title {
    margin-bottom: 0;
    min-width: fit-content;
}

.cal-legend-mobile .cal-legend-item {
    min-width: fit-content;
}

.cal-wrapper-mobile {
    gap: 0.85rem;
}

.cal-mobile-sections {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.cal-mobile-section {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.cal-mobile-section-header {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--gray-200);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--gray-800);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.cal-mobile-list {
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cal-mobile-card {
    border: 1px solid var(--gray-200);
    border-left: 4px solid var(--primary-500);
    border-radius: 0.95rem;
    padding: 0.85rem;
    background: #fff;
}

.cal-mobile-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.cal-mobile-card-time {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
}

.cal-mobile-card-duration,
.cal-mobile-card-prof {
    font-size: 0.8rem;
    color: var(--gray-500);
}

.cal-mobile-card-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 0.2rem;
}

.cal-mobile-card-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
}

.cal-mobile-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.8rem;
}

.cal-mobile-empty {
    border: 1px dashed var(--gray-300);
    border-radius: 0.9rem;
    padding: 1rem;
    text-align: center;
    color: var(--gray-500);
    background: #fff;
}

.cal-mobile-empty-root {
    background: #fff;
}

.cal-mobile-count {
    border-radius: 0.9rem;
    padding: 0.8rem 1rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
}

/* ===== FINAL RESPONSIVE OVERRIDES ===== */
@media screen and (max-width: 1024px) {
    #app-view {
        display: block !important;
        width: 100%;
        overflow: hidden;
    }

    #app-view aside {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(86vw, 320px) !important;
        min-width: min(86vw, 320px) !important;
        height: 100dvh !important;
        transform: translateX(-104%) !important;
        transition: transform var(--transition-base) !important;
        z-index: 40;
        box-shadow: var(--shadow-xl);
        border-top-right-radius: 1.25rem;
    }

    #app-view.sidebar-open aside {
        transform: translateX(0) !important;
    }

    #app-view main {
        width: 100% !important;
        min-width: 0;
        margin-left: 0 !important;
        height: 100vh;
    }

    #app-view.sidebar-open .sidebar-backdrop {
        display: block !important;
        opacity: 1;
        visibility: visible;
    }

    .sidebar-toggle-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    .app-header {
        display: flex;
        position: sticky;
        top: 0;
        z-index: 80;
        padding-top: env(safe-area-inset-top, 0px);
        min-height: calc(4rem + env(safe-area-inset-top, 0px));
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    }

    .mobile-header-brand {
        display: inline-flex;
    }

    #main-content {
        padding: 1rem !important;
    }

    .cal-layout {
        flex-direction: column;
    }

    .cal-legend {
        width: 100%;
        min-width: 0;
        order: -1;
    }
}

@media screen and (max-width: 768px) {
    .metrics-grid {
        grid-template-columns: 1fr !important;
    }

    .app-header {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    #main-content {
        padding-top: 1rem !important;
        scroll-padding-top: calc(5rem + env(safe-area-inset-top, 0px));
    }

    .table-container {
        overflow-x: auto;
    }

    table {
        min-width: 700px;
    }

    .card,
    .settings-card,
    .table-container,
    .clinical-history-card {
        border-radius: 0.85rem;
    }
}

@media screen and (max-width: 540px) {
    #app-view aside {
        width: 88vw !important;
        min-width: 88vw !important;
    }

    .nav-item {
        padding: 0.85rem 1rem;
    }

    .app-brand,
    .sidebar-user-wrap,
    #main-content {
        padding-left: 0.9rem !important;
        padding-right: 0.9rem !important;
    }

    .dashboard-date-filter {
        width: 100%;
        min-width: 0;
    }

    .clinical-history-card .flex.justify-between,
    .clinical-history-card .flex.items-center.justify-between,
    .clinical-history-card .flex.flex-col.md\:flex-row {
        gap: 0.75rem;
    }

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

    .settings-card header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }

    .modal-footer {
        flex-direction: column-reverse;
    }

    .modal-footer .btn {
        width: 100%;
        justify-content: center;
    }

    .mobile-header-left {
        min-width: 0;
        gap: 0.65rem;
    }

    .mobile-header-brand {
        min-width: 0;
        flex: 1;
    }

    .mobile-header-brand span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cal-toolbar {
        padding: 1rem !important;
    }

    .cal-toolbar-inner {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .cal-toolbar-nav {
        display: grid;
        grid-template-columns: 2.9rem minmax(0, 1fr) 2.9rem;
        align-items: center;
        gap: 0.65rem;
    }

    .cal-toolbar-date {
        font-size: 0.98rem;
        text-align: center;
    }

    .cal-toolbar-actions {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 0.7rem;
    }

    .cal-toolbar-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .cal-view-switcher {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.55rem;
    }

    .table-container.table-container-schedules,
    .table-container.table-container-patients {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 0;
    }

    .table-container.table-container-schedules table,
    .table-container.table-container-patients table {
        min-width: 720px !important;
    }

    .table-container.table-container-schedules thead,
    .table-container.table-container-patients thead {
        display: table-header-group;
    }

    .table-container.table-container-schedules tbody,
    .table-container.table-container-patients tbody {
        display: table-row-group;
    }

    .table-container.table-container-schedules tr,
    .table-container.table-container-patients tr {
        display: table-row;
        border: none;
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    .table-container.table-container-schedules td,
    .table-container.table-container-patients td,
    .table-container.table-container-schedules th,
    .table-container.table-container-patients th {
        display: table-cell;
        width: auto;
        min-width: 0;
        vertical-align: middle;
        white-space: normal;
    }

    .table-container.table-container-schedules td::before,
    .table-container.table-container-patients td::before {
        display: none;
        content: none;
    }

    .table-container.table-container-schedules .table-prof-name-cell,
    .table-container.table-container-patients #patients-table td:first-child {
        display: flex;
        align-items: center;
        gap: 0.8rem;
    }

    .table-container.table-container-schedules .table-actions-cell {
        text-align: right;
    }

    .table-container.table-container-patients .table-actions-cell {
        text-align: left;
    }

    .patient-actions {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .btn-schedule-mobile {
        width: 3rem;
        height: 3rem;
        padding: 0;
        border-radius: 0.95rem;
    }

    .btn-schedule-mobile .btn-label {
        display: none;
    }
}

.clinical-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.clinical-images-shell {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 1rem;
    padding: 1rem;
}

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

.clinical-images-summary > div {
    min-width: 0;
    border: 1px solid var(--gray-200);
    border-radius: 0.8rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 0.78rem 0.9rem;
}

.clinical-images-summary span {
    display: block;
    color: var(--gray-500);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.clinical-images-summary strong {
    display: block;
    margin-top: 0.24rem;
    color: var(--gray-900);
    font-size: 0.92rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.clinical-image-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.clinical-image-actions {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.clinical-image-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(15, 23, 42, 0.72);
    color: #fff;
    padding: 0.42rem 0.72rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.clinical-image-action-btn:hover {
    transform: translateY(-1px);
    background: rgba(15, 23, 42, 0.86);
    border-color: rgba(255, 255, 255, 0.65);
}

.clinical-image-action-delete {
    background: rgba(127, 29, 29, 0.76);
}

.clinical-image-action-delete:hover {
    background: rgba(153, 27, 27, 0.9);
}

.clinical-image-preview-button {
    display: block;
    width: 100%;
}

.clinical-image-preview {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    background: var(--gray-100);
}

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

.clinical-image-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

.clinical-image-error {
    display: none;
    margin: 0 0 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #b45309;
}

.clinical-image-card--broken .clinical-image-body {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.clinical-image-body--error .clinical-image-error {
    display: block;
}

.clinical-image-date {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--primary-700);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.clinical-image-inline-link {
    border: none;
    background: transparent;
    color: var(--primary-700);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0;
    white-space: nowrap;
}

.clinical-image-inline-link:hover {
    color: var(--primary-800);
    text-decoration: underline;
}

.clinical-image-description {
    font-size: 0.9rem;
    color: var(--gray-700);
    min-height: 2.5rem;
    margin-bottom: 0;
}

.clinical-image-empty {
    grid-column: 1 / -1;
    min-height: 112px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--gray-300);
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    color: var(--gray-500);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.clinical-image-viewer-overlay {
    z-index: 80;
    padding: 1.25rem;
    background: rgba(2, 6, 23, 0.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.clinical-image-viewer {
    width: min(1180px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.22);
    border-radius: 1.15rem;
    background: #0f172a;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.46);
    color: #f8fafc;
    transform: translateY(10px) scale(0.98);
    transition: transform 0.2s ease;
}

.modal-overlay.active .clinical-image-viewer {
    transform: translateY(0) scale(1);
}

.clinical-image-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.96);
}

.clinical-image-viewer-heading {
    min-width: 0;
}

.clinical-image-viewer-kicker {
    display: block;
    margin-bottom: 0.18rem;
    color: #67e8f9;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.clinical-image-viewer-heading h3 {
    margin: 0;
    color: #f8fafc;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.clinical-image-viewer-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

.clinical-image-viewer-counter {
    display: inline-flex;
    align-items: center;
    min-height: 2.1rem;
    padding: 0 0.78rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
    font-size: 0.78rem;
    font-weight: 800;
}

.clinical-image-viewer-close {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.06);
    color: #f8fafc;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.clinical-image-viewer-close:hover {
    transform: translateY(-1px);
    background: rgba(248, 113, 113, 0.16);
    border-color: rgba(248, 113, 113, 0.42);
}

.clinical-image-viewer-layout {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    flex: 1;
}

.clinical-image-viewer-stage {
    position: relative;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.1rem;
    background:
        linear-gradient(45deg, rgba(148, 163, 184, 0.08) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(148, 163, 184, 0.08) 25%, transparent 25%),
        #020617;
    background-position: 0 0, 0 12px;
    background-size: 24px 24px;
}

.clinical-image-viewer-figure {
    position: relative;
    width: 100%;
    height: min(64vh, 640px);
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.clinical-image-viewer-zoom-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transform-origin: center center;
    transition: transform 0.1s ease;
    will-change: transform;
    touch-action: none;
}

.clinical-image-viewer-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0.8rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.34);
    background: #111827;
    user-select: none;
    -webkit-user-drag: none;
}

.clinical-image-viewer-zoom-btns {
    display: flex;
    gap: 0.25rem;
}

.clinical-image-viewer-zoom-btn {
    background: rgba(255,255,255,0.12);
    border: none;
    border-radius: 0.5rem;
    color: #f8fafc;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.75rem;
    transition: background 0.15s;
}

.clinical-image-viewer-zoom-btn:hover {
    background: rgba(255,255,255,0.22);
}

.clinical-image-viewer-caption {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.8rem;
    background: rgba(15, 23, 42, 0.7);
    color: #f8fafc;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.clinical-image-viewer-caption span {
    color: #bae6fd;
    font-size: 0.76rem;
    font-weight: 800;
    white-space: nowrap;
}

.clinical-image-viewer-caption strong {
    min-width: 0;
    font-size: 0.86rem;
    line-height: 1.25;
    text-align: right;
    overflow-wrap: anywhere;
}

.clinical-image-viewer-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 2.75rem;
    height: 3.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.85rem;
    background: rgba(15, 23, 42, 0.72);
    color: #f8fafc;
    transform: translateY(-50%);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.clinical-image-viewer-nav:hover {
    background: rgba(14, 165, 233, 0.22);
    border-color: rgba(125, 211, 252, 0.46);
    transform: translateY(-50%) scale(1.03);
}

.clinical-image-viewer-nav.prev {
    left: 1rem;
}

.clinical-image-viewer-nav.next {
    right: 1rem;
}

.clinical-image-viewer-panel {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1rem;
    border-left: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.98);
}

.clinical-image-viewer-progress {
    height: 0.42rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.22);
}

.clinical-image-viewer-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22d3ee 0%, #facc15 100%);
}

.clinical-image-viewer-detail {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 0.85rem;
    padding: 0.78rem;
    background: rgba(255, 255, 255, 0.05);
}

.clinical-image-viewer-detail span {
    display: block;
    margin-bottom: 0.32rem;
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.clinical-image-viewer-detail strong {
    display: block;
    color: #f8fafc;
    font-size: 0.88rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.clinical-image-viewer-neighbors {
    margin-top: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
}

.clinical-image-viewer-neighbors button {
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 0.78rem;
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
    padding: 0.6rem 0.72rem;
    font-size: 0.78rem;
    font-weight: 800;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.clinical-image-viewer-neighbors button:hover {
    background: rgba(14, 165, 233, 0.16);
    border-color: rgba(125, 211, 252, 0.38);
}

.clinical-image-viewer-thumbs {
    display: flex;
    gap: 0.7rem;
    overflow-x: auto;
    padding: 0.85rem 1rem 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(2, 6, 23, 0.82);
    scrollbar-width: thin;
}

.clinical-image-viewer-thumb {
    width: 112px;
    flex: 0 0 112px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 0.85rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    text-align: left;
    transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.clinical-image-viewer-thumb:hover {
    transform: translateY(-1px);
    border-color: rgba(125, 211, 252, 0.42);
    background: rgba(255, 255, 255, 0.09);
}

.clinical-image-viewer-thumb.is-active {
    border-color: #22d3ee;
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.18);
}

.clinical-image-viewer-thumb img {
    width: 100%;
    height: 64px;
    display: block;
    object-fit: cover;
    background: #111827;
}

.clinical-image-viewer-thumb span {
    display: block;
    padding: 0.48rem 0.55rem 0.55rem;
    color: inherit;
    font-size: 0.7rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 980px) {
    .clinical-image-viewer-layout {
        grid-template-columns: 1fr;
    }

    .clinical-image-viewer-panel {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-left: none;
        border-top: 1px solid rgba(148, 163, 184, 0.18);
    }

    .clinical-image-viewer-progress,
    .clinical-image-viewer-neighbors {
        grid-column: 1 / -1;
    }

    .clinical-image-viewer-neighbors {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .clinical-image-viewer-figure {
        height: min(52vh, 520px);
    }
}

@media (max-width: 768px) {
    .clinical-images-summary {
        grid-template-columns: 1fr;
    }

    .clinical-image-viewer-overlay {
        padding: 0.55rem;
    }

    .clinical-image-viewer {
        width: calc(100vw - 1.1rem);
        max-height: calc(100vh - 1.1rem);
        border-radius: 0.95rem;
    }

    .clinical-image-viewer-header {
        align-items: flex-start;
        padding: 0.85rem;
    }

    .clinical-image-viewer-counter {
        display: none;
    }

    .clinical-image-viewer-stage {
        padding: 0.7rem;
    }

    .clinical-image-viewer-figure {
        height: 42vh;
    }

    .clinical-image-viewer-nav {
        width: 2.35rem;
        height: 3rem;
        border-radius: 0.75rem;
    }

    .clinical-image-viewer-nav.prev {
        left: 0.65rem;
    }

    .clinical-image-viewer-nav.next {
        right: 0.65rem;
    }

    .clinical-image-viewer-caption {
        position: static;
        margin-top: 0.7rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .clinical-image-viewer-caption strong {
        text-align: left;
    }

    .clinical-image-viewer-panel {
        grid-template-columns: 1fr;
        padding: 0.75rem;
    }

    .clinical-image-viewer-neighbors {
        grid-template-columns: 1fr;
    }

    .clinical-image-viewer-thumb {
        width: 96px;
        flex-basis: 96px;
    }

    .clinical-image-viewer-thumb img {
        height: 56px;
    }
}

/* ===== CALENDAR DAY VIEW ===== */
.cal-grid-day {
    display: flex;
    height: 100%;
}

.cal-prof-col {
    flex: 1;
    min-width: 200px;
    border-right: 1px solid var(--gray-200);
}

.cal-prof-col:last-child {
    border-right: none;
}

.cal-prof-header {
    padding: 0.75rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--gray-700);
}

.cal-day-count {
    margin-top: 0.12rem;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--gray-500);
}

.cal-prof-body {
    position: relative;
    overflow: hidden;
}

/* Week view appointments */
.cal-week-apt {
    background: #10b981;
    color: white;
    padding: 0.5rem;
    margin-bottom: 0.25rem;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.875rem;
}
.cal-week-apt:hover {
    opacity: 0.8;
}
.cal-week-apt-name {
    font-weight: 500;
}
.cal-week-apt-meta {
    font-size: 0.75rem;
    opacity: 0.9;
}

.cal-month-board {
    min-width: 980px;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.cal-month-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    position: sticky;
    top: 0;
    z-index: 4;
    background: #fff;
    border-bottom: 1px solid rgba(148, 163, 184, 0.34);
}

.cal-month-weekday {
    padding: 0.85rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
    border-right: 1px solid rgba(148, 163, 184, 0.22);
}

.cal-month-weekday:last-child {
    border-right: none;
}

.cal-month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: minmax(115px, 1fr);
}

.cal-month-cell {
    min-height: 115px;
    border-right: 1px solid rgba(148, 163, 184, 0.2);
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    padding: 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    background: #fff;
}

.cal-month-cell:nth-child(7n) {
    border-right: none;
}

.cal-month-cell.is-outside-month {
    background: linear-gradient(180deg, #f8fafc 0%, #f3f6fb 100%);
}

.cal-month-empty-slot {
    flex: 1;
}

.cal-month-dayhead {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.24rem;
    padding: 0.55rem 0.6rem 0.5rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.28);
    margin: -0.35rem -0.35rem 0.45rem;
    min-height: 3rem;
    width: calc(100% + 0.7rem);
    border-left: none;
    border-right: none;
    border-top: none;
    background: transparent;
    cursor: pointer;
}

.cal-month-dayhead.is-today .cal-month-daynum {
    background: var(--primary-600);
    color: #fff;
    box-shadow: 0 10px 18px rgba(79, 70, 229, 0.2);
}

.cal-month-daynum {
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.42rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gray-700);
    line-height: 1;
}

.cal-month-cell.is-outside-month .cal-month-daynum {
    color: var(--gray-400);
}

.cal-month-daycount {
    font-size: 0.67rem;
    font-weight: 700;
    color: var(--gray-500);
    line-height: 1.2;
}

.cal-month-daybody {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 0;
}

.cal-month-dayempty {
    font-size: 0.76rem;
    color: var(--gray-400);
    padding: 0.2rem 0.1rem;
}

.cal-month-apt {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-left: 4px solid var(--primary-500);
    border-radius: 0.75rem;
    padding: 0.45rem 0.55rem;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
}

.cal-month-apt:hover {
    transform: translateY(-1px);
    filter: brightness(0.97);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

.cal-month-apt.is-overbook {
    outline: 1px dashed rgba(249, 115, 22, 0.45);
}

.cal-month-apt-time {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    opacity: 0.92;
    margin-bottom: 0.2rem;
}

.cal-month-apt-name {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-month-apt-prof {
    display: block;
    font-size: 0.68rem;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feedback-toast-root {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
}

.feedback-toast {
    pointer-events: auto;
    min-width: 280px;
    max-width: 360px;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(99, 102, 241, 0.12);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(18px);
    transform: translateY(-10px);
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.feedback-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.feedback-toast-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
}

.feedback-toast-copy {
    color: var(--gray-800);
    font-size: 0.92rem;
    line-height: 1.45;
    font-weight: 500;
}

.feedback-toast-success .feedback-toast-icon {
    background: #dcfce7;
    color: #15803d;
}

.feedback-toast-error .feedback-toast-icon {
    background: #fee2e2;
    color: #dc2626;
}

.feedback-toast-info .feedback-toast-icon {
    background: #e0e7ff;
    color: var(--primary-700);
}

.feedback-dialog-root {
    position: fixed;
    inset: 0;
    z-index: 3100;
    pointer-events: none;
}

.feedback-dialog-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(15, 23, 42, 0.34);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none; /* No bloquear clicks cuando el diálogo no está visible */
}

.feedback-dialog-overlay.is-visible {
    opacity: 1;
    pointer-events: auto; /* Solo capturar clicks cuando el diálogo está visible */
}

.feedback-dialog {
    width: min(100%, 420px);
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(99, 102, 241, 0.12);
    border-radius: 1.35rem;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.24);
    padding: 1.25rem;
    transform: translateY(12px) scale(0.98);
    transition: transform 0.18s ease;
}

.feedback-dialog-overlay.is-visible .feedback-dialog {
    transform: translateY(0) scale(1);
}

.feedback-dialog-badge {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.feedback-dialog-info .feedback-dialog-badge {
    background: #e0e7ff;
    color: var(--primary-700);
}

.feedback-dialog-danger .feedback-dialog-badge,
.feedback-dialog-error .feedback-dialog-badge {
    background: #fee2e2;
    color: #dc2626;
}

.feedback-dialog-success .feedback-dialog-badge {
    background: #dcfce7;
    color: #15803d;
}

.feedback-dialog-eyebrow {
    margin: 0 0 0.45rem;
    color: var(--gray-500);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.feedback-dialog-message {
    margin: 0;
    color: var(--gray-900);
    font-size: 1rem;
    line-height: 1.55;
    font-weight: 600;
}

.feedback-dialog-actions {
    margin-top: 1.35rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .feedback-toast-root {
        top: auto;
        right: 0.9rem;
        left: 0.9rem;
        bottom: 0.9rem;
    }

    .feedback-toast {
        min-width: 0;
        max-width: none;
    }

    .feedback-dialog {
        width: min(100%, 360px);
        border-radius: 1.15rem;
        padding: 1rem;
    }

    .feedback-dialog-actions {
        flex-direction: column-reverse;
    }

.feedback-dialog-actions .btn {
        width: 100%;
    }
}

@media screen and (max-width: 820px) {
    .modal-content-patient {
        max-width: min(100vw - 2rem, 680px);
        width: min(100vw - 2rem, 680px);
    }

    .modal-content-patient #patient-form .modal-body > .patient-form-row-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .modal-content-patient #patient-form .modal-body > .patient-form-row-3 .input-group:last-child {
        grid-column: 1 / -1;
    }
}

/* ===== VISUAL REFRESH V1 — actualizado a Ámbar Dorado ===== */
:root {
    --primary-50: #fffbeb;
    --primary-100: #fef3c7;
    --primary-200: #fde68a;
    --primary-300: #fcd34d;
    --primary-400: #fbbf24;
    --primary-500: #f59e0b;
    --primary-600: #d97706;
    --primary-700: #b45309;

    --gray-50: #f7f6f2;
    --gray-100: #eef0f4;
    --gray-200: #dde1e9;
    --gray-300: #c5ccda;
    --gray-400: #94a0b5;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    --success: #16a34a;
    --danger: #dc2626;
    --warning: #d97706;
    --info: #2563eb;
    --purple: #7c3aed;

    --surface-0: rgba(255, 255, 255, 0.72);
    --surface-1: rgba(255, 255, 255, 0.86);
    --surface-2: #ffffff;
    --border-soft: rgba(15, 23, 42, 0.08);
    --border-strong: rgba(15, 23, 42, 0.14);
    --shadow-sm: 0 4px 16px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 12px 32px rgba(15, 23, 42, 0.09);
    --shadow-lg: 0 20px 56px rgba(15, 23, 42, 0.12);
    --shadow-xl: 0 32px 80px rgba(15, 23, 42, 0.15);
}

html {
    background: linear-gradient(180deg, #F7F6F2 0%, #F2F1EC 100%);
}

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

#app-view main {
    background: #F7F6F2;
}

.app-header {
    height: 4.4rem;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}

#app-sidebar {
    background: rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-right: 1px solid var(--border-soft);
    box-shadow: 18px 0 40px rgba(15, 23, 42, 0.04);
}

.app-brand {
    background: transparent;
    border-bottom: 1px solid var(--border-soft) !important;
}

.app-brand-copy {
    min-width: 0;
}

.app-brand-mark,
.mobile-header-brand-mark {
    border-radius: 0.75rem;
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-500) 100%);
    box-shadow: 0 8px 20px rgba(180, 83, 9, 0.28);
}

.app-brand h1,
.mobile-header-brand span,
.logo-container h2 {
    letter-spacing: -0.03em;
    font-weight: 800;
    color: var(--gray-900);
}

.app-brand-subtitle,
.login-subtitle {
    color: var(--gray-500);
}

.nav-item {
    margin: 0.22rem 0.75rem;
    border-radius: 1rem;
    padding: 0.9rem 1rem;
    font-weight: 600;
    color: var(--gray-600);
    transition: transform var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.92);
    color: var(--gray-900);
    transform: translateX(2px);
    box-shadow: var(--shadow-sm);
}

.nav-item.active {
    background: rgba(217, 119, 6, 0.18);
    color: #FCD34D;
    border: none;
    border-left: 2px solid var(--primary-400);
    box-shadow: none;
}

.nav-sub-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.1rem 0.75rem 0.1rem 2rem;
    border-radius: 0.75rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--gray-500);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.nav-sub-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(241, 245, 249, 0.85);
}
.nav-sub-item.active {
    background: rgba(217, 119, 6, 0.16);
    color: #FCD34D;
    font-weight: 600;
}
.nav-sub-item i {
    width: 1rem;
    text-align: center;
    font-size: 0.76rem;
    flex-shrink: 0;
}

.sidebar-user-wrap {
    border-top: 1px solid var(--border-soft) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.52) 100%);
}

.user-profile {
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--shadow-sm);
}

#user-initials {
    border-radius: 1rem !important;
    background: linear-gradient(135deg, var(--primary-100) 0%, #ffffff 100%);
    color: var(--primary-700) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.95);
}

.card,
.settings-card,
.table-container,
.clinical-history-card,
.clinical-images-shell {
    background: var(--surface-1);
    border: 1px solid var(--border-soft);
    border-radius: 1.25rem;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.card:hover,
.settings-card:hover {
    box-shadow: var(--shadow-md);
}

.table-container {
    overflow: hidden;
}

table thead th {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
    background: rgba(255,255,255,0.5);
    border-bottom: 1px solid var(--border-soft);
}

table tbody tr {
    background: transparent;
    transition: background-color var(--transition-fast);
}

table tbody tr:hover {
    background: rgba(255, 255, 255, 0.5);
}

table td,
table th {
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-color: rgba(221, 227, 236, 0.8);
}

.btn {
    border-radius: 0.95rem;
    font-weight: 700;
    border: 1px solid transparent;
    box-shadow: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

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

.btn-primary {
    background: var(--primary-700);
    color: #fff;
    box-shadow: 0 6px 16px rgba(180, 83, 9, 0.28);
}

.btn-primary:hover {
    background: #92400e;
    box-shadow: 0 10px 24px rgba(180, 83, 9, 0.36);
}

.btn-secondary,
.btn-ghost {
    background: rgba(255, 255, 255, 0.84);
    color: var(--gray-700);
    border-color: var(--border-soft);
}

.btn-secondary:hover,
.btn-ghost:hover {
    background: #fff;
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}

/* Botones de acción de tabla — solo ícono, sin borde visible */
.btn-icon {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    padding: 0.35rem 0.45rem !important;
    border-radius: 0.5rem;
    color: var(--purple);
    width: 2rem;
    height: 2rem;
    font-size: 0.9rem;
}
.btn-icon:hover {
    background: var(--gray-100) !important;
    border-color: transparent !important;
    color: var(--gray-900);
    transform: none;
}

.input-group label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gray-600);
    margin-bottom: 0.42rem;
}

.input-group input,
.input-group select,
.input-group textarea,
.form-input {
    min-height: 3rem;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 1rem;
    color: var(--gray-800);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

.input-group textarea,
.form-input {
    border-radius: 1rem;
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus,
.form-input:focus {
    border-color: rgba(217, 119, 6, 0.5);
    box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.1);
}

.input-group input::placeholder,
.input-group textarea::placeholder,
.form-input::placeholder {
    color: var(--gray-400);
}

.badge {
    border-radius: 999px;
    padding: 0.38rem 0.72rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    border: 1px solid transparent;
}

.modal-overlay {
    background: rgba(15, 23, 42, 0.24);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.modal-content,
.modal-content-treatment,
.modal-content-patient,
.feedback-dialog {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border-soft);
    border-radius: 1.35rem;
    box-shadow: var(--shadow-xl);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.modal-header {
    border-bottom: 1px solid var(--border-soft);
}

.modal-footer {
    border-top: 1px solid var(--border-soft);
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(248,250,252,0.72) 100%);
}

.modal-content-billing .modal-footer {
    background: rgba(248, 250, 252, 0.96);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.metric-card {
    padding: 1.35rem 1.45rem;
}

.metric-icon {
    border-radius: 1rem !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

.login-container {
    max-width: 1200px;
}

.login-card {
    background: #ffffff;
    border: none;
    border-radius: 1.75rem;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.05), 0 40px 100px rgba(0, 0, 0, 0.45), 0 16px 40px rgba(0, 0, 0, 0.2);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.login-test-users {
    background: rgba(255,255,255,0.7);
    border: 1px solid var(--border-soft);
    border-radius: 1rem;
}

.logo-container {
    gap: 0.9rem;
}

.logo-icon {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-500) 100%);
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(180, 83, 9, 0.28);
}

.settings-subnav-item,
.clinical-image-card,
.cal-mobile-card,
.cal-month-apt,
.cal-week-apt {
    border-radius: 1rem;
}

.settings-subnav-item {
    background: rgba(255,255,255,0.78);
    border: 1px solid var(--border-soft);
    box-shadow: none;
}

.settings-subnav-item.active {
    background: linear-gradient(180deg, rgba(217,119,6,0.1) 0%, rgba(255,255,255,0.9) 100%);
    border-color: rgba(217, 119, 6, 0.2);
    box-shadow: 0 8px 24px rgba(180, 83, 9, 0.1);
}

.dashboard-status-select {
    background-color: rgba(255,255,255,0.86);
}

/* ===== VISUAL REFRESH V2 ===== */
.table-header,
.treatments-header,
.odontogram-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.odonto-prof-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.odonto-prof-selector label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.odonto-prof-select-input {
    font-size: 0.8rem;
    padding: 0.3rem 0.75rem;
    height: auto;
    min-width: 160px;
    border-radius: 0.375rem;
    border: 1px solid var(--border-soft);
    background: var(--white);
    color: var(--gray-800);
    cursor: pointer;
    outline: none;
}

.odonto-prof-select-input:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
}

.table-header h3,
.treatments-header h3,
.odontogram-header h3 {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--gray-900);
}

.table-header p,
.treatments-header p,
.odontogram-header p {
    color: var(--gray-500);
}

.metric-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-soft);
}

.metric-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 56%);
    pointer-events: none;
}

.metric-card > * {
    position: relative;
    z-index: 1;
}

.metric-info h3 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--gray-500);
    letter-spacing: -0.02em;
}

.metric-info p {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--gray-900);
}

.table-container table {
    border-collapse: separate;
    border-spacing: 0;
}

.table-container tbody tr + tr td {
    border-top: 1px solid rgba(226, 232, 240, 0.72);
}

.table-container tbody tr:hover td {
    background: rgba(248, 250, 252, 0.82);
}

.table-container td:first-child,
.table-container th:first-child {
    padding-left: 1.25rem;
}

.table-container td:last-child,
.table-container th:last-child {
    padding-right: 1.25rem;
}

.table-agenda-professionals {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

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

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

.table-agenda-professionals tbody tr {
    box-shadow: none;
    background-image: none;
}

.table-agenda-professionals tbody tr:first-child {
    box-shadow: none;
}

.table-agenda-professionals tbody tr + tr {
    background-image: linear-gradient(
        to right,
        transparent 1.25rem,
        rgba(226, 232, 240, 0.92) 1.25rem,
        rgba(226, 232, 240, 0.92) calc(100% - 1.25rem),
        transparent calc(100% - 1.25rem)
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: center top;
}

.table-agenda-professionals thead th {
    padding-top: 0.95rem;
    padding-bottom: 0.95rem;
}

.table-agenda-professionals td {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    vertical-align: middle;
}

.table-agenda-professionals th:first-child,
.table-agenda-professionals td:first-child {
    width: 58%;
}

.table-agenda-professionals th:last-child,
.table-agenda-professionals td:last-child {
    width: 42%;
}

.table-agenda-professionals tbody tr:hover td {
    background: rgba(248, 250, 252, 0.62) !important;
}

.table-prof-name-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 700;
    color: var(--gray-800);
}

.table-actions-cell {
    text-align: center;
    white-space: nowrap;
}

.cal-month-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cal-scroll-wrap-month {
    width: 100%;
}

.cal-legend-horizontal {
    width: 100%;
    min-width: 0;
    position: static;
    top: auto;
    padding: 0.95rem 1rem;
}

.cal-legend-horizontal .cal-legend-title {
    margin-bottom: 0;
}

.cal-legend-horizontal .cal-legend-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.cal-legend-horizontal .cal-legend-item {
    width: auto;
    flex: 0 0 auto;
}

.cal-legend-horizontal .cal-legend-chip {
    width: 100%;
    min-width: 0;
    max-width: 180px;
    justify-content: center;
    padding-inline: 1rem;
}

.cal-legend-compact {
    box-shadow: var(--shadow-xs);
}

.table-actions-head {
    text-align: center;
    padding-left: 1.15rem;
    padding-right: 1.15rem;
}

.btn-schedule-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 2.45rem;
    min-width: 13.75rem;
    padding: 0.58rem 1rem;
    border-radius: 999px;
    border-color: rgba(203, 213, 225, 0.95);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    color: var(--gray-700);
    margin-inline: auto;
}

.btn-schedule-mobile .btn-label {
    white-space: nowrap;
}

.btn-schedule-mobile i {
    width: 1rem;
    min-width: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    line-height: 1;
    transform: translateY(-0.01em);
}

.calendar-container,
.agenda-shell,
.calendar-shell {
    background: transparent;
}

.calendar-toolbar,
.agenda-toolbar,
.cal-toolbar {
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.82);
    border-radius: 1.3rem;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.cal-week-apt,
.cal-month-apt,
.cal-mobile-card {
    border: 1px solid rgba(255, 255, 255, 0.42);
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
}

.cal-week-apt {
    padding: 0.7rem 0.8rem;
    border-radius: 1rem;
    font-weight: 600;
}

.cal-week-apt-name,
.cal-month-apt-name {
    font-weight: 800;
    letter-spacing: -0.02em;
}

.cal-week-apt-meta,
.cal-month-apt-prof,
.cal-month-apt-time {
    opacity: 0.78;
}

.cal-day-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.cal-day-col,
.cal-day-body {
    background: rgba(255,255,255,0.72);
}

.cal-day-summary-card,
.cal-month-summary-card {
    width: 100%;
    min-height: 84px;
    border: 1px dashed rgba(148, 163, 184, 0.45);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.76);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    text-align: center;
    color: var(--gray-700);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.cal-day-summary-card:hover,
.cal-month-summary-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    border-color: rgba(99, 102, 241, 0.42);
}

.cal-day-summary-count,
.cal-month-summary-count {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
    color: var(--gray-900);
}

.cal-day-summary-label,
.cal-month-summary-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gray-500);
}

.cal-day-summary-card .cal-day-summary-label,
.cal-month-summary-card .cal-month-summary-label {
    color: inherit;
    font-size: 0.96rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.cal-day-summary-empty {
    width: 100%;
    min-height: 84px;
    border: 1px dashed rgba(203, 213, 225, 0.72);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
    background: rgba(255,255,255,0.54);
}

.cal-day-body > .cal-day-summary-card,
.cal-day-body > .cal-day-summary-empty {
    margin-top: 0.25rem;
}

.cal-month-board {
    border: 1px solid var(--border-soft);
    background: rgba(255,255,255,0.78);
    border-radius: 1.5rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.cal-month-weekdays {
    background: rgba(248, 250, 252, 0.9);
}

.cal-month-weekday {
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--gray-500);
}

.cal-month-grid {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(248,250,252,0.86) 100%);
}

.cal-month-cell {
    min-height: 170px;
    padding: 0.35rem;
}

.cal-month-dayhead {
    padding: 0.7rem 0.75rem 0.6rem;
    margin: -0.35rem -0.35rem 0.5rem;
}

.cal-month-dayhead:hover {
    background: rgba(99, 102, 241, 0.03);
}

.cal-month-daynum {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 999px;
    font-weight: 800;
    background: rgba(255,255,255,0.92);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.94);
}

.cal-month-daybody {
    gap: 0.45rem;
    padding: 0 0.2rem 0.25rem;
}

.cal-month-apt {
    border-left-width: 4px;
    border-radius: 0.95rem;
    padding: 0.6rem 0.7rem 0.62rem;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.06);
}

.cal-month-apt:hover {
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.1);
}

.cal-month-dayempty {
    padding: 0.6rem 0.7rem;
    border: 1px dashed rgba(203, 213, 225, 0.8);
    border-radius: 0.9rem;
    background: rgba(255,255,255,0.56);
}

.clinical-history-card {
    font-family: 'Instrument Sans', sans-serif !important;
    background: rgba(255, 255, 255, 0.86) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 1.6rem !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden;
}

.clinical-history-card .border-b-2,
.clinical-history-card .border-dashed,
.clinical-history-card .border-gray-300 {
    border-color: rgba(226, 232, 240, 0.82) !important;
}

.clinical-history-card .bg-primary-50,
.clinical-history-card .bg-white,
.clinical-history-card .bg-yellow-50,
.clinical-history-card .bg-gray-50,
.clinical-images-shell {
    background: transparent !important;
}

.clinical-history-card .p-6 {
    padding: 1.5rem !important;
}

.clinical-info-item,
.clinical-info-summary > div {
    background: rgba(248, 250, 252, 0.88);
    border: 1px solid rgba(226, 232, 240, 0.88);
    border-radius: 1rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

.clinical-info-summary {
    gap: 0.85rem;
}

.clinical-info-summary > div {
    padding: 0.9rem 1rem;
}

    .clinical-info-item {
        padding: 0.95rem 1rem;
}

.clinical-edit-grid {
    gap: 0.9rem;
}

.clinical-edit-actions {
    margin-top: 0.9rem;
}

.odontogram-header h3,
.treatments-header h3,
.clinical-section-title {
    font-family: 'Instrument Sans', sans-serif;
    letter-spacing: -0.03em;
    text-transform: none;
}

.odontogram-wrapper {
    padding: 1.25rem 1rem 1rem;
    background: rgba(248, 250, 252, 0.8);
    border: 1px solid rgba(226, 232, 240, 0.88);
    border-radius: 1.5rem;
}

.clinical-odontogram-block {
    margin-top: 2rem;
}

.clinical-odontogram-section {
    margin-top: 0.35rem;
    margin-bottom: 1.15rem !important;
}

.clinical-odontogram-section .odontogram-legend {
    row-gap: 0.75rem;
}

.badge-state {
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 700;
    box-shadow: none;
}

.clinical-save-footer {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(203, 213, 225, 0.9);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
}

.clinical-draft-status {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.68);
    color: #475569;
    font-size: 0.82rem;
    font-weight: 700;
}

.clinical-draft-status.is-dirty {
    background: rgba(254, 240, 138, 0.4);
    color: #a16207;
}

.clinical-save-btn {
    width: 100%;
    justify-content: center;
    min-height: 54px;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.clinical-save-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

@media screen and (max-width: 767px) {
    .appointment-form-row {
        grid-template-columns: 1fr;
    }
}

.clinical-save-btn.is-ready {
    box-shadow: 0 14px 30px rgba(79, 70, 229, 0.22);
}

.clinical-images-shell {
    border-radius: 1.3rem;
    padding: 1rem;
}

.clinical-images-grid {
    gap: 1rem;
}

.clinical-image-card {
    overflow: hidden;
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sm);
}

.clinical-image-preview {
    height: 190px;
}

.clinical-image-body {
    padding: 1rem;
}

.clinical-image-actions {
    top: 0.9rem;
    right: 0.9rem;
}

.clinical-image-description {
    line-height: 1.45;
}

.clinical-image-empty {
    border-radius: 1rem;
    border: 1px dashed rgba(203, 213, 225, 0.85);
    background: rgba(248, 250, 252, 0.72);
}

@media (max-width: 1024px) {
    .clinical-image-actions {
        top: 0.7rem;
        right: 0.7rem;
    }

    .clinical-image-action-btn {
        padding: 0.4rem 0.62rem;
        font-size: 0.72rem;
    }

    .metric-info p {
        font-size: 1.75rem;
    }

    .cal-month-cell {
        min-height: 152px;
    }
}

@media (max-width: 768px) {
    .clinical-odontogram-block {
        display: none !important;
    }

    .modal-content-schedule {
        width: calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
    }

    .schedule-day-row {
        grid-template-columns: 1fr;
        gap: 0.85rem;
        padding: 0.95rem;
    }

    .schedule-time-grid {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }

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

    .table-header,
    .treatments-header,
    .odontogram-header {
        align-items: stretch;
        flex-direction: column;
    }

    .metric-card {
        padding: 1.15rem 1.15rem;
    }

    .metric-info p {
        font-size: 1.5rem;
    }

    .cal-month-board {
        border-radius: 1.1rem;
    }

    .cal-month-cell {
        min-height: 132px;
    }

    .cal-month-apt {
        padding: 0.55rem 0.58rem;
    }

    .clinical-history-card .p-6 {
        padding: 1rem !important;
    }

    .clinical-info-item,
    .clinical-info-summary > div {
        padding: 0.8rem 0.85rem;
    }
}

/* ===== VISUAL REFRESH V3 ===== */
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary-600);
    margin-bottom: 0.45rem;
}

.section-title {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 1.65rem;
    line-height: 1.05;
    letter-spacing: -0.05em;
    font-weight: 800;
    color: var(--gray-950);
}

.section-title.section-title-sm {
    font-size: 1.25rem;
}

.section-subtitle {
    margin-top: 0.45rem;
    font-size: 0.94rem;
    line-height: 1.55;
    color: var(--gray-500);
    max-width: 58ch;
}

.section-hero-card {
    padding: 1.4rem 1.55rem;
    border: 1px solid var(--border-soft);
    background:
        radial-gradient(circle at top left, rgba(217, 119, 6, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,250,252,0.88) 100%);
}

.section-hero-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.15rem;
}

.section-hero-compact {
    padding-top: 1.15rem;
    padding-bottom: 1.15rem;
}

.section-hero-copy {
    min-width: 0;
}

.section-headline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0.35rem 1rem;
}

.patient-search-shell {
    position: relative;
}

.patient-search-shell::before {
    content: "\f002";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 1.05rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    pointer-events: none;
    font-size: 0.9rem;
}

.patient-search-shell .form-input {
    min-height: 3.25rem;
    padding-left: 2.8rem !important;
    border-radius: 1.1rem;
}

.table-container.table-container-patients {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#patients-table {
    min-width: 680px;
}

#patients-table td:first-child {
    font-weight: 700;
    white-space: nowrap;
}

#patients-table td:first-child > div:first-child {
    width: 2.5rem !important;
    height: 2.5rem !important;
    border-radius: 0.95rem !important;
    background: linear-gradient(135deg, rgba(88,101,242,0.12) 0%, rgba(255,255,255,0.96) 100%) !important;
    color: var(--primary-700) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

.billing-summary-card {
    padding: 1.25rem 1.3rem 1.35rem;
}

.billing-patient-search-card {
    border: 1px solid rgba(226, 232, 240, 0.82);
    background: rgba(255,255,255,0.72);
    border-radius: 1.25rem;
    padding: 1rem;
    display: grid;
    gap: 0.95rem;
}

.billing-patient-search-card-modal {
    padding: 0;
    border: 0;
    background: transparent;
}

.billing-patient-search-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.billing-patient-search-head h4 {
    margin: 0;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--gray-900);
}

.billing-patient-search-head p {
    margin: 0.35rem 0 0;
    color: var(--gray-500);
    font-size: 0.92rem;
}

.billing-patient-search-count {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    background: rgba(217, 119, 6, 0.08);
    color: var(--primary-700);
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
}

.billing-patient-search-shell .form-input {
    min-height: 3.2rem;
}

.billing-patient-search-results {
    display: grid;
    gap: 0.7rem;
}

.billing-patient-search-empty {
    min-height: 8.5rem;
    border: 1px dashed rgba(203, 213, 225, 0.9);
    border-radius: 1.1rem;
    display: grid;
    place-items: center;
    gap: 0.4rem;
    text-align: center;
    color: var(--gray-500);
    padding: 1.25rem;
}

.billing-patient-search-empty i {
    font-size: 1.15rem;
    color: var(--primary-500);
}

.billing-patient-search-empty p {
    margin: 0;
    max-width: 28rem;
}

.billing-patient-result {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(226, 232, 240, 0.9);
    background: rgba(248, 250, 252, 0.82);
    text-align: left;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.billing-patient-result:hover {
    transform: translateY(-1px);
    border-color: rgba(180, 83, 9, 0.28);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.billing-patient-result-main,
.billing-patient-result-meta {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.billing-patient-result-main strong {
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--gray-900);
}

.billing-patient-result-main span,
.billing-patient-result-meta span {
    color: var(--gray-500);
    font-size: 0.84rem;
}

.billing-patient-result-meta {
    justify-items: end;
}

.billing-patient-result-meta i {
    color: var(--primary-500);
    font-size: 0.9rem;
}

.billing-patient-professional-details {
    display: grid;
    gap: 0.9rem;
}

.billing-patient-professional-card {
    border: 1px solid rgba(226, 232, 240, 0.84);
    border-radius: 1.1rem;
    background: rgba(248, 250, 252, 0.78);
    padding: 1rem;
    display: grid;
    gap: 0.8rem;
}

.billing-patient-professional-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.billing-patient-professional-card-top h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--gray-900);
}

.billing-patient-professional-card-top p {
    margin: 0.3rem 0 0;
    color: var(--gray-500);
    font-size: 0.86rem;
}

.billing-patient-professional-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.billing-patient-professional-metrics div {
    border-radius: 0.95rem;
    border: 1px solid rgba(226, 232, 240, 0.82);
    background: rgba(255,255,255,0.75);
    padding: 0.8rem 0.9rem;
    display: grid;
    gap: 0.3rem;
}

.billing-patient-professional-metrics span {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-500);
}

.billing-patient-professional-metrics strong {
    font-size: 1rem;
    font-weight: 800;
    color: var(--gray-900);
}

.billing-summary-card .table-container,
.settings-panel-card .table-container {
    border-radius: 1.15rem;
    border-color: rgba(226, 232, 240, 0.82) !important;
    background: rgba(255,255,255,0.78);
}

.settings-area {
    display: grid;
    gap: 1.1rem;
}

.settings-nav-card {
    padding: 1.45rem;
}

.settings-nav-header {
    margin-bottom: 1rem;
}

.settings-nav-card .subtext {
    margin-top: 0.42rem;
    color: var(--gray-500);
}

.settings-panel-card {
    padding: 1.4rem;
}

.settings-panel-card > header {
    margin-bottom: 1rem;
}

.settings-panel-card > header h3 {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--gray-900);
}

.settings-subsection {
    border: 1px solid rgba(226, 232, 240, 0.9);
    background: rgba(248, 250, 252, 0.78);
    border-radius: 1.15rem;
    padding: 1rem 1rem 1.05rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}

.settings-subsection h4 {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--gray-900);
}

.settings-list {
    margin-top: 0.8rem;
    border-radius: 1rem;
}

.checkbox-group {
    min-height: 2.75rem;
    padding: 0.2rem 0;
}

.checkbox-group label {
    color: var(--gray-700);
    font-weight: 600;
}

.checkbox-group input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--primary-600);
}

.settings-panel-card .btn-primary,
.section-hero-card .btn-primary,
.billing-summary-card .btn-primary {
    white-space: nowrap;
}

.table-modern tbody tr:hover td {
    background: rgba(248, 250, 252, 0.82);
}

.table-name strong {
    font-weight: 800;
    letter-spacing: -0.02em;
}

.subtle {
    color: var(--gray-500);
}

@media (max-width: 1024px) {
    .section-title {
        font-size: 1.45rem;
    }

    .section-title.section-title-sm {
        font-size: 1.12rem;
    }

    .section-subtitle {
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .section-hero-inline,
    .section-headline {
        flex-direction: column;
        align-items: stretch;
    }

    .section-hero-card,
    .settings-nav-card,
    .settings-panel-card,
    .billing-summary-card {
        padding: 1rem;
    }

    .section-title {
        font-size: 1.28rem;
    }

    .section-title.section-title-sm {
        font-size: 1.06rem;
    }

    .patient-search-shell::before {
        left: 0.9rem;
    }

    .patient-search-shell .form-input {
        padding-left: 2.55rem !important;
    }

    .billing-patient-search-head,
    .billing-patient-result {
        display: grid;
        grid-template-columns: 1fr;
    }

    .billing-patient-search-count {
        white-space: normal;
        justify-content: center;
    }

    .billing-patient-result-meta {
        justify-items: start;
    }

    .billing-patient-professional-card-top {
        flex-direction: column;
        align-items: stretch;
    }

    .billing-patient-professional-metrics {
        grid-template-columns: 1fr;
    }
}

/* ===== VISUAL REFRESH V4 ===== */
.cal-wrapper {
    display: grid;
    gap: 1rem;
}

.cal-layout {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
    min-height: 0;
}

.cal-scroll-wrap {
    flex: 1;
    border: 1px solid var(--border-soft);
    border-radius: 1.5rem;
    background: rgba(255,255,255,0.72);
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
    overflow-y: visible;
}

.cal-grid-day,
.cal-grid-v2 {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(248,250,252,0.82) 100%);
}

.cal-grid-day {
    display: flex;
    height: auto;
    min-width: calc(64px + 240px);
}

.cal-gutter-col {
    background: rgba(248, 250, 252, 0.92);
    border-right: 1px solid rgba(226, 232, 240, 0.82);
}

.cal-gutter-header {
    background: rgba(255,255,255,0.9);
}

.cal-hour-label {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--gray-400);
    letter-spacing: -0.01em;
}

.cal-prof-col {
    flex: 1;
    min-width: 220px;
    border-right: 1px solid rgba(226, 232, 240, 0.82);
}

.cal-prof-header {
    position: sticky;
    top: 0;
    z-index: 4;
    height: 48px;
    box-sizing: border-box;
    padding: 0 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.82);
}

.cal-prof-name {
    display: block;
    width: 100%;
    text-align: center;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--gray-900);
}

.cal-prof-body {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(248,250,252,0.55) 100%);
}

.cal-h-line {
    border-top-color: rgba(226, 232, 240, 0.82) !important;
}

.cal-h-line.cal-h-half {
    opacity: 0.55;
}

.cal-apt-block {
    border-radius: 1rem;
    border: 1px solid rgba(255,255,255,0.42);
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.08);
    padding: 0.62rem 0.72rem;
}

.cal-apt-name {
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.cal-apt-meta {
    opacity: 0.82;
}

.cal-apt-tag {
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(255,255,255,0.82);
    color: #9a3412;
    border: 1px solid rgba(251, 146, 60, 0.25);
}

.cal-apt-overbook {
    padding: 0.3rem 0.46rem 0.3rem;
}

.cal-apt-actions {
    gap: 0.35rem;
}

.cal-apt-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.72);
    color: var(--gray-700);
    box-shadow: none;
}

.cal-apt-btn:hover {
    background: #ffffff;
    color: var(--gray-900);
}

.cal-day-col {
    border-right: 1px solid rgba(226, 232, 240, 0.82);
}

.cal-day-header {
    padding: 1rem 0.95rem;
}

.cal-day-name {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-500);
    font-weight: 800;
}

.cal-day-number {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--gray-900);
}

.cal-day-body {
    background: rgba(255,255,255,0.42);
}

.cal-mobile-section {
    border: 1px solid var(--border-soft);
    border-radius: 1.3rem;
    background: rgba(255,255,255,0.78);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.cal-mobile-section + .cal-mobile-section {
    margin-top: 0.9rem;
}

.cal-mobile-section-header {
    background: rgba(248,250,252,0.88);
    border-bottom: 1px solid rgba(226, 232, 240, 0.82);
    color: var(--gray-800);
    font-family: 'Instrument Sans', sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.cal-mobile-list {
    padding: 0.8rem;
}

.cal-mobile-empty,
.cal-mobile-empty-root {
    padding: 1rem 1.1rem;
    border: 1px dashed rgba(203, 213, 225, 0.82);
    border-radius: 1rem;
    background: rgba(248,250,252,0.72);
    color: var(--gray-500);
}

.cal-legend,
.calendar-legend,
.calendar-filter-legend {
    border: 1px solid var(--border-soft);
    border-radius: 1.3rem;
    background: rgba(255,255,255,0.84);
    box-shadow: var(--shadow-sm);
}

.cal-legend h4,
.calendar-legend h4,
.calendar-filter-legend h4 {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.schedules-hint {
    padding: 0.95rem 1rem;
    border: 1px dashed rgba(203, 213, 225, 0.88);
    border-radius: 1rem;
    background: rgba(248, 250, 252, 0.76);
    color: var(--gray-500);
}

.btn-edit-schedule {
    background: rgba(255,255,255,0.9);
    border-color: var(--border-soft);
}

.btn-edit-schedule:hover {
    background: #fff;
    border-color: var(--border-strong);
}

@media (max-width: 1024px) {
    .cal-scroll-wrap {
        border-radius: 1.2rem;
    }

    .cal-prof-header,
    .cal-day-header {
        padding: 0.85rem 0.8rem;
    }

    .cal-layout {
        grid-template-columns: 1fr;
    }

    .cal-scroll-wrap {
        flex: none;
        width: 100%;
        min-height: fit-content;
    }

    .cal-grid-day {
        min-width: max-content;
    }

    .cal-legend {
        width: 100%;
        min-width: 0;
        position: static;
        top: auto;
        order: -1;
    }

    .cal-legend-horizontal .cal-legend-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cal-legend-horizontal .cal-legend-item,
    .cal-legend-horizontal .cal-legend-chip {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .cal-layout {
        gap: 0.85rem;
    }

    .cal-scroll-wrap,
    .cal-mobile-section {
        border-radius: 1rem;
    }

    .cal-mobile-list {
        padding: 0.7rem;
    }

    .cal-legend {
        padding: 0.9rem;
        border-radius: 1rem;
    }

    .cal-legend-horizontal {
        padding: 0.85rem;
    }

    .cal-legend-horizontal .cal-legend-list {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    .cal-legend-title {
        margin-bottom: 0.1rem;
    }

    .table-container.table-container-schedules {
        overflow: visible;
    }

    .table-container.table-container-schedules table {
        min-width: 0 !important;
        width: 100%;
    }

    .table-container.table-container-schedules thead {
        display: none;
    }

    .table-container.table-container-schedules tbody {
        display: grid;
        gap: 0.9rem;
    }

    .table-container.table-container-schedules tr,
    .table-agenda-professionals tbody tr,
    .table-agenda-professionals tbody tr + tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.85rem;
        padding: 1rem;
        border: 1px solid var(--border-soft);
        border-radius: 1.15rem;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: var(--shadow-sm);
        background-image: none !important;
    }

    .table-container.table-container-schedules td,
    .table-agenda-professionals td {
        display: block;
        width: auto !important;
        min-width: 0;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
    }

    .table-container.table-container-schedules td::before {
        display: none !important;
    }

    .table-agenda-professionals th:first-child,
    .table-agenda-professionals td:first-child {
        width: auto;
    }

    .table-agenda-professionals th:last-child,
    .table-agenda-professionals td:last-child {
        width: 5.2rem;
    }

    .table-actions-head,
    .table-actions-cell {
        text-align: right;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .table-container.table-container-schedules .table-prof-name-cell {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        min-width: 0;
    }

    .table-container.table-container-schedules .table-actions-cell {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .btn-schedule-mobile {
        width: 2.8rem;
        min-width: 2.8rem;
        height: 2.8rem;
        min-height: 2.8rem;
        padding: 0;
        gap: 0;
    }

    .btn-schedule-mobile .btn-label {
        display: none;
    }

    .cal-prof-select .cal-legend-chip {
        min-height: 2.2rem;
    }

    .schedules-hint {
        padding: 0.85rem 0.9rem;
        margin-left: 0 !important;
    }
}

/* ===== BRAND UNIFICATION ===== */
.logo-icon {
    padding: 0.22rem;
}

.app-brand-mark {
    width: 2.5rem !important;
    height: 2.5rem !important;
    border-radius: 0.9rem !important;
    padding: 0.14rem;
}

.mobile-header-brand-mark {
    padding: 0.18rem;
}

.clinical-brand-logo {
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 1rem;
    display: block;
    object-fit: contain;
    box-shadow: 0 16px 34px rgba(180, 83, 9, 0.18);
}

/* ===== THEME TOGGLE ===== */
.login-theme-toggle-wrap {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.6rem;
}

.theme-toggle-btn {
    width: 2.35rem;
    height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: rgba(255,255,255,0.86);
    color: var(--gray-600);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.theme-toggle-btn:hover {
    transform: translateY(-1px);
    background: #fff;
    border-color: var(--border-strong);
    color: var(--gray-900);
}

.theme-toggle-btn.is-dark {
    background: rgba(217, 119, 6, 0.14);
    color: var(--primary-700);
    border-color: rgba(180, 83, 9, 0.22);
}

.theme-toggle-btn-header,
.sidebar-theme-btn {
    flex-shrink: 0;
}

.sidebar-theme-control {
    margin-top: 0.75rem;
    padding: 0.8rem 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 1rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.sidebar-theme-label {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--gray-700);
}

.app-brand {
    position: relative;
}

.app-brand-theme-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

/* ===== DARK THEME ===== */
body.theme-dark {
    --gray-50: #0b1020;
    --gray-100: #11182b;
    --gray-200: #1b2540;
    --gray-300: #2a3657;
    --gray-400: #8090b6;
    --gray-500: #9eaccb;
    --gray-600: #c0cae3;
    --gray-700: #d4dcf0;
    --gray-800: #e6ebf7;
    --gray-900: #f6f8ff;
    --gray-950: #ffffff;
    --surface-0: rgba(13, 19, 35, 0.78);
    --surface-1: rgba(16, 23, 41, 0.9);
    --surface-2: #121a2d;
    --border-soft: rgba(113, 129, 174, 0.22);
    --border-strong: rgba(132, 151, 202, 0.34);
    --shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.22);
    --shadow-md: 0 18px 48px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.36);
    --shadow-xl: 0 42px 96px rgba(0, 0, 0, 0.45);
    color: var(--gray-800);
}

body.theme-dark html,
body.theme-dark {
    background:
        radial-gradient(circle at top left, rgba(217, 119, 6, 0.1), transparent 28%),
        radial-gradient(circle at top right, rgba(180, 83, 9, 0.07), transparent 24%),
        linear-gradient(180deg, #080C18 0%, #0B1020 100%);
}

body.theme-dark #app-view main {
    background:
        radial-gradient(circle at top, rgba(217, 119, 6, 0.06), transparent 28%),
        linear-gradient(180deg, #090E1C 0%, #0D1325 100%);
}

body.theme-dark .app-header,
body.theme-dark #app-sidebar,
body.theme-dark .app-brand,
body.theme-dark .sidebar-user-wrap,
body.theme-dark .user-profile,
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,
body.theme-dark .login-card,
body.theme-dark .login-test-users,
body.theme-dark .cal-scroll-wrap,
body.theme-dark .cal-month-board,
body.theme-dark .cal-mobile-section,
body.theme-dark .cal-legend,
body.theme-dark .calendar-legend,
body.theme-dark .calendar-filter-legend,
body.theme-dark .schedules-hint,
body.theme-dark .settings-subsection,
body.theme-dark .billing-summary-card .table-container,
body.theme-dark .settings-panel-card .table-container {
    background: rgba(15, 22, 40, 0.88) !important;
    border-color: var(--border-soft) !important;
    color: var(--gray-800);
    box-shadow: var(--shadow-sm);
}

body.theme-dark .app-brand {
    background: transparent !important;
}

body.theme-dark .form-feedback {
    background: linear-gradient(180deg, rgba(68, 22, 22, 0.82) 0%, rgba(52, 18, 18, 0.86) 100%);
    border-color: rgba(248, 113, 113, 0.22);
    color: #fecaca;
}

body.theme-dark .input-invalid {
    background: rgba(60, 22, 28, 0.88) !important;
    border-color: rgba(248, 113, 113, 0.45) !important;
    color: #fff5f5 !important;
}

body.theme-dark .field-error-message {
    color: #fda4af;
}

body.theme-dark .app-header {
    background: rgba(10, 15, 28, 0.74) !important;
    border-bottom-color: var(--border-soft) !important;
}

body.theme-dark #app-sidebar {
    background: rgba(9, 14, 27, 0.92) !important;
    border-right-color: var(--border-soft) !important;
    box-shadow: 18px 0 40px rgba(0,0,0,0.28);
}

body.theme-dark .nav-item {
    color: var(--gray-500);
}

body.theme-dark .nav-item:hover {
    background: rgba(255,255,255,0.04);
    color: var(--gray-900);
}

body.theme-dark .nav-item.active {
    background: rgba(217,119,6,0.2) !important;
    color: #FCD34D !important;
    border-color: rgba(251,191,36,0.4) !important;
    box-shadow: 0 4px 16px rgba(217,119,6,0.15) !important;
}

body.theme-dark .nav-sub-item {
    color: var(--gray-500);
}
body.theme-dark .nav-sub-item:hover {
    background: rgba(255,255,255,0.04);
    color: var(--gray-900);
}
body.theme-dark .nav-sub-item.active {
    background: rgba(217,119,6,0.18);
    color: #FCD34D;
}

body.theme-dark .app-brand h1,
body.theme-dark .mobile-header-brand span,
body.theme-dark .logo-container h2,
body.theme-dark .section-title,
body.theme-dark .table-header h3,
body.theme-dark .treatments-header h3,
body.theme-dark .odontogram-header h3,
body.theme-dark .settings-panel-card > header h3,
body.theme-dark .metric-info h3,
body.theme-dark .metric-info p,
body.theme-dark .cal-prof-name,
body.theme-dark .cal-day-number,
body.theme-dark .feedback-dialog-message,
body.theme-dark .feedback-toast-copy {
    color: var(--gray-950) !important;
}

body.theme-dark .app-brand-subtitle,
body.theme-dark .login-subtitle,
body.theme-dark .section-subtitle,
body.theme-dark .subtext,
body.theme-dark .table-header p,
body.theme-dark .dashboard-date-label,
body.theme-dark .feedback-dialog-eyebrow,
body.theme-dark .metric-info h3,
body.theme-dark .cal-dayname,
body.theme-dark .cal-weekday,
body.theme-dark .text-gray-500,
body.theme-dark .text-gray-400 {
    color: var(--gray-500) !important;
}

body.theme-dark .text-gray-800,
body.theme-dark .text-gray-700,
body.theme-dark .text-gray-600,
body.theme-dark .text-gray-900,
body.theme-dark .text-gray-900 *,
body.theme-dark .table-name,
body.theme-dark .subtle,
body.theme-dark .cal-week-apt-meta,
body.theme-dark .cal-month-apt-prof,
body.theme-dark .cal-month-apt-time,
body.theme-dark .cal-apt-meta {
    color: var(--gray-700) !important;
}

body.theme-dark .btn-secondary,
body.theme-dark .btn-ghost,
body.theme-dark .theme-toggle-btn,
body.theme-dark .sidebar-logout-btn,
body.theme-dark .btn-edit-schedule {
    background: rgba(255,255,255,0.04);
    border-color: var(--border-soft);
    color: var(--gray-700);
}

body.theme-dark .btn-secondary:hover,
body.theme-dark .btn-ghost:hover,
body.theme-dark .theme-toggle-btn:hover,
body.theme-dark .sidebar-logout-btn:hover,
body.theme-dark .btn-edit-schedule:hover {
    background: rgba(255,255,255,0.08);
    border-color: var(--border-strong);
    color: var(--gray-950);
}

body.theme-dark .schedule-day-row {
    background: rgba(255,255,255,0.02) !important;
    border-color: rgba(132, 151, 202, 0.16) !important;
}

body.theme-dark .schedule-day-name {
    color: var(--gray-900) !important;
}

body.theme-dark .schedule-time-caption,
body.theme-dark .schedule-time-separator,
body.theme-dark .schedule-form-intro {
    color: var(--gray-500) !important;
}

body.theme-dark .btn-primary {
    box-shadow: 0 12px 28px rgba(180, 83, 9, 0.32) !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark .form-input {
    background: rgba(255,255,255,0.04) !important;
    border-color: rgba(132, 151, 202, 0.18) !important;
    color: var(--gray-900) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder,
body.theme-dark select,
body.theme-dark .form-input::placeholder {
    color: var(--gray-400) !important;
}

body.theme-dark input:focus,
body.theme-dark select:focus,
body.theme-dark textarea:focus,
body.theme-dark .form-input:focus {
    border-color: rgba(217, 119, 6, 0.5) !important;
    box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.14) !important;
}

body.theme-dark table thead th,
body.theme-dark .cal-month-weekdays,
body.theme-dark .cal-mobile-section-header,
body.theme-dark .cal-prof-header,
body.theme-dark .cal-day-header,
body.theme-dark .table-header {
    background: rgba(255,255,255,0.03) !important;
    border-color: var(--border-soft) !important;
    color: var(--gray-500) !important;
}

body.theme-dark table tbody tr:hover td,
body.theme-dark .table-container tbody tr:hover td {
    background: rgba(255,255,255,0.03) !important;
}

body.theme-dark table td,
body.theme-dark table th {
    border-color: rgba(132, 151, 202, 0.12) !important;
}

body.theme-dark .badge,
body.theme-dark .badge-state,
body.theme-dark .cal-apt-tag {
    box-shadow: none;
}

body.theme-dark .cal-apt-cancelled {
    background: repeating-linear-gradient(
        135deg,
        rgba(220,38,38,0.22) 0px, rgba(220,38,38,0.22) 6px,
        rgba(220,38,38,0.10) 6px, rgba(220,38,38,0.10) 12px
    ) !important;
    border-left-color: #ef4444 !important;
}
body.theme-dark .cal-apt-cancelled .cal-apt-name,
body.theme-dark .cal-apt-cancelled .cal-apt-meta {
    color: #fca5a5;
}

body.theme-dark .badge-success {
    background: rgba(22, 163, 74, 0.14) !important;
    color: #86efac !important;
    border-color: rgba(34,197,94,0.18) !important;
}

body.theme-dark .badge-warning {
    background: rgba(217, 119, 6, 0.14) !important;
    color: #fdba74 !important;
    border-color: rgba(251,146,60,0.18) !important;
}

body.theme-dark .badge-danger {
    background: rgba(220, 38, 38, 0.14) !important;
    color: #fca5a5 !important;
    border-color: rgba(248,113,113,0.18) !important;
}

body.theme-dark .badge-info,
body.theme-dark .badge-primary {
    background: rgba(217,119,6,0.18) !important;
    color: #FCD34D !important;
    border-color: rgba(251,191,36,0.22) !important;
}

body.theme-dark .badge-gray {
    background: rgba(255,255,255,0.05) !important;
    color: var(--gray-600) !important;
    border-color: rgba(132,151,202,0.14) !important;
}

body.theme-dark .feedback-dialog-overlay,
body.theme-dark .modal-overlay {
    background: rgba(1, 6, 18, 0.56);
}

body.theme-dark .modal-footer,
body.theme-dark .schedule-modal-footer {
    background: rgba(13, 19, 35, 0.96);
    border-top-color: rgba(132, 151, 202, 0.14);
}

body.theme-dark .feedback-toast {
    background: rgba(16, 23, 41, 0.95);
    border-color: var(--border-soft);
}

body.theme-dark .feedback-toast-success .feedback-toast-icon {
    background: rgba(22,163,74,0.18);
    color: #86efac;
}

body.theme-dark .feedback-toast-error .feedback-toast-icon,
body.theme-dark .feedback-dialog-danger .feedback-dialog-badge,
body.theme-dark .feedback-dialog-error .feedback-dialog-badge {
    background: rgba(220,38,38,0.18);
    color: #fca5a5;
}

body.theme-dark .feedback-toast-info .feedback-toast-icon,
body.theme-dark .feedback-dialog-info .feedback-dialog-badge {
    background: rgba(217,119,6,0.2);
    color: #FCD34D;
}

body.theme-dark .feedback-dialog-success .feedback-dialog-badge {
    background: rgba(22,163,74,0.18);
    color: #86efac;
}

body.theme-dark .app-loading-card {
    background: rgba(15, 22, 40, 0.96);
    border-color: rgba(132, 151, 202, 0.22);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

body.theme-dark .app-loading-eyebrow {
    color: #94a3b8;
}

body.theme-dark .app-loading-message {
    color: #f8fafc;
}

body.theme-dark .cal-scroll-wrap,
body.theme-dark .cal-mobile-section,
body.theme-dark .cal-month-board,
body.theme-dark .cal-legend,
body.theme-dark .calendar-legend,
body.theme-dark .calendar-filter-legend {
    background: rgba(14, 21, 38, 0.9) !important;
}

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-day-body {
    background: linear-gradient(180deg, rgba(19, 28, 49, 0.78) 0%, rgba(12, 19, 34, 0.92) 100%) !important;
}

body.theme-dark .cal-gutter-col {
    background: rgba(255,255,255,0.02) !important;
}

body.theme-dark .cal-mobile-card {
    background: rgba(30, 41, 65, 0.9) !important;
    border-color: rgba(132,151,202,0.18) !important;
}

body.theme-dark .cal-mobile-card-time {
    color: #f1f5f9 !important;
}

body.theme-dark .cal-mobile-card-name {
    color: #e2e8f0 !important;
}

body.theme-dark .cal-mobile-card-duration,
body.theme-dark .cal-mobile-card-prof {
    color: #94a3b8 !important;
}

body.theme-dark .cal-mobile-section-header {
    color: #cbd5e1 !important;
}

body.theme-dark .cal-mobile-empty {
    color: #64748b !important;
}

body.theme-dark .cal-mobile-count {
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}

body.theme-dark .cal-gutter-header {
    background: rgba(255,255,255,0.04) !important;
    border-bottom-color: rgba(132,151,202,0.14) !important;
}

body.theme-dark .cal-hour-label {
    color: var(--gray-400) !important;
}

body.theme-dark .cal-h-line {
    border-top-color: rgba(132,151,202,0.14) !important;
}

body.theme-dark .cal-month-cell,
body.theme-dark .cal-prof-col,
body.theme-dark .cal-day-col {
    border-color: rgba(132,151,202,0.14) !important;
}

body.theme-dark .cal-month-cell {
    background: linear-gradient(180deg, rgba(20, 29, 49, 0.96) 0%, rgba(14, 21, 38, 0.98) 100%) !important;
}

body.theme-dark .cal-month-cell.is-outside-month {
    background: linear-gradient(180deg, rgba(15, 22, 38, 0.98) 0%, rgba(11, 17, 30, 0.98) 100%) !important;
}

body.theme-dark .cal-month-daynum {
    background: rgba(255,255,255,0.06);
    color: var(--gray-900);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

body.theme-dark .cal-month-dayhead {
    background: rgba(255,255,255,0.02);
    border-bottom-color: rgba(132, 151, 202, 0.2);
}

body.theme-dark .cal-grid-v2 .cal-day-header {
    background: rgba(17, 25, 43, 0.98) !important;
    border-bottom-color: rgba(132, 151, 202, 0.18) !important;
}

body.theme-dark .cal-grid-v2 .cal-day-body {
    background: linear-gradient(180deg, rgba(20, 29, 49, 0.96) 0%, rgba(14, 21, 38, 0.98) 100%) !important;
}

body.theme-dark .cal-grid-v2 .cal-day-col {
    border-color: rgba(132,151,202,0.14) !important;
}

body.theme-dark .cal-grid-v2 .cal-day-summary-empty {
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(132,151,202,0.2) !important;
    color: var(--gray-500) !important;
}

body.theme-dark .cal-grid-v2 .cal-day-number {
    color: var(--gray-900) !important;
}

body.theme-dark .cal-day-header:hover,
body.theme-dark .cal-month-dayhead:hover {
    background: rgba(255,255,255,0.04);
}

body.theme-dark .cal-day-count,
body.theme-dark .cal-month-daycount {
    color: var(--gray-500);
}

body.theme-dark .cal-month-weekdays {
    background: rgba(17, 25, 43, 0.98) !important;
    border-bottom-color: rgba(132, 151, 202, 0.18) !important;
}

body.theme-dark .cal-month-weekday {
    border-right-color: rgba(132, 151, 202, 0.14) !important;
    color: var(--gray-500) !important;
}

body.theme-dark .cal-month-dayempty,
body.theme-dark .cal-mobile-empty,
body.theme-dark .cal-mobile-empty-root,
body.theme-dark .clinical-image-empty,
body.theme-dark .clinical-images-summary > div,
body.theme-dark .schedules-hint {
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(132,151,202,0.2) !important;
    color: var(--gray-500) !important;
}

body.theme-dark .clinical-images-summary span {
    color: var(--gray-500) !important;
}

body.theme-dark .clinical-images-summary strong {
    color: var(--gray-950) !important;
}

body.theme-dark .cal-apt-btn {
    background: rgba(255,255,255,0.08);
    border-color: rgba(132,151,202,0.18);
    color: var(--gray-700);
}

body.theme-dark .cal-apt-btn:hover {
    background: rgba(255,255,255,0.12);
    color: var(--gray-950);
}

body.theme-dark .clinical-info-item,
body.theme-dark .clinical-info-summary > div,
body.theme-dark .clinical-image-card {
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(132,151,202,0.16) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

body.theme-dark .odontogram-wrapper {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    box-shadow: none !important;
}

body.theme-dark .odontogram-wrapper .text-gray-500,
body.theme-dark .odontogram-wrapper .text-gray-600,
body.theme-dark .odontogram-wrapper .text-gray-700,
body.theme-dark .odontogram-wrapper .text-gray-800,
body.theme-dark .odontogram-wrapper .text-gray-900,
body.theme-dark .odontogram-wrapper span,
body.theme-dark .odontogram-wrapper div {
    color: #475569 !important;
}

body.theme-dark .odontogram-wrapper .border-gray-300,
body.theme-dark .odontogram-wrapper .border-dashed {
    border-color: #cbd5e1 !important;
}

body.theme-dark .clinical-history-card .border-b-2,
body.theme-dark .clinical-history-card .border-dashed,
body.theme-dark .clinical-history-card .border-gray-300 {
    border-color: rgba(132,151,202,0.18) !important;
}

body.theme-dark .clinical-history-card .bg-primary-50,
body.theme-dark .clinical-history-card .bg-white,
body.theme-dark .clinical-history-card .bg-yellow-50,
body.theme-dark .clinical-history-card .bg-gray-50,
body.theme-dark .clinical-images-shell {
    background: transparent !important;
}

body.theme-dark .clinical-image-action-btn {
    background: rgba(15, 23, 42, 0.82);
    border-color: rgba(132, 151, 202, 0.26);
    color: #f8fafc;
}

body.theme-dark .clinical-image-action-btn:hover {
    background: rgba(30, 41, 59, 0.94);
    border-color: rgba(132, 151, 202, 0.4);
}

body.theme-dark .clinical-image-action-delete {
    background: rgba(127, 29, 29, 0.78);
}

body.theme-dark .clinical-image-inline-link {
    color: #a5b4fc;
}

body.theme-dark .clinical-image-inline-link:hover {
    color: #c7d2fe;
}

body.theme-dark .login-card {
    background: rgba(15, 23, 42, 0.95) !important;
    border-color: rgba(217,119,6,0.18) !important;
    box-shadow: 0 36px 90px rgba(0,0,0,0.55), 0 0 0 1px rgba(217,119,6,0.08) !important;
}

/* ================================================================
   ODENTARA — REDISEÑO COMPLETO "Bisturí & Bronce"
   Sidebar navy profundo · Acento ámbar/dorado · Instrument Sans
   Estética: clínica privada premium, cálida, precisa, inconfundible
   ================================================================ */

/* ── TIPOGRAFÍA ── */
body, .font-inter, button, input, select, textarea {
    font-family: 'Instrument Sans', sans-serif !important;
}

.logo-container h2,
.app-brand h1,
.section-title,
.table-header h3,
.settings-card h3,
.settings-card h4,
.modal-header h3,
.metric-info p {
    font-family: 'Instrument Sans', sans-serif;
}

.logo-container h2 {
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    font-style: italic;
    letter-spacing: -0.03em !important;
    color: #0F172A !important;
}

.app-brand h1 {
    font-weight: 700 !important;
    font-style: italic;
    letter-spacing: -0.02em !important;
}

.metric-info p {
    font-size: 2rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
}

/* ── FONDO CONTENIDO — papel cálido ── */
body.bg-gray-50,
#main-content,
#app-view main {
    background: #F7F6F2 !important;
}

/* ── LOGIN — navy oscuro, card flotante ── */
#login-view {
    background:
        radial-gradient(ellipse 65% 55% at 18% 28%, rgba(217,119,6,0.14) 0%, transparent 55%),
        radial-gradient(ellipse 50% 45% at 82% 72%, rgba(180,83,9,0.09) 0%, transparent 50%),
        linear-gradient(155deg, #0A0F1E 0%, #0F172A 45%, #0A1020 100%) !important;
}

.login-card {
    background: #ffffff !important;
    border: none !important;
    box-shadow:
        0 0 0 1px rgba(15,23,42,0.05),
        0 48px 120px rgba(0,0,0,0.48),
        0 20px 48px rgba(0,0,0,0.22) !important;
    border-radius: 2rem !important;
    padding: 2.5rem !important;
}

.login-subtitle {
    font-size: 0.9rem !important;
    color: #64748B !important;
    margin-bottom: 1.75rem !important;
    font-style: italic;
}

.login-decoration .shape-1 {
    background: rgba(217,119,6,0.55) !important;
    width: 500px !important;
    height: 500px !important;
    filter: blur(110px) !important;
    opacity: 0.38 !important;
}

.login-decoration .shape-2 {
    background: rgba(180,83,9,0.4) !important;
    filter: blur(90px) !important;
    opacity: 0.3 !important;
}

/* ── SIDEBAR NAVY PROFUNDO ── */
#app-sidebar {
    background: #0F172A !important;
    border-right: 1px solid rgba(255,255,255,0.05) !important;
    box-shadow: 4px 0 32px rgba(0,0,0,0.15) !important;
}

.app-brand {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    padding: 1.4rem 1.25rem 1.2rem !important;
}

.app-brand h1 {
    color: #F8FAFC !important;
    font-size: 1rem !important;
    letter-spacing: -0.02em !important;
}

.app-brand-subtitle {
    font-size: 0.68rem !important;
    color: rgba(148,163,184,0.55) !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    font-family: 'Instrument Sans', sans-serif !important;
    font-style: normal !important;
    margin-top: 0.2rem !important;
}

.app-brand-mark {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%) !important;
    box-shadow: 0 4px 14px rgba(217,119,6,0.4) !important;
    border-radius: 0.6rem !important;
}

/* ── NAV ITEMS SOBRE NAVY ── */
#sidebar-nav {
    padding: 0.85rem 0.65rem !important;
}

.nav-item {
    color: rgba(148,163,184,0.72) !important;
    border-left: 2px solid transparent !important;
    border-radius: 0.65rem !important;
    margin: 0.1rem 0 !important;
    padding: 0.72rem 0.9rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.005em !important;
}

.nav-item:hover {
    background: rgba(255,255,255,0.06) !important;
    color: rgba(241,245,249,0.88) !important;
    border-left-color: transparent !important;
}

.nav-item.active {
    background: rgba(217,119,6,0.18) !important;
    color: #FCD34D !important;
    border-left-color: var(--primary-400) !important;
    font-weight: 600 !important;
}

.nav-item i {
    width: 1.1rem !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    font-size: 0.85rem !important;
}

/* ── USUARIO SIDEBAR ── */
.sidebar-user-wrap {
    background: rgba(0,0,0,0.22) !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
}

.user-profile {
    background: rgba(255,255,255,0.045) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: none !important;
    border-radius: 0.9rem !important;
}

.user-profile #user-initials {
    background: rgba(217,119,6,0.22) !important;
    color: #FCD34D !important;
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: 0.95rem !important;
    border-radius: 0.75rem !important;
}

.user-profile #user-name {
    color: rgba(248,250,252,0.88) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
}

.user-profile #user-role-display {
    color: rgba(148,163,184,0.52) !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-style: normal !important;
}

.sidebar-logout-btn {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: rgba(148,163,184,0.48) !important;
}

.sidebar-logout-btn:hover {
    background: rgba(239,68,68,0.15) !important;
    border-color: rgba(252,165,165,0.25) !important;
    color: #FCA5A5 !important;
    transform: translateY(-1px) !important;
}

/* ── APP HEADER ── */
.app-header {
    background: rgba(247,246,242,0.9) !important;
    border-bottom: 1px solid rgba(15,23,42,0.08) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}

/* ── CARDS ── */
.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 1px 2px rgba(15,23,42,0.03) !important;
    border-radius: 1.25rem !important;
}

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

/* ── METRIC CARDS ── */
.metrics-grid {
    gap: 1.25rem !important;
    margin-bottom: 1.75rem !important;
}

.metric-card {
    padding: 1.5rem 1.5rem 1.35rem !important;
    border-left: 3px solid var(--primary-400) !important;
    border-radius: 1.25rem !important;
    position: relative !important;
    overflow: hidden !important;
}

.metric-card:has(.metric-blue)   { border-left-color: var(--primary-500) !important; }
.metric-card:has(.metric-green)  { border-left-color: var(--success) !important; }
.metric-card:has(.metric-orange) { border-left-color: var(--warning) !important; }
.metric-card:has(.metric-red)    { border-left-color: var(--danger) !important; }

.metric-icon {
    width: 3rem !important;
    height: 3rem !important;
    flex-shrink: 0 !important;
    border-radius: 0.85rem !important;
    font-size: 1.15rem !important;
}

.metric-blue   { background: #FEF9C3 !important; color: #A16207 !important; }
.metric-green  { background: #D1FAE5 !important; color: #065F46 !important; }
.metric-orange { background: #FEF3C7 !important; color: #92400E !important; }
.metric-red    { background: #FEE2E2 !important; color: #991B1B !important; }

.metric-info h3 {
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: #64748B !important;
    font-family: 'Instrument Sans', sans-serif !important;
    font-style: normal !important;
}

.metric-info p {
    color: #0F172A !important;
    margin-top: 0.3rem !important;
}

/* ── TABLA ── */
.table-container {
    background: #ffffff !important;
    border: 1px solid rgba(15,23,42,0.07) !important;
    box-shadow: 0 1px 4px rgba(15,23,42,0.05) !important;
    border-radius: 1.25rem !important;
}

.table-header h3 {
    color: #0F172A !important;
}

th {
    background: #FAFAF8 !important;
    color: #64748B !important;
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.1em !important;
    border-bottom: 1px solid rgba(15,23,42,0.07) !important;
}

td {
    border-bottom: 1px solid rgba(15,23,42,0.05) !important;
    color: #334155 !important;
}

tr:hover td {
    background: #FFFBEB !important;
}

/* ── BOTONES ── */
.btn {
    font-family: 'Instrument Sans', sans-serif !important;
    font-weight: 500 !important;
    border-radius: 0.6rem !important;
}

.btn-primary {
    background: var(--primary-700) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(180,83,9,0.3) !important;
    border-radius: 0.6rem !important;
}

.btn-primary:hover {
    background: #92400E !important;
    box-shadow: 0 8px 20px rgba(180,83,9,0.4) !important;
    transform: translateY(-1px) !important;
}

.btn-secondary {
    background: #FFFBEB !important;
    color: var(--primary-700) !important;
    border: 1px solid rgba(217,119,6,0.2) !important;
}

.btn-secondary:hover {
    background: var(--primary-100) !important;
}

/* ── INPUTS ── */
.input-group label {
    font-family: 'Instrument Sans', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #475569 !important;
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus,
.form-input:focus {
    border-color: var(--primary-500) !important;
    box-shadow: 0 0 0 3px rgba(217,119,6,0.15) !important;
}

/* ── SETTINGS CARDS ── */
.settings-card,
.settings-box {
    background: #ffffff !important;
    border: 1px solid rgba(15,23,42,0.07) !important;
    box-shadow: 0 1px 4px rgba(15,23,42,0.05) !important;
    border-radius: 1.25rem !important;
}

.settings-card h3,
.settings-card h4 {
    color: #0F172A !important;
}

.settings-subnav-item.active {
    border-color: var(--primary-400) !important;
    background: linear-gradient(180deg, #FFFBEB 0%, #ffffff 100%) !important;
    box-shadow: 0 6px 20px rgba(217,119,6,0.12) !important;
}

.settings-subnav-item:hover {
    border-color: var(--primary-300) !important;
}

/* ── MODALS ── */
.modal-content {
    border-radius: 1.5rem !important;
    box-shadow: 0 30px 80px rgba(0,0,0,0.14), 0 8px 20px rgba(0,0,0,0.07) !important;
}

.modal-header h3 {
    color: #0F172A !important;
}

/* ── CALENDARIO ── */
.cal-today-badge {
    background: var(--primary-700) !important;
    color: #fff !important;
}

.cal-today-header .cal-day-name {
    color: var(--primary-600) !important;
}

.cal-view-switcher .btn.is-active {
    background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-500) 100%) !important;
    box-shadow: 0 6px 16px rgba(180,83,9,0.3) !important;
}

/* ── LOADING SPINNER ── */
.app-loading-spinner {
    border-color: rgba(217,119,6,0.15) !important;
    border-top-color: var(--primary-700) !important;
}

/* ── CHECKBOXES ── */
.checkbox-group input[type="checkbox"] {
    accent-color: var(--primary-700) !important;
}

/* ── BADGES ── */
.badge-primary {
    background: var(--primary-100) !important;
    color: var(--primary-700) !important;
}

/* ── SEARCH / DATE FILTERS ── */
#search-patient:focus,
#apt-patient:focus {
    border-color: var(--primary-400) !important;
    box-shadow: 0 0 0 4px rgba(217,119,6,0.12) !important;
}

.dashboard-date-filter:focus {
    border-color: var(--primary-500) !important;
    box-shadow: 0 0 0 3px rgba(217,119,6,0.14) !important;
}

/* ── MOBILE HEADER BRAND ── */
.mobile-header-brand-mark {
    background: var(--primary-700) !important;
    box-shadow: 0 4px 12px rgba(180,83,9,0.3) !important;
}

/* ── SECTION TITLE ── */
.section-title {
    font-family: 'Instrument Sans', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
    color: #0F172A !important;
}

.print-hidden {
    display: revert;
}

.clinical-print-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.65rem;
}

.clinical-header-actions {
    min-width: 220px;
}

@page {
    size: A4 landscape;
    margin: 10mm;
}

@media print {
    body.printing-clinical-history {
        background: #ffffff !important;
        color: #111827 !important;
    }

    body.printing-clinical-history #app-sidebar,
    body.printing-clinical-history .app-topbar,
    body.printing-clinical-history .sidebar-backdrop,
    body.printing-clinical-history .mobile-header-left,
    body.printing-clinical-history .mobile-header-right,
    body.printing-clinical-history #page-title,
    body.printing-clinical-history .print-hidden,
    body.printing-clinical-history .clinical-history-card button,
    body.printing-clinical-history .clinical-history-card .btn,
    body.printing-clinical-history .clinical-images-shell {
        display: none !important;
    }

    body.printing-clinical-history #app-view,
    body.printing-clinical-history main,
    body.printing-clinical-history #main-content,
    body.printing-clinical-history .clinical-print-root {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #ffffff !important;
    }

    body.printing-clinical-history .clinical-history-card {
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #ffffff !important;
        color: #111827 !important;
    }

    body.printing-clinical-history .clinical-history-card * {
        color: #111827 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    body.printing-clinical-history .clinical-history-card .p-6 {
        padding: 0 !important;
    }

    body.printing-clinical-history .clinical-history-card .bg-primary-50,
    body.printing-clinical-history .clinical-history-card .bg-white,
    body.printing-clinical-history .clinical-history-card .bg-yellow-50,
    body.printing-clinical-history .clinical-history-card .bg-gray-50,
    body.printing-clinical-history .clinical-info-item,
    body.printing-clinical-history .clinical-info-summary > div,
    body.printing-clinical-history .odontogram-wrapper,
    body.printing-clinical-history .table-container {
        background: #ffffff !important;
    }

    body.printing-clinical-history .clinical-info-item,
    body.printing-clinical-history .clinical-info-summary > div,
    body.printing-clinical-history .odontogram-wrapper,
    body.printing-clinical-history .table-container,
    body.printing-clinical-history textarea {
        border-color: #cbd5e1 !important;
    }

    body.printing-clinical-history .clinical-info-grid {
        margin-bottom: 0.75rem !important;
        padding-bottom: 0.6rem !important;
        gap: 0.32rem !important;
    }

    body.printing-clinical-history .clinical-info-summary,
    body.printing-clinical-history .clinical-edit-grid,
    body.printing-clinical-history .clinical-edit-grid-compact {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 0.32rem !important;
        margin-bottom: 0.32rem !important;
    }

    body.printing-clinical-history .clinical-info-summary > div,
    body.printing-clinical-history .clinical-info-item {
        padding: 0.22rem 0.32rem !important;
        font-size: 0.68rem !important;
        line-height: 1.1 !important;
        border-radius: 0.4rem !important;
        min-height: auto !important;
    }

    body.printing-clinical-history .clinical-info-summary strong,
    body.printing-clinical-history .clinical-info-item strong {
        font-size: 0.5rem !important;
        letter-spacing: 0.05em !important;
        margin-bottom: 0.1rem !important;
    }

    body.printing-clinical-history .clinical-info-summary .text-base,
    body.printing-clinical-history .clinical-info-item .text-base,
    body.printing-clinical-history .clinical-info-item div {
        font-size: 0.7rem !important;
        line-height: 1.05 !important;
    }

    body.printing-clinical-history .clinical-info-item input,
    body.printing-clinical-history .clinical-info-item .form-input,
    body.printing-clinical-history .clinical-readonly,
    body.printing-clinical-history .clinical-static-value {
        min-height: 24px !important;
        height: 24px !important;
        padding: 0.12rem 0.35rem !important;
        font-size: 0.68rem !important;
        line-height: 1 !important;
        border-radius: 0.45rem !important;
        margin-top: 0 !important;
        box-shadow: none !important;
    }

    body.printing-clinical-history .clinical-info-item-wide {
        grid-column: span 2 !important;
        max-width: none !important;
    }

    body.printing-clinical-history .odontogram-wrapper {
        overflow: visible !important;
        zoom: 0.82 !important;
        padding: 0.4rem !important;
        margin-bottom: 0.55rem !important;
        page-break-inside: avoid;
    }

    body.printing-clinical-history #treatments-table th:last-child,
    body.printing-clinical-history #treatments-table td:last-child {
        display: none !important;
    }

    body.printing-clinical-history #treatments-table,
    body.printing-clinical-history .table-container table {
        page-break-inside: auto;
    }

    body.printing-clinical-history #treatments-table tr,
    body.printing-clinical-history .table-container tr {
        page-break-inside: avoid;
    }

    body.printing-clinical-history textarea {
        min-height: 110px !important;
        height: auto !important;
        resize: none !important;
        padding: 0.75rem !important;
        overflow: visible !important;
    }
}

body.theme-dark .login-test-users {
    background: rgba(255,255,255,0.03) !important;
}

body.theme-dark .metric-card::after,
body.theme-dark .section-hero-card {
    background:
        radial-gradient(circle at top left, rgba(217, 119, 6, 0.10), transparent 34%),
        linear-gradient(180deg, rgba(18,27,48,0.88) 0%, rgba(14,22,39,0.92) 100%) !important;
}

body.theme-dark .metric-card::after {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 62%) !important;
}

body.theme-dark .section-hero-card,
body.theme-dark .billing-summary-card,
body.theme-dark .settings-nav-card,
body.theme-dark .settings-panel-card {
    border-color: rgba(132,151,202,0.18) !important;
}

body.theme-dark .patient-search-shell::before {
    color: var(--gray-400);
}

body.theme-dark .billing-patient-search-card {
    background: rgba(15, 23, 42, 0.42);
    border-color: rgba(99, 102, 241, 0.16);
}

body.theme-dark .billing-patient-search-head h4 {
    color: rgba(248, 250, 252, 0.96);
}

body.theme-dark .billing-patient-search-head p,
body.theme-dark .billing-patient-search-empty,
body.theme-dark .billing-patient-result-main span,
body.theme-dark .billing-patient-result-meta span {
    color: rgba(191, 219, 254, 0.72);
}

body.theme-dark .billing-patient-search-count {
    background: rgba(99, 102, 241, 0.16);
    color: rgba(224, 231, 255, 0.95);
}

body.theme-dark .billing-patient-search-empty {
    border-color: rgba(148, 163, 184, 0.22);
}

body.theme-dark .billing-patient-result {
    background: rgba(30, 41, 59, 0.72);
    border-color: rgba(148, 163, 184, 0.18);
}

body.theme-dark .billing-patient-result:hover {
    border-color: rgba(129, 140, 248, 0.38);
    box-shadow: 0 14px 34px rgba(2, 8, 23, 0.3);
}

body.theme-dark .billing-patient-result-main strong {
    color: rgba(248, 250, 252, 0.96);
}

body.theme-dark .billing-patient-professional-card {
    background: rgba(30, 41, 59, 0.72);
    border-color: rgba(148, 163, 184, 0.18);
}

body.theme-dark .billing-patient-professional-card-top h4,
body.theme-dark .billing-patient-professional-metrics strong {
    color: rgba(248, 250, 252, 0.96);
}

body.theme-dark .billing-patient-professional-card-top p,
body.theme-dark .billing-patient-professional-metrics span {
    color: rgba(191, 219, 254, 0.72);
}

body.theme-dark .billing-patient-professional-metrics div {
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(148, 163, 184, 0.16);
}

body.theme-dark .theme-toggle-btn {
    background: rgba(255,255,255,0.05);
    color: var(--gray-700);
    border-color: rgba(132,151,202,0.18);
}

body.theme-dark .theme-toggle-btn:hover {
    background: rgba(255,255,255,0.09);
    color: var(--gray-950);
}

body.theme-dark .sidebar-theme-control {
    border-color: var(--border-soft);
    background: rgba(255,255,255,0.04);
    box-shadow: none;
}

body.theme-dark .sidebar-theme-label {
    color: var(--gray-500);
}

body.theme-dark .settings-subnav-item {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(132,151,202,0.16) !important;
    box-shadow: none;
}

body.theme-dark .settings-subnav-item:hover {
    background: rgba(255,255,255,0.09) !important;
    border-color: rgba(111,120,255,0.28) !important;
}

body.theme-dark .settings-subnav-item.active {
    background: linear-gradient(180deg, rgba(88,101,242,0.22) 0%, rgba(255,255,255,0.08) 100%) !important;
    border-color: rgba(111,120,255,0.32) !important;
    box-shadow: 0 16px 36px rgba(0,0,0,0.2);
}

body.theme-dark .settings-subnav-item span {
    color: var(--gray-950) !important;
}

body.theme-dark .settings-subnav-item small {
    color: var(--gray-500) !important;
}

body.theme-dark .dashboard-status-select {
    background: rgba(255,255,255,0.05) !important;
    color: var(--gray-900) !important;
    border-color: rgba(132,151,202,0.18) !important;
}

body.theme-dark .dashboard-status-select option {
    background: #141c31;
    color: #f8fbff;
}

body.theme-dark .dashboard-status-select.badge-success {
    background: rgba(22, 163, 74, 0.16) !important;
    color: #bbf7d0 !important;
    border-color: rgba(34, 197, 94, 0.22) !important;
}

body.theme-dark .dashboard-status-select.badge-warning {
    background: rgba(217, 119, 6, 0.16) !important;
    color: #fdba74 !important;
    border-color: rgba(251, 146, 60, 0.22) !important;
}

body.theme-dark .dashboard-status-select.badge-danger {
    background: rgba(220, 38, 38, 0.16) !important;
    color: #fca5a5 !important;
    border-color: rgba(248, 113, 113, 0.22) !important;
}

body.theme-dark .dashboard-status-select.badge-info {
    background: rgba(59, 130, 246, 0.16) !important;
    color: #bfdbfe !important;
    border-color: rgba(96, 165, 250, 0.22) !important;
}

body.theme-dark .dashboard-status-select.badge-purple {
    background: rgba(124, 58, 237, 0.18) !important;
    color: #ddd6fe !important;
    border-color: rgba(167, 139, 250, 0.22) !important;
}

body.theme-dark .dashboard-wa-btn,
body.theme-dark .dashboard-whatsapp-btn,
body.theme-dark a[href*="wa.me"] {
    color: var(--gray-700) !important;
}

body.theme-dark .dashboard-wa-btn:hover,
body.theme-dark .dashboard-whatsapp-btn:hover,
body.theme-dark a[href*="wa.me"]:hover {
    color: var(--gray-950) !important;
}

/* ===== 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: var(--gray-500) !important;
}

body.theme-dark .metric-info p {
    color: var(--gray-950) !important;
}

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

body.theme-dark .metric-blue {
    background: rgba(88,101,242,0.14) !important;
    color: #a5b4fc !important;
}

body.theme-dark .metric-green {
    background: rgba(22,163,74,0.14) !important;
    color: #86efac !important;
}

body.theme-dark .metric-purple {
    background: rgba(124,58,237,0.16) !important;
    color: #c4b5fd !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ---- Keyframes ---- */
@keyframes v6-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}
@keyframes v6-glow-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139,92,246,0); }
    50%       { box-shadow: 0 0 0 8px rgba(139,92,246,0.12); }
}
@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(124,58,237,0.12) !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(139,92,246,0.12) !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(124,58,237,0.08) 0%, #ffffff 100%) !important;
    border-color: rgba(139,92,246,0.24) !important;
    box-shadow: 0 4px 18px rgba(124,58,237,0.12) !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, transform 0.15s ease, box-shadow 0.15s ease !important; }
.cal-apt-block:hover {
    transform: scaleX(1.02) translateY(-1px) !important;
    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(139,92,246,0.08) !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(139,92,246,0.12) !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:#0c0c14 !important; }

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

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

#app-view main {
    position:relative;
    background:#0c0c14 !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) ───────── */
.card.metric-card:has(.metric-blue) {
    background:linear-gradient(135deg,#7c3aed 0%,#4f46e5 100%) !important;
    border:none !important;
    box-shadow:0 8px 32px rgba(124,58,237,.45), 0 2px 0 rgba(255,255,255,.15) inset !important;
}
.card.metric-card:has(.metric-green) {
    background:linear-gradient(135deg,#059669 0%,#10b981 100%) !important;
    border:none !important;
    box-shadow:0 8px 32px rgba(5,150,105,.4), 0 2px 0 rgba(255,255,255,.15) inset !important;
}
.card.metric-card:has(.metric-orange) {
    background:linear-gradient(135deg,#d97706 0%,#f59e0b 100%) !important;
    border:none !important;
    box-shadow:0 8px 32px rgba(217,119,6,.4), 0 2px 0 rgba(255,255,255,.15) inset !important;
}
.card.metric-card:has(.metric-red) {
    background:linear-gradient(135deg,#dc2626 0%,#ef4444 100%) !important;
    border:none !important;
    box-shadow:0 8px 32px rgba(220,38,38,.4), 0 2px 0 rgba(255,255,255,.15) inset !important;
}
.card.metric-card:has(.metric-purple) {
    background:linear-gradient(135deg,#7c3aed 0%,#a78bfa 100%) !important;
    border:none !important;
    box-shadow:0 8px 32px rgba(124,58,237,.45), 0 2px 0 rgba(255,255,255,.15) inset !important;
}
/* Texto blanco en metric cards */
.card.metric-card:has(.metric-blue)   .metric-info h3,
.card.metric-card:has(.metric-blue)   .metric-info p,
.card.metric-card:has(.metric-green)  .metric-info h3,
.card.metric-card:has(.metric-green)  .metric-info p,
.card.metric-card:has(.metric-orange) .metric-info h3,
.card.metric-card:has(.metric-orange) .metric-info p,
.card.metric-card:has(.metric-red)    .metric-info h3,
.card.metric-card:has(.metric-red)    .metric-info p,
.card.metric-card:has(.metric-purple) .metric-info h3,
.card.metric-card:has(.metric-purple) .metric-info p { color:#fff !important; }
.card.metric-card:has(.metric-blue)   .metric-info h3,
.card.metric-card:has(.metric-green)  .metric-info h3,
.card.metric-card:has(.metric-orange) .metric-info h3,
.card.metric-card:has(.metric-red)    .metric-info h3,
.card.metric-card:has(.metric-purple) .metric-info h3 { opacity:.82; font-size:.82rem !important; }
/* Monto adaptable en metric cards de color: evita overflow con importes grandes */
.card.metric-card:has(.metric-blue)   .metric-info p,
.card.metric-card:has(.metric-green)  .metric-info p,
.card.metric-card:has(.metric-orange) .metric-info p,
.card.metric-card:has(.metric-red)    .metric-info p,
.card.metric-card:has(.metric-purple) .metric-info p {
    font-size: 1.35rem !important;
}
/* Iconos blancos en metric cards */
.card.metric-card:has(.metric-blue)   .metric-icon,
.card.metric-card:has(.metric-green)  .metric-icon,
.card.metric-card:has(.metric-orange) .metric-icon,
.card.metric-card:has(.metric-red)    .metric-icon,
.card.metric-card:has(.metric-purple) .metric-icon {
    background:rgba(255,255,255,.22) !important;
    color:#fff !important;
    box-shadow:0 4px 14px rgba(0,0,0,.2) !important;
}
.card.metric-card:has(.metric-blue)   .metric-icon i,
.card.metric-card:has(.metric-green)  .metric-icon i,
.card.metric-card:has(.metric-orange) .metric-icon i,
.card.metric-card:has(.metric-red)    .metric-icon i,
.card.metric-card:has(.metric-purple) .metric-icon i { color:#fff !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(124,58,237,.15) !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(139,92,246,.12) !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(124,58,237,.12) !important;
    transform:translateY(-2px) !important;
}
.settings-subnav-item.active {
    background:linear-gradient(135deg,rgba(124,58,237,.08),#fff) !important;
    border-color:rgba(139,92,246,.28) !important;
    box-shadow:0 6px 22px rgba(124,58,237,.15) !important;
}

/* ── Calendario ──────────────────────────────────────────────── */
.cal-today-header { background:rgba(124,58,237,.06) !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 {
    transform:scaleX(1.02) translateY(-1px) !important;
    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(139,92,246,.12) !important; color:#a78bfa !important; }

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

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

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

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

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

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

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

/* App header — blanco limpio en modo claro */
body:not(.theme-dark) .app-header {
    background:#fff !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border-bottom:1px solid rgba(0,0,0,.09) !important;
    box-shadow:0 1px 3px rgba(0,0,0,.06) !important;
}
body:not(.theme-dark) .app-header .mobile-header-brand span { color:#1c1c2e !important; }
body:not(.theme-dark) .sidebar-toggle-btn {
    background:#f4f3ff !important;
    border:1px solid rgba(124,58,237,.15) !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(124,58,237,.12) !important;
    box-shadow:0 4px 24px rgba(124,58,237,.08), 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(124,58,237,.06) !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:#0c0c14 !important; }
body.theme-dark #app-view { background:#0c0c14 !important; }
body.theme-dark #app-view main {
    background:#0c0c14 !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:#1c1c2c !important; }
body.theme-dark .calendar-toolbar,
body.theme-dark .agenda-toolbar,
body.theme-dark .cal-toolbar {
    background:#18182a !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:rgba(139,92,246,.8) !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(124,58,237,.06) !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:#0c0c14 !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:#1a1a2e !important;
    border:1px solid rgba(139,92,246,.15) !important;
    color:#e2e8f0 !important;
}

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

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

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

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

/* Checkboxes y settings-subsection */
body.theme-dark .settings-subsection { background:#1a1a2e !important; border-color:rgba(139,92,246,.15) !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:#1e1e35 !important; border-color:rgba(139,92,246,.15) !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:#16163a !important; }
body.theme-dark table thead th { color:#a1a1aa !important; background:#16163a !important; }
body.theme-dark table tbody tr { border-bottom:1px solid rgba(139,92,246,.08) !important; }
body.theme-dark table tbody td { color:#e2e8f0 !important; background:transparent !important; }
body.theme-dark table tbody tr:hover td { background:rgba(124,58,237,.06) !important; }

/* Modal header/footer */
body.theme-dark .modal-header {
    background:rgba(124,58,237,.06) !important;
    border-bottom:1px solid rgba(139,92,246,.15) !important;
}
body.theme-dark .modal-footer {
    background:#16163a !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 */
body.theme-dark .sidebar-theme-control { background:#1a1a2e !important; border-color:rgba(139,92,246,.2) !important; }
body.theme-dark .sidebar-theme-label { color:#a1a1aa !important; }

/* Billing results */
body.theme-dark .billing-patient-result {
    background:#1a1a2e !important;
    border:1px solid rgba(139,92,246,.15) !important;
}

/* Clinical info */
body.theme-dark .clinical-info-item,
body.theme-dark .clinical-info-summary > div {
    background:#1a1a2e !important;
    border:1px solid rgba(139,92,246,.12) !important;
}
body.theme-dark .odontogram-wrapper {
    background:#1a1a2e !important;
    border:1px solid rgba(139,92,246,.12) !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:#1a1a2e !important; border:1px solid rgba(139,92,246,.15) !important; border-radius:1.1rem !important; overflow:hidden !important; }
body.theme-dark .cal-month-grid { background:#1a1a2e !important; }
body.theme-dark .cal-month-weekdays { background:#16163a !important; border-bottom:1px solid rgba(139,92,246,.15) !important; }
body.theme-dark .cal-month-cell { background:#1a1a2e !important; border-right:1px solid rgba(139,92,246,.08) !important; border-bottom:1px solid rgba(139,92,246,.08) !important; }
body.theme-dark .cal-month-cell.is-outside-month { background:#14142a !important; }

/* Toast */
body.theme-dark .feedback-toast { background:#1a1a2e !important; border:1px solid rgba(139,92,246,.2) !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(124,58,237,.08); 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: #1a1a2e;
    border-color: rgba(139,92,246,.2);
}
body.theme-dark .odonto-treat-btn {
    background: #1e1e35;
    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(124,58,237,0.06) !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(124,58,237,0.08) !important;
    color: #7c3aed !important;
}

/* Sidebar footer en 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(124,58,237,0.05) !important;
    border: 1px solid rgba(124,58,237,0.12) !important;
    box-shadow: none !important;
}
body:not(.theme-dark) .user-profile:hover {
    background: rgba(124,58,237,0.10) !important;
}
body:not(.theme-dark) #user-initials {
    background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
    color: #fff !important;
}
body:not(.theme-dark) #user-name {
    color: #18181b !important;
    font-weight: 700 !important;
}
body:not(.theme-dark) #user-role {
    color: #71717a !important;
}
body:not(.theme-dark) .sidebar-logout-btn,
body:not(.theme-dark) .theme-toggle-btn {
    color: #71717a !important;
    background: transparent !important;
    border: 1px solid transparent !important;
}
body:not(.theme-dark) .sidebar-logout-btn:hover,
body:not(.theme-dark) .theme-toggle-btn:hover {
    background: rgba(124,58,237,0.07) !important;
    color: #7c3aed !important;
    border-color: rgba(124,58,237,0.15) !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(139,92,246,0.15);
}
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: #1a1a2e;
    border-color: rgba(139,92,246,0.15);
}
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 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(139,92,246,0.08);
}
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(124,58,237,0.06) !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(139,92,246,0.30);
    --accent-dark-shadow: rgba(124,58,237,0.20);
}

/* Nav active: purple */
body.theme-dark .nav-item.active {
    background: rgba(139,92,246,0.20) !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(139,92,246,0.15) !important;
    color: #c4b5fd !important;
}
body.theme-dark .nav-item:hover { color: #e9d5ff !important; }
body.theme-dark .nav-item:hover i { color: #e9d5ff !important; }

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

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

/* Feedback toast info: purple */
body.theme-dark .feedback-toast-info .feedback-toast-icon,
body.theme-dark .feedback-dialog-info .feedback-dialog-badge {
    background: rgba(139,92,246,0.20) !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(132,151,202,0.2);
    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(124,58,237,0.08) !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(139,92,246,0.15) !important;
    color: #c4b5fd !important;
}

/* ── DARK MODE: Fondo #0c0c14, cards #1a1a2e (prioridad máxima) ── */
body.theme-dark,
body.theme-dark #app-view,
body.theme-dark #app-view main,
body.theme-dark #main-content {
    background: #0c0c14 !important;
    color: #e2e8f0 !important;
}
body.theme-dark .card,
body.theme-dark .settings-card,
body.theme-dark .table-container {
    background: #1a1a2e !important;
    border: 1px solid rgba(139,92,246,0.15) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.35) !important;
    color: #e2e8f0 !important;
}

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

/* ── DARK MODE: Sidebar */
body.theme-dark #app-sidebar {
    background: #0f0f1a !important;
    border-right: 1px solid rgba(139,92,246,0.12) !important;
}

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

/* ── DARK MODE: Table header */
body.theme-dark table thead th {
    background: rgba(139,92,246,0.06) !important;
    color: #a78bfa !important;
    border-bottom: 1px solid rgba(139,92,246,0.15) !important;
}
body.theme-dark table tbody tr:hover td {
    background: rgba(139,92,246,0.05) !important;
}

/* ── DARK MODE: Settings subnav items activos */
body.theme-dark .settings-subnav-item.active {
    background: linear-gradient(135deg, rgba(124,58,237,0.15) 0%, rgba(26,26,46,0.8) 100%) !important;
    border-color: rgba(139,92,246,0.30) !important;
    box-shadow: 0 4px 18px rgba(124,58,237,0.15) !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;
    }
}

/* --- Calendar apt actions: always visible on touch (hover:none) --- */
@media (hover: none) {
    .cal-apt-actions {
        display: flex;
        opacity: 0.85;
    }
    .cal-apt-block {
        padding-bottom: 1.6rem;
    }
}

/* --- Touch targets: minimum 44px for key interactive elements --- */
@media screen and (max-width: 1024px) {
    .cal-prof-select-btn,
    .cal-apt-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(124,58,237,0.06);
    /* NO overflow:hidden — it would break position:sticky and clip inner scroll */
    margin-top: 1.5rem;
}

body.theme-dark .dashboard-main-card {
    background: #1a1a2e;
    border-color: rgba(139,92,246,0.15);
    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: #1a1a2e;
    border-bottom-color: rgba(139,92,246,0.15);
}

.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(139,92,246,0.12);
    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;
}