/* Panel admin Consulta365 — sistema visual con variables CSS. */

/* ── Variables ───────────────────────────────────────────────────────── */
:root {
  /* Paleta neutra */
  --color-fondo: #f6f7f9;
  --color-superficie: #ffffff;
  --color-superficie-suave: #fafbfc;
  --color-texto: #1f2330;
  --color-texto-suave: #6b7180;
  --color-texto-debil: #9aa1ad;
  --color-borde: #e3e6eb;
  --color-borde-suave: #eef0f3;
  --color-borde-fuerte: #d6d9df;

  /* Acento (azul) */
  --color-acento: #2563eb;
  --color-acento-hover: #1d4ed8;
  --color-acento-suave: #eef4ff;
  --color-acento-borde: #c7dafe;
  --color-acento-texto: #1d4ed8;

  /* Semánticos */
  --color-peligro: #b32626;
  --color-peligro-hover: #8b1d1d;
  --color-peligro-suave: #fdecea;
  --color-peligro-texto: #8a1f12;
  --color-exito-suave: #e6f4ea;
  --color-exito-texto: #14512f;
  --color-aviso-suave: #fff8e6;
  --color-aviso-texto: #92400e;

  /* Estados de cita (preservados) */
  --estado-pendiente-bg: #fff5d6;
  --estado-pendiente-borde: #f4d067;
  --estado-confirmada-bg: #dff5e3;
  --estado-confirmada-borde: #6cc287;
  --estado-en-curso-bg: #d6e4ff;
  --estado-en-curso-borde: #6592ea;
  --estado-realizada-bg: #eef0f3;
  --estado-realizada-borde: #c5cad3;
  --estado-no-show-bg: #fdecea;
  --estado-no-show-borde: #d97a6c;

  /* Tipografía */
  --fuente-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fuente-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Espaciado */
  --espacio-1: 4px;
  --espacio-2: 8px;
  --espacio-3: 12px;
  --espacio-4: 16px;
  --espacio-5: 24px;
  --espacio-6: 32px;

  /* Radios */
  --radio-sm: 6px;
  --radio-md: 10px;
  --radio-lg: 14px;
  --radio-pill: 999px;

  /* Sombras */
  --sombra-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --sombra-md: 0 2px 8px rgba(15, 23, 42, 0.06);
  --sombra-lg: 0 8px 24px rgba(15, 23, 42, 0.08);
  --sombra-foco: 0 0 0 3px rgba(37, 99, 235, 0.18);

  --transicion: 120ms ease;
}

/* ── Reset y base ────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--fuente-base);
  background: var(--color-fondo);
  color: var(--color-texto);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-acento); }
a:focus-visible {
  outline: none;
  box-shadow: var(--sombra-foco);
  border-radius: var(--radio-sm);
}

/* ── Topbar / Navegación ─────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: var(--color-superficie);
  border-bottom: 1px solid var(--color-borde);
  box-shadow: var(--sombra-sm);
  position: sticky;
  top: 0;
  z-index: 100;
}
.topbar .brand {
  font-weight: 700;
  text-decoration: none;
  color: var(--color-texto);
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.brand-icono {
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;
}
.brand-texto {
  display: inline-block;
  line-height: 1;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logout-form { margin: 0; }
.logout-form button {
  background: transparent;
  border: 1px solid var(--color-borde-fuerte);
  padding: 6px 12px;
  border-radius: var(--radio-sm);
  cursor: pointer;
  color: var(--color-texto-suave);
  font-family: inherit;
  font-size: 0.88rem;
  transition: all var(--transicion);
}
.logout-form button:hover {
  border-color: var(--color-texto-suave);
  color: var(--color-texto);
}

/* ── Layout ──────────────────────────────────────────────────────────── */
.content {
  max-width: 1320px;
  margin: 32px auto;
  padding: 0 16px;
}

/* ── Cards ───────────────────────────────────────────────────────────── */
.card {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  padding: 28px;
  margin-bottom: 24px;
  box-shadow: var(--sombra-sm);
}
.card h1 {
  margin-top: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.card h2 {
  margin-top: 28px;
  margin-bottom: 12px;
  font-size: 1.1rem;
  font-weight: 600;
}
.card .muted { color: var(--color-texto-suave); }
.card .hint { color: var(--color-texto-suave); font-size: 0.9rem; }

.login-card {
  max-width: 420px;
  margin: 80px auto;
}

/* ── Formularios ─────────────────────────────────────────────────────── */
.form-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form-stack label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-texto);
}
.form-stack input,
.form-stack select,
.form-stack textarea {
  padding: 10px 12px;
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-sm);
  font-size: 1rem;
  font-family: inherit;
  background: var(--color-superficie);
  color: var(--color-texto);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.form-stack input:focus,
.form-stack select:focus,
.form-stack textarea:focus {
  outline: none;
  border-color: var(--color-acento);
  box-shadow: var(--sombra-foco);
}
.form-stack textarea {
  font-family: var(--fuente-mono);
  font-size: 0.9rem;
}
.form-stack button {
  padding: 10px 18px;
  border: 0;
  border-radius: var(--radio-sm);
  background: var(--color-acento);
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  align-self: flex-start;
  font-family: inherit;
  transition: background var(--transicion);
}
.form-stack button:hover { background: var(--color-acento-hover); }
.form-stack .checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
}

/* ── Mensajes ────────────────────────────────────────────────────────── */
.error {
  background: var(--color-peligro-suave);
  color: var(--color-peligro-texto);
  padding: 10px 14px;
  border-radius: var(--radio-sm);
  border: 1px solid #f5c6c0;
}
.ok {
  background: var(--color-exito-suave);
  color: var(--color-exito-texto);
  padding: 10px 14px;
  border-radius: var(--radio-sm);
  border: 1px solid #c5e1cf;
}

/* ── Bloque de código ────────────────────────────────────────────────── */
.code {
  background: var(--color-texto);
  color: var(--color-fondo);
  padding: 14px;
  border-radius: var(--radio-sm);
  font-family: var(--fuente-mono);
  font-size: 0.85rem;
  overflow-x: auto;
}

/* ── Tabla KB summary ────────────────────────────────────────────────── */
.kb-summary {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
.kb-summary th,
.kb-summary td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-borde-suave);
}
.kb-summary th {
  color: var(--color-texto-suave);
  font-weight: 500;
  font-size: 0.9rem;
}

/* ── Panel KB con bloques expandibles ─────────────────────────────────── */
.kb-bloque {
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-sm);
  margin-top: 12px;
  background: var(--color-fondo);
}
.kb-bloque[open] {
  border-color: var(--color-acento, #2563eb);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.kb-bloque > summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.kb-bloque > summary::-webkit-details-marker { display: none; }
.kb-bloque > summary::before {
  content: "▸";
  color: var(--color-texto-suave);
  font-size: 0.85rem;
  margin-right: 8px;
  transition: transform 0.15s ease;
}
.kb-bloque[open] > summary::before { transform: rotate(90deg); }
.kb-bloque-titulo {
  font-weight: 600;
  font-size: 1rem;
  flex: 1;
}
.kb-bloque-meta {
  color: var(--color-texto-suave);
  font-size: 0.85rem;
  white-space: nowrap;
}
.kb-bloque > p,
.kb-bloque > form {
  padding: 0 16px 16px 16px;
  margin: 0;
}
.kb-bloque > p.muted { padding-top: 4px; }
.kb-bloque > form > * + * { margin-top: 10px; }

.links { padding-left: 18px; }

/* ── Dashboard de tiles ──────────────────────────────────────────────── */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: var(--espacio-4);
}
.tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--espacio-3);
  padding: 22px 20px;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  text-decoration: none;
  color: var(--color-texto);
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
  min-height: 130px;
}
.tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-md);
  border-color: var(--color-borde-fuerte);
}
.tile:focus-visible {
  outline: none;
  box-shadow: var(--sombra-foco);
  border-color: var(--color-acento);
}
.tile-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radio-md);
  background: var(--color-acento-suave);
  color: var(--color-acento-texto);
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}
.tile-icono svg { width: 22px; height: 22px; }
.tile-label {
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-texto);
  line-height: 1.3;
}

/* Paleta por tile — rompe monocromía sin saturar */
.tile--azul    .tile-icono { background: #dbeafe; color: #1d4ed8; }
.tile--verde   .tile-icono { background: #dcfce7; color: #15803d; }
.tile--purpura .tile-icono { background: #ede9fe; color: #6d28d9; }
.tile--naranja .tile-icono { background: #ffedd5; color: #c2410c; }
.tile--ambar   .tile-icono { background: #fef3c7; color: #b45309; }
.tile--indigo  .tile-icono { background: #e0e7ff; color: #4338ca; }
.tile--rosa    .tile-icono { background: #fce7f3; color: #be185d; }
.tile--teal    .tile-icono { background: #ccfbf1; color: #0f766e; }
.tile--cyan    .tile-icono { background: #cffafe; color: #0e7490; }
.tile--rojo    .tile-icono { background: #fee2e2; color: #b91c1c; }
.tile--dorado  .tile-icono { background: #fef9c3; color: #a16207; }

/* Tile bloqueado — perfil info-only ve los tiles de agenda en gris para
   entender qué módulo le falta. El gris desatura tanto el icono coloreado
   del tile como el fondo, sin border dashed ni overlays cargados. */
.tile--locked {
  position: relative;
  opacity: 0.85;
}
.tile--locked .tile-icono {
  background: #e5e7eb;
  color: #6b7280;
}
.tile--locked .tile-label {
  color: #6b7280;
  font-weight: 500;
}
.tile--locked:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--color-borde);
}
.tile-candado {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 0.85rem;
  opacity: 0.6;
}

/* Item del nav en gris cuando el tenant es info-only y el destino es
   una pantalla de agenda. El href apunta a /admin/upgrade/agenda y el
   tooltip lo aclara. */
.topbar nav a.nav-item--locked,
.topbar nav a.nav-item--locked:hover {
  color: #9ca3af;
}
.topbar nav a.nav-item--locked::after {
  content: " 🔒";
  font-size: 0.75rem;
  opacity: 0.6;
}

/* ── Botones del catálogo ────────────────────────────────────────────── */
.boton-primario {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: 9px 16px;
  background: var(--color-acento);
  color: #fff;
  border: 1px solid var(--color-acento);
  border-radius: var(--radio-sm);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transicion), border-color var(--transicion);
}
.boton-primario:hover {
  background: var(--color-acento-hover);
  border-color: var(--color-acento-hover);
}
.boton-secundario {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: 9px 16px;
  background: var(--color-superficie);
  color: var(--color-texto);
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-sm);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--transicion), background var(--transicion);
}
.boton-secundario:hover {
  border-color: var(--color-texto-suave);
  background: var(--color-superficie-suave);
}
.boton-peligro {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: 9px 16px;
  background: var(--color-peligro);
  color: #fff;
  border: 1px solid var(--color-peligro);
  border-radius: var(--radio-sm);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transicion), border-color var(--transicion);
}
.boton-peligro:hover {
  background: var(--color-peligro-hover);
  border-color: var(--color-peligro-hover);
}

/* ── Tablas catálogo ─────────────────────────────────────────────────── */
.lista-espera-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--espacio-3);
  margin-bottom: var(--espacio-4);
}
.lista-espera-cabecera h1 { margin: 0; }
.cabecera-acciones {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  flex-wrap: wrap;
}
.lista-espera-filtros {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espacio-3);
  margin: var(--espacio-3) 0 var(--espacio-4);
  padding-bottom: var(--espacio-3);
  border-bottom: 1px solid var(--color-borde-suave);
  font-size: 0.92rem;
}
.lista-espera-filtros a {
  text-decoration: none;
  color: var(--color-texto-suave);
  padding: 4px 10px;
  border-radius: var(--radio-pill);
  transition: background var(--transicion), color var(--transicion);
}
.lista-espera-filtros a:hover {
  background: var(--color-superficie-suave);
  color: var(--color-texto);
}
.lista-espera-filtros .filtro-activo,
.lista-espera-filtros a.filtro-activo {
  background: var(--color-acento-suave);
  color: var(--color-acento-texto);
  font-weight: 600;
}
.lista-espera-filtros .separador {
  color: var(--color-texto-debil);
  user-select: none;
}

.lista-espera-tabla {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--espacio-2);
  font-size: 0.93rem;
}
.lista-espera-tabla thead th {
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid var(--color-borde-suave);
  padding: 10px 12px;
  color: var(--color-texto-suave);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--color-superficie-suave);
}
.lista-espera-tabla tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--color-borde-suave);
  vertical-align: middle;
}
.lista-espera-tabla tbody tr:hover { background: var(--color-superficie-suave); }
.lista-espera-tabla tbody tr:last-child td { border-bottom: none; }
.lista-espera-tabla a {
  color: var(--color-texto);
  text-decoration: none;
  font-weight: 500;
}
.lista-espera-tabla a:hover {
  color: var(--color-acento-texto);
  text-decoration: underline;
}
.columna-numero {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fila-con-aviso { background: #fffaf0; }
.fila-con-aviso:hover { background: #fff5e3; }

/* ── Chips / píldoras de estado ──────────────────────────────────────── */
.chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radio-pill);
  font-size: 0.78rem;
  font-weight: 500;
  background: var(--color-borde-suave);
  color: var(--color-texto-suave);
  border: 1px solid transparent;
}
.chip-activa {
  background: var(--color-exito-suave);
  color: var(--color-exito-texto);
  border-color: #c5e1cf;
}
.chip-cancelada,
.chip-inactiva {
  background: var(--color-borde-suave);
  color: var(--color-texto-suave);
  border-color: var(--color-borde);
}

/* Variantes semánticas reutilizables (estados de avisos, etc.) */
.chip-ok {
  background: var(--color-exito-suave);
  color: var(--color-exito-texto);
  border-color: #c5e1cf;
}
.chip-info {
  background: var(--color-acento-suave);
  color: var(--color-acento-texto);
  border-color: var(--color-acento-borde);
}
.chip-aviso {
  background: var(--color-aviso-suave);
  color: var(--color-aviso-texto);
  border-color: #f4d99a;
}
.chip-peligro {
  background: var(--color-peligro-suave);
  color: var(--color-peligro-texto);
  border-color: #f5c6c0;
}
.chip-neutro {
  background: var(--color-borde-suave);
  color: var(--color-texto-suave);
  border-color: var(--color-borde);
}

.color-pildora {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 6px;
  border: 1px solid rgba(0,0,0,0.06);
}
.color-pildora-sin {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 6px;
  background: repeating-linear-gradient(45deg, #e3e6eb, #e3e6eb 2px, #f6f7f9 2px, #f6f7f9 4px);
  border: 1px solid var(--color-borde);
}

/* ── Avisos ──────────────────────────────────────────────────────────── */
.aviso-hueco {
  display: inline-block;
  padding: 4px 10px;
  background: var(--color-peligro-suave);
  color: var(--color-peligro-texto);
  border-radius: var(--radio-sm);
  font-size: 0.85rem;
  border: 1px solid #f5c6c0;
}
.aviso-hueco-grande {
  padding: var(--espacio-4);
  background: var(--color-aviso-suave);
  border: 1px solid #f4d99a;
  border-radius: var(--radio-md);
  margin: var(--espacio-3) 0;
  color: var(--color-aviso-texto);
}
.aviso-hueco-grande h2 {
  margin-top: 0;
  margin-bottom: var(--espacio-2);
  font-size: 1rem;
  color: var(--color-aviso-texto);
}
.aviso-hueco-grande p { margin: 0; color: var(--color-aviso-texto); }

/* ── Formularios catálogo ────────────────────────────────────────────── */
.form-busqueda {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  margin-bottom: var(--espacio-3);
  flex-wrap: wrap;
}
.form-busqueda input[type="text"],
.form-busqueda input[type="search"] {
  padding: 8px 12px;
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-sm);
  font-size: 0.93rem;
  font-family: inherit;
  flex: 1 1 200px;
  min-width: 200px;
}
.form-busqueda input:focus {
  outline: none;
  border-color: var(--color-acento);
  box-shadow: var(--sombra-foco);
}
.etiqueta-busqueda {
  font-size: 0.85rem;
  color: var(--color-texto-suave);
  font-weight: 500;
}

.form-acciones {
  display: flex;
  gap: var(--espacio-3);
  flex-wrap: wrap;
  margin-top: var(--espacio-4);
  align-items: center;
}
.acciones-bloque {
  display: flex;
  gap: var(--espacio-2);
  align-items: center;
  flex-wrap: wrap;
}

.form-vertical {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}
.form-vertical label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-texto);
}
.form-vertical input[type="text"],
.form-vertical input[type="email"],
.form-vertical input[type="tel"],
.form-vertical input[type="date"],
.form-vertical input[type="time"],
.form-vertical input[type="number"],
.form-vertical input[type="color"],
.form-vertical select,
.form-vertical textarea {
  padding: 9px 12px;
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-sm);
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--color-superficie);
  color: var(--color-texto);
}
.form-vertical input:focus,
.form-vertical select:focus,
.form-vertical textarea:focus {
  outline: none;
  border-color: var(--color-acento);
  box-shadow: var(--sombra-foco);
}
.form-vertical textarea {
  resize: vertical;
  min-height: 80px;
}
.form-vertical fieldset {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
  padding: var(--espacio-3) var(--espacio-4);
  margin: 0;
}
.form-vertical legend {
  padding: 0 var(--espacio-2);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-texto);
}

.dos-columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espacio-3);
}
.dos-columnas > * { min-width: 0; }

.franja-fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}
.radio-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  font-size: 0.93rem;
  margin-right: var(--espacio-3);
  cursor: pointer;
}
.radio-inline input[type="radio"] { margin: 0; }

.inline-form {
  display: inline;
  margin: 0;
}
.inline {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
}

.lista-checkboxes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--espacio-2);
}
.lista-checkboxes li {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: 8px 10px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
  background: var(--color-superficie);
  font-size: 0.92rem;
}
.lista-checkboxes li:has(input:checked) {
  border-color: var(--color-acento);
  background: var(--color-acento-suave);
}
.lista-checkboxes input[type="checkbox"] { margin: 0; }
.lista-checkboxes label {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  margin: 0;
  cursor: pointer;
  flex: 1;
}

/* ── Misceláneo ─────────────────────────────────────────────────────── */
.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: var(--espacio-3);
  color: var(--color-texto-suave);
  text-decoration: none;
  font-size: 0.9rem;
}
.breadcrumb:hover { color: var(--color-acento-texto); }

.datos-resumen {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--espacio-2) var(--espacio-4);
  margin: var(--espacio-3) 0;
  padding: var(--espacio-4);
  background: var(--color-superficie-suave);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
}
.datos-resumen dt {
  font-weight: 500;
  color: var(--color-texto-suave);
  font-size: 0.9rem;
}
.datos-resumen dd {
  margin: 0;
  color: var(--color-texto);
  font-weight: 500;
}

.empty-state {
  text-align: center;
  padding: var(--espacio-6) var(--espacio-4);
  color: var(--color-texto-suave);
}
.empty-state p { margin: 0 0 var(--espacio-3); }

.small {
  font-size: 0.85rem;
  color: var(--color-texto-suave);
}

/* ── Agenda ──────────────────────────────────────────────────────────── */

.agenda-card { max-width: 100%; padding: 20px; }
.content:has(.agenda-card) { max-width: 1280px; }

.agenda-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.agenda-title { margin: 0; flex-shrink: 0; }
.agenda-subtitle { margin: 0; flex: 1 1 auto; color: var(--color-texto-suave); }
.agenda-fecha-form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.agenda-fecha-form input[type="date"] {
  padding: 6px 10px;
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-sm);
  font-size: 0.95rem;
  font-family: inherit;
}
.agenda-nav,
.agenda-go,
.agenda-hoy,
.agenda-toggle-dia,
.agenda-nueva-btn {
  text-decoration: none;
  border: 1px solid var(--color-borde-fuerte);
  background: var(--color-superficie);
  color: var(--color-texto);
  padding: 6px 12px;
  border-radius: var(--radio-sm);
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
}
.agenda-nav:hover,
.agenda-go:hover,
.agenda-hoy:hover,
.agenda-toggle-dia:hover { border-color: var(--color-texto-suave); }
.agenda-toggle-dia { font-size: 0.825rem; }

/* Badge "Plan Pro" en pantallas stub. */
.plan-pro-badge {
  display: inline-block;
  background: var(--color-acento);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.lista-features {
  list-style: none;
  padding-left: 0;
  margin: 16px 0;
}
.lista-features li {
  padding: 6px 0 6px 24px;
  position: relative;
}
.lista-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-acento);
  font-weight: 700;
}

/* Grupo "Plan Pro" en sidebar y sheet — separador + items con badge. */
.sidebar-nav-grupo,
.nav-sheet-grupo {
  display: block;
  margin-top: 16px;
  padding: 6px 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
  border-top: 1px solid var(--color-borde-suave);
}
.sidebar-nav-pro::after,
.nav-sheet-pro::after {
  content: "PRO";
  margin-left: 8px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: var(--color-acento);
  color: #fff;
  padding: 1px 6px;
  border-radius: 999px;
  vertical-align: middle;
}
.agenda-nueva-btn {
  background: var(--color-acento);
  color: #fff;
  border-color: var(--color-acento);
}
.agenda-nueva-btn:hover {
  background: var(--color-acento-hover);
  border-color: var(--color-acento-hover);
}
.agenda-nav { padding: 6px 10px; font-size: 1.1rem; line-height: 1; }
.agenda-hoy { background: var(--color-borde-suave); }

.agenda-scroll { overflow-x: auto; padding-bottom: 8px; }

.agenda-cabecera {
  display: grid;
  position: sticky;
  top: 0;
  background: var(--color-superficie);
  z-index: 2;
  border-bottom: 1px solid var(--color-borde);
}
.agenda-cabecera-hueco { background: var(--color-superficie); }
.agenda-prof {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--color-texto);
  font-size: 0.95rem;
  border-left: 1px solid var(--color-borde-suave);
}
.agenda-prof-color {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.agenda-grid {
  display: grid;
  position: relative;
  background: var(--color-superficie);
  border-top: 1px solid var(--color-borde-suave);
}
.agenda-hora {
  padding: 4px 8px 0 0;
  font-size: 0.78rem;
  color: var(--color-texto-suave);
  text-align: right;
  border-right: 1px solid var(--color-borde-suave);
}
.agenda-hora-linea {
  border-top: 1px solid #f1f3f6;
}

.agenda-bloqueo {
  background: repeating-linear-gradient(
    45deg, var(--color-fondo), var(--color-fondo) 6px, var(--color-borde-suave) 6px, var(--color-borde-suave) 12px
  );
  border-left: 1px solid var(--color-borde-suave);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-texto-suave);
  font-size: 0.85rem;
  padding: 8px;
  text-align: center;
}

.agenda-cita {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 1px 4px;
  padding: 6px 8px;
  border-radius: var(--radio-sm);
  text-decoration: none;
  color: var(--color-texto);
  font-size: 0.82rem;
  line-height: 1.2;
  overflow: hidden;
  border: 1px solid transparent;
  background: var(--color-borde-suave);
  z-index: 1;
}
.agenda-cita:hover { filter: brightness(0.96); }
.agenda-cita-cliente {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agenda-cita-meta {
  font-size: 0.75rem;
  color: #4a5060;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agenda-cita-estado {
  font-size: 0.7rem;
  color: var(--color-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.agenda-cita.estado-pendiente {
  background: var(--estado-pendiente-bg);
  border-color: var(--estado-pendiente-borde);
}
.agenda-cita.estado-confirmada {
  background: var(--estado-confirmada-bg);
  border-color: var(--estado-confirmada-borde);
}
.agenda-cita.estado-en_curso {
  background: var(--estado-en-curso-bg);
  border-color: var(--estado-en-curso-borde);
}
.agenda-cita.estado-realizada {
  background: var(--estado-realizada-bg);
  border-color: var(--estado-realizada-borde);
}
.agenda-cita.estado-no_show {
  background: var(--estado-no-show-bg);
  border-color: var(--estado-no-show-borde);
}

.agenda-leyenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.agenda-leyenda-item {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  border: 1px solid transparent;
}
.agenda-leyenda-item.estado-pendiente { background: var(--estado-pendiente-bg); border-color: var(--estado-pendiente-borde); }
.agenda-leyenda-item.estado-confirmada { background: var(--estado-confirmada-bg); border-color: var(--estado-confirmada-borde); }
.agenda-leyenda-item.estado-realizada { background: var(--estado-realizada-bg); border-color: var(--estado-realizada-borde); }
.agenda-leyenda-item.estado-no_show { background: var(--estado-no-show-bg); border-color: var(--estado-no-show-borde); }

/* Agenda — formulario nueva cita */

.agenda-form .huecos-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.huecos-block-label {
  font-size: 0.95rem;
  color: var(--color-texto);
  font-weight: 500;
}
#huecos-disponibles {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
  padding: 12px;
  background: var(--color-superficie-suave);
  min-height: 60px;
}
.huecos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin: 0;
}
.huecos-grid label {
  display: block;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-sm);
  padding: 8px 10px;
  cursor: pointer;
  text-align: center;
  font-size: 0.9rem;
}
.huecos-grid label:hover { border-color: var(--color-acento); }
.huecos-grid input[type="radio"] { display: none; }
.huecos-grid input[type="radio"]:checked + span {
  font-weight: 600;
}
.huecos-grid label:has(input:checked) {
  background: var(--color-acento);
  color: #fff;
  border-color: var(--color-acento);
}

/* ── Slice 2: acciones de cita ───────────────────────────────────────── */
.acciones-cita {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--color-borde);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.acciones-cita .accion-form {
  margin: 0;
}
.acciones-cita .accion-form > button,
.acciones-cita .cancelar-form > button,
.acciones-cita .btn-secundario {
  cursor: pointer;
  min-height: 44px;
  padding: 11px 18px;
  font-size: 1rem;
  font-weight: 500;
  border-radius: var(--radio-sm);
  width: 100%;
  box-sizing: border-box;
}
.acciones-cita .accion-form > button {
  background: var(--color-acento);
  color: #fff;
  border: 1px solid var(--color-acento);
}
.acciones-cita .accion-form > button:hover {
  background: var(--color-acento-hover, var(--color-acento));
  border-color: var(--color-acento-hover, var(--color-acento));
}
@media (min-width: 720px) {
  .acciones-cita .accion-form > button,
  .acciones-cita .cancelar-form > button,
  .acciones-cita .btn-secundario {
    width: auto;
  }
}
.acciones-cita .cancelar-form {
  background: #fdf6f6;
  border: 1px solid #f0d4d4;
  border-radius: var(--radio-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.acciones-cita .cancelar-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.9rem;
}
.acciones-cita .cancelar-form textarea {
  resize: vertical;
  font: inherit;
  padding: 6px 8px;
  border: 1px solid var(--color-borde-fuerte);
  border-radius: 4px;
}
.btn-secundario {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--color-borde-fuerte);
  background: var(--color-superficie);
  color: var(--color-texto);
  border-radius: var(--radio-sm);
  text-decoration: none;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--transicion), background var(--transicion);
}
.btn-secundario:hover {
  border-color: var(--color-texto-suave);
  background: var(--color-superficie-suave);
}
.btn-peligro {
  background: var(--color-peligro);
  color: #fff;
  border: 1px solid var(--color-peligro);
  align-self: flex-start;
}
.btn-peligro:hover {
  background: var(--color-peligro-hover);
  border-color: var(--color-peligro-hover);
}

/* ── Slice 3: tabs Día/Semana + vista semana ─────────────────────────── */
.agenda-tabs {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--color-borde-fuerte);
  border-radius: var(--radio-sm);
  overflow: hidden;
  margin-right: 8px;
}
.agenda-tab {
  padding: 6px 14px;
  background: var(--color-superficie);
  color: var(--color-texto);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  border-right: 1px solid var(--color-borde-fuerte);
}
.agenda-tab:last-child { border-right: none; }
.agenda-tab:hover { background: var(--color-superficie-suave); }
.agenda-tab-activa {
  background: var(--color-acento);
  color: #fff;
}
.agenda-tab-activa:hover { background: var(--color-acento-hover); }

.agenda-dia-cabecera {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  text-decoration: none;
  color: var(--color-texto);
  border-radius: 4px;
}
.agenda-dia-cabecera:hover { background: var(--color-superficie-suave); }
.agenda-dia-cabecera .agenda-dia-nombre {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--color-texto-suave);
  letter-spacing: 0.05em;
}
.agenda-dia-cabecera .agenda-dia-numero {
  font-weight: 600;
  font-size: 0.95rem;
}
.agenda-dia-hoy {
  background: var(--color-acento-suave);
}
.agenda-dia-hoy .agenda-dia-numero { color: var(--color-acento-texto); }

.agenda-cita-semana {
  font-size: 0.78rem;
  padding: 3px 5px;
  line-height: 1.2;
}
.agenda-cita-semana .agenda-cita-cliente {
  font-weight: 600;
}
.agenda-leyenda-prof {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
  font-size: 0.85rem;
}

/* ── Pantalla Conversaciones ─────────────────────────────────────────── */
.conv-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 20px 0 12px;
}
.conv-kpi-card {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  padding: 14px 16px;
  background: var(--color-superficie-suave);
}
.conv-kpi-titulo {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-texto-suave);
  margin-bottom: 8px;
}
.conv-kpi-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}
.conv-kpi-lista li {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
}
.conv-kpi-lista strong {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-texto);
}
.conv-kpi-lista span {
  color: var(--color-texto-suave);
  font-size: 0.78rem;
}
@media (max-width: 720px) {
  .conv-kpis { grid-template-columns: 1fr; }
}
.conv-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 12px 0 16px;
  padding: 12px;
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-md);
  background: var(--color-superficie);
}
.conv-filtro {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.conv-filtro label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-texto-suave);
}
.conv-filtro input[type="date"],
.conv-filtro input[type="search"],
.conv-filtro select {
  padding: 6px 8px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
  background: var(--color-fondo);
  color: var(--color-texto);
  font-size: 0.92rem;
}
.conv-filtro-busqueda {
  flex: 1 1 280px;
  min-width: 220px;
}
.conv-filtro-busqueda input[type="search"] {
  width: 100%;
}
.conv-filtro-acciones {
  flex-direction: row;
  gap: 8px;
}
.conv-preview mark {
  background: #fff4a3;
  color: var(--color-texto);
  padding: 0 2px;
  border-radius: 2px;
}
.conv-feedback {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--color-borde-suave);
}
.conv-feedback-pregunta {
  font-size: 0.78rem;
  color: var(--color-texto-suave);
  margin-right: 4px;
}
.conv-feedback-form {
  display: inline;
  margin: 0;
}
.conv-feedback-btn {
  background: transparent;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
  padding: 2px 8px;
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
  transition: background 0.1s, border-color 0.1s;
}
.conv-feedback-btn:hover { background: var(--color-superficie-suave); }
.conv-feedback-btn-activo-bueno {
  background: #dcfce7;
  border-color: #86efac;
}
.conv-feedback-btn-activo-malo {
  background: #fee2e2;
  border-color: #fca5a5;
}
.conv-ua {
  word-break: break-all;
  font-size: 0.78rem;
  color: var(--color-texto-suave);
}

/* ── Pantalla Signup ─────────────────────────────────────────────────── */
.signup-card {
  max-width: 520px;
}
.signup-errores {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-radius: var(--radio-md);
  padding: 12px 16px;
  margin-bottom: 16px;
}
.signup-errores ul {
  margin: 8px 0 0 0;
  padding-left: 20px;
}
.signup-errores li {
  font-size: 0.92rem;
}
.signup-errores li strong { text-transform: capitalize; }
.signup-politica {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--color-texto);
}
.signup-politica input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}
.signup-politica span { line-height: 1.45; }
.signup-politica a {
  color: var(--color-acento);
  text-decoration: underline;
}

/* ── Paginas legales (privacidad, terminos) ──────────────────────────── */
.legal-card {
  max-width: 760px;
}
.legal-card h2 {
  margin-top: 24px;
  font-size: 1.1rem;
  color: var(--color-texto);
}
.legal-card p,
.legal-card li {
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--color-texto);
}
.legal-card ul {
  padding-left: 22px;
  margin: 8px 0 12px;
}
.legal-card li { margin-bottom: 6px; }
.legal-card a {
  color: var(--color-acento);
  text-decoration: underline;
}

/* ── Historial de cancelaciones (ficha cliente) ──────────────────────── */
.cancelaciones-card { margin-top: 16px; }
.tabla-cancelaciones {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 0.9rem;
}
.tabla-cancelaciones thead th {
  text-align: left;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-texto-suave);
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-borde);
}
.tabla-cancelaciones tbody td {
  padding: 10px;
  border-bottom: 1px solid var(--color-borde-suave);
  vertical-align: top;
}
.tabla-cancelaciones tbody tr:last-child td { border-bottom: none; }
.tabla-cancelaciones a {
  color: var(--color-acento);
  text-decoration: underline;
}

.conv-tabla {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  font-size: 0.92rem;
}
.conv-tabla thead th {
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid var(--color-borde);
  padding: 10px;
  color: var(--color-texto-suave);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.conv-tabla tbody td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--color-borde-suave);
  vertical-align: top;
}
.conv-tabla tbody tr:hover { background: var(--color-superficie-suave); }
.conv-preview {
  color: var(--color-texto);
  text-decoration: none;
  font-weight: 500;
}
.conv-preview:hover { text-decoration: underline; color: var(--color-acento-texto); }
.conv-canal {
  display: inline-block;
  padding: 2px 8px;
  background: var(--color-acento-suave);
  color: var(--color-acento-texto);
  border-radius: var(--radio-pill);
  font-size: 0.78rem;
  font-weight: 500;
}
.conv-coste {
  font-variant-numeric: tabular-nums;
  color: var(--color-texto-suave);
  font-size: 0.85rem;
}
.conv-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radio-pill);
  font-size: 0.74rem;
  font-weight: 500;
  margin-left: 6px;
  vertical-align: middle;
}
.conv-tag-handoff {
  background: #25d366;
  color: #fff;
}
.conv-paginacion {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
  justify-content: center;
}

/* Detalle de conversación */
.conv-hilo {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.conv-bloque {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.conv-fecha-sep {
  text-align: center;
  position: relative;
  margin: 8px 0;
}
.conv-fecha-sep::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-borde);
  z-index: 0;
}
.conv-fecha-sep span {
  position: relative;
  background: var(--color-superficie);
  padding: 0 12px;
  color: var(--color-texto-suave);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 1;
}
.conv-msg {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: var(--radio-md);
  background: #f3f4f6;
}
.conv-msg-user {
  align-self: flex-start;
  background: #f3f4f6;
}
.conv-msg-asistente {
  align-self: flex-end;
  background: var(--color-acento-suave);
  color: #0d1c40;
}
.conv-msg-evento {
  align-self: center;
  background: var(--color-aviso-suave);
  font-size: 0.85rem;
  font-style: italic;
}
.conv-msg-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 0.85rem;
}
.conv-msg-hora {
  font-size: 0.75rem;
}
.conv-msg-body {
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* ── Pantalla Costes ─────────────────────────────────────────────────── */
.costes-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 18px;
  margin-bottom: 24px;
}
.costes-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  background: var(--color-superficie-suave);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
}
.costes-kpi-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-texto-suave);
}
.costes-kpi-valor {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-texto);
  font-variant-numeric: tabular-nums;
}
.costes-kpi-sub {
  font-size: 0.82rem;
  color: var(--color-texto-suave);
}
.costes-tabla {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 0.92rem;
}
.costes-tabla thead th {
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid var(--color-borde);
  padding: 8px 10px;
  color: var(--color-texto-suave);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.costes-tabla tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-borde-suave);
}
.costes-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.costes-fila-vacia td {
  color: var(--color-texto-debil);
}
.costes-periodo-activo {
  font-weight: 600;
  color: var(--color-texto);
}

/* ── Vista Mes de Agenda ─────────────────────────────────────────────── */
.agenda-mes-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: 12px;
}
.agenda-mes-grid thead th {
  text-align: left;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-texto-suave);
  padding: 6px 8px;
  border-bottom: 2px solid var(--color-borde);
}
.agenda-mes-celda {
  vertical-align: top;
  border: 1px solid var(--color-borde-suave);
  padding: 4px;
  height: 110px;
  width: calc(100% / 7);
  background: var(--color-superficie);
}
.agenda-mes-celda-fuera {
  background: var(--color-superficie-suave);
  color: var(--color-texto-debil);
}
.agenda-mes-celda-hoy {
  background: var(--color-acento-suave);
}
.agenda-mes-celda-hoy .agenda-mes-numero {
  color: var(--color-acento-texto);
  font-weight: 700;
}
.agenda-mes-numero {
  display: inline-block;
  text-decoration: none;
  color: var(--color-texto);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 4px;
}
.agenda-mes-numero:hover {
  background: var(--color-borde-suave);
}
.agenda-mes-celda-fuera .agenda-mes-numero {
  color: var(--color-texto-debil);
  font-weight: 400;
}
.agenda-mes-citas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.agenda-mes-cita {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  background: var(--color-borde-suave);
  border-radius: 3px;
  font-size: 0.75rem;
  text-decoration: none;
  color: var(--color-texto);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.agenda-mes-cita:hover {
  background: var(--color-borde);
}
.agenda-mes-cita-hora {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  color: var(--color-texto-suave);
}
.agenda-mes-cita-cliente {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agenda-mes-extras {
  display: block;
  padding: 1px 4px;
  font-size: 0.72rem;
  color: var(--color-texto-suave);
  text-decoration: none;
  font-style: italic;
}
.agenda-mes-extras:hover {
  text-decoration: underline;
}

/* ── Nav responsive (≤720px) ─────────────────────────────────────────── */
@media (max-width: 720px) {
  .topbar { padding: 10px 16px; }
  .content { padding: 0 12px; margin: 16px auto; }
  .card { padding: 18px; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .tile { min-height: 100px; padding: 16px 8px; }
  .tile-icono { width: 40px; height: 40px; font-size: 22px; }
  .tile-icono svg { width: 22px; height: 22px; }
  .dos-columnas { grid-template-columns: 1fr; }
}

/* ── PWA — sidebar desktop, bottom nav movil, sheet, toast ───────────── */
/*
 * Layout responsive:
 *   - movil (<=768px): topbar fina arriba + bottom nav fija abajo, content
 *     entre las dos. La nav "Mas" abre un sheet overlay.
 *   - desktop (>=769px): sidebar fija a la izquierda, content a la derecha.
 *     No hay topbar visible.
 *
 * Safe-area-insets: respetamos env(safe-area-inset-top|bottom) para iPhones
 * con notch en standalone (display: standalone come la barra del browser).
 */

.topbar--movil {
  padding-top: max(12px, env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar-menu-btn {
  background: transparent;
  border: none;
  padding: 8px 10px;
  margin: -8px -10px -8px 0;
  cursor: pointer;
  color: var(--color-texto);
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio-sm);
  min-width: 44px;
  min-height: 44px;
  transition: background var(--transicion);
}
.topbar-menu-btn:hover { background: var(--color-superficie-suave); }
.topbar-menu-icono { font-size: 1.5rem; line-height: 1; }

.sidebar { display: none; }  /* Por defecto oculta — solo desktop la muestra */

.bottom-nav { display: none; }  /* Por defecto oculta — solo movil */

/* Sheet del boton "Mas" (overlay full-screen). */
.nav-sheet {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 200;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--transicion);
}
.nav-sheet.nav-sheet-abierta {
  visibility: visible;
  opacity: 1;
}
.nav-sheet[aria-hidden="true"]:not(.nav-sheet-abierta) {
  visibility: hidden;
}
.nav-sheet-contenido {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-superficie);
  border-top-left-radius: var(--radio-lg);
  border-top-right-radius: var(--radio-lg);
  box-shadow: var(--sombra-lg);
  padding: 20px 16px max(20px, env(safe-area-inset-bottom));
  max-height: 80vh;
  overflow-y: auto;
}
.nav-sheet-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 8px;
}
.nav-sheet-titulo {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-texto-suave);
}
.nav-sheet-cerrar {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-texto-suave);
  font-size: 1.6rem;
  line-height: 1;
  padding: 4px 10px;
  margin: -4px -10px;
  border-radius: var(--radio-sm);
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: background var(--transicion), color var(--transicion);
}
.nav-sheet-cerrar:hover {
  background: var(--color-superficie-suave);
  color: var(--color-texto);
}
.nav-sheet-nav {
  display: flex;
  flex-direction: column;
}
.nav-sheet-nav a {
  text-decoration: none;
  color: var(--color-texto);
  padding: 14px 12px;
  border-bottom: 1px solid var(--color-borde-suave);
  font-size: 1rem;
}
.nav-sheet-nav a:last-of-type { border-bottom: none; }
.nav-sheet-logout {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-borde);
}
.nav-sheet-logout button { width: 100%; }

/* Boton "Activar avisos" en sidebar y sheet (PWA fase B Web Push).
   Mismo estilo en ambos viewports — variante outline para no competir
   con el "Cerrar sesion". Aparece sin contenido visible mientras
   push.js no decide su estado (data-push-toggle queda hidden). */
.sidebar-push-btn,
.nav-sheet-push-btn {
  width: 100%;
  margin-top: 8px;
  padding: 8px 12px;
  background: transparent;
  color: var(--color-texto);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}
.sidebar-push-btn:hover,
.nav-sheet-push-btn:hover {
  background: var(--color-borde-suave);
}
.sidebar-push-btn[aria-pressed="true"],
.nav-sheet-push-btn[aria-pressed="true"] {
  border-color: var(--color-acento);
  color: var(--color-acento-texto);
}
.sidebar-push-btn:disabled,
.nav-sheet-push-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* Toast "nueva version disponible" (PWA update). */
.pwa-toast {
  position: fixed;
  left: 50%;
  bottom: calc(80px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--color-texto);
  color: #fff;
  padding: 12px 16px;
  border-radius: var(--radio-md);
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--sombra-lg);
  z-index: 300;
  max-width: calc(100vw - 32px);
  font-size: 0.92rem;
}
.pwa-toast-btn {
  background: var(--color-acento);
  color: #fff;
  border: 0;
  border-radius: var(--radio-sm);
  padding: 6px 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
}
.pwa-toast-btn:hover { background: var(--color-acento-hover); }

/* Card de la pagina /offline. */
.offline-card { max-width: 420px; margin: 80px auto; text-align: center; }

/* ── Movil (<=768px) ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Bottom nav siempre visible. */
  .bottom-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-superficie);
    border-top: 1px solid var(--color-borde);
    box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.04);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 100;
  }
  .bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px;
    text-decoration: none;
    color: var(--color-texto-suave);
    font-size: 0.7rem;
    font-weight: 500;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  .bottom-nav-item:hover,
  .bottom-nav-item:active {
    color: var(--color-acento);
  }
  .bottom-nav-icono {
    font-size: 1.4rem;
    line-height: 1;
  }
  .bottom-nav-label {
    line-height: 1;
  }
  .bottom-nav-item--locked {
    opacity: 0.45;
  }
  .bottom-nav-item--active {
    color: var(--color-acento);
  }
  .bottom-nav-item--active .bottom-nav-icono {
    transform: scale(1.05);
  }

  /* Espacio inferior para el bottom nav. */
  .content--logged {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
}

/* ── Desktop (>=769px) ───────────────────────────────────────────────── */
@media (min-width: 769px) {
  /* Topbar movil oculta. */
  .topbar--movil { display: none; }

  /* Sidebar lateral fija a la izquierda. */
  .sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 220px;
    background: var(--color-superficie);
    border-right: 1px solid var(--color-borde);
    padding: 20px 16px;
    overflow-y: auto;
    z-index: 90;
  }
  .sidebar-brand {
    font-weight: 700;
    text-decoration: none;
    color: var(--color-texto);
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    padding: 4px 8px 16px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--color-borde-suave);
  }
  .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
  }
  .sidebar-nav a {
    text-decoration: none;
    color: var(--color-texto-suave);
    font-size: 0.92rem;
    font-weight: 500;
    padding: 8px 10px;
    border-radius: var(--radio-sm);
    transition: background var(--transicion), color var(--transicion);
  }
  .sidebar-nav a:hover {
    background: var(--color-superficie-suave);
    color: var(--color-texto);
  }
  .sidebar-nav a.sidebar-nav-item--active {
    background: var(--color-acento-suave);
    color: var(--color-acento-texto);
    font-weight: 600;
  }
  .sidebar-nav .nav-item--locked {
    opacity: 0.55;
  }
  .sidebar-logout {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-borde-suave);
  }
  .sidebar-logout button {
    width: 100%;
    text-align: left;
  }

  /* Content con padding-left para dejar sitio a la sidebar. */
  .content--logged {
    margin-left: 220px;
  }

  /* Bottom nav y sheet ocultos en desktop. */
  .bottom-nav { display: none; }
  .nav-sheet { display: none; }
}

/* ── Slot clickable (A2 item 2) ──────────────────────────────────────── */
/*
 * Capa transparente sobre cada columna profesional de la agenda dia.
 * Captura clicks en huecos vacios y navega a /admin/agenda/nueva con
 * los campos prerrellenados. Las citas y bloqueos se renderizan
 * despues en el DOM y llevan z-index mayor (1) para mantener sus
 * propios clicks.
 */
.agenda-slot-clickable {
  z-index: 0;
  cursor: pointer;
  transition: background var(--transicion);
  border-radius: 2px;
}
.agenda-slot-clickable:hover {
  background: rgba(37, 99, 235, 0.06);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18);
}
.agenda-slot-clickable:focus-visible {
  outline: none;
  background: rgba(37, 99, 235, 0.10);
  box-shadow: var(--sombra-foco);
}
.agenda-cita,
.agenda-bloqueo {
  z-index: 1;
  position: relative;
}

/* ── Filtros agenda (A2 item 3) ──────────────────────────────────────── */
.agenda-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 12px 0 16px;
  padding: 12px 14px;
  background: var(--color-superficie-suave);
  border: 1px solid var(--color-borde-suave);
  border-radius: var(--radio-md);
}
.agenda-filtro {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.agenda-filtro label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-texto-suave);
}
.agenda-filtro select {
  padding: 6px 10px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
  background: var(--color-superficie);
  color: var(--color-texto);
  font-size: 0.92rem;
  font-family: inherit;
  min-width: 160px;
}
.agenda-filtros-aplicar {
  padding: 8px 14px;
  border: 0;
  border-radius: var(--radio-sm);
  background: var(--color-acento);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.agenda-filtros-aplicar:hover { background: var(--color-acento-hover); }
.agenda-filtros-limpiar {
  font-size: 0.88rem;
  color: var(--color-texto-suave);
  text-decoration: none;
  margin-left: 8px;
  align-self: center;
}
.agenda-filtros-limpiar:hover { color: var(--color-peligro); }
.agenda-filtros-contador {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--color-texto-suave);
  align-self: center;
  font-style: italic;
}

/* ── Drag-and-drop citas agenda ──────────────────────────────────────── */
.agenda-cita[draggable="true"] {
  cursor: grab;
}
.agenda-cita[draggable="true"]:active {
  cursor: grabbing;
}
.agenda-cita-arrastrando {
  opacity: 0.55;
  outline: 2px dashed var(--color-primario);
}

/* ── Inbox conversaciones (leído/no-leído) ───────────────────────────── */
.conv-badge-no-leidas {
  display: inline-block;
  background: var(--color-primario);
  color: var(--color-primario-texto, #fff);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: var(--espacio-2);
  vertical-align: middle;
}
.conv-fila-no-leida {
  background: var(--color-superficie-suave, #f8fafc);
}
.conv-no-leida-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--color-primario);
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.conv-preview-no-leida {
  font-weight: 600;
}
.form-inline {
  display: inline-block;
  margin: 0;
}

/* ── Widget lista de espera viva (encima de la agenda) ───────────────── */
.le-widget {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-2);
  padding: var(--espacio-3) var(--espacio-4);
  margin: var(--espacio-3) 0;
  background: var(--color-superficie-suave, #f8fafc);
}
.le-widget--match {
  border-color: var(--color-aviso, #f59e0b);
  background: var(--color-aviso-suave, #fef3c7);
}
.le-widget-cabecera {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  flex-wrap: wrap;
}
.le-widget-icono {
  font-size: 1.5rem;
  line-height: 1;
}
.le-widget-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.le-widget-texto strong {
  font-size: 1rem;
}
.le-widget-link {
  font-size: 0.9rem;
  white-space: nowrap;
}
.le-widget-top {
  margin: var(--espacio-3) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}
.le-widget-top li a {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--espacio-2);
  background: var(--color-superficie);
  border-radius: var(--radio-1);
  border: 1px solid var(--color-borde-suave, #e5e7eb);
  text-decoration: none;
  color: inherit;
}
.le-widget-top li a:hover {
  border-color: var(--color-borde);
}

/* ── Cita rapida (/admin/agenda/rapida) ──────────────────────────────── */
.form-rapida {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  max-width: 480px;
}
.form-rapida label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.form-rapida label > span {
  font-size: 0.92rem;
  font-weight: 500;
}
.form-rapida input[type="text"],
.form-rapida input[type="tel"],
.form-rapida input[type="datetime-local"],
.form-rapida select {
  font-size: 1rem;
  padding: var(--espacio-2);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-2);
}
.rapida-quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2);
}
.boton-cuadricula {
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-1);
  padding: 6px 10px;
  cursor: pointer;
  font-size: 0.9rem;
}
.boton-cuadricula:hover {
  background: var(--color-superficie);
  border-color: var(--color-primario);
}
.boton-grande {
  font-size: 1.05rem;
  padding: var(--espacio-3) var(--espacio-5);
  margin-top: var(--espacio-2);
}

/* ── Modal ayuda atajos teclado agenda ───────────────────────────────── */
.agenda-ayuda {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--espacio-3);
}
.agenda-ayuda.agenda-ayuda-abierta {
  display: flex;
}
.agenda-ayuda-contenido {
  background: var(--color-superficie);
  border-radius: var(--radio-3);
  box-shadow: var(--sombra-3);
  padding: var(--espacio-5);
  max-width: 380px;
  width: 100%;
}
.agenda-ayuda-contenido h2 {
  margin: 0 0 var(--espacio-3);
  font-size: 1.15rem;
}
.agenda-ayuda-contenido dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--espacio-2) var(--espacio-3);
  margin: 0 0 var(--espacio-4);
}
.agenda-ayuda-contenido dt {
  font-weight: 500;
}
.agenda-ayuda-contenido dt kbd {
  display: inline-block;
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-1);
  padding: 1px 6px;
  font-family: var(--fuente-mono, monospace);
  font-size: 0.85rem;
  margin-right: 2px;
}
.agenda-ayuda-contenido dd {
  margin: 0;
  color: var(--color-texto-suave);
}
.agenda-ayuda-cerrar {
  background: var(--color-primario);
  color: var(--color-primario-texto);
  border: none;
  border-radius: var(--radio-2);
  padding: var(--espacio-2) var(--espacio-4);
  cursor: pointer;
  font-size: 0.95rem;
}
.agenda-ayuda-cerrar:hover {
  background: var(--color-primario-hover);
}

/* ── Empty states ricos (A2 item 4) ──────────────────────────────────── */
/*
 * Patron reutilizable para listados vacios. Antes mostrabamos solo "Aun
 * no tienes X" en gris; ahora un bloque centrado con icono grande,
 * titulo, frase explicativa y CTA primario. Critico para ICP no tecnico
 * que viene de cuaderno + WhatsApp.
 */
.empty-state-rich {
  text-align: center;
  padding: 48px 24px;
  margin: 0;
}
.empty-state-icono {
  font-size: 3.2rem;
  line-height: 1;
  margin-bottom: 16px;
  opacity: 0.85;
}
.empty-state-titulo {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-texto);
}
.empty-state-mensaje {
  margin: 0 0 20px;
  color: var(--color-texto-suave);
  font-size: 0.95rem;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.empty-state-cta {
  display: inline-block;
  padding: 10px 20px;
  background: var(--color-acento);
  color: #fff;
  border-radius: var(--radio-sm);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: background var(--transicion);
}
.empty-state-cta:hover { background: var(--color-acento-hover); }
.empty-state-secundario {
  display: block;
  margin-top: 12px;
  font-size: 0.88rem;
  color: var(--color-texto-suave);
}

/* ── Home KPIs (rediseno A2 — 06/05/2026) ─────────────────────────────── */

.home-cabecera {
  margin-bottom: 16px;
}
.home-cabecera h1 { margin: 0; }
.home-fecha {
  text-transform: capitalize;
  font-size: 0.95rem;
  margin: 4px 0 0;
}

.home-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.home-kpi {
  display: flex;
  flex-direction: column;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-left: 4px solid var(--color-acento);
  border-radius: var(--radio-md);
  padding: 20px;
  text-decoration: none;
  color: var(--color-texto);
  box-shadow: var(--sombra-sm);
  transition: transform var(--transicion), box-shadow var(--transicion);
  min-height: 160px;
}
.home-kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-md);
}
.home-kpi--azul   { border-left-color: var(--color-acento); }
.home-kpi--verde  { border-left-color: #16a34a; }
.home-kpi--ambar  { border-left-color: #d97706; }

/* Cabecera con icono de color + numero — recuperando la estetica de
   los tiles de iconos sobre caja de color que el founder aprobo el
   06/05/2026. */
.home-kpi-cabecera {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
}
.home-kpi-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radio-md);
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}
.home-kpi-icono--azul {
  background: #dbeafe;
  color: #1d4ed8;
}
.home-kpi-icono--verde {
  background: #dcfce7;
  color: #166534;
}
.home-kpi-icono--ambar {
  background: #fef3c7;
  color: #92400e;
}

.home-kpi-numero {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-texto);
}
.home-kpi-label {
  font-size: 0.95rem;
  color: var(--color-texto-suave);
  margin-top: 2px;
  margin-bottom: 12px;
}
.home-kpi-detalle {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  font-size: 0.88rem;
  color: var(--color-texto-suave);
  flex: 1;
}
.home-kpi-detalle li {
  padding: 2px 0;
}
.home-kpi-detalle strong {
  color: var(--color-texto);
  font-weight: 600;
}
.home-kpi-vacio {
  font-style: italic;
  color: var(--color-texto-debil);
}
.home-kpi-detalle li.home-kpi-zero {
  color: var(--color-texto-debil);
}
.home-kpi-detalle li.home-kpi-zero strong {
  color: var(--color-texto-debil);
  font-weight: 500;
}
.home-kpi-cta {
  font-size: 0.88rem;
  color: var(--color-acento);
  font-weight: 500;
  margin-top: auto;
}
.home-kpi--verde .home-kpi-cta { color: #16a34a; }
.home-kpi--ambar .home-kpi-cta { color: #d97706; }

/* Proximas citas — tabla compacta */
.home-proximas-card { margin-bottom: 16px; }
.home-proximas-card h2 {
  margin-top: 0;
}
.home-proximas {
  width: 100%;
  border-collapse: collapse;
}
.home-proximas tr {
  border-bottom: 1px solid var(--color-borde-suave);
}
.home-proximas tr:last-child {
  border-bottom: none;
}
.home-proximas td {
  padding: 10px 8px;
  vertical-align: middle;
}
.home-proximas-hora {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--color-texto);
  white-space: nowrap;
  width: 60px;
}
.home-proximas-cliente {
  min-width: 140px;
}
.home-proximas-servicio {
  color: var(--color-texto-suave);
  font-size: 0.92rem;
}
.home-proximas-estado {
  white-space: nowrap;
}
.home-proximas-link {
  text-align: right;
  white-space: nowrap;
}
.home-proximas-mas {
  margin-top: 12px;
  margin-bottom: 0;
}
.home-proximas-vacio {
  margin: 0;
}

/* Tag de estado de cita reusable (nuevo en home y reutilizable). */
.estado-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radio-pill);
  font-size: 0.78rem;
  font-weight: 500;
  border: 1px solid;
}
.estado-tag.estado-pendiente {
  background: var(--estado-pendiente-bg);
  border-color: var(--estado-pendiente-borde);
  color: #7a5d00;
}
.estado-tag.estado-confirmada {
  background: var(--estado-confirmada-bg);
  border-color: var(--estado-confirmada-borde);
  color: #14532d;
}
.estado-tag.estado-en_curso {
  background: var(--estado-en-curso-bg);
  border-color: var(--estado-en-curso-borde);
  color: #1e3a8a;
}
.estado-tag.estado-realizada {
  background: var(--estado-realizada-bg);
  border-color: var(--estado-realizada-borde);
  color: var(--color-texto-suave);
}
.estado-tag.estado-no_show {
  background: var(--estado-no-show-bg);
  border-color: var(--estado-no-show-borde);
  color: var(--color-peligro-texto);
}

/* Bloque embed colapsado (single-use, no estorba dia a dia). */
.home-embed {
  margin-bottom: 24px;
}
.home-embed > summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.95rem;
  color: var(--color-texto-suave);
}
.home-embed > summary::-webkit-details-marker { display: none; }
.home-embed > summary::before {
  content: "▸ ";
  display: inline-block;
  margin-right: 4px;
  transition: transform var(--transicion);
}
.home-embed[open] > summary::before {
  content: "▾ ";
}

.home-info-only {
  background: var(--color-aviso-suave);
  border-color: #f5d77f;
}
.home-info-only h2 { margin-top: 0; }

@media (max-width: 720px) {
  .home-kpis {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .home-kpi { min-height: 140px; padding: 16px; }
  .home-kpi-numero { font-size: 2rem; }
  .home-proximas td { padding: 0; font-size: 0.92rem; border: none; }
  .home-proximas tr {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "hora cliente link"
      "hora estado link";
    column-gap: 10px;
    row-gap: 2px;
    padding: 10px 2px;
  }
  .home-proximas-hora {
    grid-area: hora;
    align-self: center;
    width: auto;
  }
  .home-proximas-cliente {
    grid-area: cliente;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .home-proximas-servicio { display: none; }  /* prioriza hora+cliente+estado */
  .home-proximas-estado {
    grid-area: estado;
    white-space: normal;
  }
  .home-proximas-link {
    grid-area: link;
    align-self: center;
  }
}

/* ── Avatar de iniciales (clientes) ───────────────────────────────── */
.avatar-iniciales {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-acento);
  color: #fff;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
  user-select: none;
  text-transform: uppercase;
}
.avatar-iniciales-grande {
  width: 64px;
  height: 64px;
  font-size: 1.4rem;
}
.cliente-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.cliente-cabecera {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 8px 0 4px;
}
.cliente-cabecera-titulo {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.cliente-cabecera-sub {
  margin: 4px 0 0;
}

/* ── Flash banner de exito tras un POST (?ok=creado|guardado|...) ───── */
.flash-banner {
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: var(--radio-sm);
  font-size: 0.95rem;
  font-weight: 500;
}
.flash-banner-ok {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

/* ── Lista clave/valor responsive (pantallas tipo "Mi cuenta") ──────── */
.kv-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 16px;
  row-gap: 8px;
  margin: 12px 0 0;
  font-size: 0.95rem;
  max-width: 100%;
  min-width: 0;
}
.kv-list dt {
  color: var(--color-texto-suave);
  font-weight: 500;
}
.kv-list dd {
  margin: 0;
  color: var(--color-texto);
  min-width: 0;
  overflow-wrap: anywhere;
}
.kv-list .kv-break {
  word-break: break-all;
}
@media (max-width: 600px) {
  .kv-list {
    grid-template-columns: 1fr;
    row-gap: 2px;
  }
  .kv-list dt {
    margin-top: 8px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .kv-list dt:first-child { margin-top: 0; }
}

/* Defensa anti-overflow horizontal en móvil */
@media (max-width: 600px) {
  .card {
    padding: 18px;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
  }
  .form-stack input,
  .form-stack select,
  .form-stack textarea {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Tablas que en móvil se apilan como tarjetas para no desbordar.
   Aplicar a tablas con muchas columnas (ej. /admin/cuenta/dispositivos).
   Combinar con `.lista-espera-tabla` para mantener estilo en escritorio.
   Cada <td> debe llevar atributo `data-label="..."` con el título de su
   columna; el valor se muestra como prefijo en móvil. */
@media (max-width: 720px) {
  .tabla-responsive-cards { display: block; }
  .tabla-responsive-cards thead { display: none; }
  .tabla-responsive-cards tbody,
  .tabla-responsive-cards tr {
    display: block;
    width: 100%;
  }
  .tabla-responsive-cards tr {
    border: 1px solid var(--color-borde-suave);
    border-radius: var(--radio-sm);
    padding: 10px 12px;
    margin-bottom: 12px;
    background: var(--color-superficie);
  }
  .tabla-responsive-cards tr:hover { background: var(--color-superficie); }
  .tabla-responsive-cards td {
    display: block;
    padding: 4px 0;
    border-bottom: none;
    overflow-wrap: anywhere;
  }
  .tabla-responsive-cards td[data-label]:not([data-label=""])::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: var(--color-texto-suave);
    margin-right: 4px;
  }
  .tabla-responsive-cards td:last-child {
    margin-top: 6px;
  }
}