html {
    color-scheme: light;
}
html.dark {
    color-scheme: dark;
}
* {
    box-sizing: border-box;
}
body {
    margin: 0;
}
button, input, select, textarea {
    font: inherit;
}

.clinic-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgb(203 213 225) transparent;
}
.dark .clinic-scrollbar {
    scrollbar-color: rgb(51 65 85) transparent;
}
.clinic-scrollbar::-webkit-scrollbar {
    width: 7px;
}
.clinic-scrollbar::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgb(203 213 225);
}
.dark .clinic-scrollbar::-webkit-scrollbar-thumb {
    background: rgb(51 65 85);
}

.nav-group + .nav-group {
    margin-top: 1.35rem;
}
.nav-group-title {
    padding: 0 .8rem .55rem;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgb(148 163 184);
}
.nav-link {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: .85rem;
    border: 1px solid transparent;
    border-radius: .9rem;
    padding: .7rem .8rem;
    color: rgb(71 85 105);
    font-size: .9rem;
    font-weight: 600;
    transition: .18s ease;
}
.nav-link svg {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    stroke-width: 1.8;
}
.nav-link:hover {
    border-color: rgb(204 251 241);
    background: rgb(240 253 250);
    color: rgb(15 118 110);
}
.nav-link.is-active {
    border-color: rgb(45 212 191);
    background: linear-gradient(135deg, rgb(20 184 166), rgb(15 118 110));
    color: white;
    box-shadow: 0 10px 24px rgba(15,118,110,.22);
}
.dark .nav-link {
    color: rgb(148 163 184);
}
.dark .nav-link:hover {
    border-color: rgba(45,212,191,.22);
    background: rgba(13,148,136,.13);
    color: rgb(153 246 228);
}
.dark .nav-link.is-active {
    color: white;
    border-color: rgb(45 212 191);
    background: linear-gradient(135deg, rgb(20 184 166), rgb(15 118 110));
}

.header-action {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(226 232 240);
    border-radius: .9rem;
    background: white;
    color: rgb(71 85 105);
    transition: .18s ease;
}
.header-action:hover {
    border-color: rgb(153 246 228);
    background: rgb(240 253 250);
    color: rgb(15 118 110);
}
.dark .header-action {
    border-color: rgb(51 65 85);
    background: rgb(15 23 42);
    color: rgb(203 213 225);
}
.dark .header-action:hover {
    border-color: rgb(13 148 136);
    background: rgba(13,148,136,.14);
    color: rgb(153 246 228);
}

.panel-card,
.metric-card {
    border: 1px solid rgb(226 232 240);
    border-radius: 1.5rem;
    background: white;
    box-shadow: 0 14px 38px rgba(15, 23, 42, .06);
}
.dark .panel-card,
.dark .metric-card {
    border-color: rgb(39 52 73);
    background: #101b30;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .12);
}
.metric-card {
    padding: 1.35rem;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.metric-card:hover {
    transform: translateY(-2px);
    border-color: rgb(153 246 228);
    box-shadow: 0 18px 44px rgba(15, 118, 110, .11);
}
.dark .metric-card:hover {
    border-color: rgba(45,212,191,.35);
}
.metric-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 14px;
}
.metric-icon-clinic { background: rgb(240 253 250); color: rgb(13 148 136); }
.metric-icon-blue { background: rgb(239 246 255); color: rgb(37 99 235); }
.metric-icon-violet { background: rgb(245 243 255); color: rgb(124 58 237); }
.metric-icon-amber { background: rgb(255 251 235); color: rgb(217 119 6); }
.dark .metric-icon-clinic { background: rgba(13,148,136,.16); color: rgb(94 234 212); }
.dark .metric-icon-blue { background: rgba(37,99,235,.16); color: rgb(147 197 253); }
.dark .metric-icon-violet { background: rgba(124,58,237,.16); color: rgb(196 181 253); }
.dark .metric-icon-amber { background: rgba(217,119,6,.16); color: rgb(253 230 138); }

.section-title {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.015em;
}
.section-subtitle {
    margin-top: .3rem;
    font-size: .82rem;
    color: rgb(100 116 139);
}
.dark .section-subtitle {
    color: rgb(148 163 184);
}

.empty-state {
    display: flex;
    min-height: 285px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgb(203 213 225);
    border-radius: 1.25rem;
    background: rgb(248 250 252);
    padding: 2rem;
    text-align: center;
}
.dark .empty-state {
    border-color: rgb(51 65 85);
    background: rgba(15, 23, 42, .5);
}
.empty-icon {
    display: grid;
    width: 60px;
    height: 60px;
    place-items: center;
    border-radius: 18px;
    background: rgb(204 251 241);
    color: rgb(15 118 110);
}
.dark .empty-icon {
    background: rgba(13,148,136,.16);
    color: rgb(94 234 212);
}

.quick-action {
    display: flex;
    align-items: center;
    gap: .85rem;
    border: 1px solid rgb(226 232 240);
    border-radius: 1rem;
    padding: .9rem;
    transition: .18s ease;
}
.quick-action:hover {
    border-color: rgb(153 246 228);
    background: rgb(240 253 250);
    transform: translateX(2px);
}
.dark .quick-action {
    border-color: rgb(39 52 73);
}
.dark .quick-action:hover {
    border-color: rgba(45,212,191,.32);
    background: rgba(13,148,136,.10);
}
.quick-action-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 13px;
    background: rgb(204 251 241);
    color: rgb(15 118 110);
}
.quick-action-icon svg {
    width: 19px;
    height: 19px;
}
.dark .quick-action-icon {
    background: rgba(13,148,136,.16);
    color: rgb(94 234 212);
}

.label {
    display: block;
    margin-bottom: .5rem;
    font-size: .84rem;
    font-weight: 700;
    color: rgb(30 41 59);
}
.dark .label {
    color: rgb(226 232 240);
}
.input-wrap {
    position: relative;
}
.input {
    width: 100%;
    min-height: 48px;
    border: 1px solid rgb(203 213 225);
    border-radius: .95rem;
    background: white;
    padding: .72rem .9rem;
    color: rgb(15 23 42);
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.input::placeholder {
    color: rgb(148 163 184);
}
.input:hover {
    border-color: rgb(148 163 184);
}
.input:focus {
    border-color: rgb(20 184 166);
    box-shadow: 0 0 0 4px rgba(20, 184, 166, .13);
}
.dark .input {
    border-color: rgb(51 65 85);
    background: rgb(15 23 42);
    color: rgb(241 245 249);
}
.dark .input:hover {
    border-color: rgb(71 85 105);
}
.dark .input:focus {
    border-color: rgb(45 212 191);
    box-shadow: 0 0 0 4px rgba(45, 212, 191, .11);
}
.input-with-icon {
    padding-left: 2.85rem;
}
.input-with-action {
    padding-right: 3rem;
}
.input-icon {
    position: absolute;
    left: .95rem;
    top: 50%;
    width: 1.1rem;
    height: 1.1rem;
    transform: translateY(-50%);
    color: rgb(148 163 184);
    pointer-events: none;
}
.input-action {
    position: absolute;
    right: .75rem;
    top: 50%;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    transform: translateY(-50%);
    border-radius: .7rem;
    color: rgb(100 116 139);
}
.input-action:hover {
    background: rgb(241 245 249);
    color: rgb(15 118 110);
}
.dark .input-action:hover {
    background: rgb(30 41 59);
    color: rgb(94 234 212);
}

.btn-primary,
.btn-secondary,
.btn-danger {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: .9rem;
    padding: .7rem 1rem;
    font-size: .9rem;
    font-weight: 700;
    transition: .18s ease;
}
.btn-primary {
    border: 1px solid rgb(13 148 136);
    background: linear-gradient(135deg, rgb(20 184 166), rgb(15 118 110));
    color: white;
    box-shadow: 0 9px 20px rgba(15,118,110,.18);
}
.btn-primary:hover {
    transform: translateY(-1px);
    filter: brightness(.97);
    box-shadow: 0 12px 25px rgba(15,118,110,.24);
}
.btn-secondary {
    border: 1px solid rgb(203 213 225);
    background: white;
    color: rgb(30 41 59);
}
.btn-secondary:hover {
    border-color: rgb(94 234 212);
    background: rgb(240 253 250);
    color: rgb(15 118 110);
}
.dark .btn-secondary {
    border-color: rgb(51 65 85);
    background: rgb(15 23 42);
    color: rgb(226 232 240);
}
.dark .btn-secondary:hover {
    border-color: rgb(13 148 136);
    background: rgba(13,148,136,.12);
    color: rgb(153 246 228);
}

.table-shell {
    overflow: hidden;
    border: 1px solid rgb(226 232 240);
    border-radius: 1.5rem;
    background: white;
    box-shadow: 0 14px 38px rgba(15, 23, 42, .06);
}
.dark .table-shell {
    border-color: rgb(39 52 73);
    background: #101b30;
}
.table-head {
    background: rgb(248 250 252);
    color: rgb(100 116 139);
}
.dark .table-head {
    background: rgba(15, 23, 42, .7);
    color: rgb(148 163 184);
}

body.sidebar-collapsed #sidebar {
    width: 84px;
}
body.sidebar-collapsed #appShell {
    padding-left: 84px;
}
body.sidebar-collapsed .sidebar-label {
    display: none;
}
body.sidebar-collapsed #sidebar nav {
    padding-left: .65rem;
    padding-right: .65rem;
}
body.sidebar-collapsed .nav-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}
body.sidebar-collapsed #desktopCollapse svg {
    transform: rotate(180deg);
}

@media (max-width: 1023px) {
    body.sidebar-collapsed #appShell {
        padding-left: 0;
    }
}

/* Servicios */
.stat-card{display:flex;align-items:center;gap:.9rem;border:1px solid rgb(226 232 240);border-radius:1.5rem;background:#fff;padding:1rem;box-shadow:0 8px 25px rgba(15,23,42,.04)}
.stat-icon{display:grid;height:2.75rem;width:2.75rem;place-items:center;border-radius:1rem}.stat-icon svg{height:1.25rem;width:1.25rem}
.icon-btn{display:inline-flex;height:2.25rem;width:2.25rem;align-items:center;justify-content:center;border:1px solid rgb(226 232 240);border-radius:.75rem;transition:.15s}.icon-btn:hover{background:rgb(248 250 252);color:#0f766e}
.badge{display:inline-flex;align-items:center;border-radius:9999px;background:rgb(241 245 249);padding:.28rem .65rem;font-size:.7rem;font-weight:700;color:rgb(71 85 105)}
.info-tile{border-radius:1rem;background:rgb(248 250 252);padding:1rem}
.dark .stat-card{border-color:rgb(30 41 59);background:#0f1a2e}.dark .icon-btn{border-color:rgb(51 65 85)}.dark .icon-btn:hover{background:rgb(30 41 59)}.dark .badge{background:rgb(30 41 59);color:rgb(203 213 225)}.dark .info-tile{background:rgb(15 23 42)}
