/* =====================================================================
   MiConsultorio · capa de color y gráficos (se carga después de app.css y
   ferro-ui.css, así que solo suma o pisa lo que hace falta).
   Los colores de la marca (--accent, --sidebar-1/2) siguen mandando en
   encabezados y botones; esta capa agrega una paleta de apoyo para que
   cada dato tenga su propio color.
   ===================================================================== */
:root{
  --k-teal:#1F8A85;   --k-teal-t:#DDF2F0;
  --k-blue:#3E6FB0;   --k-blue-t:#E3ECF8;
  --k-coral:#D9694B;  --k-coral-t:#FCE8E1;
  --k-violet:#7A5BB0; --k-violet-t:#ECE6F6;
  --k-gold:#C08F10;   --k-gold-t:#FBF1CF;
  --k-green:#2F8A5B;  --k-green-t:#DAF0E3;
  --k-pink:#C24D86;   --k-pink-t:#FBE4EF;
  --k-sky:#2B8FC2;    --k-sky-t:#DFF1FA;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --k-teal:#58CDC6;   --k-teal-t:#12332F;
    --k-blue:#8DB4EA;   --k-blue-t:#1A2B45;
    --k-coral:#F29A80;  --k-coral-t:#3B2219;
    --k-violet:#B79CE6; --k-violet-t:#2A2140;
    --k-gold:#E6C25A;   --k-gold-t:#3A3114;
    --k-green:#6FCB9B;  --k-green-t:#153A28;
    --k-pink:#EE8FBD;   --k-pink-t:#3C2030;
    --k-sky:#7CC8EE;    --k-sky-t:#14303F;
  }
}
:root[data-theme="dark"]{
  --k-teal:#58CDC6;   --k-teal-t:#12332F;
  --k-blue:#8DB4EA;   --k-blue-t:#1A2B45;
  --k-coral:#F29A80;  --k-coral-t:#3B2219;
  --k-violet:#B79CE6; --k-violet-t:#2A2140;
  --k-gold:#E6C25A;   --k-gold-t:#3A3114;
  --k-green:#6FCB9B;  --k-green-t:#153A28;
  --k-pink:#EE8FBD;   --k-pink-t:#3C2030;
  --k-sky:#7CC8EE;    --k-sky-t:#14303F;
}
.k-teal{--k:var(--k-teal);--kt:var(--k-teal-t)}
.k-blue{--k:var(--k-blue);--kt:var(--k-blue-t)}
.k-coral{--k:var(--k-coral);--kt:var(--k-coral-t)}
.k-violet{--k:var(--k-violet);--kt:var(--k-violet-t)}
.k-gold{--k:var(--k-gold);--kt:var(--k-gold-t)}
.k-green{--k:var(--k-green);--kt:var(--k-green-t)}
.k-pink{--k:var(--k-pink);--kt:var(--k-pink-t)}
.k-sky{--k:var(--k-sky);--kt:var(--k-sky-t)}

/* ---------- números clave (.stat) con color propio ---------- */
.stat[class*="k-"]{
  background:linear-gradient(160deg, var(--kt) 0%, var(--surface) 92%);
  border:1px solid color-mix(in srgb, var(--k) 30%, var(--border));
  border-top:4px solid var(--k);
}
.stat[class*="k-"] .label{ color:color-mix(in srgb, var(--k) 78%, var(--text)); }
.stat[class*="k-"] .value{ color:var(--k); }
.stat[class*="k-"] .value small{ color:var(--muted); }

/* ---------- tarjetas con título de color ---------- */
.card.kc{ border-top:4px solid var(--k); }
.card.kc > h2:first-child, .card.kc > .kc-head h2{ display:flex; align-items:center; gap:9px; }
.card.kc > h2:first-child::before, .card.kc > .kc-head h2::before{
  content:""; width:11px; height:11px; border-radius:4px; background:var(--k); flex:none;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--k) 18%, transparent);
}

/* ---------- tablas con encabezado más vivo ---------- */
.table-color thead th{
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, var(--surface)), var(--accent-tint));
}
.table-color tbody tr:nth-child(even) td{ background:color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.table-color tbody tr:hover td{ background:color-mix(in srgb, var(--accent) 12%, var(--surface)); }

/* ---------- pestañas ---------- */
.tab{ border-radius:8px 8px 0 0; }
.tab:hover{ background:color-mix(in srgb, var(--accent) 10%, transparent); }
.tab.active{ background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 14%, transparent)); border-bottom-width:3px; }

/* ---------- menú lateral: un punto de color por sección ---------- */
.nav-item a{ display:flex !important; align-items:center; gap:11px; width:100%; }
.nav-item a::before{
  content:""; width:9px; height:9px; border-radius:3px; flex:none; background:var(--nc, #9FB8AA); opacity:.9;
  transform:rotate(45deg);
}
.nav-item:hover a::before, .nav-item.active a::before{ opacity:1; box-shadow:0 0 0 3px color-mix(in srgb, var(--nc, #9FB8AA) 28%, transparent); }
.nav-item a[href="/inicio"]{ --nc:#F2C94C; }
.nav-item a[href="/panel"]{ --nc:#58CDC6; }
.nav-item a[href="/consultantes"]{ --nc:#EE8FBD; }
.nav-item a[href="/informacion-general"]{ --nc:#8DB4EA; }
.nav-item a[href="/evaluaciones"]{ --nc:#F29A80; }
.nav-item a[href="/curvas-oms"]{ --nc:#B79CE6; }
.nav-item a[href="/wellness"]{ --nc:#6FCB9B; }
.nav-item a[href="/pesaje"]{ --nc:#7CC8EE; }
.nav-item a[href="/consultorios"]{ --nc:#F2C94C; }
.nav-item a[href="/reportes"]{ --nc:#58CDC6; }
.nav-item a[href="/referencias"]{ --nc:#8DB4EA; }
.nav-item a[href="/configuracion"]{ --nc:#B8C7BE; }
.nav-item a[href="/mi-cuenta"]{ --nc:#B8C7BE; }

/* ---------- inicio: bienvenida más viva ---------- */
.bienvenida{
  background:
    radial-gradient(520px 260px at 92% -10%, color-mix(in srgb, var(--k-teal) 40%, transparent), transparent 70%),
    radial-gradient(420px 240px at 55% 130%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 70%),
    linear-gradient(120deg, var(--sidebar-1) 0%, var(--sidebar-2) 100%) !important;
}

/* ---------- inicio: tablero ---------- */
.dash-kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:0 0 18px; }
.dash-kpi{
  display:flex; gap:14px; align-items:center; padding:16px 18px; border-radius:16px; position:relative; overflow:hidden;
  background:linear-gradient(150deg, var(--kt) 0%, var(--surface) 95%);
  border:1px solid color-mix(in srgb, var(--k) 28%, var(--border)); box-shadow:var(--shadow);
}
.dash-kpi .ic{ width:46px; height:46px; border-radius:14px; background:var(--k); color:#fff; display:grid; place-items:center; flex:none; box-shadow:0 6px 14px color-mix(in srgb, var(--k) 40%, transparent); }
.dash-kpi .ic svg{ width:24px; height:24px; }
:root[data-theme="dark"] .dash-kpi .ic{ color:#10261d; }
.dash-kpi .n{ font-family:Cambria, Georgia, serif; font-size:34px; font-weight:700; line-height:1; color:var(--k); font-variant-numeric:tabular-nums; }
.dash-kpi .l{ font-size:12.5px; font-weight:700; color:var(--text); margin-top:4px; }
.dash-kpi .s{ font-size:11.5px; color:var(--muted); margin-top:1px; }
.dash-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:18px; align-items:start; margin-bottom:6px; }
.dash-grid.tres{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.dash-list{ display:grid; gap:8px; margin-top:10px; }
.dash-item{ display:flex; gap:12px; align-items:center; padding:9px 12px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border); text-decoration:none; color:inherit; }
.dash-item:hover{ border-color:var(--k, var(--accent-dark)); }
.dash-item .dt{ min-width:50px; text-align:center; padding:5px 6px; border-radius:10px; background:var(--kt, var(--accent-tint)); color:var(--k, var(--accent-dark)); font-weight:700; font-size:11px; line-height:1.15; }
.dash-item .dt b{ display:block; font-size:18px; font-family:Cambria, Georgia, serif; }
.dash-item .tx b{ display:block; font-size:13.5px; }
.dash-item .tx small{ color:var(--muted); font-size:12px; }
.dash-item .rt{ margin-left:auto; font-weight:700; font-size:13px; color:var(--k, var(--text)); white-space:nowrap; }
.dash-empty{ padding:18px 6px; color:var(--muted); font-size:13px; }
@media (max-width:1100px){ .dash-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); } .dash-grid,.dash-grid.tres{ grid-template-columns:1fr; } }

/* ---------- inicio: tarjetas de sección con ícono de color ---------- */
.picker-card{ --pc:var(--accent); --pct:var(--accent-tint); }
.picker-card .pc-ic{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; margin-bottom:10px; background:var(--pct); color:var(--pc); }
.picker-card .pc-ic svg{ width:21px; height:21px; }
.picker-card:hover{ border-color:var(--pc); box-shadow:0 10px 24px color-mix(in srgb, var(--pc) 22%, transparent); }
.picker-card .flecha{ color:var(--pc); }
.picker-card[href="/panel"]{ --pc:var(--k-teal); --pct:var(--k-teal-t); }
.picker-card[href="/consultantes"]{ --pc:var(--k-pink); --pct:var(--k-pink-t); }
.picker-card[href="/informacion-general"]{ --pc:var(--k-blue); --pct:var(--k-blue-t); }
.picker-card[href="/evaluaciones"]{ --pc:var(--k-coral); --pct:var(--k-coral-t); }
.picker-card[href="/curvas-oms"]{ --pc:var(--k-violet); --pct:var(--k-violet-t); }
.picker-card[href="/wellness"]{ --pc:var(--k-green); --pct:var(--k-green-t); }
.picker-card[href="/pesaje"]{ --pc:var(--k-sky); --pct:var(--k-sky-t); }
.picker-card[href="/consultorios"]{ --pc:var(--k-gold); --pct:var(--k-gold-t); }
.picker-card[href="/reportes"]{ --pc:var(--k-teal); --pct:var(--k-teal-t); }
.picker-card[href="/referencias"]{ --pc:var(--k-blue); --pct:var(--k-blue-t); }

/* ---------- gráficos de la ficha ---------- */
.charts-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-bottom:0; }
.charts-row.tres{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:1100px){ .charts-row,.charts-row.tres{ grid-template-columns:1fr; } }
.donut-wrap{ display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.donut-wrap svg{ flex:none; }
.leg{ display:grid; gap:7px; min-width:170px; flex:1; }
.leg-i{ display:grid; grid-template-columns:12px 1fr auto auto; gap:9px; align-items:center; font-size:13px; }
.leg-i i{ width:12px; height:12px; border-radius:4px; }
.leg-i b{ font-variant-numeric:tabular-nums; }
.leg-i span.p{ color:var(--muted); font-variant-numeric:tabular-nums; min-width:46px; text-align:right; }
.stackbar{ display:flex; height:16px; border-radius:9px; overflow:hidden; margin-top:16px; gap:2px; background:var(--border); }
.stackbar > div{ min-width:3px; }
.rango-list{ display:grid; gap:18px; margin-top:8px; }
.rango-item .rh{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:4px; font-size:12.5px; }
.rango-item .rh b{ font-size:13px; }
.rango-item .rh span{ color:var(--muted); }
.estado-pill{ display:inline-block; margin-top:6px; }

.dash-list.dash-2col{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:900px){ .dash-list.dash-2col{ grid-template-columns:1fr; } }

/* ---------- comparar evaluaciones: un color por evaluación ---------- */
.cmp-leg{ display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 14px; }
.cmp-chip{ display:inline-flex; align-items:center; gap:8px; padding:5px 12px 5px 8px; border-radius:999px; font-size:12.5px; font-weight:700; background:color-mix(in srgb, var(--c) 14%, var(--surface)); border:1px solid color-mix(in srgb, var(--c) 45%, var(--border)); color:var(--text); }
.cmp-chip i{ width:14px; height:14px; border-radius:50%; background:var(--c); box-shadow:0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.cmp-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
@media (max-width:900px){ .cmp-grid{ grid-template-columns:1fr; } }
.cmp-panel{ border:1px solid var(--border); border-radius:14px; padding:12px 14px 12px; background:var(--surface-2); }
.cmp-panel h3{ margin:0 0 2px; font-size:14px; }
.cmp-panel svg{ display:block; width:100%; height:auto; }
.cmp-delta{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin-top:6px; font-size:12.5px; color:var(--muted); }
.cmp-delta b{ font-variant-numeric:tabular-nums; }
.cmp-pill{ display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; font-weight:700; font-size:12px; }
.cmp-pill.bien{ background:var(--good-tint); color:var(--good); }
.cmp-pill.mal{ background:var(--bad-tint); color:var(--bad); }
.cmp-pill.neutro{ background:var(--info-tint); color:var(--info); }

/* Crédito sutil: la marca visible es la del nutri; MiConsultorio va chico, al pie del menú. */
.sidebar-foot .powered-by{ margin-top:10px; text-align:center; font-size:10.5px; letter-spacing:.04em; opacity:.4; }

/* Tablas que en el celu se muestran como tarjetas (una por fila) */
@media (max-width:640px){
  .tabla-apilada thead{ display:none; }
  .tabla-apilada, .tabla-apilada tbody, .tabla-apilada tr, .tabla-apilada td{ display:block; width:100%; }
  .tabla-apilada tr{ border:1px solid var(--border); border-radius:12px; padding:8px 14px; margin-bottom:10px; background:var(--surface); }
  .tabla-apilada td{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:6px 0; border:0 !important; text-align:right; }
  .tabla-apilada td::before{ content:attr(data-l); font-weight:700; color:var(--muted,#6b7770); text-align:left; flex:none; }
}