/* ============================================================
   O&M HIS — CUSTOM CSS PREMIUM v5
   Estilo: Blanco limpio · Acentos azules suaves · Sin círculos
   Compatible con header.php original (flex h-screen Tailwind)
   SIN ::before ni ::after en ningún componente
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
    --blue-900: #051228;
    --blue-800: #0a1f45;
    --blue-700: #0e2d6b;
    --blue-600: #1248a8;
    --blue-500: #1a6fd4;
    --blue-400: #3d8fe8;
    --blue-300: #64aef5;
    --blue-200: #96c8f8;
    --blue-100: #d6eafe;
    --blue-50:  #eef6ff;
    --sky:      #38bdf8;

    --teal:     #0d9488;
    --teal-bg:  #f0fdfa;
    --purple:   #7c3aed;
    --purple-bg:#f5f3ff;
    --amber:    #d97706;
    --amber-bg: #fffbeb;

    --success:     #059669;
    --success-bg:  #ecfdf5;
    --danger:      #dc2626;
    --danger-bg:   #fef2f2;
    --warning:     #d97706;
    --warning-bg:  #fffbeb;

    /* Fondo app: azul grisáceo muy suave, como la imagen de referencia */
    --bg-app:    #f0f4f9;
    --bg-card:   #ffffff;
    --sidebar-bg:#051228;

    --text-1: #0f172a;
    --text-2: #334155;
    --text-3: #64748b;
    --text-4: #94a3b8;

    --border:      rgba(15,23,42,0.07);
    --border-card: rgba(15,23,42,0.09);

    --sh-card:  0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
    --sh-card2: 0 4px 16px rgba(15,23,42,0.07), 0 1px 4px rgba(15,23,42,0.04);
    --sh-hover: 0 8px 28px rgba(15,23,42,0.10), 0 2px 8px rgba(26,111,212,0.07);
    --sh-btn:   0 1px 6px rgba(26,111,212,0.28);
    --sh-blue:  0 4px 20px rgba(26,111,212,0.26);
    --sh-vital: 0 2px 12px rgba(26,111,212,0.10);
}

/* ── BASE ────────────────────────────────────────────────────── */
body {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    background-color: var(--bg-app) !important;
    color: var(--text-1) !important;
    -webkit-font-smoothing: antialiased;
}

/* ── SIDEBAR ─────────────────────────────────────────────────── */
/* Solo background — NO tocamos estructura ni pseudo-elementos */
.sidebar-hospitalario {
    background-color: var(--sidebar-bg) !important;
    background-image: linear-gradient(
        180deg,
        rgba(26,111,212,0.20) 0%,
        rgba(26,111,212,0.05) 25%,
        transparent 55%
    ) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    border-right: 1px solid rgba(255,255,255,0.04) !important;
    box-shadow: 2px 0 20px rgba(5,18,40,0.20) !important;
}

/* ── TOPBAR ──────────────────────────────────────────────────── */
main > header {
    background: rgba(255,255,255,0.94) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 1px 0 rgba(15,23,42,0.05), 0 2px 8px rgba(15,23,42,0.03) !important;
}

/* ── ÁREA SCROLLABLE ─────────────────────────────────────────── */
main > div.flex-1 {
    background: var(--bg-app) !important;
}

/* ── CARD BASE ───────────────────────────────────────────────── */
.card-hospitalario {
    background: var(--bg-card) !important;
    border-radius: 16px !important;
    border: 1px solid var(--border-card) !important;
    box-shadow: var(--sh-card) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.card-hospitalario:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--sh-hover) !important;
}

.card-hospitalario.border-l-4 { border-left-width: 4px !important; }

/* ── TABLAS ──────────────────────────────────────────────────── */
table thead { background: var(--blue-50) !important; }

table thead th {
    color: var(--text-3) !important;
    font-size: 0.60rem !important;
    letter-spacing: 0.09em !important;
    border-bottom: 1px solid var(--border) !important;
    font-weight: 700 !important;
}

table tbody tr { transition: background 0.12s !important; }
table tbody tr:hover { background-color: var(--blue-50) !important; }

/* ── BOTÓN PREMIUM ───────────────────────────────────────────── */
.btn-premium {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 9px 18px !important;
    background: linear-gradient(135deg, #1a6fd4 0%, #38bdf8 100%) !important;
    color: #fff !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-shadow: var(--sh-btn) !important;
    transition: transform 0.15s, box-shadow 0.15s, filter 0.15s !important;
}

.btn-premium:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--sh-blue) !important;
    filter: brightness(1.06) !important;
}

/* ── FORMULARIOS ─────────────────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
select, textarea {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    color: var(--text-1) !important;
    transition: border-color 0.14s, box-shadow 0.14s !important;
}

input:focus, select:focus, textarea:focus {
    outline: none !important;
    background: #fff !important;
    border-color: var(--blue-400) !important;
    box-shadow: 0 0 0 3px rgba(26,111,212,0.10) !important;
}

/* ── ALERTS ──────────────────────────────────────────────────── */
.alert-danger  { background: var(--danger-bg)  !important; color: #991b1b !important; border-color: rgba(220,38,38,0.15) !important; }
.alert-success { background: var(--success-bg) !important; color: #065f46 !important; border-color: rgba(5,150,105,0.15) !important; }
.alert-info    { background: var(--blue-50)    !important; color: var(--blue-700)   !important; }

/* ── ESTADOS ─────────────────────────────────────────────────── */
.status-urgente { color: var(--danger)  !important; font-weight: 700 !important; }
.status-ok      { color: var(--success) !important; font-weight: 700 !important; }

/* ══════════════════════════════════════════════════════════════
   EXPEDIENTE / FICHA DE PACIENTE
   Componentes exclusivos de expediente.php
══════════════════════════════════════════════════════════════ */

/* ── Hero del paciente ─────────────────────────────────────── */
.paciente-hero {
    background: linear-gradient(135deg, #0e2d6b 0%, #1a6fd4 60%, #38bdf8 100%);
    border-radius: 20px;
    padding: 28px 32px;
    color: white;
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 22px;
    box-shadow: 0 8px 32px rgba(14,45,107,0.22);
    position: relative;
    overflow: hidden;
}

/* Círculo decorativo usando box-shadow — NO pseudo-elementos */
.paciente-hero-decoration {
    position: absolute;
    right: -40px;
    top: -40px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    pointer-events: none;
}

.paciente-hero-decoration2 {
    position: absolute;
    right: 60px;
    bottom: -60px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    pointer-events: none;
}

.paciente-avatar-hero {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    border: 3px solid rgba(255,255,255,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
    backdrop-filter: blur(4px);
}

.paciente-hero-info h2 {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    margin-bottom: 4px;
}

.paciente-hero-info .nhc-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 100px;
    padding: 3px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: 'DM Mono', monospace;
    letter-spacing: 0.04em;
    margin-bottom: 10px;
}

.paciente-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
}

.paciente-hero-meta span {
    font-size: 0.80rem;
    color: rgba(255,255,255,0.78);
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}

.paciente-hero-stats {
    margin-left: auto;
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.hero-stat-pill {
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 14px;
    padding: 10px 16px;
    text-align: center;
    min-width: 80px;
    backdrop-filter: blur(4px);
}

.hero-stat-pill .val {
    font-size: 1.2rem;
    font-weight: 800;
    color: white;
    letter-spacing: -0.02em;
    display: block;
}

.hero-stat-pill .lbl {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.65);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: block;
    margin-top: 1px;
}

/* ── Pestañas de sección ──────────────────────────────────── */
.exp-tabs {
    display: flex;
    gap: 4px;
    background: white;
    border-radius: 12px;
    padding: 4px;
    border: 1px solid var(--border-card);
    box-shadow: var(--sh-card);
    margin-bottom: 22px;
    width: fit-content;
}

.exp-tab {
    padding: 8px 18px;
    border-radius: 9px;
    font-size: 0.80rem;
    font-weight: 600;
    color: var(--text-3);
    cursor: pointer;
    transition: all 0.16s;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: transparent;
}

.exp-tab:hover { color: var(--text-1); background: var(--blue-50); }

.exp-tab.active {
    background: linear-gradient(135deg, #1a6fd4, #38bdf8);
    color: white;
    box-shadow: 0 2px 8px rgba(26,111,212,0.28);
}

/* ── Signo vital card ─────────────────────────────────────── */
.vital-card {
    background: white;
    border-radius: 16px;
    border: 1px solid var(--border-card);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--sh-card);
    transition: transform 0.18s, box-shadow 0.18s;
    position: relative;
    overflow: hidden;
}

.vital-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-hover);
}

/* Barra de color lateral usando border-left — sin pseudo-elementos */
.vital-card { border-left: 3px solid transparent; }
.vital-card.vc-blue   { border-left-color: var(--blue-500); }
.vital-card.vc-teal   { border-left-color: var(--teal); }
.vital-card.vc-danger { border-left-color: var(--danger); }
.vital-card.vc-amber  { border-left-color: var(--amber); }
.vital-card.vc-purple { border-left-color: var(--purple); }
.vital-card.vc-sky    { border-left-color: var(--sky); }

.vital-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.vital-icon.blue   { background: var(--blue-50);  color: var(--blue-500); }
.vital-icon.teal   { background: var(--teal-bg);  color: var(--teal); }
.vital-icon.danger { background: var(--danger-bg); color: var(--danger); }
.vital-icon.amber  { background: var(--amber-bg); color: var(--amber); }
.vital-icon.purple { background: var(--purple-bg); color: var(--purple); }
.vital-icon.sky    { background: #e0f9ff; color: #0284c7; }

.vital-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vital-label {
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-3);
}

.vital-value {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--text-1);
    line-height: 1;
}

.vital-value span {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-3);
    margin-left: 2px;
}

.vital-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
}

.vital-status {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 100px;
}

.vital-status.normal  { background: var(--success-bg); color: var(--success); }
.vital-status.alto    { background: var(--danger-bg);  color: var(--danger); }
.vital-status.bajo    { background: var(--amber-bg);   color: var(--amber); }

.vital-time {
    font-size: 0.62rem;
    color: var(--text-4);
    font-family: 'DM Mono', monospace;
}

/* Minigráfica de tendencia (barras SVG inline) */
.vital-trend {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 28px;
}

.vital-trend-bar {
    width: 5px;
    border-radius: 3px 3px 0 0;
    background: var(--blue-200);
    transition: background 0.2s;
}

.vital-trend-bar.current { background: var(--blue-500); }

/* ── Info del paciente — secciones ───────────────────────── */
.info-section {
    background: white;
    border-radius: 16px;
    border: 1px solid var(--border-card);
    box-shadow: var(--sh-card);
    overflow: hidden;
}

.info-section-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--blue-50);
}

.info-section-header h3 {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-1);
}

.info-section-icon {
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, var(--blue-100), var(--blue-200));
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.80rem;
    color: var(--blue-600);
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

.info-field {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

.info-field:nth-child(even) { border-right: none; }
.info-field:nth-last-child(-n+2) { border-bottom: none; }

.info-field label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-3);
    display: block;
    margin-bottom: 4px;
}

.info-field p {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-1);
}

/* ── Timeline de historial ────────────────────────────────── */
.timeline {
    display: flex;
    flex-direction: column;
    padding: 16px 20px;
    gap: 0;
}

.timeline-item {
    display: flex;
    gap: 14px;
    padding-bottom: 20px;
    position: relative;
}

.timeline-item:last-child { padding-bottom: 0; }

.timeline-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.timeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--blue-400);
    border: 2px solid white;
    box-shadow: 0 0 0 2px var(--blue-200);
    flex-shrink: 0;
    margin-top: 3px;
}

.timeline-dot.danger  { background: var(--danger);  box-shadow: 0 0 0 2px rgba(220,38,38,0.20); }
.timeline-dot.success { background: var(--success); box-shadow: 0 0 0 2px rgba(5,150,105,0.20); }
.timeline-dot.amber   { background: var(--amber);   box-shadow: 0 0 0 2px rgba(217,119,6,0.20); }

.timeline-connector {
    width: 1.5px;
    flex: 1;
    background: var(--border);
    margin: 5px 0;
    min-height: 16px;
}

.timeline-item:last-child .timeline-connector { display: none; }

.timeline-content {
    flex: 1;
    padding-bottom: 4px;
}

.timeline-content h4 {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 2px;
}

.timeline-content p {
    font-size: 0.76rem;
    color: var(--text-3);
    line-height: 1.5;
}

.timeline-time {
    font-size: 0.62rem;
    font-family: 'DM Mono', monospace;
    color: var(--text-4);
    flex-shrink: 0;
    white-space: nowrap;
    padding-top: 2px;
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--blue-200); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue-300); }