:root {
  --color-primary: #2563eb;
  --color-primary-contrast: #ffffff;
  --color-accent: #38bdf8;
  --color-warm: #ff9f2e;
  --color-mint: #12b8a6;
  --color-bg: #f4f7fd;
  --color-surface: #f7faff;
  --color-surface-raised: #ffffff;
  --color-surface-muted: #eef4ff;
  --color-text: #0f1b2d;
  --color-text-muted: #5a6b85;
  --color-text-soft: #9aa4ba;
  --color-border: #e3eaf6;
  --color-border-soft: #f0f3fa;
  --color-danger: #a73535;
  --shadow-neu: 0 20px 46px rgba(25, 24, 55, 0.1);
  --shadow-neu-sm: 0 12px 28px rgba(28, 28, 68, 0.08);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.86), inset 0 -1px 0 rgba(23, 22, 46, 0.04);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #fbfcff;
  color: var(--color-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
input,
select,
textarea {
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(15, 59, 95, 0.22);
  outline-offset: 2px;
}

select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(15, 59, 95, 0.22);
  outline-offset: 2px;
}

button:hover,
.sidebar a:hover {
  transform: translateY(-1px);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.auth-page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-6);
}

.auth-shell {
  width: min(100%, 440px);
}

.auth-panel,
.work-panel,
.metric {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-neu);
}

.auth-panel {
  padding: var(--space-8);
}

/* El logotipo de Zentra trae su propio degradado, asi que el contenedor solo
   reserva el espacio: ponerle fondo encima apagaria la marca.
   El trazo es mas ancho que alto (723x521), de modo que la altura manda y el
   ancho se acomoda; forzar un cuadrado lo dejaria diminuto y deformado. */
.brand-mark {
  display: inline-flex;
  align-items: center;
  height: 44px;
  flex: none;
}

.brand-mark .brand-logo {
  height: 100%;
  width: auto;
  display: block;
}

.brand-mark.small {
  height: 26px;
}

.muted,
.metric small {
  color: var(--color-text-muted);
}

.form-stack {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

label {
  display: grid;
  gap: var(--space-2);
  color: var(--color-text);
  font-size: 0.92rem;
  font-weight: 500;
}

input,
select,
textarea {
  min-height: 44px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--color-text);
  background: #f8faff;
  box-shadow: var(--shadow-inset);
}

textarea {
  resize: vertical;
}

button {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: var(--color-primary-contrast);
  box-shadow: 0 14px 24px rgba(37, 99, 235, 0.18);
  font-weight: 600;
  cursor: pointer;
}

.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
}

.auth-footnote {
  margin: var(--space-4) 0 0;
}

.app-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  /* Tres filas: el aviso de suplantacion, la barra superior y el contenido. Sin
     aviso la primera mide cero y la pantalla queda igual que siempre. La lateral
     cruza de la segunda hacia abajo, que es lo que deja el aviso a lo ancho. */
  grid-template-rows: auto auto minmax(0, 1fr);
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  backdrop-filter: none;
  transition: grid-template-columns 220ms ease;
}

body.sidebar-collapsed .app-shell {
  grid-template-columns: 92px minmax(0, 1fr);
}

.sidebar {
  grid-row: 2 / -1;
  background: var(--color-surface-raised);
  color: var(--color-text);
  border-right: 1px solid var(--color-border);
  max-height: 100dvh;
  overflow-y: auto;
  padding: 22px 16px;
}

.sidebar-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.brand-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border-bottom: 0;
  text-align: left;
}

.brand-row strong {
  color: var(--color-text);
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.1;
}

.brand-row small {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.sidebar-toggle {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--color-border-soft);
  border-radius: 14px;
  padding: 0;
  background: #fff;
  color: var(--color-text-muted);
  box-shadow: var(--shadow-neu-sm);
}

.sidebar-toggle svg {
  width: 18px;
  height: 18px;
}

.sidebar nav {
  display: grid;
  gap: var(--space-6);
}

.sidebar-form {
  margin-top: var(--space-8);
}

.nav-group {
  display: grid;
  gap: 8px;
  justify-items: stretch;
}

.nav-heading {
  color: var(--color-text-soft);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0 12px;
  text-transform: uppercase;
}

.sidebar a {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 14px;
  padding: 0 12px;
  color: var(--color-text);
  font-size: 0.92rem;
  font-weight: 600;
  text-align: left;
}

.nav-icon {
  width: 22px;
  min-width: 22px;
  height: 22px;
  color: currentColor;
  stroke-width: 1.9;
}

.nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Un comprobante sin revisar o una cuota vencida no avisaban por ningun lado: habia
   que acordarse de entrar a Pagos. */
.nav-badge {
  margin-left: auto;
  min-width: 22px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-danger);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

body.sidebar-collapsed .nav-badge {
  margin-left: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 0.66rem;
}

.sidebar a:hover,
.sidebar .nav-active {
  background: linear-gradient(135deg, #f4efff, #ffffff);
  color: var(--color-primary);
  box-shadow: 0 12px 24px rgba(100, 40, 244, 0.12);
  font-weight: 500;
}

.sidebar-form .button-secondary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

body.sidebar-collapsed .sidebar {
  padding-inline: 14px;
}

body.sidebar-collapsed .sidebar-header {
  display: grid;
  justify-items: center;
}

body.sidebar-collapsed .brand-row {
  grid-template-columns: 1fr;
  justify-items: center;
}

body.sidebar-collapsed .brand-copy,
body.sidebar-collapsed .nav-heading,
body.sidebar-collapsed .nav-label {
  display: none;
}

body.sidebar-collapsed .sidebar-toggle svg {
  transform: rotate(180deg);
}

body.sidebar-collapsed .sidebar a {
  justify-content: center;
  padding-inline: 0;
}

body.sidebar-collapsed .sidebar-form .button-secondary {
  padding-inline: 0;
}

.main-panel {
  grid-column: 2;
  grid-row: 3;
  min-width: 0;
  max-height: calc(100dvh - 68px);
  overflow-y: auto;
  padding: 22px 32px 40px;
  background:
    linear-gradient(rgba(100, 40, 244, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 40, 244, 0.025) 1px, transparent 1px),
    #fbfcff;
  background-size: 72px 72px;
}

/* Las pantallas del operador no llevan barra superior, asi que el panel puede ocupar
   la pantalla entera; descontarle los 68px de una barra que no existe le dejaba una
   franja blanca abajo. Donde no se entienda :has() queda como estaba. */
.app-shell:not(:has(> .app-topbar)) > .main-panel {
  max-height: 100dvh;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.topbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.eyebrow {
  margin: 0 0 1px;
  color: var(--color-text-soft);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 2px;
  color: var(--color-text);
  font-size: clamp(1.45rem, 1.7vw, 1.8rem);
  font-weight: 700;
  line-height: 1.2;
}

h2 {
  color: var(--color-text);
  font-size: 1.24rem;
  font-weight: 600;
}

.tenant-chip {
  max-width: 320px;
  overflow-wrap: anywhere;
  border: 1px solid var(--color-border-soft);
  border-radius: 999px;
  padding: 8px 12px;
  background: var(--color-surface-raised);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  box-shadow: var(--shadow-neu-sm);
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.metric,
.work-panel {
  padding: 22px;
}

.metric {
  display: grid;
  gap: var(--space-2);
  position: relative;
  overflow: hidden;
}

.metric::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -34px;
  width: 96px;
  height: 96px;
  border-radius: 999px;
  border: 14px solid rgba(100, 40, 244, 0.13);
}

.metric strong {
  color: var(--color-text);
  font-size: 2rem;
  font-weight: 650;
  line-height: 1;
}

.metric:nth-child(2)::after {
  border-color: rgba(56, 189, 248, 0.18);
}

.metric:nth-child(3)::after {
  border-color: rgba(255, 159, 46, 0.18);
}

.notice {
  margin-bottom: var(--space-4);
  border: 1px solid #cde9d6;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background: #f7fff9;
  color: #166534;
  box-shadow: var(--shadow-neu-sm);
}

.notice-error {
  border-color: #f1c7c7;
  background: #fff7f7;
  color: var(--color-danger);
}

.error-panel {
  text-align: left;
}

.auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.auth-actions .button-link,
.auth-actions .button-secondary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.commerce-create {
  margin-bottom: var(--space-6);
}

.commerce-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.commerce-form button {
  align-self: end;
}

.table-wrap {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 980px;
}

.compact-table {
  min-width: 520px;
}

.data-table th,
.data-table td {
  border-bottom: 1px solid var(--color-border-soft);
  padding: 14px var(--space-3);
  text-align: left;
  vertical-align: top;
}

.data-table th {
  background: #f7faff;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  font-weight: 650;
  text-transform: uppercase;
}

.data-table small {
  display: block;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.data-table code {
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}

.empty-cell {
  color: var(--color-text-muted);
  text-align: center;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 var(--space-3);
  background: var(--color-surface-raised);
  color: var(--color-text);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-neu-sm);
  font-weight: 600;
}

.table-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: var(--space-2);
  min-width: 360px;
}

.table-form label {
  font-size: 0.8rem;
}

.table-form input {
  min-height: 38px;
  padding: 8px 10px;
}

.inline-form {
  min-width: 120px;
}

.module-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.85fr) minmax(520px, 1.15fr);
  gap: var(--space-6);
  align-items: start;
}

.forms-module {
  grid-template-columns: minmax(320px, 0.65fr) minmax(540px, 1.35fr);
}

.appointments-module {
  grid-template-columns: minmax(340px, 0.7fr) minmax(620px, 1.3fr);
}

.agenda-dashboard {
  display: grid;
  gap: var(--space-5);
}

.agenda-commandbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.agenda-date-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.agenda-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr)) minmax(240px, 1.2fr);
  gap: var(--space-3);
}

.agenda-link-card {
  display: grid;
  gap: 4px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-neu-sm);
}

.agenda-link-card span,
.agenda-link-card small {
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

.agenda-link-card small {
  overflow-wrap: anywhere;
}

.agenda-board-panel {
  overflow: hidden;
}

.agenda-calendar-scroll {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: #f8faff;
}

.agenda-calendar-grid {
  display: grid;
  grid-template-columns: 78px repeat(var(--agenda-columns), minmax(220px, 1fr));
  min-width: max(100%, calc(78px + (var(--agenda-columns) * 220px)));
}

.agenda-week-grid {
  grid-template-columns: 78px repeat(7, minmax(190px, 1fr));
  min-width: max(100%, calc(78px + (7 * 190px)));
}

.agenda-calendar-head,
.agenda-calendar-time,
.agenda-calendar-cell {
  border-right: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
}

.agenda-calendar-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  min-height: 64px;
  align-content: center;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
}

.agenda-calendar-head small {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.78rem;
}

.agenda-calendar-head span {
  display: inline-grid;
  min-width: 30px;
  min-height: 30px;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  color: var(--color-primary);
  box-shadow: var(--shadow-neu-sm);
  font-weight: 800;
}

.agenda-calendar-time {
  position: sticky;
  left: 0;
  z-index: 1;
  display: grid;
  min-height: 48px;
  place-items: start center;
  padding-top: 6px;
  background: #f8faff;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.agenda-calendar-time.agenda-calendar-head {
  z-index: 3;
  place-items: center;
  padding: 12px;
}

.agenda-calendar-cell {
  min-height: 40px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.62);
}

.agenda-calendar-cell.is-available {
  background: rgba(255, 255, 255, 0.9);
}

.agenda-calendar-cell.is-closed {
  background: repeating-linear-gradient(
    -45deg,
    rgba(148, 163, 184, 0.09),
    rgba(148, 163, 184, 0.09) 8px,
    rgba(248, 250, 252, 0.7) 8px,
    rgba(248, 250, 252, 0.7) 16px
  );
}

.agenda-calendar-cell.is-empty span {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 30px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.42);
}

.agenda-calendar-event {
  z-index: 2;
  min-height: 0;
  padding: 2px 7px;
  pointer-events: auto;
}

.agenda-calendar-event .appointment-card {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.agenda-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-2);
}

.agenda-lane {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  min-height: 360px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: #f8faff;
}

.agenda-lane header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-soft);
}

.agenda-lane header small,
.appointment-card small,
.appointment-card p {
  display: block;
  color: var(--color-text-muted);
}

.agenda-lane header span {
  display: inline-grid;
  min-width: 30px;
  min-height: 30px;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  color: var(--color-primary);
  box-shadow: var(--shadow-neu-sm);
  font-weight: 700;
}

.agenda-empty-slot {
  display: grid;
  min-height: 120px;
  place-items: center;
  border: 1px dashed var(--color-border-soft);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
}

.next-lane-card {
  display: grid;
  gap: 6px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--shadow-neu-sm);
}

.next-lane-card.has-next {
  border-left: 4px solid var(--color-primary);
}

.next-lane-card span,
.next-lane-card small {
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

.next-lane-card .button-link {
  justify-self: start;
  margin-top: 4px;
}

.appointment-card {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  border: 1px solid var(--color-border-soft);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: #fff;
  box-shadow: var(--shadow-neu-sm);
}

/* Un color por estado. Antes solo confirmada y cancelada se distinguian, y "cancelada"
   y "no asistio" compartian el rojo aunque no signifiquen lo mismo: una libera la hora
   por acuerdo y la otra es una hora perdida. La glosa de al lado los nombra, porque el
   color solo no sirve a quien no distingue los tonos. */
.appointment-card.status-scheduled { border-left-color: #3b82f6; }
.appointment-card.status-confirmed { border-left-color: #0ca678; }
.appointment-card.status-arrived { border-left-color: #7c3aed; }
.appointment-card.status-completed { border-left-color: #64748b; }
.appointment-card.status-pending_payment { border-left-color: #f59e0b; }
.appointment-card.status-no_show { border-left-color: #e8590c; }
.appointment-card.status-cancelled { border-left-color: #e03131; }

.appointment-card.status-cancelled,
.appointment-card.status-no_show {
  opacity: 0.72;
}

.agenda-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
}

.agenda-legend li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding-left: 12px;
  border-left: 4px solid var(--color-primary);
}

.agenda-legend strong {
  color: var(--color-text);
  font-weight: 650;
  white-space: nowrap;
}

.agenda-legend span {
  color: var(--color-text-muted);
}

.agenda-legend .status-scheduled { border-left-color: #3b82f6; }
.agenda-legend .status-confirmed { border-left-color: #0ca678; }
.agenda-legend .status-arrived { border-left-color: #7c3aed; }
.agenda-legend .status-completed { border-left-color: #64748b; }
.agenda-legend .status-pending_payment { border-left-color: #f59e0b; }
.agenda-legend .status-no_show { border-left-color: #e8590c; }
.agenda-legend .status-cancelled { border-left-color: #e03131; }

/* Un horario bloqueado. Rojo y con trama: en la grilla semanal tiene que leerse como
   "aca no" de un vistazo, distinto de una cita y distinto de un hueco libre. */
.appointment-card.es-bloqueo {
  border-color: rgba(224, 49, 49, 0.35);
  border-left-color: #e03131;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(224, 49, 49, 0.07),
      rgba(224, 49, 49, 0.07) 6px,
      rgba(255, 245, 245, 0.95) 6px,
      rgba(255, 245, 245, 0.95) 12px
    );
  color: #a02020;
  gap: 2px;
}

.appointment-card.es-bloqueo .appointment-card-time,
.appointment-card.es-bloqueo .card-professional {
  color: #c92a2a;
}

.appointment-card-time {
  color: var(--color-primary);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.appointment-card p {
  margin: 6px 0 0;
}

.appointment-card-foot {
  display: grid;
  gap: var(--space-2);
}

.appointment-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.appointment-card-actions .button-link {
  min-height: 34px;
  padding: 7px 10px;
}

.appointment-card-actions .icon-button {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
}

.appointment-card .table-form {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
}

.appointment-card .appointment-status-form {
  gap: 6px;
}

.appointment-card .appointment-status-form label {
  font-size: 0.72rem;
}

.appointment-availability-trigger {
  display: flex;
  justify-content: flex-start;
}

.appointment-availability-panel {
  display: grid;
  gap: var(--space-3);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: #fff;
  box-shadow: var(--shadow-neu-sm);
}

.appointment-availability-panel[hidden] {
  display: none;
}

.appointment-availability-days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
  gap: var(--space-3);
}

.appointment-availability-day {
  display: grid;
  gap: var(--space-3);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  background: var(--color-surface-raised);
}

.appointment-availability-day header {
  display: grid;
  gap: 2px;
}

.appointment-availability-day small {
  color: var(--color-text-muted);
}

.appointment-availability-slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-height: 38px;
  align-items: center;
}

.appointment-slot-button {
  min-height: 36px;
  border: 1px solid var(--color-border-soft);
  border-radius: 999px;
  padding: 7px 11px;
  background: #fff;
  color: var(--color-primary);
  box-shadow: var(--shadow-neu-sm);
  font-weight: 700;
  cursor: pointer;
}

.appointment-slot-button:hover,
.appointment-slot-button:focus-visible {
  border-color: var(--color-primary);
  outline: none;
}

.next-appointment-card {
  grid-column: 1 / -1;
}

.next-appointment-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.next-appointment-summary div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: var(--color-surface-raised);
}

.next-appointment-summary span,
.next-appointment-summary small {
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

.agenda-side-grid,
.public-booking-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.agenda-professional-switcher {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: 2px;
}

.professional-switch,
.agenda-professional-focus {
  display: grid;
  gap: 3px;
  min-width: 180px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-neu-sm);
  color: var(--color-text);
  text-decoration: none;
}

.professional-switch small,
.agenda-professional-focus span,
.agenda-professional-focus small {
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

.professional-switch.is-active {
  border-color: rgba(99, 43, 255, 0.45);
  color: var(--color-primary);
  background: rgba(99, 43, 255, 0.07);
}

.catalog-module,
.sales-module {
  grid-template-columns: minmax(340px, 0.72fr) minmax(620px, 1.28fr);
}

/* Su tabla lleva tramos, dias y asignaciones: en la columna angosta del perfil cada
   fila se partia en cuatro lineas. Ocupa el ancho completo. */
.profile-wide-panel {
  grid-column: 1 / -1;
}

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.patient-form {
  display: grid;
  gap: var(--space-4);
}

.patient-form fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: #fcfdff;
}

.patient-form legend {
  padding: 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.patient-form button {
  align-self: end;
}

.compact-form fieldset {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Eran dos columnas fijas de cuando habia dos tarjetas; con cuatro quedaban en un
   cuadrado y media pantalla vacia al lado. Se acomodan solas segun el ancho. */
.patient-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.patient-metric {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-neu-sm);
}

.patient-metric span,
.patient-metric small {
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

.patient-metric strong {
  font-size: 1.6rem;
  line-height: 1;
}

.patient-list-panel {
  margin-bottom: var(--space-6);
}

.patient-create-drawer {
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: #fcfdff;
  box-shadow: var(--shadow-neu-sm);
}

.patient-create-drawer .section-head {
  margin-bottom: var(--space-3);
}

.modal-open {
  overflow: hidden;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: start center;
  overflow-y: auto;
  padding: 42px 18px;
  background: rgba(23, 22, 46, 0.34);
  backdrop-filter: blur(10px);
}

.modal-backdrop[hidden] {
  display: none;
}

.modal-panel {
  width: min(100%, 920px);
  max-height: calc(100dvh - 84px);
  overflow-y: auto;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  background: var(--color-surface-raised);
  box-shadow: 0 28px 70px rgba(23, 22, 46, 0.22);
}

.patient-list-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.patient-list-controls label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.patient-list-controls select {
  width: auto;
  min-width: 86px;
}

.patient-list-controls button {
  min-width: 0;
  min-height: 38px;
  padding: 8px 16px;
}

.patients-table {
  min-width: 880px;
}

.patients-table td:nth-child(5),
.patients-table td:last-child {
  white-space: nowrap;
}

.treatment-list-panel {
  margin-bottom: var(--space-6);
}

.treatments-table {
  min-width: 1060px;
}

.treatment-session-modal {
  width: min(100%, 1180px);
}

.treatment-session-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.85fr) minmax(420px, 1.15fr);
  gap: var(--space-5);
  align-items: start;
}

.session-progress-strip {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px var(--space-3);
  align-items: center;
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: #fff;
  box-shadow: var(--shadow-neu-sm);
}

.session-progress-strip span,
.session-progress-strip small {
  color: var(--color-text-muted);
}

.session-progress-strip strong {
  font-size: 1.25rem;
}

.session-progress-strip small {
  grid-column: 1 / -1;
}

.session-detail-stack {
  display: grid;
  gap: var(--space-3);
}

.session-detail-card {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-neu-sm);
}

.session-detail-card summary {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
}

.session-detail-card summary::-webkit-details-marker {
  display: none;
}

.session-detail-card summary small {
  display: block;
  margin-top: 3px;
  color: var(--color-text-muted);
}

.session-detail-list {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--color-border-soft);
}

.session-detail-list div {
  display: grid;
  grid-template-columns: minmax(120px, 0.35fr) minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-soft);
}

.session-detail-list div:last-child {
  border-bottom: 0;
}

.session-detail-list dt {
  color: var(--color-text-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.session-detail-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.treatment-total-box {
  display: grid;
  gap: 4px;
  align-self: stretch;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: #fff;
  box-shadow: var(--shadow-neu-sm);
}

.treatment-total-box span {
  color: var(--color-text-muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.treatment-total-box strong {
  color: var(--color-primary);
  font-size: 1.35rem;
  line-height: 1;
}

.discount-service-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  background: #fff;
}

.discount-service-list > span {
  grid-column: 1 / -1;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  color: var(--color-text-muted);
}

.pagination-bar div {
  display: flex;
  gap: var(--space-2);
}

.button-link.is-disabled {
  opacity: 0.48;
  pointer-events: none;
}

.button-link-whatsapp {
  color: #087f5b;
}

.table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.table-actions .button-link {
  cursor: pointer;
}

.inline-delete-form {
  margin: 0;
}

/* Buscador del encabezado: encontrar a alguien por RUT sin bajar al listado. */
.topbar-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.topbar-search input {
  min-width: 220px;
}

/* Cada fecha asignada con su boton de quitar al lado, en una sola linea. */
.assignment-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.assignment-line + .assignment-line {
  margin-top: 6px;
}

.danger-link {
  color: #d6336c;
}

.check-field {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: var(--space-2);
}

.check-field input {
  min-height: auto;
  width: 18px;
  height: 18px;
}

.check-field span {
  display: grid;
  gap: 2px;
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.permission-grid .check-field {
  align-items: flex-start;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  background: #fff;
}

.permission-grid small {
  color: var(--color-text-muted);
}

.role-editor {
  display: grid;
  gap: var(--space-4);
}

.span-2 {
  grid-column: 1 / -1;
}

.empty-state {
  display: grid;
  min-height: 220px;
  place-items: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  text-align: center;
}

.button-link {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-3);
  background: #fff;
  color: var(--color-primary);
  font-weight: 700;
  box-shadow: var(--shadow-neu-sm);
}

.icon-button {
  display: inline-grid;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  place-items: center;
  padding: 0;
  line-height: 1;
}

.icon-button svg {
  display: block;
  width: 18px;
  height: 18px;
}

.profile-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(420px, 1.28fr);
  gap: var(--space-6);
}

.profile-timeline {
  grid-column: 1 / -1;
}

.profile-tabs-panel {
  grid-column: 1 / -1;
}

.profile-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5, 20px);
  overflow-x: auto;
  padding-bottom: var(--space-2);
}

.profile-tab {
  flex: 0 0 auto;
  min-height: 38px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  background: var(--color-surface-raised);
  color: var(--color-text-muted);
  box-shadow: var(--shadow-neu-sm);
}

.profile-tab.is-active {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border-color: transparent;
}

.profile-tab-panel {
  display: grid;
  gap: var(--space-4);
}

.profile-tab-panel[hidden] {
  display: none;
}

.patient-payment-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.patient-payment-summary .summary-tile {
  margin: 0;
  padding: var(--space-3);
}

.patient-payment-summary .summary-tile strong {
  font-size: 1.25rem;
}

.payment-profile-section {
  display: grid;
  gap: var(--space-3);
}

.section-head.compact {
  align-items: end;
  margin-bottom: 0;
}

.section-head.compact h3 {
  margin: 0;
  font-size: 1rem;
}

.compact-payment-form {
  min-width: 420px;
}

/* Las notas del paciente pasaron de ser un campo de texto que se pisaba a una bitacora
   firmada. La nota fija de la ficha sigue arriba, como aviso permanente. */
.comment-pinned {
  display: grid;
  gap: 6px;
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-border-soft);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background: #fcfdff;
}

.comment-pinned-label {
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.comment-pinned p,
.comment-item p {
  margin: 0;
  overflow-wrap: anywhere;
}

.comment-form {
  margin-bottom: var(--space-5);
}

.comment-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.comment-item {
  display: grid;
  gap: 6px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-raised);
}

.comment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.comment-meta strong {
  color: var(--color-text);
}

.comment-meta .inline-delete-form {
  margin-left: auto;
}

.detail-list {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
}

.detail-list div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-soft);
}

.detail-list dt {
  color: var(--color-text-muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.detail-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.summary-tile {
  display: grid;
  gap: 5px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: #fff;
  box-shadow: var(--shadow-neu-sm);
}

.summary-tile span,
.summary-tile small {
  color: var(--color-text-muted);
}

.summary-tile strong {
  font-size: 1.5rem;
}

.photo-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.photo-upload-form {
  margin: 0;
}

.photo-upload-form input[type="file"] {
  display: none;
}

.photo-before {
  color: #2f6df6;
}

.photo-after {
  color: #14a300;
}

.photo-neutral {
  color: var(--color-text);
}

.photo-section {
  display: grid;
  gap: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
  padding-top: var(--space-5);
}

.photo-section h3 {
  margin: 0;
  font-size: 1rem;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-4);
}

.photo-card {
  display: grid;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-neu-sm);
}

.photo-thumb {
  position: relative;
  overflow: hidden;
  background: #eef2f7;
}

.photo-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.photo-thumb span {
  position: absolute;
  top: 12px;
  left: 12px;
  border-radius: 999px;
  padding: 7px 12px;
  background: #75808d;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 800;
}

.photo-card.is-before .photo-thumb span {
  background: #4c8dff;
}

.photo-card.is-after .photo-thumb span {
  background: #28bd8b;
}

.photo-card figcaption {
  display: grid;
  gap: 7px;
  padding: var(--space-3);
  font-size: 0.86rem;
}

.photo-card small {
  color: var(--color-text-muted);
}

.photo-center-action {
  display: flex;
  justify-content: center;
  border-top: 1px solid var(--color-border-soft);
  padding-top: var(--space-5);
}

.photo-compare-button {
  color: #f08c00;
}

.photo-modal-panel {
  width: min(980px, calc(100vw - 32px));
}

.photo-compare-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.photo-compare-controls label,
.photo-zoom-control {
  display: grid;
  gap: 5px;
}

.photo-compare-controls span {
  color: var(--color-primary);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.photo-compare-controls label:nth-child(2) span {
  color: #14a300;
}

.photo-zoom-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.photo-zoom-control {
  grid-template-columns: auto minmax(160px, 1fr) 56px;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-3);
  background: #eef3f8;
}

.photo-zoom-control span {
  color: var(--color-primary);
  font-size: 0.82rem;
  font-weight: 800;
}

.photo-zoom-control span::after {
  content: " +";
  color: var(--color-text-muted);
  font-weight: 800;
}

.photo-zoom-control.after span {
  color: #14a300;
}

.photo-zoom-control input {
  width: 100%;
  min-height: 24px;
}

.photo-zoom-control strong {
  color: var(--color-text);
  font-size: 0.8rem;
  text-align: right;
}

.compare-help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.compare-help p {
  margin: 0;
  font-size: 0.78rem;
}

.compare-stage {
  --split: 50%;
  position: relative;
  overflow: hidden;
  min-height: 540px;
  border-radius: var(--radius-md);
  background: #eef3f8;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.compare-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #eef3f8;
}

.compare-layer.after {
  z-index: 1;
}

.compare-layer.before {
  z-index: 2;
}

.compare-layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform;
}

.compare-stage.is-panning {
  cursor: grabbing;
}

.compare-handle {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: 48px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--color-text);
  transform: translateX(-50%);
  cursor: ew-resize;
  touch-action: none;
}

.compare-handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.compare-handle span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  font-weight: 800;
  pointer-events: none;
  transform: translate(-50%, -50%);
  box-shadow: var(--shadow-neu-sm);
}

.compare-stage.is-splitting,
.compare-stage.is-splitting .compare-handle {
  cursor: ew-resize;
}

.compare-label {
  position: absolute;
  z-index: 6;
  top: 18px;
  border-radius: 999px;
  padding: 8px 13px;
  background: rgba(16, 18, 38, 0.55);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
}

.compare-label.before {
  left: 18px;
}

.compare-label.after {
  right: 18px;
}

.compare-slider {
  width: 100%;
  margin-top: var(--space-3);
}

.photo-draw-panel {
  width: min(720px, calc(100vw - 32px));
}

.draw-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.draw-toolbar label {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--color-border-soft);
  border-radius: 999px;
  padding: 0 var(--space-3);
  background: #fff;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.draw-toolbar input[type="color"] {
  width: 34px;
  height: 30px;
  min-height: 30px;
  padding: 0;
}

.draw-stage {
  position: relative;
  overflow: hidden;
  border: 10px solid #eef2f7;
  border-radius: var(--radius-md);
  background: #eef2f7;
}

.draw-stage img,
.draw-stage canvas {
  display: block;
  width: 100%;
}

.draw-stage canvas {
  position: absolute;
  inset: 0;
  height: 100%;
  touch-action: none;
}

.timeline-list {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.timeline-list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.timeline-list small {
  display: block;
  color: var(--color-text-muted);
}

.timeline-dot {
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--color-primary);
  box-shadow: 0 0 0 5px rgba(100, 40, 244, 0.12);
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-4);
}

.template-card {
  display: grid;
  min-height: 190px;
  align-content: start;
  gap: var(--space-3);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: #fff;
  box-shadow: var(--shadow-neu-sm);
}

.template-card h3,
.builder-section h3 {
  margin: 0;
  font-size: 1.05rem;
}

.template-card p {
  margin: 0;
  color: var(--color-text-muted);
}

.template-card small,
.builder-section span,
.field-list small,
.field-list span {
  color: var(--color-text-soft);
  font-size: 0.78rem;
  font-weight: 700;
}

.builder-grid {
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(320px, 390px);
  gap: var(--space-6);
  align-items: start;
}

.record-grid {
  grid-template-columns: minmax(280px, 0.45fr) minmax(520px, 1fr);
}

.cash-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.72fr) minmax(560px, 1.28fr);
  gap: var(--space-6);
  align-items: start;
}

.builder-sections,
.builder-tools {
  min-width: 0;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.chip-list span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border-soft);
  border-radius: 999px;
  padding: 0 var(--space-3);
  background: #fff;
  color: var(--color-text-muted);
  font-size: 0.83rem;
  font-weight: 700;
}

.builder-section-list {
  display: grid;
  gap: var(--space-4);
}

.builder-section {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: #fcfdff;
}

.builder-section header {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.builder-section p {
  margin: 4px 0 0;
}

.field-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.field-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 78px;
  align-items: start;
  gap: var(--space-3);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: 14px;
  background: #fff;
}

.field-span-1 {
  grid-column: span 1;
}

.field-span-2 {
  grid-column: span 2;
}

.field-span-3 {
  grid-column: 1 / -1;
}

.field-card-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.field-list > li > span,
.field-list-actions > span {
  max-width: 150px;
  overflow-wrap: anywhere;
  text-align: right;
}

.field-list-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.field-span-1 .field-list-actions,
.field-span-2 .field-list-actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
}

.reorder-actions {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.inline-reorder-form {
  margin: 0;
}

.field-layout-form {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.field-layout-form select {
  min-height: 34px;
  max-width: 118px;
  padding: 0 8px;
}

.compact-action {
  min-height: 34px;
  padding-inline: 10px;
  font-size: 0.78rem;
}

.icon-button.compact {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  border-radius: 10px;
  font-weight: 900;
}

.section-empty {
  margin: 0;
}

.builder-tools h2 {
  margin: 0 0 var(--space-4);
  font-size: 1rem;
}

.tool-form {
  display: grid;
  gap: var(--space-3);
}

.consent-issue-form {
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: end;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-neu-sm);
}

.consent-issue-form button {
  min-height: 44px;
}

.tool-form button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

.tool-divider {
  height: 1px;
  margin: var(--space-6) 0;
  background: var(--color-border-soft);
}

.empty-state.slim {
  min-height: 150px;
  padding: var(--space-4);
}

.record-form-panel fieldset {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: flex-end;
}

.record-actions button {
  min-width: 180px;
}

.choice-field {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  margin: 0;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  background: #fff;
}

.choice-field legend {
  padding: 0 var(--space-2);
}

.choice-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.choice-list label {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 8px;
  color: var(--color-text-muted);
  font-weight: 700;
}

.choice-detail-field {
  grid-template-columns: 1fr;
}

.field-info-text {
  border: 1px solid rgba(20, 184, 166, 0.22);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  background: rgba(20, 184, 166, 0.08);
}

.field-info-text strong {
  display: block;
  margin-bottom: 6px;
}

.field-info-text p {
  margin: 0;
  color: var(--color-text-muted);
}

.field-separator {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-3);
  align-items: center;
  color: var(--color-text-muted);
  font-weight: 900;
  text-transform: uppercase;
}

.field-separator span {
  height: 1px;
  background: var(--color-border-soft);
}

.consent-document {
  min-height: 420px;
}

.document-body {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: #fcfdff;
  color: var(--color-text);
  line-height: 1.7;
}

.signature-pad {
  display: grid;
  gap: var(--space-2);
}

.signature-pad-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--color-text);
  font-weight: 700;
}

.signature-pad canvas {
  width: 100%;
  min-height: 190px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background:
    linear-gradient(transparent calc(100% - 42px), rgba(16, 18, 38, 0.08) calc(100% - 41px)),
    #fff;
  box-shadow: inset 5px 5px 12px rgba(137, 148, 171, 0.16), inset -5px -5px 12px rgba(255, 255, 255, 0.9);
  touch-action: none;
}

.signature-pad.has-error canvas {
  border-color: #ef476f;
}

.public-consent-page {
  min-height: 100vh;
  padding: var(--space-6);
  background: var(--color-app-bg);
}

.public-consent-shell {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.public-consent-head {
  margin-bottom: var(--space-5);
}

.public-booking-page {
  min-height: 100dvh;
  padding: var(--space-6);
  background:
    linear-gradient(rgba(100, 40, 244, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 40, 244, 0.025) 1px, transparent 1px),
    var(--color-app-bg);
  background-size: 72px 72px;
}

.public-booking-shell {
  width: min(1120px, 100%);
  margin: 0 auto;
}

.public-booking-hero {
  display: flex;
  align-items: flex-end;
  min-height: 220px;
  margin-bottom: var(--space-5);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: clamp(24px, 5vw, 48px);
  background: #fff;
  box-shadow: var(--shadow-neu);
}

.public-booking-hero h1 {
  max-width: 760px;
}

.public-booking-hero p {
  max-width: 620px;
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

.booking-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: var(--space-2);
}

.booking-slot {
  position: relative;
  display: block;
}

.booking-slot input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.booking-slot span {
  display: grid;
  min-height: 46px;
  place-items: center;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-text);
  box-shadow: var(--shadow-neu-sm);
  font-weight: 700;
  cursor: pointer;
}

.booking-slot input:checked + span {
  border-color: rgba(100, 40, 244, 0.42);
  background: rgba(100, 40, 244, 0.08);
  color: var(--color-primary);
}

.booking-wizard-page {
  --booking-primary: #5b5bd6;
  --booking-primary-strong: #3f3ca8;
  --booking-accent: #2fb8a0;
  --booking-ink: #202037;
  --booking-soft: #eef0ff;
  --booking-surface: #fbfcff;
  padding: 0;
  background: #f6f7fb;
}

.booking-wizard-shell {
  width: min(1180px, calc(100% - 40px));
  padding-bottom: var(--space-6);
}

.booking-wizard-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 68px;
  margin-inline: calc((100vw - 100%) / -2);
  padding: 0 max(20px, calc((100vw - 1180px) / 2));
  border-bottom: 1px solid var(--color-border-soft);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.06);
  backdrop-filter: blur(16px);
}

.booking-brand {
  display: grid;
  gap: 2px;
  color: var(--booking-primary-strong);
}

.booking-brand strong {
  font-size: 1.2rem;
  letter-spacing: 0;
}

.booking-brand span,
.booking-wizard-header nav span,
.booking-wizard-header nav a {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
}

.booking-wizard-header nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 28px);
  white-space: nowrap;
}

/* Pestanas que todavia no existen: se ven como rotulos, no como acciones.
   Antes compartian estilo con el enlace real y el paciente las pulsaba en vano. */
.booking-wizard-header nav .is-unavailable {
  font-weight: 500;
  opacity: 0.45;
  cursor: default;
}

.booking-wizard-header nav .is-active {
  color: var(--booking-primary);
  border-bottom: 4px solid var(--booking-primary);
  padding-block: 21px 17px;
}

.booking-step-head {
  padding: var(--space-5) 0 var(--space-4);
}

.booking-step-head h1 {
  margin: 0;
  color: var(--booking-ink);
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.booking-progress {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.booking-progress::before {
  position: absolute;
  top: 20px;
  right: 7%;
  left: 7%;
  height: 2px;
  background: #d7dcdf;
  content: "";
}

.booking-progress li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
  text-align: center;
}

.booking-progress span {
  z-index: 1;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 999px;
  background: #d7dcdf;
  color: #fff;
  font-weight: 800;
}

.booking-progress .is-active span,
.booking-progress .is-done span {
  background: var(--booking-primary);
}

.booking-progress small {
  max-width: 128px;
  font-size: 0.76rem;
  font-weight: 700;
}

.booking-card {
  margin-top: -2px;
  border: 1px solid var(--color-border-soft);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(17, 24, 39, 0.08);
}

.booking-step-card {
  padding: clamp(22px, 4vw, 48px);
}

.booking-card-intro {
  max-width: 720px;
  margin: 0 auto var(--space-5);
  text-align: center;
}

.booking-card-intro.align-left {
  margin-inline: 0;
  text-align: left;
}

.booking-card-intro h2 {
  color: var(--booking-primary-strong);
  font-size: clamp(1.35rem, 2.5vw, 2rem);
}

.booking-card-intro p {
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

.booking-step-form {
  max-width: 920px;
  margin: 0 auto;
}

.booking-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.booking-back-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--booking-primary);
  font-weight: 800;
  text-decoration: none;
}

.booking-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--space-4);
}

.booking-option-card {
  display: grid;
  min-height: 172px;
  align-content: center;
  justify-items: center;
  gap: var(--space-2);
  border: 1px solid #dadcf8;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--booking-soft) 0 58%, #fff 58% 100%);
  color: var(--booking-ink);
  text-align: center;
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.booking-option-card:hover,
.booking-option-card:focus-visible {
  border-color: var(--booking-primary);
  box-shadow: 0 12px 26px rgba(91, 91, 214, 0.16);
  transform: translateY(-2px);
}

.booking-option-mark {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border: 2px solid var(--booking-primary);
  border-radius: 18px;
  color: var(--booking-primary);
  font-size: 1.6rem;
  font-weight: 900;
}

.booking-option-card small {
  color: var(--color-text-muted);
  font-weight: 700;
}

.booking-segment {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  border-radius: 999px;
  padding: 6px;
  background: #eef0f1;
}

.booking-segment span {
  display: grid;
  min-height: 44px;
  place-items: center;
  border-radius: 999px;
  color: var(--color-text-muted);
  font-weight: 800;
}

.booking-segment .is-active {
  background: #fff;
  color: var(--booking-ink);
  box-shadow: 0 6px 16px rgba(17, 24, 39, 0.08);
}

.booking-search {
  display: grid;
  gap: 6px;
  margin-bottom: var(--space-4);
  color: var(--booking-primary);
  font-weight: 800;
}

.booking-search input {
  min-height: 54px;
  border: 1px solid #cfd8dc;
  border-radius: 8px;
  padding: 0 16px;
  font: inherit;
}

.booking-professional-list {
  display: grid;
  gap: var(--space-3);
}

.booking-professional-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 82px;
  border: 1px solid var(--color-border-soft);
  border-radius: 14px;
  padding: var(--space-3);
  background: #fff;
  color: var(--color-text);
  text-decoration: none;
  box-shadow: var(--shadow-neu-sm);
}

.booking-professional-card:hover,
.booking-professional-card:focus-visible {
  border-color: var(--booking-primary);
}

.booking-professional-card.is-active {
  border-color: var(--booking-primary);
  background: var(--booking-soft);
}

.booking-professional-initials {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: var(--booking-soft);
  color: var(--booking-primary);
  font-weight: 900;
}

.booking-professional-card small {
  display: block;
  color: var(--color-text-muted);
}

.booking-selection-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  border-top: 1px dashed #cbcffa;
  border-bottom: 1px dashed #cbcffa;
  padding: var(--space-3) 0;
}

.booking-selection-summary span {
  width: 14px;
}

.booking-date-strip {
  display: grid;
  grid-auto-columns: minmax(72px, 1fr);
  grid-auto-flow: column;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-3);
}

.booking-date-card {
  display: grid;
  min-height: 90px;
  place-items: center;
  border: 1px solid #dfe2f4;
  border-radius: 999px;
  background: #fff;
  color: var(--booking-ink);
  text-decoration: none;
}

.booking-date-card small,
.booking-date-card span {
  color: var(--color-text-muted);
  font-weight: 800;
}

.booking-date-card strong {
  font-size: 1.35rem;
}

.booking-date-card.is-active {
  border: 3px solid var(--booking-primary);
  color: var(--booking-primary);
}

.booking-time-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.booking-slot-button {
  display: grid;
  min-height: 48px;
  place-items: center;
  border: 1px solid #cbcffa;
  border-radius: 999px;
  background: #fff;
  color: var(--booking-primary);
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(91, 91, 214, 0.12);
}

.booking-confirm-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-5);
  align-items: center;
  margin-bottom: var(--space-5);
}

.booking-calendar-badge {
  display: grid;
  width: 170px;
  min-height: 170px;
  place-items: center;
  border: 12px solid #d7dcdf;
  border-radius: 22px;
  color: #6b7280;
}

.booking-calendar-badge strong {
  color: #6b7280;
  font-size: 3.2rem;
  line-height: 1;
}

.booking-calendar-badge small {
  font-size: 1.1rem;
  font-weight: 900;
}

.booking-summary {
  display: grid;
  gap: var(--space-2);
}

.booking-summary div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-3);
}

.booking-summary dt {
  color: var(--color-text-muted);
  font-weight: 800;
  text-align: right;
}

.booking-summary dd {
  margin: 0;
  color: #4b5563;
  font-weight: 700;
}

.booking-payment-box {
  border: 1px solid rgba(91, 91, 214, 0.18);
  border-radius: 18px;
  background: #f7f8ff;
  padding: 16px;
}

.booking-payment-box strong {
  color: var(--booking-primary-strong);
}

.booking-payment-box p {
  margin: 6px 0 12px;
  color: #66708a;
}

.booking-payment-box dl,
.booking-payment-box dd {
  margin: 0;
}

.booking-payment-box dt {
  font-size: 0.78rem;
  color: #8a93ab;
  text-transform: uppercase;
}

.booking-payment-box dd {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--booking-ink);
}

.booking-transfer-table {
  width: 100%;
  margin-top: 14px;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
}

.booking-transfer-table th,
.booking-transfer-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(91, 91, 214, 0.12);
  text-align: left;
}

.booking-transfer-table th {
  width: 38%;
  color: #687189;
  font-size: 0.82rem;
}

.booking-transfer-table td {
  color: var(--booking-ink);
  font-weight: 800;
}

.booking-transfer-empty {
  margin: 12px 0 0;
  color: #8a5a00;
}

.booking-terms {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-weight: 700;
}

.booking-terms input {
  width: 22px;
  height: 22px;
  accent-color: var(--booking-primary);
}

/* Pagar al reservar es opcional fuera de la teleconsulta: los datos de transferencia y
   el comprobante aparecen solo si se marca la casilla. Donde no se entienda :has()
   quedan siempre a la vista, que no rompe nada porque adjuntar no es obligatorio. */
.booking-pay-check {
  margin-top: var(--space-2);
}

.public-booking-form:has(.booking-pay-toggle) .booking-pay-block {
  display: none;
}

.public-booking-form:has(.booking-pay-toggle:checked) .booking-pay-block {
  display: block;
}

.availability-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-2);
}

.availability-days label {
  position: relative;
  display: grid;
  min-height: 46px;
  place-items: center;
  border: 1px solid var(--color-border-soft);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
}

/* Iba absoluto sin tamano y sin contenedor posicionado, asi que conservaba su ancho
   intrinseco y quedaba anclado a la pagina entera: al marcar un dia el navegador
   desplazaba el scroll hasta el, y aparecian barras y una franja blanca. Se recorta
   a un pixel dentro del label, que ahora si esta posicionado. */
.availability-days input {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  clip-path: inset(50%);
  pointer-events: none;
}

.availability-days label:has(input:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.availability-days label:has(input:checked) {
  border-color: rgba(100, 40, 244, 0.42);
  background: rgba(100, 40, 244, 0.08);
  color: var(--color-primary);
  font-weight: 800;
}

.availability-ranges {
  display: grid;
  gap: var(--space-2);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  background: rgba(255, 255, 255, 0.72);
}

.availability-range-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.pdf-body {
  background: #edf1f7;
}

.pdf-sheet {
  width: min(880px, calc(100% - 32px));
  margin: 24px auto;
  border-radius: var(--radius-md);
  padding: 34px;
  background: #fff;
  box-shadow: var(--shadow-neu-md);
}

.pdf-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.pdf-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
}

.pdf-meta div,
.pdf-signature {
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.pdf-meta dt {
  color: var(--color-text-muted);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.pdf-meta dd {
  margin: 4px 0 0;
  color: var(--color-text);
  font-weight: 700;
}

.pdf-document {
  margin-bottom: var(--space-5);
}

.pdf-signature h2 {
  margin-top: 0;
}

.pdf-signature-image {
  display: block;
  width: min(360px, 100%);
  max-height: 140px;
  object-fit: contain;
  border-bottom: 1px solid var(--color-border);
}

.pdf-signature-text {
  min-height: 80px;
  border-bottom: 1px solid var(--color-border);
  font-family: cursive;
  font-size: 1.4rem;
}

.clinical-pdf-sheet {
  border-top: 6px solid #0f766e;
}

.clinical-pdf-head h1 {
  margin-bottom: 6px;
}

.clinical-pdf-sections {
  display: grid;
  gap: var(--space-4);
}

.clinical-pdf-section {
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
}

.clinical-pdf-section header {
  padding: 12px 14px;
  background: #ecfdf5;
  border-bottom: 1px solid var(--color-border-soft);
}

.clinical-pdf-section h2 {
  margin: 0;
  color: #065f46;
  font-size: 0.98rem;
  text-transform: uppercase;
}

.clinical-pdf-section p {
  margin: 4px 0 0;
  color: var(--color-text-muted);
}

.clinical-pdf-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.clinical-pdf-field {
  min-width: 0;
  border-right: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
  padding: 11px 14px;
  overflow-wrap: anywhere;
}

.clinical-pdf-field strong {
  display: block;
  margin-bottom: 6px;
  color: var(--color-text);
  font-size: 0.78rem;
}

.clinical-pdf-field p {
  margin: 0;
  color: var(--color-text);
  line-height: 1.55;
  white-space: normal;
}

.clinical-pdf-info {
  border-bottom: 1px solid var(--color-border-soft);
  padding: 12px 14px;
  background: #f0fdfa;
}

.clinical-pdf-info strong {
  display: block;
  margin-bottom: 6px;
  color: #0f766e;
}

.clinical-pdf-info p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.55;
}

.clinical-pdf-separator {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border-soft);
  background: #f8fafc;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.clinical-pdf-signatures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
  margin-top: 64px;
}

.clinical-pdf-signatures span {
  display: block;
  border-bottom: 1px solid var(--color-border);
  min-height: 32px;
}

.clinical-pdf-signatures p {
  margin: 8px 0 0;
  color: var(--color-text-muted);
  text-align: center;
}

.date-filter {
  display: flex;
  align-items: end;
  gap: var(--space-2);
}

.date-filter input {
  min-width: 150px;
}

.appointment-status-form {
  display: flex;
  min-width: 0;
}

.appointment-status-form select {
  width: 100%;
  min-height: 32px;
  padding: 4px 8px;
  font-size: 0.82rem;
}

.teleconsultation-body {
  min-height: 100dvh;
  background: var(--color-bg);
}

.teleconsultation-shell {
  display: grid;
  grid-template-rows: auto minmax(520px, 1fr);
  min-height: 100dvh;
  gap: var(--space-4);
  padding: var(--space-4);
}

.teleconsultation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-neu-sm);
}

.teleconsultation-frame {
  min-height: 520px;
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-neu);
}

.dashboard-page {
  display: grid;
  align-content: start;
  gap: var(--space-5, 20px);
}

.dashboard-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.dashboard-hero h1 {
  margin-bottom: 8px;
}

.dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.dashboard-kpis {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  margin-bottom: 0;
}

.dashboard-metric {
  min-height: 138px;
  border-color: rgba(226, 232, 240, 0.92);
}

.dashboard-metric::after {
  width: 82px;
  height: 82px;
  border-width: 12px;
}

.dashboard-metric.tone-patients::after {
  border-color: rgba(56, 189, 248, 0.2);
}

.dashboard-metric.tone-treatments::after {
  border-color: rgba(18, 184, 166, 0.18);
}

.dashboard-metric.tone-payments::after {
  border-color: rgba(255, 159, 46, 0.2);
}

.dashboard-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.dashboard-next {
  grid-column: span 2;
  min-height: 220px;
}

.dashboard-wide {
  grid-column: span 2;
}

.dashboard-panel {
  display: grid;
  gap: var(--space-3);
  min-height: 260px;
}

.dashboard-panel-head,
.dashboard-next-grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.dashboard-panel-head h2,
.dashboard-next h2 {
  margin-bottom: 4px;
  font-size: 1.12rem;
}

.compact-link {
  min-height: 38px;
  padding: 7px 12px;
  font-size: 0.9rem;
}

.dashboard-next-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 0.85fr) auto;
  align-items: stretch;
}

.dashboard-next-grid strong {
  display: block;
  margin-top: var(--space-3);
  font-size: 1.1rem;
}

.dashboard-next-actions {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 150px;
}

.dashboard-next-actions .button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--color-text);
  background: #fff;
  box-shadow: var(--shadow-neu-sm);
  font-weight: 650;
}

.dashboard-mini-dl {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.dashboard-mini-dl div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--color-border-soft);
  border-radius: 14px;
  padding: 10px 12px;
  background: #fbfcff;
}

.dashboard-mini-dl dt {
  color: var(--color-text-soft);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.dashboard-mini-dl dd {
  margin: 0;
  color: var(--color-text);
  font-weight: 650;
}

.dashboard-list {
  display: grid;
  gap: 8px;
}

.two-col-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-row {
  min-height: 62px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--space-3);
  border: 1px solid var(--color-border-soft);
  border-radius: 14px;
  padding: 11px 12px;
  background: #fbfcff;
  box-shadow: var(--shadow-neu-sm);
}

.dashboard-row:hover {
  transform: translateY(-1px);
  border-color: rgba(100, 40, 244, 0.22);
}

/* El bloque sin clase es siempre el nombre con su detalle: el unico que debe
   estirarse y el unico al que le sirve romper linea. La hora, el monto, el codigo
   y la etiqueta de estado ocupan lo suyo y no se encogen. */
.dashboard-row > span:not([class]) {
  display: grid;
  flex: 1 1 150px;
  gap: 2px;
  min-width: 0;
}

.dashboard-row > span:not([class]) strong {
  overflow-wrap: anywhere;
}

.dashboard-row > .dashboard-time,
.dashboard-row > .dashboard-amount,
.dashboard-row > .dashboard-code,
.dashboard-row > .status-pill {
  flex: 0 0 auto;
}

.dashboard-row.lead-time > span:nth-child(2) strong,
.dashboard-row.lead-time > span:nth-child(2) small {
  overflow-wrap: anywhere;
}

.dashboard-row.stacked {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.dashboard-row strong,
.quick-action strong {
  display: block;
  font-weight: 700;
}

.dashboard-row small,
.quick-action small {
  display: block;
  margin-top: 3px;
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

.dashboard-time,
.dashboard-code,
.dashboard-amount {
  color: var(--color-primary);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dashboard-amount {
  color: var(--color-text);
  text-align: right;
}

.dashboard-progress {
  display: block;
  overflow: hidden;
  height: 9px;
  border-radius: 999px;
  background: #eef2f9;
}

.dashboard-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary), var(--color-mint));
}

.danger-status {
  color: #8f1d1d;
  border-color: #ffd7d7;
  background: #fff5f5;
}

.dashboard-empty {
  min-height: 140px;
}

.quick-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.quick-action {
  display: grid;
  min-height: 82px;
  align-content: center;
  border: 1px solid var(--color-border-soft);
  border-radius: 16px;
  padding: 14px;
  background: linear-gradient(145deg, #ffffff, #f8faff);
  box-shadow: var(--shadow-neu-sm);
}

.quick-action:hover {
  transform: translateY(-1px);
  color: var(--color-primary);
  border-color: rgba(100, 40, 244, 0.2);
}

@media (max-width: 1220px) {
  .dashboard-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-next,
  .dashboard-wide {
    grid-column: 1 / -1;
  }

  .dashboard-next-grid {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.85fr);
  }

  .dashboard-next-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    width: 100%;
    margin: 0;
    border-radius: 0;
  }

  /* Todo en la misma columna. Sin esto la barra superior y el panel siguen pidiendo
     la columna 2, el navegador crea una segunda columna implicita, y la lateral se
     queda con 32px mientras el contenido se sale por la derecha. */
  .app-shell > .sidebar,
  .app-shell > .app-topbar,
  .app-shell > .main-panel {
    grid-column: 1;
    grid-row: auto;
  }

  /* La lateral es una barra de una linea arriba del contenido: la marca a la
     izquierda y el boton del menu a la derecha. Cerrada no mide mas que eso. */
  .sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
    padding: 12px 16px;
  }

  /* La pagina entera se desplaza; un panel con su propio scroll dentro de otro que
     tambien se desplaza es incomodo de manejar con el pulgar. */
  .main-panel {
    max-height: none;
    overflow-y: visible;
  }

  .sidebar-header {
    align-items: center;
    margin-bottom: 0;
  }

  /* Cerrado no queda nada del menu: es el estado con el que arranca el telefono,
     y antes daba igual pincharlo porque abajo se devolvia todo a la vista. */
  body.sidebar-collapsed .sidebar nav,
  body.sidebar-collapsed .sidebar .sidebar-form {
    display: none;
  }

  /* Abierto cae la lista entera, en vertical y con sus rotulos: una tira horizontal
     de quince enlaces obliga a correrla a ciegas para encontrar uno. */
  .sidebar nav {
    gap: var(--space-4);
    margin-top: var(--space-4);
  }

  .sidebar .nav-group {
    gap: 4px;
  }

  .sidebar a {
    min-height: 44px;
  }

  .sidebar-form {
    margin-top: var(--space-4);
  }

  /* La flecha cae y sube en vez de correrse de lado: aca el menu se despliega
     hacia abajo, no se encoge hacia la izquierda. */
  .sidebar-toggle svg {
    transform: rotate(90deg);
  }

  body.sidebar-collapsed .sidebar-toggle svg {
    transform: rotate(-90deg);
  }

  /* El nombre completo del usuario dejaba el buscador en 62px de ancho. Las
     iniciales dicen lo mismo: con que cuenta se esta operando. */
  .app-topbar {
    gap: var(--space-2);
  }

  .app-user-name {
    display: none;
  }

  .app-user-chip {
    padding: 4px;
  }

  /* Titulo y herramientas del panel, uno debajo del otro: al lado, el texto quedaba
     en una columna de cinco lineas junto a un buscador estrecho. */
  .section-head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .panel-head-tools {
    margin-left: 0;
  }

  .panel-head-tools input[type="search"],
  .panel-head-tools input[type="date"] {
    flex: 1 1 auto;
    min-width: 0;
  }

  .main-panel {
    max-height: none;
    padding: 26px 18px 34px;
  }

  body.sidebar-collapsed .app-shell {
    grid-template-columns: 1fr;
  }

  /* Cerrado en el escritorio deja una columna de iconos centrados de 92px. Aca no
     hay columna: la barra sigue siendo ancha y la marca se lee completa. */
  body.sidebar-collapsed .sidebar {
    padding-inline: 16px;
  }

  body.sidebar-collapsed .sidebar-header {
    display: flex;
  }

  body.sidebar-collapsed .brand-row {
    grid-template-columns: 36px minmax(0, 1fr);
    justify-items: stretch;
  }

  body.sidebar-collapsed .brand-copy {
    display: grid;
  }

  body.sidebar-collapsed .sidebar a {
    justify-content: flex-start;
    padding-inline: 12px;
  }

  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-hero,
  .dashboard-actions,
  .dashboard-panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-layout,
  .dashboard-next-grid,
  .dashboard-next-actions,
  .two-col-list,
  .quick-action-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-next,
  .dashboard-wide {
    grid-column: auto;
  }

  .dashboard-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .dashboard-amount {
    text-align: left;
  }

  .patient-kpis,
  .patient-list-controls,
  .agenda-metrics,
  .agenda-side-grid,
  .public-booking-grid {
    grid-template-columns: 1fr;
  }

  .pagination-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .module-grid,
  .patient-form fieldset,
  .record-form-panel fieldset,
  .field-list,
  .clinical-pdf-grid,
  .profile-grid,
  .patient-payment-summary,
  .summary-grid,
  .treatment-session-grid,
  .builder-grid,
  .cash-grid,
  .forms-module,
  .appointments-module,
  .catalog-module,
  .sales-module {
    grid-template-columns: 1fr;
  }

  .field-span-1,
  .field-span-2,
  .field-span-3 {
    grid-column: 1 / -1;
  }

  .detail-list div {
    grid-template-columns: 1fr;
  }

  .session-detail-list div {
    grid-template-columns: 1fr;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar-actions {
    justify-content: flex-start;
  }

  .commerce-form,
  .table-form,
  .consent-issue-form,
  .discount-service-list,
  .pdf-meta,
  .photo-compare-controls,
  .photo-zoom-controls {
    grid-template-columns: 1fr;
  }

  .compact-payment-form {
    min-width: 0;
  }

  .compare-stage {
    min-height: 360px;
  }

  .compare-help {
    align-items: stretch;
    flex-direction: column;
  }

  .photo-toolbar,
  .draw-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .agenda-commandbar,
  .agenda-date-nav {
    align-items: stretch;
    flex-direction: column;
  }

  .agenda-metrics,
  .next-appointment-summary {
    grid-template-columns: 1fr;
  }

  .agenda-calendar-grid {
    grid-template-columns: 64px repeat(var(--agenda-columns), minmax(200px, 1fr));
    min-width: max(100%, calc(64px + (var(--agenda-columns) * 200px)));
  }

  .agenda-week-grid {
    grid-template-columns: 64px repeat(7, minmax(170px, 1fr));
    min-width: calc(64px + (7 * 170px));
  }

  .agenda-calendar-time,
  .agenda-calendar-cell {
    min-height: 44px;
  }

  .agenda-board {
    grid-auto-flow: row;
    grid-auto-columns: initial;
    grid-template-columns: 1fr;
  }

  .agenda-lane {
    min-height: 220px;
  }

  .public-booking-page {
    padding: 14px;
  }

  .booking-wizard-page {
    padding: 0;
  }

  .booking-wizard-shell {
    width: min(100%, calc(100% - 24px));
  }

  .booking-wizard-header {
    align-items: flex-start;
    flex-direction: column;
    margin-inline: -12px;
    padding: 14px 12px 0;
  }

  .booking-wizard-header nav {
    width: 100%;
    overflow-x: auto;
  }

  .booking-progress small {
    display: none;
  }

  .booking-step-card {
    padding: 20px;
  }

  .booking-option-grid,
  .booking-time-grid,
  .availability-days {
    grid-template-columns: 1fr;
  }

  .booking-segment,
  .booking-confirm-grid,
  .booking-summary div,
  .availability-range-row {
    grid-template-columns: 1fr;
  }

  .booking-footer-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .booking-calendar-badge {
    width: 150px;
    min-height: 150px;
  }

  .public-booking-hero {
    min-height: 180px;
    padding: 24px;
  }

  .pdf-sheet {
    width: 100%;
    margin: 0;
    border-radius: 0;
    padding: 22px;
  }

  .pdf-head {
    flex-direction: column;
  }
}

.clinical-pdf-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.clinical-pdf-grid > .field-span-1 {
  grid-column: span 1;
}

.clinical-pdf-grid > .field-span-2 {
  grid-column: span 2;
}

.clinical-pdf-grid > .field-span-3 {
  grid-column: 1 / -1;
}

@media print {
  .print-control {
    display: none;
  }

  .pdf-body {
    background: #fff;
  }

  .pdf-sheet {
    width: 100%;
    margin: 0;
    box-shadow: none;
  }

  .clinical-pdf-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .clinical-pdf-grid > .field-span-1 {
    grid-column: span 1;
  }

  .clinical-pdf-grid > .field-span-2 {
    grid-column: span 2;
  }

  .clinical-pdf-grid > .field-span-3 {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* Confirmacion de hora por el paciente (enlace del correo) */
.cita-shell {
  display: flex;
  justify-content: center;
  padding-block: 48px;
}

.cita-card {
  background: var(--surface, #fff);
  border: 1px solid var(--color-border, #e4e6ef);
  border-radius: 18px;
  padding: 32px;
  max-width: 33rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 18px 44px rgba(23, 26, 60, .07);
}

.cita-card h1 { margin: 0; font-size: 1.5rem; line-height: 1.25; }
.cita-saludo { margin: 0; color: var(--color-text-soft, #5b6474); }

.cita-detalle {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: 12px;
  background: var(--color-surface-muted, #f6f7fb);
}
.cita-detalle > div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
}
.cita-detalle dt { color: var(--color-text-soft, #5b6474); font-size: .85rem; }
.cita-detalle dd { margin: 0; font-weight: 600; }

.cita-acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.cita-acciones form { flex: 1 1 12rem; }
.cita-acciones button { width: 100%; }

.cita-estado {
  margin: 0;
  padding: 14px 16px;
  border-radius: 12px;
  font-weight: 600;
}
.cita-estado.is-ok  { background: #e6f5ec; color: #1f6b45; }
.cita-estado.is-off { background: #f3f4f8; color: #5b6474; }

@media (max-width: 560px) {
  .cita-card { padding: 22px; border-radius: 14px; }
  .cita-detalle > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* Panel de salud del operador */
.health-list { display: flex; flex-direction: column; gap: 10px; }
.health-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--color-border, #e4e6ef);
  border-radius: 12px;
  background: var(--color-surface-muted, #f8f9fc);
}
.health-card strong { display: block; }
.health-card p { margin: 2px 0 0; font-size: .87rem; }
.health-dot { width: 10px; height: 10px; border-radius: 50%; background: #9aa3b5; }
.health-card.is-ok   .health-dot { background: #2f9e6b; }
.health-card.is-warn .health-dot { background: #d08700; }
.health-card.is-fail .health-dot { background: #cc3b33; }
.health-card.is-ok   .status-pill { background: #e6f5ec; color: #1f6b45; }
.health-card.is-warn .status-pill { background: #fbf0d9; color: #7a5200; }
.health-card.is-fail .status-pill { background: #fbe6e4; color: #96302a; }
@media (max-width: 560px) {
  .health-card { grid-template-columns: auto minmax(0, 1fr); }
  .health-card .status-pill { grid-column: 2; justify-self: start; }
}

/* Aviso de sesion suplantada. Se dibuja dentro de la grilla del panel, asi que
   debe cruzar todas las columnas: sin esto ocupa la del menu lateral.
   Va arriba y en todas las pantallas: quien mira debe saber siempre que no
   esta en su propia cuenta. */
.impersonation-bar {
  grid-column: 1 / -1;
  grid-row: 1;
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: #7a4a00;
  color: #fff;
  font-size: .9rem;
}
.impersonation-bar strong { font-weight: 650; }

/* Con el aviso arriba, la pantalla mide lo mismo pero el reparto cambia: la lateral y
   el panel toman lo que deja el aviso en vez de una pantalla entera cada uno, que era
   lo que dejaba la pagina 64px mas larga de lo que se ve.

   Solo de tablet hacia arriba: en el telefono se desplaza la pagina entera, y recortar
   el armazon a la altura de la pantalla dejaria el contenido cortado y sin forma de
   llegar a el. Va por ancho y no en el bloque de movil porque este trozo esta mas
   abajo en el archivo y le ganaria por orden. */
@media (min-width: 761px) {
  .app-shell:has(> .impersonation-bar) {
    height: 100dvh;
  }

  .app-shell:has(> .impersonation-bar) > .sidebar,
  .app-shell:has(> .impersonation-bar) > .main-panel {
    max-height: none;
  }
}
.impersonation-exit { margin: 0; }
.impersonation-exit button {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 8px;
  padding: 5px 14px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
}
.impersonation-exit button:hover { background: rgba(255, 255, 255, .26); }

/* Selector de profesional del perfil. Va como panel propio arriba de la grilla
   porque no es parte de la disponibilidad: decide cual se esta mirando. */
.profile-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.profile-switch label {
  font-weight: 600;
  white-space: nowrap;
}

.profile-switch select {
  flex: 1 1 220px;
  min-width: 0;
}

.profile-switch button {
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   Barra superior con el buscador general.
   Vive en su propia fila de la grilla del shell, a la derecha de la lateral.
   --------------------------------------------------------------------------- */
.app-topbar {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 68px;
  padding: 0 38px;
  background: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border);
}

.app-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  max-width: 560px;
}

.app-search-icon {
  position: absolute;
  left: 14px;
  display: grid;
  place-items: center;
  color: var(--color-text-soft);
  pointer-events: none;
}

.app-search-icon .nav-icon {
  width: 18px;
  height: 18px;
}

.app-search input {
  width: 100%;
  height: 42px;
  padding: 0 16px 0 42px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-muted);
  font: inherit;
  color: var(--color-text);
}

.app-search input::placeholder {
  color: var(--color-text-soft);
}

.app-search input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-surface-raised);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.app-topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.app-topbar-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: var(--color-text-muted);
  text-decoration: none;
}

.app-topbar-icon:hover {
  background: var(--color-surface-muted);
  color: var(--color-primary);
}

/* Se oculta a la vista pero sigue existiendo para lectores de pantalla y para
   que Enter envie el formulario. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Resultados del buscador general.
   --------------------------------------------------------------------------- */
.search-results {
  display: grid;
  gap: var(--space-4);
}

.search-hit-list {
  display: grid;
  gap: var(--space-2);
}

.search-hit {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 12px 14px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  color: inherit;
  text-decoration: none;
}

.search-hit:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-muted);
}

.search-hit-main {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.search-hit-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-hit-main small,
.search-hit-amount small {
  color: var(--color-text-muted);
}

.search-hit-amount {
  display: grid;
  justify-items: end;
  gap: 2px;
  flex: 0 0 auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .app-topbar {
    padding: 0 18px;
  }
}

/* Citas canceladas o sin asistencia: quedan al alcance pero fuera de la lectura
   operacional del dia. Su cupo ya estaba libre; lo que faltaba era que se notara. */
.agenda-cerradas {
  margin-top: var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  background: var(--color-surface-muted);
}

.agenda-cerradas > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text-muted);
}

.agenda-cerradas > p {
  margin: 6px 0 var(--space-3);
  font-size: 0.9rem;
}

.agenda-cerradas-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-2);
}

.agenda-cerradas-lista .appointment-card {
  opacity: 0.72;
}

/* ---------------------------------------------------------------------------
   Desplegable del buscador general.
   --------------------------------------------------------------------------- */
.app-search-submit {
  position: absolute;
  left: 6px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-soft);
  cursor: pointer;
}

.app-search-submit:hover {
  background: var(--color-surface-raised);
  color: var(--color-primary);
}

.app-search-submit .nav-icon {
  width: 18px;
  height: 18px;
}

.app-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 60vh;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-neu);
}

.quick-search-group {
  display: block;
  padding: 8px 10px 4px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.quick-search-hit {
  display: grid;
  gap: 1px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
}

.quick-search-hit:hover {
  background: var(--color-surface-muted);
}

.quick-search-hit small {
  color: var(--color-text-muted);
}

.quick-search-empty {
  margin: 0;
  padding: 12px 10px;
  color: var(--color-text-muted);
}

/* Chip de usuario de la barra superior. */
.app-user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 4px 4px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface-raised);
  font-weight: 600;
  white-space: nowrap;
}

.app-user-initials {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--color-surface-muted);
  color: var(--color-primary);
  font-size: 0.78rem;
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
   Cabecera de la ficha del paciente.
   --------------------------------------------------------------------------- */
.patient-hero {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #e8f0ff 0%, #f4f8ff 100%);
}

.patient-hero-top {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.patient-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  border-radius: 999px;
  background: var(--color-surface-raised);
  color: var(--color-primary);
  font-size: 1.35rem;
  font-weight: 800;
}

.patient-identity {
  flex: 1 1 260px;
  min-width: 0;
}

.patient-identity h1 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: 0 0 2px;
  font-size: 2rem;
  letter-spacing: -0.02em;
}

.patient-identity h1 .status-pill {
  font-size: 0.78rem;
}

.patient-hero-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.patient-hero-body {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(320px, 1.6fr);
  gap: var(--space-4);
  align-items: start;
}

.patient-contact {
  display: grid;
  gap: var(--space-2);
}

.contact-chip {
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.78);
}

.contact-chip span {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.contact-chip strong {
  overflow-wrap: anywhere;
}

.contact-chip.is-empty strong {
  color: var(--color-text-soft);
  font-weight: 500;
}

.patient-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-3);
}

.patient-stats .summary-tile {
  background: var(--color-surface-raised);
  border: 0;
}

@media (max-width: 1080px) {
  .patient-hero-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* La atencion mas proxima cruza el ancho: es lo primero que se mira. */
.dashboard-next {
  grid-column: 1 / -1;
}

/* Boton principal solido. No existia: hasta ahora la accion mas importante de cada
   pantalla se veia igual que las secundarias. */
.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 20px;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.button-primary:hover {
  filter: brightness(1.08);
}

/* Con un nombre largo el grupo de botones se salia del ancho y se montaba sobre si
   mismo. Al no encogerse, baja completo a la linea siguiente. */
.patient-hero-actions {
  flex: 0 0 auto;
  margin-left: auto;
}

.patient-identity {
  flex: 1 1 220px;
}

/* El grupo de acciones no debe empujar fuera del ancho: si no cabe entero, sus
   botones se acomodan en dos lineas dentro del mismo bloque. */
.patient-hero-top {
  align-items: flex-start;
}

.patient-hero-actions {
  flex: 0 1 auto;
  justify-content: flex-end;
}

.patient-identity {
  min-width: 0;
}

/* Sin min-width:0 un contenedor flex no baja de su ancho de contenido, asi que el
   grupo se salia en vez de repartir sus botones en dos lineas. */
.patient-hero-actions {
  min-width: 0;
}

/* El CI/RUT y el nombre llevan a la ficha: es lo que uno toca en una lista de personas,
   y evita una columna entera dedicada a un boton "Perfil". */
.row-link {
  display: grid;
  gap: 1px;
  color: inherit;
  text-decoration: none;
  font-weight: 700;
}

.row-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.row-link small {
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Sin buscador propio en la pantalla, el filtro que llega por URL tiene que verse. */
.filtro-activo {
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.filtro-activo a {
  margin-left: 8px;
  color: var(--color-primary);
  font-weight: 600;
}

/* Las tarjetas de resumen pegadas al titulo, que es lo que se pidio: lo primero que
   se ve al entrar tiene que ser el contenido, no el encabezado. */
.kpi-grid {
  margin-bottom: var(--space-4);
}

/* En el listado de pacientes las dos acciones caben en una linea: apiladas hacian
   crecer cada fila al doble y la lista rendia la mitad de pantalla. */
.patients-table .table-actions {
  flex-wrap: nowrap;
}

.patients-table .table-actions .button-link {
  white-space: nowrap;
}

/* Anchos de la tabla de pacientes. Medido: sin repartirlos, el CI/RUT se llevaba
   243px y el contacto 304, y las acciones quedaban fuera del ancho util. */
.patients-table th:first-child,
.patients-table td:first-child {
  width: 150px;
}

.patients-table th:nth-child(2),
.patients-table td:nth-child(2) {
  width: 230px;
}

.patients-table th:nth-child(3),
.patients-table td:nth-child(3) {
  width: 240px;
  overflow-wrap: anywhere;
}

.patients-table th:nth-child(4),
.patients-table td:nth-child(4) {
  width: 150px;
}

.patients-table th:nth-child(5),
.patients-table td:nth-child(5) {
  width: 140px;
  white-space: normal;
}

/* ---------------------------------------------------------------------------
   Panel de filtros del listado, con el interruptor de inactivos.
   --------------------------------------------------------------------------- */
.filtros-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
  padding: 14px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
}

.filtros-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.filtros-form label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.filtros-form select {
  width: auto;
  min-width: 86px;
}

.filtros-form button,
.filtros-form .button-secondary {
  min-height: 38px;
  padding: 8px 16px;
}

.filtros-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Es un enlace y no una casilla: el estado vive en la URL, asi se puede compartir la
   vista y el boton de atras del navegador hace lo que uno espera. */
.toggle-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.toggle-track {
  display: inline-flex;
  align-items: center;
  width: 38px;
  height: 22px;
  padding: 2px;
  border-radius: 999px;
  background: var(--color-border);
  transition: background-color 180ms ease;
}

.toggle-knob {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 27, 45, 0.28);
  transition: transform 180ms ease;
}

.toggle-pill.is-on {
  color: var(--color-primary);
}

.toggle-pill.is-on .toggle-track {
  background: var(--color-primary);
}

.toggle-pill.is-on .toggle-knob {
  transform: translateX(16px);
}

.toggle-count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: 0.78rem;
  text-align: center;
}

.filtro-nota {
  font-size: 0.86rem;
  color: var(--color-text-soft);
}

/* ---------------------------------------------------------------------------
   Encabezados que ordenan, y las dos columnas nuevas.
   --------------------------------------------------------------------------- */
.col-ordenable a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}

.col-ordenable a:hover {
  color: var(--color-primary);
}

.col-ordenable span {
  color: var(--color-text-soft);
  font-size: 0.85em;
}

.col-ordenable.is-active a,
.col-ordenable.is-active span {
  color: var(--color-primary);
}

.celda-fecha {
  display: grid;
  gap: 1px;
  font-variant-numeric: tabular-nums;
}

.celda-fecha small {
  color: var(--color-text-muted);
}

/* Medio ano sin volver es cuando conviene llamar antes de perder al paciente. */
.celda-fecha.fecha-alerta {
  color: var(--color-warm);
  font-weight: 700;
}

.celda-fecha.fecha-alerta small {
  color: var(--color-warm);
}

.celda-saldo {
  display: grid;
  gap: 3px;
  justify-items: start;
  font-variant-numeric: tabular-nums;
}

.badge-conteo {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge-conteo.is-alerta {
  background: #fdecec;
  color: var(--color-danger);
}

/* ---------------------------------------------------------------------------
   Iconos de linea compartidos.
   --------------------------------------------------------------------------- */
.ui-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.button-primary .ui-icon,
.button-secondary .ui-icon,
.button-link .ui-icon {
  width: 17px;
  height: 17px;
}

.saludo-mano {
  font-size: 0.9em;
}

/* ---------------------------------------------------------------------------
   Tarjetas del panel: icono en circulo y barra de referencia.
   --------------------------------------------------------------------------- */
.dashboard-metric {
  display: grid;
  gap: 10px;
}

.metric-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.metric-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--color-surface-muted);
  color: var(--color-primary);
}

.dashboard-metric strong {
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* No es un porcentaje: es cuanto pesa la cifra frente a un dia cargado. */
.dashboard-metric.tone-patients .metric-icon { color: #0d9488; }
.dashboard-metric.tone-treatments .metric-icon { color: #7c3aed; }
.dashboard-metric.tone-payments .metric-icon { color: #b45309; }

/* ---------------------------------------------------------------------------
   Proxima atencion.
   --------------------------------------------------------------------------- */
.dashboard-next-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.dashboard-next-head h2 {
  margin: 0;
  font-size: 1.5rem;
}

.next-time-pill {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--color-surface-muted);
  color: var(--color-primary);
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
}

.next-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.next-chip {
  display: grid;
  gap: 3px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}

.next-chip span {
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.next-chip strong {
  overflow-wrap: anywhere;
}

.dashboard-next-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   Ficha del paciente: vuelta, contacto con icono y etiquetas.
   --------------------------------------------------------------------------- */
.volver-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  font-weight: 600;
  text-decoration: none;
}

.volver-link:hover {
  color: var(--color-primary);
}

.contact-chip {
  display: flex;
  align-items: center;
  gap: 12px;
}

.contact-chip > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.contact-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--color-surface-muted);
  color: var(--color-primary);
}

.patient-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.patient-tag {
  padding: 4px 12px;
  border-radius: 999px;
  background: #d9f2ee;
  color: #0f766e;
  font-size: 0.8rem;
  font-weight: 600;
}

/* El icono en circulo cumple el papel del anillo decorativo que traia la tarjeta;
   teniendo los dos, el anillo pasa por detras del numero y ensucia la lectura. */
.dashboard-metric::after {
  content: none;
}

/* .button-secondary y .button-link declaran inline-flex pero no separacion, asi que
   con icono el texto queda pegado a el. */
.button-secondary,
.button-link {
  gap: 8px;
}

/* ---------------------------------------------------------------------------
   Constructor de plantillas: secciones con identidad propia.
   Sin color, doce campos seguidos se leen como una lista plana y cuesta ver
   donde empieza y termina cada seccion.
   --------------------------------------------------------------------------- */
.builder-section {
  border: 1px solid #cfe0fb;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-raised);
}

.builder-section + .builder-section {
  margin-top: var(--space-4);
}

.builder-section > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: 14px 16px;
  border-bottom: 1px solid #cfe0fb;
  background: linear-gradient(180deg, #eaf2ff 0%, #f3f8ff 100%);
}

.builder-section-title {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.builder-section-num {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
}

.builder-section > header h3 {
  margin: 0 0 2px;
  font-size: 1.05rem;
}

.builder-section-count {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.12);
  color: var(--color-primary);
  font-size: 0.76rem;
  font-weight: 700;
}

.builder-section .field-list,
.builder-section .section-empty {
  padding: var(--space-4);
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Ayuda al pasar el cursor. El title nativo tarda cerca de un segundo en salir
   y se dibuja con el estilo del sistema operativo; este aparece al instante.
   --------------------------------------------------------------------------- */
[data-tip] {
  position: relative;
}

[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: 60;
  width: max-content;
  max-width: 260px;
  padding: 7px 10px;
  border-radius: 8px;
  background: #16233a;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  opacity: 0;
  transform: translate(-50%, 4px);
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}

[data-tip]:hover::after,
[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Contra el borde izquierdo la burbuja se saldria de la pantalla. */
.reorder-actions [data-tip]:first-child::after {
  left: 0;
  transform: translate(0, 4px);
}

.reorder-actions [data-tip]:first-child:hover::after {
  transform: translate(0, 0);
}

@media (prefers-reduced-motion: reduce) {
  [data-tip]::after {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Vista previa de la plantilla.
   --------------------------------------------------------------------------- */
.preview-panel {
  max-width: 900px;
}

.preview-section {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border: 1px solid #cfe0fb;
  border-radius: var(--radius-md);
  background: #fbfdff;
}

.preview-section > legend {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
}

/* La descripcion de la seccion es texto de contexto, no un campo: cruzando la grilla
   se lee antes de los campos y no compite con el primero. */
.preview-section > legend,
.preview-section > p {
  grid-column: 1 / -1;
}

.preview-section > p {
  margin: 0 0 var(--space-3);
}

.acciones-servicio {
  display: flex;
  gap: var(--space-2);
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Una sesion por sobre lo planificado se puede agendar igual, pero se marca. */
.button-link.es-extra {
  color: var(--color-warm);
  border-color: rgba(245, 158, 11, 0.4);
}

/* Filtro de carril de la agenda diaria: va junto al titulo del panel. */
.filtro-carril {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.filtro-carril label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.filtro-carril select {
  width: auto;
  min-width: 190px;
}

.filtro-carril button {
  min-height: 38px;
  padding: 8px 16px;
}

/* Varias citas en el mismo dia y la misma hora, cuando se miran todas las agendas.
   La celda las apila en vez de dejarlas una encima de otra. */
.agenda-calendar-event.es-compartida {
  display: grid;
  gap: 4px;
  align-content: start;
  overflow-y: auto;
}

/* De quien es la hora: lo primero que se busca con varias agendas a la vista. */
.card-professional {
  display: block;
  margin-top: 2px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* Los controles del panel van juntos a la derecha del titulo, no repartidos por la
   pantalla: el filtro y el paso a la semana operan sobre lo mismo. */
.panel-head-tools {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-left: auto;
}

/* ---------------------------------------------------------------------------
   Contraste al completar una ficha clinica.
   Los grises heredados del resto de la interfaz sirven para leer un listado, pero
   una ficha se llena mirando el campo: la etiqueta, el borde y lo que uno escribe
   tienen que separarse del fondo, sobre todo en pantalla de notebook.
   --------------------------------------------------------------------------- */
.record-form label,
.patient-form label {
  color: var(--color-text);
  font-weight: 600;
}

.record-form legend,
.patient-form legend {
  color: var(--color-primary);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.record-form input,
.record-form select,
.record-form textarea,
.patient-form input,
.patient-form select,
.patient-form textarea {
  border: 1px solid #c3cede;
  background: #fff;
  color: var(--color-text);
}

/* Un dato que el centro ya tiene: se muestra tapado y no se escribe encima. Se ve
   apagado para que no parezca un campo que quedo por llenar. Va con el nombre de la
   forma delante porque la regla de arriba, mas especifica, le pinta el fondo blanco. */
input.campo-guardado,
.record-form input.campo-guardado,
.patient-form input.campo-guardado {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  cursor: default;
  letter-spacing: 0.04em;
}

.record-form input::placeholder,
.record-form textarea::placeholder,
.patient-form input::placeholder,
.patient-form textarea::placeholder {
  color: #8a97a9;
}

.record-form input:focus,
.record-form select:focus,
.record-form textarea:focus,
.patient-form input:focus,
.patient-form select:focus,
.patient-form textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
  outline: none;
}

.record-form fieldset,
.patient-form fieldset {
  border-color: #d5dfec;
}

.record-form small,
.patient-form small {
  color: #5a6b85;
}

/* ----------------------------------------------------------------- pagos: por cobrar */

/* La tabla anterior arrastraba un formulario completo dentro de una celda y por eso
   pedia 980px y se iba de lado. Esta solo informa, y el cobro pasa al modal. */
.tabla-cobros {
  min-width: 720px;
}

.tabla-cobros .numero {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tabla-cobros .saldo-pendiente {
  font-weight: 700;
}

.tabla-cobros .acciones {
  text-align: right;
  white-space: nowrap;
}

.tabla-cobros tbody tr:hover {
  background: var(--color-surface-muted);
}

.status-pill.es-vencida {
  border-color: rgba(167, 53, 53, 0.28);
  background: rgba(167, 53, 53, 0.08);
  color: var(--color-danger);
}

/* ----------------------------------------------------------------- pagos: el cobro */

.cobro-modal {
  width: min(100%, 620px);
}

.cobro-form {
  display: grid;
  gap: var(--space-4);
}

.cobro-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.cobro-modal-head h2 {
  margin: 0;
}

.cobro-modal-head p {
  margin: 4px 0 0;
}

.cobro-cerrar {
  border: 0;
  background: none;
  padding: 0 4px;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--color-text-soft);
  cursor: pointer;
}

.cobro-cerrar:hover {
  color: var(--color-text);
}

.cobro-items {
  display: grid;
  gap: var(--space-2);
  border: 0;
  margin: 0;
  padding: 0;
}

.cobro-items legend {
  padding: 0;
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-size: 0.82rem;
  font-weight: 650;
  text-transform: uppercase;
}

/* Cada cosa que se debe es una fila elegible entera, no solo el circulito. */
.cobro-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  cursor: pointer;
}

.cobro-item:hover {
  border-color: var(--color-primary);
}

.cobro-item:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-surface-muted);
}

.cobro-item:has(input:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.cobro-item-nombre small {
  display: block;
  margin-top: 2px;
  color: var(--color-text-muted);
}

.cobro-item-saldo {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cobro-campos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.cobro-campos label {
  display: grid;
  gap: 6px;
  font-weight: 600;
}

.cobro-acciones {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

@media (max-width: 640px) {
  .cobro-campos {
    grid-template-columns: 1fr;
  }
}

/* La lista de cobros manda: ocupa el ancho entero y lo que la acompaña va debajo,
   no al lado. En dos columnas la tabla perdia la mitad de las suyas. */
.pagos-stack {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

/* Sin esto un panel no se encoge por debajo de su contenido -- el minimo de una tabla
   ancha -- y empuja la pagina entera hacia los lados en pantallas chicas. */
.pagos-stack > * {
  min-width: 0;
}

.tabla-cobros .status-pill {
  white-space: nowrap;
}

/* ------------------------------------------------------- adicionales de un servicio */

.form-adicional {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}

.form-adicional label {
  display: grid;
  gap: 6px;
  font-weight: 600;
}

.form-adicional .span-2 {
  grid-column: 1 / -1;
}

/* El boton de quitar vive dentro de la celda y no debe empujarla. */
.table-form-inline {
  display: inline;
  margin: 0;
}

.data-table .acciones {
  text-align: right;
  white-space: nowrap;
}

.data-table tfoot td {
  border-top: 1px solid var(--color-border);
  border-bottom: 0;
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  .form-adicional {
    grid-template-columns: 1fr;
  }
}
/* ----------------------------------------------- la tarjeta de agenda, mas apretada */

/* La hora y los botones comparten fila: eran dos alturas para dos cosas cortas. */
.appointment-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.appointment-card {
  gap: 6px;
  padding: 8px 10px;
}

.appointment-card .appointment-card-actions {
  gap: 4px;
}

.appointment-card .appointment-card-actions .icon-button {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
}

.appointment-card .appointment-card-actions .button-link {
  min-height: 30px;
  padding: 4px 8px;
  font-size: 0.8rem;
}

.appointment-card p {
  margin: 4px 0 0;
  font-size: 0.86rem;
}

.appointment-card-foot {
  gap: 6px;
}

/* En la semanal la celda es de media hora: la tarjeta dice hora, quien y estado. El
   resto se lee en la diaria o abriendo la cita. */
.appointment-card.es-compacta {
  gap: 4px;
  padding: 6px 8px;
  font-size: 0.86rem;
}

.appointment-card.es-compacta strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appointment-card.es-compacta .appointment-card-time {
  font-size: 0.82rem;
}

.appointment-card.es-compacta .appointment-status-form select {
  min-height: 28px;
  padding: 2px 6px;
  font-size: 0.76rem;
}
/* La tarjeta de la semanal: hora y boton arriba, el nombre debajo con el ancho
   entero. El contenido se apoya arriba para que el borde superior marque la hora de
   inicio; el alto de la caja sigue diciendo cuanto dura. */
.appointment-card.es-compacta {
  display: grid;
  align-content: start;
  gap: 1px;
  padding: 3px 6px;
  font-size: 0.8rem;
  line-height: 1.25;
}

.appointment-card.es-compacta .appointment-card-head {
  gap: 4px;
}

.appointment-card.es-compacta .appointment-card-time {
  font-size: 0.78rem;
  font-weight: 700;
}

.appointment-card.es-compacta strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.appointment-card.es-compacta .card-professional {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-muted);
  font-size: 0.74rem;
}

.appointment-card.es-compacta .appointment-card-actions {
  flex: none;
  gap: 0;
}

.appointment-card.es-compacta .appointment-card-actions .icon-button {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
}

.appointment-card.es-compacta .appointment-card-actions svg {
  width: 14px;
  height: 14px;
}
/* El precio en la tarjeta de servicio de la reserva publica. */
.booking-option-price {
  display: block;
  margin-top: 4px;
  color: var(--color-primary);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* El descuento va plegado: es la excepcion, no el gesto de todos los dias. */
.cobro-descuento {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.cobro-descuento summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-primary);
}

.cobro-descuento .cobro-campos {
  margin-top: var(--space-3);
}

.cobro-descuento p {
  margin: var(--space-2) 0 0;
  font-size: 0.82rem;
}
/* Lo cobrado hoy, para cuadrar la caja de un vistazo. */
.caja-dia {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
}

.caja-total,
.caja-medio {
  display: grid;
  gap: 2px;
}

.caja-total strong {
  font-size: 1.3rem;
  color: var(--color-primary);
}

.caja-medio strong,
.caja-total strong {
  font-variant-numeric: tabular-nums;
}

.caja-dia small {
  color: var(--color-text-muted);
  font-size: 0.78rem;
}

/* El descuento no es plata en caja: se separa para que no se sume de un vistazo. */
.caja-medio.es-descuento {
  padding-left: var(--space-4);
  border-left: 1px solid var(--color-border);
}

.caja-medio.es-descuento strong {
  color: var(--color-text-muted);
}
/* ---------------------------------------------------------------------------
   Pagina publica del centro y del profesional.

   Se abre sin sesion y casi siempre desde un telefono: una columna hasta que hay
   ancho de sobra, y ningun comportamiento que dependa de javascript.
   --------------------------------------------------------------------------- */
.landing-page {
  --landing-primary: #2563eb;
  --landing-accent: #0ca678;
  background: #f6f8fc;
  color: var(--color-text);
}

.landing-shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 0 var(--space-8);
}

.landing-hero {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
}

/* La banda de portada: 16:5, que es la proporcion en que se recorta al subir
   (1600 x 500). object-fit la mantiene aunque llegue una de otra forma por el camino
   de respaldo, asi que la pagina se ve igual la suba quien la suba. */
.landing-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 5;
  max-height: 340px;
  object-fit: cover;
  object-position: center;
}

/* Sin portada no queda un hueco: queda una banda con los colores del centro. */
.landing-cover.es-vacia {
  background: linear-gradient(120deg, var(--landing-primary), color-mix(in srgb, var(--landing-accent) 70%, #ffffff));
}

.landing-hero-inner {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: 0 var(--space-6) var(--space-6);
}

/* El avatar: cuadrado, se recorta a 512 x 512 al subir y se muestra a 132px, que
   con pantallas de doble densidad pide 264px reales. 512 da margen sin pesar. Se
   monta sobre la banda, como en cualquier perfil. */
.landing-avatar {
  width: 132px;
  height: 132px;
  margin-top: -46px;
  border: 4px solid #fff;
  border-radius: 26px;
  object-fit: cover;
  background: #fff;
  box-shadow: var(--shadow-neu-sm);
}

.landing-avatar.es-inicial {
  display: grid;
  place-items: center;
  background: var(--landing-primary);
  color: #fff;
  font-size: 3rem;
  font-weight: 800;
}

.landing-hero-copy {
  min-width: 0;
  flex: 1 1 320px;
  display: grid;
  gap: 6px;
}

.landing-hero-copy h1 {
  margin: 0;
  font-size: 1.9rem;
  line-height: 1.15;
  text-wrap: balance;
}

.landing-tagline {
  margin: 0;
  max-width: 62ch;
  color: var(--color-text-muted);
  font-size: 1.02rem;
}

.landing-back {
  justify-self: start;
  margin-top: var(--space-2);
  color: var(--landing-primary);
  font-weight: 600;
  text-decoration: none;
}

.landing-back:hover {
  text-decoration: underline;
}

.landing-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  padding: var(--space-8) var(--space-6) 0;
}

@media (min-width: 900px) {
  .landing-body {
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    align-items: start;
  }
}

.landing-main,
.landing-side {
  display: grid;
  gap: var(--space-6);
  align-content: start;
}

.landing-block h2,
.landing-card h2 {
  margin: 0 0 var(--space-4);
  font-size: 1.15rem;
}

.landing-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  background: #fff;
}

.landing-card p {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
  line-height: 1.55;
}

.landing-card p:last-child {
  margin-bottom: 0;
}

.landing-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-list li {
  display: grid;
  gap: 2px;
}

.landing-list strong {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text-soft);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.landing-list a {
  color: var(--landing-primary);
  text-decoration: none;
}

.landing-list a:hover {
  text-decoration: underline;
}

/* Las pestanas son dos radios escondidos: sin javascript, y con foco visible para
   quien navega con el teclado. */
.landing-tab-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.landing-tabs {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.landing-tabs label {
  padding: 8px 2px 10px;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  font-weight: 600;
  cursor: pointer;
}

#landing-presencial:checked ~ .landing-tabs label[for="landing-presencial"],
#landing-online:checked ~ .landing-tabs label[for="landing-online"] {
  border-bottom-color: var(--landing-primary);
  color: var(--landing-primary);
}

#landing-presencial:focus-visible ~ .landing-tabs label[for="landing-presencial"],
#landing-online:focus-visible ~ .landing-tabs label[for="landing-online"] {
  outline: 2px solid var(--landing-primary);
  outline-offset: 3px;
}

/* Con las dos modalidades presentes se muestra una a la vez. Con una sola no hay
   radios en la pagina y esta regla no llega a aplicarse: la lista se ve siempre. */
#landing-presencial:checked ~ .landing-services[data-modalidad="online"],
#landing-online:checked ~ .landing-services[data-modalidad="presencial"] {
  display: none;
}

.landing-services {
  display: grid;
  gap: var(--space-3);
}

.landing-service {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  background: #fff;
}

.landing-service-copy {
  min-width: 0;
  flex: 1 1 260px;
}

.landing-service h3 {
  margin: 0 0 8px;
  font-size: 1.02rem;
}

.landing-service p {
  margin: 10px 0 0;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

.landing-service-meta {
  display: flex;
  gap: var(--space-6);
  margin: 0;
}

.landing-service-meta dt {
  color: var(--color-text-soft);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.landing-service-meta dd {
  margin: 2px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
}

.landing-service-action {
  display: grid;
  justify-items: end;
  gap: 10px;
}

.landing-price {
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.landing-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-sm);
  background: var(--landing-primary);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.landing-cta:hover {
  filter: brightness(1.08);
}

.landing-people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
}

.landing-person {
  display: grid;
  gap: 4px;
  align-content: start;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  background: #fff;
  color: inherit;
  text-decoration: none;
}

.landing-person h3 {
  margin: 0;
  font-size: 1rem;
}

.landing-person p {
  margin: 6px 0 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.landing-specialty {
  color: var(--landing-accent);
  font-size: 0.86rem;
  font-weight: 600;
}

.landing-person.es-enlace:hover {
  border-color: var(--landing-primary);
}

.landing-person-link {
  margin-top: 10px;
  color: var(--landing-primary);
  font-size: 0.88rem;
  font-weight: 600;
}

.landing-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding: var(--space-6) var(--space-6) 0;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  .landing-hero-inner,
  .landing-body,
  .landing-foot {
    padding-inline: var(--space-4);
  }

  .landing-hero-copy h1 {
    font-size: 1.55rem;
  }

  .landing-service-action {
    justify-items: start;
  }
}

/* Pantalla donde el centro arma su pagina publica. */
.landing-state {
  margin: 0 0 var(--space-4);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-weight: 600;
}

.landing-state.es-publicada {
  background: rgba(12, 166, 120, 0.1);
  color: #0b7a58;
}

.landing-url-hint {
  color: var(--color-text-soft);
  font-weight: 500;
}

.landing-current a {
  color: var(--color-primary);
}

/* Cada profesional plegado: la lista se lee de un vistazo y se abre el que se va a
   editar. Con ocho profesionales, ocho formularios abiertos no se pueden mirar. */
.landing-person-list {
  display: grid;
  gap: var(--space-3);
}

.landing-person-editor {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-raised);
}

.landing-person-editor summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  cursor: pointer;
}

.landing-person-editor form {
  margin-top: var(--space-4);
}

/* ---------------------------------------------------------------------------
   Editor de la pagina publica: formulario a un lado, la pagina al otro.
   --------------------------------------------------------------------------- */
.landing-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

@media (min-width: 1200px) {
  .landing-editor {
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  }

  /* La pagina acompana mientras se baja por el formulario, que es largo. */
  .landing-preview-panel {
    position: sticky;
    top: var(--space-4);
  }
}

.landing-editor-form {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.landing-preview-sizes {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
}

.landing-preview-sizes .es-activo {
  color: var(--color-primary);
  font-weight: 700;
}

.landing-preview-frame {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
}

.landing-preview-frame iframe {
  display: block;
  width: 100%;
  height: 70vh;
  min-height: 460px;
  border: 0;
}

/* El modo telefono es un marco angosto centrado: se ve como se ve en la mano, que es
   donde llega la mayoria de los enlaces que reparte un centro. */
.landing-preview-frame.es-angosto {
  width: 414px;
  max-width: 100%;
  margin: 0 auto;
}

/* ---------------------------------------------------------------------------
   Fotos en el editor: un recuadro por foto, con la forma que va a tener.
   --------------------------------------------------------------------------- */
/* Uno debajo del otro, nunca en columnas. En columnas quedaban de distinto alto y
   los controles de una caian a la altura de la miniatura de la otra: se subia el
   perfil a la portada sin darse cuenta. */
.foto-slots {
  display: grid;
  gap: var(--space-4);
}

.foto-slot {
  display: grid;
  gap: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-surface-raised);
}

.foto-slot-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.foto-slot-head h3 {
  margin: 0;
  font-size: 0.98rem;
}

.foto-slot-head .muted {
  font-size: 0.82rem;
}

.foto-slot-form {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

/* El recuadro tiene la forma del resultado, que es lo que dice cual es cual sin
   tener que leer: ancho y bajo, la portada; cuadrado, el perfil. */
.foto-slot-recuadro {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  text-align: center;
  cursor: pointer;
}

.es-portada .foto-slot-recuadro {
  width: 100%;
  aspect-ratio: 16 / 5;
}

.es-perfil .foto-slot-recuadro {
  width: 160px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
}

.foto-slot-recuadro.con-foto {
  border-style: solid;
}

.foto-slot-recuadro img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.foto-slot-recuadro:hover {
  border-color: var(--color-primary);
}

/* El campo de archivo va escondido dentro del recuadro, asi que el foco del teclado
   se muestra en el recuadro. */
.foto-slot-recuadro:focus-within {
  outline: 3px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
  outline-offset: 2px;
}

.foto-slot-recuadro.esta-subiendo img {
  opacity: 0.6;
}

.foto-slot-vacio {
  padding: var(--space-3);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Como va la subida, debajo del recuadro y no encima: un aviso largo sobre un
   cuadrado de 160px taparia justo la foto que se quiere confirmar. */
.foto-slot-estado {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.86rem;
  font-weight: 600;
}

.foto-slot-estado.es-error {
  color: var(--color-danger);
}

.foto-slot-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* El boton Subir es el camino de quien no tiene javascript; con javascript la foto se
   sube al elegirla y el script lo marca hidden. Pero .button-secondary declara
   display: inline-flex, y una clase con display le gana al hidden del navegador: el
   boton seguia a la vista, sin hacer nada, invitando a un segundo paso que ya no
   existe. Medido: hidden=true y display=flex, 72x47. El selector de atributo pesa
   mas que la clase, asi que gana en cualquier orden. */
[data-foto-enviar][hidden] {
  display: none;
}

.foto-slot-cambiar {
  font-size: 0.84rem;
}

.foto-slot-quitar {
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Portada y perfil en el telefono.
   --------------------------------------------------------------------------- */
/* A 390px de ancho, 16:5 deja una banda de 120px de alto: casi una raya. 3:1 la
   deja en 130px y se sigue leyendo como foto. El avatar baja a 96px para no tapar
   media banda; el nombre pasa a la linea de abajo, que en un telefono es lo que
   deja leer entero un nombre largo de centro. Medido a 414px: banda 399x133, avatar
   96x96 montado 34px sobre ella, nada se sale por el costado. */
@media (max-width: 640px) {
  .landing-cover {
    aspect-ratio: 3 / 1;
  }

  .landing-avatar {
    width: 96px;
    height: 96px;
    margin-top: -34px;
    border-radius: 20px;
  }

  .landing-avatar.es-inicial {
    font-size: 2.2rem;
  }
}

/* ---------------------------------------------------------------------------
   Ajustador de fotos: se encuadra antes de subir.

   Usa el fondo y el panel de los modales de la aplicacion. Va al final de la hoja
   porque .ajuste-panel tiene que ganarle a .modal-panel, que pesa lo mismo.
   --------------------------------------------------------------------------- */

/* Los botones quedan fijos abajo y lo que se desplaza es el cuerpo. Con la ventana de
   1280x900 el panel del perfil ya no cabia de alto y "Usar esta foto" quedaba cortado
   por el borde del panel; en una pantalla mas baja, o en un telefono, quedaba fuera de
   la vista sin nada que dijera que habia que desplazarse para encontrarlo. */
.ajuste-panel {
  width: min(100%, 760px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ajuste-cuerpo {
  display: grid;
  gap: var(--space-4);
  min-height: 0;
  overflow-y: auto;
  /* Hasta el borde del panel, para que la barra de desplazamiento no quede metida en
     el relleno. */
  margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) 0;
  padding: var(--space-6) var(--space-6) var(--space-4);
}

.ajuste-cabeza {
  display: grid;
  gap: 4px;
}

.ajuste-cabeza h2,
.ajuste-cabeza p {
  margin: 0;
}

/* El escenario va dentro de un bloque comun y no suelto en la grilla. Suelto, con un
   ancho menor que la columna -- el cuadrado del perfil --, Chrome le calculaba la fila
   mas baja que el cuadrado, y el cuadrado tapaba lo que venia debajo: en un telefono,
   la barra de zoom entera. Dentro de un bloque el alto sale bien. */
.ajuste-marco {
  min-width: 0;
}

/* El escenario tiene la forma del destino.

   El contorno va con outline y no con border: un borde se come dos pixeles del lienzo,
   el recuadro visible deja de ser 16:5 exacto y el archivo sale con un poco mas de
   foto abajo que lo que se vio. */
.ajuste-escenario {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  outline: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #ffffff;
  -webkit-user-select: none;
  user-select: none;
}

.ajuste-panel.es-portada .ajuste-escenario {
  aspect-ratio: 16 / 5;
}

/* El cuadrado no pasa de 420px ni de media pantalla de alto. */
.ajuste-panel.es-perfil .ajuste-escenario {
  max-width: min(420px, 55vh);
  aspect-ratio: 1 / 1;
}

.ajuste-lienzo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  /* Sin esto, arrastrar con el dedo desplaza la pagina en vez de mover la foto. */
  touch-action: none;
}

.ajuste-escenario.arrastrando .ajuste-lienzo {
  cursor: grabbing;
}

.ajuste-lienzo:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.45);
  outline-offset: -3px;
}

.ajuste-lado {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  min-width: 0;
}

/* Tiene su lugar reservado aunque no haya aviso: si apareciera empujando, la barra de
   zoom se correria justo mientras se usa. */
.ajuste-aviso {
  min-height: 1.4em;
  margin: calc(var(--space-2) * -1) 0;
  color: var(--color-danger);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.4;
}

.ajuste-controles,
.ajuste-fondos,
.ajuste-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.ajuste-zoom {
  display: flex;
  flex: 1 1 240px;
  align-items: center;
  gap: var(--space-3);
  font-weight: 600;
}

/* La regla general de input le pone alto, borde, relleno y fondo; a una barra de rango
   eso la deforma. */
.ajuste-zoom input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  accent-color: var(--color-primary);
}

/* Las muestras de fondo son botones, y la regla general de button les pone degradado,
   alto minimo y relleno. */
.ajuste-muestra {
  width: 34px;
  height: 34px;
  min-height: 0;
  padding: 0;
  border: 2px solid var(--color-border);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: none;
}

.ajuste-muestra[aria-pressed="true"],
.ajuste-otro.esta-elegido input[type="color"] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}

.ajuste-otro {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9rem;
}

.ajuste-otro input[type="color"] {
  width: 44px;
  height: 34px;
  min-height: 0;
  padding: 2px;
  border: 2px solid var(--color-border);
  cursor: pointer;
}

.ajuste-acciones {
  flex: none;
  justify-content: flex-end;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
}

/* En pantallas anchas el cuadrado del perfil va a la izquierda y los controles a su
   lado. Uno debajo del otro el panel del perfil mide unos 750px de alto, mas que la
   pantalla de un notebook, y habria que desplazarse para llegar al fondo. */
@media (min-width: 720px) {
  .ajuste-panel.es-perfil .ajuste-cuerpo {
    grid-template-columns: min(340px, 50vh) minmax(0, 1fr);
    column-gap: var(--space-6);
    align-items: center;
  }

  .ajuste-panel.es-perfil .ajuste-cabeza {
    grid-column: 1 / -1;
  }

  .ajuste-panel.es-perfil .ajuste-escenario {
    max-width: none;
  }

  .ajuste-panel.es-perfil .ajuste-aviso {
    margin: 0;
  }
}

/* Los paneles de una cita miden lo que dicen: el de estado son tres lineas y una lista
   desplegable, y estirarlo hasta el alto del panel de al lado deja media tarjeta vacia. */
.appointment-detail-grid {
  align-items: start;
}

/* ---------------------------------------------------------------------------
   La grilla del dia: una columna por cancha, un bloque por hora. Es la pantalla
   donde el mostrador pasa el dia, asi que lo que importa es leerla de un vistazo
   y que el bloque libre se vea claramente pinchable.
   --------------------------------------------------------------------------- */
.grilla-canchas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(160px, 1fr);
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-3);
}

.grilla-columna {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.grilla-cabeza {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  position: sticky;
  top: 0;
}

.grilla-cabeza strong {
  font-size: 0.94rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grilla-cabeza small {
  color: var(--color-text-muted);
  font-size: 0.74rem;
}

.grilla-bloques {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bloque {
  display: grid;
  gap: 1px;
  width: 100%;
  border: 1px solid var(--color-border-soft);
  border-left: 4px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background: #fff;
  text-align: left;
  font: inherit;
  color: var(--color-text);
}

.bloque-hora {
  font-size: 0.86rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.bloque-quien {
  font-size: 0.76rem;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Lo unico que se puede pinchar es lo libre, y se nota. */
.bloque-libre {
  cursor: pointer;
  border-left-color: #1f7a44;
}

.bloque-libre:hover,
.bloque-libre:focus-visible {
  background: #f2faf5;
  box-shadow: var(--shadow-neu-sm);
}

.bloque-cerrado,
.bloque-pasado {
  background: var(--color-surface-muted);
  border-left-color: var(--color-border);
  opacity: 0.7;
}

/* Un color por estado, igual que la agenda: el que mira la grilla tiene que saber
   sin leer si esa hora esta pagada, esperando o perdida. */
.bloque-confirmada { border-left-color: #1f7a44; background: #f4fbf7; }
.bloque-pendiente_pago { border-left-color: #f59e0b; background: #fffaf0; }
.bloque-cumplida { border-left-color: #64748b; background: #f7f8fa; }
.bloque-cancelada { border-left-color: #e03131; opacity: 0.65; }
.bloque-no_show { border-left-color: #e8590c; opacity: 0.65; }

a.bloque {
  text-decoration: none;
}

a.bloque:hover {
  box-shadow: var(--shadow-neu-sm);
}

/* Dias de una serie: siete casillas que se leen de un vistazo. */
.day-picker {
  display: grid;
  gap: 6px;
}

.day-picker > span {
  font-weight: 600;
}

.day-picker > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.day-check {
  position: relative;
}

.day-check input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.day-check span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 38px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  font-weight: 600;
}

.day-check input:checked + span {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-contrast);
}

.day-check input:focus-visible + span {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Torneos. La tabla y el cuadro son lo que los equipos vienen a mirar: numeros
   alineados, el clasificado marcado y el ganador de cada cruce en negrita.
   --------------------------------------------------------------------------- */
[data-solo-formato][hidden] {
  display: none !important;
}

.torneo-dos-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: var(--space-6);
  align-items: start;
}

.torneo-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.torneo-tablas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: var(--space-4);
}

.torneo-tabla h3,
.torneo-fecha h3,
.llave-ronda h3,
.llave-tercer h3 {
  margin: 0 0 8px;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.torneo-tabla .numero,
.torneo-marcador {
  font-variant-numeric: tabular-nums;
}

.torneo-clasifica td:first-child {
  box-shadow: inset 3px 0 0 var(--color-mint);
}

.torneo-fecha + .torneo-fecha {
  margin-top: var(--space-4);
}

.torneo-local {
  text-align: right;
}

.torneo-marcador {
  text-align: center;
  white-space: nowrap;
  font-weight: 700;
  width: 5rem;
}

.torneo-campeon {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
}

.torneo-campeon span {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-warm);
  font-weight: 700;
}

.torneo-campeon strong {
  font-size: 1.5rem;
}

.status-pill.torneo-en_juego {
  background: rgba(18, 184, 166, 0.14);
  color: #0b7a6f;
}

.status-pill.torneo-terminado {
  background: rgba(37, 99, 235, 0.12);
  color: var(--color-primary);
}

.status-pill.torneo-anulado {
  background: rgba(167, 53, 53, 0.1);
  color: var(--color-danger);
}

.llave {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 1fr);
  gap: var(--space-4);
  overflow-x: auto;
  padding-bottom: var(--space-3);
}

.llave-ronda {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.llave-partidos {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-around;
  gap: var(--space-3);
}

.llave-partido {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  color: inherit;
  text-decoration: none;
}

.llave-partido:hover,
.llave-partido:focus-visible {
  border-color: var(--color-primary);
}

.llave-equipo {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}

.llave-equipo span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.llave-equipo.es-ganador {
  font-weight: 700;
}

.llave-hora {
  margin-top: 4px;
  color: var(--color-text-muted);
}

.llave-tercer {
  max-width: 260px;
  margin-top: var(--space-4);
}

.torneo-cuerpo {
  display: grid;
  gap: var(--space-6);
}

.torneo-tabla .data-table {
  min-width: 0;
}

.torneo-tabla .data-table th,
.torneo-tabla .data-table td {
  padding: 10px 8px;
}

.torneo-fecha .data-table {
  min-width: 640px;
  table-layout: fixed;
}

.torneo-fecha .data-table td {
  vertical-align: middle;
}

.torneo-grupo {
  width: 3.5rem;
}

.torneo-local,
.torneo-visita {
  width: 24%;
}

.torneo-accion {
  width: 8rem;
  text-align: right;
}

/* ---------------------------------------------------------------------------
   Lo que ve el cliente: reservar, torneos y sus reservas, bajo el mismo
   encabezado. Su equipo se marca en la tabla, el cuadro y el fixture.
   --------------------------------------------------------------------------- */
.publico-nav a {
  padding-block: 8px;
}

.publico-nav a.is-active {
  color: var(--booking-primary);
  box-shadow: inset 0 -3px 0 var(--booking-primary);
}

.booking-card + .booking-card,
.booking-card + .torneo-campeon,
.torneo-campeon + .booking-card {
  margin-top: var(--space-4);
}

.portal-ingreso {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-4);
  max-width: 920px;
  margin: 0 auto;
}

.portal-ayuda {
  max-width: 920px;
  margin: var(--space-4) auto 0;
}

.portal-cabeza,
.publico-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.portal-cabeza h2,
.publico-cabeza h2 {
  margin: 0;
}

.publico-cabeza .status-pill {
  margin-top: 6px;
}

.publico-buscar label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.portal-reservas,
.portal-torneos {
  display: grid;
  gap: var(--space-3);
}

.portal-reserva,
.portal-torneo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  color: inherit;
  text-decoration: none;
}

a.portal-torneo:hover,
a.portal-torneo:focus-visible {
  border-color: var(--booking-primary);
}

.portal-torneo > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.portal-torneo p {
  margin: 4px 0 0;
}

.portal-reserva-cuando {
  display: grid;
  min-width: 11rem;
}

.portal-reserva-cuando span {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.portal-reserva-datos {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.portal-reserva-datos small {
  flex-basis: 100%;
  color: var(--color-text-muted);
}

.portal-reserva-nota {
  max-width: 16rem;
  text-align: right;
}

.publico-inscritos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.publico-inscritos li {
  padding: 10px 12px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
}

tr.es-mi-equipo td {
  background: var(--booking-soft);
}

.llave-partido.es-mi-equipo {
  border-color: var(--booking-primary);
  box-shadow: inset 3px 0 0 var(--booking-primary);
}

.publico-resultado {
  display: inline-grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  font-size: 0.75rem;
  color: #fff;
}

.publico-resultado.es-g {
  background: #0b7a6f;
}

.publico-resultado.es-e {
  background: var(--color-text-muted);
}

.publico-resultado.es-p {
  background: var(--color-danger);
}

.torneo-acceso input {
  width: 100%;
  min-width: 8rem;
}

/* En el telefono, la cancha y la hora bajan a su propia linea en vez de esconderse tras
   un desplazamiento lateral: es lo primero que un equipo busca. */
@media (max-width: 640px) {
  .publico-fixture .data-table,
  .publico-partidos .data-table {
    min-width: 0;
    table-layout: auto;
  }

  .publico-fixture tr,
  .publico-partidos tr {
    display: grid;
    align-items: center;
    border-bottom: 1px solid var(--color-border-soft);
  }

  .publico-fixture tr {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .publico-partidos thead {
    display: none;
  }

  .publico-partidos tr {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .publico-fixture td,
  .publico-partidos td {
    width: auto;
    border-bottom: 0;
    padding: 8px;
  }

  .publico-fixture td.torneo-local {
    text-align: right;
  }

  .publico-fixture td.torneo-grupo {
    grid-column: 1 / -1;
    padding-bottom: 0;
  }

  .publico-fixture td.torneo-hora,
  .publico-partidos td:last-child {
    grid-column: 1 / -1;
    padding-top: 0;
    color: var(--color-text-muted);
    font-size: 0.85rem;
  }

  .publico-fixture td.torneo-hora {
    text-align: center;
  }
}

/* ==========================================================================
   TEMA MICANCHA: DIA DE PARTIDO
   --------------------------------------------------------------------------
   Todo lo de arriba es la piel heredada de ZentraMed (azul y lila de software
   clinico). Esta capa va al final a proposito: redefine los tokens y pisa los
   componentes que se ven, sin tocar el resto, asi que se ajusta o se quita
   entera desde aca.

   El mundo del que sale: el pasto con franjas de corte, la tiza blanca de las
   lineas, el naranjo del balon para lo que hay que apretar, y los numeros de
   marcador en letra condensada. Barlow Condensed va en titulos, horas,
   precios y marcadores; Barlow en el texto corrido. Las dos son OFL y se
   sirven desde /assets/fonts, sin depender de Google.
   ========================================================================== */

@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/barlow-condensed-800.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: italic; font-weight: 800; font-display: swap; src: url("fonts/barlow-condensed-800-italic.woff2") format("woff2"); }

:root {
  /* La paleta del recinto. */
  --mc-pasto: #0b7a45;
  --mc-pasto-vivo: #12925a;
  --mc-pasto-hondo: #075232;
  --mc-noche: #0b2a1c;
  --mc-noche-franja: #0f3524;
  --mc-balon: #ff6a1f;
  --mc-balon-hondo: #d9500b;
  --mc-oro: #f2b705;
  --mc-cesped-claro: #e6f2e8;
  --mc-fondo: #f3f5ef;
  --mc-tinta: #0f2419;
  --mc-gris: #56685c;
  --mc-linea: #d9e2d6;
  --mc-linea-suave: #e8eee5;

  --mc-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --mc-texto: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Los tokens heredados apuntan a la paleta nueva: todo lo que ya los usaba cambia solo. */
  --color-primary: var(--mc-pasto);
  --color-primary-contrast: #ffffff;
  --color-accent: var(--mc-pasto-vivo);
  --color-warm: var(--mc-balon);
  --color-mint: var(--mc-pasto-vivo);
  --color-bg: var(--mc-fondo);
  --color-app-bg: var(--mc-fondo);
  --color-surface: #f8faf5;
  --color-surface-raised: #ffffff;
  --color-surface-muted: #edf2ea;
  --color-text: var(--mc-tinta);
  --color-text-muted: var(--mc-gris);
  --color-text-soft: #8a9a8f;
  --color-border: var(--mc-linea);
  --color-border-soft: var(--mc-linea-suave);
  --color-danger: #b42318;
  --shadow-neu: 0 1px 0 rgba(15, 36, 25, 0.04), 0 14px 30px -18px rgba(15, 36, 25, 0.28);
  --shadow-neu-sm: 0 1px 0 rgba(15, 36, 25, 0.04), 0 8px 18px -12px rgba(15, 36, 25, 0.24);
  --shadow-inset: none;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  font-family: var(--mc-texto);
}

body {
  background: var(--mc-fondo);
  color: var(--mc-tinta);
}

/* ---------------------------------------------------------------- titulos */
h1,
h2,
.eyebrow,
.nav-heading,
.data-table th {
  font-family: var(--mc-display);
}

h1 {
  font-size: clamp(1.9rem, 2.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

h2 {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.eyebrow {
  margin-bottom: 4px;
  color: var(--mc-balon-hondo);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

/* La raya de tiza bajo el titulo de cada pantalla. */
.topbar h1::after {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  margin-top: 8px;
  background: var(--mc-balon);
  transform: skewX(-24deg);
}

/* ---------------------------------------------------------------- menu lateral */
.sidebar {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 34px, transparent 34px 68px),
    linear-gradient(180deg, var(--mc-noche-franja), var(--mc-noche));
  color: #dcebe1;
  border-right: 0;
}

.brand-row strong {
  color: #ffffff;
  font-family: var(--mc-display);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.brand-row small {
  color: rgba(220, 235, 225, 0.62);
}

.brand-row {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
}

.brand-mark.small {
  height: 36px;
}

.sidebar-toggle {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: #cfe3d6;
  box-shadow: none;
}

.nav-heading {
  color: rgba(220, 235, 225, 0.48);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
}

.sidebar a {
  border-radius: var(--radius-sm);
  color: #d4e6da;
  font-weight: 500;
  transition: background-color 140ms ease, color 140ms ease;
}

.sidebar a:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  box-shadow: none;
}

.sidebar .nav-active,
.sidebar .nav-active:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  box-shadow: inset 4px 0 0 var(--mc-balon);
  font-weight: 600;
}

.sidebar .nav-badge {
  background: var(--mc-balon);
}

.sidebar-form .button-secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.18);
  color: #d4e6da;
}

.sidebar-form .button-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

/* ---------------------------------------------------------------- lienzo */
.app-shell {
  background: var(--mc-fondo);
}

.app-topbar {
  background: #ffffff;
  border-bottom: 1px solid var(--mc-linea);
}

/* Franjas de corte muy tenues: el fondo se lee como cancha sin competir con nada. */
.main-panel {
  background:
    repeating-linear-gradient(0deg, rgba(11, 122, 69, 0.03) 0 64px, transparent 64px 128px),
    var(--mc-fondo);
  background-size: auto;
}

.work-panel,
.auth-panel,
.metric {
  border: 1px solid var(--mc-linea);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-neu);
}

.work-panel + .work-panel {
  margin-top: var(--space-4);
}

.metric::after {
  border-color: rgba(11, 122, 69, 0.12);
}

.metric strong {
  font-family: var(--mc-display);
  font-size: 2.4rem;
  font-weight: 800;
}

/* ---------------------------------------------------------------- botones */
button,
.button-primary,
.button-secondary,
.button-link {
  font-family: var(--mc-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease;
}

button {
  border-radius: var(--radius-sm);
  background: var(--mc-pasto);
  color: #ffffff;
  box-shadow: 0 8px 16px -10px rgba(7, 82, 50, 0.9);
}

button:hover {
  background: var(--mc-pasto-hondo);
  transform: translateY(-1px);
}

button:active {
  transform: translateY(0);
}

button:disabled,
button[disabled] {
  background: #b9c6bc;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* La accion principal de cada pantalla va en naranjo balon. */
.button-primary {
  border-color: var(--mc-balon);
  border-radius: var(--radius-sm);
  background: var(--mc-balon);
  color: #ffffff;
  box-shadow: 0 10px 20px -12px rgba(217, 80, 11, 0.95);
}

.button-primary:hover {
  border-color: var(--mc-balon-hondo);
  background: var(--mc-balon-hondo);
  filter: none;
  transform: translateY(-1px);
}

.button-secondary {
  border: 1px solid var(--mc-linea);
  background: #ffffff;
  color: var(--mc-tinta);
  box-shadow: none;
}

.button-secondary:hover {
  border-color: var(--mc-pasto);
  background: #ffffff;
  color: var(--mc-pasto-hondo);
  transform: none;
}

.button-link {
  border: 1px solid var(--mc-linea);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--mc-pasto-hondo);
  box-shadow: none;
}

.button-link:hover {
  border-color: var(--mc-pasto);
  background: var(--mc-cesped-claro);
}

.sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: none;
}

/* ---------------------------------------------------------------- formularios */
input,
select,
textarea,
.patient-form input,
.patient-form select,
.patient-form textarea {
  border: 1px solid #cfdacb;
  background: #ffffff;
  box-shadow: none;
}

input:focus,
select:focus,
textarea:focus,
.patient-form input:focus,
.patient-form select:focus,
.patient-form textarea:focus {
  border-color: var(--mc-pasto);
  box-shadow: 0 0 0 3px rgba(11, 122, 69, 0.18);
  outline: none;
}

.patient-form legend,
.record-form legend {
  color: var(--mc-pasto);
  font-family: var(--mc-display);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
}

.patient-form fieldset,
.record-form fieldset {
  border-color: var(--mc-linea);
  background: #fbfcf9;
}

.day-check input:checked + span {
  background: var(--mc-pasto);
  border-color: var(--mc-pasto);
}

.day-check span {
  font-family: var(--mc-display);
  font-size: 1rem;
}

/* ---------------------------------------------------------------- tablas y estados */
.data-table th {
  background: #eef3ec;
  color: var(--mc-gris);
  font-size: 0.86rem;
  letter-spacing: 0.08em;
}

.data-table tbody tr {
  transition: background-color 120ms ease;
}

.data-table tbody tr:hover td {
  background: #f6f9f4;
}

.status-pill {
  min-height: 24px;
  border: 0;
  border-radius: 4px;
  padding: 0 8px;
  background: var(--mc-cesped-claro);
  color: var(--mc-pasto-hondo);
  box-shadow: none;
  font-family: var(--mc-display);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.status-pill.es-vencida {
  background: #fde8e6;
  color: var(--color-danger);
}

.status-pill.torneo-en_juego {
  gap: 6px;
  background: #fff0e6;
  color: var(--mc-balon-hondo);
}

/* En juego late: es lo unico de la pantalla que esta pasando ahora. */
.status-pill.torneo-en_juego::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: mc-late 1.6s ease-in-out infinite;
}

.status-pill.torneo-terminado {
  background: var(--mc-noche);
  color: #ffffff;
}

.status-pill.torneo-anulado {
  background: #eceeea;
  color: var(--mc-gris);
  text-decoration: line-through;
}

@keyframes mc-late {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}

.notice {
  border: 1px solid #bfe0c9;
  border-radius: var(--radius-sm);
  background: #effaf2;
  color: var(--mc-pasto-hondo);
  box-shadow: none;
  font-weight: 500;
}

.notice-error {
  border-color: #f3c3bd;
  background: #fff4f2;
  color: var(--color-danger);
}

.empty-state {
  border: 2px dashed var(--mc-linea);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.6);
}

.empty-state strong {
  font-family: var(--mc-display);
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.modal-panel {
  border-radius: var(--radius-md);
}

/* ---------------------------------------------------------------- grilla del dia */
/* Cada columna arranca con su cancha escrita como en un tablero. */
.grilla-cabeza {
  border: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 18px, transparent 18px 36px),
    var(--mc-pasto-hondo);
  color: #ffffff;
}

.grilla-cabeza strong {
  color: #ffffff;
  font-family: var(--mc-display);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.grilla-cabeza small {
  color: rgba(255, 255, 255, 0.72);
}

.bloque {
  position: relative;
  border: 1px solid var(--mc-linea);
  border-left-width: 4px;
  letter-spacing: normal;
  text-transform: none;
  box-shadow: none;
  transition: transform 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.bloque-hora {
  font-family: var(--mc-display);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.1;
}

.bloque-libre {
  background: #ffffff;
  border-left-color: var(--mc-pasto-vivo);
}

.bloque-libre:hover,
.bloque-libre:focus-visible {
  background: var(--mc-cesped-claro);
  box-shadow: var(--shadow-neu-sm);
  transform: translateX(2px);
}

/* Al pasar por encima dice que hace, sin ocupar lugar cuando no. */
.bloque-libre:hover::after,
.bloque-libre:focus-visible::after {
  content: "+ Reservar";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: var(--mc-pasto);
  font-family: var(--mc-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Lo vendido va rayado: se distingue de lo libre sin leer. */
.bloque-confirmada {
  border-left-color: var(--mc-pasto-hondo);
  background: repeating-linear-gradient(135deg, #e3f0e6 0 8px, #d9eadd 8px 16px);
}

.bloque-confirmada .bloque-quien {
  color: var(--mc-tinta);
  font-weight: 600;
}

.bloque-pendiente_pago {
  border-left-color: var(--mc-balon);
  background: repeating-linear-gradient(135deg, #fff1e5 0 8px, #ffe7d4 8px 16px);
}

.bloque-cumplida {
  border-left-color: #6b7c70;
  background: #f1f4f0;
}

.bloque-cerrado,
.bloque-pasado {
  border-left-color: #c8d0c6;
  background: repeating-linear-gradient(45deg, #eff2ed 0 6px, #e8ece5 6px 12px);
  opacity: 0.85;
}

a.bloque:hover {
  box-shadow: var(--shadow-neu-sm);
  transform: translateX(2px);
}

/* ---------------------------------------------------------------- torneos */
.torneo-marcador {
  font-family: var(--mc-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.torneo-tabla h3,
.torneo-fecha h3,
.llave-ronda h3,
.llave-tercer h3 {
  color: var(--mc-pasto-hondo);
  font-family: var(--mc-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.torneo-tabla td.numero:first-child {
  font-family: var(--mc-display);
  font-size: 1.05rem;
  font-weight: 700;
}

.torneo-tabla td:last-child strong {
  font-family: var(--mc-display);
  font-size: 1.2rem;
}

/* El puntero de la tabla lleva medalla. */
.torneo-tabla tbody tr:first-child td.numero:first-child {
  color: var(--mc-noche);
}

.torneo-tabla tbody tr:first-child td.numero:first-child::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--mc-oro);
  box-shadow: 0 0 0 2px rgba(242, 183, 5, 0.25);
  vertical-align: 1px;
}

.torneo-clasifica td:first-child {
  box-shadow: inset 4px 0 0 var(--mc-pasto-vivo);
}

.llave-partido {
  position: relative;
  border: 1px solid var(--mc-linea);
  border-radius: var(--radius-sm);
  background: #ffffff;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

a.llave-partido:hover,
a.llave-partido:focus-visible {
  border-color: var(--mc-pasto);
  box-shadow: var(--shadow-neu-sm);
  transform: translateY(-2px);
}

/* Un trazo de tiza une cada partido con la ronda anterior. */
.llave-ronda + .llave-ronda .llave-partido::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--space-4) - 1px);
  width: var(--space-4);
  border-top: 2px solid var(--mc-linea);
}

.llave-equipo {
  padding: 2px 4px;
  border-radius: 4px;
}

.llave-equipo b {
  font-family: var(--mc-display);
  font-size: 1.1rem;
  font-weight: 800;
}

.llave-equipo.es-ganador {
  background: var(--mc-cesped-claro);
  color: var(--mc-pasto-hondo);
}

.torneo-campeon {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-8);
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 22px, transparent 22px 44px),
    linear-gradient(115deg, var(--mc-noche), var(--mc-pasto-hondo));
  color: #ffffff;
}

.torneo-campeon span {
  color: var(--mc-oro);
  font-family: var(--mc-display);
  font-size: 1rem;
  letter-spacing: 0.2em;
}

.torneo-campeon strong {
  color: #ffffff;
  font-family: var(--mc-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  font-style: italic;
  line-height: 1;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- ingreso */
/* La cancha vista desde arriba: franjas, linea media y circulo central. */
.auth-page {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 379px, rgba(255, 255, 255, 0.28) 380px 382px, transparent 383px),
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(255, 255, 255, 0.28) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    repeating-linear-gradient(90deg, #0b6b3e 0 90px, #0a6139 90px 180px);
}

.auth-panel {
  border: 0;
  box-shadow: 0 30px 60px -20px rgba(3, 30, 17, 0.6);
}

.auth-panel .brand-mark {
  height: 52px;
  margin-bottom: var(--space-3);
}

/* ---------------------------------------------------------------- lado del cliente */
.booking-wizard-page {
  --booking-primary: var(--mc-pasto);
  --booking-primary-strong: var(--mc-pasto-hondo);
  --booking-accent: var(--mc-balon);
  --booking-ink: var(--mc-tinta);
  --booking-soft: var(--mc-cesped-claro);
  --booking-surface: #fbfcf9;
  background: var(--mc-fondo);
}

.booking-wizard-header {
  border-bottom: 3px solid var(--mc-balon);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 40px, transparent 40px 80px),
    var(--mc-noche);
  box-shadow: none;
  backdrop-filter: none;
}

.booking-brand strong {
  color: #ffffff;
  font-family: var(--mc-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.booking-brand span {
  color: rgba(220, 235, 225, 0.66);
}

.booking-wizard-header nav a,
.booking-wizard-header nav span {
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--mc-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.booking-wizard-header nav a:hover {
  color: #ffffff;
}

.publico-nav a.is-active,
.booking-wizard-header nav .is-active {
  border-bottom: 0;
  color: #ffffff;
  box-shadow: inset 0 -3px 0 var(--mc-balon);
}

.booking-step-head h1 {
  color: var(--mc-tinta);
  font-size: clamp(2rem, 4vw, 2.8rem);
}

.booking-progress::before {
  background: var(--mc-linea);
}

.booking-progress span {
  background: #cfd8cc;
  font-family: var(--mc-display);
  font-size: 1.2rem;
}

.booking-progress .is-active span {
  background: var(--mc-balon);
  box-shadow: 0 0 0 5px rgba(255, 106, 31, 0.2);
}

.booking-progress .is-done span {
  background: var(--mc-pasto);
}

.booking-card {
  border: 1px solid var(--mc-linea);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-neu);
}

.booking-card-intro h2 {
  color: var(--mc-pasto-hondo);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

/* Elegir deporte: la mitad de arriba de la tarjeta es cancha. */
.booking-option-card {
  border: 1px solid var(--mc-linea);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, transparent 0 58%, #ffffff 58% 100%),
    repeating-linear-gradient(90deg, var(--mc-pasto) 0 22px, #0a6f3f 22px 44px);
}

.booking-option-card:hover,
.booking-option-card:focus-visible {
  border-color: var(--mc-balon);
  box-shadow: 0 16px 30px -18px rgba(15, 36, 25, 0.5);
  transform: translateY(-3px);
}

.booking-option-mark {
  border: 0;
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--mc-pasto);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.5);
  font-family: var(--mc-display);
}

.booking-option-card strong {
  font-family: var(--mc-display);
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.booking-date-card {
  min-height: 84px;
  border: 1px solid var(--mc-linea);
  border-radius: var(--radius-sm);
  transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.booking-date-card strong {
  font-family: var(--mc-display);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
}

.booking-date-card small,
.booking-date-card span {
  font-family: var(--mc-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.booking-date-card:hover {
  border-color: var(--mc-pasto);
  transform: translateY(-2px);
}

.booking-date-card.is-active {
  border: 1px solid var(--mc-pasto-hondo);
  background: var(--mc-pasto);
  color: #ffffff;
}

.booking-date-card.is-active small,
.booking-date-card.is-active span {
  color: rgba(255, 255, 255, 0.8);
}

.booking-slot-button {
  min-height: 56px;
  border: 1px solid var(--mc-linea);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--mc-tinta);
  box-shadow: none;
  font-family: var(--mc-display);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.05;
  transition: transform 120ms ease, background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.booking-slot-button:hover,
.booking-slot-button:focus-visible {
  border-color: var(--mc-pasto-hondo);
  background: var(--mc-pasto);
  color: #ffffff;
  transform: translateY(-2px);
}

/* El codigo de la reserva se entrega como un marcador. */
.booking-codigo {
  border-radius: var(--radius-sm);
  background: var(--mc-noche);
  color: #ffffff;
  font-family: var(--mc-display);
  font-weight: 800;
  letter-spacing: 0.24em;
}

.portal-reserva,
.portal-torneo {
  border: 1px solid var(--mc-linea);
  border-radius: var(--radius-sm);
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

a.portal-torneo:hover,
a.portal-torneo:focus-visible {
  border-color: var(--mc-pasto);
  box-shadow: var(--shadow-neu-sm);
  transform: translateY(-2px);
}

.portal-reserva-cuando strong,
.portal-torneo strong {
  font-family: var(--mc-display);
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.portal-reserva-cuando span {
  font-family: var(--mc-display);
  font-size: 1.05rem;
  font-weight: 700;
}

/* Tu equipo, en naranjo: se distingue de los clasificados, que van en verde. */
tr.es-mi-equipo td {
  background: #fff1e7;
}

.llave-partido.es-mi-equipo {
  border-color: var(--mc-balon);
  box-shadow: inset 3px 0 0 var(--mc-balon);
}

.publico-resultado {
  font-family: var(--mc-display);
  font-weight: 800;
}

.publico-resultado.es-g {
  background: var(--mc-pasto);
}

.publico-resultado.es-p {
  background: var(--color-danger);
}

/* La hora y la cancha, dichas como en un tablero. */
.booking-step-head {
  padding-top: 28px;
}

.booking-time-card > h3,
.booking-court-block h3 {
  margin-bottom: 4px;
  color: var(--mc-tinta);
  font-family: var(--mc-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.booking-time-card > h3 {
  color: var(--mc-pasto-hondo);
  font-size: 1.6rem;
}

.booking-slot-button small {
  color: var(--mc-gris);
  font-family: var(--mc-texto);
  font-size: 0.8rem;
  font-weight: 600;
}

.booking-slot-button:hover small,
.booking-slot-button:focus-visible small {
  color: rgba(255, 255, 255, 0.85);
}

.booking-date-card span {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .booking-step-head {
    padding-top: 20px;
  }

  /* Tres horas por fila: en una sola columna habia que desplazar media pantalla por cancha. */
  .booking-time-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .booking-slot-button {
    min-height: 52px;
    font-size: 1.1rem;
  }
}

.publico-cabeza h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
}

/* ---------------------------------------------------------------- panel */
.panel-kpis {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  margin-bottom: 0;
}

.panel-kpis .metric small {
  color: var(--mc-gris);
  font-family: var(--mc-display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.panel-kpis .metric span {
  font-size: 0.88rem;
}

.panel-hora {
  font-family: var(--mc-display);
  font-size: 1.2rem;
}

.panel-bienvenida {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.guia-barra {
  height: 8px;
  margin-bottom: var(--space-4);
  overflow: hidden;
  border-radius: 999px;
  background: var(--mc-linea-suave);
}

.guia-barra span {
  display: block;
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--mc-pasto) 0 14px, var(--mc-pasto-vivo) 14px 28px);
}

.guia-pasos {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guia-paso {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--mc-linea-suave);
}

.guia-paso strong {
  font-family: var(--mc-display);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.guia-paso p {
  margin: 2px 0 0;
}

.guia-paso .status-pill {
  justify-content: center;
}

.status-pill.guia-listo {
  background: var(--mc-pasto);
  color: #ffffff;
}

.status-pill.guia-falta {
  background: #fff0e6;
  color: var(--mc-balon-hondo);
}

.status-pill.guia-opcional {
  background: #eef1ec;
  color: var(--mc-gris);
}

.guia-paso.es-listo strong {
  color: var(--mc-pasto-hondo);
}

.guia-enlace {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 26px, transparent 26px 52px),
    var(--mc-noche);
  color: #ffffff;
}

.guia-enlace .muted {
  margin: 2px 0 0;
  color: rgba(220, 235, 225, 0.72);
}

.guia-enlace strong {
  font-family: var(--mc-display);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.guia-url {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-family: var(--mc-display);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

.guia-url:hover {
  background: var(--mc-balon);
}

.guia-reglas {
  margin-top: var(--space-4);
}

@media (max-width: 640px) {
  .guia-paso {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .guia-paso .status-pill {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* ---------------------------------------------------------------- movimiento */
@media (prefers-reduced-motion: reduce) {
  button,
  .button-primary,
  .bloque,
  .llave-partido,
  .booking-date-card,
  .booking-slot-button,
  .booking-option-card,
  .portal-torneo {
    transition: none;
  }

  button:hover,
  .button-primary:hover,
  .bloque-libre:hover,
  a.bloque:hover,
  a.llave-partido:hover,
  .booking-date-card:hover,
  .booking-slot-button:hover,
  .booking-option-card:hover,
  a.portal-torneo:hover {
    transform: none;
  }

  .status-pill.torneo-en_juego::before {
    animation: none;
  }
}