/* ============================================================
   Pedia Abi · Dra. Abigail Chacón — Pediatría
   Sistema propio — RODXIM/RODVISION

   Paleta unificada con la página pública (index.html):
   --night     #2C2C68  azul marino profundo (marca / ancla)
   --night-2   #1F1F52  azul marino, variante más oscura (hover)
   --peach     #E87A6B  coral (acento principal / botones)
   --peach-dk  #D9614F  coral, hover/dark
   --sage      #6FA88C  verde salvia (se mantiene aparte: significa
                        "al día / saludable" en vacunas y desarrollo —
                        necesita quedar visualmente distinto del coral)
   --coral-alert #B94A3A  rojo más profundo para alertas/vencidos —
                        a propósito distinto del coral de acento,
                        para no confundir "urgente" con "botón normal"
   --cream     #FCF3E9  fondo cálido
   --paper     #FFFFFF  superficies
   ============================================================ */

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

:root{
  --ink:#3A3570;
  --ink-soft:#726DA0;
  --night:#2C2C68;
  --night-2:#1F1F52;
  --night-tint:#E9E8F5;
  --peach:#E87A6B;
  --peach-dk:#D9614F;
  --peach-tint:#FBE4DE;
  --sage:#6FA88C;
  --sage-dk:#4C8069;
  --sage-tint:#E6F3EC;
  --coral-alert:#B94A3A;
  --coral-tint:#F5DEDA;
  --lavanda:#7171AA;
  --lavanda-tint:#E9E7F5;
  --gris:#7A7599;
  --gris-tint:#EDEBF3;
  --cream:#FCF3E9;
  --paper:#FFFFFF;
  --line:#E4E1EF;
  --shadow: 0 8px 24px rgba(44,44,104,.08);
  --shadow-lg: 0 16px 48px rgba(44,44,104,.16);
  --radius:14px;
  --radius-sm:9px;
  --font-display:'Quicksand', sans-serif;
  --font-body:'Quicksand', sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  font-size:15px;
  line-height:1.5;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--night-2);
  margin:0 0 4px;
  letter-spacing:-0.01em;
}
a{color:inherit;}
button{font-family:var(--font-body);cursor:pointer;}
:focus-visible{outline:2px solid var(--night); outline-offset:2px;}
::selection{background:var(--peach-tint); color:var(--night-2);}

.eyebrow{
  font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--sage-dk);
}

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

.sidebar{
  width:248px; flex-shrink:0;
  background:linear-gradient(180deg, var(--night-2), var(--night) 78%);
  color:#F3EAF2;
  display:flex; flex-direction:column;
  padding:22px 16px;
  position:sticky; top:0; height:100vh;
}
.sidebar .brand{
  display:flex; align-items:center; gap:10px;
  padding:4px 8px 22px;
  border-bottom:1px solid rgba(255,255,255,.12);
  margin-bottom:18px;
}
.brand-mark{
  width:38px;height:38px;border-radius:11px;
  background:linear-gradient(145deg, var(--peach), var(--peach-dk));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:15px; color:#2A2013;
  flex-shrink:0;
}
.brand-text{line-height:1.15;}
.brand-text strong{display:block; font-family:var(--font-display); font-size:15px; color:#fff;}
.brand-text span{font-size:11px; color:#DCC7DD;}

.nav-group{margin-bottom:18px;}
.nav-label{
  font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  color:#B79AB8; padding:0 10px; margin-bottom:6px; font-weight:700;
}
.nav-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:9px; margin-bottom:2px;
  color:#CFE0EC; font-size:13.5px; font-weight:500;
  border:none; background:none; width:100%; text-align:left;
}
.nav-item svg{width:17px;height:17px; flex-shrink:0; opacity:.85;}
.nav-item:hover{background:rgba(255,255,255,.06); color:#fff;}
.nav-item.active{
  background:rgba(240,168,96,.16); color:#fff;
  box-shadow: inset 3px 0 0 var(--peach);
}

.sidebar-foot{
  margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,.12);
  font-size:11px; color:#B79AB8;
}
.role-pill{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.08); color:#F3EAF2;
  padding:6px 10px; border-radius:20px; font-size:12px; font-weight:600;
  margin-bottom:10px;
}
.role-pill .dot{width:7px;height:7px;border-radius:50%; background:var(--sage);}

.main{flex:1; min-width:0;}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; background:var(--paper); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:5;
}
.topbar h1{font-size:20px;}
.topbar .sub{color:var(--ink-soft); font-size:13px; margin-top:2px;}
.view{padding:28px 32px 60px;}
.view[hidden]{display:none;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:10px; font-weight:600; font-size:13.5px;
  border:1px solid transparent; transition:transform .12s ease, box-shadow .12s ease;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--night); color:#fff;}
.btn-primary:hover{background:var(--night-2);}
.btn-peach{background:var(--peach); color:#2A2013;}
.btn-peach:hover{background:var(--peach-dk); color:#fff;}
.btn-ghost{background:var(--paper); color:var(--night); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--night);}
.btn-sm{padding:6px 11px; font-size:12.5px; border-radius:8px;}
.btn-danger{background:var(--coral-tint); color:var(--coral-alert);}

/* ---------- Cards / grid ---------- */
.grid{display:grid; gap:18px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:2fr 1fr;}
@media (max-width:1180px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-2{grid-template-columns:1fr;} }

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow);
}
.card h3{font-size:14.5px;}
.card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}

.stat-card{position:relative; overflow:hidden;}
.stat-card .label{font-size:12px; color:var(--ink-soft); font-weight:600;}
.stat-card .value{font-family:var(--font-display); font-size:30px; font-weight:700; color:var(--night-2); margin:6px 0 2px;}
.stat-card .delta{font-size:12px; font-weight:600;}
.delta.up{color:var(--sage-dk);}
.delta.warn{color:var(--peach-dk);}
.delta.down{color:var(--coral-alert);}
.stat-card .icon-wrap{
  position:absolute; right:14px; top:14px; width:38px; height:38px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- Tables ---------- */
table{width:100%; border-collapse:collapse; font-size:13.5px;}
th{
  text-align:left; font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-soft); padding:9px 12px; border-bottom:1px solid var(--line); font-weight:700;
}
td{padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tr.row-click:hover{background:var(--cream); cursor:pointer;}

.badge{
  display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px;
  font-size:11.5px; font-weight:700;
}
.badge-sage{background:var(--sage-tint); color:var(--sage-dk);}
.badge-peach{background:var(--peach-tint); color:var(--peach-dk);}
.badge-coral{background:var(--coral-tint); color:var(--coral-alert);}
.badge-night{background:var(--night-tint); color:var(--night);}
.badge-lavanda{background:var(--lavanda-tint); color:var(--lavanda);}
.badge-gris{background:var(--gris-tint); color:var(--gris);}

.avatar{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12.5px; color:#fff;
}

/* ---------- Forms ---------- */
label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:5px;}
input,select,textarea{
  width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:9px;
  font-family:var(--font-body); font-size:13.5px; background:var(--paper); color:var(--ink);
}
input:focus,select:focus,textarea:focus{border-color:var(--night); outline:none;}
.field{margin-bottom:14px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.field-row-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;}

/* ---------- Tabs ---------- */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:18px;}
.tab{
  padding:10px 16px; font-size:13px; font-weight:600; color:var(--ink-soft);
  border-bottom:2px solid transparent; background:none; border-top:none; border-left:none; border-right:none;
}
.tab.active{color:var(--night); border-bottom-color:var(--peach);}

/* ---------- Growth chart (signature element) ---------- */
.growth-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:20px;}
.growth-legend{display:flex; gap:16px; font-size:11.5px; color:var(--ink-soft); margin-top:8px; flex-wrap:wrap;}

.agenda-calendario{display:flex; flex-direction:column; gap:6px; margin-top:14px;}
.slot-agenda{
  display:flex; align-items:center; gap:14px; padding:11px 14px; border-radius:10px;
  border:1px solid var(--line);
}
.slot-hora{font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--night-2); width:52px; flex-shrink:0;}
.slot-libre{cursor:pointer; background:var(--paper);}
.slot-libre:hover{background:var(--sage-tint); border-color:var(--sage);}
.slot-libre .slot-info{font-size:12.5px;}
.slot-ocupado{background:var(--night-tint); border-color:var(--night);}
.slot-ocupado .slot-info{flex:1; font-size:12.5px; display:flex; flex-direction:column; gap:1px;}
.link-paciente{cursor:pointer;}
.link-paciente:hover{text-decoration:underline; color:var(--night);}

.menu-desplegable{position:relative; display:inline-block;}
.menu-opciones{
  position:absolute; top:calc(100% + 6px); right:0; background:var(--paper); border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow-lg); z-index:30; min-width:250px; overflow:hidden; padding:6px;
}
.menu-opciones[hidden]{display:none;}
.menu-opciones button{
  display:block; width:100%; text-align:left; background:none; border:none; padding:9px 10px; border-radius:8px; cursor:pointer;
}
.menu-opciones button:hover{background:var(--cream);}
.menu-opciones button strong{display:block; font-size:12.5px; color:var(--ink);}
.menu-opciones button span{display:block; font-size:11px; color:var(--ink-soft); margin-top:1px;}

/* ---- Asistente animado (bebé gateando) ---- */
.asistente-pista{
  position:fixed; bottom:0; left:0; width:100%; height:120px; z-index:65;
  pointer-events:none; /* la franja no bloquea clics — solo el bebé y su burbuja son clicables */
}
.asis-doc-wrap{
  position:absolute; bottom:6px; left:0; display:flex; flex-direction:column; align-items:flex-start;
}
.asis-doc-wrap[hidden]{ display:none !important; }
.asistente-bebe{
  background:none; border:none; cursor:pointer; padding:0; line-height:0; pointer-events:auto;
  filter:drop-shadow(0 3px 6px rgba(74,47,82,.18));
}
.asistente-bebe:hover{filter:drop-shadow(0 4px 10px rgba(74,47,82,.28));}
#bebeFrameImg{ transition:transform .15s linear; }

/* Burbuja tipo cómic — viaja junto con el bebé porque es hija del mismo contenedor que se mueve */
.asis-bubble-wrap{ position:relative; margin-bottom:12px; margin-left:6px; pointer-events:auto; }
.asis-bubble{
  background:var(--paper); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-lg);
  padding:9px 13px; font-size:12px; color:var(--ink); max-width:210px; width:max-content; cursor:pointer;
}
.asis-bubble:hover{ border-color:var(--peach); }
.asis-bubble-dot{ position:absolute; background:var(--paper); border:1px solid var(--line); border-radius:50%; }
.asis-bubble-dot.d1{ width:10px; height:10px; bottom:-15px; left:18px; }
.asis-bubble-dot.d2{ width:6px; height:6px; bottom:-24px; left:10px; }

/* Lista de gestión de recordatorios (modal) */
.asis-lista-item{ border-bottom:1px solid var(--line); padding:8px 0; }
.asis-lista-item:last-child{ border-bottom:none; }
.asis-fila-vista{ display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12.5px; }
.asis-fila-edicion{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.asis-fila-edicion input{ font-size:12.5px; padding:7px 9px; }
.asis-del{background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:12px; padding:2px 4px; flex-shrink:0;}
.asis-del:hover{color:var(--coral-alert);}

.fab-recordatorio{
  position:fixed; bottom:82px; right:24px; z-index:69; width:50px; height:50px; border-radius:50%;
  background:var(--peach); color:#fff; border:none; font-size:26px; font-weight:700; cursor:pointer;
  box-shadow:var(--shadow-lg); display:flex; align-items:center; justify-content:center; line-height:0; padding:0;
}
.fab-recordatorio:hover{background:var(--peach-dk);}

/* Interruptor de día activo/inactivo — guarda solo, sin botón aparte */
.switch-dia{display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none;}
.switch-dia input{position:absolute; opacity:0; width:0; height:0;}
.switch-track{
  position:relative; width:38px; height:22px; border-radius:999px; background:var(--line);
  transition:background .15s ease; flex-shrink:0;
}
.switch-thumb{
  position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s ease;
}
.switch-dia input:checked + .switch-track{background:var(--sage-dk);}
.switch-dia input:checked + .switch-track .switch-thumb{transform:translateX(16px);}
.switch-dia input:focus-visible + .switch-track{outline:2px solid var(--peach); outline-offset:2px;}
.slot-choque{border-color:var(--coral-alert); background:var(--coral-tint);}

/* ---- Calendario: leyenda de estados ---- */
.cal-leyenda{display:flex; gap:16px; flex-wrap:wrap; font-size:11.5px; color:var(--ink-soft); padding:12px 0; border-bottom:1px solid var(--line); margin-bottom:12px;}
.cal-leyenda span{display:flex; align-items:center; gap:6px;}
.cal-leyenda .dot{width:8px; height:8px; border-radius:50%; display:inline-block;}

/* ---- Calendario: vista mes ---- */
.cal-grid-head{display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--line); border-radius:10px 10px 0 0; overflow:hidden;}
.cal-grid-head div{background:var(--night-tint); color:var(--night); font-size:11px; font-weight:700; text-align:center; padding:8px 4px; letter-spacing:.03em;}
.cal-grid-body{display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-top:none; border-radius:0 0 10px 10px; overflow:hidden;}
.cal-day{background:var(--paper); min-height:96px; padding:6px; cursor:pointer; transition:background .1s;}
.cal-day:hover{background:var(--cream);}
.cal-day-fuera{background:#FAF8F4; opacity:.5;}
.cal-day-num{font-size:12px; font-weight:600; color:var(--ink); display:inline-block; min-width:20px; text-align:center;}
.cal-day-num.cal-day-hoy{background:var(--peach); color:#fff; border-radius:50%; width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center;}
.cal-day-citas{margin-top:4px; display:flex; flex-direction:column; gap:2px;}
.cal-chip{font-size:10px; padding:3px 6px; border-radius:6px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer;}
.cal-mas{font-size:10px; color:var(--ink-soft); padding:2px 6px; font-weight:600;}

/* ---- Calendario: vista semana ---- */
.cal-semana{display:grid; grid-template-columns:repeat(7,1fr); gap:8px;}
.cal-semana-col{border:1px solid var(--line); border-radius:10px; overflow:hidden; min-height:220px;}
.cal-semana-head{background:var(--night-tint); color:var(--night); font-size:11px; font-weight:700; text-align:center; padding:8px 4px; cursor:pointer;}
.cal-semana-head.cal-day-hoy{background:var(--peach); color:#fff;}
.cal-semana-citas{padding:6px; display:flex; flex-direction:column; gap:4px;}

/* ---- Colores por estado (chips y puntos de leyenda) ---- */
.cal-chip-confirmada, .dot-confirmada{background:var(--sage);}
.cal-chip-pendiente, .dot-pendiente{background:var(--peach);}
.cal-chip-en_espera, .dot-en_espera{background:var(--peach-dk);}
.cal-chip-atendida, .dot-atendida{background:var(--sage-dk);}
.cal-chip-cancelada, .dot-cancelada{background:var(--gris);}
.cal-chip-reagendada, .dot-reagendada{background:var(--lavanda);}
.growth-legend span{display:inline-flex; align-items:center; gap:5px;}
.legend-dot{width:10px;height:10px;border-radius:3px;}
.note{
  font-size:11.5px; color:var(--ink-soft); background:var(--cream);
  padding:12px 14px; border-radius:10px; line-height:1.6;
}

/* ---------- Utility ---------- */
.text-soft{color:var(--ink-soft);}
.flex{display:flex; align-items:center;}
.gap-8{gap:8px;} .gap-10{gap:10px;} .gap-14{gap:14px;}
.space-between{justify-content:space-between;}
.mt-8{margin-top:8px;} .mt-14{margin-top:14px;} .mt-20{margin-top:20px;} .mb-8{margin-bottom:8px;}
.pill-select{display:inline-flex; background:var(--night-tint); border-radius:10px; padding:3px;}
.pill-select button{
  padding:7px 13px; border-radius:8px; border:none; background:none; font-size:12.5px; font-weight:600; color:var(--night);
}
.pill-select button.active{background:var(--paper); box-shadow:var(--shadow);}

.modal-overlay{
  position:fixed; inset:0; background:rgba(32,43,59,.44); display:flex; align-items:center; justify-content:center;
  z-index:50; padding:20px;
}
.modal-overlay[hidden]{display:none;}
.modal{
  background:var(--paper); border-radius:16px; width:100%; max-width:560px; max-height:88vh; overflow-y:auto; overflow-x:hidden;
  box-shadow:var(--shadow-lg);
}
.modal-head{
  padding:18px 22px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center;
  position:sticky; top:0; background:var(--paper);
}
.modal-body{padding:22px;}
.modal-close{background:none;border:none;font-size:20px;color:var(--ink-soft);}
.modal-footer-sticky{
  position:sticky; bottom:0; background:var(--paper); padding:14px 22px;
  border-top:1px solid var(--line); margin:0 -22px -22px;
}

.toast{
  position:fixed; bottom:24px; right:24px; background:var(--night-2); color:#fff; padding:13px 18px;
  border-radius:10px; box-shadow:var(--shadow-lg); font-size:13.5px; font-weight:600; z-index:80;
  display:flex; align-items:center; gap:10px; transform:translateY(20px) scale(.92); transition:transform .25s ease, opacity .25s ease;
  max-width:min(440px, calc(100vw - 48px)); line-height:1.4; opacity:0; pointer-events:none;
}
.toast.show{transform:translateY(0) scale(1); opacity:1; pointer-events:auto;}
.toast .dot{width:8px;height:8px;border-radius:50%; background:var(--sage);}

@media (max-width: 900px){
  .sidebar{position:fixed; z-index:40; transform:translateX(-100%); transition:transform .2s ease;}
  .sidebar.open{transform:translateX(0);}
  .grid-3{grid-template-columns:1fr 1fr;}
}