:root {
  --es-primary: #8e1b2c;
  --es-primary-strong: #6f1423;
  --es-primary-soft: #b83246;
  --es-accent: #c9473e;
  --es-accent-strong: #a72c3a;
  --es-surface: #fbf7f4;
  --es-surface-soft: #f6ebe6;
  --es-surface-muted: #ead9d1;
  --es-surface-card: #ffffff;
  --es-text: #211817;
  --es-text-muted: #6f5a54;
  --es-border: #ddc8bf;
  --es-shadow: 0 12px 28px rgba(88, 24, 36, .10);
}

body {
  background: var(--es-surface) !important;
  color: var(--es-text) !important;
}

.bg-primary { background-color: var(--es-primary) !important; }
.bg-primary-container { background-color: var(--es-primary-soft) !important; }
.text-primary { color: var(--es-primary) !important; }
.border-primary { border-color: var(--es-primary) !important; }
.text-on-primary { color: #fff !important; }
.text-on-surface { color: var(--es-text) !important; }
.text-on-surface-variant, .text-outline { color: var(--es-text-muted) !important; }
.bg-surface { background-color: var(--es-surface) !important; }
.bg-surface-container-lowest { background-color: var(--es-surface-card) !important; }
.bg-surface-container { background-color: var(--es-surface-soft) !important; }
.bg-surface-container-high, .bg-surface-container-highest { background-color: var(--es-surface-muted) !important; }
.border-outline, .border-outline-variant { border-color: var(--es-border) !important; }

.bg-primary\/5 { background-color: rgba(142, 27, 44, .05) !important; }
.bg-primary\/10 { background-color: rgba(142, 27, 44, .10) !important; }
.bg-primary\/15 { background-color: rgba(142, 27, 44, .15) !important; }
.bg-primary-fixed, .bg-primary-fixed\/40 { background-color: #f5d2ca !important; }
.text-on-primary-fixed, .text-on-primary-fixed-variant { color: var(--es-primary-strong) !important; }
.border-primary\/15 { border-color: rgba(142, 27, 44, .15) !important; }
.ring-primary\/20, .ring-primary\/25 { --tw-ring-color: rgba(142, 27, 44, .22) !important; }
.focus\:ring-primary\/20:focus, .focus\:ring-primary\/30:focus, .focus\:ring-primary:focus { --tw-ring-color: rgba(142, 27, 44, .28) !important; }
.focus\:border-primary:focus { border-color: var(--es-primary) !important; }
.hover\:bg-primary\/5:hover { background-color: rgba(142, 27, 44, .05) !important; }
.hover\:bg-primary\/10:hover { background-color: rgba(142, 27, 44, .10) !important; }
.hover\:bg-primary\/90:hover, .hover\:bg-primary-container:hover { background-color: var(--es-primary-strong) !important; }
.hover\:text-primary:hover, .focus\:text-primary:focus { color: var(--es-primary) !important; }

header.bg-primary,
.app-shell-primary {
  background: linear-gradient(90deg, var(--es-primary) 0%, var(--es-primary-strong) 100%) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(88, 24, 36, .18) !important;
}

.sea-salt-shadow,
.es-panel-shadow {
  box-shadow: var(--es-shadow) !important;
}

#loginForm input,
#loginForm select,
#loginForm .bg-surface-container-highest {
  background: #fff !important;
  border: 1px solid rgba(221, 200, 191, .75) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85) !important;
}

#btnLogin,
#clienteCajaGuardar,
#moverMesaModoTodo,
#modalAgregar,
#clienteGuardar,
#pinConfirmar,
#modal-carrito-listo,
#btnEnviar,
#btnPrintStation,
button.bg-primary,
a.bg-primary {
  background: var(--es-primary) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(142, 27, 44, .20) !important;
}

#btnLogin:hover,
#clienteCajaGuardar:hover,
#modalAgregar:hover,
#clienteGuardar:hover,
#pinConfirmar:hover,
#modal-carrito-listo:hover,
#btnEnviar:hover,
button.bg-primary:hover,
a.bg-primary:hover {
  background: var(--es-primary-strong) !important;
}

.sidebar-item.active,
.btn-cat.bg-primary,
.tab-cat.bg-primary,
.hist-option.bg-primary,
.reg-tipo.bg-primary {
  background: var(--es-primary) !important;
  color: #fff !important;
}

/* Pedido y mesero: reemplaza restos emerald heredados sin tocar el estado Online. */
#vista-mesas .bg-emerald-700,
#vista-pedido .bg-emerald-50\/90,
#vista-pedido .hover\:bg-emerald-100:hover {
  background-color: var(--es-surface-soft) !important;
}
#vista-mesas .text-emerald-100,
#vista-mesas .text-emerald-300,
#vista-pedido .text-emerald-700 {
  color: var(--es-primary) !important;
}
#vista-mesas header.bg-\[\#8E1B2C\],
#vista-pedido header {
  background: linear-gradient(90deg, var(--es-primary) 0%, var(--es-primary-strong) 100%) !important;
  color: #fff !important;
}
#vista-pedido header .text-emerald-700,
#vista-pedido header button,
#vista-pedido header span {
  color: #fff !important;
}

/* Armonia de acentos duros usados en pedido. */
.bg-\[\#C9473E\],
.hover\:bg-\[\#A72C3A\]:hover {
  background-color: var(--es-primary) !important;
}
.text-\[\#C9473E\] { color: var(--es-primary) !important; }
.bg-\[\#7A1725\] { background-color: var(--es-primary-strong) !important; }
.hover\:bg-\[\#5D0F1B\]:hover { background-color: #52101a !important; }

/* Mantener colores semanticos de alertas/online, pero con contenedores calidos. */
section.bg-\[\#FFF1EC\],
.bg-\[\#FFF1EC\] { background-color: #fff3ef !important; }
.bg-\[\#F8F9FA\],
.bg-\[\#F8FAFC\],
.bg-\[\#F5F5F5\] { background-color: var(--es-surface) !important; }