/* ============================================================
   Sistema de Historias Clínicas — estilos base (Fase 0)
   Paleta médica sobria: teal profundo + superficies frías.
   ============================================================ */
:root {
    --brand:      #2b5c8a;
    --brand-600:  #234a70;
    --brand-050:  #eaf0f6;
    --ink:        #16323a;
    --muted:      #5b6b70;
    --line:       #e2e8ea;
    --surface:    #ffffff;
    --bg:         #f4f7f8;
    --danger:     #b42318;
    --radius:     12px;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--ink);
    background: var(--bg);
    margin: 0;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    letter-spacing: .5px;
    border-radius: 10px;
    flex: 0 0 auto;
}

.btn-brand {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    font-weight: 600;
}
.btn-brand:hover, .btn-brand:focus { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

.form-control:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 .2rem rgba(43, 92, 138, .15);
}

/* ---------------- Login ---------------- */
.auth-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #eef4f5 0%, #f4f7f8 60%);
    padding: 24px;
}
.login-wrap { width: 100%; max-width: 420px; }
.login-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: 0 10px 30px rgba(16, 50, 58, .06);
}
.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.login-app { font-weight: 700; font-size: 1.05rem; }
.login-sub { color: var(--muted); font-size: .85rem; }
.form-label { font-weight: 500; font-size: .9rem; margin-bottom: 6px; }
.login-note { color: var(--muted); font-size: .8rem; text-align: center; margin: 18px 0 0; }
.error-code { font-size: 2.5rem; font-weight: 700; color: var(--brand); }

/* ---------------- App shell ---------------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 250px;
    background: var(--surface);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    padding: 20px 16px;
}
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 4px 6px 20px; }
.brand-text { font-weight: 700; font-size: .98rem; }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar-nav .nav-link {
    color: var(--ink);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: .92rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sidebar-nav .nav-link:hover { background: var(--brand-050); }
.sidebar-nav .nav-link.active { background: var(--brand); color: #fff; }
.sidebar-nav .nav-link.disabled { color: #9aa8ac; pointer-events: none; }
.soon {
    font-size: .68rem;
    background: var(--bg);
    color: var(--muted);
    padding: 2px 7px;
    border-radius: 20px;
    font-weight: 600;
}
.sidebar-foot { border-top: 1px solid var(--line); padding-top: 12px; }
.sidebar-foot .nav-link { color: var(--muted); padding: 10px 12px; border-radius: 8px; }
.sidebar-foot .nav-link:hover { background: var(--bg); color: var(--ink); }

.app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 5;
}
.topbar-title { font-size: 1.15rem; font-weight: 600; margin: 0; flex: 1; }
.topbar-user { display: flex; align-items: center; gap: 10px; }
.user-meta { text-align: right; line-height: 1.15; }
.user-name { display: block; font-weight: 600; font-size: .9rem; }
.user-rol { display: block; color: var(--muted); font-size: .78rem; }
.user-avatar {
    width: 40px; height: 40px;
    background: var(--brand-050); color: var(--brand-600);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700;
}
.btn-icon { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 8px 10px; }
.hamburger, .hamburger::before, .hamburger::after {
    display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; position: relative;
}
.hamburger::before, .hamburger::after { content: ''; position: absolute; }
.hamburger::before { top: -6px; } .hamburger::after { top: 6px; }

.content { padding: 24px 28px; width: 100%; max-width: 1480px; margin: 0 auto; }

.welcome h2 { font-size: 1.4rem; font-weight: 700; margin: 0 0 6px; }
.welcome p { color: var(--muted); margin: 0 0 24px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 32px; }
.card-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.card-label { color: var(--muted); font-size: .82rem; margin-bottom: 6px; }
.card-value { font-size: 1.25rem; font-weight: 700; }
.card-help { color: var(--muted); font-size: .75rem; margin-top: 4px; }
.muted { color: var(--muted); font-weight: 400; font-size: .95rem; }

.next { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; }
.next h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 12px; }
.next-list { margin: 0; padding-left: 18px; color: var(--muted); line-height: 1.9; }
.next-list strong { color: var(--ink); }

/* Barra lateral como panel deslizable en móvil */
@media (max-width: 991.98px) {
    .sidebar.offcanvas-lg { width: 260px; }
    .content { padding: 18px; }
}

/* ============================================================
   Módulo Pacientes (Fase 1)
   ============================================================ */
.page-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.page-head h2 { font-size:1.4rem; font-weight:700; margin:0; }
.page-sub { color:var(--muted); margin:2px 0 0; font-size:.9rem; }
.mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }

/* Filtros */
.filtros { display:flex; gap:10px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line);
           border-radius:var(--radius); padding:14px; margin-bottom:18px; }
.filtros .form-control { flex:2 1 240px; }
.filtros .form-select { flex:1 1 160px; }

/* Tabla */
.tabla-wrap { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow-x:auto; }
.tabla { width:100%; border-collapse:collapse; min-width:640px; }
.tabla thead th { text-align:left; font-size:.78rem; letter-spacing:.02em; color:var(--muted);
                  padding:14px 16px; border-bottom:1px solid var(--line); font-weight:600; }
.tabla tbody td { padding:13px 16px; border-bottom:1px solid var(--line); font-size:.92rem; vertical-align:middle; }
.tabla tbody tr:last-child td { border-bottom:0; }
.tabla tbody tr:hover { background:var(--brand-050); }
.paciente-link { color:var(--ink); font-weight:600; text-decoration:none; }
.paciente-link:hover { color:var(--brand-600); text-decoration:underline; }
.vacio { text-align:center; color:var(--muted); padding:32px 16px; }
.text-end { text-align:right; }

.estado { display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:600; }
.estado::before { content:""; width:8px; height:8px; border-radius:50%; background:currentColor; }
.estado-activo { color:#0a8a4a; }
.estado-inactivo { color:#9aa8ac; }

/* Paginación */
.paginacion { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:18px; }
.pag { color:var(--brand-600); text-decoration:none; font-weight:600; font-size:.9rem; }
.pag.disabled { color:#c2ccce; pointer-events:none; }
.pag-info { color:var(--muted); font-size:.85rem; }

/* Formulario de paciente */
.bloque-nombres { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
                  padding:20px; margin-bottom:18px; }
.grid-3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.grid-3 .col-2 { grid-column:span 2; }
.grid-3 .col-3 { grid-column:span 3; }
.form-paciente .form-label { font-weight:500; font-size:.85rem; margin-bottom:5px; }
.campo-error { color:var(--danger); font-size:.8rem; margin-top:4px; }
.ayuda { color:var(--muted); font-size:.82rem; margin-top:12px; }
.check-inline .form-check { padding-top:6px; }

.form-paciente .nav-tabs { border-bottom:1px solid var(--line); gap:2px; }
.form-paciente .nav-tabs .nav-link { color:var(--muted); border:0; border-bottom:2px solid transparent;
                                     font-weight:600; font-size:.9rem; padding:10px 14px; background:none; }
.form-paciente .nav-tabs .nav-link:hover { color:var(--ink); }
.form-paciente .nav-tabs .nav-link.active { color:var(--brand-600); border-bottom-color:var(--brand); background:none; }
.form-paciente .tab-content { background:var(--surface); border:1px solid var(--line); border-top:0;
                              border-radius:0 0 var(--radius) var(--radius); padding:22px; }
.form-acciones { display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; }

@media (max-width: 767.98px) {
    .grid-3 { grid-template-columns:1fr; }
    .grid-3 .col-2, .grid-3 .col-3 { grid-column:span 1; }
    .filtros .form-control, .filtros .form-select { flex:1 1 100%; }
}

/* ============================================================
   Diseño 2 — Panel moderno
   ============================================================ */
/* Menú lateral oscuro */
.sidebar { background: linear-gradient(180deg, #1f4166 0%, #234a70 100%); border-right: 0; }
.sidebar-brand .brand-text { color: #eaf5f5; }
.sidebar .brand-mark { background: rgba(255,255,255,.16); color: #fff; }
.sidebar-nav .nav-link { color: #d0e7e8; }
.sidebar-nav .nav-link:hover { background: rgba(255,255,255,.10); color: #fff; }
.sidebar-nav .nav-link.active { background: rgba(255,255,255,.18); color: #fff; }
.sidebar-nav .nav-link.disabled { color: rgba(208,231,232,.45); }
.sidebar-nav .soon { background: rgba(255,255,255,.14); color: #dbeeef; }
.sidebar-foot { border-top-color: rgba(255,255,255,.16); }
.sidebar-foot .nav-link { color: #c2e2e3; }
.sidebar-foot .nav-link:hover { background: rgba(255,255,255,.10); color: #fff; }

/* Tarjetas de resumen */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
        padding: 16px 18px; box-shadow: 0 1px 2px rgba(16,50,58,.04); }
.stat .k { font-size: .76rem; color: var(--muted); font-weight: 600; }
.stat .v { font-size: 1.7rem; font-weight: 800; margin-top: 4px; line-height: 1.1; }
.stat .d { font-size: .74rem; font-weight: 700; margin-top: 3px; }
.stat .d.up { color: #0a8a4a; } .stat .d.flat { color: var(--muted); }

/* Avatar por paciente */
.rowav { display: flex; align-items: center; gap: 11px; }
.rowav .a { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
            font-weight: 700; font-size: .76rem; background: var(--brand-050); color: var(--brand-600); }
.rowav .nm { font-weight: 700; line-height: 1.2; }
.rowav .ap { color: var(--muted); font-size: .78rem; }

/* Chips de fecha */
.chip { font-size: .74rem; font-weight: 700; padding: 4px 10px; border-radius: 8px; white-space: nowrap; display: inline-block; }
.chip.hoy { color: #0a8a4a; background: rgba(10,138,74,.12); }
.chip.ayer { color: #8a6100; background: rgba(201,138,18,.16); }
.chip.old { color: var(--muted); background: var(--bg); }

/* Tabla estilo panel */
.tabla thead th { text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; }
.exp-link { color: var(--brand-600); font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums; }
.exp-link:hover { text-decoration: underline; }

@media (max-width: 767.98px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   Mi perfil
   ============================================================ */
.perfil-banner {
    display: flex; align-items: center; gap: 18px;
    background: linear-gradient(110deg, #1f4166 0%, #2b5c8a 55%, #3a6ea5 100%);
    border-radius: var(--radius); padding: 22px 26px; margin-bottom: 20px; color: #fff;
}
.perfil-ava, .foto-ava {
    width: 74px; height: 74px; border-radius: 50%; flex: none; overflow: hidden;
    display: grid; place-items: center; font-weight: 800; font-size: 1.4rem;
    background: #2b5c8a; color: #fff; border: 3px solid rgba(255,255,255,.6);
}
.perfil-ava img, .foto-ava img { width: 100%; height: 100%; object-fit: cover; }
.perfil-id .nombre { font-size: 1.15rem; font-weight: 800; }
.perfil-id .sub { color: #dbf1f2; font-size: .85rem; margin-top: 2px; }

.perfil-grid { display: grid; grid-template-columns: 1.9fr 1fr; gap: 18px; align-items: start; }
.perfil-col { display: flex; flex-direction: column; gap: 18px; }

.card-block {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px;
}
.card-block h3 { font-size: 1rem; font-weight: 700; margin: 0 0 16px; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-2 .col-2 { grid-column: 1 / -1; }
/* Ancho completo de todos los campos del perfil (evita el select angosto) */
.card-block .form-control,
.card-block .form-select { width: 100%; display: block; }
.card-block .form-label { font-weight: 500; font-size: .85rem; margin-bottom: 5px; }
.mt { margin-top: 14px; }

.sub-sep {
    margin: 22px 0 4px; padding-top: 16px; border-top: 1px solid var(--line);
    font-weight: 700; font-size: .92rem;
}
.sub-sep span { color: var(--muted); font-weight: 500; font-size: .82rem; }

.foto-row { display: flex; gap: 16px; align-items: flex-start; }
.foto-ava { width: 64px; height: 64px; font-size: 1.1rem; border-width: 2px; }
.foto-controls { flex: 1; min-width: 0; }

@media (max-width: 900px) {
    .perfil-grid { grid-template-columns: 1fr; }
    .grid-2 { grid-template-columns: 1fr; }
    .grid-2 .col-2 { grid-column: span 1; }
}

a.topbar-user { text-decoration: none; color: inherit; }
a.topbar-user:hover .user-avatar { filter: brightness(.95); }

/* ============================================================
   Configuración de cuenta
   ============================================================ */
.volver { color: var(--muted); text-decoration: none; font-size: .82rem; font-weight: 600; display: inline-block; margin-bottom: 6px; }
.volver:hover { color: var(--brand-600); }


/* tarjeta */
.cfg-card {
    height: 100%; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 20px; transition: border-color .15s, box-shadow .15s, transform .05s;
}
.cfg-card:hover { border-color: var(--brand); box-shadow: 0 6px 20px rgba(16,48,47,.08); }
.cfg-card:active { transform: translateY(1px); }
.cfg-ic {
    width: 42px; height: 42px; border-radius: 11px; background: var(--brand-050); color: var(--brand-600);
    display: grid; place-items: center; font-size: 1.15rem; margin-bottom: 8px;
}
.cfg-t { font-weight: 700; font-size: .98rem; }
.cfg-d { color: var(--muted); font-size: .82rem; line-height: 1.4; }
.cfg-card.is-soon { opacity: .6; cursor: default; }
.cfg-card.is-soon:hover { border-color: var(--line); box-shadow: none; }
.cfg-pronto { font-size: .66rem; font-weight: 700; color: var(--warn); background: rgba(201,138,18,.14); padding: 2px 7px; border-radius: 999px; vertical-align: middle; margin-left: 4px; }

/* Logo */
.logo-box {
    border: 1px dashed var(--line); border-radius: 12px; background: var(--bg);
    min-height: 180px; display: grid; place-items: center; padding: 18px; margin-bottom: 16px;
}
.logo-box img { max-width: 100%; max-height: 200px; object-fit: contain; }
.logo-vacio { color: var(--muted); font-size: .9rem; }
.logo-form .form-control { max-width: 420px; }



.tag-mini { font-size:.66rem; font-weight:700; color:var(--brand-600); background:var(--brand-050); padding:2px 7px; border-radius:999px; margin-left:6px; vertical-align:middle; }

/* Vista previa de usuario */
.pv-card { position: sticky; top: 12px; text-align: center; }
.pv-ava { width: 84px; height: 84px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.5rem; margin: 0 auto 12px; overflow: hidden; }
.pv-ava img { width: 100%; height: 100%; object-fit: cover; }
.pv-nom { font-weight: 800; font-size: 1.05rem; }
.pv-rol { margin: 8px 0 4px; }
.badge-rol { font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--brand-050); color: var(--brand-600); }
.pv-row { display: flex; justify-content: space-between; gap: 10px; font-size: .84rem; padding: 9px 0; border-top: 1px solid var(--line); }
.pv-row:first-of-type { margin-top: 12px; }
.pv-row span { color: var(--muted); }
.es-on { color: #0a8a4a; } .es-off { color: var(--muted); }

/* Roles y permisos */
.rolseg { display: inline-flex; gap: 6px; flex-wrap: wrap; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 5px; margin-bottom: 16px; }
.rolseg a { padding: 9px 16px; border-radius: 8px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: .86rem; }
.rolseg a.on { background: var(--brand); color: #fff; }
.owner-note { background: var(--brand-050); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; color: var(--brand-600); font-size: .82rem; margin-bottom: 16px; }
.perm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.modcard { height: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--surface); }
.modcard h4 { margin: 0 0 10px; font-size: .92rem; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.swrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: .85rem; border-top: 1px solid var(--line); }
.sw { position: relative; width: 38px; height: 22px; flex: none; display: inline-block; }
.sw input { opacity: 0; width: 0; height: 0; position: absolute; }
.sw span { position: absolute; inset: 0; background: #cdd8d9; border-radius: 999px; transition: .15s; cursor: pointer; }
.sw span::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .15s; }
.sw input:checked + span { background: var(--brand); }
.sw input:checked + span::before { transform: translateX(16px); }
@media (max-width: 900px) { .perm-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .perm-grid { grid-template-columns: 1fr; } }

/* Expediente del paciente */
.exp-banner { display: flex; align-items: center; gap: 18px; background: linear-gradient(110deg, var(--brand-700), var(--brand) 55%, #3a6ea5); color: #fff; border-radius: var(--radius); padding: 20px 24px; }
.exp-ava { width: 80px; height: 80px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 1.5rem; background: rgba(255,255,255,.16); border: 3px solid rgba(255,255,255,.6); }
.exp-id { flex: 1; min-width: 0; }
.exp-id .nombre { font-size: 1.2rem; font-weight: 800; }
.exp-id .sub { opacity: .9; font-size: .85rem; margin-top: 2px; }
.exp-id .chips { margin-top: 8px; }
.exp-id .chip { display: inline-block; font-size: .76rem; background: rgba(255,255,255,.18); padding: 4px 11px; border-radius: 999px; margin: 3px 5px 0 0; }
.btn-banner { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.4); text-decoration: none; padding: 9px 15px; border-radius: 9px; font-weight: 600; font-size: .85rem; }
.btn-banner:hover { background: rgba(255,255,255,.26); }
.exp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; margin: 16px 0 18px; }
.exp-tabs a { padding: 11px 15px; font-weight: 600; font-size: .88rem; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none; display: flex; align-items: center; gap: 6px; }
.exp-tabs a.on { color: var(--brand-600); border-bottom-color: var(--brand); }
.exp-tabs a.disabled { pointer-events: none; opacity: .7; }
.exp-tabs .soon { font-size: .6rem; background: var(--bg); color: var(--muted); padding: 1px 6px; border-radius: 999px; }
.drow { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: .88rem; border-bottom: 1px solid var(--line); }
.drow .dk { color: var(--muted); }
.hist-empty { border: 1px dashed var(--line); border-radius: 12px; padding: 30px; text-align: center; color: var(--muted); background: var(--bg); }

/* Agenda */
.ag-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ag-nav { display: flex; align-items: center; gap: 8px; }
.ag-arw { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); display: grid; place-items: center; text-decoration: none; font-size: 1.1rem; }
.ag-date { font-weight: 700; font-size: .95rem; }
.ag-filtro { min-width: 220px; }
.ag-turno { font-size: .76rem; font-weight: 700; color: var(--muted); letter-spacing: .04em; margin: 16px 0 8px; }
.ag-row { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 12px; margin-bottom: 8px; background: var(--surface); }
.ag-time { font-weight: 800; font-size: .95rem; min-width: 52px; }
.ag-av { width: 38px; height: 38px; border-radius: 50%; background: var(--brand-050); color: var(--brand-600); display: grid; place-items: center; font-weight: 700; font-size: .78rem; flex: none; }
.ag-info { flex: 1; min-width: 0; }
.ag-nm { font-weight: 700; }
.ag-mt { color: var(--muted); font-size: .8rem; }
.ag-est select { border: 0; color: #fff; font-weight: 700; font-size: .74rem; padding: 5px 9px; border-radius: 999px; cursor: pointer; -webkit-appearance: none; appearance: none; }
.ag-est select option { background: #fff; color: #16302f; }
.ag-edit { text-decoration: none; color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: .85rem; }
.ag-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.ag-legend span { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--muted); }
.ag-legend .dot { width: 11px; height: 11px; border-radius: 3px; }
@media (max-width: 640px) { .ag-mt { display: none; } }

/* Agenda: vistas Día / Semana + panel lateral */
.ag-vtabs { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.ag-vtabs a { padding: 8px 15px; font-weight: 600; font-size: .84rem; color: var(--muted); text-decoration: none; border-right: 1px solid var(--line); }
.ag-vtabs a:last-child { border-right: 0; }
.ag-vtabs a.on { background: var(--brand); color: #fff; }
.ag-split { display: flex; gap: 16px; align-items: flex-start; }
.ag-split.solo { display: block; }
.ag-main { flex: 1 1 auto; min-width: 0; }
.ag-aside { width: 280px; flex: none; }
.ag-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 14px; background: var(--surface); }
.ag-card .lbl { font-size: .76rem; color: var(--muted); font-weight: 600; display: block; margin-bottom: 4px; }
/* rejilla Día */
.cal { display: flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.cal-gutter { width: 56px; flex: none; border-right: 1px solid var(--line); }
.cal-h { height: 48px; font-size: .72rem; color: var(--muted); text-align: right; padding: 2px 8px 0; box-sizing: border-box; }
.cal-track { position: relative; flex: 1 1 auto; }
.cal-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.cal-appt { position: absolute; left: 6px; right: 6px; border-radius: 8px; padding: 5px 9px; color: #fff; text-decoration: none; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.cal-appt b { display: block; font-size: .78rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-appt small { display: block; font-size: .7rem; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* rejilla Semana */
.wk { display: flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.wk-col { flex: 1 1 0; border-left: 1px solid var(--line); min-height: 220px; min-width: 0; }
.wk-col:first-child { border-left: 0; }
.wk-head { display: block; text-align: center; padding: 8px 4px; border-bottom: 1px solid var(--line); background: var(--bg); text-decoration: none; color: var(--ink); }
.wk-head span { display: block; font-size: .68rem; color: var(--muted); font-weight: 600; }
.wk-head b { font-size: 1rem; }
.wk-head.hoy { background: var(--brand-050); color: var(--brand-600); }
.wk-body { padding: 6px; display: flex; flex-direction: column; gap: 5px; }
.wk-pill { border-radius: 6px; color: #fff; font-size: .68rem; font-weight: 600; padding: 4px 7px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* mini-calendario */
.mc-head { text-align: center; font-weight: 700; font-size: .86rem; margin-bottom: 8px; text-transform: capitalize; }
.minical { width: 100%; border-collapse: collapse; }
.minical th { font-size: .64rem; color: var(--muted); font-weight: 600; padding: 3px 0; text-align: center; }
.minical td { text-align: center; padding: 1px; }
.minical td a { display: block; padding: 5px 0; font-size: .78rem; color: var(--ink); text-decoration: none; border-radius: 7px; }
.minical td.on a { background: var(--brand); color: #fff; }
.minical td.tod a { color: var(--brand-600); font-weight: 800; }
@media (max-width: 860px) { .ag-split { flex-direction: column; } .ag-aside { width: 100%; } .cal-appt small { display: none; } }

/* Agenda: vista Mes */
.mes { display: flex; flex-direction: column; border: 1px solid var(--line,#e4ebec); border-radius: 12px; overflow: hidden; background: var(--surface,#fff); }
.mes-head { display: flex; }
.mes-head div { flex: 1 1 0; min-width: 0; text-align: center; padding: 8px 4px; font-size: .7rem; font-weight: 700; color: var(--muted,#6b8385); background: var(--bg,#f2f6f6); border-left: 1px solid var(--line,#e4ebec); }
.mes-head div:first-child { border-left: 0; }
.mes-week { display: flex; }
.mc-day { flex: 1 1 0; min-width: 0; min-height: 98px; border-left: 1px solid var(--line,#e4ebec); border-top: 1px solid var(--line,#e4ebec); padding: 5px 5px 7px; text-decoration: none; color: var(--ink,#16302f); display: block; }
.mc-day:first-child { border-left: 0; }
.mc-day.dim { background: var(--bg,#f2f6f6); }
.mc-day.dim .mc-dn { color: #b6c2c4; }
.mc-dn { font-size: .8rem; font-weight: 700; display: inline-block; width: 24px; height: 24px; line-height: 24px; text-align: center; }
.mc-day.hoy .mc-dn { background: var(--brand,#2b5c8a); color: #fff; border-radius: 50%; }
.mc-ev { display: block; font-size: .64rem; color: #fff; border-radius: 4px; padding: 2px 5px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-more { display: block; font-size: .64rem; color: var(--muted,#6b8385); margin-top: 3px; font-weight: 600; }
@media (max-width: 640px) { .mc-day { min-height: 64px; } .mc-ev { font-size: .58rem; } }

/* ============================================================
   SAP Business One · clásico renovado (Grafito/Slate)
   Capa 2/3 — estilo de contenido (tablas, tarjetas, botones, formularios)
   ============================================================ */
:root{ --radius:8px; --bg:#f3f6f9; }
body{ background:#f3f6f9; }

/* Encabezado de página */
.page-head h2{ font-size:1.22rem; letter-spacing:-.01em; }

/* Tarjetas / KPIs — planas, borde fino */
.stat, .card-block, .tabla-wrap, .filtros{
  border:1px solid #e1e6ec !important;
  border-radius:8px !important;
  box-shadow:0 1px 2px rgba(20,40,60,.04);
}
.stat{ padding:14px 16px; }
.stat .v{ font-size:1.55rem; color:#1f2a37; }
.card-block{ padding:16px 18px; }

/* Botones planos estilo SAP */
.btn{ border-radius:8px; font-weight:600; }
.btn-brand, .btn-primary{ background:#2b5c8a !important; border-color:#2b5c8a !important; color:#fff !important; box-shadow:none; }
.btn-brand:hover, .btn-brand:focus, .btn-primary:hover, .btn-primary:focus{ background:#234a70 !important; border-color:#234a70 !important; color:#fff !important; }
.btn-outline-secondary{ border-radius:8px; }

/* Tablas estilo SAP (encabezado gris, filas densas, hover slate) */
.tabla thead th{
  background:#f4f6f8 !important; color:#5b6b7b !important;
  text-transform:uppercase; letter-spacing:.04em; font-size:.68rem; font-weight:700;
  padding:10px 14px; border-bottom:1px solid #e1e6ec;
}
.tabla tbody td{ padding:10px 14px; border-bottom:1px solid #eef1f4; font-size:.86rem; }
.tabla tbody tr:hover{ background:#eef4fb !important; }

/* Inputs / selects / filtros */
.form-control, .form-select{ border-color:#d7dde4; border-radius:8px; }
.form-control:focus, .form-select:focus{ border-color:#2b5c8a; box-shadow:0 0 0 .18rem rgba(43,92,138,.15); }
.filtros{ padding:12px 14px; background:#fff; }

/* Formulario: pestañas estilo SAP — con especificidad suficiente para ganar a las reglas .form-paciente */
.nav-tabs{ border-bottom:1px solid #e1e6ec; gap:3px; }
.nav-tabs .nav-link{ color:#5b6b7b; border:none; border-radius:8px 8px 0 0; font-size:.86rem; font-weight:600; padding:8px 14px; }
.nav-tabs .nav-link:hover{ background:#f1f4f8; border:none; color:#1f2a37; }
.nav-tabs .nav-link.active{ color:#2b5c8a; background:#eef4fb; border:none; }
.form-paciente .nav-tabs{ border-bottom:1px solid #e1e6ec; }
.form-paciente .nav-tabs .nav-link{ color:#5b6b7b; border:0; border-radius:8px 8px 0 0; }
.form-paciente .nav-tabs .nav-link:hover{ color:#1f2a37; background:#f1f4f8; }
.form-paciente .nav-tabs .nav-link.active{ color:#2b5c8a; background:#eef4fb; border:0; border-bottom-color:transparent; }

/* Paneles del formulario — planos, tono SAP */
.bloque-nombres, .form-paciente .tab-content{ border:1px solid #e1e6ec; box-shadow:0 1px 2px rgba(20,40,60,.04); }

/* Campos obligatorios en ámbar suave (marca SAP B1) — por clase .req */
.form-control.req, .form-select.req, .req{
  background:#fffaf0 !important;
  border-color:#f0d9a8 !important;
  box-shadow:inset 3px 0 0 #e9b949;
}
.form-control.req:focus, .form-select.req:focus{
  border-color:#e9b949 !important;
  box-shadow:inset 3px 0 0 #e9b949, 0 0 0 .18rem rgba(233,185,73,.2) !important;
}