/* ============================================================
   RestoAdmin — Capa de pulido visual (Issue 9)
   Aditiva: se carga AL FINAL. Solo transiciones, feedback táctil,
   microinteracciones y elevación. Sin cambios de estructura ni lógica.
   Respeta tokens existentes (--accent, --txt-main, etc.) y reduced-motion.
   ============================================================ */

/* — Sensación nativa: sin flash azul al tocar, sin delay de 300ms — */
a, button, .btn-arch, .chip, [role="button"], .gestion-tile, .cocina-subtab,
.md-tpl, .mod-opt, summary, label.biz-field, .ra-tile, .biz-tab, input[type="checkbox"], select {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* — Scroll con inercia en superficies desplazables — */
.modal-card, .biz-modal-body, .biz-modal, .modal-overlay {
  -webkit-overflow-scrolling: touch;
}

/* — Feedback táctil: hundir al presionar (iOS-native) — */
@media (prefers-reduced-motion: no-preference) {
  .btn-arch, button.primary, .btn-primary, .chip, .gestion-tile, .cocina-subtab,
  .md-tpl, .mod-opt, .mod-group .mod-opt, .ra-tile, .biz-tab, .pill {
    transition: transform .08s ease, border-color .16s ease, background-color .16s ease, box-shadow .18s ease, color .16s ease;
  }
  .btn-arch:active, button.primary:active, .btn-primary:active, .chip:active,
  .gestion-tile:active, .cocina-subtab:active, .md-tpl:active, .mod-opt:active,
  .ra-tile:active, .pill:active {
    transform: scale(.972);
  }
  .btn-arch.primary:active, button.primary:active, .btn-primary:active {
    transform: scale(.972) translateY(1px);
  }
}

/* — Accesibilidad: anillo de foco visible y consistente — */
.btn-arch:focus-visible, button:focus-visible, .chip:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent, #AEB98C);
  outline-offset: 2px;
  border-radius: 10px;
}

/* — Jerarquía / elevación sutil en tarjetas (solo con mouse) — */
.tech-card, .fx-card, .gestion-tile {
  transition: box-shadow .2s ease, border-color .16s ease, transform .06s ease;
}
@media (hover: hover) and (pointer: fine) {
  .tech-card:hover, .fx-card:hover { box-shadow: 0 12px 34px rgba(0,0,0,.30); }
  .gestion-tile:hover { box-shadow: 0 8px 22px rgba(0,0,0,.26); }
}

/* — Entrada de modales: fade + deslizar la hoja (bottom-sheet) — */
@media (prefers-reduced-motion: no-preference) {
  .modal-overlay { animation: ra-fade .18s ease both; }
  .modal-overlay > .modal-card,
  .modal-overlay .modal-card { animation: ra-sheet .28s cubic-bezier(.22,.61,.36,1) both; }
  .biz-modal[style*="flex"] .biz-modal-card,
  .biz-modal .biz-modal-card { animation: ra-sheet .28s cubic-bezier(.22,.61,.36,1) both; }
}
@keyframes ra-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ra-sheet {
  from { opacity: 0; transform: translateY(16px) scale(.992); }
  to   { opacity: 1; transform: none; }
}

/* — Chips activos: un poco más de presencia — */
.chip.active { box-shadow: 0 2px 10px rgba(174,185,140,.16); }

/* — Inputs: transición suave al enfocar — */
input, select, textarea {
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

/* — Galería de plantillas del diseñador: realce al elegir — */
.md-tpl { transition: transform .08s ease, border-color .16s ease, box-shadow .18s ease; }
.md-tpl:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .md-tpl:hover { box-shadow: 0 8px 20px rgba(0,0,0,.4); }
}

/* — KDS / comandas: latido suave en lo que requiere atención (si la app lo marca) — */
@media (prefers-reduced-motion: no-preference) {
  .kds-urgent, .comanda-urgent, [data-urgent="1"] {
    animation: ra-pulse 1.8s ease-in-out infinite;
  }
}
@keyframes ra-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(216,84,62,.0); }
  50%      { box-shadow: 0 0 0 3px rgba(216,84,62,.28); }
}

/* — Mapa de mesas: transición suave de estado (sin tocar el drag) — */
.mz-table:not(.dragging) {
  transition: box-shadow .14s ease, border-color .16s ease, background-color .2s ease;
}

/* — Botones deshabilitados: lectura clara — */
.btn-arch[disabled], button[disabled] { cursor: not-allowed; }

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

/* ============================================================
   REFINAMIENTO VISUAL v2 (v1.90.12)
   Objetivo: bajar la sensación "muy IA" — menos acento repetido,
   más profundidad de fondo sutil, mejor jerarquía. Sin tocar lógica.
   ============================================================ */

/* — Profundidad de fondo: gradiente cálido muy sutil en el lienzo,
     en vez de un negro plano uniforme (da sensación de ambiente). — */
body {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(174,185,140,0.045), transparent 60%),
    radial-gradient(90% 60% at 100% 0%, rgba(200,121,107,0.03), transparent 55%),
    var(--bg-canvas, #14120E) !important;
}
/* El gradiente vive en un pseudo-fijo detrás del viewport (sin jank de scroll en iOS). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(174,185,140,0.05), transparent 60%),
    radial-gradient(90% 60% at 100% 0%, rgba(200,121,107,0.035), transparent 55%);
}

/* — Tarjetas con más profundidad y menos borde chillón:
     fondo elevado sutil + sombra suave, borde apenas visible. — */
.tech-card, .fx-card, .rh-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0.006)),
    var(--bg-surface, #1C1A14) !important;
  border: 1px solid rgba(255,255,255,0.055) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 8px 24px -16px rgba(0,0,0,0.5) !important;
}

/* — Encabezados de sección: menos acento, más tipografía.
     El eyebrow deja de gritar en verde. — */
.rh-eye, .ra-hero-eyebrow, .rh-sec {
  color: var(--txt-dim, #A39A89) !important;
  letter-spacing: 0.14em !important;
  opacity: 0.85;
}

/* — Hero del Home: ya tiene su propio gradiente sobre la foto; no duplicar. — */

/* — KPIs: el número manda, la etiqueta se atenúa. Menos verde por defecto. — */
.rh-kpi .val, .rh-kpi-value, [class*="kpi"] .val {
  font-variant-numeric: tabular-nums;
}

/* — Acentos glow: reducir el "resplandor" verde omnipresente. — */
.tech-card[style*="var(--accent)"],
[style*="border:1px solid var(--accent)"] {
  border-color: rgba(174,185,140,0.35) !important;
}

/* — Separadores más suaves (menos líneas duras que saturan). — */
hr, .rh-sec + *, .divider {
  border-color: rgba(255,255,255,0.06) !important;
}

/* — Respiración: un poco más de aire entre secciones del Home. — */
#viewport .rh-sec { margin-top: 22px !important; margin-bottom: 10px !important; }

/* — Bottom nav: activo más sobrio, sin caja verde llena. — */
#bottom-nav .nav-item.active,
#bottom-nav [aria-current="page"] {
  color: var(--accent, #AEB98C) !important;
}

/* — Fix "texto azul de sistema": botones de texto heredan color de marca,
     nunca el azul de enlace por defecto de iOS (causaba look "muy IA/genérico"). — */
button, .rh-setup-row, [role="button"] {
  color: inherit;
}
a:not([class]) { color: var(--accent, #AEB98C); }

/* ============================================================
   DISEÑO PROFESIONAL v3 (v1.90.12)
   Objetivo: que deje de sentirse "template/IA" y gane carácter:
   profundidad real en tarjetas, encabezados con detalle, KPIs con
   personalidad, y micro-acabados. Todo sobre los tokens actuales.
   ============================================================ */

/* — Encabezados de sección: línea-acento fina a la izquierda, tipografía serif
     para el título. Da jerarquía editorial (menos "app genérica"). — */
.rh-sec {
  position: relative;
  padding-left: 12px;
  font-family: var(--font-ui, 'Manrope'), sans-serif;
}
.rh-sec::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 13px;
  border-radius: 2px;
  background: var(--accent, #AEB98C);
  opacity: 0.75;
}

/* — Tarjetas: profundidad de verdad (borde superior claro + sombra proyectada),
     no el rectángulo plano de siempre. Sensación de material. — */
.tech-card, .fx-card, .rh-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.028) 0%, rgba(255,255,255,0.008) 40%, rgba(0,0,0,0.06) 100%),
    var(--bg-surface, #1C1A14) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 16px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 1px 2px rgba(0,0,0,0.3),
    0 12px 30px -20px rgba(0,0,0,0.7) !important;
}

/* — Hero: filo superior con brillo tenue tipo "vidrio", y sombra más rica. — */
.rh-hero {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 20px 48px -28px rgba(0,0,0,0.85) !important;
}
.rh-hero .rh-eye, .rh-hero .ra-hero-eyebrow {
  color: var(--accent, #AEB98C) !important;
  opacity: 0.92;
}

/* — KPIs: número en fuente de datos (mono) con tracking apretado y peso alto,
     etiqueta arriba en minúsculas espaciadas. Look de dashboard "pro". — */
[class*="kpi"] .val, .rh-kpi .val, .rh-kpi-value {
  font-family: var(--font-data, 'Space Mono'), monospace !important;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* — Divisor con degradado (no una línea dura de borde). — */
.rh-card > * + *[style*="border-top"], .tech-card [style*="border-top:1px solid"] {
  border-image: linear-gradient(90deg, transparent, rgba(255,255,255,0.09), transparent) 1 !important;
}

/* — Bottom nav: elevación real, píldora activa sutil en vez de texto suelto. — */
#bottom-nav {
  box-shadow: 0 -8px 30px -18px rgba(0,0,0,0.8) !important;
}
#bottom-nav .nav-item.active {
  position: relative;
}
#bottom-nav .nav-item.active::after {
  content: "";
  position: absolute;
  bottom: 6px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent, #AEB98C);
}

/* — Botón primario: leve degradado + brillo superior (menos "flat plano"). — */
.btn-arch.primary, button.primary, .btn-primary {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 100%, white 8%), var(--accent, #AEB98C)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 6px 16px -8px rgba(174,185,140,0.5) !important;
}

/* — Chips/píldoras: borde con degradado sutil para que no se vean "de plástico". — */
.chip, .pill, .ztab.on {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* — Foto del hero: un pelín más de contraste y saturación para que "venda". — */
.rh-hero, .business-hero-shell, .pantry-hero {
  filter: saturate(1.04) contrast(1.02);
}

/* ============================================================
   FIX CRÍTICO (v1.90.12): modales invisibles detrás del mapa.
   El mapa de mesas vive en z-index 99990; los modales (agregar
   producto, asignar, confirmar, cobrar) se abrían en 9998 →
   QUEDABAN DETRÁS, invisibles: parecía que "te sacaba".
   Con el mapa abierto, todo modal/confirm/toast sube encima.
   ============================================================ */
body.map-open .modal-overlay,
body.map-open .biz-modal,
body.map-open .ux-confirm-overlay,
body.map-open [class*="modal"][class*="overlay"] {
  z-index: 100001 !important;
}
body.map-open .ra-toast, body.map-open .toast, body.map-open #toast {
  z-index: 100002 !important;
}

/* RestoAdmin 1.93 visual hierarchy: calmer surfaces, clearer action priority,
   and less repeated "AI card" chrome across long management views. */
.viewport-shell, #viewport, .page-shell { max-width: 1480px; margin-inline: auto; }
.section-title, .page-title, .view-title { letter-spacing: -.025em; }
.card, .panel, .dash-card, .dash-tile, .biz-card, .module-card {
  border-radius: 16px;
  border-color: color-mix(in srgb, var(--border-light) 72%, transparent) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
.btn-arch, button.primary, .btn-primary { font-weight: 800; letter-spacing: .005em; }
.btn-arch:not(.primary), button.secondary, .btn-secondary {
  background: color-mix(in srgb, var(--bg-highlight) 82%, transparent) !important;
}
.empty-state, .state-empty, .no-data {
  max-width: 620px; margin-inline: auto; text-align: center;
  padding: 34px 24px; color: var(--txt-dim);
}
@media (min-width: 900px) {
  .dash-grid, .dashboard-grid, .module-grid { gap: 18px !important; }
  .dash-card, .dash-tile { min-height: 132px; }
}