/* ── HCE v2 — Estilos globales ──────────────────────────────── */

:root {
    --sidebar-w: 220px;
    --top-h:     56px;
    --brand:     #0d6efd;
    --brand-dk:  #0b5ed7;
}

/* Layout general */
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: .9rem;
    background: #f4f6f9;
}

/* ── Navbar superior ────────────────────────────────────────── */
#topbar {
    height: var(--top-h);
    background: #fff;
    border-bottom: 1px solid #e3e6ea;
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1030;
    gap: .75rem;
}

#topbar .brand {
    font-weight: 700;
    font-size: 1rem;
    color: var(--brand);
    text-decoration: none;
    white-space: nowrap;
}

#topbar .spacer { flex: 1; }

#topbar .user-info {
    font-size: .82rem;
    color: #555;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* ── Sidebar ────────────────────────────────────────────────── */
#sidebar {
    width: var(--sidebar-w);
    background: #fff;
    border-right: 1px solid #e3e6ea;
    position: fixed;
    top: var(--top-h);
    bottom: 0;
    left: 0;
    overflow-y: auto;
    padding: 1rem 0;
    z-index: 1020;
    transition: transform .2s ease;
}

#sidebar .nav-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #aaa;
    padding: .75rem 1.25rem .25rem;
}

#sidebar a.nav-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 1.25rem;
    color: #444;
    text-decoration: none;
    border-radius: 0;
    transition: background .15s, color .15s;
    font-size: .88rem;
}

#sidebar a.nav-item:hover,
#sidebar a.nav-item.active {
    background: #eef3ff;
    color: var(--brand);
}

#sidebar a.nav-item .icon {
    font-size: 1rem;
    width: 1.2rem;
    text-align: center;
}

/* ── Contenido principal ────────────────────────────────────── */
#main {
    margin-left: var(--sidebar-w);
    margin-top: var(--top-h);
    padding: 1.5rem;
    min-height: calc(100vh - var(--top-h));
}

/* ── Cards ──────────────────────────────────────────────────── */
.card { border: 1px solid #e3e6ea; }
.card-header { background: #f8f9fa; font-weight: 600; }

/* ── Tablas ─────────────────────────────────────────────────── */
.table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #888; }
.table td { vertical-align: middle; }

/* ── Badges de rol ──────────────────────────────────────────── */
.badge-rol {
    font-size: .7rem;
    padding: .2em .6em;
    border-radius: 20px;
    font-weight: 600;
}

/* ── Buscador pacientes ─────────────────────────────────────── */
#buscador-wrap { position: relative; }
#buscador-resultados {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    border: 1px solid #d0d7de;
    border-top: none;
    border-radius: 0 0 .375rem .375rem;
    max-height: 280px;
    overflow-y: auto;
    z-index: 200;
}
#buscador-resultados .res-item {
    padding: .5rem .75rem;
    cursor: pointer;
    font-size: .87rem;
    border-bottom: 1px solid #f0f0f0;
}
#buscador-resultados .res-item:hover { background: #f0f5ff; }
#buscador-resultados .res-vacio { padding: .5rem .75rem; color: #999; font-size: .85rem; }

/* ── Audio recorder ─────────────────────────────────────────── */
#audio-controls { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
#audio-timer { font-variant-numeric: tabular-nums; min-width: 3rem; }
#audio-visualizer { flex: 1; min-width: 80px; height: 32px; border-radius: .25rem; }

/* ── Móvil ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
    #sidebar {
        transform: translateX(-100%);
    }
    #sidebar.open {
        transform: translateX(0);
    }
    #main {
        margin-left: 0;
    }
}