/* ============================================================================
   Clínica · Gestión de recalls — sistema de diseño (FRONTEND_V3 §B.1)
   Aplicación de gestión sanitaria profesional. Tema claro, accesible.
   ============================================================================ */

:root{
  --sidebar-w:240px;
  --c-bg:#f5f7fa; --c-surface:#ffffff; --c-surface-2:#f8fafc;
  --c-sidebar:#0f2740; --c-sidebar-2:#17324f; --c-sidebar-act:#1e88e5;
  --c-primary:#1e88e5; --c-primary-h:#1669b8;
  --c-text:#111827; --c-text-2:#5b6472; --c-border:#e5e8ee;
  --c-ok:#12805c; --c-ok-bg:#e5f4ee; --c-warn:#b45309; --c-warn-bg:#fdf1e3;
  --c-info:#1e60d1; --c-info-bg:#e7effc; --c-neutral:#64748b; --c-neutral-bg:#eef1f5;
  --c-danger:#c02626; --c-danger-bg:#fbeaea;
  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10);
  --shadow-lg:0 8px 24px rgba(16,24,40,.12);
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* OBLIGATORIO: arregla el bug del "login fantasma" y del scroll que salta.
   El atributo hidden debe ganar SIEMPRE, aunque una clase fije display. */
[hidden]{display:none !important;}

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--c-bg); color:var(--c-text);
  font-family:var(--font,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif);
  font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;}
a{color:var(--c-primary); text-decoration:none;}
a:hover{text-decoration:underline;}

/* ============================================================================
   LOGIN — pantalla completa
   ============================================================================ */
.login-screen{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:
    radial-gradient(1200px 600px at 15% -10%, #16324f 0%, transparent 60%),
    radial-gradient(1000px 500px at 110% 120%, #1e88e5 0%, transparent 55%),
    #0f2740;
}
.login-card{
  width:100%; max-width:400px; background:var(--c-surface);
  border-radius:16px; box-shadow:var(--shadow-lg); padding:32px 30px;
}
.login-brand{display:flex; align-items:center; gap:12px; margin-bottom:22px;}
.brand-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px; flex:none;
  background:linear-gradient(135deg,var(--c-primary),#0f2740); color:#fff;
}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-text strong{font-size:16px; font-weight:700; color:var(--c-text);}
.brand-text span{font-size:12.5px; color:var(--c-text-2);}
.login-form{display:flex; flex-direction:column; gap:14px; margin-top:6px;}
.login-error{
  background:var(--c-danger-bg); color:var(--c-danger); border:1px solid #f2caca;
  padding:9px 12px; border-radius:var(--radius-sm); font-size:13px;
}
.login-foot{margin:18px 0 0; text-align:center; color:var(--c-text-2); font-size:12px;}

/* ============================================================================
   SHELL — grid, 100dvh, sin scroll de página
   ============================================================================ */
.app-shell{
  height:100dvh; display:grid; grid-template-columns:var(--sidebar-w) 1fr;
  overflow:hidden;
}

/* --- Sidebar fija, oscura --- */
.sidebar{
  position:fixed; top:0; left:0; width:var(--sidebar-w); height:100dvh;
  display:flex; flex-direction:column; z-index:20;
  background:linear-gradient(180deg,var(--c-sidebar),var(--c-sidebar-2));
  color:#cdd7e4; border-right:1px solid rgba(255,255,255,.06);
}
.sidebar-brand{
  display:flex; align-items:center; gap:11px; padding:18px 18px 16px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.sidebar-brand .brand-mark{width:38px; height:38px; border-radius:10px;}
.sidebar-brand .brand-text strong{color:#fff; font-size:15px;}
.sidebar-brand .brand-text span{color:#8fa6c0; font-size:11.5px;}

.sidebar-nav{display:flex; flex-direction:column; gap:2px; padding:14px 12px; flex:1; overflow-y:auto;}
.nav-item{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:10px 12px; border:0; border-radius:var(--radius-sm);
  background:transparent; color:#b9c6d6; font-size:14px; font-weight:500;
  cursor:pointer; text-align:left; position:relative; transition:background .12s,color .12s;
}
.nav-item .nav-ic{flex:none; opacity:.85;}
.nav-item:hover{background:rgba(255,255,255,.06); color:#eaf1f9;}
.nav-item.active{background:rgba(30,136,229,.18); color:#fff;}
.nav-item.active::before{
  content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px;
  border-radius:0 3px 3px 0; background:var(--c-sidebar-act);
}
.nav-item.active .nav-ic{opacity:1;}

.sidebar-foot{padding:12px; border-top:1px solid rgba(255,255,255,.07); display:flex; flex-direction:column; gap:10px;}
.sidebar-user{display:flex; align-items:center; gap:9px;}
.sidebar-avatar{
  width:32px; height:32px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--c-primary); color:#fff; font-size:13px; font-weight:700; text-transform:uppercase;
}
.sidebar-user-meta{flex:1; min-width:0; line-height:1.2;}
.sidebar-user-meta strong{display:block; color:#fff; font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sidebar-user-meta span{display:block; color:#8fa6c0; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sidebar-foot .btn-icon{color:#b9c6d6;}
.sidebar-foot .btn-icon:hover{background:rgba(255,255,255,.1); color:#fff;}

/* --- Main: ÚNICO scroll --- */
.main{
  grid-column:2; height:100dvh; overflow-y:auto; overflow-x:hidden;
  background:var(--c-bg); scroll-behavior:smooth;
}
.view{padding:24px 28px 40px; max-width:1440px; margin:0 auto;}

/* --- Píldora modo demostración (discreta, ámbar suave) --- */
.pill-demo{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 10px; border-radius:999px; font-size:11.5px; font-weight:600;
  background:rgba(180,83,9,.18); color:#f6cf9a; border:1px solid rgba(180,83,9,.35);
}
.pill-demo .pill-dot{width:7px; height:7px; border-radius:50%; background:#f0a44a; flex:none;}

/* ============================================================================
   VIEW HEAD — título + subtítulo + acciones
   ============================================================================ */
.view-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  margin-bottom:20px; flex-wrap:wrap;
}
.view-head-text h1{margin:0; font-size:22px; font-weight:700; letter-spacing:-.01em;}
.view-head-text p{margin:4px 0 0; color:var(--c-text-2); font-size:13.5px;}
.view-head-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}

/* ============================================================================
   CARD
   ============================================================================ */
.card{
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:18px;
}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px;}
.card-title{font-size:14.5px; font-weight:650; margin:0;}
.card-sub{font-size:12.5px; color:var(--c-text-2); margin:2px 0 0;}
.grid{display:grid; gap:16px;}

/* ============================================================================
   KPI — número grande + etiqueta + delta + sparkline
   ============================================================================ */
.kpi{
  background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 16px 12px;
  display:flex; flex-direction:column; gap:6px; min-width:0;
}
.kpi-label{font-size:12px; color:var(--c-text-2); font-weight:600; text-transform:none; display:flex; align-items:center; gap:6px;}
.kpi-value{font-size:26px; font-weight:750; letter-spacing:-.02em; line-height:1.1;}
.kpi-value.money{font-variant-numeric:tabular-nums;}
.kpi-foot{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:2px;}
.kpi-delta{font-size:12px; font-weight:650; display:inline-flex; align-items:center; gap:3px;}
.kpi-delta.up{color:var(--c-ok);}
.kpi-delta.down{color:var(--c-danger);}
.kpi-delta.flat{color:var(--c-text-2);}
.kpi-spark{height:28px; width:100%; overflow:hidden;}
.kpi-accent{width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:none; background:var(--c-info-bg); color:var(--c-info);}

/* ============================================================================
   BOTONES
   ============================================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 15px; border-radius:var(--radius-sm); border:1px solid var(--c-border);
  background:var(--c-surface); color:var(--c-text); font-size:13.5px; font-weight:600;
  cursor:pointer; transition:background .12s,border-color .12s,color .12s,box-shadow .12s;
  white-space:nowrap; user-select:none; line-height:1.2;
}
.btn:hover{background:var(--c-surface-2); border-color:#d3d9e2;}
.btn:disabled{opacity:.55; cursor:not-allowed;}
.btn svg{flex:none;}
.btn-primary{background:var(--c-primary); border-color:var(--c-primary); color:#fff;}
.btn-primary:hover{background:var(--c-primary-h); border-color:var(--c-primary-h);}
.btn-ghost{background:transparent; border-color:transparent;}
.btn-ghost:hover{background:rgba(15,39,64,.06); border-color:transparent;}
.btn-danger{background:var(--c-danger); border-color:var(--c-danger); color:#fff;}
.btn-danger:hover{background:#a51f1f; border-color:#a51f1f;}
.btn-danger-soft{background:var(--c-danger-bg); border-color:#f2caca; color:var(--c-danger);}
.btn-danger-soft:hover{background:#f7dcdc;}
.btn-sm{padding:6px 11px; font-size:12.5px; border-radius:7px;}
.btn-icon{padding:8px; width:auto; aspect-ratio:1; border-radius:8px;}
.btn-icon.btn-sm{padding:6px;}
.btn-block{width:100%; padding:11px 15px;}

/* ============================================================================
   BADGE (estados §B.4) — Por contactar / No contesta / Citado / etc.
   ============================================================================ */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px; border-radius:999px; font-size:12px; font-weight:650;
  border:1px solid transparent; white-space:nowrap; line-height:1.4;
}
.badge .badge-dot{width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; opacity:.9;}
.badge-neutral{background:var(--c-neutral-bg); color:#475569; border-color:#dde3ea;}
.badge-ok{background:var(--c-ok-bg); color:var(--c-ok); border-color:#c3e6d7;}
.badge-warn{background:var(--c-warn-bg); color:var(--c-warn); border-color:#f3ddbd;}
.badge-info{background:var(--c-info-bg); color:var(--c-info); border-color:#c9dcf7;}
.badge-danger{background:var(--c-danger-bg); color:var(--c-danger); border-color:#f2caca;}

/* ============================================================================
   CHIP
   ============================================================================ */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:999px; font-size:12.5px; font-weight:600;
  background:var(--c-surface-2); color:var(--c-text-2); border:1px solid var(--c-border);
}
.chip-kpi{flex-direction:column; align-items:flex-start; gap:1px; padding:8px 14px; border-radius:10px; background:var(--c-surface);}
.chip-kpi .chip-k{font-size:11px; color:var(--c-text-2); font-weight:600;}
.chip-kpi .chip-v{font-size:16px; font-weight:750; color:var(--c-text); font-variant-numeric:tabular-nums;}
.chip-close{cursor:pointer; opacity:.6; display:inline-flex;}
.chip-close:hover{opacity:1;}
.chip.selected{background:var(--c-info-bg); color:var(--c-info); border-color:#c9dcf7;}
.chip-strip{display:flex; align-items:stretch; gap:10px; flex-wrap:wrap;}

/* ============================================================================
   TABLE — cabecera sticky, zebra, hover, números a la derecha
   ============================================================================ */
.table-wrap{overflow-x:auto; border:1px solid var(--c-border); border-radius:var(--radius); background:var(--c-surface);}
.table{width:100%; border-collapse:separate; border-spacing:0; font-size:13px;}
.table thead th{
  position:sticky; top:0; z-index:2; background:var(--c-surface-2);
  text-align:left; font-weight:650; color:var(--c-text-2); font-size:11.5px;
  text-transform:uppercase; letter-spacing:.03em;
  padding:10px 14px; border-bottom:1px solid var(--c-border); white-space:nowrap;
}
.table tbody td{padding:10px 14px; border-bottom:1px solid var(--c-border); vertical-align:middle;}
.table tbody tr:last-child td{border-bottom:0;}
.table tbody tr:nth-child(even){background:var(--c-surface-2);}
.table tbody tr:hover{background:#eef4fb;}
.table td.num,.table th.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
.table td.center,.table th.center{text-align:center;}
.table .row-flash{animation:rowflash 1.1s ease;}
@keyframes rowflash{0%{background:var(--c-ok-bg);}100%{background:transparent;}}
.table-row-clickable{cursor:pointer;}

/* Selector de estado en celda (limpio) */
.cell-estado-select{
  border:1px solid transparent; background:transparent; border-radius:999px;
  padding:3px 8px; font-size:12px; font-weight:650; cursor:pointer; appearance:none;
  -webkit-appearance:none; padding-right:22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6472' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 6px center;
}
.cell-estado-select:hover{border-color:var(--c-border); background-color:var(--c-surface);}

/* ============================================================================
   DRAWER — panel lateral derecho deslizante (detalle de paciente)
   ============================================================================ */
.drawer-host{position:fixed; inset:0; z-index:60;}
.drawer-overlay{position:absolute; inset:0; background:rgba(15,23,42,.32); animation:fade .18s ease;}
.drawer-panel{
  position:absolute; top:0; right:0; height:100%; width:min(480px,92vw);
  background:var(--c-surface); box-shadow:-8px 0 30px rgba(16,24,40,.18);
  display:flex; flex-direction:column; animation:slidein .22s cubic-bezier(.4,0,.2,1);
}
@keyframes slidein{from{transform:translateX(100%);}to{transform:translateX(0);}}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
.drawer-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 20px 14px; border-bottom:1px solid var(--c-border);}
.drawer-head h2{margin:0; font-size:17px; font-weight:700;}
.drawer-head p{margin:3px 0 0; color:var(--c-text-2); font-size:12.5px;}
.drawer-body{flex:1; overflow-y:auto; padding:18px 20px 28px; display:flex; flex-direction:column; gap:20px;}
.drawer-section h3{margin:0 0 10px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--c-text-2);}
.drawer-facts{display:grid; grid-template-columns:1fr 1fr; gap:10px 16px;}
.drawer-fact{min-width:0;}
.drawer-fact .k{font-size:11px; color:var(--c-text-2); font-weight:600;}
.drawer-fact .v{font-size:13.5px; color:var(--c-text); overflow-wrap:anywhere;}

/* ============================================================================
   MODAL
   ============================================================================ */
.modal-host{position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center; padding:24px;}
.modal-overlay{position:absolute; inset:0; background:rgba(15,23,42,.4); animation:fade .16s ease;}
.modal{
  position:relative; background:var(--c-surface); border-radius:16px; box-shadow:var(--shadow-lg);
  width:100%; max-width:520px; max-height:88vh; display:flex; flex-direction:column;
  animation:pop .18s cubic-bezier(.34,1.4,.7,1);
}
.modal.modal-wide{max-width:720px;}
@keyframes pop{from{opacity:0; transform:translateY(8px) scale(.98);}to{opacity:1; transform:none;}}
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px 12px; border-bottom:1px solid var(--c-border);}
.modal-head h2{margin:0; font-size:17px; font-weight:700;}
.modal-body{padding:18px 22px; overflow-y:auto; display:flex; flex-direction:column; gap:14px;}
.modal-foot{display:flex; align-items:center; justify-content:flex-end; gap:9px; padding:14px 22px; border-top:1px solid var(--c-border);}

/* ============================================================================
   TOAST
   ============================================================================ */
.toast-host{position:fixed; right:20px; bottom:20px; z-index:90; display:flex; flex-direction:column; gap:9px; align-items:flex-end;}
.toast{
  display:flex; align-items:center; gap:9px; min-width:220px; max-width:380px;
  padding:11px 14px; border-radius:10px; box-shadow:var(--shadow-lg);
  background:#1f2937; color:#fff; font-size:13px; font-weight:500;
  animation:toastin .2s ease; border-left:3px solid var(--c-neutral);
}
@keyframes toastin{from{opacity:0; transform:translateY(8px);}to{opacity:1; transform:none;}}
.toast.leaving{opacity:0; transform:translateY(6px); transition:opacity .2s,transform .2s;}
.toast-ok{border-left-color:#3ddc9a;}
.toast-error{border-left-color:#ff6b6b;}
.toast-info{border-left-color:var(--c-primary);}
.toast-ic{flex:none; display:inline-flex;}

/* ============================================================================
   FIELD (formularios)
   ============================================================================ */
.field{display:flex; flex-direction:column; gap:6px;}
.field label,.field>span{font-size:12.5px; font-weight:600; color:var(--c-text);}
.field .hint{font-size:11.5px; color:var(--c-text-2); font-weight:400;}
.field input,.field select,.field textarea{
  width:100%; padding:9px 11px; border:1px solid var(--c-border); border-radius:var(--radius-sm);
  background:var(--c-surface); color:var(--c-text); font-size:13.5px; font-family:inherit;
  transition:border-color .12s,box-shadow .12s;
}
.field input:focus,.field select:focus,.field textarea:focus,
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--c-primary); box-shadow:0 0 0 3px rgba(30,136,229,.15);
}
.field textarea{resize:vertical; min-height:72px; line-height:1.45;}
.field-row{display:flex; gap:12px; flex-wrap:wrap;}
.field-row>.field{flex:1; min-width:140px;}

/* ============================================================================
   SEGMENTED — sub-pestañas por estado
   ============================================================================ */
.segmented{
  display:inline-flex; background:var(--c-surface-2); border:1px solid var(--c-border);
  border-radius:10px; padding:3px; gap:2px; flex-wrap:wrap;
}
.segmented button{
  border:0; background:transparent; padding:6px 12px; border-radius:7px;
  font-size:12.5px; font-weight:600; color:var(--c-text-2); cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; transition:background .12s,color .12s;
}
.segmented button:hover{color:var(--c-text);}
.segmented button.active{background:var(--c-surface); color:var(--c-text); box-shadow:var(--shadow);}
.segmented .seg-count{
  font-size:11px; font-weight:700; padding:0 6px; border-radius:999px; min-width:18px; text-align:center;
  background:var(--c-neutral-bg); color:var(--c-text-2);
}
.segmented button.active .seg-count{background:var(--c-info-bg); color:var(--c-info);}

/* ============================================================================
   EMPTY — icono SVG + texto + hint
   ============================================================================ */
.empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:10px; padding:48px 24px; color:var(--c-text-2);
}
.empty-ic{
  width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:var(--c-surface-2); color:var(--c-neutral); border:1px solid var(--c-border);
}
.empty h3{margin:0; font-size:15px; font-weight:650; color:var(--c-text);}
.empty p{margin:0; font-size:13px; max-width:360px;}
.empty-actions{display:flex; gap:9px; margin-top:6px; flex-wrap:wrap; justify-content:center;}

/* ============================================================================
   TIMELINE — items verticales con punto + fecha
   ============================================================================ */
.timeline{list-style:none; margin:0; padding:0 0 0 4px; position:relative;}
.timeline::before{content:""; position:absolute; left:5px; top:4px; bottom:4px; width:2px; background:var(--c-border);}
.timeline-item{position:relative; padding:0 0 16px 22px;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-dot{position:absolute; left:0; top:3px; width:12px; height:12px; border-radius:50%; background:var(--c-primary); border:2px solid var(--c-surface); box-shadow:0 0 0 2px var(--c-border);}
.timeline-dot.ok{background:var(--c-ok);}
.timeline-dot.warn{background:var(--c-warn);}
.timeline-dot.danger{background:var(--c-danger);}
.timeline-dot.info{background:var(--c-info);}
.timeline-item .tl-text{font-size:13px; color:var(--c-text); line-height:1.4;}
.timeline-item .tl-meta{font-size:11.5px; color:var(--c-text-2); margin-top:2px;}

/* ============================================================================
   NOTE — tarjeta de nota (autor + fecha + borrar)
   ============================================================================ */
.note{
  background:var(--c-surface-2); border:1px solid var(--c-border); border-radius:10px;
  padding:11px 12px; display:flex; flex-direction:column; gap:6px;
}
.note-head{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.note-author{font-size:12px; font-weight:650; color:var(--c-text);}
.note-date{font-size:11px; color:var(--c-text-2);}
.note-text{font-size:13px; color:var(--c-text); white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.45;}
.note-del{opacity:.5; cursor:pointer; display:inline-flex; color:var(--c-text-2);}
.note-del:hover{opacity:1; color:var(--c-danger);}
.note-list{display:flex; flex-direction:column; gap:9px;}

/* ============================================================================
   Utilidades / misc
   ============================================================================ */
.muted{color:var(--c-text-2);}
.small{font-size:12px;}
.num{font-variant-numeric:tabular-nums;}
.spinner{
  width:18px; height:18px; border:2.5px solid rgba(30,136,229,.25);
  border-top-color:var(--c-primary); border-radius:50%; animation:spin .7s linear infinite; display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-block{display:flex; align-items:center; justify-content:center; gap:10px; padding:40px; color:var(--c-text-2); font-size:13px;}
.divider{height:1px; background:var(--c-border); border:0; margin:4px 0;}
.stack{display:flex; flex-direction:column; gap:14px;}
.row-between{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.flex{display:flex; align-items:center; gap:8px;}
.wrap{flex-wrap:wrap;}
.grow{flex:1; min-width:0;}
.text-right{text-align:right;}
.mt-0{margin-top:0;}

/* Búsqueda / input con icono */
.search{position:relative; display:flex; align-items:center;}
.search svg{position:absolute; left:10px; color:var(--c-text-2); pointer-events:none;}
.search input{padding-left:32px;}

/* Chart tooltip / titles heredan; los SVG usan currentColor y variables del tema. */
svg text{font-family:inherit;}

/* ============================================================================
   Responsive (≥1024px objetivo; degradación básica)
   ============================================================================ */
@media (max-width:1180px){
  .drawer-facts{grid-template-columns:1fr;}
}
@media (max-width:1024px){
  :root{--sidebar-w:210px;}
  .view{padding:20px 18px 36px;}
}