:root {
  --bg: #f3f5f8;
  --bg-elev: #ffffff;
  --bg-soft: #e8edf3;
  --ink: #0c1624;
  --muted: #5c6b7e;
  --line: #d0d8e2;
  --accent: #e06b16;
  --accent-soft: #ffe8d4;
  --accent-ink: #9a4508;
  /* Estos dos se eligieron mirando el tema oscuro, donde lucen bien, y en
     claro se quedaban por debajo de 4.5:1 sobre el blanco de las tablas:
     --ok en 3.83 y --warn en 3.19. No es que «se vean flojos», es que no
     se leen, y lo que pintan son cifras de stock y de dinero. Medido, no
     a ojo. Los soft van con ellos y siguen dando 4.6:1 de contraste. */
  --ok: #15794c;
  --ok-soft: #d8f3e6;
  --warn: #9a5e08;
  --warn-soft: #fceece;
  --info: #1a6fb5;
  --info-soft: #dceefc;
  --danger: #c0392b;
  --danger-soft: #f8e0dd;
  --premium: #c9a227;
  --premium-bg: #f7efd4;
  --premium-ink: #6b5410;
  --success-btn: #1a9b5c;
  --accent-grad: linear-gradient(135deg, #ff8a2a, #ffb45c);
  --panel-glow: rgba(224, 107, 22, 0.12);
  --r: 12px;
  --r-lg: 16px;
  --shadow: 0 1px 0 rgba(12, 22, 36, 0.04);
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --topbar-h: 60px;
}

[data-theme="dark"] {
  --bg: #07111f;
  --bg-elev: #101d2e;
  --bg-soft: #0b1726;
  --ink: #f4f7fa;
  --muted: #91a0b5;
  --line: #243447;
  --accent: #ff8a2a;
  --accent-soft: rgba(255, 138, 42, 0.14);
  --accent-ink: #ffb45c;
  --ok: #3ecf8e;
  --ok-soft: rgba(62, 207, 142, 0.14);
  --warn: #e0a040;
  --warn-soft: rgba(224, 160, 64, 0.16);
  --info: #5ba3e0;
  --info-soft: rgba(91, 163, 224, 0.16);
  --danger: #e07068;
  --danger-soft: rgba(224, 112, 104, 0.16);
  --premium: #e0b83a;
  --premium-bg: rgba(224, 184, 58, 0.14);
  --premium-ink: #f5e6a8;
  --success-btn: #22a86a;
  --accent-grad: linear-gradient(135deg, #ff8a2a, #ffb45c);
  --panel-glow: rgba(255, 138, 42, 0.1);
  --shadow: none;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.02em;
}

button, input, select {
  font: inherit;
  color: inherit;
}

.hidden { display: none !important; }
.muted { color: var(--muted); }
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* —— Auth profesional (ExchangePro layout × GastroPro palette) —— */
.ayb-login-wrap {
  --ayb-night: #07111f;
  --ayb-night-2: #0b1726;
  --ayb-panel: #101d2e;
  --ayb-orange: #ff8a2a;
  --ayb-orange-2: #ffb45c;
  --ayb-text: #f4f7fa;
  --ayb-muted: #91a0b5;
  --ayb-line: rgba(145, 160, 181, 0.22);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ayb-night);
  color: var(--ayb-text);
}

.ayb-login-inner {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

.ayb-login-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(155deg, #07111f 0%, #0b1726 42%, #1a120c 100%);
  border-right: 1px solid rgba(255, 138, 42, 0.12);
  padding: 0 2rem 2.25rem;
}

.ayb-login-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ayb-orange), var(--ayb-orange-2), transparent);
}

.ayb-login-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 18%, rgba(255, 138, 42, 0.18), transparent 58%),
    radial-gradient(ellipse 55% 40% at 88% 78%, rgba(255, 180, 92, 0.08), transparent 52%);
  pointer-events: none;
}

.ayb-login-hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
  animation: ayb-float 8s ease-in-out infinite;
}
.ayb-glow-1 {
  width: 280px; height: 280px;
  background: rgba(255, 138, 42, 0.22);
  top: -80px; right: -40px;
}
.ayb-glow-2 {
  width: 200px; height: 200px;
  background: rgba(255, 180, 92, 0.12);
  bottom: 12%; left: -50px;
  animation-delay: -4s;
}
@keyframes ayb-float {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.85; }
  50% { transform: translate(10px, -14px) scale(1.05); opacity: 1; }
}

.ayb-msoft-brand {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 180px;
  padding: 2rem 1rem 1.5rem;
  text-align: center;
}
.ayb-msoft-brand::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(340px, 80%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 138, 42, 0.45), transparent);
}
.ayb-msoft-glow {
  position: absolute;
  left: 50%; top: 52%;
  width: min(300px, 70vw);
  height: min(300px, 70vw);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 138, 42, 0.22) 0%, transparent 68%);
  pointer-events: none;
  animation: ayb-pulse 4.5s ease-in-out infinite;
}
@keyframes ayb-pulse {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
}
.ayb-msoft-stack { position: relative; z-index: 1; }
.ayb-msoft-mark {
  display: block;
  margin: 0 auto 0.65rem;
  filter: drop-shadow(0 8px 24px rgba(255, 138, 42, 0.25));
}
.ayb-msoft-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
}
.ayb-msoft-tag {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  color: var(--ayb-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ayb-login-hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.5rem 0.5rem 1rem;
}

.ayb-product-brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1rem;
}
.ayb-product-mark {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255, 138, 42, 0.12);
  border: 1px solid rgba(255, 138, 42, 0.35);
  color: var(--ayb-orange);
}
.ayb-product-brand h1 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  color: #fff;
  line-height: 1.05;
}
.ayb-brand-accent {
  color: var(--ayb-orange);
  text-shadow: 0 0 28px rgba(255, 138, 42, 0.35);
}
.ayb-product-tagline {
  margin: 0.2rem 0 0;
  color: var(--ayb-muted);
  font-size: 0.88rem;
}
.ayb-hero-desc {
  margin: 0 0 1.35rem;
  color: rgba(244, 247, 250, 0.72);
  font-size: 0.95rem;
  line-height: 1.55;
}

.ayb-login-features {
  display: grid;
  gap: 0.65rem;
  margin-bottom: 1.35rem;
}
.ayb-login-feature {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ayb-line);
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.ayb-login-feature:hover {
  border-color: rgba(255, 138, 42, 0.4);
  background: rgba(255, 138, 42, 0.06);
  transform: translateY(-1px);
}
.ayb-login-feature svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--ayb-orange);
  margin-top: 2px;
}
.ayb-login-feature strong {
  display: block;
  font-size: 0.88rem;
  color: #fff;
}
.ayb-login-feature span {
  display: block;
  font-size: 0.78rem;
  color: var(--ayb-muted);
  margin-top: 0.1rem;
}

.ayb-hero-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--ayb-orange-2);
  background: rgba(255, 138, 42, 0.1);
  border: 1px solid rgba(255, 138, 42, 0.28);
}

.ayb-login-panel {
  position: relative;
  display: grid;
  place-items: center;
  padding: 2rem 1.5rem;
  background:
    radial-gradient(ellipse 70% 45% at 70% 10%, rgba(255, 138, 42, 0.1), transparent 55%),
    linear-gradient(180deg, #0d1a2b 0%, #07111f 100%);
}
.ayb-login-panel-glow {
  position: absolute;
  width: 320px;
  height: 320px;
  right: -80px;
  top: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 138, 42, 0.12), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.ayb-login-panel-inner {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
}

.ayb-login-brand-mobile {
  display: none;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.ayb-login-brand-mobile strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
}
.ayb-login-brand-mobile span {
  font-size: 0.78rem;
  color: var(--ayb-muted);
}

.ayb-auth-card {
  background: #121f31;
  border: 1px solid rgba(255, 138, 42, 0.18);
  border-radius: 18px;
  padding: 1.85rem 1.75rem 1.5rem;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  animation: ayb-card-in 0.45s ease both;
}
.ayb-auth-card::before {
  content: "";
  display: block;
  height: 3px;
  margin: -1.85rem -1.75rem 1.35rem;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--ayb-orange), var(--ayb-orange-2));
}
@keyframes ayb-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.ayb-auth-head { margin-bottom: 1.25rem; }
.ayb-auth-head h2 {
  font-size: 1.45rem;
  color: #fff;
  margin-bottom: 0.35rem;
}
.ayb-auth-head p {
  margin: 0;
  color: var(--ayb-muted);
  font-size: 0.88rem;
  line-height: 1.4;
}
.ayb-signup-kicker {
  display: inline-block;
  margin-bottom: 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ayb-orange);
}

/* ── La tarjeta del enlace del correo ──────────────────────────────
   Se llega desde una bandeja de entrada, a menudo desde el móvil y a
   menudo de alguien que no ha visto nunca el sistema. Así que dice una
   sola cosa y no pide nada más que leerla. */
.ayb-verif-cuerpo {
  min-height: 92px;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.ayb-verif-cuerpo .ayb-btn-login { margin-top: 0.25rem; }

.ayb-verif-ok,
.ayb-verif-aviso,
.ayb-verif-nota {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
}
.ayb-verif-ok {
  padding: 0.8rem 0.95rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 32%, transparent);
  color: var(--ok);
  font-weight: 600;
}
.ayb-verif-aviso {
  padding: 0.8rem 0.95rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent);
  color: var(--warn);
  font-weight: 600;
}
.ayb-verif-nota { color: var(--text-muted, #7a8290); }
.ayb-verif-nota code {
  padding: 0.05rem 0.3rem;
  border-radius: 5px;
  background: rgba(127, 127, 127, 0.16);
  font-size: 0.88em;
}

/* Mientras se canjea el token. Dura menos de un segundo, pero sin nada en
   pantalla parecería que el enlace no hizo nada. */
.ayb-verif-spinner {
  width: 26px;
  height: 26px;
  margin: 0.6rem auto;
  border-radius: 50%;
  border: 3px solid rgba(127, 127, 127, 0.25);
  border-top-color: var(--accent);
  animation: ayb-verif-gira 0.8s linear infinite;
}
@keyframes ayb-verif-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ayb-verif-spinner { animation-duration: 2.4s; }
}

.ayb-demo-box {
  margin: 0 0 1.1rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  background: rgba(255, 138, 42, 0.1);
  border: 1px solid rgba(255, 138, 42, 0.28);
}
.ayb-demo-box strong {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ayb-orange);
  margin-bottom: 0.35rem;
}
.ayb-demo-box p {
  margin: 0.15rem 0;
  font-size: 0.84rem;
  color: var(--ayb-text);
}
.ayb-demo-box code {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ayb-orange-2);
}
.ayb-demo-box .ayb-link {
  display: inline-block;
  margin-top: 0.45rem;
  font-size: 0.82rem;
}

.ayb-field { margin-bottom: 0.9rem; min-width: 0; }
.ayb-field label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ayb-muted);
}
/* minmax(0, 1fr) y no 1fr: un input trae su ancho mínimo de
   contenido y con «1fr» estira la columna hasta salirse de la tarjeta. */
.ayb-field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.65rem;
}

.ayb-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #0a1524;
  border: 1px solid var(--ayb-line);
  border-radius: 12px;
  padding: 0 0.85rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ayb-input-wrap:focus-within {
  border-color: rgba(255, 138, 42, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 138, 42, 0.15);
}
.ayb-input-icon {
  display: grid;
  place-items: center;
  color: var(--ayb-muted);
  flex-shrink: 0;
}
.ayb-input-icon svg { width: 18px; height: 18px; }
.ayb-input-wrap input,
.ayb-input-wrap select {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent !important;
  color: #f4f7fa !important;
  caret-color: #ffb45c;
  padding: 0.78rem 0;
  outline: none;
  box-shadow: none !important;
  -webkit-text-fill-color: #f4f7fa !important;
}
.ayb-input-wrap input:focus,
.ayb-input-wrap input:active,
.ayb-input-wrap select:focus {
  background: transparent !important;
  color: #f4f7fa !important;
  -webkit-text-fill-color: #f4f7fa;
}
/* Chrome / Edge autofill pinta fondo blanco/azul — forzar dark */
.ayb-input-wrap input:-webkit-autofill,
.ayb-input-wrap input:-webkit-autofill:hover,
.ayb-input-wrap input:-webkit-autofill:focus,
.ayb-input-wrap input:-webkit-autofill:active {
  -webkit-text-fill-color: #f4f7fa !important;
  caret-color: #ffb45c;
  box-shadow: 0 0 0 1000px #0a1524 inset !important;
  transition: background-color 99999s ease-out;
  background-color: #0a1524 !important;
  background-clip: content-box !important;
}
.ayb-input-wrap select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2391a0b5' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.2rem center;
  padding-right: 1.2rem;
}
.ayb-input-wrap input::placeholder { color: rgba(145, 160, 181, 0.55); -webkit-text-fill-color: rgba(145, 160, 181, 0.55); }
.ayb-input-pass { padding-right: 0.35rem; }
.ayb-pass-toggle {
  border: 0;
  background: transparent;
  color: var(--ayb-muted);
  cursor: pointer;
  padding: 0.4rem;
  display: grid;
  place-items: center;
  border-radius: 8px;
}
.ayb-pass-toggle:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.ayb-pass-toggle svg { width: 18px; height: 18px; }

.ayb-btn-login {
  width: 100%;
  margin-top: 0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border: 0;
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: #0a0a0a;
  cursor: pointer;
  background: linear-gradient(135deg, var(--ayb-orange) 0%, var(--ayb-orange-2) 100%);
  box-shadow: 0 10px 28px rgba(255, 138, 42, 0.28);
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.ayb-btn-login:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 14px 32px rgba(255, 138, 42, 0.38);
}
.ayb-btn-login svg { width: 18px; height: 18px; }

.ayb-alert {
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  font-size: 0.85rem;
  background: rgba(255, 77, 85, 0.12);
  border: 1px solid rgba(255, 77, 85, 0.35);
  color: #ff8a90;
}
.ayb-alert-ok {
  background: rgba(24, 199, 122, 0.12);
  border-color: rgba(24, 199, 122, 0.35);
  color: #5ee0a8;
}

.ayb-auth-link {
  margin: 1rem 0 0;
  text-align: center;
}
.ayb-auth-link-muted { margin-top: 0.45rem; }
.ayb-link {
  border: 0;
  background: none;
  color: var(--ayb-orange-2);
  font-size: 0.88rem;
  cursor: pointer;
  padding: 0;
}
.ayb-link:hover { text-decoration: underline; color: #fff; }
.ayb-auth-link-muted .ayb-link {
  color: var(--ayb-muted);
  font-size: 0.8rem;
}
.ayb-auth-foot {
  margin: 1.15rem 0 0;
  text-align: center;
  font-size: 0.72rem;
  color: var(--ayb-muted);
}

@media (max-width: 960px) {
  .ayb-login-inner { grid-template-columns: 1fr; }
  .ayb-login-hero { display: none; }
  .ayb-login-brand-mobile { display: flex; }
  .ayb-login-panel { min-height: 100vh; min-height: 100dvh; }
}

@media (max-width: 480px) {
  .ayb-field-grid { grid-template-columns: 1fr; }
  .ayb-auth-card { padding: 1.5rem 1.2rem 1.25rem; }
  .ayb-auth-card::before { margin: -1.5rem -1.2rem 1.15rem; }
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: var(--r);
  background: var(--accent-soft);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.brand-mark.sm {
  width: 36px;
  height: 36px;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-left: auto;
}

.badge-premium {
  background: var(--premium-bg);
  color: var(--premium-ink);
  border: 1px solid var(--premium);
}

.field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.field input,
.field select {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
}

.field input:focus,
.field select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.field-grid .full { grid-column: 1 / -1; }

.form-error {
  color: var(--danger);
  background: var(--danger-soft);
  padding: 0.55rem 0.75rem;
  border-radius: var(--r);
  font-size: 0.85rem;
  margin: 0 0 0.75rem;
}

.form-ok {
  color: var(--ok);
  background: var(--ok-soft);
  padding: 0.55rem 0.75rem;
  border-radius: var(--r);
  font-size: 0.85rem;
  margin: 0 0 0.75rem;
}

/* —— Buttons —— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  padding: 0.65rem 1rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--bg-soft);
  color: var(--ink);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-block { width: 100%; }
.btn-sm { padding: 0.4rem 0.7rem; font-size: 0.85rem; }

.btn-primary {
  background: var(--accent-grad);
  color: #0a0a0a;
  border-color: transparent;
}

/* Lo que no tiene vuelta atrás: anular, cerrar un conteo, borrar. No
   estaba en la familia de botones y hacía falta, porque pedir que se
   confirme algo irreversible con el mismo botón verde de «guardar» no
   avisa de nada. */
.btn-danger {
  background: var(--danger);
  color: #fff;
  border-color: transparent;
}
.btn-danger:not(:disabled):hover {
  filter: brightness(1.08);
}

.btn-secondary {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-color: var(--line);
}

.btn-success {
  background: var(--success-btn);
  color: #fff;
}

.btn-ghost {
  background: transparent;
  border-color: var(--line);
}

.icon-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-elev);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* —— App shell (ExchangePro-inspired) —— */
.app-shell {
  min-height: 100vh;
  display: flex;
  background: var(--bg);
  color: var(--ink);
  --sidebar-w: 248px;
}

.app-shell.sidebar-collapsed {
  --sidebar-w: 76px;
}

.gp-sidebar-overlay {
  display: none;
}

.gp-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: linear-gradient(180deg, #0c1929 0%, #07111f 100%);
  color: #91a0b5;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 50;
  border-right: 1px solid rgba(255, 138, 42, 0.1);
  transition: width 0.22s ease;
  overflow: hidden;
}

.gp-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.95rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.gp-brand .brand-mark {
  background: rgba(255, 138, 42, 0.16);
  color: #ffb45c;
}

.gp-brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  white-space: nowrap;
}

.gp-brand-text strong {
  font-family: var(--font-display);
  color: #fff;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.gp-brand-text span { color: #ff8a2a; }

.gp-brand-text em {
  font-style: normal;
  font-size: 0.68rem;
  color: #64748b;
}

.gp-nav {
  flex: 1;
  overflow: auto;
  padding: 0.55rem 0.55rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gp-nav-section {
  margin: 0.7rem 0.55rem 0.25rem;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #475569;
  font-weight: 700;
}

.gp-nav-btn {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  color: #91a0b5;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}

.gp-nav-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.8;
}

.gp-nav-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #e8eef6;
}

.gp-nav-btn.active {
  background: rgba(255, 138, 42, 0.14);
  color: #fff;
  border-left-color: #ff8a2a;
}

.gp-nav-btn.active svg {
  opacity: 1;
  color: #ffb45c;
}

.gp-nav-btn.gp-nav-soon {
  opacity: 0.42;
  cursor: default;
  pointer-events: none;
  position: relative;
}

.gp-nav-btn.gp-nav-soon::after {
  content: 'Pronto';
  margin-left: auto;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

.app-shell.sidebar-collapsed .gp-brand-text,
.app-shell.sidebar-collapsed .gp-nav-section,
.app-shell.sidebar-collapsed .gp-nav-btn span,
.app-shell.sidebar-collapsed .gp-nav-btn.gp-nav-soon::after,
.app-shell.sidebar-collapsed .gp-user-card-info {
  display: none;
}

.app-shell.sidebar-collapsed .gp-nav-btn {
  justify-content: center;
  padding: 0.65rem;
  border-left-width: 0;
}

.app-shell.sidebar-collapsed .gp-user-card {
  justify-content: center;
}

.gp-user-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(0, 0, 0, 0.18);
}

.gp-user-card-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.gp-user-card-info strong {
  color: #fff;
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gp-user-card-info span {
  font-size: 0.75rem;
  color: #cbd5e1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gp-user-card-info em {
  font-style: normal;
  font-size: 0.68rem;
  color: #ffb45c;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gp-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff8a2a, #ffb45c);
  color: #0a0a0a;
  font-weight: 800;
  font-size: 0.72rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 0 0 2px rgba(255, 138, 42, 0.25);
}

.gp-avatar.lg {
  width: 64px;
  height: 64px;
  font-size: 1.1rem;
}

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

.gp-avatar.has-photo {
  background: #1a2433;
  color: transparent;
}

.gp-content-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1rem;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 40;
}

[data-theme="dark"] .topbar {
  background: linear-gradient(180deg, #122033 0%, #101d2e 100%);
  border-bottom-color: rgba(255, 138, 42, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.topbar-titles {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar-titles strong {
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.1;
}

.topbar-titles span {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gp-user-pill {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.25rem 0.7rem 0.25rem 0.25rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  max-width: 200px;
}

.gp-user-pill .gp-avatar {
  width: 34px;
  height: 34px;
}

.gp-user-pill-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.gp-user-pill-text span {
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gp-user-pill-text small {
  font-size: 0.68rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-main {
  flex: 1;
  padding: 0.75rem;
  min-height: 0;
  background: var(--bg);
}

.view { display: none; height: 100%; }
.view.active { display: block; }

/* Hub inicio */
.hub-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  margin-bottom: 0.85rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(255, 138, 42, 0.12), transparent 55%), var(--bg-elev);
}

.hub-kicker {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-ink);
  font-weight: 700;
}

.hub-hero h2 {
  margin: 0;
  font-size: 1.55rem;
}

.hub-sub {
  margin: 0.35rem 0 0;
  max-width: 42rem;
  font-size: 0.92rem;
}

.hub-staff {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.hub-staff strong {
  display: block;
  font-size: 0.95rem;
}

.hub-staff span {
  display: block;
  font-size: 0.78rem;
}

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}

.hub-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-elev);
  padding: 1.05rem 1.1rem;
  text-align: left;
  cursor: pointer;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 148px;
  transition: transform 0.14s ease, border-color 0.15s, box-shadow 0.15s;
}

.hub-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16);
}

.hub-card.soon {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

.hub-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.hub-card-icon svg { width: 22px; height: 22px; }

.hub-card h3 {
  margin: 0;
  font-size: 1.05rem;
}

.hub-card p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.35;
}

.hub-card .hub-go {
  margin-top: auto;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-ink);
}

.panel {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

[data-theme="dark"] .panel {
  background: linear-gradient(180deg, #122033 0%, #0e1a28 100%);
  border-color: rgba(255, 138, 42, 0.12);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  background: rgba(7, 17, 31, 0.25);
}

[data-theme="light"] .panel-head {
  background: var(--bg-soft);
}

.panel-head h2, .panel-head h3 {
  font-size: 1rem;
}

.panel-head-actions {
  display: flex;
  gap: 0.35rem;
}

/* —— POS —— */
.pos-layout {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.4fr) minmax(260px, 0.95fr);
  gap: 0.75rem;
  height: calc(100vh - var(--topbar-h) - 1.5rem);
}

.pos-floor { min-height: 0; }
.pos-menu { min-height: 0; }
.pos-comanda { min-height: 0; }

.mesa-map {
  flex: 1;
  overflow: auto;
  padding: 0.65rem 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-content: start;
}

.zona-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  padding: 0.55rem 0.75rem 0.15rem;
  overflow-x: auto;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--line);
}

.zona-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.zona-chip:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.zona-chip.active {
  background: var(--accent-grad);
  border-color: transparent;
  color: #0a0a0a;
}

.zona-chip-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  opacity: 0.85;
}

.salon-block {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.salon-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 0.15rem;
}

.salon-name {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0;
}

.salon-meta {
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
  color: var(--muted);
}

.salon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.55rem;
}

.mesa-tile {
  aspect-ratio: 1;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--bg-soft), var(--bg-elev));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  cursor: pointer;
  padding: 0.45rem 0.35rem 0.5rem;
  text-align: center;
  position: relative;
  transition: transform 0.14s ease, border-color 0.15s, box-shadow 0.15s;
}

.mesa-tile:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

.mesa-tile.active {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  transform: translateY(-3px) scale(1.05);
  z-index: 2;
  box-shadow:
    0 0 0 6px var(--panel-glow),
    0 16px 32px rgba(224, 107, 22, 0.35);
}

.mesa-tile.active .mesa-status {
  color: var(--accent-ink) !important;
  font-weight: 800;
}

.mesa-tile.active::after {
  content: '';
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent-grad);
  box-shadow: 0 0 0 3px var(--bg-elev), 0 0 12px rgba(255, 138, 42, 0.7);
  z-index: 1;
}

.mesa-icon {
  width: 28px;
  height: 28px;
  color: var(--muted);
  margin-bottom: 0.1rem;
}

.mesa-status {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  right: 0.35rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.9;
}

.mesa-tile .code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  line-height: 1;
}

.mesa-tile .meta {
  font-size: 0.65rem;
  color: var(--muted);
}

.mesa-total {
  font-size: 0.72rem;
  font-weight: 700;
  margin-top: 0.1rem;
  color: var(--accent-ink);
}

.mesa-tile.FREE {
  background: linear-gradient(160deg, rgba(62, 207, 142, 0.12), var(--bg-elev));
  border-color: rgba(26, 143, 90, 0.4);
}

.mesa-tile.FREE .mesa-status { color: var(--ok); }
.mesa-tile.FREE .mesa-icon { color: var(--ok); }

.mesa-tile.OCCUPIED {
  background: linear-gradient(160deg, #fff1e2, #ffd9b3);
  border-color: #e06b16;
  color: #0c1624;
}

.mesa-tile.OCCUPIED .mesa-status,
.mesa-tile.OCCUPIED .mesa-icon,
.mesa-tile.OCCUPIED .code {
  color: #9a4508;
}

.mesa-tile.OCCUPIED .mesa-total,
.mesa-tile.OCCUPIED .meta {
  color: #5c2a08;
}

.mesa-tile.BILL {
  background: linear-gradient(160deg, #e8f3fc, #cfe6f8);
  border-color: #1a6fb5;
  color: #0c1624;
}

.mesa-tile.BILL .mesa-status,
.mesa-tile.BILL .mesa-icon,
.mesa-tile.BILL .code {
  color: #0f4f86;
}

.mesa-tile.BILL .mesa-total,
.mesa-tile.BILL .meta {
  color: #163a58;
}

[data-theme="dark"] .mesa-tile.OCCUPIED {
  background: linear-gradient(160deg, rgba(255, 138, 42, 0.22), #1a1420);
  border-color: rgba(255, 138, 42, 0.55);
  color: #f4f7fa;
}

[data-theme="dark"] .mesa-tile.OCCUPIED .mesa-status,
[data-theme="dark"] .mesa-tile.OCCUPIED .mesa-icon,
[data-theme="dark"] .mesa-tile.OCCUPIED .code {
  color: #ffb45c;
}

[data-theme="dark"] .mesa-tile.OCCUPIED .mesa-total {
  color: #ffb45c;
}

[data-theme="dark"] .mesa-tile.OCCUPIED .meta {
  color: #91a0b5;
}

[data-theme="dark"] .mesa-tile.BILL {
  background: linear-gradient(160deg, rgba(91, 163, 224, 0.22), #101a28);
  border-color: rgba(91, 163, 224, 0.55);
  color: #f4f7fa;
}

[data-theme="dark"] .mesa-tile.BILL .mesa-status,
[data-theme="dark"] .mesa-tile.BILL .mesa-icon,
[data-theme="dark"] .mesa-tile.BILL .code {
  color: #7ec0ef;
}

[data-theme="dark"] .mesa-tile.BILL .mesa-total {
  color: #7ec0ef;
}

[data-theme="dark"] .mesa-tile.BILL .meta {
  color: #91a0b5;
}

.floor-legend {
  display: flex;
  gap: 0.85rem;
  padding: 0.55rem 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  color: var(--muted);
  flex-wrap: wrap;
  align-items: center;
}
.floor-legend-hint { margin-left: auto; font-size: 0.72rem; }

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.25rem;
  vertical-align: middle;
}

/* Mismos colores que las mesas del plano, o la leyenda engaña */
.dot.free { background: var(--ok); }
.dot.reserved { background: var(--info); }
.dot.occupied { background: var(--accent); }
.dot.bill { background: var(--warn); }
.dot.dirty { background: var(--muted); }
.dot.blocked { background: var(--danger); }

.tabs-list {
  flex: 1;
  overflow: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tab-item {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0.75rem;
  cursor: pointer;
  background: var(--bg-soft);
  text-align: left;
}

.tab-item.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.tab-item strong { display: block; font-family: var(--font-display); }
.tab-item .meta { font-size: 0.8rem; color: var(--muted); margin-top: 0.2rem; }

.cat-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  padding: 0.55rem 0.85rem 0.15rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.chip {
  border: 1px solid var(--line);
  background: var(--bg-soft);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
}

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

.chip.active {
  background: var(--accent-grad);
  color: #0a0a0a;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(255, 138, 42, 0.28);
}

/* —— Menú (mismo lenguaje visual que mesas / comanda) —— */
.menu-pro-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.65rem;
}

.menu-pro-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
}

.menu-pro-title h2 {
  font-size: 1.05rem;
}

.menu-pro-currency {
  font-size: 0.75rem;
  color: var(--muted) !important;
}

.menu-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 0.75rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.menu-search-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--panel-glow);
}

.menu-search-wrap svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex-shrink: 0;
}

.menu-search-wrap input {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 0.55rem 0;
  outline: none;
  font-size: 0.88rem;
}

.menu-search-wrap input::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

.menu-pro .cat-filters {
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.55rem;
}

.menu-grid {
  flex: 1;
  overflow: auto;
  padding: 0.85rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 0.75rem;
  align-content: start;
}

.menu-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-soft);
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
  color: var(--ink);
  transition: transform 0.15s ease, border-color 0.15s, box-shadow 0.15s;
}

.menu-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

.menu-card:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.menu-card .thumb {
  position: relative;
  height: 110px;
  background: linear-gradient(145deg, var(--bg-elev), var(--bg-soft));
  display: grid;
  place-items: center;
  color: var(--accent-ink);
  overflow: hidden;
}

[data-theme="dark"] .menu-card .thumb {
  background: linear-gradient(145deg, #1a2a3d, #0d1826);
}

.menu-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.menu-card .thumb-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  opacity: 0.85;
}

.menu-card .add-btn {
  position: absolute;
  right: 0.55rem;
  bottom: 0.55rem;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 0;
  display: grid;
  place-items: center;
  background: var(--accent-grad);
  color: #0a0a0a;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 6px 16px rgba(255, 138, 42, 0.4);
  pointer-events: none;
}

.menu-card:disabled .add-btn {
  opacity: 0.4;
}

.menu-card .body {
  padding: 0.65rem 0.7rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 72px;
}

.menu-card .name {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--ink);
}

.menu-card .meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-top: auto;
}

.menu-card .price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent-ink);
}

.menu-card .estacion {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--bg-elev);
  border-radius: 999px;
  padding: 0.15rem 0.4rem;
}

.menu-count {
  font-size: 0.72rem;
  color: var(--muted);
  padding: 0 0.85rem 0.35rem;
}

.comanda-lines {
  flex: 1;
  overflow: auto;
  padding: 0.4rem 0.55rem;
}

.line-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0.65rem 0.45rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}

.line-qty {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.15rem;
}

.qty-btn {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  display: grid;
  place-items: center;
}

.qty-btn:hover:not(:disabled) {
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.qty-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.qty-val {
  min-width: 1.6rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.9rem;
}

.line-info {
  min-width: 0;
}

.line-name {
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line-meta {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.line-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
}

.line-row .amt {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-ink);
}

.line-void {
  border: none;
  background: transparent;
  color: var(--danger);
  cursor: pointer;
  padding: 0;
  font-size: 0.7rem;
  font-weight: 600;
}

.line-void:hover {
  text-decoration: underline;
}

.comanda-totals {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
}

.tot-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.2rem 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.tot-row.total {
  margin-top: 0.35rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
  font-size: 1.05rem;
}

.tot-row.total .num {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--accent-ink);
}

.comanda-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
}

.line-mods {
  font-size: 0.72rem;
  color: var(--accent-ink);
  margin-top: 0.1rem;
}

.caja-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0.75rem;
  align-items: start;
}

.caja-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.55rem;
  padding: 0.85rem;
}

.caja-kpi {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0.65rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.caja-kpi .label {
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.caja-kpi strong {
  font-family: var(--font-mono);
  font-size: 1.05rem;
}

.caja-mov-form {
  margin: 0 0.85rem 0.85rem;
}

.mod-group {
  margin-bottom: 0.85rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}

.mod-group h4 {
  margin: 0 0 0.45rem;
  font-size: 0.9rem;
}

.mod-opts {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.mod-opt {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  background: var(--bg-soft);
}

.mod-opt:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.mod-opt em {
  margin-left: auto;
  font-style: normal;
  color: var(--accent-ink);
  font-size: 0.8rem;
}

@media (max-width: 900px) {
  .caja-layout { grid-template-columns: 1fr; }
  .comanda-actions { grid-template-columns: 1fr; }
}

.comanda-actions .btn { padding: 0.85rem; }

.comanda-actions .btn-primary {
  background: var(--accent-grad);
  color: #0a0a0a;
  border: 0;
}

.empty-hint {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

/* —— KDS —— */
.kds-head, .admin-head, .platform-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.kds-sub {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
}

.kds-head-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.kds-station-filters {
  display: flex;
  gap: 0.35rem;
}

.kds-chip {
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.kds-chip.active {
  background: var(--accent-grad);
  border-color: transparent;
  color: #0a0a0a;
}

.kds-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  height: calc(100vh - var(--topbar-h) - 5.5rem);
}

.kds-col {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.kds-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 17, 31, 0.35);
}

.kds-col-head h3 {
  margin: 0;
  font-size: 0.95rem;
}

.kds-col-count {
  min-width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.kds-cards {
  flex: 1;
  overflow: auto;
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.kds-ticket {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(160deg, var(--bg-soft), var(--bg-elev));
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  border-left: 4px solid var(--ok);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.kds-ticket.tone-warn {
  border-left-color: var(--warn);
}

.kds-ticket.tone-crit {
  border-left-color: var(--danger);
  animation: kds-pulse 1.4s ease-in-out infinite;
}

@keyframes kds-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 112, 104, 0.35); }
  50% { box-shadow: 0 0 0 6px rgba(224, 112, 104, 0.08); }
}

.kds-ticket-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.kds-mesa {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.kds-est {
  display: inline-block;
  margin-top: 0.15rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.kds-timer {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ok);
  min-width: 3.4rem;
  text-align: right;
}

.kds-ticket.tone-warn .kds-timer { color: var(--warn); }
.kds-ticket.tone-crit .kds-timer { color: var(--danger); }

.kds-items {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.kds-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.55rem;
  align-items: baseline;
  padding: 0.35rem 0.45rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.12);
}

.kds-item-qty {
  font-weight: 700;
  color: var(--accent-ink);
}

.kds-item-name {
  font-weight: 600;
  font-size: 0.92rem;
}

.kds-item-note {
  grid-column: 2;
  font-size: 0.75rem;
  color: var(--warn);
}

.kds-advance {
  width: 100%;
  margin-top: 0.15rem;
}

.line-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.line-badge.new {
  background: rgba(255, 138, 42, 0.18);
  color: var(--accent-ink);
}

.line-badge.sent {
  background: rgba(62, 207, 142, 0.16);
  color: var(--ok);
}

.line-badge.prod {
  background: rgba(91, 163, 224, 0.16);
  color: var(--info);
}

.line-row.is-sent {
  opacity: 0.88;
}

/* —— Admin —— */
.limits-bar {
  font-size: 0.85rem;
  font-family: var(--font-mono);
}

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.admin-tab {
  border: 1px solid var(--line);
  background: var(--bg-elev);
  border-radius: var(--r);
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  color: var(--muted);
}

.admin-tab.active {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.admin-panel { display: none; }
.admin-panel.active { display: block; }

.form-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1rem;
  margin-bottom: 0.75rem;
}

.form-card.compact h3 {
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}

.form-card .btn { margin-top: 0.75rem; }

.data-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-elev);
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

table.data th,
table.data td {
  padding: 0.65rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

table.data th {
  font-weight: 600;
  color: var(--muted);
  background: var(--bg-soft);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

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

table.data .num { text-align: right; }

/* —— Platform —— */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.65rem;
}

.stat-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1rem;
}

.stat-card .label {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.stat-card .value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}

/* —— Modal —— */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 20, 28, 0.55);
  display: grid;
  place-items: center;
  z-index: 100;
  padding: 1rem;
}

.modal {
  width: min(440px, 100%);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  max-height: 90vh;
  overflow: auto;
}

.modal-sm { width: min(360px, 100%); }

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--line);
}

.modal-body { padding: 1.1rem; }
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--line);
}

.pay-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1rem;
  padding: 0.85rem;
  background: var(--bg-soft);
  border-radius: var(--r);
}

.pay-total strong {
  font-family: var(--font-display);
  font-size: 1.75rem;
}

.modal-pay { width: min(520px, 100%); }
.pay-modes {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}
.pay-mode {
  flex: 1;
  min-width: 5rem;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--ink);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.pay-mode.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-ink);
}
.pay-cliente-row { display: flex; gap: 0.4rem; }
.pay-cliente-row input { flex: 1; }
.pay-cliente-sel { margin: 0.35rem 0 0; font-size: 0.85rem; }
.cli-suggest {
  max-height: 200px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 0.35rem;
  background: var(--bg);
}
.cli-suggest button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.88rem;
}
.cli-suggest button:hover { background: var(--bg-soft); }
.cli-suggest .meta { color: var(--muted); font-size: 0.78rem; }
.chk-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.75rem;
  font-size: 0.88rem;
  color: var(--muted);
}
.comanda-cliente {
  display: flex;
  gap: 0.35rem;
  padding: 0.45rem 0.75rem 0;
}
.comanda-cliente .btn { flex: 1; justify-content: flex-start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comanda-cliente #btn-print-comanda { flex: 0; min-width: 2.4rem; }
.comanda-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem 0;
  border-top: 1px solid var(--line);
}
.link-btn {
  border: 0;
  background: transparent;
  color: var(--accent-ink);
  font-weight: 700;
  cursor: pointer;
  padding: 0 0.15rem;
}
.split-lines {
  max-height: 280px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.split-line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-soft);
  cursor: pointer;
}
.split-line input { accent-color: var(--accent); }
.reportes-filters { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.reportes-filters input[type="date"] {
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--ink);
}
.reportes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}
.panel.nested { margin: 0; }
@media (max-width: 1100px) {
  .reportes-grid { grid-template-columns: 1fr; }
}
.clientes-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 960px) {
  .clientes-layout { grid-template-columns: 1fr; }
}
.field-span { grid-column: 1 / -1; }
.form-actions-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
.input-inline {
  min-width: 12rem;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--ink);
}

.inv-tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.inv-panel { margin-top: 1rem; }
/* El aviso es «este stock está bajo», no «este producto entero está mal».

   Antes esto pintaba las seis celdas de #f0b429: un amarillo fijo, elegido
   mirando el tema oscuro, que sobre el blanco del claro da un contraste de
   poco más de 2:1 —menos de la mitad del mínimo legible—. Y como casi todo
   el catálogo suele estar por debajo del mínimo, la tabla entera salía en
   amarillo y no se leía nada.

   Ahora el nombre y el código se leen siempre, y el color va donde está el
   problema: la cifra. La barra de la izquierda es lo que se recorre con la
   vista para encontrarlas. */
.inv-row.tone-warn > td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.inv-row.tone-warn td.inv-stock { color: var(--warn); font-weight: 700; }

/* Un stock negativo no es «va quedando poco»: es que se vendió más de lo que
   entró y los números no cuadran. Eso se mira hoy, no cuando toque reponer. */
.inv-row.tone-bad > td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.inv-row.tone-bad td.inv-stock,
.inv-row.tone-bad td.inv-valor { color: var(--danger); font-weight: 700; }
.inv-row { cursor: pointer; }
.inv-plato-row { cursor: pointer; }

.modal-wide { width: min(820px, 100%); }
.compras-shell { display: flex; flex-direction: column; gap: 1rem; }
.compras-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: 14px;
  background:
    radial-gradient(900px 200px at 10% -40%, color-mix(in srgb, var(--accent) 28%, transparent), transparent),
    linear-gradient(135deg, color-mix(in srgb, var(--bg-soft) 90%, #0a1628), var(--bg-soft));
  border: 1px solid var(--line);
}
.compras-kicker {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-weight: 600;
}
.compras-hero h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.85rem;
}
.compras-hero-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* Module shell — mismo patrón elite en todos los módulos */
.module-shell { display: flex; flex-direction: column; gap: 1rem; }
.module-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: 14px;
  background:
    radial-gradient(900px 200px at 10% -40%, color-mix(in srgb, var(--accent) 28%, transparent), transparent),
    linear-gradient(135deg, color-mix(in srgb, var(--bg-soft) 90%, #0a1628), var(--bg-soft));
  border: 1px solid var(--line);
}
.module-kicker {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-weight: 600;
}
.module-hero h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.85rem;
  line-height: 1.15;
}
.module-hero .muted { margin: 0.35rem 0 0; max-width: 42rem; }
.module-hero-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
}
.hub-hero-mod .hub-staff { margin-left: auto; }
.caja-kpi {
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--bg) 70%, transparent), var(--bg-soft));
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.caja-kpi .label {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.68rem;
}
.rep-panel { margin-top: 0.25rem; }
.fc-bar {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 80%, transparent);
  overflow: hidden;
  margin-top: 0.35rem;
}
.fc-bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #ffb347);
}
.fc-bar.warn > i { background: linear-gradient(90deg, #f0b429, #ff7a45); }
.fc-bar.bad > i { background: linear-gradient(90deg, #e85d5d, #c0392b); }
.motivo-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--bg);
}
.compras-workbench {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1rem;
  align-items: start;
  margin-top: 0.75rem;
}
@media (max-width: 1100px) {
  .compras-workbench { grid-template-columns: 1fr; }
}
.oc-pipeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 0.65rem;
  overflow-x: auto;
}
.oc-col {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
}
.oc-col-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.oc-col-body { padding: 0.5rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; }
.oc-card {
  text-align: left;
  width: 100%;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  border-radius: 10px;
  padding: 0.65rem 0.7rem;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.oc-card:hover, .oc-card.active {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.oc-card strong { display: block; font-size: 0.9rem; }
.oc-card .meta { font-size: 0.75rem; color: var(--muted); margin-top: 0.2rem; }
.oc-card .amt { font-family: var(--font-mono, var(--font-display)); font-size: 0.95rem; margin-top: 0.35rem; color: var(--accent-ink); }
.oc-detail { min-height: 280px; padding: 1rem; }
.oc-detail h3 { margin: 0 0 0.35rem; font-family: var(--font-display); }
.oc-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.75rem 0; }
.match-ok { color: #3dd68c; font-weight: 700; }
.match-exc { color: #f0b429; font-weight: 700; }
.buy-panel { margin-top: 0.5rem; }

/* —— Toast —— */
.toast {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  padding: 0.7rem 1.1rem;
  border-radius: var(--r);
  font-size: 0.9rem;
  z-index: 200;
  max-width: min(420px, 92vw);
  text-align: center;
}

[data-theme="dark"] .toast {
  background: var(--accent);
  color: #042020;
}

/* —— Responsive —— */
@media (max-width: 1100px) {
  .pos-layout {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    height: auto;
    min-height: calc(100vh - var(--topbar-h) - 1.5rem);
  }
  .pos-comanda {
    grid-column: 1 / -1;
    max-height: 42vh;
  }
  .kds-board {
    grid-template-columns: 1fr;
    height: auto;
  }
  .kds-col { min-height: 220px; }
}

@media (max-width: 720px) {
  .app-shell {
    --sidebar-w: 0px;
  }
  .gp-sidebar {
    position: fixed;
    transform: translateX(-100%);
    width: 248px;
  }
  .app-shell.sidebar-open .gp-sidebar {
    transform: translateX(0);
  }
  .app-shell.sidebar-collapsed .gp-sidebar {
    transform: translateX(-100%);
  }
  .topbar {
    flex-wrap: wrap;
    height: auto;
    padding: 0.5rem;
    gap: 0.5rem;
  }
  .topbar-titles span { max-width: 100px; }
  .gp-user-pill-text { display: none; }
  .hub-hero { flex-direction: column; align-items: flex-start; }
  .pos-layout {
    grid-template-columns: 1fr;
  }
  .field-grid { grid-template-columns: 1fr; }
}

.pos-floor-modes {
  display: flex;
  gap: 0.35rem;
  padding: 0 0.85rem 0.5rem;
}
.canales-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem 1rem;
  overflow: auto;
  max-height: calc(100vh - 220px);
}
.canal-item {
  text-align: left;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  border-radius: 12px;
  padding: 0.7rem 0.75rem;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.canal-item:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.canal-item.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}
.canal-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
}
.canal-item strong { display: block; }
.canal-item .meta {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

/* ===== Analytics premium (Reportes / Clientes) ===== */
.analytics-shell { gap: 1.1rem; }
.analytics-hero {
  background:
    radial-gradient(700px 180px at 85% -30%, color-mix(in srgb, var(--accent) 35%, transparent), transparent),
    linear-gradient(135deg, color-mix(in srgb, var(--bg-soft) 80%, #122033), var(--bg-soft));
}
.range-pills { display: flex; gap: 0.3rem; }
.range-pill {
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.range-pill.active {
  background: color-mix(in srgb, var(--accent) 18%, var(--bg));
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  color: var(--ink);
}
.kpi-premium-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (max-width: 1200px) {
  .kpi-premium-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .kpi-premium-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.kpi-premium {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--line);
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--bg) 55%, transparent), var(--bg-soft));
  padding: 1rem 1rem 0.9rem;
  min-height: 108px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
}
.kpi-premium::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
}
.kpi-premium.tone-blue::before { background: #3b82f6; }
.kpi-premium.tone-green::before { background: #22c55e; }
.kpi-premium.tone-amber::before { background: #f59e0b; }
.kpi-premium.tone-rose::before { background: #f43f5e; }
.kpi-premium.tone-violet::before { background: #8b5cf6; }
.kpi-premium .kpi-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}
.kpi-premium .kpi-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.kpi-premium .kpi-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-ink);
}
.kpi-premium.tone-blue .kpi-icon { background: color-mix(in srgb, #3b82f6 16%, transparent); color: #3b82f6; }
.kpi-premium.tone-green .kpi-icon { background: color-mix(in srgb, #22c55e 16%, transparent); color: #22c55e; }
.kpi-premium.tone-amber .kpi-icon { background: color-mix(in srgb, #f59e0b 16%, transparent); color: #f59e0b; }
.kpi-premium.tone-rose .kpi-icon { background: color-mix(in srgb, #f43f5e 16%, transparent); color: #f43f5e; }
.kpi-premium.tone-violet .kpi-icon { background: color-mix(in srgb, #8b5cf6 16%, transparent); color: #8b5cf6; }
.kpi-premium .kpi-value {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 0.55rem;
}
.kpi-premium .kpi-foot {
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: var(--muted);
}
.analytics-board {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0.9rem;
}
.analytics-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1rem 1.05rem 1.05rem;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
}
.analytics-card-wide { grid-column: 1 / -1; }
.analytics-card-span2 { grid-column: 1 / -1; }
.analytics-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}
.analytics-card-head h3 {
  margin: 0;
  font-size: 1rem;
  font-family: var(--font-display);
}
.analytics-card-head .muted { margin: 0.15rem 0 0; font-size: 0.8rem; }
.chart-wrap { position: relative; height: 220px; }
.chart-wrap-lg { height: 280px; }
.chart-wrap-bar { height: 260px; }
.analytics-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 1000px) {
  .analytics-board { grid-template-columns: 1fr; }
  .analytics-split { grid-template-columns: 1fr; }
}
.analytics-mini-list, .analytics-rank {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.75rem;
}
.analytics-rank { margin-top: 0; }
.rank-row, .mini-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.55rem 0.65rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border: 1px solid var(--line);
}
.rank-row .rank-n {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-ink);
}
.rank-row .rank-bar {
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  margin-top: 0.3rem;
  overflow: hidden;
}
.rank-row .rank-bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #ffb347);
  border-radius: inherit;
}
.premium-table .data-table tbody tr {
  cursor: pointer;
  transition: background .12s;
}
.premium-table .data-table tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.clientes-board { margin-bottom: 0.25rem; }
.clientes-layout { margin-top: 0.5rem; }
[data-theme="light"] .analytics-card,
[data-theme="light"] .kpi-premium {
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
[data-theme="light"] .module-hero,
[data-theme="light"] .analytics-hero {
  background:
    radial-gradient(700px 180px at 85% -30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent),
    linear-gradient(135deg, #fff7ef, #ffffff);
}
[data-theme="light"] .rank-row,
[data-theme="light"] .mini-row {
  background: #f8fafc;
}

/* �� Caja / turnos (estilo ExchangePro) �� */
.caja-shell { gap: 1rem; }
.caja-toolbar { flex-wrap: wrap; }
.caja-status-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  align-items: baseline;
  padding: 0.7rem 1rem;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--bg-soft);
  font-size: 0.88rem;
}
.caja-status-banner.is-open {
  border-color: color-mix(in srgb, #22c55e 40%, var(--line));
  background: color-mix(in srgb, #22c55e 10%, transparent);
}
.caja-status-banner.is-closed {
  border-color: color-mix(in srgb, #f59e0b 40%, var(--line));
  background: color-mix(in srgb, #f59e0b 10%, transparent);
}
.caja-status-banner strong { margin-right: 0.25rem; }
.caja-flujo-card { margin: 0; }
.caja-flujo-strip {
  display: flex;
  gap: 0.55rem;
  overflow-x: auto;
  padding: 0.15rem 0.1rem 0.35rem;
  scrollbar-width: thin;
}
.flujo-chip {
  flex: 0 0 auto;
  min-width: 7.5rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  display: grid;
  gap: 0.2rem;
}
.flujo-chip span {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.flujo-chip strong { font-size: 0.95rem; }
.flujo-chip.tone-green { border-color: color-mix(in srgb, #22c55e 35%, var(--line)); }
.flujo-chip.tone-rose { border-color: color-mix(in srgb, #f43f5e 35%, var(--line)); }
.flujo-chip.tone-amber { border-color: color-mix(in srgb, #f59e0b 35%, var(--line)); }
.flujo-chip.tone-blue { border-color: color-mix(in srgb, #3b82f6 35%, var(--line)); }
.flujo-chip.tone-violet { border-color: color-mix(in srgb, #8b5cf6 35%, var(--line)); }
.caja-workbench {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 0.85rem;
  align-items: start;
}
.caja-side-col { display: grid; gap: 0.85rem; }
.caja-mov-form { margin-bottom: 0.75rem; padding: 0.75rem; }
.turno-row { cursor: pointer; }
.turno-row:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.motivo-chip.tone-ok {
  background: color-mix(in srgb, #22c55e 18%, transparent);
  color: #16a34a;
}
.rank-title {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
}
.arqueo-kpi { margin-bottom: 0.85rem; }
@media (max-width: 960px) {
  .caja-workbench { grid-template-columns: 1fr; }
}

/* Reporte de turno */
.turno-rep {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.turno-rep.hidden { display: none; }
.turno-rep-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 17, 31, 0.72);
  backdrop-filter: blur(4px);
}
.turno-rep-panel {
  position: relative;
  width: min(820px, 100%);
  max-height: min(92vh, 920px);
  overflow: auto;
  background: var(--panel, #0d1b2a);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.45);
}
.turno-rep-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--panel, #0d1b2a);
  z-index: 1;
}
.turno-rep-kicker {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  font-weight: 700;
}
.turno-rep-head h2 { margin: 0.15rem 0 0; font-size: 1.15rem; }
.turno-rep-sub { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.85rem; }
.turno-rep-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
.turno-rep-body { padding: 1rem 1.2rem 1.4rem; }
.tr-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 1rem;
}
.tr-kpi {
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  display: grid;
  gap: 0.2rem;
}
.tr-kpi span {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.tr-kpi strong { font-size: 1rem; }
.tr-block { margin-top: 1rem; }
.tr-block h4 { margin: 0 0 0.45rem; font-size: 0.9rem; }
.tr-warn {
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  background: color-mix(in srgb, #f59e0b 16%, transparent);
  color: #fbbf24;
  font-size: 0.85rem;
}
body.turno-rep-open { overflow: hidden; }
@media (max-width: 640px) {
  .tr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .turno-rep { padding: 0; align-items: stretch; }
  .turno-rep-panel { width: 100%; max-height: 100%; border-radius: 0; }
}
@media print {
  body.turno-rep-open * { visibility: hidden; }
  body.turno-rep-open .turno-rep,
  body.turno-rep-open .turno-rep * { visibility: visible; }
  body.turno-rep-open .turno-rep {
    position: static;
    padding: 0;
    background: #fff;
  }
  body.turno-rep-open .turno-rep-backdrop,
  body.turno-rep-open .no-print { display: none !important; }
  body.turno-rep-open .turno-rep-panel {
    box-shadow: none;
    border: none;
    max-height: none;
    width: 100%;
    background: #fff;
    color: #111;
  }
}

/* ——————————————————————————————————————————————————————
   Cockpit de inicio
   El color se reserva para el estado: si todo va bien, la
   pantalla es neutra y sólo destacan los números.
   —————————————————————————————————————————————————————— */

.ck-stamp {
  display: block;
  font-style: normal;
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.ck-section-label {
  margin: 0.6rem 0 -0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* —— Franja de KPI —— */
.ck-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (max-width: 1240px) {
  .ck-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ck-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ck-kpi {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0.85rem 0.95rem;
  box-shadow: var(--shadow);
}
.ck-kpi-label {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.ck-kpi-value {
  margin: 0.35rem 0 0.3rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.ck-kpi-foot { margin: 0; font-size: 0.78rem; }

.ck-delta { display: inline-flex; align-items: center; gap: 0.25rem; }
.ck-delta.up { color: var(--ok); }
.ck-delta.down { color: var(--danger); }
.ck-delta.flat,
.ck-delta.none { color: var(--muted); }
.ck-delta.warnish { color: var(--warn); }

/* —— Paneles —— */
.ck-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.ck-grid-wide {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 1100px) {
  .ck-grid { grid-template-columns: 1fr; }
  .ck-grid-wide { grid-template-columns: 1fr; }
}

.ck-panel { padding: 1rem 1.1rem; }
.ck-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.ck-panel-head h3 {
  font-size: 0.95rem;
  font-family: var(--font-display);
  margin: 0;
}
.ck-sub {
  margin: 1.1rem 0 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.ck-big {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.ck-unit {
  font-size: 0.8rem;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--muted);
  margin-left: 0.35rem;
  letter-spacing: 0;
}

.ck-meter {
  margin: 0.6rem 0 0.9rem;
  height: 6px;
  border-radius: 999px;
  background: var(--bg-soft);
  overflow: hidden;
}
.ck-meter > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.ck-facts { margin: 0; display: grid; gap: 0.4rem; }
.ck-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.85rem;
}
.ck-facts dt { color: var(--muted); }
.ck-facts dd { margin: 0; font-weight: 600; }

.ck-stations { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.ck-station,
.ck-turno {
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--r);
  padding: 0.55rem 0.7rem;
  font-size: 0.85rem;
}
.ck-station.tone-ok, .ck-turno { border-left-color: var(--line); }
.ck-station.tone-warn { border-left-color: var(--warn); }
.ck-station.tone-bad { border-left-color: var(--danger); }
.ck-station-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}
.ck-station-top strong { font-size: 0.85rem; }
.ck-station .muted,
.ck-turno .muted { font-size: 0.78rem; }

.ck-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--bg-soft);
  color: var(--muted);
  white-space: nowrap;
}
.ck-chip.tone-ok { background: var(--ok-soft); color: var(--ok); }
.ck-chip.tone-warn { background: var(--warn-soft); color: var(--warn); }
.ck-chip.tone-bad { background: var(--danger-soft); color: var(--danger); }

.ck-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  padding: 0.5rem 0;
}

/* —— Curva del día —— */
.ck-chart { margin: 0; }
.ck-chart svg {
  width: 100%;
  height: 120px;
  display: block;
  overflow: visible;
}
.ck-bar {
  fill: var(--accent);
  transition: fill 0.12s ease;
}
.ck-bar.empty { fill: var(--line); }
.ck-bar:hover { fill: var(--accent-ink); }
.ck-axis { stroke: var(--line); stroke-width: 0.4; }
.ck-chart figcaption {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  color: var(--muted);
}
.ck-chart figcaption strong { color: var(--ink); font-weight: 600; }

/* —— Mezcla de cobro —— */
.ck-metodos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.ck-metodos li {
  display: grid;
  grid-template-columns: 7.5rem 1fr auto;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
}
.ck-metodo-nombre { color: var(--muted); }
.ck-metodo-barra {
  height: 6px;
  border-radius: 999px;
  background: var(--bg-soft);
  overflow: hidden;
}
.ck-metodo-barra > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}
.ck-metodo-valor { font-weight: 600; }

/* —— Avisos —— */
.ck-avisos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.ck-avisos button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: transparent;
  text-align: left;
  font-size: 0.84rem;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.ck-avisos button:hover {
  background: var(--bg-soft);
  border-color: var(--line);
}
.ck-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--muted);
}
.ck-dot.tone-bad { background: var(--danger); }
.ck-dot.tone-warn { background: var(--warn); }
.ck-dot.tone-info { background: var(--info); }

/* Los módulos pasan a segundo plano: el pulso manda */
#view-home .hub-grid { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); }
#view-home .hub-card p { display: none; }
#view-home .hub-card {
  padding: 0.8rem 0.9rem;
  gap: 0.35rem;
}

.ck-nochart { padding: 0.6rem 0 0.2rem; }
.ck-nochart .muted { font-size: 0.82rem; margin: 0.35rem 0 0; }

/* ——————————————————————————————————————————————————————
   Fotos del menú
   Sin foto no se deja un hueco: se pinta una lámina por
   categoría, para que el menú se vea terminado igual.
   —————————————————————————————————————————————————————— */

.thumb-fallback.tone-food { background: linear-gradient(135deg, #7a4a1d, #b8713a); }
.thumb-fallback.tone-starter { background: linear-gradient(135deg, #4a5f2a, #7d9a4c); }
.thumb-fallback.tone-seafood { background: linear-gradient(135deg, #17475e, #2e7d9a); }
.thumb-fallback.tone-grill { background: linear-gradient(135deg, #6b2418, #a8452c); }
.thumb-fallback.tone-drink { background: linear-gradient(135deg, #1d4a52, #3a8a8f); }
.thumb-fallback.tone-dessert { background: linear-gradient(135deg, #6d2c4a, #a85177); }
.thumb-fallback.tone-other { background: linear-gradient(135deg, #34404f, #5b6b7f); }
.thumb-fallback[class*="tone-"] { color: rgba(255, 255, 255, 0.92); }
.thumb-fallback[class*="tone-"] svg { opacity: 0.95; }

/* —— Galería de platos en Administración —— */
.adm-gallery-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 1.25rem 0 0.6rem;
  flex-wrap: wrap;
}
.adm-gallery-head h3 { margin: 0; font-size: 0.95rem; font-family: var(--font-display); }
.adm-gallery-head .muted { font-size: 0.78rem; }

.adm-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.75rem;
}

.adm-plato {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.adm-plato-foto {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  background: var(--bg-soft);
  cursor: pointer;
  overflow: hidden;
}
.adm-plato-foto img,
.adm-plato-foto .thumb-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.adm-plato-foto-hint {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
  opacity: 0;
  transition: opacity 0.14s ease;
}
.adm-plato-foto:hover .adm-plato-foto-hint,
.adm-plato-foto:focus-visible .adm-plato-foto-hint { opacity: 1; }

.adm-plato-body {
  padding: 0.55rem 0.7rem 0.7rem;
  display: grid;
  gap: 0.15rem;
  font-size: 0.82rem;
}
.adm-plato-body strong { font-size: 0.85rem; }
.adm-plato-body .muted { font-size: 0.72rem; }
.adm-plato-body .num { font-weight: 600; }

.adm-plato-quitar {
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 0.74rem;
  padding: 0.4rem;
  cursor: pointer;
}
.adm-plato-quitar:hover { color: var(--danger); background: var(--danger-soft); }

/* —— Logo de la sucursal —— */
.adm-logo-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}
.adm-logo-box {
  width: 9rem;
  height: 5rem;
  border: 1px dashed var(--line);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  overflow: hidden;
  font-size: 0.78rem;
}
.adm-logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.adm-logo-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* ——————————————————————————————————————————————————————
   Plano del salón
   Las mesas se dibujan donde están en el local. El lienzo
   lleva medidas reales y se escala para caber en pantalla.
   —————————————————————————————————————————————————————— */

.salon-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0 0.75rem;
}
.salon-toolbar .zona-filters { flex: 1; min-width: 0; padding: 0; }
.salon-vista { display: flex; gap: 0.25rem; flex: 0 0 auto; }

/* Mientras no hay cuenta abierta, el salón ocupa la pantalla */
.pos-layout.plano-full { grid-template-columns: 1fr; }
.pos-layout.plano-full .pos-menu,
.pos-layout.plano-full .pos-comanda { display: none; }

.plano-block { display: flex; flex-direction: column; gap: 0.5rem; }
.plano-acciones { display: flex; gap: 0.35rem; }
.plano-ayuda { font-size: 0.75rem; margin: 0; }

.plano-viewport {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  /* Cuadrícula tenue de 40 px: da escala al plano sin competir con las mesas */
  background-image:
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 40px);
  background-color: var(--bg-soft);
  background-position: 0 0;
}
.plano-viewport.editando {
  border-style: dashed;
  border-color: var(--accent);
}

.plano-lienzo {
  position: relative;
  transform-origin: top left;
}

.plano-mesa {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: var(--bg-elev);
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  padding: 0.35rem;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease;
}
.plano-mesa.redonda { border-radius: 50%; }
.plano-mesa:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
.plano-mesa:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.plano-mesa-cod {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.1;
}
.plano-mesa-estado,
.plano-mesa-cap,
.plano-mesa-tiempo,
.plano-mesa-cam {
  font-size: 0.68rem;
  color: var(--muted);
  line-height: 1.2;
}
.plano-mesa-total {
  font-size: 0.82rem;
  font-weight: 600;
}
.plano-mesa-cam {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Estado por color, con la palabra escrita dentro de la mesa */
.plano-mesa.FREE { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.plano-mesa.FREE .plano-mesa-estado { color: var(--ok); }

.plano-mesa.OCCUPIED {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-elev));
}
.plano-mesa.OCCUPIED .plano-mesa-total { color: var(--accent-ink); }

.plano-mesa.BILL {
  border-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, var(--bg-elev));
}
.plano-mesa.BILL .plano-mesa-total { color: var(--warn); }

.plano-mesa.RESERVED {
  border-color: var(--info);
  border-style: dashed;
}
.plano-mesa.RESERVED .plano-mesa-estado { color: var(--info); }

.plano-mesa.DIRTY {
  border-color: var(--muted);
  background: repeating-linear-gradient(
    45deg,
    var(--bg-elev) 0 8px,
    var(--bg-soft) 8px 16px
  );
}

.plano-mesa.BLOCKED {
  border-color: var(--danger);
  opacity: 0.6;
  cursor: not-allowed;
}
.plano-mesa.BLOCKED .plano-mesa-estado { color: var(--danger); }

.plano-mesa.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Avisos de cocina sobre la mesa */
.plano-pins {
  position: absolute;
  top: -8px;
  right: -8px;
  display: flex;
  gap: 0.2rem;
}
.plano-pin {
  min-width: 20px;
  height: 20px;
  padding: 0 0.3rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  color: #fff;
  border: 2px solid var(--bg-elev);
}
.plano-pin.cocina { background: var(--warn); }
.plano-pin.listo { background: var(--ok); }

/* Edición */
.plano-resize { display: none; }
.plano-viewport.editando .plano-mesa { cursor: grab; }
.plano-viewport.editando .plano-mesa.moviendo { cursor: grabbing; opacity: 0.85; }
.plano-viewport.editando .plano-resize {
  display: block;
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--accent);
  border: 2px solid var(--bg-elev);
  cursor: nwse-resize;
}

/* Coherencia de color entre el plano, la lista y la leyenda:
   reservada = dorado, cuenta = azul, como ya usaba la vista de lista. */
.plano-mesa.BILL {
  border-color: var(--info);
  background: color-mix(in srgb, var(--info) 12%, var(--bg-elev));
}
.plano-mesa.BILL .plano-mesa-total { color: var(--info); }
.plano-mesa.RESERVED { border-color: var(--premium); border-style: dashed; }
.plano-mesa.RESERVED .plano-mesa-estado { color: var(--premium); }
.dot.reserved { background: var(--premium); }
.dot.bill { background: var(--info); }

.mesa-tile.RESERVED {
  border-color: var(--premium);
  border-style: dashed;
}
.mesa-tile.RESERVED .mesa-status { color: var(--premium); }
.mesa-tile.DIRTY {
  background: repeating-linear-gradient(45deg, var(--bg-elev) 0 8px, var(--bg-soft) 8px 16px);
  border-color: var(--line);
}
.mesa-tile.DIRTY .mesa-status { color: var(--muted); }
.mesa-tile.BLOCKED {
  border-color: var(--danger);
  opacity: 0.6;
}
.mesa-tile.BLOCKED .mesa-status { color: var(--danger); }

/* Menú de estado de una mesa (clic derecho en el plano o en la lista) */
.mesa-menu {
  position: fixed;
  z-index: 60;
  min-width: 12rem;
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-elev);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.mesa-menu-head {
  margin: 0.15rem 0.5rem 0.35rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.mesa-menu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}
.mesa-menu button:hover { background: var(--bg-soft); }
.mesa-menu button.actual { font-weight: 600; }
.mesa-menu-check { margin-left: auto; color: var(--accent-ink); }

/* Autorización de supervisor: aparece sobre cualquier pantalla */
.auth-modal { max-width: 22rem; }
.auth-modal h3 {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
}
.auth-modal .muted { font-size: 0.85rem; margin: 0 0 0.9rem; }
.auth-modal-form { display: grid; gap: 0.6rem; }
.auth-modal .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

/* Motivo de una acción (anulación, descuento) */
.motivo-modal { max-width: 24rem; }
.motivo-modal h3 {
  margin: 0 0 0.7rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
}
.motivo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.8rem;
}
.motivo-form { display: grid; gap: 0.6rem; }
.motivo-modal .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* —— Permisos por rol —— */
.perm-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.perm-head h3 { margin: 0 0 0.2rem; font-family: var(--font-display); font-size: 1rem; }
.perm-head .muted { margin: 0; font-size: 0.8rem; max-width: 34rem; }
.perm-roles { display: flex; gap: 0.3rem; flex-wrap: wrap; }

.perm-matriz {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.75rem;
}
.perm-grupo {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0.7rem 0.8rem;
  background: var(--bg-elev);
}
.perm-grupo h4 {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.perm-fila {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  padding: 0.35rem 0;
  cursor: pointer;
  border-top: 1px solid var(--line);
}
.perm-grupo .perm-fila:first-of-type { border-top: 0; }
.perm-fila input { margin-top: 0.2rem; flex: 0 0 auto; }
.perm-texto { display: grid; gap: 0.1rem; }
.perm-texto strong { font-size: 0.84rem; font-weight: 600; }
.perm-texto em { font-style: normal; font-size: 0.74rem; color: var(--muted); }

.perm-sensible-tag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--warn-soft);
  color: var(--warn);
}

.perm-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0 0;
}
.perm-excepciones {
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.perm-excepciones h3 { margin: 0 0 0.2rem; font-family: var(--font-display); font-size: 1rem; }
.perm-excepciones .muted { font-size: 0.8rem; margin: 0 0 0.7rem; }
.perm-exc-lista { margin-top: 0.8rem; font-size: 0.85rem; }
.perm-exc-lista ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.perm-exc-lista li {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.perm-exc-si { color: var(--ok); font-weight: 600; }
.perm-exc-no { color: var(--danger); font-weight: 600; }

/* —— Devoluciones y notas de crédito —— */
.dev-modal {
  max-width: 44rem;
  width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dev-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}
.dev-head h3 { margin: 0 0 0.15rem; font-family: var(--font-display); font-size: 1.05rem; }
.dev-head .muted { margin: 0; font-size: 0.82rem; }
.dev-paso { overflow: auto; padding-top: 0.8rem; }

.dev-buscador { display: flex; gap: 0.5rem; margin-bottom: 0.7rem; }
.dev-buscador input { flex: 1; }

.dev-ventas { display: grid; gap: 0.35rem; max-height: 46vh; overflow: auto; }
.dev-venta {
  display: grid;
  grid-template-columns: 9rem 1fr auto auto;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-elev);
  color: var(--ink);
  text-align: left;
  font-size: 0.84rem;
  cursor: pointer;
}
.dev-venta:hover { border-color: var(--accent); background: var(--accent-soft); }
.dev-venta.saldada { opacity: 0.45; cursor: not-allowed; }
.dev-venta-num { font-weight: 600; font-family: var(--font-mono); font-size: 0.78rem; }
.dev-venta-fecha { font-size: 0.74rem; }
.dev-venta-total { font-weight: 600; }
.dev-venta-dev { font-size: 0.7rem; color: var(--warn); }

.dev-venta-info {
  display: grid;
  gap: 0.15rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-soft);
  margin-bottom: 0.8rem;
  font-size: 0.85rem;
}
.dev-venta-info .muted { font-size: 0.78rem; }

.dev-lineas { display: grid; gap: 0.35rem; margin-bottom: 0.9rem; }
.dev-linea {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.dev-linea.agotada { opacity: 0.5; }
.dev-linea-info { display: grid; gap: 0.1rem; font-size: 0.85rem; }
.dev-linea-info .muted { font-size: 0.74rem; }
.dev-linea-cant { display: flex; align-items: center; gap: 0.4rem; }
.dev-linea-cant [data-dev-valor] { min-width: 1.5rem; text-align: center; font-weight: 600; }

.dev-campos { margin-bottom: 0.6rem; }
.dev-check { display: grid; gap: 0.3rem; font-size: 0.82rem; }
.dev-check label { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }

.dev-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.dev-total { display: grid; gap: 0.1rem; }
.dev-total .muted { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; }
.dev-total strong { font-size: 1.4rem; font-family: var(--font-display); }
.dev-acciones { display: flex; gap: 0.5rem; }
tr.clickable { cursor: pointer; }
tr.clickable:hover { background: var(--bg-soft); }


/* ——————————————————————————————————————————————————————
   Registro por pasos: local, plan y administrador
   Todo en una sola columna obligaba a subir y bajar para
   comparar precios. Con el plan en su propio paso, la
   decisión se toma mirando sólo eso.
   —————————————————————————————————————————————————————— */
.ayb-pasos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  margin-bottom: 1.1rem;
}
.ayb-paso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem 0.3rem 0.55rem;
  border: 0;
  border-bottom: 2px solid var(--ayb-line);
  background: transparent;
  color: var(--ayb-muted);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.ayb-paso span {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 1px solid var(--ayb-line);
  font-size: 0.64rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ayb-paso:hover { color: var(--ayb-orange-2); }
.ayb-paso.activo {
  color: var(--ayb-text);
  border-bottom-color: var(--ayb-orange);
}
.ayb-paso.activo span {
  background: var(--ayb-orange);
  border-color: var(--ayb-orange);
  color: #1a1206;
}
.ayb-paso.hecho { color: var(--ayb-orange-2); border-bottom-color: rgba(255, 138, 42, 0.45); }
.ayb-paso.hecho span {
  background: rgba(255, 138, 42, 0.18);
  border-color: rgba(255, 138, 42, 0.5);
  color: var(--ayb-orange-2);
}

.ayb-panel-titulo {
  margin: 0 0 0.75rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ayb-text);
}
.ayb-opcional {
  font-style: normal;
  font-weight: 400;
  color: rgba(145, 160, 181, 0.7);
}

/* Mensual / anual, en la misma barra continua de las pestañas */
.ayb-planes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}
.ayb-planes-head .ayb-panel-titulo { margin: 0; }
.ayb-ciclo {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: #0a1524;
  border: 1px solid var(--ayb-line);
}
.ayb-ciclo-op input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ayb-ciclo-op span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ayb-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ayb-ciclo-op span em {
  font-style: normal;
  font-size: 0.62rem;
  color: #6fcf7b;
}
.ayb-ciclo-op input:checked + span {
  background: rgba(255, 138, 42, 0.16);
  color: var(--ayb-orange-2);
}
.ayb-ciclo-op input:focus-visible + span {
  box-shadow: 0 0 0 2px rgba(255, 138, 42, 0.45);
}

/* La tarjeta de plan: nombre y precio arriba, y debajo lo que incluye */
.ayb-planes { display: grid; gap: 0.6rem; }
.ayb-plan {
  position: relative;
  display: block;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--ayb-line);
  border-radius: 14px;
  background: #0a1524;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.ayb-plan:hover {
  border-color: rgba(255, 138, 42, 0.35);
  transform: translateY(-1px);
}
.ayb-plan input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ayb-plan.activo {
  border-color: rgba(255, 138, 42, 0.65);
  background: rgba(255, 138, 42, 0.07);
  box-shadow: 0 0 0 1px rgba(255, 138, 42, 0.25);
}
.ayb-plan input:focus-visible ~ .ayb-plan-top {
  outline: 2px solid rgba(255, 138, 42, 0.5);
  outline-offset: 4px;
  border-radius: 6px;
}

.ayb-plan-badge {
  position: absolute;
  top: -8px;
  right: 12px;
  font-style: normal;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: var(--ayb-orange);
  color: #1a1206;
}

.ayb-plan-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}
.ayb-plan-top > strong {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ayb-text);
}
.ayb-plan-precio {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  white-space: nowrap;
}
.ayb-plan-precio strong {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ayb-text);
  font-variant-numeric: tabular-nums;
}
.ayb-plan-precio em {
  font-style: normal;
  font-size: 0.66rem;
  color: var(--ayb-muted);
}
.ayb-plan.activo .ayb-plan-precio strong { color: var(--ayb-orange-2); }

.ayb-plan-desc {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.73rem;
  color: var(--ayb-muted);
}
.ayb-plan-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.85rem;
  margin-top: 0.55rem;
}
.ayb-plan-lista span {
  position: relative;
  padding-left: 0.85rem;
  font-size: 0.68rem;
  color: rgba(228, 236, 245, 0.72);
}
.ayb-plan-lista span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 138, 42, 0.55);
}

/* El tilde sólo aparece en el plan elegido */
.ayb-plan-check {
  position: absolute;
  right: 0.9rem;
  bottom: 0.8rem;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ayb-orange);
  color: #1a1206;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.15s, transform 0.15s;
}
.ayb-plan-check svg { width: 12px; height: 12px; }
.ayb-plan.activo .ayb-plan-check { opacity: 1; transform: scale(1); }

.ayb-field-hint {
  display: block;
  margin-top: 0.28rem;
  font-size: 0.67rem;
  line-height: 1.35;
  color: rgba(145, 160, 181, 0.75);
}
.ayb-field-hint strong { color: var(--ayb-orange-2); font-weight: 600; }
.ayb-planes-nota {
  margin: 0.8rem 0 0;
  font-size: 0.68rem;
  line-height: 1.4;
  text-align: center;
  color: rgba(145, 160, 181, 0.8);
}

/* Medidor de contraseña */
.ayb-fuerza {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  margin-top: 0.35rem;
}
.ayb-fuerza span {
  height: 3px;
  border-radius: 2px;
  background: rgba(145, 160, 181, 0.22);
  transition: background 0.15s;
}
.ayb-fuerza span.n1 { background: #e5484d; }
.ayb-fuerza span.n2 { background: #f5a524; }
.ayb-fuerza span.n3 { background: #ffb45c; }
.ayb-fuerza span.n4 { background: #6fcf7b; }

/* Lo que se va a contratar, antes de pulsar */
.ayb-resumen {
  margin-top: 1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--ayb-line);
  border-radius: 12px;
  background: #0a1524;
}
.ayb-resumen-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.22rem 0;
  font-size: 0.73rem;
  color: var(--ayb-muted);
}
.ayb-resumen-fila strong {
  color: var(--ayb-text);
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}
.ayb-resumen-total {
  margin-top: 0.35rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--ayb-line);
}
.ayb-resumen-total strong {
  font-size: 0.92rem;
  color: var(--ayb-orange-2);
  font-variant-numeric: tabular-nums;
}

/* Atrás y Siguiente, en la misma línea */
.ayb-signup-pie {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
}
.ayb-signup-pie .ayb-btn-login { margin-top: 0; flex: 1; }
.ayb-btn-atras {
  flex: 0 0 auto;
  padding: 0.78rem 0.9rem;
  border: 1px solid var(--ayb-line);
  border-radius: 12px;
  background: transparent;
  color: var(--ayb-muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.ayb-btn-atras:hover { color: var(--ayb-text); border-color: rgba(145, 160, 181, 0.45); }

/* Levantar una base tarda: mientras tanto el botón se ve ocupado */
.ayb-btn-login:disabled {
  opacity: 0.65;
  cursor: progress;
  transform: none;
  box-shadow: none;
}

@media (max-width: 420px) {
  .ayb-paso { font-size: 0.66rem; }
  .ayb-planes-head { flex-direction: column; align-items: flex-start; }
}

/* Lo que trae cada plan, con su tilde */
.ayb-plan-modulos {
  display: grid;
  gap: 0.12rem;
  margin-top: 0.5rem;
  padding-top: 0.45rem;
  border-top: 1px dashed var(--ayb-line);
}
.ayb-plan-modulos span {
  position: relative;
  padding-left: 1.05rem;
  font-size: 0.7rem;
  color: rgba(228, 236, 245, 0.82);
}
.ayb-plan-modulos span::before {
  content: '✓';
  position: absolute;
  left: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #6fcf7b;
}
.ayb-plan-modulos em {
  font-style: normal;
  font-size: 0.7rem;
  color: var(--ayb-muted);
}

/* ——————————————————————————————————————————————————————
   Cada botón del menú dice lo que hace
   El globo cuelga del documento y no del botón: el menú se
   desplaza, y lo que salga por el lado de un contenedor con
   scroll queda recortado —y encima le saca barra horizontal—.
   Tampoco se usa `title`: el navegador tarda casi un segundo
   y no deja darle forma.
   —————————————————————————————————————————————————————— */
.gp-leyenda {
  position: fixed;
  z-index: 200;
  max-width: 17rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-elev, #16202e);
  color: var(--text);
  font-size: 0.72rem;
  line-height: 1.35;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateX(-5px);
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.gp-leyenda.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .gp-leyenda { transition: none; }
}

/* ——————————————————————————————————————————————————————
   Los modales, con aire y con jerarquía
   `.field` no tenía margen: cada etiqueta quedaba pegada al campo
   de arriba y no se sabía a cuál pertenecía. De paso, el modal se
   desplazaba entero —cabecera incluida—; ahora sólo se mueve el
   cuerpo y los botones se quedan a la vista.
   —————————————————————————————————————————————————————— */
.modal-overlay {
  background: rgba(8, 20, 28, 0.5);
  backdrop-filter: blur(3px);
  padding: 1.25rem;
}

.modal {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.18);
  animation: gp-modal-entra 0.16s ease-out;
}

@keyframes gp-modal-entra {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* La cabecera y el pie se quedan; lo que se desplaza es el cuerpo */
.modal-head {
  flex: 0 0 auto;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem 1.25rem 0.95rem;
}
.modal-head h2 {
  font-size: 1.15rem;
  line-height: 1.25;
  margin: 0;
}
.modal-head .modal-sub {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--muted);
}

.modal-body {
  flex: 1 1 auto;
  /* Sin esto un hijo flexible no encoge por debajo de su contenido y el
     modal crece hasta salirse de la pantalla en vez de desplazarse. */
  min-height: 0;
  overflow-y: auto;
  padding: 0.25rem 1.25rem 1.25rem;
}

.modal-foot {
  flex: 0 0 auto;
  padding: 0.9rem 1.25rem;
  background: var(--bg-soft);
}
.modal-foot .btn { min-height: var(--toque, 44px); padding-left: 1.1rem; padding-right: 1.1rem; }

/* La equis, redonda y discreta hasta que se pasa por encima */
.modal-head .icon-btn {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
  transition: background 0.14s, color 0.14s;
}
.modal-head .icon-btn:hover {
  background: var(--bg-soft);
  color: var(--ink);
}

/* Cada campo con su aire, y la etiqueta pegada a SU campo */
.modal-body .field { margin-bottom: 0.95rem; }
.modal-body .field:last-child { margin-bottom: 0; }
.modal-body .field-grid { margin-bottom: 0.95rem; }
.modal-body .field-grid .field { margin-bottom: 0; }

.modal-body .field label {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.modal-body .field input,
.modal-body .field select,
.modal-body .field textarea {
  min-height: var(--toque, 44px);
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  background: var(--bg);
  transition: border-color 0.14s, box-shadow 0.14s;
}
.modal-body .field input::placeholder,
.modal-body .field textarea::placeholder { color: var(--muted); opacity: 0.7; }

/* Un aro y no un contorno: el contorno se sale de la caja y se come
   el espacio del campo de al lado */
.modal-body .field input:focus,
.modal-body .field select:focus,
.modal-body .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* El asterisco de obligatorio, sin gritar */
.modal-body .field label .req { color: var(--accent-ink); font-weight: 700; }

.modal-body .form-error { margin: 0.25rem 0 0; }

@media (max-width: 480px) {
  .modal-overlay { padding: 0.75rem; }
  .modal-head { padding: 1rem 1rem 0.8rem; }
  .modal-body { padding: 0.25rem 1rem 1rem; }
  .modal-foot { padding: 0.8rem 1rem; }
  .modal-foot .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .modal { animation: none; }
  .modal-overlay { backdrop-filter: none; }
}

/* ——————————————————————————————————————————————————————
   BackOffice de MSOFT
   No es la pantalla de un restaurante: es la casa mirando a
   sus clientes. Cada cliente es una fila ancha que se abre,
   no una celda apretada en una tabla.
   —————————————————————————————————————————————————————— */
.bo-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0.9rem 0;
}
.bo-buscar { flex: 1 1 16rem; min-width: 12rem; }
.bo-select {
  min-height: var(--toque, 44px);
  padding: 0 0.7rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
}
.bo-cuenta { margin-left: auto; font-size: 0.8rem; }

.bo-clientes { display: grid; gap: 0.5rem; }
.bo-cliente {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-elev);
  cursor: pointer;
  transition: border-color 0.14s, transform 0.14s;
}
.bo-cliente:hover,
.bo-cliente:focus-visible {
  border-color: var(--accent);
  transform: translateY(-1px);
  outline: none;
}
.bo-cliente > div { display: grid; gap: 0.1rem; min-width: 0; }
.bo-cliente span,
.bo-cliente strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-cliente-id strong { font-size: 0.95rem; }
.bo-codigo {
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  color: var(--muted);
}
.bo-plan-chip {
  justify-self: start;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 0.72rem;
  font-weight: 600;
}
.bo-abrir { color: var(--muted); font-size: 1.3rem; }

.bo-estado {
  justify-self: start;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
}
.bo-estado.active { background: var(--ok-soft); color: var(--ok); }
.bo-estado.trial { background: var(--info-soft, rgba(96, 165, 250, 0.16)); color: var(--info, #60a5fa); }
.bo-estado.suspended { background: var(--warn-soft); color: var(--warn); }
.bo-estado.cancelled { background: var(--danger-soft); color: var(--danger); }
.bo-trial { font-size: 0.68rem; color: var(--muted); }
.bo-trial.urge { color: var(--danger); font-weight: 600; }

/* Las pruebas que vencen esta semana, arriba del todo */
.bo-vencen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--warn);
  border-radius: 12px;
  background: var(--warn-soft);
  font-size: 0.82rem;
}
.bo-vence-chip {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--ink);
  font-size: 0.74rem;
  cursor: pointer;
}
.bo-vence-chip:hover { border-color: var(--accent); }

/* Ficha del cliente */
.bo-trial-fila { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.bo-trial-fila .bo-select { flex: 0 0 auto; }
.bo-ficha-datos {
  display: grid;
  gap: 0.35rem;
  margin-top: 1rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-soft);
}
.bo-ficha-datos > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.78rem;
}
.bo-ficha-datos span { color: var(--muted); }
.bo-ficha-datos strong { text-align: right; }

/* Planes */
.bo-planes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 0.85rem;
}
.bo-plan {
  padding: 0.95rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-elev);
}
.bo-plan.retirado { opacity: 0.72; }
.bo-plan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.bo-plan-head > div { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.bo-plan-head strong { font-size: 1rem; }
.bo-plan-precios,
.bo-plan-topes { margin-bottom: 0.75rem; }
.bo-plan-topes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bo-plan-modtitulo {
  margin: 0 0 0.4rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted);
}
.bo-plan-modulos {
  display: grid;
  gap: 0.1rem;
  margin-bottom: 0.85rem;
}
.bo-plan-modulos .adm-check { min-height: 32px; font-size: 0.78rem; }
.bo-plan-acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}
.bo-plan-acciones .adm-check { min-height: 32px; font-size: 0.76rem; }

/* Actividad */
.bo-avisos { display: grid; gap: 0.4rem; }
.bo-aviso {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-elev);
}
.bo-aviso p { margin: 0; font-size: 0.76rem; }
.bo-aviso-tipo {
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
}
.bo-aviso-tipo.registro { background: var(--ok-soft); color: var(--ok); }
.bo-aviso-tipo.cliente { background: var(--accent-soft); color: var(--accent-ink); }

/* ── Bandeja de solicitudes de alta ──────────────────────────────── */

/* Una solicitud esperando es trabajo sin hacer, no un aviso: el contador
   va en la pestaña para que se vea sin entrar a mirar. Naranja de estado,
   no verde de marca, que el verde aquí querría decir «ya está». */
.bo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.4rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--estado-ocupada);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
}

.bo-sol-zona { margin-bottom: 1.25rem; }
.bo-sol-zona:last-child { margin-bottom: 0; }

/* Las que no confirmaron su correo no son trabajo pendiente: se ven, porque
   el número dice si el correo está funcionando, pero no piden atención. De
   ahí que la zona vaya apagada y el contador en gris y no en naranja. */
.bo-sol-zona-tenue { opacity: 0.82; }
.bo-sol-zona-tenue:hover,
.bo-sol-zona-tenue:focus-within { opacity: 1; }
.bo-badge-tenue {
  background: var(--border-strong, #9aa0a6);
  color: var(--bg, #fff);
}

.bo-sol-titulo h3 {
  margin: 0;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
}
.bo-sol-titulo p {
  margin: 0.2rem 0 0.7rem;
  font-size: 0.76rem;
  max-width: 62ch;
}

.bo-sol-lista {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

.bo-sol {
  border: 1px solid var(--line);
  border-left: 3px solid var(--estado-ocupada);
  border-radius: 10px;
  background: var(--bg-elev);
  padding: 0.7rem 0.8rem;
  min-width: 0;
}
.bo-sol.es-error { border-left-color: var(--danger); }

/* Mientras se crea la base no se puede tocar nada de la tarjeta: son casi
   sesenta segundos y un segundo clic crearía el cliente dos veces. */
.bo-sol.ocupada { opacity: 0.6; pointer-events: none; }

/* Los botones arriba, junto al nombre: es lo que se viene a hacer aquí,
   y buscarlos al final de la ficha es una vuelta de más. */
.bo-sol-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.bo-sol-quien { min-width: 0; }
.bo-sol-quien h4 {
  margin: 0;
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}
.bo-sol-acciones {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}
.bo-sol-no { color: var(--danger); }

.bo-sol-falla {
  display: inline-block;
  margin-top: 0.2rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
}

.bo-sol-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.4rem 0.8rem;
  margin: 0;
}
.bo-sol-datos > div { min-width: 0; }
.bo-sol-datos dt {
  margin: 0;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.bo-sol-datos dd {
  margin: 0.1rem 0 0;
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

/* Un correo largo empujaba la tabla y obligaba a desplazarla de lado para
   leer una columna que casi nunca se mira. Se corta, y el completo se ve
   al posar el raton. */
.bo-sol-revisor {
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bo-sol-motivo {
  margin: 0.6rem 0 0;
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  color: var(--danger);
  font-size: 0.74rem;
  overflow-wrap: anywhere;
}

/* En un teléfono la tarjeta es una sola columna y los botones pasan a
   ocupar el ancho: se aprueba con el pulgar, no apuntando. */
@media (max-width: 560px) {
  .bo-sol-lista { grid-template-columns: minmax(0, 1fr); }
  .bo-sol-head { flex-direction: column; }
  .bo-sol-acciones { width: 100%; }
  .bo-sol-acciones .btn { flex: 1; min-height: var(--toque, 44px); }
}

@media (max-width: 900px) {
  .bo-cliente { grid-template-columns: minmax(0, 1fr) auto; }
  .bo-cliente-contacto,
  .bo-cliente-db { display: none; }
}
/* ── Integraciones: Brevo, SMTP y Ultramsg ───────────────────────── */

/* Un formulario no crece hasta donde llegue la pantalla.
   A 1600 px esto medía 1332 y repartía doce campos en cuatro columnas: para
   leer una etiqueta y su campo el ojo tenía que cruzar medio monitor. Se
   para donde se sigue leyendo cómodo y lo que sobra se queda en blanco, que
   no es espacio desperdiciado sino descanso. */
.bo-int-form {
  max-width: 76rem;
}

.bo-int-guardar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.bo-int-guardar .muted { font-size: 0.76rem; }

/* Correo y WhatsApp, uno al lado del otro. Antes eran tres bloques seguidos
   bajo un par de luces sueltas arriba, y había que emparejar de memoria «la
   segunda luz» con «el tercer bloque». */
.bo-int-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: 0.9rem;
  align-items: start;
}

.bo-int-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-elev);
  padding: 0.9rem 1rem 1rem;
  min-width: 0;
}

/* La luz, el nombre y el botón de probar, juntos y arriba: lo que dice si
   el correo sale está pegado a los campos del correo, no a media pantalla. */
.bo-int-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.7rem;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
}
.bo-int-card-head h3 { margin: 0; font-size: 0.95rem; }
.bo-int-card-head p { margin: 0.1rem 0 0; font-size: 0.76rem; }

.bo-int-luz {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.bo-int-luz.si { background: var(--ok); }
.bo-int-luz.no { background: var(--danger); }

/* Dos columnas como mucho dentro de cada tarjeta: es lo que se abarca de
   una mirada. */
.bo-int-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.6rem 0.9rem;
}
.bo-int-campos .field { min-width: 0; }
.bo-int-campos .field small {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.7rem;
  line-height: 1.35;
}

/* SMTP es la alternativa, no lo normal: plegado, para que quien use Brevo
   —que serán todos— no tenga que pasar por encima de cinco campos que no
   va a rellenar. */
.bo-int-alterna {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--line);
}
.bo-int-alterna > summary {
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  list-style: none;
}
.bo-int-alterna > summary::-webkit-details-marker { display: none; }
.bo-int-alterna > summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform 0.12s;
}
.bo-int-alterna[open] > summary::before { content: '▾ '; }
.bo-int-alterna > summary:hover { color: var(--accent-ink); }
.bo-int-alterna .bo-int-campos { margin-top: 0.7rem; }

.bo-int-para-que {
  margin: 0.9rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--line);
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--muted);
}

@media (max-width: 560px) {
  .bo-int-card-head { grid-template-columns: auto minmax(0, 1fr); }
  .bo-int-card-head .btn { grid-column: 1 / -1; min-height: var(--toque, 44px); }
  .bo-int-guardar .btn { flex: 1 1 100%; min-height: var(--toque, 44px); }
}

/* ── La familia en el maestro de productos ───────────────────────── */

.inv-familia {
  font-size: 0.78rem;
  color: var(--muted);
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Un producto sin familia no sale en ningún informe por grupo, así que no
   se deja pasar en silencio: se dice, sin gritar. */
.inv-sin-familia {
  font-style: italic;
  opacity: 0.75;
}


/* Soltar una mesa cancela su cuenta: no puede parecerse a «reservada». */
.mesa-menu-peligro { color: var(--danger); }
.mesa-menu-peligro:hover { background: var(--danger-soft); }


/* ── El tiempo prometido en el KDS ───────────────────────────────── */

.kds-tiempos {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

/* Lo que falta para la hora que se prometio. Va debajo del cronometro y
   mas pequeño: el cronometro dice cuanto lleva, esto dice si llega. */
.kds-promesa {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

/* Pasado de hora. El fondo, no solo el texto: en un pase se mira de lejos
   y de reojo, no se lee. */
.kds-promesa.tarde {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
}


/* Elegir de una lista siempre gana a teclear un identificador. */
.gp-dlg-campo select {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  font: inherit;
}


/* ── Las familias del maestro ────────────────────────────────────── */

/* Los productos sin familia son lo primero que hay que ver: no salen en
   ningun informe por grupo y nadie los echa de menos hasta que los busca. */
.fam-aviso[hidden] { display: none; }
.fam-aviso {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.9rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: 10px;
  background: var(--warn-soft);
  font-size: 0.82rem;
}

/* La jerarquia se lee por la sangria, no por un icono: una hija va debajo
   de su madre y un poco dentro, como en cualquier lista de la vida. */
.fam-madre { font-weight: 600; }
.fam-hija { padding-left: 1.4rem; }
.fam-hija::before {
  content: '└ ';
  color: var(--muted);
}

.fam-codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.76rem;
  color: var(--muted);
}

.fam-row { cursor: pointer; }
.fam-off { opacity: 0.55; }
.fam-inactiva {
  font-size: 0.68rem;
  font-style: italic;
  color: var(--muted);
}

.fam-abc {
  display: inline-block;
  width: 1.3rem;
  text-align: center;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
}
.fam-abc.abc-A { background: var(--danger-soft); color: var(--danger); }
.fam-abc.abc-B { background: var(--warn-soft); color: var(--warn); }
.fam-abc.abc-C { background: var(--ok-soft); color: var(--ok); }

.fam-acciones {
  display: flex;
  gap: 0.3rem;
  justify-content: flex-end;
  white-space: nowrap;
}
/* Un boton apagado aqui no es un fallo: es que esa familia tiene cosas
   dentro. El title lo explica al posar el raton. */
.fam-acciones .btn:disabled { opacity: 0.35; }
.fam-borrar:not(:disabled) { color: var(--danger); }

@media (max-width: 640px) {
  .fam-acciones { flex-direction: column; }
  .fam-acciones .btn { width: 100%; }
}