/* 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-arena: #CBCAA7;

  /* 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; }

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;
}

.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; }

/* =========================================================
   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; }
/* El logo del sidebar del panel cliente también pide más presencia. */
.app-sidebar .brand-lockup { height: 76px; }
/* 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);
}
.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;
}
.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; }

/* How it works */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 28px 22px;
}
.step::before {
  counter-increment: step;
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 16px;
}
.step h3 { font-size: 1rem; }
.step p { font-size: 0.9rem; margin: 0; }

/* 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-emoji { font-size: 2rem; margin-bottom: 12px; }
.audience-card h4 { font-size: 0.98rem; margin-bottom: 6px; }
.audience-card p { font-size: 0.85rem; margin: 0; }

/* Pricing */
.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; }
.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; }

/* 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);
}
.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 svg { flex: none; }

/* Bloqueo de módulos del negocio por falta de pago · se inyecta desde
   shell.js sobre TODO el panel cuando el superadmin marcó blocked:true. */
.account-locked-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(21, 19, 31, 0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.account-locked-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 40px;
  max-width: 440px;
  text-align: center;
  box-shadow: var(--shadow-md);
}
.account-locked-card .lock-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: #FEE2E2; color: #B91C1C;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.account-locked-card h2 { margin: 0 0 10px; font-size: 1.3rem; }
.account-locked-card p { color: var(--color-ink-soft); font-size: 0.92rem; margin: 0 0 8px; }
.account-locked-card .locked-amount { font-size: 1.4rem; font-weight: 800; font-family: var(--font-display); color: var(--color-ink); margin: 14px 0; }
.account-locked-card .btn { margin-top: 10px; }

/* =========================================================
   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; }
.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: 24px 18px;
  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: 28px; 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;
}
.app-topbar h1 { font-size: 1.6rem; margin-bottom: 2px; }
.app-topbar p { margin: 0; font-size: 0.92rem; }
.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;
}
.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; }

/* 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); }

/* 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; }

/* 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; }

/* 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 */
.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; }

.form-row-2 { display: grid; grid-template-columns: minmax(0, 1fr) 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; }

/* Superposición de auth-guard: solo aparece si la verificación de sesión
   tarda de verdad (ver auth-guard.js) · fondo claro y liviano, nada de
   pantallas negras tapando todo. */
#agenda-auth-guard-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.agenda-auth-spinner {
  width: 34px;
  height: 34px;
  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; }
.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; }
.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(3, 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;
}
.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; }

.week-overview { background: var(--color-bg-alt); border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 20px; }
.week-overview-label { font-size: 0.8rem; font-weight: 700; color: var(--color-ink-soft); margin-bottom: 14px; }
.week-overview-row { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 12px; margin-bottom: 8px; }
.week-overview-day { font-size: 0.76rem; font-weight: 700; color: var(--color-ink-soft); text-transform: uppercase; }
.week-overview-track { position: relative; height: 14px; background: var(--color-surface); border-radius: 999px; overflow: hidden; }
.week-overview-bar { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, var(--color-primary-light), var(--color-primary)); border-radius: 999px; }
.week-overview-row.is-closed .week-overview-track { background: repeating-linear-gradient(135deg, var(--color-surface), var(--color-surface) 6px, var(--color-border) 6px, var(--color-border) 7px); }
.week-overview-axis { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--color-ink-soft); margin-top: 6px; padding-left: 52px; }

.preset-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.preset-label { font-size: 0.82rem; color: var(--color-ink-soft); font-weight: 600; }
.preset-chip {
  padding: 8px 15px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primary-dark);
}
.preset-chip:hover { border-color: var(--color-primary); background: var(--color-bg-alt); }

.day-card {
  display: flex;
  align-items: center;
  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-name { width: 100px; font-weight: 700; font-size: 0.92rem; flex: none; }
.day-card-times { display: flex; align-items: center; gap: 10px; flex: 1; }
.day-card-times 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; }
.day-card-copy {
  width: 34px; height: 34px; border-radius: 9px; 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-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; }

/* Mini-preview del header con las mismas clases del sitio público, solo
   que a escala reducida · así el picker de diseño nunca se desincroniza
   del look real. */
.header-layout-preview {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-alt);
}
.header-layout-preview .public-header { position: static; background: var(--color-surface); }
.header-layout-preview .nav { padding: 14px 16px; }
.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: 14px; }
.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; }
/* La mini-preview no tiene botón de menú móvil · siempre muestra el menú
   en línea sin importar el ancho de la ventana del panel. */
.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-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; }

/* 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 */
.editor-split {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
}
.editor-preview {
  position: sticky;
  top: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px;
}
.preview-frame {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.preview-hero {
  padding: 32px 24px;
  color: #fff;
  text-align: center;
}
.preview-hero .p-logo { font-size: 2rem; margin-bottom: 10px; }
.preview-hero h4 { color: #fff; margin-bottom: 6px; font-size: 1.2rem; }
.preview-hero p { color: rgba(255,255,255,0.88); font-size: 0.85rem; margin: 0; }
.preview-body { padding: 18px; background: var(--color-bg); }
.preview-service-row {
  display: flex;
  justify-content: space-between;
  background: var(--color-surface);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.82rem;
  margin-bottom: 8px;
  border: 1px solid var(--color-border);
}
.preview-cta {
  display: block;
  text-align: center;
  padding: 12px;
  border-radius: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 0.86rem;
  margin-top: 6px;
}

/* =========================================================
   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": alineación del contenido, si el logo va en la misma
   línea del menú o arriba, y si los botones se agrupan con el menú o
   quedan siempre pegados a la derecha.
   ========================================================= */
.public-header .nav { flex-wrap: wrap; row-gap: 10px; }

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

.public-header[data-buttons="right"] .public-nav-right { margin-left: auto; }

.public-header[data-logo="stacked"] .nav { justify-content: center; }
.public-header[data-logo="stacked"] .public-brand {
  flex: 0 0 100%;
  justify-content: center;
  margin-bottom: 2px;
}
.public-header[data-logo="stacked"] .public-nav-right { margin-left: 0; }
.public-header[data-logo="stacked"][data-buttons="right"] .public-nav-right { margin-left: auto; }
.public-header[data-logo="stacked"][data-align="center"] .public-nav-right,
.public-header[data-logo="stacked"][data-align="center"] .public-nav-links { margin-left: 0; }

.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; }
.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; }
.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); }
.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: #fff;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.pulse-hero::after {
  content: "";
  position: absolute;
  width: 260px; height: 260px;
  right: -80px; top: -100px;
  background: rgba(255,255,255,0.08);
  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: rgba(255,255,255,0.16); color: #fff; }
.pulse-period-select {
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  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; }
.pulse-sub { color: rgba(255,255,255,0.85); 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; }
.pulse-mini-stats span { font-size: 0.78rem; color: rgba(255,255,255,0.8); }

.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: 1fr; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 460px; margin: 0 auto; }
  .features-grid, .steps, .audience-grid, .pricing-grid, .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-visual { display: none; }
  .auth-page { grid-template-columns: 1fr; }
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .menu-settings-panel { grid-template-columns: 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); }
  .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;
  }
  .settings-grid { grid-template-columns: 1fr; }
  .editor-split { grid-template-columns: 1fr; }
  .editor-preview { position: static; }
  .hours-row { grid-template-columns: 1fr; row-gap: 8px; }
  .about-grid { grid-template-columns: 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="stacked"]) .nav { flex-wrap: nowrap; gap: 6px; }
  .header-layout-preview .nav { flex-wrap: wrap !important; }
  .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, 1fr); }
  .week-board { grid-template-columns: repeat(7, minmax(140px, 1fr)); }
  .profile-layout { grid-template-columns: 1fr; margin-top: -40px; }
  .services-grid-public { grid-template-columns: repeat(2, 1fr); }
  .services-editor-layout { grid-template-columns: 1fr; }
  .services-preview-col { position: static; }
  .modal-box-wide { max-width: 460px; }
  .modal-form-split { grid-template-columns: 1fr; }
  .brand-logo-pair { grid-template-columns: 1fr; }
  .hours-layout { grid-template-columns: 1fr; }
  .day-card { flex-wrap: wrap; }
  .superadmin-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans-grid { grid-template-columns: 1fr; }
  .client-ficha-grid { grid-template-columns: minmax(0, 1fr); }
  .gateway-provider-grid { grid-template-columns: 1fr; }
  .brand-color-grid { grid-template-columns: 1fr; }
  .font-pair-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .site-header .nav { position: relative; flex-wrap: nowrap; }
  .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; }
  .features-grid, .steps, .audience-grid, .pricing-grid, .testimonial-grid, .footer-grid { grid-template-columns: 1fr; }
  .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: 1fr; }
  .checklist-items { grid-template-columns: 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: 1fr; }
  .branches-grid-public { grid-template-columns: 1fr; }
  .team-grid-public { grid-template-columns: repeat(2, 1fr); }
  .professional-select-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-card { grid-template-columns: 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: 1fr; }
  .services-select-grid-inline { grid-template-columns: 1fr; }
  .booking-step2-grid { grid-template-columns: 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; }
}

/* =========================================================
   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. */
}

/* ---- Menú lateral: logo, ítems y pie a ras del borde, con el
   acento del ítem activo pegado al borde izquierdo real del panel
   (no adentro del padding), tal como en el kit de referencia. ---- */
.app-shell .app-sidebar {
  padding: 26px 0 20px;
  gap: 2px;
}
.app-shell .app-sidebar .brand,
.app-shell .app-sidebar .sidebar-section-label,
.app-shell .app-sidebar .sidebar-footer {
  margin-left: 24px;
  margin-right: 20px;
}
.app-shell .sidebar-link {
  position: relative;
  margin: 0;
  padding: 12px 20px 12px 24px;
  border-radius: 0;
  color: #B1B1B1;
  transition: background 0.15s ease, color 0.15s ease;
}
/* Acento del ítem activo: una barrita corta con las puntas
   redondeadas (una "píldora" vertical), no un rectángulo a todo lo
   alto de la fila · así se ve en el kit de referencia. */
.app-shell .sidebar-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 0;
  border-radius: 999px;
  background: var(--color-primary);
  transform: translateY(-50%);
  transition: height 0.15s ease;
}
/* En hover, un ítem que NO es el activo solo se oscurece un poco (gris
   más oscuro) · el color de marca queda reservado para el ítem
   realmente seleccionado, para que el resto del menú se vea
   consistentemente gris/apagado. */
.app-shell .sidebar-link:hover { background: var(--color-bg-alt); color: var(--color-ink); }
.app-shell .sidebar-link.active {
  background: transparent;
  color: var(--color-primary);
  box-shadow: none;
  font-weight: 600;
}
.app-shell .sidebar-link.active::before { height: 22px; }
.app-shell .app-sidebar.sidebar-dark .sidebar-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.app-shell .app-sidebar.sidebar-dark .sidebar-link.active {
  background: transparent;
  color: #C7D2FE;
}
.app-shell .app-sidebar.sidebar-dark .sidebar-link.active::before { background: var(--color-primary-light); }

/* ---- 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;
}
.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 .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;
  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); }

/* 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 .account-locked-card,
.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(--admin-accent-teal); }
.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); }

/* 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; }