/* =====================================================
   misCuidados.com — Stylesheet Principal
   ===================================================== */

/* ---------- RESET & BASE ---------- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --sidebar-w: 230px;
    --sidebar-collapsed-w: 68px;

    /* Palette */
    --primary:        #033f3f;
    --primary-dark:   #022f2f;
    --primary-light:  #178391;
    --accent:         #178391;
    --danger:         #dc2626;
    --warning-bg:     #fefce8;
    --warning-border: #fde047;
    --success:        #15803d;

    /* Surfaces */
    --sidebar-bg:     #ffffff;
    --content-bg:     #f6fbfd;
    --white:          #ffffff;
    --brand-page-bg:  radial-gradient(circle at 8% 10%, rgba(23, 131, 145, .08) 0 2px, transparent 3px) 0 0 / 34px 34px,
                      linear-gradient(180deg, #e8f6fb 0%, #f6fbfd 54%, #ffffff 100%);

    /* Borders */
    --border:         #b5cddd;
    --border-dark:    #9db9d0;

    /* Text */
    --text:           #033f3f;
    --text-muted:     #526b75;
    --text-label:     #033f3f;

    /* Misc */
    --shadow-sm:   0 5px 16px rgba(3,63,63,.08);
    --shadow-md:   0 18px 54px rgba(3,63,63,.12);
    --radius:      6px;
    --radius-sm:   4px;
    --radius-lg:   10px;
    --transition:  .25s ease;
}

html { font-size: 14px; }

body {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--brand-page-bg);
    color: var(--text);
    line-height: 1.5;
}

h1, h2, h3,
.brand-name,
.ph-title,
.login-app-name {
    font-family: 'Poppins', 'Open Sans', sans-serif;
    letter-spacing: 0;
}

a { text-decoration: none; color: inherit; }
button, select, input { font-family: inherit; }
ul, ol { list-style: none; }

/* =====================================================
   LAYOUT
   ===================================================== */
.app-wrapper {
    display: flex;
    min-height: 100vh;
}

/* =====================================================
   SIDEBAR
   ===================================================== */
.sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    box-shadow: 2px 0 8px rgba(0,0,0,.07);
    display: flex;
    flex-direction: column;
    z-index: 200;
    transition: width var(--transition);
    overflow: hidden;
}

.sidebar.collapsed { width: var(--sidebar-collapsed-w); }

/* Toggle button */
.sidebar-toggle {
    position: absolute;
    right: -13px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px; height: 26px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    z-index: 210;
    transition: background var(--transition);
}
.sidebar-toggle:hover { background: #f1f5f9; }
.sidebar-toggle svg { transition: transform var(--transition); }
.sidebar.collapsed .sidebar-toggle svg { transform: rotate(180deg); }

/* Brand */
.sidebar-brand {
    padding: 18px 16px;
    display: flex; align-items: center; gap: 10px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.brand-icon {
    width: 38px; height: 38px;
    background: var(--primary);
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.brand-icon svg { width: 20px; height: 20px; fill: #fff; }
.brand-name {
    font-size: 19px;
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
    transition: opacity var(--transition);
}

/* User block */
.sidebar-user {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.user-row { display: flex; align-items: center; gap: 10px; }
.user-avatar {
    width: 36px; height: 36px;
    background: #e8f6fb;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--primary);
    overflow: hidden;
}
.user-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; cursor:zoom-in; }
.user-info { overflow: hidden; }
.user-email {
    font-size: 11px; font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-role {
    font-size: 10px; color: var(--text-muted);
    text-transform: uppercase;
}
.user-location { font-size: 11px; color: var(--primary); font-weight: 500; }

/* Navigation */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}
.sidebar-nav li a {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 16px;
    font-size: 13px; font-weight: 500;
    color: var(--text);
    border-left: 3px solid transparent;
    transition: background var(--transition), color var(--transition);
    white-space: nowrap;
}
.sidebar-nav li a:hover {
    background: #f1f5f9;
    color: var(--primary);
}
.sidebar-nav li.active a {
    background: #e8f6fb;
    color: var(--primary);
    border-left-color: var(--primary);
    font-weight: 600;
}
.nav-icon {
    width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.nav-label { transition: opacity var(--transition); }

/* Footer */
.sidebar-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

/* ── DEV role switcher ─────────────────────────────────────── */
.dev-role-wrap {
    margin-bottom: 8px;
    padding: 8px 10px;
    background: #1a2f5a;
    border: 1px solid #f59e0b33;
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: opacity var(--transition);
}
.dev-role-label {
    display: flex; align-items: center; gap: 5px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .6px;
    color: #fbbf24; text-transform: uppercase;
    margin-bottom: 6px;
    white-space: nowrap;
}
.dev-role-text { transition: opacity var(--transition); }
.dev-role-select {
    width: 100%;
    background: #0f1f3d;
    border: 1px solid #334d7a;
    border-radius: var(--radius-sm);
    color: #e2e8f0;
    font-size: 12px;
    padding: 5px 8px;
    cursor: pointer;
    appearance: auto;
}
.dev-role-select:focus { outline: none; border-color: #f59e0b; }
/* Collapse: shrink the widget */
.sidebar.collapsed .dev-role-wrap { padding: 6px; }
.sidebar.collapsed .dev-role-text { opacity: 0; width: 0; overflow: hidden; }
.sidebar.collapsed .dev-role-select { opacity: 0; pointer-events: none; height: 0; margin: 0; padding: 0; border: none; }
.logout-link {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0;
    font-size: 13px; font-weight: 500;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition);
}
.logout-link:hover { color: var(--danger); }
.logout-text { transition: opacity var(--transition); }

/* Collapsed state: hide text */
.sidebar.collapsed .brand-name,
.sidebar.collapsed .user-info,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .logout-text { opacity: 0; width: 0; overflow: hidden; }
.sidebar.collapsed .sidebar-brand { justify-content: center; padding: 18px 0; }
.sidebar.collapsed .user-row { justify-content: center; }
.sidebar.collapsed .sidebar-nav li a {
    justify-content: center;
    padding: 12px;
    border-left: none;
}
.sidebar.collapsed .logout-link { justify-content: center; }

/* =====================================================
   MAIN CONTENT
   ===================================================== */
.main-content {
    margin-left: var(--sidebar-w);
    flex: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left var(--transition);
    overflow-y: auto;
    height: 100vh;
}
.main-content.sidebar-collapsed { margin-left: var(--sidebar-collapsed-w); }

/* ── Bitácora page: lock main-content to the viewport so headers never scroll away.
   The only scroll on this page is the .sl-grid (#tlWrap) inside the timeline. */
body.page-bitacora .main-content {
    overflow: hidden !important;
    height: 100vh !important;
}

/* =====================================================
   PAGE HEADER
   ===================================================== */
.page-header {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 100;
}
.ph-left { display: flex; align-items: center; gap: 12px; }
.ph-icon {
    width: 38px; height: 38px;
    background: #e8f6fb;
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    color: var(--primary);
}
.ph-title {
    font-size: 17px; font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: .4px;
    line-height: 1.15;
}
.ph-subtitle {
    font-size: 10px; font-weight: 600;
    color: var(--danger);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.ph-center {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 0 12px; min-width: 0;
}
.ph-handoff {
    display: flex; align-items: center; gap: 10px;
    background: #fffbeb;
    border: 1px solid #fcd34d; border-left: 3px solid #f59e0b;
    border-radius: var(--radius-sm); padding: 8px 12px;
    width: 100%; max-width: 500px;
    animation: phHandoffSlide .3s ease;
}
@keyframes phHandoffSlide {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ph-handoff-icon {
    width: 28px; height: 28px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #fde68a; border-radius: 6px; color: #92400e;
}
.ph-handoff-body { flex: 1; min-width: 0; overflow: hidden; }
.ph-handoff-title { font-size: 12px; font-weight: 700; color: #92400e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-handoff-sub   { font-size: 11px; color: #b45309; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.ph-handoff-ack {
    display: flex; align-items: center; gap: 5px; flex-shrink: 0;
    background: #f59e0b; color: #fff; border: none;
    border-radius: var(--radius-sm); padding: 6px 10px;
    font-size: 11px; font-weight: 600; cursor: pointer;
    transition: background .15s; white-space: nowrap;
}
.ph-handoff-ack:hover { background: #d97706; }
.ph-right { display: flex; align-items: center; gap: 20px; }
.ph-control { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ph-control label {
    font-size: 10px; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.ph-select {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 13px; color: var(--text);
    background: var(--white);
    min-width: 160px;
    cursor: pointer;
    outline: none;
}
.ph-select:focus { border-color: var(--accent); }

/* ── Tab notification badges ── */
.tab-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px;
    background: #ef4444; color: #fff;
    border-radius: 999px; font-size: 10px; font-weight: 700;
    line-height: 1; margin-left: 5px; vertical-align: middle;
    flex-shrink: 0;
}
.tab-badge-dot {
    width: 7px; height: 7px; min-width: 7px; padding: 0;
    background: #f59e0b;
    animation: tabDotPulse 1.6s ease-in-out infinite;
}
@keyframes tabDotPulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%       { opacity: .45; transform: scale(1.45); }
}
.date-nav { display: flex; align-items: center; gap: 5px; }
.date-nav-btn {
    width: 28px; height: 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--white);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--text); font-size: 13px;
    transition: background var(--transition);
}
.date-nav-btn:hover { background: #f1f5f9; }
.date-display {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    font-size: 13px;
    background: var(--white);
    cursor: pointer;
    min-width: 96px;
    text-align: center;
    outline: none;
}
.date-display:focus { border-color: var(--accent); }

/* =====================================================
   CONTENT AREA
   ===================================================== */
.content-area { padding: 20px 28px; flex: 1; }

/* =====================================================
   CONDITION BANNER
   ===================================================== */
.condition-banner {
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    border-radius: var(--radius);
    padding: 10px 16px;
    display: flex; align-items: stretch;
    gap: 0;
    margin-bottom: 14px;
}
.cond-left { flex: 1; padding-right: 16px; }
.cond-right {
    flex: 1;
    border-left: 1px solid var(--warning-border);
    padding-left: 16px;
}
.cond-label {
    font-size: 10.5px; font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: .5px;
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 3px;
}
.cond-label svg { flex-shrink: 0; }
.cond-value {
    font-size: 12.5px;
    color: var(--text-muted);
    font-style: italic;
}
.cond-notes-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 3px;
}
.add-note-btn {
    width: 22px; height: 22px;
    background: var(--primary);
    color: #fff;
    border: none; border-radius: 50%;
    cursor: pointer; font-size: 18px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--transition);
}
.add-note-btn:hover { background: var(--primary-dark); }
.add-note-placeholder {
    font-size: 12px; color: var(--text-muted); font-style: italic;
    display: flex; align-items: center; gap: 4px; cursor: pointer;
}
.add-note-placeholder:hover { color: var(--primary); }

/* =====================================================
   NURSE SELECTORS
   ===================================================== */
.nurse-selectors {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
.nurse-selector label {
    display: block;
    font-size: 10px; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
}
.nurse-selector select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-size: 13px; color: var(--text);
    background: var(--white);
    cursor: pointer; outline: none;
}
.nurse-selector select:focus { border-color: var(--accent); }

/* =====================================================
   TABS
   ===================================================== */
.tab-nav {
    display: flex; gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 14px;
}
.tab-btn {
    display: flex; align-items: center; gap: 7px;
    padding: 9px 20px;
    background: none; border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 13px; font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}
.tab-btn:hover { color: var(--primary); }
.tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* =====================================================
   SECTION TITLE
   ===================================================== */
.section-title {
    font-size: 11px; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 8px;
}

/* =====================================================
   DATA TABLES (shared)
   ===================================================== */
.table-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 20px;
}
.data-table {
    width: 100%;
    border-collapse: collapse;
}
.data-table th {
    background: #f8fafc;
    padding: 9px 12px;
    text-align: center;
    font-size: 11px; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    white-space: nowrap;
}
.data-table th:last-child { border-right: none; }
.data-table td {
    padding: 4px 0px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    font-size: 13px;
}
.data-table td:last-child { border-right: none; }
.data-table tr:last-child td { border-bottom: none; }

/* =====================================================
   VITAL SIGNS TABLE — IMPROVED
   ===================================================== */

/* Section header row */
.vs-section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.vs-legend { display: flex; gap: 14px; }
.vs-leg-item { font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.vs-leg-ok     { color: #15803d; }
.vs-leg-warn   { color: #d97706; }
.vs-leg-danger { color: #dc2626; }

/* Table base */
.vs-table { border-collapse: collapse; width: 100%; min-width: 700px; }
.vs-table td, .vs-table th { vertical-align: middle; }

/* Column headers */
.vs-th-hora { width: 72px; text-align: center; background: #f8fafc; padding: 10px 8px; }
.vs-th {
    padding: 8px 6px; text-align: center;
    vertical-align: top; border-bottom: 2px solid var(--border);
}
.vs-th-icon {
    width: 26px; height: 26px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 4px;
}
.vs-th-text { display: flex; flex-direction: column; gap: 1px; align-items: center; }
.vs-abbr     { font-size: 12px; font-weight: 800; color: var(--text); letter-spacing: .3px; }
.vs-fullname { font-size: 9.5px; color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.vs-unit     { font-size: 9px; color: #94a3b8; font-weight: 600; }
.vs-range {
    display: inline-block; margin-top: 4px;
    padding: 1px 7px; border-radius: 10px;
    font-size: 9.5px; font-weight: 700;
}
.vs-range-ok { background: #dcfce7; color: #15803d; }

/* Time cell */
.td-time {
    width: 72px; padding: 0 8px;
    text-align: center;
}
.vs-time-val  { font-size: 12.5px; font-weight: 700; color: var(--text); }

/* Column width definitions */
.vs-col-ta   { width: 110px; }
.vs-col-fc   { width: 82px; }
.vs-col-fr   { width: 82px; }
.vs-col-temp { width: 86px; }
.vs-col-spo2 { width: 82px; }
.vs-col-dxtx { min-width: 140px; }

/* Estado de Ánimo column */
.vs-col-mood { width: 170px; min-width: 170px; }
.mood-picker {
    display: flex; gap: 2px; flex-wrap: wrap;
    justify-content: center; padding: 2px 0;
}
.mood-btn {
    width: 22px; height: 22px; padding: 0;
    border: 1.5px solid transparent; border-radius: 50%;
    background: transparent; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #cbd5e1; transition: color .13s, background .13s, border-color .13s, transform .1s;
    flex-shrink: 0;
}
.mood-btn:hover { color: #64748b; background: #f1f5f9; border-color: #e2e8f0; transform: scale(1.15); }
.mood-btn:active { transform: scale(.95); }
.mood-btn:focus  { outline: none; }
/* Selected states — each mood gets its own color */
.mood-btn.mood-selected[data-mood="tranquilo"]  { background:#d1fae5; border-color:#6ee7b7; color:#059669; }
.mood-btn.mood-selected[data-mood="neutro"]     { background:#f1f5f9; border-color:#94a3b8; color:#475569; }
.mood-btn.mood-selected[data-mood="ansioso"]    { background:#fef3c7; border-color:#fcd34d; color:#d97706; }
.mood-btn.mood-selected[data-mood="triste"]     { background:#e8f6fb; border-color:#9db9d0; color:#178391; }
.mood-btn.mood-selected[data-mood="agitado"]    { background:#fee2e2; border-color:#fca5a5; color:#dc2626; }
.mood-btn.mood-selected[data-mood="somnoliento"]{ background:#f3e8ff; border-color:#c4b5fd; color:#7c3aed; }
.mood-btn.mood-selected[data-mood="confuso"]    { background:#fff7ed; border-color:#fdba74; color:#ea580c; }

/* Very subtle column tints on hover */
.vs-table tbody tr:hover td.vs-col-ta   { background: #fff5f5; }
.vs-table tbody tr:hover td.vs-col-fc   { background: #fff0f8; }
.vs-table tbody tr:hover td.vs-col-fr   { background: #e8f6fb; }
.vs-table tbody tr:hover td.vs-col-temp { background: #fffbeb; }
.vs-table tbody tr:hover td.vs-col-spo2 { background: #f0fdf4; }
.vs-table tbody tr:hover td.vs-col-dxtx { background: #faf5ff; }
.vs-table tbody tr:hover td.td-time     { background: #f1f5f9; }

/* T/A (blood pressure) input */
.bp-wrap { display: flex; align-items: center; justify-content: center; gap: 2px; }
.bp-field { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.bp-label { font-size: 8px; font-weight: 700; color: #94a3b8; letter-spacing: .4px; }
.bp-sys, .bp-dia {
    border: none; outline: none;
    font-size: 13px; font-family: inherit;
    background: transparent; color: var(--text);
    text-align: center; padding: 2px 2px;
    transition: color .15s;
}
.bp-sys { width: 42px; }
.bp-dia { width: 36px; }
.bp-sep { color: #bbb; margin: 0 2px; font-size: 15px; padding-top: 8px; }

/* Generic vital input */
.vs-input-wrap {
    display: flex; align-items: center; justify-content: center; gap: 2px;
}
.vitals-input {
    width: 52px; border: none; outline: none;
    text-align: center; font-size: 13px;
    font-family: inherit; background: transparent; color: var(--text);
    padding: 2px 4px; transition: color .15s;
}
.vs-unit-tag {
    font-size: 9.5px; color: #94a3b8; font-weight: 600; white-space: nowrap;
}


/* Placeholder colors */
.vitals-input::placeholder,
.bp-sys::placeholder,
.bp-dia::placeholder { color: #d1d5db; }

/* Numeric input — hide browser arrows */
.vs-num::-webkit-inner-spin-button,
.vs-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.vs-num { -moz-appearance: textfield; }

/* Live validation color states */
.vs-ok     { color: #15803d !important; font-weight: 700; }
.vs-warn   { color: #d97706 !important; font-weight: 700; }
.vs-danger { color: #dc2626 !important; font-weight: 700; }

/* Row hover */
.vs-row:hover td { background: #fafbff; }



/* =====================================================
   MEDICATIONS TABLE
   ===================================================== */

/* ── Section header with badge ── */
.meds-section-header {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px;
}
.meds-count-badge {
    background: #f1f5f9; color: #64748b;
    font-size: 11px; font-weight: 600;
    padding: 2px 9px; border-radius: 20px;
    letter-spacing: .3px;
    transition: background .2s;
}

/* Toggle button for the extra meds table */
.meds-extra-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: auto;
    padding: 5px 12px; border-radius: var(--radius-sm);
    font-size: 12px; font-weight: 600;
    border: 1.5px solid var(--border);
    background: #f8fafc; color: var(--text-muted);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.meds-extra-toggle:hover { background: #e8f6fb; color: var(--primary); border-color: var(--primary); }
.meds-extra-toggle svg { transition: transform .2s; }
.meds-extra-toggle.meds-extra-toggle-open {
    background: #e8f6fb; color: var(--primary); border-color: var(--primary);
}
.meds-extra-toggle.meds-extra-toggle-open svg { transform: rotate(45deg); }

/* Collapsible table container */
.meds-extra-wrap {
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 4px;
    animation: fadeSlideDown .18s ease;
}
@keyframes fadeSlideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.meds-extra-wrap .table-card { margin-bottom: 0; border: none; border-radius: 0; }

/* ── Table base ── */
.meds-table { border-collapse: collapse; width: 100%; }
.meds-table th {
    background: #f8fafc;
    font-size: 11px; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .5px;
    padding: 8px 10px; border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
.meds-table td {
    vertical-align: middle;
    padding: 7px 8px;
    border-bottom: 1px solid #f1f5f9;
}

/* ── Header inner layouts ── */
.meds-th-inner { display: flex; align-items: center; gap: 5px; }
.dose-th-inner {
    display: flex; align-items: center; justify-content: center; gap: 4px;
    color: var(--primary); font-weight: 700;
}

/* ── Column widths ── */
.meds-th-num  { width: 26px; text-align: center; color: #b0b8c4 !important; }
.meds-th-med  { min-width: 150px; text-align: left !important; }
.meds-th-dosis { width: 108px; text-align: center; }
.meds-th-via  { width: 78px; text-align: center; }
.meds-th-dose { width: 112px; text-align: center; }
.meds-th-adddose { width: 30px; padding: 0 4px !important; }
.meds-th-obs  { min-width: 120px; text-align: left !important; }
.meds-th-del  { width: 32px; }

.td-med   { text-align: left !important; }
.td-dosis { text-align: center; }
.td-via   { text-align: center; }
.td-dose  { text-align: center; }
.td-obs   { text-align: left !important; }
.td-adddose { width: 30px; }
.td-del   { width: 32px; }

/* ── Row number ── */
.meds-td-num {
    text-align: center; font-size: 11px; color: #b0b8c4;
    font-weight: 600; user-select: none;
}

/* ── Inputs ── */
.meds-input {
    width: 100%; border: none; outline: none;
    font-size: 13px; font-family: inherit;
    background: transparent; color: var(--text);
    padding: 2px 0;
}
.meds-input:focus { border-bottom: 1px dashed var(--accent); }
.meds-input::placeholder { color: #d0d5dd; }

/* ── Dosis widget (number + cycling unit) ── */
.dosis-wrap { display: flex; align-items: center; gap: 4px; justify-content: center; }
.dosis-num-input {
    border: none; outline: none;
    font-size: 13px; font-family: inherit;
    background: transparent; color: var(--text);
    width: 38px; text-align: right; padding: 2px 0;
    border-bottom: 1px dashed #c7d2e0;
    -moz-appearance: textfield;
}
.dosis-num-input::-webkit-outer-spin-button,
.dosis-num-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.dosis-num-input:focus { border-bottom-color: var(--accent); }
.dosis-num-input::placeholder { color: #d0d5dd; }
.dosis-unit-btn {
    display: inline-flex; align-items: center;
    padding: 2px 7px; border-radius: 10px;
    font-size: 10px; font-weight: 700; letter-spacing: .3px;
    border: 1.5px solid #dde2ea; background: #f1f5f9;
    color: var(--primary); cursor: pointer; white-space: nowrap;
    transition: background .1s, border-color .1s, transform .1s;
}
.dosis-unit-btn:hover { background: #e8f6fb; border-color: var(--primary); }
.dosis-unit-btn:active { transform: scale(.93); }

/* ── Via pill ── */
.via-pill {
    display: inline-block;
    padding: 3px 9px; border-radius: 20px;
    font-size: 11px; font-weight: 700;
    border: none; cursor: pointer;
    user-select: none; letter-spacing: .4px;
    transition: opacity .15s, transform .1s;
    white-space: nowrap;
}
.via-pill:active { transform: scale(.93); }

/* via color variants — set by JS on init & cycle */
.via-oral { background: #e8f6fb; color: #033f3f; }
.via-iv   { background: #fee2e2; color: #dc2626; }
.via-im   { background: #ffedd5; color: #c2410c; }
.via-sc   { background: #dcfce7; color: #15803d; }
.via-sl   { background: #f3e8ff; color: #7c3aed; }
.via-top  { background: #fef9c3; color: #a16207; }
.via-inh  { background: #ccfbf1; color: #0f766e; }

/* ── Dose cell ── */
.dose-cell {
    display: flex; align-items: center; justify-content: center; gap: 5px;
}
.dose-time-input {
    border: none; outline: none;
    font-size: 12px; font-family: inherit;
    background: transparent; color: var(--primary);
    width: 82px; cursor: pointer;
    border-bottom: 1px dashed #c7d2e0;
    padding: 1px 0;
}
.dose-time-input:focus { border-bottom-color: var(--accent); color: var(--accent); }

/* Administer button */
.dose-adm-btn {
    background: none; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #cbd5e1; padding: 0;
    transition: color .15s, transform .15s;
    flex-shrink: 0;
}
.dose-adm-btn:hover { color: #86efac; transform: scale(1.15); }
.dose-adm-btn.adm-done { color: #16a34a; }
.dose-adm-btn.adm-done:hover { color: #dc2626; }
.dose-adm-btn.adm-done .adm-icon-empty { display: none !important; }
.dose-adm-btn.adm-done .adm-icon-done  { display: block !important; }

/* Row highlight when all doses administered */
.meds-row.all-adm td { background: #f0fdf4 !important; }

/* ── OBS textarea ── */
.obs-input {
    width: 100%; border: none; outline: none; resize: none; overflow: hidden;
    font-size: 13px; font-family: inherit; line-height: 1.45;
    background: transparent; color: var(--text);
    min-height: 24px; display: block;
}
.obs-input::placeholder { color: #d0d5dd; }

/* ── Obs quick chips ── */
.obs-chips {
    display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px;
    opacity: 0; pointer-events: none; transition: opacity .15s;
}
.meds-row:hover .obs-chips { opacity: 1; pointer-events: auto; }
.obs-chip {
    padding: 2px 7px; border-radius: 10px;
    font-size: 10px; font-weight: 500;
    border: 1px solid #e2e8f0; background: #f8fafc;
    color: #64748b; cursor: pointer; white-space: nowrap;
    transition: background .1s, color .1s, border-color .1s;
}
.obs-chip:hover { background: #e8f6fb; color: var(--primary); border-color: #9db9d0; }

/* ── Delete button ── */
.del-btn {
    background: none; border: none; cursor: pointer;
    color: #cbd5e1;
    padding: 4px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    transition: color var(--transition), background var(--transition);
    opacity: 0;
}
.meds-row:hover .del-btn { opacity: 1; }
.del-btn:hover { color: var(--danger); background: #fff0f0; }

/* Row hover */
.meds-row:hover td { background: #fafbff; }
.meds-row.meds-row-new td { animation: rowSlideIn .25s ease; }
@keyframes rowSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.meds-row.row-removing {
    animation: rowFadeOut .22s ease forwards;
    pointer-events: none;
}
@keyframes rowFadeOut {
    to { opacity: 0; transform: translateX(10px); }
}

/* ── Add dose-column button ── */
.add-dose-col-btn {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted);
    width: 22px; height: 22px; padding: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: color var(--transition), background var(--transition);
}
.add-dose-col-btn:hover { color: var(--primary); background: #e8f6fb; }

/* ── Add medication button ── */
.add-med-btn {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; padding: 11px;
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 13px; font-family: inherit;
    border-top: 1px solid var(--border);
    transition: color var(--transition), background var(--transition);
}
.add-med-btn:hover { color: var(--primary); background: #f0f4ff; }

/* =====================================================
   SHIFT WRAP CARDS (Meds / Cuidados / Sueño tabs)
   ===================================================== */
.shift-wrap {
    border: 1.5px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
    margin-bottom: 10px;
    overflow: hidden;
    transition: box-shadow .15s;
}
.shift-wrap:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }

/* Left accent pleca per shift — muted pastels */
.shift-wrap[data-shift="tm"] { border-left-color: #fcd34d; }
.shift-wrap[data-shift="tv"] { border-left-color: #a5b4fc; }
.shift-wrap[data-shift="tn"] { border-left-color: #7dd3fc; }

.shift-wrap-hd {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    background: #f8fafc; border: none; cursor: pointer;
    font-family: inherit; text-align: left;
    border-bottom: 1.5px solid transparent;
    transition: background .12s, border-color .12s;
}
.shift-wrap-hd:hover { background: #f1f5f9; }
.shift-wrap.shift-wrap-open .shift-wrap-hd {
    background: #f1f5f9;
    border-bottom-color: var(--border);
}

.shift-wrap-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px;
    font-size: 11px; font-weight: 800; letter-spacing: .5px;
    border: 1.5px solid transparent; flex-shrink: 0;
}
.shift-wrap-name {
    font-size: 13px; font-weight: 700; color: var(--text); flex-shrink: 0;
}
.shift-wrap-hours {
    font-size: 11px; color: var(--text-muted); flex-shrink: 0;
}
.shift-wrap-signed {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600; color: #16a34a;
    background: #dcfce7; border-radius: 20px; padding: 3px 9px;
    margin-left: auto; flex-shrink: 0;
}
.shift-wrap-chevron {
    margin-left: auto; color: var(--text-muted); flex-shrink: 0;
    transition: transform .2s;
}
.shift-wrap-signed ~ .shift-wrap-chevron { margin-left: 8px; }
.shift-wrap.shift-wrap-open .shift-wrap-chevron { transform: rotate(180deg); }

/* ── Shift-header RX mini-timeline ── */
.rx-timeline {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 4px;
    overflow: hidden; padding: 0 6px;
    -webkit-mask-image: linear-gradient(to right, #000 80%, transparent 100%);
    mask-image: linear-gradient(to right, #000 80%, transparent 100%);
}
.rx-tl-pill {
    display: inline-flex; align-items: center; gap: 3px;
    flex-shrink: 0; white-space: nowrap;
    border-radius: 999px; padding: 3px 7px 3px 5px;
    font-size: 10px; font-weight: 600; font-family: inherit;
    border: 1.5px solid #e2e8f0; background: #f8fafc; color: #94a3b8;
    transition: background .15s, border-color .15s, color .15s;
}
.rx-tl-pending { background: #f8fafc; border-color: #e2e8f0; color: #94a3b8; }
.rx-tl-adm     { background: #dcfce7; border-color: #86efac; color: #15803d; }
.rx-tl-skipped { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }
.rx-tl-name { font-weight: 700; }
.rx-tl-t    { font-size: 9px; opacity: .75; margin-left: 1px; }
.rx-tl-count {
    flex-shrink: 0; font-size: 10px; font-weight: 800;
    color: #94a3b8; white-space: nowrap; margin-left: 2px;
    padding: 0 2px;
}
.rx-tl-count-done    { color: #15803d; }
.rx-tl-count-partial { color: #d97706; }
.rx-tl-none { font-size: 10px; color: #cbd5e1; font-style: italic; white-space: nowrap; }

.shift-wrap-body {
    display: none;
    padding: 14px 16px;
}
.shift-wrap.shift-wrap-open .shift-wrap-body { display: block; }

/* Signed state — dim body slightly */
.shift-wrap.shift-wrap-signed-state .shift-wrap-body {
    opacity: .65; pointer-events: none;
}

/* Active shift auto-open on page load is done in JS initTurnos */

/* =====================================================
   CARE TAB (Cuidados)
   ===================================================== */
/* =====================================================
   CUIDADOS & SUEÑO — chip-based UX
   ===================================================== */

/* Section wrapper */
/* ── Care-entry: hc-entry style collapsible cards for Cuidados ── */
.care-entry {
    background: var(--white);
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: var(--radius);
    margin-bottom: 8px;
    overflow: hidden;
}
.care-entry-blue   { border-left-color: #9db9d0; }
.care-entry-amber  { border-left-color: #fcd34d; }
.care-entry-green  { border-left-color: #86efac; }
.care-entry-cyan   { border-left-color: #7dd3fc; }
.care-entry-purple { border-left-color: #c4b5fd; }

.care-entry-hd {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 14px; cursor: pointer; gap: 10px;
    transition: background var(--transition);
}
.care-entry-hd:hover { background: #f8fafc; }

.care-ehd-left  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.care-type-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700;
    padding: 3px 10px 3px 8px; border-radius: 20px;
    text-transform: uppercase; letter-spacing: .4px;
}
.care-pill-blue,
.care-pill-amber,
.care-pill-green,
.care-pill-cyan,
.care-pill-purple { background: #f1f5f9; color: #475569; }

.care-ehd-chev {
    color: var(--text-muted);
    transition: transform .2s;
    flex-shrink: 0;
}
.care-entry.care-entry-open .care-ehd-chev { transform: rotate(180deg); }

/* Body: collapsed by default, shown when open */
.care-entry-body {
    display: none;
    padding: 10px 14px 14px;
    border-top: 1px solid var(--border);
}
.care-entry.care-entry-open .care-entry-body { display: block; }

.care-section {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 10px;
}
.care-section-hd {
    display: flex; align-items: center; gap: 9px;
    font-size: 12px; font-weight: 700; color: var(--primary);
    text-transform: uppercase; letter-spacing: .4px;
    margin-bottom: 12px; padding-bottom: 9px;
    border-bottom: 1px solid var(--border);
}
.care-section-icon {
    width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}

/* Chip toggles */
.care-chips-wrap { display: flex; flex-direction: column; gap: 0; }

/* Sub-groups within a care section */
.chip-grp {
    display: flex; flex-direction: column; gap: 6px;
    padding: 10px 0 0;
    border-top: 1px solid #f1f5f9;
}
.chip-grp:first-child { border-top: none; padding-top: 0; }
.chip-grp-lbl {
    display: flex; align-items: center; gap: 8px;
    font-size: 10px; font-weight: 700;
    color: #94a3b8; text-transform: uppercase; letter-spacing: .6px;
    white-space: nowrap;
}
.chip-grp-lbl::after {
    content: ''; flex: 1;
    height: 1px; background: #e8ecf0;
}
.chip-grp-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.care-chip {
    display: inline-flex; align-items: center;
    padding: 6px 13px; border-radius: 20px;
    font-size: 12px; font-weight: 500;
    border: 1.5px solid #e2e8f0; background: #f8fafc;
    color: var(--text-muted); cursor: pointer;
    transition: background .12s, border-color .12s, color .12s, transform .1s;
}
.care-chip:hover { border-color: #94a3b8; color: var(--text); background: #f1f5f9; }
.care-chip:active { transform: scale(.96); }
.care-chip.care-chip-on {
    background: #dcfce7; border-color: #86efac; color: #15803d; font-weight: 600;
}
.care-chip.care-chip-alert.care-chip-on {
    background: #fee2e2; border-color: #fca5a5; color: #dc2626;
}

/* Meal rows */
.meal-rows { display: flex; flex-direction: column; gap: 8px; }
.meal-row {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap;
}
.meal-row-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: var(--text);
    min-width: 80px;
}
.meal-dot {
    display: inline-block; width: 8px; height: 8px;
    border-radius: 50%; flex-shrink: 0;
}
.meal-btns { display: flex; gap: 5px; flex-wrap: wrap; }
.meal-btn {
    padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;
    border: 1.5px solid #e2e8f0; background: #f8fafc;
    color: var(--text-muted); cursor: pointer;
    transition: background .12s, border-color .12s, color .12s, transform .1s;
}
.meal-btn:active { transform: scale(.96); }
.meal-btn-full.meal-btn-on    { background:#dcfce7; border-color:#86efac; color:#15803d; font-weight:600; }
.meal-btn-partial.meal-btn-on { background:#fef3c7; border-color:#fcd34d; color:#92400e; font-weight:600; }
.meal-btn-skip.meal-btn-on    { background:#fee2e2; border-color:#fca5a5; color:#dc2626; font-weight:600; }
.meal-btn-fast.meal-btn-on    { background:#f1f5f9; border-color:#94a3b8; color:#334155; font-weight:600; }

/* =====================================================
   SUEÑO — stepper, times, quality
   ===================================================== */
.sleep-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 10px;
}
.sleep-block {
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 16px;
}
.sleep-block-lbl {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .4px;
    margin-bottom: 12px;
}
/* Duration stepper */
.sleep-stepper {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin-bottom: 12px;
}
.sleep-step-btn {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1.5px solid var(--border); background: #f8fafc;
    font-size: 18px; font-weight: 700; color: var(--primary);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .12s, border-color .12s;
}
.sleep-step-btn:hover { background: #e8f6fb; border-color: var(--primary); }
.sleep-step-val {
    font-size: 22px; font-weight: 800; color: var(--primary);
    min-width: 70px; text-align: center;
}
/* Preset chips */
.sleep-presets {
    display: flex; flex-wrap: wrap; gap: 5px; justify-content: center;
}
.sleep-pre {
    padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600;
    border: 1.5px solid #e2e8f0; background: #f8fafc; color: var(--text-muted);
    cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.sleep-pre:hover { background: #e8f6fb; border-color: var(--primary); color: var(--primary); }
.sleep-pre.sleep-pre-on { background: var(--primary); border-color: var(--primary); color: #fff; }
/* Time pair */
.sleep-times-block { display: flex; align-items: center; }
.sleep-time-pair {
    display: flex; align-items: center; gap: 14px;
    width: 100%;
}
.sleep-time-field { flex: 1; }
.sleep-time-lbl {
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px;
}
.sleep-time-input {
    width: 100%; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    padding: 9px 10px; font-size: 15px; font-weight: 600; color: var(--primary);
    background: var(--white); font-family: inherit; cursor: pointer;
    transition: border-color .15s;
}
.sleep-time-input:focus { outline: none; border-color: var(--accent); }
.sleep-time-arrow { color: var(--text-muted); flex-shrink: 0; }
/* Quality row */
.sleep-quality-row {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.sleep-q-btn {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 14px; border-radius: var(--radius-sm);
    border: 1.5px solid #e2e8f0; background: #f8fafc;
    cursor: pointer; font-family: inherit;
    transition: background .12s, border-color .12s, transform .1s;
    flex: 1; min-width: 80px;
}
.sleep-q-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
.sleep-q-btn:active { transform: scale(.97); }
.sleep-q-icon { display: flex; align-items: center; justify-content: center; color: #94a3b8; transition: color .12s; }
.sleep-q-excellent .sleep-q-icon { color: #4ade80; }
.sleep-q-good      .sleep-q-icon { color: #72c3cc; }
.sleep-q-fair      .sleep-q-icon { color: #fbbf24; }
.sleep-q-bad       .sleep-q-icon { color: #fb923c; }
.sleep-q-insomnia  .sleep-q-icon { color: #f87171; }
.sleep-q-lbl  { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.sleep-q-btn.sleep-q-on .sleep-q-lbl { font-weight: 700; }
.sleep-q-excellent.sleep-q-on { background:#dcfce7; border-color:#86efac; }
.sleep-q-excellent.sleep-q-on .sleep-q-lbl { color:#15803d; }
.sleep-q-excellent.sleep-q-on .sleep-q-icon { color:#15803d; }
.sleep-q-good.sleep-q-on      { background:#e8f6fb; border-color:#9db9d0; }
.sleep-q-good.sleep-q-on .sleep-q-lbl      { color:#033f3f; }
.sleep-q-good.sleep-q-on .sleep-q-icon     { color:#033f3f; }
.sleep-q-fair.sleep-q-on      { background:#fef3c7; border-color:#fcd34d; }
.sleep-q-fair.sleep-q-on .sleep-q-lbl      { color:#92400e; }
.sleep-q-fair.sleep-q-on .sleep-q-icon     { color:#92400e; }
.sleep-q-bad.sleep-q-on       { background:#fed7aa; border-color:#fb923c; }
.sleep-q-bad.sleep-q-on .sleep-q-lbl       { color:#c2410c; }
.sleep-q-bad.sleep-q-on .sleep-q-icon      { color:#c2410c; }
.sleep-q-insomnia.sleep-q-on  { background:#fee2e2; border-color:#fca5a5; }
.sleep-q-insomnia.sleep-q-on .sleep-q-lbl  { color:#dc2626; }
.sleep-q-insomnia.sleep-q-on .sleep-q-icon { color:#dc2626; }

.care-textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-size: 13px; font-family: inherit;
    resize: vertical; min-height: 70px;
    outline: none; box-sizing: border-box;
}
.care-textarea:focus { border-color: var(--accent); }

/* =====================================================
   LOGIN PAGE
   ===================================================== */
body.login-page {
    background: var(--brand-page-bg);
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    overflow: hidden;
    position: fixed;
    inset: 0;
    padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}
.login-outer {
    width: 100%; max-width: 440px; padding: 20px;
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}
.login-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 40px 36px 32px;
    border: 1px solid rgba(157,185,208,.48);
    box-shadow: var(--shadow-md);
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}
.login-card *, .login-card *::before, .login-card *::after { box-sizing: border-box; }
.login-card--register { max-width: 520px; }
body.register-page .login-outer { max-width: 520px; }
.reg-required-star {
    color: #dc2626;
    font-weight: 800;
}
.login-required {
    color: #dc2626;
    font-weight: 800;
    margin-left: 3px;
}
.reg-event-hero {
    margin-bottom: 18px;
    padding: 16px 16px 15px;
    background: #f6fbfd;
    border: 1px solid #b5cddd;
    border-left: 4px solid #178391;
    border-radius: 12px;
    color: #033f3f;
    display: flex;
    flex-direction: column;
    gap: 9px;
    box-shadow: 0 10px 24px rgba(3, 63, 63, .08);
}
.reg-event-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #178391;
}
.reg-event-title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
    color: #033f3f;
}
.reg-event-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.reg-event-pill {
    background: #e8f6fb;
    color: #033f3f;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.reg-event-hint {
    background: #fff;
    border: 1px solid #dbe7ec;
    border-radius: 10px;
    padding: 10px 11px;
    font-size: 13px;
    line-height: 1.55;
    color: #334155;
}
[data-theme="dark"] .reg-event-hero {
    background: #12222a;
    border-color: #294653;
    border-left-color: #38bdf8;
    color: #e8f6fb;
    box-shadow: none;
}
[data-theme="dark"] .reg-event-kicker { color: #7dd3fc; }
[data-theme="dark"] .reg-event-title { color: #f8fafc; }
[data-theme="dark"] .reg-event-pill {
    background: #193645;
    color: #bae6fd;
}
[data-theme="dark"] .reg-event-hint {
    background: #0f172a;
    border-color: #334155;
    color: #cbd5e1;
}
.reg-event-inst-card {
    margin: 0 0 18px;
    padding: 14px 16px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    box-shadow: 0 1px 6px rgba(15, 23, 42, .04);
}
.reg-event-inst-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}
.reg-event-inst-input {
    width: 100%;
    padding: 10px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    font-family: inherit;
    background: var(--white);
    color: var(--text);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.reg-event-inst-input:focus {
    border-color: #178391;
    box-shadow: 0 0 0 3px rgba(23,131,145,.14);
}

/* Register name row: 2-col on desktop, stack on small screens */
.reg-name-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    min-width: 0;
}
.reg-name-row .login-field { margin-bottom: 16px; }
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
    body.register-page {
        position: static;
        inset: auto;
        min-height: 100dvh;
        overflow: auto;
        align-items: flex-start;
        justify-content: center;
    }
    body.register-page .login-outer {
        width: 100%;
        max-width: none;
        max-height: none;
        min-height: 100dvh;
        padding: 12px;
    }
    body.register-page .login-card--register {
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
    }
}
@media (max-width: 480px) {
    body.login-page {
        position: static;
        inset: auto;
        min-height: 100dvh;
        overflow: auto;
        align-items: flex-start;
    }
    .login-outer {
        max-height: none;
        min-height: 100dvh;
        padding: 12px;
    }
    .login-card { padding: 24px 16px 22px; border-radius: 14px; }
    .login-card--register { padding: 22px 14px 20px; }
    .reg-name-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .login-brand-new { margin-bottom: 20px; }
    .login-heart-icon { width: 50px; height: 50px; margin-bottom: 10px; }
    .login-app-name { font-size: 22px; }
    .login-app-sub { font-size: 14px; }
    .login-alert { align-items: flex-start; padding: 12px 13px; font-size: 14px; }
    .login-field label { font-size: 14px; }
    .login-input { font-size: 16px; }
    .reg-event-inst-input { font-size: 16px; }
    .login-input-icon { padding-left: 10px; padding-right: 8px; }
    .reg-event-hero { padding: 16px 14px 14px; gap: 10px; }
    .reg-event-kicker { font-size: 12px; }
    .reg-event-title { font-size: 20px; }
    .reg-event-hint { font-size: 15px; line-height: 1.6; padding: 11px 12px; }
}
body.register-page.register-viewport-wide {
    position: static;
    inset: auto;
    align-items: flex-start;
    justify-content: center;
    overflow: auto;
}
body.register-page.register-viewport-wide .login-outer {
    width: 100%;
    max-width: none;
    max-height: none;
    padding: 14px;
}
body.register-page.register-viewport-wide .login-card--register {
    width: 100%;
    max-width: none;
    padding: 24px 20px 24px;
    border-radius: 18px;
}
body.register-page.register-viewport-wide .reg-name-row {
    grid-template-columns: 1fr;
    gap: 0;
}
body.register-page.register-viewport-wide .login-brand-new { margin-bottom: 22px; }
body.register-page.register-viewport-wide .login-heart-icon { width: 64px; height: 64px; margin-bottom: 12px; }
body.register-page.register-viewport-wide .login-app-name { font-size: 28px; }
body.register-page.register-viewport-wide .login-app-sub { font-size: 18px; }
body.register-page.register-viewport-wide .login-alert { font-size: 18px; padding: 16px 18px; }
body.register-page.register-viewport-wide .login-field { margin-bottom: 18px; }
body.register-page.register-viewport-wide .login-field label,
body.register-page.register-viewport-wide .reg-event-inst-label {
    font-size: 18px;
    margin-bottom: 8px;
}
body.register-page.register-viewport-wide .login-input,
body.register-page.register-viewport-wide .reg-event-inst-input {
    font-size: 22px;
    min-height: 52px;
    padding-top: 10px;
    padding-bottom: 10px;
}
body.register-page.register-viewport-wide .login-input-icon { padding-left: 14px; padding-right: 12px; }
body.register-page.register-viewport-wide .login-input-icon svg,
body.register-page.register-viewport-wide .login-eye-btn svg { width: 24px; height: 24px; }
body.register-page.register-viewport-wide .login-eye-btn { padding: 0 16px; }
body.register-page.register-viewport-wide .reg-event-inst-card,
body.register-page.register-viewport-wide .reg-event-hero,
body.register-page.register-viewport-wide .login-card--register > div[style*="gradient"] {
    margin-bottom: 20px;
    padding: 18px 20px;
    border-radius: 14px;
}
body.register-page.register-viewport-wide .reg-event-kicker { font-size: 16px; }
body.register-page.register-viewport-wide .reg-event-title { font-size: 24px; }
body.register-page.register-viewport-wide .reg-event-pill { font-size: 14px; }
body.register-page.register-viewport-wide .reg-event-hint { font-size: 18px; line-height: 1.6; }
body.register-page.register-viewport-wide .reg-pw-reqs,
body.register-page.register-viewport-wide .reg-match-msg,
body.register-page.register-viewport-wide .reg-accept-label,
body.register-page.register-viewport-wide .login-links p,
body.register-page.register-viewport-wide #consentError {
    font-size: 16px !important;
}
body.register-page.register-viewport-wide .login-btn {
    font-size: 20px;
    padding: 16px;
    border-radius: 12px;
}
@media (max-device-width: 600px) and (min-width: 700px) {
    body.register-page {
        position: static;
        inset: auto;
        align-items: flex-start;
        justify-content: center;
        overflow: auto;
    }
    body.register-page .login-outer {
        width: 100%;
        max-width: none;
        max-height: none;
        padding: 14px;
    }
    body.register-page .login-card--register {
        width: 100%;
        max-width: none;
        padding: 24px 20px 24px;
        border-radius: 18px;
    }
    body.register-page .reg-name-row { grid-template-columns: 1fr; gap: 0; }
    body.register-page .login-input,
    body.register-page .reg-event-inst-input { font-size: 22px; min-height: 52px; }
    body.register-page .login-field label,
    body.register-page .reg-event-inst-label { font-size: 18px; }
    body.register-page .reg-pw-reqs,
    body.register-page .reg-match-msg,
    body.register-page .reg-accept-label,
    body.register-page .login-links p,
    body.register-page #consentError { font-size: 16px !important; }
    body.register-page .reg-event-kicker { font-size: 16px; }
    body.register-page .reg-event-title { font-size: 24px; }
    body.register-page .reg-event-pill { font-size: 14px; }
    body.register-page .reg-event-hint { font-size: 18px; line-height: 1.6; }
    body.register-page .login-btn { font-size: 20px; padding: 16px; }
}

/* Brand block */
.login-brand-new {
    display: flex; flex-direction: column;
    align-items: center; text-align: center;
    margin-bottom: 28px;
}
.login-heart-icon {
    width: 58px; height: 58px;
    background: #fff;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
    padding: 8px;
    box-sizing: border-box;
    box-shadow: 0 12px 28px rgba(3, 63, 63, .16), 0 0 0 1px rgba(23, 131, 145, .12);
}
.login-heart-icon img { width: 100%; height: 100%; object-fit: contain; display: block;
    filter: invert(20%) sepia(60%) saturate(700%) hue-rotate(142deg) brightness(75%) contrast(105%); }
.login-app-name {
    font-size: 24px; font-weight: 800;
    color: #033f3f; margin-bottom: 4px;
}
.login-app-sub {
    font-size: 13.5px; color: var(--text-muted);
}

/* Form */
.login-form { margin-bottom: 0; }

/* Alert / feedback */
.login-alert {
    display: flex; align-items: center; gap: 9px;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 500;
    margin-bottom: 16px;
    line-height: 1.45;
}
.login-alert--error { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.login-alert--info  { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.login-alert svg    { flex-shrink: 0; }
.login-field { margin-bottom: 16px; min-width: 0; }
.login-field label {
    display: block; font-size: 12px; font-weight: 600;
    color: var(--text); margin-bottom: 6px;
}
.login-input-wrap {
    position: relative; display: flex; align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--white);
    transition: border-color var(--transition), box-shadow var(--transition);
    min-width: 0;
}
.login-input-wrap:focus-within {
    border-color: #178391;
    box-shadow: 0 0 0 3px rgba(23,131,145,.14);
}
.login-input-icon {
    padding: 0 10px 0 12px;
    color: #94a3b8;
    display: flex; align-items: center; flex-shrink: 0;
}
.login-input {
    flex: 1; border: none; outline: none;
    padding: 10px 10px 10px 0;
    font-size: 13.5px; font-family: inherit;
    color: var(--text); background: transparent;
    min-width: 0;
}
.login-input::placeholder { color: #bbc5d0; }
.login-eye-btn {
    background: none; border: none; cursor: pointer;
    padding: 0 12px; color: #94a3b8;
    display: flex; align-items: center;
    transition: color var(--transition);
}
.login-eye-btn:hover { color: var(--primary); }
.login-forgot {
    text-align: right; margin-top: 6px;
}
.login-forgot a {
    font-size: 12px; color: #178391; font-weight: 600;
}
.login-forgot a:hover { text-decoration: underline; }

/* Submit button */
.login-btn {
    width: 100%; padding: 11px;
    background: #178391; color: #fff;
    border: none; border-radius: var(--radius-sm);
    font-size: 14px; font-weight: 600;
    cursor: pointer; margin-top: 6px;
    transition: background var(--transition), box-shadow var(--transition);
}
.login-btn:hover {
    background: #033f3f;
    box-shadow: 0 4px 14px rgba(23,131,145,.30);
}
.login-btn:disabled {
    background: #cbd5e1;
    color: #64748b;
    opacity: 1;
    cursor: not-allowed;
    box-shadow: none;
}
.login-btn:disabled:hover {
    background: #cbd5e1;
    box-shadow: none;
}
.login-spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2.5px solid rgba(255,255,255,.35);
  border-top-color: #fff; border-radius: 50%;
  animation: login-spin .6s linear infinite;
  vertical-align: middle;
}
@keyframes login-spin { to { transform: rotate(360deg); } }

/* Footer links */
.login-links {
    text-align: center; margin-top: 22px;
}
.login-links p {
    font-size: 12.5px; color: var(--text-muted); margin-bottom: 6px;
}
.login-links a { color: #178391; font-weight: 700; }
.login-links a:hover { text-decoration: underline; }
.login-back { font-weight: 500 !important; color: var(--text-muted) !important; }
.login-back:hover { color: var(--primary) !important; }

/* =====================================================
   DASHBOARD
   ===================================================== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.stat-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    display: flex; align-items: center; gap: 14px;
}
.stat-icon {
    width: 46px; height: 46px;
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.stat-icon.blue { background: #e8f6fb; color: var(--primary-light); }
.stat-icon.green { background: #dcfce7; color: var(--success); }
.stat-icon.yellow { background: #fef9c3; color: #d97706; }
.stat-icon.red { background: #fee2e2; color: var(--danger); }
.stat-value { font-size: 24px; font-weight: 700; color: var(--text); line-height: 1; }
.stat-label { font-size: 12px; color: var(--text-muted); margin-top: 3px; }

/* =====================================================
   PLACEHOLDER / COMING SOON
   ===================================================== */
.placeholder-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 60px 20px;
    text-align: center;
    color: var(--text-muted);
}
.placeholder-card svg { margin-bottom: 14px; color: #cbd5e1; }
.placeholder-card h3 { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.placeholder-card p { font-size: 13px; }

/* =====================================================
   CONFIGURACIÓN MODULE
   ===================================================== */
.cfg-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
    align-items: start;
}

/* Left navigation */
.cfg-nav {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px;
    display: flex; flex-direction: column; gap: 2px;
    position: sticky; top: 16px;
}
.cfg-nav-btn {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 12px;
    background: none; border: none;
    border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 500;
    color: var(--text-muted);
    cursor: pointer; text-align: left;
    border-left: 3px solid transparent;
    transition: background var(--transition), color var(--transition);
    white-space: nowrap;
}
.cfg-nav-btn svg { flex-shrink: 0; }
.cfg-nav-btn:hover { background: #f1f5f9; color: var(--primary); }
.cfg-nav-btn.active {
    background: #e8f6fb; color: var(--primary);
    border-left-color: var(--primary);
    font-weight: 600;
}

/* Panels */
.cfg-panels { min-width: 0; }
.cfg-panel { display: none; }
.cfg-panel.active { display: block; }
.cfg-panel-header {
    display: flex; align-items: center; gap: 8px;
    padding: 13px 18px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: 2px solid var(--primary);
    font-size: 13px; font-weight: 700;
    color: var(--primary); text-transform: uppercase; letter-spacing: .4px;
}
.cfg-panel-body {
    background: var(--white);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 22px 22px 0;
}
.cfg-panel-footer {
    padding: 16px 0 20px;
    border-top: 1px solid var(--border);
    margin-top: 20px;
    display: flex; justify-content: flex-end;
}

/* Grids inside panels */
.cfg-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
}
.cfg-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px 20px;
}
.cfg-span-2 { grid-column: span 2; }
.cfg-hint { display: block; font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.cfg-error { font-size: 12px; color: var(--danger); font-weight: 500; }

/* Divider / section label */
.cfg-divider {
    font-size: 11px; font-weight: 700;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 6px; margin-bottom: 14px;
}

/* Danger-zone divider variant */
.cfg-divider-danger {
    color: #dc2626;
    border-bottom-color: #fecaca;
}

/* Danger zone card */
.cfg-danger-zone {
    background: #fff5f5;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 14px;
}
.cfg-danger-desc {
    font-size: 12.5px; color: #7f1d1d;
    line-height: 1.55; margin-bottom: 14px;
}
.cfg-danger-hint {
    display: block;
    font-size: 12px;
    background: #fff;
    border: 1px solid #fecaca;
    border-radius: 5px;
    padding: 4px 8px;
    color: #dc2626;
    margin: 6px 0 10px;
    font-family: monospace;
    letter-spacing: .01em;
}
.btn-danger-action {
    display: inline-flex; align-items: center;
    padding: 7px 16px; font-size: 13px; font-weight: 600;
    background: #dc2626; color: #fff;
    border: none; border-radius: 6px; cursor: pointer;
    transition: background .15s;
}
.btn-danger-action:hover  { background: #b91c1c; }
.btn-danger-action:active { background: #991b1b; }
.btn-danger-action:disabled { background: #fca5a5; cursor: not-allowed; }

/* Avatar in profile panel */
.cfg-avatar-row {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 20px;
}
.cfg-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    background: #e8f6fb; color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700; flex-shrink: 0;
    overflow: hidden;
}
.cfg-avatar img { width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;cursor:zoom-in; }

/* Toggle switch */
.cfg-toggle-row {
    display: flex; align-items: center;
    justify-content: space-between; gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
}
.cfg-toggle-row:last-of-type { border-bottom: none; }
.cfg-toggle-label { font-size: 13px; font-weight: 500; color: var(--text); }
.cfg-toggle-desc  { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.cfg-toggle {
    position: relative; display: inline-block;
    width: 40px; height: 22px; flex-shrink: 0;
}
.cfg-toggle input { opacity: 0; width: 0; height: 0; }
.cfg-toggle-slider {
    position: absolute; inset: 0;
    background: #cbd5e1; border-radius: 22px;
    cursor: pointer;
    transition: background var(--transition);
}
.cfg-toggle-slider::before {
    content: '';
    position: absolute;
    left: 3px; bottom: 3px;
    width: 16px; height: 16px;
    background: #fff; border-radius: 50%;
    transition: transform var(--transition);
}
.cfg-toggle input:checked + .cfg-toggle-slider { background: var(--primary); }
.cfg-toggle input:checked + .cfg-toggle-slider::before { transform: translateX(18px); }

/* Turno cards */
.cfg-turno-card {
    background: #fafbfc;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 14px;
}
.cfg-turno-header {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px;
}
.cfg-turno-badge {
    display: inline-block; padding: 3px 10px;
    border-radius: var(--radius-sm);
    font-size: 11px; font-weight: 700; letter-spacing: .3px;
}

/* Info grid (sistema) */
.cfg-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 4px;
}
.cfg-info-card {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
}
.cfg-info-label { font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
.cfg-info-value { font-size: 13px; font-weight: 600; color: var(--text); }

/* Backup row */
.cfg-backup-row {
    display: flex; align-items: center;
    justify-content: space-between; gap: 16px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
}

/* ── Import UI ──────────────────────────────────────────────── */
.imp-info-banner {
    display: flex; align-items: flex-start; gap: 10px;
    background: #e8f6fb; border: 1px solid #bae6fd;
    border-radius: 10px; padding: 12px 14px;
    font-size: 12px; color: #0369a1;
    margin-bottom: 14px; line-height: 1.55;
}
.imp-info-banner svg { flex-shrink: 0; margin-top: 1px; color: #178391; }
.imp-drop-zone {
    border: 2px dashed #cbd5e1; border-radius: 12px;
    padding: 32px 20px; text-align: center; cursor: pointer;
    transition: border-color .2s, background .2s; background: #fafafa;
}
.imp-drop-zone:hover, .imp-drop-zone.imp-drag { border-color: #6366f1; background: #f5f3ff; }
.imp-drop-label { font-size: 13px; font-weight: 600; color: #475569; margin-top: 10px; }
.imp-drop-hint  { font-size: 11px; color: #94a3b8; margin-top: 4px; }
.imp-file-row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; background: #f8fafc;
    border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 6px;
}
.imp-file-icon {
    width: 32px; height: 32px; background: #e0e7ff; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: #4f46e5;
}
.imp-file-name {
    font-size: 12px; font-weight: 600; color: var(--text);
    flex: 1; min-width: 0; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.imp-file-type {
    font-size: 11px; padding: 2px 8px; border-radius: 20px;
    font-weight: 600; white-space: nowrap; flex-shrink: 0;
}
.imp-file-type-ok   { background: #dcfce7; color: #15803d; }
.imp-file-type-warn { background: #fef9c3; color: #92400e; }
.imp-file-rows { font-size: 11px; color: #94a3b8; white-space: nowrap; flex-shrink: 0; }
.imp-log {
    background: #0f172a; border-radius: 10px; padding: 14px 16px;
    font-size: 12px; font-family: monospace; line-height: 1.7;
    max-height: 260px; overflow-y: auto; color: #94a3b8;
}
.imp-log-ok   { color: #4ade80; }
.imp-log-info { color: #7dd3fc; }
.imp-log-warn { color: #fbbf24; }
.imp-log-err  { color: #f87171; }
.imp-stats {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px; margin-top: 14px;
}
.imp-stat-card {
    background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 10px; padding: 12px 14px; text-align: center;
}
.imp-stat-num { font-size: 22px; font-weight: 700; color: #1e293b; line-height: 1; }
.imp-stat-lbl {
    font-size: 11px; color: #94a3b8; margin-top: 4px;
    text-transform: uppercase; letter-spacing: .04em;
}

/* Save button */
.btn-save {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 20px;
    background: var(--primary); color: #fff;
    border: none; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background var(--transition);
}
.btn-save:hover { background: var(--primary-dark); }

/* Toast — fixed bottom-right snackbar */
.cfg-toast {
    position: fixed; bottom: 24px; right: 24px; z-index: 9999;
    display: flex; align-items: center; gap: 8px;
    background: #166534; color: #fff;
    padding: 10px 16px; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 500;
    box-shadow: 0 4px 16px rgba(0,0,0,.22);
    max-width: 360px;
    opacity: 0; pointer-events: none;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease;
}
.cfg-toast.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.cfg-toast.warn  { background: #b45309; }

@media (max-width: 860px) {
    .cfg-layout { grid-template-columns: 1fr; }
    .cfg-nav { flex-direction: row; flex-wrap: wrap; position: static; }
    .cfg-grid-2,
    .cfg-grid-3 { grid-template-columns: 1fr; }
    .cfg-span-2 { grid-column: span 1; }
}

/* ─── Panel 7/8: WhatsApp API & SMTP — status bar ── */
.cfg-api-status {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    line-height: 1.5;
    margin-bottom: 4px;
    transition: background .2s, border-color .2s, color .2s;
    /* default = warn (not verified) */
    background: #fefce8;
    border: 1px solid #fde047;
    color: #713f12;
}
.cfg-api-status.cfg-status--ok {
    background: #f0fdf4;
    border-color: #86efac;
    color: #14532d;
}
.cfg-api-status.cfg-status--error {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #7f1d1d;
}
.cfg-api-status.cfg-status--loading {
    background: #e8f6fb;
    border-color: #7dd3fc;
    color: #0c4a6e;
}
/* Icon circle */
.cfg-status-icon {
    width: 22px; height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
    background: #fbbf24; color: #78350f; /* warn default */
}
.cfg-status--ok      .cfg-status-icon { background: #22c55e; color: #fff; }
.cfg-status--error   .cfg-status-icon { background: #ef4444; color: #fff; }
.cfg-status--loading .cfg-status-icon { background: #38bdf8; color: #fff; }
.cfg-status-body  { flex: 1; min-width: 0; }
.cfg-status-label { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.cfg-status-desc  { font-size: 12px; opacity: .88; }
/* Spin animation for loading state */
@keyframes cfg-spin { to { transform: rotate(360deg); } }
.cfg-status-icon--spin svg { animation: cfg-spin .75s linear infinite; }
/* Backward-compat: hide old dot elements */
.cfg-api-dot { display: none; }
:root { --wa-green: #15803d; }

/* ─── Panel 7: Roles y Permisos ─────────────────── */
.cfg-role-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
}
.cfg-role-card {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 7px;
}
.cfg-role-card-desc {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.55;
}

/* Roles matrix container */
.cfg-roles-matrix {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    font-size: 12.5px;
}

/* Row grid: label + 4 role columns */
.cfg-rm-row {
    display: grid;
    grid-template-columns: 1fr repeat(4, 80px);
    align-items: center;
    border-bottom: 1px solid var(--border);
}
.cfg-rm-row:last-child { border-bottom: none; }

/* Header row */
.cfg-rm-header {
    background: #f8fafc;
}
.cfg-rm-header .cfg-rm-perm {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .45px;
}

/* Permission label cell */
.cfg-rm-perm {
    padding: 10px 14px;
    color: var(--text);
    min-width: 0;
    font-size: 12.5px;
}

/* Role column cells */
.cfg-rm-col {
    padding: 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--border);
}
.cfg-rm-header .cfg-rm-col { padding: 10px 4px; }

/* Group header row */
.cfg-rm-group {
    padding: 6px 14px;
    background: #eef2f7;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--border);
}

/* Admin locked checkmark */
.cfg-rm-locked {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* Toggle switch inside matrix */
.cfg-rm-toggle {
    position: relative;
    display: inline-block;
    width: 34px; height: 18px;
    flex-shrink: 0;
}
.cfg-rm-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.cfg-rm-slider {
    position: absolute; cursor: pointer; inset: 0;
    background: #cbd5e1;
    border-radius: 18px;
    transition: background .15s;
}
.cfg-rm-slider::before {
    content: '';
    position: absolute;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: #fff;
    left: 2.5px; top: 2.5px;
    transition: transform .15s;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.cfg-rm-toggle input:checked + .cfg-rm-slider { background: var(--primary); }
.cfg-rm-toggle input:checked + .cfg-rm-slider::before { transform: translateX(16px); }

@media (max-width: 640px) {
    .cfg-roles-matrix { overflow-x: auto; }
    .cfg-rm-row { grid-template-columns: minmax(140px,1fr) repeat(4, 64px); }
    .cfg-rm-perm { font-size: 11.5px; padding: 9px 10px; }
    .cfg-role-cards { grid-template-columns: 1fr 1fr; }
}

/* =====================================================
   PERSONAL MODULE
   ===================================================== */
.per-toolbar {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px; flex-wrap: wrap;
    justify-content: space-between;
}
.per-filter-wrap {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 7px 12px; background: var(--white);
    cursor: pointer;
}
.per-role-select {
    border: none; outline: none; background: transparent;
    font-size: 13px; font-family: inherit; color: var(--text);
    cursor: pointer;
}
.per-table th { text-align: left !important; padding: 11px 14px; }
.per-table td { padding: 12px 14px; vertical-align: middle; }
.per-table tr:hover td { background: #fafbff; }

/* Avatar */
.per-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11.5px; font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}
.per-avatar img { width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;cursor:zoom-in; }
.per-user-cell { display: flex; align-items: center; gap: 10px; }
.per-name { font-size: 13px; font-weight: 500; color: var(--text); }

/* Role badges */
.per-badge {
    display: inline-flex; align-items: center; padding: 3px 10px;
    border-radius: 99px; font-size: 11px; font-weight: 600;
    letter-spacing: .1px;
}
.per-badge-enf        { background: #e8f6fb; color: #033f3f; }
.per-badge-admin      { background: #ede9fe; color: #6d28d9; }
.per-badge-superadmin { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }

/* Contact cell */
.per-contact {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-muted);
}
.per-contact svg { flex-shrink: 0; color: var(--text-muted); }

/* Status dot */
.per-status {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 500;
}
.per-dot {
    width: 7px; height: 7px; border-radius: 50%;
    flex-shrink: 0;
}
.per-dot-active .per-dot   { background: #16a34a; }
.per-dot-inactive .per-dot { background: #94a3b8; }
.per-dot-active   { color: #16a34a; }
.per-dot-inactive { color: #94a3b8; }

/* Modal */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.4);
    display: none; align-items: center; justify-content: center;
    z-index: 500;
}
.modal-overlay.active,
.modal-overlay.open { display: flex; }
.modal-card,
.modal-box {
    background: var(--white);
    border-radius: var(--radius-lg);
    width: 100%; max-width: 440px;
    margin: 16px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.modal-title { font-size: 15px; font-weight: 700; color: var(--text); }
.modal-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); padding: 4px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center;
    transition: color var(--transition), background var(--transition);
}
.modal-close:hover { color: var(--danger); background: #fff0f0; }
.modal-body  { padding: 20px; }
.modal-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    display: flex; justify-content: flex-end; gap: 10px;
}

/* =====================================================
   EXPEDIENTES — RESIDENTS LIST
   ===================================================== */
.exp-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
}
.exp-search-wrap {
    position: relative; flex: 1; max-width: 340px;
}
.exp-search-wrap svg {
    position: absolute; left: 10px; top: 50%;
    transform: translateY(-50%); color: var(--text-muted);
    pointer-events: none;
}
.exp-search {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 13px; outline: none; background: var(--white);
}
.exp-search:focus { border-color: var(--accent); }
.btn-add {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    background: var(--primary); color: #fff;
    border: none; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background var(--transition);
    white-space: nowrap;
}
.btn-add:hover { background: var(--primary-dark); }
.btn-sm { padding: 6px 12px !important; font-size: 12px !important; }

/* ── Form inputs (global) ── */
.form-group { margin-bottom: 14px; }
.form-input {
    width: 100%; padding: 8px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 13px; font-family: inherit; outline: none;
    background: var(--white); color: var(--text);
    transition: border-color .15s;
}
.form-input:focus { border-color: var(--accent); }
.form-input[readonly] { background: #f8fafc; color: var(--text-muted); }
.form-input.input-error { border-color: #dc2626 !important; }
.form-input.input-error:focus { border-color: #dc2626 !important; box-shadow: 0 0 0 2px rgba(220,38,38,.12); }
.nu-field-err { display: block; font-size: 11px; color: #dc2626; margin-top: 3px; min-height: 14px; line-height: 1.3; }
.nu-form-alert { display: none; background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px; color: #b91c1c; font-size: 12.5px; padding: 8px 12px; margin-bottom: 12px; }

.residents-table th { text-align: left; }
.residents-table td { text-align: left; }
.td-avatar {
    width: 36px; text-align: center !important;
}
.res-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: #e8f6fb; color: var(--primary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
}
.badge {
    display: inline-block; padding: 2px 8px;
    border-radius: 20px; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .3px;
}
.badge-active   { background: #dcfce7; color: #15803d; }
.badge-inactive { background: #fee2e2; color: #dc2626; }
.badge-watch    { background: #fef9c3; color: #854d0e; }
.action-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 4px; padding: 5px 10px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--white); font-size: 12px; font-weight: 500;
    color: var(--text); cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    text-decoration: none;
}
.action-btn:hover { background: #e8f6fb; color: var(--primary); border-color: var(--accent); }
.action-btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.action-btn.primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }

/* =====================================================
   BITÁCORA DIGITAL — READ-ONLY
   ===================================================== */
.ro-badge {
    display: inline-block; padding: 2px 9px;
    background: #f1f5f9; color: var(--text-muted);
    border: 1px solid var(--border); border-radius: 20px;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; margin-left: 8px; vertical-align: middle;
}

/* Section headers inside bitácora digital */
.bd-section {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
    overflow: hidden;
}
.bd-section-header {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 12px; font-weight: 700;
    color: var(--primary); text-transform: uppercase; letter-spacing: .5px;
}
.bd-section-header svg { flex-shrink: 0; }
.bd-section-body { padding: 0; }
.bd-empty {
    padding: 20px; text-align: center;
    font-size: 12px; font-weight: 600;
    color: var(--primary-light); text-transform: uppercase; letter-spacing: .3px;
}
.bd-empty-warn {
    padding: 14px; text-align: left;
    font-size: 11.5px; font-weight: 600;
    color: var(--primary-light); text-transform: uppercase; letter-spacing: .3px;
}

/* Sub-section label (e.g. "S. VITALES") */
.bd-sub-label {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 14px 5px;
    font-size: 11px; font-weight: 700;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px;
}

/* Read-only table shared */
.ro-table {
    width: 100%; border-collapse: collapse;
}
.ro-table th {
    background: #f8fafc;
    padding: 7px 10px;
    text-align: left;
    font-size: 10.5px; font-weight: 700;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    white-space: nowrap;
}
.ro-table th:last-child { border-right: none; }
.ro-table td {
    padding: 6px 10px;
    font-size: 13px; color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    vertical-align: middle;
}
.ro-table td:last-child { border-right: none; }
.ro-table tr:last-child td { border-bottom: none; }
.ro-table th.center, .ro-table td.center { text-align: center; }
.ro-input {
    border: none; outline: none; background: transparent;
    font-family: inherit; font-size: 13px;
    color: var(--text-muted); width: 100%; min-width: 40px;
    cursor: default;
}
.td-hora { width: 64px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.td-mic  { width: 36px; text-align: center !important; }
.td-vot  { width: 36px; text-align: center !important; }

/* HOJA CLÍNICA three-column grid */
.hc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 200px;
    border-bottom: 1px solid var(--border);
}
.hc-col { border-right: 1px solid var(--border); }
.hc-col:last-child { border-right: none; }
.hc-col-header {
    display: grid; align-items: center;
    background: #f8fafc;
    padding: 7px 10px;
    font-size: 10.5px; font-weight: 700;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px;
    border-bottom: 1px solid var(--border);
}
.hc-inner-table {
    width: 100%; border-collapse: collapse;
}
.hc-inner-table th {
    background: #f8fafc;
    padding: 6px 8px;
    font-size: 10px; font-weight: 700;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
}
.hc-inner-table th:last-child { border-right: none; }
.hc-inner-table td {
    padding: 5px 8px;
    font-size: 12.5px; color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
}
.hc-inner-table td:last-child { border-right: none; }
.hc-inner-table tr:last-child td { border-bottom: none; }

/* Sub-section title inside bd-section */
.bd-sub-section {
    border-top: 1px solid var(--border);
}
.bd-sub-section:first-child { border-top: none; }
.bd-sub-title {
    padding: 8px 14px;
    font-size: 11px; font-weight: 700;
    color: var(--text); text-transform: uppercase; letter-spacing: .5px;
    background: #fafbfc;
    border-bottom: 1px solid var(--border);
}

/* Condition banner (yellow) */
.cond-banner-ro {
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    border-radius: var(--radius);
    margin-bottom: 12px;
    overflow: hidden;
}
.cond-banner-ro .bd-section-header {
    background: transparent; border-bottom: none;
    padding-bottom: 2px;
}
.cond-banner-ro .bd-empty-warn { padding-top: 0; }

/* =====================================================
   REGISTER PAGE EXTRAS
   ===================================================== */
.reg-strength {
    display: flex; align-items: center; gap: 8px;
    margin-top: 6px;
}
.reg-strength-track {
    flex: 1; height: 4px;
    background: #e2e8f0; border-radius: 4px; overflow: hidden;
}
.reg-strength-fill {
    height: 100%; width: 0;
    border-radius: 4px;
    transition: width .3s, background .3s;
}
.reg-strength-label {
    font-size: 11px; font-weight: 600; min-width: 46px; text-align: right;
}
.reg-match-msg {
    font-size: 11.5px; font-weight: 600;
    margin-top: 5px; min-height: 16px;
}

/* Password requirements checklist */
.reg-pw-reqs {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 12px;
    font-size: 11.5px;
    line-height: 1.6;
}
.reg-pw-reqs-match {
    grid-template-columns: 1fr;
    margin-top: 4px;
}
.reg-pw-reqs li {
    color: var(--text-muted, #94a3b8);
    font-weight: 400;
    transition: color .3s, transform .2s;
}
.reg-pw-reqs li.req-pass {
    color: #16a34a;
    font-weight: 600;
    animation: regReqPop .3s ease;
}
.reg-pw-reqs li.req-fail {
    color: var(--text-muted, #94a3b8);
    font-weight: 400;
    animation: regReqShake .3s ease;
}
.reg-pw-ico {
    display: inline-block;
    transition: transform .25s;
}
.reg-pw-reqs li.req-pass .reg-pw-ico {
    transform: scale(1.25);
}
@keyframes regReqPop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}
@keyframes regReqShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    75%      { transform: translateX(3px); }
}

/* =====================================================
   DASHBOARD EXTRAS
   ===================================================== */
.stat-card { transition: box-shadow var(--transition), transform var(--transition); }
.stat-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.stat-trend {
    font-size: 10.5px; color: var(--text-muted);
    margin-top: 2px; font-style: italic;
}

/* Two-column grid */
.dash-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 820px) {
    .dash-grid { grid-template-columns: 1fr; }
}

/* Quick-access cards */
.dash-quick-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 4px;
}
.dash-quick-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 16px 10px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center; text-decoration: none;
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.dash-quick-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: #c7d2e0;
}
.dash-quick-icon {
    width: 44px; height: 44px; border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
}
.dash-quick-label {
    font-size: 12px; font-weight: 600; color: var(--text);
}

/* Summary rows */
.dash-summary-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    gap: 10px;
}
.dash-summary-label {
    font-size: 12.5px; color: var(--text-muted); white-space: nowrap;
}
.dash-summary-val {
    font-size: 12.5px; font-weight: 600; color: var(--text);
}

/* Activity feed */
.dash-activity-row {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
}
.dash-activity-row:hover { background: #fafbff; }
.dash-act-dot {
    width: 8px; height: 8px; border-radius: 50%;
    margin-top: 5px; flex-shrink: 0;
}
.dash-act-bitacora  { background: #178391; }
.dash-act-vitals    { background: #16a34a; }
.dash-act-meds      { background: #d97706; }
.dash-act-turno     { background: #6d28d9; }
.dash-act-alert     { background: #dc2626; }
.dash-act-body      { flex: 1; min-width: 0; }
.dash-act-action    { font-size: 12.5px; font-weight: 600; color: var(--text); }
.dash-act-res       { font-size: 11.5px; color: #0369a1; font-weight: 500; margin-top: 1px; }
.dash-act-meta      {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 3px; gap: 6px;
}
.dash-act-meta > span { font-size: 11px; color: var(--text-muted); }
.dash-act-time {
    font-size: 11px; font-weight: 600;
    color: var(--text-muted); white-space: nowrap;
}

/* =====================================================
   DASHBOARD — ENHANCED COMPONENTS
   ===================================================== */

/* Stat card as clickable link */
a.stat-card { text-decoration: none; color: inherit; }

/* Stat sub-badge */
.stat-badge {
    display: inline-flex; align-items: center;
    margin-top: 6px; padding: 2px 8px;
    border-radius: 20px; font-size: 10px; font-weight: 600; white-space: nowrap;
}
.stat-badge.amber { background: #fef3c7; color: #92400e; }
.stat-badge.red   { background: #fee2e2; color: #b91c1c; }
.stat-badge.green { background: #dcfce7; color: #166534; }

/* Shift tag in page header */
.dash-shift-tag {
    display: inline-flex; align-items: center;
    padding: 4px 12px; border-radius: 20px;
    font-size: 11px; font-weight: 700; letter-spacing: .05em;
}
.dash-shift-tm { background: #fef3c7; color: #92400e; }
.dash-shift-tv { background: #e0e7ff; color: #3730a3; }
.dash-shift-tn { background: #f1f5f9; color: #475569; }

/* Activity icon (replaces dot) */
.dash-act-icon {
    width: 30px; height: 30px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dash-act-icon.dash-act-bitacora { background: #e8f6fb; color: #178391; }
.dash-act-icon.dash-act-vitals   { background: #dcfce7; color: #16a34a; }
.dash-act-icon.dash-act-meds     { background: #fef3c7; color: #d97706; }
.dash-act-icon.dash-act-turno    { background: #ede9fe; color: #6d28d9; }
.dash-act-icon.dash-act-alert    { background: #fee2e2; color: #dc2626; }

/* Quick link badge */
.dash-quick-card { position: relative; }
.dash-quick-badge {
    position: absolute; top: 8px; right: 8px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 20px; font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; line-height: 1;
}
.dash-quick-badge.amber { background: #fef3c7; color: #92400e; }
.dash-quick-badge.red   { background: #fee2e2; color: #b91c1c; }
.dash-quick-sub { font-size: 10.5px; color: var(--text-muted); font-weight: 400; }

/* Current shift card */
.dash-turno-card { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.dash-turno-header { display: flex; align-items: center; gap: 10px; }
.dash-turno-badge {
    width: 36px; height: 36px; background: #fef3c7; color: #92400e;
    border-radius: var(--radius-sm); display: flex; align-items: center;
    justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0;
}
.dash-turno-name  { font-size: 13px; font-weight: 700; color: var(--text); }
.dash-turno-hours { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.dash-turno-nurses { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-turno-nurse {
    padding: 3px 10px; background: var(--content-bg);
    border: 1px solid var(--border); border-radius: 20px;
    font-size: 11px; color: var(--text); font-weight: 500;
}
.dash-turno-next {
    font-size: 11px; color: var(--text-muted);
    padding-top: 8px; border-top: 1px solid var(--border);
}

/* Residents needing attention */
.dash-alert-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; border-bottom: 1px solid var(--border);
}
.dash-alert-item:last-child { border-bottom: none; }
.dash-alert-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dash-alert-dot.amber { background: #f59e0b; }
.dash-alert-dot.blue  { background: #178391; }
.dash-alert-name {
    font-size: 12.5px; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-alert-dx   { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.dash-alert-hab  { font-size: 11px; color: var(--text-muted); display: block; text-align: right; }
.dash-alert-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: #fee2e2; color: #b91c1c; border-radius: 20px;
    font-size: 10px; font-weight: 700; margin-top: 3px;
}

/* Mobile — stats 2-col on small screens */
@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr 1fr; }
}

/* =====================================================
   FLOATING SAVE BUTTON (Bitácora)
   ===================================================== */
.fab-save {
    position: fixed;
    bottom: 28px; right: 28px;
    display: flex; align-items: center; gap: 8px;
    padding: 12px 20px;
    background: var(--primary);
    color: #fff;
    border: none; border-radius: 50px;
    font-size: 13px; font-weight: 600;
    cursor: pointer; z-index: 300;
    box-shadow: 0 4px 16px rgba(30,58,110,.35);
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
    text-decoration: none;
    min-height: 48px;
    min-width: 48px;
    justify-content: center;
}
.fab-save:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(30,58,110,.4);
}
.fab-save:active {
    transform: scale(.95);
}
.fab-save.saved {
    background: var(--success);
}

/* Scroll-to-top button */
.scroll-top-btn {
    position: fixed;
    bottom: 28px; right: 120px;
    width: 40px; height: 40px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 50%;
    display: none; align-items: center; justify-content: center;
    cursor: pointer; z-index: 300;
    color: var(--text-muted);
    box-shadow: var(--shadow-sm);
    transition: color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.scroll-top-btn.visible { display: flex; }
.scroll-top-btn:hover {
    color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* =====================================================
   PAGE TRANSITIONS
   ===================================================== */
.main-content { animation: fadeSlideIn .22s ease; }
@keyframes fadeSlideIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* =====================================================
   INPUT / SELECT GLOBAL FOCUS RING
   ===================================================== */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* =====================================================
   TOOLTIP (title attribute enhanced via CSS)
   ===================================================== */
[title]:not([title=""]) { cursor: help; }
button[title]:not([title=""]) { cursor: pointer; }

/* =====================================================
   TABLE SORT INDICATOR
   ===================================================== */
th.sortable {
    cursor: pointer; user-select: none;
    position: relative; padding-right: 20px !important;
}
th.sortable::after {
    content: '⇅';
    position: absolute; right: 6px; top: 50%;
    transform: translateY(-50%);
    font-size: 10px; color: #cbd5e1;
}
th.sort-asc::after  { content: '↑'; color: var(--primary); }
th.sort-desc::after { content: '↓'; color: var(--primary); }

/* =====================================================
   EMPTY STATE
   ===================================================== */
.empty-state {
    text-align: center; padding: 48px 20px;
    color: var(--text-muted);
}
.empty-state svg { margin-bottom: 14px; color: #cbd5e1; }
.empty-state h4 { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.empty-state p  { font-size: 12.5px; }

/* =====================================================
   PERSONAL — INVITE BUTTON
   ===================================================== */
.btn-invite {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius-sm);
    background: var(--primary); color: #fff; border: none;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background var(--transition); white-space: nowrap;
}
.btn-invite:hover { background: var(--primary-dark); }

/* =====================================================
   PERSONAL — ACTION BUTTONS (in table cells)
   ===================================================== */
.per-action-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--border);
    background: #fff; color: var(--text-muted); cursor: pointer;
    transition: all .15s; margin: 0 2px;
}
.per-action-btn:hover { background: #f1f5f9; color: var(--text); border-color: #cbd5e1; }
.per-action-danger  { color: var(--danger) !important; border-color: #fecaca !important; background: #fff5f5 !important; }
.per-action-danger:hover  { background: #fee2e2 !important; }
.per-action-success { color: var(--success) !important; border-color: #bbf7d0 !important; background: #f0fdf4 !important; }
.per-action-success:hover { background: #dcfce7 !important; }
.per-action-resend  { color: #0369a1 !important; border-color: #bae6fd !important; background: #e8f6fb !important; }
.per-action-resend:hover  { background: #e8f6fb !important; }
.per-action-delete  { color: #dc2626 !important; border-color: #fecaca !important; background: #fff5f5 !important; }
.per-action-delete:hover  { background: #fee2e2 !important; }

/* =====================================================
   PERSONAL — STATS ROW
   ===================================================== */
.per-stats-row {
    display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap;
}
.per-stat-card {
    display: flex; align-items: center; gap: 10px;
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 10px 18px 10px 14px;
}
.per-stat-dot   { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.per-stat-icon  {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.per-stat-icon-blue   { background: #e8f6fb; color: #033f3f; }
.per-stat-icon-purple { background: #ede9fe; color: #6d28d9; }
.per-stat-icon-teal   { background: #ccfbf1; color: #0f766e; }
.per-stat-num  { font-size: 22px; font-weight: 700; color: var(--primary); line-height: 1; }
.per-stat-lbl  { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.per-stat-activo   .per-stat-num { color: #16a34a; }
.per-stat-inactivo .per-stat-num { color: #94a3b8; }
.per-stat-pending  .per-stat-num { color: #d97706; }
.per-stat-pending  { border-color: #fde68a; background: #fffbeb; }

/* =====================================================
   PERSONAL — TAB COUNT BADGE
   ===================================================== */
.per-tab-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: rgba(0,0,0,.1); color: inherit;
    border-radius: 99px; font-size: 10px; font-weight: 700;
    margin-left: 4px; opacity: .8;
}
.tab-btn.active .per-tab-badge {
    background: rgba(255,255,255,.25); color: #fff; opacity: 1;
}
.per-tab-badge-warn {
    background: #fef9c3 !important;
    color: #854d0e !important;
    opacity: 1 !important;
}
.tab-btn.active .per-tab-badge-warn {
    background: rgba(255,255,255,.3) !important;
    color: #fff !important;
}

/* =====================================================
   PERSONAL — FILTERS ROW
   ===================================================== */
.per-filters { display: flex; gap: 8px; flex-wrap: wrap; }

/* =====================================================
   PERSONAL — INVITATION STATUS BADGES
   ===================================================== */
.inv-badge {
    display: inline-block; padding: 3px 10px; border-radius: 20px;
    font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}
.inv-badge-pending  { background: #fef9c3; color: #854d0e; }
.inv-badge-accepted { background: #dcfce7; color: #15803d; }
.inv-badge-expired  { background: #fee2e2; color: #dc2626; }

/* =====================================================
   PERSONAL — MÉDICO role badge
   ===================================================== */
.per-badge-med { background: #fdf4ff; color: #7e22ce; border: 1px solid #e9d5ff; }
.per-badge-fam { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }

/* =====================================================
   PERSONAL — MODAL HELPERS
   ===================================================== */
.modal-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* invite email preview box */
.inv-preview-box {
    margin-top: 4px; border-radius: var(--radius-sm);
    border: 1px dashed #bae6fd; background: #e8f6fb;
    overflow: hidden;
}
.inv-preview-label {
    padding: 6px 14px; font-size: 10px; font-weight: 700;
    letter-spacing: .6px; text-transform: uppercase;
    color: #0369a1; background: #e8f6fb; border-bottom: 1px solid #bae6fd;
}
.inv-preview-body {
    padding: 12px 14px; font-size: 12px; color: var(--text); line-height: 1.7;
}

/* =====================================================
   WIZARD — NUEVO RESIDENTE
   ===================================================== */
.wz-card {
    max-width: 580px !important;
    display: flex; flex-direction: column;
    max-height: 92vh;
}
.wz-header-icon {
    width: 36px; height: 36px; border-radius: 9px;
    background: #e8f6fb; color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.wz-subtitle { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

/* Progress bar */
.wz-progress-wrap { padding: 14px 20px 0; }
.wz-progress-track {
    height: 3px; background: #e2e8f0; border-radius: 2px;
    margin-bottom: 12px; position: relative;
}
.wz-progress-fill {
    height: 100%; border-radius: 2px;
    background: var(--primary);
    transition: width .35s ease;
    width: 0%;
}
.wz-steps {
    display: flex; justify-content: space-between;
    margin-bottom: 4px;
}
.wz-step {
    display: flex; flex-direction: column; align-items: center;
    gap: 4px; flex: 1;
    font-size: 10px; font-weight: 600; color: #94a3b8;
    transition: color .2s;
}
.wz-step-dot {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid #e2e8f0; background: #fff;
    display: flex; align-items: center; justify-content: center;
    color: #94a3b8; transition: all .2s;
}
.wz-step.active .wz-step-dot {
    border-color: var(--primary); background: var(--primary); color: #fff;
}
.wz-step.active { color: var(--primary); }
.wz-step.done .wz-step-dot {
    border-color: var(--success); background: var(--success); color: #fff;
}
.wz-step.done { color: var(--success); }

/* Body */
.wz-body {
    padding: 18px 20px; overflow-y: auto; flex: 1;
}
.wz-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wz-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.wz-section-label {
    font-size: 10px; font-weight: 700; letter-spacing: .7px;
    text-transform: uppercase; color: var(--text-muted);
    margin: 10px 0 8px;
}
.form-label { font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 5px; display: block; }
.req { color: var(--danger); }

/* Radio buttons inline */
.wz-radio-group { display: flex; gap: 10px; padding-top: 6px; }
.wz-radio {
    display: flex; align-items: center; gap: 5px;
    font-size: 12.5px; cursor: pointer;
}

/* Chip select (radio/checkbox pill style) */
.wz-chip-group { display: flex; flex-wrap: wrap; gap: 7px; }
.wz-chip {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 20px; cursor: pointer;
    border: 1.5px solid var(--border); font-size: 12px;
    font-weight: 500; color: var(--text-muted);
    transition: all .15s; user-select: none;
}
.wz-chip input { display: none; }
.wz-chip:has(input:checked) {
    border-color: var(--primary); background: #e8f6fb; color: var(--primary); font-weight: 600;
}
.wz-chip:hover { border-color: #9db9d0; color: var(--text); }

/* Checkbox grid */
.wz-checkbox-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
}
.wz-check {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; cursor: pointer; padding: 4px 0;
}
.wz-check input[type=checkbox] {
    width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer;
}

/* Photo upload zone */
.wz-upload-zone {
    border: 2px dashed #cbd5e1; border-radius: var(--radius);
    padding: 14px; display: flex; align-items: center; gap: 10px;
    cursor: pointer; transition: border-color .15s, background .15s;
    font-size: 12.5px; color: var(--text-muted);
}
.wz-upload-zone:hover { border-color: var(--primary); background: #f8fafc; }

/* Input with icon prefix */
.wz-input-icon { position: relative; }
.wz-input-icon svg {
    position: absolute; left: 10px; top: 50%;
    transform: translateY(-50%); color: #94a3b8; pointer-events: none;
}
.wz-input-icon .form-input { padding-left: 30px; }

/* Info banner */
.wz-info-banner {
    display: flex; align-items: center; gap: 8px;
    background: #e8f6fb; border: 1px solid #bfdbfe;
    border-radius: var(--radius-sm); padding: 10px 14px;
    font-size: 12.5px; color: #033f3f; margin-bottom: 14px;
}

/* Summary box */
.wz-summary {
    margin-top: 14px; border-radius: var(--radius);
    border: 1px solid #bbf7d0; background: #f0fdf4;
    overflow: hidden;
}
.wz-summary-title {
    display: flex; align-items: center; gap: 7px;
    padding: 8px 14px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .5px;
    color: #15803d; background: #dcfce7;
    border-bottom: 1px solid #bbf7d0;
}
.wz-summary-grid { padding: 6px 0; }
.wz-sum-row {
    display: flex; padding: 4px 14px; gap: 10px;
    font-size: 12px;
}
.wz-sum-key { width: 100px; flex-shrink: 0; color: var(--text-muted); font-weight: 500; }
.wz-sum-val { color: var(--text); font-weight: 600; flex: 1; }

/* Footer */
.wz-footer {
    display: flex; align-items: center; padding: 13px 20px;
    border-top: 1px solid var(--border); flex-shrink: 0;
}

/* =====================================================
   PERSONAL — TOAST
   ===================================================== */
.per-toast {
    position: fixed; bottom: 24px; right: 24px; z-index: 9999;
    padding: 11px 20px; border-radius: 8px; font-size: 13px; font-weight: 600;
    color: #fff; background: #166534; box-shadow: 0 4px 18px rgba(0,0,0,.2);
    transform: translateY(12px); opacity: 0; pointer-events: none;
    transition: opacity .25s, transform .25s;
}
.per-toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* =====================================================
   SCROLLBAR
   ===================================================== */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
/* Hamburger — hidden on desktop (>900px), shown on tablet+mobile */
.ph-hamburger {
    display: none;
    align-items: center; justify-content: center;
    width: 38px; height: 38px; flex-shrink: 0;
    background: var(--primary); border: none;
    border-radius: 10px; color: #ffffff;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(30,58,110,.30);
    transition: background .15s, transform .1s, box-shadow .15s;
}
.ph-hamburger:hover  { background: var(--primary-dark); box-shadow: 0 4px 12px rgba(30,58,110,.38); }
.ph-hamburger:active { transform: scale(.93); box-shadow: 0 1px 4px rgba(30,58,110,.25); }

/* Sidebar overlay — hidden on desktop */
.sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 299;
    opacity: 0; pointer-events: none;
    transition: opacity .25s;
}
.sidebar-overlay.active { opacity: 1; pointer-events: auto; }

/* =====================================================
   RESPONSIVE — TABLET (≤900px)
   ===================================================== */
@media (max-width: 900px) {
    .sidebar { width: var(--sidebar-collapsed-w); }
    .sidebar .brand-name,
    .sidebar .user-info,
    .sidebar .nav-label,
    .sidebar .logout-text { opacity: 0; width: 0; overflow: hidden; }
    .main-content { margin-left: var(--sidebar-collapsed-w); }
    /* On tablet, 'collapsed' = fully hidden (hamburger toggle) */
    .sidebar.collapsed { width: 0; overflow: hidden; }
    .main-content.sidebar-collapsed { margin-left: 0; }
    .nurse-selectors { grid-template-columns: 1fr; }
    .ph-right { flex-direction: column; align-items: flex-end; gap: 8px; }
    /* Show hamburger on tablet as sidebar toggle */
    .ph-hamburger { display: flex; }
}

/* =====================================================
   RESPONSIVE — MOBILE (≤640px)
   ===================================================== */
@media (max-width: 640px) {

    /* ── Sidebar: fixed overlay ── */
    .sidebar {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: var(--sidebar-w) !important;
        transform: translateX(-100%);
        z-index: 300;
        transition: transform .25s ease;
        box-shadow: 4px 0 28px rgba(0,0,0,.22);
    }
    .sidebar.mobile-open { transform: translateX(0); }
    /* Restore all hidden text when drawer is open */
    .sidebar.mobile-open .brand-name,
    .sidebar.mobile-open .user-info,
    .sidebar.mobile-open .nav-label,
    .sidebar.mobile-open .logout-text { opacity: 1; width: auto; overflow: visible; }
    .sidebar.mobile-open .sidebar-brand { justify-content: flex-start; padding: 18px 16px; }
    .sidebar.mobile-open .user-row { justify-content: flex-start; }
    .sidebar.mobile-open .sidebar-nav li a { justify-content: flex-start; padding: 11px 16px; border-left: 3px solid transparent; }
    .sidebar.mobile-open .sidebar-nav li.active a { border-left-color: var(--primary); }
    .sidebar.mobile-open .logout-link { justify-content: flex-start; }
    .sidebar.mobile-open .dev-role-wrap { padding: 8px 10px; }
    .sidebar.mobile-open .dev-role-text { opacity: 1; width: auto; overflow: visible; }
    .sidebar.mobile-open .dev-role-select { opacity: 1; pointer-events: auto; height: auto; padding: 5px 8px; border: 1px solid #334d7a; }
    .sidebar.mobile-open .sa-inst-wrap { padding: 8px 10px; }
    .sidebar.mobile-open .sa-inst-text { opacity: 1; width: auto; overflow: visible; }
    .sidebar.mobile-open .sa-inst-select { opacity: 1; pointer-events: auto; height: auto; padding: 5px 8px; border: 1px solid #1e3a5f; }
    .sidebar-overlay { display: block; }
    /* Body scrolls on mobile — removes the scroll container so position:sticky
       on .page-header is relative to the viewport (most reliable cross-browser). */
    .main-content {
        margin-left: 0 !important;
        height: auto;
        overflow-y: visible;
    }
    /* Bitácora: keep main-content locked even on mobile */
    body.page-bitacora .main-content {
        height: 100vh !important;
        overflow: hidden !important;
    }

    /* ── Header: sticky to viewport top ── */
    .page-header {
        position: -webkit-sticky; /* iOS Safari */
        position: sticky;
        top: 0;
        z-index: 200;
        padding: 8px 56px 8px 12px; /* tighter padding, smaller right clearance for hamburger */
        flex-wrap: wrap;
        gap: 6px 10px;
    }
    /* Bitácora page: ultra-compact header */
    body.page-bitacora .page-header {
        padding: 6px 52px 6px 10px;
        gap: 4px 8px;
    }
    body.page-bitacora .ph-icon { width: 28px; height: 28px; }
    body.page-bitacora .ph-icon svg { width: 16px; height: 16px; }
    body.page-bitacora .ph-title { font-size: 12px; }
    body.page-bitacora .ph-subtitle { font-size: 8px; }
    /* ── Floating hamburger ── */
    .ph-hamburger {
        display: flex;
        position: fixed;
        top: 8px;
        right: 8px;
        z-index: 290;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        box-shadow: 0 4px 18px rgba(30,58,110,.45);
    }
    /* Inside bitacora: smaller hamburger to save header space */
    body.page-bitacora .ph-hamburger {
        width: 36px;
        height: 36px;
        top: 6px;
        right: 6px;
    }
    body.page-bitacora .ph-hamburger svg {
        width: 15px;
        height: 15px;
    }
    /* hide it while the drawer is open (overlay covers it anyway, but
       this prevents accidental double-tap re-open on fast closes) */
    .sidebar.mobile-open ~ #mainContent .ph-hamburger,
    .sidebar.mobile-open ~ .main-content .ph-hamburger { opacity: 0; pointer-events: none; }
    .ph-left { flex: 1; min-width: 0; gap: 8px; }
    .ph-icon { width: 32px; height: 32px; flex-shrink: 0; }
    .ph-title { font-size: 14px; }
    .ph-subtitle { font-size: 9px; }
    /* Handoff banner: shows full-width on row 2 */
    .ph-center {
        display: flex;
        order: 3;
        flex: 0 0 100%;
        padding: 0;
    }
    .ph-handoff { max-width: 100%; }
    /* Right controls:
       — Simple (btn-add, badge): inline at the far right of row 1.
       — Complex (date-nav, ph-control selectors): own full-width second row. */
    .ph-right {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }
    /* Bitácora-style: has date nav or dropdowns → push to its own row */
    .ph-right:has(.bita-date-nav, .ph-control) {
        order: 2;
        flex: 0 0 100%;
    }
    /* btn-add / action-btn: compact inline on mobile */
    .ph-right .btn-add,
    .ph-right .action-btn { padding: 7px 11px; font-size: 12px; }

    .ph-control label { display: none; }
    .ph-control { flex: 1; align-items: stretch; }
    .ph-select { min-width: 0; width: 100%; font-size: 12px; padding: 5px 8px; }
    /* Date nav fills remaining space */
    .bita-date-nav { flex: 1; justify-content: space-between; }
    .bita-date-pill { flex: 1; justify-content: center; font-size: 12px; padding: 4px 8px; }
    .bita-date-pill svg { display: none; }
    .bita-nav-arrow { width: 26px; height: 26px; flex-shrink: 0; }
    /* Panel toggle hidden on its own — shown inline now */
    .bita-panel-toggle { font-size: 12px; padding: 5px 10px; flex-shrink: 0; }
    .date-display { font-size: 12px; min-width: 80px; padding: 5px 8px; }
    .date-nav-btn { width: 26px; height: 26px; }

    /* ── Content area ── */
    .content-area { padding: 12px 10px; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .sleep-grid { grid-template-columns: 1fr; }

    /* ── Tabs: sticky pill-grid card bar (like historial) ── */
    /* top offset = measured page-header height (set by JS via --mob-header-h) */
    .tab-nav {
        position: sticky;
        top: var(--mob-header-h, 62px);
        z-index: 50;
        overflow-x: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: wrap;
        gap: 4px;
        padding: 8px 10px;
        background: var(--white);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 2px 8px rgba(15,23,42,.08);
        margin: 0;
    }
    /* hc-tab-nav inside bita-editor on mobile: 3-column pill-card grid */
    .bita-editor .hc-tab-nav {
        border: none;
        border-radius: 0;
        border-bottom: 1px solid var(--border);
        padding: 8px 10px;
        gap: 4px;
        flex-wrap: wrap;
        margin-bottom: 0;
    }
    .bita-editor .hc-tab-nav .tab-btn {
        flex: 1 1 calc(33.33% - 4px);
        min-width: 80px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border-radius: var(--radius-sm);
        border: none;
        background: transparent;
        color: var(--text-muted);
        padding: 8px 6px;
        font-size: 11px;
        font-weight: 600;
        margin-bottom: 0;
        transition: background .15s, color .15s;
    }
    .bita-editor .hc-tab-nav .tab-btn svg { width: 20px; height: 20px; }
    .bita-editor .hc-tab-nav .tab-btn.active {
        background: var(--primary);
        color: #fff;
    }
    .bita-editor .hc-tab-nav .tab-btn .hc-tab-n {
        display: none !important;
    }
    .tab-nav::-webkit-scrollbar { display: none; }
    .tab-btn {
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 8px 18px;
        font-size: 10px;
        white-space: nowrap;
        flex-shrink: 0;
        border-bottom-width: 2.5px;
    }
    .tab-btn.active {
        background: #e8f6fb;
        border-radius: 0;
    }
    .tab-btn svg { width: 18px; height: 18px; }
    .tab-badge { font-size: 9px; min-width: 14px; height: 14px; margin-left: 2px; }

    /* ── Editor bar: edge-to-edge on mobile ── */
    .bita-editor > .bita-editor-bar {
        margin: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: none;
        padding: 8px 10px;
    }
    .bita-editor > .bita-readonly-banner {
        margin: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    /* tab-nav padding already set above; no negative margin needed */
    .tab-nav, .bita-editor .hc-tab-nav {
        margin: 0;
        padding-left: 10px;
    }

    /* ── Shift-wrap: full-bleed with visible separation ── */
    .bita-editor > .tab-pane.active { padding-left: 0; padding-right: 0; padding-top: 8px; }
    .shift-wrap { overflow: visible; border-radius: 0; border-right: none; margin-bottom: 0; border-bottom: none; }
    /* Keep left pleca on mobile — muted pastels */
    .shift-wrap[data-shift="tm"] { border-left: 3px solid #fcd34d; }
    .shift-wrap[data-shift="tv"] { border-left: 3px solid #a5b4fc; }
    .shift-wrap[data-shift="tn"] { border-left: 3px solid #7dd3fc; }
    /* Visible gap between shift cards using a thick separator */
    .shift-wrap + .shift-wrap { border-top: 8px solid var(--content-bg); }
    .shift-wrap-body { padding: 8px 6px; }

    /* ── Care-entry mobile: full-bleed inside shift-wrap-body ── */
    .care-entry { border-radius: 0; border-right: none; margin-bottom: 0; border-bottom: none; }
    .care-entry + .care-entry { border-top: 1px solid var(--border); }
    .care-entry-hd { padding: 10px 12px; }
    .care-entry-body { padding: 8px 10px 12px; }

    /* ── Sticky header for ANY open accordion ── */
    /* top:0 because tab-nav is a flex sibling OUTSIDE .tab-pane.active,
       so the scroll viewport starts right at the top of tab-pane */
    .shift-wrap.shift-wrap-open > .shift-wrap-hd {
        position: sticky;
        top: 0;
        z-index: 40;
        background: #f1f5f9;
        border-bottom: 1.5px solid var(--border);
        box-shadow: 0 2px 6px rgba(15,23,42,.09);
    }

    /* ── Shift wrap header row layout ── */
    .shift-wrap-hd {
        flex-wrap: wrap;
        row-gap: 6px;
        padding: 10px 12px;
    }
    .rx-timeline {
        order: 5;
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 0 4px;
        -webkit-mask-image: none;
        mask-image: none;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 5px;
    }
    .rx-timeline::-webkit-scrollbar { display: none; }
    .rx-tl-pill { padding: 3px 8px 3px 6px; }
    .shift-wrap-chevron { margin-left: auto !important; }
    .shift-wrap-signed { margin-left: 0; }

    /* ── RX prescription panel ── */
    .rx-panel-meta { display: none; }
    .rx-panel-hd { gap: 6px; padding: 9px 8px; }
    .rx-panel-body { padding: 0 4px 8px; }
    .rx-dose-slot { flex-wrap: wrap; row-gap: 6px; padding-left: 8px; padding-right: 8px; }
    .rx-dose-actions { flex: 0 0 100%; }
    .rx-adm-row { flex: 0 0 100%; flex-wrap: wrap; }
    .rx-skip-row { flex: 0 0 100%; flex-wrap: wrap; }
    .rx-card-hd { padding: 8px 8px; }

    /* ── Meds table: always horizontally scrollable ── */
    .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* =====================================================
   RESPONSIVE — SMALL MOBILE (≤400px)
   ===================================================== */
@media (max-width: 400px) {
    .ph-title { font-size: 13px; }
    .ph-select { width: 110px; }
    /* Icon-only tabs at very narrow widths */
    .tab-label { display: none; }
    .tab-btn { padding: 8px 14px; }
    /* Shift header: hide hours text */
    .shift-wrap-hours { display: none; }
}

/* =====================================================
   HISTORIAL CLÍNICO
   ===================================================== */

/* Back button & breadcrumb */
.hc-back-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--white);
    color: var(--text-muted); cursor: pointer; flex-shrink: 0;
    transition: color var(--transition), border-color var(--transition);
    text-decoration: none;
}
.hc-back-btn:hover { color: var(--primary); border-color: var(--primary); }
.hc-crumb { color: var(--text-muted); text-decoration: none; }
.hc-crumb:hover { color: var(--primary); }

/* ── Patient Banner ── */
.hc-banner {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 14px;
    overflow: hidden;
}
.hc-banner-main {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 16px 20px 12px;
}
.hc-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; font-weight: 700; flex-shrink: 0;
    overflow: hidden;
}
.hc-avatar img, .hc-res-avatar img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
}
.hc-banner-info { flex: 1; min-width: 0; }
.hc-patient-name {
    font-size: 17px; font-weight: 700; color: var(--text);
    line-height: 1.2; margin-bottom: 4px;
}
.hc-patient-meta {
    font-size: 12.5px; color: var(--text-muted); margin-bottom: 8px;
}
.hc-dx-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.hc-dx-chip {
    background: #e8f6fb; color: #033f3f;
    border: 1px solid #bfdbfe;
    font-size: 11px; font-weight: 500;
    padding: 2px 9px; border-radius: 20px;
}
.hc-banner-aside {
    display: flex; gap: 20px; align-items: flex-start;
    padding: 16px 20px 12px; border-left: 1px solid var(--border);
    flex-shrink: 0;
}
.hc-qs { min-width: 100px; }
.hc-qs-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: var(--text-muted); margin-bottom: 3px;
}
.hc-qs-blood {
    font-size: 16px; font-weight: 800; color: #dc2626;
    letter-spacing: .5px;
}
.hc-qs-val { font-size: 12px; font-weight: 600; color: var(--text); }
.hc-qs-sub { font-size: 11px; color: var(--text-muted); }

/* Allergy bar */
.hc-allergy-bar {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 20px;
    font-size: 12px; font-weight: 500;
    border-top: 1px solid;
}
.hc-allergy-danger {
    background: #fff1f2; color: #be123c;
    border-color: #fecdd3;
}
.hc-allergy-ok {
    background: #f0fdf4; color: #15803d;
    border-color: #bbf7d0;
}

/* ── Tab nav ── */
.hc-tab-nav {
    display: flex; gap: 2px; margin-bottom: 14px;
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 4px;
    flex-wrap: wrap;
}
.hc-tab-nav .tab-btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; padding: 7px 12px;
    font-size: 12.5px; font-weight: 600; border: none;
    background: none; color: var(--text-muted); cursor: pointer;
    border-radius: 6px; white-space: nowrap;
    transition: background var(--transition), color var(--transition);
    font-family: inherit;
    margin-bottom: 0;
}
.hc-tab-nav .tab-btn:hover { color: var(--text); background: #f8fafc; }
.hc-tab-nav .tab-btn.active { background: var(--primary); color: #fff; }
.hc-tab-n {
    background: rgba(255,255,255,.25); color: inherit;
    font-size: 10px; font-weight: 700; padding: 1px 6px;
    border-radius: 10px; min-width: 18px; text-align: center;
}
.tab-btn.active .hc-tab-n { background: rgba(255,255,255,.3); color: #fff; }
.tab-btn:not(.active) .hc-tab-n {
    background: #f1f5f9; color: var(--text-muted);
}
.hc-tab-dot {
    width: 8px; height: 8px; min-width: 8px; padding: 0;
    background: #f59e0b; border-radius: 50%;
    animation: tabDotPulse 1.6s ease-in-out infinite;
}

/* Tab content */
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ── Summary layout ── */
.hc-summary-layout {
    display: grid; grid-template-columns: 300px 1fr; gap: 14px;
    align-items: start;
}
.hc-summary-left { display: flex; flex-direction: column; gap: 12px; }
.hc-summary-right { }

/* Stats row */
.hc-stats-row {
    display: grid; grid-template-columns: repeat(4,1fr); gap: 10px;
}
.hc-stat {
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 10px; text-align: center;
}
.hc-stat-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 6px;
}
.hc-stat-num { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1; }
.hc-stat-lbl { font-size: 10px; color: var(--text-muted); margin-top: 3px; font-weight: 600; text-transform: uppercase; letter-spacing:.3px; }

/* Panel */
.hc-panel {
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 16px;
}
.hc-panel-hd {
    display: flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: var(--text-muted);
    margin-bottom: 10px;
}
.hc-panel-count {
    margin-left: auto; font-size: 10px; font-weight: 400; color: var(--text-muted);
    text-transform: none; letter-spacing: 0;
}
.hc-panel-red { border-color: #fecdd3; }
.hc-panel-hd-red { color: #dc2626; }

/* Diagnoses list */
.hc-dx-list { list-style: none; padding: 0; margin: 0; }
.hc-dx-item {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 5px 0; border-bottom: 1px solid #f8fafc;
    font-size: 12.5px; color: var(--text);
    counter-increment: dx;
}
.hc-dx-list { counter-reset: dx; }
.hc-dx-item::before {
    content: counter(dx);
    min-width: 18px; height: 18px; border-radius: 50%;
    background: #e8f6fb; color: var(--primary);
    font-size: 10px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 1px;
}
.hc-dx-item:last-child { border-bottom: none; }

/* Allergy chips in panel */
.hc-allergy-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hc-allergy-chip {
    background: #fff1f2; color: #be123c; border: 1px solid #fecdd3;
    font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 20px;
}

/* Last consult mini */
.hc-last-consult { font-size: 12.5px; }
.hc-lc-date { font-weight: 700; color: var(--text); margin-bottom: 2px; }
.hc-lc-doctor { color: var(--text-muted); font-size: 12px; margin-bottom: 4px; }
.hc-lc-motivo { color: var(--text); }

/* Timeline */
.hc-timeline { }
.hc-tl-item {
    display: flex; gap: 12px; position: relative;
    padding-bottom: 18px;
}
.hc-tl-item:not(.hc-tl-last)::after {
    content: ''; position: absolute;
    left: 14px; top: 28px; bottom: 0;
    width: 1px; background: #e2e8f0;
}
.hc-tl-dot {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid transparent;
    flex-shrink: 0; display: block;
}
.hc-tl-body { flex: 1; padding-top: 4px; }
.hc-tl-date { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.hc-tl-title { font-size: 12.5px; color: var(--text); margin: 2px 0; font-weight: 500; }
.hc-tl-type {
    display: inline-block;
    font-size: 10px; font-weight: 700; padding: 1px 7px;
    border-radius: 20px; letter-spacing: .3px; text-transform: uppercase;
}

/* ── Toolbar ── */
.hc-tab-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 12px;
}
.hc-filter-sel {
    padding: 6px 10px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: 12.5px;
    font-family: inherit; outline: none; background: var(--white);
    color: var(--text); cursor: pointer;
}
.hc-filter-sel:focus { border-color: var(--accent); }

/* ── Entry cards ── */
.hc-entry {
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius); margin-bottom: 10px;
    overflow: hidden;
    border-left-width: 4px;
}
.hc-entry-blue   { border-left-color: #178391; }
.hc-entry-purple { border-left-color: #7c3aed; }
.hc-entry-cyan   { border-left-color: #0891b2; }

.hc-entry-hd {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; cursor: pointer;
    gap: 12px;
    transition: background var(--transition);
}
.hc-entry-hd:hover { background: #fafbff; }
.hc-ehd-left  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hc-ehd-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.hc-type-pill {
    display: inline-block; font-size: 10px; font-weight: 700;
    padding: 2px 9px; border-radius: 20px; text-transform: uppercase;
    letter-spacing: .4px;
}
.hc-pill-blue   { background: #e8f6fb; color: #033f3f; }
.hc-pill-purple { background: #faf5ff; color: #6b21a8; }
.hc-pill-cyan   { background: #ecfeff; color: #0e7490; }

.hc-entry-date { font-size: 12.5px; font-weight: 600; color: var(--text); }
.hc-entry-doc  {
    display: flex; align-items: center; gap: 5px;
    font-size: 12px; color: var(--text-muted);
}
.hc-chev {
    color: var(--text-muted);
    transition: transform .2s;
    flex-shrink: 0;
}
.hc-entry.hc-open .hc-chev { transform: rotate(180deg); }

.hc-flag-alert {
    display: inline-flex; align-items: center; gap: 5px;
    background: #fff7ed; color: #c2410c;
    border: 1px solid #fed7aa;
    font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px;
}

/* Entry body (collapsed by default) */
.hc-entry-body {
    display: none;
    padding: 14px 16px 16px;
    border-top: 1px solid var(--border);
}
.hc-entry.hc-open .hc-entry-body { display: block; }

/* Fields inside entries */
.hc-entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.hc-field { margin-bottom: 10px; }
.hc-field-lbl {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: var(--text-muted); margin-bottom: 4px;
}
.hc-field-val { font-size: 13px; color: var(--text); line-height: 1.5; }

/* ── Lab table ── */
.hc-lab-table {
    width: 100%; border-collapse: collapse; font-size: 12.5px;
    margin-bottom: 2px;
}
.hc-lab-table th {
    background: #f8fafc; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted);
    padding: 6px 10px; border-bottom: 2px solid var(--border); text-align: left;
}
.hc-lab-table td { padding: 7px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.hc-lab-table tr:last-child td { border-bottom: none; }
.hc-lab-alert td { background: #fffbf5; }
.hc-lab-val strong { font-size: 13.5px; }
.hc-lab-unit  { color: var(--text-muted); font-size: 11.5px; }
.hc-lab-range { color: var(--text-muted); font-size: 11.5px; }

.hc-fH strong { color: #dc2626; }
.hc-fL strong { color: #178391; }
.hc-fN strong { color: #16a34a; }

.hc-lab-badge {
    display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 7px;
    border-radius: 20px; text-transform: uppercase; letter-spacing: .3px;
}
.hc-lab-badge.hc-fH { background: #fee2e2; color: #dc2626; }
.hc-lab-badge.hc-fL { background: #e8f6fb; color: #033f3f; }
.hc-lab-badge.hc-fN { background: #dcfce7; color: #15803d; }

/* ── Imagenología grid ── */
.hc-img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.hc-img-card {
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
}
.hc-img-thumb {
    height: 72px; display: flex; align-items: center; justify-content: center;
    position: relative; flex-direction: column; gap: 0;
}
.hc-img-code {
    font-size: 22px; font-weight: 900; letter-spacing: 2px;
    position: absolute; opacity: .85;
}
.hc-img-meta {
    padding: 10px 14px 0;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}
.hc-img-title  { font-size: 13.5px; font-weight: 700; color: var(--text); }
.hc-img-region { font-size: 12px; color: var(--primary); font-weight: 500; margin-top: 1px; }
.hc-img-date   {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11.5px; color: var(--text-muted); margin-top: 4px;
}
.hc-img-doctor { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.hc-img-findings {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}
.hc-img-actions {
    display: flex; gap: 8px; padding: 10px 14px;
}
.hc-img-btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center;
    gap: 5px; padding: 6px 10px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: #f8fafc; font-size: 11.5px; font-weight: 500;
    color: var(--text-muted); cursor: pointer; font-family: inherit;
    transition: background var(--transition), color var(--transition);
}
.hc-img-btn:hover { color: var(--primary); background: #e8f6fb; border-color: var(--accent); }

/* ── Documents ── */
.hc-dropzone {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 8px;
    border: 2px dashed #cbd5e1; border-radius: var(--radius);
    padding: 28px 20px; cursor: pointer;
    color: var(--text-muted); transition: border-color .15s, background .15s;
    background: var(--white); margin-bottom: 16px;
    text-align: center;
}
.hc-dropzone:hover, .hc-dropzone.hc-dz-active {
    border-color: var(--primary); background: #f8faff;
}
.hc-dz-text { font-size: 13px; }
.hc-dz-link { color: var(--primary); font-weight: 600; }
.hc-dz-hint { font-size: 11px; color: #94a3b8; }

.hc-doc-list { display: flex; flex-direction: column; gap: 8px; }
.hc-doc-item {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 12px 14px;
    transition: border-color var(--transition);
}
.hc-doc-item:hover { border-color: #cbd5e1; }
.hc-doc-icon {
    width: 42px; height: 42px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800; letter-spacing: .5px;
}
.hc-doc-info { flex: 1; min-width: 0; }
.hc-doc-name { font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.hc-doc-meta { font-size: 11.5px; color: var(--text-muted); margin-bottom: 4px; }
.hc-doc-type-tag {
    display: inline-block; background: #f1f5f9; color: var(--text-muted);
    font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px;
    text-transform: uppercase;
}
.hc-doc-desc { font-size: 12px; color: var(--text); line-height: 1.5; }
.hc-doc-acts { flex-shrink: 0; display: flex; align-items: center; }
.hc-doc-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: #f8fafc;
    font-size: 12px; font-weight: 500; color: var(--text-muted);
    cursor: pointer; font-family: inherit;
    transition: color var(--transition), background var(--transition);
}
.hc-doc-btn:hover { color: var(--primary); background: #e8f6fb; border-color: var(--accent); }

/* ── Comments ── */
.hc-cmt-block {
    margin-top: 14px; border-top: 1px dashed var(--border);
    padding-top: 12px;
}
.hc-cmt-label {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .4px; color: var(--text-muted); margin-bottom: 10px;
}
.hc-comment {
    background: #f8fafc; border-radius: var(--radius-sm);
    padding: 9px 12px; margin-bottom: 8px;
    border-left: 2px solid #e2e8f0;
}
.hc-comment.hc-cmt-new { animation: rowSlideIn .2s ease; border-left-color: var(--primary); }
.hc-cmt-author {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 4px;
}
.hc-cmt-role {
    background: #e8f6fb; color: var(--primary);
    font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 10px;
    text-transform: uppercase;
}
.hc-cmt-date { color: var(--text-muted); font-size: 11px; font-weight: 400; margin-left: auto; }
.hc-cmt-text { font-size: 12.5px; color: var(--text); line-height: 1.55; }

.hc-cmt-add { margin-top: 6px; }
.hc-cmt-input {
    width: 100%; border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 12px; font-size: 12.5px; font-family: inherit;
    color: var(--text); background: var(--white); outline: none;
    resize: none; overflow: hidden; min-height: 36px;
    transition: border-color .15s;
}
.hc-cmt-input:focus { border-color: var(--accent); }
.hc-cmt-input::placeholder { color: #c8c8c8; }
.hc-cmt-actions {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 6px;
}
.hc-cmt-note { font-size: 11px; color: var(--text-muted); }

/* Image card comments section */
.hc-img-card .hc-cmt-block {
    margin: 0; padding: 10px 14px;
    border-top: 1px solid var(--border); border-left: none;
}

/* ── Modal ── */
.hc-modal-wide { max-width: 680px !important; }
.hc-modal-body { padding: 16px 20px; overflow-y: auto; max-height: calc(90vh - 140px); }

/* Type selector */
.hc-type-sel {
    display: grid; grid-template-columns: repeat(4,1fr); gap: 8px;
    margin-bottom: 18px;
}
.hc-type-btn {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 8px; border-radius: var(--radius);
    border: 2px solid var(--border); background: #f8fafc;
    cursor: pointer; font-size: 12px; font-weight: 600;
    color: var(--text-muted); font-family: inherit;
    transition: all .15s;
}
.hc-type-btn:hover { border-color: #9db9d0; color: var(--text); background: #fff; }
.hc-type-btn.active {
    border-color: var(--primary); background: #e8f6fb; color: var(--primary);
}

/* Modal form sections */
.hc-form { display: none; }
.hc-form.active { display: block; }
.hc-form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hc-input {
    width: 100%; padding: 8px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 13px; font-family: inherit; outline: none;
    background: var(--white); color: var(--text);
    transition: border-color .15s;
}
.hc-input:focus { border-color: var(--accent); }
.hc-textarea { resize: none; overflow: hidden; min-height: 36px; }

/* Upload zones in modal */
.hc-upload-zone {
    display: flex; align-items: center; gap: 10px;
    border: 2px dashed #cbd5e1; border-radius: var(--radius);
    padding: 12px 16px; cursor: pointer; margin-top: 10px;
    color: var(--text-muted); font-size: 12.5px;
    transition: border-color .15s, background .15s;
}
.hc-upload-zone:hover { border-color: var(--primary); background: #f8faff; }
.hc-upload-lg {
    flex-direction: column; padding: 24px 16px;
    justify-content: center; text-align: center; gap: 6px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .hc-summary-layout { grid-template-columns: 1fr; }
    .hc-banner-aside { border-left: none; border-top: 1px solid var(--border); flex-wrap: wrap; }
    .hc-banner-main, .hc-banner-aside { padding: 14px 16px; }
}
@media (max-width: 768px) {
    .hc-stats-row { grid-template-columns: repeat(2,1fr); }
    .hc-type-sel { grid-template-columns: repeat(2,1fr); }
    .hc-form-grid2 { grid-template-columns: 1fr; }
    .hc-entry-grid { grid-template-columns: 1fr; }
    .hc-img-grid { grid-template-columns: 1fr; }
    .hc-tab-nav .tab-btn span:last-child { display: none; }
}
@media (max-width: 640px) {
    /* Compact patient banner on mobile */
    .hc-banner-main { padding: 12px 14px 8px; gap: 11px; }
    .hc-avatar { width: 40px; height: 40px; font-size: 14px; flex-shrink: 0; }
    .hc-patient-name { font-size: 14px; margin-bottom: 2px; }
    .hc-patient-meta { font-size: 11.5px; margin-bottom: 6px; }
    .hc-dx-chips { gap: 4px; }
    .hc-dx-chip { font-size: 10.5px; padding: 1px 7px; }

    /* Collapse aside into a single compact strip */
    .hc-banner-aside {
        padding: 7px 14px;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0;
        align-items: center;
        overflow-x: auto;
    }
    .hc-qs {
        min-width: 0;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 0 12px 0 0;
    }
    .hc-qs + .hc-qs {
        padding-left: 12px;
        border-left: 1px solid var(--border);
    }
    .hc-qs-label { display: none; }
    .hc-qs-blood { font-size: 13px; font-weight: 800; }
    .hc-qs-val { font-size: 11.5px; }
    .hc-qs-sub { font-size: 11px; }
    .hc-qs-val + .hc-qs-sub::before { content: ' · '; }
    .hc-qs-sub { display: inline; }

    /* Tighter allergy bar */
    .hc-allergy-bar { padding: 6px 14px; font-size: 11.5px; }

    /* ── Entry cards: card-style redesign ── */
    .hc-entry {
        border-radius: 14px;
        box-shadow: 0 1px 4px rgba(0,0,0,.07);
        margin-bottom: 10px;
    }
    /* Header: two-row stacked layout */
    .hc-entry-hd {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 12px 14px 11px;
    }
    /* Row 1: type pill + date aligned horizontally */
    .hc-ehd-left {
        width: 100%;
        flex-wrap: wrap;
        gap: 6px 8px;
    }
    /* Row 2: doctor info + chevron on opposite ends */
    .hc-ehd-right {
        width: 100%;
        justify-content: space-between;
        gap: 6px;
    }
    .hc-entry-doc { font-size: 11.5px; min-width: 0; overflow: hidden; }
    .hc-chev { flex-shrink: 0; }

    /* Lab table: horizontal scroll + compact cells */
    .hc-lab-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -2px;
    }
    .hc-lab-table { min-width: 480px; font-size: 11.5px; }
    .hc-lab-table th,
    .hc-lab-table td { padding: 5px 8px; }

    /* Document list: stack icon + info + action on mobile */
    .hc-doc-item { flex-wrap: wrap; gap: 6px 10px; }
    .hc-doc-info { flex: 1 1 0; min-width: 140px; }
    .hc-doc-acts { width: 100%; padding-top: 4px; border-top: 1px solid var(--border); }
    .hc-doc-btn  { width: 100%; justify-content: center; padding: 8px; }

    /* Tab toolbar: wrap on narrow screens */
    .hc-tab-toolbar { flex-wrap: wrap; }
    .hc-filter-sel  { flex: 1 1 0; min-width: 120px; height: 38px; }

    /* Selector grid: single column on narrow screens */
    .hc-sel-grid { grid-template-columns: 1fr; }
    .hc-sel-wrap { padding: 16px 0; }
}

/* =====================================================
   HISTORIAL CLÍNICO — TAB MEDICAMENTOS
   ===================================================== */

/* Green count badge on the tab button */
.hc-tab-n-green {
    background: #dcfce7 !important;
    color: #166534 !important;
}

/* ── Summary bar ── */
.hc-rx-summary-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 18px;
}
.hc-rx-sum-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px 4px 8px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.hc-rx-sum-n  { font-size: 15px; font-weight: 800; }
.hc-rx-sum-lbl { font-size: 11.5px; font-weight: 500; }
.hc-rx-sum-active   { background: #dcfce7; color: #166534; }
.hc-rx-sum-doses    { background: #e8f6fb; color: #075985; }
.hc-rx-sum-expired  { background: #fff7ed; color: #9a3412; }
.hc-rx-sum-suspended { background: #f1f5f9; color: #475569; }
.hc-rx-manage-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none;
    transition: color .12s, border-color .12s;
    white-space: nowrap;
}
.hc-rx-manage-link:hover { color: var(--primary); border-color: var(--primary); }

/* ── Section headers ── */
.hc-rx-section-hd {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.hc-rx-section-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.hc-rx-dot-active { background: #22c55e; }
.hc-rx-dot-hist   { background: #94a3b8; }
.hc-rx-section-count {
    margin-left: 2px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 10px;
}

/* ── Collapsible history section ── */
.hc-rx-historial-details { margin-top: 28px; }
.hc-rx-historial-details summary { cursor: pointer; list-style: none; }
.hc-rx-historial-details summary::-webkit-details-marker { display: none; }
.hc-rx-section-hist { margin-bottom: 0; padding-bottom: 12px; }
.hc-rx-details-chev {
    margin-left: auto;
    transition: transform .18s;
    color: var(--text-muted);
}
.hc-rx-historial-details[open] .hc-rx-details-chev { transform: rotate(180deg); }

/* ── Row-cards: active medications ── */
.hc-rx-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #fff;
    margin-top: 8px;
}
.hc-rx-row-card {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 11px 14px;
    border-bottom: 1px solid #f1f5f9;
    transition: background .1s;
    min-height: 56px;
}
.hc-rx-row-card:last-child { border-bottom: none; }
.hc-rx-row-card:hover { background: #f8fafc; }

/* Col 1 — icon + name */
.hc-rxr-name-col {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 220px;
    min-width: 0;
    padding-right: 14px;
}
.hc-rxr-name-wrap { min-width: 0; }
.hc-rxr-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}
.hc-rxr-dosis {
    font-size: 11px;
    font-weight: 600;
    color: #178391;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

/* Col 2 — vía / frecuencia / horarios */
.hc-rxr-meta-col {
    flex: 0 0 180px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding-right: 14px;
    min-width: 0;
}
.hc-rxr-horarios {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
    margin-top: 2px;
}

/* Col 3 — médico / indicación */
.hc-rxr-info-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-right: 14px;
    min-width: 0;
}
.hc-rxr-info-row {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.4;
}
.hc-rxr-info-row svg { flex-shrink: 0; margin-top: 1px; }
.hc-rxr-info-row span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Col 4 — período */
.hc-rxr-period-col {
    flex: 0 0 150px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-right: 14px;
}
.hc-rxr-period-row {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-size: 11.5px;
}
.hc-rxr-period-lbl {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    min-width: 32px;
}
.hc-rxr-period-val {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Col 5 — status */
.hc-rxr-status-col { flex-shrink: 0; }

/* Responsive */
@media (max-width: 860px) {
    .hc-rxr-name-col   { flex: 0 0 170px; }
    .hc-rxr-meta-col   { flex: 0 0 130px; }
    .hc-rxr-period-col { flex: 0 0 120px; }
    .hc-rxr-name, .hc-rxr-dosis { max-width: 110px; }
}
@media (max-width: 640px) {
    .hc-rx-row-card    { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
    .hc-rxr-name-col   { flex: 1 1 100%; padding-right: 0; }
    .hc-rxr-meta-col   { flex: 1 1 auto; }
    .hc-rxr-info-col   { flex: 1 1 100%; padding-right: 0; }
    .hc-rxr-period-col { flex: 1 1 auto; }
    .hc-rxr-status-col { margin-left: auto; }
    .hc-rxr-name, .hc-rxr-dosis { max-width: 100%; }
}

/* ── Card grid (historial) ── */
.hc-rx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    margin-bottom: 6px;
}
.hc-rx-grid-hist { margin-top: 12px; }

/* ── Individual medication card ── */
.hc-rx-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    transition: box-shadow .15s, border-color .15s;
    display: flex;
    flex-direction: column;
}
.hc-rx-card:hover { border-color: #bfdbfe; box-shadow: 0 3px 12px rgba(23,131,145,.08); }
.hc-rx-card-inactive {
    opacity: .72;
    filter: grayscale(25%);
}
.hc-rx-card-inactive:hover { opacity: 1; filter: none; }

/* Card top: icon + name + status */
.hc-rx-card-top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 14px 10px;
}
.hc-rx-icon {
    width: 36px; height: 36px; border-radius: 9px;
    background: #e8f6fb;
    color: #178391;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hc-rx-icon-dim { background: #f1f5f9; color: #94a3b8; }
.hc-rx-card-title-wrap { flex: 1; min-width: 0; }
.hc-rx-card-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hc-rx-card-dosis {
    font-size: 11.5px;
    color: #178391;
    font-weight: 600;
    margin-top: 1px;
}

/* Status badges */
.hc-rx-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.hc-rx-status-active    { background: #dcfce7; color: #166534; }
.hc-rx-status-expired   { background: #fff7ed; color: #9a3412; }
.hc-rx-status-suspended { background: #f1f5f9; color: #64748b; }

/* Meta row: via badge + frecuencia */
.hc-rx-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 14px 10px;
}
.hc-rx-frecuencia {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: var(--text-muted);
}

/* Horarios row */
.hc-rx-horarios {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 14px 8px;
    border-top: 1px solid #f1f5f9;
}
.hc-rx-horarios-lbl {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-right: 2px;
}

/* Details section */
.hc-rx-card-details {
    border-top: 1px solid #f1f5f9;
    padding: 10px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.hc-rx-detail-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.45;
}
.hc-rx-detail-row svg { flex-shrink: 0; margin-top: 1px; }
.hc-rx-period { color: var(--text-muted); }
.hc-rx-indef {
    font-size: 11px;
    font-style: italic;
    background: #e8f6fb;
    color: #0369a1;
    padding: 1px 6px;
    border-radius: 4px;
}

/* Expiring badges */
.hc-rx-expiring-badge {
    font-size: 10.5px;
    font-weight: 700;
    background: #fff7ed;
    color: #c2410c;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 4px;
}
.hc-rx-exp-urgent {
    background: #fee2e2;
    color: #991b1b;
}

/* Empty state */
.hc-rx-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
    font-size: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.hc-rx-empty-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-top: 8px;
}
.hc-rx-empty-sub {
    font-size: 12.5px;
    color: var(--text-muted);
    max-width: 340px;
}

@media (max-width: 640px) {
    .hc-rx-grid { grid-template-columns: 1fr; }
    .hc-rx-summary-bar { gap: 6px; }
    .hc-rx-sum-chip { padding: 3px 8px 3px 6px; }
}

/* =====================================================
   GANTT — Historial de medicamentos no activos
   ===================================================== */
.rx-gantt-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.rx-gantt-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 500;
}
.rx-gantt-legend-dot {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    flex-shrink: 0;
}
.rx-gantt-dot-ven   { background: #f97316; }
.rx-gantt-dot-sus   { background: #94a3b8; }
.rx-gantt-dot-today { background: #ef4444; border-radius: 50%; width: 9px; height: 9px; }

.rx-gantt-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    margin-top: 4px;
}
.rx-gantt-inner {
    min-width: 560px;
    padding: 14px 16px 12px;
}

/* Header */
.rx-gantt-header-row {
    display: flex;
    align-items: flex-end;
    padding-bottom: 8px;
    border-bottom: 1.5px solid var(--border);
    margin-bottom: 2px;
}
.rx-gantt-label-hd {
    width: 200px;
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    padding-right: 12px;
}
.rx-gantt-timeline-hd {
    flex: 1;
    position: relative;
    height: 22px;
}
.rx-gantt-tick {
    position: absolute;
    bottom: 2px;
    font-size: 10.5px;
    font-weight: 600;
    color: #94a3b8;
    transform: translateX(-50%);
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
}
.rx-gantt-tick::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 1px;
    height: 5px;
    background: var(--border);
}

/* Rows */
.rx-gantt-row {
    display: flex;
    align-items: center;
    min-height: 46px;
    border-bottom: 1px solid #f8fafc;
    padding: 4px 0;
    transition: background .1s;
}
.rx-gantt-row:last-child { border-bottom: none; }
.rx-gantt-row:hover { background: #fafbfc; }

.rx-gantt-row-lbl {
    width: 200px;
    flex-shrink: 0;
    padding-right: 12px;
}
.rx-gantt-row-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 188px;
}
.rx-gantt-row-dose {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 188px;
}

/* Timeline column */
.rx-gantt-row-tl {
    flex: 1;
    position: relative;
    height: 34px;
}

/* Vertical grid lines */
.rx-gantt-gl {
    position: absolute;
    top: 0; bottom: 0;
    width: 1px;
    background: #f1f5f9;
    pointer-events: none;
}

/* Today marker */
.rx-gantt-today-line {
    position: absolute;
    top: -4px; bottom: -4px;
    width: 2px;
    background: #ef4444;
    opacity: .55;
    pointer-events: none;
    z-index: 1;
}
.rx-gantt-today-lbl {
    position: absolute;
    top: -17px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9.5px;
    font-weight: 700;
    color: #ef4444;
    white-space: nowrap;
    background: #fff;
    padding: 0 2px;
    border-radius: 2px;
}

/* Bars */
.rx-gantt-bar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 22px;
    border-radius: 5px;
    cursor: pointer;
    overflow: hidden;
    transition: filter .12s;
    z-index: 2;
    min-width: 4px;
    display: flex;
    align-items: center;
}
.rx-gantt-bar:hover { filter: brightness(.9); }
.rx-gantt-bar-ven { background: linear-gradient(90deg, #fb923c 0%, #ea6d12 100%); }
.rx-gantt-bar-sus { background: linear-gradient(90deg, #94a3b8 0%, #64748b 100%); }
.rx-gantt-bar-txt {
    font-size: 10.5px;
    font-weight: 600;
    color: #fff;
    padding-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
}

/* Tooltip */
.rx-gantt-tip {
    position: fixed;
    z-index: 9999;
    background: #1e293b;
    color: #e2e8f0;
    font-size: 12px;
    line-height: 1.55;
    padding: 11px 14px;
    border-radius: 9px;
    pointer-events: none;
    max-width: 260px;
    min-width: 180px;
    box-shadow: 0 8px 28px rgba(0,0,0,.28);
    opacity: 0;
    transition: opacity .1s;
}
.rx-gantt-tip.show { opacity: 1; }
.rx-gantt-tip-name {
    font-weight: 700;
    font-size: 13px;
    color: #f8fafc;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.rx-gantt-tip-row {
    display: flex;
    gap: 6px;
    margin-top: 3px;
}
.rx-gantt-tip-row span:first-child {
    color: #64748b;
    flex-shrink: 0;
    min-width: 65px;
}
.rx-gantt-tip-row span:last-child { color: #e2e8f0; }
.rx-gantt-tip-badge {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.rx-gantt-tip-ven { background: #fff7ed; color: #9a3412; }
.rx-gantt-tip-sus { background: #f1f5f9; color: #475569; }

/* Period columns (Inicio / Fin) */
.rx-gantt-dates-hd {
    width: 104px;
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    padding-right: 10px;
    padding-left: 4px;
}
.rx-gantt-row-dates {
    width: 104px;
    flex-shrink: 0;
    padding-right: 10px;
    padding-left: 4px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    justify-content: center;
}
.rx-gantt-date-val {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}
.rx-gantt-date-lbl {
    font-size: 9.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.2;
}

/* Responsive */
@media (max-width: 680px) {
    .rx-gantt-label-hd,
    .rx-gantt-row-lbl  { width: 130px; }
    .rx-gantt-row-name,
    .rx-gantt-row-dose { max-width: 118px; }
    .rx-gantt-dates-hd,
    .rx-gantt-row-dates { width: 80px; padding-right: 6px; }
    .rx-gantt-date-val  { font-size: 10px; }
}

/* =====================================================
   RESIDENTES — REBUILT UX
   ===================================================== */

/* Stats row */
.res-stats-row {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.res-stat-card {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 18px 10px 14px;
    min-width: 80px;
}
.res-stat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.res-stat-num {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}
.res-stat-lbl {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
}
.res-stat-all .res-stat-num  { color: var(--primary); }
.res-stat-active .res-stat-num { color: #16a34a; }
.res-stat-watch .res-stat-num  { color: #d97706; }
.res-stat-inactive .res-stat-num { color: #94a3b8; }
.res-stat-alerts {
    border-color: #fca5a5;
    background: #fff5f5;
}
.res-stat-alerts .res-stat-num { color: #dc2626; }
.res-stat-alerts svg { color: #dc2626; }

/* Toolbar */
.res-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.res-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.res-filter-sel {
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--white);
    font-size: 12.5px;
    color: var(--text);
    cursor: pointer;
    outline: none;
    transition: border-color var(--transition);
}
.res-filter-sel:focus { border-color: var(--accent); }

/* View toggle */
.res-view-toggle {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    margin-left: auto;
}
.res-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--white);
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    transition: background var(--transition), color var(--transition);
}
.res-view-btn:hover { background: var(--bg); }
.res-view-btn.active { background: var(--primary); color: #fff; }
.res-view-btn + .res-view-btn { border-left: 1px solid var(--border); }

/* Card grid */
.res-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(296px, 1fr));
    gap: 14px;
}

/* Individual card */
.res-card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--border);
    border-top: 3px solid #16a34a;
    border-radius: var(--radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow var(--transition), transform var(--transition);
}
.res-card:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,.08);
    transform: translateY(-2px);
}
.res-card.res-card-watch { border-top-color: #d97706; }
.res-card.res-card-inactive { border-top-color: #94a3b8; opacity: .82; }

/* Alert badge on card */
.res-card-alert-badge {
    position: absolute;
    top: -8px; right: -8px;
    background: #dc2626;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    width: 18px; height: 18px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--white);
    z-index: 2;
}

/* Card top row */
.res-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.res-card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
    overflow: hidden;
}
.res-card-avatar img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; cursor: zoom-in;
}
.res-card-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.res-room-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
}

/* Card name & meta */
.res-card-name {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}
.res-card-meta {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.res-blood {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
    color: #dc2626;
}

/* Diagnosis row */
.res-card-dx {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.res-dx-primary {
    font-size: 12px;
    color: var(--primary-dark);
    background: #e8f6fb;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    padding: 3px 9px;
    font-weight: 500;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.res-dx-more {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Allergy warning */
.res-card-allergy {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 4px 9px;
}
.res-card-allergy svg { flex-shrink: 0; }

/* Chips row */
.res-card-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.res-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 99px;
    background: #f1f5f9;
    color: var(--text-muted);
    border: 1px solid var(--border);
}

/* Doctor row */
.res-card-doctor {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text);
    font-weight: 500;
}
.res-card-doctor svg { color: var(--text-muted); flex-shrink: 0; }
.res-card-doctor-esp {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
}

/* Activity row */
.res-card-activity {
    display: flex;
    gap: 12px;
    border-top: 1px solid var(--border);
    padding-top: 10px;
    flex-wrap: wrap;
}
.res-act-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-muted);
}
.res-act-item svg { flex-shrink: 0; }

/* Card action buttons */
.res-card-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    border-top: 1px solid var(--border);
    padding-top: 10px;
}
.res-act-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--white);
    color: var(--text);
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition),
                color var(--transition);
}
.res-act-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}
.res-act-btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.res-act-btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #fff;
}
.res-act-btn-icon {
    padding: 6px 8px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Dropdown menu */
.res-more-wrap {
    position: relative;
    margin-left: auto;
}
.res-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    min-width: 180px;
    z-index: 100;
    padding: 4px 0;
    display: none;
}
.res-dropdown.open { display: block; }
.res-dd-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition);
}
.res-dd-item:hover { background: #f8fafc; }
.res-dd-item svg { color: var(--text-muted); flex-shrink: 0; }
.res-dd-separator { height: 1px; background: var(--border); margin: 4px 0; }
.res-dd-danger { color: var(--danger); }
.res-dd-danger svg { color: var(--danger); }

/* Empty state */
.res-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-muted);
    text-align: center;
    gap: 10px;
}
.res-empty h4 { font-size: 15px; color: var(--text); margin: 0; }
.res-empty p  { font-size: 13px; margin: 0; }
.res-empty svg { color: #cbd5e1; }

/* List view enhancements */
.res-list-table th, .res-list-table td { vertical-align: middle; }
.res-avatar-sm {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    overflow: hidden;
}
.res-avatar-sm img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block; cursor: zoom-in;
}

/* ──────────────────────────────────────────────
   MOBILE CARD LIST  (shown ≤640px, table hidden)
   ────────────────────────────────────────────── */
.res-mobile-list { display: none; }

.res-mobile-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    transition: background .12s;
}
.res-mobile-row:last-child { border-bottom: none; }
.res-mobile-row:hover { background: #fafbff; }
.res-mobile-watch { border-left: 3px solid #f59e0b; padding-left: 13px; }
.res-mobile-inactive { opacity: .65; }

.res-mobile-avatar {
    width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800;
    overflow: hidden;
}
.res-mobile-avatar img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; cursor: zoom-in;
}
.res-mobile-body  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.res-mobile-top {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 6px;
}
.res-mobile-name {
    font-size: 13.5px; font-weight: 700; color: var(--text);
    line-height: 1.3; flex: 1; min-width: 0;
}
.res-mobile-status { flex-shrink: 0; font-size: 9.5px !important; padding: 2px 7px !important; }

.res-mobile-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.res-mobile-detail {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11.5px; color: var(--text-muted);
}

.res-mobile-dx {
    display: flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--text-muted); line-height: 1.3;
}
.res-mobile-dx-more {
    flex-shrink: 0; font-size: 10px; font-weight: 700;
    background: var(--content-bg); color: var(--text-muted);
    border: 1px solid var(--border); border-radius: 20px; padding: 1px 6px;
}

.res-mobile-alert {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; color: #dc2626;
}

.res-mobile-actions {
    display: flex; flex-direction: column; gap: 6px; flex-shrink: 0;
}
.res-mobile-btn {
    width: 34px; height: 34px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: var(--content-bg); border: 1px solid var(--border);
    color: var(--text-muted); text-decoration: none;
    transition: background .12s, color .12s, border-color .12s;
}
.res-mobile-btn:hover { background: #e8f6fb; color: var(--primary); border-color: #bfdbfe; }
.res-mobile-btn-primary {
    background: var(--primary); color: #fff; border-color: var(--primary);
}
.res-mobile-btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }

@media (max-width: 640px) {
    #residentsTable { display: none; }
}

/* ──────────────────────────────────────────────
   PERSONAL — MOBILE CARD LISTS  (≤640px)
   ────────────────────────────────────────────── */
.per-mobile-staff-list,
.per-mobile-inv-list   { display: none; flex-direction: column; gap: 10px; }

/* ── Individual card ── */
.per-mobile-staff-row,
.per-mobile-inv-row {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    overflow: hidden;
    transition: box-shadow .15s, border-color .15s;
}
.per-mobile-staff-row:hover,
.per-mobile-inv-row:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.10);
    border-color: var(--accent);
}

/* ── Card top section (avatar + info) ── */
.per-mcard-top {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 14px 12px;
}

/* avatar circle */
.per-m-avatar {
    width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800;
    overflow: hidden;
}
.per-m-avatar img { width:100%;height:100%;object-fit:cover;border-radius:12px;display:block;cursor:zoom-in; }

/* envelope icon for invitations */
.per-m-inv-icon {
    width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.per-m-inv-icon-pending  { background: #e8f6fb; color: var(--primary); }
.per-m-inv-icon-accepted { background: #f0fdf4; color: #16a34a; }
.per-m-inv-icon-expired  { background: #f1f5f9; color: #94a3b8; }

/* body */
.per-m-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }

.per-m-name {
    font-size: 14px; font-weight: 700; color: var(--text);
    line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.per-m-email-name { font-size: 13px; }

.per-m-badges {
    display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
}
.per-m-email {
    display: flex; align-items: center; gap: 4px;
    font-size: 11.5px; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-width: 0;
}
.per-m-email svg { flex-shrink: 0; }
.per-m-since  { font-size: 11px; color: var(--text-muted); }
.per-m-sep    { color: #cbd5e1; font-size: 11px; }

.per-m-expiry {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
    font-size: 11.5px;
}
.per-m-countdown {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 700;
    padding: 1px 6px; border-radius: 20px;
    background: rgba(0,0,0,.05);
}
.per-m-countdown.countdown-urgent { background: #fee2e2; color: #dc2626; }
.per-m-countdown.countdown-warn   { background: #fef9c3; color: #92400e; }
.per-m-countdown.countdown-ok     { background: #f1f5f9; color: #64748b; }

/* ── Card bottom action bar ── */
.per-mcard-actions {
    display: flex;
    border-top: 1px solid var(--border);
}
.per-mcard-btn {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    height: 44px;
    background: none; border: none; cursor: pointer;
    font-size: 12.5px; font-weight: 600;
    color: var(--text-muted);
    transition: background .12s, color .12s;
}
.per-mcard-btn + .per-mcard-btn { border-left: 1px solid var(--border); }
a.per-mcard-btn { text-decoration: none; }
.per-mcard-btn:hover              { background: #f8fafc; }
.per-mcard-btn-edit               { color: var(--primary); }
.per-mcard-btn-edit:hover         { background: #e8f6fb; }
.per-mcard-btn-deactivate         { color: var(--danger); }
.per-mcard-btn-deactivate:hover   { background: #fef2f2; }
.per-mcard-btn-activate           { color: #16a34a; }
.per-mcard-btn-activate:hover     { background: #f0fdf4; }
.per-mcard-btn-resend             { color: var(--primary); }
.per-mcard-btn-resend:hover       { background: #e8f6fb; }
.per-mcard-btn-revoke             { color: var(--danger); }
.per-mcard-btn-revoke:hover       { background: #fef2f2; }
.per-mcard-btn-delete             { color: #dc2626; }
.per-mcard-btn-delete:hover       { background: #fef2f2; }

/* Keep old small-button classes so other pages aren't broken */
.per-m-btn {
    width: 34px; height: 34px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: var(--content-bg); border: 1px solid var(--border);
    color: var(--text-muted); cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.per-m-btn:hover         { background: #e8f6fb; color: var(--primary); border-color: #bfdbfe; }
.per-m-btn-danger        { background: #fff1f2; color: #dc2626; border-color: #fecaca; }
.per-m-btn-danger:hover  { background: #fee2e2; border-color: #f87171; }
.per-m-btn-success       { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }
.per-m-btn-success:hover { background: #dcfce7; border-color: #86efac; }
.per-m-btn-resend        { background: #e8f6fb; color: var(--primary); border-color: #bfdbfe; }
.per-m-btn-resend:hover  { background: #e8f6fb; border-color: #9db9d0; }

@media (max-width: 640px) {
    #staffTable              { display: none; }
    #invTable                { display: none; }
    #hcResTable              { display: none; }
    .per-mobile-staff-list   { display: flex; }
    .per-mobile-inv-list     { display: flex; }
}

/* Responsive */
@media (max-width: 1100px) {
    .res-card-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
@media (max-width: 768px) {
    .res-stats-row { gap: 8px; }
    .res-stat-card { padding: 8px 12px; }
    .res-stat-num  { font-size: 18px; }
    .res-toolbar   { gap: 8px; }
    .res-view-toggle { margin-left: 0; }
    .res-card-grid { grid-template-columns: 1fr; }
}

/* =====================================================
   BITÁCORA — HISTORY + EDITOR LAYOUT
   ===================================================== */

/* Wrapper that overrides content-area padding to full-bleed */
.bita-layout-wrap {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Two-column layout */
.bita-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── History Panel ── */
.bita-panel {
    width: 270px;
    min-width: 270px;
    min-height: 0;       /* allow panel to be constrained by flex parent height */
    background: var(--white);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: visible;
    transition: width .2s, min-width .2s;
}

.bita-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.bita-panel-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-muted);
}
.bita-new-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--primary); color: #fff;
    border: none; border-radius: var(--radius-sm);
    padding: 5px 10px; font-size: 12px; font-weight: 600;
    cursor: pointer; transition: background .15s;
}
.bita-new-btn:hover { background: var(--primary-dark); }

/* Search inside panel */
.bita-panel-search-wrap {
    position: relative;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.bita-search-icon {
    position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); pointer-events: none;
}
.bita-search-input {
    width: 100%;
    padding: 6px 10px 6px 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--text);
    background: var(--bg);
    box-sizing: border-box;
}
.bita-search-input:focus { outline: none; border-color: var(--accent); }

/* ── Panel date + resident controls ── */
.bita-panel-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: #f8fafc;
    flex-shrink: 0;
}
.bita-panel-controls .bita-date-nav {
    width: 100%;
    justify-content: space-between;
}
.bita-panel-controls .bita-date-pill {
    flex: 1;
    justify-content: center;
    font-size: 12px;
    padding: 5px 8px;
}
.bita-panel-res-sel {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--text);
    background: var(--bg);
    box-sizing: border-box;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
    transition: border-color .15s;
}
.bita-panel-res-sel:focus {
    outline: none;
    border-color: var(--accent);
}

/* ── Panel mini-stats strip ── */
.bita-panel-stats {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    background: #f8fafc;
    flex-shrink: 0;
    gap: 4px;
}
.bita-ps-sep {
    width: 1px; height: 28px;
    background: var(--border);
    flex-shrink: 0;
}
.bita-ps-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 2px;
}
.bita-ps-num {
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    color: var(--text);
}
.bita-ps-lbl {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    white-space: nowrap;
}
.bita-ps-signed .bita-ps-num { color: #16a34a; }
.bita-ps-draft  .bita-ps-num { color: #d97706; }

/* Scrollable list */
.bita-panel-list,
#bitaPanelList {
    flex: 1;
    min-height: 0;       /* allows flex item to shrink below content height → scroll activates */
    overflow-y: auto;
    max-height: 80vh;
    padding: 8px 0 12px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.bita-panel-list::-webkit-scrollbar { width: 4px; }
.bita-panel-list::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 4px; }

/* ── Individual history entry ── (card style matching per-mcard pattern) */
.bita-entry {
    flex-shrink: 0;      /* prevent cards from compressing inside flex list */
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 3px solid transparent;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    margin: 0 8px 8px;
    padding: 11px 12px;
    cursor: pointer;
    transition: background .12s, border-color .12s, box-shadow .12s;
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: hidden;
}
.bita-entry:hover {
    background: #f8fafc;
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.bita-entry-active {
    background: #e8f6fb !important;
    border-left-color: var(--accent) !important;
    box-shadow: 0 2px 8px rgba(23,131,145,.13) !important;
}

/* Row 1: date (left) + status pill (right) */
.bita-entry-top {
    display: flex; align-items: center;
    justify-content: space-between; gap: 8px;
}
.bita-entry-date {
    font-size: 13px; font-weight: 400;
    color: var(--text); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    flex: 1; line-height: 1.2;
}

/* Row 1: resident name (prominente) in history entry */
.bita-entry-res-name {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 400;
    color: var(--text);
    overflow: hidden;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
}
.bita-entry-res-name-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bita-entry-res-avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0;
}
.bita-entry-active .bita-entry-res-avatar {
    background: var(--accent);
    color: #fff;
}

/* Row 2: date + alerts */
.bita-entry-date-row {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* Row 2: shift pill + nurse name + alert badge */
.bita-entry-meta {
    display: flex; align-items: center; gap: 6px;
}
.bita-shift-pill {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700;
    padding: 2px 7px; border-radius: 6px;
    flex-shrink: 0; letter-spacing: .3px;
    border: 1px solid transparent;
}
.bita-shift-tm { background: #fef9c3; color: #854d0e; border-color: #fde68a; }
.bita-shift-tv { background: #e0e7ff; color: #3730a3; border-color: #c7d2fe; }
.bita-shift-tn { background: #e8f6fb; color: #075985; border-color: #bae6fd; }
.bita-entry-nurse {
    font-size: 12.5px; color: var(--text);
    flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-weight: 500;
}
.bita-alert-dot {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 11px; font-weight: 700;
    color: #dc2626; background: #fee2e2;
    padding: 1px 6px 1px 5px; border-radius: 99px;
    flex-shrink: 0;
}

/* Row 3: summary note */
.bita-entry-summary {
    font-size: 12px; color: var(--text-muted);
    line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 1;
    -webkit-box-orient: vertical; overflow: hidden;
}

/* Status pills */
.bita-status-pill {
    font-size: 10.5px; font-weight: 700;
    padding: 2px 8px; border-radius: 99px;
    white-space: nowrap; flex-shrink: 0; line-height: 1.5;
}
.bita-s-draft  { background: #fef3c7; color: #92400e; }   /* amber — incomplete, needs attention */
.bita-s-done   { background: #f0fdf4; color: #166534; }   /* soft green — done */
.bita-s-signed { background: #f1f5f9; color: #64748b; }   /* neutral gray — locked, no action */

/* 3-dot shift status indicator */
.bita-shift-dots {
    display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.bita-shift-dot {
    width: 8px; height: 8px; border-radius: 50%;
    border: 1.5px solid;
    display: inline-block; flex-shrink: 0;
}

/* ── Editor Panel ── */
.bita-editor {
    flex: 1;
    /* overflow:hidden clips flex children to the bita-layout height so Signos Vitales and
       Lista views scroll correctly. overflow:hidden does NOT consume wheel events (the
       element is not scrollable), so wheel events still reach .sl-grid normally. */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    position: relative; /* needed for .editor-loader overlay */
}
.bita-editor::-webkit-scrollbar { width: 6px; }
.bita-editor::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 6px; }

.bita-editor > .bita-view-tabs {
    flex-shrink: 0;
}

/* ── No-selection state: hide timeline when no resident has been chosen ── */
.bita-no-selection .bita-view-tabs,
.bita-no-selection #tlAddNoteBtn,
.bita-no-selection .tl-shift-statusbar,
.bita-no-selection .bita-readonly-banner,
.bita-no-selection #tlWrap,
.bita-no-selection #vsSection,
.bita-no-selection #obsDrawer { display: none !important; }
.bita-no-selection #bitaNoResSplash { display: flex !important; }

/* ── Resident header (encabezado prominente del residente activo) ── */
.bita-res-hdr {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border-bottom: 2px solid var(--border);
    background: #f8faff;
    flex-shrink: 0;
}
/* Top row: avatar + name/date + add-note button */
.bita-res-hdr-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
}
.bita-res-hdr .tl-shift-statusbar {
    border-top: 1px solid var(--border);
    border-bottom: none;
}
.bita-res-hdr-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #e0e7ff;
    color: #3730a3;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}
.bita-res-hdr-info { flex: 1; min-width: 0; }
.bita-res-hdr-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.bita-res-hdr-date {
    font-size: 11.5px;
    color: var(--accent);
    font-weight: 600;
    margin-top: 2px;
}
/* When no selection: dim the header */
.bita-no-selection .bita-res-hdr {
    background: #f8fafc;
    border-bottom-color: transparent;
}
.bita-no-selection .bita-res-hdr-avatar {
    background: #e2e8f0;
    color: #94a3b8;
}
.bita-no-selection .bita-res-hdr-name { color: var(--text-muted); font-weight: 600; font-size: 13px; }

/* ── Empty-state splash: select a resident ── */
.bita-no-res-splash {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 14px;
    padding: 40px 24px;
    text-align: center;
    color: var(--text-muted);
}
.bita-no-res-ico {
    width: 80px; height: 80px;
    background: #f1f5f9;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #94a3b8;
}
.bita-no-res-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.bita-no-res-sub {
    font-size: 13px;
    color: var(--text-muted);
    max-width: 280px;
    line-height: 1.5;
}


/* Read-only banner */
.bita-readonly-banner {
    display: flex; align-items: center; gap: 8px;
    background: #fef9c3; border: 1px solid #fde68a;
    border-radius: var(--radius); padding: 9px 14px;
    font-size: 12.5px; color: #78350f;
    flex-shrink: 0;
}
.bita-readonly-banner.bita-banner-warn {
    background: #fff7ed; border-color: #fed7aa; color: #7c2d12;
}
.bita-unlock-btn {
    margin-left: auto; font-size: 11.5px; font-weight: 600;
    color: #033f3f; background: none; border: none;
    cursor: pointer; text-decoration: underline;
}

/* Read-only mode for Familiar role */
.bita-readonly-mode input,
.bita-readonly-mode textarea,
.bita-readonly-mode select,
.bita-readonly-mode button { pointer-events: none; opacity: .55; }
.bita-readonly-mode .tab-btn { pointer-events: auto; opacity: 1; }
.bita-readonly-mode .bita-date-pill { pointer-events: none; }

/* Editor top bar: date + nav + nurses */
.bita-editor-bar {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 10px 14px;
    flex-shrink: 0;
}

/* ── Date navigation group ── */
.bita-date-nav {
    display: flex; align-items: center; gap: 2px;
    background: #f8fafc; border: 1px solid var(--border);
    border-radius: 8px; padding: 3px;
}
.bita-nav-arrow {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border: none; background: transparent;
    border-radius: 6px; color: var(--text-muted); cursor: pointer;
    transition: background .15s, color .15s;
}
.bita-nav-arrow:hover { background: var(--white); color: var(--primary); }
.bita-nav-arrow:disabled { opacity: .3; cursor: default; pointer-events: none; }
.bita-date-pill {
    position: relative;
    display: flex; align-items: center; gap: 6px;
    padding: 5px 12px; border: none; background: var(--white);
    border-radius: 6px; font-size: 13px; font-weight: 600;
    color: var(--primary); cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,.07);
    transition: box-shadow .15s, background .15s;
    white-space: nowrap;
}
.bita-date-pill:hover { background: #e8f6fb; box-shadow: 0 1px 6px rgba(0,0,0,.1); }
.bita-date-pill svg { color: var(--primary); flex-shrink: 0; }
.bita-date-input-hidden {
    position: absolute; inset: 0; opacity: 0;
    cursor: pointer; pointer-events: none;
    width: 100%; height: 100%;
}

/* ── Shift indicator pills in bar ── */
.bita-shift-pills {
    display: flex; gap: 5px; margin-left: auto;
}
.bita-shift-indicator {
    font-size: 11px; font-weight: 600; letter-spacing: .04em;
    padding: 3px 8px; border-radius: 20px;
    background: #f1f5f9; color: #94a3b8;
    transition: background .2s, color .2s;
}
/* Active state: soft shift tint */
.bita-shift-indicator.bita-shift-active.bita-shift-tm { background: #fef9c3; color: #854d0e; }
.bita-shift-indicator.bita-shift-active.bita-shift-tv { background: #e0e7ff; color: #3730a3; }
.bita-shift-indicator.bita-shift-active.bita-shift-tn { background: #e8f6fb; color: #075985; }

/* ── TURNOS TAB: shift-handoff UX ───────────────────────────────────── */

/* Handoff banner */
.handoff-banner {
    display: flex; align-items: center; gap: 14px;
    background: linear-gradient(135deg,#fffbeb,#fef3c7);
    border: 1px solid #fcd34d; border-left: 4px solid #f59e0b;
    border-radius: var(--radius); padding: 14px 18px; margin-bottom: 16px;
}
.handoff-banner-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #fde68a; border-radius: 10px; color: #92400e;
}
.handoff-banner-body { flex: 1; min-width: 0; }
.handoff-banner-title { font-size: 13px; font-weight: 700; color: #92400e; }
.handoff-banner-sub   { font-size: 12px; color: #b45309; margin-top: 2px; }
.handoff-ack-btn {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
    background: #f59e0b; color: #fff; border: none;
    border-radius: var(--radius-sm); padding: 8px 14px;
    font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.handoff-ack-btn:hover { background: #d97706; }

/* Stack */
.turnos-stack { display: flex; flex-direction: column; gap: 12px; }

/* Card */
.turno-card2 {
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    border-left: 4px solid transparent;
    transition: box-shadow .2s;
}
.turno-card2[data-shift="tm"] { border-left-color: #d97706; }
.turno-card2[data-shift="tv"] { border-left-color: #178391; }
.turno-card2[data-shift="tn"] { border-left-color: #7c3aed; }
.turno-card2-active { box-shadow: 0 2px 14px rgba(0,0,0,.08); }
.turno-card2[data-shift="tm"].turno-card2-active { background: #fffdf7; }
.turno-card2[data-shift="tv"].turno-card2-active { background: #f0f7ff; }
.turno-card2[data-shift="tn"].turno-card2-active { background: #faf5ff; }

/* Card header */
.turno2-header {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.turno-badge {
    width: 34px; height: 34px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; letter-spacing: .05em; flex-shrink: 0;
}
.turno-badge-tm { background: #fef3c7; color: #92400e; }
.turno-badge-tv { background: #e8f6fb; color: #033f3f; }
.turno-badge-tn { background: #f3e8ff; color: #6b21a8; }
.turno2-meta  { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.turno2-name  { font-size: 13px; font-weight: 700; color: var(--text); }
.turno2-hours { font-size: 11px; color: var(--text-muted); }
.turno2-statuspill {
    font-size: 11px; font-weight: 700; letter-spacing: .03em;
    padding: 3px 10px; border-radius: 20px; flex-shrink: 0;
}
.turno-s-pending { background: #f1f5f9; color: var(--text-muted); }
.turno-s-active  { background: #dcfce7; color: #166534; }
.turno-s-notes   { background: #e8f6fb; color: #033f3f; }
.turno-s-signed  { background: #f3e8ff; color: #6b21a8; }
.turno-nurse-select {
    font-size: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 5px 10px; background: var(--white); cursor: pointer;
    max-width: 200px; color: var(--text); margin-left: auto;
}
.turno-nurse-select:focus { outline: none; border-color: var(--accent); }

/* Observation section */
.turno-obs-section { padding: 14px 16px; }
.turno-obs-log { display: flex; flex-direction: column; gap: 7px; margin-bottom: 6px; }
.turno-obs-empty {
    font-size: 12px; color: var(--text-muted); font-style: italic; padding: 4px 0 8px;
}
.turno-obs-entry {
    display: flex; align-items: flex-start; gap: 0;
    background: var(--white); border: 1px solid var(--border);
    border-radius: 8px; padding: 9px 13px;
}
.obs-entry-badge-col {
    display: flex; align-items: center; gap: 5px;
    width: 108px; flex-shrink: 0; padding-top: 1px;
}
.obs-entry-dot {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.obs-entry-dot.obs-cat-alert    { background: #ef4444; }
.obs-entry-dot.obs-cat-med      { background: #178391; }
.obs-entry-dot.obs-cat-incident { background: #f59e0b; }
.obs-entry-dot.obs-cat-pain     { background: #ec4899; }
.obs-entry-dot.obs-cat-behavior { background: #8b5cf6; }
.obs-entry-dot.obs-cat-gen      { background: #94a3b8; }
.obs-entry-cat {
    font-size: 10.5px; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.obs-entry-body-col {
    flex: 1; min-width: 0;
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.obs-entry-text {
    font-size: 13px; color: var(--text); flex: 1; min-width: 0;
    line-height: 1.45;
}
.obs-entry-time {
    font-size: 11px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0;
}
/* Category labels stay neutral — color only on dot */
.obs-cat-alert, .obs-cat-med, .obs-cat-incident,
.obs-cat-pain, .obs-cat-behavior, .obs-cat-gen { color: var(--text-muted); }

/* Quick-add chips */
.obs-chips-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    padding-top: 10px; border-top: 1px dashed #e2e8f0; margin-top: 4px;
}
.obs-chips-label {
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .05em;
}
.obs-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600; border: 1px solid;
    border-radius: 20px; padding: 4px 10px; cursor: pointer;
    transition: background .12s, transform .1s; background: transparent;
}
.obs-chip:active { transform: scale(.96); }
.obs-chip-alert, .obs-chip-med, .obs-chip-incident,
.obs-chip-pain, .obs-chip-behavior, .obs-chip-gen {
    color: var(--text-muted); border-color: var(--border); background: var(--white);
}
.obs-chip-alert:hover    { color: #dc2626; background: #fff0f0; border-color: #fca5a5; }
.obs-chip-med:hover      { color: #033f3f; background: #e8f6fb; border-color: #9db9d0; }
.obs-chip-incident:hover { color: #d97706; background: #fffbeb; border-color: #fcd34d; }
.obs-chip-pain:hover     { color: #be185d; background: #fdf2f8; border-color: #f9a8d4; }
.obs-chip-behavior:hover { color: #7c3aed; background: #faf5ff; border-color: #c4b5fd; }
.obs-chip-gen:hover      { color: #64748b; background: #f1f5f9; border-color: #cbd5e1; }

/* Inline input panel */
.obs-input-row {
    margin-top: 10px; background: #f8fafc;
    border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px;
}
.obs-input-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.obs-input-cat {
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    padding: 3px 10px; border-radius: 20px;
}
.obs-btn-cancel {
    display: flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border: none; background: transparent;
    color: var(--text-muted); cursor: pointer; border-radius: 4px; transition: background .12s;
}
.obs-btn-cancel:hover { background: #e2e8f0; color: var(--text); }
.obs-textarea {
    width: 100%; resize: vertical; font-size: 13px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 8px 10px; color: var(--text); background: var(--white);
    font-family: inherit; transition: border-color .15s; box-sizing: border-box;
}
.obs-textarea:focus { outline: none; border-color: var(--accent); }
.obs-textarea.shake { animation: obsShake .35s ease; }
@keyframes obsShake {
    0%,100% { transform: translateX(0); }
    25%     { transform: translateX(-4px); }
    75%     { transform: translateX(4px); }
}
.obs-input-footer {
    display: flex; align-items: center; justify-content: space-between; margin-top: 8px;
}
.obs-hint { font-size: 11px; color: var(--text-muted); }
.obs-btn-submit {
    display: flex; align-items: center; gap: 5px;
    background: var(--primary); color: #fff; border: none;
    border-radius: var(--radius-sm); padding: 7px 14px;
    font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.obs-btn-submit:hover { background: var(--primary-dark); }

/* Card footer */
.turno2-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; border-top: 1px solid var(--border); background: #f8fafc;
}
.turno2-obs-count { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.turno-sign-btn {
    display: flex; align-items: center; gap: 5px;
    background: transparent; color: var(--primary); border: 1px solid var(--primary);
    border-radius: var(--radius-sm); padding: 6px 14px;
    font-size: 12px; font-weight: 600; cursor: pointer;
    transition: background .15s, color .15s;
}
.turno-sign-btn:hover { background: var(--primary); color: #fff; }
.turno-sign-btn-done {
    background: #dcfce7 !important; color: #166534 !important;
    border-color: #86efac !important; cursor: default;
}

/* Panel toggle button (hidden — replaced by back button on mobile) */
.bita-panel-toggle {
    display: none;
    align-items: center; gap: 5px;
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 6px 10px;
    font-size: 12px; font-weight: 600; color: var(--text-muted);
    cursor: pointer; transition: background .15s;
}
.bita-panel-toggle:hover, .bita-panel-toggle.active {
    background: var(--primary); color: #fff; border-color: var(--primary);
}

/* Back button inside editor bar — desktop hidden, mobile shown */
.bita-mobile-topbar {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.bita-mobile-date {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.bita-back-btn {
    display: none;
    align-items: center; gap: 5px;
    background: var(--primary); color: #fff;
    border: none; border-radius: 8px;
    padding: 8px 14px; font-size: 12px; font-weight: 700;
    cursor: pointer; transition: background .15s; flex-shrink: 0;
    min-height: 40px;
}
.bita-back-btn:hover { background: var(--primary-dark); }
.bita-back-btn:active { transform: scale(.97); }

/* Toast */
.bita-toast {
    position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: #1e293b; color: #fff; font-size: 13px; font-weight: 500;
    padding: 9px 20px; border-radius: 99px; z-index: 9999;
    opacity: 0; transition: opacity .25s, transform .25s;
    pointer-events: none;
}
.bita-toast.bita-toast-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Spinner animation (shared) ─────────────────────────────────── */
@keyframes bitaSpinAnim { to { transform: rotate(360deg); } }

/* ── Button loading spinner icon ────────────────────────────────── */
.btn-spin-icon {
    display: inline-block;
    vertical-align: middle;
    animation: bitaSpinAnim .65s linear infinite;
    opacity: .8;
    flex-shrink: 0;
}

/* ── Editor loading overlay ─────────────────────────────────────── */
.editor-loader {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.editor-loader-spinner {
    width: 38px;
    height: 38px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--accent, #6366f1);
    border-radius: 50%;
    animation: bitaSpinAnim .7s linear infinite;
    flex-shrink: 0;
}
.editor-loader-text {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: .02em;
}

/* ── Offline connectivity banner ────────────────────────────────────── */
.offline-banner {
    position: sticky;
    top: 0;
    z-index: 1200;
    background: #7f1d1d;
    border-bottom: 2px solid #991b1b;
    animation: offlineBannerIn .25s ease;
}
@keyframes offlineBannerIn {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.offline-banner-inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 18px;
    max-width: 100%;
}
.offline-banner-icon {
    color: #fca5a5;
    flex-shrink: 0;
    margin-top: 2px;
}
.offline-banner-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.offline-banner-title {
    font-size: .82rem;
    font-weight: 700;
    color: #fecaca;
    letter-spacing: .02em;
}
.offline-banner-sub {
    font-size: .76rem;
    color: #fca5a5;
    line-height: 1.4;
}

/* ── Data-uncertain overlay on bita-editor when load failed ── */
.bita-editor.bita-data-uncertain::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 12px,
        rgba(127,29,29,.04) 12px,
        rgba(127,29,29,.04) 14px
    );
    pointer-events: none;
    z-index: 10;
}
.bita-data-warn-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #fef2f2;
    border-bottom: 1px solid #fecaca;
    font-size: .77rem;
    color: #b91c1c;
    font-weight: 500;
    flex-shrink: 0;
    position: relative;
    z-index: 11;
}
.bita-data-warn-bar svg { flex-shrink: 0; }
.bita-data-warn-bar button {
    margin-left: auto;
    background: none;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    color: #b91c1c;
    font-size: .74rem;
    font-weight: 600;
    padding: 3px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}
.bita-data-warn-bar button:hover { background: #fecaca; }

/* ── Responsive ── */
@media (max-width: 900px) {
    /* Layout stacks: each child fills the viewport height */
    .bita-layout-wrap { padding: 0 !important; }
    .bita-layout {
        flex-direction: column;
        flex: 1;
        /* height kept from desktop (calc(100vh - 57px)) — do NOT override with auto
           because position:absolute children need a definite parent height */
        overflow: hidden;
        position: relative;
    }

    /* Panel: full size, visible by default */
    .bita-panel {
        width: 100%; min-width: 0;
        flex: 1;
        border-right: none;
        border-bottom: none;
        /* overflow:visible — do NOT use overflow:hidden here; it creates a non-scrollable scroll
           container that intercepts touch events before .bita-panel-list receives them.
           Visual clipping during slide-in/out is handled by .bita-layout { overflow:hidden }. */
        overflow: visible;
        transition: transform .25s ease, opacity .25s ease;
        transform: translateX(0);
        opacity: 1;
        position: absolute; inset: 0;
        z-index: 2;
    }
    .bita-panel-list {
        overflow-y: scroll;          /* always reserve scrollbar gutter → entries never shift */
        scrollbar-width: thin;
        /* Touch-scroll on iOS/Android */
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        overscroll-behavior-y: contain;
    }
    /* Prevent flex algorithm from squishing entry cards inside the list */
    .bita-panel-list .bita-entry {
        flex-shrink: 0;
    }

    /* Editor: hidden behind, slides in from right */
    .bita-editor {
        position: absolute; inset: 0;
        display: flex; flex-direction: column;
        /* overflow:visible — do NOT use overflow:hidden here; it intercepts touch scroll events
           before .sl-grid receives them. Clipping of slide transition handled by .bita-layout. */
        overflow: visible;
        z-index: 1;
        transform: translateX(100%);
        opacity: 0;
        transition: transform .25s ease, opacity .25s ease;
        pointer-events: none;
        padding: 0;
    }
    /* Inner scroll area inside editor (everything below editor-bar) */
    .bita-editor > .hc-tab-nav,
    .bita-editor > .tab-pane { flex-shrink: 0; }
    .bita-editor > .tab-pane.active {
        flex: 1;
        overflow-y: auto;
        padding: 0 14px 80px;
    }
    .bita-editor > .bita-readonly-banner,
    .bita-editor > .bita-editor-bar { flex-shrink: 0; }
    .bita-editor > .bita-readonly-banner { margin: 10px 14px 0; }
    .bita-editor > .bita-editor-bar     { margin: 10px 14px 0; }
    .bita-editor > .hc-tab-nav          { flex-shrink: 0; margin-top: 0; margin-bottom: 0; }

    /* When an entry is selected: hide panel, show editor */
    .bita-layout.bita-editor-open .bita-panel {
        transform: translateX(-100%);
        opacity: 0;
        pointer-events: none;
    }
    .bita-layout.bita-editor-open .bita-editor {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    /* Back button shown only on mobile */
    .bita-back-btn { display: inline-flex !important; }
    .bita-mobile-topbar { display: flex; }

    /* Hide the header toggle button (not needed anymore) */
    .bita-panel-toggle { display: none; }

    /* Hide save FAB while history list is shown */
    .fab-save { display: none; }
    body.bita-editor-open .fab-save { display: inline-flex; }

    /* Sleep top row stacks on narrow */
    .sleep-top-row { grid-template-columns: 1fr; }
    .sleep-times-block { align-items: flex-start; }
    .sleep-block { min-width: 0; overflow: hidden; }
    .sleep-time-pair { gap: 8px; }
    .sleep-time-field { min-width: 0; }
    .sleep-time-input { min-width: 0; width: 100%; box-sizing: border-box; }
    .sleep-q-btn { min-width: 60px; padding: 8px 8px; }
    .sleep-q-icon svg { width: 22px; height: 22px; }

    /* ── Compact resident header: save vertical space for the timeline ── */
    .bita-res-hdr-top { padding: 6px 10px; gap: 8px; }
    .bita-res-hdr-avatar { width: 28px; height: 28px; font-size: 11px; }
    .bita-res-hdr-name { font-size: 13px; }
    .bita-res-hdr-date { font-size: 10px; }
    /* Add-note button: pill at the right of the header */
    #tlAddNoteBtn { padding: 6px 10px; font-size: 11px; gap: 4px; }
    #tlAddNoteBtn svg { width: 10px; height: 10px; }

    /* ── View tabs: large thumb-friendly pills ── */
    .bita-view-tabs {
        padding: 4px 8px;
        gap: 4px;
        background: #f1f5f9;
        border-bottom: none;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .bita-view-tabs::-webkit-scrollbar { display: none; }
    .bv-tab {
        flex: 1;
        justify-content: center;
        padding: 10px 8px;
        font-size: .76rem;
        gap: 5px;
        border-radius: 8px;
        border: none;
        margin-bottom: 0;
        min-height: 40px;
    }
    .bv-tab svg { width: 13px; height: 13px; }
    .bv-tab.bv-tab-active {
        background: #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,.1);
        border: none;
    }
    #bvTabVitals.bv-tab-active { box-shadow: 0 1px 4px rgba(239,68,68,.15); }
    #bvTabLista.bv-tab-active { box-shadow: 0 1px 4px rgba(22,163,74,.15); }

    /* ── Panel entries: bigger touch targets ── */
    .bita-entry {
        margin: 0 6px 6px;
        padding: 12px 10px;
        border-radius: 10px;
        gap: 6px;
        min-height: 48px;
    }
    .bita-entry-res-avatar { width: 30px; height: 30px; font-size: 12px; }
    .bita-entry-res-name { font-size: 13.5px; }
    .bita-entry-date { font-size: 12px; }
    .bita-shift-dot { width: 10px; height: 10px; }
    .bita-shift-dots { gap: 5px; }

    /* ── Panel controls: tighter ── */
    .bita-panel-head { padding: 10px 10px 8px; }
    .bita-panel-controls { padding: 8px 10px; gap: 6px; }
    .bita-panel-search-wrap { padding: 6px 10px; }
    .bita-search-input { padding: 8px 10px 8px 30px; font-size: 13px; }
    .bita-panel-res-sel { padding: 8px 10px; font-size: 13px; height: 38px; }
    .bita-panel-stats { padding: 6px 8px; }

    /* ── Shift status bar: compact horizontal strip ── */
    .bita-res-hdr .tl-shift-statusbar { border-top: 1px solid #e2e8f0; }
    .tl-sst-item { padding: 4px 6px; gap: 3px 4px; }
    .tl-sst-abbr { font-size: 10px; }
    .tl-sst-badge { font-size: 9px; padding: 1px 5px; }

    /* ── Obs chips: thumb-friendly ── */
    .obs-chips-row { gap: 8px; padding-top: 8px; }
    .obs-chip {
        min-height: 38px; padding: 7px 14px; font-size: 12px;
        border-radius: 20px;
    }
    .obs-chips-label { font-size: 10px; }

    /* ── Obs input row: more space on mobile ── */
    .obs-input-row { padding: 10px; }
    .obs-textarea { font-size: 14px; padding: 10px; min-height: 60px; }
    .obs-btn-submit {
        min-height: 44px; padding: 10px 18px; font-size: 13px;
        border-radius: 8px;
    }
    .obs-btn-cancel { width: 32px; height: 32px; }

    /* ── Turno card footer: bigger buttons ── */
    .turno2-header { padding: 10px 12px; gap: 8px; }
    .turno-badge { width: 28px; height: 28px; font-size: 9px; border-radius: 6px; }
    .turno2-name { font-size: 12px; }
    .turno2-hours { font-size: 10px; }
    .turno-nurse-select { font-size: 11px; padding: 4px 8px; max-width: 140px; }
    .turno-obs-section { padding: 10px 12px; }
    .turno-obs-entry { padding: 7px 10px; }
    .obs-entry-badge-col { width: 90px; }
    .turno2-footer { padding: 8px 12px; }
    .turno-sign-btn {
        min-height: 42px; padding: 8px 16px; font-size: 13px;
        border-radius: 8px;
    }

    /* ── RX dose action buttons: bigger touch targets ── */
    .rx-adm-btn {
        min-height: 42px; padding: 8px 12px; font-size: 13px;
        border-radius: 8px;
    }
    .rx-skip-btn {
        min-height: 38px; padding: 7px 10px; font-size: 12px;
        border-radius: 8px;
    }
    .rx-dose-actions { gap: 8px; }

    /* ── Editor content: use available width ── */
    .bita-editor .tab-pane.active { padding: 0 10px 80px; }
    .turno2-card { margin: 6px 0; border-radius: 10px; }
}

/* ── Medium screens 901–1340px: narrow panel to maximise timeline width ── */
@media (min-width: 901px) and (max-width: 1340px) {
    .bita-panel {
        width: 210px;
        min-width: 210px;
    }
}

/* =====================================================
   RX PRESCRIPTION PANEL — INTERACTIVE DOSE TRACKING
   ===================================================== */
.rx-panel { margin-bottom: 12px; }
.rx-panel-box {
    border: 1px solid #c7d2fe; border-left: 3px solid #6366f1;
    border-radius: var(--radius); background: #fafbff; overflow: hidden;
}
.rx-panel-hd {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 14px; width: 100%; background: none;
    border: none; cursor: pointer; font-family: inherit; text-align: left;
    transition: background .12s;
}
.rx-panel-hd:hover { background: #eef2ff; }
.rx-panel-hd[aria-expanded="true"] { background: #eef2ff; }
.rx-panel-hd[aria-expanded="true"] .rx-chevron { transform: rotate(180deg); }
.rx-panel-icon {
    width: 26px; height: 26px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #e0e7ff; border-radius: 6px; color: #4f46e5;
}
.rx-panel-title { font-size: 12px; font-weight: 700; color: #1e293b; white-space: nowrap; }
.rx-panel-meta  { font-size: 11px; color: var(--text-muted); }
.rx-shift-pill {
    margin-left: auto; flex-shrink: 0;
    background: #e0e7ff; color: #4338ca;
    font-size: 10px; font-weight: 700;
    padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.rx-pill-done    { background: #dcfce7; color: #15803d; }
.rx-pill-partial { background: #fef3c7; color: #92400e; }
.rx-chevron { flex-shrink: 0; color: #94a3b8; transition: transform .2s; margin-left: 6px; }

/* Panel body — stacked cards */
.rx-panel-body { padding: 0 10px 10px; display: flex; flex-direction: column; gap: 7px; }
.rx-empty {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-muted); padding: 10px 4px;
}

/* Individual rx card */
.rx-card {
    background: #fff; border: 1px solid #e0e7ff;
    border-radius: var(--radius-sm); overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.rx-card-done    { border-color: #86efac; background: #f0fdf4; }
.rx-card-partial { border-color: #fde68a; background: #fffdf7; }
.rx-card-skip    { border-color: #fca5a5; background: #fff8f8; }

/* Card header row */
.rx-card-hd {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 8px; padding: 8px 12px; border-bottom: 1px solid #f1f5f9;
}
.rx-card-hd-info { flex: 1; min-width: 0; }
.rx-card-res     { display:inline-block; font-size:10px; font-weight:700; color:#178391; background:#e8f6fb; border:1px solid #bfdbfe; border-radius:4px; padding:1px 6px; margin-bottom:4px; }
.rx-card-name    { font-size: 13px; font-weight: 700; color: #1e293b; }
.rx-card-meta    { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.rx-card-dr      { color: #6366f1; font-weight: 600; }
.rx-card-ind     { font-size: 10px; color: #94a3b8; font-style: italic; margin-top: 2px; }
.rx-card-summary {
    flex-shrink: 0; font-size: 10px; font-weight: 700;
    padding: 3px 8px; border-radius: 999px;
    background: #f1f5f9; color: #94a3b8; white-space: nowrap; margin-top: 2px;
}
.rx-sum-done    { background: #dcfce7; color: #15803d; }
.rx-sum-partial { background: #fef3c7; color: #92400e; }
.rx-sum-skip    { background: #fee2e2; color: #dc2626; }

/* Dose slots wrapper */
.rx-dose-slots { display: flex; flex-direction: column; }

/* Single dose slot */
.rx-dose-slot {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 7px 12px; border-top: 1px solid #f1f5f9;
    transition: background .15s;
}
.rx-dose-slot + .rx-dose-slot { border-top: 1px solid #f1f5f9; }
.rx-dose-slot[data-state="adm"]     { background: #f0fdf4; }
.rx-dose-slot[data-state="skipped"] { background: #fff8f8; }

/* Scheduled time pill */
.rx-slot-time {
    display: flex; flex-direction: column; align-items: center;
    min-width: 44px; flex-shrink: 0;
}
.rx-slot-t   { font-size: 13px; font-weight: 700; color: #1e293b; line-height: 1.1; }
.rx-slot-lbl { font-size: 9px;  font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: .3px; }

/* ── State-driven visibility ── */
/* pending: show actions, hide success/skip rows */
.rx-dose-slot .rx-adm-row  { display: none; }
.rx-dose-slot .rx-skip-row { display: none; }
/* administered */
.rx-dose-slot[data-state="adm"] .rx-dose-actions { display: none; }
.rx-dose-slot[data-state="adm"] .rx-adm-row      { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; }
/* skipped */
.rx-dose-slot[data-state="skipped"] .rx-dose-actions { display: none; }
.rx-dose-slot[data-state="skipped"] .rx-skip-row     { display: flex; align-items: center; gap: 6px; flex: 1; flex-wrap: wrap; }

/* Pending action buttons */
.rx-dose-actions { display: flex; align-items: center; gap: 6px; flex: 1; }
.rx-adm-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: #fff; color: #374151;
    border: 1.5px solid #d1d5db; border-radius: var(--radius-sm);
    padding: 6px 14px; font-size: 12px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: background .12s, border-color .12s, color .12s, transform .1s;
    flex: 1;
}
.rx-adm-btn:hover  { background: #f0fdf4; border-color: #4ade80; color: #15803d; }
.rx-adm-btn:active { transform: scale(.97); }
.rx-skip-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; color: #94a3b8;
    border: 1.5px solid #e2e8f0; border-radius: var(--radius-sm);
    padding: 6px 10px; font-size: 11px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    transition: background .12s, border-color .12s, color .12s;
    white-space: nowrap;
}
.rx-skip-btn:hover { background: #fff1f2; border-color: #fca5a5; color: #dc2626; }

/* Administered row */
.rx-adm-check {
    width: 22px; height: 22px; flex-shrink: 0;
    background: #22c55e; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: #fff;
}
.rx-adm-lbl { font-size: 12px; font-weight: 700; color: #15803d; }
.rx-actual-time-wrap {
    display: inline-flex; align-items: center; gap: 4px;
    background: #dcfce7; border: 1px solid #86efac;
    border-radius: var(--radius-sm); padding: 3px 8px;
    font-size: 11px; color: #15803d; cursor: pointer;
}
.rx-actual-time {
    border: none; background: transparent;
    font-size: 12px; font-weight: 700; color: #15803d;
    font-family: inherit; width: 70px; cursor: pointer; outline: none;
}

/* Skipped row */
.rx-skip-x {
    width: 22px; height: 22px; flex-shrink: 0;
    background: #ef4444; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: #fff;
}
.rx-skip-reasons { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.rx-reason-chip {
    display: inline-flex; align-items: center;
    background: #f1f5f9; border: 1.5px solid #e2e8f0;
    border-radius: 999px; padding: 3px 10px;
    font-size: 11px; font-weight: 600; color: #475569;
    cursor: pointer; font-family: inherit;
    transition: background .1s, border-color .1s, color .1s;
}
.rx-reason-chip:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }
.rx-reason-chip.rx-reason-on { background: #fee2e2; border-color: #ef4444; color: #dc2626; }

/* Shared undo button */
.rx-undo-btn {
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
    background: none; border: 1px solid #e2e8f0;
    border-radius: var(--radius-sm); padding: 4px 9px;
    font-size: 10px; font-weight: 600; color: #94a3b8;
    cursor: pointer; font-family: inherit;
    transition: background .1s, color .1s;
}
.rx-undo-btn:hover { background: #f8fafc; color: #475569; }

/* Extra (non-prescribed) add button */
.add-med-btn-extra {
    border-style: dashed; border-color: #cbd5e1;
    color: var(--text-muted); background: transparent;
}
.add-med-btn-extra:hover { background: #f8fafc; border-color: #94a3b8; }

/* =====================================================
   SUPER ADMIN MODULE
   ===================================================== */

/* stat icon purple (missing from base) */
.stat-icon.purple { background: #ede9fe; color: #6d28d9; }

/* Sidebar SA variant */
.sa-brand-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
}
.sa-platform-badge {
    display: inline-block;
    font-size: 9px; font-weight: 700;
    background: rgba(245,158,11,.15);
    color: #d97706;
    border: 1px solid rgba(245,158,11,.3);
    border-radius: 4px;
    padding: 1px 6px;
    letter-spacing: .4px;
    margin-top: 2px;
}
.sa-user-avatar {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
}
.sa-role-label { color: #f59e0b !important; }

/* Back-to-tenant link */
.sa-tenant-link {
    margin-bottom: 8px; padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.sa-tenant-link a {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; color: var(--text-muted);
    text-decoration: none; transition: color .15s;
}
.sa-tenant-link a:hover { color: var(--text); }

/* SA institution selector */
.sa-inst-wrap {
    margin-bottom: 8px;
    padding: 8px 10px;
    background: #0f274400;
    border: 0px solid rgba(99,179,237,.25);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: opacity var(--transition);
}
.sa-inst-label {
    display: flex; align-items: center; gap: 5px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .6px;
    color: #63b3ed; text-transform: uppercase;
    margin-bottom: 6px;
    white-space: nowrap;
}
.sa-inst-text { transition: opacity var(--transition); }
.sa-inst-select {
    width: 100%;
    background: #0a1929;
    border: 1px solid #1e3a5f;
    border-radius: var(--radius-sm);
    color: #e2e8f0;
    font-size: 12px;
    padding: 5px 8px;
    cursor: pointer;
    appearance: auto;
}
.sa-inst-select:focus { outline: none; border-color: #63b3ed; }
.sidebar.collapsed .sa-inst-wrap { padding: 6px; }
.sidebar.collapsed .sa-inst-text { opacity: 0; width: 0; overflow: hidden; }
.sidebar.collapsed .sa-inst-select { opacity: 0; pointer-events: none; height: 0; margin: 0; padding: 0; border: none; }

/* SA mode banner in regular sidebar */
.sa-mode-banner {
    margin: 4px 0 8px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 11.5px; color: #92400e;
    display: flex; flex-direction: column; gap: 5px;
}
.sa-mode-banner strong { font-weight: 700; }
.sa-mode-banner a {
    color: #b45309; font-weight: 600;
    text-decoration: none; font-size: 12px;
    display: inline-flex; align-items: center; gap: 4px;
}
.sa-mode-banner a:hover { text-decoration: underline; }

/* Plan badges */
.sa-plan-badge {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 4px;
    font-size: 11px; font-weight: 600;
    letter-spacing: .2px; white-space: nowrap;
}
.sa-plan-badge--basic      { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.sa-plan-badge--pro        { background: #e8f6fb; color: #033f3f; border: 1px solid #bfdbfe; }
.sa-plan-badge--enterprise { background: #faf5ff; color: #6d28d9; border: 1px solid #e9d5ff; }
.sa-plan-badge--trial      { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }

/* Plan cards */
.sa-plan-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px; margin-bottom: 28px;
}
.sa-plan-card {
    background: var(--white);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 22px; position: relative;
}
.sa-plan-card--pro        { border-color: #178391; }
.sa-plan-card--enterprise { border-color: #8b5cf6; }
.sa-plan-highlight {
    position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
    background: #178391; color: #fff;
    font-size: 10px; font-weight: 700;
    padding: 3px 14px; border-radius: 0 0 6px 6px;
    letter-spacing: .5px; white-space: nowrap;
}
.sa-plan-card-header {
    display: flex; align-items: flex-start;
    justify-content: space-between; margin-bottom: 12px;
}
.sa-plan-card-name  { font-size: 17px; font-weight: 700; color: var(--text); }
.sa-plan-card-desc  { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.sa-plan-price {
    font-size: 28px; font-weight: 800; color: var(--text); line-height: 1; margin-bottom: 4px;
}
.sa-plan-price span { font-size: 13px; font-weight: 400; color: var(--text-muted); }
.sa-plan-divider { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
.sa-plan-features {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 6px;
    font-size: 12.5px;
}
.sa-plan-features li          { display: flex; align-items: center; gap: 7px; color: var(--text-muted); }
.sa-plan-features li.included { color: var(--text); }
.sa-plan-features li.included svg { color: #22c55e; }
.sa-plan-features li.excluded { text-decoration: line-through; opacity: .5; }
.sa-plan-features li.excluded svg { color: #94a3b8; }
.sa-plan-tenant-count {
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 12.5px; color: var(--text-muted);
    display: flex; align-items: center; justify-content: space-between;
}
.sa-plan-tenant-count strong { color: var(--text); font-weight: 700; }

/* Activity feed */
.sa-activity-feed {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.sa-activity-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
}
.sa-activity-item:last-child { border-bottom: none; }
.sa-activity-dot {
    width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0; margin-top: 5px;
}
.sa-activity-dot--create { background: #22c55e; }
.sa-activity-dot--info   { background: #178391; }
.sa-activity-dot--alert  { background: #f59e0b; }
.sa-activity-dot--warn   { background: #f97316; }
.sa-activity-dot--error  { background: #ef4444; }
.sa-activity-dot--trial  { background: #8b5cf6; }

/* =====================================================
   DARK THEME
   ===================================================== */
[data-theme="dark"] {
    --primary:        #178391;
    --primary-dark:   #033f3f;
    --primary-light:  #178391;
    --accent:         #58a6ff;
    --danger:         #f85149;
    --success:        #3fb950;
    --warning-bg:     #272115;
    --warning-border: #b45309;

    --sidebar-bg:     #12161c;
    --content-bg:     #0e1217;
    --white:          #171c24;
    --bg:             #1e2430;

    --border:         #2a3140;
    --border-dark:    #3d4556;

    --text:           #e2e8f0;
    --text-muted:     #8b96a4;
    --text-label:     #b0bac8;

    --shadow-sm:      0 1px 3px rgba(0,0,0,.45);
    --shadow-md:      0 4px 12px rgba(0,0,0,.5);
    color-scheme: dark;
}

/* ── Global surfaces ── */
[data-theme="dark"] body { background: var(--content-bg); color: var(--text); }
[data-theme="dark"] .main-content { background: var(--content-bg); }
[data-theme="dark"] .page-header  { background: var(--white); border-bottom-color: var(--border); }
[data-theme="dark"] .ph-icon      { background: var(--bg); color: var(--text-muted); }

/* ── Sidebar ── */
[data-theme="dark"] .sidebar          { background: var(--sidebar-bg); box-shadow: 2px 0 8px rgba(0,0,0,.4); }
[data-theme="dark"] .sidebar-brand,
[data-theme="dark"] .sidebar-user,
[data-theme="dark"] .sidebar-footer   { border-color: var(--border); }
[data-theme="dark"] .sidebar-toggle   { background: var(--bg); border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .sidebar-toggle:hover { background: #252c38; color: var(--text); }
[data-theme="dark"] .sidebar-overlay  { background: rgba(0,0,0,.6); }
[data-theme="dark"] .nav-label,
[data-theme="dark"] .brand-name,
[data-theme="dark"] .user-email,
[data-theme="dark"] .user-role,
[data-theme="dark"] .user-location    { color: var(--text-muted); }
[data-theme="dark"] .sidebar-nav li a { color: var(--text-muted); }
[data-theme="dark"] .sidebar-nav li a:hover  { background: var(--bg); color: var(--text); }
[data-theme="dark"] .sidebar-nav li.active > a { background: rgba(23,131,145,.15); color: var(--accent); }
[data-theme="dark"] .logout-link      { color: var(--text-muted); }
[data-theme="dark"] .logout-link:hover { color: var(--danger); background: rgba(248,81,73,.08); }

/* ── Cards & containers ── */
[data-theme="dark"] .table-card,
[data-theme="dark"] .config-section,
[data-theme="dark"] .dashboard-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .res-stat-card,
[data-theme="dark"] .hc-entry,
[data-theme="dark"] .hc-tab-nav,
[data-theme="dark"] .per-mobile-staff-row,
[data-theme="dark"] .res-card,
[data-theme="dark"] .bita-panel,
[data-theme="dark"] .bita-editor,
[data-theme="dark"] .shift-wrap,
[data-theme="dark"] .turno-card2,
[data-theme="dark"] .obs-input-row    { background: var(--white); border-color: var(--border); }

[data-theme="dark"] .bita-panel-stats     { background: #141921; }
[data-theme="dark"] .turno2-footer        { background: #141921; border-top-color: var(--border); }
[data-theme="dark"] .shift-wrap-header    { background: #141921; border-bottom-color: var(--border); }
[data-theme="dark"] .bita-entry           { background: var(--white); border-color: var(--border); box-shadow: none; }
[data-theme="dark"] .bita-entry:hover     { background: #141921; }
[data-theme="dark"] .bita-entry-active    { background: rgba(23,131,145,.12) !important; border-left-color: var(--accent) !important; }
[data-theme="dark"] .bita-readonly-banner { background: #272115; border-color: #b45309; color: #fbbf24; }

/* ── Data tables ── */
[data-theme="dark"] .data-table th          { background: #141921; color: var(--text-muted); border-color: var(--border); }
[data-theme="dark"] .data-table td          { border-color: var(--border); color: var(--text); }
[data-theme="dark"] .data-table tbody tr:hover td { background: #141921 !important; }

/* ── Inputs & selects ── */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-theme="dark"] select,
[data-theme="dark"] textarea              { background: var(--bg); border-color: var(--border); color: var(--text); }
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--text-muted); }
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus        { border-color: var(--accent); outline: none; }
[data-theme="dark"] .exp-search,
[data-theme="dark"] .bita-search-input,
[data-theme="dark"] .ph-select,
[data-theme="dark"] .res-filter-sel       { background: var(--bg); border-color: var(--border); color: var(--text); }

/* ── Status badges ── */
[data-theme="dark"] .badge-active   { background: #0d2818; color: #3fb950; border-color: #1a3d26; }
[data-theme="dark"] .badge-inactive { background: #141921; color: #8b96a4; border-color: var(--border); }
[data-theme="dark"] .badge-watch    { background: #2c1e0a; color: #e3b341; border-color: #4a3010; }

/* ── Tab nav ── */
[data-theme="dark"] .hc-tab-nav                { background: var(--white); border-color: var(--border); }
[data-theme="dark"] .hc-tab-nav .tab-btn       { color: var(--text-muted); }
[data-theme="dark"] .hc-tab-nav .tab-btn:hover { background: var(--bg); color: var(--text); }
[data-theme="dark"] .hc-tab-nav .tab-btn.active { background: var(--primary); color: #fff; }
[data-theme="dark"] .tab-btn:not(.active) .hc-tab-n { background: var(--bg); color: var(--text-muted); }

/* ── Mobile cards ── */
[data-theme="dark"] .per-mcard-actions       { background: #141921; border-top-color: var(--border); }
[data-theme="dark"] .per-mcard-btn           { border-color: var(--border); color: var(--text-muted); background: var(--bg); }
[data-theme="dark"] .per-mcard-btn:hover     { background: #252c38; color: var(--text); }

/* ── Action buttons ── */
[data-theme="dark"] .per-action-btn          { background: var(--bg); border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .per-action-btn:hover    { background: #252c38; color: var(--text); }
[data-theme="dark"] .action-btn              { background: var(--bg); border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .action-btn:hover        { background: #252c38; }

/* ── Dropdowns ── */
[data-theme="dark"] .res-dropdown           { background: var(--bg); border-color: var(--border); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
[data-theme="dark"] .res-dd-item            { color: var(--text); }
[data-theme="dark"] .res-dd-item:hover      { background: #252c38; }
[data-theme="dark"] .res-dd-separator       { background: var(--border); }

/* ── Modals ── */
[data-theme="dark"] .modal-overlay          { background: rgba(0,0,0,.75); }
[data-theme="dark"] .modal-card             { background: var(--white); border-color: var(--border); }
[data-theme="dark"] .modal-header           { background: #141921; border-bottom-color: var(--border); }
[data-theme="dark"] .modal-close            { color: var(--text-muted); }
[data-theme="dark"] .modal-close:hover      { background: var(--border); color: var(--text); }
[data-theme="dark"] .form-group label       { color: var(--text-label); }

/* ── Vitals table ── */
[data-theme="dark"] .vs-th,
[data-theme="dark"] .vs-th-hora             { background: #141921 !important; }
[data-theme="dark"] .vs-table tbody tr:hover td { background: #141921 !important; }
[data-theme="dark"] .vs-th-icon             { background: #252c38 !important; color: var(--text-muted) !important; }

/* ── Observation entries & chips ── */
[data-theme="dark"] .turno-obs-entry        { background: #141921; border-color: var(--border); }
[data-theme="dark"] .obs-chip               { background: var(--bg); border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .obs-chip:hover         { background: #252c38; }

/* ── Config ── */
[data-theme="dark"] .config-section         { background: var(--white); }
[data-theme="dark"] .config-block           { background: #141921; border-color: var(--border); }

/* ── Misc surfaces with hardcoded #f8fafc / #f1f5f9 ── */
[data-theme="dark"] .sidebar-toggle:hover,
[data-theme="dark"] .date-nav-btn:hover,
[data-theme="dark"] .bita-nav-arrow:hover   { background: #252c38; }
[data-theme="dark"] .per-toolbar            { background: transparent; }

/* ── Scrollbars ── */
[data-theme="dark"] ::-webkit-scrollbar-track { background: #12161c; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2a3140; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3d4556; }

/* ── Toast ── */
[data-theme="dark"] .bita-toast            { background: var(--text); color: var(--content-bg); }

/* ── Floating hamburger ── */
[data-theme="dark"] .ph-hamburger       { background: #58a6ff; box-shadow: 0 4px 18px rgba(88,166,255,.35); }
[data-theme="dark"] .ph-hamburger:hover { background: #79b8ff; }

/* ── Invitation badges ── */
[data-theme="dark"] .inv-badge-pending  { background: #2c1e0a; color: #fbbf24; }
[data-theme="dark"] .inv-badge-accepted { background: #0d2818; color: #3fb950; }
[data-theme="dark"] .inv-badge-expired  { background: #2d1b1b; color: #f85149; }

/* ── Invitation icon states ── */
[data-theme="dark"] .per-m-inv-icon-pending  { background: rgba(23,131,145,.15); color: var(--accent); }
[data-theme="dark"] .per-m-inv-icon-accepted { background: rgba(63,185,80,.12); color: #3fb950; }
[data-theme="dark"] .per-m-inv-icon-expired  { background: #252c38; color: #8b96a4; }

/* ── Mobile inv card rows ── */
[data-theme="dark"] .per-mobile-inv-row        { background: var(--white); border-color: var(--border); }
[data-theme="dark"] .per-mobile-inv-row:hover  { background: #141921; border-color: var(--accent); box-shadow: none; }

/* ── Countdown chip ── */
[data-theme="dark"] .per-m-countdown                    { background: #252c38; color: var(--text-muted); }
[data-theme="dark"] .per-m-countdown.countdown-urgent   { background: #2d1b1b; color: #f85149; }
[data-theme="dark"] .per-m-countdown.countdown-warn     { background: #2c1e0a; color: #fbbf24; }
[data-theme="dark"] .per-m-countdown.countdown-ok       { background: #252c38; color: #8b96a4; }

/* ── Inv action buttons ── */
[data-theme="dark"] .per-mcard-btn-resend        { color: var(--accent); }
[data-theme="dark"] .per-mcard-btn-resend:hover  { background: rgba(23,131,145,.12); }
[data-theme="dark"] .per-mcard-btn-revoke:hover  { background: rgba(248,81,73,.10); }

/* ══════════════════════════════════════════════════════════════
   DARK MODE — Bitácora components
   ══════════════════════════════════════════════════════════════ */

/* ── Resident header ── */
[data-theme="dark"] .bita-res-hdr {
    background: var(--white);
    border-bottom-color: var(--border);
}
[data-theme="dark"] .bita-no-selection .bita-res-hdr { background: var(--white); }

/* ── View tabs bar ── */
[data-theme="dark"] .bita-view-tabs {
    background: var(--bg);
    border-bottom-color: var(--border);
}
[data-theme="dark"] .bv-tab           { color: var(--text-muted); }
[data-theme="dark"] .bv-tab:hover     { color: var(--text); background: rgba(255,255,255,.04); }
[data-theme="dark"] .bv-tab.bv-tab-active { background: var(--white); border-color: var(--border); }

/* ── Panel controls & search ── */
[data-theme="dark"] .bita-panel-controls  { background: var(--bg); border-bottom-color: var(--border); }
[data-theme="dark"] .bita-panel-search-wrap { border-bottom-color: var(--border); }
[data-theme="dark"] .bita-panel-head       { background: var(--white); border-bottom-color: var(--border); }

/* ── Shift status bar ── */
[data-theme="dark"] .tl-shift-statusbar                  { background: var(--bg); border-bottom-color: var(--border); }
[data-theme="dark"] .tl-sst-item                         { border-right-color: var(--border); }
[data-theme="dark"] .tl-sst-item.tl-sst-is-signed        { background: rgba(63,185,80,.08); }
[data-theme="dark"] .tl-sst-item.tl-sst-is-active        { background: rgba(227,179,65,.08); }
[data-theme="dark"] .tl-sst-name                         { color: var(--text-muted); }
[data-theme="dark"] .tl-sst-firmada  { background: rgba(63,185,80,.12);  color: #3fb950; border-color: rgba(63,185,80,.25); }
[data-theme="dark"] .tl-sst-borrador { background: var(--bg);             color: var(--text-muted); border-color: var(--border); }
[data-theme="dark"] .tl-sst-none     { color: var(--text-muted); }
[data-theme="dark"] .tl-sst-sign     { background: var(--bg); border-color: rgba(110,231,183,.3); color: #3fb950; }
[data-theme="dark"] .tl-sst-sign:hover { background: rgba(63,185,80,.12); border-color: #3fb950; }
[data-theme="dark"] .tl-sst-unsign   { background: var(--bg); border-color: rgba(248,81,73,.3); color: #f85149; }
[data-theme="dark"] .tl-sst-unsign:hover { background: rgba(248,81,73,.1); border-color: #f85149; }
[data-theme="dark"] .tl-sst-traspaso { background: var(--bg); border-color: rgba(88,166,255,.3); color: var(--accent); }
[data-theme="dark"] .tl-sst-traspaso:hover { background: rgba(88,166,255,.1); border-color: var(--accent); }

/* ── Swimlane grid ── */
[data-theme="dark"] .sl-grid           { background: var(--content-bg); border-top-color: var(--border); }
[data-theme="dark"] .sl-header-row     { background: var(--white); border-bottom-color: var(--border); box-shadow: 0 2px 6px rgba(0,0,0,.4); }
[data-theme="dark"] .sl-gutter-hdr     { background: var(--bg); border-right-color: var(--border); }
[data-theme="dark"] .sl-time-ruler     { background: var(--bg); border-right-color: var(--border); }
[data-theme="dark"] .sl-hour-tick      { color: var(--text-muted); }
[data-theme="dark"] .sl-hour-tick.sl-tick-major { color: var(--text-label); }
[data-theme="dark"] .sl-col-body       { border-right-color: var(--border); }
[data-theme="dark"] .sl-hour-line      { background: var(--border); }
[data-theme="dark"] .sl-hour-line.sl-line-major { background: var(--border-dark); }
[data-theme="dark"] .sl-half-line      { border-top-color: var(--bg); }

/* ── Column headers: flat dark with subtle bottom accent ── */
[data-theme="dark"] .sl-col-hdr             { background: var(--bg); border-right-color: var(--border); border-bottom-color: var(--border-dark); color: var(--text-muted); }
[data-theme="dark"] .sl-col-hdr.sl-hdr-meds        { border-bottom-color: #7c3aed; }
[data-theme="dark"] .sl-col-hdr.sl-hdr-alert       { border-bottom-color: #dc2626; }
[data-theme="dark"] .sl-col-hdr.sl-hdr-pain        { border-bottom-color: #ea580c; }
[data-theme="dark"] .sl-col-hdr.sl-hdr-behavior    { border-bottom-color: #8b5cf6; }
[data-theme="dark"] .sl-col-hdr.sl-hdr-sleep       { border-bottom-color: #4f46e5; }
[data-theme="dark"] .sl-col-hdr.sl-hdr-food        { border-bottom-color: #d97706; }
[data-theme="dark"] .sl-col-hdr.sl-hdr-hygiene     { border-bottom-color: #0d9488; }
[data-theme="dark"] .sl-col-hdr.sl-hdr-mobility    { border-bottom-color: #16a34a; }
[data-theme="dark"] .sl-col-hdr.sl-hdr-elimination { border-bottom-color: #ca8a04; }
[data-theme="dark"] .sl-col-hdr.sl-hdr-general     { border-bottom-color: #64748b; }

/* ── Observation cards ── */
[data-theme="dark"] .sl-card               { background: var(--bg); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.35); }
[data-theme="dark"] .sl-card:hover         { box-shadow: 0 3px 10px rgba(0,0,0,.5); }
[data-theme="dark"] .sl-card-timed         { background: rgba(79,70,229,.18); border-left-color: #818cf8; }
[data-theme="dark"] .sl-col-body[data-col="alert"]    .sl-card { background: rgba(220,38,38,.15);   border-left-color: #f87171; }
[data-theme="dark"] .sl-col-body[data-col="pain"]     .sl-card { background: rgba(234,88,12,.15);   border-left-color: #fb923c; }
[data-theme="dark"] .sl-col-body[data-col="behavior"]    .sl-card { background: rgba(139,92,246,.15);  border-left-color: #a78bfa; }
[data-theme="dark"] .sl-col-body[data-col="sleep"]       .sl-card { background: rgba(79,70,229,.15);   border-left-color: #818cf8; }
[data-theme="dark"] .sl-col-body[data-col="elimination"] .sl-card { background: rgba(202,138,4,.15);   border-left-color: #fbbf24; }
[data-theme="dark"] .sl-col-body[data-col="food"]     .sl-card { background: rgba(217,119,6,.15);   border-left-color: #fbbf24; }
[data-theme="dark"] .sl-col-body[data-col="hygiene"]  .sl-card { background: rgba(13,148,136,.15);  border-left-color: #2dd4bf; }
[data-theme="dark"] .sl-col-body[data-col="mobility"] .sl-card { background: rgba(22,163,74,.15);   border-left-color: #4ade80; }
[data-theme="dark"] .sl-col-body[data-col="general"]  .sl-card { background: rgba(100,116,139,.12); border-left-color: #94a3b8; }
[data-theme="dark"] .sl-col-body[data-col="meds"] .sl-card.sl-card-adhoc-med { background: rgba(217,119,6,.15); border-left-color: #fbbf24; }

/* ── Shift ruler markers ── */
[data-theme="dark"] .sl-rsm-tm { color: #fbbf24; background: rgba(100,70,0,.75); }
[data-theme="dark"] .sl-rsm-tv { color: #c4b5fd; background: rgba(88,46,180,.45); }
[data-theme="dark"] .sl-rsm-tn { color: #7dd3fc; background: rgba(7,89,133,.45); }

/* ── Signos Vitales section ── */
[data-theme="dark"] .vs-section       { background: var(--white); border-top-color: var(--border); }
[data-theme="dark"] .vs-section-hd    { background: var(--bg); border-bottom-color: var(--border); }
[data-theme="dark"] .vs-section-title { color: var(--text); }
[data-theme="dark"] .vs-section-sub   { color: var(--text-muted); }

/* ── Lista view ── */
[data-theme="dark"] .lv-group      { background: var(--white); border-color: var(--border); }
[data-theme="dark"] .lv-group-hd   { background: var(--bg); border-bottom-color: var(--border); }
[data-theme="dark"] .lv-group-hd:hover { background: #252c38; }
[data-theme="dark"] .lv-group-label { color: var(--text); }
[data-theme="dark"] .lv-row        { border-bottom-color: var(--bg); }
[data-theme="dark"] .lv-row.lv-row-editable:hover { background: #141921; }
[data-theme="dark"] .lv-text       { color: var(--text); }
[data-theme="dark"] .lv-res        { color: var(--text); }
[data-theme="dark"] .lv-rf-input   { background: var(--bg); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .lv-rf-chip    { background: var(--bg); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .lv-rf-chip:hover { background: #252c38; }

/* ══════════════════════════════════════════════════════════════
   DARK MODE — Login / Auth
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] body.login-page      { background: var(--content-bg); }
[data-theme="dark"] .login-card          { background: var(--white); box-shadow: 0 2px 20px rgba(0,0,0,.35); }
[data-theme="dark"] .login-heart-icon    { background: rgba(88,166,255,.08); }
[data-theme="dark"] .login-heart-icon img { filter: invert(65%) sepia(40%) saturate(500%) hue-rotate(142deg) brightness(110%); }
[data-theme="dark"] .login-alert--error  { background: rgba(248,81,73,.1); color: #f85149; border-color: rgba(248,81,73,.25); }
[data-theme="dark"] .login-alert--info   { background: rgba(63,185,80,.1); color: #3fb950; border-color: rgba(63,185,80,.25); }
[data-theme="dark"] .login-input-wrap    { background: var(--bg); border-color: var(--border); }
[data-theme="dark"] .login-input-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(88,166,255,.12); }
[data-theme="dark"] .login-input-icon    { color: var(--text-muted); }
[data-theme="dark"] .login-input         { color: var(--text); }
[data-theme="dark"] .login-input::placeholder { color: var(--text-muted); }
[data-theme="dark"] .login-eye-btn       { color: var(--text-muted); }
[data-theme="dark"] .login-forgot a      { color: var(--accent); }
[data-theme="dark"] .login-btn           { background: var(--primary); }
[data-theme="dark"] .login-btn:hover     { background: var(--primary-dark); box-shadow: 0 4px 14px rgba(23,131,145,.35); }
[data-theme="dark"] .login-links a       { color: var(--accent); }

/* ══════════════════════════════════════════════════════════════
   DARK MODE — Dashboard badges & icons
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .stat-icon.blue      { background: rgba(56,139,253,.12); color: var(--accent); }
[data-theme="dark"] .stat-icon.green     { background: rgba(63,185,80,.12); color: #3fb950; }
[data-theme="dark"] .stat-icon.yellow    { background: rgba(227,179,65,.12); color: #e3b341; }
[data-theme="dark"] .stat-icon.red       { background: rgba(248,81,73,.12); color: #f85149; }
[data-theme="dark"] .stat-icon.purple    { background: rgba(139,92,246,.12); color: #a78bfa; }
[data-theme="dark"] .stat-badge.amber    { background: rgba(227,179,65,.12); color: #e3b341; }
[data-theme="dark"] .stat-badge.red      { background: rgba(248,81,73,.12); color: #f85149; }
[data-theme="dark"] .stat-badge.green    { background: rgba(63,185,80,.12); color: #3fb950; }
[data-theme="dark"] .dash-shift-tm       { background: rgba(227,179,65,.12); color: #e3b341; }
[data-theme="dark"] .dash-shift-tv       { background: rgba(99,102,241,.12); color: #a5b4fc; }
[data-theme="dark"] .dash-shift-tn       { background: var(--bg); color: var(--text-muted); }
[data-theme="dark"] .dash-activity-row:hover { background: #141921; }
[data-theme="dark"] .dash-act-res        { color: var(--accent); }
[data-theme="dark"] .dash-quick-card:hover { border-color: var(--border-dark); }
[data-theme="dark"] .dash-act-icon.dash-act-bitacora { background: rgba(56,139,253,.12); color: var(--accent); }
[data-theme="dark"] .dash-act-icon.dash-act-vitals   { background: rgba(63,185,80,.12); color: #3fb950; }
[data-theme="dark"] .dash-act-icon.dash-act-meds     { background: rgba(227,179,65,.12); color: #e3b341; }
[data-theme="dark"] .dash-act-icon.dash-act-turno    { background: rgba(139,92,246,.12); color: #a78bfa; }
[data-theme="dark"] .dash-act-icon.dash-act-alert    { background: rgba(248,81,73,.12); color: #f85149; }
[data-theme="dark"] .dash-quick-badge.amber { background: rgba(227,179,65,.12); color: #e3b341; }
[data-theme="dark"] .dash-quick-badge.red   { background: rgba(248,81,73,.12); color: #f85149; }
[data-theme="dark"] .placeholder-card svg   { color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════
   DARK MODE — Prescripciones
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .rx-card             { background: var(--white); border-color: var(--border); }
[data-theme="dark"] .rx-card-done        { background: rgba(63,185,80,.06); border-color: rgba(63,185,80,.25); }
[data-theme="dark"] .rx-card-partial     { background: rgba(227,179,65,.06); border-color: rgba(227,179,65,.25); }
[data-theme="dark"] .rx-card-skip        { background: rgba(248,81,73,.06); border-color: rgba(248,81,73,.25); }
[data-theme="dark"] .rx-card-hd          { border-bottom-color: var(--border); }
[data-theme="dark"] .rx-card-res         { background: rgba(56,139,253,.12); color: var(--accent); border-color: rgba(56,139,253,.25); }
[data-theme="dark"] .rx-card-name        { color: var(--text); }
[data-theme="dark"] .rx-card-dr          { color: #a5b4fc; }
[data-theme="dark"] .rx-card-ind         { color: var(--text-muted); }
[data-theme="dark"] .rx-card-summary     { background: var(--bg); color: var(--text-muted); }
[data-theme="dark"] .rx-sum-done         { background: rgba(63,185,80,.12); color: #3fb950; }
[data-theme="dark"] .rx-sum-partial      { background: rgba(227,179,65,.12); color: #e3b341; }
[data-theme="dark"] .rx-sum-skip         { background: rgba(248,81,73,.12); color: #f85149; }
[data-theme="dark"] .rx-dose-slot        { border-top-color: var(--border); }
[data-theme="dark"] .rx-dose-slot[data-state="adm"]     { background: rgba(63,185,80,.06); }
[data-theme="dark"] .rx-dose-slot[data-state="skipped"] { background: rgba(248,81,73,.06); }
[data-theme="dark"] .rx-slot-t           { color: var(--text); }
[data-theme="dark"] .rx-slot-lbl         { color: var(--text-muted); }
[data-theme="dark"] .rx-adm-btn          { background: var(--bg); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .rx-adm-btn:hover    { background: rgba(63,185,80,.12); border-color: #3fb950; color: #3fb950; }
[data-theme="dark"] .rx-skip-btn         { color: var(--text-muted); border-color: var(--border); }
[data-theme="dark"] .rx-skip-btn:hover   { background: rgba(248,81,73,.1); border-color: #f85149; color: #f85149; }
[data-theme="dark"] .rx-adm-lbl          { color: #3fb950; }
[data-theme="dark"] .rx-actual-time-wrap { background: rgba(63,185,80,.12); border-color: rgba(63,185,80,.25); color: #3fb950; }
[data-theme="dark"] .rx-actual-time      { color: #3fb950; }
[data-theme="dark"] .rx-reason-chip      { background: var(--bg); border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .rx-reason-chip:hover { background: rgba(248,81,73,.12); border-color: #f85149; color: #f85149; }
[data-theme="dark"] .rx-reason-chip.rx-reason-on { background: rgba(248,81,73,.15); border-color: #f85149; color: #f85149; }
[data-theme="dark"] .rx-undo-btn         { border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .rx-undo-btn:hover   { background: var(--bg); color: var(--text); }
[data-theme="dark"] .add-med-btn-extra   { border-color: var(--border); }
[data-theme="dark"] .add-med-btn-extra:hover { background: var(--bg); border-color: var(--text-muted); }
[data-theme="dark"] .rx-via-rectal       { background: var(--bg); color: var(--text-muted); }
[data-theme="dark"] .rx-med-card-expiring { background: rgba(227,179,65,.06); }
[data-theme="dark"] .rx-gantt-tip-ven    { background: rgba(234,88,12,.1); }
[data-theme="dark"] .rx-gantt-tip-sus    { background: var(--bg); }
[data-theme="dark"] .rx-pk-pend          { background: rgba(227,179,65,.08); }
[data-theme="dark"] .rx-picker-undo-btn:hover { background: var(--bg); }

/* ══════════════════════════════════════════════════════════════
   DARK MODE — Reportes
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .rpt-controls-bar    { background: var(--white); border-bottom-color: var(--border); }
[data-theme="dark"] .rpt-ctrl-lbl        { color: var(--text-muted); }
[data-theme="dark"] .rpt-select,
[data-theme="dark"] .rpt-date-input      { background: var(--bg); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .rpt-select:focus,
[data-theme="dark"] .rpt-date-input:focus { border-color: #818cf8; background: var(--white); }
[data-theme="dark"] .rpt-period-btn      { background: var(--bg); border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .rpt-period-btn:hover { border-color: #818cf8; color: #a5b4fc; background: rgba(99,102,241,.1); }
[data-theme="dark"] .rpt-print-btn       { background: var(--bg); color: var(--text-muted); border-color: var(--border); }
[data-theme="dark"] .rpt-print-btn:hover { background: #252c38; }
[data-theme="dark"] .report-page         { background: var(--white); border-color: var(--border); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
[data-theme="dark"] .rpt-page-header     { border-bottom-color: var(--border); }
[data-theme="dark"] .rpt-page-foto-placeholder { background: var(--bg); border-color: var(--border); }
[data-theme="dark"] .rpt-page-nombre     { color: var(--text); }
[data-theme="dark"] .rpt-page-meta       { color: var(--text-muted); }
[data-theme="dark"] .rpt-page-meta span  { background: var(--bg); }
[data-theme="dark"] .rpt-period-dates    { color: var(--text); }
[data-theme="dark"] .rpt-chart-card      { background: #141921; border-color: var(--border); }
[data-theme="dark"] .rpt-chart-title     { color: var(--text-muted); }
[data-theme="dark"] .rpt-no-data         { background: var(--bg); color: var(--text-muted); }
[data-theme="dark"] .rpt-narrative-table { color: var(--text); }
[data-theme="dark"] .rpt-narrative-table th { background: #141921; color: var(--text-muted); border-bottom-color: var(--border); }
[data-theme="dark"] .rpt-narrative-table td { border-bottom-color: var(--border); }
[data-theme="dark"] .rpt-narrative-table .rpt-td-autor { color: var(--text-muted); }
[data-theme="dark"] .rpt-row-first-of-date td { border-top-color: var(--border); }
[data-theme="dark"] .rpt-turno-tm        { background: rgba(227,179,65,.12); color: #e3b341; }
[data-theme="dark"] .rpt-turno-tv        { background: rgba(139,92,246,.12); color: #a78bfa; }
[data-theme="dark"] .rpt-turno-tn        { background: rgba(88,166,255,.12); color: #7dd3fc; }
[data-theme="dark"] .rpt-signature-row   { border-top-color: var(--border); }
[data-theme="dark"] .rpt-signature-line  { background: var(--text-muted); }
[data-theme="dark"] .rpt-signature-label { color: var(--text-muted); }
[data-theme="dark"] .rpt-empty           { color: var(--text-muted); }

/* ══════════════════════════════════════════════════════════════
   DARK MODE — Obs Drawer
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .obs-drawer          { background: var(--white); box-shadow: -4px 0 24px rgba(0,0,0,.45); }
[data-theme="dark"] .obs-drawer-title    { color: var(--text); }
[data-theme="dark"] .obs-drawer-close-btn { color: var(--text-muted); }
[data-theme="dark"] .obs-drawer-close-btn:hover { background: var(--bg); color: #f85149; }
[data-theme="dark"] .obs-drawer-meta-row { border-bottom-color: var(--border); }
[data-theme="dark"] .obs-drawer-shift-tab { background: var(--bg); color: var(--text-muted); }
[data-theme="dark"] .obs-dst-tm:hover,
[data-theme="dark"] .obs-dst-tm.active   { background: rgba(227,179,65,.12); border-color: #e3b341; color: #e3b341; }
[data-theme="dark"] .obs-dst-tv:hover,
[data-theme="dark"] .obs-dst-tv.active   { background: rgba(56,139,253,.12); border-color: var(--accent); color: var(--accent); }
[data-theme="dark"] .obs-dst-tn:hover,
[data-theme="dark"] .obs-dst-tn.active   { background: rgba(99,102,241,.12); border-color: #818cf8; color: #a5b4fc; }
[data-theme="dark"] .obs-drawer-nurse-row { border-bottom-color: var(--border); }
[data-theme="dark"] .obs-drawer-nurse-row label { color: var(--text-muted); }
[data-theme="dark"] .obs-drawer-nurse-select { background: var(--bg); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .obs-drawer-nurse-select:focus { border-color: #818cf8; }
[data-theme="dark"] .obs-drawer-textarea { background: var(--bg); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .obs-drawer-textarea:focus { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99,102,241,.12); background: var(--white); }
[data-theme="dark"] .obs-drawer-time-input { background: var(--bg); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .obs-drawer-time-input:focus { border-color: #818cf8; }
[data-theme="dark"] .obs-drawer-section-lbl { color: var(--text-muted); }
[data-theme="dark"] .obs-drawer-footer   { border-top-color: var(--border); }
[data-theme="dark"] .obs-drawer-count    { color: var(--text-muted); }
[data-theme="dark"] .obs-drawer-cancel-btn { background: var(--bg); color: var(--text-muted); }
[data-theme="dark"] .obs-drawer-cancel-btn:hover { background: #252c38; color: #f85149; }
[data-theme="dark"] .obs-drawer-delete-btn { background: rgba(248,81,73,.1); color: #f85149; }
[data-theme="dark"] .obs-drawer-delete-btn:hover { background: rgba(248,81,73,.18); }
[data-theme="dark"] .obs-drawer-sign-btn { background: var(--text); color: var(--content-bg); }
[data-theme="dark"] .obs-drawer-sign-btn:hover { background: var(--text-label); }
[data-theme="dark"] .obs-drawer-autor-row { color: var(--text-muted); background: var(--bg); }
[data-theme="dark"] .obs-drawer-autor-row svg { color: var(--text-muted); }
[data-theme="dark"] .obs-drawer-autor-row strong { color: var(--text-label); }
[data-theme="dark"] .obs-drawer-chip     { border-color: var(--border); }
[data-theme="dark"] .obs-quick-label     { color: var(--text-muted); }
[data-theme="dark"] .obs-textarea-label  { color: var(--text-muted); }

/* Obs category chip bar (dark) */
[data-theme="dark"] .obs-cat-bar-label   { color: var(--text-muted); }
[data-theme="dark"] .obs-cat-chip        { background: var(--bg); border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .obs-cat-chip:hover  { background: #252c38; border-color: var(--text-muted); }
[data-theme="dark"] .obs-cat-chip-gen.obs-cat-chip-on          { background: rgba(56,139,253,.12); border-color: rgba(56,139,253,.35); color: #7dd3fc; }
[data-theme="dark"] .obs-cat-chip-alert.obs-cat-chip-on        { background: rgba(248,81,73,.12); border-color: rgba(248,81,73,.35); color: #f85149; }
[data-theme="dark"] .obs-cat-chip-med.obs-cat-chip-on          { background: rgba(63,185,80,.12); border-color: rgba(63,185,80,.35); color: #3fb950; }
[data-theme="dark"] .obs-cat-chip-pain.obs-cat-chip-on         { background: rgba(244,114,182,.12); border-color: rgba(244,114,182,.35); color: #f472b6; }
[data-theme="dark"] .obs-cat-chip-incident.obs-cat-chip-on     { background: rgba(227,179,65,.12); border-color: rgba(227,179,65,.35); color: #e3b341; }
[data-theme="dark"] .obs-cat-chip-behavior.obs-cat-chip-on     { background: rgba(139,92,246,.12); border-color: rgba(139,92,246,.35); color: #a78bfa; }
[data-theme="dark"] .obs-cat-chip-sleep.obs-cat-chip-on        { background: rgba(56,139,253,.12); border-color: rgba(56,139,253,.35); color: #7dd3fc; }
[data-theme="dark"] .obs-cat-chip-food.obs-cat-chip-on         { background: rgba(234,88,12,.12); border-color: rgba(234,88,12,.35); color: #fb923c; }
[data-theme="dark"] .obs-cat-chip-hygiene.obs-cat-chip-on      { background: rgba(13,148,136,.12); border-color: rgba(13,148,136,.35); color: #2dd4bf; }
[data-theme="dark"] .obs-cat-chip-mobility.obs-cat-chip-on     { background: rgba(22,163,74,.12); border-color: rgba(22,163,74,.35); color: #4ade80; }
[data-theme="dark"] .obs-cat-chip-elimination.obs-cat-chip-on  { background: rgba(202,138,4,.12); border-color: rgba(202,138,4,.35); color: #fbbf24; }

/* Obs accordion (legacy — kept for backward compat) */
[data-theme="dark"] .obs-acc-group       { border-bottom-color: var(--border); }
[data-theme="dark"] .obs-acc-head        { color: var(--text-muted); }
[data-theme="dark"] .obs-acc-head:hover  { background: var(--bg); }
[data-theme="dark"] .obs-acc-chev        { color: var(--text-muted); }
[data-theme="dark"] .obs-acc-alert    .obs-acc-head-active { color: #f85149; background: rgba(248,81,73,.08); }
[data-theme="dark"] .obs-acc-med      .obs-acc-head-active { color: #3fb950; background: rgba(63,185,80,.08); }
[data-theme="dark"] .obs-acc-pain     .obs-acc-head-active { color: #f472b6; background: rgba(244,114,182,.08); }
[data-theme="dark"] .obs-acc-incident .obs-acc-head-active { color: #e3b341; background: rgba(227,179,65,.08); }
[data-theme="dark"] .obs-acc-behavior .obs-acc-head-active { color: #a78bfa; background: rgba(139,92,246,.08); }
[data-theme="dark"] .obs-acc-sleep    .obs-acc-head-active { color: #7dd3fc; background: rgba(125,211,252,.08); }
[data-theme="dark"] .obs-acc-food     .obs-acc-head-active { color: #fb923c; background: rgba(234,88,12,.08); }
[data-theme="dark"] .obs-acc-hygiene  .obs-acc-head-active { color: #2dd4bf; background: rgba(13,148,136,.08); }
[data-theme="dark"] .obs-acc-mobility    .obs-acc-head-active { color: #4ade80; background: rgba(22,163,74,.08); }
[data-theme="dark"] .obs-acc-elimination .obs-acc-head-active { color: #fbbf24; background: rgba(202,138,4,.08); }
[data-theme="dark"] .obs-acc-gen         .obs-acc-head-active { color: #7dd3fc; background: rgba(56,139,253,.08); }

/* Obs quick options */
[data-theme="dark"] .obs-quick-opt       { background: var(--bg); border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .obs-qo-alert        { background: rgba(248,81,73,.08); border-color: rgba(248,81,73,.2); color: #f85149; }
[data-theme="dark"] .obs-qo-alert:hover  { background: rgba(248,81,73,.14); }
[data-theme="dark"] .obs-qo-med          { background: rgba(63,185,80,.08); border-color: rgba(63,185,80,.2); color: #3fb950; }
[data-theme="dark"] .obs-qo-med:hover    { background: rgba(63,185,80,.14); }
[data-theme="dark"] .obs-qo-incident     { background: rgba(227,179,65,.08); border-color: rgba(227,179,65,.2); color: #e3b341; }
[data-theme="dark"] .obs-qo-incident:hover { background: rgba(227,179,65,.14); }
[data-theme="dark"] .obs-qo-pain         { background: rgba(244,114,182,.08); border-color: rgba(244,114,182,.2); color: #f472b6; }
[data-theme="dark"] .obs-qo-pain:hover   { background: rgba(244,114,182,.14); }
[data-theme="dark"] .obs-qo-behavior     { background: rgba(139,92,246,.08); border-color: rgba(139,92,246,.2); color: #a78bfa; }
[data-theme="dark"] .obs-qo-behavior:hover { background: rgba(139,92,246,.14); }
[data-theme="dark"] .obs-qo-gen          { background: rgba(56,139,253,.08); border-color: rgba(56,139,253,.2); color: var(--accent); }
[data-theme="dark"] .obs-qo-gen:hover    { background: rgba(56,139,253,.14); }
[data-theme="dark"] .obs-qo-sleep        { background: rgba(56,139,253,.08); border-color: rgba(56,139,253,.2); color: #7dd3fc; }
[data-theme="dark"] .obs-qo-sleep:hover  { background: rgba(56,139,253,.14); }
[data-theme="dark"] .obs-qo-food         { background: rgba(234,88,12,.08); border-color: rgba(234,88,12,.2); color: #fb923c; }
[data-theme="dark"] .obs-qo-food:hover   { background: rgba(234,88,12,.14); }
[data-theme="dark"] .obs-qo-hygiene      { background: rgba(13,148,136,.08); border-color: rgba(13,148,136,.2); color: #2dd4bf; }
[data-theme="dark"] .obs-qo-hygiene:hover { background: rgba(13,148,136,.14); }
[data-theme="dark"] .obs-qo-mobility     { background: rgba(22,163,74,.08); border-color: rgba(22,163,74,.2); color: #4ade80; }
[data-theme="dark"] .obs-qo-mobility:hover { background: rgba(22,163,74,.14); }
[data-theme="dark"] .obs-qo-elimination  { background: rgba(202,138,4,.08); border-color: rgba(202,138,4,.2); color: #fbbf24; }
[data-theme="dark"] .obs-qo-elimination:hover { background: rgba(202,138,4,.14); }

/* Duration section */
[data-theme="dark"] .evt-dur-section     { background: var(--bg); border-color: var(--border); }
[data-theme="dark"] .dur-lbl,
[data-theme="dark"] .dur-end-lbl         { color: var(--text-muted); }
[data-theme="dark"] .dur-btn             { background: var(--white); border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .dur-btn:hover       { background: #252c38; border-color: var(--text-muted); color: var(--text); }
[data-theme="dark"] .dur-btn.dur-btn-on  { background: var(--text); border-color: var(--text); color: var(--content-bg); }

/* ══════════════════════════════════════════════════════════════
   DARK MODE — Traspaso overlay
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .traspaso-close:hover       { background: var(--bg); color: var(--text); }
[data-theme="dark"] .traspaso-tabs button        { color: var(--text-muted); }
[data-theme="dark"] .traspaso-tabs button:hover  { background: var(--bg); color: var(--text); }
[data-theme="dark"] .traspaso-tabs button.active { background: var(--primary); color: #fff; }

/* ══════════════════════════════════════════════════════════════
   DARK MODE — Historial Clínico sub-components
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .hc-rx-sum-expired      { background: rgba(234,88,12,.1); color: #fb923c; }
[data-theme="dark"] .hc-rx-sum-suspended    { background: var(--bg); color: var(--text-muted); }
[data-theme="dark"] .hc-rx-icon-dim         { background: var(--bg); color: var(--text-muted); }
[data-theme="dark"] .hc-rx-status-expired   { background: rgba(234,88,12,.1); color: #fb923c; }
[data-theme="dark"] .hc-rx-status-suspended { background: var(--bg); color: var(--text-muted); }
[data-theme="dark"] .hc-lab-alert td        { background: rgba(227,179,65,.06); }
[data-theme="dark"] .hc-type-btn            { background: var(--bg); color: var(--text-muted); }
[data-theme="dark"] .hc-type-btn:hover      { background: #252c38; color: var(--text); }
[data-theme="dark"] .hc-rx-row-card:hover   { background: #141921; }

/* ══════════════════════════════════════════════════════════════
   DARK MODE — Personal badges & states
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .per-action-danger       { background: rgba(248,81,73,.08) !important; color: #f85149 !important; }
[data-theme="dark"] .per-action-delete       { background: rgba(248,81,73,.08) !important; color: #f85149 !important; }
[data-theme="dark"] .per-stat-pending        { background: rgba(227,179,65,.08); border-color: rgba(227,179,65,.2); }
[data-theme="dark"] .per-badge-fam           { background: rgba(234,88,12,.1); color: #fb923c; }
[data-theme="dark"] .per-m-btn-danger        { background: rgba(248,81,73,.1); color: #f85149; }

/* ══════════════════════════════════════════════════════════════
   DARK MODE — Signos Vitales sub-components
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .vs-autosave-status.vs-as-saving { background: var(--bg); border-color: var(--border); }
[data-theme="dark"] .vs-num.vs-warn          { background: rgba(227,179,65,.12); color: #e3b341; }
[data-theme="dark"] .vs-row-tm               { background: rgba(227,179,65,.04); }

/* ══════════════════════════════════════════════════════════════
   DARK MODE — Lista view sub-components
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .lv-pill-tv              { background: rgba(234,88,12,.1); color: #fb923c; }
[data-theme="dark"] .lv-rx-skip-btn:hover    { background: rgba(248,81,73,.1); }
[data-theme="dark"] .lv-rx-undo:hover        { background: var(--bg); }
[data-theme="dark"] .lv-rf-cancel:hover      { background: var(--bg); }

/* ══════════════════════════════════════════════════════════════
   DARK MODE — Bitácora misc
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .bita-s-signed           { background: var(--bg); color: var(--text-muted); }
[data-theme="dark"] .turno-s-pending         { background: var(--bg); }
[data-theme="dark"] .obs-chip-alert:hover    { background: rgba(248,81,73,.08); }
[data-theme="dark"] .obs-chip-incident:hover { background: rgba(227,179,65,.08); }
[data-theme="dark"] .obs-chip-gen:hover      { background: var(--bg); }

/* ══════════════════════════════════════════════════════════════
   DARK MODE — Care / Sleep / Mood components
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .mood-btn:hover          { background: var(--bg); }
[data-theme="dark"] .care-pill-purple        { background: var(--bg); color: var(--text-muted); }
[data-theme="dark"] .care-entry-hd:hover     { background: var(--bg); }
[data-theme="dark"] .care-chip               { background: var(--bg); }
[data-theme="dark"] .care-chip:hover         { background: #252c38; }
[data-theme="dark"] .sleep-q-btn             { background: var(--bg); color: var(--text-muted); }
[data-theme="dark"] .sleep-q-btn:hover       { background: #252c38; }

/* ══════════════════════════════════════════════════════════════
   DARK MODE — Configuración
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .cfg-nav-btn:hover       { background: var(--bg); }

/* ══════════════════════════════════════════════════════════════
   DARK MODE — Superadmin
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .sa-log-badge--ok        { background: rgba(63,185,80,.12); color: #3fb950; }
[data-theme="dark"] .sa-log-badge--warn      { background: rgba(227,179,65,.12); color: #e3b341; }
[data-theme="dark"] .sa-log-badge--error     { background: rgba(248,81,73,.12); color: #f85149; }
[data-theme="dark"] .sa-log-badge--info      { background: rgba(56,139,253,.12); color: var(--accent); }
[data-theme="dark"] .sa-plan-badge--basic    { background: rgba(63,185,80,.12); color: #3fb950; border-color: rgba(63,185,80,.25); }
[data-theme="dark"] .sa-plan-badge--pro      { background: rgba(56,139,253,.12); color: var(--accent); border-color: rgba(56,139,253,.25); }
[data-theme="dark"] .sa-plan-badge--enterprise { background: rgba(139,92,246,.12); color: #a78bfa; border-color: rgba(139,92,246,.25); }
[data-theme="dark"] .sa-plan-badge--trial    { background: rgba(234,88,12,.12); color: #fb923c; border-color: rgba(234,88,12,.25); }
[data-theme="dark"] .sa-plan-highlight       { background: #178391; }
[data-theme="dark"] .sa-mode-banner          { background: rgba(234,88,12,.1); border-color: rgba(234,88,12,.25); }

/* ══════════════════════════════════════════════════════════════
   DARK MODE — Reportes responsive table cards
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    [data-theme="dark"] .rpt-narrative-table tr { background: var(--white); border-color: var(--border); }
    [data-theme="dark"] .rpt-narrative-table td::before { color: var(--text-muted); }
}

/* ── Theme toggle button (in sidebar footer) ── */
.theme-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    margin-bottom: 8px;
    font-family: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
}
.theme-toggle:hover { background: var(--border); color: var(--text); }
.theme-toggle-icon  { flex-shrink: 0; display: flex; align-items: center; }
.theme-toggle-label { transition: opacity var(--transition), width var(--transition); }
.sidebar.collapsed .theme-toggle { justify-content: center; padding: 7px 0; }
.sidebar.collapsed .theme-toggle-label { opacity: 0; width: 0; overflow: hidden; margin: 0; }
.sa-activity-action { font-size: 13px; font-weight: 500; color: var(--text); }
.sa-activity-meta {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: 11.5px; color: var(--text-muted); margin-top: 2px;
}

/* Log status badges */
.sa-log-badge {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 4px;
    font-size: 11px; font-weight: 600;
}
.sa-log-badge--ok    { background: #dcfce7; color: #166534; }
.sa-log-badge--warn  { background: #fef9c3; color: #854d0e; }
.sa-log-badge--error { background: #fee2e2; color: #dc2626; }
.sa-log-badge--info  { background: #e8f6fb; color: #033f3f; }

@media (max-width: 640px) {
    .sa-plan-cards { grid-template-columns: 1fr; }
    .sa-activity-meta { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* ══════════════════════════════════════════════════════════════
   PRESCRIPCIONES PAGE
   ══════════════════════════════════════════════════════════════ */

/* ── Filter bar ─────────────────────────────────────────────── */
.rx-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.rx-search-wrap {
    position: relative;
    flex: 1 1 200px;
    min-width: 180px;
}
.rx-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}
.rx-search-input {
    padding-left: 32px !important;
}
.rx-filter-select {
    flex: 0 1 180px;
    min-width: 130px;
}

/* ── Table wrapper ──────────────────────────────────────────── */
.rx-table-wrap {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
}
.rx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.rx-table thead th {
    background: var(--surface-2, #f8fafc);
    padding: 10px 14px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.rx-table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    color: var(--text-primary);
}
.rx-table tbody tr:last-child td { border-bottom: none; }
.rx-table tbody tr:hover { background: var(--hover-bg, rgba(0,0,0,.025)); }

.rx-th-actions { width: 80px; text-align: center; }
.rx-td-actions { text-align: center; white-space: nowrap; }
.rx-td-res  { min-width: 130px; }
.rx-td-nombre { min-width: 150px; }
.rx-td-frec { min-width: 120px; }
.rx-td-med  { min-width: 120px; }
.rx-td-vigencia { min-width: 160px; white-space: nowrap; font-size: 12px; color: var(--text-secondary); }

.rx-res-name  { font-weight: 600; color: var(--text-primary); }
.rx-med-name  { font-weight: 500; }
.rx-indicacion {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
    line-height: 1.4;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Vía badges ─────────────────────────────────────────────── */
.rx-via-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    background: #e0e7ff;
    color: #3730a3;
}
.rx-via-oral         { background: #dcfce7; color: #166534; }
.rx-via-iv           { background: #fee2e2; color: #991b1b; }
.rx-via-im           { background: #fef9c3; color: #854d0e; }
.rx-via-subcutanea   { background: #fce7f3; color: #9d174d; }
.rx-via-topica       { background: #e8f6fb; color: #075985; }
.rx-via-inhalada     { background: #ede9fe; color: #6d28d9; }
.rx-via-sublingual   { background: #faf5ff; color: #7c3aed; }
.rx-via-rectal       { background: #f1f5f9; color: #475569; }
.rx-via-oftalmica    { background: #cffafe; color: #0e7490; }
.rx-via-otica        { background: #fef3c7; color: #92400e; }
.rx-via-nasal        { background: #e8f6fb; color: #0369a1; }

/* ── Horarios chips ──────────────────────────────────────────── */
.rx-horarios {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.rx-hora-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    background: var(--surface-2, #f1f5f9);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}
.rx-hora-empty { color: var(--text-muted); font-weight: 400; }
.rx-hora-chip-edit {
    background: #e8f6fb;
    border-color: #9db9d0;
    color: #033f3f;
}
.rx-hora-chip-edit button {
    background: none;
    border: none;
    cursor: pointer;
    color: #9db9d0;
    font-size: 14px;
    line-height: 1;
    padding: 0 0 0 2px;
    display: inline-flex;
    align-items: center;
}
.rx-hora-chip-edit button:hover { color: #dc2626; }

/* ── Expiring badge ─────────────────────────────────────────── */
.rx-expiring-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background: #fef3c7;
    color: #92400e;
    font-size: 10px;
    font-weight: 700;
    margin-left: 4px;
}

/* ── Action buttons ─────────────────────────────────────────── */
.rx-btn-edit, .rx-btn-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    cursor: pointer;
    color: var(--text-secondary);
    transition: background .15s, color .15s, border-color .15s;
}
.rx-btn-edit:hover { background: #e8f6fb; color: #033f3f; border-color: #9db9d0; }
.rx-btn-del:hover  { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
.rx-td-actions .rx-btn-edit { margin-right: 4px; }

/* ── Empty state ─────────────────────────────────────────────── */
.rx-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    text-align: center;
    gap: 10px;
}
.rx-empty-icon { color: var(--text-muted); opacity: .5; }
.rx-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
}
.rx-empty-sub {
    font-size: 13px;
    color: var(--text-muted);
    max-width: 340px;
}

/* ── No results row ─────────────────────────────────────────── */
.rx-no-results {
    padding: 28px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}

/* ── Modal ───────────────────────────────────────────────────── */
.rx-modal-card {
    max-width: 680px;
    width: 100%;
}
.rx-modal-card-xl { max-width: 840px; }
.rx-required { color: var(--danger, #dc2626); }

/* ── Multi-medication modal entries ── */
.rx-meds-section  { padding-top: 12px; }
.rx-meds-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.rx-add-med-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    background: #e8f6fb;
    border: 1.5px solid #bfdbfe;
    border-radius: 20px;
    padding: 4px 12px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    flex-shrink: 0;
    line-height: 1.4;
}
.rx-add-med-btn:hover { background: #e8f6fb; border-color: var(--primary); }
.rx-med-entry-wrap + .rx-med-entry-wrap {
    margin-top: 10px;
    border-top: 1px solid #e2e8f0;
    padding-top: 10px;
}
.rx-med-entry {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
}
.rx-me-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.rx-me-badge {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--primary);
    background: #e8f6fb;
    padding: 2px 9px;
    border-radius: 20px;
}
.rx-me-remove-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: #dc2626;
    background: #fee2e2;
    border: none;
    border-radius: 6px;
    padding: 3px 9px;
    cursor: pointer;
    transition: background .12s;
    line-height: 1.4;
}
.rx-me-remove-btn:hover { background: #fecaca; }

/* ── Image upload zone ── */
.rx-img-upload-zone {
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    padding: 20px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    background: #f8fafc;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.rx-img-upload-zone:hover { border-color: var(--accent); background: #fafbff; }
.rx-img-upload-zone.rx-img-drag { border-color: var(--accent); background: #e8f6fb; }
.rx-img-placeholder { display: flex; flex-direction: column; align-items: center; }
.rx-img-preview-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: left;
}
.rx-img-preview-img {
    max-height: 110px;
    max-width: 160px;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
    border: 1px solid var(--border);
}
.rx-img-pdf-icon { flex-shrink: 0; }
.rx-img-filename {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    word-break: break-all;
}
.rx-img-remove-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: #dc2626;
    background: #fee2e2;
    border: none;
    border-radius: 6px;
    padding: 4px 9px;
    cursor: pointer;
    margin-top: 6px;
    transition: background .12s;
    flex-shrink: 0;
    line-height: 1.4;
}
.rx-img-remove-btn:hover { background: #fecaca; }

/* Prescriptions in historial */
.hc-rx-plan { white-space: pre-line; font-size: 13px; }

/* ── Horarios editor ─────────────────────────────────────────── */
.rx-horarios-editor {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--surface-2, #f8fafc);
}
.rx-horarios-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 28px;
    margin-bottom: 8px;
}
.rx-hora-add-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rx-hora-input {
    width: auto !important;
    flex: 0 0 110px;
}
.rx-hora-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    background: var(--primary, #1e3a6e);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
}
.rx-hora-add-btn:hover { opacity: .88; }

/* ── Delete button ─────────────────────────────────────────── */
.btn-delete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #dc2626;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
}
.btn-delete:hover { opacity: .88; }
.btn-delete:disabled { opacity: .5; cursor: not-allowed; }

/* ── Toast ───────────────────────────────────────────────────── */
.rx-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    background: #1e293b;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
    z-index: 9000;
    white-space: nowrap;
    max-width: 90vw;
    text-overflow: ellipsis;
    overflow: hidden;
}
.rx-toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.rx-toast-success { background: #16a34a; }
.rx-toast-error   { background: #dc2626; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
    .rx-filter-bar { gap: 8px; }
    .rx-filter-select { flex: 1 1 140px; }
}
@media (max-width: 640px) {\n    .rx-filter-bar { flex-direction: column; align-items: stretch; }\n    .rx-search-wrap { flex: 1 1 auto; }\n    .rx-filter-select { flex: 1 1 auto; }\n    .rx-modal-card { max-width: 100%; }\n}

/* ── KPI stat cards ─────────────────────────────────────────── */
.rx-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.rx-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px;
    transition: box-shadow var(--transition);
}
.rx-stat-card:hover { box-shadow: var(--shadow-sm); }
.rx-stat-card-warn {
    border-color: #fde68a;
    background: #fffbeb;
}
.rx-stat-icon {
    width: 36px; height: 36px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rx-stat-num {
    font-size: 24px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}
.rx-stat-num-warn { color: #d97706; }
.rx-stat-lbl {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
    font-weight: 500;
    white-space: nowrap;
}

/* ── Expiring alert banner ──────────────────────────────────── */
.rx-expiring-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radius);
    color: #92400e;
    font-size: 13px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.rx-expiring-banner svg { flex-shrink: 0; color: #d97706; }
.rx-expiring-banner em { font-style: normal; font-weight: 600; }

/* ── Toolbar ─────────────────────────────────────────────────── */
.rx-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.rx-toolbar-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.rx-view-toggle {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
    margin-left: auto;
}
.rx-view-btn {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: var(--white);
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    transition: background var(--transition), color var(--transition);
}
.rx-view-btn + .rx-view-btn { border-left: 1px solid var(--border); }
.rx-view-btn:hover { background: var(--content-bg); color: var(--primary); }
.rx-view-btn.active { background: var(--primary); color: #fff; }

/* ── Table: resident cell with avatar ───────────────────────── */
.rx-res-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rx-res-avatar-sm {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    flex-shrink: 0;
}
.rx-indef { color: var(--text-muted); font-style: italic; }

/* ── No results ─────────────────────────────────────────────── */
.rx-no-results {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 24px;
    font-size: 13px;
    color: var(--text-muted);
}

/* ── Cards view: resident group ─────────────────────────────── */
.rx-res-group {
    margin-bottom: 24px;
}
.rx-res-group-hd {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: 2px solid var(--border);
}
.rx-res-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
    flex-shrink: 0;
}
.rx-res-group-info { flex: 1; min-width: 0; }
.rx-res-group-name { font-size: 14px; font-weight: 700; color: var(--text); }
.rx-res-group-meta { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.rx-group-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: var(--content-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
}
.rx-group-add-btn:hover { background: #e8f6fb; border-color: #9db9d0; }

/* ── Medication cards grid ──────────────────────────────────── */
.rx-med-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    overflow: hidden;
}
.rx-med-card {
    background: var(--white);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: background var(--transition);
    position: relative;
}
.rx-med-card:hover { background: #fafbfc; }
.rx-med-card-expiring { background: #fffbeb !important; }
.rx-med-card-expiring:hover { background: #fef9c3 !important; }

.rx-med-card-hd {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.rx-med-card-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}
.rx-med-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.rx-med-card-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.rx-med-card-row svg { flex-shrink: 0; color: var(--text-muted); }
.rx-med-card-row strong { color: var(--text); }
.rx-med-sep { color: var(--border-dark); margin: 0 2px; }
.rx-med-card-horarios {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
.rx-med-card-ind {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rx-med-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.rx-med-card-dr {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-muted);
}
.rx-med-card-until, .rx-med-card-indef {
    font-size: 11px;
    color: var(--text-muted);
}
.rx-med-card-indef { font-style: italic; }
.rx-med-card-actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.rx-med-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--white);
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    color: var(--text-muted);
}
.rx-med-action-edit:hover { background: #e8f6fb; color: #033f3f; border-color: #9db9d0; }
.rx-med-action-del:hover  { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }

/* ── Modal: scrollable body ─────────────────────────────────── */
.rx-modal-card { max-width: 700px; }
.rx-modal-body {
    overflow-y: auto;
    max-height: calc(90vh - 140px);
    padding: 0 !important;
}
.rx-modal-icon {
    width: 36px; height: 36px;
    background: #e8f6fb;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    color: var(--primary);
    flex-shrink: 0;
}
.modal-subtitle {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 2px;
    font-weight: 400;
}

/* ── Modal sections ─────────────────────────────────────────── */
.rx-modal-section {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.rx-modal-section-last { border-bottom: none; }
.rx-modal-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* ── Frequency preset chips ─────────────────────────────────── */
.rx-freq-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 2px;
}
.rx-freq-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--white);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
    white-space: nowrap;
}
.rx-freq-chip:hover { background: #e8f6fb; color: #033f3f; border-color: #9db9d0; }
.rx-freq-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ── Inline field error ─────────────────────────────────────── */
.rx-field-err {
    display: none;
    font-size: 11.5px;
    color: var(--danger);
    margin-top: 4px;
    font-weight: 500;
}
.rx-input-err { border-color: var(--danger) !important; }
.rx-input-err:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.12) !important; }

/* ── Label hint ─────────────────────────────────────────────── */
.rx-lbl-hint {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
}

/* ── Responsive prescripciones ──────────────────────────────── */
@media (max-width: 1100px) {
    .rx-stats-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    /* Hide less-important table columns: Vía, Frecuencia, Médico */
    .rx-table thead th:nth-child(4),
    .rx-table tbody td:nth-child(4),
    .rx-table thead th:nth-child(5),
    .rx-table tbody td:nth-child(5),
    .rx-table thead th:nth-child(7),
    .rx-table tbody td:nth-child(7) { display: none; }
}
@media (max-width: 700px) {
    .rx-stats-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .rx-stat-card { padding: 10px 12px; }
    .rx-stat-num  { font-size: 20px; }
    .rx-toolbar { flex-wrap: wrap; }
    .rx-toolbar-filters { flex: 1 1 100%; }
    .rx-toolbar-filters select { flex: 1 1 0; min-width: 0; font-size: 12px; }
    .rx-view-toggle { margin-left: 0; }
    .rx-med-cards-grid { grid-template-columns: 1fr; }
    .rx-modal-section { padding: 14px 16px; }
    .rx-expiring-banner { font-size: 12px; padding: 8px 12px; }
}
@media (max-width: 640px) {
    /* Force cards view, hide table */
    #rxTableView { display: none !important; }
    #rxCardsView { display: block !important; }
    .rx-view-toggle { display: none !important; }
    /* Compact "Nueva Prescripción" button */
    #btnNuevaRx { padding: 8px 12px; font-size: 12px; }
    /* Search full-width */
    .rx-toolbar .exp-search-wrap { flex: 1 1 100%; max-width: 100% !important; }
    .rx-toolbar-filters { gap: 6px; }
    /* Cards groups */
    .rx-res-group-hd { flex-wrap: wrap; gap: 8px; }
    .rx-group-add-btn { font-size: 11px; padding: 5px 10px; }
    .rx-med-card-actions { gap: 4px; }
    .rx-med-card-actions .rx-med-action-btn { font-size: 11px; padding: 5px 10px; }
    /* KPIs */
    .rx-stat-icon { width: 30px; height: 30px; }
    .rx-stat-icon svg { width: 14px; height: 14px; }
    /* Modal full-screen */
    .rx-modal-card { max-width: 100%; margin: 0; border-radius: 0; max-height: 100vh; }
}
@media (max-width: 480px) {
    .rx-stats-row { grid-template-columns: 1fr 1fr; }
    .rx-stat-lbl  { font-size: 10px; }
    .rx-stat-num  { font-size: 18px; }
    .rx-stat-card { gap: 8px; padding: 8px 10px; }
    .rx-freq-chips { gap: 4px; }
    .rx-freq-chip { font-size: 11px; padding: 3px 8px; }
    /* Res group header compact */
    .rx-res-avatar { width: 36px; height: 36px; font-size: 13px; }
    .rx-res-group-name { font-size: 13px; }
    .rx-res-group-meta { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════
   TIMELINE (bitacora.php v2)
   ═══════════════════════════════════════════════════════════════ */

/* ── Toolbar ───────────────────────────────────────────────── */
/* ── View tab bar (Timeline / Signos Vitales) ──────────────────────────── */
.bita-view-tabs {
    display: flex;
    align-items: stretch;
    gap: 4px;
    border-bottom: 2px solid #e2e8f0;
    background: #f1f5f9;
    padding: 6px 16px 0;
    flex-shrink: 0;
}
.bv-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    font-size: .82rem;
    font-weight: 700;
    color: #64748b;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color .15s, background .15s, border-color .15s, box-shadow .15s;
    white-space: nowrap;
}
.bv-tab svg { flex-shrink: 0; }
.bv-tab:hover {
    color: #334155;
    background: rgba(255,255,255,.7);
}
.bv-tab.bv-tab-active {
    color: #6366f1;
    background: #fff;
    border-color: #e2e8f0;
    box-shadow: 0 -2px 6px rgba(99,102,241,.10);
}
/* Vitals tab active — use red accent */
#bvTabVitals.bv-tab-active {
    color: #ef4444;
    border-color: #e2e8f0;
    box-shadow: 0 -2px 6px rgba(239,68,68,.10);
}
/* Lista tab active — green */
#bvTabLista.bv-tab-active {
    color: #16a34a;
    border-color: #e2e8f0;
    box-shadow: 0 -2px 6px rgba(22,163,74,.10);
}

/* ══════════════════════════════════════════════
   VISTA LISTA — categorised row-cards
   ══════════════════════════════════════════════ */
#bitaListView {
    flex: 1;
    min-height: 0; /* allow flex child to shrink to parent height so overflow-y:auto triggers */
    overflow-y: auto;
    padding: 14px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Group container */
.lv-group {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    overflow: hidden;
}

/* Group header */
.lv-group-hd {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: #f8fafc;
    cursor: pointer;
    user-select: none;
    transition: background .1s;
    border-bottom: 1px solid transparent;
}
.lv-group[data-open="1"] > .lv-group-hd {
    border-bottom-color: var(--border);
}
.lv-group-hd:hover { background: #f1f5f9; }
.lv-group-chev {
    color: var(--text-muted);
    display: flex;
    align-items: center;
    transition: transform .15s;
}
.lv-group[data-open="0"] > .lv-group-hd .lv-group-chev svg {
    transform: rotate(-90deg);
}
.lv-group-icon  { font-size: 15px; line-height: 1; }
.lv-group-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
}
.lv-group-count {
    font-size: 11px;
    font-weight: 700;
    background: #e2e8f0;
    color: #64748b;
    padding: 1px 7px;
    border-radius: 20px;
    min-width: 20px;
    text-align: center;
}
.lv-group-count.lv-count-has {
    background: #e8f6fb;
    color: #033f3f;
}
.lv-group-add {
    background: none;
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 2px 8px;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1.3;
    transition: background .1s, color .1s;
}
.lv-group-add:hover { background: #e8f6fb; color: var(--primary); border-color: #bfdbfe; }

/* Group body */
.lv-group-body {
    display: flex;
    flex-direction: column;
}
.lv-empty {
    padding: 12px 16px 12px 28px;
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

/* Row-card */
.lv-row {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 8px 12px 8px 28px;
    border-bottom: 1px solid #f8fafc;
    min-height: 40px;
    transition: background .1s;
}
.lv-row:last-child { border-bottom: none; }
.lv-row.lv-row-editable { cursor: pointer; }
.lv-row.lv-row-editable:hover { background: #f8fafc; }
.lv-row.lv-row-editable:hover .lv-edit-ico { opacity: 1; }

/* Time chip */
.lv-time {
    font-size: 11.5px;
    font-weight: 700;
    color: #178391;
    font-variant-numeric: tabular-nums;
    width: 40px;
    flex-shrink: 0;
    margin-right: 8px;
}

/* Shift pill */
.lv-shift-pill {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 2px 7px;
    border-radius: 20px;
    flex-shrink: 0;
    margin-right: 8px;
    text-transform: uppercase;
}
.lv-pill-tm { background: #e8f6fb; color: #033f3f; }
.lv-pill-tv { background: #fff7ed; color: #9a3412; }
.lv-pill-tn { background: #f3e8ff; color: #6b21a8; }

/* Resident name */
.lv-res {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text);
    flex-shrink: 0;
    margin-right: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 130px;
}

/* Main text */
.lv-text {
    flex: 1;
    font-size: 12.5px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 8px;
}
.lv-text-muted { color: var(--text-muted); }

/* Autor */
.lv-autor {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
    margin-right: 6px;
}

/* Edit icon (appears on hover) */
.lv-edit-ico {
    flex-shrink: 0;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity .1s;
    display: flex;
    align-items: center;
}

/* Dose state indicators */
.lv-dose-state { flex-shrink: 0; margin-left: 4px; }
.lv-dose-adm  { font-size: 13px; color: #16a34a; font-weight: 800; }
.lv-dose-skip { font-size: 13px; color: #dc2626; font-weight: 800; }
.lv-dose-pend { font-size: 13px; color: #94a3b8; }

/* ── Lista view: interactive meds dose rows ─────────────────────────────── */
.lv-rx-wrap { border-bottom: 1px solid #f8fafc; }
.lv-rx-wrap:last-child { border-bottom: none; }
.lv-rx-wrap .lv-row { border-bottom: none; }

.lv-rx-adm-btn {
    flex-shrink: 0;
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
    border-radius: 5px;
    padding: 3px 9px;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    transition: background .1s;
}
.lv-rx-adm-btn:hover { background: #bbf7d0; border-color: #86efac; }

.lv-rx-skip-btn {
    flex-shrink: 0;
    background: none;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    padding: 3px 9px;
    font-size: 11.5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    margin-left: 5px;
    transition: background .1s, color .1s;
}
.lv-rx-skip-btn:hover { background: #fff1f2; color: #dc2626; border-color: #fecaca; }

.lv-adm-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #15803d;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    border-radius: 20px;
    padding: 2px 9px;
    white-space: nowrap;
    flex-shrink: 0;
}
.lv-adm-cuidador { font-weight: 600; color: #166534; }

.lv-skip-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #dc2626;
    font-weight: 600;
    background: #fff1f2;
    border: 1px solid #fecaca;
    border-radius: 20px;
    padding: 2px 9px;
    white-space: nowrap;
    flex-shrink: 0;
}

.lv-rx-undo {
    flex-shrink: 0;
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 2px 7px;
    cursor: pointer;
    color: var(--text-muted);
    margin-left: 5px;
    display: flex;
    align-items: center;
    transition: background .1s;
}
.lv-rx-undo:hover { background: #f1f5f9; color: var(--text); }

/* Inline expand forms */
.lv-rx-form {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: 8px 12px 10px 28px;
}
.lv-rf-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.lv-rf-row-chips { gap: 5px; }
.lv-rf-input {
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    padding: 4px 8px;
    font-size: 12.5px;
    color: var(--text);
    outline: none;
    transition: border-color .15s;
}
.lv-rf-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(23,131,145,.1); }
.lv-rf-cuidador { width: 155px; }
.lv-rf-hora { width: 90px; }
.lv-rf-save {
    background: #178391;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 4px 13px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .1s;
    white-space: nowrap;
}
.lv-rf-save:hover { background: #033f3f; }
.lv-rf-cancel {
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    transition: background .1s;
}
.lv-rf-cancel:hover { background: #f1f5f9; }
.lv-rf-chip-label {
    font-size: 11.5px;
    color: var(--text-muted);
    flex-basis: 100%;
    margin-bottom: 1px;
}
.lv-rf-chip {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 11.5px;
    cursor: pointer;
    transition: all .1s;
    color: var(--text);
}
.lv-rf-chip:hover { background: #e2e8f0; }
.lv-rf-chip.lv-rf-chip-on { background: #fee2e2; color: #dc2626; border-color: #fecaca; font-weight: 700; }

@media (max-width: 640px) {
    .lv-rf-cuidador { width: 130px; }
    .lv-rx-adm-btn, .lv-rx-skip-btn { font-size: 11px; padding: 3px 7px; }
}

/* Flex spacer utility (used in lv rows and headers) */
.lv-flex-spacer { flex: 1; min-width: 0; }

/* Responsive */
@media (max-width: 640px) {
    .lv-res   { display: none; }
    .lv-autor { max-width: 80px; }
    #bitaListView { padding: 10px 10px 20px; }
}

/* Multiline rows on small screens — text no longer truncated */
@media (max-width: 540px) {
    .lv-row {
        flex-wrap: wrap;
        align-items: flex-start;
        row-gap: 4px;
        min-height: 0;
        padding-top: 9px;
        padding-bottom: 9px;
    }
    /* Text takes its own full-width line */
    .lv-text {
        white-space: normal;
        word-break: break-word;
        overflow: visible;
        text-overflow: clip;
        flex-basis: 100%;
        order: 5;
        margin-right: 0;
        margin-top: 1px;
    }
    /* Spacer hidden so action buttons flow directly after text line */
    .lv-flex-spacer { display: none; }
    /* Action buttons / badges sit on their own line after the text */
    .lv-rx-adm-btn, .lv-rx-skip-btn,
    .lv-adm-badge,  .lv-skip-badge, .lv-rx-undo {
        order: 6;
    }
    /* Obs secondary info */
    .lv-autor, .lv-edit-ico, .lv-dose-state { order: 6; }
    /* Shrink form inputs a bit */
    .lv-rf-cuidador { width: 120px; }
    .lv-rf-hora     { width: 80px; }
}

/* ── Resident picker at top of history panel ─────────────────────── */
.bita-res-picker-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 2px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.bita-res-picker-ico {
    flex-shrink: 0;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    pointer-events: none;
}
.bita-res-select {
    flex: 1;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    font-size: .83rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    outline: none;
    padding: 0;
}
.bita-res-picker-chev {
    flex-shrink: 0;
    color: var(--text-muted);
    pointer-events: none;
    display: flex;
    align-items: center;
}
.bita-res-picker-wrap:focus-within {
    border-bottom-color: var(--accent);
    background: #f8fafc;
}
.bita-res-picker-wrap.bita-res-selected {
    background: #e8f6fb;
    border-bottom-color: var(--accent);
}
.bita-res-picker-wrap.bita-res-selected .bita-res-picker-ico { color: var(--accent); }
.bita-res-picker-wrap.bita-res-selected .bita-res-select  { color: var(--accent); }
.bita-res-picker-wrap.bita-res-selected .bita-res-picker-chev { color: var(--accent); }

/* ── Per-resident name tags inside history entries ── */
.bita-res-tag {
    font-size: 11px;
    color: var(--accent);
    font-weight: 500;
    white-space: nowrap;
}
.bita-res-tag + .bita-res-tag { margin-left: 4px; }
.bita-res-tag + .bita-res-tag::before {
    content: '·';
    color: var(--text-muted);
    font-weight: 400;
    margin-right: 4px;
}

.tl-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-wrap: wrap;
    flex-shrink: 0;
}
.tl-shift-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.tl-shift-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    margin-right: 2px;
}
.tl-shift-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1.5px solid var(--border);
    background: var(--bg);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all .15s;
}
.tl-shift-pill:hover { border-color: var(--primary); color: var(--primary); }
.tl-shift-pill.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.tl-pill-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .7;
}
/* Per-shift accent colors */
.tl-pill-tm.active { background: #f59e0b; border-color: #f59e0b; }
.tl-pill-tv.active { background: #6366f1; border-color: #6366f1; }
.tl-pill-tn.active { background: #178391; border-color: #178391; }
.tl-pill-all.active { background: var(--primary); border-color: var(--primary); }

/* ── Signed checkmark inside toolbar pill ─────────────────────────────── */
.tl-pill-signed {
    display: inline-flex;
    align-items: center;
    color: #22c55e;
    flex-shrink: 0;
}
.tl-pill-tm.active .tl-pill-signed,
.tl-pill-tv.active .tl-pill-signed,
.tl-pill-tn.active .tl-pill-signed { color: rgba(255,255,255,.9); }

/* ── Shift status bar (one row per shift below toolbar) ─────────────── */
.tl-shift-statusbar {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    flex-shrink: 0;
}
.tl-sst-item {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    padding: 5px 12px;
    border-right: 1px solid #e8edf3;
    transition: background .15s;
    min-width: 0;
}
.tl-sst-item:last-child { border-right: none; }
.tl-sst-item.tl-sst-is-signed  { background: #f0fdf4; }
.tl-sst-item.tl-sst-is-active  { background: #fffbeb; }
.tl-sst-tm .tl-sst-abbr { color: #d97706; }
.tl-sst-tv .tl-sst-abbr { color: #6366f1; }
.tl-sst-tn .tl-sst-abbr { color: #178391; }
.tl-sst-abbr {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .04em;
    flex-shrink: 0;
}
.tl-sst-name {
    color: var(--text-muted);
    font-size: 10.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Action buttons group — pushed to the right */
.tl-sst-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}
/* Status badges */
.tl-sst-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tl-sst-firmada {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}
.tl-sst-borrador {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}
.tl-sst-active {
    background: #fef9c3;
    color: #854d0e;
    border: 1px solid #fde68a;
}
.tl-sst-none {
    background: transparent;
    color: #94a3b8;
    border: none;
    font-style: italic;
    font-weight: 400;
}
/* Unsign button (admin only, red) */
.tl-sst-unsign {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid #fca5a5;
    background: #fff;
    color: #ef4444;
    font-size: 10.5px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .12s, border-color .12s;
    white-space: nowrap;
}
.tl-sst-unsign:hover   { background: #fee2e2; border-color: #ef4444; }
.tl-sst-unsign:disabled { opacity: .5; pointer-events: none; }
.tl-sst-sign {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid #6ee7b7;
    background: #fff;
    color: #059669;
    font-size: 10.5px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .12s, border-color .12s;
    white-space: nowrap;
}
.tl-sst-sign:hover   { background: #d1fae5; border-color: #059669; }
.tl-sst-sign:disabled { opacity: .5; pointer-events: none; }

/* ── Traspaso button in shift status bar ───────────────────────────────────── */
.tl-sst-traspaso {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid #bfdbfe;
    background: #fff;
    color: #178391;
    font-size: 10.5px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .12s, border-color .12s;
    white-space: nowrap;
    position: relative;
}
.tl-sst-traspaso:hover   { background: #e8f6fb; border-color: #178391; }
.tl-sst-traspaso:disabled { opacity: .5; pointer-events: none; }
/* Blue dot indicator when this shift has a traspaso note */
.tl-sst-traspaso.has-note::after {
    content: '';
    position: absolute;
    top: 3px; right: 3px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #178391;
}

/* ── Traspaso drawer ───────────────────────────────────────────────────────── */
.traspaso-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1400;
}
.traspaso-backdrop.visible { display: block; }

.traspaso-drawer {
    position: fixed;
    top: 0; right: 0;
    width: 380px; max-width: 96vw;
    height: 100dvh;
    background: #fff;
    box-shadow: -4px 0 24px rgba(0,0,0,.15);
    z-index: 1401;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .22s ease;
}
.traspaso-drawer.open { transform: translateX(0); }

/* Header */
.traspaso-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
    gap: 8px;
}
.traspaso-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.traspaso-header-left svg { flex-shrink: 0; color: #178391; }
.traspaso-title {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
}
.traspaso-subtitle {
    font-size: 11px;
    color: #64748b;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.traspaso-close {
    border: none;
    background: none;
    cursor: pointer;
    color: #64748b;
    font-size: 20px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}
.traspaso-close:hover { background: #f1f5f9; color: #1e293b; }

/* Tabs */
.traspaso-tabs {
    display: flex;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}
.traspaso-tabs button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px 6px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    cursor: pointer;
    font-size: 11px;
    color: #64748b;
    transition: color .12s, border-color .12s, background .12s;
    position: relative;
}
.traspaso-tabs button:hover { background: #f8fafc; color: #1e293b; }
.traspaso-tabs button.active {
    color: #178391;
    border-bottom-color: #178391;
    font-weight: 600;
}
.traspaso-tab-abbr {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
}
.traspaso-tab-lbl {
    font-size: 9.5px;
    color: inherit;
}
/* Blue dot on tab when shift has a note */
.traspaso-tab-dot {
    display: none;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #178391;
    position: absolute;
    top: 6px; right: 8px;
}
.traspaso-tab-dot.has-note { display: block; }

/* Panes */
.traspaso-pane {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.traspaso-pane.active {
    display: flex;
}

/* Thread (message list) */
.traspaso-thread {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.traspaso-thread-empty {
    color: #94a3b8;
    font-size: 12px;
    font-style: italic;
    text-align: center;
    padding-top: 24px;
}
.traspaso-msg {
    background: #f0f7ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12.5px;
    color: #1e293b;
    line-height: 1.5;
}
.traspaso-msg-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    color: #178391;
    margin-bottom: 5px;
}
.traspaso-msg-text { white-space: pre-wrap; }

/* Compose area */
.traspaso-compose {
    border-top: 1px solid #e2e8f0;
    padding: 10px 14px 12px;
    flex-shrink: 0;
    background: #f8fafc;
}
.traspaso-compose textarea {
    width: 100%;
    min-height: 80px;
    max-height: 180px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12.5px;
    font-family: inherit;
    color: #1e293b;
    resize: vertical;
    background: #fff;
    box-sizing: border-box;
    outline: none;
    transition: border-color .12s;
}
.traspaso-compose textarea:focus { border-color: #178391; }
.traspaso-compose-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    gap: 8px;
}
.traspaso-save-status {
    font-size: 11px;
    color: #64748b;
    flex: 1;
}
.traspaso-send-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 7px;
    border: none;
    background: #178391;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, opacity .12s;
}
.traspaso-send-btn:hover { background: #033f3f; }
.traspaso-send-btn:disabled { opacity: .45; pointer-events: none; }

@media (max-width: 480px) {
    .traspaso-drawer { width: 100vw; }
}

/* ── Status bar responsive: progressive reduction ───────────────────── */
/* ≤960px: hide shift long name (abbr still visible) */
@media (max-width: 960px) {
    .tl-sst-name { display: none; }
    .tl-sst-item { padding: 5px 8px; gap: 3px 5px; min-width: 0; }
}
/* ≤720px: icon-only buttons — hide text labels */
@media (max-width: 720px) {
    .tl-sst-btn-label { display: none; }
    .tl-sst-unsign,
    .tl-sst-sign,
    .tl-sst-traspaso {
        padding: 4px 6px;
        gap: 0;
    }
    /* Tighten dot position for icon-only traspaso btn */
    .tl-sst-traspaso.has-note::after {
        top: 2px; right: 2px;
        width: 5px; height: 5px;
    }
}
/* ≤480px: items wrap to two rows (info row + buttons row) */
@media (max-width: 480px) {
    .tl-shift-statusbar { flex-wrap: wrap; }
    .tl-sst-item {
        flex: none;
        width: calc(33.333% - 1px);
        flex-direction: column;
        align-items: flex-start;
        padding: 4px 8px;
        gap: 3px;
        overflow: hidden;
    }
    .tl-sst-actions {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
    }
    .tl-sst-badge {
        font-size: 9px;
        padding: 1px 5px;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* On mobile, hide the 'Firmado · ' prefix and show only the signer name */
    .tl-sst-badge .sst-firmado-label { display: none; }
}

/* Separator between shift pills and VS toggle */
.tl-pills-sep {
    display: inline-block;
    width: 1px;
    height: 18px;
    background: #e2e8f0;
    margin: 0 2px;
    flex-shrink: 0;
    align-self: center;
}

/* Signos Vitales toolbar toggle button */
.tl-vs-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 6px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    font-size: 11px;
    font-weight: 600;
    color: #ef4444;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
    white-space: nowrap;
}
.tl-vs-toggle svg { flex-shrink: 0; }
.tl-vs-toggle:hover {
    border-color: #ef4444;
    background: #fff1f2;
    box-shadow: 0 0 0 2px rgba(239,68,68,.1);
}
.tl-vs-toggle.tl-vs-toggle-on {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
    box-shadow: 0 2px 8px rgba(239,68,68,.25);
}
.tl-vs-toggle.tl-vs-toggle-on:hover {
    background: #dc2626;
    border-color: #dc2626;
}

.tl-actions { display: flex; gap: 8px; }
.tl-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 6px;
    border: 1.5px dashed var(--border);
    background: transparent;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all .15s;
}
.tl-add-btn:hover { border-color: var(--primary); color: var(--primary); background: #f0f4ff; }

/* ── Two-column timeline wrapper ───────────────────────────── */
.tl-wrap {
    display: grid;
    grid-template-columns: 1fr 32px 1fr;
    gap: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding: 0 0 16px;
}

/* ── Column headers ────────────────────────────────────────── */
.tl-col-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 2;
}
.tl-col-icon {
    width: 26px; height: 26px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.tl-col-icon-left  { background: #fef9c3; color: #b45309; }
.tl-col-icon-right { background: #f0fdf4; color: #15803d; }
.tl-col-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
}
.tl-col-sub {
    font-size: 10px;
    color: var(--text-muted);
    margin-left: 2px;
}
.tl-col-body {
    padding: 10px 10px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Center axis ────────────────────────────────────────────── */
.tl-axis {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tl-axis-line {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 2px;
    background: var(--border);
    transform: translateX(-50%);
}
/* Shift change markers */
.tl-axis-marker {
    position: relative;
    z-index: 1;
    margin-top: 8px;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px;
    font-weight: 700;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
    cursor: default;
    color: #fff;
}
.tl-axis-marker-tm { background: #f59e0b; }
.tl-axis-marker-tv { background: #6366f1; }
.tl-axis-marker-tn { background: #178391; }

/* ── Empty states ───────────────────────────────────────────── */
.tl-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
    opacity: .7;
}

/* ── RX cards inside the left timeline column ──────────────── */
.tl-rx-shift-group { margin-bottom: 6px; }
.tl-rx-shift-hd {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
}
.tl-rx-shift-hd-tm { background: #fef9c3; color: #b45309; }
.tl-rx-shift-hd-tv { background: #eef2ff; color: #4338ca; }
.tl-rx-shift-hd-tn { background: #e8f6fb; color: #0369a1; }

/* ── Observation (right column) entry cards ─────────────────── */
.tl-obs-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 2px 7px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    transition: box-shadow .12s;
}
.tl-obs-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.10); }
/* Resident name badge inside timeline card */
.tl-obs-res {
    font-size: 9px;
    font-weight: 700;
    color: var(--primary);
    background: #eef2ff;
    border-radius: 4px;
    padding: 1px 4px;
    flex-shrink: 0;
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: .1px;
}
/* chip-text: grows but clips */
.tl-obs-chip-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
    color: var(--text);
    font-size: 10px;
}
.tl-obs-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.tl-obs-cat {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    flex-shrink: 0;
}
.tl-obs-time {
    font-size: 9px;
    color: var(--text-muted);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    opacity: .8;
}
/* keep old .tl-obs-meta / .tl-obs-text / .tl-obs-card-top as no-ops for safety */
.tl-obs-card-top { display: contents; }
.tl-obs-meta { display: contents; }
.tl-obs-text { display: none; }
/* Category colors for dots */
.tl-obs-cat-alert  { color: #dc2626; }
.tl-obs-dot-alert  { background: #dc2626; }
.tl-obs-cat-med    { color: #7c3aed; }
.tl-obs-dot-med    { background: #7c3aed; }
.tl-obs-cat-incident { color: #d97706; }
.tl-obs-dot-incident { background: #d97706; }
.tl-obs-cat-pain   { color: #db2777; }
.tl-obs-dot-pain   { background: #db2777; }
.tl-obs-cat-behavior { color: #0891b2; }
.tl-obs-dot-behavior { background: #0891b2; }
.tl-obs-cat-gen    { color: #64748b; }
.tl-obs-dot-gen    { background: #94a3b8; }

/* ── Quick-add panel (below the two columns) ────────────────── */
.tl-quick-add {
    border-top: 1px solid var(--border);
    background: var(--bg);
    flex-shrink: 0;
}
.tl-qa-shift-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
.tl-qa-turno {
    padding: 10px 14px;
    border-right: 1px solid var(--border);
}
.tl-qa-turno:last-child { border-right: none; }
.tl-qa-turno-hd {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.tl-qa-turno-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    color: #fff;
    flex-shrink: 0;
}
.tl-qa-tm { background: #f59e0b; }
.tl-qa-tv { background: #6366f1; }
.tl-qa-tn { background: #178391; }

/* Sign button inside quick-add turno footer */
.tl-sign-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all .15s;
    margin-left: auto;
}
.tl-sign-btn:hover { border-color: #10b981; color: #10b981; background: #f0fdf4; }
.tl-sign-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Responsive: side-by-side columns on mobile ─────────────── */
@media (max-width: 860px) {
    .tl-wrap {
        grid-template-columns: 1fr 1fr; /* parallel, not stacked */
    }
    .tl-axis { display: none; }
    .tl-col-left { border-right: 1px solid var(--border); }
    .tl-qa-shift-row { grid-template-columns: 1fr; }
    .tl-qa-turno { border-right: none; border-bottom: 1px solid var(--border); }
    .tl-qa-turno:last-child { border-bottom: none; }
}

/*  TIMELINE 24-HOUR REDESIGN  */
:root { --tl-hr: 48px; }

/* Wider axis for hour labels */
.tl-wrap { grid-template-columns: 1fr 40px 1fr; }

/* Positioned body: height = 24  --tl-hr */
.tl-col-body {
    position: relative;
    height: calc(var(--tl-hr) * 24);
    padding: 0;
    overflow: visible;
    display: block;
}
.tl-col-body > .tl-empty-state {
    position: absolute;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
}

/* Hourly grid lines */
.tl-hour-row {
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: var(--border);
    pointer-events: none;
    z-index: 0;
}
.tl-hour-row-major { background: var(--border-dark, #cbd5e1); }

/* Shift-zone background bands */
.tl-shift-band {
    position: absolute;
    left: 0; right: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.20;
}
.tl-band-tm { background: #f59e0b; }
.tl-band-tv { background: #6366f1; }
.tl-band-tn { background: #178391; }

/* Current-time indicator */
.tl-now-line {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: #ef4444;
    z-index: 6;
    pointer-events: none;
}
.tl-now-line::before {
    content: '';
    position: absolute;
    left: -5px; top: -4px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #ef4444;
}

/* RX dose chips  absolutely positioned at scheduled time */
.tl-rx-chip {
    position: absolute;
    left: 6px; right: 6px;
    transform: translateY(-50%);
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1.6;
    z-index: 2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: box-shadow .12s, z-index 0s;
    background: var(--surface);
}
.tl-rx-chip:hover { box-shadow: 0 2px 10px rgba(0,0,0,.18); z-index: 10; overflow: visible; }
.tl-rx-chip-tm { background: #fefce8; border-color: #fde68a; color: #92400e; }
.tl-rx-chip-tv { background: #eef2ff; border-color: #c7d2fe; color: #3730a3; }
.tl-rx-chip-tn { background: #e8f6fb; border-color: #bae6fd; color: #0c4a6e; }
.tl-rx-chip-adm { background: #f0fdf4 !important; border-color: #86efac !important; color: #14532d !important; }
.tl-rx-chip-skip { opacity: 0.45; text-decoration: line-through; }
.tl-rx-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tl-rx-time { font-size: 9px; opacity: 0.8; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.tl-rx-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    flex-shrink: 0;
    display: inline-block;
}
.tl-rx-icon { flex-shrink: 0; }

/* Obs cards  absolutely positioned at recorded time */
.tl-obs-card {
    position: absolute;
    left: 6px; right: 6px;
    transform: translateY(-50%);
    z-index: 2;
    border-left-width: 3px;
    margin: 0;
}
.tl-obs-card:hover { z-index: 10; overflow: visible; }

/* 24-hour axis */
.tl-axis {
    position: relative;
    height: calc(var(--tl-hr) * 24);
    display: block;
}
.tl-axis-line {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--border);
    transform: translateX(-50%);
}

/* Hour tick labels on axis */
.tl-hour-tick {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 8px;
    color: var(--text-muted);
    background: var(--surface);
    padding: 0 2px;
    border-radius: 2px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    z-index: 3;
    letter-spacing: -0.3px;
}
.tl-hour-tick-major {
    font-weight: 700;
    color: var(--text);
    font-size: 9px;
}

/* Override old axis-marker positioning */
.tl-axis-marker {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2px 5px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    z-index: 4;
    pointer-events: none;
    width: auto;
    height: auto;
    box-shadow: none;
    border: none;
    margin: 0;
}

/* Responsive: reduce density on small screens */
@media (max-width: 860px) {
    :root { --tl-hr: 32px; }
    .tl-axis { display: none; }
    .tl-wrap { grid-template-columns: 1fr 1fr; }

    /* Compact column headers */
    .tl-col-header { padding: 5px 7px; gap: 4px; }
    .tl-col-icon { width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0; }
    .tl-col-icon svg { width: 11px; height: 11px; }
    .tl-col-sub { display: none; }
    .tl-col-title { font-size: 11px; }

    /* Slimmer chips */
    .tl-rx-chip  { font-size: 9px; padding: 1px 5px; gap: 3px; }
    .tl-obs-card { font-size: 9px; padding: 1px 5px; gap: 3px; }
    .tl-obs-chip-text { max-width: 54px; }

    /* Compact shift status bar */
    .tl-sst-name   { display: none; }
    .tl-sst-badge  { font-size: 9px; padding: 1px 5px; }
    .tl-sst-unsign { font-size: 9px; padding: 2px 5px; }
    .tl-sst-item   { padding: 4px 7px; gap: 4px; }

    /* Compact toolbar pills */
    .tl-shift-pill { padding: 3px 8px; font-size: 10px; }
    .tl-shift-label { display: none; }
}

/* 
   OBS DRAWER   right-side slide-in panel for observations
    */
.obs-drawer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.38);
    z-index: 1199;
    backdrop-filter: blur(1px);
    transition: opacity .2s;
}
.obs-drawer-backdrop.open { display: block; animation: _bdFadeIn .2s ease; }
@keyframes _bdFadeIn { from { opacity:0 } to { opacity:1 } }

.obs-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 380px;
    max-width: 100vw;
    background: #fff;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0,0,0,.18);
    transform: translateX(100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    border-radius: 14px 0 0 14px;
}
.obs-drawer.open { transform: translateX(0); }

/* Prevent body scroll when drawer is open */
body.obs-drawer-open { overflow: hidden; }

/* Header */
.obs-drawer-hd {
    padding: 16px 16px 0;
}
.obs-drawer-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.obs-drawer-title {
    font-size: .95rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: .01em;
}
.obs-drawer-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #64748b;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: background .15s, color .15s;
}
.obs-drawer-close-btn:hover { background: #f1f5f9; color: #ef4444; }

/* Shift tabs row */
.obs-drawer-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
}
.obs-drawer-shift-tab {
    padding: 5px 14px;
    border-radius: 99px;
    font-size: .78rem;
    font-weight: 600;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    background: #f1f5f9;
    color: #475569;
}
/* Per-shift tab colors */
.obs-dst-tm                   { border-color: #f59e0b22; }
.obs-dst-tm:hover             { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.obs-dst-tm.active            { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.obs-dst-tv                   { border-color: #17839122; }
.obs-dst-tv:hover             { background: #e8f6fb; border-color: #178391; color: #033f3f; }
.obs-dst-tv.active            { background: #e8f6fb; border-color: #178391; color: #033f3f; }
.obs-dst-tn                   { border-color: #6366f122; }
.obs-dst-tn:hover             { background: #ede9fe; border-color: #6366f1; color: #4338ca; }
.obs-dst-tn.active            { background: #ede9fe; border-color: #6366f1; color: #4338ca; }

/* Status pill inside drawer */
.obs-drawer-statuspill-active {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: .72rem;
    font-weight: 600;
    margin-left: auto;
}

/* Autor attribution row (visible in edit mode) */
.obs-drawer-autor-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #94a3b8;
    padding: 3px 16px 5px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.obs-drawer-autor-row svg { flex-shrink: 0; color: #b0bad0; }
.obs-drawer-autor-row strong { color: #64748b; font-weight: 600; }
.obs-drawer-nurse-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid #e2e8f0;
}
.obs-drawer-nurse-row label {
    font-size: .8rem;
    color: #64748b;
    white-space: nowrap;
}
.obs-drawer-nurse-select {
    flex: 1;
    font-size: .82rem;
    padding: 5px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #f8fafc;
    color: #1e293b;
    outline: none;
    transition: border-color .15s;
}
.obs-drawer-nurse-select:focus { border-color: #6366f1; }

/* Body (chips + textarea) */
.obs-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Category chips */
.obs-drawer-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.obs-drawer-chip {
    padding: 5px 13px;
    border-radius: 99px;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    transition: background .15s, border-color .15s, transform .1s;
    user-select: none;
}
.obs-drawer-chip:hover { transform: translateY(-1px); filter: brightness(.96); }
.obs-drawer-chip.obs-drawer-chip-active {
    outline: 3px solid #6366f1;
    outline-offset: 2px;
    box-shadow: 0 0 0 1px #6366f133;
}

/* Textarea */
.obs-drawer-textarea {
    width: 100%;
    min-height: 110px;
    resize: vertical;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: .88rem;
    color: #1e293b;
    background: #f8fafc;
    outline: none;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.obs-drawer-textarea:focus { border-color: #6366f1; box-shadow: 0 0 0 3px #6366f122; background: #fff; }
.obs-drawer-textarea.shake { animation: _shake .35s; }
@keyframes _shake {
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(-5px)}
    40%{transform:translateX(5px)}
    60%{transform:translateX(-4px)}
    80%{transform:translateX(4px)}
}

/* Footer */
.obs-drawer-footer {
    padding: 10px 16px 16px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.obs-drawer-count {
    font-size: .75rem;
    color: #94a3b8;
    text-align: right;
    min-height: 1em;
}
.obs-drawer-footer-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.obs-drawer-cancel-btn {
    order: 0;
    flex: 1 1 0%;
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    background: #f8fafc;
    color: #64748b;
    font-size: .83rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.obs-drawer-cancel-btn:hover { background: #f1f5f9; color: #ef4444; }
.obs-drawer-delete-btn {
    order: 0;
    flex: 1 1 0%;
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    background: #fff5f5;
    color: #dc2626;
    font-size: .83rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background .15s;
}
.obs-drawer-delete-btn:hover  { background: #fee2e2; }
.obs-drawer-delete-btn:active { transform: scale(.97); }
.obs-drawer-sign-btn {
    order: 0;
    flex: 1 1 0%;
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    background: #0f172a;
    color: #fff;
    font-size: .83rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.obs-drawer-sign-btn:hover { background: #1e293b; }
.obs-drawer-submit-btn {
    order: 1;
    flex: 1 1 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    background: #6366f1;
    color: #fff;
    font-size: .83rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: .01em;
    transition: background .15s, transform .1s;
}
.obs-drawer-submit-btn:hover  { background: #4f46e5; }
.obs-drawer-submit-btn:active { transform: scale(.98); }

/* Mobile: drawer from bottom, full width */
@media (max-width: 860px) {
    .obs-drawer {
        top: auto;
        left: 0; right: 0; bottom: 0;
        width: 100%;
        height: 90vh;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }
    .obs-drawer.open { transform: translateY(0); }
}
/*  */

/* 
   OBS DRAWER  time input + section label extras
    */
.obs-drawer-time-input {
    width: 110px;
    padding: 5px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #f8fafc;
    color: #1e293b;
    font-size: .82rem;
    outline: none;
    transition: border-color .15s;
    flex-shrink: 0;
}
.obs-drawer-time-input:focus { border-color: #6366f1; }
.obs-drawer-section-lbl {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .07em;
}

/* 
   TIMELINE DRAG & DROP
    */

/* Right col: crosshair cursor hints "click to add" */
#tlRightBody { cursor: crosshair; }

/* Obs cards: draggable grab cursor */
#tlRightBody .tl-obs-card {
    cursor: grab;
    transition: opacity .15s, box-shadow .15s, transform .12s;
    user-select: none;
}
#tlRightBody .tl-obs-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.13);
    z-index: 5;
}
#tlRightBody .tl-obs-card:active { cursor: grabbing; }
#tlRightBody .tl-obs-card.tl-obs-dragging {
    opacity: .35;
    transform: translateY(-50%) scale(.95);
    box-shadow: none;
    cursor: grabbing;
    pointer-events: none;
}

/* Drop indicator: horizontal purple line */
.tl-drag-indicator {
    position: absolute;
    left: 4px; right: 4px;
    height: 2px;
    background: #6366f1;
    border-radius: 2px;
    pointer-events: none;
    z-index: 30;
    display: none;
}
.tl-drag-indicator::before {
    content: '';
    position: absolute;
    left: -5px; top: -4px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #6366f1;
}
/* Fixed drag-time tooltip — appended to <body> so nothing can clip it */
.tl-drag-tooltip {
    position: fixed;
    z-index: 9999;
    background: #6366f1;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 3px 8px;
    border-radius: 5px;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(99,102,241,.45);
    display: none;
}
/*  */

/* 
   OBS DRAWER  Category tabs + quick-option panels
    */

/*  Category selector row  */
/* ── Obs Drawer Accordion ─────────────────────────────────────── */
.obs-accordion {
    padding: 2px 0;
}
.obs-acc-group {
    border-bottom: 1px solid #f1f5f9;
}
.obs-acc-group:last-child { border-bottom: none; }

.obs-acc-head {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 9px 16px;
    background: none; border: none; cursor: pointer;
    text-align: left; font-size: .78rem; font-weight: 600;
    color: #475569; transition: background .12s;
}
.obs-acc-head:hover { background: #f8fafc; }
.obs-acc-ico  { font-size: 13px; flex-shrink: 0; width: 18px; text-align: center; }
.obs-acc-lbl  { flex: 1; }
.obs-acc-chev { flex-shrink: 0; color: #94a3b8; transition: transform .2s; }
.obs-acc-open .obs-acc-chev { transform: rotate(180deg); }

.obs-acc-body {
    display: none;
    padding: 0 12px 10px;
}
.obs-acc-open .obs-acc-body { display: block; }

/* Per-category head active tints */
.obs-acc-alert    .obs-acc-head-active { color: #b91c1c; background: #fff5f5; }
.obs-acc-med      .obs-acc-head-active { color: #065f46; background: #f0fdf4; }
.obs-acc-pain     .obs-acc-head-active { color: #831843; background: #fdf2f8; }
.obs-acc-incident .obs-acc-head-active { color: #78350f; background: #fffbeb; }
.obs-acc-behavior .obs-acc-head-active { color: #4c1d95; background: #f5f3ff; }
.obs-acc-sleep    .obs-acc-head-active { color: #1e3a5f; background: #e8f6fb; }
.obs-acc-food     .obs-acc-head-active { color: #7c2d12; background: #fff7ed; }
.obs-acc-hygiene  .obs-acc-head-active { color: #134e4a; background: #f0fdfa; }
.obs-acc-mobility    .obs-acc-head-active { color: #365314; background: #f7fee7; }
.obs-acc-elimination .obs-acc-head-active { color: #713f12; background: #fefce8; }
.obs-acc-gen         .obs-acc-head-active { color: #0c4a6e; background: #e8f6fb; }

/* Lock covers accordion too */
.obs-drawer-locked .obs-accordion { opacity: .5; pointer-events: none; }
.obs-drawer-locked .obs-cat-bar   { opacity: .5; pointer-events: none; }
.obs-drawer-locked .obs-cat-options { opacity: .5; pointer-events: none; }

/* ── Category chip bar ─────────────────────────────────────────── */
.obs-cat-bar {
    padding: 0 16px;
}
.obs-cat-bar-label {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 7px;
}
.obs-cat-chips {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.obs-cat-chip {
    padding: 4px 10px;
    border-radius: 99px;
    font-size: .7rem;
    font-weight: 600;
    border: 1.5px solid #e2e8f0;
    cursor: pointer;
    background: #f8fafc;
    color: #64748b;
    white-space: nowrap;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
    line-height: 1.35;
}
.obs-cat-chip:hover {
    transform: translateY(-1px);
    border-color: #cbd5e1;
    background: #f1f5f9;
}
/* Active chip state */
.obs-cat-chip.obs-cat-chip-on {
    transform: none;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
/* Per-category active chip colors */
.obs-cat-chip-gen.obs-cat-chip-on          { background: #e8f6fb; border-color: #7dd3fc; color: #0c4a6e; }
.obs-cat-chip-alert.obs-cat-chip-on        { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.obs-cat-chip-med.obs-cat-chip-on          { background: #dcfce7; border-color: #86efac; color: #14532d; }
.obs-cat-chip-pain.obs-cat-chip-on         { background: #fce7f3; border-color: #f9a8d4; color: #831843; }
.obs-cat-chip-incident.obs-cat-chip-on     { background: #fef3c7; border-color: #fcd34d; color: #78350f; }
.obs-cat-chip-behavior.obs-cat-chip-on     { background: #ede9fe; border-color: #c4b5fd; color: #4c1d95; }
.obs-cat-chip-sleep.obs-cat-chip-on        { background: #e8f6fb; border-color: #9db9d0; color: #033f3f; }
.obs-cat-chip-food.obs-cat-chip-on         { background: #ffedd5; border-color: #fdba74; color: #7c2d12; }
.obs-cat-chip-hygiene.obs-cat-chip-on      { background: #ccfbf1; border-color: #5eead4; color: #134e4a; }
.obs-cat-chip-mobility.obs-cat-chip-on     { background: #ecfccb; border-color: #a3e635; color: #365314; }
.obs-cat-chip-elimination.obs-cat-chip-on  { background: #fef9c3; border-color: #fde047; color: #713f12; }

/* Quick-option panels container */
.obs-cat-options {
    padding: 4px 16px 0;
}
.obs-cat-panel {
    animation: _catPanelIn .15s ease;
}
@keyframes _catPanelIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/*  Quick-option panels  */
.obs-quick-panel {
    padding: 10px 16px 4px;
}
.obs-quick-label {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 8px;
}
.obs-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}
.obs-quick-grid-2col {
    grid-template-columns: repeat(2, 1fr);
}
.obs-quick-opt {
    padding: 7px 8px;
    border-radius: 8px;
    font-size: .76rem;
    font-weight: 600;
    border: 1.5px solid transparent;
    cursor: pointer;
    text-align: left;
    line-height: 1.3;
    transition: background .12s, border-color .12s, transform .1s;
    background: #f8fafc;
    color: #334155;
    border-color: #e2e8f0;
}
.obs-quick-opt:hover   { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.obs-quick-opt:active  { transform: scale(.97); }
.obs-quick-opt:disabled { opacity: .35; cursor: not-allowed; transform: none; }

/* Per-category quick option tints */
.obs-qo-alert    { background: #fff5f5; border-color: #fecaca; color: #991b1b; }
.obs-qo-alert:hover { background: #fee2e2; }
.obs-qo-med      { background: #f0fdf4; border-color: #86efac; color: #14532d; }
.obs-qo-med:hover { background: #dcfce7; }
.obs-qo-incident { background: #fffbeb; border-color: #fde68a; color: #78350f; }
.obs-qo-incident:hover { background: #fef3c7; }
.obs-qo-pain     { background: #fdf2f8; border-color: #fbcfe8; color: #831843; }
.obs-qo-pain:hover { background: #fce7f3; }
.obs-qo-behavior { background: #f5f3ff; border-color: #ddd6fe; color: #4c1d95; }
.obs-qo-behavior:hover { background: #ede9fe; }
.obs-qo-gen      { background: #e8f6fb; border-color: #bae6fd; color: #0c4a6e; }
.obs-qo-gen:hover { background: #e8f6fb; }

/* New category quick option tints */
.obs-qo-sleep    { background: #e8f6fb; border-color: #bfdbfe; color: #033f3f; }
.obs-qo-sleep:hover { background: #e8f6fb; }
.obs-qo-food     { background: #fff7ed; border-color: #fed7aa; color: #7c2d12; }
.obs-qo-food:hover { background: #ffedd5; }
.obs-qo-hygiene  { background: #f0fdfa; border-color: #99f6e4; color: #134e4a; }
.obs-qo-hygiene:hover { background: #ccfbf1; }
.obs-qo-mobility { background: #f7fee7; border-color: #bef264; color: #365314; }
.obs-qo-mobility:hover { background: #ecfccb; }
.obs-qo-elimination { background: #fefce8; border-color: #fde047; color: #713f12; }
.obs-qo-elimination:hover { background: #fef9c3; }

/* General event duration section (below textarea, all categories) */
.evt-dur-section {
    margin: 8px 16px 0;
    padding: 10px 12px 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.dur-lbl-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.dur-lbl, .dur-end-lbl {
    font-size: 10.5px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .05em;
    flex-shrink: 0;
    min-width: 64px;
}
.dur-btns {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.dur-btn {
    padding: 4px 9px;
    font-size: 11.5px;
    font-weight: 600;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #fff;
    color: #475569;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    line-height: 1.4;
}
.dur-btn:hover { background: #f1f5f9; border-color: #94a3b8; color: #1e293b; }
.dur-btn.dur-btn-on { background: #334155; border-color: #334155; color: #fff; }
.dur-end-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dur-end-row .obs-drawer-time-input { width: 120px; }

/*  Textarea wrap  */
.obs-textarea-wrap {
    padding: 10px 16px 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}
.obs-textarea-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .07em;
}

/*  Lock notice  */
.obs-drawer-lock-notice {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 7px 12px;
    margin-bottom: 6px;
}
.obs-drawer-locked .obs-drawer-textarea { opacity: .5; pointer-events: none; }

/*  Body scrollable region  */
.obs-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0 4px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* override previous padding rule for body */
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/*  */

/* ═══════════════════════════════════════════════════════════════════════════
   SIGNOS VITALES — collapsible section below timeline
   ═══════════════════════════════════════════════════════════════════════════ */

/* Section wrapper */
.vs-section {
    margin: 0;
    border: none;
    border-top: 1px solid #e2e8f0;
    border-radius: 0;
    background: #fff;
    overflow: hidden;
    box-shadow: none;
    flex: 1;          /* fills editor height when vitals view is active */
    min-height: 0;    /* allow flex child to shrink below content size */
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Collapsible header — now used as a decorative section bar (non-interactive in tab mode) */
.vs-section-hd {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 18px;
    cursor: default;
    user-select: none;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.vs-section-hd-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.vs-section-hd-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
/* Per-shift color tints on the save buttons */
.vs-save-btn-tm { color: #92400e; background: #fef9c3; border-color: #fde68a; }
.vs-save-btn-tm:hover { background: #fef08a; border-color: #fbbf24; }
.vs-save-btn-tv { color: #3730a3; background: #e0e7ff; border-color: #c7d2fe; }
.vs-save-btn-tv:hover { background: #c7d2fe; border-color: #a5b4fc; }
.vs-save-btn-tn { color: #075985; background: #e8f6fb; border-color: #bae6fd; }
.vs-save-btn-tn:hover { background: #bae6fd; border-color: #7dd3fc; }
.vs-section-icon {
    color: #ef4444;
    flex-shrink: 0;
}
.vs-section-title {
    font-size: .92rem;
    font-weight: 700;
    color: #1e293b;
}
.vs-section-sub {
    font-size: .76rem;
    color: #94a3b8;
    font-weight: 400;
}
.vs-section-chevron {
    color: #94a3b8;
    transition: transform .2s;
    flex-shrink: 0;
}

/* Section body — grows to fill vs-section and scrolls vertically */
.vs-section-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Per-shift panel — kept for compat but no longer rendered */
.vs-panel { border-bottom: 1px solid #f1f5f9; }
.vs-panel:last-child { border-bottom: none; }
.vs-panel-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 14px;
    background: #fafafa;
    border-bottom: 1px solid #f1f5f9;
}

/* ── Group separator rows (one per shift) ────────────────────────────── */
.vs-group-row td {
    padding: 5px 10px;
    font-size: .72rem;
    font-weight: 700;
    vertical-align: middle;
    border-bottom: 1px solid #e2e8f0;
}
.vs-group-row.vs-group-tm td { background: #fef9c3; border-left: 3px solid #f59e0b; }
.vs-group-row.vs-group-tv td { background: #ede9fe; border-left: 3px solid #8b5cf6; }
.vs-group-row.vs-group-tn td { background: #e8f6fb; border-left: 3px solid #178391; }


/* ── Data row backgrounds per shift ───────────────────────────────── */
.vs-row-tm { background: #fffef0; border-left: 3px solid #fde68a; }
.vs-row-tv { background: #faf8ff; border-left: 3px solid #ddd6fe; }
.vs-row-tn { background: #e8f6fb; border-left: 3px solid #bae6fd; }
.vs-row-tm:hover { background: #fef9c3 !important; }
.vs-row-tv:hover { background: #ede9fe !important; }
.vs-row-tn:hover { background: #e8f6fb !important; }
/* Override the generic zebra rule for shift rows */
.vs-row.vs-row-tm:nth-child(even),
.vs-row.vs-row-tv:nth-child(even),
.vs-row.vs-row-tn:nth-child(even) { background: inherit; }

/* Shift badges */
.vs-panel-badge,
.vs-group-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .76rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: .02em;
}
.vs-panel-hours {
    font-weight: 400;
    opacity: .75;
}
.vs-badge-tm {
    background: #fef9c3;
    color: #713f12;
    border: 1px solid #fde68a;
}
.vs-badge-tv {
    background: #ede9fe;
    color: #4c1d95;
    border: 1px solid #ddd6fe;
}
.vs-badge-tn {
    background: #e8f6fb;
    color: #0c4a6e;
    border: 1px solid #bae6fd;
}

/* Save button */
.vs-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: .78rem;
    font-weight: 600;
    color: #0f766e;
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, border-color .15s, opacity .15s;
}
.vs-save-btn:hover {
    background: #ccfbf1;
    border-color: #5eead4;
}
.vs-save-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ── Vitals auto-save status indicator ────────────────────────────────── */
.vs-autosave-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .72rem;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
    opacity: 1;
    transition: opacity .4s ease;
    margin-right: 4px;
    vertical-align: middle;
}
.vs-autosave-status.vs-as-idle    { display: none; }
.vs-autosave-status.vs-as-saving  { color: #64748b; background: #f1f5f9; border: 1px solid #e2e8f0; }
.vs-autosave-status.vs-as-saved   { color: #0f766e; background: #f0fdfa; border: 1px solid #99f6e4; }
.vs-autosave-status.vs-as-error   { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; }
.vs-autosave-status.vs-as-fadeout { opacity: 0; }
.vs-as-dot {
    display: inline-block;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
    animation: vsDotPulse .9s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes vsDotPulse {
    0%, 100% { opacity: 1;  transform: scale(1);   }
    50%       { opacity: .3; transform: scale(.65); }
}

/* Horizontal-scroll wrapper for table */
.vs-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* The vitals table */
.vs-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    font-size: .8rem;
    table-layout: fixed;
}
.vs-table thead tr {
    background: #f1f5f9;
    border-bottom: 2px solid #e2e8f0;
}
.vs-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}
.vs-table thead th {
    padding: 6px 4px;
    font-size: .7rem;
    font-weight: 700;
    color: #64748b;
    text-align: center;
    white-space: nowrap;
    background: #f1f5f9;
}
.vs-table thead th small {
    display: block;
    font-size: .64rem;
    font-weight: 400;
    color: #94a3b8;
    line-height: 1.1;
}
.vs-th-time   { width: 52px; text-align: left; padding-left: 12px !important; }
.vs-th-num    { width: 56px; }
.vs-th-ta     { width: 86px; }  /* merged P.A. column (replaces two 56px TA cols) */
.vs-th-mood   { width: 96px; }

/* Combined blood-pressure cell */
.vs-ta-cell   { text-align: center; white-space: nowrap; padding: 2px 2px !important; }
.vs-num-ta    { width: 34px; }          /* narrower variant inside the merged cell */
.vs-ta-sep    { font-size: .8rem; color: #94a3b8; padding: 0 1px; user-select: none; vertical-align: middle; }


/* Rows */
.vs-row {
    border-bottom: 1px solid #f1f5f9;
    transition: background .1s;
}
.vs-row:nth-child(even) { background: #f9fafb; }
.vs-row:last-child { border-bottom: none; }
.vs-row:hover { background: #e8f6fb !important; }

.vs-row td {
    padding: 3px 3px;
    vertical-align: middle;
}

/* Time label cell */
.vs-time-val {
    padding-left: 14px !important;
    font-size: .79rem;
    font-weight: 700;
    color: #475569;
    white-space: nowrap;
    letter-spacing: .01em;
}

/* Numeric input cells */
.vs-num-cell { text-align: center; }

.vs-num {
    width: 46px;
    padding: 3px 4px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: .8rem;
    text-align: center;
    color: #1e293b;
    background: #f8fafc;
    outline: none;
    transition: border-color .15s, background .15s;
    -moz-appearance: textfield;
}
.vs-num::-webkit-outer-spin-button,
.vs-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vs-num:focus {
    border-color: #6366f1;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.vs-num::placeholder { color: #cbd5e1; }

/* Live validation colors */
.vs-num.vs-ok     { border-color: #86efac; background: #f0fdf4; color: #166534; }
.vs-num.vs-warn   { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.vs-num.vs-danger { border-color: #fca5a5; background: #fef2f2; color: #991b1b; }

/* Mood cell */
.vs-mood-cell {
    text-align: center;
    white-space: nowrap;
    padding: 2px 3px !important;
}

/* Override global .mood-btn inside the vitals table */
.vs-table .mood-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1.5px solid #e2e8f0;
    border-radius: 5px;
    background: #f8fafc;
    cursor: pointer;
    color: #94a3b8;
    font-size: 0;
    line-height: 1;
    transition: border-color .12s, background .12s, color .12s, transform .1s;
    opacity: 1;
    vertical-align: middle;
}
.vs-table .mood-btn + .mood-btn { margin-left: 2px; }
.vs-table .mood-btn:focus { outline: none; }
.vs-table .mood-btn:hover {
    border-color: #6366f1;
    background: #eef2ff;
    color: #6366f1;
    transform: scale(1.12);
}
.vs-table .mood-btn.mood-selected[data-mood="bien"] {
    background: #dcfce7; border-color: #4ade80; color: #15803d;
}
.vs-table .mood-btn.mood-selected[data-mood="regular"] {
    background: #f1f5f9; border-color: #94a3b8; color: #475569;
}
.vs-table .mood-btn.mood-selected[data-mood="mal"] {
    background: #fee2e2; border-color: #f87171; color: #dc2626;
}
.vs-table .mood-btn.mood-selected[data-mood="agitado"] {
    background: #fee2e2; border-color: #f87171; color: #dc2626;
}



/* Responsive: stack panels on small screens */
@media (max-width: 700px) {
    .vs-section { border-radius: 10px; }
    .vs-panel-hd { flex-direction: column; align-items: flex-start; gap: 8px; }
    .vs-save-btn { align-self: flex-end; }
    .vs-num { width: 44px; font-size: .78rem; }
    .vs-th-mood { width: 90px; }
    .mood-btn { font-size: 1rem; padding: 1px 2px; }
}



/* 
   SWIMLANE GRID  (replaces old tl-wrap two-column layout)
    */

/*  Grid container (same id=tlWrap as before)  */
/* ════ Google Calendar–style swimlane grid ═══════════════════════════════ */

/* Main grid container — handles BOTH horizontal and vertical scroll.
   The h-scrollbar sits at the bottom of the element's visible box (= bottom of the
   viewport area) so it is always reachable regardless of how far the user has scrolled
   vertically. The sticky .sl-header-row stays pinned at the top during v-scroll. */
.sl-grid {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;     /* vertical scroll for 24-hour timeline content */
    overflow-x: scroll;   /* always-on h-scrollbar at bottom of visible grid */
    border-top: 1px solid var(--border);
    background: var(--white);
    /* Allow both pan axes so touch scroll works in both directions. */
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch; /* momentum scroll on iOS < 13 */
}

/* ── Sticky column-header row (fixed at top of sl-grid scroll viewport) ── */
.sl-header-row {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    width: 100%;            /* fill container when wider than fit-content */
    min-width: fit-content; /* expand beyond 100% when columns need more room */
    position: sticky;
    top: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 4px rgba(0,0,0,.06);
    z-index: 20;
}
/* Spacer aligns with time-ruler — sticky left to stay pinned */
.sl-gutter-hdr {
    width: 52px;
    flex-shrink: 0;
    position: sticky;
    left: 0;
    z-index: 21;
    border-right: 1px solid var(--border);
    background: #f8fafc;
}
/* Individual column header */
.sl-col-hdr {
    flex: 1;
    min-width: 110px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 10px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748b;
    border-right: 1px solid var(--border);
    border-bottom: 2px solid #e2e8f0;
    user-select: none;
    background: #f8fafc;
}
.sl-col-hdr:last-child { border-right: none; }
.sl-col-ico { font-size: 13px; line-height: 1; flex-shrink: 0; }
.sl-col-lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* + button in column header */
.sl-hdr-add {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1.5px solid transparent;
    color: var(--accent);
    font-size: 15px;
    cursor: pointer;
    line-height: 1;
    flex-shrink: 0;
    padding: 0;
    transition: background .12s, border-color .12s;
}
.sl-hdr-add:hover { background: #eef2ff; border-color: var(--accent); }
/* Count badge */
.sl-count {
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    background: #e2e8f0;
    color: #64748b;
    padding: 0 5px;
    flex-shrink: 0;
    transition: background .2s, color .2s;
}
.sl-count.sl-count-has { background: var(--accent); color: #fff; }

/* ── Body: ruler + columns — NO own scroll; overflows into parent .sl-grid ── */
.sl-body-scroll,
#slBodyScroll {
    flex: none;             /* natural height so content overflows into .sl-grid */
    overflow: visible;      /* let content flow to parent scroll container */
    display: flex;
    flex-direction: row;
    width: 100%;            /* match header-row width on wide screens */
    min-width: fit-content; /* expand beyond 100% when columns need more room */
    padding-top: 20px;
    padding-bottom: 120px;
}
/* Time ruler (sticky left) */
.sl-time-ruler {
    width: 52px;
    flex-shrink: 0;
    position: sticky;
    left: 0;
    z-index: 10;
    background: #f8fafc;
    border-right: 1px solid var(--border);
    box-sizing: border-box;
}
/* Hour ticks */
.sl-hour-tick {
    position: absolute;
    right: 6px;
    font-size: 9.5px;
    font-weight: 500;
    color: #94a3b8;
    transform: translateY(-50%);
    white-space: nowrap;
    user-select: none;
    line-height: 1;
}
.sl-hour-tick.sl-tick-major { font-weight: 700; color: #64748b; font-size: 10.5px; }
/* Shift-start marks on ruler */
.sl-ruler-shift-mark {
    position: absolute;
    left: 2px;
    right: 2px;
    display: flex;
    align-items: baseline;
    gap: 3px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 1px 3px;
    border-radius: 3px;
    user-select: none;
    transform: translateY(-50%);
    z-index: 2;
}
.sl-rsm-time {
    font-size: 8.5px;
    font-weight: 700;
    opacity: .85;
    letter-spacing: 0;
    text-transform: none;
    flex-shrink: 0;
}
.sl-rsm-label {
    font-size: 7.5px;
    font-weight: 800;
    letter-spacing: .07em;
}
.sl-rsm-tm { color: #92400e; background: rgba(254,243,199,.95); }
.sl-rsm-tv { color: #5b21b6; background: rgba(237,233,254,.95); }
.sl-rsm-tn { color: #075985; background: rgba(224,242,254,.95); }

/* ── Day separator (midnight crossing) ── */
.sl-day-separator {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: #f97316;
    z-index: 9;
    pointer-events: none;
}
.sl-day-sep-line {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: #f97316;
    z-index: 5;
    pointer-events: none;
}
.sl-day-sep-line::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: -4px; bottom: -4px;
    background: repeating-linear-gradient(
        90deg, #f9731644 0, #f9731644 6px, transparent 6px, transparent 12px
    );
    pointer-events: none;
}
/* Rotated date label on ruler (vertically centered in its section) */
.sl-day-date-label {
    position: absolute;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    pointer-events: none;
    z-index: 8;
    overflow: hidden;
}
.sl-day-date-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #f97316;
    opacity: .7;
    white-space: nowrap;
    padding: 4px 1px;
    user-select: none;
}
/* Small date chip on the separator line inside the first column */
.sl-day-sep-col-label {
    position: absolute;
    left: 4px;
    transform: translateY(-50%);
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    background: #f97316;
    padding: 1px 5px;
    border-radius: 3px;
    z-index: 6;
    white-space: nowrap;
    pointer-events: none;
    letter-spacing: .02em;
}
/* Dark theme */
[data-theme="dark"] .sl-day-separator   { background: #fb923c; }
[data-theme="dark"] .sl-day-sep-line    { background: #fb923c; }
[data-theme="dark"] .sl-day-sep-line::after {
    background: repeating-linear-gradient(
        90deg, #fb923c44 0, #fb923c44 6px, transparent 6px, transparent 12px
    );
}
[data-theme="dark"] .sl-day-date-text   { color: #fb923c; }
[data-theme="dark"] .sl-day-sep-col-label { background: #ea580c; }

/* ── VS table mood buttons — dark ── */
[data-theme="dark"] .vs-table .mood-btn  { background: var(--bg); border-color: var(--border); color: var(--text-muted); }
[data-theme="dark"] .vs-table .mood-btn:hover { border-color: #818cf8; background: rgba(99,102,241,.12); color: #a5b4fc; }
[data-theme="dark"] .vs-table .mood-btn.mood-selected[data-mood="bien"]    { background: rgba(63,185,80,.12); border-color: #3fb950; color: #3fb950; }
[data-theme="dark"] .vs-table .mood-btn.mood-selected[data-mood="regular"] { background: var(--bg); border-color: var(--text-muted); color: var(--text-muted); }
[data-theme="dark"] .vs-table .mood-btn.mood-selected[data-mood="mal"]     { background: rgba(248,81,73,.12); border-color: #f85149; color: #f85149; }
[data-theme="dark"] .vs-table .mood-btn.mood-selected[data-mood="agitado"] { background: rgba(248,81,73,.12); border-color: #f85149; color: #f85149; }

/* ── Columns wrapper ── */
.sl-columns-wrap {
    display: flex;
    flex-direction: row;
    flex: 1;
    width: 100%;            /* fill body-scroll after the 52px ruler */
    min-width: fit-content; /* expand when columns need their min-width */
    position: relative;
}
/* Individual column body (time-positioned) */
.sl-col-body {
    flex: 1;
    min-width: 110px;
    position: relative;
    border-right: 1px solid var(--border);
    box-sizing: border-box;
    cursor: crosshair;
}
.sl-col-body:last-child { border-right: none; }
/* Hour grid lines */
.sl-hour-line {
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: #f1f5f9;
    pointer-events: none;
    z-index: 0;
}
.sl-hour-line.sl-line-major { background: #e2e8f0; }
/* Half-hour dashed lines */
.sl-half-line {
    position: absolute;
    left: 0; right: 0;
    height: 0;
    border-top: 1px dashed #eceff4;
    pointer-events: none;
    z-index: 0;
}
/* Shift bands */
.sl-shift-band {
    position: absolute;
    left: 0; right: 0;
    pointer-events: none;
    z-index: 0;
}
.sl-sband-tm { background: rgba(245,158,11,.028); }
.sl-sband-tv { background: rgba(99,102,241,.028); }
.sl-sband-tn { background: rgba(14,165,233,.04);  }
/* Now line */
.sl-now-line {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: #ef4444;
    z-index: 8;
    pointer-events: none;
}
.sl-col-body .sl-now-line::before {
    content: '';
    position: absolute;
    left: -4px; top: -3px;
    width: 8px; height: 8px;
    background: #ef4444;
    border-radius: 50%;
}
.sl-time-ruler .sl-now-line { z-index: 11; }

/* ── Observation cards (time-positioned, absolute) ── */
.sl-card {
    position: absolute;
    left: 3px; right: 3px;
    border-radius: 6px;
    padding: 2px 6px 2px 8px;
    cursor: pointer;
    font-size: 11px;
    line-height: 1.35;
    overflow: hidden;
    border-left: 3px solid #94a3b8;
    background: rgba(255,255,255,.97);
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    box-sizing: border-box;
    z-index: 5;
    transition: box-shadow .12s, transform .1s;
    min-height: 22px;
    user-select: none;
    touch-action: none;
    cursor: grab;
}
.sl-card:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,.16);
    transform: scaleX(1.015);
    z-index: 7;
}
/* ── Drag-time pill ── */
.sl-drag-time-pill {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1e293b;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 200;
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
    line-height: 1.5;
}
/* ── Drag state ── */
.sl-card-dragging {
    box-shadow: 0 8px 28px rgba(0,0,0,.22) !important;
    transform: scaleX(1.03) !important;
    opacity: .88;
    cursor: grabbing !important;
    transition: none !important;
    z-index: 99 !important;
}
/* Drop target column highlight */
.sl-col-drop-target {
    background: rgba(99,102,241,.05);
    outline: 2px dashed rgba(99,102,241,.4);
    outline-offset: -2px;
}
.sl-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 2px;
    min-width: 0;
}
.sl-card-time {
    font-size: 9px;
    font-weight: 700;
    color: #94a3b8;
    white-space: nowrap;
    line-height: 1.2;
    flex-shrink: 0;
}
.sl-card-text {
    color: #1e293b;
    font-size: 11px;
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    word-break: break-word;
}
.sl-card-merged .sl-card-text {
    -webkit-line-clamp: unset;
    white-space: pre-line;
}
.sl-card-meta {
    font-size: 9px;
    color: #94a3b8;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sl-card-autor {
    font-size: 9px;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
    min-width: 0;
    line-height: 1.2;
}

/* ── Merged-card note count badge ── */
.sl-card-merged-badge {
    font-size: 8px;
    font-weight: 700;
    color: #6366f1;
    background: rgba(99,102,241,.10);
    border: 1px solid rgba(99,102,241,.25);
    border-radius: 99px;
    padding: 1px 5px;
    white-space: nowrap;
    align-self: flex-start;
    margin-top: 2px;
    line-height: 1.5;
}

/* ── Med Chooser modal (Prescrito vs Casual) ─────────────────────────── */
.med-chooser-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
    text-align: left;
}
.med-chooser-btn:hover { border-color: var(--accent); background: #f0f7ff; box-shadow: 0 2px 8px rgba(23,131,145,.08); }
.med-chooser-btn:disabled { cursor: not-allowed; }
.med-chooser-btn:disabled:hover { border-color: var(--border); background: var(--white); box-shadow: none; }
.med-chooser-ico { font-size: 22px; flex-shrink: 0; }
.med-chooser-info { flex: 1; min-width: 0; }
.med-chooser-title { display: block; font-weight: 600; font-size: 13px; color: var(--text); }
.med-chooser-desc { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ── Rx Picker modal ─────────────────────────────────────────────────── */
.rx-picker-item {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}
.rx-picker-hd {
    padding: 10px 14px 8px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
}
.rx-picker-name { font-weight: 600; font-size: 13.5px; color: var(--text); }
.rx-picker-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.rx-picker-dr { font-size: 11px; color: #6366f1; margin-top: 2px; }
.rx-picker-ind { font-size: 11px; color: var(--text-muted); font-style: italic; margin-top: 2px; }
.rx-picker-slots { padding: 6px 10px 8px; }
.rx-picker-slot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    margin-bottom: 4px;
    transition: background .12s;
}
.rx-picker-slot:last-child { margin-bottom: 0; }
.rx-pk-pend { background: #fffbeb; }
.rx-pk-adm  { background: #f0fdf4; }
.rx-pk-skip { background: #fef2f2; }
.rx-picker-time {
    font-weight: 700;
    font-size: 12px;
    color: var(--text);
    min-width: 42px;
}
.rx-picker-state {
    font-size: 11px;
    color: var(--text-muted);
    flex: 1;
}
.rx-pk-adm .rx-picker-state { color: #15803d; font-weight: 600; }
.rx-pk-skip .rx-picker-state { color: #dc2626; }
.rx-picker-adm-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: none;
    border-radius: 6px;
    background: #16a34a;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s;
    flex-shrink: 0;
}
.rx-picker-adm-btn:hover { background: #15803d; }
.rx-picker-undo-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--white);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s;
    flex-shrink: 0;
}
.rx-picker-undo-btn:hover { background: #f1f5f9; }
/* ── Cross-day card: starts today, ends tomorrow ── */
.sl-card-crossday {
    border-bottom: 2px dashed #6366f1 !important;
}
.sl-card-crossday-tail {
    font-size: 8.5px;
    color: #6366f1;
    font-style: italic;
    font-weight: 600;
    margin-top: auto;
    padding-top: 2px;
    border-top: 1px dashed rgba(99,102,241,.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* ── Carryover card: continues from previous day ── */
.sl-card-carryover {
    border-top: 2px dashed #6366f1 !important;
    border-left-color: #6366f1 !important;
    background: rgba(238,242,255,.92) !important;
    opacity: .88;
    cursor: default !important;
}
.sl-card-carryover:hover {
    transform: none !important;
}
.sl-card-carryover-head {
    font-size: 8.5px;
    color: #6366f1;
    font-style: italic;
    font-weight: 600;
    margin-bottom: 2px;
    padding-bottom: 2px;
    border-bottom: 1px dashed rgba(99,102,241,.35);
    white-space: nowrap;
}
/* ── Drawer "día siguiente" badge ── */
.drawer-end-nextday-note {
    display: none;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    color: #4f46e5;
    font-weight: 600;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 4px;
    padding: 2px 7px;
    white-space: nowrap;
    margin-left: 6px;
    line-height: 1.4;
}
.drawer-end-nextday-note.visible { display: flex; }

/* ── RX cards in meds column (time-positioned) ── */
.sl-rx-card {
    position: absolute;
    left: 3px; right: 3px;
    border-radius: 5px;
    padding: 2px 5px;
    cursor: pointer;
    font-size: 10.5px;
    overflow: hidden;
    border-left: 3px solid #7c3aed;
    background: #faf5ff;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
    box-sizing: border-box;
    z-index: 5;
    min-height: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: box-shadow .12s;
}
.sl-rx-card:hover  { box-shadow: 0 2px 8px rgba(124,58,237,.2); }
.sl-rx-card.sl-rx-adm     { background: #f0fdf4; border-left-color: #16a34a; }
.sl-rx-card.sl-rx-skipped { background: #fff7ed; border-left-color: #ea580c; opacity: .8; }
.sl-rx-ico       { font-size: 9px; flex-shrink: 0; line-height: 1; }
.sl-rx-ico-adm   { color: #16a34a; }
.sl-rx-ico-skip  { color: #ea580c; }
.sl-rx-ico-pend  { color: #94a3b8; }
.sl-rx-card-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: #1e293b; font-size: 10.5px; }
.sl-rx-card-time { font-size: 9px; color: #94a3b8; flex-shrink: 0; }
/* Shift-start label in meds column */
.sl-rx-shift-lbl {
    position: absolute;
    left: 2px; right: 2px;
    font-size: 8.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 1px 4px;
    border-radius: 3px;
    z-index: 6;
    pointer-events: none;
}
.sl-rx-lbl-tm { color: #92400e; background: rgba(254,243,199,.92); }
.sl-rx-lbl-tv { color: #5b21b6; background: rgba(237,233,254,.92); }
.sl-rx-lbl-tn { color: #075985; background: rgba(224,242,254,.92); }

/* Empty state (centered in column) */
.sl-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px 8px;
    color: #cbd5e1;
    font-size: 11px;
    font-style: italic;
    pointer-events: none;
    z-index: 1;
}

/* ── Per-column color themes — flat/neutral with subtle colored accent ── */
.sl-col-hdr.sl-hdr-meds        { border-bottom-color: #7c3aed; }
.sl-col-hdr.sl-hdr-alert       { border-bottom-color: #dc2626; }
.sl-col-hdr.sl-hdr-pain        { border-bottom-color: #ea580c; }
.sl-col-hdr.sl-hdr-behavior    { border-bottom-color: #8b5cf6; }
.sl-col-hdr.sl-hdr-sleep       { border-bottom-color: #4f46e5; }
.sl-col-hdr.sl-hdr-food        { border-bottom-color: #d97706; }
.sl-col-hdr.sl-hdr-hygiene     { border-bottom-color: #0d9488; }
.sl-col-hdr.sl-hdr-mobility    { border-bottom-color: #16a34a; }
.sl-col-hdr.sl-hdr-elimination { border-bottom-color: #ca8a04; }
.sl-col-hdr.sl-hdr-general     { border-bottom-color: #94a3b8; }
/* Card accent colors per column */
.sl-col-body[data-col="alert"]    .sl-card { border-left-color: #dc2626; background: rgba(254,242,242,.97); }
.sl-col-body[data-col="pain"]     .sl-card { border-left-color: #ea580c; background: rgba(255,247,237,.97); }
.sl-col-body[data-col="behavior"]    .sl-card { border-left-color: #8b5cf6; background: rgba(250,245,255,.97); }
.sl-col-body[data-col="sleep"]       .sl-card { border-left-color: #4f46e5; background: rgba(240,240,255,.97); }
.sl-col-body[data-col="elimination"] .sl-card { border-left-color: #ca8a04; background: rgba(254,252,232,.97); }
/* Timed cards (sleep etc.) — fill the full start→end slot */
.sl-card-timed {
    display: flex;
    flex-direction: column;
    background: rgba(238,242,255,.97);
    border-left-color: #6366f1;
    min-height: 44px;
}
.sl-card-timed .sl-card-text {
    flex: 1;
    -webkit-line-clamp: unset;
    overflow: hidden;
    font-size: 11px;
    opacity: .9;
}
.sl-card-endtime {
    font-size: 9px;
    font-weight: 700;
    color: #6366f1;
    white-space: nowrap;
    line-height: 1.2;
    margin-top: auto;
    padding-top: 2px;
    border-top: 1px solid rgba(99,102,241,.2);
}
.sl-col-body[data-col="food"]     .sl-card { border-left-color: #d97706; background: rgba(255,251,235,.97); }
.sl-col-body[data-col="hygiene"]  .sl-card { border-left-color: #0d9488; background: rgba(240,253,250,.97); }
.sl-col-body[data-col="mobility"] .sl-card { border-left-color: #16a34a; background: rgba(240,253,244,.97); }
.sl-col-body[data-col="general"]  .sl-card { border-left-color: #64748b; background: rgba(248,250,252,.97); }
/* Ad-hoc (non-prescribed) medication cards in the meds column */
.sl-col-body[data-col="meds"] .sl-card.sl-card-adhoc-med { border-left-color: #f59e0b; background: rgba(255,251,235,.97); }
.sl-col-body[data-col="meds"] .sl-card.sl-card-adhoc-med:hover { box-shadow: 0 2px 8px rgba(245,158,11,.25); }
/* Resident pre-selected from timeline — locked select styling */
#medAdhocResidente:disabled { background: #e8f6fb; border-color: #bae6fd; color: #0369a1; opacity: 1; cursor: default; }

/* ── bita-editor layout ── */
.bita-editor {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
#tlWrap.sl-grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* ── Responsive ── */

/* 901–1340px (laptops pequeños/medianos): encabezados rotados -90° para ahorrar espacio horizontal.
   Cada columna pasa de ~110px a ~44px de ancho, eliminando el scroll horizontal en ≥1024px. */
@media (min-width: 901px) and (max-width: 1340px) {
    .sl-col-hdr {
        flex: 1;
        min-width: 44px;
        flex-direction: column;   /* ico → label rotado → count + add */
        align-items: center;
        justify-content: flex-end;
        padding: 8px 3px 6px;
        gap: 4px;
        font-size: 10px;
        /* La altura del encabezado la determina el label más largo (~"Alimentación") */
    }
    /* Texto del label girado -90° (de abajo hacia arriba) */
    .sl-col-lbl {
        display: block;             /* asegurar visibilidad (no está oculto a esta anchura) */
        writing-mode: vertical-rl;
        transform: rotate(180deg); /* invierte el flujo: se lee de abajo → arriba */
        white-space: nowrap;
        overflow: visible;
        text-overflow: clip;
        letter-spacing: .06em;
        flex-shrink: 0;
    }
    .sl-col-ico  { font-size: 14px; order: -1; } /* icono queda arriba */
    .sl-hdr-add  { width: 18px; height: 18px; font-size: 14px; }
    .sl-count    { min-width: 16px; height: 16px; font-size: 9px; padding: 0 3px; }
    .sl-col-body { min-width: 44px; }
    /* Ruler y gutter: misma anchura reducida */
    .sl-time-ruler { width: 44px; }
    .sl-gutter-hdr { width: 44px; }
    .sl-hour-tick  { font-size: 8.5px; right: 3px; }
}
@media (max-width: 900px) {
    /* ── Mobile timeline: CSS Grid ensures pixel-perfect header↔body alignment ── */

    /* Both header-row and body-scroll share the same grid template:
       [ruler 38px] + [10 columns × 52px each] = 38 + 520 = 558px total */
    .sl-header-row {
        display: grid !important;
        grid-template-columns: 38px repeat(10, 52px);
        width: max-content !important;
        min-width: max-content !important;
    }
    .sl-gutter-hdr {
        width: auto;
        grid-column: 1;
    }
    .sl-col-hdr {
        width: auto !important;
        min-width: 0 !important;
        flex: none !important;
        padding: 6px 2px 5px !important;
        font-size: 9px !important;
        gap: 3px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }
    .sl-col-lbl {
        display: block !important;
        writing-mode: vertical-rl !important;
        transform: rotate(180deg) !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        letter-spacing: .04em;
        font-size: 9px;
        flex: none !important;
        flex-shrink: 0 !important;
    }
    .sl-col-ico { font-size: 13px; order: -1; }
    .sl-hdr-add { width: 17px; height: 17px; font-size: 13px; }
    .sl-count   { min-width: 15px; height: 15px; font-size: 8px; padding: 0 3px; }

    .sl-body-scroll,
    #slBodyScroll {
        display: grid !important;
        grid-template-columns: 38px 1fr;
        width: max-content !important;
        min-width: max-content !important;
    }
    .sl-time-ruler {
        width: auto;
        grid-column: 1;
        grid-row: 1;
    }
    .sl-columns-wrap {
        grid-column: 2;
        grid-row: 1;
        display: grid !important;
        grid-template-columns: repeat(10, 52px);
        flex: none;
        width: max-content !important;
        min-width: max-content !important;
    }
    .sl-col-body {
        width: auto;
        min-width: 0;
        flex: none;
    }

    .sl-hour-tick  { font-size: 8px; right: 3px; }
    #tlWrap.sl-grid {
        min-height: 0;
        touch-action: pan-x pan-y;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}
@media (max-width: 600px) {
    .sl-header-row  { grid-template-columns: 38px repeat(10, 46px); }
    .sl-columns-wrap { grid-template-columns: repeat(10, 46px); }
    .sl-col-hdr {
        padding: 5px 2px 4px;
        font-size: 8.5px;
        gap: 2px;
    }
    .sl-col-lbl { font-size: 8.5px; letter-spacing: .02em; }
    .sl-col-ico { font-size: 12px; }
    .sl-card { padding: 2px 3px 2px 5px; font-size: 10px; }
    .sl-hdr-add { width: 16px; height: 16px; font-size: 12px; }
    .sl-count { min-width: 14px; height: 14px; font-size: 8px; padding: 0 3px; }
}
@media (max-width: 420px) {
    /* Extra-small phones: 40px columns, 32px gutter */
    .sl-header-row  { grid-template-columns: 32px repeat(10, 40px); }
    .sl-body-scroll, #slBodyScroll { grid-template-columns: 32px 1fr; }
    .sl-columns-wrap { grid-template-columns: repeat(10, 40px); }
    .sl-col-hdr {
        padding: 4px 2px 3px;
        gap: 2px;
    }
    .sl-col-lbl { font-size: 8px; }
    .sl-col-ico { font-size: 11px; }
    .sl-hdr-add { width: 15px; height: 15px; font-size: 11px; }
    .sl-count { display: none; }
    .sl-time-ruler { width: auto; }
    .sl-gutter-hdr { width: auto; }
    .sl-hour-tick { font-size: 7.5px; right: 2px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REPORTES — controles, canvas, formato carta
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Controls bar ── */
.rpt-controls-bar {
    padding: 12px 24px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 40;
}
.rpt-controls-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}
.rpt-ctrl-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rpt-ctrl-lbl {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.rpt-select,
.rpt-date-input {
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-primary);
    background: #f8fafc;
    outline: none;
    cursor: pointer;
}
.rpt-select:focus,
.rpt-date-input:focus {
    border-color: #6366f1;
    background: #fff;
}
.rpt-period-btns {
    display: flex;
    gap: 4px;
}
.rpt-period-btn {
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    background: #f8fafc;
    cursor: pointer;
    transition: all .15s;
}
.rpt-period-btn:hover { border-color: #6366f1; color: #6366f1; background: #eef2ff; }
.rpt-period-btn.active { background: #6366f1; border-color: #6366f1; color: #fff; }
.rpt-apply-btn,
.rpt-print-btn {
    height: 34px;
    padding: 0 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    border: none;
    transition: opacity .15s;
}
.rpt-apply-btn  { background: #6366f1; color: #fff; }
.rpt-apply-btn:hover { opacity: .88; }
.rpt-print-btn  { background: #f1f5f9; color: #475569; border: 1px solid var(--border); }
.rpt-print-btn:hover { background: #e2e8f0; }

/* ── Report canvas ── */
.rpt-canvas {
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.rpt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 0;
    color: #94a3b8;
    font-size: 14px;
}

/* ── Report page (carta format) ── */
.report-page {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 28px 32px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    page-break-after: always;
}

/* Header */
.rpt-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 18px;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 22px;
}
.rpt-page-identity {
    display: flex;
    align-items: center;
    gap: 14px;
}
.rpt-page-foto {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e2e8f0;
    flex-shrink: 0;
}
.rpt-page-foto-placeholder {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rpt-page-nombre {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px;
}
.rpt-page-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: #64748b;
}
.rpt-page-meta span {
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 99px;
}
.rpt-page-period-badge {
    text-align: right;
    flex-shrink: 0;
}
.rpt-period-label {
    font-size: 11px;
    font-weight: 700;
    color: #6366f1;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 3px;
}
.rpt-period-dates {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

/* Charts grid */
.rpt-charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 24px;
}
.rpt-chart-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px 16px 10px;
}
.rpt-chart-card.rpt-chart-wide {
    grid-column: 1 / -1;
}
.rpt-chart-title {
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 10px;
}
.rpt-chart-wrap {
    position: relative;
    height: 180px;
}
.rpt-chart-wrap-meds {
    height: 160px;
}

.rpt-no-data {
    text-align: center;
    padding: 24px;
    color: #94a3b8;
    font-size: 13px;
    background: #f8fafc;
    border-radius: 8px;
    margin-bottom: 24px;
}

/* Narrative table */
.rpt-narrative { margin-bottom: 24px; }
.rpt-narrative-title {
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 10px;
}
.rpt-narrative-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 11.5px;
    color: #334155;
}
.rpt-narrative-table th {
    background: #f1f5f9;
    padding: 6px 8px;
    text-align: left;
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #64748b;
    border-bottom: 1px solid #e2e8f0;
}
.rpt-narrative-table td {
    padding: 5px 8px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
    line-height: 1.45;
}
/* Truncate cells that might overflow */
.rpt-narrative-table .rpt-td-nota,
.rpt-narrative-table .rpt-td-autor {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rpt-narrative-table .rpt-td-nota {
    white-space: normal;
    word-break: break-word;
}
.rpt-narrative-table .rpt-td-autor {
    font-size: 10px;
    color: #64748b;
}
.rpt-row-first-of-date td { border-top: 1px solid #e2e8f0; }
.rpt-turno-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 3px;
    letter-spacing: .05em;
}
.rpt-turno-tm { background: #fef3c7; color: #92400e; }
.rpt-turno-tv { background: #ede9fe; color: #5b21b6; }
.rpt-turno-tn { background: #e8f6fb; color: #075985; }

/* ── Narrative table responsive ── */
@media (max-width: 768px) {
    .rpt-narrative-table,
    .rpt-narrative-table thead,
    .rpt-narrative-table tbody,
    .rpt-narrative-table tr,
    .rpt-narrative-table th,
    .rpt-narrative-table td {
        display: block;
    }
    .rpt-narrative-table thead { display: none; }
    .rpt-narrative-table tr {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 10px 12px;
        margin-bottom: 8px;
    }
    .rpt-narrative-table td {
        border: none;
        padding: 2px 0;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }
    .rpt-narrative-table td:empty { display: none; }
    .rpt-narrative-table td::before {
        content: attr(data-label);
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: #94a3b8;
        margin-right: 6px;
    }
    .rpt-narrative-table .rpt-td-nota { font-weight: 500; }
    .rpt-narrative-table .rpt-td-autor {
        white-space: normal;
        font-size: 10px;
    }
}

/* Signature row */
.rpt-signature-row {
    display: flex;
    align-items: flex-end;
    gap: 32px;
    padding-top: 18px;
    border-top: 1px solid #e2e8f0;
    margin-top: 8px;
}
.rpt-signature-block {
    flex: 1;
    text-align: center;
}
.rpt-signature-line {
    height: 1px;
    background: #334155;
    margin-bottom: 5px;
}
.rpt-signature-label {
    font-size: 10px;
    color: #64748b;
}
.rpt-generated-note {
    font-size: 10px;
    color: #94a3b8;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Print styles ── */
@media print {
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
    body {
        background: #fff !important;
        margin: 0;
        padding: 0;
    }
    .sidebar,
    .rpt-controls-bar,
    .page-header,
    .rpt-print-btn,
    .rpt-apply-btn {
        display: none !important;
    }
    .app-layout { display: block !important; }
    .main-content {
        margin: 0 !important;
        padding: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }
    .rpt-canvas {
        padding: 0 !important;
        gap: 0 !important;
    }

    /* Page-per-resident */
    .report-page {
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 12mm 15mm !important;
        margin: 0 !important;
        max-width: none !important;
        width: 100% !important;
        page-break-after: always;
        page-break-inside: avoid;
    }
    .report-page:last-child {
        page-break-after: auto;
    }

    /* Header */
    .rpt-page-header {
        display: flex !important;
        padding-bottom: 12px !important;
        margin-bottom: 14px !important;
        border-bottom: 2px solid #334155 !important;
    }
    .rpt-page-foto,
    .rpt-page-foto-placeholder {
        width: 44px !important;
        height: 44px !important;
    }
    .rpt-page-nombre {
        font-size: 15px !important;
    }
    .rpt-page-meta span {
        background: #f1f5f9 !important;
    }
    .rpt-period-label {
        color: #334155 !important;
    }

    /* Charts grid → images */
    .rpt-charts-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        margin-bottom: 16px !important;
    }
    .rpt-chart-card {
        border: 1px solid #cbd5e1 !important;
        padding: 10px 12px 8px !important;
        page-break-inside: avoid;
    }
    .rpt-chart-wrap,
    .rpt-chart-wrap-meds {
        height: 130px !important;
    }
    .rpt-print-img {
        display: block !important;
    }
    canvas[data-print-hidden] {
        display: none !important;
    }

    /* Narrative table */
    .rpt-narrative {
        page-break-inside: auto;
    }
    .rpt-narrative-table {
        table-layout: fixed !important;
        font-size: 9.5px !important;
    }
    .rpt-narrative-table,
    .rpt-narrative-table thead,
    .rpt-narrative-table tbody,
    .rpt-narrative-table tr,
    .rpt-narrative-table th,
    .rpt-narrative-table td {
        display: revert !important;
    }
    .rpt-narrative-table thead {
        display: table-header-group !important;
    }
    .rpt-narrative-table th {
        background: #f1f5f9 !important;
        padding: 4px 6px !important;
        font-size: 8px !important;
    }
    .rpt-narrative-table td {
        padding: 3px 6px !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
    .rpt-narrative-table td::before {
        display: none !important;
    }
    .rpt-narrative-table .rpt-td-nota {
        white-space: normal !important;
        word-break: break-word !important;
        overflow: visible !important;
    }
    .rpt-narrative-table .rpt-td-autor {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: 8.5px !important;
    }
    .rpt-narrative-table tr {
        page-break-inside: avoid;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        background: none !important;
    }

    /* Turno badges keep colors */
    .rpt-turno-tm { background: #fef3c7 !important; color: #92400e !important; }
    .rpt-turno-tv { background: #ede9fe !important; color: #5b21b6 !important; }
    .rpt-turno-tn { background: #e8f6fb !important; color: #075985 !important; }

    /* Signature */
    .rpt-signature-row {
        display: flex !important;
        margin-top: 12px !important;
        padding-top: 14px !important;
    }
    .rpt-signature-line {
        background: #000 !important;
    }
}