/* ============================================================
   TURNERITO — Design System v2  (basado en landing)
   Fuente: Outfit | Primario: #2563EB (profesional) / #0284c7 (colaborador)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    --blue:      #2563EB;
    --blue-d:    #1d4ed8;
    --blue-l:    #dbeafe;
    --blue-soft: rgba(37, 99, 235, .12);
    --blue-grad: linear-gradient(135deg, var(--blue), var(--blue-d));
    --dark:      #0f172a;
    --dark-m:    #1e293b;
    --slate:     #334155;
    --muted:     #64748b;
    --border:    #e2e8f0;
    --bg:        #f8fafc;
    --white:     #ffffff;
    --sidebar-w: 245px;
    --topbar-h:  56px;
    --radius-card: 14px;
    --radius-btn:  10px;
}

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; }
body {
    font-family: 'Outfit', sans-serif;
    background: var(--bg);
    color: #1e293b;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}

/* ── LOGO ── */
.t-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
}
.t-logo-icon {
    width: 32px; height: 32px; flex-shrink: 0;
    background: var(--blue);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(37,99,235,.35);
}
.t-logo-icon .sq {
    width: 12px; height: 12px;
    background: #fff; border-radius: 3px;
}
.t-logo-text {
    font-size: 1.1rem; font-weight: 700;
    color: #fff; letter-spacing: -.3px;
}
.t-logo-text span { color: #93c5fd; }

/* ── SIDEBAR ── */
.sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--sidebar-w);
    background: var(--dark);
    z-index: 200;
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform .28s ease;
    display: flex; flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.1) transparent;
}
.sidebar-brand {
    display: flex; align-items: center;
    padding: 1.1rem 1.2rem .75rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
    text-decoration: none;
    flex-shrink: 0;
}
.sidebar-role {
    padding: .25rem 1.2rem .6rem;
    font-size: .65rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255,255,255,.25);
}
.sidebar-section {
    padding: .9rem 1.2rem .3rem;
    font-size: .63rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255,255,255,.2);
}
.sidebar .nav-link {
    display: flex; align-items: center; gap: .55rem;
    color: rgba(255,255,255,.55);
    border-radius: 8px;
    margin: 1px .6rem;
    padding: .5rem .8rem;
    font-size: .875rem; font-weight: 500;
    transition: background .15s, color .15s;
    text-decoration: none;
}
.sidebar .nav-link i { width: 17px; font-size: .9rem; flex-shrink: 0; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar .nav-link.active {
    background: rgba(37,99,235,.25);
    color: #93c5fd;
}
.sidebar .nav-link.active i { color: #60a5fa; }
.sidebar-footer {
    padding: .85rem 1rem;
    border-top: 1px solid rgba(255,255,255,.07);
    margin-top: auto; flex-shrink: 0;
}
.user-info {
    display: flex; align-items: center; gap: .65rem;
    padding: .55rem .75rem; border-radius: 8px;
    background: rgba(255,255,255,.05); margin-bottom: .4rem;
}
.user-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    background: var(--blue-grad);
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; color: #fff; font-weight: 700;
}
.user-name  { color: #fff; font-size: .82rem; font-weight: 600; line-height: 1.2; }
.user-role  { color: rgba(255,255,255,.3); font-size: .68rem; }


/* ── User info top del sidebar ── */
.sidebar-user-top {
    padding: .6rem .85rem .5rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.sidebar-user-top .user-info {
    margin-bottom: 0;
    display: flex; align-items: center; gap: .65rem;
    padding: .5rem .6rem; border-radius: 8px;
    background: rgba(255,255,255,.05);
}
.sidebar-user-top .notif-wrapper { margin-left: auto; flex-shrink: 0; }
.sidebar-user-top .notif-btn { color: rgba(255,255,255,.5); }
.sidebar-user-top .notif-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
/* notif-dropdown usa position:fixed calculado por JS */

/* ── TOPBAR (mobile) ── */
.topbar {
    display: none; position: fixed; top: 0; left: 0; right: 0;
    height: var(--topbar-h);
    background: var(--dark);
    align-items: center; justify-content: space-between;
    padding: 0 1rem; z-index: 300;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.topbar .t-logo-text { font-size: .95rem; }
.btn-menu { background: none; border: none; color: #fff; font-size: 1.4rem; cursor: pointer; padding: .25rem; }

.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 150; }

/* ── MAIN CONTENT ── */
.main-content { margin-left: var(--sidebar-w); padding: 1.75rem 2rem; min-height: 100vh; background:#f8fafc; }

/* ── CARDS ── */
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--white);
    box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.03);
}
.card-stat {
    padding: 1.25rem 1.5rem;
    border-left: 4px solid;
    border-radius: var(--radius-card);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 90px;
}
.card-stat .stat-num   { font-size: 1.9rem; font-weight: 800; line-height: 1; }
.card-stat .stat-label { font-size: .72rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-top: .3rem; }
.card-stat .stat-sub   { font-size: .75rem; color: var(--muted); margin-top: .2rem; }
.card-stat.blue   { border-color: var(--blue);  } .card-stat.blue   .stat-num { color: var(--blue); }
.card-stat.green  { border-color: #10b981; }      .card-stat.green  .stat-num { color: #10b981; }
.card-stat.yellow { border-color: #f59e0b; }      .card-stat.yellow .stat-num { color: #f59e0b; }
.card-stat.purple { border-color: var(--blue-d); }      .card-stat.purple .stat-num { color: var(--blue-d); }
.card-stat.slate  { border-color: #64748b; }      .card-stat.slate  .stat-num { color: #64748b; }
.card-stat.red    { border-color: #ef4444; }      .card-stat.red    .stat-num { color: #ef4444; }

/* ── PAGE HEADER ── */
.page-header { margin-bottom: 1.75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.page-header h4 { font-size: 1.3rem; font-weight: 700; margin: 0; color: #0f172a; }

/* ── BUTTONS ── */
.btn { border-radius: var(--radius-btn); font-weight: 600; font-size: .875rem; }
.btn-primary   { background: var(--blue); border-color: var(--blue); }
.btn-primary:hover { background: var(--blue-d); border-color: var(--blue-d); }
.btn-success   { background: #10b981; border-color: #10b981; }
.btn-success:hover { background: #059669; border-color: #059669; }

/* ── BADGES ── */
.badge-activo    { background: #dbeafe; color: #1e40af; font-weight: 600; border-radius: 6px; }
.badge-inactivo  { background: #fee2e2; color: #991b1b; font-weight: 600; border-radius: 6px; }
.badge-pendiente { background: #fef3c7; color: #92400e; font-weight: 600; border-radius: 6px; }
.badge-ia        { background: #ede9fe; color: #5b21b6; font-weight: 600; border-radius: 6px; font-size: .7rem; }
.tc-ia           { font-size: .65rem; opacity: .85; }
.tc-srv          { font-size: .67rem; font-weight: 700; margin-top: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-card .tc-srv  { color: rgba(255,255,255,.85) !important; }

/* ── TABLES ── */
.table th {
    font-size: .72rem; text-transform: uppercase;
    letter-spacing: .06em; color: var(--muted);
    font-weight: 600; border-bottom-width: 1px;
}
.table td { font-size: .875rem; vertical-align: middle; }

/* ── FORMS ── */
.form-control, .form-select {
    border-radius: 8px; border-color: var(--border);
    font-size: .875rem; font-family: 'Outfit', sans-serif;
}
.form-control:focus, .form-select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.form-control::placeholder { color: #c4c9d4; font-style: italic; opacity: 1; }
.form-control::-webkit-input-placeholder { color: #c4c9d4; font-style: italic; }
.form-control::-moz-placeholder { color: #c4c9d4; font-style: italic; opacity: 1; }
.form-label { font-weight: 600; font-size: .82rem; color: #374151; }

/* ── NAV BADGE ── */
.nav-badge {
    margin-left: auto; background: var(--blue); color: #fff;
    font-size: .6rem; font-weight: 700; padding: .1rem .45rem;
    border-radius: 20px;
}

/* ── ALERTS ── */
.alert { border-radius: var(--radius-card); border: none; }

/* ── RESPONSIVE — tablet + mobile (sidebar colapsado) ── */
@media (max-width: 999px) {
    .topbar          { display: flex; }
    .sidebar         { transform: translateX(-100%); }
    .sidebar.open    { transform: translateX(0); }
    .main-content    { margin-left: 0; padding: 4.5rem 1rem 1.5rem; }
    .sidebar-overlay.show { display: block; }
}

/* ══════════════════════════════════════════════
   COMPONENTES COMPARTIDOS — Panel Clínica v1s
   ══════════════════════════════════════════════ */

/* ── Section header (título de card con link) ── */
.section-hdr {
    display:flex; align-items:center; justify-content:space-between;
    padding:.85rem 1rem .65rem;
    border-bottom:1px solid #f1f5f9;
}
.section-hdr .sh-title { font-weight:800; font-size:.9rem; color:#0f172a; }
.section-hdr a { font-size:.75rem; color:var(--blue); font-weight:700; text-decoration:none; }
.section-hdr a:hover { text-decoration:underline; }

/* ── KPI card (borde superior de color) ── */
.kpi {
    background:#fff; border-radius:14px;
    padding:1.1rem 1rem 1rem;
    border:1.5px solid #e2e8f0;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
    position:relative; overflow:hidden;
    transition:transform .15s, box-shadow .15s;
}
.kpi:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,.08); }
.kpi::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:var(--kpi-color, var(--blue));
}
.kpi-val { font-size:2rem; font-weight:900; line-height:1; color:#0f172a; }
.kpi-lbl { font-size:.7rem; font-weight:700; text-transform:uppercase;
           letter-spacing:.05em; color:#94a3b8; margin-top:.35rem; }
.kpi-sub { font-size:.75rem; color:#94a3b8; margin-top:.2rem; }
.kpi-ico { position:absolute; top:.9rem; right:.9rem; font-size:1.4rem; opacity:.35; }

/* ── Turno row (lista de turnos unificada) ── */
.t-row {
    display:flex; align-items:stretch;
    border-bottom:1px solid #f8fafc;
    transition:background .1s;
    position:relative;
}
.t-row:last-child { border-bottom:none; }
.t-row:hover { background:#fafbff; }

.t-time {
    width:54px; min-width:54px; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    font-size:.72rem; font-weight:800; color:var(--blue);
    border-right:2px solid #f1f5f9; padding:.65rem .25rem;
    background:#fafbff; flex-shrink:0;
}
.t-time.done { color:#10b981; border-color:#d1fae5; background:#f0fdf4; }
.t-time.next { color:#f59e0b; border-color:#fde68a; background:#fffbeb; }
.t-time.cxl  { color:#94a3b8; background:#fafafa; }

.t-body { flex:1; padding:.65rem .9rem; min-width:0; }
.t-name { font-weight:800; font-size:.875rem; color:#0f172a;
          white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.t-meta { font-size:.72rem; color:#94a3b8; margin-top:.15rem; }

/* ── Estado chips ── */
.chip {
    display:inline-block; font-size:.62rem; font-weight:700;
    padding:.15rem .5rem; border-radius:20px;
}
.chip-done  { background:#dcfce7; color:#166534; }
.chip-pend  { background:#ede9fe; color:#5b21b6; }
.chip-cxl   { background:#fee2e2; color:#991b1b; }
.chip-next  { background:#fef3c7; color:#92400e; }

/* ── Botones de acción en turno ── */
.t-actions { display:flex; align-items:center; gap:4px; padding:.5rem .6rem .5rem 0; flex-shrink:0; }
.t-btn {
    width:30px; height:30px; border-radius:8px; border:1.5px solid #f1f5f9;
    background:#fff; color:#94a3b8; font-size:.78rem;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; text-decoration:none; transition:all .12s; flex-shrink:0;
}
.t-btn:hover           { border-color:var(--blue); color:var(--blue); background:#eef2ff; }
.t-btn.t-btn-check     { border-color:#10b981 !important; color:#10b981 !important; }
.t-btn.t-btn-check:hover { background:#f0fdf4 !important; }
.t-btn.t-btn-cancel    { border-color:#fca5a5; color:#ef4444; }
.t-btn.t-btn-cancel:hover { background:#fef2f2; border-color:#ef4444; }

/* ── Botón atendido rápido (grande, modo recepcionista) ── */
.btn-atendido-rapido {
    display:flex; align-items:center; gap:.4rem;
    padding:.35rem .75rem; border-radius:8px;
    background:#10b981; color:#fff; border:none;
    font-size:.78rem; font-weight:800; cursor:pointer;
    transition:background .12s, transform .1s;
    white-space:nowrap;
}
.btn-atendido-rapido:hover  { background:#059669; transform:scale(1.03); }
.btn-atendido-rapido:active { transform:scale(.97); }
.btn-atendido-rapido.done   { background:#f1f5f9; color:#94a3b8; cursor:default; pointer-events:none; }

/* ── Page header unificado ── */
.ph { display:flex; justify-content:space-between; align-items:flex-start;
      flex-wrap:wrap; gap:.75rem; margin-bottom:1.5rem; }
.ph-title { font-size:1.25rem; font-weight:900; color:#0f172a; margin:0; line-height:1.2; }
.ph-sub   { font-size:.8rem; color:#94a3b8; margin-top:.2rem; }

/* ── Lane (columna de colaborador en En Vivo) ── */
.lane { background:#fff; border-radius:16px; border:1.5px solid #f1f5f9;
        box-shadow:0 1px 4px rgba(0,0,0,.04); overflow:hidden; }
.lane-hdr {
    display:flex; align-items:center; gap:.75rem;
    padding:.75rem 1rem; border-bottom:1px solid #f1f5f9; background:#fafbff;
}
.lane-av {
    width:34px; height:34px; border-radius:10px; flex-shrink:0;
    background:var(--blue-grad);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:800; font-size:.85rem;
}
.lane-name  { font-weight:800; font-size:.875rem; color:#0f172a; }
.lane-esp   { font-size:.72rem; color:#94a3b8; }
.lane-badge { margin-left:auto; background:#ede9fe; color:#6d28d9;
              font-size:.68rem; font-weight:800; padding:.15rem .5rem;
              border-radius:20px; white-space:nowrap; }
.lane-empty { padding:1.5rem; text-align:center; color:#94a3b8; font-size:.82rem; }

/* ── Indicador live ── */
.live-dot {
    width:8px; height:8px; border-radius:50%; background:#10b981;
    display:inline-block; animation:pulse-live 2s infinite;
}
@keyframes pulse-live { 0%,100%{opacity:1} 50%{opacity:.25} }
.live-dot.off { background:#94a3b8 !important; animation:none !important; }

/* ── Mini calendario 7 días (profesional dashboard) ── */
.week-grid {
    display:grid; grid-template-columns:repeat(7,1fr); gap:.4rem;
}
.week-day {
    display:flex; flex-direction:column; align-items:center;
    padding:.45rem .15rem; border-radius:10px;
    background:#f8fafc; border:1.5px solid #f1f5f9;
    cursor:default;
}
.week-day.today    { background:#ede9fe; border-color:#c4b5fd; }
.week-day.has-turns{ border-color:#ddd6fe; }
.wd-name { font-size:.58rem; font-weight:700; text-transform:uppercase;
           letter-spacing:.04em; color:#94a3b8; }
.wd-num  { font-size:1rem; font-weight:900; color:#0f172a; line-height:1.2; }
.week-day.today .wd-num { color:var(--blue); }
.wd-cnt  { font-size:.62rem; font-weight:700; color:var(--blue); margin-top:.1rem; min-height:.8rem; }
.week-day:not(.has-turns):not(.today) .wd-cnt { color:#c4c9d4; }

/* ── Paciente chip (lista rápida en dash) ── */
.pac-chip {
    display:flex; align-items:center; gap:.75rem;
    padding:.55rem .9rem; border-bottom:1px solid #f8fafc;
}
.pac-chip:last-child { border-bottom:none; }
.pac-av {
    width:30px; height:30px; border-radius:8px; flex-shrink:0;
    background:var(--blue-grad);
    color:#fff; font-weight:800; font-size:.8rem;
    display:flex; align-items:center; justify-content:center;
}
.pac-name { flex:1; font-weight:700; font-size:.82rem; color:#0f172a; }
.pac-date { font-size:.7rem; color:#94a3b8; font-weight:600; white-space:nowrap; }