:root {
    /* Legacy aliases. Their values now come from the central Theme Engine. */
    --monoeat-primary: var(--theme-secondary);
    --monoeat-primary-hover: var(--theme-secondary-hover);
    /* Navigation is intentionally fixed in both light and dark modes. */
    --monoeat-brown: #102431;
    --monoeat-brown-hover: #1d3a4c;
    --monoeat-navigation-accent: #9bc65a;
    --monoeat-page: var(--theme-background);
    --monoeat-surface: var(--theme-surface);
    --monoeat-text: var(--theme-text);
    --monoeat-muted: var(--theme-muted);
    --monoeat-border: var(--theme-border);
    --monoeat-dark-page: var(--theme-background);
    --monoeat-dark-surface: var(--theme-surface);
    --monoeat-dark-surface-2: var(--theme-surface);
    --monoeat-dark-border: var(--theme-border);
}

::selection {
    background: var(--monoeat-primary);
    color: var(--theme-on-secondary);
}

.monoeat-official-logo {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}

body.monoeat-superadmin nav.fixed,
body.monoeat-restaurant nav.fixed,
body.monoeat-landing header nav {
    background-color: var(--monoeat-brown) !important;
    border-color: #1d3a4c !important;
}

/* body.monoeat-shop header/nav is deliberately EXCLUDED from the block above
   (2026-08-22): that's the customer-facing restaurant header, which must
   follow the restaurant's own --theme-primary via .me-shop-brand-nav
   (resources/css/app.css), not MonoEat's fixed navy. This file predates that
   distinction and originally lumped every "header nav" together — that was
   the real root cause of the reported "header never changes color" bug:
   resources/css/app.css's .me-shop-brand-nav rule was correct all along, it
   just lost the cascade to this higher-specificity rule from this file. */

/* El sitio del cliente en modo oscuro: tarjetas, buscador, banners y modales
   quedaron con dark:bg-gray-700/800/900 quemado en ~85 lugares de
   cart-client-menu.blade.php, cart.blade.php, order-success.blade.php y
   order-detail.blade.php. ThemeResolver::darkCssVariables() ya deriva
   --theme-surface del primario del restaurante cuando personalizó su tema
   (2026-08-22), pero esas clases de Tailwind ganan la cascada sobre
   bg-theme-surface por especificidad, así que ninguna tarjeta lo reflejaba —
   el fondo de página cambiaba pero todo lo que está ENCIMA seguía en el
   gris/azul genérico. Una sola regla, igual que la del header arriba, en vez
   de tocar los ~85 lugares uno por uno. */
html.dark body.monoeat-shop .bg-white:not(.me-shop-brand-nav),
html.dark body.monoeat-shop .dark\:bg-gray-700:not(.me-shop-brand-nav),
html.dark body.monoeat-shop .dark\:bg-gray-800:not(.me-shop-brand-nav),
html.dark body.monoeat-shop .dark\:bg-gray-900:not(.me-shop-brand-nav) {
    background-color: var(--theme-surface) !important;
}

body.monoeat-superadmin #sidebar,
body.monoeat-superadmin #sidebar > div,
body.monoeat-superadmin #sidebar > div > div,
body.monoeat-restaurant #sidebar,
body.monoeat-restaurant #sidebar > div,
body.monoeat-restaurant #sidebar > div > div {
    background-color: var(--monoeat-brown) !important;
    border-color: #1d3a4c !important;
}

body.monoeat-superadmin #sidebar li > a,
body.monoeat-restaurant #sidebar li > a {
    background-color: transparent !important;
    color: var(--theme-on-navigation) !important;
}

body.monoeat-superadmin #sidebar li > a:hover,
body.monoeat-restaurant #sidebar li > a:hover {
    background-color: var(--monoeat-brown-hover) !important;
    color: var(--monoeat-navigation-accent) !important;
}

body.monoeat-superadmin #sidebar li > a.text-skin-base,
body.monoeat-restaurant #sidebar li > a.text-skin-base,
body.monoeat-restaurant #sidebar li > a.bg-skin-base {
    background-color: var(--monoeat-navigation-accent) !important;
    color: var(--theme-on-secondary) !important;
    font-weight: 700 !important;
}

button.bg-skin-base,
a.bg-skin-base {
    color: var(--theme-on-primary) !important;
}

button.bg-skin-base *,
a.bg-skin-base * {
    color: var(--theme-on-primary) !important;
}

button.bg-skin-base:hover,
a.bg-skin-base:hover {
    background-color: var(--theme-secondary-hover) !important;
    color: var(--theme-on-secondary) !important;
}

button.bg-skin-base:hover *,
a.bg-skin-base:hover * {
    color: var(--theme-on-secondary) !important;
}

body.monoeat-superadmin nav.fixed .rounded-full,
body.monoeat-restaurant nav.fixed .rounded-full {
    background-color: var(--monoeat-primary) !important;
    color: var(--theme-on-secondary) !important;
}

body.monoeat-superadmin nav.fixed .rounded-full span,
body.monoeat-restaurant nav.fixed .rounded-full span {
    color: var(--theme-on-secondary) !important;
}

body.monoeat-landing svg.text-skin-base,
body.monoeat-landing svg.text-skin-base path,
body.monoeat-landing svg.text-skin-base polyline,
body.monoeat-landing svg.text-skin-base line {
    color: var(--monoeat-primary) !important;
    stroke: var(--monoeat-primary) !important;
}

body.monoeat-landing svg.text-skin-base path[fill]:not([fill="none"]) {
    fill: var(--monoeat-primary) !important;
}

input:focus,
select:focus,
textarea:focus {
    --tw-ring-color: rgb(var(--theme-secondary-rgb) / 0.25) !important;
}

/* BEGIN MONOEAT PRIMARY ACTION CONTRACT */
/*
 * Contrato central de botones MonoEat.
 * Estado normal: azul principal #102431 y texto blanco.
 * Hover/focus: verde secundario #9BC65A y texto azul principal.
 *
 * Compatibilidad: consume las clases temáticas actuales de Tailwind.
 * Futuro: use .theme-action-primary para nuevas acciones principales.
 * Los estados semánticos (danger, warning, success) quedan excluidos.
 */
:where(button, a, [role="button"], input[type="submit"], input[type="button"]):is(
    .theme-action-primary,
    [class~="bg-skin-base"],
    [class~="bg-skin-secondary"]
):not(.theme-action-preserve):not([class~="bg-red-500"]):not([class~="bg-red-600"]):not([class~="bg-red-700"]):not([class~="bg-danger"]):not([class~="bg-yellow-500"]):not([class~="bg-amber-500"]):not([class~="bg-orange-500"]):not([class~="bg-green-500"]):not([class~="bg-emerald-500"]) {
    background-color: #102431 !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
    transition-property: color, background-color, border-color, box-shadow, transform;
    transition-duration: 150ms;
    transition-timing-function: ease-in-out;
}

:where(button, a, [role="button"], input[type="submit"], input[type="button"]):is(
    .theme-action-primary,
    [class~="bg-skin-base"],
    [class~="bg-skin-secondary"]
):not(.theme-action-preserve):not([class~="bg-red-500"]):not([class~="bg-red-600"]):not([class~="bg-red-700"]):not([class~="bg-danger"]):not([class~="bg-yellow-500"]):not([class~="bg-amber-500"]):not([class~="bg-orange-500"]):not([class~="bg-green-500"]):not([class~="bg-emerald-500"]) * {
    color: inherit !important;
}

:where(button, a, [role="button"], input[type="submit"], input[type="button"]):is(
    .theme-action-primary,
    [class~="bg-skin-base"],
    [class~="bg-skin-secondary"]
):not(.theme-action-preserve):not([class~="bg-red-500"]):not([class~="bg-red-600"]):not([class~="bg-red-700"]):not([class~="bg-danger"]):not([class~="bg-yellow-500"]):not([class~="bg-amber-500"]):not([class~="bg-orange-500"]):not([class~="bg-green-500"]):not([class~="bg-emerald-500"]):hover,
:where(button, a, [role="button"], input[type="submit"], input[type="button"]):is(
    .theme-action-primary,
    [class~="bg-skin-base"],
    [class~="bg-skin-secondary"]
):not(.theme-action-preserve):not([class~="bg-red-500"]):not([class~="bg-red-600"]):not([class~="bg-red-700"]):not([class~="bg-danger"]):not([class~="bg-yellow-500"]):not([class~="bg-amber-500"]):not([class~="bg-orange-500"]):not([class~="bg-green-500"]):not([class~="bg-emerald-500"]):focus-visible {
    background-color: #9BC65A !important;
    border-color: transparent !important;
    color: #102431 !important;
    outline: none !important;
    box-shadow: none !important;
}

:where(button, input[type="submit"], input[type="button"]):is(
    .theme-action-primary,
    [class~="bg-skin-base"],
    [class~="bg-skin-secondary"]
):disabled {
    cursor: not-allowed;
    opacity: 0.55;
}
/* END MONOEAT PRIMARY ACTION CONTRACT */

/* ---- Excepcion: en el sitio del cliente, los botones de accion siguen el
   Secundario del restaurante, no la marca de MonoEat (2026-08-22) ----
   El contrato de arriba es correcto para admin/POS (herramientas de
   MonoEat, marca fija a proposito) pero no tenia ninguna exclusion para
   body.monoeat-shop, asi que "Agregar al carrito" y demas nunca reflejaban
   el color secundario que el restaurante eligio en Tema, sin importar que
   configurara. Se antepone body.monoeat-shop para ganar por especificidad
   sin tocar admin/POS. Ver docs/architecture/ARQUITECTURA_DE_COLOR.md. */
body.monoeat-shop :where(button, a, [role="button"], input[type="submit"], input[type="button"]):is(
    .theme-action-primary,
    [class~="bg-skin-base"],
    [class~="bg-skin-secondary"]
):not(.theme-action-preserve):not([class~="bg-red-500"]):not([class~="bg-red-600"]):not([class~="bg-red-700"]):not([class~="bg-danger"]):not([class~="bg-yellow-500"]):not([class~="bg-amber-500"]):not([class~="bg-orange-500"]):not([class~="bg-green-500"]):not([class~="bg-emerald-500"]) {
    background-color: var(--theme-secondary) !important;
    color: var(--theme-on-secondary) !important;
}

body.monoeat-shop :where(button, a, [role="button"], input[type="submit"], input[type="button"]):is(
    .theme-action-primary,
    [class~="bg-skin-base"],
    [class~="bg-skin-secondary"]
):not(.theme-action-preserve):not([class~="bg-red-500"]):not([class~="bg-red-600"]):not([class~="bg-red-700"]):not([class~="bg-danger"]):not([class~="bg-yellow-500"]):not([class~="bg-amber-500"]):not([class~="bg-orange-500"]):not([class~="bg-green-500"]):not([class~="bg-emerald-500"]) * {
    color: inherit !important;
}

body.monoeat-shop :where(button, a, [role="button"], input[type="submit"], input[type="button"]):is(
    .theme-action-primary,
    [class~="bg-skin-base"],
    [class~="bg-skin-secondary"]
):not(.theme-action-preserve):not([class~="bg-red-500"]):not([class~="bg-red-600"]):not([class~="bg-red-700"]):not([class~="bg-danger"]):not([class~="bg-yellow-500"]):not([class~="bg-amber-500"]):not([class~="bg-orange-500"]):not([class~="bg-green-500"]):not([class~="bg-emerald-500"]):hover,
body.monoeat-shop :where(button, a, [role="button"], input[type="submit"], input[type="button"]):is(
    .theme-action-primary,
    [class~="bg-skin-base"],
    [class~="bg-skin-secondary"]
):not(.theme-action-preserve):not([class~="bg-red-500"]):not([class~="bg-red-600"]):not([class~="bg-red-700"]):not([class~="bg-danger"]):not([class~="bg-yellow-500"]):not([class~="bg-amber-500"]):not([class~="bg-orange-500"]):not([class~="bg-green-500"]):not([class~="bg-emerald-500"]):focus-visible {
    background-color: var(--theme-secondary-hover) !important;
    color: var(--theme-on-secondary) !important;
}

body.monoeat-shop button.bg-skin-base,
body.monoeat-shop a.bg-skin-base {
    color: var(--theme-on-secondary) !important;
}

body.monoeat-shop button.bg-skin-base *,
body.monoeat-shop a.bg-skin-base * {
    color: inherit !important;
}