/* ==========================================================================
   Panel de administración — CORE
   ==========================================================================
   Desktop: cabecera de 80px + barra lateral fija de 232px + contenido.
   Mobile (≤900px): cabecera compacta con hamburguesa y logo centrado; la
   barra lateral pasa a ser un drawer que se abre por encima del contenido.
   ========================================================================== */

/* ---- Cabecera ---- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 80px;
  padding: 0 var(--space-10);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.header-left { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.logo-group { display: flex; align-items: center; gap: var(--space-6); }
.logo-img { height: 26px; width: auto; max-width: 160px; display: block; object-fit: contain; }
.logo-sep { width: 1px; height: 24px; background: var(--border); }
.logo-suffix { font-size: var(--fs-sm); color: var(--text-secondary); }
.header-actions { display: flex; align-items: center; gap: var(--space-6); }

.menu-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 20px;
  cursor: pointer;
}

/* ---- Notificaciones ---- */
.notif-wrap { position: relative; }
.notif-btn {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 20px;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.notif-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.notif-badge {
  position: absolute;
  top: -2px;
  left: 16px;
  min-width: 18px;
  height: 18px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--text-on-primary);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 600;
  pointer-events: none;
}
.notif-panel { display: none; position: absolute; top: calc(100% + 12px); right: 0; width: 340px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); z-index: 300; box-shadow: var(--elevation-md); overflow: hidden; }
.notif-panel.open { display: block; }
.notif-panel-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4); border-bottom: 1px solid var(--border); }
.notif-panel-title { font-size: var(--fs-base); font-weight: 600; }
.notif-limpiar { background: none; border: none; color: var(--primary); font-family: var(--font-sans); font-size: var(--fs-sm); cursor: pointer; }
.notif-limpiar:hover { text-decoration: underline; }
.notif-list { max-height: 360px; overflow-y: auto; }
.notif-item { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--divider); font-size: var(--fs-sm); line-height: 1.4; border-left: 3px solid transparent; }
.notif-item.notif-primary { border-left-color: var(--primary); }
.notif-item.notif-amber { border-left-color: var(--amber); }
.notif-item.notif-critico { border-left-color: var(--critico); }
.notif-item:last-child { border-bottom: none; }
.notif-item-nombre { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.notif-item-detalle { color: var(--text-secondary); margin-top: 2px; }
.notif-item-hora { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 4px; }
.notif-empty { padding: var(--space-6) var(--space-4); text-align: center; color: var(--text-secondary); font-size: var(--fs-sm); }

/* ---- Menú de cuenta ---- */
.admin-menu-wrap { position: relative; }
.badge-admin {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 4px;
  background: none;
  border: none;
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 500;
  cursor: pointer;
}
.badge-admin i { font-size: 16px; color: var(--text-secondary); }
.badge-admin:hover { background: var(--bg-hover); }
.admin-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 240px;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-md);
  overflow: hidden;
  z-index: 300;
}
.admin-menu-dropdown.open { display: flex; }
.admin-menu-item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); font-size: var(--fs-base); color: var(--text-primary); cursor: pointer; }
.admin-menu-item i { font-size: 16px; color: var(--text-secondary); }
.admin-menu-item:hover { background: var(--bg-hover); }
#btn-logout:hover, #btn-logout:hover i { color: var(--critico); }
.admin-menu-item.info { cursor: default; font-size: var(--fs-sm); color: var(--text-secondary); word-break: break-all; }
.admin-menu-item.info:hover { background: none; }
a.admin-menu-item { text-decoration: none; }
.admin-menu-separator { height: 1px; background: var(--border); }

/* ---- Pantallas ---- */
#screen-dashboard { display: none; }
#screen-dashboard.active { display: block; }
#screen-auth { display: none; }
#screen-auth.active { display: flex; }

/* El footer queda alineado con el contenido, no debajo de la barra lateral. */
.app-footer { padding-left: calc(232px + var(--space-10)); text-align: left; padding-top: 0; }

/* ---- Shell: barra lateral + contenido ---- */
.admin-shell { display: flex; align-items: stretch; min-height: calc(100vh - 80px); }

.sidebar {
  position: sticky;
  top: 80px;
  align-self: flex-start;
  width: 232px;
  height: calc(100vh - 80px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-7) var(--space-4);
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.sidebar-head { display: none; }
.sidebar-label { font-size: var(--fs-2xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.02em; }
.sidebar-overlay { display: none; }

.nav-tabs { display: flex; flex-direction: column; gap: var(--space-2); }
.nav-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 46px;
  padding: 0 14px;
  border-radius: var(--radius);
  font-size: var(--fs-base);
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.nav-tab i { font-size: 20px; }
.nav-tab:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-tab.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.nav-tab-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--text-on-primary);
  border-radius: var(--radius-full);
  font-size: var(--fs-2xs);
  font-weight: 700;
}

.admin-main { flex: 1; min-width: 0; }
.tab-screen { display: none; padding: var(--space-10);}
.tab-screen.active { display: block; }

/* ---- Encabezados de página ---- */
.page-head { margin-bottom: var(--space-6); }
.page-title { font-size: var(--fs-4xl); font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); }
.page-sub { margin-top: var(--space-2); max-width: 720px; font-size: var(--fs-base); line-height: 1.5; color: var(--text-secondary); }
.section-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.section-header .page-sub { margin-bottom: 0; }

.search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--input-h);
  padding: 0 var(--space-4);
  margin-bottom: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.search-wrap:focus-within { border-color: var(--primary); box-shadow: var(--focus-ring); }
.search-wrap i { font-size: 20px; color: var(--text-secondary); }
.search-wrap input { flex: 1; min-width: 0; height: 100%; background: none; border: none; outline: none; color: var(--text-primary); font-family: var(--font-sans); font-size: var(--fs-base); }

/* Estado vacío ilustrado (card con ícono en círculo). */
.empty-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 220px;
  padding: var(--space-8) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
  font-size: var(--fs-base);
  color: var(--text-secondary);
}
.empty-card-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);
  color: var(--primary);
  border-radius: var(--radius-full);
  font-size: 22px;
}

/* ---- Botones heredados del panel ----
   El JS todavía genera .btn-nav / .btn-primario / .btn-accion en varios
   lugares: se mapean a los estilos nuevos (secundario / primario / suave). */
.btn-nav, .btn-primario, .btn-accion, .btn-guardar {
  height: var(--control-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 18px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.btn-nav { background: var(--surface); border: 1px solid var(--border); color: var(--text-primary); }
.btn-nav:hover { background: var(--bg-hover); }
.btn-primario, .btn-guardar { background: var(--primary); border: 1px solid transparent; color: var(--text-on-primary); }
.btn-primario:hover, .btn-guardar:hover { background: var(--primary-hover); }
.btn-primario:disabled, .btn-guardar:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-accion { background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); }
.btn-accion:hover { background: var(--primary-soft-fuerte); }
.btn-full { width: 100%; }

.btn-icon {
  width: var(--control-h);
  height: var(--control-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.btn-icon:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-icon:disabled { opacity: 0.6; cursor: default; }

.icon-sm { font-size: var(--fs-sm); }
.icon-critico-sm { font-size: var(--fs-sm); color: var(--critico); }
.icon-amber-sm { font-size: 16px; color: var(--amber-text); }

/* ==========================================================================
   Mes (turnos)
   ========================================================================== */
/* Selector Clases / Fisio (solo superadmin) + filtro por fisio. */
.mes-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.mes-modo { display: flex; gap: var(--space-1); padding: var(--space-1); background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius); }
.mes-modo-btn {
  min-width: 120px;
  height: 38px;
  padding: 0 var(--space-4);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.mes-modo-btn:hover { color: var(--text-primary); }
.mes-modo-btn.active { background: var(--surface); border-color: var(--border); color: var(--primary); font-weight: 600; }
.mes-fisio-filtro {
  min-width: 220px;
  height: 46px;
  padding: 0 40px 0 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2369768c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
.mes-fisio-filtro:focus { border-color: var(--primary); box-shadow: var(--focus-ring); }

.mes-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-7); }
.mes-actual { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.semana-label { font-size: var(--fs-3xl); font-weight: 600; color: var(--text-primary); }
.mes-actual-sub { font-size: var(--fs-sm); color: var(--text-secondary); }

/* Tabs de semana: saltan directo a un tramo del mes y quedan pegadas
   debajo de la cabecera mientras se scrollea (solo desktop). */
.semanas-tabs {
  position: sticky;
  top: 80px;
  z-index: 90;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) 0;
  margin: calc(-1 * var(--space-3)) 0 var(--space-4);
  background: var(--bg-canvas);
}
.semanas-tabs:empty { display: none; }
.semana-tab-btn {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  min-height: 114px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.semana-tab-btn:hover { border-color: var(--primary); }
.semana-tab-btn.active { background: var(--primary); border-color: var(--primary); }
.semana-tab-top { display: flex; justify-content: space-between; gap: 6px; font-size: var(--fs-2xs); }
.semana-tab-num { font-weight: 600; text-transform: uppercase; color: var(--text-secondary); }
.semana-tab-rango { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.semana-tab-cuenta { display: flex; flex-direction: column; gap: var(--space-2); }
.semana-tab-total { font-size: var(--fs-2xl); font-weight: 600; line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.semana-tab-label { font-size: var(--fs-xs); color: var(--text-secondary); }
.semana-tab-btn.active .semana-tab-num,
.semana-tab-btn.active .semana-tab-rango,
.semana-tab-btn.active .semana-tab-label { color: var(--text-on-primary-muted); }
.semana-tab-btn.active .semana-tab-total { color: var(--text-on-primary); }

.turnos-resumen { margin: 0 0 var(--space-7); }

.semana-bloque { scroll-margin-top: 240px; }
.semana-bloque + .semana-bloque { margin-top: var(--space-7); padding-top: var(--space-7); border-top: 1px solid var(--border); }
.semana-divider { display: flex; align-items: baseline; gap: 10px; margin-bottom: var(--space-5); }
.semana-divider-num { font-size: var(--fs-xl); font-weight: 600; color: var(--text-primary); }
.semana-divider-rango { font-size: var(--fs-base); color: var(--text-secondary); }

.dias-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--space-6); }
.dia-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  scroll-margin-top: 240px;
}
.dia-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.dia-card-fecha { font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; color: var(--text-primary); }
.dia-sep-badge { padding: 5px 10px; background: var(--surface-sunken); border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: 500; color: var(--text-secondary); white-space: nowrap; }
.dia-sep-badge.con-turnos { background: var(--primary-soft); color: var(--primary); }
.dia-vacio {
  flex: 1;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  font-size: var(--fs-base);
  color: var(--text-secondary);
}
.dia-vacio i { font-size: 32px; color: var(--text-muted); }

.turno-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.turno-card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.turno-hora { font-size: var(--fs-3xl); font-weight: 600; line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.turno-ocupacion { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.turno-ocupacion-num { font-size: 16px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.turno-ocupacion-num.lleno, .turno-libres.lleno { color: var(--critico); }
.turno-libres { font-size: var(--fs-xs); color: var(--text-secondary); }
.turno-fisio { margin-top: 6px; font-size: var(--fs-sm); color: var(--celeste); font-weight: 500; }
.turno-barra { height: 4px; background: var(--border); border-radius: var(--radius-full); overflow: hidden; }
.turno-barra-fill { height: 100%; width: calc(var(--pct, 0) * 1%); background: var(--primary); border-radius: var(--radius-full); transition: width var(--duration) var(--ease); }
.turno-barra-fill.lleno { background: var(--critico); }
.turno-clientes { display: flex; flex-direction: column; gap: var(--space-3); }
.turno-clientes:empty { display: none; }
.turno-cliente-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.turno-cliente-nombre-wrap { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.turno-cliente-nombre-wrap::before { content: ''; width: 6px; height: 6px; flex-shrink: 0; border-radius: 3px; background: var(--text-muted); }
.turno-cliente-nombre { font-size: var(--fs-base); font-weight: 500; color: var(--text-primary); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.turno-cliente-nombre:hover { text-decoration: underline; }
.turno-cliente-nombre.turno-cliente-destacado-fisio { color: var(--celeste); }
.turno-cliente-nombre.turno-cliente-destacado-cliente { color: var(--amber-text); }
.btn-turno-cancel {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.btn-turno-cancel:hover { background: var(--critico-soft); color: var(--critico); }
.btn-turno-agregar { width: 100%; }
.btn-turno-agregar.lleno { color: var(--critico); }

.slots-vacios-wrap { display: flex; flex-direction: column; gap: var(--space-3); }
.btn-agregar-otro-horario {
  align-self: flex-start;
  height: var(--control-h-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  background: none;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.btn-agregar-otro-horario i { font-size: 16px; }
.btn-agregar-otro-horario:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.slots-vacios-lista { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.slot-vacio-btn {
  height: var(--control-h-sm);
  padding: 0 var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.slot-vacio-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }

/* ==========================================================================
   Clientes / Equipo (comparten grilla y card)
   ========================================================================== */
.clientes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: var(--space-5); }
.cliente-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(20, 40, 82, 0.03);
}
.cliente-card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.cliente-identidad { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.cliente-avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);
  color: var(--primary);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.cliente-nombre { font-size: 17px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cupo-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 36px; font-size: var(--fs-sm); color: var(--text-secondary); }
.cupo-row + .cupo-row { margin-top: calc(-1 * var(--space-2)); }
.plan-stepper-select {
  width: 62px;
  height: 32px;
  flex-shrink: 0;
  padding: 0 24px 0 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2369768c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
  transition: border-color var(--duration-fast) var(--ease);
}
.plan-stepper-select:hover, .plan-stepper-select:focus { border-color: var(--primary); }
.plan-stepper-readonly {
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--fs-base);
  font-weight: 600;
}
.cliente-actions { display: flex; gap: 10px; }
.cliente-actions:empty { display: none; }
.btn-fisio-obs { flex: 1; }
.btn-eliminar-icon {
  width: var(--control-h);
  height: var(--control-h);
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.btn-eliminar-icon:hover { border-color: color-mix(in srgb, var(--critico) 40%, transparent); color: var(--critico); background: var(--critico-soft); }
.btn-ver-historial {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  background: none;
  border: none;
  color: var(--primary);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
}
.btn-ver-historial i { font-size: 16px; }
.btn-ver-historial:hover { text-decoration: underline; }
.cliente-section-divider { border: none; border-top: 1px solid var(--border); margin: 0; }
.cliente-meta-grid { display: flex; flex-direction: column; gap: 9px; }
.cliente-meta-fila { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.cliente-meta-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.cliente-meta-icon { font-size: 14px; color: var(--text-secondary); flex-shrink: 0; }
.cliente-meta-val { font-size: var(--fs-xs); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Notas de fisio dentro de la card de cliente */
.fisio-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--space-3);
  border: 1px solid color-mix(in srgb, var(--celeste) 25%, transparent);
  border-radius: var(--radius);
  background: var(--celeste-soft);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--celeste);
  cursor: pointer;
}
.fisio-chevron { transition: transform var(--duration) var(--ease); }
.fisio-chevron.open { transform: rotate(90deg); }
.fisio-color { color: var(--celeste); }
.fisio-nota-card { margin-bottom: var(--space-2); padding: 10px var(--space-3); background: var(--celeste-soft); border: 1px solid color-mix(in srgb, var(--celeste) 25%, transparent); border-radius: var(--radius); font-size: var(--fs-sm); line-height: 1.45; }
.fisio-nota-card.comentario-cliente { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.fisio-nota-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: var(--fs-xs); color: var(--celeste); }
.fisio-nota-meta.comentario-cliente { color: var(--amber-text); }
.fisio-nota-eliminar { margin-top: 4px; padding: 0; background: none; border: none; color: var(--critico); font-family: var(--font-sans); font-size: var(--fs-xs); cursor: pointer; }

/* ---- Equipo ---- */
.equipo-acciones { display: flex; gap: var(--space-3); flex-shrink: 0; }
.equipo-email { margin-top: calc(-1 * var(--space-1)); font-size: var(--fs-sm); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rol-selector { display: flex; gap: var(--space-2); }
.rol-btn {
  flex: 1;
  height: 44px;
  padding: 0 var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.rol-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--text-primary); }
.rol-btn.active { background: var(--primary); border-color: var(--primary); color: var(--text-on-primary); font-weight: 600; }
.rol-btn:disabled { cursor: default; }
.equipo-self-note { font-size: var(--fs-xs); color: var(--text-muted); text-align: center; }
.equipo-socio-toggle { display: flex; align-items: center; gap: 10px; font-size: var(--fs-base); color: var(--text-secondary); cursor: pointer; }
.equipo-socio-toggle input { width: 20px; height: 20px; accent-color: var(--primary); }

/* ==========================================================================
   Solicitudes de horario fijo
   ========================================================================== */
.solicitudes-bloque + .solicitudes-bloque { margin-top: var(--space-8); }
.solicitudes-subtitulo { margin: var(--space-7) 0 var(--space-4); font-size: var(--fs-lg); font-weight: 600; color: var(--text-primary); }
#cambios-sesion-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--space-5); }
.solicitudes-titulo { margin-bottom: var(--space-4); font-size: var(--fs-xl); font-weight: 600; color: var(--text-primary); }
#solicitudes-fisio-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--space-5); }
#solicitudes-fisio-container > .empty-card { grid-column: 1 / -1; }
#solicitudes-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--space-5); }
#solicitudes-container > .empty-card, #solicitudes-container > .empty-state { grid-column: 1 / -1; }
.solicitud-card { padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.solicitud-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.solicitud-nombre { font-size: 17px; font-weight: 600; }
.solicitud-fecha { font-size: var(--fs-xs); color: var(--text-muted); }
.solicitud-dias { display: flex; flex-direction: column; gap: 2px; }
.solicitud-dia-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 10px var(--space-3); border-radius: var(--radius); font-size: var(--fs-base); }
.solicitud-dia-row.cambiado { background: var(--success-soft); }
.solicitud-dia-nombre { color: var(--text-secondary); }
.solicitud-dia-row.cambiado .solicitud-dia-nombre { color: var(--text-primary); font-weight: 600; }
.solicitud-dia-valor { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.solicitud-dia-valor .icon-arrow-right { font-size: var(--fs-sm); color: var(--success-dark); }
.valor-anterior { color: var(--text-muted); text-decoration: line-through; }
.valor-anterior.tachado { color: var(--critico); }
.valor-nuevo { color: var(--success-dark); font-weight: 700; }
.solicitud-acciones { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.solicitud-acciones > * { flex: 1; }

/* ==========================================================================
   Editor de horarios (Horarios / Horarios fisio)
   ========================================================================== */
.dias-template { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); align-items: start; margin-bottom: var(--space-6); }
.dia-col { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: background var(--duration) var(--ease); }
.dia-col-header { display: flex; align-items: center; justify-content: space-between; min-height: 36px; }
.dia-col-nombre { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); }
.dia-col.cerrado { background: color-mix(in srgb, var(--surface) 55%, var(--bg-canvas)); }
.dia-col.cerrado .dia-col-nombre { color: var(--text-faint); }
.dia-col.cerrado .btn-add-slot { opacity: 0.55; }
.dia-toggle { position: relative; width: 38px; height: 22px; flex-shrink: 0; border: none; border-radius: var(--radius-full); background: var(--border); cursor: pointer; transition: background var(--duration) var(--ease); }
.dia-toggle.on { background: var(--primary); }
.dia-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(23, 36, 61, 0.2); transition: left var(--duration) var(--ease); }
.dia-toggle.on::after { left: 19px; }

.slots-head { display: grid; grid-template-columns: 1fr 76px 28px; gap: var(--space-3); padding: 0 var(--space-3); font-size: var(--fs-xs); color: var(--text-secondary); }
.slots-lista { display: flex; flex-direction: column; gap: var(--space-2); }
.slots-lista:empty { display: none; }
.slot-row { display: grid; grid-template-columns: 1fr 76px 28px; align-items: center; gap: var(--space-3); min-height: 48px; padding: 6px var(--space-3); background: var(--surface-sunken); border-radius: var(--radius); }
.slot-hora { font-size: var(--fs-lg); font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.slot-cupos-input { width: 100%; height: 36px; padding: 0 var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--fs-md); outline: none; }
.slot-cupos-input:focus { border-color: var(--primary); box-shadow: var(--focus-ring); }
.slot-delete { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 16px; cursor: pointer; }
.slot-delete:hover { background: var(--critico-soft); color: var(--critico); }

.btn-add-slot { width: 100%; height: 44px; font-size: var(--fs-sm); }
.add-slot-form { display: none; }
.add-slot-form.visible { display: block; }
.add-slot-row { display: flex; gap: var(--space-2); align-items: center; }
.add-slot-row input { height: 40px; padding: 0 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--fs-base); outline: none; min-width: 0; }
.add-slot-row input:focus { border-color: var(--primary); box-shadow: var(--focus-ring); }
.add-slot-row input[type="time"] { flex: 1; }
.add-slot-row input[type="number"] { width: 70px; }
.btn-add-ok { width: auto; height: 40px; padding: 0 var(--space-4); }

.btn-guardar { min-width: 240px; }
.fisio-agenda-selector { max-width: 420px; margin-bottom: var(--space-5); }
.fisio-agenda-selector label { font-weight: 400; color: var(--text-secondary); }

/* ==========================================================================
   Mensajes
   ========================================================================== */
.mensajes-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.mensaje-form-card { padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.mensaje-form-card .form-group { margin-bottom: var(--space-3); }
.mensaje-form-card .form-group label { font-weight: 400; color: var(--text-secondary); }
.mensaje-form-card textarea { min-height: 136px; }
.mensaje-tipo-row { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.mensaje-tipo-btn {
  flex: 1;
  height: 44px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
}
.mensaje-tipo-btn.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.encuesta-hint { margin-bottom: var(--space-3); font-size: var(--fs-sm); color: var(--text-secondary); }

.section-label { margin-bottom: var(--space-4); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; color: var(--text-secondary); }
.mensaje-card { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.mensaje-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-1); }
.mensaje-badge { padding: 3px 9px; border-radius: var(--radius-full); font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; }
.mensaje-badge.encuesta { background: var(--primary-soft); color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); }
.mensaje-badge.aviso { background: var(--surface-sunken); color: var(--text-secondary); border: 1px solid var(--border); }
.mensaje-texto { font-size: var(--fs-md); font-weight: 600; line-height: 1.45; color: var(--text-primary); }
.mensaje-fecha { font-size: var(--fs-sm); color: var(--text-muted); }
.btn-eliminar-mensaje { margin-top: var(--space-2); }
.btn-eliminar-mensaje:hover { border-color: color-mix(in srgb, var(--critico) 40%, transparent); color: var(--critico); background: var(--critico-soft); }
.encuesta-resultado { margin-top: var(--space-2); }
.encuesta-resultado-titulo { margin-bottom: var(--space-3); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; color: var(--text-secondary); }
.encuesta-barra-row { margin-bottom: var(--space-3); }
.encuesta-barra-label { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: var(--fs-base); color: var(--text-primary); }
.encuesta-barra-track { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.encuesta-barra-fill { height: 100%; width: calc(var(--pct, 0) * 1%); border-radius: 3px; }
.encuesta-barra-fill.si { background: var(--success); }
.encuesta-barra-fill.no { background: var(--critico); }

/* ==========================================================================
   Videos
   ========================================================================== */
.video-upload-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--space-5); }
.video-upload-grid:empty { display: none; }
.video-upload-card { padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.video-card-header { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4); }
.video-card-icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary); border-radius: var(--radius); font-size: 20px; }
.video-card-heading { flex: 1; min-width: 0; }
.video-card-title { font-size: var(--fs-md); font-weight: 600; }
.video-card-sub { margin-top: 2px; font-size: var(--fs-xs); color: var(--text-secondary); }
.video-eliminar:hover { border-color: color-mix(in srgb, var(--critico) 40%, transparent); color: var(--critico); background: var(--critico-soft); }
.video-upload-card video { display: block; width: 100%; margin-bottom: var(--space-4); background: #000; border-radius: var(--radius); }
.video-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-6) var(--space-4);
  background: var(--surface-sunken);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.video-dropzone:hover, .video-dropzone.dragover { border-color: var(--primary); }
.video-dropzone.dragover { background: var(--primary-soft); }
.video-dropzone-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--surface); border-radius: var(--radius); color: var(--text-secondary); font-size: 18px; }
.video-dropzone-text { font-size: var(--fs-base); font-weight: 600; color: var(--text-primary); }
.video-dropzone-hint { font-size: var(--fs-xs); color: var(--text-secondary); }
.video-dropzone-link { color: var(--primary); font-weight: 600; text-decoration: underline; }
.video-reemplazar { display: block; margin-bottom: var(--space-4); padding: var(--space-3); border: 1px dashed var(--border); border-radius: var(--radius); text-align: center; font-size: var(--fs-xs); color: var(--text-secondary); cursor: pointer; transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease); }
.video-reemplazar:hover, .video-reemplazar.dragover { border-color: var(--primary); }
.video-reemplazar.dragover { background: var(--primary-soft); }
.video-titulo-group { margin-bottom: var(--space-4); }
.video-titulo-row { display: flex; gap: var(--space-2); }
.video-titulo-row input { flex: 1; }
.video-titulo-row .btn-icon { height: var(--input-h); width: var(--input-h); }
.video-subir-btn { width: 100%; }
.btn-crear-video { width: 100%; height: 44px; margin-top: var(--space-5); }
.video-upload-grid:empty + .btn-crear-video { margin-top: 0; }

/* ==========================================================================
   Configuración
   ========================================================================== */
.config-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--space-5); align-items: start; }
.config-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.config-card .form-group { margin-bottom: var(--space-1); }
.config-card .form-group label { font-weight: 400; color: var(--text-secondary); }
.config-card .msg { margin-top: 0; }
.config-card-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); }
.config-card-title i { font-size: 18px; color: var(--text-secondary); }
.config-card-title-lg { font-size: var(--fs-lg); font-weight: 500; }
.config-card-title-lg i { font-size: 20px; }
.config-card-text { font-size: var(--fs-base); line-height: 1.5; color: var(--text-secondary); }
.logo-preview { display: flex; align-items: center; justify-content: center; height: 124px; padding: var(--space-6); background: var(--surface-sunken); border-radius: var(--radius); }
.logo-preview-img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.config-file-name { font-size: var(--fs-sm); color: var(--text-muted); }

/* Permisos por rol: tabla sección × rol con casillas. */
.config-card-ancha { grid-column: 1 / -1; }
.config-card-ancha .btn-primary { align-self: flex-start; width: auto; }
.permisos-tabla-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.permisos-tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.permisos-tabla th, .permisos-tabla td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--divider); text-align: center; }
.permisos-tabla tr:last-child th, .permisos-tabla tr:last-child td { border-bottom: none; }
.permisos-tabla thead th { background: var(--surface-sunken); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; color: var(--text-secondary); }
.permisos-tabla thead th:first-child, .permisos-tabla tbody th { text-align: left; }
.permisos-tabla tbody th { font-weight: 400; }
.permisos-tabla td { width: 96px; }
.permiso-label { display: block; font-weight: 600; color: var(--text-primary); }
.permiso-desc { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--text-secondary); }
.permiso-check { width: 20px; height: 20px; accent-color: var(--primary); cursor: pointer; }
.permiso-na { color: var(--text-faint); }

/* ==========================================================================
   Reportes
   ========================================================================== */
.reporte-filtros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: var(--space-4);
  align-items: end;
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
/* min-width: 0 porque el <input type="date"> nativo de iOS Safari tiene un
   mínimo propio que sin esto hace desbordar la columna en pantallas angostas. */
.reporte-filtros .form-group { margin-bottom: 0; min-width: 0; }
.reporte-filtros .form-group label { font-weight: 400; color: var(--text-secondary); }
.reporte-filtros .form-group input { min-width: 0; }
.reporte-generar { width: auto; height: var(--input-h); padding: 0 var(--space-6); }
.reporte-tabla-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.reporte-tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.reporte-tabla th { padding: var(--space-3) var(--space-4); text-align: left; background: var(--surface-sunken); border-bottom: 1px solid var(--border); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; color: var(--text-secondary); }
.reporte-tabla td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--divider); }
.reporte-tabla tr:last-child td { border-bottom: none; }
.reporte-header-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.reporte-count { font-size: var(--fs-base); color: var(--text-secondary); }

/* ==========================================================================
   Modales del panel
   ========================================================================== */
.modal-buscar-wrap { margin-bottom: var(--space-4); }
.modal-buscar-wrap input {
  width: 100%;
  height: var(--input-h);
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  outline: none;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.modal-buscar-wrap input:focus { border-color: var(--primary); box-shadow: var(--focus-ring); }
.modal-btns-top { margin-top: var(--space-4); }
.modal-cliente-lista { margin-top: var(--space-2); max-height: 220px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.modal-cliente-lista-item { padding: var(--space-3) 14px; border-bottom: 1px solid var(--divider); font-size: var(--fs-base); cursor: pointer; }
.modal-cliente-lista-item:last-child { border-bottom: none; }
.modal-cliente-lista-item:hover { background: var(--bg-hover); }
.modal-cliente-lista-item.sin-resultados { cursor: default; color: var(--text-secondary); }
.modal-cliente-lista-item.sin-resultados:hover { background: none; }
.modal .rol-selector { margin-bottom: var(--space-4); }

.modal-header-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-1); }
.modal-close-x { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); font-size: 20px; line-height: 1; cursor: pointer; }
.modal-close-x:hover { background: var(--bg-hover); }
.modal-scroll { max-height: 320px; overflow-y: auto; }
#modal-nota-texto, #modal-agregar-fisio-texto {
  width: 100%;
  min-height: 136px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.45;
  outline: none;
  resize: vertical;
}
#modal-nota-texto:focus, #modal-agregar-fisio-texto:focus { border-color: var(--primary); box-shadow: var(--focus-ring); }
.fisio-textarea { border-color: color-mix(in srgb, var(--celeste) 35%, transparent) !important; margin: var(--space-3) 0; }

/* ---- Historial de clases de un cliente ---- */
.historial-overlay { display: none; position: fixed; inset: 0; z-index: 500; align-items: center; justify-content: center; padding: var(--space-6); background: rgba(22, 34, 59, 0.45); }
.historial-overlay.open { display: flex; }
.historial-panel { width: 100%; max-width: 480px; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--elevation-lg); }
.historial-panel-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-5); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.historial-panel-titulo { font-size: var(--fs-lg); font-weight: 600; }
.historial-panel-sub { margin-top: 2px; font-size: var(--fs-sm); color: var(--text-secondary); }
.historial-panel-lista { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); overflow-y: auto; }
.nota-historial-item { padding: var(--space-3) var(--space-4); background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.nota-historial-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); }
.nota-historial-fecha { font-size: var(--fs-base); font-weight: 600; text-transform: capitalize; }
.nota-historial-hora { font-size: var(--fs-sm); font-weight: 600; color: var(--primary); }
.nota-historial-texto { font-size: var(--fs-base); line-height: 1.5; color: var(--text-secondary); white-space: pre-wrap; }

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 1100px) {
  .mensajes-layout { grid-template-columns: 1fr; }
  .reporte-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reporte-generar { width: 100%; grid-column: 1 / -1; }
  .semanas-tabs { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .app-header { height: 64px; padding: 0 var(--space-5); }
  /* Logo centrado en el espacio entre la hamburguesa y las acciones. */
  .header-left { flex: 1; }
  .logo-group { margin: 0 auto; }
  .logo-img { height: 24px; }
  .header-actions { gap: var(--space-3); }
  .badge-admin { font-weight: 600; }

  .admin-shell { display: block; min-height: 0; }
  .app-footer { padding: 0 var(--space-5) var(--space-8); text-align: center; }

  /* Drawer: entra desde la izquierda debajo de la cabecera. */
  .sidebar {
    position: fixed;
    top: 64px;
    left: 0;
    bottom: 0;
    z-index: 150;
    width: 310px;
    max-width: calc(100vw - 48px);
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
    padding: 0 var(--space-3) var(--space-6);
    border-right: none;
    box-shadow: var(--elevation-lg);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--duration) var(--ease), visibility 0s linear var(--duration);
  }
  .sidebar.open { transform: none; visibility: visible; transition: transform var(--duration) var(--ease); }
  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 64px 0 0 0;
    z-index: 140;
    background: rgba(22, 34, 59, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration) var(--ease);
  }
  .sidebar-overlay.open { opacity: 1; pointer-events: auto; }
  .sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    margin: 0 calc(-1 * var(--space-3)) var(--space-3);
    padding: 0 var(--space-4) 0 var(--space-6);
    border-bottom: 1px solid var(--border);
  }
  .sidebar-head-title { font-size: var(--fs-lg); font-weight: 700; }
  .sidebar-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); font-size: 20px; cursor: pointer; }
  .sidebar-label { display: none; }
  .nav-tab { height: 52px; font-size: var(--fs-md); font-weight: 500; color: var(--text-primary); }
  .nav-tab i { font-size: 22px; color: var(--text-secondary); }
  .nav-tab.active { font-weight: 700; }
  .nav-tab.active i { color: var(--primary); }
  .nav-tab.active::before { content: ''; position: absolute; left: -12px; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); }

  .tab-screen { padding: var(--space-6) var(--space-5) var(--space-10); }
  .page-head { margin-bottom: var(--space-5); }
  .page-title { font-size: 26px; font-weight: 700; }
  .page-sub { margin-top: 6px; font-size: var(--fs-sm); }
  .section-header { flex-direction: column; align-items: stretch; gap: var(--space-5); margin-bottom: var(--space-5); }
  #tab-clientes .section-header { flex-direction: row; align-items: flex-start; }
  #tab-clientes .section-header .btn-secondary { height: 40px; padding: 0 var(--space-3); }

  /* Mes */
  .mes-toolbar { flex-direction: column; align-items: stretch; gap: var(--space-3); margin-bottom: var(--space-5); }
  .mes-modo-btn { flex: 1; min-width: 0; height: 40px; }
  .mes-fisio-filtro { width: 100%; }
  .mes-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px var(--space-3); margin-bottom: var(--space-5); }
  .mes-actual { grid-column: 1 / -1; order: -1; }
  .semana-label { font-size: 26px; font-weight: 700; }
  .mes-nav-btn { width: 100%; height: 44px; font-size: var(--fs-md); }
  .mes-nav-btn i { font-size: 20px; }
  .semanas-tabs { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 var(--space-5); padding: 0; }
  .semana-tab-btn { min-height: 0; gap: var(--space-2); padding: 14px; }
  .semana-tab-cuenta { flex-direction: row; align-items: baseline; gap: 6px; }
  .semana-tab-total { font-size: var(--fs-2xl); font-weight: 700; }
  .semana-tab-label { font-size: var(--fs-sm); }
  .turnos-resumen { margin-bottom: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border); }
  .semana-bloque { scroll-margin-top: 80px; }
  .semana-divider-num { font-size: var(--fs-xl); font-weight: 700; }
  .dias-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .dia-card { gap: var(--space-4); padding: var(--space-4); scroll-margin-top: 80px; }
  .dia-card-fecha { font-weight: 700; }
  .dia-vacio { min-height: 0; padding: var(--space-3) 0; gap: var(--space-2); }
  .dia-vacio i { font-size: 26px; }
  .turno-card { gap: var(--space-4); padding: var(--space-4); }
  .turno-hora { font-size: 26px; font-weight: 700; }
  .turno-cliente-nombre { font-size: var(--fs-md); }
  .btn-turno-cancel { width: 36px; height: 36px; font-size: 22px; }
  .icon-amber-sm { font-size: 20px; }
  .btn-agregar-otro-horario { align-self: stretch; justify-content: center; height: 44px; font-size: var(--fs-md); }
  .btn-turno-agregar { height: 44px; font-size: var(--fs-md); }

  /* Clientes / Equipo */
  .clientes-grid, #solicitudes-container, #solicitudes-fisio-container, #cambios-sesion-container, .video-upload-grid, .config-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .cliente-card { padding: var(--space-4); }
  .equipo-acciones { flex-direction: column; gap: var(--space-2); }
  .equipo-acciones > * { width: 100%; height: 44px; }

  /* Horarios */
  .dias-template { grid-template-columns: 1fr; gap: var(--space-4); }
  .btn-guardar { width: 100%; min-width: 0; height: 44px; }
  .fisio-agenda-selector { max-width: none; }

  /* Reportes */
  .reporte-filtros { grid-template-columns: 1fr; padding: var(--space-4); gap: var(--space-4); }
  .permisos-tabla th, .permisos-tabla td { padding: var(--space-3); }
  .permisos-tabla td { width: 64px; }
  .config-card-ancha .btn-primary { width: 100%; }

  /* En mobile la campana queda cerca del borde: el panel se ancla al
     viewport por los dos lados para no salirse de pantalla. */
  .notif-panel, .admin-menu-dropdown {
    position: fixed;
    top: 72px;
    left: 12px;
    right: 12px;
    width: auto;
    min-width: 0;
  }
}