/* ============================================================================
   RESTOADMIN — App skin (capa de adaptación visual)
   Sobreescribe el estilo "café" hardcodeado de components.css y lo lleva al
   lenguaje cálido editorial: carbón cálido, borde fino (hairline), salvia con mesura,
   cifras monoespaciadas. SOLO cosmético — no toca estructura ni lógica.
   Cargar DESPUÉS de components/main/web para ganar la cascada.
   ============================================================================ */

:root{
  --ra-canvas: var(--bg-canvas, #14120E);
  --ra-surf:   var(--bg-surface, #1C1A14);
  --ra-line:   var(--border-dim, #35312A);
  --ra-gold:   var(--accent, #AEB98C);
  --ra-ink:    var(--txt-main, #ECE6D9);
  --ra-dim:    var(--txt-dim, #A39A89);
  --ra-mono: "Space Mono", ui-monospace, "JetBrains Mono", monospace;
}

/* 1) APAGAR resplandores/gradientes de café (pseudo-elementos decorativos) */
.tech-card::before,.tech-card::after,
.fx-card::before,.fx-card::after,
.recipe-card::before,.recipe-card::after,
.brew-recipe-card::before,.brew-recipe-card::after,
.method-card::before,.method-card::after,
.foundation-card::before,.foundation-card::after,
.foundation-topic-card::before,.foundation-topic-card::after{
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* 2) TARJETAS — navy plano, hairline, sin sombras pesadas */
.tech-card,.fx-card,.recipe-card,.method-card,.brew-recipe-card,
.foundation-card,.foundation-topic-card{
  background: var(--ra-surf) !important;
  border: 1px solid var(--ra-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.tech-card:hover,.fx-card:hover,.recipe-card:hover,.method-card:hover,
.brew-recipe-card:hover,.foundation-card:hover{
  box-shadow: none !important;
  border-color: rgba(174,185,140,.32) !important;
}

/* 3) INPUTS / SELECT / TEXTAREA */
.inp,
.inp:is(input,select,textarea),
input.inp, select.inp, textarea.inp{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--ra-line) !important;
  border-radius: 10px !important;
  color: var(--ra-ink) !important;
}
.inp:focus{
  border-color: rgba(174,185,140,.55) !important;
  box-shadow: 0 0 0 3px rgba(174,185,140,.12) !important;
}
.inp::placeholder{ color: var(--ra-dim) !important; }

/* 4) BOTONES */
.btn-arch{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--ra-line) !important;
  color: var(--ra-ink) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
}
.btn-arch:hover{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(174,185,140,.40) !important;
}
.btn-arch.primary,.btn-arch.is-primary,.primary.btn-arch,
button.primary,.btn-primary{
  background: var(--ra-gold) !important;
  border-color: var(--ra-gold) !important;
  color: #1a1a14 !important;
  text-shadow: none !important;
}
.btn-arch.primary:hover,.primary.btn-arch:hover,button.primary:hover,.btn-primary:hover{
  filter: brightness(1.06) !important;
}
.btn-mini{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--ra-line) !important;
  color: var(--ra-ink) !important;
  border-radius: 8px !important;
}

/* 5) PILLS / CHIPS */
.pill{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--ra-line) !important;
  color: var(--ra-dim) !important;
  border-radius: 999px !important;
}
.pill.active,.pill.is-active,.pill[aria-selected="true"],.pill.selected{
  background: rgba(174,185,140,.12) !important;
  border-color: rgba(174,185,140,.42) !important;
  color: var(--ra-gold) !important;
}

/* 6) CIFRAS Y ETIQUETAS DE DATOS — mono tabular + eyebrow */
.data-val{
  font-family: var(--ra-mono) !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--ra-ink) !important;
  letter-spacing: -.01em !important;
}
.data-label{
  font-family: var(--ra-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  color: var(--ra-dim) !important;
  font-size: .62rem !important;
}
.data-cell{ border-color: var(--ra-line) !important; }

/* 7) TABLAS SOP (pasos de receta / escandallo) */
.sop-th{
  color: var(--ra-dim) !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  border-bottom: 1px solid var(--ra-line) !important;
  font-size: .64rem !important;
}
.sop-td{ border-bottom: 1px solid var(--ra-line) !important; color: var(--ra-ink) !important; }
.sop-tabbtn{ border-radius: 8px !important; }

/* 8) FOOD-OPS (bloques de operación de Recetas) */
.food-ops-block{
  background: var(--ra-surf) !important;
  border: 1px solid var(--ra-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.food-ops-h,.fx-h{ color: var(--ra-ink) !important; }

/* 9) PANTRY */
.pantry-lbl{
  font-family: var(--ra-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  color: var(--ra-dim) !important;
  font-size: .64rem !important;
}

/* 10) TEXTO TENUE / AVISOS */
.muted{ color: var(--ra-dim) !important; }
.warn{ color: var(--ra-gold) !important; }

/* 11) ACENTOS DE MARCA: el oro reemplaza al tan-café donde el tema lo usa */
::selection{ background: rgba(174,185,140,.28); }

/* 12) HERO de sección profesional (Platillos y otros) */
.ra-hero{
  background: var(--ra-surf) !important;
  border: 1px solid var(--ra-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  padding: 18px !important;
  margin-bottom: 14px !important;
}
.ra-hero-eyebrow{
  font-family: var(--ra-mono);
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ra-dim); margin-bottom: 10px;
}
.ra-hero .food-title,.ra-hero h2{
  font-size: 1.5rem !important; font-weight: 800 !important;
  letter-spacing: -.02em !important; color: var(--ra-ink) !important; margin: 0 !important;
}
.ra-hero .food-subtitle{ color: var(--ra-dim) !important; margin-top: 6px !important; }

/* 13) Apagar foto/glow de café en TODOS los heroes de sección */
.business-hero-shell::before,.food-hero-shell::before,
.settings-hero::before,.pantry-hero::before{ background: none !important; }
.business-hero-shell,.settings-hero,.pantry-hero{
  background: var(--ra-surf) !important;
  border: 1px solid var(--ra-line) !important;
  box-shadow: none !important;
}

/* 14) Configurar mis platillos — manager de secciones */
.ra-config .ra-sec-row{ display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center; }
.ra-config .ra-sec-del{ color:#D8775F !important; border-color:rgba(216,119,95,.35) !important; }
.ra-config .ra-sec-del:hover{ background:rgba(216,119,95,.12) !important; border-color:rgba(216,119,95,.5) !important; }
.ra-config .ra-sec-name{ font-weight:600 !important; }

/* 15) Editor de platillo — menos plano, jerarquía clara */
#myfood-rows .inp, .pantry-form-grid .inp{ background:rgba(255,255,255,.025) !important; }
.fx-h{ font-size:.95rem !important; font-weight:800 !important; letter-spacing:.01em !important; }


/* ===== Rediseño editorial: serif + heroes premium ===== */
.ra-hero .food-title,.ra-hero h2,.food-title,.drinks-hero-title{
  font-family: var(--font-display, Georgia, serif) !important;
  font-weight: 600 !important; letter-spacing: -.01em !important;
}
.ra-hero,.business-hero-shell,.pantry-hero,.settings-hero,.food-hero-shell{
  background: linear-gradient(135deg, var(--bg-highlight,#24211A) 0%, var(--bg-surface,#1C1A14) 100%) !important;
  border: 1px solid var(--border-dim,#35312A) !important;
  box-shadow: none !important;
}
.ra-hero-eyebrow{ color: var(--accent,#AEB98C) !important; opacity:.9; }

/* ===== Heroes con fotografía aprobada (overlay para legibilidad) ===== */
.ra-hero.hero-platillos,.ra-hero.hero-bebidas,.business-hero-shell,.pantry-hero,.rh-hero{
  position:relative; overflow:hidden;
  background-size:cover !important; background-position:center !important;
  border:1px solid var(--border-dim,#35312A) !important; box-shadow:none !important;
}
.ra-hero.hero-platillos,.ra-hero.hero-bebidas,.business-hero-shell,.pantry-hero{ min-height:152px; }
.ra-hero.hero-platillos{ background-image:linear-gradient(100deg, rgba(20,18,14,.94) 0%, rgba(20,18,14,.6) 52%, rgba(20,18,14,.22) 100%), url(../img/hero/sections/platillos.jpg) !important; }
.ra-hero.hero-bebidas{ background-image:linear-gradient(100deg, rgba(20,18,14,.94) 0%, rgba(20,18,14,.6) 52%, rgba(20,18,14,.22) 100%), url(../img/hero/sections/bebidas.jpg) !important; }
.business-hero-shell,.pantry-hero{ background-image:linear-gradient(100deg, rgba(20,18,14,.94) 0%, rgba(20,18,14,.64) 55%, rgba(20,18,14,.32) 100%), url(../img/hero/sections/ambiance.jpg) !important; }
.business-hero-shell::before,.pantry-hero::before{ background:none !important; }
.rh-hero{
  border-radius:18px; padding:22px 20px 18px; margin-bottom:4px; min-height:176px;
  background-image:
    linear-gradient(180deg, rgba(11,8,5,.16) 0%, rgba(11,8,5,.5) 46%, rgba(11,8,5,.9) 100%),
    linear-gradient(115deg, rgba(11,8,5,.55) 0%, rgba(11,8,5,.15) 60%),
    url(../img/hero/sections/ambiance.jpg) !important;
}

/* ===== Alacena (Pantry) hero editorial ===== */
.pantry-hero{ border-radius:16px; padding:22px 20px; display:flex; flex-direction:column; justify-content:center; gap:3px; }
.pantry-hero .ra-hero-eyebrow{ margin-bottom:2px; }
.pantry-hero-title{ font-family:var(--font-display,'Fraunces',Georgia,serif); font-size:30px; line-height:1.05; color:var(--txt-main); letter-spacing:.2px; margin:0; }
.pantry-hero-sub{ color:var(--txt-dim); font-size:13px; max-width:32ch; }
/* marca de categoría (SVG) hereda color crema/salvia */
.pantry-cat-media svg{ width:1em; height:1em; }
.pantry-cat-media{ color:var(--accent,#AEB98C); }

/* ===== Marcas SVG de categorías de Platillos (sin fotos viejas, sin emojis) ===== */
.food-chip-mark, .food-cat-mark{ color:var(--accent,#AEB98C); display:inline-flex; align-items:center; justify-content:center; }
.food-chip-mark svg{ width:18px; height:18px; }
.food-cat-mark svg{ width:30px; height:30px; }
.food-chip-mark img, .food-cat-mark img{ display:none; }
.chip.active .food-chip-mark{ color:var(--txt-main,#ECE6D9); }

/* ===== Hub de Gestión (lanzador de módulos) ===== */
.gestion-grid{ display:grid; gap:10px; }
.gestion-tile{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:15px 16px; border-radius:16px; background:var(--bg-surface,#1C1A14); border:1px solid var(--border-dim,#35312A); color:var(--txt-main,#ECE6D9); cursor:pointer; transition:border-color .15s ease, transform .05s ease; }
.gestion-tile:active{ transform:scale(.995); }
.gestion-tile:hover{ border-color:var(--accent,#AEB98C); }
.gestion-tile-ic{ flex:0 0 auto; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--bg-highlight,#24211A); color:var(--accent,#AEB98C); font-size:18px; border:1px solid var(--border-dim,#35312A); }
.gestion-tile-tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.gestion-tile-t{ font-weight:800; font-size:1rem; font-family:var(--font-display,'Fraunces',Georgia,serif); }
.gestion-tile-s{ color:var(--txt-dim,#A39A89); font-size:.8rem; }
.gestion-tile-go{ flex:0 0 auto; color:var(--txt-dim,#A39A89); font-size:.85rem; }

/* ===== Módulo Cocina: sub-pestañas Platillos/Bebidas/Alacena ===== */
.cocina-subtabs{ display:flex; gap:8px; margin-bottom:12px; }
.cocina-subtab{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:11px 10px; border-radius:12px; background:var(--bg-surface,#1C1A14); border:1px solid var(--border-dim,#35312A); color:var(--txt-dim,#A39A89); font-weight:700; font-size:.9rem; cursor:pointer; -webkit-appearance:none; appearance:none; text-decoration:none; -webkit-tap-highlight-color:transparent; font-family:inherit; line-height:1.2; margin:0; transition:color .15s ease, background .15s ease, border-color .15s ease; }
.cocina-subtab i{ font-size:.95rem; }
.cocina-subtab.active{ background:var(--bg-highlight,#24211A); color:var(--txt-main,#ECE6D9); border-color:var(--accent,#AEB98C); }
.cocina-subtab:hover{ color:var(--txt-main,#ECE6D9); }
#cocina-body > .view{ animation:none; }

/* ===== Encabezado editorial de módulos (CRM, Caja, Comandas, Negocio, etc.) ===== */
.business-hero-img{ position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--border-dim,#35312A); min-height:142px; box-shadow:none; }
.business-hero-img img{ width:100%; height:100%; min-height:142px; object-fit:cover; display:block; }
.business-hero-img-content{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:20px 22px; background:linear-gradient(100deg, rgba(20,18,14,.93) 0%, rgba(20,18,14,.58) 55%, rgba(20,18,14,.22) 100%); }
.business-hero-img-content .ra-hero-eyebrow{ color:var(--accent,#AEB98C); }
.business-hero-img-title{ font-family:var(--font-display,'Fraunces',Georgia,serif); font-size:1.95rem; font-weight:600; color:var(--txt-main,#ECE6D9); margin:2px 0 5px; line-height:1; letter-spacing:.2px; }
.business-hero-img-sub{ color:var(--txt-dim,#A39A89); font-size:.82rem; line-height:1.4; }

/* ===== Personal y Propinas ===== */
.staff-row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--border-dim,#35312A); }
.staff-row:first-child{ border-top:0; padding-top:2px; }
.staff-info{ flex:1; min-width:0; }
.staff-name{ font-weight:700; color:var(--txt-main,#ECE6D9); }
.staff-meta{ color:var(--txt-dim,#A39A89); font-size:.82rem; margin-top:2px; }

/* ===== Mapa de mesas (floor plan) ===== */
.mz-canvas{ position:relative; width:100%; height:56vh; min-height:320px; border:1px solid var(--border-dim,#35312A); border-radius:18px; overflow:hidden;
  background-color:var(--bg-surface,#1C1A14);
  background-image:linear-gradient(var(--border-dim,#35312A) 1px, transparent 1px), linear-gradient(90deg, var(--border-dim,#35312A) 1px, transparent 1px);
  background-size:30px 30px, 30px 30px; }
.mz-table{ position:absolute; transform:translate(-50%,-50%); width:62px; height:62px; border-radius:14px; background:var(--bg-highlight,#24211A); border:1.5px solid var(--accent,#AEB98C); display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:grab; user-select:none; -webkit-user-select:none; touch-action:none; box-shadow:0 4px 14px rgba(0,0,0,.35); transition:box-shadow .12s ease, border-color .12s ease; }
.mz-table.dragging{ cursor:grabbing; border-color:var(--txt-main,#ECE6D9); box-shadow:0 9px 24px rgba(0,0,0,.55); z-index:6; }
.mz-table-label{ font-weight:900; font-size:1.02rem; color:var(--txt-main,#ECE6D9); line-height:1; }
.mz-table-seats{ font-size:.64rem; color:var(--txt-dim,#A39A89); margin-top:2px; }
.mz-table-mesero{ font-size:.6rem; color:var(--accent,#AEB98C); margin-top:2px; max-width:54px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ============================================================================
   MODERNIZACIÓN VISUAL — microinteracciones, animaciones y pulido (v1.48)
   Capa ADITIVA: transiciones suaves, feedback al tocar y entradas animadas.
   No cambia la paleta editorial; la hace sentir más viva, fluida y moderna.
   ============================================================================ */

/* App feel: sin destello azul al tocar, scroll con inercia en iOS */
*{ -webkit-tap-highlight-color: transparent; }
html, body{ -webkit-overflow-scrolling: touch; }

/* Scrollbars discretas (desktop) */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:rgba(174,185,140,.20); border-radius:999px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(174,185,140,.34); background-clip:padding-box; }
*::-webkit-scrollbar-track{ background:transparent; }

/* Transiciones suaves en todo lo interactivo */
.btn-arch,.btn-mini,button.primary,.btn-primary,.chip,.pill,.tech-card,.fx-card,
.cocina-subtab,.gestion-tile,.mz-table,.staff-row,
.inp,.inp:is(input,select,textarea){
  transition: background-color .16s ease, border-color .16s ease, color .16s ease,
              box-shadow .18s ease, transform .08s ease, filter .16s ease !important;
}

/* Feedback al tocar (presión física) */
.btn-arch:active,.btn-mini:active,button.primary:active,.btn-primary:active,
.chip:active,.pill:active,.cocina-subtab:active,.gestion-tile:active{
  transform: scale(.972) !important;
}

/* Botón primario: degradado sutil + sombra de color (más moderno y con cuerpo) */
.btn-arch.primary,.btn-arch.is-primary,.primary.btn-arch,button.primary,.btn-primary{
  background: linear-gradient(180deg, #BFC9A0 0%, #AEB98C 100%) !important;
  box-shadow: 0 6px 16px -7px rgba(174,185,140,.55) !important;
}
.btn-arch.primary:hover,.primary.btn-arch:hover,button.primary:hover,.btn-primary:hover{
  filter: brightness(1.05) !important;
  box-shadow: 0 8px 20px -8px rgba(174,185,140,.6) !important;
}
.btn-arch.primary:active,.primary.btn-arch:active,button.primary:active,.btn-primary:active{
  box-shadow: 0 3px 9px -6px rgba(174,185,140,.55) !important;
}

/* Tarjetas y tiles: levitación sutil al pasar el cursor (desktop) */
@media (hover:hover){
  .tech-card:hover,.gestion-tile:hover{ transform: translateY(-1px); }
  .chip:hover,.pill:hover{ filter: brightness(1.08); }
}

/* ── Animaciones de entrada ── */
@keyframes ra-fade-up{ from{ opacity:0; transform:translateY(9px); } to{ opacity:1; transform:none; } }
@keyframes ra-pop{ from{ opacity:0; transform:scale(.965); } to{ opacity:1; transform:none; } }
@keyframes ra-toast-in{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* Vistas con clase fade-in entran suaves (las sub-vistas de Cocina quedan exentas por su regla #id) */
.view.fade-in,.fade-in{ animation: ra-fade-up .28s cubic-bezier(.22,.61,.36,1) both; }

/* Modales: entrada con escala */
.biz-modal-card{ animation: ra-pop .2s cubic-bezier(.22,.61,.36,1) both; }

/* Toasts un poco más vivos (UXEngine) */
.ux-toast,.toast,[class*="toast"]{ animation: ra-toast-in .22s ease both; }

/* Foco accesible y consistente en inputs */
.inp:focus,.inp:is(input,select,textarea):focus{
  outline: none !important;
  border-color: rgba(174,185,140,.6) !important;
  box-shadow: 0 0 0 3px rgba(174,185,140,.14) !important;
}

/* Respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* Selector de persona en split por ítem (hoja de cobro) */
.chg-asg{ background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.22); border-radius:8px; color:var(--txt,#ECE6D9); padding:3px 6px; margin-left:8px; font-weight:700; font-size:.82rem; -webkit-appearance:none; appearance:none; }
.chg-asg:focus{ outline:none; border-color:var(--accent,#AEB98C); }

/* ============================================================================
   SKIN v1.1 — modales como escenario, focos accesibles y detalle fino
   ============================================================================ */
.modal-overlay{
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  background: rgba(8,7,5,0.55) !important;
  animation: ra-fade-up 0.16s ease-out;
}
.modal-card{
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.7), 0 1px 0 rgba(255,255,255,0.06) inset;
  animation: ra-pop 0.22s cubic-bezier(0.22,1,0.36,1);
}
:focus-visible{ outline: 2px solid var(--accent,#AEB98C); outline-offset: 2px; border-radius: 4px; }
::selection{ background: color-mix(in srgb, var(--accent,#AEB98C) 35%, transparent); }
.chip.active{ box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent,#AEB98C) 16%, transparent); }
b, strong{ font-variant-numeric: tabular-nums; }
*{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.16) transparent; }
*::-webkit-scrollbar{ width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.13); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover{ background-color: rgba(255,255,255,0.25); }
@media (prefers-reduced-motion: reduce){
  .modal-overlay, .modal-card{ animation: none; }
}

/* ============================================================================
   SKIN v1.2 — composición y jerarquía por pantalla
   ============================================================================ */
/* Héroes de sección: título editorial con aire */
.ra-hero-eyebrow{ letter-spacing: 0.14em !important; opacity: 0.7; }
.ra-hero-title, h1{ font-family: 'Fraunces', Georgia, serif !important; letter-spacing: -0.02em; }

/* Tiles de gestión: invitación al tap, no lista gris */
.gestion-tile{
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0) 46%);
  transition: transform 0.16s cubic-bezier(0.22,1,0.36,1), border-color 0.2s ease, box-shadow 0.2s ease;
}
.gestion-tile:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent,#AEB98C) 45%, transparent) !important;
  box-shadow: 0 14px 30px -16px rgba(0,0,0,0.55);
}
.gestion-tile i, .gestion-tile .fa-solid{ color: var(--accent,#AEB98C); }

/* Cocina (KDS): las comandas son lo más importante del turno */
.cocina-subtab.active{ box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent,#AEB98C) 16%, transparent); }

/* Ritmo vertical consistente entre tarjetas */
.tech-card + .tech-card{ margin-top: 12px; }

/* Estados vacíos: centrados y con voz, no un hueco */
.muted:empty{ display: none; }

/* ============================================================================
   SKIN v1.3 — pantallas operativas: Venta rápida y Mapa de mesas
   ============================================================================ */
/* Venta rápida: los productos son teclas de piano — grandes, con respuesta */
.qs-prod-btn{
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 55%);
  transition: transform 0.1s cubic-bezier(0.22,1,0.36,1), border-color 0.15s ease;
}
.qs-prod-btn:active{ transform: scale(0.96); border-color: var(--accent,#AEB98C) !important; }
.qs-products{ gap: 10px !important; }
/* El carrito respira y el total manda */
.qs-cart{ border-radius: 16px; }

/* ============================================================================
   SKIN v1.4 — Mapa de mesas + estados vacíos con diseño
   ============================================================================ */
/* Las mesas son objetos físicos: sombra, respuesta al tacto, selección clara */
.tbl{
  transition: transform 0.12s cubic-bezier(0.22,1,0.36,1), box-shadow 0.18s ease, filter 0.18s ease;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,0.5);
}
.tbl:active{ transform: scale(0.96); }
.tbl.selected{
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent,#AEB98C) 65%, transparent), 0 10px 24px -10px rgba(0,0,0,0.6);
  filter: brightness(1.06);
}
/* Zonas: la activa se siente elegida */
.ztab{ transition: all 0.16s ease; border-radius: 11px; }
.ztab.on{ box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent,#AEB98C) 45%, transparent) inset; font-weight: 900; }
.ztab.add{ opacity: 0.75; }
.ztab.add:hover{ opacity: 1; }
/* Estado de mesa en la hoja: el seleccionado no deja duda */
.statebtn{ transition: all 0.15s ease; border-radius: 11px; }
.statebtn.sel{ box-shadow: 0 0 0 2px currentColor inset; font-weight: 900; }
/* El piso tiene profundidad de plano, no de tabla plana */
.board{ box-shadow: inset 0 0 60px rgba(0,0,0,0.28), 0 14px 34px -18px rgba(0,0,0,0.55); border-radius: 14px; }

/* Estados vacíos: intencionales, centrados, con voz */
.empty{
  text-align: center;
  padding: 34px 18px !important;
  color: var(--txt-dim, #A39A89);
  line-height: 1.55;
}
.empty h1, .empty b{ font-family: 'Fraunces', Georgia, serif; color: var(--txt-main, #ECE6D9); }


/* ============================================================================
   SKIN v1.5 — splash de login y materiales reales del piso (Higgsfield)
   ============================================================================ */
#auth-screen{
  background-image: linear-gradient(180deg, rgba(12,10,8,0.82), rgba(12,10,8,0.68) 40%, rgba(12,10,8,0.9)), url('https://d8j0ntlcm91z4.cloudfront.net/user_3Eu8Tqpstt4v7wBG9ELdFnmw6eG/hf_20260703_045723_4bfea404-e254-4e31-9d2f-78dcd92f0068.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.board.mat-wood, .board.mat-duela{
  background-image: linear-gradient(rgba(0,0,0,0.32), rgba(0,0,0,0.42)), url('https://d8j0ntlcm91z4.cloudfront.net/user_3Eu8Tqpstt4v7wBG9ELdFnmw6eG/hf_20260703_130039_a189af3c-7a8c-4a5b-8073-0a729943f36f.png') !important;
  background-size: cover !important; background-position: center !important;
}
.board.mat-tile, .board.mat-barro{
  background-image: linear-gradient(rgba(0,0,0,0.34), rgba(0,0,0,0.46)), url('https://d8j0ntlcm91z4.cloudfront.net/user_3Eu8Tqpstt4v7wBG9ELdFnmw6eG/hf_20260703_130046_4b56380b-eb07-4579-b4f4-f3ab6e60fd4e.png') !important;
  background-size: cover !important; background-position: center !important;
}

/* Checklist de configuración: colapsable y sobrio (v1.90.3) */
.rh-setup-wrap summary::-webkit-details-marker { display:none; }
.rh-setup-wrap[open] .rh-setup-caret { transform: rotate(180deg); }
.rh-setup-wrap summary:hover { background: rgba(255,255,255,0.045) !important; }