:root {
  /* Tema Dark (base/por defecto). El atributo data-theme en <html> lo cambia en vivo — ver js/theme.js.
     Los tres temas comparten exactamente el mismo set de tokens; solo cambian los valores,
     nunca la arquitectura. Por eso Dark/White/Grey se sienten "un mismo sistema". */

  /* Brand tokens -- capa 1 del sistema de marca ASTRC (docs/ASTRC-BRAND-SYSTEM.md).
     Única fuente de verdad del azul de marca: NINGÚN otro bloque de este
     archivo (temas, #dash-shell) debe volver a declarar su propio hex de
     acento -- todos deben referenciar estas variables via var(). El violeta
     #6d3df5 que todavía usa astrc.com.co se migra a estas mismas variables
     cuando ese sitio adopte esta capa de tokens (Fase 4 del rebrand). */
  --brand-primary: #4865ff;
  --brand-primary-hover: #6b84ff;  /* tinte claro -- hover/texto sobre fondos oscuros, 5.67:1 sobre #121217 */
  --brand-primary-active: #2f4eef; /* tinte oscuro -- hover/texto sobre fondos claros, 6.07:1 sobre blanco / 5.01:1 sobre #e9e9ec */

  --bg: #121217;
  --bg-dark: #080b0d;
  --text: #ffffff;
  --text-dark: #ffffff;
  /* #6c7a89 medía 4.25-4.49:1 sobre los fondos oscuros (por debajo del 4.5:1 de WCAG AA
     para texto normal); este tono un poco más claro pasa holgadamente sin notarse "gris pálido". */
  --muted: #8291a3;
  --muted-dark: #8291a3;
  /* Alias temporal: el sistema de marca pide un nivel --text-secondary
     distinto de --text-muted, pero hoy no hay una decisión de diseño que
     los diferencie -- se alias-ea a --muted en vez de inventar un gris
     nuevo sin necesidad. Revisar cuando haya jerarquía real de 3 niveles. */
  --text-secondary: var(--muted);
  --accent: var(--brand-primary);
  --accent-hover: var(--brand-primary-hover);
  --brand-primary-text: var(--brand-primary-hover); /* texto de acento sobre fondo oscuro */
  /* Colores de estado (Fase de gráficos del dashboard) -- idénticos en los 3
     temas, igual que --accent. Antes vivían repetidos como hex sueltos
     dentro de .dash-status-pill; ahora son la única fuente de verdad, así
     que un gráfico (donut/leyenda) puede reusar exactamente el mismo verde/
     ámbar/rojo que ya significan "confirmado/stock bajo/cancelado" en el
     resto del dashboard, sin inventar un tono nuevo. */
  --status-good: #2f9e5c;
  --status-warning: #c9821f;
  --status-critical: #d0453c;
  /* Alias -- arregla un fallback roto: .ds-positive usaba
     var(--status-success, #35c759) pero --status-success nunca existió,
     así que ese fallback hardcodeado se estaba usando siempre. */
  --status-success: var(--status-good);
  /* No existía un tono "informativo" propio -- reusa el mismo azul que ya
     usa el dashboard para notices informativos (--sky en #dash-shell), para
     no inventar un tercer azul de marca. */
  --info: #5ba4f5;
  --border: rgba(255, 255, 255, 0.12);
  --border-dark: rgba(255, 255, 255, 0.14);
  --border-subtle: color-mix(in srgb, var(--border) 50%, transparent);
  /* Traslúcidas (glassmorphism) con la misma alpha que --header-bg ya usaba
     en .nav (0.72) -- reusa un valor probado en vez de inventar uno nuevo. */
  --surface: rgba(26, 26, 34, 0.72);
  --surface-2: rgba(36, 36, 46, 0.72);
  --shadow: rgba(0, 0, 0, 0.4);
  --shadow-soft: rgba(0, 0, 0, 0.28);
  --header-bg: rgba(8, 11, 13, 0.72);
  --hero-bg-image: url("../assets/hero/astrc-hero-bg-dark.png");
  --hero-glow: rgba(72, 101, 255, 0.16);
  --radius: 18px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Glassmorphism: mismo blur que ya usaba .nav (14px) -- una sola fuente de
     verdad para que tarjetas/paneles/modales se sientan "un mismo material"
     en vez de un valor distinto por componente. */
  --glass-blur: 14px;
  /* Tipografía "Sistema Visual ASTRC" -- Plus Jakarta Sans como familia
     principal (cargada via Google Fonts en dashboard.html), JetBrains Mono
     SOLO para datos técnicos (códigos, SKU, identificadores, --font-mono).
     El stack de sistema queda como fallback si la fuente no cargó todavía. */
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Ritmo vertical entre secciones de contenido (Así de simple, Tiendas, CTA final).
     El Hero usa su propio valor (más grande, es la "gran entrada") y no este token. */
  --space-section-y: 96px;
  --space-section-y-mobile: 64px;

  /* Escala tipográfica / espaciado / radio del "Sistema visual ASTRC"
     (astrc-sistema-visual.html). Tokens NUEVOS, no reemplazan valores
     puntuales ya usados en el CSS existente (evita un refactor masivo
     fuera de alcance) -- están disponibles para componentes nuevos y para
     ir migrando gradualmente los existentes. Base 4px, igual que el
     documento de dirección de arte. */
  --fs-display: 40px;
  --fs-title: 28px;
  --fs-section: 20px;
  --fs-card: 16px;
  --fs-body: 15px;
  --fs-table: 13.5px;
  --fs-label: 11px;
  /* Tres niveles que faltaban en la escala original para completar la
     jerarquía de 13 pasos del Sistema Visual (subtítulo de sección,
     cuerpo secundario/ayuda, y metadatos/caption). El resto de la
     jerarquía reutiliza los 7 tokens de arriba -- no se duplican valores
     que ya existen (ej. metric-value reusa --fs-title, no crea --fs-metric). */
  --fs-subsection: 18px;
  --fs-body-small: 13px;
  --fs-caption: 12px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --r-input: 10px;
  --r-card: 16px;
  /* Escala de sombra -- reusa --shadow/--shadow-soft (ya correctos por tema)
     en vez de rgba fijos nuevos, así --sh-* automáticamente sigue siendo
     correcto en dark/light/grey sin redeclarar nada por tema. */
  --sh-sm: 0 1px 2px var(--shadow-soft), 0 6px 16px -12px var(--shadow);
  --sh-md: 0 2px 6px var(--shadow-soft), 0 22px 48px -28px var(--shadow);
  --r-panel: 20px;
  --r-modal: 22px;
}

[data-theme="light"] {
  --bg: #ffffff;
  --bg-dark: #ffffff;
  --text: #111111;
  --text-dark: #111111;
  --muted: #6e6e73;
  --muted-dark: #6e6e73;
  --accent: var(--brand-primary);
  --accent-hover: var(--brand-primary-active);
  --brand-primary-text: var(--brand-primary-active); /* texto de acento sobre fondo claro/gris */
  --border: #e5e5e7;
  --border-dark: #e5e5e7;
  --surface: rgba(247, 247, 248, 0.72);
  --surface-2: rgba(238, 238, 239, 0.72);
  --shadow: rgba(17, 17, 20, 0.10);
  --shadow-soft: rgba(17, 17, 20, 0.06);
  --header-bg: rgba(255, 255, 255, 0.72);
  --hero-bg-image: url("../assets/hero/astrc-hero-bg-white.png");
  --hero-glow: rgba(72, 101, 255, 0.10);
}

[data-theme="grey"] {
  --bg: #e9e9ec;
  --bg-dark: #e9e9ec;
  --text: #17171a;
  --text-dark: #17171a;
  --muted: #63636a;
  --muted-dark: #63636a;
  --accent: var(--brand-primary);
  --accent-hover: var(--brand-primary-active);
  --brand-primary-text: var(--brand-primary-active); /* texto de acento sobre fondo claro/gris */
  --border: #d3d3d9;
  --border-dark: #d3d3d9;
  --surface: rgba(245, 245, 247, 0.72);
  --surface-2: rgba(255, 255, 255, 0.72);
  --shadow: rgba(23, 23, 26, 0.12);
  --shadow-soft: rgba(23, 23, 26, 0.07);
  --header-bg: rgba(233, 233, 236, 0.72);
  --hero-bg-image: url("../assets/hero/astrc-hero-bg-grey.png");
  --hero-glow: rgba(72, 101, 255, 0.12);
}

/* Dentro de una tienda (tienda.html) la protagonista es la marca del cliente, no ASTRC.
   El tema (dark/light/grey) sigue controlando fondo/texto/superficies con normalidad;
   acá solo se fija un acento neutro por defecto. Si la tienda tiene colorPrimario,
   tienda-detalle.js sobreescribe --accent en línea sobre este mismo elemento y gana. */
body.tienda-experiencia {
  --accent: #52525c;
}

/* Menú público: una experiencia de restaurante, independiente del panel interno. */
body.menu-public-page {
  --menu-accent: var(--accent);
  min-height: 100vh;
  background: radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--menu-accent) 18%, transparent), transparent 38%), var(--bg);
}

.menu-public-loading,
.menu-public-empty { max-width: 640px; margin: 0 auto; padding: 96px 24px; text-align: center; color: var(--muted); }
.menu-public-empty h1, .menu-public-empty h2 { color: var(--text); letter-spacing: -0.03em; }
.menu-public-empty small { display: block; margin-top: 28px; }
.menu-public-mark { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 20px; border-radius: 18px; background: color-mix(in srgb, var(--menu-accent) 16%, var(--surface)); color: var(--menu-accent); font-size: 24px; }
.menu-public-hero { max-width: 980px; margin: 0 auto; padding: 56px 24px 30px; text-align: center; }
.menu-public-logo { display: grid; place-items: center; width: 86px; height: 86px; margin: 0 auto 18px; overflow: hidden; border: 1px solid var(--border); border-radius: 28px; background: var(--surface); box-shadow: 0 16px 34px var(--shadow-soft); color: var(--menu-accent); font-size: 30px; }
.menu-public-logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.menu-public-eyebrow { margin: 0 0 6px; color: var(--menu-accent); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.menu-public-hero h1 { max-width: 760px; margin: 0 auto; color: var(--text); font-size: clamp(34px, 6vw, 58px); letter-spacing: -0.055em; line-height: 1.05; }
.menu-public-intro { max-width: 490px; margin: 15px auto 0; color: var(--muted); }
.menu-public-nav { display: flex; gap: 8px; justify-content: center; margin-top: 28px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.menu-public-nav a { flex: 0 0 auto; border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; background: var(--surface); color: var(--text); font-size: 14px; font-weight: 700; text-decoration: none; transition: transform .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.menu-public-nav a:hover { border-color: var(--menu-accent); color: var(--menu-accent); transform: translateY(-2px); }
.menu-public-content { max-width: 980px; margin: 0 auto; padding: 10px 24px 52px; }
.menu-public-category { scroll-margin-top: 18px; margin-top: 48px; }
.menu-public-category-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.menu-public-category-head h2 { margin: 0; color: var(--text); font-size: clamp(26px, 4vw, 34px); letter-spacing: -0.04em; }
.menu-public-category-head .menu-public-eyebrow { margin-bottom: 4px; }
.menu-public-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.menu-public-item { display: grid; grid-template-columns: 118px 1fr; min-height: 142px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 0 10px 30px var(--shadow-soft); transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.menu-public-item:hover { transform: translateY(-3px); box-shadow: 0 16px 34px var(--shadow); }
.menu-public-item-image, .menu-public-item-placeholder { width: 100%; height: 100%; min-height: 142px; object-fit: cover; background: color-mix(in srgb, var(--menu-accent) 12%, var(--surface-2)); }
.menu-public-item-placeholder { display: grid; place-items: center; color: var(--menu-accent); font-size: 25px; }
.menu-public-item-body { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 16px; }
.menu-public-item h3 { margin: 0; color: var(--text); font-size: 17px; line-height: 1.2; }
.menu-public-item p, .menu-public-muted { margin: 7px 0 0; color: var(--muted); font-size: 14px; }
.menu-public-item strong { color: var(--menu-accent); font-size: 16px; }
.menu-public-add, .menu-public-order { border: 0; border-radius: 10px; padding: 9px 12px; background: var(--menu-accent); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.menu-public-add { align-self: flex-start; margin-top: -4px; font-size: 13px; }
.menu-public-cart { position: sticky; bottom: 12px; z-index: 5; max-width: 760px; margin: 0 auto 24px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); box-shadow: 0 18px 44px var(--shadow); backdrop-filter: blur(var(--glass-blur)); }
.menu-public-cart > p { margin: 0; color: var(--muted); text-align: center; }
.menu-public-cart-head, .menu-public-cart-total, .menu-public-cart-lines > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.menu-public-cart-head { margin-bottom: 10px; color: var(--text); }.menu-public-cart-head span { color: var(--muted); font-size: 13px; }
.menu-public-cart-lines { display: grid; gap: 7px; }.menu-public-cart-lines > div { color: var(--text); font-size: 14px; }.menu-public-cart-lines button { border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; }
.menu-public-cart-total { margin: 14px 0; padding-top: 12px; border-top: 1px solid var(--border); }.menu-public-cart-total strong { color: var(--menu-accent); }
.menu-public-cart form { display: grid; gap: 9px; }.menu-public-cart input, .menu-public-cart textarea { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: var(--bg); color: var(--text); font: inherit; }.menu-public-cart textarea { min-height: 58px; resize: vertical; }.menu-public-order { width: 100%; }.menu-public-order:disabled { cursor: wait; opacity: .7; }.menu-public-order-success { color: var(--text) !important; }
/* Tu mesa en el menú del QR (150): cuenta de la mesa y avisos al personal. */
.menu-public-mesa { max-width: 760px; margin: 0 auto 18px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); display: grid; gap: 10px; }
.menu-public-mesa[hidden] { display: none; }
.menu-public-mesa-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.menu-public-mesa-head .menu-public-eyebrow { margin: 0 0 2px; }
.menu-public-mesa-head strong { color: var(--text); font-size: 18px; }
.menu-public-mesa-total { color: var(--menu-accent) !important; }
.menu-public-mesa-detalle summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.menu-public-mesa-detalle ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.menu-public-mesa-detalle li { display: flex; justify-content: space-between; gap: 12px; color: var(--text); font-size: 14px; }
.menu-public-mesa-aviso { margin: 0; color: var(--text); font-size: 14px; }
.menu-public-mesa-aviso:empty { display: none; }
.menu-public-mesa-aviso.is-error { color: var(--danger, #e5484d); }
.fiscal-entrega-fallo { color: var(--danger, #e5484d); }
.menu-public-mesa-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.menu-public-secundario { border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; background: transparent; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.menu-public-mesa-acciones button:disabled { cursor: default; opacity: .6; }
.menu-public-error { display: none; margin: 0; font-size: 13px; font-weight: 600; color: var(--rose, #d0453c); }.menu-public-error.visible { display: block; }
.menu-public-footer { display: flex; justify-content: space-between; max-width: 980px; margin: 0 auto; padding: 24px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }
@media (max-width: 640px) {
  .menu-public-hero { padding-top: 38px; }
  .menu-public-grid { grid-template-columns: 1fr; }
  .menu-public-item { grid-template-columns: 96px 1fr; min-height: 122px; }
  .menu-public-item-image, .menu-public-item-placeholder { min-height: 122px; }
  .menu-public-category { margin-top: 34px; }
  .menu-public-footer { flex-direction: column; gap: 6px; text-align: center; }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}

a { color: inherit; }

img, svg { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.nav-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 20px;
  text-decoration: none;
}

/* Header de tienda.html: pertenece visualmente al cliente, no a ASTRC */

.tienda-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 17px;
}

.tienda-brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
}

.tienda-brand-logo img { width: 100%; height: 100%; object-fit: cover; }

.brand-logo-img {
  height: 26px;
  width: auto;
}

/* Los 3 PNG (astrc-logo-dark/white/grey) comparten el mismo lienzo (2172x724) pero
   el trazo del isotipo NO está dibujado con el mismo tamaño ni el mismo margen
   interno dentro de ese lienzo en los tres. Medido con análisis de píxeles sobre el
   render real (bounding box del contenido no transparente dentro del <img> ya
   escalado por CSS, no solo el tamaño del archivo):
     - dark:  alto de tinta 11.375px, arranque horizontal en x=188.125 (a height:26px)
     - white: alto de tinta 11.625px, arranque horizontal en x=187.000 (a height:26px)
     - grey:  a height:26px medía ~13-14px de alto (marca dibujada más grande dentro
       del lienzo) y arrancaba ~3px más a la izquierda que dark/white.
   Se corrige SOLO con CSS (altura de caja + margin-left), sin tocar los PNG:
   la altura de este logo se reduce a 23.86px (calibrado empíricamente contra el
   render real, no solo por proporción del archivo) hasta que el alto de tinta
   coincide con dark/white (11.5px, quedando entre ambos), y se corrige el
   corrimiento horizontal con un margin-left para que la "A" arranque en el mismo
   punto que en los otros dos temas. Ver verificación con Playwright en el historial:
   con esto los 3 temas quedan dentro de 0.25px de alto y arrancan en el mismo x. */
[data-theme="light"] .brand-logo-img {
  margin-left: 1.1px;
}

[data-theme="grey"] .brand-logo-img {
  height: 23.86px;
  margin-left: 3.1px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 14px;
}

.nav-links a {
  text-decoration: none;
  color: var(--text);
}

.nav-links a:hover { color: var(--accent); }

/* Subrayado animado — solo en los links de primer nivel (Inicio, Explorar,
   Contacto), no en los items del menú "Explorar" ni en las opciones de tema,
   que ya tienen su propio hover (fondo resaltado). */
.nav-links > a,
.nav-links > .nav-dropdown > .nav-dropdown-link {
  position: relative;
}

.nav-links > a::after,
.nav-links > .nav-dropdown > .nav-dropdown-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}

.nav-links > a:hover::after,
.nav-links > a:focus-visible::after,
.nav-links > .nav-dropdown > .nav-dropdown-link:hover::after,
.nav-links > .nav-dropdown > .nav-dropdown-link:focus-visible::after {
  transform: scaleX(1);
}

/* Nav dropdown (ver "Tiendas") */

.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  /* Área táctil ampliada a >=44px en ambos lados (antes medía 36x33 — el chevron
     es chico, 10x7). El margen negativo compensa el padding extra para no empujar
     el layout: vertical queda totalmente invisible (-19 cancela +19), horizontal
     conserva el mismo respiro visible que ya existía junto a "Explorar"/"Contacto"
     (footprint neto +13px, igual que antes: 18-5=13). */
  padding: 19px 18px;
  margin: -19px -5px;
  cursor: pointer;
  color: var(--muted);
  transition: color 0.2s var(--ease), transform 0.15s var(--ease);
}

.nav-dropdown-trigger:hover { color: var(--accent); }
.nav-dropdown-trigger:active { transform: scale(0.92); }

.nav-dropdown-trigger .chevron { transition: transform 0.2s ease; }

.nav-dropdown-trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute;
  /* Sin espacio muerto entre el trigger y el menú: si hay separación visual acá,
     mover el cursor de "Explorar" al menú cruza una zona sin hover y lo cierra antes
     de tiempo. El respiro visual lo da el padding interno, no un gap en "top". */
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 190px;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 16px 32px var(--shadow), 0 4px 24px var(--hero-glow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.3s ease, border-color 0.3s ease;
  z-index: 60;
}

.nav-dropdown-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-links .nav-dropdown-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  border-bottom: none;
}

.nav-links .nav-dropdown-menu a:hover,
.nav-links .nav-dropdown-menu a:focus-visible {
  background: var(--surface-2);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--accent);
}

/* Selector de tema — mismo componente .nav-dropdown, anclado a la derecha para no
   salirse de la pantalla en mobile (el de "Explorar" queda centrado, este no). */

.theme-dropdown .nav-dropdown-menu {
  left: auto;
  right: 0;
  transform: translateY(-6px);
  min-width: 150px;
}

.theme-dropdown .nav-dropdown-menu.open { transform: translateY(0); }

/* Cuenta (Fase 5A) — mismo componente .nav-dropdown, mismo anclaje a la
   derecha que el selector de tema, para no salirse de la pantalla. */
.account-dropdown .nav-dropdown-menu {
  left: auto;
  right: 0;
  transform: translateY(-6px);
  min-width: 170px;
}

.account-dropdown .nav-dropdown-menu.open { transform: translateY(0); }

/* "+" de creación rápida global (Fase 3) -- mismo componente .nav-dropdown,
   mismo anclaje a la derecha que Tema/Cuenta. El wrapper entero queda
   `hidden` si el rol activo no tiene ningún permiso de escritura de los
   listados (pintarQuickCreate() en dashboard.js decide eso). */
.quick-create-dropdown .nav-dropdown-menu {
  left: auto;
  right: 0;
  transform: translateY(-6px);
  min-width: 190px;
}

.quick-create-dropdown .nav-dropdown-menu.open { transform: translateY(0); }

.quick-create-dropdown .nav-dropdown-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: var(--fs-body-small);
  color: var(--text);
  text-decoration: none;
}

.quick-create-dropdown .nav-dropdown-menu a:hover,
.quick-create-dropdown .nav-dropdown-menu a:focus-visible {
  background: var(--surface-2);
  color: var(--accent);
}

/* Botón flotante de ayuda del dashboard -- mismo componente .nav-dropdown,
   pero fijo a la ventana (no al topbar) y el menú se abre hacia ARRIBA
   porque vive pegado al borde inferior. */
.dash-help-fab {
  position: fixed;
  right: 20px;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 70;
}

.dash-help-fab .help-trigger {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  box-shadow: var(--shadow-soft, 0 8px 24px var(--shadow));
  padding: 0;
  margin: 0;
}

.dash-help-fab .help-trigger:hover,
.dash-help-fab .help-trigger[aria-expanded="true"] { color: var(--accent); border-color: var(--jade-dim); }

.dash-help-fab .nav-dropdown-menu {
  top: auto;
  left: auto;
  right: 0;
  bottom: 100%;
  margin-bottom: 10px;
  transform: translateY(6px);
  min-width: 220px;
}

.dash-help-fab .nav-dropdown-menu.open { transform: translateY(0); }

.dash-help-fab .nav-dropdown-menu button { width: 100%; margin: 0; text-align: left; background: none; border: 0; cursor: pointer; font-weight: 600; }
.dash-help-fab .nav-dropdown-menu a,
.dash-help-fab .nav-dropdown-menu button {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: var(--fs-body-small);
  color: var(--text);
  text-decoration: none;
}

.dash-help-fab .nav-dropdown-menu a:hover,
.dash-help-fab .nav-dropdown-menu a:focus-visible,
.dash-help-fab .nav-dropdown-menu button:hover,
.dash-help-fab .nav-dropdown-menu button:focus-visible {
  background: var(--surface-2);
  color: var(--accent);
}

@media (max-width: 640px) {
  .dash-help-fab { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); }
  /* Que el final de cada vista pueda subir por encima del botón de ayuda. */
  .dash-main { padding-bottom: 88px; }
  .dash-help-fab .help-trigger { width: 42px; height: 42px; }
}

.theme-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: var(--font);
  font-size: var(--fs-body-small);
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.2s ease;
}

.theme-option:hover,
.theme-option:focus-visible {
  background: var(--surface-2);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--accent);
}

.theme-option.active { color: var(--accent-hover); font-weight: 600; }

.theme-option.active::after {
  content: "✓";
  font-size: 12px;
}

/* Mismo componente .theme-option reutilizado dentro de una tarjeta de
   Configuración (dashboard-configuracion.js) -- ahí no vive dentro de
   .nav-dropdown-menu (que le da el fondo/sombra flotante), así que se le
   agrega un borde propio para que se lea como opción clickeable suelta. */
.dash-settings-theme-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dash-settings-theme-options .theme-option {
  border: 1px solid var(--border);
}

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

.nav-search-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  /* 43x43 medía antes (1px corto del mínimo táctil de 44px). El margen no
     compensa el padding entero a propósito: conserva el mismo respiro visible
     que ya tenía junto a los demás íconos del header (footprint neto +4px). */
  padding: 13px;
  margin: -9px;
  color: var(--text);
  cursor: pointer;
  transition: color 0.2s var(--ease), transform 0.15s var(--ease);
}

.nav-search-trigger:hover { color: var(--accent); }
.nav-search-trigger:active { transform: scale(0.92); }

.cart-link {
  position: relative;
  display: flex;
  align-items: center;
  padding: 12px;
  margin: -12px;
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s var(--ease), transform 0.15s var(--ease);
}

.cart-link:hover { color: var(--accent); }
.cart-link:active { transform: scale(0.92); }

.cart-count {
  position: absolute;
  /* +12px respecto a los valores originales: compensa el padding que ahora tiene
     .cart-link (área táctil ampliada) para que el badge siga pegado al ícono. */
  top: 4px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* Feedback al agregar un producto: un pequeño "salto" en el badge del carrito
   cuando el total sube (ver actualizarContadorCarrito en js/carrito.js). No se
   dispara en la carga inicial de la página ni al restar/eliminar productos. */
@keyframes cart-count-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

.cart-count.bump { animation: cart-count-bump 0.45s var(--ease); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  /* Medía 46x40 (el icono de 3 barras es más ancho que alto, así que el lado
     corto -alto- quedaba bajo el mínimo táctil de 44px). Padding vertical más
     grande, compensado del todo por el margen: cero impacto de layout. */
  padding: 15px 12px;
  margin: -15px -12px;
}

.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--text);
  display: block;
}

/* Hero */

.hero {
  position: relative;
  z-index: 0;
  overflow: hidden;
  min-height: 86vh;
  background-color: var(--bg-dark);
  background-image: var(--hero-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  padding: 120px 24px;
  transition: background-color 0.3s ease;
}

/* La imagen del hero se funde con la sección siguiente (sin corte seco). */
.hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: clamp(120px, 18vh, 220px);
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg));
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 56px;
}

.hero-copy { text-align: left; }

/* Entrada escalonada del hero (ver js/hero.js, usa la librería "motion"). Estado
   inicial en CSS puro para que no haya parpadeo mientras carga el módulo JS. */
.hero-animate { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .hero-animate { opacity: 1 !important; }
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-dark);
  margin: 0 0 20px;
}

.hero h1 {
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 24px;
}

.accent-text { color: var(--accent); }

.hero-sub {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--muted-dark);
  max-width: 440px;
  margin: 0 0 36px;
  line-height: 1.5;
}

.hero-ctas {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.cta {
  display: inline-block;
  background: var(--accent);
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 32px;
  border-radius: 999px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
}

.cta:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  /* color-mix, no un rgba fijo: si una tienda define colorPrimario (--accent
     pasa a ser, por ej., naranja), este brillo debe seguir a ese color en vez de
     quedarse azul ASTRC — antes rompía la identidad de la tienda justo al hacer
     hover sobre su botón principal. */
  box-shadow: 0 12px 24px color-mix(in srgb, var(--accent) 35%, transparent);
}

.cta:active { transform: translateY(0); }

.cta-light {
  /* Invertido respecto a bg-dark/text-dark: así siempre contrasta, sea cual sea el tema
     (blanco-sobre-negro en Dark, negro-sobre-blanco en White/Grey), sin quedar invisible. */
  background: var(--text-dark);
  color: var(--bg-dark);
}

.cta-light:hover {
  box-shadow: 0 12px 24px var(--shadow-soft);
}

.cta-arrow {
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.2s ease;
}

.cta:hover .cta-arrow { transform: translateX(3px); }

.cta-text {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-dark);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}

.cta-text:hover { color: var(--accent); }

.cta-text .play-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--text-dark) 35%, transparent);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.cta-text:hover .play-icon {
  border-color: var(--accent);
  transform: scale(1.05);
}

/* Hero — cápsula ASTRC (astrc-personaje-capsula.png, recortada con clip-path a su
   silueta real; ver detalle en la regla .hero-capsule-img más abajo) */

.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}

.hero-capsule {
  position: relative;
  width: min(100%, 460px);
  transition: transform 0.3s ease;
}

/* Resplandor ambiental detrás de la cápsula, sin tocar el asset: un radial-gradient
   difuminado que le da profundidad al personaje contra el fondo del Hero. Usa
   --hero-glow, el mismo token ya calibrado por tema (más sutil en White/Grey, algo
   más presente en Dark) que hasta ahora solo se usaba en la sombra del dropdown. */
.hero-capsule::before {
  content: '';
  position: absolute;
  inset: -18%;
  background: radial-gradient(circle, var(--hero-glow) 0%, transparent 68%);
  filter: blur(18px);
  pointer-events: none;
}

.hero-capsule-img {
  width: 100%;
  height: auto;
  display: block;
  /* El PNG trae su propio fondo negro "quemado". Una máscara elíptica genérica
     recortaba contenido real (luces inferiores izquierdas, borde del aro). Este
     clip-path sigue el contorno REAL del personaje/cápsula: se generó analizando
     los píxeles del propio asset (contorno por fila + 28px de margen de seguridad
     hacia afuera), así que no hay ningún punto del recorte que caiga sobre
     contenido visible — solo sobre el fondo negro que lo rodea. Si se reemplaza
     astrc-personaje-capsula.png por otro asset con una silueta distinta, este
     clip-path debe regenerarse (ver notas de la Fase 1 en el historial del proyecto).
  */
  clip-path: polygon(52.17% 0.00%, 51.04% 0.78%, 49.54% 1.56%, 48.20% 2.34%, 47.06% 3.13%, 46.09% 3.91%, 45.29% 4.69%, 44.64% 5.47%, 44.18% 6.25%, 43.75% 7.03%, 43.34% 7.81%, 42.94% 8.59%, 42.55% 9.38%, 42.29% 10.16%, 42.09% 10.94%, 41.90% 11.72%, 41.51% 12.50%, 41.17% 13.28%, 40.95% 14.06%, 40.87% 14.84%, 40.79% 15.63%, 40.56% 16.41%, 40.19% 17.19%, 39.84% 17.97%, 39.58% 18.75%, 39.40% 19.53%, 39.28% 20.31%, 39.18% 21.09%, 39.14% 21.88%, 39.14% 22.66%, 39.14% 23.44%, 39.16% 24.22%, 39.24% 25.00%, 39.35% 25.78%, 39.55% 26.56%, 39.71% 27.34%, 40.00% 28.13%, 40.47% 28.91%, 41.19% 29.69%, 41.20% 30.47%, 40.25% 31.25%, 35.01% 32.03%, 29.95% 32.81%, 25.19% 33.59%, 22.90% 34.38%, 22.90% 35.16%, 22.90% 35.94%, 22.98% 36.72%, 23.13% 37.50%, 23.29% 38.28%, 23.42% 39.06%, 23.56% 39.84%, 23.72% 40.63%, 23.87% 41.41%, 24.03% 42.19%, 24.16% 42.97%, 24.31% 43.75%, 24.46% 44.53%, 24.62% 45.31%, 24.77% 46.09%, 24.66% 46.88%, 24.20% 47.66%, 23.53% 48.44%, 22.85% 49.22%, 22.14% 50.00%, 21.48% 50.78%, 20.82% 51.56%, 20.20% 52.34%, 19.66% 53.13%, 19.09% 53.91%, 18.53% 54.69%, 17.97% 55.47%, 17.36% 56.25%, 16.79% 57.03%, 16.29% 57.81%, 15.80% 58.59%, 15.37% 59.38%, 14.93% 60.16%, 14.43% 60.94%, 14.03% 61.72%, 13.59% 62.50%, 13.24% 63.28%, 12.87% 64.06%, 12.53% 64.84%, 12.19% 65.63%, 11.90% 66.41%, 11.56% 67.19%, 11.28% 67.97%, 11.02% 68.75%, 10.84% 69.53%, 10.74% 70.31%, 10.63% 71.09%, 10.50% 71.88%, 10.39% 72.66%, 10.29% 73.44%, 10.19% 74.22%, 10.17% 75.00%, 10.11% 75.78%, 10.08% 76.56%, 10.06% 77.34%, 10.06% 78.13%, 10.06% 78.91%, 10.10% 79.69%, 10.17% 80.47%, 10.26% 81.25%, 10.37% 82.03%, 10.51% 82.81%, 10.66% 83.59%, 10.87% 84.38%, 11.10% 85.16%, 11.38% 85.94%, 11.69% 86.72%, 12.02% 87.50%, 12.36% 88.28%, 12.81% 89.06%, 13.29% 89.84%, 13.85% 90.63%, 14.43% 91.41%, 15.13% 92.19%, 15.93% 92.97%, 16.83% 93.75%, 17.79% 94.53%, 18.93% 95.31%, 20.12% 96.09%, 21.60% 96.88%, 23.27% 97.66%, 25.54% 98.44%, 28.42% 99.22%, 29.13% 99.61%, 51.91% 99.61%, 52.63% 99.22%, 55.75% 98.44%, 58.60% 97.66%, 60.75% 96.88%, 62.83% 96.09%, 64.36% 95.31%, 66.09% 94.53%, 67.86% 93.75%, 69.40% 92.97%, 70.66% 92.19%, 71.72% 91.41%, 72.71% 90.63%, 73.82% 89.84%, 74.83% 89.06%, 75.83% 88.28%, 76.72% 87.50%, 77.63% 86.72%, 78.47% 85.94%, 79.30% 85.16%, 80.03% 84.38%, 80.78% 83.59%, 81.52% 82.81%, 82.21% 82.03%, 82.85% 81.25%, 83.44% 80.47%, 83.98% 79.69%, 84.52% 78.91%, 85.02% 78.13%, 85.51% 77.34%, 86.02% 76.56%, 86.51% 75.78%, 86.93% 75.00%, 87.39% 74.22%, 87.74% 73.44%, 88.14% 72.66%, 88.50% 71.88%, 88.84% 71.09%, 89.18% 70.31%, 89.59% 69.53%, 89.95% 68.75%, 90.30% 67.97%, 90.62% 67.19%, 90.96% 66.41%, 91.29% 65.63%, 91.60% 64.84%, 91.87% 64.06%, 92.09% 63.28%, 92.24% 62.50%, 92.35% 61.72%, 92.43% 60.94%, 92.49% 60.16%, 92.53% 59.38%, 92.56% 58.59%, 92.57% 57.81%, 92.57% 57.03%, 92.57% 56.25%, 92.55% 55.47%, 92.52% 54.69%, 92.49% 53.91%, 92.46% 53.13%, 92.44% 52.34%, 92.39% 51.56%, 92.32% 50.78%, 92.23% 50.00%, 92.14% 49.22%, 92.07% 48.44%, 91.97% 47.66%, 91.86% 46.88%, 91.71% 46.09%, 91.56% 45.31%, 91.42% 44.53%, 91.27% 43.75%, 91.12% 42.97%, 90.93% 42.19%, 90.72% 41.41%, 90.49% 40.63%, 90.29% 39.84%, 90.07% 39.06%, 89.79% 38.28%, 89.52% 37.50%, 89.22% 36.72%, 88.90% 35.94%, 88.60% 35.16%, 88.24% 34.38%, 87.87% 33.59%, 87.50% 32.81%, 87.07% 32.03%, 86.62% 31.25%, 86.10% 30.47%, 85.56% 29.69%, 85.02% 28.91%, 84.42% 28.13%, 83.78% 27.34%, 82.99% 26.56%, 82.13% 25.78%, 81.30% 25.00%, 80.08% 24.22%, 78.52% 23.44%, 76.29% 22.66%, 74.15% 21.88%, 72.54% 21.09%, 71.77% 20.31%, 71.69% 19.53%, 71.69% 18.75%, 71.67% 17.97%, 71.61% 17.19%, 71.61% 16.41%, 71.68% 15.63%, 71.70% 14.84%, 71.70% 14.06%, 71.67% 13.28%, 71.54% 12.50%, 71.40% 11.72%, 71.21% 10.94%, 71.02% 10.16%, 70.81% 9.38%, 70.60% 8.59%, 70.33% 7.81%, 70.01% 7.03%, 69.62% 6.25%, 69.18% 5.47%, 68.72% 4.69%, 68.16% 3.91%, 67.52% 3.13%, 66.75% 2.34%, 65.83% 1.56%, 64.70% 0.78%, 63.89% 0.00%);
  -webkit-clip-path: polygon(52.17% 0.00%, 51.04% 0.78%, 49.54% 1.56%, 48.20% 2.34%, 47.06% 3.13%, 46.09% 3.91%, 45.29% 4.69%, 44.64% 5.47%, 44.18% 6.25%, 43.75% 7.03%, 43.34% 7.81%, 42.94% 8.59%, 42.55% 9.38%, 42.29% 10.16%, 42.09% 10.94%, 41.90% 11.72%, 41.51% 12.50%, 41.17% 13.28%, 40.95% 14.06%, 40.87% 14.84%, 40.79% 15.63%, 40.56% 16.41%, 40.19% 17.19%, 39.84% 17.97%, 39.58% 18.75%, 39.40% 19.53%, 39.28% 20.31%, 39.18% 21.09%, 39.14% 21.88%, 39.14% 22.66%, 39.14% 23.44%, 39.16% 24.22%, 39.24% 25.00%, 39.35% 25.78%, 39.55% 26.56%, 39.71% 27.34%, 40.00% 28.13%, 40.47% 28.91%, 41.19% 29.69%, 41.20% 30.47%, 40.25% 31.25%, 35.01% 32.03%, 29.95% 32.81%, 25.19% 33.59%, 22.90% 34.38%, 22.90% 35.16%, 22.90% 35.94%, 22.98% 36.72%, 23.13% 37.50%, 23.29% 38.28%, 23.42% 39.06%, 23.56% 39.84%, 23.72% 40.63%, 23.87% 41.41%, 24.03% 42.19%, 24.16% 42.97%, 24.31% 43.75%, 24.46% 44.53%, 24.62% 45.31%, 24.77% 46.09%, 24.66% 46.88%, 24.20% 47.66%, 23.53% 48.44%, 22.85% 49.22%, 22.14% 50.00%, 21.48% 50.78%, 20.82% 51.56%, 20.20% 52.34%, 19.66% 53.13%, 19.09% 53.91%, 18.53% 54.69%, 17.97% 55.47%, 17.36% 56.25%, 16.79% 57.03%, 16.29% 57.81%, 15.80% 58.59%, 15.37% 59.38%, 14.93% 60.16%, 14.43% 60.94%, 14.03% 61.72%, 13.59% 62.50%, 13.24% 63.28%, 12.87% 64.06%, 12.53% 64.84%, 12.19% 65.63%, 11.90% 66.41%, 11.56% 67.19%, 11.28% 67.97%, 11.02% 68.75%, 10.84% 69.53%, 10.74% 70.31%, 10.63% 71.09%, 10.50% 71.88%, 10.39% 72.66%, 10.29% 73.44%, 10.19% 74.22%, 10.17% 75.00%, 10.11% 75.78%, 10.08% 76.56%, 10.06% 77.34%, 10.06% 78.13%, 10.06% 78.91%, 10.10% 79.69%, 10.17% 80.47%, 10.26% 81.25%, 10.37% 82.03%, 10.51% 82.81%, 10.66% 83.59%, 10.87% 84.38%, 11.10% 85.16%, 11.38% 85.94%, 11.69% 86.72%, 12.02% 87.50%, 12.36% 88.28%, 12.81% 89.06%, 13.29% 89.84%, 13.85% 90.63%, 14.43% 91.41%, 15.13% 92.19%, 15.93% 92.97%, 16.83% 93.75%, 17.79% 94.53%, 18.93% 95.31%, 20.12% 96.09%, 21.60% 96.88%, 23.27% 97.66%, 25.54% 98.44%, 28.42% 99.22%, 29.13% 99.61%, 51.91% 99.61%, 52.63% 99.22%, 55.75% 98.44%, 58.60% 97.66%, 60.75% 96.88%, 62.83% 96.09%, 64.36% 95.31%, 66.09% 94.53%, 67.86% 93.75%, 69.40% 92.97%, 70.66% 92.19%, 71.72% 91.41%, 72.71% 90.63%, 73.82% 89.84%, 74.83% 89.06%, 75.83% 88.28%, 76.72% 87.50%, 77.63% 86.72%, 78.47% 85.94%, 79.30% 85.16%, 80.03% 84.38%, 80.78% 83.59%, 81.52% 82.81%, 82.21% 82.03%, 82.85% 81.25%, 83.44% 80.47%, 83.98% 79.69%, 84.52% 78.91%, 85.02% 78.13%, 85.51% 77.34%, 86.02% 76.56%, 86.51% 75.78%, 86.93% 75.00%, 87.39% 74.22%, 87.74% 73.44%, 88.14% 72.66%, 88.50% 71.88%, 88.84% 71.09%, 89.18% 70.31%, 89.59% 69.53%, 89.95% 68.75%, 90.30% 67.97%, 90.62% 67.19%, 90.96% 66.41%, 91.29% 65.63%, 91.60% 64.84%, 91.87% 64.06%, 92.09% 63.28%, 92.24% 62.50%, 92.35% 61.72%, 92.43% 60.94%, 92.49% 60.16%, 92.53% 59.38%, 92.56% 58.59%, 92.57% 57.81%, 92.57% 57.03%, 92.57% 56.25%, 92.55% 55.47%, 92.52% 54.69%, 92.49% 53.91%, 92.46% 53.13%, 92.44% 52.34%, 92.39% 51.56%, 92.32% 50.78%, 92.23% 50.00%, 92.14% 49.22%, 92.07% 48.44%, 91.97% 47.66%, 91.86% 46.88%, 91.71% 46.09%, 91.56% 45.31%, 91.42% 44.53%, 91.27% 43.75%, 91.12% 42.97%, 90.93% 42.19%, 90.72% 41.41%, 90.49% 40.63%, 90.29% 39.84%, 90.07% 39.06%, 89.79% 38.28%, 89.52% 37.50%, 89.22% 36.72%, 88.90% 35.94%, 88.60% 35.16%, 88.24% 34.38%, 87.87% 33.59%, 87.50% 32.81%, 87.07% 32.03%, 86.62% 31.25%, 86.10% 30.47%, 85.56% 29.69%, 85.02% 28.91%, 84.42% 28.13%, 83.78% 27.34%, 82.99% 26.56%, 82.13% 25.78%, 81.30% 25.00%, 80.08% 24.22%, 78.52% 23.44%, 76.29% 22.66%, 74.15% 21.88%, 72.54% 21.09%, 71.77% 20.31%, 71.69% 19.53%, 71.69% 18.75%, 71.67% 17.97%, 71.61% 17.19%, 71.61% 16.41%, 71.68% 15.63%, 71.70% 14.84%, 71.70% 14.06%, 71.67% 13.28%, 71.54% 12.50%, 71.40% 11.72%, 71.21% 10.94%, 71.02% 10.16%, 70.81% 9.38%, 70.60% 8.59%, 70.33% 7.81%, 70.01% 7.03%, 69.62% 6.25%, 69.18% 5.47%, 68.72% 4.69%, 68.16% 3.91%, 67.52% 3.13%, 66.75% 2.34%, 65.83% 1.56%, 64.70% 0.78%, 63.89% 0.00%);
}

.hero-orbit-icons {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.orbit-icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  color: var(--text-dark);
  box-shadow: 0 8px 20px var(--shadow);
  animation: flotar 4.5s ease-in-out infinite;
}

.orbit-icon-1 { top: 6%; left: 2%; animation-delay: 0s; }
.orbit-icon-2 { top: 0%; right: 8%; animation-delay: 1.1s; }
.orbit-icon-3 { bottom: 12%; right: -2%; animation-delay: 2.2s; }

@keyframes flotar {
  /* 6px, no 10px: estos íconos son decorativos, alrededor del personaje. Con 10px
     se movían MÁS que la propia cápsula (8px, ver js/hero.js), invirtiendo la
     jerarquía visual — lo secundario no debería moverse más que el protagonista. */
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (max-width: 880px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-ctas { justify-content: center; }
  .hero-visual { margin-top: 48px; min-height: 260px; }
  .hero-capsule { width: min(100%, 300px); }
}

/* Cómo funciona */

.how-it-works {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-section-y) 24px;
}

.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}

.how-step {
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.how-number {
  display: block;
  font-size: 13px;
  font-weight: 700;
  /* --accent-hover, no --accent: a este tamaño --accent mide 3.8-4.3:1 contra
     --surface en los 3 temas (por debajo del 4.5:1 de WCAG AA para texto normal).
     --accent-hover es el mismo azul de marca, ajustado para pasar holgadamente
     (5.2-5.7:1) sin verse como un color distinto. */
  color: var(--accent-hover);
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.how-step h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 8px;
}

.how-step p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

/* Stores */

.stores {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-section-y) 24px;
}

.section-head {
  text-align: center;
  margin-bottom: 56px;
}

/* business.html #precios -- mismos tokens que .how-step. */
.pricing { max-width: 1180px; margin: 0 auto; padding: var(--space-section-y) 24px; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; align-items: stretch; }
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
}
.pricing-card.is-destacado { border-color: var(--brand-primary); box-shadow: 0 18px 50px color-mix(in srgb, var(--brand-primary) 22%, transparent); }
.pricing-badge { position: absolute; top: -12px; left: 24px; margin: 0; padding: 4px 12px; border-radius: 999px; background: var(--brand-primary); color: #fff; font-size: 12px; font-weight: 700; }
.pricing-card h3 { margin: 0 0 8px; font-size: 20px; }
.pricing-for { margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.5; min-height: 42px; }
.pricing-price { margin: 0 0 18px; color: var(--muted); font-size: 14px; }
.pricing-price span { color: var(--text); font-size: 32px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pricing-list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; flex: 1; }
.pricing-list li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.45; }
.pricing-list li::before { content: '✓'; position: absolute; left: 0; color: var(--brand-primary); font-weight: 800; }
.pricing-cta { display: block; text-align: center; text-decoration: none; width: 100%; box-sizing: border-box; }
.pricing-modulos { margin-top: 32px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.pricing-modulos h3 { margin: 0 0 4px; font-size: 18px; }
.pricing-modulos > p { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.pricing-modulos ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 32px; }
.pricing-modulos li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--muted); }
.pricing-modulos li strong { color: var(--text); }
.pricing-modulos li .pricing-monto { color: var(--text); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pricing-nota { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.pricing-nota a { color: var(--brand-primary); }

.section-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 10px;
}

.section-head p {
  color: var(--muted);
  margin: 0;
}

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

.store-search {
  flex: 1 1 240px;
  max-width: 320px;
  padding: 12px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font);
  /* 16px, no 14px: evita el zoom automático de Safari en iOS al enfocar el campo. */
  font-size: 16px;
  background: var(--bg);
  color: var(--text);
  transition: background-color 0.3s ease, border-color 0.2s var(--ease), color 0.3s ease;
}

.store-search:focus {
  outline: none;
  border-color: var(--accent);
}

.store-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: 999px;
  padding: 10px 16px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.15s var(--ease);
}

.filter-btn:hover { color: var(--text); }

.filter-btn:active { transform: scale(0.96); }

.filter-btn.active {
  border-color: var(--accent);
  color: var(--accent-hover);
}

.store-empty {
  text-align: center;
  color: var(--muted);
  padding: 40px 0;
}

/* terminos.html / privacidad.html -- ver js/legal-page.js. */
.legal-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 24px var(--space-section-y);
}

.legal-page h1 { margin-bottom: 24px; }

.legal-cuerpo p {
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 16px;
}

.legal-cuerpo h2 { font-size: 18px; margin: 32px 0 10px; color: var(--text); }
.legal-cuerpo ul { margin: 0 0 16px; padding-left: 20px; color: var(--muted); line-height: 1.7; }
.legal-cuerpo li { margin-bottom: 6px; }
.legal-cuerpo strong { color: var(--text); }
.legal-cuerpo a { color: var(--brand-primary); }
.legal-meta { color: var(--muted); font-size: 13px; margin: -12px 0 28px; }
.legal-indice { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 28px; font-size: 14px; }

.placeholder-initial {
  font-size: 32px;
  font-weight: 800;
  color: var(--muted);
}

.store-visual img,
.product-visual img,
.store-logo img,
.product-detail-visual img,
.product-thumb img,
.cart-row-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Microinteracción de imagen: un acercamiento MUY leve al pasar el mouse sobre la
   card completa (no sobre la imagen sola, para que se sienta como parte del mismo
   gesto que la elevación de la card). Contenido dentro de .store-visual/.product-visual
   gracias al overflow:hidden que se les agregó, así nunca se sale del borde redondeado. */
.store-card:hover .store-visual img,
.product-card:hover .product-visual img {
  transform: scale(1.06);
}

.store-visual img,
.product-visual img {
  transition: transform 0.5s var(--ease);
}

.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 260px));
  justify-content: center;
  gap: 28px;
}

.store-card {
  display: block;
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 1px 2px var(--shadow-soft);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background-color 0.3s ease;
}

.store-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 20px 40px var(--shadow-soft);
}

.store-card:active { transform: translateY(-6px) scale(0.98); }

.store-card-cta {
  display: block;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-hover);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.store-card:hover .store-card-cta,
.store-card:focus-visible .store-card-cta {
  opacity: 1;
  transform: translateY(0);
}

.store-visual {
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: calc(var(--radius) - 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  margin-bottom: 18px;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

.store-visual svg { width: 40%; height: 40%; }

.store-card h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 8px;
}

.tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
}

/* Store page */

.store-header {
  max-width: 1120px;
  margin: 0 auto;
  padding: 72px 24px 32px;
}

.store-banner {
  max-width: 1120px;
  margin: 0 auto 40px;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 21 / 6;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition: background-color 0.3s ease;
}

.store-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

.store-header-inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.back-link {
  display: inline-block;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 32px;
}

.back-link:hover { color: var(--accent); }

.store-logo {
  width: 96px;
  height: 96px;
  margin: 0 auto 20px;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.store-logo svg { width: 42%; height: 42%; }

.store-name {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 14px 0 8px;
}

.store-desc {
  color: var(--muted);
  margin: 16px 0 28px;
  line-height: 1.5;
}

.store-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.secondary {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}

.secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.secondary:active { transform: scale(0.97); }

/* Products */

.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.service-card { display: flex; flex-direction: column; gap: 16px; padding: 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); min-width: 0; overflow-wrap: anywhere; }
.service-card h3 { margin: 0; font-size: 22px; letter-spacing: -.025em; }
.service-card .tag { align-self: flex-start; }
.service-description { margin: 0; color: var(--muted); line-height: 1.6; white-space: pre-line; flex: 1; }
.service-details { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.service-details span, .service-note { color: var(--muted); }
.service-card .secondary { min-height: 44px; text-align: center; }
.service-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: calc(var(--radius) - 8px); }
.service-note { margin-top: 24px; text-align: center; }

.products {
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px 24px var(--space-section-y);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 280px));
  justify-content: center;
  gap: 28px;
}

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  text-decoration: none;
  color: var(--text);
  box-shadow: 0 1px 2px var(--shadow-soft);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background-color 0.3s ease;
}

.product-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 20px 40px var(--shadow-soft);
}

.product-card:active { transform: translateY(-6px) scale(0.98); }

/* Producto agotado: se sigue pudiendo abrir (puede tener variantes disponibles o
   volver a stock), pero se atenúa para que la falta de stock se note de un vistazo
   en la grilla, sin depender solo de leer el texto "Agotado" del tag. Selector con
   el tipo de elemento (a.product-card) a propósito: sube la especificidad por sobre
   .reveal.in-view (mismo número de clases), que si no le gana y deja el opacity en 1. */
a.product-card.agotado { opacity: 0.6; }
a.product-card.agotado:hover { opacity: 0.8; }

.product-visual {
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: calc(var(--radius) - 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  margin-bottom: 16px;
  overflow: hidden;
}

.product-visual svg { width: 36%; height: 36%; }

.product-name {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px;
}

.product-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-hover);
  margin: 0 0 10px;
  font-variant-numeric: tabular-nums;
}

.product-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 14px;
  flex-grow: 1;
}

.tag.avail { margin-bottom: 16px; align-self: flex-start; }

.buy-btn {
  width: 100%;
  text-align: center;
  padding: 12px 20px;
  font-size: 14px;
}

.store-meta {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 6px;
}

/* Product detail */

.product-detail {
  max-width: 1120px;
  margin: 0 auto;
  padding: 72px 24px var(--space-section-y);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.product-detail-visual {
  aspect-ratio: 1 / 1;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: background-color 0.3s ease;
}

.product-detail-visual .placeholder-initial { font-size: 88px; }

.product-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.product-thumb {
  aspect-ratio: 1 / 1;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: calc(var(--radius) - 10px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.product-detail-info .tag { margin: 14px 0 0; }

.product-detail-info .store-name { margin: 12px 0 4px; }

.product-price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 8px 0 4px;
}

.price-current {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.price-old {
  font-size: 15px;
  color: var(--muted);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.variant-group { margin: 20px 0; }

.variant-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 8px;
}

.variant-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.variant-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  min-height: 36px;
}

button.variant-chip {
  background: transparent;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

button.variant-chip:hover {
  border-color: var(--accent);
}

button.variant-chip.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.cart-row-variant,
.checkout-row-variant {
  font-size: 12px;
  color: var(--muted);
  margin: 2px 0 0;
}

.product-store-link {
  display: inline-block;
  margin: 20px 0 28px;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}

.product-store-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

#add-to-cart {
  border: none;
  cursor: pointer;
  font-family: var(--font);
}

#add-to-cart[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  .product-detail { grid-template-columns: 1fr; padding: 56px 20px 72px; }
}

.not-found {
  max-width: 480px;
  margin: 0 auto;
  padding: 120px 24px;
  text-align: center;
}

.not-found h1 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

.not-found p {
  color: var(--muted);
  margin: 0 0 28px;
}

/* Cart */

.cart-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 72px 24px var(--space-section-y);
}

.cart-empty-state {
  max-width: 480px;
  margin: 0 auto;
  padding: 120px 24px;
  text-align: center;
}

.cart-empty-state h1 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

.cart-empty-state p {
  color: var(--muted);
  margin: 0 0 28px;
}

.cart-store {
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
}

.cart-store-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.cart-store-head h2 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.cart-clear {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}

.cart-clear:hover { color: var(--accent); }

.cart-rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cart-row {
  display: grid;
  grid-template-columns: 56px 1fr auto auto auto;
  align-items: center;
  gap: 14px;
  /* Resalta la fila entera al pasar el mouse, para que se note cuál producto se
     está por tocar antes de usar +/-/eliminar (antes no había ningún feedback de
     hover a nivel de fila). Padding+margen negativo: el resaltado se ve, pero no
     mueve nada del layout ni la separación entre filas. */
  padding: 8px;
  margin: -8px;
  border-radius: 12px;
  transition: background-color 0.2s ease;
}

/* No usa --surface-2 lisa: es el mismo tono que el thumbnail (.cart-row-visual),
   así que la miniatura del producto "desaparecía" contra el fondo de la fila al
   pasar el mouse. Un tinte de acento muy leve se distingue de ambos sin gritar. */
.cart-row:hover { background: color-mix(in srgb, var(--surface) 90%, var(--accent) 10%); }

.cart-row-visual {
  width: 56px;
  height: 56px;
  border-radius: calc(var(--radius) - 10px);
  background: var(--surface-2);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.cart-row-visual .placeholder-initial { font-size: 20px; }

.cart-row-name {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 2px;
}

.cart-row-price {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.cart-qty {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qty-btn {
  position: relative;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  background: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.15s var(--ease);
}

/* El círculo visual queda en 26px; este pseudo-elemento invisible agranda el
   área táctil real a ~44px sin cambiar cómo se ve el botón. */
.qty-btn::before {
  content: "";
  position: absolute;
  inset: -9px;
}

.qty-btn:hover { border-color: var(--accent); color: var(--accent); }
.qty-btn:active { transform: scale(0.92); }

.qty-value {
  min-width: 16px;
  text-align: center;
  font-size: 14px;
}

.cart-row-subtotal {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cart-remove {
  position: relative;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  padding: 10px;
  margin: -10px;
  transition: color 0.2s var(--ease), transform 0.15s var(--ease);
}

.cart-remove:hover { color: var(--accent); }
.cart-remove:active { transform: scale(0.9); }

.cart-store-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.cart-total { margin: 0; font-size: 15px; font-variant-numeric: tabular-nums; }
.cart-total strong { color: var(--accent-hover); }

@media (max-width: 640px) {
  .cart-row {
    grid-template-columns: 44px 1fr auto;
    grid-template-areas:
      "visual info remove"
      "visual qty subtotal";
    row-gap: 8px;
  }
  .cart-row-visual { grid-area: visual; width: 44px; height: 44px; }
  .cart-row-info { grid-area: info; }
  .cart-remove { grid-area: remove; justify-self: end; }
  .cart-qty { grid-area: qty; }
  .cart-row-subtotal { grid-area: subtotal; justify-self: end; }

  .cart-store-footer { flex-direction: column; align-items: stretch; gap: 14px; }
  .cart-store-footer .cta { text-align: center; }
}

/* Checkout */

.checkout-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 72px 24px var(--space-section-y);
}

.checkout-head {
  margin: 32px 0 28px;
}

.checkout-head h1 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.checkout-head p {
  color: var(--muted);
  margin: 0;
}

.checkout-summary {
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 32px;
}

.checkout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.checkout-row:last-of-type { border-bottom: none; }

.checkout-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.checkout-total strong { color: var(--accent-hover); }

.checkout-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.checkout-form label {
  font-size: 13px;
  font-weight: 600;
  margin-top: 14px;
}

.checkout-form label:first-child { margin-top: 0; }

.checkout-form input,
.checkout-form textarea {
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: var(--font);
  /* 16px, no 14px: por debajo de eso Safari en iOS hace zoom automático al enfocar
     el campo, lo cual se siente roto en un formulario de pago. */
  font-size: 16px;
  background: var(--bg);
  color: var(--text);
  resize: vertical;
  transition: border-color 0.2s var(--ease);
}

.checkout-form input:focus,
.checkout-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.checkout-form button {
  margin-top: 20px;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 15px;
}

/* Auth (login, registro, recuperar/actualizar contraseña, perfil) — mismos
   tokens y el mismo patrón de tarjeta+formulario que .checkout-form, solo que
   centrado en una tarjeta angosta en vez de ocupar todo el ancho de la página. */

.auth-page {
  max-width: 440px;
  margin: 0 auto;
  /* Contiene el glow de .auth-card::before (inset negativo + blur) dentro
     del ancho de la página -- sin esto, en viewports angostos el glow se
     escapa más allá del borde de la pantalla y genera scroll horizontal. */
  overflow: hidden;
  padding: 72px 24px var(--space-section-y);
}

.auth-card {
  position: relative;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Resplandor ambiental detrás de la tarjeta de login/registro -- mismo
   token y técnica que .hero-capsule::before (radial-gradient + blur con
   --hero-glow), solo que acá el resplandor es más grande y sutil porque
   la tarjeta es rectangular, no una cápsula pequeña. Le da profundidad al
   fondo negro plano sin agregar ninguna dependencia nueva. */
.auth-card::before {
  content: '';
  position: absolute;
  inset: -12%;
  z-index: -1;
  background: radial-gradient(circle, var(--hero-glow) 0%, transparent 70%);
  filter: blur(32px);
  pointer-events: none;
}

.auth-head {
  text-align: center;
  margin-bottom: 24px;
}

.auth-head h1 {
  font-size: clamp(1.4rem, 3vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 8px;
}

.auth-head p {
  color: var(--muted);
  margin: 0;
  font-size: 14px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Sin esto, [hidden] pierde contra ".auth-form { display: flex }" (misma
   especificidad, gana la última declarada) y el formulario de
   actualizar-password.html quedaría visible antes de validar el enlace de
   recuperación. */
.auth-form[hidden] {
  display: none;
}

.auth-form label {
  font-size: 13px;
  font-weight: 600;
  margin-top: 14px;
}

.auth-form label:first-child { margin-top: 0; }

.auth-form input,
.auth-form select,
.auth-form textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: var(--font);
  /* 16px, no 14px: evita el zoom automático de Safari en iOS al enfocar el campo. */
  font-size: 16px;
  background: var(--bg);
  color: var(--text);
  transition: border-color 0.2s var(--ease), background-color 0.3s ease, color 0.3s ease;
}

.auth-form textarea { resize: vertical; font-family: var(--font); }

.auth-form input:focus,
.auth-form select:focus,
.auth-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.auth-form input[aria-invalid="true"],
.auth-form select[aria-invalid="true"],
.auth-form textarea[aria-invalid="true"] {
  border-color: color-mix(in srgb, #d0453c 65%, var(--border));
}

/* Código de verificación del segundo factor (116, login.html) -- mismo
   input que el resto de .auth-form, solo más grande/espaciado para que se
   lea como un código, no como texto libre. */
#codigo-input {
  font-size: 28px;
  letter-spacing: 10px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Ayuda y error a nivel de UN campo (Fase 2, Sistema Visual ASTRC). No
   reemplaza .auth-message (error de TODO el formulario, ej. "no se pudo
   crear la cuenta") — esto es el mensaje puntual bajo un input/select
   puntual. Fuera de .auth-form a propósito: formularios del dashboard que
   arman su propio markup (no todos usan esa clase) también lo necesitan. */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: color-mix(in srgb, #d0453c 65%, var(--border));
}

.field-hint {
  margin-top: 4px;
  font-size: var(--fs-caption, 12px);
  line-height: 1.4;
  color: var(--muted);
}

.field-error {
  display: none;
  margin-top: 4px;
  font-size: var(--fs-caption, 12px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--rose, #d0453c);
}

.field-error.visible { display: block; }

/* Selector de país + número local (Fase 5O). Apilados en columna por
   defecto para garantizar cero overflow en mobile (los nombres de país son
   largos); lado a lado recién a partir de un ancho cómodo. */
.auth-phone-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-phone-field select {
  min-width: 0;
}

@media (min-width: 480px) {
  .auth-phone-field {
    flex-direction: row;
  }
  .auth-phone-field select {
    flex: 1 1 58%;
  }
  .auth-phone-field input {
    flex: 1 1 42%;
  }
}

/* Aviso de "correo ya registrado" (Fase 5O) — mismo tono neutro que
   .auth-message.info, pero con sus propios botones de acción en vez de solo
   texto (mostrarMensaje() no soporta HTML dentro del mensaje a propósito,
   para no tener que sanitizar texto dinámico en ningún otro lugar). */
.auth-existing-account {
  background: var(--surface-2);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 18px;
}

.auth-existing-account p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

.auth-existing-account p:last-of-type { margin-bottom: 0; }

.auth-existing-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.auth-existing-actions a {
  flex: 1 1 auto;
  text-align: center;
  padding: 12px 20px;
  font-size: 14px;
}

.auth-password-field { position: relative; }
.auth-password-field input { padding-right: 44px; }

.auth-password-toggle {
  position: absolute;
  /* 36x36 medía antes (bajo el mínimo táctil de 44px). Al agrandar el botón
     8px se compensa el offset con la mitad (4px) para que el ícono quede en
     el mismo píxel exacto: cero impacto visual. */
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s var(--ease), background-color 0.2s ease, transform 0.15s var(--ease);
}

.auth-password-toggle:hover { color: var(--text); background: var(--surface-2); }
.auth-password-toggle:active { transform: translateY(-50%) scale(0.9); }

.auth-inline-link {
  align-self: flex-end;
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}

.auth-inline-link:hover { color: var(--accent); }

.auth-submit {
  margin-top: 22px;
  width: 100%;
  text-align: center;
  border: none;
  cursor: pointer;
  font-family: var(--font);
}

.auth-submit[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-footer-text {
  margin: 20px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

.auth-footer-text a { color: var(--accent); text-decoration: none; }
.auth-footer-text a:hover { text-decoration: underline; }

/* Mensaje de error/estado — una sola variante de color nueva (rojo) porque
   "errores claros" lo pide explícitamente; todo lo demás reusa --muted/--surface-2
   ya existentes en vez de inventar más colores semánticos (eso queda para
   cuando se diseñe el dashboard, ver docs/DASHBOARD-ARCHITECTURE.md). */
.auth-message {
  display: none;
  font-size: 13px;
  line-height: 1.5;
  padding: 11px 14px;
  border-radius: 10px;
  margin-bottom: 18px;
}

.auth-message.visible { display: block; }

.auth-message.error {
  background: color-mix(in srgb, #d0453c 12%, var(--surface));
  border: 1px solid color-mix(in srgb, #d0453c 35%, transparent);
  color: color-mix(in srgb, #d0453c 75%, var(--text));
}

.auth-message.info {
  background: var(--surface-2);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  color: var(--text);
}

/* Selector Cliente/Tienda — solo UX (decide a qué formulario/mensaje se
   llega), nunca otorga acceso por sí solo: la autorización real sigue
   siendo Supabase Auth + RLS (ver js/login.js). */
.auth-mode-select {
  display: flex;
  gap: 12px;
  margin-bottom: 4px;
}

/* Mismo problema de especificidad que .auth-form[hidden] más arriba:
   [hidden] del navegador pierde contra ".auth-mode-select { display: flex }"
   (misma especificidad, gana el último declarado) sin este selector más
   específico. */
.auth-mode-select[hidden] {
  display: none;
}

.auth-mode-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 12px;
  min-height: 44px;
  background: var(--surface-2);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), transform 0.15s var(--ease);
}

.auth-mode-option svg { color: var(--muted); transition: color 0.2s var(--ease); }

.auth-mode-option:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.auth-mode-option:hover svg { color: var(--accent); }

.auth-mode-option:active { transform: translateY(0); }

.auth-mode-option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.auth-back-link {
  align-self: flex-start;
  margin-bottom: 4px;
  background: none;
  border: none;
  padding: 0;
  color: var(--muted);
  font-family: var(--font);
  font-size: 13px;
  cursor: pointer;
}

.auth-back-link:hover { color: var(--accent); }

/* Perfil */

.profile-section {
  margin-bottom: 28px;
}

.profile-section:last-child { margin-bottom: 0; }

.profile-section h2 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 14px;
}

.profile-role-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-soft, color-mix(in srgb, var(--accent) 12%, var(--surface)));
  color: var(--accent-hover);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.profile-order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.profile-order-row:hover { opacity: 0.8; }

.profile-order-row:last-child { border-bottom: none; }

.profile-order-row .store-meta { margin: 2px 0 0; font-size: 12px; }

/* Comprobante de pedido (Fase 5Q) — factura minimalista, reutilizada por
   checkout.html (recién creado) y pedido.html (histórico). */
.comprobante {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  margin: 24px 0;
}

.comprobante-head {
  text-align: center;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px dashed var(--border);
}

.comprobante-marca { font-weight: 800; letter-spacing: 0.04em; margin: 0; }
.comprobante-tipo { margin: 4px 0 0; font-size: 13px; color: var(--text-muted, inherit); opacity: 0.75; }

.comprobante-meta { margin-bottom: 20px; }
.comprobante-numero { font-weight: 700; margin: 0 0 4px; }
.comprobante-meta .store-meta { margin: 2px 0; }

.comprobante-bloque { margin-bottom: 20px; }
.comprobante-bloque h3,
.comprobante-detalle h3,
.comprobante-pago h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.65;
  margin: 0 0 8px;
}
.comprobante-bloque p { margin: 2px 0; }

.comprobante-detalle { margin-bottom: 20px; }

.comprobante-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.comprobante-item:last-child { border-bottom: none; }

.comprobante-item-visual {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2, var(--surface));
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
.comprobante-item-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }

.comprobante-item-info { flex: 1; min-width: 0; }
.comprobante-item-nombre { margin: 0; font-weight: 600; }
.comprobante-item-meta { margin: 2px 0 0; font-size: 12px; opacity: 0.75; }
.comprobante-item-subtotal { margin: 0; font-weight: 700; white-space: nowrap; }

.comprobante-totales {
  border-top: 1px dashed var(--border);
  padding-top: 12px;
  margin-bottom: 20px;
}
.comprobante-total-fila { display: flex; justify-content: space-between; padding: 4px 0; }
.comprobante-total-final { font-size: 17px; font-weight: 800; }

.comprobante-pago p { margin: 4px 0 0; font-size: 13px; opacity: 0.8; }

.checkout-comprobante-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* CTA band */

.cta-band {
  /* Entra y sale en degradado desde el fondo de la página. */
  background: linear-gradient(to bottom, var(--bg), var(--bg-dark) clamp(64px, 10vw, 120px), var(--bg-dark) calc(100% - clamp(64px, 10vw, 120px)), var(--bg));
  color: var(--text-dark);
  text-align: center;
  padding: var(--space-section-y) 24px;
}

.cta-band h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 12px;
}

.cta-band p {
  color: var(--muted-dark);
  margin: 0 0 32px;
}

/* Tarjeta del formulario público de cotizar (business.html #cotizar) --
   mismo ancho/estilo de tarjeta que .auth-page/.auth-card (login.html) para
   que se vea como un formulario real, no como inputs estirados a todo el
   ancho de la sección. .cta-band centra su texto, pero el formulario en sí
   va alineado a la izquierda como cualquier form. */
.quote-card {
  max-width: 440px;
  margin: 0 auto;
  text-align: left;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
}

/* Footer */

.footer {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 24px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
}

/* Mención discreta de ASTRC dentro de una tienda */

.astrc-mini-mention {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px 56px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.astrc-mini-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  /* Presencia del personaje MUY sutil: solo esto se mueve, nunca cerca de productos/botones */
  animation: flotar-companero 6s ease-in-out infinite;
}

@keyframes flotar-companero {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(-3deg); }
}

.astrc-mini-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.astrc-mini-mention a {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}

.astrc-mini-mention a:hover { color: var(--text); }

.tienda-footer {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.tienda-footer-astrc {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.55;
}

.astrc-mini-brand {
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.01em;
}

.astrc-mini-brand svg {
  width: 0.75em;
  height: 0.75em;
  margin-left: 1px;
}

.tienda-footer-astrc p { margin: 0; font-size: 12px; }

.footer-links { display: flex; gap: 20px; }

/* "App móvil próximamente" (pie de todas las páginas públicas y hero de las
   landings). Aviso propio: las insignias oficiales de Apple/Google solo se
   pueden usar con la app publicada; al publicarla se cambian por ellas. */
.app-pronto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.app-pronto-tag { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.app-pronto-tag svg { width: 16px; height: 16px; flex: none; color: var(--accent); }
.app-pronto-tiendas { display: inline-flex; gap: 6px; }
.app-pronto-tienda { padding: 4px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 12px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.app-pronto.is-hero { margin-top: 18px; }
.hero.is-centrado .app-pronto, .lp-hero.is-centrado .app-pronto { justify-content: center; }
.footer .app-pronto-tag { font-size: 12px; }
.app-pronto.is-ajustes { margin: 18px 4px 4px; padding-top: 14px; border-top: 1px solid var(--border); }
.footer .app-pronto-tienda { padding: 3px 9px; font-size: 11px; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--accent); }

/* Scroll reveal */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* El selector universal * NO alcanza a ::before/::after (son pseudo-elementos
     generados, no nodos reales del árbol) — sin esto, transiciones que viven en un
     ::after (como el subrayado animado del nav) seguían corriendo con reduced motion
     activado. Encontrado probando de verdad, no solo leyendo el código. */
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Mobile */

@media (max-width: 720px) {
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-dark);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    gap: 0;
    padding: 8px 24px;
    display: none;
  }

  .nav-links.open { display: flex; }

  .nav-links a {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
  }

  .nav-links > a::after,
  .nav-links > .nav-dropdown > .nav-dropdown-link::after {
    display: none;
  }

  .nav-links .nav-dropdown {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0;
    border-bottom: 1px solid var(--border);
  }

  .nav-links .nav-dropdown-link {
    flex: 1;
    padding: 14px 0;
    border-bottom: none;
  }

  .nav-links .nav-dropdown-menu {
    position: static;
    width: 100%;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
    border: none;
    padding: 0 0 0 4px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }

  .nav-links .nav-dropdown-menu.open { max-height: 320px; }

  .nav-links .nav-dropdown-menu a { padding: 10px 0; }

  .nav-toggle { display: flex; }

  .hero { padding: 96px 24px; }
  .how-it-works { padding: var(--space-section-y-mobile) 20px; }
  .stores { padding: var(--space-section-y-mobile) 20px; }
  .cta-band { padding: var(--space-section-y-mobile) 20px; }
  .footer { flex-direction: column; gap: 12px; text-align: center; }
  .footer .app-pronto { justify-content: center; }
}

/* =========================================================
   Dashboard (Fase 3). Reutiliza tokens y componentes existentes
   (--surface/--border/--radius/--ease, .store-search/.store-filters/
   .filter-btn/.store-empty, .auth-form input/label) — nada nuevo salvo
   lo que el panel administrativo necesita y no existía todavía.
   ========================================================= */

.dash-shell {
  display: flex;
  min-height: 100vh;
  background: var(--bg);
}

/* Mismo problema de especificidad ya encontrado en .auth-form/.auth-mode-select:
   [hidden] del navegador pierde contra ".dash-shell { display: flex }" (misma
   especificidad, gana el último declarado), así que dashboard.js dejaba
   hidden=true sin ningún efecto visual real — el shell se veía a medio
   pintar aunque el propio código explícitamente esperaba a que todo
   terminara de resolverse antes de "revelarlo" (ver comentario en
   AstrcDashboard.init()). Este selector más específico hace que ese hidden
   sí oculte de verdad. */
.dash-shell[hidden] {
  display: none;
}

/* =========================================================
   Tokens del panel — superficies "Obsidiana" oscuras + acento AZUL de
   marca (docs/DASHBOARD-DESIGN-REFERENCE.md original proponía un acento
   verde jade; Gabriel pidió volver al azul #4865ff "que da confianza",
   el mismo de todo el sitio -- se mantienen los nombres de variable
   --jade/-l/-d/-dim/-glow por no reescribir cada regla que ya los usa,
   pero sus VALORES ahora son azules). Redefinidos SOLO dentro de
   #dash-shell (no en :root): el marketplace/checkout/tienda públicos ya
   usan ese mismo azul en :root y no cambian. Se alias-ean los tokens
   compartidos (--accent/--bg/--surface/--text/--muted/--border) para que
   TODO el CSS del dashboard que ya existía (tablas, pills, cards, modales)
   adopte la paleta sin tocar cada regla una por una. --status-good/warning/
   critical NO se alias-ean acá a propósito -- son un significado semántico
   (éxito/alerta/peligro) independiente del acento de marca, así que quedan
   heredando el verde/ámbar/rojo de :root sin importar qué color sea el
   acento del panel.

   FIX (docs/ASTRC-BRAND-SYSTEM.md): --jade decía ser "el mismo azul de
   marca" pero tenía su propio hex (#6D70F5), distinto del --accent real
   del resto del sitio (#4865ff) -- dos azules que se suponía eran uno
   solo. Ahora --jade es un alias literal de --brand-primary, así que es
   imposible que vuelvan a divergir. --jade-l/--jade-d quedan igual por
   ahora (estados de hover propios del panel, fuera de alcance de esta fase).
   ========================================================= */
#dash-shell {
  --jade: var(--brand-primary);
  --jade-l: #8B8DFF;
  --jade-d: #4A4DD4;
  --jade-dim: rgba(109, 112, 245, 0.14);
  --jade-glow: rgba(109, 112, 245, 0.26);
  --gold: #F0A030;
  --gold-dim: rgba(240, 160, 48, 0.11);
  --rose: #F26B5B;
  --rose-dim: rgba(242, 107, 91, 0.11);
  --sky: #5BA4F5;
  --sky-dim: rgba(91, 164, 245, 0.11);

  /* --bg-2/--bg-3 (superficies de cards/tablas/KPIs) son SÓLIDAS a
     propósito, no rgba -- el sistema visual ASTRC (astrc-sistema-visual.html,
     Ejecución B) reserva el glass exclusivamente para el chrome (--chrome)
     y los overlays de modal; las superficies de datos deben ser sólidas.
     Antes usaban rgba(...,.72) + backdrop-filter, heredado del jade verde
     original -- quedaba blur "de adorno" sin ninguna transparencia real que
     desenfocar. El backdrop-filter que sigue declarado en esas reglas ahora
     no tiene efecto visible sobre un fondo opaco (no rompe nada, pero ya no
     hace falta perseguir cada declaración para quitarlo). Los tonos también
     dejan el tinte verdoso heredado de jade por un neutro azulado, igual al
     resto del sistema. */
  --bg-0: #0C0E16;
  --bg-1: #0C0E16;
  --bg-2: #141726;
  --bg-3: #1B1F31;
  --bg-sidebar: #0A0D1C;
  --t1: #EDEEF6;
  --t2: #868BA1;
  --t3: #4A5068;
  --b0: #252A3D;
  --b1: rgba(109, 112, 245, 0.35);

  /* Alias: el resto del CSS del dashboard sigue usando estos nombres. */
  --bg: var(--bg-0);
  --bg-dark: var(--bg-0);
  --surface: var(--bg-2);
  --surface-2: var(--bg-3);
  --text: var(--t1);
  --text-dark: var(--t1);
  --muted: var(--t2);
  --muted-dark: var(--t2);
  --accent: var(--jade);
  --accent-hover: var(--jade-l);
  --border: var(--b0);
  --border-dark: var(--b0);
  --header-bg: rgba(9, 14, 12, 0.72);
  --shadow: rgba(0, 0, 0, 0.45);
  --shadow-soft: rgba(0, 0, 0, 0.3);

  /* Dirección de arte "Precisión que se siente cercana" (Ejecución B ·
     Contraste, elegida 2026-09-10). El chrome (sidebar + topbar) es un
     navy sólido propio -- NO sigue el tema claro/oscuro/gris como el resto
     del panel -- para que el panel se reconozca de un vistazo (marca) y
     aguante turnos largos de POS/restaurante sin el brillo de un fondo
     claro completo. El contenido (tablas, cards, POS, formularios) sigue
     usando --bg/--surface del tema normal; el glass (--glass-blur) queda
     reservado solo para el chrome, nunca para superficies de datos. */
  --chrome: #0A0D1C;
  --chrome-text: #E4E7F5;
  --chrome-muted: #8B90AE;
  --chrome-border: #1B2036;
  --chrome-active-bg: rgba(139, 141, 255, 0.2);
  --chrome-active-text: #ffffff;
  /* Acento de celebración: SOLO para logros puntuales (venta cerrada, caja
     cuadrada, meta alcanzada) -- nunca decorativo ni de navegación. */
  --celebrate: #F5C46A;
}

[data-theme="light"] #dash-shell,
[data-theme="grey"] #dash-shell {
  --jade: var(--brand-primary);
  --jade-l: #7A7DF7;
  --jade-d: #4A4DD4;
  --jade-dim: rgba(91, 95, 239, 0.11);
  --jade-glow: rgba(91, 95, 239, 0.22);

  /* Superficies sólidas -- ver comentario en el bloque oscuro de #dash-shell. */
  --bg-0: #F7F8FC;
  --bg-1: #F7F8FC;
  --bg-2: #FFFFFF;
  --bg-3: #EEF0F6;
  --bg-sidebar: #FFFFFF;
  --t1: #161822;
  --t2: #6E7387;
  --t3: #9AA0B8;
  --b0: #DDE0E9;
  --b1: rgba(91, 95, 239, 0.28);
  --header-bg: rgba(255, 255, 255, 0.72);
  --shadow: rgba(17, 17, 20, 0.1);
  --shadow-soft: rgba(17, 17, 20, 0.06);

  /* El chrome se mantiene navy sólido incluso en tema claro/gris -- es la
     esencia de la Ejecución B: consistencia de marca por encima del tema. */
  --chrome: #171F3D;
  --chrome-text: #E4E7F5;
  --chrome-muted: #97A0C7;
  --chrome-border: #232B52;
  --chrome-active-bg: rgba(139, 141, 255, 0.22);
  --chrome-active-text: #ffffff;
  --celebrate: #F0B23F;
}

/* ============================================================
   JERARQUÍA TIPOGRÁFICA ASTRC -- Ejecución B, Fase 1 (Fundamentos)
   13 niveles semánticos reutilizables por cualquier módulo nuevo del panel.
   Un módulo nuevo aplica el nivel que corresponda por SIGNIFICADO (¿es un
   título de página? ¿un dato mono-espaciado?), nunca inventa un tamaño o
   peso suelto. Todos reusan los tokens --fs-*/--sp-* ya definidos arriba
   (ninguno crea un valor arbitrario nuevo). Disponibles como clases
   (.text-*) para markup nuevo, y ya aplicados a los selectores
   estructurales que todas las vistas del panel comparten (ver más abajo:
   .dash-view-head, .dash-panel h2, .dash-table th, .dash-kpi, etc.) --
   así las 9 pantallas de esta fase heredan la jerarquía sin tocar su JS. */
#dash-shell .text-display { font: 800 var(--fs-display, 40px)/1.1 var(--font); letter-spacing: -0.02em; color: var(--text); margin: 0; }
#dash-shell .text-page-title { font: 700 var(--fs-title, 28px)/1.2 var(--font); letter-spacing: -0.01em; color: var(--text); margin: 0; }
#dash-shell .text-section-title { font: 700 var(--fs-section, 20px)/1.3 var(--font); color: var(--text); margin: 0; }
#dash-shell .text-subsection-title { font: 600 var(--fs-subsection, 18px)/1.3 var(--font); color: var(--text); margin: 0; }
#dash-shell .text-card-title { font: 700 var(--fs-card, 16px)/1.35 var(--font); color: var(--text); margin: 0; }
#dash-shell .text-body { font: 400 var(--fs-body, 15px)/1.5 var(--font); color: var(--text); margin: 0; }
#dash-shell .text-body-small { font: 400 var(--fs-body-small, 13px)/1.45 var(--font); color: var(--muted); margin: 0; }
#dash-shell .text-label { font: 600 var(--fs-label, 11px)/1.3 var(--font); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 0; }
#dash-shell .text-helper { font: 400 var(--fs-body-small, 13px)/1.5 var(--font); color: var(--muted); margin: var(--sp-1, 4px) 0 0; }
#dash-shell .text-caption { font: 500 var(--fs-caption, 12px)/1.3 var(--font); color: var(--muted); margin: 0; }
#dash-shell .text-table-header { font: 700 var(--fs-caption, 12px)/1.3 var(--font); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 0; }
#dash-shell .text-metric-value { font: 800 var(--fs-title, 28px)/1.1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--text); margin: 0; }
#dash-shell .text-mono-data { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* Reutilizable sin tocar JS: cualquier <code> nuevo dentro del panel hereda
   mono-data automáticamente (identificadores, SKU, códigos de terminal). */
#dash-shell code { font-family: var(--font-mono); white-space: nowrap; }

/* Botones de acción del panel -- para casos nuevos o donde .cta/.secondary
   (compartidos con el sitio público) no encajan bien. Texto blanco: el
   acento del panel es el mismo azul saturado que .cta usa en todo el
   sitio, donde también lleva texto blanco. */
.btn-jade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--jade);
  color: #ffffff;
  font-weight: 700;
  font-family: var(--font);
  font-size: 14px;
  border: none;
  border-radius: var(--r-input, 10px);
  padding: 10px 20px;
  cursor: pointer;
  box-shadow: var(--sh-sm);
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.btn-jade:hover { background: var(--jade-l); box-shadow: var(--sh-md); }
.btn-jade:active { transform: scale(0.97); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--b0);
  color: var(--t2);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  /* Un <button> trae line-height:normal del user-agent, distinto del que
     hereda un <label> (ej. "Elegir imagen" vs "Quitar" en el uploader de
     imagen) -- con la misma fuente y el mismo padding terminaban de alto
     distinto. Fijarlo acá los iguala sin importar la etiqueta. */
  line-height: 1.4;
  border-radius: var(--r-input, 10px);
  padding: 10px 20px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.btn-ghost:hover { border-color: var(--b1); color: var(--jade-l); background: var(--bg-3); }

/* Compacto (Fase 4): mismo .btn-ghost pero para acciones inline dentro de
   una celda de tabla (ej. Marcar pagado/Corregir/Devolver en Pedidos) --
   antes cada botón repetía padding/margin por style="" inline en el JS. */
#dash-shell .btn-ghost.is-compact { padding: 6px 12px; font-size: 12px; }

/* Destructivo (Fase 2: componentes globales) -- modificador sobre .btn-ghost
   o .secondary, nunca un botón nuevo. Nunca es la acción primaria de una
   pantalla: siempre acompaña "Eliminar"/"Borrar" con confirmación aparte. */
#dash-shell .btn-ghost.is-danger,
#dash-shell .secondary.is-danger {
  color: var(--status-critical);
  border-color: color-mix(in srgb, var(--status-critical) 35%, var(--b0));
}
#dash-shell .btn-ghost.is-danger:hover,
#dash-shell .secondary.is-danger:hover {
  color: #fff;
  background: var(--status-critical);
  border-color: var(--status-critical);
}

/* Estado disabled (Fase 5): ninguno de los 4 botones del panel tenía
   retroalimentación visual propia al deshabilitarse -- un disabled=true
   por código (ej. "Guardar nota" sin contenido) se veía igual que
   habilitado salvo por el cursor por defecto del navegador. */
#dash-shell .btn-jade:disabled,
#dash-shell .btn-ghost:disabled,
#dash-shell .cta:disabled,
#dash-shell .secondary:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Botones/selectores del panel (Precisión que se siente cercana): rectángulo
   redondeado ~10px, NUNCA píldora -- .cta/.secondary son píldora a propósito
   en el sitio público, pero dentro del panel leen como más "template"/menos
   preciso mezclados con inputs de 12px. Se sombrean levemente (--sh-sm) para
   que se sientan objetos con peso, no líneas planas -- la queja de "se ven
   simples" viene de ahí: cero elevación, radios sin relación entre sí. */
#dash-shell .cta,
#dash-shell .secondary {
  border-radius: var(--r-input, 10px);
  box-shadow: var(--sh-sm);
}
#dash-shell .cta:hover { box-shadow: var(--sh-md); }
#dash-shell .glass-select-trigger,
#dash-shell .dash-store-select,
#dash-shell .auth-form input,
#dash-shell .auth-form select,
#dash-shell .auth-form textarea,
#dash-shell .auth-form .dash-daterange-trigger.is-field {
  box-shadow: var(--sh-sm);
}
#dash-shell .glass-select-trigger:focus-visible,
#dash-shell .auth-form input:focus,
#dash-shell .auth-form select:focus,
#dash-shell .auth-form textarea:focus,
#dash-shell .auth-form .dash-daterange-trigger.is-field:focus-visible {
  box-shadow: var(--sh-sm), 0 0 0 3px var(--jade-dim);
}

.dash-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  background: var(--chrome, var(--header-bg));
  border-bottom: 1px solid var(--chrome-border, var(--border));
  color: var(--chrome-text, var(--text));
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* El chrome fija su propio texto/muted -- los hijos del topbar traían
   var(--text)/var(--muted) del tema de contenido, que sobre navy sólido
   podía quedar sin contraste (p.ej. tema claro). Una sola fuente de verdad
   acá en vez de tocar cada regla de texto del topbar por separado. */
.dash-topbar-left,
.dash-topbar-right { color: inherit; }
.dash-sidebar-toggle,
.dash-breadcrumb-vista,
.dash-user-email { color: var(--chrome-text, var(--text)); }
.dash-sidebar-toggle span { background: var(--chrome-text, var(--text)); }
.dash-store-name,
.dash-breadcrumb-sep,
.dash-topbar-date,
.dash-user-role { color: var(--chrome-muted, var(--muted)); }
.dash-logout-btn { color: var(--chrome-muted, var(--muted)); }
.dash-logout-btn:hover { color: var(--chrome-text, var(--text)); background: var(--chrome-active-bg, var(--surface-2)); }

.dash-topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.dash-sidebar-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}

/* color de .dash-sidebar-toggle / span, .dash-store-name, .dash-breadcrumb-*,
   .dash-user-*, .dash-logout-btn -- fijado arriba (bloque "el chrome fija su
   propio texto/muted") en vez de acá: repetirlo con var(--text)/var(--muted)
   en estas reglas más específicas los pisaba en White/Grey (--text ahí es
   #111 -- casi negro -- sobre el navy fijo del chrome, contraste roto). */
.dash-sidebar-toggle span { width: 20px; height: 2px; display: block; }

.dash-topbar .brand-logo-img { height: 22px; width: auto; }

.dash-store-name {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-breadcrumb-sep {
  display: none;
  font-size: 13px;
  opacity: 0.6;
}

.dash-store-name:not([hidden]) + .dash-breadcrumb-sep { display: inline; }

.dash-breadcrumb-vista {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.dash-topbar-date {
  font-size: 13px;
  white-space: nowrap;
}

.dash-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dash-user-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.3;
  margin-right: 4px;
}

.dash-user-email {
  font-size: 13px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-user-role {
  font-size: 11px;
}

.dash-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s var(--ease), background-color 0.2s ease;
}

.dash-logout-btn:hover { background: var(--chrome-active-bg, var(--surface-2)); }

/* Ícono del selector de tema: es .nav-dropdown-trigger, componente compartido
   con el sitio público (donde --muted/--text sí son correctos). Dentro del
   topbar del panel necesita los tokens de chrome, igual que sus hermanos. */
.dash-topbar .nav-dropdown-trigger { color: var(--chrome-muted, var(--muted)); }
.dash-topbar .nav-dropdown-trigger:hover,
.dash-topbar .nav-dropdown-trigger[aria-expanded="true"] { color: var(--chrome-text, var(--text)); }

.dash-sidebar {
  position: fixed;
  top: 64px;
  left: 0;
  bottom: 0;
  width: 240px;
  background: var(--chrome, var(--surface));
  color: var(--chrome-text, var(--text));
  border-right: 1px solid var(--chrome-border, var(--border));
  padding: 20px 12px;
  overflow-y: auto;
  z-index: 30;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease);
}

.dash-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 64px 0 0 0;
  background: color-mix(in srgb, var(--shadow) 60%, transparent);
  z-index: 29;
}

.dash-sidebar-backdrop.open { display: block; }

.dash-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-nav-group-label {
  padding: 18px 14px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chrome-muted, var(--muted));
  opacity: 0.8;
}

.dash-nav-group-label:first-child { padding-top: 4px; }
.dash-nav-group-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 10px 14px; margin-top: 8px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--muted); font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.dash-nav-group-toggle:hover { background: var(--surface); border-color: var(--border); backdrop-filter: blur(var(--glass-blur)); }
.dash-nav-group-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dash-nav-group-toggle::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .24s ease; flex-shrink: 0; }
.dash-nav-group-region { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .24s ease, opacity .24s ease; }
.dash-nav-group-region > ul { min-height: 0; overflow: hidden; list-style: none; padding: 0; margin: 0; }
.dash-nav-group.is-collapsed .dash-nav-group-region { grid-template-rows: 0fr; opacity: 0; }
.dash-nav-group.is-collapsed .dash-nav-group-toggle::after { transform: rotate(-45deg); }
@media (min-width: 768px) and (max-width: 1024px) {
  /* Sin texto no entra ni reduciendo la fuente (ej. "Restaurante",
     "Administración") -- se oculta y queda solo el chevron ::after
     (mide en px fijos, no em, así que no se achica con font-size:0). El
     nombre accesible se conserva vía texto + title, solo cambia lo visual. */
  .dash-nav-group-toggle { font-size: 0; padding: 10px 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .dash-nav-group-region, .dash-nav-group-toggle, .dash-nav-group-toggle::after { transition: none; }
}

.dash-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--chrome-muted, var(--muted));
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: color 0.2s var(--ease), background-color 0.2s ease;
}

.dash-nav-link svg { flex-shrink: 0; width: 18px; height: 18px; }

.dash-nav-link:hover { color: var(--chrome-text, var(--text)); background: var(--chrome-active-bg, var(--surface-2)); }

.dash-nav-link {
  position: relative;
}

.dash-nav-link.active { color: var(--chrome-active-text, var(--accent-hover)); background: var(--chrome-active-bg, var(--jade-dim, var(--surface-2))); }

.dash-nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 2.5px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
}

/* Badge de pendientes en el sidebar (Fase 5S, ej. "Solicitudes de tiendas 3") */
.dash-nav-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.dash-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: 240px;
  margin-top: 64px;
  padding: 32px;
  min-width: 0;
}

.dash-main {
  /* Red de seguridad: ningún hijo del panel (tabla ancha, selector con
     nombre largo, popover) debe poder abrir scroll horizontal en el body
     entero -- cada uno que lo necesite ya maneja su propio overflow-x:auto
     (.dash-table-wrap, .dash-daterange-panel). */
  overflow-x: clip;
}

.dash-view-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  /* Los hijos de un flex container miden min-width:auto por defecto -- un
     <h1>/<p> largo (ej. nombre de tienda largo en el saludo) empujaba el
     ancho del header más allá de .dash-main y forzaba scroll horizontal,
     aun con flex-wrap:wrap (que solo ayuda entre hijos, no adentro de uno). */
  min-width: 0;
  margin-bottom: var(--sp-6, 24px);
}

.dash-view-head h1 { font: 700 var(--fs-title, 28px)/1.2 var(--font); letter-spacing: -0.01em; margin: 0; }
.dash-view-head h2 { font: 600 var(--fs-subsection, 18px)/1.3 var(--font); margin: 0; }
.dash-view-head p { margin: var(--sp-1, 4px) 0 0; color: var(--muted); font: 400 var(--fs-body-small, 13px)/1.5 var(--font); }

/* El propio texto (h1/p) es el hijo flex que necesita min-width:0 -- no
   .dash-view-head (el container) sino ESTE div, para que pueda truncar/
   wrappear en vez de forzar el ancho del header entero. */
.dash-view-head > div:first-child {
  min-width: 0;
}

.dash-view-head h1,
.dash-view-head p {
  overflow-wrap: break-word;
}

.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-4, 16px);
  margin-bottom: var(--sp-8, 32px);
}

.dash-kpi-card.is-wide { grid-column: span 2; }

.dash-kpi-card {
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  min-width: 0;
  container-type: inline-size;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

/* Cards con más detalle disponible al hacer click (js/dashboard-resumen.js,
   abrirDetalleKpi) -- mismo levantamiento sutil que el resto de elementos
   interactivos del sitio (.cta, .hero-capsule), nunca un cambio de color
   solo (el cursor + el levantamiento ya bastan como affordance). */
.dash-kpi-card.is-clickable {
  cursor: pointer;
}

.dash-kpi-card.is-clickable:hover,
.dash-kpi-card.is-clickable:focus-visible {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 8px 20px var(--shadow-soft);
}

.dash-kpi-card.is-clickable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.dash-kpi-value { font: 800 clamp(15px, 9cqi, var(--fs-title, 28px))/1.1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; overflow-wrap: anywhere; }
.dash-kpi-label { font: 600 var(--fs-label, 11px)/1.3 var(--font); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-top: var(--sp-1, 4px); }

/* .dash-kpis/.dash-kpi -- versión simple de tarjeta KPI (span/strong/small
   directo, sin drag/resize) usada por vistas que no son Resumen (Delivery,
   Personal y jornadas). Nunca tuvo CSS propio -- por eso salía como texto
   plano corrido ("Activos0En preparación o entrega"), sin tarjeta ni
   separación. Mismo lenguaje visual que .dash-kpi-card/-value/-label. */
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.dash-kpi {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card, 16px);
  padding: 18px 20px;
  box-shadow: var(--sh-sm);
}
.dash-kpi span { display: block; font: 600 var(--fs-label, 11px)/1.3 var(--font); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.dash-kpi strong { display: block; margin-top: var(--sp-2, 8px); font: 800 var(--fs-title, 28px)/1.1 var(--font); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.dash-kpi small { display: block; margin-top: var(--sp-1, 4px); font: 500 var(--fs-caption, 12px)/1.3 var(--font); color: var(--muted); }

/* Fila de acciones sueltas sobre una tabla (Personal, Restaurante, Cocina) --
   tampoco tenía CSS propio, los botones quedaban pegados sin separación. */
.dash-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }

.dash-kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dash-kpi-delta.is-up { color: var(--status-good); }
.dash-kpi-delta.is-down { color: var(--status-critical); }

.dash-kpi-sparkline {
  position: absolute;
  right: 18px;
  bottom: 18px;
  opacity: 0.85;
}

.dash-kpi-card.has-sparkline { padding-right: 84px; }

.dash-skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 37%, var(--surface) 63%);
  background-size: 400% 100%;
  border-radius: 10px;
  animation: dash-shimmer 1.4s ease infinite;
}

@keyframes dash-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.dash-table-wrap {
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Título dentro de una tabla envuelta (ej. "Detalle de pedidos", "Platos
   más solicitados", "Delivery por canal", Comprobantes): .dash-table-wrap
   no tiene padding propio, así que un <h2>/<h3> puesto directo ahí queda
   pegado al borde con el margen por defecto del navegador -- 16px más a la
   izquierda que las celdas de la tabla que tiene debajo (que sí usan
   padding:14px 16px). */
.dash-table-wrap > h2,
.dash-table-wrap > h3 {
  margin: 0;
  padding: 16px 16px 12px;
  font: 700 var(--fs-card, 16px)/1.35 var(--font);
  border-bottom: 1px solid var(--border);
}

/* Las tablas de widgets nunca fuerzan el ancho de su tarjeta. En pantallas
   estrechas se desplazan dentro de la superficie Glass, manteniendo visibles
   las columnas y el resto del dashboard estable. */
.dash-chart-card .dash-table-wrap,
.dash-chart-card .dash-table-compacta {
  max-width: 100%;
}
.dash-chart-card .dash-table-wrap { overflow-x: auto; }
.dash-chart-card .dash-table { min-width: 0; table-layout: fixed; }
.dash-chart-card .dash-table th,
.dash-chart-card .dash-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dash-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }

.dash-table th {
  text-align: left;
  font: 700 var(--fs-caption, 12px)/1.3 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.dash-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}

.dash-table tr:last-child td { border-bottom: none; }

.dash-table tbody tr { transition: background-color 0.15s ease; }
.dash-table tbody tr:hover { background: var(--surface-2); }

.dash-row-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
/* Variante en línea (Fase 4) -- cuando las acciones comparten celda con
   otro contenido (ej. un badge de pago) en vez de ocupar la celda entera. */
.suscripcion-tarjeta-acciones { justify-content: flex-start; gap: 8px; margin: 14px 0 6px; }
.suscripcion-tarjeta-acciones > * { width: auto; margin: 0; }
@media (max-width: 640px) { .suscripcion-tarjeta-acciones > * { flex: 1 1 100%; justify-content: center; } }
.dash-row-actions.is-inline { display: inline-flex; margin-left: 6px; vertical-align: middle; }

.dash-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 4px;
  margin: -4px;
  border-radius: 8px;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s var(--ease), background-color 0.2s ease;
}

.dash-icon-btn:hover { color: var(--text); background: var(--surface-2); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); }
.dash-icon-btn.is-danger:hover { color: #d0453c; }

/* Variante con texto corto junto al ícono (ej. flechas ↑/↓ de reordenar) --
   mismo lenguaje que .dash-icon-btn (Fase 2: componentes globales), ancho
   automático en vez de cuadrado fijo de 36px. */
.dash-icon-btn.has-label {
  width: auto;
  min-width: 36px;
  padding: 6px 10px;
  gap: 6px;
  border-radius: var(--r-input, 10px);
  font: 600 var(--fs-caption, 12px)/1 var(--font);
}

.dash-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--surface-2);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--muted);
}

.dash-status-pill.is-confirmed,
.dash-status-pill.is-completed {
  background: color-mix(in srgb, var(--status-good) 16%, var(--surface));
  color: color-mix(in srgb, var(--status-good) 80%, var(--text));
}

.dash-status-pill.is-cancelled {
  background: color-mix(in srgb, var(--status-critical) 14%, var(--surface));
  color: color-mix(in srgb, var(--status-critical) 75%, var(--text));
}

/* Inventario (Fase 2) -- "stock bajo". Mismo patrón color-mix que
   is-confirmed/is-cancelled, ámbar en vez de verde/rojo -- nunca solo
   color: siempre va con ícono + texto ("Stock bajo"), nunca sola. */
.dash-status-pill.is-warning {
  background: color-mix(in srgb, var(--status-warning) 16%, var(--surface));
  color: color-mix(in srgb, var(--status-warning) 85%, var(--text));
}

/* Informativo (Fase 2: jerarquía semántica completa -- neutral/informativo/
   éxito/advertencia/crítico). Para un estado en curso que no es ni éxito
   ni alerta (ej. "Reservada" en Mesas). Reusa --accent, nunca un azul suelto. */
.dash-status-pill.is-info {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: color-mix(in srgb, var(--accent) 82%, var(--text));
}

.dash-status-pill svg { width: 13px; height: 13px; margin-right: 4px; flex-shrink: 0; }

/* Dot de color semántico en las KPI cards de Inventario -- nunca es la
   única señal (siempre acompaña un label de texto). */
.dash-kpi-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-right: 6px;
  vertical-align: middle;
}

.dash-table tr.is-critica { background: color-mix(in srgb, var(--status-warning) 7%, var(--surface)); }
.dash-table tr.is-critica:hover { background: color-mix(in srgb, var(--status-warning) 12%, var(--surface)); }

/* Oculta visualmente sin sacarlo del árbol de accesibilidad -- para el
   resumen textual (tabla de datos) que acompaña a cada gráfico del
   dashboard: un lector de pantalla lo lee igual que el SVG no dice nada. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   Gráficos del dashboard (Fase de visualización de #resumen) — SVG plano
   generado en JS (js/dashboard-charts.js), sin librería de charts. Mismos
   tokens que el resto del dashboard (--surface/--border/--radius para la
   tarjeta contenedora, --accent para series únicas, --status-* para
   categorías de estado) -- ver docs/DASHBOARD-ARCHITECTURE.md.
   ========================================================= */
.dash-chart-card {
  position: relative;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 20px 16px;
}

.dash-chart-card:hover { border-color: var(--b1, var(--border)); box-shadow: 0 14px 32px var(--shadow-soft); }

.dash-chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}

.dash-chart-head h2 { margin: 0; font: 700 var(--fs-card, 16px)/1.35 var(--font); }
.dash-chart-head .dash-chart-total { font-size: 13px; color: var(--muted); }

/* Las acciones de un widget pueden ocupar más de una línea dentro de SU
   tarjeta. Así nunca se desbordan hacia el widget vecino en tableros que
   el usuario hizo compactos. */
.dash-chart-head > h2 { flex: 1 1 110px; min-width: 0; overflow-wrap: anywhere; }
.dash-chart-controls { display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; max-width: 100%; }
.dash-chart-controls .dash-widget-tamano-btn { margin-left: 0; }

.dash-period-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: var(--surface-2);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  margin-right: 4px;
}

.dash-period-btn {
  position: relative;
  z-index: 1;
  border: none;
  background: none;
  border-radius: 999px;
  padding: 5px 12px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s var(--ease);
}

.dash-period-btn:hover { color: var(--text); }

.dash-period-btn.is-active { color: #ffffff; }

/* Pastilla deslizante compartida (js/dashboard-tabs.js) -- ver también
   .dash-badge-tabs más abajo, mismo mecanismo. Vive DETRÁS de los botones
   (z-index 0): un botón inactivo, con su propio fondo opaco, la tapa al
   pasar por encima mientras se desliza; solo se ve rellenando el botón
   activo (que queda transparente) -- efecto "un solo tab, se mueve". */
.dash-tab-glider {
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 92%, white), var(--accent));
  box-shadow: 0 5px 14px color-mix(in srgb, var(--accent) 24%, transparent), inset 0 1px 0 rgba(255,255,255,.22);
  will-change: left, top, width, height;
  pointer-events: none;
  transition: left 0.35s cubic-bezier(0.16, 1, 0.3, 1), top 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    width 0.35s cubic-bezier(0.16, 1, 0.3, 1), height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.dash-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

/* Tablero de Cocina (Nuevas/Preparando/Listas/Entregadas) -- la clase
   existía en el HTML (dashboard-cocina.js) pero nunca tuvo regla propia,
   así que las 4 columnas caían apiladas una debajo de otra en vez de
   mostrarse lado a lado. align-items:start para que cada columna mida
   según su propio contenido, no la más alta de las 4. */
.dash-kanban {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}

.dash-chart-svg-wrap { position: relative; }
.dash-chart-svg-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Tooltip flotante compartido por los 2 tipos de gráfico -- posicionado en
   JS (left/top inline), nunca tapa el punto/segmento que describe. */
.dash-chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--surface-2);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 8px 20px var(--shadow-soft);
  transform: translate(-50%, -100%);
  opacity: 0;
  transition: opacity 0.12s ease;
  z-index: 5;
}

.dash-chart-tooltip.is-visible { opacity: 1; }
.dash-chart-tooltip strong { font-variant-numeric: tabular-nums; }

.dash-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 14px;
  font-size: 13px;
}

.dash-chart-legend-item { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.dash-chart-legend-item strong { color: var(--text); font-variant-numeric: tabular-nums; }

.dash-chart-empty {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 24px 0;
}

.dash-chart-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.dash-chart-link:hover { text-decoration: underline; }

.dash-table-compacta th,
.dash-table-compacta td { padding: 8px 10px; font-size: 13px; }

/* Panel "Estado de caja" -- ver dashboard-resumen.js#pintarEstadoCaja(). */
.dash-estado-caja { display: flex; flex-direction: column; gap: 14px; }

.dash-estado-caja-pill { display: flex; justify-content: flex-end; }

.dash-estado-caja-filas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.dash-estado-caja-filas > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--muted);
}

.dash-estado-caja-filas strong { font-variant-numeric: tabular-nums; color: var(--text); }
.dash-estado-caja-filas strong.is-up { color: var(--status-good); }
.dash-estado-caja-filas strong.is-down { color: var(--status-critical); }

.dash-estado-caja-saldo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.dash-estado-caja-saldo span { font-size: 13px; color: var(--muted); }
.dash-estado-caja-saldo strong { font: 800 var(--fs-title, 28px)/1.1 var(--font); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

.dash-estado-caja-acciones { display: flex; gap: 8px; }
.dash-estado-caja-acciones a { flex: 1; text-align: center; text-decoration: none; padding: 9px 14px; }

@media (prefers-reduced-motion: reduce) {
  .dash-chart-tooltip { transition: none; }
  .dash-tab-glider { transition: none; }
}

/* =========================================================
   Widgets reordenables/redimensionables (js/dashboard-widgets.js) --
   posición y tamaño sugeridos por defecto, editables por el usuario.
   ========================================================= */
.dash-widget-handle {
  cursor: grab;
  color: var(--muted);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, color 0.15s ease;
  padding: 2px;
  margin: -2px -2px -2px 4px;
  flex-shrink: 0;
}

.dash-kpi-card:hover .dash-widget-handle,
.dash-chart-card:hover .dash-widget-handle,
.dash-widget-handle:focus-visible,
.is-widget-editable .dash-widget-handle {
  opacity: 1;
  pointer-events: auto;
}

/* Los widgets se arrastran directamente; una pulsación sostenida activa el
   mismo gesto en pantallas táctiles. */
.is-widget-editable > * {
  cursor: grab;
  touch-action: pan-y;
}

.is-widget-editable > *:active {
  cursor: grabbing;
}

.dash-widget-handle:hover { color: var(--accent); }
.dash-widget-handle:active { cursor: grabbing; }

/* Grip de tamaño -- esquina inferior derecha, se arrastra horizontalmente
   (como el tamaño de un widget de iPhone) en vez de tocar un botón de texto
   "Compacto/Normal/Ancho". touch-action:none es necesario: sin esto un dedo
   arrastrando el grip en una pantalla táctil scrollea la página entera en
   vez de redimensionar. */
.dash-widget-resize {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: var(--muted);
  opacity: 0;
  cursor: ew-resize;
  touch-action: none;
  transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.dash-kpi-card:hover .dash-widget-resize,
.dash-chart-card:hover .dash-widget-resize,
.dash-widget-resize:focus-visible,
.is-widget-editable .dash-widget-resize {
  opacity: 1;
}
.dash-widget-resize:hover,
.dash-widget-resize:focus-visible { color: var(--accent); background: var(--surface-2); }
.dash-widget-resize:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.is-resizing { box-shadow: 0 0 0 2px var(--jade-glow, var(--accent)); transition: none; }
.is-resizing .dash-widget-resize { opacity: 1; color: var(--accent); }

/* Ancla el handle arriba a la derecha de una KPI card sin alterar su
   layout normal (value/label siguen apilados igual que siempre). */
.dash-kpi-card { position: relative; padding-top: 42px; }
.dash-kpi-card > .dash-widget-handle { position: absolute; top: 10px; right: 10px; }

.dash-widget-actions { position: absolute; display: flex; gap: 6px; top: 10px; right: 34px; opacity: 0; pointer-events: none; transform: translateY(-2px); transition: opacity .18s var(--ease), transform .18s var(--ease); }
.dash-kpi-card:hover .dash-widget-actions, .dash-kpi-card:focus-within .dash-widget-actions { opacity: 1; pointer-events: auto; transform: none; }
.dash-widget-actions button, .dash-widget-library-btn { min-height: 30px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--muted); font: 600 11px var(--font); cursor: pointer; padding: 4px 9px; }
.dash-widget-actions button:hover, .dash-widget-library-btn:hover { border-color: var(--accent); color: var(--text); }
.dash-widget-actions button:focus-visible, .dash-widget-library-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dash-chart-head { position: relative; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px; min-width: 0; }
.dash-chart-head > h2,
.dash-chart-head > h3,
.dash-chart-head > .dash-chart-title { flex: 1 1 120px; min-width: 0; overflow-wrap: anywhere; }
.dash-chart-head > * { min-width: 0; }

.is-dragging { opacity: 0.4; }

/* Botón de tamaño de un gráfico (normal <-> ancho) -- capsula chica junto
   al título, mismo lenguaje que .dash-badge-tab pero de un solo botón. */
.dash-widget-tamano-btn {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--muted);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 8px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.dash-widget-tamano-btn:hover { color: var(--accent); border-color: var(--accent); }

.dash-chart-card.is-wide { grid-column: span 2; }
.dash-kpi-card.is-compact,
.dash-chart-card.is-compact { grid-column: span 1; }
.dash-widget-tamano-btn { transition: color .22s ease, background-color .24s ease, border-color .24s ease, transform .22s cubic-bezier(.16,1,.3,1); }
.dash-widget-tamano-btn:active { transform: scale(.97); }

.dash-widgets-restablecer {
  background: none;
  border: none;
  color: var(--muted);
  font-family: var(--font);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.dash-widgets-restablecer:hover { color: var(--accent); }

.dash-widget-library-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 7px 12px; font-size: 12px; backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); }
.dash-widget-library { max-width: 580px; }
.dash-widget-library .dash-modal-head { align-items: flex-start; }
.dash-widget-library .dash-modal-head p { margin: 4px 30px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.dash-widget-library-list { display: grid; gap: 8px; margin-top: 20px; }
.dash-widget-library-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; cursor: pointer; }
.dash-widget-library-item:hover { background: var(--surface-2); border-color: var(--b1, var(--border)); }
.dash-widget-library-item span:first-child { min-width: 0; }
.dash-widget-library-item strong, .dash-widget-library-item small { display: block; overflow-wrap: anywhere; }
.dash-widget-library-item small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.dash-widget-library-item input { position: absolute; opacity: 0; }
.dash-widget-switch { position: relative; width: 50px; height: 30px; flex: 0 0 auto; border-radius: 999px; background: color-mix(in srgb, var(--text) 18%, var(--surface)); transition: background-color .2s var(--ease); }
.dash-widget-switch::after { content: ''; position: absolute; width: 24px; height: 24px; top: 3px; left: 3px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s var(--ease); }
.dash-widget-library-item input:checked + .dash-widget-switch { background: var(--status-success); }
.dash-widget-library-item input:checked + .dash-widget-switch::after { transform: translateX(20px); }
.dash-widget-library-item input:focus-visible + .dash-widget-switch { outline: 2px solid var(--accent); outline-offset: 3px; }

.dash-view-head-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

/* Botón "Personalizar" -- icono de grilla 2x2, prendido/apagado (aria-pressed). */
.dash-personalizar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px 6px 12px;
  color: var(--muted);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.dash-personalizar-btn:hover { color: var(--text); border-color: var(--accent); }

.dash-personalizar-btn.is-active {
  color: var(--accent-hover);
  border-color: var(--accent);
  background: var(--jade-dim, var(--surface-2));
}

/* Solo desktop -- en tablet/mobile el layout de #resumen es fijo (ver
   PASO 5 en docs/DASHBOARD-DESIGN-REFERENCE.md). */
@media (max-width: 1024px) {
  .dash-personalizar-btn { display: none; }
}

/* =========================================================
   Selector de rango de fechas (js/dashboard-daterange.js) — botón trigger +
   popover anclado, mismos tokens que el resto (--surface/--border/--radius),
   mismo lenguaje de "cápsula" que .dash-status-pill/.cta para los atajos.
   ========================================================= */
.dash-daterange-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Mismo padding vertical que .dash-badge-tab -- misma familia de
     "píldora" de filtro. Antes eran 2px más alto y, alineados por
     flex-start (ej. Pedidos), quedaba visiblemente más abajo/más grande
     que el resto de los filtros de la misma fila. */
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.dash-daterange-trigger::before {
  content: '';
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
}

.dash-daterange-trigger:hover { border-color: var(--accent); }
.dash-daterange-trigger.is-active { color: var(--accent); border-color: var(--accent); }

/* Variante "campo de formulario" -- mismo trigger, pero dentro de un
   .auth-form .dash-form-grid junto a inputs/selects normales necesita la
   misma caja rectangular que ellos (12px de radio, ancho completo, mismo
   padding/alto), no la píldora de filtro flotante de arriba. Reemplaza
   cualquier <input type="date"> suelto -- mismo calendario en toda la app. */
.auth-form .dash-daterange-trigger.is-field {
  width: 100%;
  justify-content: flex-start;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--bg);
  font-size: 16px;
  color: var(--text);
}
.auth-form .dash-daterange-trigger.is-field:not(.is-active) { color: var(--muted); }

.dash-daterange-panel {
  position: absolute;
  z-index: 20;
  margin-top: 6px;
  background: var(--bg);
  background-color: var(--bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 16px 32px var(--shadow);
  padding: 14px;
  /* Ancho fijo, no max-content: con flex-wrap en .dash-daterange-badges,
     max-content mide como si las badges NUNCA envolvieran (todas en una
     sola fila), dejando el panel mucho más ancho de lo necesario -- hasta
     el punto de desbordar viewports angostos. 264px es lo que ocupa la
     grilla de 7 columnas del calendario (7×32px + 6×2px de gap) + padding. */
  width: 264px;
  max-width: calc(100vw - 32px);
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  transform-origin: top left;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}

.dash-daterange-panel.is-open { opacity: 1; transform: translateY(0) scale(1); }

.dash-daterange-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.dash-daterange-badge {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.dash-daterange-badge:hover { border-color: var(--accent); color: var(--accent); }
.dash-daterange-badge:active { transform: scale(.97); }

.dash-daterange-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 13px;
  text-transform: capitalize;
}

.dash-daterange-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 32px);
  gap: 2px;
}

.dash-daterange-cal-weekday {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  padding-bottom: 4px;
}

.dash-daterange-day {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.dash-daterange-day:hover { background: var(--surface-2); }
.dash-daterange-day.is-today { font-weight: 800; color: var(--accent); }
.dash-daterange-day.is-in-range { background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 0; }

.dash-daterange-day.is-selected-start,
.dash-daterange-day.is-selected-end {
  background: var(--accent);
  color: #ffffff;
}

/* Sección de horas (conHora en dashboard-daterange.js) -- solo se agrega
   cuando el caller necesita precisión de hora, no solo el día (ej.
   Reportes). Mismo idioma visual del panel: borde superior como separador,
   igual que .dash-daterange-badges lo hace por abajo. */
.dash-daterange-horas {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dash-daterange-horas-row { display: flex; gap: 10px; }
.dash-daterange-horas-row label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
}
.dash-daterange-horas-row input[type="time"] {
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: var(--font);
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  color-scheme: dark;
  width: 100%;
}
.dash-daterange-horas-row input[type="time"]:focus { outline: none; border-color: var(--accent); }
:root[data-theme="light"] .dash-daterange-horas-row input[type="time"],
:root[data-theme="grey"] .dash-daterange-horas-row input[type="time"] { color-scheme: light; }
.dash-daterange-aplicar {
  width: 100%;
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.dash-daterange-aplicar:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.dash-daterange-aplicar:disabled { opacity: .5; cursor: not-allowed; }

/* =========================================================
   Badge tabs -- filtro de un solo valor activo a la vez (ej. estado de
   producto/pedido), mismo lenguaje de cápsula que .dash-daterange-badge
   pero con estado "activo" persistente (no es un popover, es un filtro
   siempre visible). Genérico: cualquier vista del dashboard puede armar
   una fila de estas.
   ========================================================= */
.dash-badge-tabs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.dash-badge-tab {
  position: relative;
  z-index: 1;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--muted);
  font-family: var(--font);
  font-size: var(--fs-body-small, 13px);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.28s var(--ease), border-color 0.2s var(--ease), transform 0.28s var(--ease);
}

.dash-badge-tab:hover { color: var(--text); border-color: var(--accent); }

.dash-badge-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.dash-badge-tab:active { transform: scale(.97); }

.dash-badge-tab:disabled,
.dash-badge-tab[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.dash-badge-tab.is-active {
  background: transparent;
  border-color: transparent;
  color: #ffffff;
}

.dash-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

.dash-form-grid .full { grid-column: 1 / -1; }
.dash-form-grid .dash-form-section {
  margin: 26px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.95rem;
  font-weight: 600;
}
.dash-form-grid .dash-form-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.dash-form-grid .dash-form-section-note { margin: 4px 0 0; }
/* .dash-form-grid tiene row-gap:0 a propósito (el ritmo vertical lo dan los
   <label> con su propio margin-top:14px, ver 4798). Un <button> de envío
   como hijo directo de la grilla NO es un <label> -- sin este margen queda
   pegado a la fila de arriba (hallazgo real 2026-09-15: "Registrar pesaje"/
   "Confirmar venta"/"Guardar cambios" pegados al último campo). No aplica
   si el botón ya vive dentro de .dash-modal-actions (ese wrapper trae su
   propio margin-top:22px, ver línea ~4150) -- evita doble margen ahí. */
.dash-form-grid > button { margin-top: 22px; }
/* Hallazgo real 2026-09-15: ".auth-form label:first-child{margin-top:0}"
   (línea ~1940) está pensado para un formulario de 1 columna -- en una
   grilla de 2 columnas solo anula el margen del campo de la IZQUIERDA de
   la primera fila, dejando a su compañero de la derecha 14px más abajo
   (la fila entera queda "escalonada"). Afecta cualquier .dash-form-grid de
   2+ columnas de TODO el panel, no un formulario puntual. Se restaura el
   margen parejo para toda la primera fila; .dash-settings-card es de 1
   columna (grid-template-columns:1fr, línea ~4099) y sí necesita el
   comportamiento original, por eso se re-excluye con más especificidad. */
.dash-form-grid label:first-child { margin-top: 14px; }
.dash-settings-card .dash-form-grid label:first-child { margin-top: 0; }

.dash-panel {
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.dash-panel h2 { font: 700 var(--fs-card, 16px)/1.35 var(--font); margin: 0 0 var(--sp-4, 16px); }

/* Grid de tarjetas por dominio (Configuración) -- cada tarjeta es un
   subconjunto temático de platform_settings, pero todas viven dentro del
   mismo <form>/submit único (ver dashboard-configuracion.js): reorganiza
   visualmente sin duplicar la lógica de guardado. */
.dash-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 4px;
}

.dash-settings-card {
  min-width: 0;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.dash-settings-card-wide { grid-column: 1 / -1; }

.dash-settings-card-head { margin-bottom: 14px; }
.dash-settings-card-head h2 { font: 700 var(--fs-card, 16px)/1.35 var(--font); margin: 0 0 4px; }
.dash-settings-card-head p { margin: 0; color: var(--muted); font: 400 var(--fs-body-small, 13px)/1.5 var(--font); }

.dash-settings-card .dash-form-grid { grid-template-columns: 1fr; gap: 12px 0; }

.dash-modal-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--shadow) 70%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}

.dash-modal {
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}

.dash-modal[hidden],
.dash-modal-overlay[hidden] { display: none; }

/* Variante ancha reutilizable (Fase 2) para modales con contenido tabular
   (ej. Mesas del restaurante) -- mismo patrón que .dash-customer-detail/
   .dash-custom-modal más abajo: una clase adicional sobre .dash-modal que
   solo cambia max-width, nunca un componente de modal paralelo. */
.dash-modal-wide { max-width: 760px; }
@media (max-width: 820px) { .dash-modal-wide { max-width: calc(100vw - 40px); } }

.dash-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.dash-modal-head h2 { margin: 0; font: 700 var(--fs-card, 16px)/1.35 var(--font); }

.dash-modal-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
/* En el celular los botones van uno debajo del otro, a todo el ancho, con el
   principal (el último en el HTML) arriba: antes la fila no envolvía y, al
   estar alineada a la derecha, empujaba los primeros botones fuera del modal. */
@media (max-width: 640px) {
  .dash-modal-actions { flex-direction: column-reverse; align-items: stretch; }
  .dash-modal-actions > button, .dash-modal-actions > a { width: 100% !important; margin: 0 !important; text-align: center; }
}

.dash-store-select {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
}

.dash-business-switcher { position: relative; z-index: 20; overflow: visible; display: grid; grid-template-columns: max-content minmax(160px, 300px) max-content minmax(180px, 360px) minmax(0, 1fr); align-items: center; gap: 12px 16px; padding: 16px 20px; margin-bottom: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); box-shadow: 0 12px 30px var(--shadow-soft); }
.dash-business-switcher[hidden] { display: none; }
.dash-business-switcher:has(#dash-organization-select[hidden]) { grid-template-columns: max-content minmax(0, 360px) minmax(0, 1fr); }
@media (max-width: 1100px) {
  .dash-business-switcher,
  .dash-business-switcher:has(#dash-organization-select[hidden]) { grid-template-columns: minmax(0, 1fr); }
}
#dash-view { display: contents; }
.dash-main > .dash-business-switcher { order: -1; }
#dash-view > .dash-view-head { order: -2; }
.dash-business-switcher label { font-weight: 600; font-size: 14px; }
.dash-business-switcher span { min-width: 0; font-size: 13px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
/* Hallazgo 2026-09-15 (previo a ganadería, no introducido por esa vertical):
   la última columna (minmax(0,1fr)) del switcher podía colapsar a unos
   pocos px de ancho según cómo el navegador repartía el espacio entre las 5
   columnas, dejando el texto de ayuda envuelto letra por letra. Un ancho
   mínimo legible evita el colapso sin tocar min-width:0 del resto de spans. */
#dash-business-switcher-help { min-width: 220px; }
.dash-business-switcher .dash-store-select { min-width: 0; min-height: 44px; width: 100%; font-size: 16px; border-radius: 12px; }
.dash-business-switcher select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.dash-business-switcher .glass-select { width: 100%; }
.dash-business-switcher .glass-select-trigger { min-height: 44px; border-radius: 12px; }
/* Fase 3 (037_billing_plans.sql) -- banner de aviso (5 días de gracia) y
   pantalla de bloqueo completo (suspendida por impago). Mismo criterio de
   color semántico que .dash-status-pill.is-warning/is-cancelled: ámbar para
   "avisá pero todavía funciona", el crítico para "cortado de verdad". */
.dash-billing-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--status-warning) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--status-warning) 35%, transparent);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: color-mix(in srgb, var(--status-warning) 85%, var(--text));
  font-size: 13px;
  line-height: 1.5;
}

.dash-billing-banner strong { display: block; margin-bottom: 2px; color: var(--text); }
.dash-billing-banner { flex-wrap: wrap; align-items: center; }
.dash-billing-banner strong { flex-basis: 100%; }
.dash-billing-banner.is-danger {
  background: color-mix(in srgb, var(--status-critical) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--status-critical) 35%, transparent);
  color: color-mix(in srgb, var(--status-critical) 80%, var(--text));
}
.dash-billing-banner-cta { margin-left: auto; font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.dash-billing-locked .cta { display: inline-block; margin-top: 12px; width: auto; text-decoration: none; }
/* 119 -- pago con tarjeta (Tilopay) y aviso del resultado al volver. */
.dash-billing-banner-acciones { display: flex; align-items: center; gap: 14px; margin-left: auto; flex-wrap: wrap; }
.dash-suscripcion-pago { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dash-suscripcion-pago h2 { margin-bottom: 4px; }
.store-document-row.is-muted { color: var(--muted); font-size: 0.92em; }

/* 125 -- factura electrónica: pasos de conexión, CABYS y acciones. */
.dash-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.dash-panel-head h2 { margin: 0; }
.dash-table-acciones { white-space: nowrap; text-align: right; }
.dash-table-acciones .btn-ghost { margin: 2px 0; }
.fiscal-pasos { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.fiscal-paso { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; }
.fiscal-paso h3 { margin: 0 0 6px; font-size: 15px; }
.fiscal-paso-marca { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border); display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; }
.fiscal-paso.is-listo .fiscal-paso-marca { background: var(--accent); border-color: var(--accent); }
#fiscal-numeracion summary { cursor: pointer; list-style: none; }
#fiscal-numeracion summary::-webkit-details-marker { display: none; }
.fiscal-numeracion-titulo { display: inline; margin: 0; }
#fiscal-numeracion summary::after { content: "▾"; margin-left: 8px; color: var(--text-muted, #888); }
#fiscal-numeracion details[open] summary::after { content: "▴"; }
.fiscal-paso details summary { cursor: pointer; color: var(--accent); font-weight: 600; margin: 4px 0 8px; }
.fiscal-guia { margin: 6px 0 14px 18px; padding: 0; display: grid; gap: 4px; }
.prod-cabys-buscador { display: flex; gap: 8px; align-items: center; }
.prod-cabys-buscador input, .prod-cabys-buscador .glass-select { flex: 1; min-width: 0; }
.prod-cabys-resultados { display: grid; gap: 4px; }
.prod-cabys-resultados:empty { display: none; }
.prod-cabys-opcion { text-align: left; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.prod-cabys-opcion:hover, .prod-cabys-opcion:focus-visible { border-color: var(--accent); }
.dash-billing-banner-acciones .dash-billing-banner-cta { margin-left: 0; }
.dash-billing-pagar { min-height: 38px; padding: 8px 16px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font: 700 13px/1 var(--font); cursor: pointer; white-space: nowrap; }
.dash-billing-pagar:hover { filter: brightness(1.08); }
.dash-billing-pagar:disabled { opacity: .65; cursor: progress; }
.dash-billing-pagar:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cobros-cuenta { display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; }
.cobros-cuenta.is-ok { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.cobros-tabla td small { display:block; margin-top:2px; color:var(--muted); font-size:12px; font-weight:400; }
.cobros-cuenta h2 { margin-bottom:6px; }
.cobros-qr { display:block; margin:14px auto; max-width:100%; height:auto; border-radius:12px; background:#fff; padding:8px; }
.cobros-monedas { display:flex; gap:16px; border:0; padding:0; margin:0; }
.cobros-monedas legend { font-weight:600; margin-bottom:6px; }
.dash-billing-moneda { min-height: 38px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface, transparent); color: inherit; font: 600 13px/1 var(--font); }
.dash-billing-pagar-error { flex-basis: 100%; margin: 4px 0 0; font-weight: 600; }
.dash-billing-locked .dash-billing-pagar { min-height: 44px; margin-top: 12px; padding: 12px 22px; font-size: 14px; }
.dash-billing-locked .dash-billing-locked-acciones { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dash-billing-banner.is-ok {
  background: color-mix(in srgb, var(--status-success) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--status-success) 35%, transparent);
  color: color-mix(in srgb, var(--status-success) 80%, var(--text));
}
.dash-billing-banner-cerrar { margin-left: auto; min-width: 32px; min-height: 32px; border: 0; background: transparent; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; border-radius: 8px; }
.dash-billing-banner-cerrar:focus-visible { outline: 2px solid var(--accent); }
.dash-billing-balance { display: grid; gap: 4px; margin-bottom: 16px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-2); backdrop-filter: blur(var(--glass-blur)); }
.dash-billing-balance span, .dash-billing-balance small { color: var(--muted); }
.dash-billing-balance strong { font: 800 var(--fs-display, 40px)/1.1 var(--font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dash-billing-notice { margin: 10px 0 16px; padding: 10px 13px; border: 1px solid color-mix(in srgb, var(--status-warning) 28%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--status-warning) 8%, transparent); color: var(--muted); font-size: 13px; line-height: 1.45; }
.dash-billing-notice.is-ok { border-color: color-mix(in srgb, var(--status-success) 35%, transparent); background: color-mix(in srgb, var(--status-success) 10%, transparent); color: var(--text); }

.dash-billing-locked {
  max-width: 520px;
  margin: 48px auto;
  padding: 32px;
  text-align: center;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--status-critical) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--status-critical) 30%, transparent);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 20px 50px var(--shadow-soft);
}

.dash-billing-locked h1 { margin: 0 0 12px; font-size: 20px; }
.dash-billing-locked p { margin: 0 0 8px; color: var(--muted); font-size: 14px; line-height: 1.55; }

.dash-report-period { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 24px; }
.dash-report-period select { min-height: 44px; }
html:has(.dash-shell) { scrollbar-width: thin; scrollbar-color: var(--muted) var(--bg); }
html:has(.dash-shell)::-webkit-scrollbar { width: 10px; }
html:has(.dash-shell)::-webkit-scrollbar-track { background: var(--bg); }
html:has(.dash-shell)::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 55%, transparent); border: 3px solid var(--bg); border-radius: 99px; }

@media (prefers-reduced-motion: reduce) {
  .dash-skeleton { animation: none; }
  .dash-sidebar { transition: none; }
}

/* Tablet (768-1024px): sidebar fijo, colapsado a solo íconos (64px) --
   distinto de mobile (sigue siendo un panel visible, no un drawer). */
@media (min-width: 768px) and (max-width: 1024px) {
  .dash-sidebar { width: 64px; padding: 20px 8px; }
  .dash-nav-link { justify-content: center; padding: 12px 0; }
  .dash-nav-link svg { margin: 0; }
  .dash-nav-label,
  .dash-nav-badge,
  .dash-nav-group-label { display: none; }
  .dash-main { margin-left: 64px; }
  .dash-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Última tarjeta sola en su fila (total de tarjetas impar, ej. 3 KPIs de
     Inventario) -- sin esto queda pegada a la izquierda con un hueco vacío
     al lado en vez de ocupar el ancho completo. */
  .dash-kpi-grid .dash-kpi-card:nth-child(odd):last-child { grid-column: 1 / -1; }
  .dash-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-chart-card.is-wide { grid-column: span 2; }
}

/* Mobile (<768px): sidebar como drawer/overlay (toggle en el topbar),
   layout de una sola columna, tiles de KPI en grilla 2x2. */
@media (max-width: 767px) {
  .dash-sidebar-toggle { display: flex; }

  .dash-sidebar {
    transform: translateX(-100%);
    width: 260px;
    box-shadow: 0 20px 40px var(--shadow);
  }

  .dash-sidebar.open { transform: translateX(0); }

  .dash-main { margin-left: 0; padding: 24px 16px; }

  .dash-user-email { max-width: 120px; }

  .dash-form-grid { grid-template-columns: 1fr; }
  .dash-settings-grid { grid-template-columns: 1fr; }
  .dash-settings-card-wide { grid-column: auto; }

  .dash-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-kpi-grid .dash-kpi-card:nth-child(odd):last-child { grid-column: 1 / -1; }

  .dash-chart-grid { grid-template-columns: 1fr; }
  .dash-chart-card.is-wide { grid-column: auto; }
  .dash-kpi-card.is-wide { grid-column: span 2; }
  .dash-business-switcher { grid-template-columns: 1fr; gap: 8px; padding: 16px; }
  .dash-business-switcher label { margin-bottom: 2px; }
  .dash-business-switcher .dash-store-select { width: 100%; }
  /* right:42px (no 10px) -- .dash-widget-resize (el grip de tamaño) vive
     siempre en esa misma esquina inferior derecha, en TODAS las tarjetas
     (no solo en modo edición: hacerReordenable() agrega is-widget-editable
     sin condición). Con right:10px acá "Quitar" quedaba literalmente
     encimado con el ícono de redimensionar en mobile -- hallazgo de
     auditoría 2026-09-13. */
  .dash-widget-actions { opacity: 1; pointer-events: auto; top: auto; right: 42px; bottom: 10px; }
  .dash-kpi-card { padding-bottom: 48px; }
  /* La chispa de tendencia (.dash-kpi-sparkline) vive siempre abajo a la
     derecha de la tarjeta -- en mobile las acciones (Quitar/tamaño) también
     se anclan abajo para quedar siempre visibles, así que en las tarjetas
     con chispa hay que subirlas para no superponerse. */
  .dash-kpi-card.has-sparkline .dash-widget-actions { bottom: 52px; }
  .dash-kpi-card.has-sparkline { padding-bottom: 84px; }

  /* Objetivo táctil mínimo de 44px en los controles de acción del panel. */
  .dash-icon-btn,
  .dash-widget-tamano-btn,
  .btn-jade,
  .btn-ghost,
  .dash-daterange-trigger {
    min-height: 44px;
  }

  .dash-topbar-date { display: none; }
}

@media (max-width: 640px) {
  .dash-store-name,
  .dash-breadcrumb-sep,
  .dash-breadcrumb-vista { display: none; }
}

/* Punto de venta (#pos, js/dashboard-pos.js) — grilla táctil + carrito fijo,
   mismos tokens de superficie/glass que .dash-kpi-card, pensado para tocar
   rápido (referencias: Shopify POS smart grid, Square tile grid). */
.pos-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  align-items: start;
}

.pos-terminal-context {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
}
.pos-terminal-context label { font-size: 13px; font-weight: 700; }
.pos-terminal-context .glass-select,
.pos-terminal-context .dash-store-select { min-width: 190px; flex: 0 1 300px; }
.pos-terminal-context #pos-terminal-status { color: var(--muted); font-size: 13px; }
.pos-terminal-context #pos-terminal-status::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 999px; background: var(--status-warning); }
.pos-terminal-context:has(#pos-terminal-status:not(:empty)) { backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); }

.terminales-pos-panel { margin-top: 24px; }
.terminales-pos-panel code { color: var(--muted); font: 600 var(--fs-caption, 12px)/1.3 var(--font-mono); }
.terminales-pos-form { margin-top: 18px; }

.pos-buscador,
.dash-search-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  margin-bottom: 16px;
}

.pos-buscador:focus,
.dash-search-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.pos-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.pos-tile {
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  min-height: 88px;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.15s var(--ease), border-color 0.15s ease, box-shadow 0.15s ease;
}

.pos-tile:hover,
.pos-tile:focus-visible {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 8px 20px var(--shadow-soft);
}

.pos-tile:active { transform: scale(0.97); }

.pos-tile-nombre { color: var(--text); font-weight: 600; font-size: 14px; overflow-wrap: break-word; }
.pos-tile-precio { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.pos-tile-stock { font-size: 12px; color: var(--muted); }

.pos-carrito {
  position: sticky;
  top: 16px;
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 140px);
}

.pos-carrito h2 { font-size: 16px; margin: 0 0 12px; }
.pos-carrito { color: var(--text); }

.pos-carrito-lineas {
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.pos-linea {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.pos-linea-info { display: flex; flex-direction: column; min-width: 0; }
.pos-linea-nombre { color: var(--text); font-size: 13px; font-weight: 600; overflow-wrap: break-word; }
.pos-linea-precio { font-size: 12px; color: var(--muted); }
.pos-linea-subtotal { display: flex; flex-direction: column; align-items: flex-end; color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; }
.pos-linea-subtotal s { color: var(--muted); font-size: 11px; font-weight: 500; }
.pos-linea-descuento { display: flex; align-items: center; gap: 5px; margin-top: 5px; color: var(--muted); font-size: 11px; font-weight: 600; }
.pos-linea-descuento input { width: 88px; min-height: 30px; padding: 4px 7px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; }

.pos-linea-qty {
  display: flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

.pos-qty-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.pos-qty-btn:hover { border-color: var(--accent); }

.pos-linea-quitar {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pos-linea-quitar:hover { color: var(--status-critical); }
.pos-linea-quitar svg { width: 14px; height: 14px; }

.pos-carrito-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  margin-bottom: 10px;
}

.pos-carrito-resumen { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; padding: 10px 0 2px; color: var(--muted); font-size: 12px; }
/* display:grid arriba empata en especificidad con [hidden] del navegador y
   gana por venir después en la cascada -- sin esto, "Subtotal/Descuentos"
   quedaba visible con ₡0 en un carrito vacío aunque dashboard-pos.js ya
   pone resumenEl.hidden = true. Hallazgo de auditoría 2026-09-13. */
.pos-carrito-resumen[hidden] { display: none; }
.pos-carrito-resumen strong { color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.pos-carrito-resumen strong:last-child { color: var(--status-success); }
.pos-carrito-total strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.pos-save-customer { width: fit-content; margin: -2px 0 2px; }

.pos-pagos-fieldset { display: grid; gap: 10px; margin: 0; padding: 14px; border: 1px solid var(--border); border-radius: 12px; }
.pos-pagos-fieldset legend { padding: 0 5px; color: var(--text); font-size: 13px; font-weight: 700; }
#pos-pagos-lista { display: grid; gap: 9px; }
.pos-pago-fila { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(110px, .7fr) auto; gap: 8px; align-items: end; }
.pos-pago-fila label { display: grid; gap: 5px; margin: 0; color: var(--muted); font-size: 11px; font-weight: 600; }
.pos-pago-fila input { width: 100%; min-height: 42px; }
.pos-pago-fila .glass-select,
.pos-pago-fila .dash-store-select { width: 100%; min-width: 0; }
.pos-pago-fila .pos-linea-quitar { margin-bottom: 9px; }
.pos-agregar-pago { width: fit-content; }
.pos-pagos-balance { margin: 0; }
.pos-pagos-balance.is-complete { color: var(--status-success); }

.dash-refund-modal { max-width: 720px; }
.refund-items { display: grid; gap: 8px; margin: 0; padding: 12px; border: 1px solid var(--border); border-radius: 12px; }
.refund-items legend { padding: 0 5px; color: var(--text); font-size: 13px; font-weight: 700; }
.refund-item { display: grid; grid-template-columns: auto minmax(0, 1fr) 84px; gap: 10px; align-items: center; margin: 0; padding: 9px 0; border-bottom: 1px solid var(--border); }
.refund-item:last-child { border-bottom: 0; }
.refund-item > span { display: grid; gap: 2px; }
.refund-item small { color: var(--muted); font-weight: 500; }
.refund-item input[type="number"] { width: 100%; min-height: 38px; }
.refund-summary { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--border); }
.refund-summary strong { font-size: 20px; font-variant-numeric: tabular-nums; }

@media (max-width: 1024px) {
  .pos-layout { grid-template-columns: 1fr; }
  .pos-carrito { position: static; max-height: none; }
}

.pos-recibo-lineas {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  font-size: 14px;
}

.pos-recibo-linea {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.pos-recibo-linea small { color: var(--status-success); }

@media (max-width: 520px) {
  .pos-linea { grid-template-columns: minmax(0, 1fr) auto auto; }
  .pos-linea-subtotal { grid-column: 2; }
  .pos-pago-fila { grid-template-columns: 1fr auto; }
  .pos-pago-fila label { grid-column: 1; }
  .pos-pago-fila .pos-linea-quitar { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* Impresión (js/impresion.js): tiquetes de 58/80 mm y etiquetas. El tamaño de
   página lo inyecta AstrcImpresion solo mientras imprime. */
#astrc-impresion { display: none; }
@media print {
  body.imprimiendo > *:not(#astrc-impresion) { display: none !important; }
  body.imprimiendo { background: #fff !important; }
  body.imprimiendo #astrc-impresion { display: block; color: #000; font-family: system-ui, sans-serif; }
  .impresion-ticket { width: 72mm; margin: 0 auto; padding: 4mm 0; font-size: 12px; line-height: 1.4; }
  .impresion-ticket.is-58 { width: 48mm; font-size: 10px; }
  .impresion-ticket h1 { margin: 0 0 2px; font-size: 15px; text-align: center; }
  .impresion-ticket.is-58 h1 { font-size: 13px; }
  .impresion-ticket h2 { margin: 6px 0 2px; font-size: 13px; }
  .impresion-ticket .ticket-centro { margin: 0; text-align: center; }
  .impresion-ticket .store-meta, .impresion-ticket p { margin: 3px 0; color: #000; }
  .impresion-ticket .pos-recibo-linea, .impresion-ticket .ticket-fila { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
  .impresion-ticket .pos-recibo-linea > span:last-child, .impresion-ticket .ticket-fila > span:last-child { white-space: nowrap; }
  .impresion-ticket .pos-recibo-lineas, .impresion-ticket .ticket-bloque { margin: 6px 0; padding: 6px 0; border-top: 1px dashed #000; border-bottom: 1px dashed #000; }
  .impresion-ticket .ticket-grande { font-size: 1.35em; font-weight: 700; }
  .impresion-ticket .recibo-gracias { margin-top: 10px; text-align: center; }
  .impresion-etiquetas .etiqueta { display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; overflow: hidden; padding: 1.5mm 2mm; break-inside: avoid; page-break-inside: avoid; font-size: 8px; line-height: 1.15; }
  .impresion-etiquetas.is-50x25 .etiqueta { width: 50mm; height: 25mm; break-after: page; page-break-after: always; }
  .impresion-etiquetas.is-40x30 .etiqueta { width: 40mm; height: 30mm; break-after: page; page-break-after: always; }
  .impresion-etiquetas.is-carta { display: grid !important; grid-template-columns: repeat(3, 66.7mm); grid-auto-rows: 25.4mm; column-gap: 3.2mm; }
  .impresion-etiquetas.is-carta .etiqueta { width: 66.7mm; height: 25.4mm; padding: 2mm 4mm; font-size: 9px; }
  .etiqueta-nombre { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .etiqueta .codigo-barras { display: block; width: 100%; height: 9mm; margin: 0.5mm 0; }
  .impresion-etiquetas.is-40x30 .etiqueta .codigo-barras { height: 13mm; }
  .etiqueta-pie { display: flex; justify-content: space-between; gap: 4px; }
  .etiqueta-sin { font-style: italic; }
}

/* Escanear con la cámara (js/lector-codigos.js). */
.lector-camara-visor { position: relative; overflow: hidden; border-radius: 12px; background: #000; aspect-ratio: 4 / 3; }
.lector-camara-visor video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lector-camara-guia { position: absolute; inset: 30% 12%; border: 2px solid rgba(255, 255, 255, .85); border-radius: 10px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }
.lector-camara-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.lector-campo { display: flex; gap: 8px; align-items: center; }
.lector-campo > input { flex: 1; min-width: 0; }
.lector-aviso { margin: 6px 0 0; font-size: .9rem; }
.lector-aviso.is-error { color: var(--status-critical); }
.lector-aviso.is-ok { color: var(--status-success); }
.cocina-auto-imprimir { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: .9rem; color: var(--text-muted, inherit); cursor: pointer; }
.cocina-auto-imprimir input { width: auto; margin: 0; }
/* Catálogo interno ASTRC Glass — visible solo en #design-system para super_admin. */
.ds-preview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.ds-preview-card { min-width:0; padding:20px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:0 12px 30px var(--shadow-soft); }
.ds-preview-card-wide { grid-column:span 2; }
.ds-preview-card h2 { margin:0 0 16px; font-size:18px; }
.ds-eyebrow { margin:0 0 6px; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.ds-demo-switcher { display:grid !important; grid-template-columns:max-content minmax(150px,1fr) max-content minmax(150px,1fr); margin:0; }
.ds-demo-switcher span { grid-column:1 / -1; color:var(--muted); font-size:13px; }
.ds-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); margin:0; }
.ds-positive { color:var(--status-success,#35c759); }
.ds-notice-stack { display:grid; gap:8px; }
.ds-notice { padding:12px 14px; border:1px solid var(--border); border-radius:12px; font-size:13px; }
.ds-notice-info { background:color-mix(in srgb,#4da3ff 12%,var(--surface)); }
.ds-notice-warning { background:color-mix(in srgb,var(--status-warning,#f5a623) 12%,var(--surface)); }
.ds-notice-critical { background:color-mix(in srgb,var(--status-critical,#ff453a) 12%,var(--surface)); }
.ds-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:18px; }
.ds-actions .cta,.ds-actions .secondary { margin:0; width:auto; }
.ds-empty { display:grid; gap:4px; padding:18px; border:1px dashed var(--border); border-radius:12px; color:var(--muted); text-align:center; }
.ds-empty strong { color:var(--text); }
.ds-pos-line { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
.ds-pos-line small { display:block; margin-top:4px; color:var(--muted); }
.ds-qty { display:flex; align-items:center; gap:8px; }
.ds-qty button { width:28px; height:28px; border:1px solid var(--border); border-radius:9px; color:var(--text); background:var(--surface-2); cursor:pointer; }
.ds-pos-total { display:flex; justify-content:space-between; padding-top:16px; font-size:17px; }
.glass-select { position:relative; min-width:0; }
.glass-select > select { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.glass-select-trigger { display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:10px 14px; border:1px solid var(--border); border-radius:12px; color:var(--text); background:color-mix(in srgb,var(--surface-2) 84%,transparent); font:inherit; text-align:left; cursor:pointer; transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); }
.glass-select-trigger:hover { background:color-mix(in srgb,var(--surface-2) 96%,transparent); }
.glass-select-trigger:focus-visible { outline:0; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent); }
.glass-select-trigger:disabled { opacity:.55; cursor:not-allowed; }
/* Dentro de un formulario estándar, el trigger debe verse igual que sus
   inputs vecinos (mismo fondo que .auth-form input/select/textarea) -- sin
   esto hereda el tinte "jade" de --surface-2, pensado para superficies
   elevadas (switcher de negocio), y desentona junto a campos de texto planos. */
.auth-form .glass-select-trigger, .auth-form .glass-select-trigger:hover { background: var(--bg); }

/* Selector de código de país (phone-input.js): código a la izquierda con
   ancho fijo razonable, número de teléfono ocupa el resto. */
.phone-input { display: flex; gap: 8px; align-items: stretch; }
.phone-input .glass-select { flex: 0 0 168px; min-width: 0; }
.phone-input-numero { flex: 1 1 auto; min-width: 0; }
.glass-select-chevron { color:var(--muted); font-size:18px; line-height:1; transition:transform .18s var(--ease); }
.glass-select.open .glass-select-chevron { transform:rotate(180deg); }
/* position:fixed + z-index alto a propósito: glass-select.js porta este menú
   a <body> y lo posiciona con getBoundingClientRect() del trigger (ver
   posicionar() ahí). Cualquier tarjeta "glass" (backdrop-filter) que
   contenga el selector crea su propio contexto de apilamiento y atraparía
   un menú anidado sin importar su z-index interno -- vivir en <body> con
   position:fixed evita ese bug de raíz en cualquier lugar donde aparezca,
   incluso dentro de un modal (z-index:100). */
.glass-select-menu { position:fixed; z-index:1000; max-width:min(420px, calc(100vw - 32px)); display:grid; gap:3px; max-height:240px; padding:6px; overflow:auto; isolation:isolate; border:1px solid color-mix(in srgb,var(--border) 88%,var(--text) 12%); border-radius:14px; background:var(--bg); background-color:var(--bg); backdrop-filter:blur(calc(var(--glass-blur) + 6px)); -webkit-backdrop-filter:blur(calc(var(--glass-blur) + 6px)); box-shadow:0 18px 42px color-mix(in srgb,var(--shadow) 85%,transparent), inset 0 1px 0 rgba(255,255,255,.32); opacity:0; pointer-events:none; transform:translateY(-5px) scale(.98); transform-origin:top; transition:opacity .16s var(--ease), transform .16s var(--ease); }
.glass-select-menu.open { opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }
.glass-select-option { display:flex; width:100%; align-items:center; min-height:36px; padding:9px 12px; border:0; border-radius:9px; color:var(--text); background:transparent; font:inherit; font-size:14px; text-align:left; white-space:normal; overflow-wrap:break-word; cursor:pointer; }
.glass-select-option:hover,.glass-select-option:focus-visible { outline:0; background:color-mix(in srgb,var(--accent) 12%,var(--surface-2)); }
.glass-select-option.selected { color:var(--accent); font-weight:650; background:color-mix(in srgb,var(--accent) 9%,transparent); }
.glass-select-option.selected::after { margin-left:auto; content:'✓'; font-size:13px; }
.glass-select-option { position: relative; z-index: 1; }

/* Superficies flotantes: el material conserva profundidad Glass, pero el
   contenido debe tener una base suficientemente sólida para no mezclarse
   con tablas, gráficas o tarjetas del dashboard. */
.dash-modal-overlay {
  background: color-mix(in srgb, var(--bg) 72%, var(--shadow) 28%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.dash-modal {
  background: var(--bg);
  background-color: var(--bg);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--shadow) 88%, transparent), inset 0 1px 0 rgba(255,255,255,.22);
}

/* Ficha CRM: bloques breves y legibles dentro de la capa Glass opaca. */
.dash-customer-detail,.dash-supplier-detail { max-width: 880px; }
.dash-custom-modal { max-width: 680px; }
.custom-request-detail { display: grid; gap: 13px; }
.custom-request-detail h3,.custom-request-detail p { margin: 0; }
.custom-request-detail section { padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.custom-request-detail section h3 { margin: 0 0 6px; font-size: 14px; }
/* Fase 5: align-items:start (el default "stretch" de grid hacía que la
   sección más corta -- ej. Contactos con 0 items -- se estirara a la altura
   de su vecina, quedando un bloque gris vacío enorme; ver comentario de
   .store-empty más abajo, el mismo problema en dos capas). */
.customer-detail-columns,.supplier-detail-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.customer-detail-columns > section,.supplier-detail-columns > section { min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.customer-detail-columns h3,.supplier-detail-columns h3 { margin: 0 0 12px; font-size: 15px; }
.customer-detail-item,.supplier-detail-item { padding: 10px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.customer-detail-item small,.supplier-detail-item small { display: block; margin-top: 3px; color: var(--muted); line-height: 1.45; }
.customer-notes { display: grid; max-height: 260px; overflow: auto; }
.customer-detail-columns .btn-ghost,.supplier-detail-columns .btn-ghost { width: auto; margin-top: 12px; }
.customer-detail-columns .auth-form,.supplier-detail-columns .auth-form { gap: 8px; margin-top: 12px; }
.customer-purchase-history { grid-column: 1 / -1; }
.customer-purchase-history .dash-table-wrap { margin-top: 8px; }
@media (max-width: 720px) { .customer-detail-columns,.supplier-detail-columns { grid-template-columns: 1fr; } }
/* .store-empty (línea 947) trae padding:40px 0 pensado para una pantalla
   entera vacía ("Todavía no hay pedidos...") -- reusarlo tal cual dentro de
   una sección de 300px de ancho dejaba ~80px de aire solo por el mensaje.
   Acá se compacta y alinea a la izquierda, coherente con el resto de la
   sección en vez de centrado como un estado vacío de página completa. */
.customer-detail-columns .store-empty,.supplier-detail-columns .store-empty { padding: 4px 0; text-align: left; }
/* Cabecera de la ficha (Fase 5): reemplaza el <p> con <br> -- la cantidad de
   <br> variaba según qué campos opcionales existieran (teléfono, fiscal),
   dejando un espaciado distinto cada vez. flex+gap da el mismo ritmo
   siempre, tenga el cliente 1 o 3 líneas de datos. */
.customer-detail-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.customer-detail-head .btn-ghost { width: fit-content; margin-top: 4px; }

/* Compras: líneas y recepción con el mismo material opaco y legible. */
.dash-purchase-modal { max-width: 940px; }
.purchase-lines-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; }
.purchase-lines-head .btn-ghost { width: auto; margin: 0; }
.purchase-line-form { display: grid; grid-template-columns: minmax(190px, 1fr) 110px 150px auto; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.purchase-line-form input,.purchase-receipt-form input { min-width: 0; }
.purchase-receipt-form { margin-top: 16px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.purchase-receipt-form h3 { margin: 0 0 10px; font-size: 16px; }
.purchase-receipt-form label small { color: var(--muted); }
@media (max-width: 720px) { .purchase-line-form { grid-template-columns: 1fr 1fr auto; } .purchase-line-form .glass-select { grid-column: 1 / -1; } }

/* Conteo físico: captura clara, sin exponer el saldo esperado durante el conteo. */
.dash-inventory-count-modal { max-width: 680px; }
.inventory-count-lines { display: grid; gap: 8px; max-height: 52vh; overflow: auto; padding-right: 2px; }
.inventory-count-line { display: grid; grid-template-columns: minmax(0, 1fr) 132px; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.inventory-count-line span { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.inventory-count-line input { margin: 0; min-width: 0; }
.inventory-count-list { display: grid; gap: 8px; }
.inventory-count-list-item { display: grid; gap: 3px; width: 100%; padding: 14px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); background: var(--surface-2); font: inherit; text-align: left; cursor: pointer; }
.inventory-count-list-item:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface-2)); }
.inventory-count-list-item small { color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 520px) { .inventory-count-line { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .ds-preview-grid { grid-template-columns:1fr; } .ds-preview-card-wide { grid-column:auto; } .ds-demo-switcher { grid-template-columns:1fr; } .ds-demo-switcher label { margin-top:4px; } .ds-kpis { grid-template-columns:1fr; } .ds-pos-line { grid-template-columns:1fr auto; } .ds-pos-line > strong { grid-column:1 / -1; } }
.dash-nav-link {
  transition: color .22s ease, background-color .28s ease, border-color .28s ease,
    box-shadow .28s ease, transform .22s cubic-bezier(.16, 1, .3, 1);
  border: 1px solid transparent;
  will-change: transform, background-color;
}

.dash-nav-link:hover {
  border-color: color-mix(in srgb, var(--border) 72%, transparent);
  transform: translateX(2px);
}

.dash-nav-link:active {
  transform: translateX(1px) scale(.985);
}

.dash-nav-link.active {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  box-shadow: inset 3px 0 0 var(--accent), 0 5px 16px color-mix(in srgb, var(--accent) 10%, transparent);
}

.dash-nav-group-toggle {
  transition: color .22s ease, background-color .28s ease, border-color .28s ease,
    transform .22s cubic-bezier(.16, 1, .3, 1);
}

.dash-nav-group-toggle:active {
  transform: scale(.985);
}

@media (prefers-reduced-motion: reduce) {
  .dash-nav-link,
  .dash-nav-group-toggle {
    transition: none;
    transform: none;
  }
}

/* Acciones Glass: misma respuesta en botones principales, secundarios y
   controles compactos del dashboard. */
.btn-jade,
.btn-ghost,
.dash-icon-btn,
.pos-qty-btn,
.pos-linea-quitar {
  transition: color .22s ease, background-color .24s ease, border-color .24s ease,
    box-shadow .24s ease, transform .22s cubic-bezier(.16, 1, .3, 1);
}

.btn-jade:hover,
.btn-ghost:hover,
.dash-icon-btn:hover,
.pos-qty-btn:hover,
.pos-linea-quitar:hover {
  transform: translateY(-1px);
}

.btn-jade:active,
.btn-ghost:active,
.dash-icon-btn:active,
.pos-qty-btn:active,
.pos-linea-quitar:active {
  transform: scale(.97);
}

.btn-jade:focus-visible,
.btn-ghost:focus-visible,
.dash-icon-btn:focus-visible,
.pos-qty-btn:focus-visible,
.pos-linea-quitar:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .btn-jade,
  .btn-ghost,
  .dash-icon-btn,
  .pos-qty-btn,
  .pos-linea-quitar {
    transition: none;
    transform: none;
  }
}
/* Tienda: controles compactos para identidad y archivos, con superficies
   opacas suficientes para leerse sobre el fondo Glass. */
.store-brand-color { display:flex; align-items:center; flex-wrap:wrap; gap:10px; min-height:44px; }
.store-brand-color input[type="color"] { width:44px; height:44px; padding:3px; border-radius:12px; cursor:pointer; }
.store-brand-color input[type="text"], .store-brand-color input:not([type]) { width:96px; text-transform:uppercase; }
.store-color-swatches { display:flex; gap:7px; flex-wrap:wrap; }
.store-color-swatch { width:26px; height:26px; border:2px solid color-mix(in srgb, var(--border) 78%, transparent); background:var(--swatch); border-radius:50%; padding:0; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.12); transition:transform .18s ease, box-shadow .18s ease; }
.store-color-swatch:hover, .store-color-swatch.active { transform:scale(1.12); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.store-asset-upload, .store-documents { border:1px solid var(--border); border-radius:16px; padding:16px; background:color-mix(in srgb, var(--surface) 88%, transparent); display:grid; grid-template-columns:minmax(150px,1fr) minmax(220px,1.2fr) auto; gap:12px; align-items:center; }
/* .dash-form-grid tiene row-gap:0 -- sin esto, la caja (con su propio
   borde redondeado) queda pegada al texto de ayuda de arriba (ej.
   "Stock mínimo" en Productos) o al selector de color en Tienda, dando
   la sensación de que el borde corta el texto. Mismo margen que ya usa
   .auth-form label entre campos, para que se vea como un campo más. */
.store-asset-upload { margin-top:14px; }
.store-asset-upload p { margin:4px 0 0; }
.store-asset-upload-actions { position:relative; display:grid; grid-template-columns:max-content max-content; gap:7px 8px; align-items:center; }
.store-asset-upload-actions .store-meta { grid-column:1 / -1; }
/* .store-asset-pick es un <label> dentro de .auth-form -- ".auth-form
   label" (font-size:13px, margin-top:14px) le gana en especificidad a
   .btn-ghost porque combina clase+tipo. Sin esto, "Elegir imagen" salía
   con otra tipografía y un margen que "Quitar" (un <button>, no
   alcanzado por esa regla) no tenía, y los dos terminaban de alto y
   posición distintos pese a compartir .btn-ghost. */
.store-asset-upload-actions .store-asset-pick { font-size:14px; font-weight:600; margin-top:0; }
.store-asset-file { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.store-asset-file:focus-visible + .store-asset-pick { outline:3px solid color-mix(in srgb, var(--accent) 38%, transparent); outline-offset:2px; }
.store-asset-pick { display:inline-flex; align-items:center; justify-content:center; min-height:40px; margin:0; cursor:pointer; }
.store-asset-pick:hover { transform:translateY(-1px); }
.store-asset-preview { display:grid; place-items:center; width:84px; height:84px; overflow:hidden; border:1px dashed var(--border); border-radius:14px; background:var(--surface); color:var(--muted); font-size:12px; }
.store-asset-preview img { display:block; width:100%; height:100%; object-fit:cover; }
.store-asset-preview img[hidden] { display:none; }
/* .store-asset-remove es <button class="btn-ghost is-danger" ... [hidden]> --
   .btn-ghost ya fija display:inline-flex con la misma especificidad que la
   regla [hidden] del user-agent, y una regla de autor le gana a la del UA
   aunque empate en especificidad -- sin esto, "Quitar" quedaba visible
   incluso sin imagen (encontrado al construir el catálogo de Fase 2 con el
   componente real en vez de una demo estática). */
.store-asset-remove[hidden] { display:none; }
.store-asset-preview-logo img { object-fit:contain; padding:6px; }
.store-asset-preview-cover { width:160px; aspect-ratio:8 / 3; height:auto; }
.store-asset-preview-cover img { object-fit:cover; }
.store-documents { display:block; margin-top:18px; }
.store-documents h2 { margin:0 0 6px; font-size:18px; }
.store-documents > input { margin:8px 0; }
.store-document-list { display:grid; gap:8px; margin-top:12px; }
.store-document-row { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:10px 0; border-top:1px solid var(--border); }
.store-document-row span { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.store-document-row small { color:var(--muted); }
@media (max-width: 640px) { .store-asset-upload { grid-template-columns:1fr; } .store-asset-preview, .store-asset-preview-cover { width:100%; height:120px; } .store-document-row { align-items:flex-start; flex-direction:column; } }
/* El grid de 3 columnas (mín. ~478px) asume el ancho completo de
   .dash-panel (Tienda). Dentro de .dash-modal (480px, ~424px útiles tras
   el padding) no entra: se ve apretado y con los botones desalineados
   (Productos/Servicios/Menú digital reusan el mismo AstrcAssetUpload).
   Mismo layout apilado que ya usa el breakpoint móvil de arriba, pero acá
   activado por el contenedor angosto, no por el viewport. */
.dash-modal .store-asset-upload { grid-template-columns:1fr; }
.dash-modal .store-asset-preview,
.dash-modal .store-asset-preview-cover { width:100%; height:120px; }

/* Resumen: guía corta para que el dueño complete la puesta en marcha sin SQL. */
.dash-onboarding { margin-bottom:18px; padding:18px; border:1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius:18px; background:color-mix(in srgb, var(--surface) 94%, var(--accent) 6%); }
.dash-onboarding.is-complete { border-color:color-mix(in srgb, var(--status-good) 42%, var(--border)); }
.dash-onboarding-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.dash-onboarding-head h2 { margin:2px 0 3px; font-size:20px; }
.dash-onboarding-head p { margin:0; color:var(--muted); font-size:13px; }
.dash-onboarding-head > strong { flex:0 0 auto; color:var(--accent); font-size:22px; font-variant-numeric:tabular-nums; }
.dash-onboarding-eyebrow { color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.dash-onboarding-progress { height:6px; margin:14px 0; overflow:hidden; border-radius:999px; background:color-mix(in srgb, var(--border) 75%, transparent); }
.dash-onboarding-progress span { display:block; height:100%; border-radius:inherit; background:var(--accent); transition:width .35s ease; }
.dash-onboarding.is-complete .dash-onboarding-progress span { background:var(--status-good); }
.dash-onboarding-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px 14px; margin:0; padding:0; list-style:none; }
.dash-onboarding-steps li { display:flex; align-items:center; gap:8px; min-width:0; color:var(--muted); font-size:13px; }
.dash-onboarding-steps li > span:first-child { display:grid; place-items:center; flex:0 0 22px; width:22px; height:22px; border:1px solid var(--border); border-radius:50%; font-weight:800; }
.dash-onboarding-steps li.is-done { color:var(--text); }
.dash-onboarding-steps li.is-done > span:first-child { border-color:color-mix(in srgb, var(--status-good) 45%, transparent); background:color-mix(in srgb, var(--status-good) 16%, transparent); color:var(--status-good); }
.dash-onboarding-steps li.is-unknown { opacity:.72; }
.dash-onboarding-steps small { display:block; margin-top:1px; }
.dash-onboarding-next { display:inline-flex; width:auto; min-height:40px; margin-top:16px; align-items:center; justify-content:center; }
@media (prefers-reduced-motion: reduce) { .dash-onboarding-progress span { transition:none; } }
@media (max-width:640px) { .dash-onboarding { padding:15px; } .dash-onboarding-steps { grid-template-columns:1fr; } .dash-onboarding-next { width:100%; } }
/* Mudanza a ASTRC (172) -- dashboard-mudanza.js */
.mudanza-lista { margin-top:12px; }
.mudanza-lista .dash-onboarding-steps a { color:var(--accent); font-weight:600; }
.mudanza-acciones { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.mudanza-modal { max-width:560px; }
.mudanza-pasos { margin:0 0 12px; padding-left:20px; display:grid; gap:8px; font-size:14px; }
.mudanza-estado { margin:0 0 10px; }
.mudanza-estado summary { cursor:pointer; font-weight:600; font-size:13px; margin-bottom:8px; }
.mudanza-modal .dash-modal-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
@media (max-width:640px) { .mudanza-modal .dash-modal-actions > * { flex:1 1 100%; justify-content:center; text-align:center; } }

/* Consola de plataforma y modos del super_admin (126) -- dashboard-plataforma.js */
.dash-modo { display:inline-flex; gap:2px; margin-left:12px; padding:3px; border:1px solid var(--border); border-radius:999px; background:var(--surface-2); }
.dash-modo button { border:0; border-radius:999px; padding:5px 12px; font:600 12px/1.2 var(--font); color:var(--muted); background:transparent; cursor:pointer; }
.dash-modo button.is-active { color:var(--text); background:var(--surface); box-shadow:0 1px 3px var(--shadow-soft); }
.dash-modo button:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.dash-soporte-banner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin:0 0 16px; padding:12px 16px; border:1px solid color-mix(in srgb,var(--status-warning,#f5a623) 45%,var(--border)); border-radius:12px; background:color-mix(in srgb,var(--status-warning,#f5a623) 12%,var(--surface)); font-size:13px; }
.dash-soporte-banner[hidden] { display:none; }
.dash-soporte-banner strong { margin-right:6px; }
.dash-soporte-banner .secondary { width:auto; margin:0; padding:6px 14px; }
.plat-columnas { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px; }
.plat-columnas .dash-panel { margin-top:0; }
.plat-lista { list-style:none; margin:10px 0 0; padding:0; display:grid; }
.plat-lista li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.plat-lista li:last-child { border-bottom:0; }
.plat-pendientes { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:10px; }
.plat-pendiente { display:grid; gap:2px; padding:14px; border:1px solid var(--border); border-radius:12px; color:var(--text); text-decoration:none; background:var(--surface-2); }
.plat-pendiente strong { font-size:22px; }
.plat-pendiente span { color:var(--muted); font-size:13px; }
.plat-pendiente:hover { border-color:var(--accent); }
.plat-filtros { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:14px; }
.plat-filtros input[type="search"] { flex:1 1 240px; max-width:360px; }
.plat-chips { display:inline-flex; flex-wrap:wrap; gap:6px; }
.plat-chips button { border:1px solid var(--border); border-radius:999px; padding:6px 12px; font:500 12px/1.2 var(--font); color:var(--muted); background:transparent; cursor:pointer; }
.plat-chips button.is-active { color:var(--text); border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent); }
.plat-config { white-space:nowrap; }
.plat-check { display:block; font-size:12px; color:var(--muted); }
.plat-check.is-ok { color:var(--status-success,#35c759); }
@media (max-width:880px) {
  .plat-columnas, .plat-pendientes { grid-template-columns:minmax(0,1fr); }
  .dash-modo { margin-left:6px; }
  .dash-modo button { padding:5px 9px; }
}
.dash-modo { flex-shrink:0; }
.dash-modo button { white-space:nowrap; }
/* En el celular no entran el selector de modo y el correo: queda el selector,
   que es lo que se usa (solo lo ve el super_admin). */
@media (max-width:560px) {
  .dash-topbar:has(.dash-modo:not([hidden])) .dash-user-pill { display:none; }
}
.plat-filtros input[type="search"] { padding:10px 14px; border:1px solid var(--border); border-radius:12px; font:16px var(--font); background:var(--bg); color:var(--text); }
.plat-filtros input[type="search"]:focus { outline:none; border-color:var(--accent); }
.plat-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:880px) { .plat-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } }
#dash-shell a.btn-ghost.is-compact { text-decoration:none; }

/* Contratación en línea (128) -- contratar.html */
.contratar { max-width:1080px; margin:0 auto; padding:110px 20px 60px; }
.contratar-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:28px; align-items:start; }
.contratar-form { display:grid; gap:10px; padding:28px; border:1px solid var(--border); border-radius:18px; background:var(--surface); }
.contratar-form h1 { margin:0; font-size:28px; }
.contratar-sub, .contratar-nota { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.contratar-planes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:6px 0; padding:0; border:0; }
.contratar-planes[hidden] { display:none; }
.contratar-planes.contratar-moneda { grid-template-columns:repeat(2,minmax(0,1fr)); }
.contratar-planes legend { margin-bottom:6px; font-weight:600; }
.contratar-planes label { position:relative; display:block; cursor:pointer; }
.contratar-planes input { position:absolute; opacity:0; }
.contratar-planes span { display:grid; gap:2px; height:100%; padding:12px; border:1px solid var(--border); border-radius:12px; }
.contratar-planes small { color:var(--muted); font-size:12px; }
.contratar-planes input:checked + span { border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent); }
.contratar-planes input:focus-visible + span { outline:2px solid var(--accent); }
.contratar-check { display:flex !important; gap:10px; align-items:flex-start; font-weight:400 !important; font-size:14px; line-height:1.45; }
.contratar-check input { width:auto !important; margin-top:3px; }
.contratar-factura { display:grid; gap:8px; padding:12px; border:1px dashed var(--border); border-radius:12px; }
.contratar-factura[hidden], .contratar-manual[hidden], .contratar-grid[hidden], .contratar-listo[hidden] { display:none; }
.contratar-fila { display:flex; gap:8px; }
.contratar-fila .secondary { width:auto; margin:0; white-space:nowrap; }
.contratar-manual { display:grid; gap:8px; margin-top:8px; padding-top:14px; border-top:1px solid var(--border); font-size:14px; }
.contratar-manual .secondary { width:100%; }
.contratar-resumen { position:sticky; top:96px; padding:24px; border:1px solid var(--border); border-radius:18px; background:var(--surface-2); }
.contratar-resumen h2 { margin:0 0 6px; }
.contratar-resumen dl { display:grid; gap:8px; margin:16px 0; }
.contratar-resumen dl div { display:flex; justify-content:space-between; gap:12px; }
.contratar-resumen dl .is-nota { font-size: 13px; color: var(--muted); }
.contratar-resumen dt { color:var(--muted); }
.contratar-resumen dd { margin:0; font-weight:600; }
.contratar-resumen .is-descuento dd { color:var(--status-success,#35c759); }
.contratar-resumen .is-total { padding-top:10px; border-top:1px solid var(--border); font-size:18px; }
.contratar-resumen .is-total dt { color:var(--text); font-weight:700; }
.contratar-aviso { margin-bottom:18px; padding:14px 16px; border-radius:12px; border:1px solid var(--border); background:var(--surface); }
.contratar-aviso.is-danger { border-color:color-mix(in srgb,#d0453c 55%,var(--border)); }
.contratar-aviso.is-alert { border-color:color-mix(in srgb,#f5a623 55%,var(--border)); }
.contratar-aviso.is-ok { border-color:color-mix(in srgb,#35c759 55%,var(--border)); }
.contratar-listo { max-width:620px; margin:0 auto; padding:32px; border:1px solid var(--border); border-radius:18px; background:var(--surface); line-height:1.6; }
.pricing-cta-alt { display:block; margin-top:8px; text-align:center; color:var(--muted); font-size:13px; }
/* 154: otros negocios de Business Plus en la contratación */
.contratar-extra { display:grid; gap:10px; padding:14px; border:1px dashed var(--border); border-radius:14px; }
.contratar-extra[hidden] { display:none; }
.contratar-extra-fila { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:8px; align-items:center; }
.contratar-extra-fila select, .contratar-extra-fila input { margin:0; }
.contratar-extra-fila .btn-ghost { width:auto; margin:0; }
.contratar-extra > .btn-ghost { justify-self:start; width:auto; }
.contratar-resumen .contratar-incluye { margin:10px 0 0; font-size:13px; color:var(--muted); }
@media (max-width:640px) { .contratar-extra-fila { grid-template-columns:1fr auto; } .contratar-extra-fila input { grid-column:1 / -1; grid-row:2; } }
@media (max-width:880px) {
  .contratar-grid { grid-template-columns:1fr; }
  .contratar-resumen { position:static; order:-1; }
  .contratar-planes { grid-template-columns:1fr; }
}
.plat-enlace-check { display:flex !important; gap:8px; align-items:center; font-weight:400 !important; }
.plat-enlace-check input { width:auto !important; }
.plat-enlace-url { width:100%; margin:10px 0; padding:10px 12px; border:1px solid var(--border); border-radius:10px; font:13px var(--font); background:var(--bg); color:var(--text); }
#plat-contrataciones[hidden] { display:none; }
/* 129: referencia del pago (datáfono, SINPE, transferencia) en el POS */
.pos-pago-fila .pos-pago-referencia { grid-column: 1 / -1; }
.pos-pago-fila .pos-pago-referencia[hidden] { display: none; }
@media (max-width: 880px) { .pos-pago-fila .pos-pago-referencia { grid-column: 1; } }

/* Pulso del negocio (Resumen por rubro, 134) */
.dash-pulso-alertas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.dash-pulso-alerta { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; text-decoration: none; }
.dash-pulso-alerta:hover { border-color: var(--accent); }
.dash-pulso-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.dash-pulso-alerta.is-alta .dash-pulso-punto { background: var(--status-critical); }
.dash-pulso-alerta.is-media .dash-pulso-punto { background: var(--status-warning); }
.dash-pulso-alerta.is-baja .dash-pulso-punto { background: var(--accent); }
.dash-pulso-grid { margin-bottom: 16px; }
.dash-pulso-grid td.is-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dash-pulso-cocina, .dash-pulso-notas, .dash-pulso-metodos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dash-pulso-cocina li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border-left: 4px solid var(--status-good); background: color-mix(in srgb, var(--surface) 92%, var(--text)); }
.dash-pulso-cocina li.is-atento { border-left-color: var(--status-warning); }
.dash-pulso-cocina li.is-tarde { border-left-color: var(--status-critical); }
.dash-pulso-cocina li.is-lista { border-left-color: var(--accent); }
.dash-pulso-cocina li div { display: grid; gap: 2px; min-width: 0; }
.dash-pulso-cocina li small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-pulso-cocina li > span { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-pulso-cocina li.is-tarde > span { color: var(--status-critical); }
.dash-pulso-barras { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding-top: 8px; }
.dash-pulso-barra { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; min-width: 0; }
.dash-pulso-barra span { width: 100%; max-width: 28px; border-radius: 6px 6px 2px 2px; background: var(--accent); }
.dash-pulso-barra small { font-size: 11px; color: var(--muted); }
.dash-pulso-notas li { display: grid; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.dash-pulso-notas li:last-child { border-bottom: 0; }
.dash-pulso-notas p { margin: 0; font-size: 13px; }
.dash-pulso-notas small { color: var(--muted); font-size: 12px; }
.dash-pulso-metodos li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; }
.dash-pulso-metodos li div { display: flex; justify-content: space-between; gap: 8px; grid-column: 1 / -1; font-size: 13px; }
.dash-pulso-metodos strong { font-variant-numeric: tabular-nums; }
.dash-pulso-medidor { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 20%, transparent); overflow: hidden; }
.dash-pulso-medidor span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.dash-pulso-metodos small { color: var(--muted); font-size: 12px; }
.dash-pulso-pie { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin-top: 12px; font-size: 13px; }
.dash-pulso-pie strong { text-align: right; font-variant-numeric: tabular-nums; }
.dash-pulso-pie .is-down { color: var(--status-critical); }

/* Planta (módulo Fábrica, 135) */
.planta-pestanas { margin: 0 0 16px; }
.dash-kpi-card.is-alerta .dash-kpi-value { color: var(--status-critical); }
.planta-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.planta-nav { display: inline-flex; align-items: center; gap: 4px; }
.planta-titulo { font-size: 15px; }
.planta-titulo.is-mes { text-transform: capitalize; }
.planta-tablero { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.planta-columna { min-width: 0; background: color-mix(in srgb, var(--surface) 88%, var(--text)); border: 1px solid var(--border); border-radius: 16px; padding: 10px; display: flex; flex-direction: column; min-height: 220px; scroll-snap-align: start; }
.planta-columna > header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 2px 4px 8px; border-bottom: 3px solid var(--muted); margin-bottom: 8px; }
.planta-columna.is-pendiente > header { border-bottom-color: var(--muted); }
.planta-columna.is-proceso > header { border-bottom-color: var(--accent); }
.planta-columna.is-listo > header { border-bottom-color: var(--status-good); }
.planta-columna.is-ruta > header { border-bottom-color: var(--status-warning); }
.planta-columna.is-entregado > header { border-bottom-color: color-mix(in srgb, var(--status-good) 50%, var(--muted)); }
.planta-columna h3 { margin: 0; font-size: 14px; }
.planta-columna > header span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.planta-columna-lista { display: grid; gap: 8px; align-content: start; max-height: 70vh; overflow-y: auto; }
.planta-vacio { color: var(--muted); font-size: 12px; text-align: center; margin: 12px 0; }
.planta-orden { min-width: 0; overflow-wrap: anywhere; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 12px; padding: 10px; display: grid; gap: 4px; cursor: pointer; font-size: 13px; }
.planta-orden:hover, .planta-orden:focus-visible { border-color: var(--accent); outline: none; }
.planta-orden.is-alta { border-left-color: var(--status-warning); }
.planta-orden.is-urgente { border-left-color: var(--status-critical); }
.planta-orden.is-tarde { background: color-mix(in srgb, var(--status-critical) 8%, var(--surface)); }
.planta-orden header { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.planta-orden p { margin: 0; }
.planta-orden-producto { font-weight: 600; }
.planta-orden-cliente, .planta-orden-material { color: var(--muted); font-size: 12px; }
.planta-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.planta-chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--text); }
.planta-orden footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.planta-orden footer .is-tarde { color: var(--status-critical); font-weight: 600; }
.planta-orden footer .btn-ghost { width: 100%; justify-content: center; }
.planta-faltantes { margin-top: 16px; }
.planta-faltantes h2 { color: var(--status-critical); font-size: 15px; }
.planta-calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.planta-cal-dia-nombre { font-size: 12px; color: var(--muted); text-align: center; padding: 4px 0; }
.planta-cal-dia { min-height: 84px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); padding: 8px; text-align: left; display: flex; flex-direction: column; gap: 2px; cursor: pointer; font: inherit; }
.planta-cal-dia:hover { border-color: var(--accent); }
.planta-cal-dia.is-fuera { opacity: 0.45; }
.planta-cal-dia.is-hoy { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.planta-cal-dia.is-tarde { border-color: var(--status-critical); }
.planta-cal-num { font-size: 12px; color: var(--muted); }
.planta-cal-dia strong { font-size: 13px; }
.planta-cal-dia small { font-size: 11px; color: var(--muted); }
.planta-input { width: 100%; min-width: 140px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; }
tr.is-inactiva { opacity: 0.5; }
.planta-calculo-caja { display: grid; gap: 2px; padding: 12px; border-radius: 12px; border: 1px solid var(--status-good); background: color-mix(in srgb, var(--status-good) 8%, var(--surface)); font-size: 13px; }
.planta-calculo-caja strong { font-size: 16px; }
.planta-calculo-caja.is-falta { border-color: var(--status-critical); background: color-mix(in srgb, var(--status-critical) 8%, var(--surface)); }
.planta-check { display: flex; align-items: center; gap: 8px; }
.planta-detalle { margin-bottom: 12px; }
.planta-orden-acciones { flex-wrap: wrap; gap: 12px; margin: 12px 0; font-size: 13px; }
.planta-orden-acciones input { margin-left: 4px; }
.planta-historial-titulo { font-size: 14px; margin: 16px 0 8px; }
.planta-historial { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 13px; max-height: 220px; overflow-y: auto; }
.planta-historial li span { color: var(--muted); margin-right: 6px; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .planta-tablero { grid-auto-columns: 82%; }
  .planta-cal-dia { min-height: 60px; padding: 4px; }
  .planta-cal-dia small { display: none; }
}

/* Entregas y mapa (136) */
.entregas-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: 16px; align-items: start; }
.entregas-mapa { height: 560px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); z-index: 0; }
.entregas-lista { display: grid; gap: 12px; max-height: 560px; overflow-y: auto; }
.entregas-viaje { border: 1px solid var(--border); border-radius: 14px; padding: 12px; background: var(--surface); }
.entregas-viaje header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.entregas-viaje header div { display: grid; gap: 2px; }
.entregas-viaje header small, .entregas-viaje li small { color: var(--muted); font-size: 12px; display: block; }
.entregas-viaje ol { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.entregas-viaje li { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.entregas-parada-acciones { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: flex-end; }
.entregas-camion { display: grid; place-items: center; background: var(--surface, #fff); border: 2px solid #c9821f; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.entregas-camion span { font-size: 18px; line-height: 1; }
.entregas-camion small { position: absolute; top: 42px; white-space: nowrap; font-size: 11px; font-weight: 600; background: #c9821f; color: #fff; padding: 1px 6px; border-radius: 6px; }
.entregas-num { background: transparent; border: 0; box-shadow: none; color: #fff; font-weight: 700; font-size: 11px; }
.entregas-num::before { display: none; }
.entregas-ordenes { border: 1px solid var(--border); border-radius: 12px; padding: 10px; display: grid; gap: 8px; max-height: 220px; overflow-y: auto; }
.entregas-ordenes legend { font-size: 13px; padding: 0 4px; }
.entregas-parada-form { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px; }
.entregas-parada-form input { padding: 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; }
.entregas-picker { display: grid; gap: 6px; }
.entregas-picker-mapa { height: 260px; border-radius: 12px; overflow: hidden; }
.entregas-foto-previa img, .entregas-foto-grande { width: 100%; max-height: 60vh; object-fit: contain; border-radius: 12px; }
.entregas-rastreo { padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--status-good) 12%, var(--surface)); border: 1px solid var(--status-good); font-size: 13px; }
.ruta-paradas { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.ruta-paradas li { display: grid; gap: 8px; padding: 12px; border-radius: 14px; border: 1px solid var(--border); border-left: 5px solid var(--accent); background: var(--surface); }
.ruta-paradas li.is-entregada { border-left-color: var(--status-good); opacity: .75; }
.ruta-paradas li.is-fallida { border-left-color: var(--status-critical); opacity: .75; }
.ruta-paradas li > div:first-child { display: grid; gap: 2px; }
.ruta-paradas small { color: var(--muted); font-size: 13px; }
.ruta-acciones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ruta-acciones .cta { flex: 1 1 100%; min-height: 48px; font-size: 16px; }
@media (max-width: 900px) {
  .entregas-layout { grid-template-columns: 1fr; }
  .entregas-mapa { height: 360px; }
  .entregas-lista { max-height: none; }
}
.dash-form-grid .planta-check { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-weight: 500; }
.dash-form-grid .planta-check input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; flex: 0 0 auto; margin: 0; }

/* Exportar a Excel/PDF (bloque B) */
.astrc-exportar { position: relative; display: inline-flex; }
.astrc-exportar > button { display: inline-flex; align-items: center; gap: 6px; }
.astrc-exportar-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 180px; padding: 6px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 12px 32px rgba(0,0,0,.28); display: grid; gap: 2px; }
.astrc-exportar-menu button { text-align: left; padding: 10px 12px; border-radius: 8px; border: 0; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.astrc-exportar-menu button:hover, .astrc-exportar-menu button:focus-visible { background: color-mix(in srgb, var(--accent) 14%, transparent); outline: none; }
.astrc-importar { display: inline-flex; align-items: center; gap: 6px; }
.importar-pasos { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 10px; }
.importar-pasos li { display: grid; gap: 6px; }
.importar-pasos small { font-size: 12px; }
.importar-resumen { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.importar-errores { margin: 0 0 12px; padding-left: 18px; color: var(--status-critical); font-size: 13px; max-height: 160px; overflow-y: auto; }
.importar-listo { font-size: 15px; }
.importar-mapeo { display: grid; gap: 10px; margin: 4px 0 14px; padding-top: 12px; border-top: 1px solid var(--border, rgba(127,127,127,.2)); }
.importar-mapeo h3 { margin: 0; font-size: 16px; }
.importar-mapeo-tabla { table-layout: fixed; width: 100%; min-width: 0; }
.importar-mapeo-tabla th:first-child { width: 28%; }
.importar-mapeo-tabla th:nth-child(2) { width: 44%; }
.importar-mapeo-tabla select { width: 100%; min-width: 0; }
.importar-mapeo-tabla td[data-muestra] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.importar-mapeo-tabla td { vertical-align: middle; }
.importar-req { color: var(--status-critical); }
.importar-mapeo .dash-row-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

/* Buscador global (bloque B) */
.buscador-overlay { align-items: flex-start; padding-top: 10vh; }
.buscador { width: min(640px, calc(100vw - 24px)); padding: 0; overflow: hidden; }
.buscador-campo { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.buscador-campo input { flex: 1; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; outline: none; min-width: 0; }
.buscador-campo kbd { font-size: 11px; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; }
.buscador-resultados { max-height: 60vh; overflow-y: auto; padding: 6px; }
.buscador-grupo { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 10px 10px 4px; }
.buscador-item { display: grid; gap: 2px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; border: 0; background: transparent; color: var(--text); font: inherit; cursor: pointer; min-height: 44px; }
.buscador-item small { color: var(--muted); font-size: 12px; }
.buscador-item.is-activo, .buscador-item:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.buscador-ayuda { padding: 12px; }

/* Planta v2 (142): tareas del operario, costo y asignación */
.tareas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tarea { display: grid; gap: 6px; padding: 14px; border-radius: 14px; border: 1px solid var(--border); border-left: 5px solid var(--accent); background: var(--surface); }
.tarea.is-tarde { border-left-color: var(--status-critical); background: color-mix(in srgb, var(--status-critical) 6%, var(--surface)); }
.tarea p { margin: 0; }
.tarea-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tarea-producto { font-size: 16px; font-weight: 600; }
.tarea-acciones { display: grid; gap: 8px; margin-top: 6px; }
.tarea-acciones .cta, .tarea-acciones .secondary { margin: 0; width: 100%; min-height: 48px; font-size: 15px; }
.planta-asignar { margin: 8px 0 4px; }
.planta-costo { margin: 4px 0 8px; }
@media (max-width: 720px) { .tareas { grid-template-columns: 1fr; } }
.astrc-exportar-menu[hidden] { display: none; }
.receta-fila { display: grid; grid-template-columns: 1fr 120px auto; gap: 8px; margin-bottom: 8px; }
.receta-fila select, .receta-fila input { padding: 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; min-width: 0; }

/* Agenda y casos (144) */
.agenda-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.agenda-dia { border: 1px solid var(--border); border-radius: 14px; padding: 8px; background: color-mix(in srgb, var(--surface) 90%, var(--text)); display: grid; gap: 6px; align-content: start; min-height: 180px; }
.agenda-dia.is-hoy { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.agenda-dia > header { font-size: 12px; font-weight: 600; text-transform: capitalize; color: var(--muted); padding: 2px 4px; }
.agenda-cita { display: grid; gap: 2px; text-align: left; padding: 8px; border-radius: 10px; border: 1px solid var(--border); border-left: 4px solid var(--accent); background: var(--surface); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; min-width: 0; overflow-wrap: anywhere; }
.agenda-cita span, .agenda-cita small { color: var(--muted); }
.agenda-cita strong { font-size: 13px; }
.agenda-cita.is-realizada { border-left-color: var(--status-good); opacity: .8; }
.agenda-cita.is-cancelada, .agenda-cita.is-no_asistio { border-left-color: var(--status-critical); opacity: .6; }
.agenda-cita.is-confirmada { border-left-color: var(--status-warning); }
.caso-horas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; margin-bottom: 10px; }
.caso-horas #ch-desc { grid-column: 1 / -1; }
.caso-horas .btn-ghost { justify-self: end; }
.caso-horas input, .caso-horas select { padding: 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; min-width: 0; }
tr.is-clickable { cursor: pointer; }
tr.is-clickable:hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
@media (max-width: 900px) {
  .agenda-semana { grid-template-columns: 1fr; }
  .agenda-dia.is-vacio { min-height: 0; }
}
.compra-fe-subir { cursor: pointer; } .compra-fe-opciones { border: 1px solid var(--border); border-radius: 12px; padding: 10px; display: grid; gap: 8px; }
.planta-check input[type="radio"], .planta-check input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; flex: 0 0 auto; margin: 0; }
.planta-check { display: flex; align-items: center; gap: 10px; justify-content: flex-start; text-align: left; }

/* ===================================================================
   Etapa 1 — barra superior y menú (2026-09-27)
   Logo de ASTRC + logo del negocio, un solo "Nuevo", menú de cuenta con
   apariencia y cerrar sesión. La hamburguesa existe en todas las
   pantallas: en escritorio oculta/muestra el menú; en tablet y celular
   lo abre como panel (con nombres, no solo íconos).
   =================================================================== */
.dash-modo[hidden], .dash-negocio-chip[hidden] { display: none; }
.dash-topbar { gap: 12px; padding: 0 16px; }
.dash-topbar-left { gap: 10px; flex: 1 1 auto; min-width: 0; }
.dash-topbar-right { gap: 6px; flex: 0 0 auto; }
.dash-sidebar-toggle { display: flex; border-radius: 10px; flex-shrink: 0; }
.dash-sidebar-toggle:hover { background: var(--chrome-active-bg, var(--surface-2)); }
.dash-sidebar-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dash-topbar .brand { flex-shrink: 0; display: flex; align-items: center; }

.dash-negocio-chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 280px; padding: 4px 12px 4px 4px; border: 1px solid var(--chrome-border, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--chrome-active-bg, var(--surface-2)) 70%, transparent); }
.dash-negocio-logo { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background-color: var(--accent); color: #fff; font: 700 13px/1 var(--font); background-size: cover; background-position: center; }
.dash-negocio-logo.has-img { background-color: #fff; }
.dash-negocio-chip .dash-store-name { font-size: 13px; font-weight: 600; color: var(--chrome-text, var(--text)); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-negocio-chip:not([hidden]) ~ .dash-breadcrumb-sep { display: inline; }
.dash-breadcrumb-vista { overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* "Nuevo": el único botón para crear cualquier cosa del negocio. */
.dash-topbar .quick-create-trigger { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px 0 11px; border-radius: 999px; background: var(--accent); color: #fff; font: 700 13px/1 var(--font); }
.dash-topbar .quick-create-trigger:hover,
.dash-topbar .quick-create-trigger[aria-expanded="true"] { color: #fff; filter: brightness(1.08); }
.quick-create-dropdown .nav-dropdown-menu { min-width: 220px; max-height: min(70vh, 520px); overflow-y: auto; }
.quick-create-grupo { display: block; padding: 10px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.quick-create-grupo:first-child { padding-top: 4px; }

/* Cuenta: avatar con iniciales. */
.dash-cuenta-trigger { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 50%; }
.dash-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--chrome-text, var(--text)); font: 700 13px/1 var(--font); border: 1px solid var(--chrome-border, var(--border)); }
.dash-cuenta-trigger[aria-expanded="true"] .dash-avatar { border-color: var(--accent); }
.dash-cuenta .nav-dropdown-menu { left: auto; right: 0; transform: translateY(-6px); min-width: 250px; padding: 10px; }
.dash-cuenta .nav-dropdown-menu.open { transform: translateY(0); }
.dash-cuenta-cabecera { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px 12px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.dash-cuenta-cabecera .dash-user-email { color: var(--text); max-width: 230px; font-weight: 600; }
.dash-cuenta-cabecera .dash-user-role { color: var(--muted); font-size: 12px; }
.dash-cuenta-titulo { display: block; padding: 4px 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.dash-cuenta-tema { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 3px; margin: 0 4px 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.dash-cuenta-tema .theme-option { border: 0; border-radius: 9px; padding: 8px 4px; background: transparent; color: var(--muted); font: 600 12px/1.2 var(--font); cursor: pointer; }
.dash-cuenta-tema .theme-option.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px var(--shadow-soft); }
.dash-cuenta-links { display: flex; flex-direction: column; border-top: 1px solid var(--border); padding-top: 6px; margin-top: 2px; }
.dash-cuenta-links:empty { display: none; }
.dash-cuenta-links a { display: block; padding: 10px 8px; border-radius: 8px; font-size: 14px; color: var(--text); text-decoration: none; }
.dash-cuenta-links a:hover, .dash-cuenta-links a:focus-visible { background: var(--surface-2); color: var(--accent); }
.dash-cuenta .dash-logout-btn { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; height: auto; margin-top: 6px; padding: 10px 8px; border-top: 1px solid var(--border); border-radius: 8px; font: 600 14px/1.2 var(--font); color: var(--status-danger, #e5484d); }
.dash-cuenta .dash-logout-btn:hover { background: color-mix(in srgb, var(--status-danger, #e5484d) 10%, transparent); color: var(--status-danger, #e5484d); }

/* Escritorio: el menú se puede ocultar para trabajar a pantalla completa. */
.dash-sidebar { transition: background-color .3s ease, border-color .3s ease, transform .28s var(--ease); }
.dash-main { transition: margin-left .28s var(--ease); }
@media (min-width: 1025px) {
  .dash-shell.nav-oculto .dash-sidebar { transform: translateX(-100%); visibility: hidden; transition: transform .28s var(--ease), visibility 0s .28s; }
  .dash-shell.nav-oculto .dash-main { margin-left: 0; }
}

/* Tablet (768–1024): antes era una franja de íconos sin nombres; ahora es
   el mismo panel con nombres que en el celular, y el contenido usa todo
   el ancho. */
@media (min-width: 768px) and (max-width: 1024px) {
  .dash-sidebar { width: 280px; padding: 20px 12px; transform: translateX(-100%); box-shadow: 0 20px 40px var(--shadow); }
  .dash-sidebar.open { transform: translateX(0); }
  .dash-nav-link { justify-content: flex-start; padding: 10px 14px; }
  .dash-nav-label, .dash-nav-badge { display: inline; }
  .dash-nav-group-toggle { font-size: 11px; padding: 10px 14px; justify-content: space-between; }
  .dash-main { margin-left: 0; }
}

@media (max-width: 1024px) {
  .dash-topbar-date { display: none; }
}
@media (max-width: 900px) {
  .dash-breadcrumb-sep, .dash-breadcrumb-vista { display: none !important; }
  .dash-negocio-chip { max-width: 220px; }
}
@media (max-width: 640px) {
  .dash-topbar { padding: 0 8px; gap: 6px; }
  .dash-topbar-left { gap: 6px; }
  .dash-topbar .brand-logo-img { height: 16px; }
  .dash-negocio-chip { padding: 3px; border: 0; background: transparent; max-width: none; flex: 1 1 auto; }
  .dash-negocio-chip .dash-store-name { display: block; font-size: 13px; }
  .dash-topbar .quick-create-trigger { width: 40px; padding: 0; justify-content: center; }
  .quick-create-texto { display: none; }
  .dash-buscar { width: 40px; height: 40px; }
  .dash-topbar:has(.dash-modo:not([hidden])) .dash-negocio-chip { display: none; }
}
@media (max-width: 380px) {
  .dash-topbar .brand { display: none; }
}
.dash-topbar-right > * { flex-shrink: 0; }
/* Los disparadores del panel tienen tamaño propio: sin el margen negativo del
   sitio público, así el menú abre debajo del botón y no encima. */
.dash-topbar .quick-create-trigger, .dash-topbar .dash-cuenta-trigger, .dash-topbar .dash-buscar { margin: 0; }
.dash-topbar .dash-buscar { width: 40px; height: 40px; padding: 0; border-radius: 50%; }
.dash-topbar .dash-buscar:hover { background: var(--chrome-active-bg, var(--surface-2)); }
.dash-topbar .quick-create-trigger { padding: 0 14px 0 11px; }
.dash-topbar .nav-dropdown-menu { top: calc(100% + 4px); }
.dash-topbar .nav-dropdown-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
@media (max-width: 640px) { .dash-topbar .quick-create-trigger { padding: 0; } }

/* ===================================================================
   Etapa 1 — Configuración como app (js/dashboard-ajustes.js)
   Lista de secciones + detalle; en el celular, una pantalla a la vez.
   =================================================================== */
.ajustes { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); gap: 28px; align-items: start; }
.ajustes-lista { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 10px; }
.ajustes-lista h1 { margin: 0 0 4px; font-size: 28px; }
.ajustes-lista ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ajustes-buscar { width: 100%; min-height: 42px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: 15px var(--font); }
.ajustes-buscar:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ajustes-grupo { padding: 14px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ajustes-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; color: var(--text); text-decoration: none; border: 1px solid transparent; transition: background .18s ease, border-color .18s ease; }
.ajustes-item:hover { background: var(--surface); border-color: var(--border); }
.ajustes-item.is-active { background: var(--surface); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 6px 18px var(--shadow-soft); }
.ajustes-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ajustes-icono { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.ajustes-icono svg { width: 19px; height: 19px; }
.ajustes-texto { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ajustes-texto strong { font-size: 14px; font-weight: 600; }
.ajustes-texto small { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.ajustes-externo { color: var(--muted); font-size: 14px; }
.ajustes-sin { color: var(--muted); font-size: 13px; padding: 6px 10px; }
.ajustes-detalle { min-width: 0; }
.ajustes-detalle .dash-panel + .dash-panel { margin-top: 16px; }
.ajustes-detalle .dash-panel h2 { margin-top: 0; font-size: 17px; }
.ajustes-volver { display: none; }

.ajustes-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.ajustes-opcion { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; text-align: left; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; transition: border-color .18s ease, transform .15s ease; }
.ajustes-opcion strong { font-size: 14px; }
.ajustes-opcion small { font-size: 12px; color: var(--muted); }
.ajustes-opcion:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.ajustes-opcion:active { transform: scale(.98); }
.ajustes-opcion.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.ajustes-switch { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.ajustes-switch input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }
.ajustes-switch span { display: flex; flex-direction: column; gap: 2px; }
.ajustes-switch small { color: var(--muted); font-size: 13px; }
.ajustes-dispositivos { list-style: none; margin: 0; padding: 0; }
.ajustes-dispositivos li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.ajustes-dispositivos li:last-child { border-bottom: 0; }
.ajustes-dispositivos span { display: flex; flex-direction: column; min-width: 0; }
.ajustes-dispositivos small { color: var(--muted); font-size: 12px; }

@media (max-width: 900px) {
  .ajustes { grid-template-columns: 1fr; gap: 12px; }
  .ajustes-lista { position: static; }
  .ajustes.con-detalle .ajustes-lista { display: none; }
  .ajustes:not(.con-detalle) .ajustes-detalle { display: none; }
  .ajustes-volver { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 4px; color: var(--accent); font-weight: 600; text-decoration: none; }
  .ajustes-item { padding: 12px 10px; }
}

/* Letra grande (Configuración > Apariencia): todo el panel un poco más grande. */
html[data-texto="grande"] .dash-main,
html[data-texto="grande"] .dash-sidebar { zoom: 1.12; }
/* Modo táctil: objetivos de 48px, filas más altas y más aire. */
html[data-tactil] .dash-shell button,
html[data-tactil] .dash-shell .btn-jade,
html[data-tactil] .dash-shell .btn-ghost,
html[data-tactil] .dash-shell .secondary,
html[data-tactil] .dash-shell select,
html[data-tactil] .dash-shell input:not([type="checkbox"]):not([type="radio"]) { min-height: 48px; }
html[data-tactil] .dash-nav-link { min-height: 50px; }
html[data-tactil] .dash-table td { padding-top: 16px; padding-bottom: 16px; }
html[data-tactil] .dash-shell input[type="checkbox"], html[data-tactil] .dash-shell input[type="radio"] { width: 24px; height: 24px; }
/* Textos largos como valor de una tarjeta (ej. el plato más rentable): parten
   la línea en vez de salirse de la tarjeta en el celular. */
.dash-kpi-value, .dash-kpi-label { overflow-wrap: anywhere; min-width: 0; }

/* Selector Plataforma / Mi negocio (super_admin). En el celular no cabe en
   la barra junto a la lupa y el "Nuevo": baja al tope del menú lateral y la
   barra muestra solo el chip de dónde estás. */
.dash-modo-drawer { display: none; }
.dash-negocio-chip.es-plataforma { display: none; }
@media (max-width: 640px) {
  .dash-topbar .dash-modo { display: none !important; }
  .dash-topbar:has(.dash-modo:not([hidden])) .dash-negocio-chip:not([hidden]) { display: inline-flex; }
  .dash-negocio-chip.es-plataforma:not([hidden]) { display: inline-flex; }
  .dash-modo-drawer:not([hidden]) { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px solid var(--chrome-border, var(--border)); }
  .dash-modo-drawer-titulo { padding: 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
  .dash-modo-drawer-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--chrome-border, var(--border)); border-radius: 14px; background: var(--surface-2); }
  .dash-modo-drawer-botones button { min-height: 42px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: 600 14px/1.2 var(--font); cursor: pointer; }
  .dash-modo-drawer-botones button.is-active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px var(--shadow-soft); }
  .dash-modo-drawer-botones button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
}
/* .nav-dropdown es inline-flex y le ganaba al atributo hidden: el "Nuevo"
   aparecía en modo Plataforma aunque no tuviera nada que crear. */
.nav-dropdown[hidden] { display: none; }
/* Par etiqueta + campo dentro de .dash-form-grid (ver agruparCampos() en
   dashboard.js): la etiqueta sobre su campo, una celda de la grilla. */
.dash-campo { display: flex; flex-direction: column; min-width: 0; }
.dash-campo > label { margin-top: 14px; }
.dash-campo > :is(input, select, textarea, .glass-select) { width: 100%; }
.dash-campo:not(:has(> :not([hidden]))) { display: none; }
@media (max-width: 640px) {
  .dash-form-grid { grid-template-columns: minmax(0, 1fr); }
  /* En el celular el formulario se lee de arriba a abajo y el botón de
     guardar queda siempre a mano, pegado abajo del modal. */
  #dash-shell .dash-modal .dash-form-grid > button[type="submit"]:last-child { position: sticky; bottom: 0; z-index: 1; box-shadow: 0 -14px 18px var(--bg), 0 28px 0 2px var(--bg), 0 14px 0 2px var(--bg); }
}

/* Selector de país del teléfono: una sola línea ("+506 Costa Rica"),
   recortando el nombre si no cabe. */
.phone-input .glass-select-trigger { white-space: nowrap; }
.phone-input .glass-select-trigger > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .phone-input .glass-select { flex-basis: 132px; } }
/* Campo de fecha con valor: se ve como cualquier campo lleno (texto normal,
   borde normal); el acento queda solo para el foco y el calendario abierto. */
.auth-form .dash-daterange-trigger.is-field.is-active { color: var(--text); border-color: var(--border); }
.auth-form .dash-daterange-trigger.is-field:hover,
.auth-form .dash-daterange-trigger.is-field[aria-expanded="true"] { border-color: var(--accent); }
.glass-select.full { grid-column: 1 / -1; }
.dash-daterange-day:disabled, .dash-daterange-badge:disabled { opacity: .3; cursor: not-allowed; pointer-events: none; }
/* Fecha + hora (antes <input type="datetime-local">): calendario y hora lado a lado. */
.dash-fechahora { display: grid; grid-template-columns: minmax(0, 1fr) 118px; gap: 8px; }
.dash-fechahora > input[type="time"] { min-width: 0; }
/* Recuadros de formulario (<fieldset>) con el mismo borde y radio del panel,
   no el borde blanco del navegador. Los que son solo contenedores (sin borde
   en su style) no cambian. */
#dash-shell fieldset:not([style*="border:0"]):not([style*="border: 0"]) { margin: 16px 0 0; padding: 14px 16px 16px; border: 1px solid var(--border); border-radius: 14px; min-width: 0; }
#dash-shell fieldset > legend { padding: 0 6px; color: var(--text); font: 700 13px/1.2 var(--font); }

/* ===================================================================
   Resumen v2 (Etapa 1): jerarquía clara, lectura rápida en el celular y
   un modo "Personalizar" con botones reales (mover, tamaño, quitar).
   =================================================================== */
.dash-resumen-editar { display: inline-flex; align-items: center; gap: 8px; }
.dash-resumen-editar[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.dash-resumen-edicion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 16px; padding: 12px 14px; border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--border)); border-radius: 14px; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.dash-resumen-edicion[hidden] { display: none; }
.dash-resumen-edicion p { margin: 0; font-size: 13px; color: var(--muted); flex: 1 1 260px; }
.dash-resumen-edicion p strong { color: var(--text); }
.dash-resumen-edicion-acciones { display: flex; flex-wrap: wrap; gap: 8px; }

/* Controles viejos (agarre, grip, "Quitar" flotante): reemplazados por la barra. */
#dash-view .dash-widget-handle, #dash-view .dash-widget-resize, #dash-view .dash-widget-actions { display: none !important; }

/* Barra de edición de cada tarjeta: solo en "Personalizar". */
.dash-widget-editbar { display: none; }
#dash-view.resumen-editando .dash-widget-editbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.dash-widget-editbar button { display: grid; place-items: center; width: 34px; height: 34px; min-height: 34px; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--muted); cursor: pointer; }
.dash-widget-editbar button:hover { color: var(--text); border-color: var(--accent); }
.dash-widget-editbar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dash-widget-editbar button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
.dash-widget-tamanos { display: inline-flex; gap: 4px; margin-left: auto; }
.dash-widget-editbar .dash-widget-quitar:hover { color: var(--status-critical); border-color: var(--status-critical); }
#dash-view.resumen-editando [data-widget-id] { outline: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 3px; }
#dash-view.resumen-editando [data-widget-id][draggable="true"] { cursor: grab; }
#dash-view.resumen-editando .dash-kpi-card.is-clickable:hover { transform: none; }

/* Indicadores: etiqueta arriba, número grande, comparación en chip. */
#resumen-kpis { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px; }
#resumen-kpis .dash-kpi-card { display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; padding: 16px 18px; min-height: 108px; }
#resumen-kpis .dash-kpi-card.has-sparkline { padding-right: 18px; padding-bottom: 16px; }
#resumen-kpis .dash-kpi-label { order: 0; margin: 0; font-size: 12px; letter-spacing: .03em; }
#resumen-kpis .dash-kpi-value { order: 1; font-size: clamp(20px, 8cqi, 30px); }
#resumen-kpis .dash-kpi-card.is-destacado .dash-kpi-value { font-size: clamp(24px, 9cqi, 38px); }
#resumen-kpis .dash-kpi-delta { order: 2; align-self: flex-start; margin: 2px 0 0; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); font-size: 12px; }
#resumen-kpis .dash-kpi-delta span { font-weight: 600; opacity: .85; }
#resumen-kpis .dash-kpi-sparkline { order: 3; position: static; width: 100%; height: 40px; margin-top: auto; opacity: .9; }
#resumen-kpis .dash-kpi-card.is-destacado { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 9%, var(--surface)) 0%, var(--surface) 60%); }
#resumen-kpis .dash-widget-editbar { order: 4; }

/* Paneles: el tamaño elegido se respeta; en pantallas chicas todo a lo ancho. */
.dash-chart-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.dash-chart-card.is-full { grid-column: 1 / -1; }
.dash-chart-card { display: flex; flex-direction: column; }
.dash-chart-card .dash-chart-svg-wrap { flex: 1 1 auto; }
.dash-chart-card .dash-widget-editbar { margin-top: auto; }

/* "Para atender": una sola tarjeta con los avisos en lista. */
.dash-atender { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.dash-atender h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px; }
.dash-atender h2 span { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--status-critical) 16%, transparent); color: var(--status-critical); font-size: 12px; }
.dash-atender .dash-pulso-alertas { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.dash-atender .dash-pulso-alertas li + li { border-top: 1px solid var(--border); }
.dash-atender .dash-pulso-alerta { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border: 0; border-radius: 0; background: none; color: var(--text); font-size: 14px; text-decoration: none; }
.dash-atender .dash-pulso-alerta > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.dash-atender .dash-pulso-alerta svg { flex: 0 0 auto; color: var(--muted); }
.dash-atender .dash-pulso-alerta:hover svg, .dash-atender .dash-pulso-alerta:focus-visible svg { color: var(--accent); }

/* Puesta en marcha: franja compacta con la lista plegable. */
details.dash-onboarding { padding: 14px 16px; margin-bottom: 10px; }
details.dash-onboarding > summary { list-style: none; cursor: pointer; align-items: center; }
details.dash-onboarding > summary::-webkit-details-marker { display: none; }
details.dash-onboarding .dash-onboarding-head h2 { font-size: 16px; margin: 2px 0 0; }
.dash-onboarding-ver { flex: 0 0 auto; color: var(--accent); font-size: 13px; font-weight: 600; }
details.dash-onboarding[open] .dash-onboarding-ver { visibility: hidden; }
details.dash-onboarding .dash-onboarding-progress { margin: 12px 0 0; }
details.dash-onboarding[open] .dash-onboarding-progress { margin-bottom: 14px; }
details.dash-onboarding:not([open]) .dash-onboarding-steps { display: none; }
#resumen-onboarding .dash-onboarding-next { margin: 0 0 16px; }

/* Pedidos recientes como lista (se lee completa en el celular). */
.dash-lista-pedidos { list-style: none; margin: 0; padding: 0; }
.dash-lista-pedidos li + li { border-top: 1px solid var(--border); }
.dash-lista-pedidos a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; color: var(--text); text-decoration: none; }
.dash-lista-pedidos a:hover strong:first-child { color: var(--accent); }
.dash-lista-pedidos-quien, .dash-lista-pedidos-cuanto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dash-lista-pedidos-quien small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-lista-pedidos-cuanto { align-items: flex-end; flex: 0 0 auto; }
.dash-lista-pedidos-cuanto strong { font-variant-numeric: tabular-nums; }

/* Estados de pedidos: total + barra apilada + leyenda. */
.dash-estados { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.dash-estados strong { font-size: 30px; font-variant-numeric: tabular-nums; }
.dash-estados span { color: var(--muted); font-size: 13px; }
.dash-estados-barra { display: flex; height: 12px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.dash-estados-barra span { display: block; height: 100%; }
.dash-estados-barra .is-pendiente, .dash-estados-leyenda .is-pendiente > span { background: var(--muted); }
.dash-estados-barra .is-listo, .dash-estados-leyenda .is-listo > span { background: var(--status-good); }
.dash-estados-barra .is-cancelado, .dash-estados-leyenda .is-cancelado > span { background: var(--status-critical); }
.dash-estados-leyenda { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.dash-estados-leyenda li { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.dash-estados-leyenda li > span { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.dash-estados-leyenda strong { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }
.dash-estados-leyenda small { width: 38px; text-align: right; }

@media (max-width: 767px) {
  #resumen-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  #resumen-kpis .dash-kpi-card { padding: 14px; min-height: 96px; }
  #resumen-kpis .dash-kpi-card.is-wide { grid-column: 1 / -1; }
  #resumen-kpis .dash-kpi-label { font-size: 11px; }
  #resumen-kpis .dash-kpi-value { font-size: clamp(18px, 11cqi, 26px); }
  #resumen-kpis .dash-kpi-card.is-destacado .dash-kpi-value { font-size: clamp(24px, 10cqi, 34px); }
  .dash-chart-grid { grid-template-columns: 1fr; }
  .dash-chart-card.is-wide, .dash-chart-card.is-full { grid-column: auto; }
  .dash-chart-card .dash-widget-tamanos { display: none; }
  #dash-view.resumen-editando .dash-kpi-card:not(.is-wide) .dash-widget-editbar { gap: 3px; }
  #dash-view.resumen-editando .dash-kpi-card:not(.is-wide) .dash-widget-editbar button { width: 30px; height: 30px; min-height: 30px; }
  #dash-view:not(.resumen-editando) #resumen-kpis .dash-kpi-card { padding-top: 14px; padding-bottom: 14px; }
}
.dash-onboarding-acciones { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
details.dash-onboarding .dash-onboarding-next { margin: 0; min-height: 38px; padding: 0 14px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; }
details.dash-onboarding .dash-onboarding-next:hover { filter: brightness(1.08); }
#resumen-kpis .dash-kpi-delta { white-space: nowrap; max-width: 100%; }
@media (max-width: 767px) {
  details.dash-onboarding > summary { flex-wrap: wrap; gap: 10px; }
  .dash-onboarding-acciones { width: 100%; justify-content: space-between; }
  /* En una tarjeta angosta queda la flecha y el %; el texto completo va en el title. */
  #resumen-kpis .dash-kpi-card:not(.is-wide) .dash-kpi-delta span { display: none; }
}

/* Tablas largas: 25 filas y "Ver más" (prepararTabla() en dashboard.js). */
.dash-table tr.dash-fila-oculta { display: none; }
.dash-ver-mas { display: flex; width: 100%; max-width: 360px; margin: 12px auto 20px; justify-content: center; }

/* En el celular, cada fila de una tabla del panel se lee como tarjeta:
   la primera columna es el título y el resto "Columna: valor". */
@media (max-width: 640px) {
  .dash-table.dash-table-tarjetas { min-width: 0; }
  .dash-table.dash-table-tarjetas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dash-table.dash-table-tarjetas, .dash-table.dash-table-tarjetas tbody, .dash-table.dash-table-tarjetas tr, .dash-table.dash-table-tarjetas td { display: block; width: 100%; }
  .dash-table.dash-table-tarjetas tr { padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .dash-table.dash-table-tarjetas tr:last-child { border-bottom: 0; }
  .dash-table.dash-table-tarjetas tr.dash-fila-oculta { display: none; }
  .dash-table.dash-table-tarjetas td { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0; text-align: right; white-space: normal; overflow-wrap: anywhere; min-width: 0; }
  .dash-table.dash-table-tarjetas td::before { content: attr(data-label); flex: 0 0 auto; max-width: 45%; color: var(--muted); font-size: 12px; font-weight: 600; text-align: left; }
  .dash-table.dash-table-tarjetas td[data-label=""]::before { content: none; }
  .dash-table.dash-table-tarjetas td[data-label=""] { justify-content: flex-end; }
  .dash-table.dash-table-tarjetas td:first-child { justify-content: flex-start; padding-bottom: 6px; font-size: 15px; font-weight: 700; text-align: left; }
  .dash-table.dash-table-tarjetas td:first-child::before { content: none; }
  .dash-table.dash-table-tarjetas td:empty { display: none; }
  .dash-table.dash-table-tarjetas td > * { max-width: 100%; }
  .dash-table.dash-table-tarjetas .dash-celda-valor { display: block; min-width: 0; }
  .dash-table.dash-table-tarjetas td small { white-space: normal !important; }
  .dash-table.dash-table-tarjetas td .dash-row-actions, .dash-table.dash-table-tarjetas td.dash-row-actions { flex-wrap: wrap; justify-content: flex-end; }
  /* Acciones de la fila: ocupan el ancho de la tarjeta, de a dos por línea. */
  .dash-table.dash-table-tarjetas td[data-label=""]:has(> .dash-row-actions) > .dash-row-actions { width: 100%; }
  .dash-table.dash-table-tarjetas td > .dash-row-actions > :is(button, a) { flex: 1 1 calc(50% - 8px); justify-content: center; text-align: center; }
  .dash-table.dash-table-tarjetas tr[data-kpi-index], .dash-table.dash-table-tarjetas tr.is-clickable { cursor: pointer; }
}
/* Filtros en píldoras: en el celular una sola fila que se desliza con el
   dedo (como en las apps), no tres filas de botones. */
@media (max-width: 640px) {
  .dash-badge-tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; min-width: 0; flex: 1 1 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 2px; }
  .dash-badge-tabs::-webkit-scrollbar { display: none; }
  .dash-badge-tab { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
}

/* Indicadores de cualquier vista (Planta, Caja, Gastos, Recetas...): mismo
   lenguaje que el Resumen -- etiqueta arriba, número grande, sin el espacio
   que dejaban los controles viejos del tablero. */
.dash-kpi-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; min-height: 0; }
.dash-kpi-card > .dash-kpi-label { order: 0; margin: 0; }
.dash-kpi-card > .dash-kpi-value { order: 1; }
.dash-kpi-card > :not(.dash-kpi-label):not(.dash-kpi-value) { order: 2; }
.dash-kpi-card > .dash-kpi-delta, .dash-kpi-card > .store-meta { margin-top: 0; }
@media (max-width: 767px) {
  .dash-kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dash-kpi-card { padding: 14px; }
}

/* Pestañas (Planta, Reportes...): en el celular una sola fila deslizable. */
@media (max-width: 640px) {
  .dash-period-toggle.planta-pestanas, .dash-period-toggle[role="tablist"] { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  .dash-period-toggle[role="tablist"]::-webkit-scrollbar { display: none; }
  .dash-period-toggle[role="tablist"] .dash-period-btn { flex: 0 0 auto; white-space: nowrap; padding: 8px 14px; font-size: 13px; }
}
/* Buscador con botón al lado (actividad económica, CABYS): el par ocupa la
   fila entera; en el celular el botón baja debajo del selector. */
.dash-campo:has(.prod-cabys-buscador) { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .prod-cabys-buscador { display: flex; flex-wrap: wrap; gap: 8px; }
  .prod-cabys-buscador > .glass-select, .prod-cabys-buscador > input { flex: 1 1 100%; }
  .prod-cabys-buscador > button { flex: 1 1 100%; }
  /* Acciones de la cabecera de cada vista: de a dos por fila, sin torres de botones. */
  #dash-view > .dash-view-head .dash-view-head-actions, #dash-view > .dash-view-head > .dash-row-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  #dash-view > .dash-view-head .dash-view-head-actions > button, #dash-view > .dash-view-head .dash-view-head-actions > a, #dash-view > .dash-view-head > .dash-row-actions > button, #dash-view > .dash-view-head > .dash-row-actions > a { flex: 1 1 calc(50% - 4px); min-width: 0; width: auto !important; margin: 0 !important; }
  /* Controles de una sección (ej. categoría del menú): compactos, en una fila. */
  .menu-category > .dash-view-head { flex-wrap: wrap; gap: 8px; }
  .menu-category > .dash-view-head > .dash-row-actions { display: flex; flex-wrap: nowrap; gap: 6px; width: 100%; justify-content: flex-end; }
  /* Botones sueltos de una tarjeta (comandas por cobrar del POS, publicación
     y mesas del menú): de a dos por fila y parejos, no amontonados a la derecha. */
  #pos-comandas-pendientes > .dash-row-actions, .menu-publicacion > .dash-row-actions, .menu-mesas > .dash-view-head > .dash-row-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; justify-content: flex-start; }
  #pos-comandas-pendientes > .dash-row-actions > :is(button, a), .menu-publicacion > .dash-row-actions > :is(button, a), .menu-mesas > .dash-view-head > .dash-row-actions > :is(button, a) { flex: 1 1 calc(50% - 4px); min-width: 0; margin: 0; justify-content: center; text-align: center; }
}
@media (max-width: 640px) {
  /* El título de la tarjeta fluye como texto (nombre y su detalle debajo o al lado), sin partir palabras. */
  .dash-table.dash-table-tarjetas td:first-child { display: block; }
  .dash-table.dash-table-tarjetas td:first-child small, .dash-table.dash-table-tarjetas td:first-child .store-meta { display: block; margin-top: 2px; font-weight: 500; }
  .dash-table.dash-table-tarjetas td { overflow-wrap: break-word; }
}

/* .dash-card (Menú digital, Delivery, formularios de Cocina...) nunca tuvo
   estilo: las secciones quedaban sueltas sobre el fondo. */
.dash-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; min-width: 0; }
.dash-card > .dash-view-head { margin-bottom: 12px; }
.dash-card > .dash-view-head h2 { margin: 0; font-size: 17px; }

/* Cocina: columnas por etapa y comandas que se leen de un vistazo. */
.cocina-columna { min-width: 0; }
.cocina-columna > header { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 10px; }
.cocina-columna > header h2 { margin: 0; font-size: 15px; }
.cocina-columna > header span { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font: 700 13px/1 var(--font); }
.cocina-columna.is-sent > header span { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.cocina-columna > .store-meta { padding: 16px; border: 1px dashed var(--border); border-radius: 14px; text-align: center; }
.cocina-comanda { margin-bottom: 12px; padding: 14px; border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 14px; background: var(--surface); }
.cocina-comanda.is-atento { border-left-color: var(--status-warning, #e5a13a); }
.cocina-comanda.is-tarde { border-left-color: var(--status-critical); }
.cocina-comanda-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cocina-comanda-head strong { display: block; font-size: 17px; }
.cocina-comanda-head small { color: var(--muted); font-size: 12px; }
.cocina-tiempo { flex: 0 0 auto; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font: 700 13px/1.2 var(--font); font-variant-numeric: tabular-nums; }
.cocina-comanda.is-atento .cocina-tiempo { background: color-mix(in srgb, var(--status-warning, #e5a13a) 18%, transparent); color: var(--status-warning, #e5a13a); }
.cocina-comanda.is-tarde .cocina-tiempo { background: color-mix(in srgb, var(--status-critical) 18%, transparent); color: var(--status-critical); }
.cocina-items { list-style: none; margin: 12px 0 0; padding: 0; }
.cocina-items li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.cocina-items li > span:first-child { min-width: 0; }
.cocina-items li strong { font-size: 15px; }
.cocina-items li small { display: block; color: var(--status-warning, #e5a13a); font-size: 12px; font-weight: 600; }
.cocina-items li.is-served strong { color: var(--muted); text-decoration: line-through; }
.cocina-item-btn { flex: 0 0 auto; min-width: 104px; min-height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); font: 700 13px/1 var(--font); cursor: pointer; }
.cocina-item-btn.is-preparing { border-color: color-mix(in srgb, var(--status-warning, #e5a13a) 60%, var(--border)); color: var(--status-warning, #e5a13a); }
.cocina-item-btn.is-ready { border-color: color-mix(in srgb, var(--status-good) 60%, var(--border)); color: var(--status-good); }
.cocina-item-btn:active { transform: scale(.97); }
.cocina-item-estado { flex: 0 0 auto; color: var(--muted); font-size: 13px; font-weight: 600; }
.cocina-nota { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--status-warning, #e5a13a) 10%, transparent); font-size: 13px; }
.cocina-comanda-pie { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cocina-comanda-pie > .glass-select { flex: 1 1 140px; }
.cocina-comanda-pie > button { flex: 1 1 140px; margin: 0; }
/* Red de seguridad: un <button> sin clase dentro del panel nunca se ve con
   el gris del navegador (hereda el estilo de botón secundario). */
#dash-view button:not([class]), .dash-modal button:not([class]) { min-height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); font: 600 13px/1 var(--font); cursor: pointer; }
#dash-view button:not([class]):hover, .dash-modal button:not([class]):hover { border-color: var(--accent); }
@media (max-width: 767px) { .dash-kpis { grid-template-columns: 1fr 1fr; gap: 10px; } .dash-kpi { padding: 14px; } .dash-kpi strong { font-size: 24px; } }

/* Cambiar de negocio desde el chip de la barra. */
button.dash-negocio-chip { font: inherit; color: inherit; cursor: default; text-align: left; }
button.dash-negocio-chip.puede-cambiar { cursor: pointer; }
button.dash-negocio-chip.puede-cambiar:hover, button.dash-negocio-chip[aria-expanded="true"] { border-color: var(--accent); }
button.dash-negocio-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.dash-negocio-chip:disabled { opacity: 1; }
.dash-negocio-chevron { display: none; flex: 0 0 auto; color: var(--muted); transition: transform .2s ease; }
.dash-negocio-chip.puede-cambiar .dash-negocio-chevron { display: block; }
.dash-negocio-chip[aria-expanded="true"] .dash-negocio-chevron { transform: rotate(180deg); }
#dash-shell.selector-en-chip .dash-business-switcher { display: none; }
#dash-shell.selector-en-chip .dash-business-switcher.abierto:not([hidden]) { display: grid; position: fixed; top: 58px; z-index: 80; width: min(380px, calc(100vw - 24px)); margin: 0; box-shadow: 0 24px 48px var(--shadow); background: var(--bg); }
@media (max-width: 640px) {
  .dash-negocio-chip.puede-cambiar { border: 1px solid var(--chrome-border, var(--border)); padding: 3px 8px 3px 3px; }
}
#dash-shell.selector-en-chip .dash-business-switcher.abierto:not([hidden]) { grid-template-columns: 1fr; gap: 8px; padding: 16px; }
#dash-shell.selector-en-chip .dash-business-switcher.abierto .dash-store-select, #dash-shell.selector-en-chip .dash-business-switcher.abierto .glass-select { width: 100%; }
#dash-shell.selector-en-chip .dash-business-switcher.abierto #dash-business-switcher-help { color: var(--muted); font-size: 12px; }
/* Filtros plegables ("Buscar y filtrar"): en el celular no empujan la lista. */
.dash-filtros { margin-top: 12px; }
.dash-filtros > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text); font: 600 13px/1 var(--font); cursor: pointer; list-style: none; }
.dash-filtros > summary::-webkit-details-marker { display: none; }
.dash-filtros > summary::before { content: ''; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E") center / contain no-repeat; }
.dash-filtros[open] > summary { border-color: var(--accent); color: var(--accent); }
/* Paneles del Resumen: el nombre (primera columna) se lee en hasta 2 líneas
   en vez de cortarse con "…"; el valor de la derecha queda en una línea. */
.dash-chart-card .dash-table-compacta { table-layout: auto; }
.dash-chart-card .dash-table-compacta td:first-child { white-space: normal; overflow: visible; }
.dash-chart-card .dash-table-compacta td:first-child small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.dash-chart-card .dash-table-compacta td.is-num { width: 1%; white-space: nowrap; }
/* Un indicador con texto (ej. "Mantenimiento de vehículos") baja de línea en vez de salirse. */
.dash-kpi-value { white-space: normal; overflow-wrap: break-word; }

/* Selector de hora de ASTRC (AstrcDateRange.mejorarHora): mismo trigger y
   panel que el calendario, con columnas que se tocan en vez del reloj nativo. */
.dash-daterange-trigger.is-hora::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
.dash-daterange-trigger.is-hora { white-space: nowrap; }
.dash-daterange-trigger.is-hora.is-field { width: 100%; }
.dash-daterange-horas-row .dash-daterange-trigger.is-hora { width: 100%; justify-content: flex-start; border-radius: 10px; margin-top: 4px; }
.dash-fechahora { grid-template-columns: minmax(0, 1fr) minmax(0, 150px); }
.dash-hora-panel { width: 236px; z-index: 30; }
.dash-hora-columnas { display: grid; grid-template-columns: 1fr 1fr .9fr; gap: 6px; margin-bottom: 12px; }
.dash-hora-col {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 196px; overflow-y: auto; overscroll-behavior: contain;
  scroll-snap-type: y proximity; scrollbar-width: none; padding: 2px;
}
.dash-hora-col::-webkit-scrollbar { display: none; }
.dash-hora-col.is-corta { justify-content: flex-start; }
.dash-hora-opcion {
  min-height: 36px; border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: var(--text); font: 500 14px/1 var(--font);
  cursor: pointer; scroll-snap-align: center; font-variant-numeric: tabular-nums;
}
.dash-hora-opcion:hover { background: var(--surface-2); }
.dash-hora-opcion.is-selected { background: var(--accent); color: #ffffff; font-weight: 700; }
.dash-hora-opcion:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dash-hora-panel .dash-daterange-aplicar { width: 100%; }
@media (max-width: 640px) { .dash-hora-opcion { min-height: 44px; font-size: 16px; } }
/* Tablero de la planta: una columna vacía no ocupa toda la altura (en el
   celular dejaba 700 px de "Nada acá" antes de la columna con trabajo). */
.planta-tablero { align-items: start; }
.planta-columna:has(.planta-vacio) { min-height: 0; }
@media (max-width: 640px) { .planta-columna-lista { max-height: 62vh; } }
/* En el celular las etapas van una debajo de otra: se ve de un vistazo dónde
   está el trabajo, sin deslizar de lado buscando la columna con órdenes. */
@media (max-width: 640px) {
  .planta-tablero { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); overflow-x: visible; scroll-snap-type: none; }
  .planta-columna:has(.planta-vacio) { flex-direction: row; align-items: center; justify-content: space-between; padding: 8px 12px; }
  .planta-columna:has(.planta-vacio) > header { border-bottom: 0; margin: 0; padding: 0; flex: 1; }
  .planta-columna:has(.planta-vacio) .planta-columna-lista { display: none; }
}
/* 148: código de descuento o cortesía en contratar.html */
.contratar-codigo { margin: 4px 0 14px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; }
.contratar-codigo > summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--accent); }
.contratar-codigo-fila { display: flex; gap: 8px; margin-top: 10px; }
.contratar-codigo-fila input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .04em; }
.contratar-codigo-fila button { width: auto; margin: 0; }
.contratar-codigo .contratar-nota.is-error { color: var(--status-danger, #e5484d); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Menú digital → Mesas y QR */
.menu-qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 14px; }
.menu-qr-mesa { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); text-align: center; }
.menu-qr-mesa img { width: 120px; height: 120px; border-radius: 8px; background: #fff; padding: 4px; }
.menu-qr-mesa figcaption { display: grid; gap: 2px; }
.menu-qr-mesa small { color: var(--muted); font-size: 12px; }
.menu-qr-mesa a { font-size: 13px; font-weight: 600; color: var(--accent); }
.qr-hoja { display: none; }
@page qr { size: letter; margin: 12mm; }
@media print {
  body.imprimiendo-qr > *:not(#qr-hoja) { display: none !important; }
  body.imprimiendo-qr { background: #fff !important; }
  body.imprimiendo-qr .qr-hoja { page: qr; display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; color: #000; font-family: system-ui, sans-serif; }
  .qr-hoja-tarjeta { break-inside: avoid; border: 1px dashed #999; border-radius: 4mm; padding: 6mm; text-align: center; }
  .qr-hoja-tarjeta img { display: block; margin: 0 auto; width: 60mm; height: 60mm; }
  .qr-hoja-tarjeta h2 { margin: 3mm 0 1mm; font-size: 22pt; }
  .qr-hoja-tarjeta p { margin: 0; font-size: 10pt; }
  .qr-hoja-negocio { font-weight: 700; font-size: 12pt !important; margin-bottom: 3mm !important; }
}
/* 149: lista de materiales en la ficha técnica de la planta */
.planta-ficha-subtitulo { margin: 10px 0 0; font-weight: 700; font-size: 14px; }
.planta-ficha-subtitulo small { font-weight: 400; color: var(--muted); }
.planta-lista { display: grid; gap: 8px; }
.planta-lista-fila { display: grid; grid-template-columns: minmax(0, 1fr) 96px 28px 40px; gap: 6px; align-items: center; }
.planta-lista-fila .glass-select { min-width: 0; }
.planta-lista-unidad { font-size: 13px; color: var(--muted); }
.planta-procesos { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; }
.planta-procesos > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.planta-procesos > .dash-form-grid { margin-top: 10px; }
.planta-lista-fila { grid-template-columns: minmax(0, 1fr) 110px 30px auto; }
@media (max-width: 640px) {
  .planta-lista-fila { grid-template-columns: minmax(0, 1fr) 36px auto; padding: 10px; border: 1px solid var(--border); border-radius: 12px; }
  .planta-lista-fila > :first-child { grid-column: 1 / -1; }
}

/* Avisos de las mesas en Cocina (150). */
.cocina-avisos { display: grid; gap: 8px; margin: 0 0 14px; }
.cocina-aviso { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.cocina-aviso.is-bill { border-color: color-mix(in srgb, var(--jade, #10b981) 55%, transparent); }
.cocina-aviso.is-waiter { border-color: color-mix(in srgb, #f5a524 55%, transparent); }

/* Pulido (30/9): un formulario con [hidden] nunca se muestra aunque sea grid;
   fechas y números de las tablas con la letra del panel, no monoespaciada. */
.dash-form-grid[hidden], form[hidden] { display: none !important; }
.dash-fecha { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-main input[type="checkbox"], .dash-modal input[type="checkbox"] { accent-color: var(--brand-primary); width: 18px; height: 18px; }
.dash-pulso-cocina li > span { flex: none; white-space: nowrap; font-family: inherit; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.dash-pulso-cocina li > div { min-width: 0; }
/* Los controles de formulario heredan la letra de la página (los <button> no la heredan solos). */
button, input, select, textarea { font-family: inherit; }
/* Consola: ningún panel se estira más que su columna (un gráfico o una tabla
   anchos empujaban el panel fuera de la pantalla y cortaban los números). */
.plat-columnas > *, .plat-pendientes > * { min-width: 0; }
.plat-columnas .dash-panel .dash-table { min-width: 0; width: 100%; }
.plat-columnas .dash-panel .dash-table td { overflow-wrap: anywhere; }
.plat-columnas .dash-panel h2 { overflow-wrap: anywhere; }
/* Pedidos: las pestañas de estado se deslizan de lado en el celular (no se salen). */
#ped-badges { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
#ped-badges::-webkit-scrollbar { display: none; }

/* 159: Centro de ayuda (js/dashboard-ayuda.js) y recorridos con Driver.js. */
.ayuda-buscar { margin: 0 0 18px; }
.ayuda-buscar input { width: 100%; max-width: 560px; }
.ayuda-recorridos { margin-bottom: 22px; }
.ayuda-tours { display: flex; flex-wrap: wrap; gap: 8px; }
.ayuda-avance { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; }
.ayuda-reiniciar { width: auto; margin: 0 0 0 auto; padding: 4px 0; border: 0; background: none; color: var(--accent); font-size: 13px; font-weight: 600; cursor: pointer; }
.ayuda-reiniciar:hover { text-decoration: underline; }
.ayuda-reiniciar:disabled { opacity: .6; cursor: default; }
.ayuda-avance-barra { flex: 1; max-width: 320px; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.ayuda-avance-barra > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .4s var(--ease, ease); }
.ayuda-avance small { color: var(--muted); font-size: 13px; }
.ayuda-tour { width: auto; margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text); font-size: var(--fs-body-small); font-weight: 600; cursor: pointer; }
.ayuda-tour:hover, .ayuda-tour:focus-visible { border-color: var(--accent); }
.ayuda-tour em { font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.ayuda-tour em.is-nuevo { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.ayuda-tour em.is-visto { background: var(--surface-2); color: var(--muted); }
.ayuda-categoria { margin: 0 0 26px; }
.ayuda-categoria h2 { margin: 0 0 12px; font-size: 1.05rem; }
.ayuda-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.ayuda-tarjeta { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 14px; padding: 10px; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .2s var(--ease, ease), transform .2s var(--ease, ease); }
.ayuda-tarjeta:hover, .ayuda-tarjeta:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.ayuda-tarjeta img, .ayuda-tarjeta i { width: 92px; height: 72px; border-radius: 10px; border: 1px solid var(--border); }
.ayuda-tarjeta img { object-fit: cover; object-position: top left; }
.ayuda-tarjeta i { display: grid; place-items: center; font-style: normal; font-size: 1.6rem; font-weight: 800; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ayuda-tarjeta span { display: grid; gap: 4px; padding-right: 6px; }
.ayuda-tarjeta small { color: var(--muted); line-height: 1.45; }
.ayuda-articulo { max-width: 760px; }
.ayuda-articulo h1 { margin: 0 0 8px; font-size: clamp(1.5rem, 3vw, 2rem); }
.ayuda-kicker { margin: 0 0 6px; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ayuda-resumen { margin: 0 0 16px; color: var(--muted); line-height: 1.55; }
.ayuda-h { margin: 20px 0 8px; font-size: 1.02rem; }
.ayuda-h.is-separado { padding-top: 16px; border-top: 1px solid var(--border); }
.ayuda-p { margin: 0 0 12px; line-height: 1.6; }
.ayuda-lista { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 6px; line-height: 1.55; }
.ayuda-pasos { margin: 0 0 16px; padding: 0; list-style: none; counter-reset: ayuda; display: grid; gap: 10px; }
.ayuda-pasos li { counter-increment: ayuda; position: relative; padding-left: 38px; line-height: 1.55; }
.ayuda-pasos li::before { content: counter(ayuda); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-weight: 700; font-size: 13px; }
.ayuda-articulo a:not(.cta):not(.secondary), .ayuda-modal-cuerpo a { color: var(--accent); }
.ayuda-nota { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; font-size: var(--fs-body-small); line-height: 1.5; }
.ayuda-nota p { margin: 4px 0 0; }
.ayuda-nota.is-consejo { background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); }
.ayuda-nota.is-aviso { background: color-mix(in srgb, #f5a524 10%, transparent); border: 1px solid color-mix(in srgb, #f5a524 35%, var(--border)); }
.ayuda-figura { margin: 4px 0 18px; }
.ayuda-figura img { width: 100%; border-radius: 12px; border: 1px solid var(--border); }
.ayuda-figura figcaption { margin-top: 6px; color: var(--muted); font-size: 13px; }
.ayuda-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.ayuda-acciones > * { width: auto; margin: 0; }
.ayuda-modal { max-width: 620px; }
.ayuda-modal-cuerpo { max-height: min(62vh, 560px); overflow-y: auto; padding-right: 4px; }
.ayuda-modal-acciones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.ayuda-modal-acciones > * { width: auto; margin: 0; text-align: center; }

/* Recorridos (Driver.js) con la identidad de ASTRC. El popover se dibuja en
   <body>, fuera de #dash-shell (donde viven los colores del panel): por eso
   trae sus propios tonos, uno por tema. */
.driver-popover.astrc-recorrido {
  --rec-bg: #141726; --rec-t1: #EDEEF6; --rec-t2: #9AA0B8; --rec-borde: #252A3D; --rec-sombra: 0 18px 50px rgba(0, 0, 0, .5);
  background: var(--rec-bg); color: var(--rec-t1); border: 1px solid var(--rec-borde); border-radius: 16px; box-shadow: var(--rec-sombra);
  padding: 18px 18px 14px; max-width: min(340px, calc(100vw - 32px)); font-family: inherit;
}
[data-theme="light"] .driver-popover.astrc-recorrido,
[data-theme="grey"] .driver-popover.astrc-recorrido {
  --rec-bg: #FFFFFF; --rec-t1: #161822; --rec-t2: #5C6178; --rec-borde: #DDE0E9; --rec-sombra: 0 18px 44px rgba(22, 24, 34, .18);
}
.driver-popover.astrc-recorrido .driver-popover-title { color: var(--rec-t1); font-size: 1rem; font-weight: 700; font-family: inherit; padding-right: 22px; }
.driver-popover.astrc-recorrido .driver-popover-description { color: var(--rec-t2); font-size: 14px; line-height: 1.55; font-family: inherit; }
.driver-popover.astrc-recorrido .driver-popover-progress-text { color: var(--rec-t2); font-size: 12px; }
.driver-popover.astrc-recorrido .driver-popover-footer { margin-top: 14px; }
.driver-popover.astrc-recorrido .driver-popover-footer button { width: auto; margin: 0; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--rec-borde); background: transparent; color: var(--rec-t1); text-shadow: none; font: 600 13px/1.2 inherit; font-family: inherit; transition: border-color .15s ease, background .15s ease; }
.driver-popover.astrc-recorrido .driver-popover-footer button:hover { border-color: var(--brand-primary); background: transparent; }
.driver-popover.astrc-recorrido .driver-popover-footer .driver-popover-next-btn { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.driver-popover.astrc-recorrido .driver-popover-footer .driver-popover-next-btn:hover { filter: brightness(1.08); background: var(--brand-primary); }
.driver-popover.astrc-recorrido .driver-popover-close-btn { color: var(--rec-t2); width: 32px; height: 32px; border-radius: 8px; }
.driver-popover.astrc-recorrido .driver-popover-close-btn:hover { color: var(--rec-t1); }
.driver-popover.astrc-recorrido button:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
.driver-popover.astrc-recorrido .driver-popover-arrow-side-bottom { border-bottom-color: var(--rec-bg); }
.driver-popover.astrc-recorrido .driver-popover-arrow-side-top { border-top-color: var(--rec-bg); }
.driver-popover.astrc-recorrido .driver-popover-arrow-side-left { border-left-color: var(--rec-bg); }
.driver-popover.astrc-recorrido .driver-popover-arrow-side-right { border-right-color: var(--rec-bg); }
@media (prefers-reduced-motion: reduce) { .driver-popover.astrc-recorrido { animation: none; } }

/* 162: Asistente con IA (js/dashboard-asistente.js). */
.dash-topbar .dash-asistente-btn { width: auto; padding: 0 14px 0 11px; gap: 6px; border-radius: 999px; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, transparent); font-weight: 700; font-size: 13.5px; }
.dash-topbar .dash-asistente-btn[hidden] { display: none; }
.dash-topbar .dash-asistente-btn:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
@media (max-width: 760px) { .dash-topbar .dash-asistente-btn { width: 40px; padding: 0; justify-content: center; } .dash-asistente-texto { display: none; } }
.asis-fondo { position: fixed; inset: 0; z-index: 80; background: rgba(5, 7, 15, .35); }
.asis-fondo[hidden] { display: none; }
@media (min-width: 761px) { .asis-fondo { background: transparent; } }
.asis-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 81; width: min(440px, 100vw); display: flex; flex-direction: column; background: var(--bg-2, var(--surface)); border-left: 1px solid var(--border); box-shadow: -18px 0 50px rgba(0, 0, 0, .28); transform: translateX(104%); transition: transform .22s var(--ease, ease); }
.asis-panel[hidden] { display: none; }
.asis-panel.is-abierto { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .asis-panel { transition: none; } }
.asis-cabecera { display: flex; align-items: center; gap: 10px; padding: 14px 12px 14px 16px; border-bottom: 1px solid var(--border); }
.asis-cab-texto { flex: 1; min-width: 0; }
.asis-cab-texto h2 { margin: 0; font-size: 16px; }
.asis-cab-texto small { color: var(--muted); font-size: 12.5px; }
.asis-cab-texto small.is-poco { color: #f5a524; }
.asis-logo { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 11px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.asis-logo.is-grande { width: 52px; height: 52px; border-radius: 16px; margin: 0 auto 12px; }
.asis-historial { max-height: 45%; overflow-y: auto; padding: 10px 12px; border-bottom: 1px solid var(--border); display: grid; gap: 4px; }
.asis-historial[hidden] { display: none; }
.asis-historial button { width: 100%; margin: 0; display: flex; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); text-align: left; font-size: 13.5px; cursor: pointer; }
.asis-historial button:hover { background: var(--surface-2); }
.asis-historial button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asis-historial small, .asis-nota { color: var(--muted); font-size: 12px; margin: 2px 4px; }
.asis-mensajes { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.asis-vacio { margin: auto 0; text-align: center; padding: 10px; }
.asis-vacio h3 { margin: 0 0 6px; font-size: 17px; }
.asis-vacio p { margin: 0 0 16px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.asis-sugerencias { display: grid; gap: 8px; }
.asis-sugerencias button { width: 100%; margin: 0; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: transparent; color: var(--text); font-size: 13.5px; text-align: left; cursor: pointer; }
.asis-sugerencias button:hover { border-color: var(--accent); color: var(--accent); }
.asis-msg { max-width: 92%; padding: 11px 14px; border-radius: 16px; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.asis-msg p { margin: 0 0 8px; }
.asis-msg p:last-child { margin-bottom: 0; }
.asis-msg ul, .asis-msg ol { margin: 4px 0 8px; padding-left: 20px; display: grid; gap: 3px; }
.asis-msg.is-usuario { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 6px; }
.asis-msg.is-ia { align-self: flex-start; background: color-mix(in srgb, var(--text) 6%, transparent); border-bottom-left-radius: 6px; }
.asis-msg.is-ia a { color: var(--accent); font-weight: 600; }
.asis-msg.is-error { border: 1px solid color-mix(in srgb, #f5a524 40%, var(--border)); }
.asis-gratis { display: block; margin-top: 6px; color: var(--muted); font-size: 11.5px; }
.asis-pensando { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; }
.asis-pensando span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .4; animation: asis-punto 1.2s infinite ease-in-out; }
.asis-pensando span:nth-child(2) { animation-delay: .15s; }
.asis-pensando span:nth-child(3) { animation-delay: .3s; margin-right: 4px; }
@keyframes asis-punto { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: .9; transform: translateY(-3px); } }
.asis-form { padding: 10px 12px 12px; border-top: 1px solid var(--border); }
.asis-modos { display: flex; gap: 6px; margin-bottom: 8px; }
.asis-modos button { width: auto; margin: 0; padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.asis-modos button[aria-checked="true"] { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.asis-entrada { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.asis-entrada:focus-within { border-color: var(--accent); }
.asis-entrada textarea { flex: 1; min-width: 0; margin: 0; padding: 7px 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 14.5px; resize: none; max-height: 140px; }
.asis-enviar { width: 38px; height: 38px; margin: 0; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 12px; background: var(--accent); color: #fff; cursor: pointer; }
.asis-enviar:disabled { opacity: .5; cursor: default; }
.asis-pie { margin: 7px 2px 0; color: var(--muted); font-size: 11.5px; text-align: center; }
@media (max-width: 760px) { .asis-panel { width: 100vw; border-left: 0; } }

/* Auto-refresco del panel (dashboard.js): aviso cuando hay datos o versión nueva. */
.dash-aviso-nuevo { position: fixed; left: 50%; bottom: 22px; z-index: 70; transform: translateX(-50%); width: auto; margin: 0; padding: 10px 18px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 999px; background: var(--bg-2, var(--surface)); color: var(--accent); font-weight: 700; font-size: 13.5px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); cursor: pointer; animation: dash-aviso-entra .25s ease; }
.dash-aviso-nuevo:hover { background: color-mix(in srgb, var(--accent) 12%, var(--bg-2, var(--surface))); }
@keyframes dash-aviso-entra { from { opacity: 0; transform: translate(-50%, 8px); } }
@media (max-width: 760px) { .dash-aviso-nuevo { bottom: 96px; } }
@media (prefers-reduced-motion: reduce) { .dash-aviso-nuevo { animation: none; } }

/* Catálogo público con QR (164, catalogo.html): reutiliza el menú público. */
.catalogo-contacto { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.catalogo-contacto .menu-public-order { width: auto; padding: 11px 22px; text-decoration: none; }
.catalogo-contacto .menu-public-secundario { padding: 11px 18px; }
.catalogo-direccion { margin-top: 14px !important; }
.catalogo-item-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.catalogo-item-pie .menu-public-add { margin-top: 0; }
.catalogo-precio { margin: 0 !important; }
.catalogo-fondo { position: fixed; inset: 0; z-index: 20; background: rgba(5, 7, 15, .45); }
.catalogo-fondo[hidden], .catalogo-solicitud[hidden], #cat-form[hidden], #cat-ok[hidden] { display: none; }
.catalogo-solicitud { position: fixed; left: 50%; bottom: 16px; z-index: 21; width: min(520px, calc(100vw - 24px)); margin: 0; transform: translateX(-50%); }
.catalogo-wa-alt { display: block; text-align: center; text-decoration: none; }
#cat-ok { margin: 8px 0 4px; text-align: center; }
/* Vista #catalogo del panel (164). */
.catalogo-panel-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 900px) { .catalogo-panel-grid { grid-template-columns: 1fr; } }
.catalogo-qr { text-align: center; }
.catalogo-qr-img { width: min(260px, 70vw); aspect-ratio: 1; border-radius: 14px; background: #fff; }
.catalogo-url { margin: 10px 0 14px; font-size: 13.5px; overflow-wrap: anywhere; }
.catalogo-acciones { justify-content: center; flex-wrap: wrap; }
.catalogo-ajustes { display: grid; gap: 14px; }
.catalogo-contacto .catalogo-wa { background: #1fae5b; }

/* Selector de idioma (js/i18n.js): botón ES/EN en la barra del sitio. */
.idioma-slot { display: inline-flex; }
.idioma-slot:empty { display: none; }
.idioma-btn { display: inline-flex; align-items: center; gap: 5px; width: auto; margin: 0; padding: 7px 10px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; cursor: pointer; }
.idioma-btn:hover { border-color: var(--accent); color: var(--accent); }
.menu-public-footer .idioma-btn { padding: 4px 9px; margin-left: 8px; }

/* Aceptación de términos (165) -- js/dashboard-legal.js */
.legal-modal-cuerpo { display: grid; gap: 12px; color: var(--muted); line-height: 1.6; }
.legal-modal-docs { margin: 0; padding-left: 20px; }
.legal-modal-docs a { color: var(--brand-primary); }
.legal-aviso-idioma { font-size: 13px; }
#legal-aceptar:disabled { opacity: .5; cursor: not-allowed; }

/* Código personal (167): número de empleado en Configuración › Mi código y
   el diálogo de autorización (js/autorizacion.js), que va encima de otro modal. */
.mi-codigo-numero { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.mi-codigo-numero strong { font-size: 32px; letter-spacing: 6px; font-variant-numeric: tabular-nums; }
.autorizacion-overlay { z-index: 1200; }
.autorizacion-modal { max-width: 380px; }
.autorizacion-modal #autorizacion-numero, .autorizacion-modal #autorizacion-pin { font-size: 22px; letter-spacing: 4px; text-align: center; font-variant-numeric: tabular-nums; }

/* Cobro del POS (abrirModalCobro): total grande, fichas de método de pago,
   interruptor de factura y cliente plegable. "Mixto" muestra el editor de
   pagos divididos (.pos-pagos-fieldset sin .is-simple). */
.pos-cobro { max-width: 470px; }
.pos-cobro-head { display: flex; align-items: center; gap: 12px; }
.pos-cobro-head h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.pos-cobro-sub { margin-left: auto; color: var(--muted); font-size: 13px; white-space: nowrap; }
.pos-cobro-total { margin: 18px 0 16px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.pos-cobro-total span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pos-cobro-total strong { display: block; margin-top: 6px; font-size: clamp(32px, 7vw, 42px); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pos-cobro-total small { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
.pos-cobro-form { gap: 12px; }
.pos-cobro-label { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.pos-metodos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pos-metodo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 86px; padding: 14px 6px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.pos-metodo svg { width: 24px; height: 24px; }
.pos-metodo:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.pos-metodo:active { transform: scale(.98); }
.pos-metodo[aria-checked="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); box-shadow: inset 0 0 0 1px var(--accent); }
.pos-metodo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pos-efectivo { display: grid; grid-template-columns: 1fr; gap: 6px; }
.pos-vuelto { margin: 0; font-size: 15px; font-weight: 700; color: var(--status-success); }
.pos-vuelto.is-falta { color: var(--status-critical); }
#dash-shell fieldset.pos-pagos-fieldset.is-simple { margin: 0; padding: 0; border: 0; }
#dash-shell fieldset.pos-pagos-fieldset.is-sin-detalle { display: none; }
#dash-shell .pos-cobro-form .pos-pagos-fieldset:not(.is-simple) { margin: 0; }
.pos-efectivo[hidden] { display: none; }
.pos-pagos-fieldset.is-simple legend,
.pos-pagos-fieldset.is-simple .pos-agregar-pago,
.pos-pagos-fieldset.is-simple .pos-pagos-balance,
.pos-pagos-fieldset.is-simple .pos-pago-fila > label:not(.pos-pago-referencia),
.pos-pagos-fieldset.is-simple .pos-linea-quitar { display: none; }
.pos-pagos-fieldset.is-simple .pos-pago-fila { display: block; }
.pos-pagos-fieldset.is-simple .pos-pago-referencia[hidden] { display: none; }
.pos-switch { display: flex; align-items: center; gap: 14px; margin: 4px 0 0; cursor: pointer; }
.pos-switch > span:first-child { flex: 1; min-width: 0; }
.pos-switch strong { display: block; font-size: 15px; font-weight: 600; color: var(--text); }
.pos-switch small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 400; }
.pos-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pos-switch-pista { position: relative; flex: none; width: 50px; height: 30px; border-radius: 999px; background: color-mix(in srgb, var(--text) 18%, var(--surface)); transition: background .2s; }
.pos-switch-pista::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.pos-switch input:checked + .pos-switch-pista { background: var(--status-success); }
.pos-switch input:checked + .pos-switch-pista::after { transform: translateX(20px); }
.pos-switch input:focus-visible + .pos-switch-pista { outline: 2px solid var(--accent); outline-offset: 2px; }
.pos-cobro-cliente { border: 1px solid var(--border); border-radius: 12px; padding: 0 14px; }
.pos-cobro-cliente summary { padding: 12px 0; cursor: pointer; font-weight: 600; color: var(--text); }
.pos-cobro-cliente summary small { color: var(--muted); font-weight: 400; }
.pos-cobro-cliente[open] { padding-bottom: 14px; }
.pos-cobro-cliente > label, .pos-cobro-cliente #pos-fiscal-receptor label { display: block; margin-top: 10px; }
#dash-shell .pos-cobro-confirmar { width: 100%; margin-top: 6px; padding: 16px; border-radius: 14px; font-size: 16px; font-weight: 700; }
@media (max-width: 520px) {
  .pos-metodos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pos-cobro-head { flex-wrap: wrap; }
  .pos-cobro-sub { order: 3; width: 100%; margin-left: 0; }
}

/* Ventana de confirmación (js/exito.js). */
.exito-overlay { z-index: 1100; }
.exito-modal { max-width: 430px; padding: 34px 28px 24px; text-align: center; }
.exito-check { display: grid; place-items: center; width: 78px; height: 78px; margin: 0 auto 18px; border-radius: 50%; color: var(--status-success); background: color-mix(in srgb, var(--status-success) 18%, transparent); box-shadow: 0 0 0 10px color-mix(in srgb, var(--status-success) 7%, transparent); animation: exito-pop .45s cubic-bezier(.2, 1.4, .4, 1); }
.exito-check svg { width: 38px; height: 38px; stroke-dasharray: 24; stroke-dashoffset: 24; animation: exito-trazo .35s .2s ease-out forwards; }
.exito-modal h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.exito-monto { margin: 10px 0 0; font-size: clamp(34px, 8vw, 44px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.exito-detalle { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.exito-items { display: grid; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; text-align: left; }
.exito-items li { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-size: 14px; }
.exito-items svg { flex: none; width: 17px; height: 17px; }
.exito-items .is-ok svg { color: var(--status-success); }
.exito-items .is-pendiente svg { color: var(--accent); }
.exito-items .is-aviso svg { color: var(--status-warning); }
.exito-acciones { display: grid; gap: 8px; margin-top: 20px; }
.exito-primario, .exito-secundario { width: 100%; padding: 15px; border-radius: 12px; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.exito-primario { border: 1px solid var(--border); background: color-mix(in srgb, var(--text) 9%, var(--surface)); color: var(--text); }
.exito-primario:hover { background: color-mix(in srgb, var(--text) 14%, var(--surface)); }
.exito-secundario { border: 0; background: transparent; color: var(--muted); font-size: 14px; padding: 8px; }
.exito-secundario:hover { color: var(--text); }
.exito-primario:focus-visible, .exito-secundario:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@keyframes exito-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes exito-trazo { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .exito-check { animation: none; }
  .exito-check svg { animation: none; stroke-dashoffset: 0; }
}

/* Agricultura (173) -- dashboard-agricultura.js */
.agro-insumos { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px 12px; margin: 0; display: grid; gap: 8px; min-width: 0; }
.agro-insumos legend { font-size: 13px; font-weight: 600; padding: 0 4px; }
.agro-insumo { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto 36px; gap: 8px; align-items: center; }
.agro-insumo select, .agro-insumo input { width: 100%; min-width: 0; margin: 0; }
.agro-insumo [data-unidad-txt] { white-space: nowrap; min-width: 52px; }
.agro-insumos > .btn-ghost { justify-self: start; }
.agro-carencia { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-auto-flow: column; column-gap: 14px; row-gap: 6px; }
.agro-carencia[hidden] { display: none; }
.agro-alertas ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.agro-alertas li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.agro-acciones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; margin: 4px 0 12px; }
.agro-acciones > * { margin: 0; width: auto; }
@media (max-width: 640px) {
  .agro-insumo { grid-template-columns: minmax(0, 1fr) 84px 36px; }
  .agro-insumo [data-unidad-txt] { display: none; }
  .agro-carencia { grid-template-columns: 1fr; grid-auto-flow: row; }
  .agro-acciones > * { flex: 1 1 100%; }
}

/* Inmobiliaria (174) -- dashboard-inmobiliaria.js */
.re-modal-ancho { max-width: 760px; }
.re-form-titulo { margin: 10px 0 0; font-size: 15px; }
.re-form [hidden] { display: none !important; }
.re-amenidades { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px 12px; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 12px; min-width: 0; }
.re-amenidades legend { font-size: 13px; font-weight: 600; padding: 0 4px; }
.re-amenidades .full { grid-column: 1 / -1; }
.re-fotos-zona { display: grid; gap: 8px; }
.re-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.re-foto { position: relative; margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
.re-foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.re-foto.is-portada { outline: 2px solid var(--accent); }
.re-foto figcaption { font-size: 11px; padding: 4px 6px; color: var(--muted); }
.re-foto-acciones { display: flex; gap: 2px; justify-content: flex-end; padding: 0 4px 4px; }
.re-foto-acciones .dash-icon-btn { width: 28px; height: 28px; font-size: 13px; }
.re-fotos-subir { justify-self: start; cursor: pointer; }
.re-filtros { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.re-filtros input, .re-filtros select { width: 100%; min-width: 0; margin: 0; }
.re-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.re-card { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.re-card.is-oculta { opacity: .7; }
.re-card-foto { position: relative; aspect-ratio: 16 / 10; background: var(--surface-2); display: grid; place-items: center; font-size: 34px; color: var(--muted); }
.re-card-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.re-card-op, .re-card-dest { position: absolute; top: 10px; left: 10px; background: rgba(15, 18, 30, .78); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.re-card-dest { left: auto; right: 10px; background: var(--accent); }
.re-card-cuerpo { padding: 12px 14px 14px; display: grid; gap: 4px; }
.re-card-cuerpo h3 { margin: 0; font-size: 16px; line-height: 1.3; }
.re-card-precio { margin: 0; font-weight: 700; font-size: 16px; }
.re-card-leads { color: var(--accent); font-weight: 600; }
.re-card-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.re-compartir { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; }
.re-qr { width: 100%; background: #fff; border-radius: 12px; padding: 8px; }
.re-compartir-acciones { display: grid; gap: 8px; }
.re-compartir-acciones > * { margin: 0; width: 100%; text-align: center; justify-content: center; }
.re-link { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.re-tablero { display: grid; grid-template-columns: repeat(6, minmax(180px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.re-col { background: var(--surface-2); border-radius: 14px; padding: 10px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.re-col h3 { margin: 0; font-size: 13px; display: flex; justify-content: space-between; }
.re-col h3 span { color: var(--muted); font-weight: 600; }
.re-lead { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px; display: grid; gap: 2px; cursor: pointer; }
.re-lead:hover, .re-lead:focus-visible { border-color: var(--accent); outline: none; }
.re-lead small { font-size: 12px; }
.re-lead-wa { font-size: 12px; font-weight: 600; color: var(--status-good); justify-self: start; margin-top: 4px; }
.re-visitas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.re-visitas li { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.re-visitas li.is-pasada { opacity: .7; }
.re-visita-acciones { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 880px) { .re-tablero { grid-template-columns: repeat(6, minmax(220px, 80vw)); } }
@media (max-width: 640px) {
  .re-filtros { grid-template-columns: 1fr 1fr; }
  .re-filtros input { grid-column: 1 / -1; }
  .re-compartir { grid-template-columns: 1fr; }
  .re-qr { max-width: 220px; justify-self: center; }
}

/* Catálogo público de propiedades (174) -- propiedades-publico.js */
.prop-filtros { max-width: 1100px; margin: 0 auto; padding: 0 16px 8px; display: grid; grid-template-columns: auto repeat(2, minmax(0, 160px)) minmax(0, 1fr); gap: 8px; align-items: center; }
.prop-filtros select, .prop-filtros input { width: 100%; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(127,127,127,.3); background: transparent; color: inherit; font: inherit; }
.prop-chips { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid rgba(127,127,127,.3); }
.prop-chip { border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.prop-chip.is-activo { background: var(--menu-accent, #4865ff); color: #fff; }
.prop-conteo { margin: 0 0 10px; }
.prop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.prop-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; border: 1px solid rgba(127,127,127,.22); color: inherit; text-decoration: none; background: rgba(127,127,127,.04); transition: transform .15s ease, box-shadow .15s ease; }
.prop-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.12); }
.prop-card-foto { position: relative; aspect-ratio: 4 / 3; background: rgba(127,127,127,.1); display: grid; place-items: center; font-size: 40px; }
.prop-card-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prop-etiqueta { position: absolute; top: 12px; left: 12px; background: rgba(15,18,30,.8); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; }
.prop-etiqueta.is-reservada { left: auto; right: 12px; background: #c47f00; }
.prop-card-cuerpo { padding: 14px 16px 16px; display: grid; gap: 4px; }
.prop-card-cuerpo h2 { margin: 0; font-size: 17px; line-height: 1.3; }
.prop-precio { margin: 0; font-size: 18px; color: var(--menu-accent, #4865ff); }
.prop-precio small { font-size: 13px; font-weight: 600; }
.prop-precio.is-grande { font-size: 24px; }
.prop-sep { margin: 0 8px; opacity: .5; }
.prop-specs { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.prop-specs span { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: rgba(127,127,127,.12); }
.prop-ficha { max-width: 960px; margin: 0 auto; padding: 16px; display: grid; gap: 12px; }
.prop-volver { justify-self: start; }
.prop-galeria { position: relative; border-radius: 18px; overflow: hidden; background: rgba(127,127,127,.1); aspect-ratio: 16 / 10; }
.prop-galeria-principal { width: 100%; height: 100%; object-fit: cover; display: block; }
.prop-galeria-vacia { display: grid; place-items: center; height: 100%; font-size: 64px; }
.prop-galeria-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(15,18,30,.6); color: #fff; font-size: 26px; cursor: pointer; }
.prop-galeria-nav.is-prev { left: 10px; }
.prop-galeria-nav.is-next { right: 10px; }
.prop-galeria-conteo { position: absolute; bottom: 10px; right: 12px; background: rgba(15,18,30,.7); color: #fff; font-size: 12px; padding: 3px 9px; border-radius: 999px; }
.prop-miniaturas { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.prop-miniaturas button { flex: 0 0 84px; border: 0; padding: 0; border-radius: 10px; overflow: hidden; cursor: pointer; background: none; }
.prop-miniaturas img { width: 84px; height: 62px; object-fit: cover; display: block; }
.prop-info h1 { margin: 4px 0 6px; font-size: 26px; line-height: 1.2; }
.prop-info h2 { font-size: 18px; margin: 18px 0 8px; }
.prop-contacto { margin: 14px 0; }
.prop-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.prop-datos div { border: 1px solid rgba(127,127,127,.2); border-radius: 12px; padding: 10px 12px; }
.prop-datos dt { font-size: 12px; opacity: .7; }
.prop-datos dd { margin: 2px 0 0; font-weight: 700; }
.prop-amenidades { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.prop-amenidades li { padding: 6px 12px; border-radius: 999px; background: rgba(127,127,127,.12); font-size: 14px; }
.prop-descripcion { line-height: 1.6; }
@media (max-width: 640px) {
  .prop-filtros { grid-template-columns: 1fr 1fr; }
  .prop-chips { grid-column: 1 / -1; justify-self: start; }
  .prop-filtros input { grid-column: 1 / -1; }
  .prop-galeria { aspect-ratio: 4 / 3; border-radius: 14px; }
  .prop-info h1 { font-size: 22px; }
}
.re-filtros input[type="search"] { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; }
.re-amenidades .planta-check { grid-column: auto; }
.prop-precio { color: inherit; }


/* Interruptor de ASTRC: el mismo del cobro del POS, para todo lo que se
   enciende o se apaga en el panel. Marcado:
   <label class="astrc-switch"><input type="checkbox"><span class="astrc-switch-pista" aria-hidden="true"></span> Texto</label>
   El texto queda a la izquierda y el interruptor a la derecha. Las listas
   de elegir varias cosas (amenidades, platos, paradas) siguen con casilla. */
.astrc-switch { position: relative; display: flex !important; align-items: center; gap: 14px; cursor: pointer; font-weight: 500; }
.astrc-switch > input[type="checkbox"] { position: absolute !important; opacity: 0; width: 1px !important; height: 1px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; }
.astrc-switch-pista { order: 2; margin-left: auto; position: relative; flex: none; display: block !important; width: 50px; height: 30px; border-radius: 999px; background: color-mix(in srgb, var(--text) 18%, var(--surface)); transition: background .2s; }
.astrc-switch-pista::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.astrc-switch > input:checked + .astrc-switch-pista { background: var(--status-success); }
.astrc-switch > input:checked + .astrc-switch-pista::after { transform: translateX(20px); }
.astrc-switch > input:focus-visible + .astrc-switch-pista { outline: 2px solid var(--accent); outline-offset: 2px; }
.astrc-switch > input:disabled + .astrc-switch-pista { opacity: .5; }
.astrc-switch:has(> input:disabled) { cursor: not-allowed; }
.cobros-monedas .astrc-switch { gap: 10px; }
.cobros-monedas .astrc-switch-pista { margin-left: 0; }
@media (prefers-reduced-motion: reduce) { .astrc-switch-pista, .astrc-switch-pista::after, .dash-widget-switch, .dash-widget-switch::after { transition: none; } }

/* 175: calendario conectado (js/calendario.js). */
.astrc-calendario { display: inline-flex; align-items: center; gap: 6px; }
.cal-modal { max-width: 560px; }
.cal-cuerpo { display: grid; gap: 14px; }
.cal-intro { margin: 0; line-height: 1.5; }
.cal-alcance { padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; }
.cal-alcance strong { display: block; }
.cal-alcance small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 400; }
.cal-sub { margin: 4px 0 0; font-size: 14px; font-weight: 600; }
.cal-destinos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cal-destino { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; color: var(--text); text-decoration: none; background: var(--surface); }
.cal-destino:hover, .cal-destino:focus-visible { border-color: var(--accent); background: var(--surface-2); }
.cal-destino small { color: var(--muted); font-size: 12px; }
.cal-copiar { display: flex; gap: 8px; }
.cal-copiar input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--text); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.cal-copiar button { width: auto; margin: 0; }
.cal-cuerpo .store-meta { margin: 0; }
.cal-evento-wrap { position: relative; }
.cal-evento-menu { position: absolute; left: 0; right: auto; top: calc(100% + 6px); }
.cal-evento-menu a, .cal-evento-menu button { display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: none; color: var(--text); text-align: left; text-decoration: none; font: inherit; cursor: pointer; }
.cal-evento-menu a:hover, .cal-evento-menu button:hover { background: var(--surface-2); }
@media (max-width: 480px) { .cal-destinos { grid-template-columns: 1fr; } }

/* 176: Salud -- pacientes, expediente, consulta, receta (js/dashboard-salud.js). */
.sa-modal.is-ancha { max-width: 880px; }
.sa-alergia { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--status-danger, #e5484d) 45%, var(--border));
  background: color-mix(in srgb, var(--status-danger, #e5484d) 12%, var(--surface)); color: var(--text); }
.sa-ficha-cabeza { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: -4px 0 12px; color: var(--muted); }
.sa-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 18px; margin: 12px 0 14px; }
.sa-datos dt { font-size: 12px; color: var(--muted); }
.sa-datos dd { margin: 2px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.sa-bloque { margin-top: 20px; }
.sa-bloque h3 { font-size: 15px; margin: 0 0 10px; }
.sa-bloque-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sa-exp-acciones { margin: 6px 0 4px; }
.sa-evento { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; background: var(--surface); }
.sa-evento.is-borrador { border-style: dashed; border-color: color-mix(in srgb, var(--status-warning, #f5a524) 60%, var(--border)); }
.sa-evento.is-confidencial { background: var(--surface-2); }
.sa-evento header { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.sa-evento p { margin: 4px 0; line-height: 1.5; white-space: pre-line; }
.sa-signos-linea { color: var(--muted); font-size: 13px; }
.sa-nota { background: var(--surface-2); padding: 8px 10px; border-radius: 10px; }
.sa-lista, .sa-citas { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.sa-lista li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
.sa-cita { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.sa-cita.is-realizada, .sa-cita.is-cancelada, .sa-cita.is-no_asistio { opacity: .72; }
.sa-cita-hora { font-weight: 700; font-size: 15px; white-space: nowrap; }
.sa-cita-acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.sa-sub { font-size: 14px; margin: 14px 0 8px; }
.sa-consulta textarea { min-height: 70px; }
.sa-signos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; border: 0; padding: 0; margin: 6px 0 0; }
.sa-signos legend, .sa-dx legend { font-weight: 600; margin-bottom: 6px; }
.sa-signos label { display: grid; gap: 4px; font-size: 13px; font-weight: 500; margin: 0; }
.sa-signos label small { color: var(--muted); font-weight: 400; }
.sa-signos p { grid-column: 1 / -1; margin: 0; }
.sa-dx { border: 0; padding: 0; margin: 6px 0 0; }
.sa-dx-fila { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 8px; margin-bottom: 8px; align-items: center; }
.sa-consulta-acciones { flex-wrap: wrap; }
.sa-rx-fila { border: 1px solid var(--border); border-radius: 14px; padding: 12px; margin: 0 0 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sa-rx-fila legend { font-weight: 600; padding: 0 4px; }
.sa-rx-fila [data-rx="medicamento"], .sa-rx-fila [data-rx="indicaciones"] { grid-column: 1 / -1; }
.sa-rx-fila [data-rx-quitar] { justify-self: start; }
@media (max-width: 600px) {
  .sa-dx-fila { grid-template-columns: minmax(0, 1fr) auto; }
  .sa-dx-fila [data-dx-codigo] { grid-column: 1 / -1; }
  .sa-rx-fila { grid-template-columns: 1fr; }
  .sa-cita { grid-template-columns: 64px minmax(0, 1fr); }
  .sa-cita .dash-badge { grid-column: 2; justify-self: start; }
}
@media print {
  body.imprimiendo #astrc-impresion.impresion-receta { font-size: 13px; line-height: 1.5; }
  .impresion-receta .receta header { display: flex; gap: 14px; align-items: center; border-bottom: 2px solid #000; padding-bottom: 10px; }
  .impresion-receta .receta header img { max-height: 60px; max-width: 140px; object-fit: contain; }
  .impresion-receta .receta h1 { font-size: 20px; margin: 18px 0 8px; }
  .impresion-receta .receta ol { padding-left: 20px; }
  .impresion-receta .receta li { margin-bottom: 12px; }
  .impresion-receta .receta footer { margin-top: 70px; display: flex; justify-content: flex-end; }
  .impresion-receta .receta .firma { border-top: 1px solid #000; padding-top: 6px; text-align: center; min-width: 260px; }
}
#dash-shell .sa-cita-acciones .cta, #dash-shell .sa-cita-acciones .secondary, #dash-shell .sa-lista .secondary, #dash-shell .sa-evento .secondary { width: auto; margin: 0; padding: 6px 14px; font-size: 13px; min-height: 0; }
.sa-cita .dash-status-pill { justify-self: end; }
.astrc-switch > span:not(.astrc-switch-pista) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.astrc-switch > span:not(.astrc-switch-pista) small { color: var(--muted); font-size: 12px; font-weight: 400; }

/* 179: aliados — aviso del beneficio y casilla de autorización (js/aliado.js) */
.aliado-aviso { position: relative; z-index: 60; padding: 10px 16px; text-align: center; font-size: 14px; line-height: 1.4;
  background: color-mix(in srgb, var(--accent) 16%, var(--bg, #0f0f14)); color: var(--text, inherit); border-bottom: 1px solid var(--border); }
.aliado-aviso strong { margin-right: 4px; }
.aliado-consentimiento { display: flex !important; gap: 10px; align-items: flex-start; margin: 12px 0; font-weight: 400 !important; font-size: 13px; line-height: 1.45; color: var(--text-muted, inherit); }
.aliado-consentimiento input { width: auto !important; margin-top: 3px; flex: none; }
.ali-comentarios { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.ali-periodo + .ali-periodo { border-top: 1px solid var(--border); margin-top: 8px; }
/* 179: encuesta de satisfacción en el Resumen */
.encuesta h2 { margin: 0 0 4px; font-size: 16px; }
.encuesta-escala { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; margin: 12px 0 4px; }
.encuesta-escala button { min-height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2, transparent); color: inherit; font-weight: 600; cursor: pointer; }
.encuesta-escala button.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.encuesta-extremos { display: flex; justify-content: space-between; margin-bottom: 10px; }
.encuesta-label { display: block; margin-bottom: 6px; font-size: 14px; }
.encuesta textarea { width: 100%; margin-bottom: 10px; }
@media (max-width: 520px) { .encuesta-escala { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Login como área de clientes (separada del sitio comercial). */
.nav-volver { color: var(--muted); font-size: 13px; text-decoration: none; white-space: nowrap; }
.nav-volver:hover { color: var(--text); }
@media (max-width: 420px) { .nav-volver { display: none; } }
.auth-area { margin: 0 0 6px; color: var(--accent-hover); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }