/* Hoja de estilos única, sin dependencias externas (funciona sin internet). */

:root {
  --bg: #ffffff;
  --panel: #ffffff;
  --text: #241f2b;
  --muted: #7a7188;
  --border: #e6dff2;
  --primary: #7F00FF;
  --primary-dark: #6200cc;
  --accent: #d9a441;
  --success: #4c8c5d;
  --danger: #c0503f;
  --radius: 10px;
  /* Sombras y resplandor reutilizables: dan profundidad/textura a paneles,
     tarjetas y botones en vez de quedar todo plano. Se redefinen dentro de
     .dark-mode más abajo para que se vean bien también en modo oscuro. */
  --shadow-sm: 0 1px 2px rgba(36, 31, 43, 0.06), 0 1px 1px rgba(36, 31, 43, 0.04);
  --shadow-md: 0 6px 16px rgba(36, 31, 43, 0.09), 0 2px 6px rgba(36, 31, 43, 0.05);
  --shadow-lg: 0 16px 40px rgba(36, 31, 43, 0.16), 0 6px 16px rgba(36, 31, 43, 0.08);
  --primary-glow: rgba(127, 0, 255, 0.25);
}

* { box-sizing: border-box; }

/* Los <button> no heredan la tipografía de la página por defecto en los
   navegadores (usan la fuente del sistema), así que sin esta regla todos
   los botones (incluida la barra lateral) se veían con una letra distinta
   al resto del texto en Raleway. */
button { font-family: inherit; }

body {
  margin: 0;
  /* Raleway se carga desde Google Fonts (ver base.html); si no hay
     conexión en ese momento, cae de forma automática y sin parpadeos a
     una tipografía del sistema muy similar. */
  font-family: "Raleway", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a { color: var(--primary-dark); }

.layout { display: flex; min-height: 100vh; }

/* Colores y tipografía inspirados en la barra de navegación de apple.com:
   fondo claro, texto gris oscuro/negro casi puro, peso de letra ligero y
   un resalte muy sutil en gris claro para el hover/activo. */
.sidebar {
  width: 220px;
  background: #fbfbfd;
  color: #1d1d1f;
  padding: 20px 0;
  flex-shrink: 0;
  border-right: 1px solid #d2d2d7;
  box-shadow: 2px 0 16px rgba(29, 29, 31, 0.05);
  position: relative;
  z-index: 2;
}

.sidebar .brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 16px 24px;
  border-bottom: 1px solid #d2d2d7;
  margin-bottom: 22px;
}
.sidebar .brand-logo {
  width: 100%;
  max-width: 188px;
  height: auto;
  object-fit: contain;
}

.sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #424245;
  text-decoration: none;
  padding: 10px 20px;
  font-size: 0.92rem;
  font-weight: 400;
  transition: background .15s ease, color .15s ease;
}

.sidebar .nav-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

.sidebar a:hover { background: #f5f5f7; color: #1d1d1f; }
.sidebar a.active { background: #f0f0f2; color: #1d1d1f; font-weight: 600; }

.main { flex: 1; padding: 24px 32px; max-width: 1200px; }

h1 { font-size: 1.5rem; margin-top: 0; }
h2 { font-size: 1.15rem; }

.panel {
  background: linear-gradient(180deg, #ffffff 0%, #fbf9ff 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.dark-mode .panel {
  background: linear-gradient(180deg, #1a1624 0%, #15121c 100%);
}

.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }

table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; }
tr:hover td { background: #faf7fd; }

.btn {
  display: inline-block;
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  font-size: 0.9rem;
  box-shadow: 0 2px 8px var(--primary-glow);
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { background: linear-gradient(180deg, var(--primary-dark) 0%, var(--primary) 100%); box-shadow: 0 4px 12px var(--primary-glow); transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: 0 1px 4px var(--primary-glow); }
.btn.secondary { background: #fff; color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.btn.secondary:hover { box-shadow: var(--shadow-md); }
.btn.danger { background: var(--danger); box-shadow: 0 2px 8px rgba(192, 80, 63, 0.25); }
.btn.small { padding: 4px 10px; font-size: 0.8rem; }
.btn-con-icono { display: inline-flex; align-items: center; gap: 6px; }
.btn-con-icono .btn-icono { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
/* Un badge puede ser también un enlace (p. ej. "cita agendada" que lleva a
   la agenda): sin esto se vería subrayado y con el azul de enlace normal
   por encima de su propio color. */
a.badge { text-decoration: none; cursor: pointer; }
a.badge:hover { filter: brightness(0.94); }
.badge.pendiente { background: #fbe9c8; color: #8a5a10; }
.badge.confirmada { background: #d9ecff; color: #1a5c96; }
.badge.completada { background: #d9f0dd; color: #2c6b3a; }
.badge.cancelada, .badge.no_show { background: #f7dad5; color: #a13a29; }
.badge.borrador { background: #eee; color: #666; }
.badge.visita-ok { background: #d9f0dd; color: #2c6b3a; }
.badge.visita-atencion { background: #fbe9c8; color: #8a5a10; }
.badge.visita-alerta { background: #f7dad5; color: #a13a29; }
.badge.visita-ninguna { background: #eee; color: #666; }

/* Avatar de profesional: foto si la hay, o un círculo de color con sus
   iniciales si no. Se usa tanto en el listado (pequeño) como en la
   cabecera de la ficha (grande). */
.avatar-circulo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
}
.avatar-circulo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-sm { width: 36px; height: 36px; font-size: 0.8rem; }
.avatar-lg { width: 96px; height: 96px; font-size: 1.9rem; }

.paleta-color-avatar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.paleta-color-avatar button {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; padding: 0;
}
.paleta-color-avatar button.color-actual { border-color: #1d1d1f; }
.dark-mode .paleta-color-avatar button.color-actual { border-color: #fff; }

.ficha-profesional-cabecera { display: flex; gap: 18px; align-items: center; }
.horario-dia-col { min-width: 120px; }
.horario-dia-col h4 { margin: 0 0 6px; font-size: 0.85rem; }

.dias-semana-checks { display: flex; gap: 6px; flex-wrap: wrap; }
.dia-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.8rem;
  cursor: pointer;
  user-select: none;
  background: var(--panel);
}
.dia-check input { margin: 0; }
.dia-check:has(input:checked) { background: var(--primary); color: #fff; border-color: var(--primary); }
.horario-bloque { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 4px; font-size: 0.85rem; }
.badge.enviada { background: #d9f0dd; color: #2c6b3a; }
.badge.abierta { background: #fbe9c8; color: #8a5a10; }
.badge.cobrada { background: #d9f0dd; color: #2c6b3a; }
.badge.anulada { background: #f7dad5; color: #a13a29; }

/* Estados del módulo de Leads (ver modules/leads.py, ESTADOS_INFO) */
.badge.lead-nuevo { background: #fbe9c8; color: #8a5a10; }
.badge.lead-contactado { background: #d9ecff; color: #1a5c96; }
.badge.lead-agendado { background: #d9f0dd; color: #2c6b3a; }
.badge.lead-descartado { background: #f7dad5; color: #a13a29; }

/* Contador de leads sin atender, junto al enlace "Leads" del menú lateral */
.nav-badge {
  margin-left: auto;
  padding: 1px 8px;
  font-size: 0.7rem;
}

form.inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }

label { display: block; font-size: 0.82rem; color: var(--muted); margin-bottom: 4px; }
input, select, textarea {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.92rem;
  font-family: inherit;
  width: 100%;
  box-shadow: inset 0 1px 2px rgba(36, 31, 43, 0.05);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}
.dark-mode input, .dark-mode select, .dark-mode textarea {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
.dark-mode input:focus, .dark-mode select:focus, .dark-mode textarea:focus {
  box-shadow: 0 0 0 3px var(--primary-glow);
}
.field { margin-bottom: 14px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 0.9rem; }
.flash.ok { background: #d9f0dd; color: #2c6b3a; }
.flash.error { background: #f7dad5; color: #a13a29; }

.stat-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.stat {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  min-width: 150px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, transform .15s ease;
}
.stat:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat .n { font-size: 1.6rem; font-weight: 700; }
.stat .l { font-size: 0.8rem; color: var(--muted); }

.week-grid { display: grid; grid-template-columns: 70px repeat(7, 1fr); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--panel); box-shadow: var(--shadow-sm); }
.week-grid .hcell { padding: 8px; text-align: center; font-weight: 600; font-size: 0.85rem; background: #f0e9fa; border-bottom: 1px solid var(--border); }
.week-grid .hour { padding: 6px; font-size: 0.75rem; color: var(--muted); border-top: 1px solid var(--border); text-align: right; }
.week-grid .slot { border-top: 1px solid var(--border); border-left: 1px solid var(--border); min-height: 34px; position: relative; padding: 2px; }
.week-grid .slot a.add { display:block; height:100%; text-decoration:none; }
.cita-chip {
  display: block;
  background: var(--primary);
  color: #fff;
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 0.72rem;
  margin-bottom: 2px;
  text-decoration: none;
  line-height: 1.25;
}
.cita-chip.confirmada { background: #1a5c96; }
.cita-chip.completada { background: #2c6b3a; }
.cita-chip.cancelada, .cita-chip.no_show { background: #a13a29; }

.agenda-legend { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }

/* Barra fija que aparece al pulsar "Mover" en la ventana de una cita: deja
   la rejilla y la navegación de días totalmente libres para poder ir a
   cualquier día/semana y hacer clic en la celda de destino. */
.agenda-barra-mover {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fbe9c8;
  color: #6b4a10;
  border: 1px solid #f0cd8a;
  border-radius: var(--radius);
  padding: 10px 16px;
  margin-bottom: 16px;
  font-size: 0.88rem;
}
.agenda-barra-mover strong { font-weight: 700; }

/* Rejilla horaria de la agenda (una columna por máquina) */
.agenda-wrap { overflow-x: auto; }
.agenda-grid {
  display: grid;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
  min-width: 100%;
  width: max-content;
  box-shadow: var(--shadow-sm);
}
.agenda-corner {
  background: #f0e9fa;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--muted);
}
.agenda-col-header {
  background: #f0e9fa;
  border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border);
  padding: 8px 6px;
  text-align: center;
  font-weight: 600;
  font-size: 0.85rem;
  position: sticky;
  top: 0;
  z-index: 3;
}
.agenda-time-col { position: relative; border-right: 1px solid var(--border); background: #faf7fd; }
.agenda-time-col .hora-label {
  position: absolute;
  left: 0; right: 4px;
  transform: translateY(-50%);
  font-size: 0.68rem;
  color: #a89bc2;
  text-align: right;
}
.agenda-time-col .hora-label.es-hora {
  font-size: 0.82rem;
  color: var(--text);
  font-weight: 700;
}
.agenda-col-body {
  position: relative;
  border-left: 1px solid var(--border);
  background: var(--panel);
  cursor: crosshair;
}
.agenda-col-body .hour-line {
  position: absolute;
  left: 0; right: 0;
  border-top: 1px dotted #e8e0f5;
  pointer-events: none;
}
.agenda-col-body .hour-line.es-hora {
  border-top: 1px solid var(--border);
}
.cita-block {
  position: absolute;
  left: 3px; right: 3px;
  background: var(--primary);
  color: #fff;
  border-radius: 6px;
  padding: 2px 5px;
  font-size: 0.7rem;
  line-height: 1.2;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  cursor: grab;
  border: 2px solid transparent;
}
.cita-block:active { cursor: grabbing; }
.cita-block.arrastrando {
  opacity: 0.35;
  transition: opacity .1s ease;
}
/* Vista previa del hueco donde caerá la cita mientras se arrastra: ya
   encajada (snap) en la rejilla de 5 minutos, para que el movimiento se
   sienta suave e integrado con las celdas en vez de tosco. */
.cita-preview-drop {
  position: absolute;
  left: 3px; right: 3px;
  border-radius: 6px;
  border: 2px dashed var(--primary);
  background: rgba(127, 0, 255, 0.14);
  pointer-events: none;
  z-index: 5;
  transition: top .08s ease-out;
}

/* Vista de semana completa (una columna por día, todas las máquinas
   juntas): igual que la rejilla del día, pero de solo lectura y con
   varias citas del mismo día una al lado de otra si se solapan (ver
   left/width calculados en modules/agenda.py, función semana()). */
.semana-grid {
  display: grid;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
  min-width: 100%;
  width: max-content;
  box-shadow: var(--shadow-sm);
}
.semana-col-body { cursor: crosshair; }
.agenda-col-header a { color: inherit; text-decoration: none; }
.agenda-col-header a:hover { text-decoration: underline; }
/* "Hoy" se distingue solo en la cabecera del día (color + subrayado), no
   tiñendo toda la columna de fondo, para no dar la sensación de que esa
   columna tiene algo distinto o roto. */
.semana-col-hoy { color: var(--primary); box-shadow: inset 0 -3px 0 var(--primary); }
.dark-mode .semana-col-hoy { color: var(--primary-dark); box-shadow: inset 0 -3px 0 var(--primary-dark); }
.semana-bloque {
  right: auto;
  cursor: pointer;
  font-size: 0.66rem;
}

/* Color según género del cliente (rosa = mujer, azul = hombre) */
.cita-block.g-M { background: #DA5A9A; }
.cita-block.g-H { background: #A4E9FF; color: #1b2a30; }
.cita-block.g-na { background: var(--primary); }

/* Cancelada / no-presentada: se atenúa sin importar el género */
.cita-block.e-cancelada, .cita-block.e-no_show { opacity: 0.55; filter: grayscale(40%); }
.cita-block.e-completada { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5), 0 1px 3px rgba(0,0,0,0.2); }

/* Indicativo verde de cita confirmada, superpuesto al color de género */
.cita-block.e-confirmada { border-color: #2ecc71; }
/* Validada por la profesional (se envió aviso) vs. confirmada por el
   cliente (etiqueta "CITA CONFIRMADA POR TLF"); esta última manda. */
.cita-block.validada-profesional { border-color: #4aa8e0; }
.cita-block.confirmada-cliente { border-color: #2ecc71; }
.confirmada-badge {
  display: block;
  margin-top: 2px;
  background: #2ecc71;
  color: #0d3d1f;
  border-radius: 4px;
  padding: 1px 4px;
  font-size: 0.65rem;
  font-weight: 700;
  width: fit-content;
}
.confirmada-badge.badge-profesional { background: #4aa8e0; color: #0d2b45; }

.cita-block-meta {
  font-size: 0.62rem;
  opacity: 0.92;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.cita-block-indicadores { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 2px; }
.cita-block-indicadores .confirmada-badge { margin-top: 0; }
.pack-badge {
  background: #fff3d6;
  color: #7a5a00;
  border-radius: 4px;
  padding: 1px 4px;
  font-size: 0.62rem;
  font-weight: 700;
}
.pagada-badge {
  background: #2ecc71;
  color: #0d3d1f;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  flex-shrink: 0;
}
.movida-dot {
  display: inline-block;
  font-size: 0.6rem;
  margin-left: 3px;
  opacity: 0.85;
  cursor: help;
  vertical-align: middle;
}
.etiqueta-mini {
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.btn.secondary.pagada-activa { background: #2ecc71; color: #0d3d1f; border-color: #2ecc71; }

tr:target { background: #fbe9c8 !important; }

.pack-bar { background: #eee; border-radius: 999px; height: 8px; overflow: hidden; margin-top: 4px; }
.pack-bar > div { height: 100%; background: var(--success); }

.muted { color: var(--muted); font-size: 0.85rem; }
.text-right { text-align: right; }

/* Ventana emergente de una cita (clic en un bloque de la agenda) */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(36, 31, 43, 0.55);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-cita {
  background: var(--panel);
  border-radius: var(--radius);
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-header h2 { margin: 0 0 4px; font-size: 1.2rem; }
.modal-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.modal-col-izq { padding: 18px 20px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.modal-col-der { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.modal-lineas { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.modal-linea {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #faf7fd;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.88rem;
}
.linea-trash { text-decoration: none; opacity: 0.7; }
.linea-trash:hover { opacity: 1; }
.linea-editable { cursor: pointer; transition: background .12s ease, border-color .12s ease; }
.linea-editable:hover { background: #f0e9fa; border-color: #ddd0f0; }
.modal-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.etiqueta-chip {
  background: #f0e9fa;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.75rem;
  color: var(--text);
}
.etiqueta-chip a { text-decoration: none; margin-left: 2px; opacity: 0.75; }
.etiquetas-fijas { display: flex; flex-direction: column; gap: 10px; }
.etiqueta-opcion { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; cursor: pointer; }
.etiqueta-opcion input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 auto; padding: 0; }
.etiqueta-punto { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.mc-contacto { display: inline-flex; align-items: center; gap: 6px; }
.icono-contacto { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.icono-telefono, .icono-editar { color: var(--primary-dark); }
.icono-whatsapp { color: #25D366; }
.modal-subbox { background: #faf7fd; border: 1px solid var(--border); border-radius: 8px; padding: 10px; }
.modal-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.validar-btn {
  background: var(--success);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(76, 140, 93, 0.28);
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.validar-btn:hover { background: #3c7049; box-shadow: 0 4px 12px rgba(76, 140, 93, 0.32); transform: translateY(-1px); }
#mcPagarTpvBtn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px var(--primary-glow);
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
  margin-top: 8px;
}
#mcPagarTpvBtn:hover { background: var(--primary-dark); box-shadow: 0 4px 12px var(--primary-glow); transform: translateY(-1px); }
#mcPagarTpvBtn:disabled { opacity: 0.6; cursor: default; }
.modal-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.tab-btn {
  background: none;
  border: none;
  padding: 8px 10px;
  font-size: 0.82rem;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.tab-btn.active { color: var(--primary-dark); border-bottom-color: var(--primary); font-weight: 600; }
.tab-pane { min-height: 160px; }
.modal-catalogo { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; margin-top: 8px; }
.catalogo-categoria {
  background: #f0e9fa;
  padding: 6px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  position: sticky; top: 0;
}
.catalogo-item { padding: 8px 12px; font-size: 0.88rem; cursor: pointer; border-bottom: 1px solid var(--border); }
.catalogo-item:hover { background: #faf7fd; }
.modal-anadir { background: #faf7fd; border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
.modulos-stepper { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.modulos-stepper button {
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  font-size: 1rem;
}
.modal-anadir-botones { display: flex; gap: 8px; justify-content: flex-end; }
.cita-block-linea { font-size: 0.68rem; opacity: 0.92; }
.cita-block-comentario {
  font-size: 0.66rem;
  font-style: italic;
  opacity: 0.95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Pestaña "Con parámetros": rejilla de códigos por zona corporal (ej.
   mCC, hABD), personalizable desde Agenda > Parámetros. */
.parametros-grid {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  align-content: flex-start;
}
.parametro-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  background: #faf7fd;
  color: var(--text);
}
.parametro-item:hover { background: #f0e9fa; }
.parametro-item.g-M { border-color: #DA5A9A; }
.parametro-item.g-H { border-color: #6bb9d6; }

.modal-catalogo-titulo {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  margin: 12px 0 2px;
}
.modal-catalogo-titulo:first-child { margin-top: 0; }

@media (max-width: 700px) {
  .modal-body { grid-template-columns: 1fr; }
  .modal-col-izq { border-right: none; border-bottom: 1px solid var(--border); }
}

/* Catálogo de productos (TPV > Productos): rejilla de fichas con foto,
   pensada para poder ver de un vistazo el producto en vez de una tabla. */
.producto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
}
.producto-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 12px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, transform .15s ease;
}
.producto-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.producto-card.producto-inactivo { opacity: 0.6; }
.producto-badge-inactivo { position: absolute; top: 8px; right: 8px; }
.producto-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 140px;
  border-radius: 8px;
  background: #f0e9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 6px;
}
.producto-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.producto-img-placeholder { font-size: 2.4rem; opacity: 0.5; }
.producto-nombre { font-weight: 600; }
.producto-precio { color: var(--primary-dark); font-weight: 700; }
.producto-acciones {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
}
.producto-acciones .btn { width: 100%; text-align: center; }
.producto-form-imagen input[type="file"] { display: none; }

/* Catálogo visual de productos al añadir una línea en el TPV: en vez de un
   desplegable, se ven las fichas (con foto) para elegir con un clic. */
.producto-picker-field { flex: 1 0 100%; }
.producto-picker-field #productoPickerBuscador { margin-bottom: 8px; }
.producto-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px 2px;
}
.producto-picker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.producto-picker-item:hover { border-color: #ddd0f0; background: #faf7fd; box-shadow: var(--shadow-md); }
.producto-picker-item.seleccionado { border-color: var(--primary); background: #f0e9fa; box-shadow: 0 0 0 3px var(--primary-glow); }
.producto-picker-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 84px;
  border-radius: 6px;
  background: #f0e9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 4px;
}
.producto-picker-img img { width: 100%; height: 100%; object-fit: cover; }
.producto-picker-img .producto-img-placeholder { font-size: 1.6rem; }
.producto-picker-nombre { font-size: 0.8rem; font-weight: 600; line-height: 1.2; }
.producto-picker-precio { font-size: 0.8rem; color: var(--primary-dark); font-weight: 700; }
.producto-picker-stock { font-size: 0.7rem; }
#productoPickerVerMas { margin-top: 8px; }

.touch-mode .tpv-zone .producto-picker-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
.touch-mode .tpv-zone .producto-picker-item { padding: 10px; }
.touch-mode .tpv-zone .producto-picker-nombre,
.touch-mode .tpv-zone .producto-picker-precio { font-size: 0.92rem; }

/* Botón de la barra lateral para activar/desactivar el modo pantalla táctil
   (solo visible en TPV y Productos). El estado se guarda en este mismo
   dispositivo (localStorage), no es una preferencia del centro entero. */
.touch-toggle-wrap { padding: 6px 20px 14px; }
.touch-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, background .15s ease;
}
.touch-toggle-btn:hover { box-shadow: var(--shadow-md); }
.touch-toggle-btn.activo { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 2px 8px var(--primary-glow); }

/* Botón de la barra lateral para cambiar entre modo claro y modo oscuro.
   A diferencia del modo táctil, es visible en todas las secciones. */
.mode-toggle-wrap { padding: 10px 20px 6px; }
.mode-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s ease, background .15s ease;
}
.mode-toggle-btn:hover { background: #f5f5f7; box-shadow: var(--shadow-md); }

/* Usuario con sesión iniciada + botón de cerrar sesión, al pie de la
   barra lateral (debajo del interruptor de modo oscuro). */
.sesion-actual { padding: 4px 20px 16px; }
.sesion-nombre {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sesion-logout-btn { width: 100%; }

/* Selector de centro (multi-centro), justo debajo del logo: un desplegable
   para el admin central, o una simple etiqueta con el nombre del centro
   para quien ya está fijado a uno. Invisible por completo mientras solo
   exista un centro. */
.selector-centro { padding: 0 20px 14px; }
.selector-centro select {
  width: 100%;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
}
.selector-centro-fijo {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface);
  text-align: center;
}

/* Modo pantalla táctil: agranda botones, campos y filas de tabla dentro de
   la zona de TPV/Productos para poder tocarlos con el dedo sin fallar. No
   afecta a ninguna otra sección de la app (Agenda, Clientes, Marketing...). */
.touch-mode .tpv-zone { font-size: 1.1rem; }
.touch-mode .tpv-zone h1 { font-size: 1.75rem; }
.touch-mode .tpv-zone h2 { font-size: 1.3rem; }
.touch-mode .tpv-zone .btn {
  padding: 15px 24px;
  font-size: 1.05rem;
  border-radius: 10px;
  min-height: 50px;
}
.touch-mode .tpv-zone .btn.small {
  padding: 13px 18px;
  font-size: 0.95rem;
  min-height: 46px;
}
.touch-mode .tpv-zone input,
.touch-mode .tpv-zone select,
.touch-mode .tpv-zone textarea {
  padding: 14px 12px;
  font-size: 1.08rem;
  min-height: 50px;
}
.touch-mode .tpv-zone label { font-size: 0.95rem; margin-bottom: 6px; }
.touch-mode .tpv-zone .field { width: auto !important; min-width: 170px !important; margin-bottom: 18px; }
.touch-mode .tpv-zone .inline { gap: 16px; }
.touch-mode .tpv-zone th,
.touch-mode .tpv-zone td { padding: 18px 16px; font-size: 1.02rem; }
.touch-mode .tpv-zone .stat { padding: 20px 24px; }
.touch-mode .tpv-zone .stat .n { font-size: 2rem; }
.touch-mode .tpv-zone .panel { padding: 26px; }
.touch-mode .tpv-zone .producto-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px; }
.touch-mode .tpv-zone .producto-img-wrap { max-width: 180px; }
.touch-mode .tpv-zone .producto-acciones .btn { min-height: 48px; }

/* Panel lateral de la Agenda: recordatorios de asistencia (clientes que han
   respondido que no van a asistir), en el hueco libre a la derecha de la
   rejilla. Se activa/desactiva desde Configuración. */
.panel-lateral {
  width: 320px;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff 0%, #fbf9ff 100%);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dark-mode .panel-lateral { background: linear-gradient(180deg, #1a1624 0%, #15121c 100%); }
.panel-lateral-titulo { font-weight: 700; font-size: 0.95rem; }
.panel-banner-vacio { text-align: center; padding: 30px 10px; }

/* Lista de clientes pendientes: una tarjeta por cita */
.panel-airtable-lista { display: flex; flex-direction: column; gap: 8px; max-height: 75vh; overflow-y: auto; }
.panel-airtable-item { background: #faf7fd; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 0.8rem; box-shadow: var(--shadow-sm); }
.dark-mode .panel-airtable-item { background: var(--surface); }
.panel-airtable-campo { margin-bottom: 2px; word-break: break-word; }

/* En ventanas estrechas, el panel lateral estorbaría más de lo que ayuda:
   se oculta y la agenda recupera todo el ancho. */
@media (max-width: 1100px) {
  .panel-lateral { display: none; }
}

/* ============================================================
   MODO OSCURO — estilo "Garuda Linux" (negro + violeta).
   Se activa añadiendo la clase .dark-mode a <html> (ver base.html).
   La mayoría de superficies usan las variables de :root, así que
   basta con redefinirlas aquí; el resto de reglas de abajo cubre
   los colores que estaban escritos directamente en hexadecimal.
   ============================================================ */
:root.dark-mode {
  --bg: #0d0c12;
  --panel: #17141f;
  --text: #ece7f5;
  --muted: #9b90b0;
  --border: #2c2438;
  --primary: #9d4dff;
  --primary-dark: #b47aff;
  --accent: #e0b04c;
  --success: #5fbf76;
  --danger: #e0685a;
  --surface: #1e1a29;
  --surface-hover: #2a2436;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 1px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(157, 77, 255, 0.10);
  --primary-glow: rgba(157, 77, 255, 0.35);
  /* Pide al navegador controles nativos (scrollbars, selects, date
     pickers) en su variante oscura, para que combinen con el resto. */
  color-scheme: dark;
}

.dark-mode .sidebar {
  background: #131019;
  color: #ece7f5;
  border-right: 1px solid #2c2438;
}
.dark-mode .sidebar .brand { border-bottom: 1px solid #2c2438; }
.dark-mode .sidebar a { color: #b3a8c9; }
.dark-mode .sidebar a:hover { background: #201a2c; color: #ece7f5; }
.dark-mode .sidebar a.active { background: #2a2238; color: #fff; }

.dark-mode .mode-toggle-btn { background: var(--panel); border-color: var(--border); color: var(--text); }
.dark-mode .mode-toggle-btn:hover { background: var(--surface); }
.dark-mode .touch-toggle-btn { background: var(--panel); border-color: var(--border); color: var(--text); }

.dark-mode input,
.dark-mode select,
.dark-mode textarea {
  background: var(--panel);
  color: var(--text);
  border-color: var(--border);
}
.dark-mode .modulos-stepper button { background: var(--panel); border-color: var(--border); color: var(--text); }

.dark-mode .btn.secondary { background: var(--panel); color: var(--text); border: 1px solid var(--border); }

.dark-mode tr:hover td { background: var(--surface); }
.dark-mode .pack-bar { background: #26202f; }

.dark-mode .week-grid .hcell { background: var(--surface); }
.dark-mode .agenda-corner,
.dark-mode .agenda-col-header { background: var(--surface); }
.dark-mode .agenda-time-col { background: #15121c; }
.dark-mode .agenda-time-col .hora-label { color: #7c7093; }
.dark-mode .agenda-col-body .hour-line { border-top: 1px dotted #241f30; }
.dark-mode .cita-preview-drop { background: rgba(157, 77, 255, 0.22); }

.dark-mode .modal-overlay { background: rgba(0, 0, 0, 0.72); }
.dark-mode .modal-linea { background: var(--surface); }
.dark-mode .linea-editable:hover { background: var(--surface-hover); border-color: #3a3149; }
.dark-mode .etiqueta-chip { background: var(--surface); }
.dark-mode .modal-subbox { background: var(--surface); }
.dark-mode .catalogo-categoria { background: var(--surface); }
.dark-mode .catalogo-item:hover { background: var(--surface); }
.dark-mode .modal-anadir { background: var(--surface); }

.dark-mode .parametro-item { background: var(--surface); }
.dark-mode .parametro-item:hover { background: var(--surface-hover); }

.dark-mode .producto-img-wrap { background: var(--surface); }
.dark-mode .producto-picker-item:hover { border-color: #3a3149; background: var(--surface); }
.dark-mode .producto-picker-item.seleccionado { background: var(--surface-hover); }
.dark-mode .producto-picker-img { background: var(--surface); }

/* ============================================================
   INFORMES DE VENTAS
   ============================================================ */
.informe-barras {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 180px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.informe-barra-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 22px;
  flex: 1 0 auto;
  height: 100%;
}
.informe-barra-track {
  flex: 1;
  width: 100%;
  max-width: 26px;
  display: flex;
  align-items: flex-end;
  background: var(--surface);
  border-radius: 4px 4px 0 0;
}
.informe-barra {
  width: 100%;
  min-height: 2px;
  background: var(--primary);
  border-radius: 4px 4px 0 0;
  transition: background .15s ease;
}
.informe-barra-col:hover .informe-barra { background: var(--primary-dark); }
.informe-barra-label {
  margin-top: 6px;
  font-size: 0.65rem;
  color: var(--muted);
  white-space: nowrap;
}
.dark-mode .informe-barra-track { background: var(--surface); }

/* ============================================================
   BUSCADOR DE CLIENTE CON SUGERENCIAS (autocompletar)
   Usado en Agenda (ventana emergente y "Nueva cita") y en el TPV
   ("Nuevo ticket"): al escribir en la casilla, la lista de clientes
   que coinciden aparece justo debajo para elegir con un clic (o con
   las flechas del teclado + Intro), en vez de tener que abrir un
   desplegable aparte.
   ============================================================ */
.autocomplete-wrap { position: relative; }
.autocomplete-lista {
  position: absolute;
  z-index: 30;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-height: 260px;
  overflow-y: auto;
  box-shadow: var(--shadow-md);
}
.autocomplete-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.92rem;
}
.autocomplete-item:hover,
.autocomplete-item.activo { background: #faf7fd; }
.dark-mode .autocomplete-item:hover,
.dark-mode .autocomplete-item.activo { background: var(--surface); }
.autocomplete-vacio { padding: 8px 12px; color: var(--muted); font-size: 0.9rem; }

/* ============================================================
   IMPRESIÓN
   Oculta el menú lateral y cualquier control marcado como
   ".no-imprimir" (filtros, botones de acción) para que lo que se
   imprima o se guarde como PDF desde el navegador sea solo el
   contenido del informe, no la interfaz de gestión.
   ============================================================ */
@media print {
  .sidebar,
  .panel-lateral,
  .no-imprimir {
    display: none !important;
  }
  .main { margin: 0 !important; padding: 10px 4px !important; max-width: 100% !important; }
  .layout { display: block !important; }
  body { background: #fff !important; }
  .panel { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; }
}