/* ============================================================
   style-index.css — Your Body Talks Dashboard
   Diseño: clínico / precision dark
   Fuentes: DM Sans (cuerpo) + Fraunces (números grandes)
   Todos los IDs y clases de JS se mantienen intactos.
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400&family=DM+Sans:wght@300;400;500;600;700&display=swap');

/* ── Variables globales ────────────────────────────────────── */
:root {
  /* Paleta base */
  --bg:        #06090f;
  --bg-soft:   #080d16;
  --card:      #0c1524;
  --card-2:    #091120;
  --text:      #cdd8e8;
  --txt:       #cdd8e8;
  --muted:     #4e6278;

  /* Acentos */
  --accent:    #4f8cff;
  --accent-2:  #7bd88f;
  --purple:    #a78bfa;
  --warning:   #ffcf5a;
  --danger:    #ff6b6b;

  /* Semánticos */
  --ok:        #34d399;
  --warn:      #f59e0b;
  --bad:       #ef4444;

  /* Gradientes — definidos aquí, no en header.php */
  --grad-1: linear-gradient(135deg, #6366f1 0%, #22d3ee 100%);
  --grad-2: linear-gradient(135deg, #22c55e 0%, #06b6d4 100%);
  --grad-3: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
  --grad-4: linear-gradient(135deg, #a78bfa 0%, #60a5fa 100%);

  /* Sistema */
  --border:    rgba(255,255,255,.06);
  --border-hi: rgba(255,255,255,.11);
  --shadow:    0 8px 32px rgba(0,0,0,.35);
  --shadow-sm: 0 2px 10px rgba(0,0,0,.25);
  --radius:    16px;
  --radius-sm: 10px;

  /* Macros */
  --macro-kcal: #F87171;
  --macro-cho:  #60A5FA;
  --macro-pro:  #34D399;
  --macro-lip:  #FBBF24;
  --chip:       #1a2540;

  /* Layout */
  --container: 1200px;
  --gap:       16px;
  --pad-x:     clamp(16px, 3vw, 32px);
  --pad-y:     20px;

  /* Skeleton */
  --skel-base:  rgba(255,255,255,.05);
  --skel-peak:  rgba(79,140,255,.12);
  --skel-rad:   8px;
  --skel-speed: 1100ms;

  /* Hairline */
  --hairline: rgba(255,255,255,.06);
}

/* ── Tema claro ─────────────────────────────────────────────── */
#app.light-theme {
  --bg:        #f0f4f9;
  --bg-soft:   #ffffff;
  --card:      #ffffff;
  --card-2:    #f4f7fc;
  --text:      #0d1a2e;
  --txt:       #0d1a2e;
  --muted:     #5c6f88;
  --border:    rgba(0,0,0,.08);
  --border-hi: rgba(0,0,0,.14);
  --shadow:    0 4px 20px rgba(0,0,0,.09);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.07);
  --hairline:  rgba(0,0,0,.07);
  --chip:      #e8edf5;
  --skel-base: rgba(0,0,0,.05);
  --skel-peak: rgba(79,140,255,.1);
}

/* ── Reset mínimo ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; scrollbar-width: thin; }
body::-webkit-scrollbar { width: 8px; height: 8px; }
a { text-decoration: none; color: inherit; }

body {
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  display: flex;
  min-height: 100vh;
}

/* Fondo atmosférico */
.body-style {
  background:
    radial-gradient(900px 600px at 5% -5%,  rgba(99,102,241,.1)  0%, transparent 60%),
    radial-gradient(700px 500px at 95% 10%, rgba(34,211,238,.06)  0%, transparent 55%),
    radial-gradient(600px 800px at 50% 100%, rgba(167,139,250,.05) 0%, transparent 60%),
    var(--bg);
  color: var(--text);
}
#app.light-theme.body-style { background: var(--bg); }

/* ── Layout principal ───────────────────────────────────────── */
.ybt-content {
  margin-left: 58px;
  transition: margin-left 220ms cubic-bezier(.4,0,.2,1);
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
@media (max-width: 980px) {
  .ybt-content { margin-left: 0; }
}

/* ── Header KPI ─────────────────────────────────────────────── */
.header-kpi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px var(--pad-x);

  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8, 13, 22, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
#app.light-theme .header-kpi {
  background: rgba(240, 244, 249, 0.88);
  border-bottom: 1px solid var(--border);
}

.hello { display: flex; gap: 14px; align-items: center; }
.hello .avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--grad-1);
  box-shadow: 0 0 0 3px rgba(99,102,241,.25);
  flex-shrink: 0;
}
.hello h1 {
  margin: 0;
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.2px;
  
}
.hello p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.quick-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Botones ────────────────────────────────────────────────── */
.btn {
  appearance: none;
  background: var(--card-2);
  border: 1px solid var(--border-hi);
  color: var(--text);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn.primary {
  background: linear-gradient(135deg, var(--accent), #2f72e8);
  border: none;
  color: #fff;
  box-shadow: 0 4px 18px rgba(79,140,255,.3);
}
.btn.small { padding: 6px 10px; border-radius: 8px; font-size: 12px; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Main / grid ────────────────────────────────────────────── */
main.dash { padding: var(--pad-y) var(--pad-x) 60px; display: grid; gap: 20px; }

.grid { display: grid; gap: var(--gap); }
.grid.section { grid-template-columns: repeat(12, 1fr); }
.grid.section > * { grid-column: 1 / -1; }

.section { padding: 0; }

.section h2 {
  margin: 0 0 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}

.row {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(12, 1fr);
}
.col-8 { grid-column: span 8; }
.col-4 { grid-column: span 4; }

/* ── Cards / Panels ─────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.card:hover { border-color: var(--border-hi); }
#app.light-theme .card {
  background: var(--card);
  border: 1px solid var(--border);
}

.panel.card, .panel {
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.panel-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
}
.panel-h h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .1px;
}
.panel-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── KPI Grid ───────────────────────────────────────────────── */
.kpis {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(12, 1fr);
}

.kpi {
  grid-column: span 3;
  padding: 18px 18px 16px;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}

/* Línea de acento en la parte superior */
.kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--kpi-accent, var(--grad-1));
  opacity: .7;
}
.kpi:nth-child(1) { --kpi-accent: var(--grad-1); }
.kpi:nth-child(2) { --kpi-accent: var(--grad-2); }
.kpi:nth-child(3) { --kpi-accent: var(--grad-3); }
.kpi:nth-child(4) { --kpi-accent: var(--grad-4); }
.kpi:nth-child(5) { --kpi-accent: var(--grad-1); }
.kpi:nth-child(6) { --kpi-accent: var(--grad-2); }

.kpi .hdr { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }

/* Icono con gradiente propio — no depende de header.php */
.kpi .icon {
  width: 38px; height: 38px;
  border-radius: 11px;
  flex-shrink: 0;
  background: var(--grad-1);
  box-shadow: 0 4px 14px rgba(99,102,241,.3);
}
.kpi:nth-child(2) .icon {
  background: var(--grad-2);
  box-shadow: 0 4px 14px rgba(34,197,94,.25);
}
.kpi:nth-child(3) .icon {
  background: var(--grad-3);
  box-shadow: 0 4px 14px rgba(249,115,22,.25);
}
.kpi:nth-child(4) .icon {
  background: var(--grad-4);
  box-shadow: 0 4px 14px rgba(167,139,250,.25);
}
.kpi:nth-child(5) .icon {
  background: var(--grad-1);
  box-shadow: 0 4px 14px rgba(99,102,241,.25);
}
.kpi:nth-child(6) .icon {
  background: var(--grad-2);
  box-shadow: 0 4px 14px rgba(34,197,94,.2);
}

.kpi .title {
  font-size: 11px;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 600;
}

.kpi .value {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 300;
  line-height: 1;
  margin: 0 0 4px;
  color: var(--text);
  letter-spacing: -.5px;
}

.kpi .sub { font-size: 12px; color: var(--muted); }

.kpi .trend {
  position: absolute;
  right: 12px;
  bottom: 12px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--hairline);
  color: var(--muted);
}
#app.light-theme .kpi .trend {
  background: rgba(0,0,0,.04);
  border: 1px solid var(--border);
}
.kpi .trend.ok { color: var(--ok); background: rgba(52,211,153,.08); border-color: rgba(52,211,153,.2); }
.kpi .trend.bad { color: var(--bad); background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.2); }

/* ── Listas ─────────────────────────────────────────────────── */
.list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-hi) transparent;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--hairline);
  font-size: 13px;
  transition: background .15s ease;
}
.list-item:hover { background: rgba(255,255,255,.04); }
#app.light-theme .list-item {
  background: rgba(0,0,0,.02);
  border: 1px solid var(--border);
}
#app.light-theme .list-item:hover { background: rgba(0,0,0,.04); }

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: var(--text);
  border: 1px solid var(--hairline);
  white-space: nowrap;
}
#app.light-theme .badge { background: rgba(0,0,0,.04); border: 1px solid var(--border); }

/* idx-badges (para listas del dashboard) */
.idx-badge {
  font-size: 11px;
  line-height: 1;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  color: var(--muted);
  white-space: nowrap;
}
.idx-badge.neutral { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.05); }
.idx-badge.ok      { border-color: rgba(52,211,153,.35);  background: rgba(52,211,153,.1);  color: var(--ok); }
.idx-badge.warn    { border-color: rgba(245,158,11,.35);  background: rgba(245,158,11,.1);  color: var(--warn); }
.idx-badge.danger  { border-color: rgba(255,107,107,.35); background: rgba(255,107,107,.1); color: var(--danger); }
.idx-badge.paid    { border-color: rgba(255,215,0,.3);    background: rgba(255,215,0,.1);   color: #ffd700; }

/* idx-items con acento lateral */
.idx-item {
  border-left: 3px solid var(--idx-accent, rgba(255,255,255,.15));
  background: var(--idx-bg, rgba(255,255,255,.03));
  border-radius: 10px;
  padding: 10px 12px;
  transition: background .15s ease, transform .12s ease;
  font-size: 13px;
}
.idx-item:hover {
  background: var(--idx-bg-hover, rgba(255,255,255,.06));
  transform: translateX(2px);
}

/* Estados */
.idx-item[data-estado="confirmada"]  { --idx-accent: rgba(80,180,255,.8); --idx-bg: rgba(80,180,255,.08); --idx-bg-hover: rgba(80,180,255,.13); }
.idx-item[data-estado="atendida"]    { --idx-accent: rgba(52,211,153,.8); --idx-bg: rgba(52,211,153,.08); --idx-bg-hover: rgba(52,211,153,.13); }
.idx-item[data-estado="cancelada"]   { --idx-accent: rgba(255,107,107,.8); --idx-bg: rgba(255,107,107,.08); opacity:.7; text-decoration:line-through; }
.idx-item[data-kind="pac-sin-plan"]  { --idx-accent: rgba(80,180,255,.6); --idx-bg: rgba(80,180,255,.06); --idx-bg-hover: rgba(80,180,255,.1); }
.idx-item[data-kind="sup-termina"]   { --idx-accent: rgba(245,158,11,.6); --idx-bg: rgba(245,158,11,.06); --idx-bg-hover: rgba(245,158,11,.1); }
.idx-item[data-pago="pendiente"]     { --idx-accent: rgba(80,180,255,.8); --idx-bg: rgba(80,180,255,.08); }
.idx-item[data-pago="pagado"]        { --idx-accent: rgba(52,211,153,.8); --idx-bg: rgba(52,211,153,.08); }
.idx-item[data-pago="cancelado"]     { --idx-accent: rgba(255,107,107,.8); --idx-bg: rgba(255,107,107,.08); opacity:.7; text-decoration:line-through; }
.idx-item[data-entrega="consulta"]   { --idx-accent: rgba(80,180,255,.8); --idx-bg: rgba(80,180,255,.08); }
.idx-item[data-entrega="domicilio"]  { --idx-accent: rgba(245,158,11,.6); --idx-bg: rgba(245,158,11,.07); }

.idx-count { font-weight: 700; letter-spacing: .2px; }

/* ── Solicitudes de adopción (público que pide ser tu paciente) ── */
.idx-item[data-kind="solicitud-adopcion"] { --idx-accent: rgba(167,139,250,.7); --idx-bg: rgba(167,139,250,.06); --idx-bg-hover: rgba(167,139,250,.1); }
.idx-item.is-accepted { --idx-accent: rgba(52,211,153,.8); --idx-bg: rgba(52,211,153,.08); --idx-bg-hover: rgba(52,211,153,.12); }

.adop-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.adop-avatar {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--chip) center / cover no-repeat;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--text);
  border: 1px solid var(--hairline);
}
.adop-text { min-width: 0; }
.adop-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adop-sub  { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.is-accepted .adop-sub { color: var(--ok); }
.adop-actions { display: flex; gap: 8px; flex: 0 0 auto; }
#solicitudesAdopcionCount:not(:empty) {
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 3px 8px; border-radius: 999px;
  color: var(--purple); background: rgba(167,139,250,.12);
  border: 1px solid rgba(167,139,250,.3);
}

/* ── Mini stack (pendientes) ────────────────────────────────── */
.mini-stack { display: grid; gap: 10px; }
.mini-card {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--hairline);
}
#app.light-theme .mini-card { background: rgba(0,0,0,.02); border: 1px solid var(--border); }
.mini-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.mini-title { font-size: 13px; font-weight: 700; color: var(--text); }
.mini-sub { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.mini-card .btn.small { width: 100%; }

/* ── Skeleton ───────────────────────────────────────────────── */
.skel {
  position: relative;
  display: block;
  border-radius: var(--skel-rad);
  background: linear-gradient(
    90deg,
    var(--skel-base) 25%,
    var(--skel-peak) 37%,
    var(--skel-base) 63%
  );
  background-size: 400% 100%;
  color: transparent !important;
  user-select: none;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .skel { animation: skel-shimmer var(--skel-speed) linear infinite; }
}
@keyframes skel-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
.skel-line  { height: .9rem;  margin: .4rem 0; border-radius: 6px; }
.skel-block { height: var(--skel-h, 44px); border-radius: 10px; }

/* ── Chart canvas ───────────────────────────────────────────── */
canvas { width: 100% !important; }

/* ── Feature gating ─────────────────────────────────────────── */
.is-hidden { display: none !important; }
[data-feature] { }

/* ── Helpers ────────────────────────────────────────────────── */
.ok  { color: var(--ok); }
.warn{ color: var(--warn); }
.bad { color: var(--bad); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .kpi   { grid-column: span 6; }
  .col-8 { grid-column: span 12; }
  .col-4 { grid-column: span 12; }
}
@media (max-width: 680px) {
  .kpi { grid-column: span 12; }
  .header-kpi { padding: 14px var(--pad-x); }
  .hello .avatar { width: 38px; height: 38px; }
  .btn { padding: 8px 12px; }
  .kpi .value { font-size: 26px; }
}
@media (max-width: 980px) {
  .header-kpi { padding-top: 56px; }
}

/* ── Toast root ─────────────────────────────────────────────── */
.toast-root {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

/* ── Rate banner ────────────────────────────────────────────── */
.rate-banner {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: 16px; z-index: 9999;
  max-width: 90%;
  background: rgba(12,18,30,.95);
  border: 1px solid var(--border-hi);
  color: var(--text);
  padding: 10px 16px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  font-size: 13px;
  backdrop-filter: blur(10px);
}
.rate-banner .muted { opacity: .7; }

/* ── Locked (feature gating visual) ────────────────────────── */
.locked { opacity: .5; pointer-events: auto; cursor: not-allowed; }
.locked .badge, .locked .chip { filter: grayscale(1); }

/* ── Notificaciones modal ───────────────────────────────────── */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.modal-body {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  max-width: 780px;
  width: 100%;
  max-height: 85vh;
  overflow: auto;
}

/* ── Notif badge en header ──────────────────────────────────── */
.badge-not {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: var(--danger);
  color: #fff;
  line-height: 1;
}
.badge-not:empty { display: none; }
.badge-not.is-read { opacity: .6; }

/* ── Responsive ─────────────────────────────────────────────── */

/* ── Tablet ── */
@media (max-width: 1200px) {
  .kpi   { grid-column: span 6; }
  .col-8 { grid-column: span 12; }
  .col-4 { grid-column: span 12; }
}

/* ── Sidebar collapse ── */
@media (max-width: 980px) {
  .ybt-content { margin-left: 0; }

  .header-kpi {
    padding-top: 56px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .actions {
    width: 100%;
    justify-content: flex-start;
  }

  .quick-actions {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 6px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .quick-actions::-webkit-scrollbar { display: none; }

  .quick-actions .btn {
    flex-shrink: 0;
    font-size: 12px;
    padding: 6px 12px;
  }

  #btnRefrescar {
    position: absolute;
    top: 56px;
    right: var(--pad-x);
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* ── Móvil ── */
@media (max-width: 680px) {
  :root {
    --pad-x: 14px;
    --gap: 12px;
  }

  .header-kpi {
    padding: 52px var(--pad-x) 12px;
    gap: 10px;
  }

  .hello h1 { font-size: 16px; }
  .hello p  { font-size: 12px; }
  .hello .avatar { width: 36px; height: 36px; }

  #btnRefrescar {
    top: 52px;
    right: var(--pad-x);
  }

  /* KPIs a una columna */
  .kpi {
    grid-column: span 12;
    padding: 14px;
  }
  .kpi .value { font-size: 26px; }
  .kpi .trend {
    position: static;
    display: inline-block;
    margin-top: 8px;
  }

  /* Secciones */
  main.dash { padding: 14px var(--pad-x) 40px; gap: 16px; }

  .row { gap: var(--gap); }

  /* Paneles de listas */
  .panel.card,
  .panel {
    padding: 12px;
  }
  .panel-h {
    flex-wrap: wrap;
    gap: 6px;
  }
  .panel-h h3 { font-size: 12px; }

  /* Listas — permitir scroll horizontal en items largos */
  .list { max-height: none; gap: 6px; }

  .list-item {
    padding: 10px;
    font-size: 12px;
    gap: 8px;
  }

  /* idx-items (citas, pedidos, etc.) */
  .idx-item {
    padding: 10px;
    font-size: 12px;
    flex-wrap: wrap;
    gap: 4px;
  }

  /* Badges en listas */
  .idx-badge {
    font-size: 10px;
    padding: 3px 7px;
  }

  /* Botones generales */
  .btn {
    padding: 7px 10px;
    font-size: 12px;
  }
  .btn.small {
    padding: 5px 8px;
    font-size: 11px;
  }

  /* Gráficas */
  canvas { height: 100px !important; }

  /* Section headers */
  .section h2 {
    font-size: 10px;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
  }
}

/* ── Móvil pequeño ── */
@media (max-width: 400px) {
  .quick-actions .btn {
    font-size: 11px;
    padding: 5px 10px;
  }

  .kpi .hdr { gap: 8px; }
  .kpi .icon { width: 32px; height: 32px; border-radius: 9px; }
  .kpi .value { font-size: 22px; }
  .kpi .title { font-size: 10px; }

  .hello h1 { font-size: 15px; }

  .list-item,
  .idx-item { font-size: 11px; padding: 8px; }
}

/* ============================================================
   PARCHE: Próximas consultas — responsive
   Agregar estas reglas al final de style-inicio.css
   ============================================================ */

/* ── Citas: layout interno responsive ───────────────────────── */

/* El div interno de cada cita usa flex row con space-between.
   En móvil lo pasamos a column para que nombre y badges no compitan. */

#listaCitas .idx-item > div {
  /* El wrapper principal dentro de cada item */
  flex-wrap: wrap;
}

/* ── Tablet (≤ 980px) ───────────────────────────────────────── */
@media (max-width: 980px) {
  #listaCitas {
    max-height: 320px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #listaCitas .idx-item > div {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Columna izquierda (nombre + fecha): ocupa todo el ancho */
  #listaCitas .idx-item > div > div:first-child {
    width: 100%;
    min-width: 0;
  }

  /* El texto con nombre: permitir ellipsis real */
  #listaCitas .idx-item > div > div:first-child > div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* Columna derecha (badges): wrap horizontal */
  #listaCitas .idx-item > div > div:last-child {
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start;
    gap: 6px;
  }
}

/* ── Móvil (≤ 680px) ────────────────────────────────────────── */
@media (max-width: 680px) {
  #listaCitas {
    max-height: 280px;
    overflow-y: auto;
  }

  #listaCitas .idx-item {
    padding: 10px;
    border-left-width: 3px;
  }

  #listaCitas .idx-item > div {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* Nombre: una sola línea con ellipsis */
  #listaCitas .idx-item > div > div:first-child > div {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100vw - 80px); /* descontar padding lateral */
  }

  /* Badges: fila compacta con wrap */
  #listaCitas .idx-item > div > div:last-child {
    flex-wrap: wrap;
    gap: 4px;
  }

  #listaCitas .idx-item .idx-badge {
    font-size: 10px;
    padding: 2px 6px;
  }

  #listaCitas .idx-item .btn.tiny {
    font-size: 10px;
    padding: 4px 8px;
  }
}

/* ── Móvil pequeño (≤ 400px) ────────────────────────────────── */
@media (max-width: 400px) {
  #listaCitas {
    max-height: 240px;
  }

  #listaCitas .idx-item > div > div:first-child > div {
    font-size: 11px;
    max-width: calc(100vw - 60px);
  }

  #listaCitas .idx-item .idx-badge {
    font-size: 9px;
    padding: 2px 5px;
  }
}