/* Etapa 116: base visual global y estable de Helados Mercurio. */
:root{
  --hm-bg:#0b0b0b;
  --hm-surface:#171717;
  --hm-surface-soft:#222;
  --hm-surface-raised:#292929;
  --hm-text:#fff;
  --hm-text-soft:#d4d4d4;
  --hm-text-muted:#a3a3a3;
  --hm-primary:#ffb347;
  --hm-primary-strong:#f59e0b;
  --hm-success:#22c55e;
  --hm-warning:#f59e0b;
  --hm-danger:#ef4444;
  --hm-info:#3b82f6;
  --hm-border:rgba(255,255,255,.12);
  --hm-border-soft:rgba(255,255,255,.08);
  --hm-radius-sm:10px;
  --hm-radius-md:16px;
  --hm-radius-lg:24px;
  --hm-shadow-sm:0 8px 24px rgba(0,0,0,.22);
  --hm-shadow-md:0 18px 48px rgba(0,0,0,.34);
  --hm-shadow-lg:0 28px 80px rgba(0,0,0,.52);
  --hm-layer-content:1;
  --hm-layer-header:1000;
  --hm-layer-floating:2500;
  --hm-layer-panel:12000;
  --hm-layer-overlay:18000;
  --hm-layer-modal:18100;
  --hm-layer-alert:22000;
  --hm-control-height:44px;
  --hm-focus:0 0 0 3px rgba(255,179,71,.28);
}

html{color-scheme:dark;}
body{background:var(--hm-bg);color:var(--hm-text);}
button,input,select,textarea{font:inherit;}
button,[role="button"],a,input,select,textarea{-webkit-tap-highlight-color:transparent;}

:where(button,a,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--hm-primary);
  outline-offset:2px;
  box-shadow:var(--hm-focus);
}

:where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  min-height:var(--hm-control-height);
}

:where(button,[role="button"],input[type="button"],input[type="submit"]){
  min-height:var(--hm-control-height);
}

:where(.badge,.status-badge,.order-status,.stock-status){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border-radius:999px;
  font-weight:800;
  line-height:1.15;
}

/* Capas globales: cualquier confirmación o aviso supera modales y paneles. */
.app-alert,.workers-alert{z-index:var(--hm-layer-alert)!important;}
.app-alert-shield{z-index:calc(var(--hm-layer-alert) - 1)!important;}
.app-confirm{z-index:calc(var(--hm-layer-alert) + 10)!important;}

/* Dialogs nativos y modales principales mantienen una superficie consistente. */
dialog::backdrop{background:rgba(0,0,0,.68);backdrop-filter:blur(8px);}
dialog[open]{border-color:var(--hm-border);box-shadow:var(--hm-shadow-lg);}

/* Estados de proceso compartidos. */
.is-loading,[aria-busy="true"]{cursor:progress;}
button:disabled,input:disabled,select:disabled,textarea:disabled{
  cursor:not-allowed;
  opacity:.58;
}

/* Scrollbars discretas para paneles y modales. */
@supports selector(::-webkit-scrollbar){
  *::-webkit-scrollbar{width:10px;height:10px;}
  *::-webkit-scrollbar-track{background:transparent;}
  *::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border:3px solid transparent;border-radius:999px;background-clip:padding-box;}
  *::-webkit-scrollbar-thumb:hover{background:rgba(255,179,71,.45);border:3px solid transparent;background-clip:padding-box;}
}

/* Utilidades para estados vacíos y mensajes de carga existentes. */
:where(.empty-state,.no-results,.loading-state,.error-state){
  border:1px dashed var(--hm-border);
  border-radius:var(--hm-radius-md);
  background:rgba(255,255,255,.025);
}

@media(max-width:768px){
  :root{--hm-control-height:46px;--hm-radius-lg:20px;}
  :where(button,[role="button"],a){touch-action:manipulation;}
  dialog[open]{max-width:calc(100vw - 20px);}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}

/* Etapa 120: en escritorio el desplazamiento general pertenece al navegador. */
@media (min-width:769px){
  html{
    overflow-x:hidden;
    overflow-y:scroll;
    scrollbar-gutter:stable;
  }

  body:not(.gift-modal-open):not(.cart-modal-open):not(.checkout-open):not(.modal-open):not(.admin-menu-open){
    min-height:100%;
    overflow-x:hidden!important;
    overflow-y:visible!important;
  }
}

/* Etapa 121: scrollbar principal visible y moderno en todas las vistas de escritorio. */
@media (min-width:769px){
  html{
    scrollbar-width:auto;
    scrollbar-color:#d8912e #171717;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar{
    width:14px;
  }

  html::-webkit-scrollbar-track,
  body::-webkit-scrollbar-track{
    background:#171717;
    border-left:1px solid rgba(255,255,255,.08);
  }

  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb{
    min-height:54px;
    background:linear-gradient(180deg,#ffbd5c,#d8891f);
    border:3px solid #171717;
    border-radius:999px;
    background-clip:padding-box;
  }

  html::-webkit-scrollbar-thumb:hover,
  body::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(180deg,#ffd081,#f0a231);
    border:2px solid #171717;
    background-clip:padding-box;
  }

  html::-webkit-scrollbar-corner,
  body::-webkit-scrollbar-corner{
    background:#171717;
  }
}

/* Etapa 122: las barras superiores se repliegan al bajar, excepto en index.php. */
.catalogo-public-header,.module-topbar,.navbar{
  transition:transform .24s ease,opacity .2s ease,visibility .2s ease;
  will-change:transform;
}
body.hm-topnav-hidden .catalogo-public-header,
body.hm-topnav-hidden .module-topbar,
body.hm-topnav-hidden .navbar{
  transform:translateY(calc(-100% - 8px))!important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
body.hm-topnav-hidden.has-module-topbar>.global-admin-menu-trigger,
body.hm-topnav-hidden.catalogo-page>.global-admin-menu-trigger{
  transform:translateY(-90px)!important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
@media(prefers-reduced-motion:reduce){
  .catalogo-public-header,.module-topbar,.navbar{transition:none}
}