/* ============================================================
   style-perfil.css — Your Body Talks
   Dashboard clínico completo con gráficos integrados por tab
   Tipografía: Instrument Serif (display) + DM Sans (UI) + DM Mono (datos)
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Mono:wght@400;500&display=swap');

/* ── Variables ──────────────────────────────────────────────── */
:root {
  --pf-serif:  'Instrument Serif', serif;
  --pf-sans:   'DM Sans', sans-serif;
  --pf-mono:   'DM Mono', monospace;

  --pf-ok:     #34d399;
  --pf-warn:   #fbbf24;
  --pf-danger: #f87171;
  --pf-info:   #60a5fa;
  --pf-purple: #a78bfa;
  --pf-teal:   #2dd4bf;
  --pf-pink:   #f472b6;

  --pf-s1: rgba(255,255,255,.04);
  --pf-s2: rgba(255,255,255,.07);
  --pf-s3: rgba(255,255,255,.11);
  --pf-ln: rgba(255,255,255,.08);
  --pf-ln2: rgba(255,255,255,.04);
  --pf-tx: rgba(255,255,255,.92);
  --pf-mu: rgba(255,255,255,.42);
  --pf-mu2: rgba(255,255,255,.24);
}
#app.light-theme {
  --pf-s1: rgba(0,0,0,.025);
  --pf-s2: rgba(0,0,0,.05);
  --pf-s3: rgba(0,0,0,.08);
  --pf-ln: rgba(0,0,0,.08);
  --pf-ln2: rgba(0,0,0,.04);
  --pf-tx: rgba(0,0,0,.88);
  --pf-mu: rgba(0,0,0,.45);
  --pf-mu2: rgba(0,0,0,.28);
}

/* ── Barra buscador ─────────────────────────────────────────── */
html{
scrollbar-width: none;
}
.cd-bar {
  position: sticky; top: 0; z-index: 20;
  padding: 9px 20px;
  background: var(--bg, rgba(6,9,15,.94));
  backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid var(--pf-ln);
}
#app.light-theme .cd-bar { background: rgba(246,248,252,.95); }

.cd-inner {
  display: flex; align-items: center;
  height: 40px; max-width: 660px;
  background: var(--pf-s2);
  border: 1px solid var(--pf-ln);
  border-radius: 10px; overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.cd-inner:focus-within {
  border-color: rgba(96,165,250,.4);
  box-shadow: 0 0 0 3px rgba(96,165,250,.1);
}
#app.light-theme .cd-inner { background: #fff; border-color: rgba(0,0,0,.1); }

.cd-search-wrap, .cd-name-wrap {
  display: flex; align-items: center; height: 100%;
}
.cd-name-wrap { flex: 1; min-width: 0; }

.cd-search-icon, .cd-name-icon {
  width: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--pf-mu);
}
.cd-search-icon svg, .cd-name-icon svg { width: 14px; height: 14px; }

.cd-input-id {
  width: 90px; height: 100%;
  border: none; background: transparent; color: var(--pf-tx);
  font-family: var(--pf-mono); font-size: 13px; font-weight: 500;
  outline: none; padding: 0; letter-spacing: .2px;
}
.cd-input-id::placeholder { color: var(--pf-mu2); font-family: var(--pf-sans); font-weight: 400; }

.cd-divider { width: 1px; height: 20px; background: var(--pf-ln); flex-shrink: 0; margin: 0 2px; }

.cd-input-nombre {
  flex: 1; height: 100%;
  border: none; background: transparent; color: var(--pf-tx);
  font-family: var(--pf-sans); font-size: 13px;
  outline: none; padding: 0;
}
.cd-input-nombre::placeholder { color: var(--pf-mu2); }
.cd-input-nombre:disabled { cursor: default; }

/* Dropdown de busqueda por nombre — colgado del .cd-bar (sticky)
   porque .cd-inner usa overflow:hidden y recortaria el desplegable. */
.cd-name-dropdown {
  position: absolute;
  top: calc(100% - 4px);
  left: 20px;
  width: calc(100% - 40px);
  max-width: 660px;
  z-index: 30;
  background: var(--pf-s1, #1a1f29);
  border: 1px solid var(--pf-ln);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  max-height: 320px; overflow-y: auto;
  padding: 4px;
}
#app.light-theme .cd-name-dropdown {
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.cd-name-option {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 8px 10px; gap: 8px;
  border: none; background: transparent;
  color: var(--pf-tx);
  border-radius: 7px;
  cursor: pointer;
  font-family: var(--pf-sans); font-size: 13px;
  text-align: left;
}
.cd-name-option:hover,
.cd-name-option.is-active { background: var(--pf-s2); }
.cd-name-option-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-name-option-id {
  color: var(--pf-mu);
  font-family: var(--pf-mono); font-size: 11px;
  flex-shrink: 0;
}
.cd-name-empty {
  padding: 10px;
  color: var(--pf-mu);
  font-size: 12px;
  text-align: center;
}

.cd-status { padding: 0 10px; font-size: 11px; color: var(--pf-mu); flex-shrink: 0; white-space: nowrap; }
.cd-status:empty { display: none; }

/* ── Layout ─────────────────────────────────────────────────── */
#main-content-perfil {
  display: block;
  min-height: calc(100vh - 58px);
}

/* ── Left stack ─────────────────────────────────────────────── */
#left-stack { padding: 18px 18px 100px; display: flex; flex-direction: column; gap: 20px; }

/* ── Tabs nav ───────────────────────────────────────────────── */
.tabs-nav {
  display: flex; gap: 2px;
  background: var(--pf-s1);
  border: 1px solid var(--pf-ln);
  border-radius: 10px; padding: 3px;
  overflow-x: auto; scrollbar-width: none;
}
.tabs-nav::-webkit-scrollbar { display: none; }

.tab-btn {
  appearance: none; border: none;
  background: transparent; color: var(--pf-mu);
  padding: 7px 14px; border-radius: 7px;
  font-family: var(--pf-sans); font-size: 12px; font-weight: 500;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: all .13s ease;
}
.tab-btn:hover { color: var(--pf-tx); background: var(--pf-s2); }
.tab-btn.active {
  background: var(--accent, #4f8cff); color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 8px rgba(79,140,255,.3);
}

.tab-pane { display: none; }
.tab-pane.active { display: flex; flex-direction: column; gap: 20px; animation: pfIn .18s ease both; }
@keyframes pfIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

/* ── Título de sección ──────────────────────────────────────── */
.pf-sec {
  font-family: var(--pf-sans);
  font-size: 10px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--pf-mu); margin: 0;
  display: flex; align-items: center; gap: 8px;
}
.pf-sec::after { content:''; flex:1; height:1px; background: var(--pf-ln); }

/* compatibilidad .bar */
section .bar {
  font-family: var(--pf-sans);
  font-size: 10px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--pf-mu); margin: 0;
  display: flex; align-items: center; gap: 8px;
}
section .bar::before { display: none; }
section .bar::after { content:''; flex:1; height:1px; background: var(--pf-ln); }

/* Fecha badge */
.medicion#fecha-med-per,
.vital#fecha-v-per,
.vital#fecha-p,
.bio#fecha-bioq-per {
  display: inline-flex; align-items: center;
  font-family: var(--pf-sans); font-size: 11px; font-weight: 500;
  color: var(--pf-mu);
  background: var(--pf-s1); border: 1px solid var(--pf-ln) !important;
  border-radius: 99px; padding: 3px 10px;
  margin-bottom: 0; width: fit-content;
  border-left: none; border-right: none; border-top: none;
}

/* ── KPI grid ───────────────────────────────────────────────── */
.pf-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 640px) { .pf-kpi-grid { grid-template-columns: repeat(2,1fr); } }

.pf-kpi {
  background: var(--pf-s1);
  border: 1px solid var(--pf-ln);
  border-radius: 14px; padding: 14px 16px 12px;
  position: relative; overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.pf-kpi:hover { border-color: var(--pf-s3); box-shadow: 0 4px 20px rgba(0,0,0,.18); }
.pf-kpi::before {
  content: ''; position: absolute; top:0; left:0; right:0; height:2px;
  background: var(--pf-kpi-c, var(--accent,#4f8cff)); opacity:.65;
}
.pf-kpi-label { font-family: var(--pf-sans); font-size: 10px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--pf-mu); margin-bottom: 5px; }
.pf-kpi-val   { font-family: var(--pf-serif); font-size: 30px; line-height: 1; letter-spacing: -.4px; color: var(--pf-tx); }
.pf-kpi-unit  { font-family: var(--pf-sans); font-size: 12px; font-weight: 500; color: var(--pf-mu); margin-left: 3px; }
.pf-kpi-badge {
  display: inline-block; margin-top: 6px;
  font-family: var(--pf-sans); font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 99px;
  background: color-mix(in oklab, var(--pf-kpi-c,#4f8cff) 14%, transparent);
  color: var(--pf-kpi-c, #4f8cff);
  border: 1px solid color-mix(in oklab, var(--pf-kpi-c,#4f8cff) 30%, transparent);
}
.pf-kpi--ok     { --pf-kpi-c: var(--pf-ok); }
.pf-kpi--warn   { --pf-kpi-c: var(--pf-warn); }
.pf-kpi--danger { --pf-kpi-c: var(--pf-danger); }
.pf-kpi--info   { --pf-kpi-c: var(--pf-info); }
.pf-kpi--purple { --pf-kpi-c: var(--pf-purple); }
.pf-kpi--teal   { --pf-kpi-c: var(--pf-teal); }

/* ── Cards de datos (filas) ─────────────────────────────────── */
.pf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 10px; }

.pf-card {
  background: var(--pf-s1); border: 1px solid var(--pf-ln);
  border-radius: 12px; overflow: hidden;
}
.pf-card-hd {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 13px 7px;
  border-bottom: 1px solid var(--pf-ln2);
  background: var(--pf-s2);
}
.pf-card-dot { width:6px; height:6px; border-radius:50%; background: var(--pf-card-c, var(--pf-mu)); flex-shrink:0; }
.pf-card-title { font-family: var(--pf-sans); font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--pf-card-c, var(--pf-mu)); }

.pf-card--r { --pf-card-c: #f87171; }
.pf-card--o { --pf-card-c: #fb923c; }
.pf-card--g { --pf-card-c: #34d399; }
.pf-card--b { --pf-card-c: #60a5fa; }
.pf-card--p { --pf-card-c: #a78bfa; }
.pf-card--t { --pf-card-c: #2dd4bf; }
.pf-card--k { --pf-card-c: #f472b6; }

.pf-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 13px; gap: 8px;
  border-bottom: 1px solid var(--pf-ln2);
  font-family: var(--pf-sans); font-size: 12px; color: var(--pf-mu);
}
.pf-row:last-child { border-bottom: none; }
.pf-row-v { font-family: var(--pf-mono); font-size: 12px; font-weight: 500; color: var(--pf-tx); text-align:right; }

/* compatibilidad .medicion/.vital/.bio/.pliegues dentro de .item-mediciones */
.item-mediciones {
  background: var(--pf-s1); border: 1px solid var(--pf-ln);
  border-radius: 12px; overflow: hidden;
}
.item-mediciones h1 {
  font-family: var(--pf-sans); font-size: 10px; font-weight: 700;
  letter-spacing: .7px; text-transform: uppercase; color: var(--pf-mu);
  padding: 9px 13px 7px; margin:0;
  border-bottom: 1px solid var(--pf-ln2); background: var(--pf-s2);
}
.conteiner-mediciones { display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 10px; }

.medicion, .vital, .bio, .pliegues {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 13px; gap: 8px;
  border-bottom: 1px solid var(--pf-ln2);
  font-family: var(--pf-sans); font-size: 12px; color: var(--pf-mu);
  background: transparent; border-radius:0; margin:0;
  border-left:none; border-right:none; border-top:none;
}
.medicion:last-child, .vital:last-child, .bio:last-child, .pliegues:last-child { border-bottom:none; }
.medicion span, .vital span, .bio span, .pliegues span {
  font-family: var(--pf-mono); font-size: 12px; font-weight: 500;
  color: var(--pf-tx); text-align:right;
}

/* ── Gráfico card ───────────────────────────────────────────── */
.pf-chart-card {
  background: var(--pf-s1); border: 1px solid var(--pf-ln);
  border-radius: 14px; overflow: hidden;
}
.pf-chart-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 10px; border-bottom: 1px solid var(--pf-ln2);
  gap: 10px; flex-wrap: wrap;
}
.pf-chart-title { font-family: var(--pf-sans); font-size: 13px; font-weight: 600; color: var(--pf-tx); }
.pf-chart-tag {
  font-family: var(--pf-mono); font-size: 10px; padding: 2px 7px;
  border-radius: 5px; background: rgba(96,165,250,.12); color: var(--pf-info);
  border: 1px solid rgba(96,165,250,.2); text-transform: uppercase; letter-spacing: .05em;
}
.pf-chart-body { padding: 12px 14px 14px; }
.pf-chart-canvas-wrap { position: relative; }

/* Galería de videos de progreso del paciente (visor del nutri) */
.pf-progreso-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.pf-prog-item { margin: 0; }
.pf-prog-video {
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    background: #000;
    display: block;
    border-radius: 10px;
}
.pf-prog-cap {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 2px 0;
}
.pf-prog-meta { font-size: 12px; opacity: 0.7; }
.pf-prog-nota { font-size: 13px; }

/* Sub-tabs dentro de un chart card (Bioquímicos) */
.pf-chart-subtabs {
  display: flex; gap: 3px; flex-wrap: wrap;
  padding: 8px 14px; border-bottom: 1px solid var(--pf-ln2);
}
.pf-chart-subtab {
  appearance: none; border: 1px solid var(--pf-ln);
  background: transparent; color: var(--pf-mu);
  padding: 4px 10px; border-radius: 6px;
  font-family: var(--pf-sans); font-size: 11px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: all .12s;
}
.pf-chart-subtab:hover { color: var(--pf-tx); background: var(--pf-s2); }
.pf-chart-subtab.active {
  background: var(--pf-s3); color: var(--pf-tx); font-weight: 600;
  border-color: rgba(255,255,255,.15);
}
#app.light-theme .pf-chart-subtab.active { border-color: rgba(0,0,0,.15); }

/* Chips de series */
.pf-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.pf-chip {
  appearance: none; border: 1px solid var(--pf-ln);
  background: transparent; color: var(--pf-mu);
  padding: 4px 10px; border-radius: 6px;
  font-family: var(--pf-sans); font-size: 11px; font-weight: 500;
  cursor: pointer; transition: all .12s;
  --cc: var(--pf-info);
}
.pf-chip:hover { color: var(--pf-tx); border-color: rgba(255,255,255,.14); }
.pf-chip.is-active {
  background: color-mix(in oklab, var(--cc) 14%, transparent);
  border-color: color-mix(in oklab, var(--cc) 35%, transparent);
  color: var(--pf-tx); font-weight: 600;
}

/* ── Tabla rutinas ───────────────────────────────────────────── */
.pf-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--pf-ln); margin-top: 10px; }
.pf-table { width: 100%; border-collapse: collapse; font-family: var(--pf-sans); font-size: 12px; }
.pf-table th {
  font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--pf-mu); padding: 8px 12px;
  border-bottom: 1px solid var(--pf-ln); text-align: left; background: var(--pf-s2); white-space: nowrap;
}
.pf-table td { padding: 8px 12px; border-bottom: 1px solid var(--pf-ln2); color: var(--pf-tx); vertical-align: middle; }
.pf-table tr:last-child td { border-bottom: none; }
.pf-table tr:hover td { background: var(--pf-s2); }

/* Barra adherencia */
.adh-wrap { display: flex; align-items: center; gap: 7px; }
.adh-bar { flex:1; height: 5px; border-radius: 99px; background: var(--pf-ln); overflow: hidden; }
.adh-fill { height: 100%; border-radius: 99px; background: var(--pf-ok); transition: width .4s; }
.adh-fill.warn   { background: var(--pf-warn); }
.adh-fill.danger { background: var(--pf-danger); }
.adh-pct { font-family: var(--pf-mono); font-size: 11px; font-weight: 500; color: var(--pf-tx); min-width: 32px; text-align:right; }

/* Sparkline */
.spark { display: flex; align-items: flex-end; gap: 2px; height: 20px; }
.spark-b { width: 4px; border-radius: 2px 2px 0 0; background: var(--pf-info); min-height: 2px; }

/* KPI mini (reportes app) */
.pf-kpi-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 10px 0; }
.pf-kpi-mini {
  background: var(--pf-s2); border: 1px solid var(--pf-ln);
  border-radius: 10px; padding: 9px 10px;
}
.pf-kmi-label { font-family: var(--pf-sans); font-size: 10px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--pf-mu); margin-bottom: 3px; }
.pf-kmi-val   { font-family: var(--pf-serif); font-size: 18px; color: var(--pf-tx); line-height: 1; }

/* ── Timeline del Plan ──────────────────────────────────────── */
.pf-timeline {
  list-style: none; margin: 0; padding: 0;
  position: relative;
}
/* Línea vertical */
.pf-timeline::before {
  content: '';
  position: absolute; left: 72px; top: 8px; bottom: 8px;
  width: 1px; background: var(--pf-ln); z-index: 0;
}

.pf-tl-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  position: relative;
  padding-bottom: 14px;
  width: 50%;
}
.pf-tl-item:last-child { padding-bottom: 0; }

/* Hora */
.pf-tl-time {
  display: flex; flex-direction: column;
  align-items: flex-end; padding-right: 18px;
  padding-top: 13px; flex-shrink: 0; position: relative; z-index: 1;
}
.pf-tl-hora {
  font-family: var(--pf-mono); font-size: 12px; font-weight: 500;
  color: var(--pf-tx); white-space: nowrap; line-height: 1;
}
.pf-tl-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent, #4f8cff);
  border: 2px solid var(--bg, #06090f);
  position: absolute; right: -4px; top: 15px;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent,#4f8cff) 18%, transparent);
}
#app.light-theme .pf-tl-dot { border-color: #f6f8fc; }

/* Card */
.pf-tl-card {
  background: var(--pf-s1); border: 1px solid var(--pf-ln);
  border-radius: 14px; overflow: hidden; margin-left: 16px;
  transition: border-color .15s, box-shadow .15s;
}
.pf-tl-card:hover { border-color: var(--pf-s3); box-shadow: 0 4px 18px rgba(0,0,0,.13); }

.pf-tl-card-hd {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 14px 9px;
  border-bottom: 1px solid var(--pf-ln2);
  background: var(--pf-s2);
}
.pf-tl-tiempo {
  font-family: var(--pf-sans); font-size: 13px; font-weight: 700; color: var(--pf-tx);
}
.pf-tl-desc {
  font-family: var(--pf-sans); font-size: 11px; color: var(--pf-mu);
}

.pf-tl-img { display: block; width: 100%; height: 160px; object-fit: cover; }

/* Grid de alimentos */
.pf-tl-alimentos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.pf-tl-al {
  padding: 8px 14px;
  border-bottom: 1px solid var(--pf-ln2);
  border-right: 1px solid var(--pf-ln2);
}
.pf-tl-al:last-child { border-bottom: none; }
.pf-tl-al-grupo {
  font-family: var(--pf-sans); font-size: 9px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase; color: var(--pf-mu); margin-bottom: 2px;
}
.pf-tl-al-nombre {
  font-family: var(--pf-sans); font-size: 12px; font-weight: 500;
  color: var(--pf-tx); line-height: 1.3;
}
.pf-tl-al-qty {
  font-family: var(--pf-mono); font-size: 11px; color: var(--pf-mu); margin-top: 2px;
}

.pf-tl-empty {
  text-align: center; padding: 48px 20px;
  font-family: var(--pf-sans); font-size: 13px; color: var(--pf-mu);
}

/* Legacy compat */
.np-item-img-wrap { margin: 6px 0 8px; border-radius: 8px; overflow: hidden; }
.np-item-img { display:block; width:100%; height:100px; object-fit:cover; }
.np-item-meta { font-size: 11px; color: var(--pf-mu); line-height: 1.4; }
.np-item-title { font-family: var(--pf-sans); font-size: 12px; font-weight: 600; color: var(--pf-tx); margin-bottom: 6px; }

/* ── Skeleton ───────────────────────────────────────────────── */
:root { --skel-b: rgba(255,255,255,.05); --skel-p: rgba(96,165,250,.1); --skel-spd: 1100ms; }
#app.light-theme { --skel-b: rgba(0,0,0,.05); --skel-p: rgba(96,165,250,.07); }
.skel {
  border-radius: 6px;
  background: linear-gradient(90deg, var(--skel-b) 25%, var(--skel-p) 37%, var(--skel-b) 63%);
  background-size: 400% 100%; color: transparent !important; user-select: none; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .skel { animation: skelS var(--skel-spd) linear infinite; }
}
@keyframes skelS { 0%{background-position:100% 0} 100%{background-position:0 0} }
.skel-line  { display:block; height:.85rem; margin:.3rem 0; border-radius:4px; }
.skel-block { display:block; height:var(--skel-h,40px); border-radius:10px; }
.skel-title { display:block; height:1rem; margin:.4rem 0 .6rem; border-radius:4px; }
.skel-w-20{width:20%} .skel-w-30{width:30%} .skel-w-40{width:40%}
.skel-w-50{width:50%} .skel-w-60{width:60%} .skel-w-70{width:70%}
.skel-w-80{width:80%} .skel-w-90{width:90%} .skel-w-100{width:100%}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 680px) {
  #left-stack { padding: 12px 12px 60px; }
  .pf-kpi-grid { grid-template-columns: repeat(2,1fr); }
  .pf-kpi-row  { grid-template-columns: repeat(2,1fr); }
  .cd-bar { padding: 8px 12px; }
  .cd-input-id { width: 72px; }
}
/* ── Chips base ── */
.reporte-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.reporte-chip {
    padding: 4px 14px;
    border-radius: 20px;
    border: 1.5px solid #e5e7eb;
    background: transparent;
    color: #9ca3af;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1.6;
}

/* ── Monitoreo ── */
#chips-monitoreo .reporte-chip[data-metric="glucosa"]:hover,
#chips-monitoreo .reporte-chip[data-metric="glucosa"].is-active {
    border-color: #6C63FF; background: #6C63FF; color: #fff;
}
#chips-monitoreo .reporte-chip[data-metric="sis"]:hover,
#chips-monitoreo .reporte-chip[data-metric="sis"].is-active {
    border-color: #FF6584; background: #FF6584; color: #fff;
}
#chips-monitoreo .reporte-chip[data-metric="dia"]:hover,
#chips-monitoreo .reporte-chip[data-metric="dia"].is-active {
    border-color: #F9A825; background: #F9A825; color: #fff;
}
#chips-monitoreo .reporte-chip[data-metric="fc"]:hover,
#chips-monitoreo .reporte-chip[data-metric="fc"].is-active {
    border-color: #26C6DA; background: #26C6DA; color: #fff;
}

/* ── Rutinas ── */
#chips-rutinas .reporte-chip[data-metric="sesiones"]:hover,
#chips-rutinas .reporte-chip[data-metric="sesiones"].is-active {
    border-color: #6C63FF; background: #6C63FF; color: #fff;
}
#chips-rutinas .reporte-chip[data-metric="volumen"]:hover,
#chips-rutinas .reporte-chip[data-metric="volumen"].is-active {
    border-color: #26C6DA; background: #26C6DA; color: #fff;
}
#chips-rutinas .reporte-chip[data-metric="adherencia"]:hover,
#chips-rutinas .reporte-chip[data-metric="adherencia"].is-active {
    border-color: #F9A825; background: #F9A825; color: #fff;
}

/* ── Balance ── */
#chips-balance .reporte-chip[data-metric="delta"]:hover,
#chips-balance .reporte-chip[data-metric="delta"].is-active {
    border-color: #6C63FF; background: #6C63FF; color: #fff;
}
#chips-balance .reporte-chip[data-metric="gasto"]:hover,
#chips-balance .reporte-chip[data-metric="gasto"].is-active {
    border-color: #FF6584; background: #FF6584; color: #fff;
}
#chips-balance .reporte-chip[data-metric="consumidas"]:hover,
#chips-balance .reporte-chip[data-metric="consumidas"].is-active {
    border-color: #26C6DA; background: #26C6DA; color: #fff;
}
#chips-balance .reporte-chip[data-metric="plan"]:hover,
#chips-balance .reporte-chip[data-metric="plan"].is-active {
    border-color: #66BB6A; background: #66BB6A; color: #fff;
}

/* ── Hover genérico para chips sin is-active ── */
.reporte-chip:not(.is-active):hover {
    border-color: #d1d5db;
    color: #6b7280;
}
/* Mejora visual global de los canvas Chart.js */
#chart-monitoreo,
#chart-rutinas,
#chart-balance {
    border-radius: 8px;
}

/* ── Balance · Calendario (tema-aware) ─────────────────────── */
:root {
  /* Dark mode (default) — más saturado para contraste sobre fondo oscuro */
  --balcal-cumplido:  #14532d;
  --balcal-parcial:   #713f12;
  --balcal-exceso:    #7f1d1d;
  --balcal-sindatos:  #2b3441;
  --balcal-dia-text:  #f3f4f6;
  --balcal-modal-bg:  #1a1f29;
  --balcal-modal-bd:  rgba(255,255,255,.10);
  --balcal-overlay:   rgba(0,0,0,.65);
}
#app.light-theme {
  --balcal-cumplido:  #DCFCE7;
  --balcal-parcial:   #FEF3C7;
  --balcal-exceso:    #FECACA;
  --balcal-sindatos:  #E5E7EB;
  --balcal-dia-text:  #111827;
  --balcal-modal-bg:  #FFFFFF;
  --balcal-modal-bd:  rgba(0,0,0,.10);
  --balcal-overlay:   rgba(0,0,0,.45);
}