/* Brigada Médica — estilos por rol · sin gradientes · mobile-first */

/* ─── Variables ─────────────────────────────────────────────────────────── */
:root {
    --color-triage:    #b45309;
    --color-medico:    #0e7490;
    --color-farmacia:  #047857;
    --color-admin:     #1e40af;

    --radius: 0.45rem;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.09);
    --shadow:    0 3px 8px rgba(0,0,0,.08);
    --shadow-lg: 0 8px 16px rgba(0,0,0,.1);
    --transition: .13s ease-in-out;
}

/* ─── Base ───────────────────────────────────────────────────────────────── */
body {
    font-size: .93rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f1f5f9;
    color: #1e293b;
}
main { flex: 1 0 auto; }

/* ─── Navbar por rol (sin gradiente) ─────────────────────────────────────── */
.navbar {
    border-bottom: 3px solid rgba(255,255,255,.2);
}
.navbar-rol-triage   { background-color: #92400e !important; }
.navbar-rol-medico   { background-color: #0e7490 !important; }
.navbar-rol-farmacia { background-color: #065f46 !important; }
.navbar-rol-admin    { background-color: #1e3a8a !important; }

.navbar-brand { font-weight: 700; font-size: 1.05rem; }

.rol-badge-triage   { background: rgba(255,255,255,.15) !important; color: #fef3c7 !important; }
.rol-badge-medico   { background: rgba(255,255,255,.15) !important; color: #cffafe !important; }
.rol-badge-farmacia { background: rgba(255,255,255,.15) !important; color: #d1fae5 !important; }
.rol-badge-admin    { background: rgba(255,255,255,.15) !important; color: #dbeafe !important; }

/* Botón de idioma */
.btn-lang {
    font-size: .72rem; font-weight: 700;
    padding: .2rem .55rem; border-radius: .3rem;
    border: 1px solid rgba(255,255,255,.35);
    color: rgba(255,255,255,.85);
    background: transparent;
    text-decoration: none; cursor: pointer;
    letter-spacing: .5px;
    transition: background var(--transition);
}
.btn-lang:hover { background: rgba(255,255,255,.15); color: #fff; }
.btn-lang.active { background: rgba(255,255,255,.25); color: #fff; }

/* ─── Login ──────────────────────────────────────────────────────────────── */
.login-page {
    background-color: #e2e8f0;
    min-height: 100vh;
}
.login-page .card {
    border: none;
    border-radius: .65rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.login-icon {
    width: 68px; height: 68px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background-color: #dbeafe;
    margin-bottom: .5rem;
}
.login-icon i { font-size: 1.9rem; color: #1d4ed8; }

/* ─── Cards ──────────────────────────────────────────────────────────────── */
.card {
    border-radius: var(--radius);
    border: 1px solid #e2e8f0;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}
.card-header {
    border-bottom: 1px solid #e2e8f0;
    padding: .7rem 1rem;
    font-size: .88rem;
}
.card-header.bg-white { background: #fafafa !important; }

.card-paciente { border-left-width: 4px !important; border-left-style: solid !important; }
.card-paciente:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg) !important; }

/* ─── Urgencia de espera ─────────────────────────────────────────────────── */
.wait-ok      { color: #047857; font-weight: 600; }
.wait-warn    { color: #b45309; font-weight: 600; }
.wait-danger  { color: #b91c1c; font-weight: 700; }

.espera-ok      { border-left-color: #047857 !important; }
.espera-warn    { border-left-color: #b45309 !important; }
.espera-danger  { border-left-color: #b91c1c !important; }
.espera-consulta{ border-left-color: #0e7490 !important; }

/* ─── Badges estado legibles ─────────────────────────────────────────────── */
.estado-badge {
    font-size: .68rem; font-weight: 700;
    padding: .28em .6em; border-radius: 2em;
    text-transform: uppercase; letter-spacing: .4px;
}
.estado-en_triage   { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.estado-en_consulta { background: #cffafe; color: #164e63; border: 1px solid #a5f3fc; }
.estado-en_farmacia { background: #d1fae5; color: #064e3b; border: 1px solid #a7f3d0; }
.estado-atendido    { background: #dcfce7; color: #14532d; border: 1px solid #86efac; }
.estado-cancelado   { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }

/* ─── Chips vitales ──────────────────────────────────────────────────────── */
.vital-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.vital-chip {
    display: inline-flex; align-items: center; gap: .22rem;
    background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 1rem; padding: .13rem .55rem;
    font-size: .76rem; color: #475569; font-weight: 500; white-space: nowrap;
}

/* ─── Step flow (triage) ─────────────────────────────────────────────────── */
.step-flow {
    display: flex; align-items: center;
    margin-bottom: 1.25rem; overflow-x: auto; padding-bottom: .2rem;
}
.step-item {
    display: flex; align-items: center; gap: .45rem;
    padding: .45rem .7rem; border-radius: .35rem;
    font-size: .78rem; font-weight: 600; color: #94a3b8; white-space: nowrap;
}
.step-item.active { color: #92400e; background: #fffbeb; }
.step-item.done   { color: #047857; background: #f0fdf4; }
.step-num {
    width: 1.35rem; height: 1.35rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 700; background: #e2e8f0; color: #64748b; flex-shrink: 0;
}
.step-item.active .step-num { background: #92400e; color: #fff; }
.step-item.done   .step-num { background: #047857; color: #fff; }
.step-arrow { color: #cbd5e1; margin: 0 .15rem; font-size: .72rem; }

/* ─── Sección formulario ─────────────────────────────────────────────────── */
.form-section {
    background: #f8fafc; border-radius: var(--radius);
    border: 1px solid #e2e8f0; padding: .9rem;
    margin-bottom: .9rem;
}
.form-section-title {
    font-size: .8rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; margin-bottom: .7rem;
    display: flex; align-items: center; gap: .35rem;
}

/* Input con unidades */
.input-vital .form-control { border-radius: var(--radius) 0 0 var(--radius); font-weight: 500; }
.input-vital .input-group-text {
    background: #f1f5f9; border-color: #e2e8f0;
    color: #64748b; font-size: .76rem; font-weight: 600;
    min-width: 2.8rem; justify-content: center;
}

/* ─── Metric cards (admin) — sin gradiente ───────────────────────────────── */
.metric-card {
    border-radius: var(--radius); border: none;
    box-shadow: var(--shadow-sm); overflow: hidden; position: relative;
}
.metric-card .metric-icon {
    position: absolute; right: .9rem; bottom: .6rem;
    font-size: 2.8rem; opacity: .07;
}
.metric-num {
    font-size: 2rem; font-weight: 800; line-height: 1;
    margin: .3rem 0 .15rem;
}
.metric-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; opacity: .65; }

/* ─── Tablas ──────────────────────────────────────────────────────────────── */
.table thead th {
    font-size: .73rem; text-transform: uppercase;
    letter-spacing: .45px; color: #64748b; font-weight: 700; background: #f8fafc;
}
.table tbody tr:hover { background: #f8fafc; }

/* ─── Alertas ─────────────────────────────────────────────────────────────── */
.alert { border: none; border-left: 4px solid; border-radius: var(--radius); }
.alert-success  { border-left-color: #047857; background: #f0fdf4; }
.alert-info     { border-left-color: #0e7490; background: #f0f9ff; }
.alert-warning  { border-left-color: #b45309; background: #fffbeb; }
.alert-danger   { border-left-color: #b91c1c; background: #fef2f2; }

/* ─── Empty state ─────────────────────────────────────────────────────────── */
.empty-state { padding: 2.5rem 1rem; text-align: center; color: #94a3b8; }
.empty-state i { font-size: 2.2rem; opacity: .35; display: block; margin-bottom: .5rem; }
.empty-state p { margin: 0; font-size: .88rem; }

/* ─── Stock bar ───────────────────────────────────────────────────────────── */
.stock-bar-wrap { background: #e2e8f0; border-radius: 1rem; height: 6px; margin-top: .25rem; }
.stock-bar { border-radius: 1rem; height: 6px; }
.stock-bar.ok       { background: #047857; }
.stock-bar.warn     { background: #b45309; }
.stock-bar.critical { background: #b91c1c; }

/* ─── Impresión ───────────────────────────────────────────────────────────── */
@media print {
    .no-print, .navbar, footer, form .btn, .modal, button, nav { display: none !important; }
    .printable { border: 1px solid #dee2e6 !important; box-shadow: none !important; }
    body { background: #fff !important; }
    .container, .container-fluid { max-width: 100% !important; }
}

/* ─── Móvil ───────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    h1.h3, h1.h4 { font-size: 1.15rem; }
    .metric-num  { font-size: 1.65rem; }
    .card-body   { padding: .7rem; }
    .table       { font-size: .8rem; }
    .step-item   { padding: .35rem .5rem; }
}

/* ─── Animaciones ─────────────────────────────────────────────────────────── */
@keyframes pulse-success { 0% { background-color: rgba(4,120,87,.12); } 100% { background-color: transparent; } }
.fade-update { animation: pulse-success .55s ease-out; }

@keyframes pulse-danger { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.pulse-danger { animation: pulse-danger 1.8s ease-in-out infinite; }

[data-cola] { min-height: 100px; }
.min-vh-100 { min-height: 100vh; }