/* La transición nativa (@view-transition) SOLO se declara en sitio/index.html
   y sitio/reservar.html (inline, en esas dos páginas) · nunca aquí. Puesta en
   este archivo compartido rompía la navegación del panel: al ser una regla de
   documento completo, el navegador intentaba animar el cambio entre páginas
   del panel (sidebar incluido) antes de que shell.js terminara de pintarlo,
   y eso se veía como "la página desaparece y vuelve a aparecer". */
::view-transition-old(root) { animation-duration: 0.32s; animation-timing-function: ease; }
::view-transition-new(root) { animation-duration: 0.32s; animation-timing-function: ease; }

/* Respaldo manual para navegadores sin View Transitions nativas */
.public-site-body { animation: agenda-page-fade-in 0.32s ease; }
@keyframes agenda-page-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.page-fade-out { animation: agenda-page-fade-out 0.18s ease forwards; }
@keyframes agenda-page-fade-out { to { opacity: 0; transform: translateY(-8px); } }

/* =========================================================
   AGENDA · Design tokens & base styles
   ========================================================= */
:root {
  /* Brand palette · manual de marca AGENDA FIOX v2 */
  --color-primary: #1C3528;      /* verde FIOX oscuro */
  --color-primary-dark: #12241A;
  --color-primary-light: #8F9A46; /* oliva claro */
  --color-accent: #7FA63D;       /* verde FIOX brillante */
  --color-accent-dark: #798642;  /* oliva oscuro */

  --color-bg: #FDF9EC;           /* crema */
  --color-bg-alt: #F4EFD9;
  --color-surface: #FFFFFF;
  --color-ink: #3F4440;          /* carboncillo */
  --color-ink-soft: #6C7268;
  --color-border: #E6E1C8;

  --color-success: #16A34A;
  --color-danger: #DC2626;
  --color-arena: #CBCAA7;

  /* Texto sobre fondos que usan --color-primary (ej. hero de Reportes):
     agendaApplyBrandTheme (store.js) los recalcula en cada carga según el
     color de marca del negocio; estos son solo el respaldo antes de que
     corra el JS o si nunca corre (verde FIOX oscuro admite texto blanco). */
  --color-on-primary: #FFFFFF;
  --color-on-primary-soft: rgba(255,255,255,0.85);
  --color-on-primary-veil: rgba(255,255,255,0.16);

  /* Tinte de icono por feature (variedad visual tipo tarjetas de color,
     nunca como único color de marca, ese sigue siendo indigo/naranjo) */
  --icon-indigo-bg: #EDE9FE; --icon-indigo-fg: #6D28D9;
  --icon-orange-bg: #FFEDD5; --icon-orange-fg: #C2410C;
  --icon-green-bg:  #DCFCE7; --icon-green-fg:  #15803D;
  --icon-blue-bg:   #E0F2FE; --icon-blue-fg:   #0369A1;
  --icon-pink-bg:   #FCE7F3; --icon-pink-fg:   #BE185D;
  --icon-yellow-bg: #FEF9C3; --icon-yellow-fg: #A16207;

  /* Landing, panel y superadmin: Sora en títulos/encabezados (h1-h6 y
     todo lo que ya usaba --font-display para verse como uno), Inter en
     el resto (texto general, menús, tablas, botones, formularios). El
     sitio público de cada negocio (sitio/*.html) NO usa estos valores:
     ahí --font-display/--font-subtitle/--font-body los pisa en runtime
     agendaApplyFontPair (ver sitio-shared.js) con la tipografía que
     cada negocio eligió en Kit de marca. */
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-subtitle: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;

  --shadow-sm: 0 2px 8px rgba(30, 27, 46, 0.06);
  --shadow-md: 0 8px 24px rgba(30, 27, 46, 0.08);
  --shadow-lg: 0 20px 48px rgba(79, 70, 229, 0.16);

  --container: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* El atributo [hidden] es del navegador (hoja de estilos "user agent"),
   la de MENOR prioridad de todas · cualquier regla nuestra que fije
   display en el mismo elemento (ej. .btn { display: inline-flex }) gana
   igual aunque el elemento tenga hidden puesto, y el elemento se ve
   "trabado" visible. Sin este !important eso pasaba con cualquier botón
   .btn con hidden (ej. #mn-plan-pay en Mi negocio, #btn-gcal-connect en
   Configuración). */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-ink);
  margin: 0 0 0.5em;
  line-height: 1.2;
  font-weight: 600;
}

p { margin: 0 0 1em; color: var(--color-ink-soft); }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* La landing (agendafiox.cl) usa un ancho de página mayor que el resto
   del sitio (panel, sitio público de cada negocio): esos otros siguen
   con --container normal, esto es solo para que la landing se vea a
   página completa en pantallas grandes. Por debajo de 1320px de ancho de
   viewport esto no cambia nada (el container ya se acopla con 100% menos
   el padding), así que sigue respondiendo igual en tablet y celular. */
.landing-body .container { max-width: 1320px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-subtitle);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-bg-alt);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-lg);
}
.btn-primary:hover { background: var(--color-primary-dark); box-shadow: 0 24px 56px rgba(79,70,229,0.24); }

.btn-accent {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 12px 28px rgba(251, 146, 60, 0.32);
}
.btn-accent:hover { background: var(--color-accent-dark); }

.btn-ghost {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-border);
}
.btn-ghost:hover { border-color: var(--color-primary); background: var(--color-bg-alt); }

.btn-outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.5);
}
.btn-outline-light:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

.btn-block { width: 100%; }
.btn-lg { padding: 16px 32px; font-size: 1.05rem; }

/* Forma e ícono-vs-texto de los botones principales, elegidos por el
   dueño en "Mi sitio web" → Botones (ver agendaApplyButtonStyle en
   sitio-shared.js) y aplicados SOLO al sitio público real
   (body[data-button-shape/style]) y a su espejo en la vista previa
   (#preview[...]) · el panel de administración nunca lee estos
   atributos, así que sus propios botones (".btn" de siempre) no
   cambian. El texto de cada botón no se toca (sigue en el DOM dentro
   de .btn-label), solo se oculta a favor del ícono.

   La forma (curvas/rectas) es una sola perilla para TODOS los botones
   del sitio (".btn" sin distinción), pero texto-vs-ícono son DOS
   perillas independientes: una para "Agendar hora" (.btn-cta, data-
   button-style) y otra para "Iniciar sesión" (.btn-login, data-login-
   button-style) · por eso cada una tiene su propio par de reglas en
   vez de compartir un selector genérico ".btn-label/.btn-icon". */
body[data-button-shape="recto"] .btn,
#preview[data-button-shape="recto"] .btn { border-radius: 10px; }
.btn-icon { display: none; width: 20px; height: 20px; flex: none; }
body[data-button-style="icono"] .btn-cta,
#preview[data-button-style="icono"] .btn-cta,
body[data-login-button-style="icono"] .btn-login,
#preview[data-login-button-style="icono"] .btn-login { padding-left: 16px; padding-right: 16px; }
body[data-button-style="icono"] .btn-cta .btn-label,
#preview[data-button-style="icono"] .btn-cta .btn-label { display: none; }
body[data-button-style="icono"] .btn-cta .btn-icon,
#preview[data-button-style="icono"] .btn-cta .btn-icon { display: block; }
body[data-login-button-style="icono"] .btn-login .btn-label,
#preview[data-login-button-style="icono"] .btn-login .btn-label { display: none; }
body[data-login-button-style="icono"] .btn-login .btn-icon,
#preview[data-login-button-style="icono"] .btn-login .btn-icon { display: block; }

/* =========================================================
   Header / Nav
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 250, 248, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--color-ink);
  flex: none;
}
.brand-mark {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex: none;
  display: block;
}
/* Lockup completo "FIOX / AGENDA" (pájaro + wordmark en una sola imagen)
   para los lugares donde el fondo es plano y coincide con una de las
   variantes del manual de marca: positivo (transparente, sobre claro)
   o carboncillo (fondo #3F4440 ya incluido en el archivo, para el pie
   de página). Sobre fondos degradados o de otro color se sigue usando
   el isotipo suelto + texto en vivo (.brand-mark), porque ahí sí hace
   falta que el color del texto se adapte con CSS. */
.brand-lockup { height: 56px; width: auto; display: block; flex: none; }
/* El logo del menú principal de la landing pide más presencia que el
   resto (login, footer, sidebar): mismo archivo, más grande. */
.brand-nav-logo .brand-lockup { height: 84px; }
/* Dos versiones del mismo logo en el header de la landing: el wordmark
   completo (por defecto) y el isotipo solo, para cuando no cabe junto a
   los botones de acción del nav (ver breakpoint de 680px más abajo). */
.brand-lockup-compact { display: none; }
/* El logo del sidebar del panel cliente también pide más presencia. */
.app-sidebar .brand-lockup { height: 76px; }
/* Isotipo de respaldo del sidebar del panel cliente: solo se ve con el
   menú contraído (ver .sidebar-collapsed más abajo), reemplazando al
   wordmark completo de arriba. */
.brand-mark-collapsed { display: none; height: 34px; width: auto; }
/* El logo sobre el saludo de login/registro pide más presencia. */
.auth-form-head .brand-lockup { height: 88px; }
.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
}
.nav-links a {
  font-weight: 500;
  color: var(--color-ink-soft);
  font-size: 0.95rem;
  transition: color 0.15s ease;
}
.nav-links a:hover { color: var(--color-primary); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-toggle {
  display: none;
  width: 40px; height: 40px; border-radius: 10px; flex: none;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  align-items: center; justify-content: center;
  color: var(--color-ink);
  cursor: pointer;
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0 80px;
  background:
    radial-gradient(60% 60% at 85% 10%, rgba(251,146,60,0.14) 0%, rgba(251,146,60,0) 60%),
    radial-gradient(50% 50% at 10% 20%, rgba(79,70,229,0.14) 0%, rgba(79,70,229,0) 60%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  letter-spacing: -0.02em;
}
.hero h1 span { color: var(--color-primary); }
.hero-underline {
  display: block;
  width: 220px;
  max-width: 50%;
  height: auto;
  margin: 14px 0 0;
  color: var(--color-accent);
}
.hero-lead {
  font-size: 1.15rem;
  max-width: 520px;
}
.hero-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 32px;
  flex-wrap: wrap;
}
.hero-note {
  margin-top: 18px;
  font-size: 0.88rem;
  color: var(--color-ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-note svg { color: var(--color-success); flex: none; }

.hero-stats {
  display: flex;
  gap: 32px;
  margin-top: 44px;
  flex-wrap: wrap;
}
.hero-stats div strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--color-ink);
}
.hero-stats div span { font-size: 0.85rem; color: var(--color-ink-soft); }

/* Hero visual: mock calendar card */
.hero-visual {
  position: relative;
}
.hero-blob {
  position: absolute;
  inset: -8% -10% -8% 6%;
  z-index: -1;
  border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  opacity: 0.16;
  filter: blur(2px);
}
.mock-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 26px;
  border: 1px solid var(--color-border);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.mock-card.hero-mock-fade { opacity: 0; transform: translateY(4px); }
.browser-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 20px;
}
.browser-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.browser-url {
  margin-left: 8px;
  font-size: 0.8rem;
  color: var(--color-ink-soft);
  font-family: var(--font-body);
}
.browser-url b { color: var(--color-primary); font-weight: 700; }

.mock-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.mock-card-head h4 { margin: 0; font-size: 1.05rem; }
.mock-pill {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--color-bg-alt);
  color: var(--color-primary);
}
.mock-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.mock-days span {
  text-align: center;
  font-size: 0.72rem;
  color: var(--color-ink-soft);
  font-weight: 600;
}
.mock-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
.mock-grid div {
  aspect-ratio: 1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  color: var(--color-ink-soft);
  background: var(--color-bg);
}
.mock-grid div.today {
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
}
.mock-grid div.has-event {
  background: var(--color-bg-alt);
  color: var(--color-primary);
  font-weight: 600;
  position: relative;
}
.mock-events { display: flex; flex-direction: column; gap: 10px; }
.mock-event {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  border-left: 4px solid var(--color-primary);
}
.mock-event.accent { border-color: var(--color-accent); }
.mock-event.success { border-color: var(--color-success); }
.mock-event time { font-size: 0.75rem; color: var(--color-ink-soft); min-width: 46px; }
.mock-event span { font-size: 0.88rem; font-weight: 500; }

.floating-chip {
  position: absolute;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid var(--color-border);
}
.chip-1 { top: -18px; right: -18px; }
.chip-2 { bottom: -20px; left: -24px; }
.chip-1 .dot, .chip-2 .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-success); }

/* =========================================================
   Logos / trust strip
   ========================================================= */
.trust-strip {
  padding: 28px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.trust-strip p {
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-bottom: 20px;
}
.trust-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-ink-soft);
}
.trust-row span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-success);
  flex: none;
}

/* =========================================================
   Sections generic
   ========================================================= */
.section {
  padding: 96px 0;
  scroll-margin-top: 80px; /* que el header sticky no tape el título al llegar por ancla */
}
.section-alt { background: var(--color-bg-alt); }
.section-head {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-head h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.section-head p { font-family: var(--font-subtitle); }
.section-head.align-left { margin-left: 0; text-align: left; }

/* Features grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 30px 26px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  background: var(--color-bg-alt);
  color: var(--color-primary);
}
.feature-icon.icon-indigo { background: var(--icon-indigo-bg); color: var(--icon-indigo-fg); }
.feature-icon.icon-orange { background: var(--icon-orange-bg); color: var(--icon-orange-fg); }
.feature-icon.icon-green  { background: var(--icon-green-bg);  color: var(--icon-green-fg); }
.feature-icon.icon-blue   { background: var(--icon-blue-bg);   color: var(--icon-blue-fg); }
.feature-icon.icon-pink   { background: var(--icon-pink-bg);   color: var(--icon-pink-fg); }
.feature-icon.icon-yellow { background: var(--icon-yellow-bg); color: var(--icon-yellow-fg); }
.feature-card h3 { font-size: 1.1rem; }
.feature-card p { margin: 0; font-size: 0.94rem; }

/* Beneficios (checklist + panel visual) */
.benefits-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.benefits-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 28px 0 32px;
}
.benefit-row {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 1.02rem;
  font-weight: 600;
}
.benefit-check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-success);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.benefits-visual {
  position: relative;
}
.benefits-visual .mock-card { max-width: 380px; margin-left: auto; }
.benefits-visual .floating-chip { z-index: 1; }

/* Contacto */
.btn-spinner {
  display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: -3px; margin-right: 8px;
  border: 2.5px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: agenda-spin 0.7s linear infinite;
}
.contact-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: start; }
.contact-info .eyebrow { display: block; margin-bottom: 10px; }
.contact-info h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 0 0 12px; }
.contact-channels { display: flex; flex-direction: column; gap: 10px; }
.contact-channel {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.contact-channel-icon {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--icon-indigo-bg); color: var(--icon-indigo-fg);
}
.contact-channel:nth-child(2) .contact-channel-icon { background: var(--icon-blue-bg); color: var(--icon-blue-fg); }
.contact-channel strong { display: block; font-size: 0.92rem; }
.contact-channel span { font-size: 0.85rem; color: var(--color-ink-soft); }
.contact-form {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 32px; box-shadow: var(--shadow-sm);
}
.contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-form input.input-plain,
.contact-form textarea.input-plain {
  background: var(--color-bg-alt); border-color: transparent; border-radius: var(--radius-sm);
}
.contact-form input.input-plain:focus,
.contact-form textarea.input-plain:focus { background: var(--color-surface); }
.phone-input { display: flex; align-items: stretch; gap: 8px; }
.phone-input .phone-prefix {
  display: flex; align-items: center; justify-content: center; flex: none; padding: 0 14px;
  border-radius: var(--radius-sm); background: var(--color-surface); border: 1.5px solid var(--color-border);
  font-size: 0.92rem; font-weight: 700; color: var(--color-ink);
}
.phone-input input.input-plain { flex: 1; min-width: 0; }
.contact-pref-group { display: flex; gap: 10px; }
.contact-pref-option {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border);
  background: var(--color-bg-alt); font-size: 0.92rem; font-weight: 600; color: var(--color-ink);
  cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.contact-pref-option input { position: absolute; opacity: 0; pointer-events: none; }
.contact-pref-option:has(input:checked) {
  border-color: var(--color-primary); background: var(--color-surface); box-shadow: 0 0 0 1.5px var(--color-primary) inset;
}
.contact-pref-group.input-error .contact-pref-option { border-color: #DC2626; }
.contact-consent {
  display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 18px;
  font-size: 0.83rem; color: var(--color-ink-soft); line-height: 1.45; cursor: pointer;
}
.contact-consent input[type="checkbox"] {
  flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--color-primary); cursor: pointer;
}
.contact-form-note { text-align: center; font-size: 0.78rem; color: var(--color-ink-soft); margin: 14px 0 0; }
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-form-row { grid-template-columns: minmax(0, 1fr); }
}

/* How it works */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.step {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 30px 24px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 46px;
  left: 100%;
  width: 24px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--color-border) 0 6px, transparent 6px 10px);
}
.step-num {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  background: var(--color-bg-alt);
  color: var(--color-primary);
}
.step-icon.icon-indigo { background: var(--icon-indigo-bg); color: var(--icon-indigo-fg); }
.step-icon.icon-orange { background: var(--icon-orange-bg); color: var(--icon-orange-fg); }
.step-icon.icon-green  { background: var(--icon-green-bg);  color: var(--icon-green-fg); }
.step-icon.icon-blue   { background: var(--icon-blue-bg);   color: var(--icon-blue-fg); }
.step-icon.icon-pink   { background: var(--icon-pink-bg);   color: var(--icon-pink-fg); }
.step-icon.icon-yellow { background: var(--icon-yellow-bg); color: var(--icon-yellow-fg); }
.step h3 { font-size: 1.05rem; margin: 0 0 6px; }
.step p { font-size: 0.9rem; margin: 0; color: var(--color-ink-soft); }

/* Family/use-case tiles */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.audience-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 26px 20px;
  text-align: center;
  border: 1px solid var(--color-border);
}
.audience-card .feature-icon { margin: 0 auto 14px; }
.audience-card h4 { font-size: 0.98rem; margin-bottom: 6px; }
.audience-card p { font-size: 0.85rem; margin: 0; color: var(--color-ink-soft); }

/* Pricing */
/* Toggle Mensual/Anual: cambia qué precio de cada plan se muestra en
   .pricing-grid (ver agendaRenderPricingCards en main.js) · los dos
   precios existen siempre a la vez en la base de datos, esto solo
   decide cuál pintar. */
/* Calculadora "cuánto puedes ganar" */
.calc-card {
  max-width: 780px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  box-shadow: var(--shadow-sm);
}
.calc-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 28px; }
.calc-field-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.calc-field label { font-weight: 600; font-size: 0.9rem; color: var(--color-ink); }
.calc-field-value { font-weight: 700; color: var(--color-primary); font-family: var(--font-display); }
.calc-field input[type="range"] {
  width: 100%;
  accent-color: var(--color-accent);
  height: 6px;
}
.calc-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.calc-result { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.calc-result-value { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--color-ink); }
.calc-result-label { font-size: 0.8rem; color: var(--color-ink-soft); }
.calc-result-accent .calc-result-value { color: var(--color-accent-dark); }
.calc-roi { text-align: center; font-weight: 600; color: var(--color-primary); margin: 20px 0 6px; }
.calc-note { text-align: center; font-size: 0.78rem; color: var(--color-ink-soft); margin: 0; }

.pricing-cycle-toggle-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 32px; }
.pricing-cycle-hint { margin: 0; font-size: 0.86rem; color: var(--color-ink-soft); }
.pricing-cycle-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  background: var(--color-bg-alt);
  border-radius: 999px;
  padding: 5px;
}
.pricing-cycle-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--color-ink-soft);
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
}
.pricing-cycle-btn.active { background: var(--color-surface); color: var(--color-primary); box-shadow: var(--shadow-sm); }
.pricing-cycle-save-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.price-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
}
.price-card.featured {
  background: linear-gradient(160deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  border: none;
  box-shadow: var(--shadow-lg);
  transform: scale(1.03);
}
.price-card.featured h3, .price-card.featured .price-amount, .price-card.featured p { color: #fff; }
.price-card.featured .price-amount span { color: rgba(255,255,255,0.75); }
.price-card.featured .feature-list li { color: rgba(255,255,255,0.92); }
.price-card.featured .feature-list svg { color: #fff; }
.price-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  margin-bottom: 14px;
}
.price-amount {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  margin: 6px 0 4px;
}
.price-amount span {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-ink-soft);
}
.price-card > p.price-desc { font-size: 0.9rem; margin-bottom: 22px; }
/* Se muestra solo con el ciclo Anual elegido y cuando de verdad hay un
   ahorro (ver agendaRenderPricingCards en main.js): el % sale siempre
   calculado de precio mensual vs. anual/12, nunca a mano, para que
   nunca diga un número que no calce con los precios reales del plan. */
.price-savings { font-size: 0.8rem; font-weight: 600; color: var(--color-success); margin: -8px 0 14px; }
.price-card.featured .price-savings { color: #D4F7C5; }
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 28px;
  flex: 1;
}
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--color-ink-soft);
}
.feature-list svg { flex: none; color: var(--color-success); margin-top: 3px; }

/* Tabla comparativa de planes, debajo de las tarjetas de precio */
.compare-heading { max-width: 640px; margin: 64px auto 28px; text-align: center; }
.compare-heading h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 6px 0 8px; }
.compare-heading p { margin: 0; }

.compare-table-wrap {
  overflow-x: auto;
  max-width: 980px;
  margin: 0 auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.compare-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.compare-table th, .compare-table td {
  padding: 12px 14px;
  text-align: center;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.compare-table thead tr:first-child th {
  font-family: var(--font-display);
  font-size: 1.02rem;
  padding-top: 20px;
  padding-bottom: 6px;
  background: var(--color-primary-dark);
  color: #fff;
}
.compare-featured-tag {
  display: block;
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-primary-light);
  margin-top: 2px;
}
.compare-table .compare-feature-col { text-align: left; min-width: 220px; white-space: normal; }
.compare-table tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--color-ink);
  white-space: normal;
}
.compare-price-row th, .compare-price-row td { background: var(--color-primary-dark); border-bottom: 3px solid var(--color-accent); }
.compare-price-row td { font-family: var(--font-display); font-weight: 700; font-size: 1.65rem; padding: 16px 14px 18px; color: #fff; }
.compare-price-row td span.compare-price-unit { display: block; font-family: var(--font-body); font-weight: 600; font-size: 0.76rem; color: rgba(255,255,255,0.75); white-space: normal; margin-top: 4px; }
.compare-table .compare-featured { background: var(--color-bg-alt); border-left: 2px solid var(--color-accent); border-right: 2px solid var(--color-accent); }
.compare-price-row .compare-featured { background: var(--color-accent-dark); border-left-color: var(--color-accent-dark); border-right-color: var(--color-accent-dark); }
.compare-table tbody tr:nth-child(even):not(.compare-group-row) { background: var(--color-bg); }
.compare-table tbody tr:nth-child(even):not(.compare-group-row) .compare-featured { background: var(--color-bg-alt); }
.compare-group-row th {
  background: var(--color-bg-alt);
  color: var(--color-primary);
  font-family: var(--font-subtitle);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 10px 14px;
}
.compare-table .yes { color: var(--color-success); font-weight: 700; font-size: 1.05rem; }
.compare-table .no { color: var(--color-danger); }
.compare-table .compare-x { display: inline-flex; opacity: 0.75; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: none; }

.compare-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin: 18px 0 0;
  font-size: 0.82rem;
  color: var(--color-ink-soft);
}
.compare-legend-yes { color: var(--color-success); font-weight: 600; }
.compare-legend-no { color: var(--color-danger); font-weight: 600; }

/* Add-on de dominio propio, debajo de la tabla comparativa */
.addon-card {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
}
.addon-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--icon-blue-bg);
  color: var(--icon-blue-fg);
  margin-bottom: 12px;
}
.addon-info h3 { margin: 0 0 8px; font-size: 1.3rem; }
.addon-info > p { margin-bottom: 16px; }
.addon-feature-list { display: flex; flex-direction: column; gap: 8px; }
.addon-feature-list li { font-size: 0.9rem; color: var(--color-ink-soft); padding-left: 22px; position: relative; }
.addon-feature-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}
.addon-price-box { text-align: center; min-width: 220px; }
.addon-price { font-family: var(--font-display); font-size: 2rem; font-weight: 700; margin-bottom: 16px; }
.addon-price span { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.82rem; color: var(--color-ink-soft); }

/* Testimonials */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testimonial-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 28px 24px;
}
.testimonial-quote {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--color-bg-alt);
  -webkit-text-stroke: 1px var(--color-primary-light);
  margin-bottom: -6px;
}
.testimonial-stars { color: var(--color-accent); margin-bottom: 14px; font-size: 0.95rem; letter-spacing: 2px; }
.testimonial-card p { font-size: 0.95rem; color: var(--color-ink); }
.testimonial-person {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-display);
  color: #fff;
}
.testimonial-person strong { display: block; font-size: 0.9rem; }
.testimonial-person span { font-size: 0.8rem; color: var(--color-ink-soft); }

/* FAQ */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--color-border);
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 4px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-ink);
}
.faq-icon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.faq-answer p { padding: 0 4px 22px; margin: 0; font-size: 0.94rem; }
.faq-item.open .faq-answer { max-height: 260px; }

/* CTA band */
.cta-band {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--radius-lg);
  padding: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  color: #fff;
  flex-wrap: wrap;
}
.cta-band h2, .cta-band p { color: #fff; }
.cta-band p { opacity: 0.85; margin: 0; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Footer · fondo claro (arena) a propósito: el lockup institucional
   tiene el "FI" en verde oscuro y el resto en verde brillante, y eso
   contrasta mucho mejor sobre un fondo claro que sobre uno oscuro
   (donde el "FI" se perdía contra el mismo tono de fondo). */
.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  color: rgba(63,68,64,0.75);
  padding: 64px 0 28px;
  margin-top: 40px;
}
.footer-brand .brand-lockup { height: 96px; margin-bottom: 4px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 48px;
}
.footer-brand p { color: rgba(63,68,64,0.7); max-width: 280px; margin-top: 14px; font-size: 0.9rem; }
.footer-contact-line { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: rgba(63,68,64,0.8); font-size: 0.88rem; }
.footer-contact-line a { color: var(--color-primary); font-weight: 600; }
.footer-contact-line a:hover { color: var(--color-ink); }
.footer-col h5 {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a { font-size: 0.9rem; color: rgba(63,68,64,0.7); transition: color 0.15s ease; }
.footer-col a:hover { color: var(--color-ink); }
.footer-bottom {
  border-top: 1px solid rgba(63,68,64,0.18);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  flex-wrap: wrap;
  gap: 12px;
}
.social-row { display: flex; gap: 12px; }
.social-row a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(63,68,64,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.social-row a:hover { background: rgba(63,68,64,0.2); }

/* =========================================================
   Auth pages (login)
   ========================================================= */
.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.auth-visual {
  position: relative;
  background: linear-gradient(160deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  padding: 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.auth-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 50% at 80% 90%, rgba(251,146,60,0.35), transparent 60%);
}
.auth-visual > * { position: relative; z-index: 1; }
.auth-visual .brand { color: #fff; }
.auth-visual-body h2 { color: #fff; font-size: 2rem; max-width: 420px; }
.auth-visual-body p { color: rgba(255,255,255,0.82); max-width: 420px; }
.auth-visual-card {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-md);
  padding: 20px;
  backdrop-filter: blur(6px);
}
.auth-visual-quote { font-size: 0.95rem; color: #fff; }
.auth-visual-quote strong { display: block; margin-top: 12px; font-size: 0.85rem; opacity: 0.8; }

.auth-form-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
.auth-form {
  width: 100%;
  max-width: 400px;
}
.auth-form-head { margin-bottom: 32px; }
.auth-form-head h1 { font-size: 1.7rem; }
.auth-form-head p { margin: 0; }

.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--color-ink);
}
.input-wrap { position: relative; }
.input-wrap > svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-ink-soft);
}
.input-wrap input {
  width: 100%;
  padding: 13px 16px 13px 42px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--color-surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input-wrap input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(79,70,229,0.12);
}
.input-wrap input[type="password"],
.input-wrap input.js-password-input {
  padding-right: 44px;
}
.password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  appearance: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-soft);
  border-radius: 8px;
  flex: none;
}
.password-toggle svg { pointer-events: none; }
.password-toggle:hover { color: var(--color-primary); background: var(--color-bg-alt); }
.password-toggle.showing { color: var(--color-primary); }
.form-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-bottom: 24px;
}
.checkbox-row { display: flex; align-items: center; gap: 8px; color: var(--color-ink-soft); }
.checkbox-row input { accent-color: var(--color-primary); }
.link-accent { color: var(--color-primary); font-weight: 600; }

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0;
  color: var(--color-ink-soft);
  font-size: 0.82rem;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.social-auth { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-ink);
}
.btn-social:hover { border-color: var(--color-primary); background: var(--color-bg-alt); }

.auth-switch {
  margin-top: 28px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

.demo-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--color-bg-alt);
  border: 1px dashed var(--color-primary-light);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  margin-bottom: 24px;
}
.demo-banner svg { flex: none; color: var(--color-primary); margin-top: 2px; }

/* =========================================================
   Superadmin · panel de Héctor para administrar los negocios
   clientes de Agenda FIOX (distinto del panel de cada negocio).
   ========================================================= */
.app-sidebar.sidebar-dark { background: var(--color-primary-dark); border-right: none; }
.sidebar-dark .brand { color: #fff; }
.sidebar-dark .sidebar-link { color: rgba(255,255,255,0.62); }
.sidebar-dark .sidebar-link:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar-dark .sidebar-link.active { background: var(--color-primary); color: #fff; }
.sidebar-dark .sidebar-section-label { color: rgba(255,255,255,0.35); }
.sidebar-dark .sidebar-footer { border-top-color: rgba(255,255,255,0.12); }
.sidebar-dark .sidebar-footer strong { color: #fff; }
.sidebar-dark .sidebar-footer span { color: rgba(255,255,255,0.5); }
.sidebar-dark .sidebar-footer a { color: rgba(255,255,255,0.5); }

.superadmin-kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }

.plans-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.plan-edit-card { display: flex; flex-direction: column; gap: 12px; }
.plan-edit-card .plan-color-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: 8px; }
.plan-features-textarea { min-height: 120px; font-family: var(--font-body); font-size: 0.88rem; line-height: 1.6; }
.plan-client-count { font-size: 0.8rem; color: var(--color-ink-soft); }

.client-ficha-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: start; }
.ficha-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.ficha-avatar { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 8px; }
.ficha-card h2 { font-size: 1.2rem; margin: 0; }
.ficha-card .ficha-plan-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; color: #fff;
  margin-top: 6px;
}
.ficha-meta-list { width: 100%; text-align: left; margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.ficha-meta-list div { display: flex; flex-direction: column; gap: 2px; font-size: 0.86rem; }
.ficha-meta-list span:first-child { color: var(--color-ink-soft); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; }
.ficha-meta-list span:last-child { font-weight: 600; word-break: break-word; }
.ficha-actions { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }

.overdue-banner {
  display: flex; align-items: center; gap: 12px;
  background: #FEF3C7; color: #92400E;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: 0.88rem;
  margin-bottom: 20px;
}
.overdue-banner.is-blocked { background: #FEE2E2; color: #991B1B; }
.overdue-banner.trial-banner { background: #FEE2E2; color: #991B1B; }
.overdue-banner svg { flex: none; }

/* Bloqueo de módulos del negocio por falta de pago (ver
   agendaCheckAccountLock en shell.js) · antes tapaba TODO el panel con
   un overlay a pantalla completa, pero eso también tapaba Mi negocio y
   el dueño no podía ni llegar a pagar · ahora es un aviso arriba del
   contenido (".account-locked-banner", variante de .overdue-banner) y
   el contenido del módulo queda sin interacción (no Mi negocio, que es
   donde se paga) en vez de completamente oculto. */
/* Se eleva por sobre los avisos más chicos (pago por vencer, prueba
   por terminar siguen con la caja plana de arriba): tarjeta blanca con
   acento rojo a la izquierda, ícono en círculo y texto en dos niveles
   (título + detalle), porque esto es lo más serio que le puede pasar a
   una cuenta — se nota más que un aviso cualquiera. */
.overdue-banner.account-locked-banner {
  background: var(--color-surface);
  border: 1px solid #FECACA;
  border-left: 4px solid #DC2626;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 18px 22px;
  color: var(--color-ink);
  flex-wrap: wrap;
}
.account-locked-banner-icon {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: #FEE2E2; color: #DC2626;
  display: flex; align-items: center; justify-content: center;
}
.account-locked-banner-text { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 3px; }
.account-locked-banner-text strong { font-size: 0.98rem; color: var(--color-ink); }
.account-locked-banner-text span { font-size: 0.86rem; color: var(--color-ink-soft); line-height: 1.5; }
.account-locked-banner .btn { flex: none; }
body[data-theme="dark"] .account-locked-banner { border-color: #4C1D1D; }
body[data-theme="dark"] .account-locked-banner-icon { background: #3D1518; color: #F87171; }
.app-main.agenda-account-locked > *:not(.account-locked-banner):not(#app-mobile-topbar) {
  pointer-events: none;
  user-select: none;
  opacity: 0.55;
}
/* La isla (sidebar toggle, sitio, guía, notificaciones, cuenta) queda
   sin interacción siempre que la cuenta esté bloqueada, incluso en Mi
   negocio (que si no, es la única página donde el resto del contenido
   queda interactivo) · no es contenido de un módulo, es navegación y
   herramientas de cuenta, así que se apaga aparte en vez de depender
   de ".agenda-account-locked" en .app-main (ver agendaCheckAccountLock
   en shell.js). */
.topbar-island.agenda-island-locked,
.amt-icons.agenda-island-locked {
  pointer-events: none;
  opacity: 0.45;
}
/* Links del menú a módulos que no sea Inicio/Mi negocio, mientras la
   cuenta esté bloqueada (ver agendaApplyAccountLockToNav en shell.js):
   siguen ahí (no se puede "navegar al revés" por un menú con huecos),
   solo que atenuados y sin poder hacerles clic. */
.sidebar-link.is-nav-locked,
.abn-item.is-nav-locked,
.abn-row.is-nav-locked,
.topbar-user-menu a.is-nav-locked {
  pointer-events: none;
  opacity: 0.4;
}

/* =========================================================
   App shell (post-login "Inicio")
   ========================================================= */
/* Evita el flash de contenido "en crudo" (sin datos, sección en blanco)
   mientras se resuelve auth-guard.js: solo lo usan las páginas que
   marcan su .app-shell con .agenda-loading en el HTML; auth-guard.js
   la saca apenas la página ya está pintada con datos reales. */
.app-shell.agenda-loading { visibility: hidden; }
/* Mismo cuidado, pero para la navegación interna del panel sin recarga
   completa (ver agendaNavigateInPanel en main.js): ahí lo que se pinta
   de golpe es .app-main, no el .app-shell entero. */
.app-main.agenda-loading { visibility: hidden; }
/* Mismo cuidado, pero para el sitio público de cada negocio (sitio/index,
   reservar, mi-cuenta): el HTML trae de fábrica un negocio de ejemplo
   ("Barbería El Father") para que se vea bien en el editor, así que sin
   esto se alcanzaba a ver ese negocio de muestra por un instante antes de
   que sitio-shared.js lo reemplazara con el negocio real · ver
   agendaShowPublicSiteOverlay/agendaRevealPublicSite en sitio-shared.js. */
.public-site-body.agenda-loading { visibility: hidden; }
#agenda-public-site-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--color-bg);
}
.app-sidebar {
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: 14px 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Fijo en pantalla siempre, sin importar cuánto scroll tenga el módulo
     de la derecha: se pega arriba de su columna del grid y mide el alto
     completo de la ventana, con scroll propio solo si el menú mismo
     llegara a no caber (pantallas muy bajas). */
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
}
.app-sidebar .brand { margin-bottom: 18px; padding: 0 8px; }
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--color-ink-soft);
}
.sidebar-link svg { flex: none; }
.sidebar-link:hover { background: var(--color-bg-alt); color: var(--color-primary); }
.sidebar-link.active { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); }
.sidebar-section-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-soft);
  padding: 18px 12px 6px;
}
.sidebar-footer {
  margin-top: auto;
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sidebar-footer .avatar { width: 38px; height: 38px; font-size: 0.85rem; }
.sidebar-footer strong { display: block; font-size: 0.88rem; }
.sidebar-footer span { font-size: 0.78rem; color: var(--color-ink-soft); }
.sidebar-footer a { margin-left: auto; color: var(--color-ink-soft); }
.sidebar-footer a:hover { color: var(--color-accent); }

/* overflow-x: clip (no "hidden") a propósito: "hidden" en un solo eje
   fuerza el otro eje a "auto", convirtiendo a .app-main en su propio
   contenedor de scroll y rompiendo silenciosamente cualquier
   position:sticky adentro (como la vista previa de Mi sitio web). "clip"
   recorta el desborde horizontal igual, sin ese efecto secundario. */
.app-main { padding: 28px 36px 60px; overflow-x: clip; }

/* Barra + botón de menú solo para móvil: se inyectan desde shell.js como
   primer hijo de .app-main, así ninguna página del panel necesita tocar
   su propio HTML para tener navegación en el teléfono. */
.app-mobile-topbar { display: none; }
.app-mobile-nav-toggle {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  border: 1.5px solid var(--color-border);
  background: var(--color-bg-alt);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-ink);
  cursor: pointer;
}
.app-mobile-topbar-brand { font-family: var(--font-display); font-weight: 700; }
.mobile-nav-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(30, 27, 46, 0.45);
  z-index: 250;
}
.mobile-nav-backdrop.show { display: block; }
.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 16px;
}
/* El bloque de título (h1 + descripción) es el primer hijo directo, sin
   clase propia · sin esto, una descripción larga (ej. Contacto en
   Superadmin) no tiene límite de ancho y flex-wrap manda TODO el resto
   (botones, isla superior) a una segunda fila entera en vez de solo
   envolver su propio texto · min-width:0 es lo que permite que un hijo
   flex se achique por debajo de su contenido y realmente envuelva. */
.app-topbar > div:first-child { flex: 1 1 auto; min-width: 0; }
.app-topbar h1 { font-size: 33px; margin-bottom: 2px; color: #000; }
.app-topbar p { margin: 0; font-size: 0.92rem; }
/* Página "Más": no trae h1 (el menú inferior ya dice "Más" en su propio
   ícono, repetirlo arriba era redundante) · este párrafo hace de único
   encabezado, por eso lleva su propio tamaño en vez del genérico de
   arriba. */
.app-shell .app-topbar p.mas-topbar-lead { font-size: 1.05rem; font-weight: 700; color: var(--color-ink); }
.topbar-actions { display: flex; gap: 12px; align-items: center; }
.site-link-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
}
.site-link-pill:hover { border-color: var(--color-primary); background: var(--color-bg-alt); }
.site-link-pill svg:first-child { color: var(--color-ink-soft); }

.site-preview-card p { color: var(--color-ink-soft); }

.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-soft);
  position: relative;
}
.icon-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.icon-btn .badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}
/* Variante de 3 tarjetas (ej. superadmin/mercadopago.html): mismo
   componente, solo cambia cuántas columnas tiene en escritorio · en
   mobile sigue bajando a 2 (y luego 1) con las mismas reglas de
   ".stat-row" de más abajo, porque el elemento trae ambas clases. */
.stat-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.stat-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.stat-card h3 { font-family: var(--font-display); font-size: 1.4rem; margin: 0; }
.stat-card span { font-size: 0.82rem; color: var(--color-ink-soft); }

.dash-grid {
  display: grid;
  grid-template-columns: 1.6fr minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.panel-head h3 { margin: 0; font-size: 1.05rem; }
.panel-head a { font-size: 0.85rem; font-weight: 600; color: var(--color-primary); }

.mini-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: 12px;
}
.mini-calendar span.dow {
  text-align: center;
  font-size: 0.7rem;
  color: var(--color-ink-soft);
  font-weight: 600;
  padding-bottom: 6px;
}
.mini-calendar .cell {
  aspect-ratio: 1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  color: var(--color-ink-soft);
  cursor: pointer;
}
.mini-calendar .cell:hover { background: var(--color-bg-alt); }
.mini-calendar .cell.muted { color: #C9C6DD; }
.mini-calendar .cell.today { background: var(--color-primary); color: #fff; font-weight: 700; }
.mini-calendar .cell.event { background: var(--color-bg-alt); color: var(--color-primary); font-weight: 600; }

.agenda-list { display: flex; flex-direction: column; gap: 12px; }
.agenda-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  transition: box-shadow 0.15s ease;
}
.agenda-item:hover { box-shadow: var(--shadow-sm); }
.agenda-time {
  width: 58px;
  flex: none;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-bg-alt);
  border-radius: 8px;
  padding: 8px 4px;
}
.agenda-item h4 { margin: 0 0 2px; font-size: 0.94rem; }
.agenda-item p { margin: 0; font-size: 0.82rem; }
.agenda-tag {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  flex: none;
}
.tag-family { background: #E0F2FE; color: #0369A1; }
.tag-work { background: #FFEDD5; color: #C2410C; }
.tag-health { background: #DCFCE7; color: #15803D; }
.tag-school { background: #EDE9FE; color: #6D28D9; }

.family-row { display: flex; flex-direction: column; gap: 14px; }
.family-member {
  display: flex;
  align-items: center;
  gap: 12px;
}
.family-member .avatar { width: 40px; height: 40px; font-size: 0.82rem; }
.family-member div { flex: 1; }
.family-member strong { display: block; font-size: 0.88rem; }
.family-member span { font-size: 0.78rem; color: var(--color-ink-soft); }
.family-member .status-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--color-success);
}

/* Ranking de "Servicios más reservados" en Inicio: misma tarjeta visual
   que las filas de Servicios (ícono/color por servicio, ver
   agendaServiceVisual en sitio-shared.js) en vez del avatar genérico
   de .family-member, para que ambas pantallas se lean como un mismo
   sistema. */
.svc-rank-list { display: flex; flex-direction: column; gap: 14px; }
.svc-rank-item { display: flex; align-items: center; gap: 12px; }
.svc-rank-badge {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--color-bg-alt); color: var(--color-ink-soft);
  font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.svc-rank-info { flex: 1; min-width: 0; }
.svc-rank-info h4 { margin: 0 0 2px; font-size: 0.88rem; }
.svc-rank-info span { font-size: 0.78rem; color: var(--color-ink-soft); }
.svc-rank-price { font-size: 0.88rem; flex: none; }

.empty-tip {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  padding: 16px;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}
.empty-tip svg { flex: none; color: var(--color-primary); }

/* =========================================================
   Responsive
   ========================================================= */
/* =========================================================
   App shell · extras: tabs, tablas, badges, formularios
   ========================================================= */
.page-tabs {
  display: flex;
  gap: 6px;
  background: var(--color-bg-alt);
  padding: 5px;
  border-radius: 999px;
  width: fit-content;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.page-tab {
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  border: none;
  background: transparent;
}
.page-tab.active { background: var(--color-surface); color: var(--color-primary); box-shadow: var(--shadow-sm); }

.toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.search-input {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  min-width: 240px;
}
.search-input svg { color: var(--color-ink-soft); flex: none; }
.search-input input { border: none; outline: none; font-family: inherit; font-size: 0.9rem; width: 100%; background: transparent; }
.filter-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-chip {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-ink-soft);
}
.filter-chip.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* Isla de herramientas (Reservas): filtro, buscador y vista de un lado
   a otro, unidos en un solo contenedor en vez de piezas sueltas
   flotando por separado · nombres propios (toolbar-island-*) para no
   tocar .filter-chip/.search-input/.view-toggle que ya usan otros
   módulos (Clientes, Ventas, superadmin) con su look de siempre. */
.toolbar-island {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 6px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.toolbar-island-divider { width: 1px; margin: 6px 2px; background: var(--color-border); flex: none; }

.toolbar-island-filter-wrap { position: relative; flex: none; }
.toolbar-island-filter-btn {
  display: flex; align-items: center; gap: 8px; height: 34px;
  padding: 0 16px; border-radius: 999px; border: none; background: none;
  font-size: 0.86rem; font-weight: 700; color: var(--color-ink); white-space: nowrap;
}
.toolbar-island-filter-btn:hover { background: var(--color-bg-alt); }
.toolbar-island-filter-btn svg:first-child { color: var(--color-primary); }
.toolbar-island-filter-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 20;
  min-width: 190px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.toolbar-island-filter-menu[hidden] { display: none; }
.toolbar-island-filter-menu .filter-chip {
  border: none; background: none; text-align: left; padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 0.86rem; font-weight: 600; color: var(--color-ink-soft);
}
.toolbar-island-filter-menu .filter-chip:hover { background: var(--color-bg-alt); }
.toolbar-island-filter-menu .filter-chip.active { background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary); }

.toolbar-island-search { flex: 1; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 16px; min-width: 0; color: var(--color-ink-soft); }
.toolbar-island-search input { border: none; outline: none; font-family: inherit; font-size: 0.9rem; width: 100%; background: transparent; }

.toolbar-island-views.view-toggle { border: none; padding: 0; background: none; flex: none; }

/* Calendario: toggle de 4 vías (Mes/Semana/Día/General) en vez de los 2
   íconos de Reservas · mismo componente (.view-toggle), solo con
   botones de ancho flexible y texto en vez de ícono. */
.cal-view-toggle { flex: none; }
.cal-view-toggle.view-toggle .view-toggle-btn { width: auto; padding: 0 14px; font-size: 0.82rem; font-weight: 700; white-space: nowrap; }

/* Calendario: navegación de fecha (anterior / período / siguiente / hoy)
   centrada dentro de la misma isla, entre el filtro de profesional y el
   selector de vista. */
.toolbar-island-datenav { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; }
.toolbar-island-datenav-btn {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  border: 1.5px solid var(--color-border); background: var(--color-surface); color: var(--color-ink-soft);
  display: flex; align-items: center; justify-content: center;
}
.toolbar-island-datenav-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.toolbar-island-datenav-label { font-size: 0.86rem; font-weight: 700; color: var(--color-ink); white-space: nowrap; min-width: 130px; text-align: center; }
.toolbar-island-datenav-today {
  padding: 0 14px; height: 30px; border-radius: 999px; flex: none;
  border: 1.5px solid var(--color-border); background: var(--color-surface); color: var(--color-ink-soft);
  font-size: 0.8rem; font-weight: 700; margin-left: 6px;
}
.toolbar-island-datenav-today:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Calendario: vista mensual */
.month-weekday-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.month-weekday-row span { text-align: center; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink-soft); }
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.month-day-cell {
  position: relative;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 8px; min-height: 108px; display: flex; flex-direction: column; gap: 6px;
  cursor: pointer; transition: border-color 0.15s ease;
}
.month-day-cell:hover { border-color: var(--color-primary); }
.month-day-cell.is-today { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(79,70,229,0.15); }
.month-day-cell.is-outside { background: var(--color-bg-alt); opacity: 0.55; }
.month-day-num { font-size: 0.82rem; font-weight: 700; }
.month-day-cell.is-today .month-day-num { color: var(--color-primary); }
.month-chip-list { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; overflow: hidden; }
.month-chip {
  font-size: 0.68rem; font-weight: 600; padding: 3px 6px; border-radius: 6px;
  background: var(--color-bg-alt); border-left: 3px solid var(--color-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.month-chip.st-pendiente { border-left-color: #B45309; }
.month-chip.st-cancelada { border-left-color: #B91C1C; opacity: 0.6; }
.month-chip.st-completada { border-left-color: #4338CA; }
.month-chip.st-confirmada { border-left-color: #15803D; }
.month-more { font-size: 0.66rem; color: var(--color-ink-soft); font-weight: 700; }
.month-day-add {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 20px; height: 20px; border-radius: 6px; line-height: 1;
  border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-ink-soft);
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
  opacity: 0; transition: opacity 0.15s ease;
}
.month-day-cell:hover .month-day-add { opacity: 1; }
.month-day-add:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Chips de canal de aviso (modal de reserva) */
.notify-chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.notify-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.notify-chip:hover { border-color: var(--color-primary-light); }
.notify-chip.active { background: var(--color-bg-alt); border-color: var(--color-primary); color: var(--color-primary-dark); }
.notify-chip.muted.active { background: #F1F0F4; border-color: var(--color-ink-soft); color: var(--color-ink-soft); }

.notify-preview { margin-top: 12px; }
.chat-bubble {
  position: relative;
  background: #DCF8C6;
  color: #1E1B2E;
  border-radius: 14px 14px 14px 3px;
  padding: 12px 14px;
  font-size: 0.85rem;
  max-width: 340px;
  line-height: 1.45;
}
.chat-bubble span.chat-meta { display: block; margin-top: 6px; font-size: 0.7rem; color: #4A7A2E; text-align: right; }
.notify-cell { display: flex; gap: 4px; align-items: center; font-size: 0.9rem; }
.notify-cell.none { color: var(--color-ink-soft); font-size: 0.78rem; }

/* Ventas / cobros */
.pay-badge { display:inline-flex; align-items:center; gap:6px; font-size:0.78rem; font-weight:700; padding:5px 12px; border-radius:999px; white-space:nowrap; }
.pay-badge.paid { background:#DCFCE7; color:#15803D; }
.pay-badge.pending { background:#FEF3C7; color:#B45309; }
.pay-method-tag { font-size: 0.72rem; color: var(--color-ink-soft); display: block; margin-top: 2px; }

/* Estado en vivo (sitio público): Abierto ahora / Cerrado ahora */
.live-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.live-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.live-status-pill.is-open .live-dot { background: #22C55E; }
.live-status-pill.is-closed .live-dot { background: #F43F5E; }
.live-status-pill.is-open .live-dot::after,
.live-status-pill.is-closed .live-dot::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  background: inherit;
  opacity: 0.5;
  animation: agenda-pulse 1.8s ease-out infinite;
}
@keyframes agenda-pulse {
  0% { transform: scale(0.6); opacity: 0.55; }
  100% { transform: scale(2.2); opacity: 0; }
}
.live-status-detail { opacity: 0.85; font-weight: 400; }

/* Checklist "qué tan listo está tu sitio" */
.checklist-pct { font-weight: 700; color: var(--color-primary); font-size: 1.1rem; }
.checklist-track { height: 8px; border-radius: 999px; background: var(--color-bg-alt); overflow: hidden; margin: 4px 0 18px; }
.checklist-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--color-primary-light), var(--color-accent)); width: 0%; transition: width 0.35s ease; }
.checklist-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.checklist-item { display: flex; gap: 10px; align-items: flex-start; }
.checklist-item .check-dot {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  border: 2px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; color: transparent;
  margin-top: 1px;
}
.checklist-item.done .check-dot { background: var(--color-success); border-color: var(--color-success); color: #fff; }
.checklist-item strong { display: block; font-size: 0.87rem; }
.checklist-item.done strong { color: var(--color-ink-soft); text-decoration: line-through; text-decoration-color: var(--color-border); }
.checklist-item span { font-size: 0.78rem; color: var(--color-ink-soft); }

/* Toggle lista/semana */
.view-toggle { display: flex; border: 1.5px solid var(--color-border); border-radius: 12px; padding: 3px; background: var(--color-surface); flex: none; }
.view-toggle-btn {
  width: 36px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: transparent;
  color: var(--color-ink-soft);
  border: none;
}
.view-toggle-btn.active { background: var(--color-primary); color: #fff; }

/* Variante con ícono + texto (en vez de solo ícono) · mismo componente,
   usada por el selector de tema de Configuración > Preferencias. */
.theme-toggle.view-toggle { display: inline-flex; }
.theme-toggle.view-toggle .view-toggle-btn { width: auto; height: auto; padding: 9px 16px; gap: 7px; font-size: 0.85rem; font-weight: 600; }

/* Vista semana (tablero por día) */
.week-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.week-nav strong { font-size: 0.95rem; }
.week-board { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 12px; overflow-x: auto; }
.week-day-col { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px; min-height: 220px; display: flex; flex-direction: column; }
.week-day-col.is-today { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(79,70,229,0.15); }
.week-day-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.week-day-head .wd-name { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink-soft); font-weight: 700; }
.week-day-head .wd-num { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; }
.week-day-col.is-today .wd-num { color: var(--color-primary); }
.week-chip-list { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.week-chip {
  border-left: 3px solid var(--color-primary);
  background: var(--color-bg-alt);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 0.76rem;
}
.week-chip strong { display: block; font-size: 0.8rem; }
.week-chip span { color: var(--color-ink-soft); }
.week-chip.st-pendiente { border-color: #B45309; }
.week-chip.st-cancelada { border-color: #B91C1C; opacity: 0.6; }
.week-chip.st-completada { border-color: #4338CA; }
.week-day-empty { font-size: 0.76rem; color: var(--color-ink-soft); text-align: center; padding: 18px 0; flex: 1; }
.week-day-add {
  margin-top: 10px;
  border: 1.5px dashed var(--color-border);
  border-radius: 8px;
  padding: 6px;
  font-size: 0.76rem;
  color: var(--color-ink-soft);
  background: transparent;
  text-align: center;
}
.week-day-add:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* =========================================================
   TELÉFONO · isla de herramientas (filtros / buscador / navegador de
   fecha / selector de vista) y vista de Calendario. La misma
   ".toolbar-island" se usa en Calendario, Reservas, Clientes y Ventas
   con distintas combinaciones de hijos — acá se adapta de forma
   genérica apilando cada pieza en su propia fila (la forma de píldora
   horizontal no entra en una pantalla de teléfono sin cortarse).
   ========================================================= */
@media (max-width: 760px) {
  .toolbar-island {
    flex-wrap: wrap;
    border-radius: 16px;
    padding: 8px;
    gap: 8px;
  }
  .toolbar-island-divider { display: none; }

  .toolbar-island-filter-wrap { flex: 1 1 0; min-width: 0; order: 1; }
  .toolbar-island-filter-btn { width: 100%; justify-content: space-between; }
  .toolbar-island-filter-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .toolbar-island-filter-menu { min-width: 0; width: max-content; max-width: calc(100vw - 48px); }
  /* El segundo filtro (sucursal, en Clientes/Ventas) suele quedar
     pegado al borde derecho de la isla · su menú se abre hacia la
     izquierda para no salirse de la pantalla. */
  #branch-filter-wrap .toolbar-island-filter-menu { left: auto; right: 0; }

  .toolbar-island-datenav { flex: 1 1 100%; order: 2; }
  .toolbar-island-datenav-label { min-width: 0; flex: 1; font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .toolbar-island-datenav-today { padding: 0 10px; font-size: 0.74rem; }

  .toolbar-island-search { flex: 1 1 100%; order: 3; background: var(--color-bg-alt); border-radius: 10px; }

  .toolbar-island-views.toolbar-island-views { flex: 1 1 100%; order: 4; }
  .toolbar-island-views .view-toggle-btn { flex: 1; }

  /* Vista mensual: 7 columnas de texto completo no entran en una
     pantalla de teléfono · se reduce a número de día + puntos de color
     por reserva (como Google Calendar en celular), nada de texto que
     se corte. Tocar la celda sigue llevando al detalle del día
     completo (agendaCalRenderCurrentView en calendario.js), así que no
     se pierde información, solo se resume. */
  .month-weekday-row { gap: 2px; margin-bottom: 4px; }
  .month-weekday-row span { font-size: 0.6rem; }
  .month-grid { gap: 2px; }
  .month-day-cell { min-height: 56px; padding: 4px 3px; gap: 3px; border-radius: 8px; }
  .month-day-num { font-size: 0.72rem; }
  .month-day-add { display: none; }
  .month-chip-list {
    flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center;
    flex: none; gap: 3px; overflow: visible;
  }
  .month-chip {
    width: 5px; height: 5px; min-height: 0; padding: 0; border-radius: 50%;
    font-size: 0; line-height: 0; overflow: hidden;
    border-left: none; background: var(--color-primary);
  }
  .month-chip.st-pendiente { background: #B45309; }
  .month-chip.st-cancelada { background: #B91C1C; opacity: 0.6; }
  .month-chip.st-completada { background: #4338CA; }
  .month-chip.st-confirmada { background: #15803D; }
  .month-more { display: none; }

  /* Vista semanal: sigue siendo un tablero de 7 columnas con scroll
     horizontal (no se corta nada, se desliza) · con scroll-snap se
     siente como pasar de día en día en vez de un scroll suelto. */
  .week-board { grid-template-columns: repeat(7, minmax(78vw, 1fr)); gap: 10px; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .week-day-col { scroll-snap-align: start; }
}

/* Data table */
.table-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.table-scroll { overflow-x: auto; }
table.data-table { width: 100%; border-collapse: collapse; min-width: 640px; }
table.data-table th {
  text-align: left;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ink-soft);
  padding: 14px 20px;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
table.data-table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
  vertical-align: middle;
}
table.data-table tr:last-child td { border-bottom: none; }
table.data-table tr:hover td { background: var(--color-bg-alt); }
.cell-strong { font-weight: 600; color: var(--color-ink); }
.cell-muted { color: var(--color-ink-soft); font-size: 0.85rem; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.row-actions button, .row-actions a {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-ink-soft);
}
.row-actions button:hover { border-color: var(--color-primary); color: var(--color-primary); }
.row-actions button.danger:hover { border-color: #DC2626; color: #DC2626; }
.row-actions button.active { border-color: #15803D; color: #15803D; background: #DCFCE7; }

/* Status badges */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-confirmada { background: #DCFCE7; color: #15803D; }
.badge-pendiente { background: #FEF3C7; color: #B45309; }
.badge-cancelada { background: #FEE2E2; color: #B91C1C; }
.badge-activo { background: #DCFCE7; color: #15803D; }
.badge-atrasado { background: #FEF3C7; color: #B45309; }
.badge-bloqueado { background: #FEE2E2; color: #B91C1C; }
.badge-prueba { background: #E0F2FE; color: #0369A1; }
.badge-completada { background: #E0E7FF; color: #4338CA; }
.badge-activo { background: #DCFCE7; color: #15803D; }
.badge-inactivo { background: #F1F0F4; color: var(--color-ink-soft); }
.badge-frecuente { background: #EDE9FE; color: #6D28D9; }
.badge-regular { background: #E0F2FE; color: #0369A1; }
.badge-nuevo { background: #FFEDD5; color: #C2410C; }
.badge-contactado { background: #DCFCE7; color: #15803D; }

.badge-pref { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.badge-pref-whatsapp { background: var(--icon-green-bg); color: var(--icon-green-fg); }
.badge-pref-correo { background: var(--icon-blue-bg); color: var(--icon-blue-fg); }

/* Switch toggle */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  flex: none;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track {
  position: absolute; inset: 0;
  background: #D8D5EB;
  border-radius: 999px;
  transition: background 0.15s ease;
  cursor: pointer;
}
.switch-track::before {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.switch input:checked + .switch-track { background: var(--color-primary); }
.switch input:checked + .switch-track::before { transform: translateX(18px); }

/* Cards used for services / hours / settings rows */
.list-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.list-card-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  background: var(--color-bg-alt);
  flex: none;
}
.list-card-body { flex: 1; min-width: 0; }
.list-card-body h4 { margin: 0 0 3px; font-size: 0.98rem; }
.list-card-body p { margin: 0; font-size: 0.84rem; }
.list-card-meta { text-align: right; flex: none; }
.list-card-meta strong { display: block; font-family: var(--font-display); font-size: 1.05rem; }
.list-card-meta span { font-size: 0.78rem; color: var(--color-ink-soft); }
.list-card-actions { display: flex; gap: 8px; flex: none; }

.hours-row {
  display: grid;
  grid-template-columns: 140px auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--color-border);
}
.hours-row:last-child { border-bottom: none; }
.hours-row.closed { opacity: 0.5; }
.hours-day { font-weight: 600; font-size: 0.94rem; }
.hours-time-inputs { display: flex; align-items: center; gap: 10px; }
.hours-time-inputs input[type="time"] {
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.86rem;
  background: var(--color-bg);
}
.hours-time-inputs span { color: var(--color-ink-soft); font-size: 0.85rem; }
.hours-status { font-size: 0.82rem; font-weight: 600; text-align: right; }

/* Modal */
/* Mientras cualquier modal está abierto, la página de fondo no debe poder
   scrollearse: si no, queda su propia barra de scroll "flotando" en el
   borde derecho de la ventana, separada y descalzada del modal (se nota
   sobre todo en modales altos como "Cambiar de plan", donde el scroll de
   adentro y el de afuera compiten y se ve poco profesional). */
body:has(.modal-overlay.open) { overflow: hidden; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 27, 46, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 32px;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.modal-head h3 { margin: 0; font-size: 1.2rem; }
.modal-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--color-bg-alt);
  color: var(--color-ink-soft);
  display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: var(--color-border); }
.auth-modal-gate-note {
  margin: -12px 0 18px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  color: var(--color-ink-soft);
  font-size: 0.85rem;
}
.modal-actions { display: flex; gap: 12px; margin-top: 24px; }
.modal-actions .btn { flex: 1; }

/* Modal ancho con "sidebar" incorporado (ej: editor de servicio) · los
   campos principales a la izquierda, foto y apariencia a la derecha,
   en vez de una sola columna angosta apilando todo. */
.modal-box-wide { max-width: 820px; }
.modal-form-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.modal-form-sidebar { background: var(--color-bg-alt); border-radius: var(--radius-md); padding: 18px; }

/* Modal "Cambiar de plan" (Mi negocio > Plan y pagos): mismo look que las
   tarjetas de reg-plan-card del registro, a escala de modal en vez de
   página completa. */
.plan-pick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plan-pick-card {
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md); padding: 20px;
  display: flex; flex-direction: column; background: var(--color-surface); position: relative;
}
.plan-pick-card.featured { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.plan-pick-card.is-current { background: var(--color-bg-alt); }
.plan-pick-tag {
  position: absolute; top: -11px; left: 20px; background: var(--color-primary); color: #fff;
  font-size: 0.68rem; font-weight: 700; padding: 3px 11px; border-radius: 999px;
}
.plan-pick-current-badge {
  align-self: flex-start; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--color-primary); background: var(--color-primary-light); padding: 3px 10px; border-radius: 999px; margin-bottom: 8px;
}
.plan-pick-card h3 { font-size: 1.02rem; margin: 6px 0 4px; }
.plan-pick-price { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; margin-bottom: 6px; }
.plan-pick-price span { font-size: 0.74rem; font-weight: 500; color: var(--color-ink-soft); }
.plan-pick-savings { font-size: 0.76rem; font-weight: 600; color: var(--color-success); margin: -4px 0 8px; }
.plan-pick-desc { font-size: 0.8rem; color: var(--color-ink-soft); margin: 0 0 12px; min-height: 34px; }
.plan-pick-features { list-style: none; margin: 0 0 16px; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 7px; }
.plan-pick-features li { display: flex; align-items: flex-start; gap: 7px; font-size: 0.8rem; color: var(--color-ink); }
.plan-pick-features li svg { flex: none; color: var(--color-success); margin-top: 2px; }

/* Modal de plan más ancho, con una barra vertical a la izquierda (ciclo
   de pago) en vez de solo el toggle horizontal arriba, para que la
   ventana se sienta menos apretada con las 3 tarjetas al lado. */
.modal-box-xwide { max-width: 1040px; }
.plan-modal-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: start; }
.plan-modal-sidebar { background: var(--color-bg-alt); border-radius: var(--radius-md); padding: 18px; position: sticky; top: 0; }
.plan-modal-sidebar-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-ink-soft); margin-bottom: 10px; }
.pricing-cycle-toggle-vertical { display: flex; flex-direction: column; gap: 6px; }
.pricing-cycle-btn-v {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px; border-radius: 10px; border: none; background: var(--color-surface);
  color: var(--color-ink-soft); font-weight: 600; font-size: 0.85rem; text-align: left;
}
.pricing-cycle-btn-v.active { background: var(--color-primary); color: var(--color-on-primary); }
.pricing-cycle-btn-v.active .pricing-cycle-save-badge { background: var(--color-on-primary-veil); color: var(--color-on-primary); }
.plan-modal-sidebar-note { font-size: 0.76rem; color: var(--color-ink-soft); margin: 14px 0 0; }

@media (max-width: 820px) {
  .plan-modal-layout { grid-template-columns: minmax(0, 1fr); }
  .pricing-cycle-toggle-vertical { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 680px) {
  .plan-pick-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Detalle del cobro (Mi negocio > Plan y pagos): mismo look que
   .reg-breakdown del registro, reusado acá para el plan activo o el
   pendiente de pago. */
.plan-breakdown { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 18px 20px; margin-bottom: 24px; }
.plan-breakdown-row { display: flex; justify-content: space-between; font-size: 0.88rem; color: var(--color-ink-soft); padding: 6px 0; }
.plan-breakdown-row.total { border-top: 1px solid var(--color-border); margin-top: 6px; padding-top: 12px; font-size: 1rem; font-weight: 700; color: var(--color-ink); }

.form-row-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.form-row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
textarea.input-plain, select.input-plain, input.input-plain {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  font-size: 0.92rem;
  font-family: inherit;
  background: var(--color-surface);
  resize: vertical;
}
textarea.input-plain:focus, select.input-plain:focus, input.input-plain:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(79,70,229,0.12);
}
input.input-plain.input-error { border-color: #DC2626; }
input.input-plain.input-error:focus { box-shadow: 0 0 0 4px rgba(220,38,38,0.12); }
input.input-plain[readonly] { background: var(--color-bg-alt); color: var(--color-ink-soft); cursor: not-allowed; }
input.input-plain[readonly]:focus { box-shadow: none; border-color: var(--color-border); }
.field-error { display: none; color: #DC2626; font-size: 0.78rem; margin-top: 6px; }
.field-error.show { display: block; }

/* Aviso de instalación de la PWA (ver agendaWireInstallBanner en shell.js
   y superadmin-shell.js) · franja fija arriba de todo, no tapa el resto
   del panel. */
.agenda-install-banner {
  position: sticky;
  top: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.86rem;
}
.agenda-install-banner-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.agenda-install-banner .btn-primary { background: #fff; color: var(--color-primary); }
.agenda-install-banner .btn-primary:hover { background: rgba(255,255,255,0.9); }
.agenda-install-dismiss {
  background: none; border: none; color: #fff; font-size: 1.3rem; line-height: 1;
  cursor: pointer; padding: 0 4px; opacity: 0.8;
}
.agenda-install-dismiss:hover { opacity: 1; }

/* Superposición de auth-guard: solo aparece si la verificación de sesión
   tarda de verdad (ver auth-guard.js) · fondo fijo en el mismo tono crema
   que "background_color" del manifest (ver app/manifest.webmanifest),
   NO var(--color-bg) · esta superposición vive fuera de .app-shell (se
   agrega a <html>, no a <body>), así que var(--color-bg) le llegaba sin
   el override de .app-shell y resolvía a un crema distinto al de la
   splash nativa de Android/iOS · ese desajuste de color es justo lo que
   se sentía como "dos pantallas de carga" seguidas en vez de una sola
   transición continua. */
#agenda-auth-guard-overlay {
  position: fixed;
  inset: 0;
  background: #F4F5FB;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  transition: opacity 0.28s ease;
}
#agenda-auth-guard-overlay.is-leaving { opacity: 0; }
/* Logo de carga: el logotipo completo (isotipo + wordmark), no solo el
   ícono — es el momento de marca al abrir la app, se ve cada vez que se
   abre de nuevo (ver auth-guard.js: ya no depende de que la
   verificación de sesión tarde). Entra con una animación de dos tiempos
   (aparece y sube un poco, más la respiración sutil de abajo) en vez de
   solo un fundido, para que se sienta más elaborado. */
.agenda-auth-logo {
  width: min(220px, 60vw); height: auto; object-fit: contain;
  animation: agenda-logo-in 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes agenda-logo-in {
  from { opacity: 0; transform: translateY(10px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Barra de carga indeterminada (un segmento que recorre de lado a lado
   en bucle) en vez de un círculo girando · se siente más "pantalla de
   carga de app" y menos "algo falló y está reintentando". */
.agenda-auth-progress {
  width: 130px; height: 4px; border-radius: 999px;
  background: rgba(28, 53, 40, 0.1);
  overflow: hidden;
  position: relative;
  animation: agenda-progress-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.agenda-auth-progress::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -40%;
  width: 40%; border-radius: 999px;
  background: var(--color-primary);
  animation: agenda-progress-slide 1.1s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes agenda-progress-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes agenda-progress-slide {
  0% { left: -40%; }
  100% { left: 100%; }
}
/* Admin (fondo oscuro, ver superadmin-auth-guard.js): fondo del overlay,
   riel de la barra y color del segmento se aclaran para que se sigan
   viendo sobre #12241A — el verde de marca de siempre se pierde en un
   fondo tan oscuro. La clase va en el overlay mismo (no en body): este
   elemento se agrega a <html>, no adentro de <body>, así que un
   selector tipo "body.algo .agenda-auth-progress" nunca lo alcanzaría. */
#agenda-auth-guard-overlay.is-dark { background: #12241A; }
#agenda-auth-guard-overlay.is-dark .agenda-auth-progress { background: rgba(255, 255, 255, 0.14); }
#agenda-auth-guard-overlay.is-dark .agenda-auth-progress::after { background: #9ED14E; }
.agenda-auth-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  animation: agenda-spin 0.7s linear infinite;
}
@keyframes agenda-spin {
  to { transform: rotate(360deg); }
}

/* Spinner chico para cualquier subida de imagen del panel (logo, ícono,
   foto de servicio/profesional/sucursal, fondo de marca) · reemplaza el
   texto "Subiendo…" · ver AgendaStore.spinnerHTML en store.js. */
.agenda-upload-spinner {
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  animation: agenda-spin 0.7s linear infinite;
}

/* Toasts */
.toast-host {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1200;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-ink);
  color: #fff;
  padding: 13px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast svg { color: var(--color-success); flex: none; }

/* Settings page */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.color-swatch-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.color-swatch {
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 2px solid var(--color-border);
  cursor: pointer;
  position: relative;
}
.color-swatch.selected::after {
  content: "✓";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.color-swatch.auto-swatch { background: var(--color-bg-alt); font-size: 1.1rem; display: flex; align-items: center; justify-content: center; }
.color-swatch.auto-swatch.selected::after { content: ""; }

/* Servicios: editor + vista previa en vivo */
.services-editor-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: start; }
/* Edición/creación de plan (Superadmin): mitad y mitad de verdad, a
   diferencia de .services-editor-layout (57/43) · acá el formulario es
   corto (4 paneles) y la tarjeta de precio necesita su ancho real para
   que la vista previa no se vea achicada ni el formulario apretado en
   una columna angosta tipo ficha (ver plan.html, antes usaba
   .client-ficha-grid, pensada para otra cosa). */
.plan-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.drag-hint { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--color-ink-soft); margin: 0 0 14px; }
.services-manage-list { display: flex; flex-direction: column; gap: 12px; }
.service-manage-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
}
.service-manage-card.dragging { opacity: 0.4; }
.service-manage-card .drag-handle { color: var(--color-border); flex: none; cursor: grab; }
.service-manage-card .drag-handle:active { cursor: grabbing; }
.svc-banner-sm { width: 46px; height: 46px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex: none; }
.svc-initials { color: #fff; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.02em; line-height: 1; }

/* Servicios: barra superior compacta + categorías ordenables */
[hidden] { display: none !important; }
.svc-toolbar { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; margin-bottom: 26px; align-items: stretch; }
.svc-tool-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.svc-tool-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.svc-tool-head h3 { margin: 0; font-size: 0.95rem; }
.svc-tool-head p { margin: 3px 0 0; font-size: 0.8rem; color: var(--color-ink-soft); }
.svc-tool-card-wide .svc-category-chips { gap: 8px; }
@media (max-width: 900px) { .svc-toolbar { grid-template-columns: 1fr; } }
.svc-category-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.svc-category-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 8px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-bg); font-size: 0.82rem; font-weight: 600; cursor: grab; user-select: none; }
.svc-category-chip.dragging { opacity: 0.45; }
.svc-category-chip .drag-handle { display: inline-flex; color: var(--color-ink-soft); }
.svc-category-chip-count { font-size: 0.72rem; color: var(--color-ink-soft); font-weight: 600; }
.svc-category-chip button { border: 0; background: transparent; color: var(--color-ink-soft); width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-size: 0.78rem; }
.svc-category-chip button:hover { background: var(--color-surface); color: var(--color-ink); }
.svc-category-chip button.danger:hover { color: #B91C1C; }

/* Editor de servicio (app/servicio-editar.html) */
.svc-back-link { display: inline-block; font-size: 0.82rem; font-weight: 600; color: var(--color-ink-soft); text-decoration: none; margin-bottom: 4px; }
.svc-edit-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: start; }
.svc-edit-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.svc-edit-aside { position: sticky; top: 24px; }
.svc-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 22px 24px; }
.svc-section-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.svc-section-head h3 { margin: 0; font-size: 1rem; }
.svc-section-head p { margin: 3px 0 0; font-size: 0.82rem; color: var(--color-ink-soft); }
.svc-section-num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--color-primary); color: #fff; font-weight: 700; font-size: 0.82rem; display: flex; align-items: center; justify-content: center; }
.svc-optional { font-weight: 500; color: var(--color-ink-soft); font-size: 0.8rem; }
.svc-form-error { color: #B91C1C; font-size: 0.86rem; font-weight: 600; min-height: 1em; margin: 0; }
.svc-preview-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 18px; }
.svc-preview-label { display: block; font-size: 0.76rem; font-weight: 700; color: var(--color-ink-soft); margin-bottom: 12px; }

.svc-upload-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 160px; border: 2px dashed var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); text-align: center; cursor: pointer; padding: 20px; color: var(--color-ink-soft); }
.svc-upload-box:hover { border-color: var(--color-primary); color: var(--color-ink); }
.svc-upload-box strong { color: var(--color-ink); font-size: 0.95rem; }
.svc-upload-box span { font-size: 0.8rem; }
.svc-upload-box.is-busy { cursor: default; border-style: solid; }
.svc-upload-box.is-busy:hover { border-color: var(--color-border); }
.svc-upload-error { color: #B91C1C; font-size: 0.84rem; font-weight: 600; margin: 10px 0 0; }
.svc-upload-filled { display: flex; gap: 16px; align-items: center; }
.svc-upload-thumb { width: 180px; height: 120px; border-radius: var(--radius-lg); background-size: cover; background-position: center; border: 1px solid var(--color-border); flex: none; }
.svc-upload-filled-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

.svc-cal-layout { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 24px; align-items: start; }
.svc-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.svc-cal-head strong { font-size: 0.95rem; }
.svc-cal-nav { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.svc-cal-nav:disabled { opacity: 0.35; cursor: default; }
.svc-cal-weekdays, .svc-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.svc-cal-weekdays span { text-align: center; font-size: 0.72rem; font-weight: 700; color: var(--color-ink-soft); padding-bottom: 4px; }
.svc-cal-cell { position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 10px; background: var(--color-bg); font-size: 0.85rem; font-weight: 600; cursor: pointer; color: var(--color-ink); }
.svc-cal-cell.is-empty { background: transparent; cursor: default; }
.svc-cal-cell:disabled { color: var(--color-border); background: transparent; cursor: default; }
.svc-cal-cell.is-today { border-color: var(--color-primary); }
.svc-cal-cell.is-focus { background: var(--color-primary); color: #fff; }
.svc-cal-cell.has-slots::after { content: ""; position: absolute; bottom: 4px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--color-primary); }
.svc-cal-cell.is-focus.has-slots::after { background: #fff; }
.svc-cal-legend { display: flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--color-ink-soft); margin: 10px 0 0; }
.svc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); display: inline-block; }

.svc-day-editor { min-height: 260px; }
.svc-day-empty { color: var(--color-ink-soft); font-size: 0.88rem; margin: 0; }
.svc-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.svc-day-head h4 { margin: 0; font-size: 1rem; }
.svc-day-head span { font-size: 0.8rem; color: var(--color-ink-soft); }
.svc-day-hint { font-size: 0.8rem; color: var(--color-ink-soft); margin: 4px 0 14px; }
.svc-time-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-time-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg); padding: 3px; }
.svc-time-chip.is-on { border-color: var(--color-primary); background: var(--color-surface); }
.svc-time-toggle { border: 0; background: transparent; padding: 6px 10px; font-weight: 700; font-size: 0.86rem; cursor: pointer; color: var(--color-ink-soft); }
.svc-time-chip.is-on .svc-time-toggle { color: var(--color-primary); }
.svc-cap { display: inline-flex; align-items: center; gap: 4px; padding-right: 4px; font-size: 0.78rem; }
.svc-cap button { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); cursor: pointer; font-size: 0.95rem; line-height: 1; }
.svc-cap b { min-width: 22px; text-align: center; font-size: 0.85rem; }
.svc-day-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.svc-day-actions .danger:hover { color: #B91C1C; }

@media (max-width: 1100px) {
  .svc-edit-grid { grid-template-columns: 1fr; }
  .svc-edit-aside { position: static; }
  .svc-cal-layout { grid-template-columns: 1fr; }
}

/* Precio (60%) y duración (40%) */
.svc-price-duration { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; align-items: start; }
.svc-duration-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.svc-duration-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.72rem; font-weight: 600; color: var(--color-ink-soft); }
.svc-duration-label { font-size: 0.82rem; font-weight: 600; color: var(--color-primary); margin: 8px 0 0; }

/* Foto: vistas, marco con encuadre y zoom */
.svc-view-picker { display: inline-flex; gap: 4px; padding: 4px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 12px; margin-bottom: 16px; }
.svc-view-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 8px 14px; border-radius: 9px; font-size: 0.84rem; font-weight: 600; color: var(--color-ink-soft); cursor: pointer; }
.svc-view-btn.active { background: var(--color-surface); color: var(--color-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.svc-view-glyph { display: inline-block; border: 1.5px solid currentColor; border-radius: 2px; opacity: 0.8; }
.svc-view-glyph-paisaje { width: 18px; height: 8px; }
.svc-view-glyph-original { width: 14px; height: 11px; }
.svc-view-glyph-cuadrado { width: 11px; height: 11px; }
.svc-photo-stage { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 22px; }
.svc-photo-frame { position: relative; display: block; width: 100%; max-width: 640px; margin: 0 auto; aspect-ratio: 7 / 2; overflow: hidden; border-radius: 14px; background: var(--color-bg-alt); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); cursor: grab; touch-action: none; user-select: none; }
.svc-photo-frame[data-view="original"] { aspect-ratio: 4 / 3; cursor: default; }
.svc-photo-frame[data-view="cuadrado"] { aspect-ratio: 1 / 1; }
.svc-photo-frame.is-dragging { cursor: grabbing; }
.svc-photo-frame img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: block; }
.svc-photo-move-hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: rgba(15, 23, 42, 0.65); color: #fff; font-size: 0.72rem; font-weight: 600; padding: 5px 11px; border-radius: 999px; white-space: nowrap; pointer-events: none; }
.svc-photo-controls { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.svc-zoom-control { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; font-size: 0.82rem; font-weight: 600; color: var(--color-ink-soft); }
.svc-zoom-control input[type="range"] { width: 100%; accent-color: var(--color-primary); }
.svc-zoom-control b { min-width: 46px; text-align: right; color: var(--color-ink); }
.svc-photo-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.svc-photo-tools .danger:hover { color: #B91C1C; }
.svc-img { display: block; width: 100%; height: 100%; }
.service-card-public .svc-banner { position: relative; overflow: hidden; }
.service-card-public .svc-banner .svc-img { position: absolute; inset: 0; }
.service-card-public .svc-banner.is-original { background: var(--color-bg-alt); }

/* Visibilidad */
.svc-visibility { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 14px; }
.svc-vis-icon { width: 38px; height: 38px; border-radius: 12px; background: var(--color-surface); display: flex; align-items: center; justify-content: center; color: var(--color-primary); flex: none; }
.svc-vis-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.svc-vis-text strong { font-size: 0.92rem; }
.svc-vis-text span { font-size: 0.8rem; color: var(--color-ink-soft); }

/* Ficha pública con foto cuadrada */
.service-card-public.is-square .svc-square-media { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.service-card-public.is-square .svc-square-media .svc-img { position: absolute; inset: 0; }
.service-card-public.is-square .svc-body { padding: 20px; gap: 10px; }
.service-card-public.is-square .svc-top h3 { font-size: 1.1rem; }
.service-card-public.is-square .svc-top { align-items: center; }
.service-card-public.is-square .btn-primary { margin-top: 4px; }

/* Lista de servicios (panel): tarjetas con color de marca y acciones claras */
.svc-brand-btn { background: var(--svc-brand, #1C3528); color: #fff; border: 0; }
.app-shell .services-manage-list .switch input:checked + .switch-track { background: var(--svc-brand, #1C3528); }
.svc-brand-btn:hover { filter: brightness(0.92); }
.services-manage-list { display: flex; flex-direction: column; gap: 12px; }
.service-manage-card {
  display: grid;
  grid-template-columns: 18px 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.service-manage-card:hover { border-color: var(--svc-brand, var(--color-primary)); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); }
.service-manage-card.is-hidden { background: var(--color-bg); }
.service-manage-card.is-hidden .svc-thumb { filter: grayscale(0.7); opacity: 0.7; }
.service-manage-card .drag-handle { display: flex; color: var(--color-border); cursor: grab; }
.svc-thumb {
  width: 72px; height: 72px; border-radius: 14px;
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.svc-thumb .svc-initials { font-size: 1.2rem; }
.svc-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.svc-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.svc-title-row h4 { margin: 0; font-size: 1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-status { font-size: 0.7rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; flex: none; }
.svc-status.is-on { background: color-mix(in srgb, var(--svc-brand, #1C3528) 14%, transparent); color: var(--svc-brand, #1C3528); }
.svc-status.is-off { background: var(--color-bg-alt); color: var(--color-ink-soft); }
.svc-desc { margin: 0; font-size: 0.84rem; color: var(--color-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.svc-meta-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.74rem; font-weight: 600; color: var(--color-ink-soft);
  background: var(--color-bg); border: 1px solid var(--color-border);
  padding: 3px 9px; border-radius: 999px;
}
.svc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.service-manage-card .svc-price { font-size: 1.05rem; font-weight: 800; color: var(--color-ink); white-space: nowrap; }
.svc-side-actions { display: flex; align-items: center; gap: 10px; }
.svc-edit-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 10px;
  background: var(--svc-brand, #1C3528); color: #fff;
  font-size: 0.82rem; font-weight: 700; text-decoration: none;
  transition: filter 0.15s ease;
}
.svc-edit-btn:hover { filter: brightness(0.92); }
.svc-delete-btn {
  width: 34px; height: 34px; border-radius: 10px;
  border: 1.5px solid var(--color-border); background: var(--color-surface);
  color: var(--color-ink-soft); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.svc-delete-btn:hover { border-color: #DC2626; color: #DC2626; }
@media (max-width: 760px) {
  .service-manage-card { grid-template-columns: 18px 56px minmax(0, 1fr); }
  .service-manage-card .svc-thumb { width: 56px; height: 56px; }
  .svc-side { grid-column: 2 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
}
.service-manage-card .svc-info { flex: 1; min-width: 0; }
.service-manage-card .svc-info h4 { margin: 0 0 2px; font-size: 0.95rem; }
.service-manage-card .svc-info p { margin: 0; font-size: 0.8rem; color: var(--color-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-branch-tag { font-weight: 600; color: var(--color-primary); }
.svc-price-col { text-align: right; flex: none; }
.svc-price-col strong { display: block; font-size: 0.92rem; }
.svc-price-col span { font-size: 0.75rem; color: var(--color-ink-soft); }
.service-manage-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.service-manage-actions button,
.branch-actions button {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-ink-soft);
}
.service-manage-actions button:hover,
.branch-actions button:hover { border-color: var(--color-primary); color: var(--color-primary); }
.service-manage-actions button.danger:hover,
.branch-actions button.danger:hover { border-color: #DC2626; color: #DC2626; }

.services-preview-col { position: sticky; top: 24px; }
.services-preview-panel { background: var(--color-bg-alt); border-radius: var(--radius-lg); padding: 18px; }
.services-preview-label { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 600; color: var(--color-ink-soft); margin-bottom: 14px; }
.services-preview-frame { background: var(--color-surface); border-radius: var(--radius-md); padding: 16px; max-height: 640px; overflow-y: auto; }
.services-menu-host-preview .services-grid-public { grid-template-columns: 1fr; gap: 14px; }

/* Estilo de menú y categorías (panel de Servicios) */
.menu-settings-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-bottom: 24px; }
.menu-settings-block { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 18px; }
.menu-settings-block h4 { margin: 0; font-size: 0.92rem; }
.menu-style-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.menu-style-btn {
  padding: 8px 14px; border-radius: 999px;
  border: 1.5px solid var(--color-border); background: var(--color-bg-alt);
  color: var(--color-ink-soft); font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
.menu-style-btn.active { border-color: var(--color-primary); color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.categories-manager-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.categories-manager-head h4 { margin: 0; }
.category-list { display: flex; flex-direction: column; gap: 8px; }
.category-list-empty { font-size: 0.82rem; color: var(--color-ink-soft); margin: 0; }
.category-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); background: var(--color-bg-alt);
}
.category-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.category-name { flex: 1; min-width: 0; font-size: 0.86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-count { flex: none; font-size: 0.78rem; color: var(--color-ink-soft); }
.category-row-actions { display: flex; gap: 6px; flex: none; }
.category-row-actions button {
  width: 26px; height: 26px; border-radius: 7px;
  border: 1.5px solid var(--color-border); background: var(--color-surface);
  color: var(--color-ink-soft); display: flex; align-items: center; justify-content: center;
}
.category-row-actions button:hover { border-color: var(--color-primary); color: var(--color-primary); }
.category-row-actions button.danger:hover { border-color: #DC2626; color: #DC2626; }

/* Menú de servicios separado por categorías (sitio público) */
.menu-cat-group { margin-bottom: 34px; }
.menu-cat-group:last-child { margin-bottom: 0; }
.menu-cat-title { font-size: 1.15rem; margin: 0 0 18px; }
.menu-cat-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.menu-cat-tab {
  padding: 9px 18px; border-radius: 999px;
  border: 1.5px solid var(--color-border); background: var(--color-surface);
  color: var(--color-ink-soft); font-weight: 600; font-size: 0.88rem; cursor: pointer;
}
.menu-cat-tab.active { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.menu-cat-panel[hidden] { display: none; }

/* Estilo de menú "Lista compacta" (sitio público) */
.services-list-public { display: flex; flex-direction: column; gap: 10px; }
.service-row-public {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: var(--radius-md);
  border: 1px solid var(--color-border); background: var(--color-surface);
  text-decoration: none; color: inherit;
}
.service-row-public:hover { border-color: var(--color-primary); }
.svc-row-thumb { width: 44px; height: 44px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.svc-row-info { flex: 1; min-width: 0; }
.svc-row-info h4 { margin: 0; font-size: 0.94rem; }
.svc-row-meta { font-size: 0.78rem; color: var(--color-ink-soft); }
.svc-row-price { font-family: var(--font-display); font-weight: 700; white-space: nowrap; }

.appearance-picker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Sucursales (plan Multi-sucursal) */
.branch-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid transparent;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.branch-card:hover { box-shadow: var(--shadow-sm); }
.branch-card.is-main { border-left-color: var(--color-primary); }
.branch-icon {
  width: 46px; height: 46px; border-radius: 11px; flex: none;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.branch-info { flex: 1; min-width: 0; }
.branch-info h4 { margin: 0 0 3px; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; }
.branch-info p { margin: 0; font-size: 0.82rem; color: var(--color-ink-soft); }

/* Profesionales: mismo list-card de sucursales, con avatar circular */
.professional-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  background-size: cover; background-position: center;
  color: #fff; font-weight: 700; font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center;
}
.branch-main-tag {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  background: #EDE9FE; color: #6D28D9; padding: 2px 8px; border-radius: 999px;
}
.branch-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.branch-actions button[data-action="make-main"] { color: #B45309; }
.branch-actions button[data-action="make-main"]:hover { border-color: #B45309; color: #B45309; background: #FEF3C7; }

/* Fila de interruptor compacta (ej. "Elegir profesional al reservar")
   en vez de un panel entero con párrafo largo para una sola opción. */
.compact-toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 14px 18px;
}
.compact-toggle-row strong { display: block; font-size: 0.9rem; }
.compact-toggle-row span { font-size: 0.78rem; color: var(--color-ink-soft); }

/* Profesionales: una sola ficha por persona, todas en una fila (con
   scroll horizontal si no entran) · nombre propio "pro-ficha-card" para
   no pisar el .ficha-card genérico de la tarjeta de cliente
   (client-ficha-grid).
   Nombre, rol y bio tienen alto fijo (una línea, una línea, dos líneas)
   para que TODAS las fichas midan exactamente lo mismo y quede todo a
   la misma altura sin importar cuánto texto tenga cada profesional. */
.professionals-fichas-row { display: flex; gap: 20px; overflow-x: auto; padding: 4px 4px 14px; }
.pro-ficha-card {
  flex: 0 0 230px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 30px 20px 24px;
  text-align: center;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.pro-ficha-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pro-ficha-card.is-hidden { background: var(--color-bg-alt); }
.pro-ficha-card-hidden-tag {
  position: absolute; top: 14px; left: 14px;
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  background: var(--color-surface); color: var(--color-ink-soft);
  border: 1px solid var(--color-border); padding: 3px 8px; border-radius: 999px;
}
.pro-ficha-card-photo {
  width: 128px; height: 128px; border-radius: 50%; margin: 0 0 18px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  background-size: cover; background-position: center;
  color: #fff; font-weight: 700; font-size: 1.8rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 4px var(--color-bg-alt);
  flex: none;
}
.pro-ficha-name {
  margin: 0 0 4px; width: 100%;
  font-size: 1.1rem; font-weight: 700; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pro-ficha-role {
  margin: 0 0 10px; width: 100%;
  font-size: 0.84rem; color: var(--color-ink-soft); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pro-ficha-bio {
  margin: 0; width: 100%;
  font-size: 0.78rem; color: var(--color-ink-soft); line-height: 1.45;
  min-height: calc(0.78rem * 1.45 * 2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Menú "más opciones" (⋮) de cada ficha, arriba a la derecha · reemplaza
   los 3 botones sueltos que antes competían con la foto por espacio. */
.pro-ficha-menu-btn {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  border: 1.5px solid var(--color-border); background: var(--color-surface); color: var(--color-ink-soft);
  display: flex; align-items: center; justify-content: center;
}
.pro-ficha-menu-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pro-ficha-menu {
  position: absolute; top: 46px; right: 12px; z-index: 3;
  min-width: 160px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); overflow: hidden; text-align: left;
}
.pro-ficha-menu button {
  display: block; width: 100%; padding: 10px 14px;
  font-size: 0.86rem; color: var(--color-ink); background: none; border: none; text-align: left;
}
.pro-ficha-menu button:hover { background: var(--color-bg-alt); }
.pro-ficha-menu button.danger { color: #DC2626; }

.plan-upsell-panel { text-align: center; padding: 60px 32px; }
.plan-upsell-panel .upsell-icon {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 18px;
  background: #EDE9FE; color: #6D28D9;
  display: flex; align-items: center; justify-content: center;
}
/* Pasarela de pago */
.gateway-provider-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.gateway-provider-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  background: var(--color-surface);
}
.gateway-provider-card:hover { border-color: var(--color-primary); }
.gateway-provider-card.selected { border-color: var(--color-primary); background: var(--color-bg-alt); box-shadow: 0 0 0 2px rgba(79,70,229,0.12); }
.gateway-provider-logo {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: #fff;
}
/* Los logos reales (Flow, Mercado Pago, Transbank) son imágenes anchas
   (wordmarks), no íconos cuadrados: se ven chicos y achicados dentro de
   la misma caja de 52x52 que el isotipo genérico de Transferencia. Van
   más grandes y ocupando todo el ancho de la tarjeta para leerse bien. */
.gateway-provider-logo.is-wide { width: 100%; height: 64px; border-radius: 12px; }
.gateway-provider-card strong { font-size: 0.92rem; }
.gateway-provider-card span { font-size: 0.76rem; color: var(--color-ink-soft); }
.gateway-status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  font-size: 0.84rem; font-weight: 700;
}
.gateway-status-pill.is-connected { background: #DCFCE7; color: #15803D; }
.gateway-status-pill.is-disconnected { background: var(--color-bg-alt); color: var(--color-ink-soft); }
.gateway-status-pill .live-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.plan-upsell-panel h2 { margin: 0 0 10px; }
.plan-upsell-panel p { color: var(--color-ink-soft); max-width: 440px; margin: 0 auto 22px; }

/* Sección "Sucursales" del sitio público */
.branches-grid-public { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.branch-card-public {
  display: flex; gap: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.branch-card-public-icon {
  width: 44px; height: 44px; border-radius: 11px; flex: none;
  background: var(--color-bg-alt); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
}
.branch-card-public-body h4 { margin: 0 0 6px; font-size: 1rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.branch-card-public-body p { margin: 0 0 8px; font-size: 0.88rem; color: var(--color-ink-soft); }
.branch-card-public.is-selected { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(79,70,229,0.15); }

/* Equipo (sitio público) */
.team-grid-public { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.team-card-public {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  text-align: center;
}
.team-card-photo {
  width: 84px; height: 84px; border-radius: 50%;
  margin: 0 auto 14px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  background-size: cover; background-position: center;
  color: #fff; font-weight: 700; font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
}
.team-card-public h4 { margin: 0 0 4px; font-size: 1rem; }
.team-card-role {
  display: inline-block; font-size: 0.76rem; font-weight: 700;
  color: var(--color-primary); background: var(--color-bg-alt);
  padding: 3px 10px; border-radius: 999px; margin-bottom: 10px;
}
.team-card-public p { margin: 0; font-size: 0.85rem; color: var(--color-ink-soft); }

/* Selector de profesional (paso de servicio en la reserva) */
.professional-select-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.professional-select-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 8px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-align: center;
}
.professional-select-card:hover { border-color: var(--color-primary-light); }
.professional-select-card.selected { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(79,70,229,0.15); }
.professional-select-card .team-card-photo { width: 54px; height: 54px; font-size: 0.9rem; margin: 0; }
.professional-select-card span { font-size: 0.82rem; font-weight: 600; }
.professional-select-card small { font-size: 0.72rem; color: var(--color-ink-soft); font-weight: 500; }

/* Selector de sucursal en la tarjeta de perfil del sitio público */
.branch-select-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px;
  font-size: 0.86rem;
  color: var(--color-ink-soft);
}
.branch-select-row select {
  font-family: var(--font-body);
  font-size: 0.86rem; font-weight: 700;
  color: var(--color-ink);
  border: none; background: none;
  padding: 2px 4px;
  cursor: pointer;
}
.appearance-preview-icon { width: 46px; height: 46px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex: none; }

/* Horarios: resumen semanal + plantillas + tarjetas por día */
.hours-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: start; }

.hours-format-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.hours-format-label { font-size: 0.8rem; font-weight: 700; color: var(--color-ink-soft); }
.hours-format-options { display: flex; gap: 6px; flex-wrap: wrap; }
.hours-format-btn { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-ink); font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.hours-format-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.day-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 10px;
}
.day-card.is-closed { background: var(--color-bg-alt); }
.day-card .switch { margin-top: 3px; }
.day-card-name { width: 100px; font-weight: 700; font-size: 0.92rem; flex: none; margin-top: 5px; }
.day-card-times-col { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.day-card-range { display: flex; align-items: center; gap: 10px; }
.day-card-range input[type="time"] { max-width: 130px; }
.day-card-sep { color: var(--color-ink-soft); font-size: 0.85rem; }
.day-card-closed-label { color: var(--color-ink-soft); font-size: 0.85rem; font-style: italic; margin-top: 5px; }
.day-card-remove-slot {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  display: flex; align-items: center; justify-content: center;
}
.day-card-remove-slot:hover { border-color: var(--color-danger); color: var(--color-danger); }
.day-card-add-slot {
  align-self: flex-start;
  border: none; background: none; padding: 0;
  font-size: 0.8rem; font-weight: 700; color: var(--color-primary);
}
.day-card-add-slot:hover { text-decoration: underline; }
.day-card-copy {
  width: 34px; height: 34px; border-radius: 9px; flex: none; margin-top: 3px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  display: flex; align-items: center; justify-content: center;
}
.day-card-copy:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.day-card-copy:disabled { opacity: 0.35; cursor: not-allowed; }

/* Mi sitio web: imágenes y secciones */
.image-upload-row { display: flex; align-items: center; gap: 16px; }
.image-upload-preview {
  width: 64px; height: 64px; border-radius: 14px; flex: none;
  background: var(--color-bg-alt);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
  background-size: cover; background-position: center;
  border: 1px solid var(--color-border);
}
.image-upload-preview-wide { width: 110px; height: 64px; border-radius: 10px; }
.image-upload-actions { display: flex; flex-direction: column; gap: 8px; }
.image-upload-actions > div { display: flex; gap: 8px; }
.btn-sm-upload { padding: 8px 14px; font-size: 0.8rem; cursor: pointer; }

/* Header dentro de la vista previa en vivo: mismas clases del sitio
   público, a tamaño real (la columna ya tiene ancho de sobra al ser 50%
   del editor) · así el picker nunca se desincroniza del look real. La
   única diferencia con el sitio real es que el menú móvil nunca se activa
   acá, para no depender del ancho de ventana del panel en sí. */
.header-layout-preview .public-nav-links { display: flex !important; flex-direction: row !important; position: static !important; box-shadow: none !important; border: none !important; padding: 0 !important; }
.header-layout-preview .public-mobile-menu-toggle { display: none !important; }

.header-option-row { display: flex; flex-wrap: wrap; gap: 8px; }
.header-option-btn {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  cursor: pointer;
}
.header-option-btn:hover { border-color: var(--color-primary); }
.header-option-btn.selected { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.header-option-btn[data-value].font-option { font-size: 0.9rem; }

/* =========================================================
   Editor de "Mi sitio web" estilo Shopify: secciones colapsables
   (.editor-accordion) a la derecha, en una columna angosta (30% del
   ancho, ver .editor-split) · por eso cada sección va con más aire que
   un panel a ancho completo tendría: una sola columna de campos (nunca
   dos lado a lado, ver .form-row-2 más abajo), más padding y una
   separación real entre "grupos" de campos (tarjeta propia, no solo una
   línea) para que se lea de un vistazo qué controles van juntos.
   ========================================================= */
.editor-accordion {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.editor-section + .editor-section { border-top: 1px solid var(--color-border); }
.editor-section-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--color-ink);
}
.editor-section-head:hover { background: var(--color-bg-alt); }
.editor-section-head h3 { margin: 0; flex: 1; font-size: 0.96rem; }
.editor-section-head .editor-section-hint { font-size: 0.78rem; font-weight: 600; color: var(--color-ink-soft); flex: none; }
.editor-section-chevron { flex: none; width: 15px; height: 15px; color: var(--color-ink-soft); transition: transform 0.2s ease; }
.editor-section.is-open .editor-section-chevron { transform: rotate(180deg); color: var(--color-primary); }
.editor-section-body {
  padding: 4px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.editor-section:not(.is-open) .editor-section-body { display: none; }
.editor-section-body > a { font-size: 0.85rem; font-weight: 600; color: var(--color-primary); }
.editor-section-body .form-group { margin-bottom: 0; }
/* La columna es angosta: dos campos lado a lado (nombre + frase corta,
   dirección + teléfono, etc.) quedan apretados y difíciles de leer, así
   que acá siempre se apilan en una sola columna, sin esperar el
   breakpoint de mobile. */
.editor-section-body .form-row-2 { grid-template-columns: minmax(0, 1fr); gap: 18px; }

/* Cada sección tiene su propio tono (.tint-indigo/.tint-orange/etc. en
   .editor-section, mismo par de tokens que .feature-icon en la landing)
   en vez de un solo color de acento repetido en las siete · así el
   acordeón se lee variado y premium, no plano. El tono se define en el
   contenedor de la sección (no en el ícono) para que tanto la ficha del
   ícono como la franja de acento de "abierta" hereden el mismo par. */
.editor-section.tint-indigo { --icon-bg: var(--icon-indigo-bg); --icon-fg: var(--icon-indigo-fg); }
.editor-section.tint-orange { --icon-bg: var(--icon-orange-bg); --icon-fg: var(--icon-orange-fg); }
.editor-section.tint-green  { --icon-bg: var(--icon-green-bg);  --icon-fg: var(--icon-green-fg); }
.editor-section.tint-blue   { --icon-bg: var(--icon-blue-bg);   --icon-fg: var(--icon-blue-fg); }
.editor-section.tint-pink   { --icon-bg: var(--icon-pink-bg);   --icon-fg: var(--icon-pink-fg); }
.editor-section.tint-yellow { --icon-bg: var(--icon-yellow-bg); --icon-fg: var(--icon-yellow-fg); }
.editor-section-icon {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--icon-bg, var(--color-bg-alt)); color: var(--icon-fg, var(--color-primary));
  transition: background 0.15s ease, color 0.15s ease;
}
.editor-section-icon svg { width: 14px; height: 14px; }
.editor-section.is-open { box-shadow: inset 3px 0 0 var(--icon-fg, var(--color-primary)); }
.editor-section.is-open .editor-section-head { background: var(--color-bg-alt); }
.editor-section.is-open .editor-section-icon { background: var(--icon-fg, var(--color-primary)); color: #fff; }
.editor-section.is-open .editor-section-head h3 { color: var(--icon-fg, var(--color-primary)); }

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 4px 0;
}
.settings-row > span { font-size: 0.85rem; font-weight: 600; color: var(--color-ink); }
.settings-row-hint { margin: 0; font-size: 0.76rem; color: var(--color-ink-soft); line-height: 1.5; }
/* Sub-grupo: tarjeta propia con fondo suave, para que un conjunto de
   campos relacionados (ej. todo lo de Google) se lea como un bloque
   aparte del resto de la sección, no como más líneas sueltas pegadas a
   las de arriba. */
.settings-subgroup {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.settings-subgroup-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-soft);
  margin: 0;
}
.settings-subgroup-title::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--icon-fg, var(--color-primary));
}
.settings-subgroup .form-group { margin-bottom: 0; }
/* Mini "resultado de Google", para que se entienda de un vistazo qué
   efecto tienen el título y la meta descripción antes de escribirlos. */
.seo-preview-card {
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.seo-preview-domain { font-size: 0.76rem; color: #202124; }
.seo-preview-title { font-size: 0.95rem; color: #1a0dab; margin: 2px 0 4px; font-weight: 500; }
.seo-preview-desc { font-size: 0.78rem; color: var(--color-ink-soft); line-height: 1.45; }
.select-compact.input-plain { width: auto; min-width: 150px; padding: 7px 11px; font-size: 0.83rem; background-color: var(--color-surface); }
.mini-toggle.view-toggle { padding: 2px; background: var(--color-surface); }
.mini-toggle.view-toggle .view-toggle-btn { width: auto; height: auto; padding: 6px 12px; font-size: 0.76rem; font-weight: 600; white-space: nowrap; }
.settings-row.is-disabled { opacity: 0.5; }
.mini-toggle .view-toggle-btn:disabled { cursor: not-allowed; }

.editor-col-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-soft);
}
.editor-col-label svg { color: var(--color-primary); flex: none; }
.editor-col-label-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #22C55E; flex: none;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.5);
  animation: agenda-editor-live-pulse 1.8s infinite;
}
@keyframes agenda-editor-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.45); }
  70% { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* Colores de marca: tarjeta profesional con muestra grande + hex + swatches */
/* Resumen de identidad de marca en "Mi sitio web": ya no se edita acá
   (ver Kit de marca), solo se muestra lo que hay y se enlaza a editarlo. */
.brand-summary-row { display: flex; align-items: center; gap: 14px; }
.brand-summary-logo {
  width: 46px; height: 46px; border-radius: 11px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 700; color: #fff;
  background-size: cover; background-position: center;
}
.brand-summary-info { display: flex; flex-direction: column; gap: 6px; }
.brand-summary-colors { display: flex; gap: 6px; }
.brand-summary-dot { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
.brand-summary-font { font-size: 0.82rem; color: var(--color-ink-soft); }

/* =========================================================
   Kit de marca: logos, ícono, paleta de colores, fuentes y fondos
   ========================================================= */

/* Dos logos lado a lado (normal / inverso) */
.brand-logo-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.brand-logo-slot { text-align: center; }
.brand-logo-slot-label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--color-ink-soft); margin-bottom: 8px; }
.brand-logo-slot-preview {
  width: 100%; height: 90px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 700; color: var(--color-ink-soft);
  background-size: contain; background-repeat: no-repeat; background-position: center;
  border: 1.5px dashed var(--color-border); margin-bottom: 8px;
}
.brand-logo-slot-preview.on-dark { background-color: #1E1B2E; }
.brand-logo-slot-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* Forma del logo: cuadrado/rectangular quedan tal cual (la caja ya es
   ancha, para logos horizontales); circular/ovalado redondean del todo,
   y circular además fuerza una caja 1:1 para que sea un círculo de
   verdad y no una elipse. */
.brand-logo-slot-preview.shape-rect { border-radius: 6px; }
.brand-logo-slot-preview.shape-square { border-radius: 14px; }
.brand-logo-slot-preview.shape-oval { border-radius: 50%; }
.brand-logo-slot-preview.shape-circle { border-radius: 50%; width: 140px; aspect-ratio: 1; height: auto; margin: 0 auto; }
.logo-shape-picker { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }

/* Paleta de colores: filas simples con swatch + hex + quitar, estilo
   Canva pero sin copiarlo literal (ver agendaOpenColorModal en marca.js
   para el selector personalizado). */
.palette-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.palette-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-alt); cursor: grab; }
.palette-row.dragging { opacity: 0.4; }
.palette-row .drag-handle { color: var(--color-border); flex: none; }
.palette-swatch { width: 32px; height: 32px; border-radius: 8px; border: 2px solid var(--color-surface); box-shadow: 0 0 0 1px var(--color-border); flex: none; cursor: pointer; padding: 0; }
.palette-hex { font-family: "Courier New", monospace; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em; }
.palette-role {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  padding: 3px 8px; border-radius: 999px; flex: none;
}
.palette-hex-group { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
.palette-remove {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  border: 1.5px solid var(--color-border); background: var(--color-surface); color: var(--color-ink-soft);
  display: flex; align-items: center; justify-content: center; font-size: 0.75rem;
}
.palette-remove:hover { border-color: #DC2626; color: #DC2626; }

/* Selector de color personalizado (modal), inspirado en Canva: cuadro de
   saturación/brillo + slider de matiz + hex, sin degradados (los colores
   de marca son planos). */
.color-picker-sv {
  width: 100%; height: 170px; border-radius: var(--radius-md);
  position: relative; cursor: crosshair; margin-bottom: 14px;
  background-image: linear-gradient(to top, #000, rgba(0,0,0,0)), linear-gradient(to right, #fff, rgba(255,255,255,0));
  touch-action: none;
}
.color-picker-sv-thumb {
  position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 1px 4px rgba(0,0,0,0.3);
  transform: translate(-50%, -50%); pointer-events: none;
}
.color-picker-hue {
  width: 100%; height: 14px; border-radius: 999px; margin-bottom: 16px;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
.color-picker-hue::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--color-ink); cursor: pointer;
}
.color-picker-hue::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--color-ink); cursor: pointer;
}
.color-picker-hex-row { display: flex; align-items: center; gap: 10px; }
.color-picker-swatch { width: 38px; height: 38px; border-radius: 8px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); }
.color-picker-hex-row .input-plain { text-transform: uppercase; font-family: "Courier New", monospace; letter-spacing: 0.02em; }
.color-picker-eyedrop {
  width: 38px; height: 38px; border-radius: 8px; flex: none;
  border: 1.5px solid var(--color-border); background: var(--color-surface); color: var(--color-ink-soft);
  display: flex; align-items: center; justify-content: center;
}
.color-picker-eyedrop:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* Fuentes: un selector + una muestra grande real por rol tipográfico */
.font-role-group { margin-bottom: 18px; }
.font-role-group:last-child { margin-bottom: 0; }
.font-role-group label { display: block; font-size: 0.82rem; font-weight: 700; margin-bottom: 6px; }
.font-role-preview {
  margin-top: 10px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--color-bg-alt); border: 1px solid var(--color-border);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Galería de fondos: hasta 10 imágenes, una marcada como la activa */
.bg-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-bottom: 14px; }
.bg-gallery-item { position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1; background-size: cover; background-position: center; border: 2px solid var(--color-border); }
.bg-gallery-item.is-active { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(79,70,229,0.18); }
.bg-gallery-item-active-tag {
  position: absolute; top: 4px; left: 4px; padding: 2px 7px; border-radius: 999px;
  background: var(--color-primary); color: #fff; font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
}
.bg-gallery-item-actions { position: absolute; inset: auto 4px 4px 4px; display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s ease; }
.bg-gallery-item:hover .bg-gallery-item-actions { opacity: 1; }
.bg-gallery-item-actions button {
  flex: 1; border: none; border-radius: 6px; padding: 4px 0; font-size: 0.68rem; font-weight: 700; cursor: pointer;
  background: rgba(255,255,255,0.92); color: var(--color-ink);
}
.bg-gallery-item-actions button.danger { color: #DC2626; }
.bg-gallery-empty { grid-column: 1 / -1; text-align: center; font-size: 0.82rem; color: var(--color-ink-soft); padding: 20px 0; }

/* "Así se ve tu marca": tablero de marca con todo junto */
.brand-board-hero { padding: 30px 24px; border-radius: var(--radius-md) var(--radius-md) 0 0; text-align: center; color: #fff; background-size: cover; background-position: center; }
.brand-board-hero .brand-board-logo { font-size: 1.8rem; margin-bottom: 8px; }
.brand-board-hero h4 { color: #fff; margin: 0; }
.brand-board-body { background: var(--color-bg-alt); border-radius: 0 0 var(--radius-md) var(--radius-md); padding: 18px; }
.brand-board-section { margin-bottom: 18px; }
.brand-board-section:last-child { margin-bottom: 0; }
.brand-board-label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink-soft); font-weight: 700; margin-bottom: 8px; }
.brand-board-logos-row { display: flex; gap: 10px; }
.brand-board-logo-chip {
  width: 52px; height: 52px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem;
  background-size: cover; background-position: center;
}
.brand-board-logo-chip.light { background-color: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-ink); }
.brand-board-logo-chip.dark { background-color: #1E1B2E; color: #fff; }
.brand-board-logo-chip.shape-rect { border-radius: 6px; }
.brand-board-logo-chip.shape-square { border-radius: 10px; }
.brand-board-logo-chip.shape-oval, .brand-board-logo-chip.shape-circle { border-radius: 50%; }
.brand-board-logo-chip.icon-chip { border-radius: 50%; }
.brand-board-palette { display: flex; gap: 8px; flex-wrap: wrap; }
.brand-board-palette span { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
.brand-board-font-sample { padding: 4px 0; font-size: 1.05rem; }
.brand-board-font-sample span { display: block; font-size: 0.68rem; color: var(--color-ink-soft); text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--font-body); }

.sections-manage-list { display: flex; flex-direction: column; gap: 10px; }
.section-manage-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
}
.section-manage-card.dragging { opacity: 0.4; }
.section-manage-card.is-hidden { background: var(--color-bg-alt); }
.section-manage-card .drag-handle { color: var(--color-border); flex: none; cursor: grab; }
.section-manage-card strong { flex: 1; font-size: 0.92rem; }
.section-manage-card .section-hidden-tag { font-size: 0.76rem; color: var(--color-ink-soft); }
.danger-zone {
  border: 1.5px dashed #FCA5A5;
  background: #FEF2F2;
  border-radius: var(--radius-md);
  padding: 20px;
}
.danger-zone h4 { color: #B91C1C; margin-bottom: 6px; }
.danger-zone p { font-size: 0.86rem; margin-bottom: 14px; }
.btn-danger { background: #DC2626; color: #fff; }
.btn-danger:hover { background: #B91C1C; }

/* Site editor split: mitad personalización (acordeón), mitad vista previa
   en vivo dentro de un marco tipo navegador (estilo Shopify) · el marco
   tiene su propio scroll, así el header con posición fija se puede probar
   ahí mismo, incluido el modo "al desplazarte hacia arriba". */
.editor-split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: 24px;
  align-items: start;
}
.editor-preview {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 88px);
  max-height: 780px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 10px;
}
/* La vista previa se queda en el flujo normal (baja con el resto de la
   página al hacer scroll); lo fijo en pantalla es la columna de
   Personalización de al lado, para tenerla siempre a mano mientras se
   revisa el sitio completo más abajo. */
.editor-settings-col {
  position: sticky;
  top: 24px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.browser-frame-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px 12px; flex: none; }
.browser-frame-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-border); flex: none; }
.browser-frame-url {
  margin-left: 8px;
  flex: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.preview-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
/* La vista previa se pinta a tamaño real de navegador (mismo CSS que el
   sitio público), pero el marco donde vive es mucho más angosto que una
   pantalla real, así que sin achicarla se ve "recortada"/con zoom · acá
   se reduce de escala entera para que se lea como una página completa
   en miniatura, tal como en el editor de Shopify. "zoom" (no
   transform:scale) porque SÍ recalcula el layout al tamaño ya reducido:
   con transform, el navegador sigue reservando el alto/ancho de ANTES
   de achicar para el scroll, dejando un espacio en blanco enorme debajo
   del pie de página (el 20% "de más" que el transform solo pinta más
   chico, pero no dejaba de ocupar). */
.preview-zoom {
  zoom: 0.8;
}
/* La vista previa pinta el sitio público completo con sus propias clases
   (.public-cover, .profile-card, .section, etc. · ver más abajo), a escala
   real dentro del marco de navegador: no necesita clases propias. */

/* =========================================================
   Sitio público de un negocio (tenant) · ej. barberia.agendafiox.cl
   ========================================================= */
.public-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.public-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
}
.public-brand .p-logo-mark {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  box-shadow: var(--shadow-sm);
}
.public-nav-links { display: flex; gap: 28px; }
.public-nav-links a { font-size: 0.92rem; font-weight: 500; color: var(--color-ink-soft); }
.public-nav-links a:hover { color: var(--color-ink); }

/* =========================================================
   Diseño del header del sitio público · totalmente editable desde
   "Mi sitio web" (estilo Shopify): posición del logo, posición del menú,
   en qué fila queda el menú cuando el logo está centrado, y si el header
   queda fijo, se oculta al bajar o no es fijo. Ver agendaApplyHeaderLayout
   en sitio-shared.js, que traduce el borrador guardado a estos data-*.
   ========================================================= */
.public-header { transition: transform 0.25s ease; }
.public-header.is-header-hidden { transform: translateY(-100%); }
.public-header[data-sticky="never"] { position: static; }

.public-header .nav { display: flex; align-items: center; flex-wrap: wrap; row-gap: 10px; column-gap: 24px; }
.public-header .public-brand { flex: none; }
.public-header .public-nav-links { flex: 1 1 auto; display: flex; }
.public-header .public-nav-right { flex: none; margin-left: auto; }

.public-header[data-menu="left"] .public-nav-links { justify-content: flex-start; }
.public-header[data-menu="center"] .public-nav-links { justify-content: center; }
.public-header[data-menu="right"] .public-nav-links { justify-content: flex-end; }

/* Logo centrado: pasa a su propia fila centrada, el menú se convierte en
   otra fila completa (arriba o abajo del logo, según "Fila") y los botones
   /cuenta quedan fijos en la esquina superior derecha, para no interferir
   con el centrado, igual que en la mayoría de los temas tipo Shopify. */
.public-header[data-logo="center"] .nav { flex-direction: column; position: relative; padding-right: 132px; }
.public-header[data-logo="center"] .public-brand { order: 2; width: 100%; justify-content: center; }
.public-header[data-logo="center"] .public-nav-links { order: 3; width: 100%; }
.public-header[data-logo="center"][data-menu-row="top"] .public-brand { order: 3; }
.public-header[data-logo="center"][data-menu-row="top"] .public-nav-links { order: 2; }
.public-header[data-logo="center"] .public-nav-right {
  position: absolute;
  top: 50%;
  right: 0;
  margin-left: 0;
  transform: translateY(-50%);
}

.public-nav-right { display: flex; align-items: center; gap: 22px; }

/* La fila de cuenta duplicada dentro del desplegable móvil solo se muestra
   en el propio desplegable móvil (ver medias query de abajo) · en
   escritorio el slot de cuenta del header (#account-slot) es el único
   visible, para no repetir el botón "Iniciar sesión" dos veces. */
.mobile-account-row { display: none; }

.public-mobile-menu-toggle {
  display: none;
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  align-items: center; justify-content: center;
  color: var(--color-ink);
  cursor: pointer;
}

/* Cuenta de cliente en el sitio público: botón de acceso + menú de sesión */
.account-dropdown { position: relative; }
.account-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 8px;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.86rem; font-weight: 600;
  background: var(--color-surface);
  cursor: pointer;
}
.account-pill:hover { border-color: var(--color-primary); }
.account-avatar-sm {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: var(--color-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 700;
}
.account-dropdown-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  min-width: 190px;
  padding: 8px;
  z-index: 200;
}
.account-dropdown-menu[hidden] { display: none; }
.account-dropdown-name { padding: 8px 10px 4px; font-size: 0.78rem; color: var(--color-ink-soft); }
.account-dropdown-menu button,
.account-dropdown-menu a {
  display: block;
  width: 100%; text-align: left; padding: 9px 10px;
  border-radius: 8px; font-size: 0.86rem;
  background: none; border: none; cursor: pointer; color: var(--color-ink);
}
.account-dropdown-menu button:hover,
.account-dropdown-menu a:hover { background: var(--color-bg-alt); }

/* Modal de autenticación (login / crear cuenta) */
.auth-tabs { margin-bottom: 18px; }
.auth-form-panel[hidden] { display: none; }
.auth-demo-note {
  margin-top: 14px;
  font-size: 0.76rem;
  color: var(--color-ink-soft);
  background: var(--color-bg-alt);
  border-radius: 8px;
  padding: 8px 10px;
}
.auth-switch-line { text-align: center; font-size: 0.84rem; color: var(--color-ink-soft); margin-top: 14px; }
.auth-switch-line a { color: var(--color-primary); font-weight: 600; }

.password-checklist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.password-checklist li {
  font-size: 0.76rem; color: var(--color-ink-soft);
  padding-left: 20px; position: relative;
}
.password-checklist li::before {
  content: "";
  position: absolute; left: 0; top: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--color-border);
}
.password-checklist li.met { color: #15803D; font-weight: 600; }
.password-checklist li.met::before { background: #15803D; border-color: #15803D; }

.auth-method-toggle { display: flex; gap: 8px; margin-bottom: 16px; }
.auth-method-btn {
  flex: 1; padding: 9px 10px; border-radius: 9px;
  border: 1.5px solid var(--color-border); background: var(--color-surface);
  color: var(--color-ink-soft); font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
.auth-method-btn.active { border-color: var(--color-primary); color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.field-hint { display: block; font-size: 0.76rem; color: var(--color-ink-soft); margin-top: 6px; }
.auth-verify-title { margin: 0 0 4px; }

/* Página "Mi cuenta" del sitio público */
.account-page-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.account-page-head > div:nth-child(2) { flex: 1; }
.account-avatar-lg {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  background: var(--color-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 700;
}
.account-booking-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--color-border);
}
.account-booking-row:last-child { border-bottom: none; }
.account-booking-row .abr-service { font-weight: 600; }
.account-booking-row .abr-meta { font-size: 0.82rem; color: var(--color-ink-soft); }
.account-locked-note {
  font-size: 0.8rem; color: var(--color-ink-soft);
  background: var(--color-bg-alt); border-radius: 8px;
  padding: 10px 12px; margin: 4px 0 16px;
}

/* Portada + tarjeta de perfil del sitio público */
.public-cover {
  height: 220px;
  position: relative;
  background-image:
    radial-gradient(circle at 18px 18px, rgba(255,255,255,0.14) 2px, transparent 2.5px);
  background-size: 36px 36px;
}
.cover-share-btn {
  position: absolute;
  top: 18px; right: 18px;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.92);
  color: var(--color-ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.cover-share-btn:hover { background: #fff; }

.profile-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin-top: -64px;
  position: relative;
  z-index: 2;
  align-items: start;
}

.profile-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 30px 32px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 22px;
  row-gap: 16px;
}
.profile-card .p-logo-big {
  grid-column: 1; grid-row: 1 / 3;
  width: 84px; height: 84px;
  border-radius: 22px;
  background: var(--color-bg-alt);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem;
  box-shadow: var(--shadow-sm);
  align-self: start;
}
.profile-card h1 { font-size: clamp(1.5rem, 3vw, 1.9rem); margin: 0 0 4px; }
.profile-tagline { margin: 0 0 10px; color: var(--color-ink-soft); font-family: var(--font-subtitle); }
.public-hero-meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.86rem; color: var(--color-ink-soft); }
.public-hero-meta span { display: flex; align-items: center; gap: 6px; }
.profile-cta { grid-column: 1 / -1; justify-self: start; }
.trust-chip-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.trust-chip { background: var(--color-bg-alt); color: var(--color-primary-dark); font-size: 0.78rem; font-weight: 600; padding: 7px 13px; border-radius: 999px; }

.profile-sidebar {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-md);
}
.sidebar-block { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.sidebar-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.sidebar-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink-soft); font-weight: 700; display: block; margin-bottom: 6px; }
.sidebar-block p { margin: 0 0 8px; font-size: 0.9rem; color: var(--color-ink); }
.sidebar-link-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--color-primary); }
.sidebar-link-btn:hover { text-decoration: underline; }
.sidebar-contact-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.maps-embed { margin-bottom: 10px; border-radius: 12px; overflow: hidden; background: var(--color-bg-alt); }
.maps-embed:empty { display: none; }
.google-business-caption { display: block; margin-top: 8px; font-size: 0.76rem; color: var(--color-ink-soft); }
.google-business-caption:empty { display: none; }
.sidebar-pro-list { display: flex; flex-direction: column; gap: 12px; }
.sidebar-pro-row { display: flex; align-items: center; gap: 12px; }
.sidebar-pro-row strong { display: block; font-size: 0.9rem; }
.sidebar-pro-row span { font-size: 0.78rem; color: var(--color-ink-soft); }

.services-grid-public { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
/* Escritorio: cada ficha ocupa una columna fija de 582 px (el ancho de la vista
   previa del editor a 100%), así el % de la ficha da el mismo tamaño en el sitio. */
@media (min-width: 1100px) {
  .services-grid-public { grid-template-columns: repeat(auto-fill, 582px); justify-content: start; }
  .services-grid-public .service-card-public { margin-left: 0 !important; margin-right: auto !important; }
}
.service-card-public {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.service-card-public:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.service-card-public .svc-banner { height: 84px; display: flex; align-items: center; justify-content: center; font-size: 2.1rem; }
.service-card-public .svc-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.service-card-public .svc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.service-card-public h3 { font-size: 1.05rem; margin: 0; }
.service-card-public .svc-price { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; white-space: nowrap; }
.service-card-public .svc-duration { font-size: 0.8rem; color: var(--color-ink-soft); display: flex; align-items: center; gap: 5px; }
.service-card-public p { margin: 0; font-size: 0.88rem; flex: 1; }

/* Página de reserva (sitio/reservar.html) */
.reservar-shell { max-width: 880px; margin: 0 auto; padding: 40px 24px 80px; }
.reservar-back { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; font-weight: 600; color: var(--color-ink-soft); margin-bottom: 24px; }
.reservar-back:hover { color: var(--color-primary); }

.stepper { display: flex; margin-bottom: 40px; }
.stepper-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }
.stepper-item .stepper-line {
  position: absolute;
  top: 17px; right: 50%;
  width: 100%; height: 2px;
  background: var(--color-border);
  z-index: 0;
}
.stepper-item:first-child .stepper-line { display: none; }
.stepper-item.done .stepper-line, .stepper-item.active .stepper-line { background: var(--color-primary); }
.step-circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  color: var(--color-ink-soft);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.92rem;
  position: relative; z-index: 1;
}
.stepper-item.active .step-circle, .stepper-item.done .step-circle { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.stepper-item.done .step-circle { font-size: 0; }
.stepper-item.done .step-circle::after { content: "✓"; font-size: 0.9rem; }
.step-label { font-size: 0.78rem; font-weight: 600; color: var(--color-ink-soft); text-align: center; }
.stepper-item.active .step-label, .stepper-item.done .step-label { color: var(--color-ink); }

.reservar-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm); }
.reservar-panel h2 { font-size: 1.3rem; margin-bottom: 6px; }
.reservar-panel > p.panel-sub { margin-top: 0; margin-bottom: 24px; }

.services-select-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 28px; }
.service-select-card {
  cursor: pointer;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.service-select-card:hover { border-color: var(--color-primary-light); }
.service-select-card.selected { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(79,70,229,0.14); }
.service-select-card .svc-banner { height: 64px; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; }
.service-select-card .svc-body { padding: 14px 16px; }
.service-select-card .svc-top { display: flex; justify-content: space-between; gap: 10px; }
.service-select-card h4 { margin: 0; font-size: 0.95rem; }
.service-select-card .svc-price { font-weight: 700; font-family: var(--font-display); font-size: 1rem; white-space: nowrap; }
.service-select-card .svc-duration { font-size: 0.78rem; color: var(--color-ink-soft); }
.service-select-card .svc-banner { position: relative; overflow: hidden; }
.service-select-card .svc-banner .svc-img { position: absolute; inset: 0; }
.service-select-card .svc-banner.is-original { height: auto; min-height: 0; display: block; background: var(--color-bg-alt); }
.service-select-card .svc-banner.is-original .svc-img { position: relative; inset: auto; width: 100%; height: auto; object-fit: contain; transform: none !important; }
.service-select-card.is-square .svc-banner { height: auto; aspect-ratio: 1 / 1; }
.service-select-card.is-square .svc-banner .svc-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.menu-cat-group-inline { grid-column: 1 / -1; margin-bottom: 24px; }
.menu-cat-group-inline:last-child { margin-bottom: 0; }
.menu-cat-title-sm { font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink-soft); margin: 0 0 12px; }
.services-select-grid-inline { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.booking-step2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.calendar-card { background: var(--color-bg-alt); border-radius: var(--radius-md); padding: 18px; }
.calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.calendar-head strong { font-family: var(--font-display); font-size: 0.98rem; text-transform: capitalize; }
.calendar-nav-btn {
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  display: flex; align-items: center; justify-content: center;
}
.calendar-nav-btn:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.calendar-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 0.7rem; font-weight: 700; color: var(--color-ink-soft); margin-bottom: 6px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-cell {
  aspect-ratio: 1 / 1;
  border-radius: 9px;
  border: none;
  background: transparent;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-ink);
  display: flex; align-items: center; justify-content: center;
}
.cal-cell.empty { visibility: hidden; }
.cal-cell:not(.empty):not(:disabled):hover { background: var(--color-surface); }
.cal-cell.is-today:not(.is-selected) { border: 1.5px solid var(--color-primary); }
.cal-cell.is-selected { background: var(--color-primary); color: #fff; }
.cal-cell:disabled:not(.empty) { color: var(--color-border); cursor: not-allowed; }

.slots-card { background: var(--color-bg-alt); border-radius: var(--radius-md); padding: 18px; min-height: 100%; }
.slots-card h4 { font-size: 0.88rem; margin: 0 0 12px; }
.slots-empty-msg { font-size: 0.85rem; color: var(--color-ink-soft); text-align: center; padding: 30px 10px; }

.reservar-nav-row { display: flex; gap: 12px; margin-top: 28px; }
.reservar-nav-row .btn-back { flex: none; }
.reservar-nav-row .btn-continue { flex: 1; }

.summary-card { background: var(--color-bg-alt); border-radius: var(--radius-md); padding: 18px 20px; margin-bottom: 16px; }
.summary-card h4 { margin: 0 0 10px; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink-soft); }
.summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 0.92rem; border-bottom: 1px solid var(--color-border); }
.summary-row:last-child { border-bottom: none; padding-bottom: 0; }
.summary-row span:first-child { color: var(--color-ink-soft); }
.summary-row span:last-child { font-weight: 600; text-align: right; }

/* Resumen de reserva estilo "boleto" */
.ticket-card { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); margin-bottom: 16px; }
.ticket-head { display: flex; align-items: center; gap: 14px; padding: 22px 24px; color: #fff; background: var(--color-primary); }
.ticket-icon { width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex: none; }
.ticket-head h3 { margin: 0 0 2px; font-size: 1.1rem; color: #fff; }
.ticket-head span { font-size: 1rem; font-weight: 700; opacity: 0.95; }
.ticket-divider { height: 0; border-top: 2px dashed var(--color-border); }
.ticket-rows { padding: 18px 24px; display: flex; flex-direction: column; gap: 16px; background: var(--color-surface); }
.ticket-row { display: flex; align-items: center; gap: 14px; }
.ticket-row-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--color-bg-alt); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex: none; }
.ticket-row-text { display: flex; flex-direction: column; gap: 1px; }
.ticket-row-text span:first-child { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink-soft); }
.ticket-row-text span:last-child { font-size: 0.94rem; font-weight: 600; }

.mobile-book-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: 12px 16px;
  z-index: 200;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
}

.day-hours-table { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
.day-hours-table .dh-row {
  display: flex;
  justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.92rem;
}
.day-hours-table .dh-row:last-child { border-bottom: none; }
.day-hours-table .dh-row.today { background: var(--color-bg-alt); font-weight: 700; }
.day-hours-table .dh-row.closed span:last-child { color: var(--color-ink-soft); }

.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.contact-list { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.contact-list div { display: flex; align-items: center; gap: 12px; font-size: 0.94rem; color: var(--color-ink-soft); }
.contact-list svg { flex: none; color: var(--color-primary); }

.public-footer {
  background: var(--color-ink);
  color: rgba(255,255,255,0.7);
  padding: 32px 0;
  text-align: center;
  font-size: 0.85rem;
}
.public-footer a { color: #fff; font-weight: 600; }

/* Booking modal (sitio público) */
.booking-steps { display: flex; gap: 8px; margin-bottom: 22px; }
.booking-steps span {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--color-border);
}
.booking-steps span.done { background: var(--color-primary); }
.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; }
.slot-btn {
  padding: 10px 6px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.86rem;
  font-weight: 600;
}
.slot-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.slot-btn.selected { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.slot-btn:disabled { opacity: 0.35; text-decoration: line-through; cursor: not-allowed; }
.booking-summary-box {
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 0.88rem;
  margin-bottom: 18px;
}
.booking-summary-box strong { color: var(--color-ink); }
.confirmation-box { text-align: center; padding: 12px 0 4px; }
.confirmation-box .check-circle {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #DCFCE7;
  color: #15803D;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}

/* =========================================================
   REPORTES · "Pulso del negocio"
   ========================================================= */
.pulse-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  align-items: start;
}

.pulse-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-lg);
  padding: 30px 32px;
  color: var(--color-on-primary);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.pulse-hero::after {
  content: "";
  position: absolute;
  width: 260px; height: 260px;
  right: -80px; top: -100px;
  background: var(--color-on-primary-veil);
  border-radius: 50%;
}
.pulse-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; position: relative; }
.pulse-hero-top span.eyebrow { background: var(--color-on-primary-veil); color: var(--color-on-primary); }
.pulse-period-select {
  background: var(--color-on-primary-veil);
  border: 1px solid var(--color-on-primary-soft);
  color: var(--color-on-primary);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 600;
}
.pulse-headline { font-family: var(--font-display); font-size: 2rem; margin: 14px 0 6px; position: relative; color: var(--color-on-primary); }
.pulse-sub { color: var(--color-on-primary-soft); margin: 0; max-width: 520px; position: relative; }
.pulse-mini-stats { display: flex; gap: 28px; margin-top: 22px; position: relative; flex-wrap: wrap; }
.pulse-mini-stats div { display: flex; flex-direction: column; }
.pulse-mini-stats strong { font-family: var(--font-display); font-size: 1.3rem; color: var(--color-on-primary); }
.pulse-mini-stats span { font-size: 0.78rem; color: var(--color-on-primary-soft); }

.insight-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  box-shadow: var(--shadow-sm);
}
.insight-icon {
  width: 38px; height: 38px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.insight-card h4 { margin: 0 0 4px; font-size: 0.95rem; }
.insight-card p { margin: 0; font-size: 0.85rem; }
.insight-list { display: flex; flex-direction: column; gap: 14px; }

.heatmap-wrap { overflow-x: auto; }
.heatmap {
  display: grid;
  grid-template-columns: 64px repeat(6, 1fr);
  gap: 6px;
  min-width: 560px;
}
.heatmap-corner { }
.heatmap-col-label, .heatmap-row-label {
  font-size: 0.72rem;
  color: var(--color-ink-soft);
  font-weight: 600;
  display: flex; align-items: center;
}
.heatmap-col-label { justify-content: center; padding-bottom: 4px; }
.heatmap-row-label { justify-content: flex-end; padding-right: 6px; }
.heatmap-cell {
  aspect-ratio: 2.2 / 1;
  border-radius: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  transition: transform 0.15s ease;
}
.heatmap-cell:hover { transform: scale(1.08); }
.heatmap-cell.h-0 { background: var(--color-surface); border-color: var(--color-border); color: var(--color-border); }
.heatmap-cell.h-1 { background: #D9E4C4; border-color: #D9E4C4; color: #3F4440; }
.heatmap-cell.h-2 { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.heatmap-cell.h-3 { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.heatmap-cell.h-4 { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }
.heatmap-legend { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 0.75rem; color: var(--color-ink-soft); }
.heatmap-legend .heatmap-cell { width: 18px; height: 14px; aspect-ratio: auto; font-size: 0; border-radius: 4px; }

.rank-list { display: flex; flex-direction: column; gap: 16px; }
.rank-row-head { display: flex; justify-content: space-between; font-size: 0.86rem; margin-bottom: 6px; }
.rank-row-head strong { font-weight: 600; }
.rank-row-head span { color: var(--color-ink-soft); font-size: 0.8rem; }
.rank-track { height: 10px; border-radius: 999px; background: var(--color-bg-alt); overflow: hidden; }
.rank-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--color-primary-light), var(--color-primary)); }

.split-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; margin: 10px 0 12px; }
.split-bar span:first-child { background: var(--color-primary); }
.split-bar span:last-child { background: var(--color-accent); }
.split-legend { display: flex; gap: 18px; font-size: 0.82rem; }
.split-legend div { display: flex; align-items: center; gap: 6px; }
.split-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

@media (max-width: 980px) {
  .pulse-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { order: -1; max-width: 460px; margin: 0 auto; }
  .benefits-grid { grid-template-columns: minmax(0, 1fr); }
  .benefits-visual { order: -1; max-width: 460px; margin: 0 auto; }
  .benefits-visual .mock-card { max-width: 100%; margin-left: 0; }
  .features-grid, .steps, .audience-grid, .pricing-grid, .testimonial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step::after { display: none; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-visual { display: none; }
  .auth-page { grid-template-columns: minmax(0, 1fr); }
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .menu-settings-panel { grid-template-columns: minmax(0, 1fr); }
  .app-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 270px; z-index: 260;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  .app-sidebar.mobile-open { transform: translateX(0); box-shadow: var(--shadow-md); }
  /* En mobile el sidebar ya es este cajón (arriba) que se abre con el
     ícono de hamburguesa propio de .app-mobile-topbar · el botón de
     contraer/expandir de la isla es un control de escritorio, así que acá
     sobra (y "colapsarlo" no tendría ningún efecto visual que mostrar). */
  .app-shell .app-topbar .topbar-sidebar-toggle { display: none; }
  .app-mobile-topbar {
    display: flex; align-items: center; gap: 12px;
    margin: -28px -36px 20px;
    padding: 14px 20px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky; top: 0; z-index: 150;
  }
  /* En tablet (este breakpoint) el logo y los 3 íconos de arriba no
     tienen el diseño de "modo app" todavía (ese es solo ≤760px, ver más
     abajo) · esto es solo para que el logo no se vea a su tamaño natural
     (2181×930) y los íconos no aparezcan sueltos en una fila que no está
     pensada para ellos. */
  .app-mobile-topbar-logo { height: 26px; width: auto; margin-left: auto; }
  .amt-icons { display: none; }
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
  .editor-split { grid-template-columns: minmax(0, 1fr); }
  .editor-preview { height: auto; max-height: 560px; }
  .editor-settings-col { position: static; max-height: none; overflow: visible; }
  .hours-row { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .about-grid { grid-template-columns: minmax(0, 1fr); }
  .public-header .nav { position: relative; }
  .public-nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 2px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    padding: 8px 20px 14px;
  }
  .public-nav-links.mobile-open { display: flex; }
  .public-nav-links a { padding: 10px 4px; border-bottom: 1px solid var(--color-border); }
  .public-nav-links a:last-child { border-bottom: none; }
  .public-mobile-menu-toggle { display: flex; }
  /* En el header angosto de sitio/index.html solo caben marca + botón de
     agendar + menú; la cuenta del cliente se muestra dentro del desplegable
     en su lugar. reservar.html no tiene ese menú (no hay secciones que
     colapsar), así que su propio slot de cuenta se mantiene visible. */
  .public-nav-right:has(#public-mobile-menu-toggle) > #account-slot { display: none; }
  .public-nav-links .mobile-account-row { display: block; padding-top: 6px; }
  /* El detalle de "cierra en X min" solo cabe en el header angosto de
     reservar.html cuando se acorta; en la portada del sitio (más espacio)
     sigue viéndose completo. */
  .public-header .live-status-detail { display: none; }
  .public-header .live-status-pill { white-space: nowrap; font-size: 0.74rem; gap: 5px; }
  .public-header:not([data-logo="center"]) .nav { flex-wrap: nowrap; gap: 6px; }
  .public-header[data-logo="center"] .nav { padding-right: 56px; }
  .header-layout-preview .nav { flex-wrap: wrap !important; padding: 12px 14px; }
  .header-layout-preview .public-brand { font-size: 0.86rem; gap: 6px; }
  .header-layout-preview .public-brand .p-logo-mark { width: 26px; height: 26px; font-size: 0.8rem; }
  .header-layout-preview .public-nav-links { gap: 12px; }
  .header-layout-preview .public-nav-links a { font-size: 0.78rem; }
  .header-layout-preview .public-nav-right { gap: 8px; }
  .header-layout-preview .public-nav-right .btn { padding: 6px 10px; font-size: 0.74rem; }
  .public-header .public-nav-right { gap: 8px; }
  .public-header .public-brand span:not(.p-logo-mark) { max-width: 84px; }
  #account-slot .btn-ghost, #account-slot-mobile .btn-ghost { padding: 7px 10px; font-size: 0.78rem; white-space: nowrap; }
  .slot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .week-board { grid-template-columns: repeat(7, minmax(140px, 1fr)); }
  .profile-layout { grid-template-columns: minmax(0, 1fr); margin-top: -40px; }
  .services-grid-public { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-editor-layout { grid-template-columns: minmax(0, 1fr); }
  .plan-editor-layout { grid-template-columns: minmax(0, 1fr); }
  .services-preview-col { position: static; }
  .modal-box-wide { max-width: 460px; }
  .modal-form-split { grid-template-columns: minmax(0, 1fr); }
  .brand-logo-pair { grid-template-columns: minmax(0, 1fr); }
  .hours-layout { grid-template-columns: minmax(0, 1fr); }
  .day-card { flex-wrap: wrap; }
  .superadmin-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans-grid { grid-template-columns: minmax(0, 1fr); }
  .client-ficha-grid { grid-template-columns: minmax(0, 1fr); }
  .gateway-provider-grid { grid-template-columns: minmax(0, 1fr); }
  .brand-color-grid { grid-template-columns: minmax(0, 1fr); }
  .font-pair-grid { grid-template-columns: minmax(0, 1fr); }
}
/* El nav de la landing (marca + 5 links + 2 botones) no cabe en una sola
   fila bastante antes de los 980px del breakpoint de arriba (deja de
   caber ya a los ~985px de ancho natural) · este breakpoint aparte solo
   colapsa el nav a hamburguesa un poco antes, para que 768px (tablet)
   quede cubierto sin tocar el resto de las reglas de 980px. */
@media (max-width: 1040px) {
  .site-header .nav { position: relative; flex-wrap: nowrap; }
  .brand-nav-logo .brand-lockup-full { display: none; }
  .brand-nav-logo .brand-lockup-compact { display: block; height: 40px; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 2px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    padding: 8px 20px 16px;
    z-index: 120;
  }
  .nav-links.mobile-open { display: flex; }
  .nav-links a { padding: 11px 4px; border-bottom: 1px solid var(--color-border); }
  .nav-links a:last-child { border-bottom: none; }
  .nav-toggle { display: flex; }
  .nav-actions .btn-ghost { padding: 10px 14px; font-size: 0.82rem; }
  .nav-actions .btn-primary { display: none; }
}
@media (max-width: 680px) {
  .features-grid, .steps, .audience-grid, .pricing-grid, .testimonial-grid, .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .calc-card { padding: 28px 22px; }
  .calc-inputs { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .calc-results { grid-template-columns: minmax(0, 1fr); }
  .addon-card { grid-template-columns: minmax(0, 1fr); padding: 28px 24px; text-align: center; }
  .addon-feature-list li { text-align: left; }
  .addon-price-box { min-width: 0; }
  .price-card.featured { transform: none; }
  .cta-band { padding: 36px 24px; flex-direction: column; align-items: flex-start; }
  .stat-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .form-row-2 { grid-template-columns: minmax(0, 1fr); }
  .form-row-3 { grid-template-columns: minmax(0, 1fr); }
  .checklist-items { grid-template-columns: minmax(0, 1fr); }
  .bar-chart-label { font-size: 0.68rem; }
  .donut-chart-row { justify-content: center; }
  /* La isla siempre pasa a su propia fila completa en mobile (más
     específico que la regla base "flex: none" de más abajo, para que
     gane sin importar el orden de aparición en el archivo). min-width:0
     en la isla y el link del sitio es lo que de verdad evita el overflow:
     sin eso, un flex item no se encoge por debajo del texto que trae
     adentro (la dirección completa del negocio), aunque tenga
     flex-basis:100%. */
  .app-shell .app-topbar .topbar-island { flex: 1 1 100%; justify-content: space-between; min-width: 0; }
  .app-shell .site-link-pill { min-width: 0; }
  .app-shell .topbar-account-chip .topbar-account-name { max-width: 120px; }
  .app-main { padding: 20px 16px 40px; }
  .app-mobile-topbar { margin: -20px -16px 16px; padding: 12px 16px; }
  .services-grid-public { grid-template-columns: minmax(0, 1fr); }
  .branches-grid-public { grid-template-columns: minmax(0, 1fr); }
  .team-grid-public { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .professional-select-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-card { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .profile-card .p-logo-big { grid-row: auto; }
  .mobile-book-bar { display: block; }
  body.public-site-body { padding-bottom: 76px; }
  .services-select-grid { grid-template-columns: minmax(0, 1fr); }
  .services-select-grid-inline { grid-template-columns: minmax(0, 1fr); }
  .booking-step2-grid { grid-template-columns: minmax(0, 1fr); }
  .reservar-panel { padding: 22px; }
  .step-label { display: none; }

  .public-nav-right { gap: 10px; }
  .public-brand span:not(.p-logo-mark) {
    max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .account-pill { padding: 6px 10px 6px 6px; }
  .account-pill .account-name-text { display: none; }
  #btn-book-nav { padding: 10px 14px; font-size: 0.84rem; }
}
@media (max-width: 380px) {
  .container { padding: 0 16px; }
  .app-main { padding: 20px 12px 40px; }
  .app-mobile-topbar { margin: -20px -12px 16px; padding: 12px; }
  .nav-actions { gap: 8px; }
  .nav-actions .btn-ghost { padding: 8px 10px; font-size: 0.78rem; }
}

/* =========================================================
   PANEL DE NEGOCIO EN TELÉFONO · "modo app": menú inferior fijo en vez
   del sidebar + hamburguesa, como una app instalada de verdad (ver
   agendaInitBottomNav en shell.js). Solo el panel de negocio agrega
   ".is-app-mode" a .app-shell (el superadmin sigue con su sidebar/
   hamburguesa de siempre, nunca agrega esa clase) · ANTES esto usaba el
   selector ":has(#app-bottom-nav)" para lograr lo mismo sin tocar el
   HTML, pero ":has()" todavía no lo soportan todos los navegadores de
   celular (ahí es exactamente donde más importa que esto funcione), así
   que se cambió por una clase puesta a mano desde JS, que sí funciona en
   cualquier navegador. Los componentes (.abn-*) quedan definidos
   siempre (no solo en el media query) porque el elemento vive
   en el DOM en cualquier ancho; el media query es lo único que decide
   si se ve o no.
   ========================================================= */
.app-bottom-nav {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 400;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
}
.abn-item {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 2px;
  border: none; background: none;
  color: var(--color-ink-soft);
  font-family: inherit;
  text-decoration: none;
  border-radius: 12px;
  transition: color 0.18s ease;
  /* Android/Chrome le pone a todo <a> un recuadro azul claro apenas se
     toca (el "tap highlight" nativo) · acá ya tenemos nuestra propia
     respuesta al toque (el ícono achicándose + la barrita de arriba),
     así que el recuadro del navegador sobra y se ve como un bug. */
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}
.abn-item.active { color: var(--svc-brand, var(--color-primary)); }
/* Ícono y nombre EN LÍNEA (lado a lado, no apilados) · el nombre solo se
   ve en el módulo activo, igual que el ícono-solo-gris del resto (ver
   referencia que pasó el usuario: ícono + texto horizontal, línea arriba
   del conjunto). El ancho real de este bloque es lo que mide
   agendaPositionBottomNavIndicator en shell.js para la barrita de arriba. */
.abn-item-inner {
  display: inline-flex; align-items: center;
  gap: 6px;
}
.abn-item-label {
  display: none;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  animation: agenda-abn-label-in 0.18s ease;
}
.abn-item.active .abn-item-label { display: inline-block; }
@keyframes agenda-abn-label-in {
  from { opacity: 0; transform: translateX(-3px); }
  to { opacity: 1; transform: translateX(0); }
}
/* Reacción al toque: el ícono se achica apenas se presiona (sin esperar
   a que la navegación termine) — profesional y sutil en vez de un
   rebote tipo cartoon · la barrita de arriba (.abn-indicator) es la que
   de verdad comunica "estás acá", deslizándose de un ítem al otro con
   una curva suave y ajustándose al ancho del nombre (ver
   agendaPositionBottomNavIndicator en shell.js), como en apps de
   verdad (Mercado Pago, etc.) en vez de solo cambiar de color seco. */
.abn-item svg { transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease; flex-shrink: 0; }
.abn-item:active svg { transform: scale(0.82); }
/* Barrita arriba del nombre del módulo activo, centrada y del mismo
   ancho que el bloque ícono+nombre (ver agendaPositionBottomNavIndicator
   en shell.js, que la posiciona y la mide con la posición real del
   botón, no un porcentaje fijo). */
.abn-indicator {
  position: absolute;
  top: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--svc-brand, var(--color-primary));
  transition: left 0.3s cubic-bezier(0.65, 0, 0.35, 1), width 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.abn-sheet-section-label {
  display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--color-ink-soft);
  margin: 18px 2px 8px;
}
.abn-sheet-section:first-of-type { margin-top: 0; }
.abn-sheet-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
}
.abn-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px;
  border: none; background: none; width: 100%;
  color: var(--color-ink);
  font-size: 0.92rem;
  font-family: inherit;
  text-decoration: none;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  border-bottom: 1px solid var(--color-border);
}
.abn-row:last-child { border-bottom: none; }
.abn-row-icon {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg-alt);
  color: var(--svc-brand, var(--color-primary));
}
.abn-row-label { flex: 1; min-width: 0; }
.abn-row-chevron { flex: none; color: var(--color-border); }
.abn-row-logout { color: var(--color-danger); }
.abn-row-icon-danger { background: rgba(220,38,38,0.1); color: var(--color-danger); }

@media (max-width: 760px) {
  .app-shell.is-app-mode .app-sidebar,
  .app-shell.is-app-mode .mobile-nav-backdrop,
  .app-shell.is-app-mode .app-mobile-topbar .app-mobile-nav-toggle {
    display: none !important;
  }
  .app-shell.is-app-mode .app-main { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .app-bottom-nav { display: flex; }

  /* Encabezado fijo de arriba: el logotipo completo a la izquierda, bien
     grande, y a la derecha los 3 íconos reales (sitio web, guía,
     notificaciones — ver agendaInitMobileTopIcons en shell.js) · "order"
     invierte el orden visual sin tocar el HTML (que sigue trayendo los
     íconos antes que el logo, por si algún día hace falta mostrarlos sin
     esta regla). El botón de hamburguesa y el spacer de la versión de
     tablet ya no pintan nada acá, por eso no se mencionan. */
  .app-mobile-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  /* margin-left:0 porque la regla de tablet (980px, más arriba en este
     mismo archivo) le pone "margin-left:auto" a este logo para pegarlo
     al borde derecho junto a la hamburguesa · un media query más
     angosto no "cancela" automáticamente lo que puso uno más ancho, solo
     pisa las propiedades que vuelve a nombrar · sin este reset, ese
     margen seguía empujando el logo a la derecha aunque "order:1" ya
     dijera que va primero (izquierda). */
  /* Se esconde al bajar y vuelve a aparecer al subir (ver
     agendaInitAutoHideTopbar en shell.js) · transform en vez de
     display/top para que sea una animación suave, no un salto, y para
     que siga funcionando con position:sticky (que no admite animarse
     por top/bottom de forma fluida). */
  .app-mobile-topbar { transition: transform 0.25s ease; }
  .app-mobile-topbar.is-hidden { transform: translateY(-100%); }
  .app-mobile-topbar-logo { order: 1; height: 54px; width: auto; margin-left: 0; }
  .amt-icons { order: 2; display: flex; align-items: center; gap: 8px; }
  /* Borde propio en cada ícono (antes eran círculos "pelados", solo el
     trazo del ícono) para que se lean como botones reales, más
     profesional. */
  .amt-icon-btn {
    width: 38px; height: 38px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-primary);
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    position: relative;
    transition: background 0.15s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .amt-icon-btn:active { background: var(--color-bg-alt); border-color: var(--color-primary); }
  .amt-notif-wrap { position: relative; }
  /* Número de avisos pendientes como "exponente" sobre la campana: un
     circulito que sobresale de la esquina superior derecha, con un
     borde del color de fondo para que se recorte limpio contra el
     ícono en vez de superponerse a lo bruto. */
  .amt-icon-btn .badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 17px; height: 17px; padding: 0 3px;
    border-radius: 999px;
    background: var(--color-accent);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--color-surface);
    line-height: 1;
  }
  /* El desplegable de notificaciones ahora cuelga del borde derecho de
     verdad (la campana es el último ícono, a la derecha), así que se
     ancla directo desde ahí, sin el angosto especial que hacía falta
     cuando vivía pegada al borde izquierdo. */
  .app-shell .amt-notif-menu { left: auto; right: 0; width: min(320px, calc(100vw - 24px)); }
  .app-mobile-topbar-spacer { display: none; }

  /* La isla de escritorio (sitio/guía/notificaciones/cuenta) ya no se ve
     acá: sitio/guía/notificaciones se mudaron al encabezado fijo de
     arriba (siempre visible, no se va con el scroll) y cuenta/config/
     cerrar sesión ya viven en la página "Más" del menú inferior · dejarla
     además acá hubiera sido repetir los mismos 3 íconos dos veces. Solo
     ".is-app-mode" (panel de negocio): el superadmin no tiene este
     reemplazo, así que su isla se tiene que seguir viendo en teléfono. */
  .app-shell.is-app-mode .topbar-island { display: none; }

  /* Título + descripción de cada módulo ("Hola, {negocio}", "Clientes",
     etc.): mucho más chico que en escritorio, para que nunca compita en
     ancho con el botón de creación que viene después. */
  .app-shell .app-topbar h1 { font-size: 1.3rem; line-height: 1.25; }
  .app-shell .app-topbar p { font-size: 0.82rem; }

  /* Botón(es) de creación del módulo ("+ Nueva reserva", etc.): su
     propia fila completa, a todo el ancho, como un botón de app nativa. */
  .app-shell .topbar-actions { flex: 1 1 100%; margin-left: 0; width: 100%; }
  .app-shell .topbar-actions .btn { flex: 1 1 auto; justify-content: center; }

  /* Tarjetas de números (KPI): ícono y letra más chicos, y el texto no
     puede desbordar la tarjeta ni aunque el número sea largo (ej. un
     monto en pesos) · min-width:0 en el bloque de texto es lo que deja
     que el ellipsis funcione dentro de un hijo flex. */
  .stat-row, .superadmin-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat-card { padding: 14px; gap: 10px; }
  .stat-icon { width: 36px; height: 36px; border-radius: 10px; }
  .stat-icon svg { width: 18px; height: 18px; }
  .stat-card > div:last-child { min-width: 0; }
  .stat-card h3 { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stat-card span { font-size: 0.72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
}

/* =========================================================
   PANEL y SUPERADMIN · reinterpretación visual estilo dashboard
   financiero (inspirada libremente en kits de admin tipo BankDash,
   revisado contra las 30 pantallas reales del kit: fondo lavanda muy
   pálido, tarjetas flotantes con sombra suave, menú con acento lateral
   a ras del borde, barra superior con buscador + usuario, acento
   turquesa como segundo color de marca). Todo queda encerrado dentro
   de .app-shell para no tocar ni la landing ni el sitio público de
   cada negocio; ningún dato, texto ni comportamiento cambia, solo
   el pintado (el buscador de sección es una ayuda de navegación
   nueva y no toca ninguna función ya hablada).
   ========================================================= */
.app-shell {
  --admin-accent-teal: #0D9C93;
  --color-bg: #F4F5FB;
  --color-bg-alt: #ECEEFA;
  --radius-md: 18px;
  --radius-lg: 24px;
  --shadow-sm: 0 2px 10px rgba(43, 40, 74, 0.05);
  --shadow-md: 0 12px 30px rgba(43, 40, 74, 0.08);
  /* La tipografía (Inter) ya no se redefine acá: el usuario pidió Inter
     en todo el sistema, así que ahora es el default de :root. Este
     bloque solo toca lo que sigue siendo exclusivo del panel/superadmin. */
}

/* =========================================================
   Tema del PANEL CLIENTE (Superadmin no lo usa): claro (de siempre),
   gris y oscuro · el botón vive en Configuración > Preferencias (ver
   app/configuracion.html) y AgendaStore.setPanelTheme le pone/saca
   data-theme a <body> (store.js explica por qué en <body> y no en
   .app-shell: los modales son hermanos de .app-shell en el DOM, no
   hijos, y así heredan el tema igual que el resto).

   Dos bloques por tema: uno en body[data-theme] (todo lo que las
   variables de :root ya cubren solas: superficies, texto, bordes,
   marca, sombra grande) y otro en body[data-theme] .app-shell
   (los 5 tokens que .app-shell de arriba vuelve a fijar él mismo sin
   condición, así que hace falta más especificidad para pisarlos:
   fondo, fondo alterno, acento turquesa y las dos sombras chicas).
   ========================================================= */
body[data-theme="gray"] {
  --color-surface: #FFFFFF;
  --color-ink: #23262A;
  --color-ink-soft: #5C6066;
  --color-border: #CBCED2;
  --shadow-lg: 0 20px 48px rgba(20, 20, 24, 0.14);
}
body[data-theme="gray"] .app-shell {
  --admin-accent-teal: #0D9C93;
  --color-bg: #E4E6E9;
  --color-bg-alt: #D9DBDF;
  --shadow-sm: 0 2px 10px rgba(20, 20, 24, 0.07);
  --shadow-md: 0 12px 30px rgba(20, 20, 24, 0.10);
}

body[data-theme="dark"] {
  /* --color-primary hace doble papel en todo el sitio (fondo sólido con
     texto blanco encima, ej. botones/avatares · Y color de texto sobre
     fondo transparente, ej. links/botones ghost) · un verde muy oscuro
     (el de siempre) se ve genial como fondo pero desaparece como texto
     sobre un fondo ya oscuro, y uno muy claro es al revés (buen texto,
     mal fondo para letras blancas encima). Se reusa el verde marca
     brillante (el mismo --color-accent del tema claro) como punto medio
     que funciona razonablemente en los dos roles. */
  --color-primary: #7FA63D;
  --color-primary-dark: #6C8F33;
  --color-primary-light: #A8C97A;
  --color-accent: #9ED14E;
  --color-accent-dark: #7FA63D;
  --color-surface: #1A1D21;
  --color-ink: #EDEFEA;
  --color-ink-soft: #9AA39B;
  --color-border: #2C3136;
  --color-success: #4ADE80;
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
}
body[data-theme="dark"] .app-shell {
  --admin-accent-teal: #2DD4C4;
  --color-bg: #14171A;
  --color-bg-alt: #1E2226;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.45);
}
/* Acentos puntuales que en el resto del sitio quedaron con un tinte
   índigo fijo (rgba, no variable) de una paleta de marca anterior: en
   tema oscuro ese índigo apagado casi no se ve sobre el fondo casi
   negro, así que acá se reemplaza por un tinte verde acorde a la marca
   actual. En gris no hace falta (el fondo sigue siendo claro, el
   índigo se lee igual de bien que en el tema claro de siempre). */
body[data-theme="dark"] .app-shell .topbar-island { border-color: rgba(127, 166, 61, 0.32); }
body[data-theme="dark"] .app-shell .topbar-island-divider { background: rgba(127, 166, 61, 0.32); }
body[data-theme="dark"] .app-shell .btn-primary:hover { box-shadow: 0 6px 16px rgba(127, 166, 61, 0.3); }
body[data-theme="dark"] textarea.input-plain:focus,
body[data-theme="dark"] select.input-plain:focus,
body[data-theme="dark"] input.input-plain:focus { box-shadow: 0 0 0 4px rgba(127, 166, 61, 0.2); }
body[data-theme="dark"] .switch-track { background: #3A3F44; }
body[data-theme="dark"] .danger-zone { background: #2A1618; border-color: #5C2626; }
body[data-theme="dark"] .danger-zone h4 { color: #F87171; }
body[data-theme="dark"] .danger-zone p { color: var(--color-ink-soft); }
/* Avisos y estados con color fijo (ámbar "pendiente/atrasado", rojo
   "cancelada/bloqueado"): en tema oscuro el mismo pastel clarito queda
   como un cartel encendido sobre el resto de la pantalla · se oscurece
   el fondo y se aclara el texto, mismo par ámbar/rojo, solo invertido
   en luminosidad. Los chips de ícono chicos (candado del bloqueo de
   cuenta, campanita de notificaciones) se dejan tal cual: son piezas
   autocontenidas que se leen bien en cualquier fondo. */
body[data-theme="dark"] .overdue-banner { background: #3D2E0A; color: #FBBF24; }
body[data-theme="dark"] .overdue-banner.is-blocked,
body[data-theme="dark"] .overdue-banner.trial-banner,
body[data-theme="dark"] .badge-cancelada,
body[data-theme="dark"] .badge-bloqueado { background: #3D1518; color: #F87171; }
body[data-theme="dark"] .badge-pendiente,
body[data-theme="dark"] .badge-atrasado,
body[data-theme="dark"] .pay-badge.pending { background: #3D2E0A; color: #FBBF24; }
body[data-theme="dark"] .pay-badge.paid { background: #113420; color: #4ADE80; }
body[data-theme="dark"] .app-shell .topbar-user-menu #topbar-user-menu-logout:hover { background: #3D1518; color: #F87171; }

/* ---- Menú lateral "en islas": cada link es su propia tarjeta blanca
   (o clara, en tema oscuro) flotando sobre el gris de fondo del propio
   menú, en vez de una lista plana de filas · el activo se pinta sólido
   con el color de marca en vez de solo una barrita de acento, para que
   se lea como "la isla prendida" entre las demás. ---- */
.app-shell .app-sidebar {
  padding: 14px 0 20px;
  gap: 6px;
  background: var(--color-bg);
}
.app-shell .app-sidebar.sidebar-dark { background: var(--color-primary-dark); }
.app-shell .app-sidebar .brand,
.app-shell .app-sidebar .sidebar-section-label,
.app-shell .app-sidebar .sidebar-footer {
  margin-left: 24px;
  margin-right: 20px;
}
/* Línea divisoria entre el logo y el primer link del menú (Inicio), para
   separar "identidad" del resto de la navegación en vez de que el logo
   quede flotando pegado arriba de la primera isla. */
.app-shell .app-sidebar .brand {
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--color-border);
}
.app-shell .app-sidebar.sidebar-dark .brand { border-bottom-color: rgba(255,255,255,0.12); }
.app-shell .sidebar-link {
  position: relative;
  margin: 0 12px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgba(30, 27, 46, 0.05);
  color: var(--color-ink-soft);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease,
    gap var(--agenda-sidebar-anim), padding var(--agenda-sidebar-anim);
}
.app-shell .sidebar-link:hover { box-shadow: var(--shadow-sm); color: var(--color-primary); }
.app-shell .sidebar-link.active {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}
.app-shell .app-sidebar.sidebar-dark .sidebar-link { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.68); box-shadow: none; }
.app-shell .app-sidebar.sidebar-dark .sidebar-link:hover { background: rgba(255,255,255,0.1); color: #fff; }
.app-shell .app-sidebar.sidebar-dark .sidebar-link.active { background: var(--color-primary-light); color: #1E1B2E; }

/* ---- Menú lateral contraído: lo dispara el botón al extremo izquierdo
   de la isla (ver #topbar-sidebar-toggle en topbar-chrome.js), que le
   pone/saca .sidebar-collapsed a .app-shell vía AgendaStore.setSidebarCollapsed
   (store.js, estado guardado en localStorage). Solo angosta el sidebar
   desde el ancho en que compartir espacio con el contenido tiene sentido:
   en mobile el sidebar ya es un cajón superpuesto (ver @media 980px más
   abajo), así que ahí este angostamiento no aplica.

   La causa real de que las versiones animadas anteriores se vieran
   "raras" no era la secuencia ni los delays: era que brand-lockup (el
   wordmark, un <img>) no tenía max-width:none, así que el reset global
   "img, svg { max-width:100% }" (ver arriba del archivo) lo iba
   encogiendo EN VIVO a medida que .brand (que estira su ancho al del
   sidebar) se angostaba durante la transición — el logo se "achicaba"
   de verdad antes de desvanecerse, no era solo percepción. Con esto
   corregido, un cross-fade simple y simultáneo (misma duración que el
   ancho del sidebar, sin delays) se ve como un solo movimiento limpio:
   el logo nunca cambia de tamaño, solo de opacidad. */
:root {
  --agenda-sidebar-anim: 0.2s ease;
}
.app-shell { transition: grid-template-columns var(--agenda-sidebar-anim); }
.app-sidebar { overflow-x: hidden; }
.sidebar-link-label,
.sidebar-section-label,
.brand-text {
  display: inline-block;
  opacity: 1;
  max-width: 180px;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
  transition: opacity var(--agenda-sidebar-anim), max-width var(--agenda-sidebar-anim);
}
.app-sidebar .brand { position: relative; }
.app-sidebar .brand-lockup {
  opacity: 1;
  transition: opacity var(--agenda-sidebar-anim);
  /* Esta es la corrección real (ver comentario de arriba): sin esto el
     wordmark se encogía en vivo junto con .brand mientras el sidebar
     se angostaba, antes de llegar a desvanecerse del todo. */
  max-width: none;
}
.app-sidebar .brand-mark-collapsed {
  display: block;
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--agenda-sidebar-anim);
  /* Mismo motivo: este isotipo también es un <img> posicionado en
     absoluto dentro de .brand, que igual se achicaba con el reset
     global si no se le saca el techo de ancho. */
  max-width: none;
}
@media (min-width: 981px) {
  .app-shell.sidebar-collapsed { grid-template-columns: 76px minmax(0, 1fr); }
  .app-shell.sidebar-collapsed .sidebar-link { gap: 0; padding-left: 17px; padding-right: 17px; }
  .app-shell.sidebar-collapsed .sidebar-link-label,
  .app-shell.sidebar-collapsed .sidebar-section-label,
  .app-shell.sidebar-collapsed .brand-text { opacity: 0; max-width: 0; }
  /* Cross-fade simultáneo: los dos cambian de opacidad a la vez, sin
     delay de ninguno de los dos. */
  .app-shell.sidebar-collapsed .app-sidebar .brand-lockup { opacity: 0; }
  .app-shell.sidebar-collapsed .app-sidebar .brand-mark-collapsed { opacity: 1; pointer-events: auto; }
  /* .brand mantiene su margen de siempre (no se anima): el isotipo se
     re-centra ajustando solo su propio "left" local, para que su centro
     caiga exacto en el centro del sidebar contraído (38px de 76px), el
     mismo eje en el que ya quedan centrados los íconos del menú. Como
     "left" no tiene transición, el salto ocurre en el instante mismo
     del clic (con el isotipo todavía a opacity:0). */
  .app-shell.sidebar-collapsed .app-sidebar .brand-mark-collapsed { left: -5px; }
}

/* ---- Barra superior: UNA sola fila arriba, la misma de siempre: el
   título a la izquierda, y el botón propio de cada módulo pegado
   inmediatamente a la izquierda de la isla, a la derecha · nada baja a
   una segunda fila. justify-content vuelve a flex-start (en vez del
   space-between de la base) porque con 3 hijos (título, botones, isla)
   space-between los separaría a los tres por igual, alejando la isla
   del botón otra vez · el margin-left:auto en .topbar-actions es lo que
   empuja al bloque [botones + isla] entero hacia la derecha, pegados
   entre sí. La isla es hija DIRECTA de .app-topbar (no de
   .topbar-actions) para poder ordenarla así sin tocar el HTML de cada
   página. ---- */
.app-shell .app-topbar { justify-content: flex-start; }
.app-shell .topbar-actions {
  order: 2;
  flex: 0 1 auto;
  flex-wrap: wrap;
  row-gap: 10px;
  margin-left: auto;
}
.app-shell .topbar-actions[hidden] { margin-left: 0; display: none; }
.app-shell .topbar-actions[hidden] ~ .topbar-island { margin-left: auto; }
.app-shell .topbar-island { order: 3; flex: none; }

/* La píldora en sí: más alta y con más aire que antes, para pesar en
   la fila tanto como el botón del módulo que queda a su izquierda, y
   con los íconos en el color de marca (no gris) para que se sienta
   una sola pieza de diseño, no un borde suelto con texto adentro. */
.app-shell .topbar-island {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface);
  border: 1.5px solid rgba(79, 70, 229, 0.16);
  border-radius: 999px;
  padding: 8px;
  box-shadow: 0 4px 14px rgba(43, 40, 74, 0.07);
}
/* Página web y Notificaciones: solo ícono, en un círculo del mismo
   tamaño, antes de la línea divisora (ver agendaInjectTopbarChrome en
   topbar-chrome.js para el orden). */
.app-shell .topbar-island .site-link-pill,
.app-shell .topbar-island-icon-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 50%;
  color: var(--color-primary);
  position: relative;
  flex: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.app-shell .topbar-island .site-link-pill svg,
.app-shell .topbar-island-icon-btn svg { color: var(--color-primary); }
.app-shell .topbar-island .site-link-pill:hover,
.app-shell .topbar-island-icon-btn:hover { background: var(--color-bg-alt); }
.app-shell .topbar-island-icon-btn:active { transform: scale(0.88); }
.app-shell .topbar-sidebar-toggle[aria-pressed="true"] { background: var(--color-bg-alt); }
.app-shell .topbar-island-icon-btn .badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.app-shell .topbar-island-divider { width: 1.5px; height: 26px; background: rgba(79, 70, 229, 0.16); flex: none; margin: 0 4px; }
.app-shell .topbar-account-wrap { position: relative; flex: none; }
.app-shell .topbar-account-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 18px 6px 6px;
  border-radius: 999px;
  border: none;
  background: var(--color-bg-alt);
  cursor: pointer;
}
.app-shell .topbar-account-chip:hover { background: var(--color-border); }
.app-shell .topbar-account-chip .avatar { width: 42px; height: 42px; font-size: 0.88rem; flex: none; }
.app-shell .topbar-account-chip .topbar-account-name { font-size: 0.95rem; }
.app-shell .topbar-account-chip .topbar-account-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-ink);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-shell .topbar-account-chip svg { color: var(--color-ink-soft); flex: none; }
.app-shell .topbar-user-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 180px;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 50;
}
.app-shell .topbar-user-menu[hidden] { display: none; }
.app-shell .topbar-user-menu a,
.app-shell .topbar-user-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: 8px;
  border: none;
  background: none;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-ink);
}
.app-shell .topbar-user-menu a:hover,
.app-shell .topbar-user-menu button:hover { background: var(--color-bg-alt); color: var(--color-primary); }
.app-shell .topbar-user-menu #topbar-user-menu-logout { color: #DC2626; }
.app-shell .topbar-user-menu #topbar-user-menu-logout:hover { background: #FEE2E2; color: #B91C1C; }

/* Desplegable de notificaciones: mismo panel flotante que el menú de
   cuenta, pero más ancho y con filas de aviso (ícono + título +
   detalle) en vez de links simples. */
.app-shell .topbar-notif-wrap { position: relative; flex: none; }
.app-shell .topbar-notif-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 320px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 8px;
  z-index: 50;
}
.app-shell .topbar-notif-menu[hidden] { display: none; }
.app-shell .topbar-notif-menu-head {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-ink-soft);
  padding: 6px 10px 10px;
}
.app-shell .topbar-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  color: var(--color-ink);
}
.app-shell .topbar-notif-item:hover { background: var(--color-bg-alt); }
.app-shell .topbar-notif-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FEF3C7;
  color: #B45309;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}
.app-shell .topbar-notif-item strong { display: block; font-size: 0.86rem; }
.app-shell .topbar-notif-item span:not(.topbar-notif-item-icon) { font-size: 0.78rem; color: var(--color-ink-soft); }
.app-shell .topbar-notif-empty { text-align: center; padding: 20px 12px; font-size: 0.85rem; color: var(--color-ink-soft); }
.app-shell .topbar-notif-footer {
  display: block;
  text-align: center;
  padding: 10px;
  margin-top: 4px;
  border-top: 1px solid var(--color-border);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-primary);
}
.app-shell .topbar-notif-footer:hover { color: var(--color-primary-dark); }

/* Página /notificaciones (ver notificaciones.js): la lista completa, a
   todo el ancho, para cuando la campana del encabezado de teléfono deja
   de abrir el desplegable angosto de arriba. Tarjetas tipo fila, mismo
   lenguaje visual que .list-card / .abn-row del resto del panel. */
.notif-page-list { display: flex; flex-direction: column; gap: 10px; }
.notif-page-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.notif-page-item:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.notif-page-item-icon {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: #FEF3C7; color: #B45309;
  display: flex; align-items: center; justify-content: center;
}
.notif-page-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-page-item-body strong { font-size: 0.94rem; }
.notif-page-item-body span { font-size: 0.82rem; color: var(--color-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-page-item-chevron { flex: none; color: var(--color-ink-soft); }

.notif-page-empty { text-align: center; padding: 60px 24px; }
.notif-page-empty-icon {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 16px;
  background: #DCFCE7; color: #15803D;
  display: flex; align-items: center; justify-content: center;
}
.notif-page-empty h3 { margin: 0 0 6px; font-size: 1.05rem; }
.notif-page-empty p { margin: 0; color: var(--color-ink-soft); font-size: 0.88rem; }

/* Buscador y botones-ícono del topbar, más redondeados y con relleno
   lavanda suave en vez de solo borde, como en los kits de dashboard */
.app-shell .search-input { border-radius: 999px; background: var(--color-bg-alt); border-color: transparent; }
.app-shell .icon-btn { background: var(--color-bg-alt); border-color: transparent; }
.app-shell .icon-btn:hover { background: var(--color-surface); border-color: var(--color-primary); }
.app-shell .site-link-pill { background: var(--color-bg-alt); border-color: transparent; }
.app-shell .site-link-pill:hover { background: var(--color-surface); border-color: var(--color-primary); }

/* Tarjetas flotantes: bordes más redondeados, sombra suave en vez de
   solo un borde plano, con un pequeño levantamiento al pasar el mouse */
.app-shell .stat-card,
.app-shell .panel,
.app-shell .table-wrap,
.app-shell .week-day-col,
.app-shell .plan-edit-card,
.app-shell .ficha-card {
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}
.app-shell .stat-card {
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.app-shell .stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Acento turquesa como segundo color de marca del panel: el switch
   "activado" y el resaltado de la fila de hoy en el tablero semanal */
.app-shell .switch input:checked + .switch-track { background: var(--svc-brand, var(--color-primary)); }
.app-shell .week-day-col.is-today { border-color: var(--admin-accent-teal); box-shadow: 0 0 0 2px rgba(13, 156, 147, 0.15); }
.app-shell .week-day-col.is-today .wd-num { color: var(--admin-accent-teal); }

/* Encabezado de tabla sin franja gris: título en color de marca sobre
   blanco y una sola línea fina abajo, como en los kits de dashboard */
.app-shell table.data-table th {
  background: transparent;
  color: var(--color-primary);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8rem;
}

/* Pestañas subrayadas (además de las pestañas-píldora que ya existían):
   .page-tabs sigue siendo píldora, pero .view-toggle usada como pestañas
   de texto (ver mi-cuenta / configuración) puede llevar esta variante. */
.app-shell .tabs-underline { display: flex; gap: 28px; border-bottom: 1px solid var(--color-border); margin-bottom: 22px; }
.app-shell .tabs-underline button {
  background: none; border: none; padding: 0 0 12px; font-size: 0.92rem; font-weight: 600;
  color: var(--color-ink-soft); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.app-shell .tabs-underline button.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
/* Pestañas sin interacción (ej. Mi negocio con la cuenta bloqueada:
   solo "Plan y pagos" queda disponible, ver agendaMnWireTabRouting en
   mi-negocio.html) · disabled nativo, no solo visual, así ni con
   teclado se puede entrar. */
.app-shell .tabs-underline button:disabled { opacity: 0.4; cursor: not-allowed; }
/* Nombre corto (ej. "Mi sitio" en vez de "Mi sitio y dominio"), solo
   para cuando no entran los 4 completos en una fila de teléfono (ver
   @media 760px más abajo) · en escritorio/tablet se ve el nombre
   completo de siempre y el corto queda oculto. */
.app-shell .tabs-underline .tab-label-short { display: none; }

/* =========================================================
   TELÉFONO · Reservas, Profesionales, Métodos de Pago, Ventas y Mi
   negocio (sus 4 pestañas: Datos / Facturación / Plan y pagos / Mi
   sitio y dominio). Reservas y Ventas ya quedan cubiertas por el ajuste
   genérico de la isla de herramientas y de las tarjetas de KPI de más
   arriba · lo que faltaba acá es lo propio de estas páginas.
   ========================================================= */
@media (max-width: 760px) {
  /* Mi negocio: 4 pestañas con nombres largos ("Mi sitio y dominio") no
     entran en una fila de teléfono · se usa el nombre corto de cada una
     (ver .tab-label-short arriba) en vez de dejarlas cortadas o
     obligar a deslizar para ver "Mi sitio y dominio" completo. Con el
     nombre corto las 4 entran solas en una sola línea, visibles de
     una, nada se corta ni hay que tocar para descubrir que hay más. */
  .app-shell .tabs-underline { gap: 14px; }
  .app-shell .tabs-underline .tab-label-full { display: none; }
  .app-shell .tabs-underline .tab-label-short { display: inline; }
  .app-shell .tabs-underline button { white-space: nowrap; font-size: 0.86rem; }

  /* Tarjetas tipo "fila" (ícono + texto + precio + botón, ej. el plan
     activo en Mi negocio > Plan y pagos): en una sola línea no entran
     las 4 piezas · ícono+nombre arriba, precio y botón cada uno en su
     propia fila completa, nada se corta ni se aprieta. */
  .list-card { flex-wrap: wrap; row-gap: 10px; }
  .list-card-body { flex: 1 1 160px; min-width: 0; }
  .list-card-meta { flex: 1 1 100%; text-align: left; }
  .list-card-actions { flex: 1 1 100%; }
  .list-card-actions .btn { flex: 1; text-align: center; }

  /* Mi negocio > Mi sitio y dominio: grilla de 2 columnas (definida
     inline en mi-negocio.html) pasa a 1 sola · con !important porque le
     gana a ese estilo inline (ver nota de la cascada: un !important de
     hoja de estilos sí le gana a un estilo inline sin !important). */
  .mn-field-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }

  /* Menos padding en las tarjetas de Mi negocio: a 24-26px por lado le
     sobraba a un ancho de teléfono. */
  .mn-panel { padding: 18px 16px; }
  .mn-profile { padding: 22px 18px; }

  /* Profesionales: nada de fila horizontal con scroll · cuadrícula de 2
     columnas, todas las fichas visibles de una, como el resto del
     panel en teléfono. Fichas más compactas (foto, nombre, rol y bio
     más chicos) para que entren bien dos por fila sin verse apretadas. */
  .professionals-fichas-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    overflow: visible;
    padding: 4px 0;
  }
  .pro-ficha-card { padding: 20px 10px 16px; }
  .pro-ficha-card-photo { width: 72px; height: 72px; margin-bottom: 10px; font-size: 1.1rem; box-shadow: 0 0 0 3px var(--color-bg-alt); }
  .pro-ficha-name { font-size: 0.88rem; }
  .pro-ficha-role { font-size: 0.72rem; margin-bottom: 6px; }
  .pro-ficha-bio {
    font-size: 0.72rem;
    min-height: calc(0.72rem * 1.45);
    -webkit-line-clamp: 1;
  }
  .pro-ficha-menu-btn { width: 26px; height: 26px; top: 8px; right: 8px; }
  .pro-ficha-card-hidden-tag { top: 8px; left: 8px; font-size: 0.6rem; padding: 2px 7px; }

  /* Modales (ej. "Nueva reserva" en Reservas/Calendario, "Nuevo
     profesional"): menos padding en teléfonos angostos. */
  .modal-box { padding: 22px 18px; }

  /* Clientes: la tabla de escritorio (8 columnas) no es legible con
     scroll horizontal en un teléfono · cada fila se convierte en una
     tarjeta con "etiqueta: valor" por campo, nada se corta ni hay que
     deslizar de lado. El nombre (primera columna) queda como
     encabezado de la tarjeta; "Sucursal" (si existe, solo en negocios
     multi-sucursal) y "Acciones" (última columna, sin encabezado
     propio) se ubican por posición/orden, no por índice fijo, para que
     funcione tenga o no esa columna. */
  table.clients-table { min-width: 0; }
  .clients-table thead { display: none; }
  .clients-table, .clients-table tbody, .clients-table tr, .clients-table td { display: block; width: 100%; }
  .clients-table tr {
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
    padding: 14px; margin-bottom: 10px;
  }
  .clients-table td { border: none; padding: 0; }
  .clients-table td:first-child { padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--color-border); }
  .clients-table td:not(:first-child):not(:last-child) {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 7px 0; font-size: 0.85rem;
  }
  .clients-table td:not(:first-child):not(:last-child)::before {
    content: attr(data-label);
    color: var(--color-ink-soft); font-weight: 600; font-size: 0.74rem; flex: none;
  }
  .clients-table td:last-child { padding-top: 8px; }
  .clients-table .row-actions { justify-content: flex-end; }

}

/* Botones y campos de formulario: el brillo/glow de .btn-primary está
   pensado para la landing (un solo botón grande de venta); adentro del
   panel, con muchos botones por pantalla, se ve mejor plano como en los
   kits de dashboard. Los inputs quedan un poco más redondeados y con un
   relleno gris muy suave en vez de blanco, otro detalle del kit real. */
.app-shell .btn-primary { box-shadow: none; }
.app-shell .btn-primary:hover { box-shadow: 0 6px 16px rgba(79, 70, 229, 0.22); }
.app-shell .btn-accent { box-shadow: none; }
.app-shell textarea.input-plain,
.app-shell select.input-plain,
.app-shell input.input-plain {
  border-radius: 12px;
  background: var(--color-bg-alt);
  border-color: transparent;
}
.app-shell textarea.input-plain:focus,
.app-shell select.input-plain:focus,
.app-shell input.input-plain:focus {
  background: var(--color-surface);
  border-color: var(--color-primary);
}
.app-shell input.input-plain[readonly] { background: var(--color-bg-alt); }

/* Paginación numerada para listados largos (ver ui-pagination.js),
   como la de "Recent Transactions" en el kit de referencia. */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.pagination-pages { display: flex; gap: 6px; flex-wrap: wrap; }
.pagination-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--color-ink-soft);
  font-weight: 600;
  font-size: 0.86rem;
}
.pagination-btn:hover { background: var(--color-bg-alt); color: var(--color-primary); }
.pagination-btn.active { background: var(--color-primary); color: #fff; }
.pagination-nav {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.86rem;
}
.pagination-nav:hover { text-decoration: underline; }
.pagination-nav[disabled] { color: var(--color-border); cursor: not-allowed; }

/* Gráfico de barras simple (sin librería), reinterpretación del
   "Weekly Activity" del kit de referencia con datos reales de Reportes. */
.bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  height: 180px;
  padding-top: 8px;
}
.bar-chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 8px;
}
.bar-chart-bar {
  width: 100%;
  max-width: 28px;
  border-radius: 8px 8px 3px 3px;
  background: var(--color-bg-alt);
  min-height: 4px;
  position: relative;
  transition: height 0.35s ease;
}
.bar-chart-bar.has-value { background: var(--color-primary); }
.bar-chart-bar .bar-chart-value {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  font-size: 0.72rem; font-weight: 700; color: var(--color-ink-soft); white-space: nowrap;
}
.bar-chart-col .bar-chart-label { font-size: 0.72rem; color: var(--color-ink-soft); font-weight: 600; }
.bar-chart-col.is-busiest .bar-chart-bar.has-value { background: var(--admin-accent-teal, #0D9C93); }
.bar-chart-col.is-busiest .bar-chart-label { color: var(--color-ink); }

/* Donut de estado (confirmadas/pendientes/completadas/canceladas),
   reinterpretación del "Expense Statistics" del kit de referencia,
   dibujado con conic-gradient · sin librería de gráficos. */
.donut-chart-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.donut-chart {
  width: 140px; height: 140px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: conic-gradient(var(--color-bg-alt) 0 100%);
}
.donut-chart::after {
  content: attr(data-total);
  width: 92px; height: 92px; border-radius: 50%;
  background: var(--color-surface);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--color-ink);
}
.donut-legend { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 160px; }
.donut-legend-row { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
.donut-legend-row i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.donut-legend-row span:last-child { margin-left: auto; color: var(--color-ink-soft); font-weight: 600; }

/* Precio neto o bruto y duración (editor de servicio) */
.svc-pd-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: stretch; }
.svc-pd-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.svc-field-label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-ink-soft); }
.svc-tax-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; }
.svc-tax-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 1px solid transparent; border-radius: 9px; background: transparent; cursor: pointer; text-align: left; color: var(--color-ink-soft); }
.svc-tax-btn strong { font-size: 0.88rem; color: var(--color-ink); }
.svc-tax-btn small { font-size: 0.74rem; }
.svc-tax-btn.active { background: var(--color-bg); border-color: var(--svc-brand, var(--color-primary)); box-shadow: 0 0 0 1px var(--svc-brand, var(--color-primary)) inset; }
.svc-money { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--color-border); border-radius: 12px; background: var(--color-surface); padding: 0 14px; }
.svc-money:focus-within { border-color: var(--svc-brand, var(--color-primary)); }
.svc-money span { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--color-ink-soft); }
.svc-money input { flex: 1; border: 0; background: transparent; padding: 12px 0; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--color-ink); outline: none; min-width: 0; }
.svc-breakdown { margin: 0; display: flex; flex-direction: column; border-top: 1px dashed var(--color-border); padding-top: 10px; }
.svc-breakdown > div { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 0.84rem; color: var(--color-ink-soft); }
.svc-breakdown dd { margin: 0; font-weight: 600; color: var(--color-ink); }
.svc-breakdown .is-total { border-top: 1px solid var(--color-border); margin-top: 6px; padding-top: 10px; font-weight: 700; color: var(--color-ink); }
.svc-breakdown .is-total dd { font-size: 1rem; color: var(--svc-brand, var(--color-primary)); }
.svc-dur-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.svc-dur-presets button { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); font-size: 0.78rem; font-weight: 600; color: var(--color-ink-soft); cursor: pointer; }
.svc-dur-presets button.active { background: var(--svc-brand, var(--color-primary)); border-color: var(--svc-brand, var(--color-primary)); color: #fff; }
@media (max-width: 760px) { .svc-pd-grid { grid-template-columns: 1fr; } }

/* Precio en fichas: bruto (IVA incluido) o neto (+ IVA con total) */
.svc-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.svc-price-main { font-weight: 800; }
.svc-price-main small { font-size: 0.68em; font-weight: 600; color: var(--color-ink-soft); }
.svc-price-sub { font-size: 0.7rem; font-weight: 600; color: var(--color-ink-soft); }
.svc-row-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }

/* Editor de servicio: moneda, valor UF y duración (rediseño) */
.svc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.svc-uf-value { font-size: 0.74rem; font-weight: 600; color: var(--color-ink-soft); }
.svc-currency-toggle { margin-bottom: 0; }
.svc-money-unit { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; color: var(--color-ink-soft); }
.svc-dur-readout { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 12px; background: var(--color-surface); border: 1px solid var(--color-border); }
.svc-dur-readout strong { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; color: var(--color-ink); line-height: 1.1; }
.svc-dur-readout span { font-size: 0.8rem; color: var(--color-ink-soft); }
.svc-stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.svc-stepper button { padding: 9px 0; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-surface); font-weight: 700; font-size: 0.86rem; color: var(--color-ink); cursor: pointer; }
.svc-stepper button:hover { border-color: var(--svc-brand, var(--color-primary)); color: var(--svc-brand, var(--color-primary)); }
.svc-duration-field span { font-size: 0.72rem; font-weight: 700; color: var(--color-ink-soft); }

/* Paso 3 (foto) del editor de servicio: mismo diseño, a menor escala */
#svc-uploader .svc-upload-box { min-height: 104px; padding: 14px; gap: 4px; }
#svc-uploader .svc-upload-box svg { width: 22px; height: 22px; }
#svc-uploader .svc-upload-box strong { font-size: 0.86rem; }
#svc-uploader .svc-upload-box span { font-size: 0.74rem; }
.svc-upload-thumb { width: 130px; height: 88px; }
.svc-view-picker { margin-bottom: 12px; padding: 3px; border-radius: 10px; }
.svc-view-btn { padding: 6px 10px; font-size: 0.76rem; gap: 6px; border-radius: 7px; }
.svc-view-glyph-paisaje { width: 14px; height: 6px; }
.svc-view-glyph-original { width: 11px; height: 9px; }
.svc-view-glyph-cuadrado { width: 9px; height: 9px; }
.svc-photo-stage { padding: 12px; border-radius: 12px; }
.svc-photo-frame { max-width: 380px; border-radius: 10px; }
.svc-photo-move-hint { font-size: 0.66rem; padding: 3px 8px; bottom: 7px; }
.svc-photo-controls { gap: 10px; margin-top: 12px; }
.svc-zoom-control { font-size: 0.76rem; gap: 10px; }
.svc-zoom-control b { min-width: 40px; font-size: 0.78rem; }
.svc-photo-tools .btn-sm-upload { padding: 5px 10px; font-size: 0.76rem; }

/* Vista previa del editor: foto cuadrada a menor tamaño */

.svc-edit-aside .service-card-public.is-square .svc-square-media { width: 100%; }
.svc-edit-aside .service-card-public.is-square .svc-body { padding: 16px; }

/* Vista Original: ancho de la ficha y alto según la proporción de la imagen */
.svc-banner.is-original { height: auto !important; min-height: 0; display: block; background: var(--color-bg-alt); }
.svc-banner.is-original .svc-img { position: relative; inset: auto; width: 100%; height: auto; object-fit: contain; transform: none !important; }

/* Ancho de la ficha (vista previa del editor) */
.svc-width-control { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-border); font-size: 0.78rem; font-weight: 600; color: var(--color-ink-soft); }
.svc-width-control input[type="range"] { width: 100%; accent-color: var(--svc-brand, var(--color-primary)); }
.svc-width-control b { min-width: 40px; text-align: right; color: var(--color-ink); }