/* ============================================================
   Integral Care CRM — Design System
   Revisión limpia: una sola fuente de verdad, sin !important
   ============================================================ */

/* === Variables === */
:root {
  /* Colores base */
  --bg:       #f5f0f2;
  --surface:  #ffffff;
  --border:   #e2d8dc;
  --border-focus: #c07b90;

  /* Texto */
  --ink:      #1c1618;
  --muted:    #705a63;
  --label:    #4a3840;

  /* Acento: rosa cálido oscuro — no baby pink */
  --accent:   #b5606f;
  --accent-bg:#f9edf0;
  --accent2:  #2d2028;

  /* Estados */
  --ok:       #2d7a4f;
  --ok-bg:    #e8f5ee;
  --warn:     #a85c3a;
  --warn-bg:  #fdf0e8;
  --danger:   #992b2b;

  /* WhatsApp */
  --wa:       #1f9d5b;

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(30,15,20,.08);
  --shadow:    0 4px 16px rgba(30,15,20,.10);

  /* Nav */
  --nav-w:    220px;
  --nav-bg:   #1e1a1f;
  --nav-text: #d4c4ca;
  --nav-active-bg: rgba(255,255,255,.10);

  /* Misc */
  --radius:   10px;
  --radius-sm: 7px;
  --safe-b:   env(safe-area-inset-bottom, 0px);
}

/* === Reset mínimo === */
*, *::before, *::after { box-sizing: border-box; min-width: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; }

/* === Tipografía === */
h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
h2 { margin: 0 0 14px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
h3 { margin: 0; font-size: 14px; font-weight: 700; }
p  { margin: 0; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 4px;
}
.muted, small { color: var(--muted); font-size: 13px; }

/* === Nav lateral — desktop === */
.nav {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--nav-w);
  background: var(--nav-bg);
  color: var(--nav-text);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  gap: 8px;
  z-index: 50;
  overflow-y: auto;
}

.brand {
  padding: 4px 6px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 4px;
}
.brand span { display: block; font-size: 18px; font-weight: 800; color: #fff; line-height: 1; }
.brand strong { display: block; font-size: 18px; font-weight: 300; color: #fff; line-height: 1; }
.brand small { display: block; font-size: 11px; color: rgba(255,255,255,.35); margin-top: 4px; }

.nav nav { display: grid; gap: 2px; }

.nav a, .linkbtn {
  display: block;
  color: var(--nav-text);
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background .15s, color .15s;
  min-height: 40px;
  line-height: 1.2;
  display: flex;
  align-items: center;
}
.nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav a.active { background: var(--nav-active-bg); color: #fff; font-weight: 700; }

.nav > form {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.linkbtn { color: rgba(255,255,255,.45); font-size: 13px; }
.linkbtn:hover { color: rgba(255,255,255,.7); }

/* === Shell principal === */
.shell {
  margin-left: var(--nav-w);
  min-height: 100vh;
  padding: 28px 32px;
  max-width: 1400px;
}
.login-shell {
  margin: 0;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 20px;
}

/* === Flash messages === */
.flash-wrap {
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 200;
  display: grid;
  gap: 8px;
  max-width: 360px;
}
.flash {
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.flash.ok { background: var(--ok-bg); border-color: #a8d4ba; color: var(--ok); }
.flash.error { background: #fdecea; border-color: #f5b8b5; color: var(--danger); }

/* === Topline / header de página === */
.topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* === Botones === */
.primary, button, .secondary, .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 16px;
  border-radius: var(--radius);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity .15s, background .15s;
  text-decoration: none;
  white-space: nowrap;
  min-height: 38px;
}
button, .primary {
  background: var(--accent2);
  color: #fff;
  border-color: var(--accent2);
}
button:hover, .primary:hover { opacity: .85; }
.secondary, .chip {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border);
}
.secondary:hover, .chip:hover { background: #f0eaed; }
.danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.whatsapp { background: var(--wa); color: #fff; border-color: var(--wa); }
.small { font-size: 13px; padding: 5px 11px; min-height: 32px; border-radius: var(--radius-sm); }

/* === Formularios === */
label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--label);
  margin-bottom: 12px;
}
input, select, textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  transition: border-color .15s;
  min-height: 40px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(176,96,111,.12);
}
textarea { min-height: 80px; resize: vertical; }

.stack { display: grid; gap: 4px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.search { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.search input, .search select { margin-top: 0; flex: 1; min-width: 140px; }

.checkline { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.checkline input { width: auto; min-height: auto; margin-top: 0; }

/* === Cards === */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.card.accent { background: var(--accent-bg); border-color: rgba(176,96,111,.2); }

/* === Stats === */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.stats article {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.stats article span { font-size: 12px; color: var(--muted); font-weight: 600; display: block; }
.stats article strong { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.04em; margin-top: 2px; }
.stats article.warnstat strong { color: var(--warn); }
.stats.compact article strong { font-size: 20px; }

/* === Grid layouts === */
.grid { display: grid; gap: 16px; }
.three { grid-template-columns: repeat(3, 1fr); }
.two   { grid-template-columns: repeat(2, 1fr); }
.two.uneven { grid-template-columns: 1fr 380px; }

/* === List / items === */
.list { display: grid; gap: 8px; }
.item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: background .12s;
}
a.item:hover { background: #faf5f7; }
.item strong { display: block; font-size: 14px; font-weight: 700; }
.item small, .item p { font-size: 13px; color: var(--muted); margin-top: 1px; }
.item .mini-actions { margin-top: 8px; display: flex; gap: 6px; }

/* === Badge / pill === */
.badge, .pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: #e8e0e3;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.badge.due { background: var(--warn-bg); color: var(--warn); }
.badge.ok  { background: var(--ok-bg); color: var(--ok); }
.item.urgent-yes { border-left: 3px solid var(--warn); }

/* Estado badges */
.status-activo       { background: var(--ok-bg); color: var(--ok); }
.status-nuevo        { background: #eef0ff; color: #4a47a3; }
.status-seguimiento  { background: #fff5e0; color: #8a6000; }
.status-pendiente-de-pago { background: var(--warn-bg); color: var(--warn); }
.status-inactivo, .status-archivado, .status-pausado { background: #eee; color: #777; }
.status-realizada    { background: var(--ok-bg); color: var(--ok); }
.status-cancelada    { background: #eee; color: #777; }
.status-programada   { background: #eef0ff; color: #4a47a3; }
.status-completa     { background: var(--ok-bg); color: var(--ok); }
.status-pago-pendiente { background: var(--warn-bg); color: var(--warn); }
.status-seguimiento-pendiente { background: #fff5e0; color: #8a6000; }

/* === Debt cell === */
.debt { color: var(--warn); font-weight: 700; }

/* === Quickbar (ficha paciente) === */
.quickbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.quickbar a {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: var(--surface);
  transition: background .12s;
}
.quickbar a:hover { background: #f0eaed; }

/* === Edit card (details/summary collapsible) === */
.edit-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}
.edit-card summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
}
.edit-card summary::-webkit-details-marker { display: none; }
.edit-card summary strong { display: block; font-weight: 700; }
.edit-card summary small { color: var(--muted); font-size: 12px; }
.edit-list { display: grid; gap: 6px; }
.compact-form { padding: 12px 14px; border-top: 1px solid var(--border); display: grid; gap: 10px; }

/* === Table === */
.table { display: grid; gap: 4px; font-size: 14px; }
.tr { display: grid; grid-template-columns: 100px 1fr 1fr 90px 90px 90px 90px; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); align-items: center; }
.tr.head { background: #f2ecee; font-size: 12px; font-weight: 700; color: var(--muted); }
.tr:not(.head) { background: var(--surface); border: 1px solid var(--border); }
a.tr:hover { background: #faf5f7; }
.mini-table .tr { grid-template-columns: 1fr 60px 100px 100px; }

/* === Login === */
.login-card {
  width: min(400px, 92vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
}
.login-card h1 { font-size: 22px; margin-bottom: 20px; }

/* === Agenda / Calendario === */
.agenda-commandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 12px 16px;
}
.agenda-commandbar h2 { margin: 0; font-size: 15px; }
.agenda-command-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.agenda-command-stats span { font-size: 13px; color: var(--muted); }
.agenda-command-stats b { color: var(--ink); font-weight: 700; }
.agenda-day-picker { display: flex; gap: 6px; align-items: center; }
.agenda-day-picker input { min-height: 34px; font-size: 13px; padding: 5px 8px; width: auto; }

.agenda-status-strip, .legend, .compact-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  align-items: center;
}
.legend span, .compact-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot.disponible  { background: var(--ok); }
.dot.tentativa   { background: #e8b84b; }
.dot.confirmada  { background: #5b7fcf; }
.dot.bloque-personal, .dot.ocupado { background: var(--accent); }
.dot.realizada   { background: var(--muted); }

/* Grilla semanal */
.scarlette-week-grid, .agenda-v2-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.scarlette-day, .agenda-v2-day {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.scarlette-day h3, .agenda-v2-day h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f2ecee;
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  margin: 0;
}
.scarlette-day h3 span, .agenda-v2-day h3 span { font-size: 11px; font-weight: 500; color: var(--muted); }
.scarlette-day.today h3, .agenda-v2-day.today h3 { background: var(--accent-bg); color: var(--accent); }

.scarlette-segments, .agenda-v2-list { display: grid; gap: 5px; padding: 8px; }

/* Slot de hora */
.scarlette-segment, .agenda-slot-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  min-height: 44px;
}
.scarlette-segment.is-available, .agenda-slot-row.is-available {
  border-color: #b8d9c5;
  background: #f0faf4;
}
.scarlette-segment.is-busy, .agenda-slot-row.is-busy {
  background: #fdf7f8;
  border-color: #e8cfd4;
}

.segment-main, .agenda-slot-main { display: grid; gap: 1px; }
.segment-main strong, .agenda-slot-main strong { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1; }
.segment-main span, .agenda-slot-main span { font-size: 11px; color: var(--ok); font-weight: 700; }

/* Acciones de slot */
.slot-actions, .agenda-slot-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
}
.agenda-open-sheet, .slot-btn {
  font-size: 11px;
  padding: 5px 9px;
  min-height: 26px;
  border-radius: 999px;
  white-space: nowrap;
}
.segment-block-form { margin: 0; }
.segment-block-form button, .slot-btn.bloquear {
  background: var(--surface);
  color: var(--muted);
  border-color: var(--border);
  font-size: 11px;
  padding: 4px 9px;
  min-height: 24px;
}

/* Bloque ocupado inline */
.agenda-block, .inline-block {
  border-radius: var(--radius-sm);
  font-size: 12px;
  margin-top: 4px;
}
.agenda-block summary, .inline-block summary {
  padding: 5px 8px;
  cursor: pointer;
  list-style: none;
  display: flex;
  gap: 6px;
  align-items: center;
}
.agenda-block summary::-webkit-details-marker,
.inline-block summary::-webkit-details-marker { display: none; }
.agenda-block.tentativa   { background: #fffaf0; border: 1px solid #f2d47a; }
.agenda-block.confirmada  { background: #f0f4ff; border: 1px solid #b8c6f0; }
.agenda-block.bloque-personal, .agenda-block.ocupado { background: var(--accent-bg); border: 1px solid #ddb8c2; }
.agenda-block.realizada   { background: var(--ok-bg); border: 1px solid #afd9c1; }

/* State pills */
.state-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
}
.state-pill.tentativa   { background: #fff3c4; color: #8a5b00; }
.state-pill.confirmada  { background: #e9e9ff; color: #47428f; }
.state-pill.realizada   { background: var(--ok-bg); color: var(--ok); }
.state-pill.cancelada   { background: #eee; color: #777; }
.state-pill.bloque-personal, .state-pill.ocupado { background: var(--accent-bg); color: var(--accent); }

/* Día cerrado / extra */
.closed-day, .extra-day-box {
  padding: 14px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.extra-day-box p { font-weight: 700; color: var(--ink); margin-bottom: 4px; font-size: 14px; }
.extra-day-box small { font-size: 12px; display: block; margin-bottom: 10px; }
.extra-day-box .agenda-open-sheet { width: 100%; border-radius: var(--radius-sm); }

/* Herramientas de agenda */
.agenda-tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.agenda-tool-card {}
.action-collapse { overflow: hidden; }
.action-collapse > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  font-weight: 700;
  font-size: 15px;
}
.action-collapse > summary::-webkit-details-marker { display: none; }
.action-collapse > summary:after { content: '+'; font-size: 18px; color: var(--muted); }
.action-collapse[open] > summary:after { content: '–'; }
.action-collapse > summary span { display: block; }
.action-collapse > summary small { font-size: 12px; font-weight: 500; color: var(--muted); display: block; margin-top: 1px; }
.action-collapse form { padding: 0 18px 18px; display: grid; gap: 10px; }
.compact-mobile-form { gap: 10px; display: grid; }

/* Upcoming / WhatsApp panel */
.upcoming-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 0; }
.upcoming-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.upcoming-list li:last-child { border-bottom: none; }
.copy-textarea { width: 100%; min-height: 80px; font-size: 12px; margin-top: 10px; }
.copy-btn { width: 100%; margin-top: 8px; }
.message-preview { margin-top: 8px; font-size: 13px; }
.card-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }

/* Bottom sheet (dialog) */
.agenda-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: auto;
  margin: 0;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(30,15,20,.18);
  background: var(--surface);
  padding: 0;
}
.agenda-sheet::backdrop { background: rgba(0,0,0,.35); }
.agenda-sheet-form { padding: 20px; display: grid; gap: 12px; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 4px; }
.sheet-head h2 { font-size: 18px; margin: 0; }
.sheet-head p { margin: 0; }

/* Disponibilidad de agenda (filtros web) */
.agenda-filter, .agenda-v2-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 12px;
}
.agenda-filter select, .agenda-v2-filter select { min-height: 36px; font-size: 14px; margin-top: 0; flex: 1; min-width: 140px; }
.agenda-filter button, .agenda-v2-filter button { min-height: 36px; }

/* Sesiones — pendientes card */
.mini-list { margin-top: 8px; }
.mini-list p { font-size: 13px; color: var(--muted); }

/* Quick book (agendar inline desde slot) */
.quick-book summary {
  list-style: none;
  cursor: pointer;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  padding: 5px 10px;
  text-align: center;
}
.quick-book summary::-webkit-details-marker { display: none; }
.quick-book[open] summary { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.quick-book form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 8px;
  display: grid;
  gap: 6px;
}

/* Agenda mobile-actions (dashboard) */
.mobile-actions {
  display: none;
}

/* Weekday grid (bloques recurrentes) */
.weekday-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 12px; }
.weekday-grid .checkline { flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 4px; font-size: 12px; background: var(--surface); cursor: pointer; }
.weekday-grid input[type=checkbox]:checked ~ * { color: var(--accent); }

/* Sugerencias ficha */
blockquote {
  background: #fdf5f7;
  border-left: 3px solid var(--accent);
  padding: 10px 14px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14px;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.5;
}

/* Exportar CSV (payments) */
.sessions-filter { gap: 8px; }
.sessions-filter input, .sessions-filter select { min-height: 36px; font-size: 14px; }


/* ============================================================
   RESPONSIVE — móvil
   ============================================================ */
@media (max-width: 900px) {
  .scarlette-week-grid, .agenda-v2-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .agenda-tools-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  /* Shell */
  .shell {
    margin-left: 0;
    padding: 16px 14px;
    padding-bottom: calc(80px + var(--safe-b));
  }

  /* H1 móvil */
  h1 { font-size: 22px; }

  /* Nav — bottom tab bar */
  .nav {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    height: calc(62px + var(--safe-b));
    flex-direction: row;
    align-items: center;
    padding: 6px 8px calc(6px + var(--safe-b));
    background: rgba(20, 16, 21, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255,255,255,.08);
    gap: 0;
    overflow: visible;
  }
  .brand { display: none; }
  .nav nav {
    display: flex;
    flex: 1;
    flex-direction: row;
    gap: 0;
    width: 100%;
    justify-content: space-around;
  }
  .nav a {
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px 4px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 10px;
    min-height: 50px;
    gap: 2px;
    text-align: center;
  }
  .nav a.active {
    background: rgba(255,255,255,.10);
    color: #fff;
  }
  /* Iconos en nav móvil via ::before */
  .nav a[href*="/"]:not([href*="patients"]):not([href*="calendar"]):not([href*="sessions"]):not([href*="payments"])::before { content: '⌂'; font-size: 16px; }
  .nav a[href*="patients"]::before  { content: '♡'; font-size: 16px; }
  .nav a[href*="calendar"]::before  { content: '◻'; font-size: 16px; }
  .nav a[href*="sessions"]::before  { content: '✓'; font-size: 16px; }
  .nav a[href*="payments"]::before  { content: '₩'; font-size: 16px; }
  .nav > form { display: none; }

  /* Stats */
  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 14px;
  }
  .stats article { padding: 11px 12px; border-radius: var(--radius-sm); }
  .stats article strong { font-size: 22px; }
  .stats article span { font-size: 11px; }

  /* Grid layouts */
  .three, .two, .two.uneven { grid-template-columns: 1fr; }

  /* Topline */
  .topline { gap: 10px; margin-bottom: 14px; }
  .actions { gap: 6px; }

  /* Botones */
  button, .primary, .secondary, .chip {
    min-height: 44px;
    font-size: 14px;
    border-radius: var(--radius);
  }
  .small { min-height: 36px; font-size: 13px; }

  /* Formularios */
  input, select, textarea { font-size: 16px; min-height: 46px; }
  label { font-size: 14px; }
  .pair { grid-template-columns: 1fr; gap: 4px; }

  /* Card */
  .card { padding: 14px; border-radius: var(--radius); }

  /* Flash */
  .flash-wrap { left: 12px; right: 12px; top: 12px; }

  /* Agenda grilla */
  .scarlette-week-grid, .agenda-v2-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .scarlette-segment, .agenda-slot-row {
    min-height: 52px;
    padding: 10px 12px;
  }
  .segment-main strong, .agenda-slot-main strong { font-size: 14px; }
  .segment-main span, .agenda-slot-main span { font-size: 12px; }
  .agenda-open-sheet { min-height: 38px; font-size: 13px; padding: 8px 14px; border-radius: 999px; }
  .segment-block-form button { min-height: 34px; font-size: 12px; }

  /* Action collapse */
  .action-collapse > summary { padding: 13px 14px; font-size: 14px; }
  .action-collapse form { padding: 0 14px 14px; }

  /* Agenda tools */
  .agenda-tools-grid { grid-template-columns: 1fr; margin-top: 10px; }

  /* Agenda commandbar */
  .agenda-commandbar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .agenda-command-stats { gap: 8px; }
  .agenda-day-picker { display: none; }

  /* Mobile actions visible solo en móvil */
  .mobile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
  }
  .mobile-actions a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    text-align: center;
    box-shadow: var(--shadow-sm);
  }
  .mobile-actions a:first-child { background: var(--accent); color: #fff; border-color: var(--accent); }
  .mobile-actions a:hover { opacity: .88; }

  /* Quickbar */
  .quickbar { padding-bottom: 12px; margin-bottom: 12px; gap: 6px; overflow-x: auto; flex-wrap: nowrap; }
  .quickbar a { flex-shrink: 0; }

  /* Tabla */
  .tr { grid-template-columns: 80px 1fr 90px 80px; font-size: 12px; }
  .tr:nth-child(n+5) { display: none; }
  .mini-table .tr { grid-template-columns: 1fr 60px 90px; }

  /* Agenda sheet */
  .agenda-sheet { max-width: 100%; border-radius: 20px 20px 0 0; }
  .agenda-sheet-form { padding: 16px 16px calc(16px + var(--safe-b)); gap: 10px; }

  /* Búsqueda pacientes */
  .search { flex-direction: column; }
  .search input, .search select { width: 100%; min-width: 0; }

  /* Patient head actions */
  .patient-head .actions { flex-wrap: wrap; }

  /* Edit card */
  .edit-card summary { padding: 10px 12px; }
  .compact-form { padding: 10px 12px; gap: 8px; }
}

/* ============================================================
   Overrides menores de consistencia
   ============================================================ */

/* Nav: no mostrar Salir en desktop si hay poco espacio */
@media (max-height: 480px) {
  .nav > form { display: none; }
}

/* Tabla completa en sesiones/pagos (mostrar todas las columnas) */
@media (max-width: 760px) {
  .tr { grid-template-columns: 1fr; gap: 2px; }
  .tr.head { display: none; }
  .tr > span:before { font-weight: 700; color: var(--muted); font-size: 11px; display: block; }
}

/* === Fixup v2: agenda slots y botones === */

/* Tiempo no rompe línea */
.segment-main strong, .agenda-slot-main strong {
  white-space: nowrap;
}

/* Estado "disponible" no se trunque */
.segment-main span, .agenda-slot-main span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Agendar: acento positivo (verde) en vez de oscuro */
.agenda-open-sheet {
  background: var(--ok) !important;
  color: #fff !important;
  border-color: var(--ok) !important;
}
.agenda-open-sheet:hover { opacity: .85; }

/* Bloquear: borde sutil, sin peso */
.segment-block-form button {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  font-size: 11px;
  padding: 4px 8px;
  min-height: 24px;
  box-shadow: none;
}

/* Slot más compacto — no necesita 44px */
.scarlette-segment, .agenda-slot-row {
  min-height: 38px;
  padding: 6px 9px;
}

/* En móvil, slots más amplios para tap */
@media (max-width: 760px) {
  .scarlette-segment, .agenda-slot-row { min-height: 52px; padding: 10px 12px; }
  .agenda-open-sheet { min-height: 40px; font-size: 14px; }
}

/* === v3 fixups: legibilidad agenda === */

/* Ocultar texto "disponible" redundante — el color verde ya lo dice */
.scarlette-segment.is-available .segment-main span,
.agenda-slot-row.is-available .agenda-slot-main span {
  display: none;
}

/* Acciones horizontales en vez de vertical */
.slot-actions, .agenda-slot-actions {
  flex-direction: row;
  gap: 5px;
  align-items: center;
}

/* Hora más grande, más legible */
.segment-main strong, .agenda-slot-main strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}

/* Slot layout: más ajustado */
.scarlette-segment, .agenda-slot-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
}
.segment-main, .agenda-slot-main { flex: 1; }

/* En busy, mostrar el nombre del bloque más claro */
.scarlette-segment.is-busy .segment-main span,
.agenda-slot-row.is-busy .agenda-slot-main span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}

/* === v4 fix: restaurar layout correcto de slot === */
.scarlette-segment, .agenda-slot-row {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 8px !important;
  align-items: center !important;
  flex-direction: unset !important;
  min-height: 40px;
  padding: 7px 10px;
}
.segment-main, .agenda-slot-main {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  min-width: 0 !important;
}
.slot-actions, .agenda-slot-actions {
  display: flex !important;
  flex-direction: row !important;
  gap: 4px !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
@media (max-width: 760px) {
  .scarlette-segment, .agenda-slot-row {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    padding: 11px 13px !important;
  }
  .slot-actions, .agenda-slot-actions {
    width: 100% !important;
    gap: 8px !important;
  }
  .agenda-open-sheet { flex: 1 !important; min-height: 42px !important; border-radius: 999px !important; }
  .segment-block-form { flex: 1 !important; }
  .segment-block-form button { width: 100% !important; min-height: 42px !important; border-radius: 999px !important; }
}

/* === v5 fix final: slots en columnas angostas — layout vertical === */
.scarlette-segment, .agenda-slot-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  padding: 8px 9px !important;
  min-height: 0 !important;
}
.segment-main, .agenda-slot-main {
  display: block !important;
  flex: 0 0 auto !important;
}
.segment-main strong, .agenda-slot-main strong {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  white-space: nowrap !important;
  display: block !important;
}
.slot-actions, .agenda-slot-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;
  width: 100% !important;
  flex-direction: unset !important;
}
.agenda-open-sheet {
  font-size: 11px !important;
  padding: 5px 6px !important;
  min-height: 28px !important;
  border-radius: var(--radius-sm) !important;
  white-space: nowrap !important;
  text-align: center !important;
}
.segment-block-form { margin: 0 !important; }
.segment-block-form button {
  width: 100% !important;
  font-size: 11px !important;
  padding: 5px 6px !important;
  min-height: 28px !important;
  border-radius: var(--radius-sm) !important;
  white-space: nowrap !important;
}

/* Móvil: más espacio táctil */
@media (max-width: 760px) {
  .scarlette-segment, .agenda-slot-row {
    padding: 12px 13px !important;
    gap: 10px !important;
  }
  .segment-main strong, .agenda-slot-main strong { font-size: 16px !important; }
  .agenda-open-sheet { min-height: 44px !important; font-size: 14px !important; border-radius: 999px !important; }
  .segment-block-form button { min-height: 44px !important; font-size: 14px !important; border-radius: 999px !important; }
}