/* =====================================================
   HomeProSalud Agenda — Stylesheet Principal (v2.0)
   ===================================================== */

:root {
    /* ── Marca ─────────────────────────────────────────── */
    --brand:      #0044cc;
    --brand-dark: #002b80;
    --accent:     #06b6d4;

    /* ── Fondos ────────────────────────────────────────── */
    --bg:         #f0f4ff;
    --bg-2:       #f8fafc;   /* superficies sutiles: thead, cal-head */
    --bg-3:       #f1f5f9;   /* hover neutro, separadores */
    --bg-hover:   #eff6ff;   /* hover con tono de marca */

    /* ── Layout ────────────────────────────────────────── */
    --sidebar-w:  240px;
    --sidebar-bg: #000d2e;
    --card:       #ffffff;
    --border:     #e2e8f0;

    /* ── Texto (WCAG AA sobre blanco) ──────────────────── */
    --text:   #1e293b;
    --text-2: #475569;
    --text-3: #64748b;

    /* ── Estado base ───────────────────────────────────── */
    --success: #10b981;
    --warning: #f59e0b;
    --danger:  #ef4444;

    /* ── Colores semánticos (badges, eventos, botones) ─── */
    --info-bg:    #eff6ff;  --info-fg:    #1d4ed8;
    --ok-bg:      #f0fdf4;  --ok-fg:      #15803d;
    --warn-bg:    #fefce8;  --warn-fg:    #92400e;
    --danger-bg:  #fef2f2;  --danger-fg:  #991b1b;
    --neutral-bg: #f1f5f9;  --neutral-fg: #475569;

    /* ── Tipografía (6 pasos) ──────────────────────────── */
    --fs-xs:   0.72rem;   /* badges, labels, headers de tabla  */
    --fs-sm:   0.8rem;    /* cuerpo de tabla, inputs, botones  */
    --fs-base: 0.875rem;  /* texto base, login                 */
    --fs-lg:   1rem;      /* topbar title                      */
    --fs-xl:   1.25rem;   /* secciones                         */
    --fs-2xl:  1.75rem;   /* stat values                       */

    /* ── Espaciado (múltiplos de 4 px) ────────────────── */
    --sp-1: 0.25rem;   /*  4 px */
    --sp-2: 0.5rem;    /*  8 px */
    --sp-3: 0.75rem;   /* 12 px */
    --sp-4: 1rem;      /* 16 px */
    --sp-5: 1.25rem;   /* 20 px */
    --sp-6: 1.5rem;    /* 24 px */
    --sp-8: 2rem;      /* 32 px */

    /* ── Sombras ───────────────────────────────────────── */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.1);
    --shadow-lg: 0 32px 80px rgba(0,0,0,0.2);

    /* ── Radios ────────────────────────────────────────── */
    --radius-xs: 0.375rem;  /* iconos pequeños, toolbar buttons */
    --radius-sm: 0.5rem;    /* chips, ctx-item                  */
    --radius-md: 0.625rem;  /* inputs, botones, search-bar      */
    --radius-lg: 0.75rem;   /* nav-item, dropdowns              */
    --radius:    1rem;      /* cards, stat-card                 */
    --radius-xl: 1.25rem;   /* modales                          */
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Plus Jakarta Sans', sans-serif; }
body { background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; }

/* ── LOGIN ───────────────────────────────────────────── */
#loginScreen {
    min-height: 100vh;
    display: none; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #000d2e 0%, #001a5e 35%, #0044cc 70%, #06b6d4 100%);
}
#splashScreen {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #000d2e 0%, #001a5e 35%, #0044cc 70%, #06b6d4 100%);
    transition: opacity 0.3s ease;
}
#splashScreen.fade-out { opacity: 0; pointer-events: none; }
.splash-logo {
    width: 56px; height: 56px; background: rgba(255,255,255,0.15);
    border-radius: 16px; display: flex; align-items: center; justify-content: center;
    margin-bottom: var(--sp-4);
}
.splash-spinner {
    width: 28px; height: 28px; border: 3px solid rgba(255,255,255,0.2);
    border-top-color: white; border-radius: 50%;
    animation: spin 0.8s linear infinite; margin-top: var(--sp-6);
}
@keyframes spin { to { transform: rotate(360deg); } }
.login-card {
    background: white; border-radius: 1.5rem; padding: var(--sp-8);
    width: 100%; max-width: 400px;
    box-shadow: var(--shadow-lg);
}
.login-card input {
    width: 100%; padding: var(--sp-3) var(--sp-4); border: 1.5px solid var(--border);
    border-radius: var(--radius-lg); font-size: var(--fs-base); outline: none;
    font-family: inherit; transition: border-color 0.2s;
}
.login-card input:focus { border-color: var(--brand); }
.login-card button {
    width: 100%; padding: 0.875rem; background: var(--brand);
    color: white; font-weight: 700; border: none; border-radius: var(--radius-lg);
    cursor: pointer; font-size: var(--fs-base); font-family: inherit;
    transition: background 0.2s;
}
.login-card button:hover { background: var(--brand-dark); }

/* ── LAYOUT ──────────────────────────────────────────── */
#app { display: none; min-height: 100vh; }

/* SIDEBAR */
.sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: var(--sidebar-w); background: var(--sidebar-bg);
    display: flex; flex-direction: column; z-index: 100;
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.sidebar-logo {
    padding: var(--sp-5) var(--sp-5) var(--sp-4);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex; align-items: center; gap: 0.625rem;
}
.sidebar-logo img { width: 36px; height: 36px; object-fit: contain; }
.sidebar-logo-text { line-height: 1.2; }
.sidebar-logo-text span { font-size: var(--fs-xs); font-weight: 800; color: white; letter-spacing: 0.05em; }
.sidebar-logo-text p { font-size: 0.6rem; color: rgba(255,255,255,0.4); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }

.sidebar-nav { flex: 1; padding: var(--sp-3) 0.625rem; overflow-y: auto; }
.nav-section { margin-bottom: var(--sp-6); }
.nav-section-label {
    font-size: var(--fs-xs); font-weight: 700; color: rgba(255,255,255,0.45);
    text-transform: uppercase; letter-spacing: 0.12em;
    padding: 0 0.625rem; margin-bottom: var(--sp-1);
}
.nav-item {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 0.625rem var(--sp-3); border-radius: var(--radius-lg);
    color: rgba(255,255,255,0.6); font-size: var(--fs-sm); font-weight: 600;
    cursor: pointer; transition: all 0.15s; margin-bottom: 2px;
    border: none; background: none; width: 100%; text-align: left;
}
.nav-item:hover { background: rgba(255,255,255,0.08); color: white; }
.nav-item.active {
    background: linear-gradient(135deg, var(--brand), #0066ff);
    color: white; box-shadow: 0 4px 12px rgba(0,68,204,0.4);
}
.nav-item i { width: 16px; height: 16px; shrink: 0; }
.nav-badge {
    margin-left: auto; background: var(--danger); color: white;
    font-size: var(--fs-xs); font-weight: 800; padding: 2px 6px;
    border-radius: 999px; min-width: 18px; text-align: center;
}

.sidebar-footer {
    padding: 0.875rem 0.625rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.user-pill {
    display: flex; align-items: center; gap: 0.625rem;
    padding: var(--sp-2) 0.625rem; border-radius: var(--radius-lg);
    cursor: pointer; transition: background 0.15s;
}
.user-pill:hover { background: rgba(255,255,255,0.08); }
.user-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--accent));
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-sm); font-weight: 800; color: white; shrink: 0;
}
.user-name { font-size: var(--fs-sm); font-weight: 700; color: white; }
.user-role { font-size: var(--fs-xs); color: rgba(255,255,255,0.55); }

/* MAIN */
.main {
    margin-left: var(--sidebar-w);
    min-height: 100vh;
    display: flex; flex-direction: column;
}

/* TOPBAR */
.topbar {
    background: white; border-bottom: 1px solid var(--border);
    padding: 0 var(--sp-6); height: 52px;
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 50;
}
.topbar-title { font-size: var(--fs-lg); font-weight: 800; color: var(--text); }
.topbar-subtitle { font-size: var(--fs-sm); color: var(--text-3); margin-top: 1px; }
.topbar-actions { display: flex; align-items: center; gap: 0.625rem; }
.topbar-btn {
    display: flex; align-items: center; gap: var(--sp-1);
    padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-md);
    font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
    border: none; font-family: inherit; transition: all 0.15s;
}
.topbar-btn.primary { background: var(--brand); color: white; }
.topbar-btn.primary:hover { background: var(--brand-dark); }
.topbar-btn.ghost { background: var(--bg); color: var(--text-2); }
.topbar-btn.ghost:hover { background: var(--border); }
.topbar-icon {
    width: 36px; height: 36px; border-radius: var(--radius-md);
    background: var(--bg); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-2); transition: all 0.15s;
}
.topbar-icon:hover { background: var(--border); color: var(--text); }

/* CONTENT */
.content { flex: 1; padding: var(--sp-5) var(--sp-6); }

/* PANELS */
.panel { display: none; }
.panel.active { display: block; }

/* CARDS */
.card {
    background: white; border: 1px solid var(--border);
    border-radius: var(--radius); padding: var(--sp-5);
}
.card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--sp-4);
}
.card-title { font-size: var(--fs-base); font-weight: 700; color: var(--text); }
.card-subtitle { font-size: var(--fs-sm); color: var(--text-3); margin-top: 2px; }

/* STATS */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.stat-card {
    background: white; border: 1px solid var(--border);
    border-radius: var(--radius); padding: var(--sp-5);
    transition: all 0.2s;
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.stat-icon {
    width: 36px; height: 36px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: var(--sp-3);
}
.stat-value { font-size: var(--fs-2xl); font-weight: 800; color: var(--text); line-height: 1; }
.stat-label { font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.05em; }
.stat-delta { font-size: var(--fs-xs); font-weight: 700; margin-top: 6px; display: flex; align-items: center; gap: 3px; }
.stat-delta.up { color: var(--success); }
.stat-delta.down { color: var(--danger); }

/* GRID LAYOUTS */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.grid-12 { display: grid; grid-template-columns: 1fr 2fr; gap: var(--sp-4); }
.grid-21 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-4); }

/* TABLE */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th { padding: 0.625rem var(--sp-4); text-align: left; font-size: var(--fs-xs); font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid var(--border); background: var(--bg-2); }
tbody td { padding: 0.875rem var(--sp-4); font-size: var(--fs-sm); color: var(--text); border-bottom: 1px solid var(--bg-2); vertical-align: middle; }
tbody tr:hover { background: var(--bg-2); }
tbody tr:last-child td { border-bottom: none; }

/* BADGES */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 999px;
    font-size: var(--fs-xs); font-weight: 700;
}
.badge-blue   { background: var(--info-bg);    color: var(--info-fg); }
.badge-green  { background: var(--ok-bg);      color: var(--ok-fg); }
.badge-yellow { background: var(--warn-bg);    color: var(--warn-fg); }
.badge-red    { background: var(--danger-bg);  color: var(--danger-fg); }
.badge-gray   { background: var(--neutral-bg); color: var(--neutral-fg); }
.badge-cyan   { background: #ecfeff; color: #155e75; }

/* AVATAR */
.avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--accent));
    color: white; font-weight: 700; font-size: var(--fs-xs);
    display: inline-flex; align-items: center; justify-content: center;
    shrink: 0;
}

/* CALENDAR (legacy grid) */
.calendar-grid {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 1px; background: var(--border); border-radius: var(--radius-lg); overflow: hidden;
}
.cal-header { background: var(--bg-2); padding: var(--sp-2); text-align: center; font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); text-transform: uppercase; }
.cal-day {
    background: white; padding: var(--sp-2); min-height: 80px;
    font-size: var(--fs-sm); font-weight: 600; color: var(--text-2);
    cursor: pointer; transition: background 0.15s; position: relative;
}
.cal-day:hover { background: var(--bg-hover); }
.cal-day.today { background: var(--info-bg); }
.cal-day.today .cal-date { background: var(--brand); color: white; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); }
.cal-day.other-month { color: var(--text-3); background: #fafafa; }
.cal-event {
    margin-top: 3px; padding: 2px 5px; border-radius: 4px;
    font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.cal-event.tele  { background: var(--info-bg);    color: var(--info-fg); }
.cal-event.pres  { background: var(--ok-bg);       color: var(--ok-fg); }
.cal-event.block { background: var(--neutral-bg);  color: var(--text-3); }

/* AGENDA TIMELINE */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-hour { display: flex; gap: var(--sp-3); min-height: 60px; }
.timeline-label { width: 48px; padding-top: 4px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); text-align: right; shrink: 0; }
.timeline-slots { flex: 1; border-top: 1px dashed var(--border); padding: 4px 0; position: relative; }
.timeline-appt {
    position: absolute; left: 0; right: 0; margin: 0 4px;
    border-radius: var(--radius-sm); padding: 4px 8px; font-size: var(--fs-xs); font-weight: 600;
    cursor: pointer; transition: opacity 0.15s;
}
.timeline-appt:hover { opacity: 0.8; }
.timeline-appt.tele  { background: var(--info-bg); color: var(--info-fg); border-left: 3px solid #3b82f6; }
.timeline-appt.pres  { background: var(--ok-bg);   color: var(--ok-fg);   border-left: 3px solid #22c55e; }

/* FORM */
.form-group { margin-bottom: var(--sp-4); }
.form-label { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--sp-1); }
.form-input, .form-select, .form-textarea {
    width: 100%; padding: 0.625rem 0.875rem;
    border: 1.5px solid var(--border); border-radius: var(--radius-md);
    font-size: var(--fs-sm); color: var(--text); font-family: inherit;
    outline: none; transition: border-color 0.2s; background: white;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,68,204,0.08); }
.form-textarea { resize: vertical; min-height: 80px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-3); }

/* MODAL */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px); z-index: 500;
    display: none; align-items: center; justify-content: center; padding: var(--sp-4);
}
.modal-overlay.open { display: flex; }
.modal {
    background: white; border-radius: var(--radius-xl);
    width: 100%; max-width: 560px; max-height: 90vh;
    overflow: hidden; display: flex; flex-direction: column;
    box-shadow: var(--shadow-lg);
}
.modal-header {
    padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    shrink: 0;
}
.modal-title { font-size: 0.9rem; font-weight: 800; }
.modal-body { padding: var(--sp-5) var(--sp-6); overflow-y: auto; flex: 1; }
.modal-footer {
    padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--border);
    display: flex; gap: 0.625rem; justify-content: flex-end; shrink: 0;
}
.btn { padding: var(--sp-2) var(--sp-5); border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; border: none; font-family: inherit; transition: all 0.15s; display: inline-flex; align-items: center; gap: var(--sp-1); }
.btn-primary { background: var(--brand); color: white; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { background: var(--bg); color: var(--text-2); }
.btn-ghost:hover { background: var(--border); }
.btn-danger { background: var(--danger-bg); color: var(--danger); }
.btn-danger:hover { background: #fee2e2; }
.btn-success { background: var(--ok-bg); color: var(--success); }
.btn-success:hover { background: #dcfce7; }
.btn-sm { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); }

/* SEARCH */
.search-bar {
    display: flex; align-items: center; gap: var(--sp-2);
    background: var(--bg); border: 1.5px solid var(--border);
    border-radius: var(--radius-md); padding: 0.4rem var(--sp-3);
    color: var(--text-2);
}
.search-bar input { border: none; background: none; outline: none; font-size: var(--fs-sm); font-family: inherit; color: var(--text); flex: 1; }

/* TABS */
.tabs { display: flex; gap: var(--sp-1); background: var(--bg); padding: var(--sp-1); border-radius: var(--radius-lg); width: fit-content; margin-bottom: var(--sp-5); }
.tab { padding: 0.4rem var(--sp-4); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; color: var(--text-2); border: none; background: none; font-family: inherit; transition: all 0.15s; }
.tab.active { background: white; color: var(--brand); box-shadow: var(--shadow-sm); }

/* EMPTY STATE */
.empty { text-align: center; padding: 3rem var(--sp-4); color: var(--text-3); }
.empty i { width: 40px; height: 40px; margin: 0 auto var(--sp-3); display: block; }
.empty p { font-size: var(--fs-sm); font-weight: 600; }

/* MOBILE */
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99; }
.menu-toggle { display: none; }
@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay.open { display: block; }
    .main { margin-left: 0; }
    .menu-toggle { display: flex; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .grid-2, .grid-3, .grid-12, .grid-21 { grid-template-columns: 1fr; }
    .form-row, .form-row-3 { grid-template-columns: 1fr; }
    .content { padding: var(--sp-4); }
}

/* ── AGENDA FUNCIONAL ────────────────────────────────── */
/* Mes */
.cal-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.cal-head  { background:var(--bg-2); padding:var(--sp-2); text-align:center; font-size:var(--fs-xs); font-weight:700; color:var(--text-3); text-transform:uppercase; border-bottom:1px solid var(--border); }
.cal-cell  { min-height:72px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); padding:var(--sp-1) 0.375rem; cursor:pointer; transition:background 0.15s; position:relative; }
.cal-cell:nth-child(7n) { border-right:none; }
.cal-cell:hover { background:var(--bg-hover); }
.cal-cell.other { background:#fafafa; }
.cal-cell.today { background:var(--info-bg); }
.cal-num  { font-size:var(--fs-xs); font-weight:700; color:var(--text-2); width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:50%; margin-bottom:2px; }
.cal-cell.today .cal-num { background:var(--brand); color:white; }
.cal-cell.other .cal-num { color:var(--text-3); }
.cal-appt { font-size:var(--fs-xs); font-weight:600; padding:2px 5px; border-radius:4px; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.cal-appt.tele      { background:var(--info-bg);   color:var(--info-fg); }
.cal-appt.pres      { background:var(--ok-bg);      color:var(--ok-fg); }
.cal-appt.pendiente { background:var(--warn-bg);   color:var(--warn-fg); }
.cal-appt.cancelada { background:var(--danger-bg); color:var(--danger-fg); text-decoration:line-through; }
.cal-appt.completada{ background:var(--ok-bg);      color:var(--ok-fg); opacity:0.7; }
.cal-more { font-size:var(--fs-xs); color:var(--text-3); font-weight:600; cursor:pointer; }

/* Semana */
.week-grid { display:grid; grid-template-columns:52px repeat(7,1fr); }
.week-head { padding:var(--sp-2); text-align:center; font-size:var(--fs-xs); font-weight:700; border-bottom:1px solid var(--border); background:var(--bg-2); }
.week-head.today-col { background:var(--info-bg); color:var(--brand); }
.week-time { font-size:var(--fs-xs); color:var(--text-3); font-weight:600; text-align:right; padding-right:8px; padding-top:3px; border-right:1px solid var(--border); }
.week-slot { border-right:1px solid var(--border); border-bottom:1px dashed var(--bg-3); min-height:48px; cursor:pointer; position:relative; transition:background 0.1s; }
.week-slot:hover { background:#f8faff; }
.week-slot.today-col { background:#fafcff; }
.week-slot:nth-child(7n+1) { border-right:none; }
.week-appt { position:absolute; left:2px; right:2px; border-radius:6px; padding:3px 6px; font-size:var(--fs-xs); font-weight:700; cursor:pointer; overflow:hidden; z-index:2; }
.week-appt.tele      { background:#3b82f6; color:white; }
.week-appt.pres      { background:#22c55e; color:white; }
.week-appt.pendiente { background:#eab308; color:white; }
.week-appt.cancelada { background:#ef4444; color:white; opacity:0.6; }
.week-appt.completada{ background:#10b981; color:white; opacity:0.8; }

/* Día */
.day-grid { display:grid; grid-template-columns:52px 1fr; }
.day-slot { border-bottom:1px dashed var(--bg-3); min-height:56px; cursor:pointer; position:relative; transition:background 0.1s; }
.day-slot:hover { background:#f8faff; }
.day-slot::after { content:attr(data-time); position:absolute; right:8px; top:4px; font-size:0.62rem; color:var(--border); }
.day-appt { position:absolute; left:8px; right:8px; border-radius:8px; padding:6px 10px; font-size:var(--fs-xs); font-weight:700; cursor:pointer; z-index:2; box-shadow:var(--shadow-sm); }
.day-appt.tele      { background:#3b82f6; color:white; border-left:4px solid var(--info-fg); }
.day-appt.pres      { background:#22c55e; color:white; border-left:4px solid var(--ok-fg); }
.day-appt.pendiente { background:#eab308; color:white; border-left:4px solid #d97706; }
.day-appt.cancelada { background:#f87171; color:white; border-left:4px solid var(--danger); opacity:0.7; }
.day-appt.completada{ background:#10b981; color:white; border-left:4px solid #059669; }

/* Menú contextual */
#ctxMenu {
    position:fixed; background:white; border:1px solid var(--border);
    border-radius:var(--radius-lg); box-shadow:0 8px 32px rgba(0,0,0,0.15);
    z-index:9999; min-width:180px; padding:var(--sp-1); display:none;
}
.ctx-item {
    display:flex; align-items:center; gap:0.625rem;
    padding:var(--sp-2) var(--sp-3); border-radius:var(--radius-sm); cursor:pointer;
    font-size:0.78rem; font-weight:600; color:var(--text);
    transition:background 0.1s; border:none; background:none;
    width:100%; text-align:left; font-family:inherit;
}
.ctx-item:hover { background:var(--bg); }
.ctx-item.danger { color:var(--danger); }
.ctx-item.danger:hover { background:var(--danger-bg); }
.ctx-sep { height:1px; background:var(--border); margin:var(--sp-1) 0; }

/* Ficha paciente */
.plantilla-cat { display:flex;align-items:center;gap:6px;width:100%;text-align:left;padding:8px 10px;font-size:var(--fs-sm);font-weight:700;color:var(--text-2);background:var(--bg-2);border:none;border-bottom:1px solid var(--border);cursor:pointer;font-family:inherit;transition:background 0.1s; }
.plantilla-cat:hover { background:var(--bg-3); }
.plantilla-cat-body { border-bottom:1px solid var(--border); }
.plantilla-item { display:block;width:100%;text-align:left;padding:7px 12px;font-size:0.78rem;background:none;border:none;cursor:pointer;color:var(--text-2);transition:background 0.1s;font-family:inherit; }
.plantilla-item:hover { background:var(--bg-2); }
.plantilla-item.active { background:var(--bg-hover);color:var(--brand);font-weight:700; }
.ficha-tab { padding:var(--sp-3) var(--sp-5);font-size:var(--fs-sm);font-weight:700;cursor:pointer;color:var(--text-3);border-bottom:2px solid transparent;background:none;border-top:none;border-left:none;border-right:none;font-family:inherit;transition:all 0.15s;white-space:nowrap; }
.ficha-tab:hover { color:var(--brand); }
.ficha-tab.active { color:var(--brand);border-bottom-color:var(--brand);background:#f8faff; }
.ficha-panel { display:none; }
.conf-cat { display:inline-flex;align-items:center;gap:6px;padding:0.55rem 1.05rem;font-size:0.78rem;font-weight:700;cursor:pointer;color:var(--text-2);background:var(--bg-2);border:1px solid var(--border);border-radius:999px;font-family:inherit;transition:all 0.15s;white-space:nowrap; }
.conf-cat:hover { color:var(--brand);border-color:var(--brand); }
.conf-cat.active { color:white;background:var(--brand);border-color:var(--brand); }

/* Constructor fichas clínicas */
.fc-field-btn { display:flex;align-items:center;gap:var(--sp-2);width:100%;padding:var(--sp-2) 0.625rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:white;font-size:var(--fs-sm);font-weight:600;color:var(--text-2);cursor:pointer;font-family:inherit;transition:all 0.15s;text-align:left; }
.fc-field-btn:hover { background:var(--brand);color:white;border-color:var(--brand); }
.fc-campo { border:1.5px solid var(--border);border-radius:var(--radius-lg);background:white;padding:0.875rem var(--sp-4);position:relative;transition:border-color 0.15s; }
.fc-campo:hover { border-color:#94a3b8; }
.fc-campo.fc-selected { border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,68,204,0.08); }
.fc-campo-toolbar { display:flex;align-items:center;gap:var(--sp-1);position:absolute;top:0.625rem;right:var(--sp-3); }
.fc-campo-toolbar button { width:22px;height:22px;border-radius:var(--radius-xs);border:none;background:var(--bg);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-3);transition:all 0.15s; }
.fc-campo-toolbar button:hover { background:var(--brand);color:white; }
.fc-campo-toolbar button.danger:hover { background:var(--danger);color:white; }
.fc-campo-label { font-size:var(--fs-sm);font-weight:700;color:var(--text);margin-bottom:var(--sp-1);display:flex;align-items:center;gap:var(--sp-1); }
.fc-campo-label input { border:none;outline:none;background:transparent;font-size:var(--fs-sm);font-weight:700;color:var(--text);flex:1;font-family:inherit;min-width:0; }
.fc-campo-label input:focus { border-bottom:1.5px dashed var(--brand); }
.fc-titulo-input { border:none;outline:none;background:transparent;font-size:1.1rem;font-weight:800;color:var(--text);width:100%;font-family:inherit;border-bottom:2px dashed var(--border);padding-bottom:4px; }
.fc-titulo-input:focus { border-bottom-color:var(--brand); }
.fc-opcion-row { display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-1); }
.fc-opcion-row input[type=text] { flex:1;border:none;border-bottom:1px solid var(--border);outline:none;font-size:var(--fs-sm);padding:2px 4px;font-family:inherit;background:transparent; }
.fc-opcion-row input[type=text]:focus { border-bottom-color:var(--brand); }
.fc-add-opcion { font-size:var(--fs-xs);color:var(--brand);background:none;border:none;cursor:pointer;font-family:inherit;font-weight:700;padding:0;margin-top:4px; }
.fc-escala { display:flex;gap:var(--sp-1);flex-wrap:wrap;margin-top:var(--sp-2);align-items:center; }
.fc-escala-num { width:32px;height:32px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);font-weight:700;color:var(--text-3);flex-shrink:0; }
.fc-firma-box { border:1.5px dashed var(--border);border-radius:var(--radius-md);height:60px;display:flex;align-items:center;justify-content:center;margin-top:var(--sp-1);background:#fafafa; }
.fc-tabla-preview { width:100%;border-collapse:collapse;font-size:var(--fs-sm);margin-top:var(--sp-2); }
.fc-tabla-preview th { background:var(--bg-2);padding:var(--sp-1) var(--sp-2);border:1px solid var(--border);font-weight:700;color:var(--text-2); }
.fc-tabla-preview td { padding:var(--sp-1) var(--sp-2);border:1px solid var(--border);color:var(--text-3);font-size:var(--fs-xs); }
.fc-requerido { font-size:var(--fs-xs);color:var(--danger);font-weight:700;margin-left:4px; }
.ficha-panel.active { display:block; }
.ficha-row { display:flex;align-items:flex-start;gap:var(--sp-2);padding:var(--sp-2) 0;border-bottom:1px solid var(--bg-2);font-size:var(--fs-sm); }
.ficha-row span:first-child { color:var(--text-3);min-width:170px;font-weight:600;font-size:var(--fs-sm);flex-shrink:0; }
.ficha-row span:last-child { color:var(--text);font-weight:500; }

/* Filter chips */
.filter-chip {
    display:inline-flex;align-items:center;gap:5px;
    padding:4px 10px;border-radius:999px;font-size:var(--fs-xs);font-weight:700;
    border:1.5px solid var(--border);background:white;color:var(--text-2);
    cursor:pointer;transition:all 0.15s;font-family:inherit;
}
.filter-chip:hover { border-color:var(--brand);color:var(--brand); }
.filter-chip.active { background:var(--brand);color:white;border-color:var(--brand); }

/* Modal cita */
.cita-tabs { display:flex;gap:0;border-bottom:1px solid var(--border);margin:0 calc(-1 * var(--sp-6)) var(--sp-4); }
.cita-tab  { padding:0.625rem var(--sp-5);font-size:var(--fs-sm);font-weight:700;cursor:pointer;color:var(--text-3);border-bottom:2px solid transparent;background:none;border-top:none;border-left:none;border-right:none;font-family:inherit;transition:all 0.15s; }
.cita-tab.active { color:var(--brand);border-bottom-color:var(--brand); }
.cita-panel { display:none; }
.cita-panel.active { display:block; }
.cita-field { display:flex;align-items:center;gap:var(--sp-2);padding:0.4rem 0;border-bottom:1px solid var(--bg-2);min-width:0; }
.cita-field label { font-size:var(--fs-xs);font-weight:700;color:var(--text-3);min-width:82px;max-width:82px;text-align:right;flex-shrink:0; }
.cita-field input,.cita-field select,.cita-field textarea { flex:1;min-width:0;border:1px solid var(--border);border-radius:var(--radius-sm);padding:0.35rem var(--sp-2);font-size:0.79rem;font-family:inherit;outline:none;color:var(--text);transition:border-color 0.15s; }
.cita-field input:focus,.cita-field select:focus,.cita-field textarea:focus { border-color:var(--brand); }
.cita-actions { display:flex;gap:var(--sp-2); }
.cita-action-btn { display:flex;align-items:center;gap:4px;padding:5px 10px;border-radius:6px;font-size:var(--fs-xs);font-weight:700;border:1px solid var(--border);background:white;cursor:pointer;font-family:inherit;color:var(--text-2);transition:all 0.15s; }
.cita-action-btn:hover { border-color:var(--brand);color:var(--brand); }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }

/* COMING SOON */
.coming-soon {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 400px; text-align: center; gap: var(--sp-4);
}
.coming-soon-icon {
    width: 72px; height: 72px; background: linear-gradient(135deg, var(--brand), var(--accent));
    border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center;
    color: white;
}
.coming-soon h2 { font-size: var(--fs-xl); font-weight: 800; color: var(--text); }
.coming-soon p { font-size: var(--fs-sm); color: var(--text-3); max-width: 300px; line-height: 1.6; }

/* Telemedicina tabs */
.vl-tab.active { border-bottom-color: var(--brand) !important; color: var(--brand) !important; background: white !important; }
.vl-tab:hover { background: var(--bg-3) !important; }

/* ── UTILIDADES (Fase 2.2) ───────────────────────────── */

/* Flex helpers */
.hps-row   { display:flex; align-items:center; gap:var(--sp-2); }
.hps-row-4 { display:flex; align-items:center; gap:var(--sp-4); }
.hps-between { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); flex-wrap:wrap; }
.hps-end   { display:flex; align-items:center; justify-content:flex-end; gap:var(--sp-2); }
.hps-col   { display:flex; flex-direction:column; gap:var(--sp-2); }
.hps-flex1 { flex:1; min-width:0; }

/* Toolbar de panel: search+filtros a la izquierda, botones a la derecha */
.hps-toolbar {
    display:flex; align-items:center; justify-content:space-between;
    gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-3);
}
.hps-toolbar-left  { display:flex; align-items:center; gap:var(--sp-2); flex:1; flex-wrap:wrap; }
.hps-toolbar-right { display:flex; align-items:center; gap:var(--sp-1); flex-shrink:0; }

/* Sección con título separador */
.hps-section { margin-bottom:var(--sp-4); }
.hps-section-title {
    font-size:var(--fs-xs); font-weight:700; text-transform:uppercase;
    letter-spacing:0.06em; color:var(--text-3);
    padding-bottom:var(--sp-2); margin-bottom:var(--sp-3);
    border-bottom:1px solid var(--border);
}

/* Fila de detalle: etiqueta izquierda, valor derecha */
.hps-detail { display:flex; align-items:flex-start; gap:var(--sp-2); padding:var(--sp-2) 0; border-bottom:1px solid var(--bg-2); }
.hps-detail:last-child { border-bottom:none; }
.hps-detail-label { font-size:var(--fs-xs); font-weight:700; color:var(--text-3); min-width:130px; flex-shrink:0; }
.hps-detail-value { font-size:var(--fs-sm); color:var(--text); flex:1; }

/* Empty state inline (dentro de tablas y contenedores) */
.hps-empty {
    text-align:center; padding:2rem var(--sp-4);
    color:var(--text-3); font-size:var(--fs-sm); font-weight:600;
}
.hps-empty-lg { padding:3rem var(--sp-4); }

/* Texto muted */
.hps-muted    { font-size:var(--fs-xs);  color:var(--text-3); }
.hps-muted-sm { font-size:0.78rem;       color:var(--text-2); }

/* Separador visual */
.hps-divider { height:1px; background:var(--border); margin:var(--sp-4) 0; }

/* Card section (card dentro de modal o card con header propio) */
.hps-card-section {
    border:1px solid var(--border); border-radius:var(--radius);
    overflow:hidden; margin-bottom:var(--sp-4);
}
.hps-card-section-head {
    padding:var(--sp-3) var(--sp-4);
    background:var(--bg-2); border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
}
.hps-card-section-head p { font-size:var(--fs-sm); font-weight:700; color:var(--text); }
.hps-card-section-body { padding:var(--sp-4); }

/* Badge pill de estado (versión inline, sin clase badge-*) */
.hps-pill {
    display:inline-flex; align-items:center; gap:4px;
    padding:2px var(--sp-2); border-radius:999px;
    font-size:var(--fs-xs); font-weight:700; line-height:1.4;
}
.hps-pill-info    { background:var(--info-bg);    color:var(--info-fg); }
.hps-pill-ok      { background:var(--ok-bg);      color:var(--ok-fg); }
.hps-pill-warn    { background:var(--warn-bg);    color:var(--warn-fg); }
.hps-pill-danger  { background:var(--danger-bg);  color:var(--danger-fg); }
.hps-pill-neutral { background:var(--neutral-bg); color:var(--neutral-fg); }

/* Cabecera interna de card padding:0 (Finanzas, Inventario, etc.) */
.hps-card-head {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--sp-2);
}
/* Banda de totales/resumen dentro de una card */
.hps-card-band {
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    display: flex; gap: var(--sp-6); flex-wrap: wrap; align-items: center;
}
.hps-card-band-danger { background: var(--danger-bg); }
/* Pie de card (paginación, acciones) */
.hps-card-foot {
    padding: 0.6rem var(--sp-4);
    border-top: 1px solid var(--border);
    background: #fafafa;
    display: flex; justify-content: space-between; align-items: center;
    font-size: var(--fs-xs); color: var(--text-3);
}

/* ── FOCO DE TECLADO (Fase 2.4) ─────────────────────── */
/* Elimina el outline nativo y aplica uno consistente con la marca */
:focus { outline:none; }
:focus-visible {
    outline:2px solid var(--brand);
    outline-offset:2px;
    border-radius:var(--radius-xs);
}
/* Inputs y selects: anillo interior más sutil */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline:none;
    border-color:var(--brand);
    box-shadow:0 0 0 3px rgba(0,68,204,0.12);
}
/* Botones de la sidebar: anillo blanco para contraste sobre fondo oscuro */
.nav-item:focus-visible {
    outline:2px solid white;
    outline-offset:2px;
}

/* ── MOBILE EXTRA (Fase 3.5) ─────────────────────────── */
@media (max-width: 768px) {
    /* Toolbars: apila en columna en pantallas chicas */
    .hps-toolbar { flex-direction:column; align-items:stretch; }
    .hps-toolbar-left,
    .hps-toolbar-right { width:100%; }
    .hps-toolbar-right { justify-content:flex-end; }

    /* Tablas: oculta columnas secundarias en mobile */
    .table-hide-mobile { display:none !important; }

    /* Stats: 2 columnas en mobile (ya definido arriba) */

    /* Modales: ocupa casi toda la pantalla */
    .modal { max-height:95vh; border-radius:var(--radius) var(--radius) 0 0; }
    .modal-overlay { align-items:flex-end; padding:0; }
    .modal-overlay.open { padding:0; }

    /* Botones en modal-footer: full width en mobile */
    .modal-footer { flex-wrap:wrap; }
    .modal-footer .btn { flex:1; justify-content:center; min-width:100px; }

    /* Touch targets mínimos */
    .btn, .nav-item, .ficha-tab, .tab { min-height:40px; }
    .btn-sm { min-height:34px; }

    /* Finanzas: tabs scrolleables */
    .scroll-toolbar { -webkit-overflow-scrolling:touch; }

    /* Grid-21 y grid-12: columna única en mobile */
    .grid-21, .grid-12 { grid-template-columns:1fr; }

    /* Card de estado urgente: texto más compacto */
    #dash-alerta-pendientes { flex-wrap:wrap; }

    /* ── FICHA DEL PACIENTE EN MÓVIL ──────────────────── */
    /* Filas etiqueta/valor: apilar para que no se corten en pantallas chicas */
    .ficha-row { flex-direction:column; gap:2px; padding:var(--sp-2) 0; }
    .ficha-row span:first-child { min-width:0; font-size:var(--fs-xs); color:var(--text-3); }
    .ficha-row span:last-child { font-size:var(--fs-sm); word-break:break-word; }

    /* Header de la ficha (tarjeta degradada): más compacto y a lo ancho */
    #panel-fichas > div:first-child { padding:1rem; gap:0.75rem; }
    #panel-fichas > div:first-child h2 { font-size:1rem; }
    /* Botones del header de ficha ocupan el ancho disponible */
    #panel-fichas > div:first-child > div:last-child { width:100%; }
    #panel-fichas > div:first-child > div:last-child .btn { flex:1; justify-content:center; }

    /* Pestañas de la ficha: scroll horizontal cómodo y sin saltos de línea */
    #panel-fichas .ficha-tab { padding:var(--sp-3) var(--sp-4); font-size:var(--fs-xs); }

    /* Pestaña Ficha Clínica: apilar (acciones/formularios arriba, visor abajo) */
    .ficha-clinica-grid { grid-template-columns:1fr !important; gap:1rem !important; }
    /* El visor de ficha: ancho completo, sin altura fija de viewport ni sticky */
    .ficha-clinica-grid > div:last-child { position:static !important; height:auto !important; }
    .ficha-clinica-grid > div:last-child .card { min-height:300px; }

    /* ── MODAL DE CITA EN MÓVIL ───────────────────────── */
    /* Apilar los campos en una sola columna (antes 2 columnas apretadas) */
    .cita-grid { grid-template-columns:1fr !important; gap:0 !important; }
    /* Etiquetas a la izquierda pero con menos ancho fijo y alineadas a la izq */
    .cita-field { gap:var(--sp-2); }
    .cita-field label { min-width:72px;max-width:72px;text-align:left; }
    /* Inputs/selects más altos para tocar cómodo */
    .cita-field input, .cita-field select, .cita-field textarea { min-height:38px;font-size:0.85rem; }
    /* El teléfono (prefijo + número) que no se aplaste */
    #cf-tel1-country { max-width:90px; }

    /* Footer del modal de cita: los botones envuelven en vez de salirse */
    #modalNuevaConsulta .modal-footer { flex-wrap:wrap; gap:0.4rem; }
    #modalNuevaConsulta .modal-footer > div { flex-wrap:wrap; width:100%; gap:0.4rem; justify-content:stretch; }
    #modalNuevaConsulta .modal-footer .btn { flex:1 1 auto; min-width:90px; justify-content:center; }

    /* ── CALENDARIO (VISTA MES) EN MÓVIL ──────────────── */
    /* Celdas compactas para que entren las 7 columnas sin desbordar */
    .cal-cell { min-height:60px; padding:2px; }
    .cal-head { padding:4px 2px; font-size:0.6rem; }
    .cal-num { width:18px; height:18px; font-size:0.62rem; }
    .cal-appt { font-size:0.58rem; padding:1px 3px; }
    /* El símbolo de pago/flags no fuerza ancho */
    .cal-appt span { flex-shrink:0; }
}

@media (max-width: 480px) {
    /* Sidebar más angosta */
    :root { --sidebar-w: 200px; }

    /* Stat value más pequeño */
    .stat-value { font-size:1.4rem; }

    /* Ocultar columnas de tabla en móvil muy pequeño */
    .table-hide-xs { display:none !important; }

    /* Topbar: solo icono sin texto */
    .topbar-title { font-size:var(--fs-sm); }
}

/* ── ESTILOS DINÁMICOS WIDGET ───────────────────────── */
/* (Los estilos del widget inyectado deben mantenerse en el JS) */