/* ==========================================================================
   Gourmedia · design system del dashboard
   Depende de gm-tokens.css.

   Actúa sobre el markup que YA existe (.filter-box, .tool-box, .btn, select2,
   .responsive-table, .popup_content…), no sobre clases nuevas: así el panel
   entero cambia de aspecto sin tocar las plantillas ni el JS.

   Todo va scopeado bajo body.page-template-dashboard para ganarle en cascada
   al <style> que Tailwind inyecta al final del <head>. Donde el CSS original
   usa !important, hay que repetirlo para poder sobreescribirlo.
   ========================================================================== */

body.page-template-dashboard {
  background-color: var(--gm-bg);
  color: var(--gm-text);
  font-family: var(--gm-font);
}

/* ── fuera el chrome del tema ────────────────────────────────────────────── */
/* El panel es la única estructura: no hay cabecera de sitio ni pie. */

body.page-template-dashboard header,
body.page-template-dashboard .site-header,
body.page-template-dashboard .ast-above-header,
body.page-template-dashboard .ast-below-header,
body.page-template-dashboard .site-footer,
body.page-template-dashboard footer.site-footer,
body.page-template-dashboard .elementor-location-header { display: none !important; }

/* salvo los <header> internos de algún componente del propio panel */
body.page-template-dashboard #dashboard header { display: revert !important; }

body.page-template-dashboard #page,
body.page-template-dashboard #content,
body.page-template-dashboard #content > .ast-container,
body.page-template-dashboard #primary,
body.page-template-dashboard .ast-container {
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
  display: block;
}

/* ── shell ───────────────────────────────────────────────────────────────── */

body.page-template-dashboard #dashboard {
  display: grid;
  grid-template-columns: var(--gm-rail, 264px) minmax(0, 1fr);
  max-width: none;
  width: 100%;
  height: calc(100 * var(--gm-vh, 1vh));
  margin: 0;
  padding: 0;
  transition: grid-template-columns var(--gm-t);
}
body.page-template-dashboard.gm-rail-closed #dashboard {
  --gm-rail: 0px;
  grid-template-columns: 0px minmax(0, 1fr);
}

body.page-template-dashboard #sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  flex-basis: auto;
  height: calc(100 * var(--gm-vh, 1vh));
  background: var(--gm-bg);
  border-right: 1px solid var(--gm-border);
  overflow: hidden;
  transition: border-color var(--gm-t);
}
body.page-template-dashboard.gm-rail-closed #sidebar { border-right-color: transparent; }

/* ── cabecera del pilar ──────────────────────────────────────────────────── */

body.page-template-dashboard .gm-rail__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 22px 16px 28px;
  flex-shrink: 0;
}
body.page-template-dashboard .gm-rail__logo {
  width: 96px;
  height: auto;
  display: block;
  /* el PNG es blanco puro: 203/255 lo deja en #cbcbcb, como en el login */
  filter: brightness(.796);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 0;
}

body.page-template-dashboard .gm-rail__toggle {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--gm-r-sm);
  background: transparent;
  color: var(--gm-text-3);
  cursor: pointer;
  transition: background var(--gm-t-fast), color var(--gm-t-fast);
}
body.page-template-dashboard .gm-rail__toggle:hover { background: var(--gm-surface); color: var(--gm-text); }
body.page-template-dashboard .gm-rail__toggle i { font-size: 15px; }

/* vive fuera de #sidebar (dashboard.php) para que no lo recorte su overflow */
.gm-rail__open {
  position: fixed;
  top: 20px;
  left: 14px;
  z-index: 1000;
  display: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-r-sm);
  background: var(--gm-surface);
  color: var(--gm-text-2);
  cursor: pointer;
  transition: background var(--gm-t-fast), color var(--gm-t-fast);
}
.gm-rail__open:hover { background: var(--gm-surface-hi); color: var(--gm-text); }
body.gm-rail-closed .gm-rail__open { display: grid; }

/* ── navegación ──────────────────────────────────────────────────────────── */

/* el menú ocupa el hueco y hace scroll; el pie queda anclado abajo */
body.page-template-dashboard #sidebar #dashboard-menu {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 10px 10px;
  margin: 0;
  display: block;
}

body.page-template-dashboard .gm-navgroup + .gm-navgroup { margin-top: 18px; }
body.page-template-dashboard .gm-navgroup__label {
  font-size: 12px;
  font-weight: 550;
  letter-spacing: -.002em;
  color: var(--gm-text-2);
  padding: 0 8px 6px;
  font-family: var(--gm-font);
}
body.page-template-dashboard .gm-navgroup--locked .gm-navgroup__label { opacity: .5; }

body.page-template-dashboard #sidebar ul.gm-navlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
body.page-template-dashboard #sidebar ul.gm-navlist li { margin: 0; padding: 0; }

body.page-template-dashboard #sidebar .gm-navitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: var(--gm-r-md);
  color: var(--gm-text);
  font-family: var(--gm-font);
  font-size: 13px;
  font-weight: 450;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  opacity: 1;
  transition: background var(--gm-t-fast);
}
body.page-template-dashboard .gm-ico {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  display: block;
}
body.page-template-dashboard #sidebar .gm-navitem .gm-ico { opacity: .92; }

/* la X solo cierra el cajón de móvil: en escritorio no pinta nada */
body.page-template-dashboard .close-menu-mobile { display: none; }
body.page-template-dashboard .gm-navitem__text { overflow: hidden; text-overflow: ellipsis; }
body.page-template-dashboard #sidebar .gm-navitem:hover { background: var(--gm-surface); opacity: 1; }
body.page-template-dashboard #sidebar li.active > .gm-navitem {
  background: var(--gm-surface-active);
  color: var(--gm-text);
  font-weight: 500;
}

body.page-template-dashboard #sidebar li.role_disabled > .gm-navitem { opacity: .3; cursor: not-allowed; }
body.page-template-dashboard #sidebar li.role_disabled > .gm-navitem:hover { background: transparent; }
body.page-template-dashboard #sidebar .gm-navitem.gm-locked { opacity: .45; }
body.page-template-dashboard #sidebar .gm-navitem.gm-locked:hover { opacity: .6; }
body.page-template-dashboard .gm-navitem__ext {
  margin-left: auto;
  width: 11px;
  height: 11px;
  opacity: .45;
}

body.page-template-dashboard .gm-rail__foot {
  flex: 0 0 auto;
  margin-top: auto;
  border-top: 1px solid var(--gm-border);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--gm-bg);
}

body.page-template-dashboard .gm-account {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 7px 8px;
  cursor: default;
  user-select: none;
}
body.page-template-dashboard .gm-account__img {
  width: 44px;
  height: 44px;
  border-radius: var(--gm-r-md, 10px);
  flex-shrink: 0;
  border: 0;
  background: none;
  object-fit: cover;
  margin: 0;
  padding: 0;
  box-shadow: none;
}
body.page-template-dashboard .gm-account__plan {
  font-size: 11.5px;
  font-weight: 500;
  color: #fff;
  background: #333;
  border-radius: var(--gm-r-pill, 999px);
  padding: 2px 7px;
  line-height: 1.45;
  white-space: nowrap;
}

/* ── panel ───────────────────────────────────────────────────────────────── */

/* ── escritorio chico: el panel entero, en proporción ───────────────────── */
/* En una notebook (1366 × 768, y más aún con Windows al 125 %) el panel se veía
   «con zoom»: cinco filas por pantalla y el pilar cortado. El panel y los
   pop-ups se achican de una vez con `zoom`, como el zoom del navegador, en
   tres escalones (Martín, 9-oct-2026). Desde 1024 hacia abajo manda la vista
   del teléfono, sin zoom.
   - Lo que mide en vh se compensa con --gm-vh (si no, el pilar y el panel
     quedaban a 0,8 del alto de la ventana).
   - Lo que cuelga del body (globos de tippy, desplegables de select2 y
     selectize, calendario, aviso de abajo) no lleva zoom: se ubica con las
     medidas de pantalla y cae en su lugar.
   - El JS que convierte medidas de pantalla en posiciones dentro del panel
     las divide por gmZoom() (gm-shell.js); el arrastre de jQuery UI también.
   - Customizer, Pass Canvas y la app de Gen2 quedan a su tamaño: tienen su
     lienzo, su arrastre y sus animaciones propios. */
@media (min-width: 1024px) and (max-height: 760px), (min-width: 1024px) and (max-width: 1279px) {
  body.page-template-dashboard { --gm-zoom: .9; }
}
@media (min-width: 1024px) and (max-height: 680px), (min-width: 1024px) and (max-width: 1199px) {
  body.page-template-dashboard { --gm-zoom: .8; }
}
@media (min-width: 1024px) and (max-height: 580px), (min-width: 1024px) and (max-width: 1099px) {
  body.page-template-dashboard { --gm-zoom: .75; }
}
@media (min-width: 1024px) {
  body.page-template-dashboard { --gm-vh: calc(1vh / var(--gm-zoom, 1)); }
  body.page-template-dashboard #dashboard,
  body.page-template-dashboard .popup_wrapper > * { zoom: var(--gm-zoom, 1); }
  body.page-template-dashboard #panel > section.gm-editor,
  body.page-template-dashboard #panel > section#menu-iq-gen2.gm-gen2-producto { zoom: calc(1 / var(--gm-zoom, 1)); --gm-vh: 1vh; }
}

body.page-template-dashboard #panel {
  display: block;
  min-width: 0;
  width: auto;
  height: calc(100 * var(--gm-vh, 1vh));
  margin: 0;
  padding: 0;
  overflow-y: auto;
}

/* el contenido arranca pegado al pilar y no se estira más allá de la medida */
body.page-template-dashboard #panel > section {
  width: 100%;
  max-width: var(--gm-boxed, 1180px);
  margin: 0;
  padding: 26px 32px 70px;
}

body.page-template-dashboard #dashboard .section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 0;
}
/* los adornos de la cabecera (contadores, distintivos) no se estiran */
body.page-template-dashboard #dashboard .section-header > *:not(h1) { flex: 0 0 auto; }
body.page-template-dashboard #dashboard .section-header h1 {
  font-family: var(--gm-font-disp);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1.2;
  color: var(--gm-text);
  margin: 0;
  padding: 0;
  border: 0;
}
body.page-template-dashboard #dashboard .section-header .info-tooltip-icon { display: none; }

/* ── barras de herramientas ──────────────────────────────────────────────── */
/* la caja gris de filtros desaparece: los controles van sueltos en una fila */

body.page-template-dashboard .filter-box {
  display: flex;
  align-items: center;
  padding: 0;
  background-color: transparent;
  border-radius: 0;
  margin-bottom: 10px;
  grid-gap: 8px;
  gap: 8px;
  flex-wrap: wrap;
}
body.page-template-dashboard .tool-box {
  display: flex;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
body.page-template-dashboard .toolbar {
  display: flex;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

body.page-template-dashboard .filter-box .filter-menu,
body.page-template-dashboard .filter-box .filter-category { width: auto; min-width: 190px; }
body.page-template-dashboard .filter-box .filter-status { width: auto; min-width: 140px; }
body.page-template-dashboard .control-container.control-bulk { width: auto; gap: 8px; }

/* separador: 1px y apagado */
body.page-template-dashboard .tool-box .separator,
body.page-template-dashboard .toolbar .separator {
  width: 1px;
  flex: 0 0 1px;
  height: 24px;
  align-self: center;
  background-color: var(--gm-border-dim);
  margin: 0 6px;
}

/* ── botones ─────────────────────────────────────────────────────────────── */
/* misma piel que los selects, un punto más claros para que la acción pese más */

body.page-template-dashboard .btn:not(.gm-btn),
body.page-template-dashboard .control-container button:not(.gm-btn),
body.page-template-dashboard button.btn:not(.gm-btn),
body.page-template-dashboard a.btn:not(.gm-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  min-height: 38px;
  padding: 0 14px;
  font-family: var(--gm-font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--gm-text);
  background-color: var(--gm-raised);
  border: 1px solid #3a3a3a;
  border-radius: var(--gm-r-md);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--gm-t-fast), border-color var(--gm-t-fast), color var(--gm-t-fast);
}
body.page-template-dashboard .btn:hover,
body.page-template-dashboard .control-container button:hover {
  background-color: var(--gm-raised-hi);
  border-color: #4a4a4a;
  color: var(--gm-text);
}
body.page-template-dashboard .btn:focus,
body.page-template-dashboard .control-container button:focus {
  background-color: var(--gm-raised);
  color: var(--gm-text);
  outline: none;
}
body.page-template-dashboard .btn[disabled],
body.page-template-dashboard .control-container button[disabled] { opacity: .38; pointer-events: none; }
body.page-template-dashboard .btn i { font-size: 12.5px; opacity: .85; }

/* ── selects ─────────────────────────────────────────────────────────────── */

body.page-template-dashboard select,
body.page-template-dashboard .control-container.control-bulk select,
body.page-template-dashboard #loyalty .tool-box select.bulk-actions {
  height: 38px;
  padding: 0 30px 0 12px;
  font-family: var(--gm-font);
  font-size: 13px;
  font-weight: 450;
  color: var(--gm-text);
  background-color: var(--gm-surface);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-r-md);
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c7c7c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  transition: background-color var(--gm-t-fast), border-color var(--gm-t-fast);
}
body.page-template-dashboard select:hover,
body.page-template-dashboard .control-container.control-bulk select:hover,
body.page-template-dashboard #loyalty .tool-box select.bulk-actions:hover {
  background-color: var(--gm-surface-hi);
  border-color: var(--gm-border-hi);
}
body.page-template-dashboard select option,
body.page-template-dashboard .control-container.control-bulk select option {
  background-color: var(--gm-surface);
  color: var(--gm-text);
}

/* select2 — el original usa !important, hay que repetirlo */
body.page-template-dashboard .select2-container--default .select2-selection--single,
body.page-template-dashboard .select2-container--default .select2-selection--multiple {
  background-color: var(--gm-surface) !important;
  height: 38px !important;
  border: 1px solid var(--gm-border) !important;
  border-radius: var(--gm-r-md) !important;
  transition: background-color var(--gm-t-fast), border-color var(--gm-t-fast);
}
body.page-template-dashboard .select2-container--default .select2-selection--single:hover {
  background-color: var(--gm-surface-hi) !important;
  border-color: var(--gm-border-hi) !important;
}
body.page-template-dashboard .select2-container--default .select2-selection--single .select2-selection__rendered {
  font-family: var(--gm-font);
  font-size: 13px !important;
  font-weight: 450;
  padding: 0 12px !important;
  line-height: 36px !important;
  color: var(--gm-text) !important;
  background-color: transparent;
}
body.page-template-dashboard .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px;
  right: 6px;
}
body.page-template-dashboard .select2-dropdown {
  background-color: var(--gm-surface);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-r-md);
  overflow: hidden;
  box-shadow: var(--gm-sh-menu);
}
body.page-template-dashboard .select2-container--default .select2-results__option {
  font-family: var(--gm-font);
  font-size: 13px;
  color: var(--gm-text-2);
  padding: 8px 12px;
}
body.page-template-dashboard .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--gm-raised);
  color: var(--gm-text);
}
body.page-template-dashboard .select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--gm-surface-active);
  color: var(--gm-text);
}
body.page-template-dashboard .select2-search--dropdown .select2-search__field {
  background-color: var(--gm-bg);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-r-sm);
  color: var(--gm-text);
  font-family: var(--gm-font);
  font-size: 13px;
  padding: 7px 10px;
}

/* ── campos de texto ─────────────────────────────────────────────────────── */

body.page-template-dashboard input[type="text"],
body.page-template-dashboard input[type="search"],
body.page-template-dashboard input[type="email"],
body.page-template-dashboard input[type="number"],
body.page-template-dashboard input[type="time"],
body.page-template-dashboard input[type="date"],
body.page-template-dashboard textarea,
body.page-template-dashboard .popup_content input:not([type="checkbox"]):not([type="radio"]),
body.page-template-dashboard .popup_content textarea,
body.page-template-dashboard .popup_content select {
  background-color: var(--gm-surface);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-r-md);
  color: var(--gm-text);
  font-family: var(--gm-font);
  font-size: 13px;
  transition: background-color var(--gm-t-fast), border-color var(--gm-t-fast);
}
body.page-template-dashboard input[type="text"]:focus,
body.page-template-dashboard textarea:focus,
body.page-template-dashboard .popup_content input:focus,
body.page-template-dashboard .popup_content textarea:focus,
body.page-template-dashboard .popup_content select:focus {
  background-color: var(--gm-surface-hi);
  border-color: #4a4a4a;
  color: var(--gm-text);
  outline: none;
}
body.page-template-dashboard ::placeholder { color: var(--gm-text-4); }

/* el buscador de las secciones */
body.page-template-dashboard .filter-box .filter-search { width: auto; font-size: 15px; }
body.page-template-dashboard #search-items,
body.page-template-dashboard .filter-search input[type="text"] {
  background-color: var(--gm-surface);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-r-md);
  height: 38px;
}

/* ── filas de las listas ─────────────────────────────────────────────────── */

body.page-template-dashboard .responsive-table li {
  border-radius: var(--gm-r-lg);
  background-color: var(--gm-surface);
  border: 1px solid var(--gm-border);
  margin-bottom: 6px;
  align-items: center;
  transition: background-color var(--gm-t-fast), border-color var(--gm-t-fast);
}
body.page-template-dashboard .responsive-table li:hover {
  background-color: var(--gm-surface-hi);
  border-color: var(--gm-border-hi);
}
body.page-template-dashboard .responsive-table li.flex-align-start { background: transparent; }

body.page-template-dashboard .responsive-table .title,
body.page-template-dashboard .responsive-table li .title span {
  font-family: var(--gm-font);
  font-size: 13.5px;
  font-weight: 450;
  color: var(--gm-text);
}

/* precio editable en la fila */
body.page-template-dashboard .single-price input.inline-price {
  font-family: var(--gm-font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--gm-r-sm);
  color: var(--gm-text);
  transition: border-color var(--gm-t-fast), background-color var(--gm-t-fast);
}
body.page-template-dashboard .single-price input.inline-price:focus {
  border-color: var(--gm-border-hi);
  background-color: var(--gm-bg);
  outline: none;
}
body.page-template-dashboard .single-price .currency {
  font-family: var(--gm-font-mono);
  font-size: 13px;
  color: var(--gm-text-3);
}

/* ── popups ──────────────────────────────────────────────────────────────── */

body.page-template-dashboard .popup_content,
body.page-template-dashboard #formpopup,
body.page-template-dashboard .popup-preloader {
  background-color: var(--gm-surface);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-r-xl);
  box-shadow: var(--gm-sh-pop);
  color: var(--gm-text);
}
body.page-template-dashboard .popup_content .form-section {
  background-color: var(--gm-bg);
  border: 1px solid var(--gm-border-soft);
  border-radius: var(--gm-r-lg);
}
body.page-template-dashboard .popup_background {
  background-color: var(--gm-scrim) !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
body.page-template-dashboard .popup_content h2 {
  font-family: var(--gm-font-disp);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--gm-text);
}
body.page-template-dashboard .popup_content label { color: var(--gm-text-2); font-size: 12.5px; }

/* ── switch ──────────────────────────────────────────────────────────────── */

body.page-template-dashboard label.switchify.switchify-label > span.switchify-switch {
  background-color: var(--gm-raised);
  border: 1px solid var(--gm-border);
  height: 20px;
  width: 34px;
  border-radius: var(--gm-r-pill);
  transition: background-color var(--gm-t), border-color var(--gm-t);
}
body.page-template-dashboard label.switchify.switchify-label > span.switchify-switch::after {
  background-color: #8a8a8a;
  height: 14px;
  width: 14px;
  top: 2px;
  left: 2px;
  transition: left var(--gm-t), background-color var(--gm-t);
}
body.page-template-dashboard label.switchify.switchify-label > input.switchified:checked + span.switchify-switch {
  background-color: var(--gm-switch-on);
  border-color: var(--gm-switch-on);
}
body.page-template-dashboard label.switchify.switchify-label > input.switchified:checked + span.switchify-switch::after {
  background-color: #fff;
  left: calc(100% - 16px);
}

/* ── checkbox de selección ───────────────────────────────────────────────── */
/* La casilla se dibuja entera en el propio label (ver «Pase 4»): antes eran
   un ::before con la caja y un ::after con cinco box-shadow haciendo de tic,
   que ni se centraba ni se veía sobre relleno claro. */

/* ── tooltips propios ────────────────────────────────────────────────────── */

.gm-tip { position: relative; }
.gm-tip::after {
  content: attr(data-gm-tip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  background: #000;
  color: #fff;
  border: 1px solid var(--gm-border);
  font-family: var(--gm-font);
  font-size: 11.5px;
  font-weight: 450;
  line-height: 1.25;
  padding: 3px 7px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 1001;
  transition: opacity var(--gm-t-fast), transform var(--gm-t-fast);
}
.gm-tip:hover::after { opacity: 1; transform: translateX(-50%); }
.gm-tip--right::after { left: auto; right: 0; transform: translateX(0) translateY(3px); }
.gm-tip--right:hover::after { transform: translateX(0); }

/* tippy, que usan las acciones de fila, a juego */
body.page-template-dashboard .tippy-tooltip {
  background-color: #000;
  border: 1px solid var(--gm-border);
  border-radius: 6px;
  font-family: var(--gm-font);
  font-size: 11.5px;
  line-height: 1.25;
  color: #fff;
  padding: 3px 7px;
}
body.page-template-dashboard .tippy-tooltip .tippy-content { padding: 0; }

/* ── scrollbars ──────────────────────────────────────────────────────────── */

body.page-template-dashboard * { scrollbar-width: thin; scrollbar-color: #333 transparent; }
body.page-template-dashboard *::-webkit-scrollbar { width: 10px; height: 10px; }
body.page-template-dashboard *::-webkit-scrollbar-track { background: transparent; }
body.page-template-dashboard *::-webkit-scrollbar-thumb {
  background: #2b2b2b;
  border-radius: var(--gm-r-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}
body.page-template-dashboard *::-webkit-scrollbar-thumb:hover { background: #3a3a3a; background-clip: content-box; }

/* ── módulos solo de escritorio ──────────────────────────────────────────── */

@media (max-width: 1023px) {
  body.page-template-dashboard #sidebar .gm-only-desktop { display: none; }
}

/* ── móvil: el pilar vuelve a ser un cajón ───────────────────────────────── */

@media (max-width: 767px) {
  body.page-template-dashboard #dashboard { display: block; height: auto; }

  body.page-template-dashboard #sidebar {
    position: fixed;
    top: 0;
    right: -86%;
    width: 86%;
    height: 100vh;
    z-index: 99;
    border-right: 0;
    border-left: 1px solid var(--gm-border);
    transition: right var(--gm-t);
  }
  body.page-template-dashboard #sidebar.active { right: 0; }

  body.page-template-dashboard #panel { height: auto; overflow: visible; }
  body.page-template-dashboard #panel > section { padding: 20px 16px 60px; }
  body.page-template-dashboard .gm-rail__toggle { display: none; }
  .gm-rail__open { display: none !important; }

  body.page-template-dashboard #dashboard .section-header h1 { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  body.page-template-dashboard *,
  body.page-template-dashboard *::before,
  body.page-template-dashboard *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ==========================================================================
   Normalización final
   Va al final a propósito: barre los restos del tema viejo dentro del panel.
   ========================================================================== */

/* ── tipografía: Inter en todo el panel, algo más ceñida ─────────────────── */

body.page-template-dashboard,
body.page-template-dashboard button,
body.page-template-dashboard input,
body.page-template-dashboard select,
body.page-template-dashboard textarea,
body.page-template-dashboard .btn,
body.page-template-dashboard .title,
body.page-template-dashboard label,
body.page-template-dashboard p,
body.page-template-dashboard span,
body.page-template-dashboard a,
body.page-template-dashboard li,
body.page-template-dashboard div {
  font-family: var(--gm-font, 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
  letter-spacing: -.006em;
}
body.page-template-dashboard h1,
body.page-template-dashboard h2,
body.page-template-dashboard h3,
body.page-template-dashboard .popup_content h2 {
  font-family: var(--gm-font-disp, 'Inter Tight', 'Inter', system-ui, sans-serif);
  letter-spacing: -.014em;
}

/* la G de «Reseñas totales» en la fila de Loyalty, más chica que los otros íconos
   (la regla de íconos de las filas los deja en 17 px y gana por orden) */
body.page-template-dashboard #dashboard .responsive-table li .google-reviews-count .gm-i { width: 13px !important; height: 13px !important; font-size: 13px !important; }

/* cifras y precios: monoespaciada y en columna */
body.page-template-dashboard .single-price input.inline-price,
body.page-template-dashboard .single-price .currency,
body.page-template-dashboard .price,
body.page-template-dashboard .rewards-count,
body.page-template-dashboard .google-reviews-stars {
  font-family: var(--gm-font-mono, 'JetBrains Mono', ui-monospace, Menlo, monospace);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ── fuera el gris azulado del tema viejo (#343541 y compañía) ───────────── */

body.page-template-dashboard .responsive-table li,
body.page-template-dashboard .upload-area,
body.page-template-dashboard .upload-area .button,
body.page-template-dashboard .thumbnail,
body.page-template-dashboard .card,
body.page-template-dashboard .box,
body.page-template-dashboard .tool_bar,
body.page-template-dashboard li.tool_bar,
body.page-template-dashboard .accordion,
body.page-template-dashboard .form-section,
body.page-template-dashboard .paginacion a,
body.page-template-dashboard .pagination a {
  background-color: var(--gm-surface, #171717);
  border-color: var(--gm-border, #2f2f2f);
}
body.page-template-dashboard .popup_content .form-section {
  background-color: var(--gm-bg, #0a0a0a);
}

/* bordes claros del tema viejo (#5b5a65) */
body.page-template-dashboard [class*="border-[#5b5a65]"],
body.page-template-dashboard .responsive-table li,
body.page-template-dashboard .separator {
  border-color: var(--gm-border, #2f2f2f);
}

/* ── switches: uno solo, en todas las secciones ──────────────────────────── */
/* switchify no siempre corre sobre los checkbox inyectados por AJAX; esto
   asegura el mismo control aunque quede el input nativo. */

body.page-template-dashboard .visibilidad label.switchify.switchify-label,
body.page-template-dashboard label.switchify.switchify-label { display: inline-block; line-height: 0; }

body.page-template-dashboard label.switchify.switchify-label > span.switchify-switch {
  height: 20px !important;
  width: 34px !important;
  border-radius: 999px !important;
  background-color: var(--gm-raised, #262626);
  border: 1px solid var(--gm-border, #2f2f2f);
}
body.page-template-dashboard label.switchify.switchify-label > span.switchify-switch::after {
  height: 14px !important;
  width: 14px !important;
  top: 2px !important;
  left: 2px !important;
  background-color: #8a8a8a;
  border-radius: 50%;
}
body.page-template-dashboard label.switchify.switchify-label > input.switchified:checked + span.switchify-switch::after {
  left: calc(100% - 16px) !important;
  background-color: #fff;
}
/* la excepción del tema: el switch de "sin stock" va en naranja */
body.page-template-dashboard #formpopup .form-group.sin-stock label.switchify.switchify-label > input.switchified:checked + span.switchify-switch {
  background-color: var(--gm-switch-stock, #ff680f);
  border-color: var(--gm-switch-stock, #ff680f);
}
/* categorías tenía su propio desplazamiento del pomo */
body.page-template-dashboard #categories label.switchify.switchify-label > span.switchify-switch::after { top: 2px !important; }

/* ── Loyalty: la sección hereda el sistema como las demás ────────────────── */

body.page-template-dashboard #loyalty .responsive-table li {
  background-color: var(--gm-surface, #171717);
  border: 1px solid var(--gm-border, #2f2f2f);
  border-radius: var(--gm-r-lg, 14px);
  height: auto;
  min-height: 56px;
}
body.page-template-dashboard #loyalty .toolbar,
body.page-template-dashboard #loyalty .tool-box,
body.page-template-dashboard #notifications .toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  grid-gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
body.page-template-dashboard #loyalty .title { font-size: 13.5px; }
body.page-template-dashboard #loyalty .sm-tooltip,
body.page-template-dashboard #loyalty .pass-scan { font-size: 12.5px; color: var(--gm-text-2, #afafaf); }

/* contador de pases y cajas de la barra */
body.page-template-dashboard #loyalty .counter-box,
body.page-template-dashboard #loyalty .pases-box {
  background-color: var(--gm-surface, #171717);
  border: 1px solid var(--gm-border, #2f2f2f);
  border-radius: var(--gm-r-md, 10px);
}

/* ==========================================================================
   Afinado
   ========================================================================== */

/* ── buscador: un campo normal, siempre visible ──────────────────────────── */
/* El original se colapsaba a 30px en position:absolute y había que pulsar una
   lupa para desplegarlo. Se esconde el filtro más usado detrás de un clic. */

body.page-template-dashboard .filter-box .filter-search,
body.page-template-dashboard .select-container.filter-search {
  position: relative;
  display: flex;
  align-items: center;
  width: auto;
  min-width: 240px;
  flex: 1 1 240px;
  max-width: 320px;
  font-size: inherit;
  cursor: auto;
}
body.page-template-dashboard .filter-search #search-trigger,
body.page-template-dashboard .filter-search #search-close { display: none; }

body.page-template-dashboard .filter-search input[type="text"],
body.page-template-dashboard #search-items,
body.page-template-dashboard #search-passes,
body.page-template-dashboard #search-popups {
  position: static;
  width: 100%;
  height: 38px;
  padding: 0 12px 0 34px;
  opacity: 1;
  pointer-events: auto;
  background-color: var(--gm-surface, #171717);
  border: 1px solid var(--gm-border, #2f2f2f);
  border-radius: var(--gm-r-md, 10px);
  color: var(--gm-text, #ececec);
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c7c7c' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.8'/%3E%3Cpath d='m20.5 20.5-4.9-4.9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 11px center;
  background-size: 15px;
  transition: background-color var(--gm-t-fast), border-color var(--gm-t-fast);
}
body.page-template-dashboard .filter-search input[type="text"]:focus {
  background-color: var(--gm-surface-hi, #1f1f1f);
  border-color: #4a4a4a;
  outline: none;
}

/* ── precio en la fila: sin caja, en blanco, monoespaciado ───────────────── */

body.page-template-dashboard #panel .responsive-table li .single-price {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
body.page-template-dashboard #panel .responsive-table li .single-price input.inline-price,
body.page-template-dashboard .single-price input.inline-price {
  color: var(--gm-text, #ececec);
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: var(--gm-r-sm, 7px);
  box-shadow: none;
  font-family: var(--gm-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
  width: 72px;
  height: 30px;
  padding: 0 6px;
  transition: border-color var(--gm-t-fast), background-color var(--gm-t-fast);
}
body.page-template-dashboard #panel .responsive-table li .single-price input.inline-price:focus {
  border-color: var(--gm-border-hi, #3d3d3d);
  background-color: var(--gm-bg, #0a0a0a);
  outline: none;
}
body.page-template-dashboard #panel .responsive-table li .single-price .currency {
  color: var(--gm-text-3, #7c7c7c);
  font-family: var(--gm-font-mono, monospace);
  font-size: 13px;
}

/* ── pilar plegado: barra estrecha de iconos ─────────────────────────────── */
/* Plegado no significa desaparecer: quedan el conmutador arriba y los globales
   abajo, como en cualquier panel con barra reducida. */

body.page-template-dashboard.gm-rail-closed #dashboard {
  --gm-rail: 68px;
  grid-template-columns: 68px minmax(0, 1fr);
}
body.page-template-dashboard.gm-rail-closed #sidebar { border-right-color: var(--gm-border, #2f2f2f); }
body.page-template-dashboard.gm-rail-closed .gm-rail__head { padding: 22px 0 24px; justify-content: center; }
body.page-template-dashboard.gm-rail-closed .gm-rail__logo { display: none; }
body.page-template-dashboard.gm-rail-closed .gm-rail__toggle { margin: 0; }
body.page-template-dashboard.gm-rail-closed #sidebar #dashboard-menu { display: none; }
body.page-template-dashboard.gm-rail-closed .gm-rail__foot { padding: 8px 0; }
body.page-template-dashboard.gm-rail-closed .gm-rail__foot .gm-navitem { justify-content: center; padding: 9px 0; }
body.page-template-dashboard.gm-rail-closed .gm-navitem__text { display: none; }
body.page-template-dashboard.gm-rail-closed .gm-account { justify-content: center; padding: 7px 0; }
body.page-template-dashboard.gm-rail-closed .gm-account__plan { display: none; }
body.page-template-dashboard.gm-rail-closed .gm-account__img { width: 36px; height: 36px; }

/* el botón flotante ya no hace falta: el conmutador sigue visible */
.gm-rail__open { display: none !important; }

/* ── tooltips que no se salen por arriba ─────────────────────────────────── */

.gm-tip--below::after {
  bottom: auto;
  top: calc(100% + 7px);
  transform: translateX(-50%) translateY(-3px);
}
.gm-tip--below:hover::after { transform: translateX(-50%); }
.gm-tip--below.gm-tip--right::after { transform: translateX(0) translateY(-3px); }
.gm-tip--below.gm-tip--right:hover::after { transform: translateX(0); }

/* ── icono de enlace externo, más presente ───────────────────────────────── */

body.page-template-dashboard .gm-navitem__ext {
  width: 14px;
  height: 14px;
  opacity: .55;
}

/* ── jerarquía de la barra de herramientas ───────────────────────────────── */
/* Filtros y acciones dejan de ser dos filas del mismo peso: los filtros y la
   acción principal comparten una sola línea, y la barra de selección solo
   aparece cuando hay algo seleccionado. */

body.page-template-dashboard #panel > section > .filter-box,
body.page-template-dashboard #panel > section > .toolbar {
  margin-bottom: 10px;
}
body.page-template-dashboard .tool-box { margin-bottom: 16px; }

/* la acción principal se separa de los filtros y se va al extremo */
body.page-template-dashboard .tool-box .control-container:last-child,
body.page-template-dashboard .toolbar .toolbar-right { margin-left: auto; }

/* el bloque de acción masiva se apaga mientras no hay selección */
body.page-template-dashboard .control-container.control-bulk { transition: opacity var(--gm-t); }
body.page-template-dashboard .control-container.control-bulk:has(select[disabled]) { opacity: .45; }

/* ── popups, rehechos ────────────────────────────────────────────────────── */

body.page-template-dashboard .popup_wrapper { padding: 24px; }

body.page-template-dashboard .popup_content {
  background-color: var(--gm-surface, #171717);
  border: 1px solid var(--gm-border, #2f2f2f);
  border-radius: var(--gm-r-xl, 18px);
  box-shadow: var(--gm-sh-pop);
  color: var(--gm-text, #ececec);
  padding: 0;
  overflow: hidden;
}
body.page-template-dashboard .popup_content > * { padding-left: 22px; padding-right: 22px; }
body.page-template-dashboard .popup_content > *:first-child { padding-top: 22px; }
body.page-template-dashboard .popup_content > *:last-child { padding-bottom: 22px; }

body.page-template-dashboard .popup_content h2 {
  font-family: var(--gm-font-disp, 'Inter Tight', sans-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.014em;
  color: var(--gm-text, #ececec);
  margin: 0 0 6px;
  padding-top: 0;
  border: 0;
}
body.page-template-dashboard .popup_content p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--gm-text-2, #afafaf);
  margin: 0 0 18px;
}
body.page-template-dashboard .popup_content label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--gm-text-2, #afafaf);
  margin-bottom: 6px;
  display: block;
}
body.page-template-dashboard .popup_content label small {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--gm-text-3, #7c7c7c);
}

/* la X de cerrar, arriba a la derecha y discreta */
body.page-template-dashboard .popup_content .close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--gm-r-sm, 7px);
  background: transparent;
  color: var(--gm-text-3, #7c7c7c);
  border: 0;
  cursor: pointer;
  font-size: 15px;
  padding: 0;
  transition: background-color var(--gm-t-fast), color var(--gm-t-fast);
}
body.page-template-dashboard .popup_content .close:hover {
  background: var(--gm-raised, #262626);
  color: var(--gm-text, #ececec);
}

/* el pie de botones */
body.page-template-dashboard .popup_content .button-group {
  display: flex;
  gap: 9px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--gm-border-soft, #232323);
}
body.page-template-dashboard .popup_content .btn-cancel {
  background-color: transparent;
  border: 1px solid var(--gm-border, #2f2f2f);
  color: var(--gm-text-2, #afafaf);
}
body.page-template-dashboard .popup_content .btn-cancel:hover {
  background-color: var(--gm-surface-hi, #1f1f1f);
  color: var(--gm-text, #ececec);
}
/* la acción destructiva se dice con color, no con tamaño */
body.page-template-dashboard .popup_content .btn-delete,
body.page-template-dashboard .popup_content .btn-danger,
body.page-template-dashboard .popup_content .delete-confirm {
  background-color: transparent;
  border: 1px solid rgba(248, 113, 113, .4);
  color: var(--gm-bad, #f87171);
}
body.page-template-dashboard .popup_content .btn-delete:hover,
body.page-template-dashboard .popup_content .btn-danger:hover,
body.page-template-dashboard .popup_content .delete-confirm:hover {
  background-color: var(--gm-bad-bg, rgba(248,113,113,.12));
  border-color: var(--gm-bad, #f87171);
}

/* los popups de confirmación son cortos: no necesitan ancho de formulario */
body.page-template-dashboard #logoutpopup .popup_content,
body.page-template-dashboard #deleteitempopup .popup_content,
body.page-template-dashboard [id^="popup-delete"] .popup_content {
  max-width: 420px;
}

/* ── modificadores: la lista de opciones no es otra pantalla ─────────────── */

body.page-template-dashboard #modificadores #mod-response {
  margin-top: 10px;
  padding-left: 16px;
  border-left: 1px solid var(--gm-border, #2f2f2f);
}
body.page-template-dashboard #modificadores #mod-response li {
  background-color: var(--gm-surface, #171717);
  border: 1px solid var(--gm-border, #2f2f2f);
  border-radius: var(--gm-r-md, 10px);
  min-height: 48px;
}
body.page-template-dashboard #modificadores .opt-title,
body.page-template-dashboard #modificadores .opt-price {
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--gm-r-sm, 7px);
  color: var(--gm-text, #ececec);
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 13.5px;
  height: 32px;
  padding: 0 8px;
  transition: border-color var(--gm-t-fast), background-color var(--gm-t-fast);
}
body.page-template-dashboard #modificadores .opt-price {
  font-family: var(--gm-font-mono, monospace);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
body.page-template-dashboard #modificadores .opt-title:focus,
body.page-template-dashboard #modificadores .opt-price:focus {
  border-color: var(--gm-border-hi, #3d3d3d);
  background-color: var(--gm-bg, #0a0a0a);
  outline: none;
}

/* ── restos de color de las clases Tailwind inline ───────────────────────── */
/* El markup viejo trae azules (#2ba6ff), verdes (#28c76f) y grises azulados
   escritos a mano en el HTML. El panel es escala de grises: se neutralizan. */

body.page-template-dashboard #panel [class*="text-[#2ba6ff]"],
body.page-template-dashboard #panel [class*="text-[#28c76f]"],
body.page-template-dashboard #panel [class*="text-[#9d9da1]"] {
  color: var(--gm-text-2, #afafaf);
}
body.page-template-dashboard #panel [class*="border-[#2ba6ff]"],
body.page-template-dashboard #panel [class*="border-[#28c76f]"],
body.page-template-dashboard #panel [class*="border-[#5b5a65]"],
body.page-template-dashboard #panel [class*="border-[#555561]"],
body.page-template-dashboard #panel [class*="border-[#6e6f7a]"] {
  border-color: var(--gm-border, #2f2f2f);
}
body.page-template-dashboard #panel [class*="bg-[#2a3635]"],
body.page-template-dashboard #panel [class*="bg-[#232d3a]"],
body.page-template-dashboard #panel [class*="bg-[#3c3d49]"],
body.page-template-dashboard #panel [class*="bg-[#202123]"],
body.page-template-dashboard #panel [class*="bg-[#343541]"] {
  background-color: var(--gm-surface, #171717);
}

/* distintivos de la cabecera: pastilla gris, no un banner de colores */
body.page-template-dashboard #dashboard .section-header > div[class*="rounded-lg"][class*="border"] {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  border-radius: var(--gm-r-pill, 999px);
  background-color: var(--gm-raised, #262626);
  border: 1px solid var(--gm-border, #2f2f2f);
  color: var(--gm-text-2, #afafaf);
}

/* ── Loyalty ─────────────────────────────────────────────────────────────── */

/* la fila no lleva sangría ni alto fijo */
body.page-template-dashboard #loyalty .responsive-table li {
  margin-left: 0;
  height: auto;
  min-height: 56px;
  padding-right: 0;
  overflow: hidden;
}

/* la columna de fechas: sin cajas ni divisiones, alineada y en cifras tabulares */
body.page-template-dashboard #loyalty .responsive-table li > div:last-child {
  border-left: 1px solid var(--gm-border-soft, #232323);
  background: transparent;
}
body.page-template-dashboard #loyalty .responsive-table li [class*="divide-"] > * { border-color: var(--gm-border-soft, #232323); }
body.page-template-dashboard #loyalty .responsive-table li .text-xs,
body.page-template-dashboard #loyalty .responsive-table li time {
  font-family: var(--gm-font-mono, monospace);
  font-variant-numeric: tabular-nums;
  color: var(--gm-text-3, #7c7c7c);
  font-size: 11.5px;
}

/* contador de pases: una cifra, no una caja dentro de otra */
body.page-template-dashboard #loyalty .tool-box > div[class*="rounded"],
body.page-template-dashboard #loyalty .toolbar > div[class*="rounded"] {
  background-color: var(--gm-surface, #171717);
  border: 1px solid var(--gm-border, #2f2f2f);
  border-radius: var(--gm-r-md, 10px);
  overflow: hidden;
}

/* botones de icono de la barra, todos iguales */
body.page-template-dashboard #loyalty .toolbar button,
body.page-template-dashboard #loyalty .toolbar a.btn,
body.page-template-dashboard #notifications .toolbar button {
  min-width: 38px;
  height: 38px;
}

/* ==========================================================================
   Pase 2 · afinado sobre el entorno real (emile)
   Todo lo de aquí sale de mirar el panel funcionando, no la maqueta.
   Los selectores llevan #dashboard cuando hay que ganarle a style.css, que
   usa cosas como `#dashboard input#search-items` (dos ids).
   ========================================================================== */

/* ── una sola barra de herramientas ──────────────────────────────────────── */
/* Antes había dos filas apiladas con el mismo peso: filtros arriba y acciones
   abajo. Se juntan en una: filtros a la izquierda, acción principal a la
   derecha. Los controles masivos no ocupan sitio hasta que hay selección. */

body.page-template-dashboard #dashboard .gm-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 20px;
}
body.page-template-dashboard #dashboard .gm-toolbar > .filter-box,
body.page-template-dashboard #dashboard .gm-toolbar > .toolbar {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
}
body.page-template-dashboard #dashboard .gm-toolbar > .tool-box {
  flex: 0 0 auto;
  margin: 0 0 0 auto;
}

/* los controles masivos solo existen cuando hay algo seleccionado */
body.page-template-dashboard #dashboard .gm-toolbar .control-bulk,
body.page-template-dashboard #dashboard .gm-toolbar #loyalty-actions-form,
body.page-template-dashboard #dashboard .gm-toolbar .tool-box > .separator { display: none; }

body.page-template-dashboard #dashboard section.gm-selecting .gm-toolbar .control-bulk { display: flex; }
body.page-template-dashboard #dashboard section.gm-selecting .gm-toolbar #loyalty-actions-form { display: block; }
body.page-template-dashboard #dashboard section.gm-selecting .gm-toolbar .tool-box > .separator { display: block; }

/* el recuento se escribe delante del selector, para saber sobre qué se actúa */
body.page-template-dashboard #dashboard .gm-selection-count {
  color: var(--gm-text-2, #afafaf);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-right: 2px;
}

/* ── botones: los tres niveles del sistema ───────────────────────────────── */

body.page-template-dashboard .gm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--gm-r-md, 10px);
  border: 1px solid var(--gm-border, #2f2f2f);
  background-color: var(--gm-surface, #171717);
  color: var(--gm-text, #ececec);
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--gm-t-fast), border-color var(--gm-t-fast), color var(--gm-t-fast);
}
body.page-template-dashboard .gm-btn:hover {
  background-color: var(--gm-surface-hi, #1f1f1f);
  border-color: var(--gm-border-hi, #3d3d3d);
  color: var(--gm-text, #ececec);
}
body.page-template-dashboard .gm-btn:focus-visible {
  outline: 2px solid var(--gm-border-hi, #3d3d3d);
  outline-offset: 2px;
}
body.page-template-dashboard .gm-btn:disabled,
body.page-template-dashboard .gm-btn[disabled] {
  opacity: .42;
  cursor: not-allowed;
}
body.page-template-dashboard .gm-btn:disabled:hover,
body.page-template-dashboard .gm-btn[disabled]:hover {
  background-color: var(--gm-surface, #171717);
  border-color: var(--gm-border, #2f2f2f);
}

/* «Nuevo algo»: un gris más claro para que se vea antes que los filtros */
body.page-template-dashboard .gm-btn--add {
  background-color: var(--gm-raised, #262626);
  border-color: var(--gm-border-hi, #3d3d3d);
}
body.page-template-dashboard .gm-btn--add:hover { background-color: var(--gm-raised-hi, #303030); }

/* la acción que cierra la tarea */
body.page-template-dashboard .gm-btn--primary {
  background-color: var(--gm-primary, #ececec);
  border-color: var(--gm-primary, #ececec);
  color: var(--gm-primary-ink, #0d0d0d);
}
body.page-template-dashboard .gm-btn--primary:hover {
  background-color: var(--gm-primary-hi, #fff);
  border-color: var(--gm-primary-hi, #fff);
  color: var(--gm-primary-ink, #0d0d0d);
}
body.page-template-dashboard .gm-btn--primary:disabled,
body.page-template-dashboard .gm-btn--primary[disabled] {
  background-color: var(--gm-raised, #262626);
  border-color: var(--gm-border, #2f2f2f);
  color: var(--gm-text-4, #5a5a5a);
  opacity: 1;
}
body.page-template-dashboard .gm-btn--primary:disabled:hover,
body.page-template-dashboard .gm-btn--primary[disabled]:hover {
  background-color: var(--gm-raised, #262626);
  border-color: var(--gm-border, #2f2f2f);
}

/* botón cuadrado de solo icono */
body.page-template-dashboard #dashboard .gm-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: var(--gm-r-md, 10px);
  border: 1px solid var(--gm-border, #2f2f2f);
  background-color: var(--gm-surface, #171717);
  color: var(--gm-text-2, #afafaf);
  font-size: 15px;
  cursor: pointer;
  transition: background-color var(--gm-t-fast), border-color var(--gm-t-fast), color var(--gm-t-fast);
}
body.page-template-dashboard #dashboard .gm-iconbtn:hover {
  background-color: var(--gm-surface-hi, #1f1f1f);
  border-color: var(--gm-border-hi, #3d3d3d);
  color: var(--gm-text, #ececec);
}
body.page-template-dashboard #dashboard .gm-iconbtn i { font-size: 15px; }
/* con un filtro aplicado (Loyalty, Registros): el icono en azul */
body.page-template-dashboard #dashboard .gm-iconbtn.is-on,
body.page-template-dashboard #dashboard .gm-iconbtn.is-on:hover { color: var(--gm-info, #3b82f6); }

/* ── distintivo neutro (tipo de pop-up, estado, etc.) ────────────────────── */

body.page-template-dashboard #dashboard .gm-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--gm-r-pill, 999px);
  border: 1px solid var(--gm-border, #2f2f2f);
  background-color: var(--gm-raised, #262626);
  color: var(--gm-text-2, #afafaf);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* ── buscador: gana a `#dashboard input#search-items` ────────────────────── */

body.page-template-dashboard #dashboard input#search-items,
body.page-template-dashboard #dashboard input#loyalty-search-items,
body.page-template-dashboard #dashboard input#search-popups,
body.page-template-dashboard #dashboard input#search-passes,
body.page-template-dashboard #dashboard .filter-search input[type="text"] {
  position: static;
  width: 100%;
  min-width: 200px;
  height: 38px;
  margin: 0;
  padding: 0 12px 0 34px;
  opacity: 1;
  pointer-events: auto;
  background-color: var(--gm-surface, #171717);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c7c7c' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.8'/%3E%3Cpath d='m20.5 20.5-4.9-4.9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 11px center;
  background-size: 15px;
  border: 1px solid var(--gm-border, #2f2f2f);
  border-radius: var(--gm-r-md, 10px);
  color: var(--gm-text, #ececec);
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 13px;
}
body.page-template-dashboard #dashboard input#search-items:focus,
body.page-template-dashboard #dashboard input#loyalty-search-items:focus,
body.page-template-dashboard #dashboard .filter-search input[type="text"]:focus {
  background-color: var(--gm-surface-hi, #1f1f1f);
  border-color: var(--gm-border-hi, #3d3d3d);
  outline: none;
}
body.page-template-dashboard #dashboard .filter-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 220px;
  max-width: 300px;
  min-width: 0;
  height: 38px;
}
body.page-template-dashboard #dashboard .filter-search > i,
body.page-template-dashboard #dashboard #search-trigger,
body.page-template-dashboard #dashboard #search-close,
body.page-template-dashboard #dashboard #loyalty-search-trigger,
body.page-template-dashboard #dashboard #loyalty-search-close { display: none !important; }

/* ── el borde izquierdo es uno solo ──────────────────────────────────────── */
/* Las tarjetas de la lista estaban 32 px a la derecha del título y de la barra,
   porque la casilla vivía fuera. La casilla se mete dentro de la tarjeta. */

body.page-template-dashboard #dashboard .responsive-table > li {
  margin-left: 0;
  padding-left: 44px;
}
body.page-template-dashboard #dashboard .responsive-table > li > .styled-checkbox + label {
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}
body.page-template-dashboard #dashboard .responsive-table > li:not(:has(> .styled-checkbox)) { padding-left: 16px; }

/* ── el precio hereda un verde del tema viejo ────────────────────────────── */

body.page-template-dashboard #dashboard .responsive-table .col.single-price { color: var(--gm-text, #ececec); }

/* ── el plan del pie del pilar ───────────────────────────────────────────── */

body.page-template-dashboard .gm-account__plan {
  background-color: var(--gm-raised, #262626);
  border: 1px solid var(--gm-border, #2f2f2f);
  color: #fff;
}

/* ── avisos de plan: la marca no entra en el panel ───────────────────────── */

body.page-template-dashboard [class*="bg-[#050879]"] {
  background-color: var(--gm-surface, #171717) !important;
  border-top: 1px solid var(--gm-border, #2f2f2f);
}
body.page-template-dashboard [class*="bg-[#b4efd7]"] {
  background-color: var(--gm-primary, #ececec) !important;
  border-color: var(--gm-primary, #ececec) !important;
  color: var(--gm-primary-ink, #0d0d0d) !important;
}

/* ── modificadores: la pantalla de opciones es la misma pantalla ─────────── */
/* `#mod-options` se pintaba encima con el gris azulado del tema viejo y a
   ancho completo, así que parecía otra aplicación. Se le da el fondo del
   panel y el mismo margen interior que las demás secciones. */

body.page-template-dashboard #dashboard #mod-options {
  padding: 0 32px 40px;
  background-color: var(--gm-bg, #0a0a0a);
}
body.page-template-dashboard #dashboard #mod-options > .header {
  gap: 12px;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  min-height: 44px;
}
body.page-template-dashboard #dashboard #mod-options > .header .back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: -6px;
  border-radius: var(--gm-r-sm, 7px);
  color: var(--gm-text-2, #afafaf);
  font-size: 16px !important;
  cursor: pointer;
  transition: background-color var(--gm-t-fast), color var(--gm-t-fast);
}
body.page-template-dashboard #dashboard #mod-options > .header .back:hover {
  background-color: var(--gm-surface-hi, #1f1f1f);
  color: var(--gm-text, #ececec);
}
body.page-template-dashboard #dashboard #mod-options > .header .title {
  font-family: var(--gm-font-disp, 'Inter Tight', sans-serif);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--gm-text, #ececec);
}
body.page-template-dashboard #dashboard #mod-options > .header .inline-edit {
  color: var(--gm-text-4, #5a5a5a);
  font-size: 14px;
  cursor: pointer;
  transition: color var(--gm-t-fast);
}
body.page-template-dashboard #dashboard #mod-options > .header .inline-edit:hover { color: var(--gm-text-2, #afafaf); }

body.page-template-dashboard #dashboard #mod-options #add-mods {
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
}
/* la caja gris que envolvía el campo sobraba: el campo ya tiene contorno */
body.page-template-dashboard #dashboard #mod-options #add-mods > div {
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
}
body.page-template-dashboard #dashboard #mod-options #add-mods .info-tooltip,
body.page-template-dashboard #dashboard #mod-options #add-mods .info-tooltip-icon { align-self: center; }

body.page-template-dashboard #dashboard #mod-options #mod-response {
  margin: 0;
  padding: 0;
  border: 0;
}

/* selectize (solo lo usa esta pantalla) con el mismo aspecto que los selects */
body.page-template-dashboard #dashboard .selectize-control .selectize-input {
  min-height: 38px;
  padding: 4px 10px;
  background: var(--gm-surface, #171717) !important;
  background-image: none !important;
  border: 1px solid var(--gm-border, #2f2f2f) !important;
  border-radius: var(--gm-r-md, 10px) !important;
  box-shadow: none !important;
  color: var(--gm-text, #ececec);
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 13.5px;
}
body.page-template-dashboard #dashboard .selectize-control .selectize-input.focus,
body.page-template-dashboard #dashboard .selectize-control .selectize-input.dropdown-active {
  border-color: var(--gm-border-hi, #3d3d3d) !important;
  background: var(--gm-surface-hi, #1f1f1f) !important;
}
body.page-template-dashboard #dashboard .selectize-control .selectize-input > div.item {
  background: var(--gm-raised, #262626);
  border: 1px solid var(--gm-border, #2f2f2f);
  border-radius: var(--gm-r-sm, 7px);
  color: var(--gm-text, #ececec);
  padding: 2px 8px;
}
body.page-template-dashboard #dashboard .selectize-control .selectize-input input { color: var(--gm-text, #ececec); }
body.page-template-dashboard #dashboard .selectize-dropdown {
  background: var(--gm-glass, rgba(23,23,23,.72));
  -webkit-backdrop-filter: var(--gm-glass-blur, blur(20px));
  backdrop-filter: var(--gm-glass-blur, blur(20px));
  border: 1px solid var(--gm-border, #2f2f2f);
  border-radius: var(--gm-r-md, 10px);
  box-shadow: var(--gm-sh-menu);
  color: var(--gm-text, #ececec);
  margin-top: 6px;
  padding: 4px;
  font-size: 13.5px;
}
body.page-template-dashboard #dashboard .selectize-dropdown .option {
  border-radius: var(--gm-r-sm, 7px);
  padding: 7px 10px;
}
body.page-template-dashboard #dashboard .selectize-dropdown .active {
  background: var(--gm-surface-active, #212121);
  color: var(--gm-text, #ececec);
}

/* ── Loyalty: la barra y la fila ─────────────────────────────────────────── */

/* contador de pases: una cifra con su etiqueta, sin caja dentro de caja */
body.page-template-dashboard #dashboard .gm-stat {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--gm-border, #2f2f2f);
  border-radius: var(--gm-r-md, 10px);
  background-color: var(--gm-surface, #171717);
  flex-direction: row !important;
  gap: 8px;
}
body.page-template-dashboard #dashboard .gm-stat .active-passes-header {
  padding: 0;
  background: transparent;
  color: var(--gm-text-3, #7c7c7c);
  font-size: 11.5px;
  letter-spacing: .02em;
  width: auto;
}
body.page-template-dashboard #dashboard .gm-stat .active-passes-count {
  height: auto;
  color: var(--gm-text, #ececec);
  font-family: var(--gm-font-mono, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  width: auto;
  gap: 8px;
}
body.page-template-dashboard #dashboard .gm-stat .active-passes-count > div { padding: 0; font-size: 13px; }

/* marco de la miniatura de la gráfica del programa */
body.page-template-dashboard #dashboard .gm-thumb-frame {
  border: 1px solid var(--gm-border, #2f2f2f);
  border-radius: var(--gm-r-sm, 7px);
  background-color: var(--gm-raised, #262626);
}

/* «seleccionar todos los pases» es un enlace, no un aviso */
body.page-template-dashboard #dashboard .select-all-passes {
  color: var(--gm-text-2, #afafaf);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.page-template-dashboard #dashboard .select-all-passes:hover { color: var(--gm-text, #ececec); }

/* ── iconos duotono: una sola tinta ──────────────────────────────────────── */
/* El tema trae Font Awesome duotone, que pinta dos capas con colores propios.
   En un panel monocromo eso se ve como emojis desteñidos. */

body.page-template-dashboard .fa-duotone,
body.page-template-dashboard .fad,
body.page-template-dashboard .fa-sharp-duotone {
  --fa-primary-color: currentColor;
  --fa-secondary-color: currentColor;
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: .38;
}

/* ── diálogos de confirmación, rehechos ──────────────────────────────────── */
/* Antes eran una frase en negrita y un solo botón: no había forma de salir sin
   buscar la X. Ahora todos tienen la misma forma: título, consecuencia,
   y un pie con Cancelar + la acción, con la destructiva dicha en color. */

body.page-template-dashboard .gm-dialog {
  padding: 24px !important;
  max-width: 420px;
}
body.page-template-dashboard .gm-dialog > * { padding-left: 0 !important; padding-right: 0 !important; }
body.page-template-dashboard .gm-dialog > *:first-child { padding-top: 0 !important; }
body.page-template-dashboard .gm-dialog > *:last-child { padding-bottom: 0 !important; }

body.page-template-dashboard .gm-dialog .title { margin: 0; }
body.page-template-dashboard .gm-dialog h2 {
  font-family: var(--gm-font-disp, 'Inter Tight', sans-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.014em;
  line-height: 1.3;
  color: var(--gm-text, #ececec);
  margin: 0 34px 8px 0;
}
body.page-template-dashboard .gm-dialog p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--gm-text-2, #afafaf);
  margin: 0;
}
body.page-template-dashboard .gm-dialog p + p { margin-top: 8px; }
body.page-template-dashboard .gm-dialog .linked-cat-menus {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--gm-border-soft, #232323);
  border-radius: var(--gm-r-md, 10px);
  background-color: var(--gm-bg, #0a0a0a);
  color: var(--gm-text-2, #afafaf);
  font-size: 13px;
}
body.page-template-dashboard .gm-dialog .actions {
  display: flex;
  gap: 9px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 22px;
}
body.page-template-dashboard .gm-dialog .actions .gm-btn { min-width: 96px; }
body.page-template-dashboard .gm-dialog .hidden { display: none; }

/* la acción destructiva: se lee en rojo, pero no pesa más que las demás */
body.page-template-dashboard .gm-btn--danger {
  background-color: transparent;
  border-color: rgba(248, 113, 113, .38);
  color: var(--gm-bad, #f87171);
}
body.page-template-dashboard .gm-btn--danger:hover {
  background-color: var(--gm-bad-bg, rgba(248, 113, 113, .12));
  border-color: var(--gm-bad, #f87171);
  color: var(--gm-bad, #f87171);
}

/* ── popup de ítem (y todos los que llevan acordeones) ───────────────────── */

/* cabecera: primero qué estás haciendo, después sobre qué */
body.page-template-dashboard .popup_content > .header {
  display: block;
  margin: 0 0 18px !important;
  padding-right: 40px;
  border-bottom: 1px solid var(--gm-border-soft, #232323);
  padding-bottom: 16px;
  font-size: unset;
}
body.page-template-dashboard .popup_content > .header > span {
  display: block;
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 11.5px;
  font-weight: 500 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gm-text-3, #7c7c7c);
  margin-bottom: 3px;
}
body.page-template-dashboard .popup_content > .header .item-name,
body.page-template-dashboard .popup_content > .header > div:not(.close) {
  font-family: var(--gm-font-disp, 'Inter Tight', sans-serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.016em;
  line-height: 1.25;
  color: var(--gm-text, #ececec);
}

/* acordeón: la fila es el control, no una tarjeta con relleno */
body.page-template-dashboard .popup_content .form-section {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--gm-border-soft, #232323);
  border-radius: 0;
  margin: 0;
  padding: 0;
}
body.page-template-dashboard .popup_content .form-section:last-of-type { border-bottom: 0; }
body.page-template-dashboard .popup_content .form-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
  padding: 0 2px;
  margin: 0;
  cursor: pointer;
  border-radius: var(--gm-r-sm, 7px);
  transition: color var(--gm-t-fast);
}
body.page-template-dashboard .popup_content .form-section-header:hover h3 { color: #fff; }
body.page-template-dashboard .popup_content .form-section-header h3 {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.006em;
  color: var(--gm-text, #ececec);
  transition: color var(--gm-t-fast);
}
body.page-template-dashboard .popup_content .form-section-header h3 > i {
  width: 20px !important;
  margin-right: 10px !important;
  color: var(--gm-text-3, #7c7c7c);
  font-size: 14px;
}
body.page-template-dashboard .popup_content .form-section-header .arrow {
  color: var(--gm-text-4, #5a5a5a);
  font-size: 13px;
  transition: transform var(--gm-t), color var(--gm-t-fast);
}
body.page-template-dashboard .popup_content .form-section.active .arrow,
body.page-template-dashboard .popup_content .form-section-header.active .arrow { transform: rotate(180deg); }
body.page-template-dashboard .popup_content .form-section-fields { padding: 2px 2px 18px; }

/* el icono de ayuda era un PNG: se dibuja */
body.page-template-dashboard .info-tooltip-icon img { display: none; }
body.page-template-dashboard .info-tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 7px;
  border: 1px solid var(--gm-text-4, #5a5a5a);
  border-radius: 50%;
  color: var(--gm-text-4, #5a5a5a);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  cursor: help;
  transition: color var(--gm-t-fast), border-color var(--gm-t-fast);
}
body.page-template-dashboard .info-tooltip-icon::after { content: "i"; }
body.page-template-dashboard .info-tooltip-icon:hover {
  color: var(--gm-text-2, #afafaf);
  border-color: var(--gm-text-2, #afafaf);
}

/* el pie del formulario del popup */
body.page-template-dashboard .popup_content form > .flex.justify-center {
  justify-content: flex-end !important;
  margin-top: 22px !important;
  padding-top: 18px;
  border-top: 1px solid var(--gm-border-soft, #232323);
}

/* ── color semántico: solo informa de un estado ──────────────────────────── */

body.page-template-dashboard #dashboard .gm-is-warn { color: var(--gm-warn, #fbbf24); }
body.page-template-dashboard #dashboard .gm-is-bad  { color: var(--gm-bad, #f87171); }
body.page-template-dashboard #dashboard .gm-is-ok   { color: var(--gm-ok, #34d399); }

/* ── cifras de una fila: ícono y número, con el nombre en el globo ─────────
   Es como mide el panel una fila de lista (Notificaciones: enviadas, exitosas,
   fallidas). El ícono va apagado cuando la cifra no significa un estado; con
   .gm-is-ok, .gm-is-warn o .gm-is-bad, ícono y número toman ese color. Una
   cifra en cero no se imprime: la fila dice lo que pasó, no lo que falta. */
body.page-template-dashboard #dashboard .gm-cifras { flex: none; display: flex; align-items: center; gap: 12px; }
body.page-template-dashboard #dashboard .gm-cifra { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--gm-text, #ececec); }
body.page-template-dashboard #dashboard .gm-cifra .gm-i { width: 15px; height: 15px; color: var(--gm-text-3, #7c7c7c); }
body.page-template-dashboard #dashboard .gm-cifra:is(.gm-is-ok, .gm-is-warn, .gm-is-bad) .gm-i { color: inherit; }

/* ── modificadores: las cifras forman columna ────────────────────────────── */
/* Cada recuento medía lo que midiera su palabra, así que las columnas
   bailaban de una fila a otra. Ancho fijo y cifras tabulares. */

body.page-template-dashboard #dashboard #modificadores .contenido,
body.page-template-dashboard #dashboard #modificadores .articulos {
  width: 68px;
  flex: 0 0 68px;
  color: var(--gm-text, #ececec);
  font-family: var(--gm-font-mono, monospace);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}
body.page-template-dashboard #dashboard #modificadores .contenido br + *,
body.page-template-dashboard #dashboard #modificadores .articulos { line-height: 1.25; }

/* la palabra que hay bajo la cifra es una etiqueta, no un dato */
body.page-template-dashboard #dashboard #modificadores .contenido,
body.page-template-dashboard #dashboard #modificadores .articulos {
  position: relative;
}
body.page-template-dashboard #dashboard #modificadores .col.actions { width: auto; gap: 14px; }

/* ── las filas miden lo mismo en todas las secciones ─────────────────────── */

body.page-template-dashboard #dashboard .responsive-table > li {
  min-height: 56px;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* ── pop-ups: el par de pestañas ─────────────────────────────────────────── */

body.page-template-dashboard #dashboard #popups .section-header .tab-btn,
body.page-template-dashboard #dashboard #popups [data-tab] {
  height: 32px;
  padding: 0 14px;
  border-radius: var(--gm-r-sm, 7px);
  font-size: 13px;
  font-weight: 500;
  color: var(--gm-text-3, #7c7c7c);
  background: transparent;
  border: 0;
  transition: color var(--gm-t-fast), background-color var(--gm-t-fast);
}
body.page-template-dashboard #dashboard #popups [data-tab]:hover { color: var(--gm-text, #ececec); }
body.page-template-dashboard #dashboard #popups [data-tab].active {
  background-color: var(--gm-raised, #262626);
  color: var(--gm-text, #ececec);
}

/* ==========================================================================
   Pase 3 · lo que se ve al usarlo
   ========================================================================== */

/* ── .gm-btn no puede ganarle a las utilidades de ocultar ────────────────── */
/* `display: inline-flex` con tres niveles de especificidad pisaba `hidden`,
   así que los botones que solo son para móvil salían también en escritorio. */

body.page-template-dashboard .gm-btn.hidden,
body.page-template-dashboard .gm-iconbtn.hidden { display: none; }
@media (min-width: 640px) {
  body.page-template-dashboard .gm-btn.sm\:hidden,
  body.page-template-dashboard .gm-iconbtn.sm\:hidden { display: none; }
}
@media (min-width: 768px) {
  body.page-template-dashboard .gm-btn.md\:hidden,
  body.page-template-dashboard .gm-iconbtn.md\:hidden { display: none; }
}

/* ── select2: el triángulo se comía la última letra ──────────────────────── */

body.page-template-dashboard .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 30px 0 12px !important;
}
body.page-template-dashboard .select2-container--default .select2-selection--single .select2-selection__arrow {
  width: 30px;
  right: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c7c7c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
}
body.page-template-dashboard .select2-container--default .select2-selection--single .select2-selection__arrow b { display: none !important; }

/* ── el precio: la moneda pegada a la cifra ──────────────────────────────── */
/* El campo medía 72 px con el número a la derecha, así que el signo quedaba
   a treinta y pico de píxeles de su cifra. Se ajusta al contenido y el
   conjunto se alinea a la derecha, que es lo que hace columna. */

body.page-template-dashboard #dashboard .responsive-table li .single-price {
  justify-content: flex-end;
  min-width: 92px;
  gap: 1px;
}
body.page-template-dashboard #dashboard .responsive-table li .single-price input.inline-price {
  width: 7ch;
  field-sizing: content;
  min-width: 4ch;
  max-width: 10ch;
  padding: 0 4px;
}

/* ── las acciones de la fila esperan al puntero ──────────────────────────── */
/* Tres iconos en blanco puro por fila competían con el nombre del producto,
   que es lo que se lee. Pasan a gris y se encienden al pasar por encima. */

body.page-template-dashboard #dashboard .responsive-table li .col.actions a,
body.page-template-dashboard #dashboard .responsive-table li .actions a,
body.page-template-dashboard #dashboard .responsive-table li .duplicate_post,
body.page-template-dashboard #dashboard .responsive-table li .edit_post,
body.page-template-dashboard #dashboard .responsive-table li .delete_post {
  color: var(--gm-text-3, #7c7c7c);
  transition: color var(--gm-t-fast);
}
body.page-template-dashboard #dashboard .responsive-table li:hover .col.actions a,
body.page-template-dashboard #dashboard .responsive-table li:hover .actions a { color: var(--gm-text-2, #afafaf); }
body.page-template-dashboard #dashboard .responsive-table li .col.actions a:hover,
body.page-template-dashboard #dashboard .responsive-table li .actions a:hover { color: var(--gm-text, #ececec); }
body.page-template-dashboard #dashboard .responsive-table li .delete_post:hover,
body.page-template-dashboard #dashboard .responsive-table li .delete-pass:hover,
body.page-template-dashboard #dashboard .responsive-table li .popup-delete-open:hover { color: var(--gm-bad, #f87171); }

/* el enlace entre menús es un dato, no una alerta: gris, no azul */
body.page-template-dashboard #dashboard .responsive-table li .text-accent,
body.page-template-dashboard #dashboard .gm-muted { color: var(--gm-text-3, #7c7c7c); }

/* ── menú contextual de la fila (los tres puntos) ────────────────────────── */

body.page-template-dashboard #dashboard .item-actions-menu,
body.page-template-dashboard #dashboard [class*="item-actions"][class*="absolute"] {
  background: var(--gm-glass, rgba(23, 23, 23, .72));
  -webkit-backdrop-filter: var(--gm-glass-blur, blur(20px));
  backdrop-filter: var(--gm-glass-blur, blur(20px));
  border: 1px solid var(--gm-border, #2f2f2f);
  border-radius: var(--gm-r-md, 10px);
  box-shadow: var(--gm-sh-menu);
  padding: 4px;
}
body.page-template-dashboard #dashboard .item-actions-toggle { color: var(--gm-text-3, #7c7c7c); }
body.page-template-dashboard #dashboard .item-actions-toggle:hover { color: var(--gm-text, #ececec); }
body.page-template-dashboard #dashboard .item-actions-item {
  color: var(--gm-text-2, #afafaf);
  font-size: 13px;
  border-radius: var(--gm-r-sm, 7px);
}
body.page-template-dashboard #dashboard .item-actions-item:hover { color: var(--gm-text, #ececec); }
body.page-template-dashboard #dashboard .item-actions-item[class*="ff6b6b"],
body.page-template-dashboard #dashboard .item-actions-item.is-danger { color: var(--gm-bad, #f87171); }

/* ── Loyalty: la columna de fechas ───────────────────────────────────────── */
/* Eran dos cajas con borde metidas dentro de la fila. Ahora es una columna:
   la última visita se lee, la de creación acompaña. */

body.page-template-dashboard #dashboard #loyalty .dates {
  align-items: flex-end;
  gap: 1px;
  min-width: 86px;
  padding: 0 14px 0 16px;
  border-left: 1px solid var(--gm-border-soft, #232323);
  text-align: right;
}
body.page-template-dashboard #dashboard #loyalty .dates > div {
  padding: 0;
  border: 0;
  font-family: var(--gm-font-mono, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  line-height: 1.45;
}
body.page-template-dashboard #dashboard #loyalty .date-last-visit { color: var(--gm-text-2, #afafaf); }
body.page-template-dashboard #dashboard #loyalty .date-created { color: var(--gm-text-4, #5a5a5a); }

/* el «|» que separa visitas PDV y globales no es un separador de barra */
body.page-template-dashboard #dashboard .pass-scan .separator {
  width: auto;
  height: auto;
  background: transparent;
  border: 0;
  margin: 0 1px;
  color: var(--gm-text-4, #5a5a5a);
}

/* ── Notificaciones: los dos filtros van uno al lado del otro ────────────── */

body.page-template-dashboard #dashboard #notifications .filter-box {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
body.page-template-dashboard #dashboard #notifications .filter-box > * { flex: 0 0 auto; }

/* ── estado vacío ────────────────────────────────────────────────────────── */
/* Una lista sin resultados no es un error: se dice con una frase, no dejando
   el esqueleto de carga puesto. */

body.page-template-dashboard #dashboard .gm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 200px;
  padding: 40px 24px;
  border: 1px dashed var(--gm-border, #2f2f2f);
  border-radius: var(--gm-r-lg, 14px);
  text-align: center;
}
body.page-template-dashboard #dashboard .gm-empty__title {
  margin: 0;
  color: var(--gm-text-2, #afafaf);
  font-size: 14px;
  font-weight: 500;
}
body.page-template-dashboard #dashboard .gm-empty__hint {
  margin: 0;
  color: var(--gm-text-4, #5a5a5a);
  font-size: 12.5px;
}

/* ── los dos editores dentro del panel ───────────────────────────────────── */
/* La maqueta del móvil y el panel de edición se alinean arriba y comparten
   el mismo aire; antes cada uno caía donde le tocaba. */

body.page-template-dashboard #dashboard #customizer .gm-editor__mount,
body.page-template-dashboard #dashboard #passcanvas .gm-editor__mount {
  padding-bottom: 40px;
}

/* ==========================================================================
   Pase 4 · ancho completo, separador de comandos y paleta de distintivos
   ========================================================================== */

/* ── el contenido ocupa todo el ancho ────────────────────────────────────── */

body.page-template-dashboard #panel > section { max-width: none; }

/* ── una línea separa los comandos del contenido ─────────────────────────── */
/* Misma línea que separa el pilar del panel: los filtros y las acciones son
   otra capa, no parte de la lista. */

body.page-template-dashboard #dashboard .gm-toolbar,
body.page-template-dashboard #dashboard #categories > .toolbar,
body.page-template-dashboard #dashboard #modificadores > .toolbar,
body.page-template-dashboard #dashboard #notifications > .toolbar,
body.page-template-dashboard #dashboard #popups > .popups-actions,
body.page-template-dashboard #dashboard #usuarios > .usuarios-actions,
body.page-template-dashboard #dashboard .registros-toolbar {
  margin-bottom: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gm-border, #2f2f2f);
}
body.page-template-dashboard #dashboard .gm-toolbar + .container,
body.page-template-dashboard #dashboard .gm-toolbar ~ .container,
body.page-template-dashboard #dashboard .gm-toolbar ~ .responsive-table,
body.page-template-dashboard #dashboard .gm-toolbar ~ .select-all-container,
body.page-template-dashboard #dashboard .toolbar + .container,
body.page-template-dashboard #dashboard .popups-actions + .tab-content,
body.page-template-dashboard #dashboard .usuarios-actions + .container { margin-top: 20px; }

/* ── buscadores: uno solo, en todo el panel ──────────────────────────────── */

body.page-template-dashboard #dashboard input#search-items,
body.page-template-dashboard #dashboard input#loyalty-search-items,
body.page-template-dashboard #dashboard input#search-popups,
body.page-template-dashboard #dashboard input#search-passes,
body.page-template-dashboard #dashboard input#search-registros,
body.page-template-dashboard #dashboard .filter-search input[type="text"],
body.page-template-dashboard #dashboard input[type="search"] {
  background-color: var(--gm-field, #212121);
  border: 1px solid var(--gm-field-border, #424242);
  color: var(--gm-field-text, #fff);
  font-size: 13px;
}
body.page-template-dashboard #dashboard input#search-items::placeholder,
body.page-template-dashboard #dashboard input#loyalty-search-items::placeholder,
body.page-template-dashboard #dashboard input#search-registros::placeholder,
body.page-template-dashboard #dashboard .filter-search input[type="text"]::placeholder,
body.page-template-dashboard #dashboard input[type="search"]::placeholder {
  color: var(--gm-field-ph, #afafaf);
}
body.page-template-dashboard #dashboard input#search-items:focus,
body.page-template-dashboard #dashboard input#loyalty-search-items:focus,
body.page-template-dashboard #dashboard input#search-registros:focus,
body.page-template-dashboard #dashboard .filter-search input[type="text"]:focus {
  background-color: var(--gm-field, #212121);
  border-color: #5a5a5a;
  color: var(--gm-field-text, #fff);
}

/* ── «Nuevo algo»: es la acción que se busca al entrar ───────────────────── */

body.page-template-dashboard .gm-btn--add {
  background-color: var(--gm-primary, #f9f9f9);
  border-color: var(--gm-primary, #f9f9f9);
  border-radius: var(--gm-r-pill, 999px);
  color: var(--gm-primary-ink, #0a0a0a);
  padding: 0 18px;
}
body.page-template-dashboard .gm-btn--add:hover {
  background-color: var(--gm-primary-hi, #fff);
  border-color: var(--gm-primary-hi, #fff);
  color: var(--gm-primary-ink, #0a0a0a);
}
body.page-template-dashboard .gm-btn--primary { border-radius: var(--gm-r-pill, 999px); padding: 0 20px; }

/* ── casillas de selección ───────────────────────────────────────────────── */
/* Se dibujan con el label; hay que centrarlas de verdad, y el tic también. */

body.page-template-dashboard #dashboard .styled-checkbox + label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--gm-border-hi, #3d3d3d);
  border-radius: 5px;
  background-color: var(--gm-surface, #171717);
  cursor: pointer;
  transition: background-color var(--gm-t-fast), border-color var(--gm-t-fast);
  vertical-align: middle;
}
body.page-template-dashboard #dashboard .styled-checkbox + label::before,
body.page-template-dashboard #dashboard .styled-checkbox + label::after { content: none; }
body.page-template-dashboard #dashboard .styled-checkbox + label:hover { border-color: #575757; }
body.page-template-dashboard #dashboard .styled-checkbox:checked + label {
  background-color: var(--gm-primary, #f9f9f9);
  border-color: var(--gm-primary, #f9f9f9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px;
}

/* dentro de la fila, centrada en su alto */
body.page-template-dashboard #dashboard .responsive-table > li > .styled-checkbox + label {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
}

/* ── selección: los comandos ocupan el sitio de los filtros ──────────────── */
/* A la izquierda «seleccionar todo», acción masiva y aplicar; el recuento a la
   derecha, justo antes de «Nuevo algo», que no se mueve de su sitio. */

body.page-template-dashboard #dashboard section.gm-selecting .gm-toolbar > .filter-box,
body.page-template-dashboard #dashboard section.gm-selecting .gm-toolbar > .toolbar { display: none; }
body.page-template-dashboard #dashboard section.gm-selecting .gm-toolbar > .tool-box {
  flex: 1 1 auto;
  margin-left: 0;
  gap: 10px;
}
body.page-template-dashboard #dashboard section.gm-selecting .gm-selection-count {
  margin-left: auto;
  margin-right: 0;
}

/* ── distintivos con tinta propia ────────────────────────────────────────── */

body.page-template-dashboard #dashboard .gm-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--gm-r-pill, 999px);
  border: 1px solid currentColor;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
}
body.page-template-dashboard #dashboard .gm-tag--pink   { background-color: var(--gm-tag-pink-bg);   color: var(--gm-tag-pink-fg); }
body.page-template-dashboard #dashboard .gm-tag--amber  { background-color: var(--gm-tag-amber-bg);  color: var(--gm-tag-amber-fg); border-color: var(--gm-tag-amber-border, #bc9f78); }
body.page-template-dashboard #dashboard .gm-tag--violet { background-color: var(--gm-tag-violet-bg); color: var(--gm-tag-violet-fg); }
body.page-template-dashboard #dashboard .gm-tag--teal   { background-color: var(--gm-tag-teal-bg);   color: var(--gm-tag-teal-fg); }
body.page-template-dashboard #dashboard .gm-tag--blue   { background-color: var(--gm-tag-blue-bg);   color: var(--gm-tag-blue-fg); }
body.page-template-dashboard #dashboard .gm-tag--lime   { background-color: var(--gm-tag-lime-bg);   color: var(--gm-tag-lime-fg); }
body.page-template-dashboard #dashboard .gm-tag--rose   { background-color: var(--gm-tag-rose-bg);   color: var(--gm-tag-rose-fg); }
body.page-template-dashboard #dashboard .gm-tag--gray   { background-color: var(--gm-tag-gray-bg);   color: var(--gm-tag-gray-fg); }

/* ── el precio pierde el signo suelto ────────────────────────────────────── */

body.page-template-dashboard #dashboard .single-price .currency { display: none; }

/* ── Loyalty: las filas dejan de sobrar alto ─────────────────────────────── */

body.page-template-dashboard #dashboard #loyalty .responsive-table > li { min-height: 48px; }
body.page-template-dashboard #dashboard #loyalty .responsive-table > li > .col.info { padding: 6px 0; }
body.page-template-dashboard #dashboard #loyalty .dates { padding: 0 14px 0 16px; }

/* ── modificadores: la pantalla de opciones entra deslizando ─────────────── */
/* Se oculta con `right: -100%`, no con display. Fijar `inset: 0` la dejaba
   encima de la lista interceptando los clics. */

body.page-template-dashboard #dashboard #mod-options {
  top: 0;
  width: 100%;
  height: auto;
  min-height: 100%;
}

/* ── tooltips: uno solo para todo el panel ───────────────────────────────── */
/* Hay tres sistemas conviviendo (el propio con data-gm-tip, tippy, y el
   info-tooltip heredado). Todos comparten piel: pastilla, #1b1b1b sobre
   borde #272727 y texto blanco. */

.gm-tip::after,
body.page-template-dashboard .tippy-tooltip,
body.page-template-dashboard .tippy-box {
  background: #1b1b1b;
  background-color: #1b1b1b;
  border: 1px solid #272727;
  /* 12 px: pastilla en una línea y esquinas parejas cuando el texto ocupa varias */
  border-radius: 12px;
  text-align: left;
  color: #fff;
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 11.5px;
  font-weight: 450;
  line-height: 1.3;
  padding: 5px 11px;
  box-shadow: var(--gm-sh-menu);
}
body.page-template-dashboard .tippy-box .tippy-content,
body.page-template-dashboard .tippy-tooltip .tippy-content { padding: 0; }
/* la flecha desentona con una pastilla */
body.page-template-dashboard .tippy-box > .tippy-arrow,
body.page-template-dashboard .tippy-tooltip .tippy-arrow,
body.page-template-dashboard .tippy-popper [x-arrow] { display: none !important; }

/* ── pilar plegado: los módulos siguen ahí, con su nombre al lado ────────── */
/* Plegado se navega igual: quedan los iconos, y el nombre aparece a la
   derecha al pasar por encima. Las etiquetas de grupo no caben en 68 px,
   así que se sustituyen por una línea que separa cada producto. */

body.page-template-dashboard.gm-rail-closed #sidebar #dashboard-menu {
  display: block;
  padding: 0 15px;
  overflow: visible;
}
body.page-template-dashboard.gm-rail-closed #sidebar .gm-navgroup__label { display: none; }
body.page-template-dashboard.gm-rail-closed #sidebar .gm-navgroup + .gm-navgroup {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--gm-border-soft, #232323);
}
body.page-template-dashboard.gm-rail-closed #sidebar .gm-navitem {
  justify-content: center;
  padding: 9px 0;
  width: 38px;
}
body.page-template-dashboard.gm-rail-closed #sidebar .gm-navitem__ext { display: none; }

/* el nombre del módulo, a la derecha del icono */
body.page-template-dashboard.gm-rail-closed #sidebar .gm-navitem[data-gm-tip] { position: relative; }
body.page-template-dashboard.gm-rail-closed #sidebar .gm-navitem[data-gm-tip]::after {
  content: attr(data-gm-tip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-3px);
  background: #1b1b1b;
  border: 1px solid #272727;
  border-radius: var(--gm-r-pill, 999px);
  color: #fff;
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 12.5px;
  font-weight: 450;
  line-height: 1.3;
  padding: 6px 13px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow: var(--gm-sh-menu);
  z-index: 1001;
  transition: opacity var(--gm-t-fast), transform var(--gm-t-fast);
}
body.page-template-dashboard.gm-rail-closed #sidebar .gm-navitem[data-gm-tip]:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
/* el pilar no puede recortar el globo */
body.page-template-dashboard.gm-rail-closed #sidebar,
body.page-template-dashboard.gm-rail-closed #sidebar #dashboard-menu { overflow: visible; }
body.page-template-dashboard.gm-rail-closed #dashboard { overflow: visible; }

/* ── el pie del pilar se apoya abajo, con aire ───────────────────────────── */
/* La marca y su plan quedaban pegados al borde inferior y se cortaban. */

body.page-template-dashboard #sidebar .gm-rail__foot {
  margin-top: auto;
  padding: 10px 10px 16px;
  flex: 0 0 auto;
}
body.page-template-dashboard #sidebar .gm-account { margin-top: 10px; }

/* ── pop-ups: pestañas y registros ───────────────────────────────────────── */

body.page-template-dashboard #dashboard .popup-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background-color: var(--gm-surface, #171717);
  border: 1px solid var(--gm-border, #2f2f2f);
  border-radius: var(--gm-r-md, 10px);
}
body.page-template-dashboard #dashboard .popup-tab {
  height: 30px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  border-radius: 7px;
  color: var(--gm-text-3, #7c7c7c);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--gm-t-fast), color var(--gm-t-fast);
}
body.page-template-dashboard #dashboard .popup-tab:hover { color: var(--gm-text, #ececec); }
body.page-template-dashboard #dashboard .popup-tab.active {
  background-color: var(--gm-raised, #262626);
  color: var(--gm-text, #ececec);
}

body.page-template-dashboard #dashboard .registros-list { gap: 8px; }
body.page-template-dashboard #dashboard .registro-item {
  min-height: 48px;
  padding: 6px 16px 6px 16px;
  background-color: var(--gm-surface, #171717);
  border: 1px solid var(--gm-border, #2f2f2f);
  border-radius: var(--gm-r-lg, 14px);
  transition: background-color var(--gm-t-fast), border-color var(--gm-t-fast);
}
body.page-template-dashboard #dashboard .registro-item:hover {
  background-color: var(--gm-surface-hi, #1f1f1f);
  border-color: var(--gm-border-hi, #3d3d3d);
}
body.page-template-dashboard #dashboard .registro-item .actions > span > i { color: var(--gm-text-3, #7c7c7c); }
body.page-template-dashboard #dashboard .registro-fecha-col {
  min-width: 96px;
  padding-left: 16px;
  border-left: 1px solid var(--gm-border-soft, #232323);
}
body.page-template-dashboard #dashboard .registro-fecha {
  font-family: var(--gm-font-mono, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--gm-text-3, #7c7c7c);
}
body.page-template-dashboard #dashboard .registros-filters .filter-search { max-width: 300px; }
/* el recuento de registros lo viste ahora .gm-count, con el mismo gris y
   cuerpo que «N seleccionados» (pase 9) */

/* los estados vacíos heredados, con el mismo aire que los nuevos */
body.page-template-dashboard #dashboard .registros-empty-state,
body.page-template-dashboard #dashboard .popups-empty-state { color: var(--gm-text-2, #afafaf); }
body.page-template-dashboard #dashboard .registros-empty-state h3,
body.page-template-dashboard #dashboard .popups-empty-state h3 {
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--gm-text-2, #afafaf);
}

/* ── gris de metadato, allí donde el markup lo pedía a mano ──────────────── */

body.page-template-dashboard #dashboard .gm-muted { color: var(--gm-text-3, #7c7c7c); }

/* ── pop-ups: la fila mide como las demás ────────────────────────────────── */

body.page-template-dashboard #dashboard .popup-item { min-height: 56px; }

/* ── iconos propios ──────────────────────────────────────────────────────── */
/* `.gm-ico` mide 17 px fijos (el pilar). `.gm-i` va dentro del texto y hereda
   su tamaño, igual que hacían los iconos de fuente a los que sustituye: así
   las clases de tamaño del markup (text-lg, text-xl…) siguen valiendo. */

body.page-template-dashboard .gm-i,
.popup_content .gm-i,
#primary .gm-i {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -.125em;
  flex-shrink: 0;
  overflow: visible;
}
body.page-template-dashboard .gm-spin,
.popup_content .gm-spin { animation: gm-rotate .9s linear infinite; }
@keyframes gm-rotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  body.page-template-dashboard .gm-spin { animation-duration: 2.4s; }
}

/* el asa de arrastrar y las acciones de fila no heredan tamaños raros */
body.page-template-dashboard #dashboard .grab-arrow .gm-i,
body.page-template-dashboard #dashboard .handle.gm-i { font-size: 17px; cursor: grab; }

/* ==========================================================================
   Pase 5 · consistencia
   ========================================================================== */

/* ── fuera la línea, y el contenido dentro de una caja ───────────────────── */

body.page-template-dashboard #panel > section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 26px 40px 70px;
}
body.page-template-dashboard #dashboard .gm-toolbar,
body.page-template-dashboard #dashboard #categories > .toolbar,
body.page-template-dashboard #dashboard #modificadores > .toolbar,
body.page-template-dashboard #dashboard #notifications > .toolbar,
body.page-template-dashboard #dashboard #popups > .popups-actions,
body.page-template-dashboard #dashboard #usuarios > .usuarios-actions,
body.page-template-dashboard #dashboard .registros-toolbar {
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: 20px;
}

/* ── «Nuevo algo»: siempre a la derecha, en todas las secciones ──────────── */
/* Si el usuario aprende dónde está en Ítems, tiene que estar ahí en el resto. */

body.page-template-dashboard #dashboard .toolbar,
body.page-template-dashboard #dashboard .popups-actions,
body.page-template-dashboard #dashboard .usuarios-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
body.page-template-dashboard #dashboard .toolbar > *:has(> .gm-btn--add),
body.page-template-dashboard #dashboard .toolbar > .gm-btn--add,
body.page-template-dashboard #dashboard .popups-actions > *:has(> .gm-btn--add),
body.page-template-dashboard #dashboard .popups-actions > .gm-btn--add,
body.page-template-dashboard #dashboard .usuarios-actions > *:has(> .gm-btn--add),
body.page-template-dashboard #dashboard .usuarios-actions > .gm-btn--add,
body.page-template-dashboard #dashboard .toolbar > .control-add-item {
  margin-left: auto;
}
/* el separador vertical pierde sentido cuando la acción se va al otro lado */
body.page-template-dashboard #dashboard .toolbar > .separator { display: none; }

/* ── el buscador se lee como los selects ─────────────────────────────────── */
/* style.css fuerza `input, textarea { font-size:16px !important }` para que
   iOS no haga zoom al enfocar. Eso sigue valiendo en móvil; en escritorio no
   hace falta y dejaba el buscador con un cuerpo mayor que el resto. */

@media (min-width: 768px) {
  body.page-template-dashboard #dashboard input#search-items,
  body.page-template-dashboard #dashboard input#loyalty-search-items,
  body.page-template-dashboard #dashboard input#search-registros,
  body.page-template-dashboard #dashboard input#search-popups,
  body.page-template-dashboard #dashboard .filter-search input[type="text"],
  body.page-template-dashboard #dashboard .select2-search__field,
  body.page-template-dashboard .popup_content input:not([type="checkbox"]):not([type="radio"]),
  body.page-template-dashboard .popup_content textarea,
  body.page-template-dashboard #dashboard select,
  body.page-template-dashboard #dashboard input[type="text"],
  body.page-template-dashboard #dashboard input[type="number"],
  body.page-template-dashboard #dashboard input[type="search"] { font-size: 13px !important; }
}

/* ── los selects miden todos lo mismo ────────────────────────────────────── */

body.page-template-dashboard #dashboard .filter-box .select-container,
body.page-template-dashboard #dashboard .toolbar .select-container,
body.page-template-dashboard #dashboard .registros-filters > select,
body.page-template-dashboard #dashboard .filter-box .select2-container,
body.page-template-dashboard #dashboard .toolbar .select2-container,
body.page-template-dashboard #dashboard .filter-box > select,
body.page-template-dashboard #dashboard .toolbar > select {
  width: 200px !important;
  min-width: 200px;
  max-width: 200px;
  flex: 0 0 200px;
}
/* el buscador es el único que crece: es donde se escribe */
body.page-template-dashboard #dashboard .select-container.filter-search {
  width: auto !important;
  min-width: 240px;
  max-width: 300px;
  flex: 1 1 260px;
}
body.page-template-dashboard #dashboard .filter-search input[type="text"] { min-width: 0; }
/* el texto que no cabe se corta con puntos suspensivos, no se sale */
body.page-template-dashboard .select2-container--default .select2-selection--single .select2-selection__rendered {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── el desplegable del select, sin restos del gris antiguo ──────────────── */

body.page-template-dashboard .select2-dropdown {
  background-color: var(--gm-surface, #171717);
  border: 1px solid var(--gm-border, #2f2f2f);
  border-radius: var(--gm-r-md, 10px);
  padding: 4px;
  margin-top: 6px;
  box-shadow: var(--gm-sh-menu);
}
body.page-template-dashboard .select2-container--default .select2-results__option {
  background-color: transparent;
  border-radius: var(--gm-r-sm, 7px);
  color: var(--gm-text-2, #afafaf);
  padding: 8px 10px;
  font-size: 13px;
}
body.page-template-dashboard .select2-container--default .select2-results__option--highlighted[aria-selected],
body.page-template-dashboard .select2-container--default .select2-results__option--highlighted {
  background-color: var(--gm-surface-hi, #1f1f1f);
  color: var(--gm-text, #ececec);
}
body.page-template-dashboard .select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--gm-raised, #262626);
  color: var(--gm-text, #ececec);
}
body.page-template-dashboard .select2-search--dropdown { padding: 2px 2px 6px; }
body.page-template-dashboard .select2-search--dropdown .select2-search__field {
  background-color: var(--gm-field, #212121);
  border: 1px solid var(--gm-field-border, #424242);
  border-radius: var(--gm-r-sm, 7px);
  color: var(--gm-field-text, #fff);
  height: 34px;
  padding: 0 10px;
}

/* ── los iconos de acción recuperan tamaño ───────────────────────────────── */
/* Los de fuente venían a ~16px por herencia; el sprite los dejó en el cuerpo
   del texto de la fila, que es más chico. */

body.page-template-dashboard #dashboard .responsive-table li .col.actions .gm-i,
body.page-template-dashboard #dashboard .responsive-table li .actions .gm-i,
body.page-template-dashboard #dashboard .popup-item .actions .gm-i,
body.page-template-dashboard #dashboard .registro-item .actions .gm-i,
body.page-template-dashboard #dashboard .responsive-table li .col.editar .gm-i,
body.page-template-dashboard #dashboard .responsive-table li .col.eliminar .gm-i,
body.page-template-dashboard #dashboard .responsive-table li .col.qrcode .gm-i,
body.page-template-dashboard #dashboard .responsive-table li .col.visibilidad .gm-i {
  width: 17px;
  height: 17px;
}
body.page-template-dashboard #dashboard .grab-arrow .gm-i { width: 18px; height: 18px; }
body.page-template-dashboard #dashboard .gm-iconbtn .gm-i { width: 17px; height: 17px; }

/* ── modificadores: los recuentos, como en Pantallas ─────────────────────── */

body.page-template-dashboard #dashboard #modificadores .mod-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  flex: 0 0 auto;
  min-width: 46px;
  justify-content: flex-end;
  color: var(--gm-text-3, #7c7c7c);
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  cursor: default;
}
body.page-template-dashboard #dashboard #modificadores .mod-count .gm-i { width: 15px; height: 15px; }

/* ── pop-ups: la lista recupera sus tarjetas ─────────────────────────────── */
/* `.popup-list` no es `.responsive-table`, así que se quedó sin el estilo de
   fila cuando se le quitaron las clases escritas a mano. */

body.page-template-dashboard #dashboard .popup-list > li,
body.page-template-dashboard #dashboard .registros-list > li {
  min-height: 56px;
  background-color: var(--gm-surface, #171717);
  border: 1px solid var(--gm-border, #2f2f2f);
  border-radius: var(--gm-r-lg, 14px);
  transition: background-color var(--gm-t-fast), border-color var(--gm-t-fast);
}
body.page-template-dashboard #dashboard .popup-list > li:hover,
body.page-template-dashboard #dashboard .registros-list > li:hover {
  background-color: var(--gm-surface-hi, #1f1f1f);
  border-color: var(--gm-border-hi, #3d3d3d);
}

/* ── pilar: los rótulos de grupo y el pie ────────────────────────────────── */

body.page-template-dashboard .gm-navgroup__label {
  font-size: 13px;
  padding: 0 8px 10px;
}
/* Un hijo flex no baja de su contenido mientras conserve min-height:auto: por
   eso la lista de módulos no encogía y empujaba la marca fuera del pilar. */
body.page-template-dashboard #sidebar #dashboard-menu { min-height: 0; }

/* ── el tooltip del conmutador, siempre dentro del pilar ─────────────────── */

body.page-template-dashboard.gm-rail-closed .gm-rail__toggle::after {
  bottom: auto;
  top: 50%;
  left: calc(100% + 12px);
  right: auto;
  transform: translateY(-50%) translateX(-3px);
}
body.page-template-dashboard.gm-rail-closed .gm-rail__toggle:hover::after {
  transform: translateY(-50%) translateX(0);
}
body.page-template-dashboard.gm-rail-closed .gm-rail__head { overflow: visible; }

/* ── Loyalty: el buscador cabe entero ────────────────────────────────────── */

body.page-template-dashboard #dashboard #loyalty .select-container.filter-search {
  min-width: 260px;
  flex: 1 1 260px;
}

/* ==========================================================================
   Pase 6 · medidas, restos de gris y detalles de cada sección
   ========================================================================== */

/* ── la caja del contenido, más estrecha y con más aire arriba ───────────── */

body.page-template-dashboard #panel > section {
  max-width: 1100px;
  padding: 44px 40px 80px;
}

/* ── el espacio entre los comandos y el contenido es siempre el mismo ────── */
/* Cada sección traía su propio mt-4 / mt-6 y no coincidían entre ellas. */

body.page-template-dashboard #dashboard .gm-toolbar,
body.page-template-dashboard #dashboard #categories > .toolbar,
body.page-template-dashboard #dashboard #modificadores > .toolbar,
body.page-template-dashboard #dashboard #notifications > .toolbar,
body.page-template-dashboard #dashboard #popups > .popups-actions,
body.page-template-dashboard #dashboard #usuarios > .usuarios-actions,
body.page-template-dashboard #dashboard .registros-toolbar,
body.page-template-dashboard #dashboard #pantallas .breadcrumbs { margin-bottom: 22px; }

body.page-template-dashboard #dashboard section > .container,
body.page-template-dashboard #dashboard section > .responsive-table,
body.page-template-dashboard #dashboard section > .tab-content,
body.page-template-dashboard #dashboard .tab-content > .container,
body.page-template-dashboard #dashboard #loyalty > .select-all-container,
body.page-template-dashboard #dashboard .registros-list,
body.page-template-dashboard #dashboard .usuarios-list,
body.page-template-dashboard #dashboard .popup-list { margin-top: 0; }
body.page-template-dashboard #dashboard .registros-toolbar + .registros-list { margin-top: 22px; }

/* ── el marcador de posición se lee como el resto del campo ──────────────── */
/* style.css lo fija en 16px y #6b7076 !important para todo el sitio. */

body.page-template-dashboard #dashboard input::placeholder,
body.page-template-dashboard .popup_content input::placeholder,
body.page-template-dashboard .popup_content textarea::placeholder,
body.page-template-dashboard .select2-search__field::placeholder {
  font-size: inherit;
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-weight: 400;
  color: var(--gm-field-ph, #afafaf) !important;
  opacity: 1;
}

/* ── el precio: caja más ancha y los iconos pegados a ella ───────────────── */

body.page-template-dashboard #dashboard .responsive-table li .col.actions { gap: 12px; }
body.page-template-dashboard #dashboard .responsive-table li .single-price {
  min-width: 0;
  margin-left: 2px;
}
body.page-template-dashboard #dashboard .responsive-table li .single-price input.inline-price {
  width: 84px;
  min-width: 84px;
  max-width: 84px;
  padding: 0 10px;
  height: 32px;
}

/* ── los diálogos se apoyan un poco por encima del centro ────────────────── */
/* Centrados exactos quedaban muy abajo en ventanas cortas. */

body.page-template-dashboard .popup_wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 7vh 24px 12vh;
}
body.page-template-dashboard .popup_content { margin: 0 auto; }

/* ── el pie del pilar respira ────────────────────────────────────────────── */

body.page-template-dashboard #sidebar .gm-rail__foot { padding: 10px 10px 22px; }
body.page-template-dashboard #sidebar .gm-account { margin-top: 14px; }

/* ── el menú de la izquierda ─────────────────────────────────────────────── */

body.page-template-dashboard #sidebar .gm-navitem { font-size: 14px; }

/* ── selección: la casilla no se achata y el recuento va tras «Aplicar» ──── */

body.page-template-dashboard #dashboard .control-bulk > .styled-checkbox + label,
body.page-template-dashboard #dashboard #loyalty-actions-form .styled-checkbox + label {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  align-self: center;
}
body.page-template-dashboard #dashboard .gm-selection-count {
  margin: 0 0 0 4px;
  align-self: center;
}

/* ── restos del gris antiguo en el desplegable del select ────────────────── */
/* El desplegable lo mueve select2 a <body>: fuera de #dashboard, así que las
   reglas que llevaban ese prefijo no llegaban. */

body.page-template-dashboard .select2-results,
body.page-template-dashboard .select2-results__options,
body.page-template-dashboard .select2-container--default .select2-results > .select2-results__options {
  background-color: transparent;
  color: var(--gm-text-2, #afafaf);
}
body.page-template-dashboard .select2-dropdown,
body.page-template-dashboard .select2-container--open .select2-dropdown {
  background-color: var(--gm-surface, #171717);
}
body.page-template-dashboard .select2-search--dropdown .select2-search__field { font-size: 13px; }
@media (min-width: 768px) {
  body.page-template-dashboard .select2-search--dropdown .select2-search__field { font-size: 13px !important; }
}

/* ── `hidden` tiene que poder ocultar un icono ───────────────────────────── */
/* Mismo problema que con los botones: `.gm-i { display:inline-block }` pesaba
   más que `.hidden`, y por eso quedaba un cargador girando bajo la papelera. */

body.page-template-dashboard .gm-i.hidden,
.popup_content .gm-i.hidden { display: none; }

/* ── botón «Nuevo algo»: a la derecha también aquí ───────────────────────── */

body.page-template-dashboard #dashboard #pantallas .breadcrumbs {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
body.page-template-dashboard #dashboard .screen-widgets { margin-left: auto; }
body.page-template-dashboard #dashboard #pantallas .prev-slide {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--gm-text, #ececec);
  font-family: var(--gm-font-disp, 'Inter Tight', sans-serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.012em;
}
body.page-template-dashboard #dashboard #pantallas .prev-slide .gm-i {
  width: 18px;
  height: 18px;
  color: var(--gm-text-3, #7c7c7c);
}
body.page-template-dashboard #dashboard .view-screen { color: var(--gm-text-3, #7c7c7c); }
body.page-template-dashboard #dashboard .view-screen:hover { color: var(--gm-text, #ececec); }

/* ── pop-ups: el conmutador a la izquierda, la acción a la derecha ───────── */

body.page-template-dashboard #dashboard #popups .popups-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
body.page-template-dashboard #dashboard #popups .popups-actions .gm-btn--add { margin-left: auto; }
body.page-template-dashboard #dashboard #popups .section-header { margin-bottom: 18px; }

/* ── usuarios: la misma fila que en el resto del panel ───────────────────── */

body.page-template-dashboard #dashboard .usuarios-list { display: flex; flex-direction: column; gap: 8px; }
body.page-template-dashboard #dashboard .usuario-item {
  min-height: 56px;
  background-color: var(--gm-surface, #171717);
  border: 1px solid var(--gm-border, #2f2f2f);
  border-radius: var(--gm-r-lg, 14px);
  transition: background-color var(--gm-t-fast), border-color var(--gm-t-fast);
}
body.page-template-dashboard #dashboard .usuario-item:hover {
  background-color: var(--gm-surface-hi, #1f1f1f);
  border-color: var(--gm-border-hi, #3d3d3d);
}
body.page-template-dashboard #dashboard .usuario-item .actions a { color: var(--gm-text-3, #7c7c7c); }
body.page-template-dashboard #dashboard .usuario-item .actions a:hover { color: var(--gm-text, #ececec); }
body.page-template-dashboard #dashboard .usuario-item .usuario-delete-open:hover { color: var(--gm-bad, #f87171); }
body.page-template-dashboard #dashboard .gm-dot-online {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--gm-ok, #34d399);
  flex-shrink: 0;
}
body.page-template-dashboard #dashboard .usuarios-empty-state h3 {
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--gm-text-2, #afafaf);
}

/* ── Loyalty: el contador de pases no es un botón ────────────────────────── */

body.page-template-dashboard #dashboard .gm-stat {
  background-color: var(--gm-bg, #0a0a0a);
  border-color: var(--gm-border-soft, #232323);
  cursor: default;
}
body.page-template-dashboard #dashboard .gm-stat .active-passes-count > div + div {
  border-left: 1px solid var(--gm-border, #2f2f2f);
  padding-left: 9px;
  margin-left: 9px;
}

/* ── «Nuevo algo» a la derecha: el botón vive dos niveles abajo ──────────── */
/* La regla anterior miraba solo al hijo directo, y en Categorías y
   Modificadores el botón cuelga de .tool-box > .control-container. */

body.page-template-dashboard #dashboard .toolbar > .tool-box,
body.page-template-dashboard #dashboard .toolbar > *:has(.gm-btn--add),
body.page-template-dashboard #dashboard .popups-actions > *:has(.gm-btn--add),
body.page-template-dashboard #dashboard .usuarios-actions > *:has(.gm-btn--add) {
  margin-left: auto;
}
body.page-template-dashboard #dashboard .toolbar > .tool-box { padding-left: 0; }

/* ── modificadores: la pantalla de opciones ──────────────────────────────── */

body.page-template-dashboard #dashboard #mod-options { padding: 44px 40px 80px; }
body.page-template-dashboard #dashboard #mod-options > .header {
  margin: 0 0 22px;
  min-height: 38px;
}
body.page-template-dashboard #dashboard #mod-options > .header .title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.012em;
}
body.page-template-dashboard #dashboard #mod-options > .header .back { font-size: 15px !important; }

/* el formulario de añadir opciones, alineado con el resto */
body.page-template-dashboard #dashboard #mod-options #add-mods {
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
}
body.page-template-dashboard #dashboard #mod-options #add-mods .selectize-control { width: 320px !important; }
body.page-template-dashboard #dashboard #mod-options #add-mods .gm-btn,
body.page-template-dashboard #dashboard #mod-options #add-mods button { align-self: center; }

/* la fila de cada opción: el asa pegada al nombre y la caja del nombre corta */
body.page-template-dashboard #dashboard #mod-response > li { padding: 8px 16px; min-height: 52px; }
body.page-template-dashboard #dashboard #mod-response > li > .col.info { gap: 10px; }
body.page-template-dashboard #dashboard #mod-response .col.opt-title { flex: 0 1 auto; min-width: 0; }
body.page-template-dashboard #dashboard #mod-response input.opt-title {
  width: 280px;
  max-width: 100%;
}
body.page-template-dashboard #dashboard #mod-response .col.actions { width: auto; gap: 14px; }
body.page-template-dashboard #dashboard #mod-response input.opt-price { width: 84px; }

/* ==========================================================================
   Pase 7 · el buscador se pliega y las medidas se afinan
   ========================================================================== */

/* ── ancho de la sección: 1000 px y elástico ─────────────────────────────── */

body.page-template-dashboard #panel > section {
  width: 100%;
  max-width: 1000px;
  padding: 44px 32px 80px;
}

/* ── menos aire entre los comandos y el contenido ────────────────────────── */

body.page-template-dashboard #dashboard .gm-toolbar,
body.page-template-dashboard #dashboard #categories > .toolbar,
body.page-template-dashboard #dashboard #modificadores > .toolbar,
body.page-template-dashboard #dashboard #notifications > .toolbar,
body.page-template-dashboard #dashboard #popups > .popups-actions,
body.page-template-dashboard #dashboard #usuarios > .usuarios-actions,
body.page-template-dashboard #dashboard .registros-toolbar,
body.page-template-dashboard #dashboard #pantallas .breadcrumbs { margin-bottom: 14px; }
body.page-template-dashboard #dashboard .registros-toolbar + .registros-list { margin-top: 14px; }

/* la barra mide siempre lo mismo, con selección o sin ella: si no, la lista
   daba un salto cada vez que se marcaba una casilla */
body.page-template-dashboard #dashboard .gm-toolbar { min-height: 38px; }

/* ── el buscador: un cuadrado que se abre hacia la izquierda ─────────────── */

body.page-template-dashboard #dashboard .select-container.filter-search {
  position: relative;
  flex: 0 0 38px;
  width: 38px !important;
  min-width: 38px;
  max-width: none;
  height: 38px;
  margin-left: 2px;
  z-index: 3;
}
body.page-template-dashboard #dashboard .filter-search input[type="text"],
body.page-template-dashboard #dashboard input#search-items,
body.page-template-dashboard #dashboard input#loyalty-search-items {
  position: absolute;
  top: 0;
  right: 0;
  width: 38px;
  min-width: 0;
  height: 38px;
  padding: 0;
  cursor: pointer;
  color: transparent;
  background-position: center;
  transition: width var(--gm-t), padding var(--gm-t), background-position var(--gm-t);
}
body.page-template-dashboard #dashboard .filter-search input[type="text"]::placeholder { color: transparent !important; }

body.page-template-dashboard #dashboard .filter-search.is-open { z-index: 5; }
body.page-template-dashboard #dashboard .filter-search.is-open input[type="text"] {
  width: 340px;
  max-width: calc(100vw - var(--gm-rail, 264px) - 120px);
  padding: 0 12px 0 34px;
  cursor: text;
  color: var(--gm-field-text, #fff);
  background-position: left 11px center;
}
body.page-template-dashboard #dashboard .filter-search.is-open input[type="text"]::placeholder {
  color: var(--gm-field-ph, #afafaf) !important;
}

/* ── selects: «Estado» no necesita 200 px ────────────────────────────────── */

body.page-template-dashboard #dashboard .filter-box .select-container.filter-status,
body.page-template-dashboard #dashboard .filter-status .select2-container {
  width: 130px !important;
  min-width: 130px;
  max-width: 130px;
  flex: 0 0 130px;
}

/* ── «Nuevo algo»: hover claro y menos aire a los lados ──────────────────── */

body.page-template-dashboard .gm-btn.gm-btn--add {
  padding: 0 14px;
  background-color: var(--gm-primary, #f9f9f9);
  border-color: var(--gm-primary, #f9f9f9);
  color: var(--gm-primary-ink, #0a0a0a);
}
body.page-template-dashboard .gm-btn.gm-btn--add:hover,
body.page-template-dashboard .gm-btn.gm-btn--add:focus,
body.page-template-dashboard #dashboard .gm-btn--add:hover {
  background-color: #ececec;
  border-color: #ececec;
  color: var(--gm-primary-ink, #0a0a0a);
}
body.page-template-dashboard .gm-btn.gm-btn--add .gm-i { width: 15px; height: 15px; }

/* ── el desplegable del select: esquinas y borde parejos ─────────────────── */

body.page-template-dashboard .select2-dropdown,
body.page-template-dashboard .select2-container--open .select2-dropdown--below,
body.page-template-dashboard .select2-container--open .select2-dropdown--above {
  border: 1px solid var(--gm-border, #2f2f2f);
  border-top-color: var(--gm-border, #2f2f2f);
  border-bottom-color: var(--gm-border, #2f2f2f);
  border-radius: var(--gm-r-lg, 14px);
  padding: 5px;
}
body.page-template-dashboard .select2-container--default .select2-results__option { padding: 8px 11px; }

/* ── el pilar plegado: el globo, más lejos de la línea ───────────────────── */

body.page-template-dashboard.gm-rail-closed #sidebar .gm-navitem[data-gm-tip]::after,
body.page-template-dashboard.gm-rail-closed .gm-rail__toggle::after {
  left: calc(100% + 24px);
}

/* ── la marca del pie: más grande y con más aire ─────────────────────────── */

body.page-template-dashboard #sidebar .gm-account__img {
  width: 56px;
  height: 56px;
  border-radius: 12px;
}
body.page-template-dashboard #sidebar .gm-account { gap: 12px; padding: 0 8px; }
body.page-template-dashboard #sidebar .gm-rail__foot { padding: 10px 10px 26px; }
body.page-template-dashboard.gm-rail-closed #sidebar .gm-account__img { width: 42px; height: 42px; }

/* ── el distintivo del plan, en verde ────────────────────────────────────── */

body.page-template-dashboard #dashboard .gm-tag--green,
body.page-template-dashboard .gm-tag--green {
  background-color: var(--gm-tag-green-bg, #16211a);
  color: var(--gm-tag-green-fg, #4fbf7f);
  border: 1px solid currentColor;
}
body.page-template-dashboard .gm-account__plan {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--gm-r-pill, 999px);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
}

/* ── Loyalty: el contador y su línea divisoria ───────────────────────────── */

body.page-template-dashboard #dashboard .gm-stat { padding: 0 10px; gap: 10px; }
body.page-template-dashboard #dashboard .gm-stat .active-passes-count {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
}
body.page-template-dashboard #dashboard .gm-stat .active-passes-count > div {
  width: auto !important;
  padding: 0 9px;
  justify-content: center;
}
body.page-template-dashboard #dashboard .gm-stat .active-passes-count > div:first-child { padding-left: 0; }
body.page-template-dashboard #dashboard .gm-stat .active-passes-count > div:last-child { padding-right: 0; }
body.page-template-dashboard #dashboard .gm-stat .active-passes-count > div + div {
  border-left: 1px solid var(--gm-border, #2f2f2f);
  margin-left: 0;
  padding-left: 9px;
}
body.page-template-dashboard #dashboard #loyalty .toolbar-right { margin-left: auto; }
body.page-template-dashboard #dashboard #loyalty .view_pdv_form { padding: 0 12px; }

/* ── selección: la barra no mueve la lista ───────────────────────────────── */

body.page-template-dashboard #dashboard .control-bulk {
  align-items: center;
  gap: 10px;
  height: 38px;
}
body.page-template-dashboard #dashboard .gm-selection-count { margin-left: 12px; }
/* el separador vertical sobra: la barra ya no está partida en dos grupos */
body.page-template-dashboard #dashboard .gm-toolbar .tool-box > .separator,
body.page-template-dashboard #dashboard section.gm-selecting .gm-toolbar .tool-box > .separator { display: none; }
/* el selector de acción masiva mide como los demás */
body.page-template-dashboard #dashboard .control-bulk .select2-container,
body.page-template-dashboard #dashboard #loyalty-actions-form .select2-container {
  width: 170px !important;
  min-width: 170px;
  flex: 0 0 170px;
}

/* ── modificadores: la fila del grupo y la de cada opción ────────────────── */

body.page-template-dashboard #dashboard #modificadores-response > li { padding: 8px 16px; }
body.page-template-dashboard #dashboard #modificadores-response > li > .col.info,
body.page-template-dashboard #dashboard #mod-response > li > .col.info { gap: 10px; }
body.page-template-dashboard #dashboard #modificadores-response .col.actions { gap: 10px; padding-right: 4px; }
body.page-template-dashboard #dashboard #modificadores-response .mod-count { min-width: 42px; }
/* el interruptor necesita su aire respecto a la papelera */
body.page-template-dashboard #dashboard #modificadores-response .col.visibilidad,
body.page-template-dashboard #dashboard #mod-response .col.visibilidad { margin-left: 6px; }

/* la cabecera de la pantalla de opciones se lee como el nombre de la pantalla
   en Pantallas: mismo cuerpo, misma flecha, y editar no cambia el aspecto */
body.page-template-dashboard #dashboard #mod-options > .header .back {
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border-radius: 0;
  color: var(--gm-text-3, #7c7c7c);
  font-size: inherit !important;
  background: transparent;
}
body.page-template-dashboard #dashboard #mod-options > .header .back:hover {
  background: transparent;
  color: var(--gm-text, #ececec);
}
body.page-template-dashboard #dashboard #mod-options > .header .title,
body.page-template-dashboard #dashboard #mod-options > .header #modificador-title input[name="mod_title"] {
  font-family: var(--gm-font-disp, 'Inter Tight', sans-serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.2;
  color: var(--gm-text, #ececec);
}
/* al editar, el campo mantiene el aspecto del título: sin caja ni salto */
body.page-template-dashboard #dashboard #mod-options #modificador-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
body.page-template-dashboard #dashboard #mod-options #modificador-title input[name="mod_title"] {
  height: auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--gm-border-hi, #3d3d3d);
  border-radius: 0;
  width: 320px;
}
body.page-template-dashboard #dashboard #mod-options #modificador-title input[name="mod_title"]:focus {
  background: transparent;
  border-bottom-color: var(--gm-text-3, #7c7c7c);
  outline: none;
}
body.page-template-dashboard #dashboard #mod-options .inline-edit,
body.page-template-dashboard #dashboard #mod-options .confirm,
body.page-template-dashboard #dashboard #mod-options .cancel {
  width: 15px;
  height: 15px;
  color: var(--gm-text-4, #5a5a5a);
  cursor: pointer;
}
body.page-template-dashboard #dashboard #mod-options .inline-edit:hover,
body.page-template-dashboard #dashboard #mod-options .confirm:hover,
body.page-template-dashboard #dashboard #mod-options .cancel:hover { color: var(--gm-text-2, #afafaf); }

/* el formulario de añadir: select y botón alineados y con la piel del sistema */
body.page-template-dashboard #dashboard #mod-options #add-mods > div { margin: 0; padding: 0; }
body.page-template-dashboard #dashboard #mod-options #add-mods .selectize-control,
body.page-template-dashboard #dashboard #mod-options #add-mods .select2-container {
  width: 320px !important;
  min-width: 320px;
}
body.page-template-dashboard #dashboard #mod-options #add-mods .selectize-input { min-height: 38px; }

/* ── Pantallas: las filas ya son las del sistema, solo su relleno ────────── */

body.page-template-dashboard #dashboard #pantallas .responsive-table > li,
body.page-template-dashboard #dashboard #blocks-response > li { padding: 8px 16px; }
body.page-template-dashboard #dashboard #pantallas .col.actions,
body.page-template-dashboard #dashboard #blocks-response .col.actions { width: auto; gap: 14px; }

/* ==========================================================================
   Pase 8 · el peso que le faltaba al pase 7

   Aquí no hay diseño nuevo: son las reglas del pase anterior que la cascada
   descartaba. Dos causas, siempre las mismas:
   · un rival con más ids (el estado cerrado del buscador se escribió con dos
     y el abierto con uno);
   · un `!important` heredado de style.css, que gana a cualquier especificidad.
   ========================================================================== */

/* ── el buscador plegable: que se abra también donde importa ─────────────── */
/* El bloque cerrado nombra `input#search-items` e `input#loyalty-search-items`
   (dos ids). El bloque abierto solo tenía `#dashboard`, así que ganaba el
   cerrado y el campo se quedaba en 38 px con el texto transparente: se escribía
   a ciegas. Abría únicamente en Pop-ups, que no tiene regla por id. */

body.page-template-dashboard #dashboard .filter-search.is-open input#search-items,
body.page-template-dashboard #dashboard .filter-search.is-open input#loyalty-search-items {
  width: 340px;
  max-width: calc(100vw - var(--gm-rail, 264px) - 120px);
  padding: 0 12px 0 34px;
  cursor: text;
  color: var(--gm-field-text, #fff);
  background-position: left 11px center;
}
body.page-template-dashboard #dashboard .filter-search.is-open input#search-items::placeholder,
body.page-template-dashboard #dashboard .filter-search.is-open input#loyalty-search-items::placeholder {
  color: var(--gm-field-ph, #afafaf) !important;
}

/* Loyalty arrastraba el ancho mínimo de cuando el buscador estaba siempre
   abierto. Con dos ids ganaba, y la caja seguía midiendo 260 px: la lupa
   quedaba pegada a la derecha de un hueco vacío. */
body.page-template-dashboard #dashboard #loyalty .select-container.filter-search {
  flex: 0 0 38px;
  min-width: 38px;
  max-width: none;
}

/* ── el hueco entre los comandos y el contenido: 14 px de verdad ─────────── */
/* La barra ya lleva `margin-bottom: 14px`, pero el hermano de abajo conservaba
   `margin-top: 20px`; como son hermanos en flujo normal, los márgenes colapsan
   y mandaba el mayor. El hueco solo había bajado de 22 a 20 px. */

body.page-template-dashboard #dashboard .gm-toolbar + .container,
body.page-template-dashboard #dashboard .gm-toolbar ~ .container,
body.page-template-dashboard #dashboard .gm-toolbar ~ .responsive-table,
body.page-template-dashboard #dashboard .gm-toolbar ~ .select-all-container,
body.page-template-dashboard #dashboard .toolbar + .container,
body.page-template-dashboard #dashboard .popups-actions + .tab-content,
body.page-template-dashboard #dashboard .usuarios-actions + .container { margin-top: 0; }

/* ── el desplegable del select: aquí el original usa !important ──────────── */
/* style.css fija 8 px de radio y un borde superior #424242, ambos importantes.
   Sin repetir la marca, la esquina y la línea clara sobrevivían. */

body.page-template-dashboard .select2-dropdown,
body.page-template-dashboard .select2-container--open .select2-dropdown--below,
body.page-template-dashboard .select2-container--open .select2-dropdown--above {
  border-radius: var(--gm-r-lg, 14px) !important;
  border-top: 1px solid var(--gm-border, #2f2f2f) !important;
  border-bottom: 1px solid var(--gm-border, #2f2f2f) !important;
}

/* ── la casilla de «seleccionar todo», centrada de verdad ────────────────── */
/* style.css la baja 6 px con `top: 6px`. El sistema redeclaraba `position` pero
   nunca el desplazamiento, así que el `align-items: center` no servía de nada:
   el `top` relativo se aplica después de colocar la caja. */

body.page-template-dashboard #dashboard .tool-box #styled-checkbox-select-all + label,
body.page-template-dashboard #dashboard .tool-box #loyalty-styled-checkbox-select-all + label,
body.page-template-dashboard #dashboard .control-bulk .styled-checkbox + label,
body.page-template-dashboard #dashboard #loyalty-actions-form .styled-checkbox + label {
  top: 0;
  left: 0;
}

/* ── «N seleccionado»: su aire a la izquierda ────────────────────────────── */
/* El `margin-left: auto` de la barra de selección ganaba por llevar
   `.gm-selecting`, y encima resolvía a 0 porque el grupo no crece. */

body.page-template-dashboard #dashboard section.gm-selecting .gm-selection-count {
  margin-left: 12px;
  margin-right: 0;
}

/* ── Notificaciones: las filas cuelgan de un div intermedio ──────────────── */
/* Las reglas de alto usan hijo directo de `.responsive-table`, y aquí hay un
   `<div id="notifications-response">` en medio: se quedaban sin relleno. */

body.page-template-dashboard #dashboard #notifications-response > li {
  min-height: 56px;
  padding: 8px 16px;
}

/* ── Modificadores ──────────────────────────────────────────────────────── */

/* Editar el nombre no cambia el cuerpo. style.css marca todos los `input` con
   `!important`, así que hay que repetirlo o el título salta de 20 a 13 px. */
body.page-template-dashboard #dashboard #mod-options #modificador-title input[name="mod_title"] {
  font-size: 20px !important;
}
/* El formulario nace oculto y el JS lo alterna con `.hidden`; el `display:flex`
   del pase 7 se lo comía y se veían a la vez el título y el campo. */
body.page-template-dashboard #dashboard #mod-options #modificador-title.hidden { display: none; }

/* ── el móvil recupera su relleno ────────────────────────────────────────── */
/* Las media queries no suman especificidad: el `padding` del pase 7, 2 000
   líneas más abajo, pisaba el de móvil. Se repite al final, que es donde debe
   estar para ganar por orden. */

@media (max-width: 767px) {
  body.page-template-dashboard #panel > section { padding: 20px 16px 60px; }
}

/* ==========================================================================
   Pase 9 · normar lo que quedaba suelto

   Casi todo aquí es una misma idea: lo que se repite en varias secciones se
   escribe una vez, con el valor de Ítems como referencia. Ítems es el módulo
   más usado y el que más veces se ha revisado; que el resto se le parezca
   ahorra al usuario aprender cada pantalla por separado.
   ========================================================================== */

/* ── el desplegable: la esquina de fuera acompaña a la de dentro ─────────── */
/* Con 5 px de aire alrededor y opciones de 7 px de radio, la caja pide 12: con
   más, el hueco de las esquinas se ve mayor que el de los lados. */

body.page-template-dashboard .select2-dropdown,
body.page-template-dashboard .select2-container--open .select2-dropdown--below,
body.page-template-dashboard .select2-container--open .select2-dropdown--above {
  border-radius: 12px !important;
}

/* ── el buscador: un cuadrado exacto que tapa la fila entera ─────────────── */
/* El ancho de apertura no se puede escribir aquí: depende de cuántos selects
   tenga cada sección. Lo mide gm-shell.js al abrir y lo pone en línea. */

body.page-template-dashboard #dashboard .select-container.filter-search {
  margin-left: 0;          /* el mismo aire que hay entre selects: el gap de la fila */
  flex: 0 0 38px;
  width: 38px !important;
  min-width: 38px;
  max-width: 38px;
  height: 38px;
}
body.page-template-dashboard #dashboard .filter-search input[type="text"],
body.page-template-dashboard #dashboard .filter-search input#search-items,
body.page-template-dashboard #dashboard .filter-search input#loyalty-search-items,
body.page-template-dashboard #dashboard .filter-search input#search-registros {
  box-sizing: border-box;
  width: 38px;
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  border-radius: var(--gm-r-md, 10px);
  pointer-events: auto;    /* el tema viejo lo dejaba inerte: no se podía ni marcar el texto */
}
/* el globo sobra en cuanto el campo está abierto: ya se ve lo que es */
body.page-template-dashboard #dashboard .filter-search.is-open::after { opacity: 0; }

/* ── los iconos de fila miden lo mismo en todo el panel ──────────────────── */
/* La referencia es Ítems: 17 px. Al pasar del icono de fuente al sprite, cada
   sección se quedó con el tamaño que heredaba de su propio texto. */

body.page-template-dashboard #panel li .actions .gm-i,
body.page-template-dashboard #panel li .col.actions .gm-i,
body.page-template-dashboard #panel li .col.editar .gm-i,
body.page-template-dashboard #panel li .col.eliminar .gm-i,
body.page-template-dashboard #panel li .col.delete .gm-i,
body.page-template-dashboard #panel li .col.qrcode .gm-i,
body.page-template-dashboard #panel li .col.visibilidad .gm-i {
  width: 17px;
  height: 17px;
  font-size: 17px;
}
/* ── el visor del QR (Pantallas: menús, locales y botones) ───────────────── */
/* Lo abría el lightbox de Elementor, que ya no carga en el panel. Una caja
   sobre el velo: arriba el nombre y la X de los pop-ups, el QR en blanco y
   «Descargar» a todo el ancho; se cierra con la X, tocando fuera o con
   Escape (gm-shell.js). */
body.page-template-dashboard .gm-visor {
  position: fixed;
  inset: 0;
  z-index: 100002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--gm-scrim, rgba(0, 0, 0, .7));
}
body.page-template-dashboard .gm-visor[hidden] { display: none; }
body.page-template-dashboard .gm-visor__caja {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: min(340px, 100%);
  margin: 0;
  padding: 14px 20px 20px;
  border: 1px solid var(--gm-modal-border, #2e2e2e);
  border-radius: 18px;
  background: var(--gm-modal-bg, #1b1b1b);
  box-shadow: var(--gm-sh-pop);
}
body.page-template-dashboard .gm-visor__cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -6px 0 0;   /* la X, a 14 del borde como arriba */
}
body.page-template-dashboard .gm-visor__nombre {
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  color: var(--gm-modal-title, #fff);
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.page-template-dashboard .gm-visor__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 10px;
  background: #fff;
  object-fit: contain;
}
body.page-template-dashboard .gm-visor .close {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--gm-modal-split, #2e2e2e);
  border-radius: 9px;
  background: transparent;
  color: var(--gm-modal-text, #afafaf);
  cursor: pointer;
}
body.page-template-dashboard .gm-visor .close:hover { color: #fff; background: var(--gm-modal-hover, #262626); }
body.page-template-dashboard .gm-visor .close .gm-i { width: 14px; height: 14px; }
body.page-template-dashboard .gm-visor__bajar {
  width: 100%;
  height: 42px;
  text-decoration: none;
}
body.page-template-dashboard .gm-visor__bajar .gm-i { width: 17px; height: 17px; }

/* ── las islas: la forma y el movimiento ─────────────────────────────────── */
/* Novedades (borde derecho), «Por despegar» (arriba) y «Reservar cupo» de Gen2
   (abajo) son la misma pieza: una caja negra pegada a un borde de la pantalla,
   con una línea tenue, que sale del borde con una curva (gm-shell.js,
   window.gmIsla, dibuja el SVG). Abren y cierran con «abre» y entran y salen
   del borde con «suave»: dos curvas que arrancan rápido y frenan largo, sin
   pasarse (antes eran resortes que se pasaban un 2 % y un 1 %, y antes un 8 %:
   Martín las quería más fluidas y sin rebote). */
body.page-template-dashboard {
  --isla-abre: cubic-bezier(.32, .72, 0, 1);
  --isla-suave: cubic-bezier(.22, 1, .36, 1);
  --isla-negro: #000;
}
body.page-template-dashboard .gm-isla-forma {
  position: absolute;
  z-index: -1;
  overflow: visible;
  pointer-events: none;
}
body.page-template-dashboard .gm-isla-forma__relleno { fill: var(--isla-relleno, var(--isla-negro)); transition: fill .2s ease; }
body.page-template-dashboard .gm-isla-forma__linea { fill: none; stroke: rgba(255, 255, 255, .13); stroke-width: 1; }

/* el interruptor pide su aire respecto a lo que tiene al lado */
body.page-template-dashboard #panel li .col.visibilidad,
body.page-template-dashboard #panel li .visibilidad { margin-right: 8px; }
/* la papelera avisa en rojo en todas las secciones, no solo en Ítems */
body.page-template-dashboard #panel li .delete_post:hover,
body.page-template-dashboard #panel li .delete-pass:hover,
body.page-template-dashboard #panel li .delete-block:hover,
body.page-template-dashboard #panel li .popup-delete-open:hover,
body.page-template-dashboard #panel li .usuario-delete-open:hover,
body.page-template-dashboard #panel li .deletecatpopup_open:hover,
body.page-template-dashboard #panel li .col.eliminar a:hover,
body.page-template-dashboard #panel li .col.delete a:hover { color: var(--gm-bad, #f87171); }

/* ── el pilar plegado ────────────────────────────────────────────────────── */

/* el conmutador es un módulo más: mismo cuadro, mismo hover, mismo globo */
body.page-template-dashboard.gm-rail-closed #sidebar .gm-rail__toggle {
  width: 38px;
  height: 35px;
  border-radius: var(--gm-r-md, 10px);
}
/* el pie se alinea con la columna de iconos (15 px, como #dashboard-menu) */
body.page-template-dashboard.gm-rail-closed #sidebar .gm-rail__foot { padding: 8px 15px 22px; }
/* el plan no cabe plegado: queda solo la marca. La regla de .gm-tag lleva un
   id (#dashboard) y por eso se colaba pese al display:none de más arriba. */
body.page-template-dashboard.gm-rail-closed #dashboard .gm-account__plan { display: none; }
body.page-template-dashboard.gm-rail-closed #sidebar .gm-account__img { width: 38px; height: 38px; }

/* ── el mismo hueco entre cajas en todas las secciones ───────────────────── */
/* Unas listas separaban con `gap`, otras con el margen de la fila, y unas
   pocas con las dos cosas: ahí el hueco salía doble. Se deja una sola. */

body.page-template-dashboard #panel .responsive-table,
body.page-template-dashboard #panel .popup-list,
body.page-template-dashboard #panel .registros-list,
body.page-template-dashboard #panel .usuarios-list,
body.page-template-dashboard #panel #notifications-response,
body.page-template-dashboard #panel #scheduled-notifications-response,
body.page-template-dashboard #panel #follow-up-response {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.page-template-dashboard #panel .responsive-table li,
body.page-template-dashboard #panel .popup-list > li,
body.page-template-dashboard #panel .registros-list > li,
body.page-template-dashboard #panel .usuarios-list > li,
body.page-template-dashboard #panel #notifications-response > li { margin-bottom: 0; }
/* y siguen pudiendo esconderse: sin esto, `display:flex` con id le gana a
   .hidden y #slide1 de Pantallas se quedaba a la vista bajo la pantalla abierta */
body.page-template-dashboard #panel .responsive-table.hidden,
body.page-template-dashboard #panel .popup-list.hidden,
body.page-template-dashboard #panel .registros-list.hidden,
body.page-template-dashboard #panel .usuarios-list.hidden,
body.page-template-dashboard #panel #notifications-response.hidden,
body.page-template-dashboard #panel #scheduled-notifications-response.hidden,
body.page-template-dashboard #panel #follow-up-response.hidden,
body.page-template-dashboard #panel .slide.hidden { display: none; }

/* ── el texto de las cajas es el de Ítems ────────────────────────────────── */

body.page-template-dashboard #panel li .col.title,
body.page-template-dashboard #panel li .col.title a,
body.page-template-dashboard #panel li .col.title span,
body.page-template-dashboard #panel li > .title,
body.page-template-dashboard #panel li .message > span,
body.page-template-dashboard #panel li .message > span > span:first-child {
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 13.5px;
  font-weight: 450;
  line-height: 1.35;
  color: var(--gm-text, #ececec);
}

/* ── «N seleccionado»: un punto menos de aire ────────────────────────────── */

body.page-template-dashboard #dashboard section.gm-selecting .gm-selection-count { margin-left: 4px; }

/* ── «Aplicar»: el hover de la acción principal, no el del botón viejo ───── */
/* Vive dentro de .control-container, y esa regla heredada gana por tener un
   elemento de más. Se le devuelve el suyo con el selector completo. */

body.page-template-dashboard .control-container button.gm-btn--primary:hover,
body.page-template-dashboard .control-container button.gm-btn--primary:focus {
  background-color: var(--gm-primary-hi, #fff);
  border-color: var(--gm-primary-hi, #fff);
  color: var(--gm-primary-ink, #0a0a0a);
}
body.page-template-dashboard .control-container button.gm-btn--add:hover,
body.page-template-dashboard .control-container button.gm-btn--add:focus {
  background-color: #ececec;
  border-color: #ececec;
  color: var(--gm-primary-ink, #0a0a0a);
}
body.page-template-dashboard .control-container button.gm-btn:not(.gm-btn--primary):not(.gm-btn--add):hover,
body.page-template-dashboard .control-container button.gm-btn:not(.gm-btn--primary):not(.gm-btn--add):focus {
  background-color: var(--gm-surface-hi, #1f1f1f);
  border-color: var(--gm-border-hi, #3d3d3d);
  color: var(--gm-text, #ececec);
}
body.page-template-dashboard .control-container button.gm-btn--primary[disabled],
body.page-template-dashboard .control-container button.gm-btn--primary[disabled]:hover {
  background-color: var(--gm-raised, #262626);
  border-color: var(--gm-border, #2f2f2f);
  color: var(--gm-text-4, #5a5a5a);
}

/* ── el distintivo discreto ──────────────────────────────────────────────── */
/* El plan del cliente y los productos de cada usuario informan, no decoran:
   van en contorno. El color vivo se reserva para lo que cambia de estado. */

body.page-template-dashboard #dashboard .gm-tag--quiet,
body.page-template-dashboard .gm-tag--quiet {
  height: 20px;
  padding: 0 7px;
  background: transparent;
  border: 1px solid #333;
  color: var(--gm-text-2, #afafaf);
  font-size: 10px;
  font-weight: 500;
  /* el nombre del plan se lee como está escrito: ni versalitas ni espaciado */
  letter-spacing: normal;
  text-transform: none;
}

/* el plan de Loyalty sí cambia de estado: verde dentro de cuota, rojo fuera */
body.page-template-dashboard #dashboard #loyalty-badge:not(.gm-tag--green):not(.gm-tag--rose),
body.page-template-dashboard #dashboard .gm-loyalty-plan:not(.gm-tag--green):not(.gm-tag--rose) {
  background-color: var(--gm-tag-gray-bg, #1c1c1c);
  color: var(--gm-tag-gray-fg, #9a9a9a);
}

/* ── modificadores: el formulario de añadir opciones ─────────────────────── */

body.page-template-dashboard #dashboard #add-mods { align-items: center; gap: 8px; }
body.page-template-dashboard #dashboard #add-mods > div { display: flex; align-items: center; }
body.page-template-dashboard #dashboard #select-mod-opciones + .selectize-control,
body.page-template-dashboard #dashboard #add-mods .selectize-control { height: 38px; }
body.page-template-dashboard #dashboard #add-mods .selectize-input,
body.page-template-dashboard #dashboard #add-mods .selectize-control.multi .selectize-input.has-items {
  min-height: 38px;
  max-height: 38px;
  line-height: 26px;
  padding: 3px 30px 3px 10px;
  background: var(--gm-surface, #171717) !important;
  background-image: none !important;
  border: 1px solid var(--gm-border, #2f2f2f) !important;
}
body.page-template-dashboard #dashboard #add-mods .selectize-input > div.item {
  background-color: var(--gm-raised, #262626) !important;
  border: 1px solid var(--gm-border-hi, #3d3d3d) !important;
  border-radius: var(--gm-r-sm, 7px);
  color: var(--gm-text, #ececec) !important;
  line-height: 20px;
}
/* la X de limpiar se centraba contra una caja de 44 px que ya no existe */
body.page-template-dashboard #dashboard #add-mods .selectize-control.plugin-clear_button .clear {
  height: 38px;
  top: 0;
  right: 8px;
  font-size: 17px;
  opacity: .55;
  color: var(--gm-text-2, #afafaf) !important;
}
body.page-template-dashboard #dashboard #add-mods .selectize-control.plugin-clear_button .clear:hover { opacity: 1; }

/* ── el select de menú admite nombres largos ─────────────────────────────── */

body.page-template-dashboard #dashboard .filter-box .select-container.filter-menu,
body.page-template-dashboard #dashboard .toolbar .select-container.filter-menu,
body.page-template-dashboard #dashboard .filter-menu .select2-container {
  width: 240px !important;
  min-width: 240px;
  max-width: 240px;
  flex: 0 0 240px;
}

/* ── pop-ups: el recuento de registros habla como el de selección ────────── */

body.page-template-dashboard #dashboard .gm-count {
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 450;
  color: var(--gm-text-2, #afafaf);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.page-template-dashboard #dashboard .gm-count-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gm-text-3, #7c7c7c);
  cursor: pointer;
  transition: color var(--gm-t-fast);
}
body.page-template-dashboard #dashboard .gm-count-btn { color: var(--gm-text-2, #afafaf); }
body.page-template-dashboard #dashboard .gm-count-btn:hover { background: transparent; color: var(--gm-text, #ececec); }
body.page-template-dashboard #dashboard .gm-count-btn .gm-i { width: 15px; height: 15px; }
/* el recuento se va a la derecha; los filtros mandan a la izquierda */
body.page-template-dashboard #dashboard .registros-toolbar > .registros-actions { margin-left: auto; }

/* ── modificadores: el nombre de la opción es un campo, no un texto ──────── */
/* Por eso se quedaba en 13 px mientras el nombre del grupo iba a 13,5: los
   inputs del panel llevan su tamaño con !important y hay que repetirlo. */

body.page-template-dashboard #dashboard #mod-response input.opt-title,
body.page-template-dashboard #dashboard #mod-response input.opt-price {
  font-family: var(--gm-font, 'Inter', sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 450;
  color: var(--gm-text, #ececec);
}
body.page-template-dashboard #panel li .delete-mod-opt:hover { color: var(--gm-bad, #f87171); }

/* ==========================================================================
   Pase 10 · la cabecera en su esquina, el hueco vacío y el detalle fino
   ========================================================================== */

/* ── el título va a la esquina del panel; el contenido sigue en su caja ──── */
/* La sección pasa a columna: todo lo que cuelga de ella se centra a 1000 px,
   menos la cabecera, que se estira hasta el borde y deja el nombre arriba a la
   izquierda, como en el Pass Canvas. Y todo arranca más arriba. */

/* Sin flex a propósito: el router muestra y esconde las secciones con jQuery,
   que escribe `display` en línea y se llevaría por delante cualquier `flex`.
   Con bloques y márgenes automáticos el centrado aguanta igual. */
body.page-template-dashboard #panel > section:not(.gm-editor) {
  max-width: none;
  margin: 0;
  padding: 24px 24px 64px;
}
/* Con #dashboard delante: las barras de Categorías, Pop-ups y compañía se
   escribieron con dos ids y su `margin` abreviado dejaba margin-left en 0. Los
   abreviados ya son margin-bottom, y esto es la segunda cerradura. */
/* Los diálogos (popup_content, gm-dialog y los que solo llevan su max-w-*)
   cuelgan de la sección hasta que el plugin los inicializa y los saca a body:
   no son contenido y no deben coger el ancho de la caja. */
body.page-template-dashboard #dashboard #panel > section:not(.gm-editor) > *:not(.section-header):not(.popup_content):not(.gm-dialog):not([class*="max-w-"]) {
  width: 100%;
  max-width: 1000px;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.page-template-dashboard #panel > section:not(.gm-editor) > .section-header {
  max-width: none;
  margin: 0 0 22px;
}
/* la pantalla de opciones se apoya en la sección: hay que encajarla igual */
body.page-template-dashboard #dashboard #mod-options {
  left: 0;
  right: 0;
  width: auto;
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 0 64px;
}

/* ── el hueco entre los comandos y el contenido, igual en todas partes ───── */
/* Las barras de Items van dentro de .gm-toolbar, que ya las deja sin margen.
   Las de Categorías, Modificadores o Loyalty son .toolbar sueltas y sus cajas
   internas conservaban su propio margen inferior: de ahí los 18 px de más. */

body.page-template-dashboard #dashboard .toolbar > .filter-box,
body.page-template-dashboard #dashboard .toolbar > .tool-box,
body.page-template-dashboard #dashboard .gm-toolbar .filter-box,
body.page-template-dashboard #dashboard .gm-toolbar .tool-box,
body.page-template-dashboard #dashboard section > .filter-box,
body.page-template-dashboard #dashboard section > .tool-box,
body.page-template-dashboard #dashboard #loyalty .toolbar,
body.page-template-dashboard #dashboard #loyalty > .gm-toolbar .tool-box { margin-bottom: 0; }

/* ── la papelera avisa en rojo, y esta vez gana ──────────────────────────── */
/* El hover de la fila («todos los iconos a --gm-text-2») se escribió con más
   elementos, así que pisaba al del basurero justo cuando los dos se cumplen.
   Repetir toda esa cadena por cada una de las ocho clases de borrado que hay
   en el panel no es mantenible: aquí la marca sí paga la pena. */

body.page-template-dashboard #panel li .delete_post:hover,
body.page-template-dashboard #panel li .delete_post:active,
body.page-template-dashboard #panel li .delete-pass:hover,
body.page-template-dashboard #panel li .delete-pass:active,
body.page-template-dashboard #panel li .delete-block:hover,
body.page-template-dashboard #panel li .delete-mod-opt:hover,
body.page-template-dashboard #panel li .popup-delete-open:hover,
body.page-template-dashboard #panel li .usuario-delete-open:hover,
body.page-template-dashboard #panel li .deletecatpopup_open:hover,
body.page-template-dashboard #panel li .col.eliminar a:hover,
body.page-template-dashboard #panel li .col.delete a:hover,
body.page-template-dashboard #panel li .col.eliminar:hover a,
body.page-template-dashboard #panel li .col.delete:hover a { color: var(--gm-bad, #f87171) !important; }

/* ── el buscador entra sin desplazarse ───────────────────────────────────── */
/* Se abría deslizando de derecha a izquierda y el movimiento arrastraba la
   vista. Ahora aparece ya en su sitio y se revela desenfocado. */

body.page-template-dashboard #dashboard .filter-search input[type="text"],
body.page-template-dashboard #dashboard .filter-search input#search-items,
body.page-template-dashboard #dashboard .filter-search input#loyalty-search-items,
body.page-template-dashboard #dashboard .filter-search input#search-registros {
  transition: background-color var(--gm-t-fast), border-color var(--gm-t-fast);
}
body.page-template-dashboard #dashboard .filter-search.is-open input[type="text"] {
  animation: gm-search-in 190ms var(--gm-ease, cubic-bezier(.22,.61,.36,1)) both;
}
@keyframes gm-search-in {
  from { opacity: 0; filter: blur(7px); }
  to   { opacity: 1; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  body.page-template-dashboard #dashboard .filter-search.is-open input[type="text"] { animation: none; }
}

/* ── modificadores: las opciones entran fundiéndose, no deslizando ───────── */
/* El panel se escondía con `right: -100%` y entraba barriendo la pantalla.
   Ahora está siempre en su sitio y solo cambia de opacidad; `visibility` es
   lo que impide que, invisible, siga tapando la lista y comiéndose los clics. */

body.page-template-dashboard #dashboard #modificadores .container.fixed {
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 170ms var(--gm-ease, ease), transform 170ms var(--gm-ease, ease), visibility 0s linear 170ms;
}
body.page-template-dashboard #dashboard #modificadores .container.fixed.active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 170ms var(--gm-ease, ease), transform 170ms var(--gm-ease, ease), visibility 0s;
}

/* ── el desplegable: 4 de aire, 6 de esquina dentro, 10 fuera ────────────── */
/* Para que la esquina se vea igual de holgada que los lados, el radio de fuera
   tiene que ser el de dentro más el aire: 6 + 4 = 10. */

body.page-template-dashboard .select2-dropdown,
body.page-template-dashboard .select2-container--open .select2-dropdown--below,
body.page-template-dashboard .select2-container--open .select2-dropdown--above {
  border-radius: 10px !important;
  padding: 4px;
}
body.page-template-dashboard .select2-container--default .select2-results__option { border-radius: 6px; }
body.page-template-dashboard .select2-container--default .select2-search--dropdown .select2-search__field {
  border-radius: 6px;
  background-color: var(--gm-field, #212121);
  border: 1px solid var(--gm-field-border, #424242);
  color: var(--gm-field-text, #fff);
}
/* La misma cuenta para el desplegable de selectize. El tema viejo lo pinta
   #19191b con !important, así que aquí hay que repetir la marca o el fondo
   sigue siendo el de antes. */
body.page-template-dashboard #dashboard .selectize-dropdown {
  background-color: var(--gm-surface, #171717) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--gm-border, #2f2f2f) !important;
  border-radius: 10px !important;
  padding: 4px !important;
  color: var(--gm-text, #ececec) !important;
}
body.page-template-dashboard #dashboard .selectize-dropdown .option { border-radius: 6px; }
body.page-template-dashboard #dashboard .selectize-dropdown .active,
body.page-template-dashboard #dashboard .selectize-dropdown .active:not(.selected) {
  background: var(--gm-surface-active, #212121) !important;
  color: var(--gm-text, #ececec) !important;
  border-radius: 6px;
}

/* ── el pilar: el plan más pequeño y la marca sin recortar ───────────────── */

/* La pastilla del plan (Martín, 8-oct-2026, con referencia): fondo gris
   elevado, borde más claro que el fondo y el nombre en blanco, a 12. */
body.page-template-dashboard #dashboard .gm-account__plan.gm-tag--quiet,
body.page-template-dashboard .gm-account__plan.gm-tag--quiet {
  height: 22px;
  padding: 0 9px;
  background: #2c2c2c;
  border: 1px solid #4a4a4a;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}

/* la marca respira lo mismo abajo que a la izquierda */
body.page-template-dashboard #sidebar .gm-rail__foot { padding: 10px 10px 18px; }

/* plegado: la imagen se encoge para caber entera, no se recorta */
body.page-template-dashboard.gm-rail-closed #sidebar .gm-rail__foot { padding: 8px 8px 16px; }
body.page-template-dashboard.gm-rail-closed #sidebar .gm-rail__foot .gm-navlist { padding: 0 7px; }
body.page-template-dashboard.gm-rail-closed #sidebar .gm-account { padding: 0; }
body.page-template-dashboard.gm-rail-closed #sidebar .gm-account__img {
  width: 52px;
  height: 44px;
  object-fit: contain;
  border-radius: 8px;
}

/* ── el nombre de la fila se centra con su caja ──────────────────────────── */
/* Los `<span>` de Pop-ups, Registros, Usuarios y Notificaciones miden 24 px de
   alto fijos; con el interlineado normal el texto quedaba pegado arriba. */

body.page-template-dashboard #panel li .message > span { line-height: 24px; }

/* ── el hueco vacío ─────────────────────────────────────────────────────── */
/* Un icono y una frase, centrados y por encima de la mitad. Sin recuadro: el
   hueco ya se ve, no hace falta dibujarle un marco. */

body.page-template-dashboard #dashboard .gm-empty,
body.page-template-dashboard #dashboard .popup-empty-state,
body.page-template-dashboard #dashboard .registros-empty-state,
body.page-template-dashboard #dashboard .usuarios-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  min-height: 0;
  padding: 64px 24px 40px;
  border: 0;
  border-radius: 0;
  text-align: center;
}
body.page-template-dashboard #dashboard .gm-empty__box {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: #303030;
  border: 1px solid #3b3b3b;
  color: #fff;
}
body.page-template-dashboard #dashboard .gm-empty__box .gm-i { width: 26px; height: 26px; }
body.page-template-dashboard #dashboard .gm-empty__title {
  margin: 0;
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}
body.page-template-dashboard #dashboard .gm-empty__hint { display: none; }

/* el hueco vacío se enseña y se esconde con .hidden: display:flex con un id no
   puede ganarle, o quedaría siempre a la vista (mismo caso que .gm-i.hidden) */
body.page-template-dashboard #dashboard .gm-empty.hidden,
body.page-template-dashboard #dashboard .popup-empty-state.hidden,
body.page-template-dashboard #dashboard .registros-empty-state.hidden,
body.page-template-dashboard #dashboard .usuarios-empty-state.hidden { display: none; }

/* ==========================================================================
   Pase 12 · el delta: 14 px entre los controles y la primera caja, en todas
   ========================================================================== */
/* Medido en emile: el margen bajo la barra ya era 14 en todas las secciones.
   Lo que variaba era la altura de la propia barra — cada sección le colaba
   algo por dentro y los controles, de 38, quedaban lejos de la primera caja.
   Ítems 38, Categorías 58, Loyalty 65, Pop-ups 40. */

/* Categorías: el tema viejo daba 10 px de relleno arriba y abajo al .tool-box */
body.page-template-dashboard #dashboard .toolbar > .tool-box,
body.page-template-dashboard #dashboard .gm-toolbar > .tool-box,
body.page-template-dashboard #dashboard .toolbar > .filter-box,
body.page-template-dashboard #dashboard .gm-toolbar > .filter-box { padding-top: 0; padding-bottom: 0; }

/* Loyalty: .toolbar-right traía py-2 (53 de alto) y el .tool-box vacío
   saltaba a una segunda línea que sumaba el gap de la barra (65). Todo va en
   una sola línea: los controles masivos no existen hasta que hay selección, y
   entonces ocupan el sitio del contador — no cabrían los dos — así que la
   barra mide 38 siempre y la lista no se mueve. */
body.page-template-dashboard #dashboard #loyalty .gm-toolbar { flex-wrap: nowrap; }
body.page-template-dashboard #dashboard #loyalty .gm-toolbar > .toolbar {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
body.page-template-dashboard #dashboard #loyalty .gm-toolbar > .tool-box {
  display: none;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}
body.page-template-dashboard #dashboard #loyalty.gm-selecting .gm-toolbar > .tool-box { display: flex; }
body.page-template-dashboard #dashboard #loyalty.gm-selecting .toolbar-right { display: none; }
body.page-template-dashboard #dashboard #loyalty .toolbar-right,
body.page-template-dashboard #dashboard #notifications .toolbar-right { padding-top: 0; padding-bottom: 0; }

/* Pop-ups: las pestañas miden lo que un select */
body.page-template-dashboard #dashboard .popup-tabs {
  box-sizing: border-box;
  height: 38px;
  padding: 3px;
  align-items: center;
}
body.page-template-dashboard #dashboard .popup-tab { height: 30px; }

/* Loyalty con selección: «Aplicar» es type="submit" y popups.css le da 50 px
   de alto y 10 de relleno con más peso que .gm-btn; la barra crecía a 50 y la
   lista bajaba 12 px al marcar. El de Ítems es type="button" y no lo sufría. */
body.page-template-dashboard .control-container button.gm-btn[type="submit"],
body.page-template-dashboard #dashboard .tool-box button.gm-btn[type="submit"] {
  height: 38px;
  min-height: 38px;
  padding: 0 20px;
}

/* ==========================================================================
   Pase 13 · distintivos, desplegable, editores, buscador y detalle
   ========================================================================== */

/* ── el distintivo suave: informa sin contorno ───────────────────────────── */
/* Los productos de cada usuario: fondo #2a2b2b, texto #d3d3d3, sin borde y en
   frase normal. El plan del cliente conserva su contorno en versalitas. */

body.page-template-dashboard #dashboard .gm-tag--soft,
body.page-template-dashboard .gm-tag--soft {
  height: 20px;
  padding: 0 8px;
  background: #2a2b2b;
  border: 0;
  color: #d3d3d3;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* ── el plan de Loyalty, en el pilar ─────────────────────────────────────── */
/* A la derecha de «Loyalty passes». Cabe con los cuatro planes (el más largo,
   Enterprise, deja aire de sobra a 264 px). Plegado, desaparece con el texto. */

body.page-template-dashboard #dashboard #sidebar .gm-navitem__badge,
body.page-template-dashboard #sidebar .gm-navitem__badge {
  margin-left: 8px;
  height: 18px;
  padding: 0 7px;
  font-size: 10px;
  font-weight: 500;
  flex-shrink: 0;
}
body.page-template-dashboard.gm-rail-closed #dashboard #sidebar .gm-navitem__badge { display: none; }

/* ── el desplegable: la cuenta hecha con lo que había ────────────────────── */
/* Fact check: las opciones iban pegadas al borde (relleno 0, lo forzaba
   user-registration.css con !important) con 6 px de radio dentro de 10 fuera.
   Con la esquina de fuera mayor que la de dentro más el aire, el hueco de la
   esquina sale MENOR que el de los lados: la percepción era correcta.
   Ahora: 4 de relleno + 1 de borde = 5 de aire, 4 de radio dentro, 9 fuera. */

body.page-template-dashboard .select2-dropdown,
body.page-template-dashboard .select2-container--open .select2-dropdown--below,
body.page-template-dashboard .select2-container--open .select2-dropdown--above {
  border-radius: 9px !important;
  padding: 4px !important;
}
body.page-template-dashboard .select2-container--default .select2-results__option { border-radius: 4px; }
body.page-template-dashboard .select2-search--dropdown { padding: 0 0 4px; }
body.page-template-dashboard .select2-container--default .select2-search--dropdown .select2-search__field { border-radius: 4px; }
body.page-template-dashboard #dashboard .selectize-dropdown { border-radius: 9px !important; padding: 4px !important; }
body.page-template-dashboard #dashboard .selectize-dropdown .option,
body.page-template-dashboard #dashboard .selectize-dropdown .active { border-radius: 4px; }

/* ── un solo cuerpo para todos los controles: el del select, 13 px ───────── */

body.page-template-dashboard .gm-btn,
body.page-template-dashboard #dashboard .gm-btn,
body.page-template-dashboard #dashboard .gm-stat,
body.page-template-dashboard #dashboard .gm-stat .active-passes-header,
body.page-template-dashboard #dashboard .gm-stat .passes-pdv,
body.page-template-dashboard #dashboard .gm-stat .passes-total { font-size: 13px; }

/* ── modificadores: las opciones arrancan donde arranca la lista ─────────── */
/* #mod-options cuelga ahora del contenedor de la lista, así que top:0 es
   exactamente la primera caja. Mientras está abierto, la barra de arriba se
   apaga: dentro de un grupo no se crean grupos. */

body.page-template-dashboard #dashboard #modificadores > .container { position: relative; }
body.page-template-dashboard #dashboard #modificadores > .container > #mod-options {
  /* sube 38 px: la cabecera («← Elige tu pan») queda a la altura de la barra
     de herramientas de la lista (y = 78) y la tapa, en vez de arrancar en la
     primera caja con ese aire encima (Martin, 24-sep) */
  top: -38px;
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0 0 64px;
}
body.page-template-dashboard #dashboard #modificadores:has(#mod-options.active) > .toolbar { visibility: hidden; }

/* ── el hueco vacío, dos puntos más ──────────────────────────────────────── */

body.page-template-dashboard #dashboard .gm-empty__title { font-size: 16px; }

/* ── el buscador emerge en su sitio y se va igual; con su X ──────────────── */
/* Nada se desplaza: el campo aparece ya donde va a quedar, desenfocado y un
   punto más pequeño, y se consolida encima de los selects. Al cerrar, lo
   mismo al revés (is-closing lo pone gm-shell.js durante la salida). */

@keyframes gm-search-in {
  from { opacity: 0; filter: blur(9px); transform: scale(.975); }
  60%  { filter: blur(2px); }
  to   { opacity: 1; filter: blur(0); transform: scale(1); }
}
@keyframes gm-search-out {
  from { opacity: 1; filter: blur(0); }
  to   { opacity: 0; filter: blur(6px); }
}
body.page-template-dashboard #dashboard .filter-search.is-open input[type="text"] {
  transform-origin: right center;
  animation: gm-search-in 210ms var(--gm-ease, cubic-bezier(.22,.61,.36,1)) both;
}
body.page-template-dashboard #dashboard .filter-search.is-open.is-closing input[type="text"] {
  animation: gm-search-out 280ms cubic-bezier(.33, 0, .2, 1) both;
  pointer-events: none;
}
body.page-template-dashboard #dashboard .filter-search .gm-search__close {
  position: absolute;
  top: 50%;
  right: 6px;
  z-index: 6;
  display: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--gm-r-sm, 7px);
  background: transparent;
  color: var(--gm-text-3, #7c7c7c);
  transform: translateY(-50%);
  cursor: pointer;
  transition: color var(--gm-t-fast), background-color var(--gm-t-fast);
}
body.page-template-dashboard #dashboard .filter-search .gm-search__close .gm-i { width: 14px; height: 14px; }
body.page-template-dashboard #dashboard .filter-search .gm-search__close:hover { color: var(--gm-text, #ececec); background: var(--gm-surface-hi, #1f1f1f); }
body.page-template-dashboard #dashboard .filter-search.is-open .gm-search__close {
  display: grid;
  place-items: center;
  animation: gm-search-in 210ms var(--gm-ease, cubic-bezier(.22,.61,.36,1)) both;
}
body.page-template-dashboard #dashboard .filter-search.is-open.is-closing .gm-search__close {
  animation: gm-search-out 280ms cubic-bezier(.33, 0, .2, 1) both;
  pointer-events: none;
}
/* con la X dentro, el texto no se mete debajo (con los ids: la regla de
   apertura del pase 8 los lleva y si no, gana ella) */
body.page-template-dashboard #dashboard .filter-search.is-open input[type="text"],
body.page-template-dashboard #dashboard .filter-search.is-open input#search-items,
body.page-template-dashboard #dashboard .filter-search.is-open input#loyalty-search-items,
body.page-template-dashboard #dashboard .filter-search.is-open input#search-registros { padding-right: 36px; }
@media (prefers-reduced-motion: reduce) {
  body.page-template-dashboard #dashboard .filter-search.is-open input[type="text"],
  body.page-template-dashboard #dashboard .filter-search.is-open .gm-search__close { animation: none; }
}

/* ── scroll: menos trabajo para el compositor ────────────────────────────── */
/* #toaster es un fijo con desenfoque de fondo que vive siempre en la página;
   fuera de pantalla e invisible seguía costando en cada scroll. */

body.page-template-dashboard #toaster:not(.visible) {
  visibility: hidden;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.page-template-dashboard #panel { overscroll-behavior: contain; }

/* ── segundo lote ────────────────────────────────────────────────────────── */

/* el esqueleto de carga: diez filas del alto de una caja, más tenues */
body.page-template-dashboard #panel .skeleton-items .content-1 {
  height: 56px;
  border-radius: var(--gm-r-lg, 14px);
  opacity: .06;
  margin-bottom: 8px;
}

/* en los widgets de íconos sociales, los íconos se centran en la caja */
body.page-template-dashboard #dashboard #blocks-response > li .title {
  align-items: center;
  height: auto;
  min-height: 20px;
}
body.page-template-dashboard #dashboard #blocks-response > li .title i,
body.page-template-dashboard #dashboard #blocks-response > li .title .gm-i { font-size: 15px; line-height: 1; }

/* el icono del tipo de widget, del mismo cuerpo que los de acción */
body.page-template-dashboard #dashboard #blocks-response > li > .col.info > .gm-i { width: 16px; height: 16px; flex-shrink: 0; }

/* los interruptores se centran con la caja en todas las listas */
body.page-template-dashboard #panel li .actions > div:has(> .switchify),
body.page-template-dashboard #panel li .actions > div:has(> input.toSwitch),
body.page-template-dashboard #panel li .col.visibilidad {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
body.page-template-dashboard #panel li .switchify.switchify-label { display: inline-flex; align-items: center; vertical-align: middle; }

/* programación: azul cuando muestra, rojo cuando esconde — igual en todas
   (Ítems, Categorías, Pantallas y Pop-ups); nunca gris */
body.page-template-dashboard #panel li .gm-i.gm-timer-show { color: #2997ff; }
body.page-template-dashboard #panel li .gm-i.gm-timer-hide { color: var(--gm-bad, #f87171); }

/* los tres iconos de dispositivo en Loyalty miden lo mismo */
body.page-template-dashboard #dashboard #loyalty .grab-arrow .gm-i { width: 16px; height: 16px; }
body.page-template-dashboard #dashboard #loyalty .grab-arrow .gm-i.gm-is-bad { color: var(--gm-bad, #f87171); }

/* las pestañas de Pop-ups: el borde del activo dejaba el pill en 32 y quedaba
   a 3 px arriba y abajo frente a 4 a los lados; con el borde dentro, 4 y 4 */
body.page-template-dashboard #dashboard .popup-tab { box-sizing: border-box; height: 30px; }
body.page-template-dashboard #dashboard .popup-tabs { padding: 3px; }

/* ==========================================================================
   Pase 14 · la X centrada, el plan un punto a la izquierda, el asa a 15 px,
   glass en los desplegables
   ========================================================================== */

/* la X: el `scale` del keyframe pisaba el translateY(-50%) y la dejaba 13 px
   abajo. Se ancla por arriba ((38 - 26) / 2 = 6) y su animación no toca el
   transform. */
body.page-template-dashboard #dashboard .filter-search .gm-search__close {
  top: 6px;
  transform: none;
}
@keyframes gm-search-x-in  { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }
@keyframes gm-search-x-out { from { opacity: 1; filter: blur(0); } to { opacity: 0; filter: blur(6px); } }
body.page-template-dashboard #dashboard .filter-search.is-open .gm-search__close { animation-name: gm-search-x-in; }
body.page-template-dashboard #dashboard .filter-search.is-open.is-closing .gm-search__close { animation-name: gm-search-x-out; }

/* el plan de Loyalty, un punto más cerca del nombre */
body.page-template-dashboard #dashboard #sidebar .gm-navitem__badge,
body.page-template-dashboard #sidebar .gm-navitem__badge { margin-left: 5px; }

/* ── del asa al nombre: 15 px en todas las listas, como en Categorías ────── */
/* Los grupos de modificadores iban a 10 (y su asa medía 38 de ancho); las
   opciones, a 40: el campo del nombre traía relleno y su columna, margen. */
body.page-template-dashboard #panel li > .col.info,
body.page-template-dashboard #panel li .col.info { gap: 15px; }
body.page-template-dashboard #panel li .grab-arrow { width: auto; flex: 0 0 auto; padding: 0; margin: 0; }
body.page-template-dashboard #panel li .grab-arrow .gm-i,
body.page-template-dashboard #panel li .grab-arrow .handle { width: 18px; height: 18px; margin: 0; }
body.page-template-dashboard #dashboard #mod-response > li .col.opt-title { padding: 0; margin: 0; }
body.page-template-dashboard #dashboard #mod-response > li input.opt-title { padding-left: 0; margin-left: 0; }

/* ── los desplegables, de cristal ────────────────────────────────────────── */
/* Fondo translúcido con el contenido de detrás desenfocado: los mismos
   valores que los diálogos (--gm-glass, --gm-glass-blur). */
body.page-template-dashboard .select2-dropdown,
body.page-template-dashboard .select2-container--open .select2-dropdown--below,
body.page-template-dashboard .select2-container--open .select2-dropdown--above,
body.page-template-dashboard #dashboard .selectize-dropdown {
  background-color: var(--gm-glass, rgba(23, 23, 23, .72)) !important;
  -webkit-backdrop-filter: var(--gm-glass-blur, blur(20px) saturate(140%));
  backdrop-filter: var(--gm-glass-blur, blur(20px) saturate(140%));
  box-shadow: var(--gm-sh-menu);
}
body.page-template-dashboard .select2-container--default .select2-results__option--highlighted[aria-selected],
body.page-template-dashboard .select2-container--default .select2-results__option--highlighted { background-color: rgba(255, 255, 255, .07) !important; }

/* ── el autorrelleno de Chrome no pinta de blanco ────────────────────────── */
/* Al elegir una sugerencia guardada, Chrome pone su fondo claro y texto negro
   por encima de cualquier regla; solo lo tapa una sombra interior del color
   del campo. Los buscadores además llevan autocomplete="off". */
body.page-template-dashboard #dashboard input:-webkit-autofill,
body.page-template-dashboard #dashboard input:-webkit-autofill:hover,
body.page-template-dashboard #dashboard input:-webkit-autofill:focus,
body.page-template-dashboard .popup_content input:-webkit-autofill,
body.page-template-dashboard .popup_content input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--gm-field, #212121) inset !important;
  box-shadow: 0 0 0 1000px var(--gm-field, #212121) inset !important;
  -webkit-text-fill-color: var(--gm-field-text, #fff) !important;
  caret-color: var(--gm-field-text, #fff);
  transition: background-color 9999s ease-in-out 0s;
}
/* los grupos y las opciones llevaban 10 con dos ids (pase 7): mismos ids, 15 */
body.page-template-dashboard #dashboard #modificadores-response > li > .col.info,
body.page-template-dashboard #dashboard #mod-response > li > .col.info { gap: 15px; }
body.page-template-dashboard #dashboard #mod-response > li input.opt-title { border-left: 0; text-indent: 0; }
body.page-template-dashboard #dashboard #mod-response > li input.opt-title { margin-left: -1px; }

/* ==========================================================================
   Pase 15 · transparencias, pestañas, «Pases:», Integrar POS
   ========================================================================== */

/* el plan de Loyalty, otro punto a la izquierda */
body.page-template-dashboard #dashboard #sidebar .gm-navitem__badge,
body.page-template-dashboard #sidebar .gm-navitem__badge { margin-left: 2px; }

/* ── más cristal: desplegables y campos de texto ─────────────────────────── */
body.page-template-dashboard .select2-dropdown,
body.page-template-dashboard .select2-container--open .select2-dropdown--below,
body.page-template-dashboard .select2-container--open .select2-dropdown--above,
body.page-template-dashboard #dashboard .selectize-dropdown { background-color: rgba(23, 23, 23, .58) !important; }

/* los campos de texto dejan el gris opaco: un velo blanco muy tenue sobre lo
   que tengan detrás, con el borde de siempre */
body.page-template-dashboard #dashboard input[type="text"],
body.page-template-dashboard #dashboard input[type="search"],
body.page-template-dashboard #dashboard input[type="email"],
body.page-template-dashboard #dashboard input[type="number"],
body.page-template-dashboard #dashboard textarea,
body.page-template-dashboard #dashboard input#search-items,
body.page-template-dashboard #dashboard input#loyalty-search-items,
body.page-template-dashboard #dashboard input#search-registros,
body.page-template-dashboard #dashboard .filter-search input[type="text"],
body.page-template-dashboard .popup_content input[type="text"],
body.page-template-dashboard .popup_content input[type="email"],
body.page-template-dashboard .popup_content input[type="number"],
body.page-template-dashboard .popup_content textarea,
body.page-template-dashboard .select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: rgba(255, 255, 255, .07) !important;
}
body.page-template-dashboard #dashboard .filter-search.is-open input[type="text"],
body.page-template-dashboard #dashboard .filter-search.is-open input#search-items,
body.page-template-dashboard #dashboard .filter-search.is-open input#loyalty-search-items,
body.page-template-dashboard #dashboard .filter-search.is-open input#search-registros {
  background-color: rgba(30, 30, 30, .6) !important;
  -webkit-backdrop-filter: var(--gm-glass-blur, blur(20px) saturate(140%));
  backdrop-filter: var(--gm-glass-blur, blur(20px) saturate(140%));
}
/* el autorrelleno sigue tapado, ahora con el mismo tono */
body.page-template-dashboard #dashboard input:-webkit-autofill,
body.page-template-dashboard #dashboard input:-webkit-autofill:hover,
body.page-template-dashboard #dashboard input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #1c1c1c inset !important;
  box-shadow: 0 0 0 1000px #1c1c1c inset !important;
}

/* ── las pestañas: el mismo aire dentro del pill que fuera ───────────────── */
body.page-template-dashboard #dashboard .popup-tab { padding: 0 10px; }

/* ── Loyalty: «Pases:» junto al número, y el número en monoespaciada ─────── */
body.page-template-dashboard #dashboard .gm-stat { gap: 5px; }
body.page-template-dashboard #dashboard .gm-stat .active-passes-count,
body.page-template-dashboard #dashboard .gm-stat .passes-pdv,
body.page-template-dashboard #dashboard .gm-stat .passes-total {
  font-family: var(--gm-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
}

/* ── «Integrar POS»: la magia está en el borde ───────────────────────────── */
/* Un haz con los colores de un mapa de calor recorre el contorno (conic-gradient
   girando con una propiedad registrada) y deja un halo tenue. Solo con el pilar
   abierto; plegado no cabe y desaparece. */
@property --gm-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes gm-heat { to { --gm-angle: 360deg; } }

body.page-template-dashboard #sidebar .gm-pos-cta {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 10px 0 2px;
  padding: 9px 11px;
  border: 0;
  border-radius: var(--gm-r-md, 10px);
  background: #161616;
  box-shadow: inset 0 0 0 1px #2a2a2a;
  color: #fff;
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--gm-t-fast);
}
body.page-template-dashboard #sidebar .gm-pos-cta:hover { background: #1c1c1c; color: #fff; }
body.page-template-dashboard #sidebar .gm-pos-cta .gm-ico { width: 17px; height: 17px; opacity: .95; }
/* el haz: un arco de color sobre transparente, recortado al borde de 1 px */
body.page-template-dashboard #sidebar .gm-pos-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--gm-angle),
    transparent 0deg, transparent 190deg,
    #2f6bff 215deg, #19c5ff 240deg, #29e8a0 265deg, #f2e94e 290deg, #ff9a3c 315deg, #ff3d5a 345deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: gm-heat 4.5s linear infinite;
  pointer-events: none;
}
/* el halo: el mismo haz, desenfocado y por detrás */
body.page-template-dashboard #sidebar .gm-pos-cta::after {
  content: '';
  position: absolute;
  inset: -4px;
  z-index: -1;
  border-radius: 14px;
  background: conic-gradient(from var(--gm-angle),
    transparent 0deg, transparent 190deg,
    #2f6bff 215deg, #19c5ff 240deg, #29e8a0 265deg, #f2e94e 290deg, #ff9a3c 315deg, #ff3d5a 345deg,
    transparent 360deg);
  filter: blur(12px);
  opacity: .28;
  animation: gm-heat 4.5s linear infinite;
  pointer-events: none;
}
body.page-template-dashboard.gm-rail-closed #sidebar .gm-pos-cta { display: none; }
@media (prefers-reduced-motion: reduce) {
  body.page-template-dashboard #sidebar .gm-pos-cta::before,
  body.page-template-dashboard #sidebar .gm-pos-cta::after { animation: none; }
}

/* las pestañas: `#popups [data-tab]` (dos ids, pase 3) les daba 0 14px y 32 de
   alto por encima de .popup-tab; mismos ids, 16 a los lados (como los
   conmutadores de IQ y del escáner) y 30 de alto */
body.page-template-dashboard #dashboard #popups .popup-tab[data-tab] { padding: 0 16px; height: 30px; box-sizing: border-box; }

/* ── modificadores: editar el nombre no mueve nada ───────────────────────── */
/* El campo se pinta exactamente donde estaba el título — misma letra, sin caja
   ni subrayado, solo el cursor — y mide lo que mide el texto (field-sizing;
   dashboard.js pone el ancho a mano donde no exista). El check y la X van en
   fila, a la derecha del título y a 8 px. */
body.page-template-dashboard #dashboard #mod-options > .header { gap: 8px; }
body.page-template-dashboard #dashboard #mod-options #modificador-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
body.page-template-dashboard #dashboard #mod-options #modificador-title input[name="mod_title"] {
  field-sizing: content;
  width: auto;
  min-width: 2ch;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
  caret-color: var(--gm-text, #ececec);
}
body.page-template-dashboard #dashboard #mod-options #modificador-title input[name="mod_title"]:focus {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
}
body.page-template-dashboard #dashboard #mod-options #modificador-title .confirm,
body.page-template-dashboard #dashboard #mod-options #modificador-title .cancel,
body.page-template-dashboard #dashboard #mod-options #modificador-title .cancel .gm-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin: 0;
  vertical-align: middle;
  flex-shrink: 0;
}
body.page-template-dashboard #dashboard #mod-options #modificador-title .cancel { position: relative; }
body.page-template-dashboard #dashboard #mod-options #modificador-title .cancel .spinner { position: absolute; inset: 0; }

/* ── la acción principal tiene hover de verdad ───────────────────────────── */
/* Pasaba de #f9f9f9 a #fff: no se veía. El mismo #ececec que «Nuevo algo». */
body.page-template-dashboard .gm-btn--primary:hover,
body.page-template-dashboard .gm-btn--primary:focus-visible,
body.page-template-dashboard .control-container button.gm-btn--primary:hover,
body.page-template-dashboard .control-container button.gm-btn--primary:focus,
body.page-template-dashboard .tool-box button.gm-btn--primary:hover,
body.page-template-dashboard .popup_content .gm-btn--primary:hover {
  background-color: #ececec;
  border-color: #ececec;
  color: var(--gm-primary-ink, #0a0a0a);
}
body.page-template-dashboard .gm-btn--primary[disabled]:hover,
body.page-template-dashboard .control-container button.gm-btn--primary[disabled]:hover {
  background-color: var(--gm-raised, #262626);
  border-color: var(--gm-border, #2f2f2f);
  color: var(--gm-text-4, #5a5a5a);
}
/* «Agregar» apagado hasta que haya una opción elegida: mismo trato que «Aplicar» */
body.page-template-dashboard #dashboard #add-mods button[disabled],
body.page-template-dashboard #dashboard #add-mods button[disabled]:hover {
  background-color: var(--gm-raised, #262626);
  border-color: var(--gm-border, #2f2f2f);
  color: var(--gm-text-4, #5a5a5a);
  opacity: 1;
  cursor: not-allowed;
}

/* ==========================================================================
   Pase 16 · Integrar POS a su tamaño y con haces de calor; campos inline
   ========================================================================== */

/* ── «Integrar POS»: tamaño normal, sin icono, y el borde respira ────────── */
/* No es un arcoíris que gira: tres haces con los tonos fríos de un mapa
   topográfico (menta, cielo, lavanda, un rosa apagado) que aparecen en puntos
   distintos del contorno, se encienden y se apagan, y reaparecen en otro
   sitio. Cada haz lleva su propio ángulo y su propia intensidad (propiedades
   registradas) con periodos que no coinciden, así que nunca se repite igual. */
@property --gm-a1 { syntax: '<angle>'; inherits: false; initial-value: 20deg; }
@property --gm-a2 { syntax: '<angle>'; inherits: false; initial-value: 150deg; }
@property --gm-a3 { syntax: '<angle>'; inherits: false; initial-value: 260deg; }
@property --gm-o1 { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --gm-o2 { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --gm-o3 { syntax: '<number>'; inherits: false; initial-value: 0; }

@keyframes gm-haz-1 {
  0%   { --gm-a1: 20deg;  --gm-o1: 0; }
  14%  { --gm-o1: 1; }
  30%  { --gm-a1: 20deg;  --gm-o1: 0; }
  31%  { --gm-a1: 205deg; }
  46%  { --gm-o1: 1; }
  62%  { --gm-a1: 205deg; --gm-o1: 0; }
  63%  { --gm-a1: 118deg; }
  80%  { --gm-o1: 1; }
  100% { --gm-a1: 118deg; --gm-o1: 0; }
}
@keyframes gm-haz-2 {
  0%   { --gm-a2: 150deg; --gm-o2: 0; }
  18%  { --gm-o2: .9; }
  36%  { --gm-a2: 150deg; --gm-o2: 0; }
  37%  { --gm-a2: 330deg; }
  55%  { --gm-o2: .9; }
  70%  { --gm-a2: 330deg; --gm-o2: 0; }
  71%  { --gm-a2: 62deg; }
  86%  { --gm-o2: .9; }
  100% { --gm-a2: 62deg;  --gm-o2: 0; }
}
@keyframes gm-haz-3 {
  0%   { --gm-a3: 260deg; --gm-o3: 0; }
  22%  { --gm-o3: .8; }
  40%  { --gm-a3: 260deg; --gm-o3: 0; }
  41%  { --gm-a3: 95deg; }
  60%  { --gm-o3: .8; }
  76%  { --gm-a3: 95deg;  --gm-o3: 0; }
  77%  { --gm-a3: 178deg; }
  90%  { --gm-o3: .8; }
  100% { --gm-a3: 178deg; --gm-o3: 0; }
}

body.page-template-dashboard #sidebar .gm-pos-cta {
  display: inline-flex;
  width: auto;
  gap: 0;
  margin: 10px 0 2px;
  padding: 9px 12px;
  background: #171717;
  box-shadow: inset 0 0 0 1px #2c2c2c;
}
body.page-template-dashboard #sidebar .gm-pos-cta:hover { background: #1d1d1d; }
/* el haz: menta → cielo → lavanda → rosa apagado, sobre transparente */
body.page-template-dashboard #sidebar .gm-pos-cta::before,
body.page-template-dashboard #sidebar .gm-pos-cta::after {
  background:
    conic-gradient(from var(--gm-a1), transparent 0deg, rgb(163 232 205 / var(--gm-o1)) 10deg, rgb(140 212 244 / var(--gm-o1)) 22deg, rgb(196 178 246 / var(--gm-o1)) 34deg, rgb(236 176 204 / var(--gm-o1)) 44deg, transparent 56deg, transparent 360deg),
    conic-gradient(from var(--gm-a2), transparent 0deg, rgb(140 212 244 / var(--gm-o2)) 8deg, rgb(163 232 205 / var(--gm-o2)) 20deg, rgb(221 232 160 / var(--gm-o2)) 30deg, rgb(196 178 246 / var(--gm-o2)) 40deg, transparent 50deg, transparent 360deg),
    conic-gradient(from var(--gm-a3), transparent 0deg, rgb(196 178 246 / var(--gm-o3)) 8deg, rgb(236 176 204 / var(--gm-o3)) 18deg, rgb(140 212 244 / var(--gm-o3)) 30deg, rgb(163 232 205 / var(--gm-o3)) 40deg, transparent 50deg, transparent 360deg);
  animation: gm-haz-1 6.4s ease-in-out infinite, gm-haz-2 8.9s ease-in-out infinite, gm-haz-3 7.3s ease-in-out infinite;
}
body.page-template-dashboard #sidebar .gm-pos-cta::after { inset: -3px; border-radius: 13px; filter: blur(8px); opacity: .35; }

/* ── los campos que se editan en la fila siguen siendo texto plano ───────── */
/* El velo blanco de los campos de texto (pase 15) los alcanzaba: el precio de
   Ítems, el nombre y el precio de las opciones y el nombre del grupo no llevan
   caja hasta que se enfocan, igual que antes. */
body.page-template-dashboard #dashboard input.inline-price,
body.page-template-dashboard #panel .responsive-table li .single-price input.inline-price,
body.page-template-dashboard #dashboard #mod-response input.opt-title,
body.page-template-dashboard #dashboard #mod-response input.opt-price,
body.page-template-dashboard #dashboard #mod-options #modificador-title input[name="mod_title"] {
  background-color: transparent !important;
}
body.page-template-dashboard #panel .responsive-table li .single-price input.inline-price:focus,
body.page-template-dashboard #dashboard input.inline-price:focus {
  background-color: var(--gm-bg, #0a0a0a) !important;
}
body.page-template-dashboard #dashboard #mod-response input.opt-title:focus,
body.page-template-dashboard #dashboard #mod-response input.opt-price:focus {
  background-color: var(--gm-bg, #0a0a0a) !important;
  border-color: var(--gm-border-hi, #3d3d3d);
}

/* ==========================================================================
   Pase 17 · el POS alineado y más vivo; «Aplicar» igual en Loyalty
   ========================================================================== */

/* alineado con los iconos de los módulos (9 px de relleno del item) */
body.page-template-dashboard #sidebar .gm-pos-cta { margin-left: 9px; }

/* Los haces, más ágiles y continuos: cada uno se desliza mientras se enciende
   y se apaga (el ángulo ya no salta, avanza), los periodos bajan y los tres se
   solapan, así que siempre hay luz en algún punto del borde. Y entra un rojo
   metálico entre el rosa y la lavanda. */
@keyframes gm-haz-1 {
  0%   { --gm-a1: 10deg;  --gm-o1: 0; }
  12%  { --gm-o1: 1; }
  30%  { --gm-a1: 70deg;  --gm-o1: 0; }
  31%  { --gm-a1: 200deg; }
  44%  { --gm-o1: 1; }
  62%  { --gm-a1: 262deg; --gm-o1: 0; }
  63%  { --gm-a1: 110deg; }
  78%  { --gm-o1: 1; }
  100% { --gm-a1: 172deg; --gm-o1: 0; }
}
@keyframes gm-haz-2 {
  0%   { --gm-a2: 150deg; --gm-o2: 0; }
  16%  { --gm-o2: .95; }
  36%  { --gm-a2: 215deg; --gm-o2: 0; }
  37%  { --gm-a2: 330deg; }
  52%  { --gm-o2: .95; }
  70%  { --gm-a2: 392deg; --gm-o2: 0; }
  71%  { --gm-a2: 60deg; }
  85%  { --gm-o2: .95; }
  100% { --gm-a2: 118deg; --gm-o2: 0; }
}
@keyframes gm-haz-3 {
  0%   { --gm-a3: 260deg; --gm-o3: 0; }
  20%  { --gm-o3: .9; }
  40%  { --gm-a3: 318deg; --gm-o3: 0; }
  41%  { --gm-a3: 95deg; }
  58%  { --gm-o3: .9; }
  76%  { --gm-a3: 150deg; --gm-o3: 0; }
  77%  { --gm-a3: 178deg; }
  90%  { --gm-o3: .9; }
  100% { --gm-a3: 236deg; --gm-o3: 0; }
}
body.page-template-dashboard #sidebar .gm-pos-cta::before,
body.page-template-dashboard #sidebar .gm-pos-cta::after {
  background:
    conic-gradient(from var(--gm-a1), transparent 0deg, rgb(163 232 205 / var(--gm-o1)) 10deg, rgb(140 212 244 / var(--gm-o1)) 22deg, rgb(196 178 246 / var(--gm-o1)) 34deg, rgb(222 108 118 / var(--gm-o1)) 46deg, rgb(236 176 204 / var(--gm-o1)) 56deg, transparent 68deg, transparent 360deg),
    conic-gradient(from var(--gm-a2), transparent 0deg, rgb(140 212 244 / var(--gm-o2)) 8deg, rgb(163 232 205 / var(--gm-o2)) 20deg, rgb(221 232 160 / var(--gm-o2)) 30deg, rgb(222 108 118 / var(--gm-o2)) 42deg, rgb(196 178 246 / var(--gm-o2)) 52deg, transparent 62deg, transparent 360deg),
    conic-gradient(from var(--gm-a3), transparent 0deg, rgb(196 178 246 / var(--gm-o3)) 8deg, rgb(222 108 118 / var(--gm-o3)) 18deg, rgb(236 176 204 / var(--gm-o3)) 28deg, rgb(140 212 244 / var(--gm-o3)) 40deg, rgb(163 232 205 / var(--gm-o3)) 50deg, transparent 60deg, transparent 360deg);
  animation: gm-haz-1 4.2s ease-in-out infinite, gm-haz-2 5.6s ease-in-out infinite, gm-haz-3 4.9s ease-in-out infinite;
}

/* ── «Aplicar» de Loyalty: el mismo primario que el de Ítems ────────────── */
/* Es type="submit" y una regla vieja de botones de formulario le ponía fondo
   transparente, texto blanco y 12 px de radio por encima de .gm-btn--primary. */
body.page-template-dashboard #dashboard .control-container button.gm-btn--primary[type="submit"],
body.page-template-dashboard #dashboard .tool-box button.gm-btn--primary[type="submit"],
body.page-template-dashboard #dashboard #loyalty-actions-form button.gm-btn--primary {
  background-color: var(--gm-primary, #f9f9f9) !important;
  border: 1px solid var(--gm-primary, #f9f9f9) !important;
  border-radius: var(--gm-r-pill, 999px) !important;
  color: var(--gm-primary-ink, #0a0a0a) !important;
  height: 38px;
  padding: 0 20px;
  opacity: 1;
}
body.page-template-dashboard #dashboard .control-container button.gm-btn--primary[type="submit"]:hover,
body.page-template-dashboard #dashboard #loyalty-actions-form button.gm-btn--primary:hover {
  background-color: #ececec !important;
  border-color: #ececec !important;
}
body.page-template-dashboard #dashboard .control-container button.gm-btn--primary[type="submit"][disabled],
body.page-template-dashboard #dashboard #loyalty-actions-form button.gm-btn--primary[disabled],
body.page-template-dashboard #dashboard .control-container button.gm-btn--primary[type="submit"][disabled]:hover {
  background-color: var(--gm-raised, #262626) !important;
  border-color: var(--gm-border, #2f2f2f) !important;
  color: var(--gm-text-4, #5a5a5a) !important;
  opacity: .38;
}

/* ── «Agregar» apagado, con más sutileza: el mismo blanco, atenuado ──────── */
body.page-template-dashboard #dashboard #add-mods button[disabled],
body.page-template-dashboard #dashboard #add-mods button[disabled]:hover {
  background-color: var(--gm-primary, #f9f9f9);
  border-color: var(--gm-primary, #f9f9f9);
  color: var(--gm-primary-ink, #0a0a0a);
  opacity: .45;
  cursor: not-allowed;
}
/* bloque a su ancho: inline-flex fluía como texto y lo colocaba el text-align
   del grupo, no el margen */
body.page-template-dashboard #sidebar .gm-pos-cta { display: flex; width: max-content; max-width: 100%; }

/* ── Integrar POS: la luz fluye, no parpadea ─────────────────────────────── */
/* Nada se apaga ni salta: los tres haces giran sin cortes a velocidades
   distintas (uno al revés) y su intensidad solo respira entre .55 y 1. Los
   arcos son más largos y se desvanecen por los dos extremos, así que lo que
   se ve es un brillo iridiscente que recorre el contorno de forma continua. */
@keyframes gm-giro-1 { from { --gm-a1: 0deg; }   to { --gm-a1: 360deg; } }
@keyframes gm-giro-2 { from { --gm-a2: 360deg; } to { --gm-a2: 0deg; } }
@keyframes gm-giro-3 { from { --gm-a3: 120deg; } to { --gm-a3: 480deg; } }
@keyframes gm-brillo-1 { from { --gm-o1: .55; } to { --gm-o1: 1; } }
@keyframes gm-brillo-2 { from { --gm-o2: 1; }   to { --gm-o2: .6; } }
@keyframes gm-brillo-3 { from { --gm-o3: .65; } to { --gm-o3: 1; } }

body.page-template-dashboard #sidebar .gm-pos-cta::before,
body.page-template-dashboard #sidebar .gm-pos-cta::after {
  background:
    conic-gradient(from var(--gm-a1), transparent 0deg, rgb(163 232 205 / calc(var(--gm-o1) * .5)) 14deg, rgb(140 212 244 / var(--gm-o1)) 34deg, rgb(196 178 246 / var(--gm-o1)) 54deg, rgb(222 108 118 / var(--gm-o1)) 72deg, rgb(236 176 204 / calc(var(--gm-o1) * .5)) 90deg, transparent 108deg, transparent 360deg),
    conic-gradient(from var(--gm-a2), transparent 0deg, rgb(140 212 244 / calc(var(--gm-o2) * .5)) 12deg, rgb(163 232 205 / var(--gm-o2)) 30deg, rgb(221 232 160 / var(--gm-o2)) 48deg, rgb(222 108 118 / var(--gm-o2)) 64deg, rgb(196 178 246 / calc(var(--gm-o2) * .5)) 82deg, transparent 100deg, transparent 360deg),
    conic-gradient(from var(--gm-a3), transparent 0deg, rgb(196 178 246 / calc(var(--gm-o3) * .5)) 12deg, rgb(222 108 118 / var(--gm-o3)) 28deg, rgb(236 176 204 / var(--gm-o3)) 44deg, rgb(140 212 244 / var(--gm-o3)) 60deg, rgb(163 232 205 / calc(var(--gm-o3) * .5)) 78deg, transparent 96deg, transparent 360deg);
  animation:
    gm-giro-1 14s linear infinite,
    gm-giro-2 19s linear infinite,
    gm-giro-3 23s linear infinite,
    gm-brillo-1 5s ease-in-out infinite alternate,
    gm-brillo-2 7s ease-in-out infinite alternate,
    gm-brillo-3 9s ease-in-out infinite alternate;
}
body.page-template-dashboard #sidebar .gm-pos-cta::after { opacity: .3; }
/* bastante más rápido: los giros a 5.5, 7.5 y 9 s; la respiración a 2.8, 3.6 y 4.4 */
body.page-template-dashboard #sidebar .gm-pos-cta::before,
body.page-template-dashboard #sidebar .gm-pos-cta::after {
  animation:
    gm-giro-1 5.5s linear infinite,
    gm-giro-2 7.5s linear infinite,
    gm-giro-3 9s linear infinite,
    gm-brillo-1 2.8s ease-in-out infinite alternate,
    gm-brillo-2 3.6s ease-in-out infinite alternate,
    gm-brillo-3 4.4s ease-in-out infinite alternate;
}

/* ── «Pendiente» junto a Integración POS: rojo más vivo y con pulso ──────── */
/* Un halo del mismo rojo que nace en el borde, se expande 6 px y se disuelve,
   cada 2.2 s. El distintivo en sí no cambia: late lo de alrededor. */
@keyframes gm-pulso {
  0%   { box-shadow: 0 0 0 0 rgba(255, 90, 103, .45); }
  70%  { box-shadow: 0 0 0 6px rgba(255, 90, 103, 0); }
  100% { box-shadow: 0 0 0 6px rgba(255, 90, 103, 0); }
}
body.page-template-dashboard #dashboard .gm-tag--pos,
body.page-template-dashboard .gm-tag--pos {
  background-color: #2b161a;
  color: #ff5a67;
  border: 1px solid currentColor;
  animation: gm-pulso 2.2s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  body.page-template-dashboard .gm-tag--pos { animation: none; }
}
/* «Pendiente» sin pulso: el rojo vivo basta */
body.page-template-dashboard #dashboard .gm-tag--pos,
body.page-template-dashboard .gm-tag--pos { animation: none; box-shadow: none; }

/* ── el plan de Loyalty: verde más apagado ───────────────────────────────── */
body.page-template-dashboard #dashboard .gm-tag--green,
body.page-template-dashboard .gm-tag--green,
body.page-template-dashboard #sidebar #loyalty-badge.gm-tag--green {
  background-color: #1c2620;
  color: #9bdebd;
  border: 1px solid #29603d;
}

/* ── el botón «Integración POS», de vuelta con enchufe y en cobre ────────── */
body.page-template-dashboard #sidebar .gm-pos-cta {
  gap: 9px;
  background: #4e2018;
  color: #edefee;
  box-shadow: inset 0 0 0 1px #5e2a20;
}
body.page-template-dashboard #sidebar .gm-pos-cta:hover { background: #5a261c; color: #edefee; }
body.page-template-dashboard #sidebar .gm-pos-cta .gm-ico { width: 17px; height: 17px; color: #eb8e84; opacity: 1; }

/* ── el botón POS: borde sólido, más aire a la derecha, en el pie ────────── */
body.page-template-dashboard #sidebar .gm-pos-cta {
  margin: 2px 0 8px 9px;
  padding: 9px 16px 9px 12px;
  box-shadow: none;
  border: 1px solid #7d4139;
}
body.page-template-dashboard #sidebar .gm-pos-cta::before,
body.page-template-dashboard #sidebar .gm-pos-cta::after { display: none; animation: none; content: none; }

/* ── «Pendiente»: la paleta del plan de Loyalty, con el rojo de matriz ───── */
/* Misma saturación y luminosidad que #1c2620 / #9bdebd / #29603d, matiz a 355°. */
body.page-template-dashboard #dashboard .gm-tag--pos,
body.page-template-dashboard .gm-tag--pos {
  background-color: #261c1d;
  color: #de9ba1;
  border: 1px solid #60292e;
}
/* «Pendiente»: el texto en #ff5f6d y el fondo, ese mismo rojo al 17 % */
body.page-template-dashboard #dashboard .gm-tag--pos,
body.page-template-dashboard .gm-tag--pos { color: #ff5f6d; background-color: #ff5f6d2b; }


/* ═══════════════════════════════════════════════════════════════════════════
   Pase 18 — design system de pop-ups (gm-modal). Primero en crear/editar ítem;
   después se replica en los demás. Estructura: pilar de pestañas a la
   izquierda; a la derecha el título del pop-up, el título de la sección con su
   bajada, filas separadas por 1px y el pie con «Guardar». La X va arriba a la
   derecha. Ninguna instancia del panel usa peso 700: los títulos van en 600.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --gm-modal-bg:           #212121;  /* fondo del pop-up */
  --gm-modal-border:       #2e2e2e;  /* borde exterior */
  --gm-modal-split:        #383838;  /* línea entre el pilar y el panel */
  --gm-modal-line:         #2c2c2c;  /* separadores del panel */
  --gm-modal-active:       #303030;  /* pestaña activa */
  --gm-modal-hover:        #292929;  /* pestaña en hover */
  --gm-modal-field:        #1b1b1b;  /* inputs y selects */
  --gm-modal-field-border: #272727;
  --gm-modal-field-focus:  #3a3a3a;  /* el foco sólo aclara el borde */
  --gm-modal-chip:         #212121;  /* opción elegida en un select múltiple */
  --gm-modal-chip-border:  #424242;
  --gm-modal-title:        #ffffff;
  --gm-modal-text:         #afafaf;
  --gm-modal-dot:          #4e82ee;  /* la sección tiene contenido */
  --gm-modal-rail:         240px;
}

/* ── la caja ─────────────────────────────────────────────────────────────── */
/* El ancho lo da --gm-modal-w (700 por defecto; --md 560, --sm 460). */
body.page-template-dashboard .gm-modal,
body.page-template-dashboard #formpopup.gm-modal,
body.page-template-dashboard .gm-modal.popup_content {
  --gm-modal-w: 700px;
  background-color: var(--gm-modal-bg) !important;
  border: 1px solid var(--gm-modal-border) !important;
  border-radius: 18px;
  box-shadow: var(--gm-sh-pop);
  width: min(var(--gm-modal-w), 100%) !important;
  max-width: var(--gm-modal-w) !important;
  padding: 0 !important;
  overflow: hidden;
  text-align: left;
}
body.page-template-dashboard .gm-modal.gm-modal--md { --gm-modal-w: 560px; }
body.page-template-dashboard .gm-modal.gm-modal--sm { --gm-modal-w: 460px; }
body.page-template-dashboard .gm-modal > * { padding: 0 !important; }
body.page-template-dashboard .gm-modal .popup-preloader {
  background-color: var(--gm-modal-bg);
  border-color: var(--gm-modal-border);
  animation: none;
}
/* el spinner de carga, a un ritmo tranquilo */
body.page-template-dashboard .gm-modal .popup-preloader .gm-spin { animation: gm-rotate 2.4s linear infinite !important; }

body.page-template-dashboard .gm-modal__body {
  display: grid;
  grid-template-columns: var(--gm-modal-rail) minmax(0, 1fr);
  height: min(680px, calc(81 * var(--gm-vh, 1vh)));
  min-height: 0;
}

/* ── pilar ───────────────────────────────────────────────────────────────── */
body.page-template-dashboard .gm-modal__side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 12px;
  border-right: 1px solid var(--gm-modal-split);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* la X, arriba a la derecha y en caja (también en los diálogos) */
body.page-template-dashboard .gm-modal .close,
body.page-template-dashboard .gm-dialog .close {
  position: absolute !important;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid var(--gm-modal-split);
  background: var(--gm-modal-bg);
  color: var(--gm-modal-text);
  font-size: 14px;
  cursor: pointer;
  transition: background-color var(--gm-t-fast), color var(--gm-t-fast), border-color var(--gm-t-fast);
}
body.page-template-dashboard .gm-modal .close:hover,
body.page-template-dashboard .gm-dialog .close:hover {
  background: var(--gm-modal-active);
  border-color: #454545;
  color: #fff;
}
body.page-template-dashboard .gm-modal .close .gm-i,
body.page-template-dashboard .gm-dialog .close .gm-i { width: 14px; height: 14px; }

/* pestañas */
body.page-template-dashboard .gm-modal__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.page-template-dashboard .gm-modal__tab {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 38px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #d4d4d4;
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 450;
  letter-spacing: -.004em;
  line-height: 1;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--gm-t-fast), color var(--gm-t-fast);
}
body.page-template-dashboard .gm-modal__tab .gm-i {
  flex: none;
  width: 17px;
  height: 17px;
  color: #b5b5b5;
  transition: color var(--gm-t-fast);
}
body.page-template-dashboard .gm-modal__tab-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.page-template-dashboard .gm-modal__tab:hover { background: var(--gm-modal-hover); color: #fff; }
body.page-template-dashboard .gm-modal__tab.is-active { background: var(--gm-modal-active); color: #fff; }
body.page-template-dashboard .gm-modal__tab.is-active .gm-i,
body.page-template-dashboard .gm-modal__tab:hover .gm-i { color: #fff; }
body.page-template-dashboard .gm-modal__tab:focus-visible { outline: 1px solid #5a5a5a; outline-offset: 1px; }
body.page-template-dashboard .gm-modal__tab.is-hidden { display: none !important; }
/* punto: la sección tiene contenido (gm-shell.js) */
body.page-template-dashboard .gm-modal__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gm-modal-dot);
  opacity: 0;
  transition: opacity var(--gm-t-fast);
}
body.page-template-dashboard .gm-modal__tab.has-content .gm-modal__dot { opacity: 1; }
body.page-template-dashboard .gm-modal__pro {
  flex: none;
  padding: 4px 6px;
  border-radius: 4px;
  background: #b4efd7;
  color: #000;
  font-size: 8px;
  font-weight: 600;
  line-height: 1;
}

/* ── panel ───────────────────────────────────────────────────────────────── */
body.page-template-dashboard .gm-modal__main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
/* título del pop-up: «Nuevo ítem», o «Editando ítem» y el nombre debajo */
body.page-template-dashboard .gm-modal__main > .header {
  flex: none;
  margin: 0 !important;
  padding: 16px 60px 14px 20px;
  border-bottom: 1px solid var(--gm-modal-line);
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.014em;
  text-transform: none;
  color: var(--gm-modal-title);
}
body.page-template-dashboard .gm-modal__main > .header br { display: none; }
body.page-template-dashboard .gm-modal__main > .header span { font-weight: 600; }
body.page-template-dashboard .gm-modal__main > .header .gm-modal__sub,
body.page-template-dashboard .gm-modal__main > .header .item-name {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 450 !important;
  line-height: 1.35;
  color: var(--gm-modal-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.page-template-dashboard .gm-modal__main > .header .item-name:empty,
body.page-template-dashboard .gm-modal__main > .header .gm-modal__sub:empty { display: none; }
body.page-template-dashboard .gm-modal__main > .header .hidden { display: none; }

body.page-template-dashboard .gm-modal__main > form,
body.page-template-dashboard .gm-modal__main > .gm-modal__form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin: 0;
}
body.page-template-dashboard .gm-modal__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 20px 10px;
}
body.page-template-dashboard .gm-modal__foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border-top: 1px solid var(--gm-modal-line);
}

/* una sección a la vez; la clase la pone gm-shell.js */
body.page-template-dashboard .gm-modal .form-section {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
}
body.page-template-dashboard .gm-modal .form-section.active { display: block !important; }

/* el acordeón viejo (slideUp/slideToggle de dashboard.js) escribe display,
   height y overflow inline sobre los campos: acá no mandan */
body.page-template-dashboard .gm-modal .form-section-fields {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
}

/* la cabecera de la sección deja de ser un control: título y bajada del panel */
body.page-template-dashboard .gm-modal .form-section-header {
  display: block;
  pointer-events: none;
  cursor: default;
  min-height: 0;
  margin: 0;
  padding: 2px 0 12px;
  border-bottom: 1px solid var(--gm-modal-line);
  border-radius: 0;
}
body.page-template-dashboard .gm-modal .form-section-header .info-tooltip-icon { pointer-events: auto; }
body.page-template-dashboard .gm-modal .form-section-header h3 {
  gap: 0;
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  text-transform: none;
  color: var(--gm-modal-title) !important;
}
body.page-template-dashboard .gm-modal .form-section-header h3 > .gm-i,
body.page-template-dashboard .gm-modal .form-section-header h3 > span.ml-2,
body.page-template-dashboard .gm-modal .form-section-header .arrow { display: none !important; }
body.page-template-dashboard .gm-modal .gm-modal__lead {
  margin: 4px 0 0;
  font-size: 12.5px;
  font-weight: 450;
  line-height: 1.5;
  color: var(--gm-modal-text);
}

/* filas: cada grupo del formulario, separado por 1px */
body.page-template-dashboard .gm-modal .form-section-fields > * {
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--gm-modal-line);
}
body.page-template-dashboard .gm-modal .form-section-fields > *:last-child { border-bottom: 0; }
body.page-template-dashboard .gm-modal .form-section-fields > script,
body.page-template-dashboard .gm-modal .form-section-fields > style { display: none; padding: 0; border: 0; }
/* dentro de la fila el espacio lo dan las etiquetas, no los gap de Tailwind */
body.page-template-dashboard .gm-modal .form-section-fields .flex-col { row-gap: 0 !important; }
body.page-template-dashboard .gm-modal .form-section-fields .local-checkbox-group.flex-col { row-gap: 12px !important; }
body.page-template-dashboard .gm-modal .form-section-fields [id^="traduccion-"] > .form-group + .form-group { margin-top: 12px; }

/* texto del panel */
body.page-template-dashboard .gm-modal .form-section-fields label {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--gm-modal-title);
}
body.page-template-dashboard .gm-modal .form-section-fields label img { width: 16px; height: auto; margin-right: 6px; }
body.page-template-dashboard .gm-modal .form-section-fields label .info-tooltip-icon { margin-left: 6px; }
body.page-template-dashboard .gm-modal .gm-req { color: #ff5f6d; margin-left: 1px; }
body.page-template-dashboard .gm-modal .gm-hint {
  display: block;
  margin: -2px 0 8px;
  font-size: 12.5px;
  font-style: normal;
  font-weight: 450;
  line-height: 1.5;
  color: var(--gm-modal-text);
}
/* Una bajada que se enciende y se apaga (la de la imagen o el logo heredados)
   lleva .hidden: sin esto, el display de arriba podía más y se veía siempre. */
body.page-template-dashboard .gm-modal .gm-hint.hidden { display: none; }
body.page-template-dashboard .gm-modal .form-section-fields p,
body.page-template-dashboard .gm-modal .form-section-fields .text-xs,
body.page-template-dashboard .gm-modal .form-section-fields .text-sm {
  color: var(--gm-modal-text);
  opacity: 1;
}
body.page-template-dashboard .gm-modal .form-section-fields p.gm-hint { margin: 10px 0 0; text-align: left; }
/* subtítulo («Selecciona el horario») */
body.page-template-dashboard .gm-modal .form-section-fields .text-lg {
  margin: 18px 0 6px !important;
  font-size: 13px !important;
  font-weight: 500;
  line-height: 1.3;
  color: var(--gm-modal-title);
}
/* etiquetas de opción (casillas, días, menús): texto normal, sin margen */
body.page-template-dashboard .gm-modal .simbologias label,
body.page-template-dashboard .gm-modal .timer label,
body.page-template-dashboard .gm-modal .local-checkbox-group label {
  margin: 0;
  font-weight: 450;
  color: var(--gm-text, #ececec);
}
/* filas con switch: texto a la izquierda (con su ayuda debajo), switch a la derecha */
body.page-template-dashboard .gm-modal .form-group.sin-stock > label,
body.page-template-dashboard .gm-modal .form-group.enable_timer > label {
  width: 100%;
  margin: 0;
  align-items: center;
}
body.page-template-dashboard .gm-modal .form-group.sin-stock > label { align-items: flex-start; }
body.page-template-dashboard .gm-modal .form-group.sin-stock > label > .switchify { margin-top: -2px; }
body.page-template-dashboard .gm-modal .form-group.sin-stock > label > span:not(.switchify-switch),
body.page-template-dashboard .gm-modal .form-group.enable_timer > label > span:not(.switchify-switch) {
  display: block;
  font-weight: 500;
  color: var(--gm-modal-text);
  transition: color var(--gm-t-fast);
}
body.page-template-dashboard .gm-modal .form-group.sin-stock > label:has(input:checked) > span:not(.switchify-switch),
body.page-template-dashboard .gm-modal .form-group.enable_timer > label:has(input:checked) > span:not(.switchify-switch) { color: #fff; }
/* menús: más aire entre el switch y el nombre; el nombre se enciende al activar */
body.page-template-dashboard .gm-modal .local-checkbox-group > div { column-gap: 12px !important; }
body.page-template-dashboard .gm-modal .local-checkbox-group label:not(.switchify) {
  position: relative;
  top: -1px;   /* el centro óptico de la minúscula queda 1px bajo el del switch */
  color: var(--gm-modal-text);
  transition: color var(--gm-t-fast);
}
body.page-template-dashboard .gm-modal .local-checkbox-group > div:has(input:checked) > label:not(.switchify) { color: #fff; }
/* switches un poco más chicos en todo el pop-up */
body.page-template-dashboard .gm-modal label.switchify.switchify-label > span.switchify-switch {
  width: 30px !important;
  height: 18px !important;
}
body.page-template-dashboard .gm-modal label.switchify.switchify-label > span.switchify-switch::after {
  width: 12px !important;
  height: 12px !important;
  top: 2px !important;
  left: 2px !important;
}
body.page-template-dashboard .gm-modal label.switchify.switchify-label > input.switchified:checked + span.switchify-switch::after {
  left: calc(100% - 14px) !important;
}
/* el pomo se dibuja en la propia caja, centrado en la mitad de su alto. Como
   ::after, el navegador redondeaba por separado sus bordes y los de la caja:
   con zoom (90 %, 110 %) o pantallas de 1,25x quedaba un píxel más arriba o
   más abajo en algunas filas. Mismas medidas: 14 px a 2 del borde (12 en los
   pop-ups); encendido, la capa se corre lo que antes el left */
body.page-template-dashboard label.switchify.switchify-label > span.switchify-switch {
  --gm-pomo: #8a8a8a;
  background-image: radial-gradient(circle 7.25px at 9px 50%, var(--gm-pomo) 6.75px, transparent 7.25px);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
  transition: background-color var(--gm-t), border-color var(--gm-t), background-position var(--gm-t);
}
body.page-template-dashboard label.switchify.switchify-label > input.switchified:checked + span.switchify-switch {
  --gm-pomo: #fff;
  background-position: 14px 0;
}
body.page-template-dashboard .gm-modal label.switchify.switchify-label > span.switchify-switch {
  background-image: radial-gradient(circle 6.25px at 8px 50%, var(--gm-pomo) 5.75px, transparent 6.25px);
}
body.page-template-dashboard .gm-modal label.switchify.switchify-label > input.switchified:checked + span.switchify-switch {
  background-position: 12px 0;
}
body.page-template-dashboard label.switchify.switchify-label > span.switchify-switch::after { display: none !important; }
body.page-template-dashboard .gm-modal .form-group.sin-stock .gm-hint { margin: 6px 0 0; padding: 0; text-indent: 0; text-align: left; }
/* switchify envuelve la casilla en un <label class="switchify">; va al final */
body.page-template-dashboard .gm-modal .form-group.sin-stock > label > .switchify,
body.page-template-dashboard .gm-modal .form-group.sin-stock > label > input,
body.page-template-dashboard .gm-modal .form-group.sin-stock > label > .switchify-switch,
body.page-template-dashboard .gm-modal .form-group.enable_timer > label > .switchify,
body.page-template-dashboard .gm-modal .form-group.enable_timer > label > input,
body.page-template-dashboard .gm-modal .form-group.enable_timer > label > .switchify-switch {
  order: 10;
  margin-left: auto;
}

/* aviso: el ítem está en varios menús */
body.page-template-dashboard .gm-modal .gm-note {
  display: block;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--gm-tag-rose-bg, #241719);
  border: 1px solid #4a262b;
  color: #e98a93;
  font-size: 12.5px;
  font-weight: 450;
  line-height: 1.55;
}
body.page-template-dashboard .gm-modal .gm-note.hidden { display: none; }
/* con el atributo hidden tampoco: el aviso de «Agregar cuenta» quedaba como una franja ámbar vacía */
body.page-template-dashboard .gm-modal .gm-note[hidden] { display: none; }

/* «Agregar cuenta» igual a la caja de /login (login.css): 400 de ancho y campos
   de 44 con letra de 16; el autocompletado del navegador no pinta el campo */
body.page-template-dashboard .gm-modal#popup-agregar-cuenta { --gm-modal-w: 400px; }
/* el 16 con !important: en escritorio el panel deja todos sus campos en 13 con
   !important (la regla de «style.css fuerza 16px», más arriba) */
body.page-template-dashboard .gm-modal#popup-agregar-cuenta input.gm-login__input { height: 44px; font-size: 16px !important; }
body.page-template-dashboard #popup-agregar-cuenta input:-webkit-autofill,
body.page-template-dashboard #popup-agregar-cuenta input:-webkit-autofill:hover,
body.page-template-dashboard #popup-agregar-cuenta input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--gm-modal-field, #1b1b1b) inset !important;
  box-shadow: 0 0 0 1000px var(--gm-modal-field, #1b1b1b) inset !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
  transition: background-color 9999s ease-in-out 0s;
}
body.page-template-dashboard .gm-modal .gm-note--violet {
  background: #2b243b;
  border-color: #4a3474;
  color: #b399ee;
}
/* distintivo bajo la bajada de la sección */
body.page-template-dashboard .gm-modal .form-section-header .gm-note--chip {
  display: inline-block;
  margin: 10px 0 0;
  padding: 5px 12px;
}
/* distintivo en píldora, mayúsculas y con ícono («Más fotos vende más») */
body.page-template-dashboard .gm-modal .gm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 14px 0 0;
  padding: 3px 8px 3px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}
body.page-template-dashboard .gm-modal .gm-badge .gm-i { width: 14px; height: 14px; flex: none; }
body.page-template-dashboard .gm-modal .gm-badge--warm { background: #43240c; color: #ff6764; }
/* consejo en texto plano bajo un campo (media) */
body.page-template-dashboard .gm-modal .form-section-fields p.gm-modal__tip {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 450;
  line-height: 1.4;
  color: #fff;
  text-align: left;
}
/* enlace de acción bajo la bajada («Crear nuevo grupo de modificadores →») */
body.page-template-dashboard .gm-modal .gm-modal__link {
  display: inline-block;
  margin: 10px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity var(--gm-t-fast);
}
body.page-template-dashboard .gm-modal .gm-modal__link:hover { opacity: .8; }

/* campos */
body.page-template-dashboard .gm-modal .form-section-fields input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not(.selectize-input > input):not(.select2-search__field),
body.page-template-dashboard .gm-modal .form-section-fields textarea,
body.page-template-dashboard .gm-modal .form-section-fields select {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  box-sizing: border-box;
  background-color: var(--gm-modal-field) !important;
  border: 1px solid var(--gm-modal-field-border) !important;
  border-radius: 9px;
  box-shadow: none;
  color: #fff;
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 13px;
  transition: border-color var(--gm-t-fast);
}
body.page-template-dashboard .gm-modal .form-section-fields textarea {
  height: auto;
  min-height: 92px;
  padding: 10px 12px;
  line-height: 1.45;
  resize: vertical;
}
/* el foco no cambia el fondo: sólo aclara el borde */
body.page-template-dashboard .gm-modal .form-section-fields input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not(.selectize-input > input):not(.select2-search__field):focus,
body.page-template-dashboard .gm-modal .form-section-fields textarea:focus,
body.page-template-dashboard .gm-modal .form-section-fields select:focus {
  background-color: var(--gm-modal-field) !important;
  border-color: var(--gm-modal-field-focus) !important;
  outline: none;
}
body.page-template-dashboard .gm-modal .form-section-fields ::placeholder { color: #6f6f6f; }
body.page-template-dashboard .gm-modal .horas select { width: 124px !important; }
/* botón (opcional): texto 30 %, URL 70 % */
body.page-template-dashboard .gm-modal .gm-btn-row { display: flex; gap: 8px; }
body.page-template-dashboard .gm-modal .gm-btn-row .gm-w30 { flex: 0 0 30%; width: 30%; }
body.page-template-dashboard .gm-modal .gm-btn-row .gm-w70 { flex: 1 1 auto; min-width: 0; }

/* precio: tipo y cajas en una fila; con precio fijo el importe va al lado */
body.page-template-dashboard .gm-modal .gm-price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
body.page-template-dashboard .gm-modal .gm-price-row > .selectize-control { width: 200px !important; flex: none; }
body.page-template-dashboard .gm-modal .gm-price-row > .variations {
  flex: 1 1 100%;
  margin: 0 !important;
  gap: 8px !important;
}
body.page-template-dashboard .gm-modal .form-group.price.is-fixed .gm-price-row > .variations {
  flex: 0 1 auto;
  display: flex !important;
}
body.page-template-dashboard .gm-modal .form-group.price.is-fixed .precio_1 input { width: 104px !important; }
/* precio variable: precio_1 y el descuento no van. Lo escondía el change de
   checkVariation (dashboard.js), que ya no queda enganchado al select: la
   caja vacía separaba el repeater del select. */
body.page-template-dashboard .gm-modal .form-group.price.is-variable .gm-price-row > .variations { display: none !important; }
body.page-template-dashboard .gm-modal .variations .input-group.discount { width: auto !important; gap: 8px !important; }
/* precio variable: repeater de variaciones (gm-variations.js). Una fila =
   arrastre · nombre · precio · visible · papelera; sin límite de filas. */
body.page-template-dashboard .gm-modal .gm-variants { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
body.page-template-dashboard .gm-modal .gm-variants.hidden,
body.page-template-dashboard .gm-modal .gm-variants .hidden { display: none !important; }
/* la bajada a 8 px del select (las .gm-hint del formulario traen 10 px arriba) */
body.page-template-dashboard .gm-modal .form-group.price.is-variable > .gm-variants { margin-top: 8px; }
body.page-template-dashboard .gm-modal .form-group.price .gm-variants > p.gm-hint[data-gm-variants-lead] { margin: 0; }
body.page-template-dashboard .gm-modal .gm-variants__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.page-template-dashboard .gm-modal .gm-variant { display: flex; align-items: center; gap: 8px; }
body.page-template-dashboard .gm-modal .gm-variant__grip { flex: none; width: 16px; color: var(--gm-modal-text); cursor: grab; display: inline-flex; }
body.page-template-dashboard .gm-modal .gm-variant input.gm-variant__name { flex: 1 1 auto; min-width: 0; }
body.page-template-dashboard .gm-modal .gm-variant input.gm-variant__price { flex: 0 0 104px; width: 104px !important; }
/* label.: los label del modal traen 6 px abajo (.form-section-fields label) y el interruptor quedaba alto */
body.page-template-dashboard .gm-modal .gm-variant label.gm-variant__switch { flex: none; align-self: center; position: relative; width: 30px; height: 18px; margin: 0; cursor: pointer; }
body.page-template-dashboard .gm-modal .gm-variant__switch input { position: absolute; opacity: 0; width: 0; height: 0; }
/* el switch del panel (30 × 18 en los pop-ups): apagado en gris con su borde, encendido en el azul de siempre */
body.page-template-dashboard .gm-modal .gm-variant__switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--gm-raised, #262626); box-shadow: inset 0 0 0 1px var(--gm-border, #2f2f2f); transition: background-color var(--gm-t-fast), box-shadow var(--gm-t-fast); }
body.page-template-dashboard .gm-modal .gm-variant__switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #8a8a8a; transition: transform var(--gm-t-fast), background-color var(--gm-t-fast); }
body.page-template-dashboard .gm-modal .gm-variant__switch input:checked + span { background: var(--gm-switch-on, #2997ff); box-shadow: none; }
body.page-template-dashboard .gm-modal .gm-variant__switch input:checked + span::after { transform: translateX(12px); background: #fff; }
body.page-template-dashboard .gm-modal .gm-variant__switch input:focus-visible + span { outline: 2px solid rgba(255, 255, 255, .5); outline-offset: 2px; }
/* el basurero del panel: 15 px y rojo al pasar */
body.page-template-dashboard .gm-modal .gm-variant__del { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; color: var(--gm-text-3, #7c7c7c); background: none; border: 0; cursor: pointer; transition: color var(--gm-t-fast); }
body.page-template-dashboard .gm-modal .gm-variant__del .gm-i { width: 15px; height: 15px; }
body.page-template-dashboard .gm-modal .gm-variant__del:hover { color: var(--gm-bad, #f87171); }
body.page-template-dashboard .gm-modal .gm-variant--pos input.gm-variant__price { font-weight: 600; }
/* apagada: la misma opacidad que un ítem oculto en el listado (li.disabled) */
body.page-template-dashboard .gm-modal .gm-variant.is-off { opacity: .6; }
/* como .gm-modal__link («Crear nuevo grupo modificador →»), con el subrayado al pasar */
body.page-template-dashboard .gm-modal .gm-variants__add { align-self: flex-end; margin-top: 6px; padding: 0; color: #fff; background: none; border: 0; font-family: var(--gm-font, 'Inter', sans-serif); font-size: 13px; font-weight: 600; line-height: 1.3; text-decoration: none; text-underline-offset: 3px; cursor: pointer; }
body.page-template-dashboard .gm-modal .gm-variants__add:hover { text-decoration: underline; }
body.page-template-dashboard .gm-modal .gm-variants__own,
body.page-template-dashboard .gm-modal .gm-variants__pos,
body.page-template-dashboard .gm-modal .gm-variants__suggest { display: flex; flex-direction: column; gap: 8px; }
body.page-template-dashboard .gm-modal .gm-variants__suggest { flex-direction: row; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px dashed var(--gm-modal-chip-border); border-radius: 9px; }
body.page-template-dashboard .gm-modal .custom-price-text { margin-top: 18px !important; }

/* Precios de un ítem variable desde el listado de Ítems: la ventanita que abre
   el «Desde» (gm-variations.js). Va en el body, fija, anclada al precio. Cristal
   como los desplegables; nombres como el título de la fila y precios como el
   precio en línea. */
body.page-template-dashboard .gm-precios-pop { position: fixed; z-index: 1000; width: 280px; max-width: calc(100vw - 32px); padding: 10px 12px; background: var(--gm-glass, rgba(23, 23, 23, .72)); -webkit-backdrop-filter: var(--gm-glass-blur, blur(20px) saturate(140%)); backdrop-filter: var(--gm-glass-blur, blur(20px) saturate(140%)); border: 1px solid var(--gm-border, #2f2f2f); border-radius: var(--gm-r-md, 10px); box-shadow: var(--gm-sh-menu); color: var(--gm-text, #ececec); font-family: var(--gm-font, 'Inter', sans-serif); }
body.page-template-dashboard .gm-precios-pop__cab { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; }
body.page-template-dashboard .gm-precios-pop__titulo { margin: 0; font-size: 13.5px; font-weight: 600; color: #fff; }
/* -2 px arriba y -4 a la derecha: la X queda a 14 px de los dos bordes */
body.page-template-dashboard .gm-precios-pop__cerrar { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: -2px -4px 0 0; padding: 0; color: var(--gm-text-3, #7c7c7c); background: none; border: 0; border-radius: var(--gm-r-sm, 7px); cursor: pointer; }
body.page-template-dashboard .gm-precios-pop__cerrar:hover { color: var(--gm-text, #ececec); background: rgba(255, 255, 255, .07); }
body.page-template-dashboard .gm-precios-pop__cerrar .gm-i { width: 12px; height: 12px; }
/* el scroll de la lista recorta también a los lados: 8 px de relleno (y -8 de
   margen) para que la caja del nombre, corrida -8 px, no quede cortada */
body.page-template-dashboard .gm-precios-pop__lista { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; margin: 0 -8px; padding: 0 8px; overflow-y: auto; list-style: none; }
body.page-template-dashboard .gm-precios-pop__fila { display: flex; align-items: center; gap: 8px; }
body.page-template-dashboard .gm-precios-pop__fila.is-off { opacity: .6; }
/* mientras llegan las variaciones: tres filas de esqueleto (el brillo es el de
   .skeleton-items span::before, skeleton.css), del alto de las de verdad */
body.page-template-dashboard .gm-precios-pop__fila.skeleton-items { height: 32px; }
body.page-template-dashboard .gm-precios-pop .skeleton-items .gm-precios-pop__sk { height: 12px; border-radius: 4px; opacity: .08; }
body.page-template-dashboard .gm-precios-pop .skeleton-items .gm-precios-pop__sk--precio { flex: 0 0 56px; margin: 0 10px 0 auto; }
/* el nombre también se edita: en reposo es como el título de la fila y al
   tocarlo aparece la misma caja oscura que en el precio; -8 px a la izquierda
   para que el texto quede alineado con «Editando precios» */
body.page-template-dashboard .gm-precios-pop input.gm-precios-pop__nombre { font-size: 13.5px !important; }
body.page-template-dashboard .gm-precios-pop input.gm-precios-pop__nombre { flex: 1 1 auto; min-width: 0; height: 32px; margin-left: -8px; padding: 0 8px; background: transparent; border: 1px solid transparent; border-radius: var(--gm-r-sm, 7px); box-shadow: none; color: var(--gm-text, #ececec); font-family: var(--gm-font, 'Inter', sans-serif); font-weight: 450; letter-spacing: -.006em; text-overflow: ellipsis; transition: border-color var(--gm-t-fast), background-color var(--gm-t-fast); }
body.page-template-dashboard .gm-precios-pop input.gm-precios-pop__nombre:focus { outline: none; border-color: var(--gm-border-hi, #3d3d3d); background-color: var(--gm-bg, #0a0a0a); }
body.page-template-dashboard .gm-precios-pop__tag { flex: none; font-size: 11px; color: var(--gm-text-3, #7c7c7c); }
/* la ventanita cuelga del body, fuera de #dashboard: el selector va más fuerte
   que los input[type=text] del panel y el tamaño, con !important, como la
   regla global de style.css (input { font-size: 16px !important }) */
body.page-template-dashboard .gm-precios-pop input.gm-precios-pop__precio { font-size: 13px !important; }
/* -8 px a la derecha, como el nombre a la izquierda: las dos cajas quedan a la misma distancia del borde */
body.page-template-dashboard .gm-precios-pop input.gm-precios-pop__precio { flex: 0 0 84px; width: 84px; height: 32px; margin-right: -8px; padding: 0 10px; background: transparent; border: 1px solid transparent; border-radius: var(--gm-r-sm, 7px); box-shadow: none; color: var(--gm-text, #ececec); font-family: var(--gm-font-mono, 'JetBrains Mono', ui-monospace, monospace); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; transition: border-color var(--gm-t-fast), background-color var(--gm-t-fast); }
body.page-template-dashboard .gm-precios-pop input.gm-precios-pop__precio:focus { outline: none; border-color: var(--gm-border-hi, #3d3d3d); background-color: var(--gm-bg, #0a0a0a); }
body.page-template-dashboard .gm-precios-pop__nota { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--gm-text-2, #afafaf); }
body.page-template-dashboard .gm-precios-pop__error { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: #ff6b6b; }
/* el separador va de borde a borde; Guardar con el mismo aire arriba que abajo (el padding de la ventanita) */
body.page-template-dashboard .gm-precios-pop__acciones { display: flex; justify-content: flex-end; margin: 8px -12px 0; padding: 10px 12px 0; border-top: 1px solid var(--gm-border, #2f2f2f); }
body.page-template-dashboard .gm-precios-pop__acciones .gm-btn { height: 30px; padding: 0 16px; font-size: 13px; }
body.page-template-dashboard .gm-price-variable .gm-inline-variable { cursor: pointer; }
/* «Ver en el menú» (loop-items.php): con el ítem oculto o sin menú que lo muestre, bloqueado */
body.page-template-dashboard #posts-response li.disabled .gm-ver-menu,
body.page-template-dashboard #posts-response .is-sin-menu .gm-ver-menu,
body.page-template-dashboard #posts-response .gm-ver-menu.is-sin-menu { opacity: .35; cursor: not-allowed; }

body.page-template-dashboard .gm-modal .custom-price-text input { width: calc(50% - 4px) !important; }

/* selectize y select2 dentro del panel */
body.page-template-dashboard .gm-modal .selectize-control,
body.page-template-dashboard .gm-modal .select2-container { width: 100% !important; max-width: none; }
/* selectize copia las clases del <select> (p-2 en modificadores y recomendaciones) a su wrapper: sin relleno */
body.page-template-dashboard .gm-modal .selectize-control { padding: 0 !important; }
body.page-template-dashboard .gm-modal .selectize-input,
body.page-template-dashboard .gm-modal #form-post .selectize-input,
body.page-template-dashboard #formpopup.gm-modal .selectize-input,
body.page-template-dashboard .gm-modal .select2-container .select2-selection--single,
body.page-template-dashboard .gm-modal .select2-container .select2-selection--multiple {
  min-height: 38px;
  padding: 9px 12px;
  background-color: var(--gm-modal-field) !important;
  border: 1px solid var(--gm-modal-field-border) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  color: #fff;
  font-size: 13px;
  line-height: 18px;
}
body.page-template-dashboard #formpopup.gm-modal .selectize-input.focus,
body.page-template-dashboard #formpopup.gm-modal .selectize-input.input-active,
body.page-template-dashboard #formpopup.gm-modal .selectize-input.dropdown-active,
body.page-template-dashboard .gm-modal .select2-container--open .select2-selection--single,
body.page-template-dashboard .gm-modal .select2-container--open .select2-selection--multiple {
  background-color: var(--gm-modal-field) !important;
  border-color: var(--gm-modal-field-focus) !important;
}
/* múltiple con opciones: mismo aire a los cuatro lados y entre líneas */
body.page-template-dashboard #formpopup.gm-modal .selectize-control.multi .selectize-input.has-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 5px !important;
}
body.page-template-dashboard #formpopup.gm-modal .selectize-control.multi .selectize-input > .item {
  margin: 0 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  background: var(--gm-modal-chip) !important;
  border: 1px solid var(--gm-modal-chip-border) !important;
  color: #fff !important;
  font-size: 13px;
  line-height: 18px;
}
body.page-template-dashboard #formpopup.gm-modal .selectize-control.multi .selectize-input > .item.active {
  background: #2a2a2a !important;
  border-color: #575757 !important;
}
/* el input interno de selectize no es un campo: sin fondo, sin borde, sin foco gris */
body.page-template-dashboard .gm-modal .selectize-input > input,
body.page-template-dashboard .gm-modal .selectize-input > input:focus,
body.page-template-dashboard .gm-modal .select2-search__field {
  flex: 0 1 auto;
  max-width: 100%;
  height: 18px !important;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  color: #fff;
  line-height: 18px;
}
body.page-template-dashboard .gm-modal .selectize-input > .item { line-height: 18px; }
/* el clearfix de selectize (::after con content) se vuelve un item flex vacío que
   suma un gap de más al fondo del múltiple: fuera */
body.page-template-dashboard #formpopup.gm-modal .selectize-control.multi .selectize-input::after { display: none !important; content: none !important; }
/* sin foco, el input interno sale del flujo: si no cabe en la última línea de
   opciones no deja una línea vacía debajo; al hacer clic vuelve para escribir */
body.page-template-dashboard #formpopup.gm-modal .selectize-control.multi .selectize-input.has-items:not(.focus):not(.input-active):not(.dropdown-active) > input {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
  pointer-events: none;
}
body.page-template-dashboard .gm-modal .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 18px;
  padding: 0;
  color: #fff;
}
/* etiquetas: select de ancho fijo y la caja de texto libre al lado */
body.page-template-dashboard .gm-modal .form-group.etiqueta > div { gap: 8px !important; }
body.page-template-dashboard .gm-modal .form-group.etiqueta .selectize-control { width: 220px !important; flex: none; }
body.page-template-dashboard .gm-modal .form-group.etiqueta .etiqueta-custom { flex: 1 1 auto; min-width: 0; margin: 0; }
body.page-template-dashboard .gm-modal .form-group.etiqueta .etiqueta-custom input { width: 100% !important; }

/* el desplegable sale al <body> (gm-shell.js): mismo control, con vidrio */
body.page-template-dashboard .selectize-dropdown.gm-modal__dd {
  z-index: 100010 !important;
  margin-top: 4px;
  padding: 4px !important;
  background: rgba(27, 27, 27, .74) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--gm-modal-field-border) !important;
  border-radius: 9px !important;
  box-shadow: var(--gm-sh-menu);
  color: #fff !important;
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 13px;
}
body.page-template-dashboard .selectize-dropdown.gm-modal__dd .selectize-dropdown-content { max-height: 240px; }
body.page-template-dashboard .selectize-dropdown.gm-modal__dd .option {
  padding: 7px 10px;
  border-radius: 6px;
  color: #d4d4d4;
}
/* las opciones se separan como las pestañas del pilar (2px): el hover y el
   activo no se tocan. Vale para todos los desplegables del panel. */
body.page-template-dashboard .selectize-dropdown .option + .option,
body.page-template-dashboard .selectize-dropdown .optgroup + .optgroup,
body.page-template-dashboard .select2-results__option + .select2-results__option { margin-top: 2px; }
body.page-template-dashboard .selectize-dropdown.gm-modal__dd .option.selected { color: #fff; }
body.page-template-dashboard .selectize-dropdown.gm-modal__dd .option.active,
body.page-template-dashboard .selectize-dropdown.gm-modal__dd .option.active.selected {
  background: rgba(255, 255, 255, .08) !important;
  color: #fff !important;
}

/* media: los dropzones son campos */
body.page-template-dashboard .gm-modal .multi-gallery { align-items: flex-start !important; }
body.page-template-dashboard .gm-modal .multi-dropzone-item,
body.page-template-dashboard .gm-modal .multi-dropzone-add {
  background-color: var(--gm-modal-field);
  border: 1px solid var(--gm-modal-field-border);
  border-radius: 9px;
}
body.page-template-dashboard .gm-modal .multi-dropzone-add { color: var(--gm-modal-text); }
body.page-template-dashboard .gm-modal .multi-dropzone-hint { display: none !important; }
body.page-template-dashboard .gm-modal .multi-dropzone-item button .gm-i { width: 15px; height: 15px; }
body.page-template-dashboard .gm-modal .multi-dropzone-side .multi-dropzone-item button .gm-i { width: 13px; height: 13px; }
body.page-template-dashboard .gm-modal .multi-dropzone-side .multi-dropzone-item button,
body.page-template-dashboard .gm-modal .multi-dropzone-side .multi-dropzone-item .ar-warning {
  width: 22px;
  height: 22px;
  font-size: 11px;
}
body.page-template-dashboard .gm-modal .multi-dropzone-side .multi-dropzone-item .btn-star { top: 4px; left: 4px; }
body.page-template-dashboard .gm-modal .multi-dropzone-side .multi-dropzone-item .btn-remove { top: 4px; right: 4px; }
body.page-template-dashboard .gm-modal .multi-dropzone-side .multi-dropzone-item .btn-crop { bottom: 4px; left: 4px; }
body.page-template-dashboard .gm-modal .multi-dropzone-side .multi-dropzone-item .ar-warning { bottom: 4px; right: 4px; }
body.page-template-dashboard .gm-modal .multi-dropzone-add:hover,
body.page-template-dashboard .gm-modal .multi-dropzone-add.dragover {
  background-color: #1f1f1f;
  border-color: var(--gm-modal-field-focus);
  color: #fff;
}

/* simbologías: tres columnas parejas; el texto se enciende con el switch */
body.page-template-dashboard .gm-modal .simbologias {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px !important;
}
body.page-template-dashboard .gm-modal .simbologias label {
  gap: 8px;
  white-space: nowrap;
  color: var(--gm-modal-text);
  transition: color var(--gm-t-fast);
}
body.page-template-dashboard .gm-modal .simbologias label img { width: 20px; height: 20px; }
body.page-template-dashboard .gm-modal .simbologias label:has(input:checked) { color: #fff; }

/* traducciones: el botón de IA, en la esquina del campo y redondeado */
body.page-template-dashboard .gm-modal .form-section-fields input.ai-input-translation,
body.page-template-dashboard .gm-modal .form-section-fields textarea.ai-input-translation { padding-right: 40px !important; }
body.page-template-dashboard .gm-modal .ai-button-translation {
  top: 30px !important;
  right: 7px !important;
  width: 24px;
  height: 24px;
  border-radius: 6px !important;
}
/* El botón de cada campo ya no es el destello morado del plugin: el ícono de
   idiomas del panel en gris, sobre una caja apenas marcada que se aclara al
   pasar. El ícono va en máscara (::before) porque el plugin cuelga un div
   vacío con su imagen de fondo. */
body.page-template-dashboard .gm-modal .ai-button-translation {
  box-sizing: border-box;
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  cursor: pointer;
  transition: background-color var(--gm-t-fast, 110ms ease), border-color var(--gm-t-fast, 110ms ease);
}
body.page-template-dashboard .gm-modal .ai-button-translation::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 15px;
  height: 15px;
  background: #a3a3a3;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5.5h9M7.5 3.5v2M9.8 5.5c0 4.2-3 7.5-6.8 9M5.4 9.6c1.2 2.6 3.3 4.4 5.6 5.2'/%3E%3Cpath d='m12.5 20.5 4-9.5 4 9.5M13.9 17.4h5.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5.5h9M7.5 3.5v2M9.8 5.5c0 4.2-3 7.5-6.8 9M5.4 9.6c1.2 2.6 3.3 4.4 5.6 5.2'/%3E%3Cpath d='m12.5 20.5 4-9.5 4 9.5M13.9 17.4h5.2'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: background-color var(--gm-t-fast, 110ms ease);
}
body.page-template-dashboard .gm-modal .ai-button-translation:hover {
  background: rgba(255, 255, 255, .1) !important;
  border-color: rgba(255, 255, 255, .18) !important;
}
body.page-template-dashboard .gm-modal .ai-button-translation:hover::before { background: #fff; }
/* el preloader que pone el plugin de IA mientras traduce (img de 30 px a
   top 34) queda centrado con el botón: 27 + 15 = 30 + 12 */
body.page-template-dashboard .gm-modal img.ai-translation-preloader {
  top: 27px !important;
  left: 12px !important;
  width: 30px;
  height: 30px;
}

/* programar: días como casillas grandes; horario más compacto */
body.page-template-dashboard .gm-modal .form-section-fields label.gm-days { margin: 0 0 10px; }
body.page-template-dashboard .gm-modal .timer { gap: 14px !important; }
body.page-template-dashboard .gm-modal .timer label {
  gap: 8px;
  align-items: flex-start;
  color: var(--gm-modal-text);
  transition: color var(--gm-t-fast);
}
body.page-template-dashboard .gm-modal .form-section-fields .timer label { row-gap: 8px !important; }
body.page-template-dashboard .gm-modal .timer label span { width: auto; font-size: 12.5px; }
body.page-template-dashboard .gm-modal .timer label:has(input:checked) { color: #fff; }
body.page-template-dashboard .gm-modal .timer input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid #3d3d3d !important;
  border-radius: 6px;
  background-color: var(--gm-modal-field) !important;
  cursor: pointer;
  transition: background-color var(--gm-t-fast), border-color var(--gm-t-fast);
}
body.page-template-dashboard .gm-modal .timer input[type="checkbox"]:hover { border-color: #575757 !important; }
body.page-template-dashboard .gm-modal .timer input[type="checkbox"]:checked {
  background-color: #f9f9f9 !important;
  border-color: #f9f9f9 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}
body.page-template-dashboard .gm-modal .horas label { margin-bottom: 4px; }
body.page-template-dashboard .gm-modal .horas { gap: 0 !important; }

/* ── recorte de imagen (gallery-dropzone.js) ─────────────────────────────── */
body.page-template-dashboard .gallery-crop-modal {
  background: var(--gm-scrim, rgba(0, 0, 0, .62));
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
body.page-template-dashboard .gallery-crop-modal .modal-body {
  padding: 16px;
  gap: 14px;
  background: var(--gm-modal-bg);
  border: 1px solid var(--gm-modal-border);
  border-radius: 18px;
  box-shadow: var(--gm-sh-pop);
}
body.page-template-dashboard .gallery-crop-modal .modal-canvas {
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}
body.page-template-dashboard .gallery-crop-modal .modal-actions {
  gap: 9px;
  padding-top: 14px;
  border-top: 1px solid var(--gm-modal-line);
}
body.page-template-dashboard .gallery-crop-modal .modal-actions button {
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 500;
  transition: background-color var(--gm-t-fast), color var(--gm-t-fast), border-color var(--gm-t-fast);
}
body.page-template-dashboard .gallery-crop-modal .modal-actions .btn-cancel {
  background: transparent !important;
  border: 1px solid var(--gm-border, #2f2f2f) !important;
  color: var(--gm-modal-text) !important;
}
body.page-template-dashboard .gallery-crop-modal .modal-actions .btn-cancel:hover {
  background: #1f1f1f !important;
  color: #fff !important;
}
body.page-template-dashboard .gallery-crop-modal .modal-actions .btn-confirm {
  background: var(--gm-primary, #f9f9f9);
  border: 1px solid var(--gm-primary, #f9f9f9);
  color: var(--gm-primary-ink, #0a0a0a);
}
body.page-template-dashboard .gallery-crop-modal .modal-actions .btn-confirm:hover {
  background: #ececec;
  border-color: #ececec;
}

/* ── móvil: el pilar pasa arriba como tira de pestañas ──────────────────── */
@media (max-width: 767px) {
  /* el plugin centra con padding calculado en el wrapper y la hoja se salía
     por abajo: el pop-up se fija al viewport con 12px de margen */
  body.page-template-dashboard .gm-modal,
  body.page-template-dashboard #formpopup.gm-modal,
  body.page-template-dashboard .gm-modal.popup_content {
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
  body.page-template-dashboard .gm-modal__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
  }
  body.page-template-dashboard .gm-modal__side {
    min-width: 0;
    padding: 10px 12px 8px;
    border-right: 0;
    border-bottom: 1px solid var(--gm-modal-split);
    overflow: visible;
  }
  body.page-template-dashboard .gm-modal__nav {
    flex: 1 1 100%;
    flex-direction: row;
    gap: 4px;
    width: 100%;
    min-width: 0;
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  body.page-template-dashboard .gm-modal__nav::-webkit-scrollbar { display: none; }
  body.page-template-dashboard .gm-modal__tab { flex: none; width: auto; height: 34px; padding: 0 12px; }
  body.page-template-dashboard .gm-modal__main > .header { padding: 14px 56px 12px 16px; font-size: 18px; }
  body.page-template-dashboard .gm-modal .close { top: 62px; right: 12px; }
  body.page-template-dashboard .gm-modal--single .close { top: 14px; }
  body.page-template-dashboard .gm-modal--single .gm-modal__body { max-height: none; height: 100%; }
  body.page-template-dashboard .gm-modal__scroll { padding: 14px 16px 8px; }
  body.page-template-dashboard .gm-modal__foot { padding: 12px 16px; }
  body.page-template-dashboard .gm-modal .simbologias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.page-template-dashboard .gm-modal .form-group.etiqueta .selectize-control { width: 100% !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Pase 21 — buscador fijo (Ítems, Categorías, Modificadores, Loyalty y
   Registros). Un campo siempre visible de 150 px con «Buscar...» y la lupa a
   la derecha. En reposo lleva la caja de los selects; activo (con foco o con
   texto) el fondo y el borde se aclaran y la lupa se convierte en una X que
   borra y desactiva. Las reglas llevan !important porque el buscador plegable
   de pases anteriores fijaba el campo a 38 px, absoluto y con el texto
   transparente, también por id.
   ═══════════════════════════════════════════════════════════════════════════ */
body.page-template-dashboard #dashboard .select-container.filter-search.gm-search--fixed,
body.page-template-dashboard #dashboard #loyalty .select-container.filter-search.gm-search--fixed {
  position: relative;
  display: flex;
  align-items: center;
  width: 150px !important;
  min-width: 150px;
  max-width: 150px;
  flex: 0 0 150px;
  height: 38px;
  margin-left: 0;
  overflow: visible;
  cursor: default;
  z-index: auto;
}
body.page-template-dashboard #dashboard .select-container.filter-search.gm-search--fixed::before,
body.page-template-dashboard #dashboard .select-container.filter-search.gm-search--fixed::after { content: none; }
/* el campo: la misma caja, letra y altura de línea que el texto de los selects
   (13 px, peso 450, centrado en 36 px) */
body.page-template-dashboard #dashboard .select-container.filter-search.gm-search--fixed input[type="text"],
body.page-template-dashboard #dashboard .select-container.filter-search.gm-search--fixed input#search-items,
body.page-template-dashboard #dashboard .select-container.filter-search.gm-search--fixed input#loyalty-search-items,
body.page-template-dashboard #dashboard .select-container.filter-search.gm-search--fixed input#search-registros {
  position: static !important;
  /* es flex item: el z-index cuenta aunque sea static, y con el 3 heredado del
     plegable tapaba la lupa */
  z-index: auto !important;
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 38px !important;
  min-height: 38px;
  max-height: 38px;
  margin: 0 !important;
  padding: 0 36px 0 12px !important;
  background-color: var(--gm-surface, #171717) !important;
  background-image: none !important;
  border: 1px solid var(--gm-border, #2f2f2f) !important;
  border-radius: var(--gm-r-md, 10px);
  box-shadow: none !important;
  color: #fff !important;
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 13px !important;
  font-weight: 450;
  line-height: 36px !important;
  opacity: 1 !important;
  cursor: text !important;
  animation: none !important;
  transition: border-color var(--gm-t-fast), background-color var(--gm-t-fast);
}
body.page-template-dashboard #dashboard .select-container.filter-search.gm-search--fixed input[type="text"]::placeholder,
body.page-template-dashboard #dashboard .select-container.filter-search.gm-search--fixed input#search-items::placeholder,
body.page-template-dashboard #dashboard .select-container.filter-search.gm-search--fixed input#loyalty-search-items::placeholder,
body.page-template-dashboard #dashboard .select-container.filter-search.gm-search--fixed input#search-registros::placeholder {
  color: var(--gm-field-ph, #afafaf) !important;
  font-size: 13px;
  font-weight: 450;
  opacity: 1;
}
/* activo (foco o texto): fondo y borde más claros */
body.page-template-dashboard #dashboard .select-container.filter-search.gm-search--fixed input[type="text"]:focus,
body.page-template-dashboard #dashboard .select-container.filter-search.gm-search--fixed input#search-items:focus,
body.page-template-dashboard #dashboard .select-container.filter-search.gm-search--fixed input#loyalty-search-items:focus,
body.page-template-dashboard #dashboard .select-container.filter-search.gm-search--fixed input#search-registros:focus,
body.page-template-dashboard #dashboard .select-container.filter-search.gm-search--fixed.has-query input[type="text"],
body.page-template-dashboard #dashboard .select-container.filter-search.gm-search--fixed.has-query input#search-items,
body.page-template-dashboard #dashboard .select-container.filter-search.gm-search--fixed.has-query input#loyalty-search-items,
body.page-template-dashboard #dashboard .select-container.filter-search.gm-search--fixed.has-query input#search-registros {
  outline: none;
  border-color: #5a5a5a !important;
  background-color: rgba(255, 255, 255, .09) !important;
}
/* la lupa, a la derecha; activo se vuelve X (los dos iconos comparten la
   celda y se cruzan girando). Mide 26 × 26 en todas las secciones: Loyalty
   daba min-width 38 a los botones de su barra. */
body.page-template-dashboard #dashboard .gm-search--fixed .gm-search__btn {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 26px;
  min-width: 26px;
  max-width: 26px;
  height: 26px;
  min-height: 26px;
  flex: 0 0 26px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--gm-r-sm, 7px);
  background: transparent;
  color: #7c7c7c;
  cursor: text;
  transition: color var(--gm-t-fast), background-color var(--gm-t-fast);
}
body.page-template-dashboard #dashboard .gm-search--fixed .gm-search__btn .gm-i {
  grid-area: 1 / 1;
  display: block;
  width: 15px;
  height: 15px;
  transition: opacity 160ms ease, transform 200ms cubic-bezier(.2, .8, .3, 1.1);
}
body.page-template-dashboard #dashboard .gm-search--fixed .gm-search__btn .gm-search__x {
  width: 14px;
  height: 14px;
  opacity: 0;
  transform: scale(.5) rotate(-90deg);
}
body.page-template-dashboard #dashboard .gm-search--fixed:focus-within .gm-search__btn,
body.page-template-dashboard #dashboard .gm-search--fixed.has-query .gm-search__btn { color: #ececec; cursor: pointer; }
body.page-template-dashboard #dashboard .gm-search--fixed:focus-within .gm-search__btn:hover,
body.page-template-dashboard #dashboard .gm-search--fixed.has-query .gm-search__btn:hover { color: #fff; background: rgba(255, 255, 255, .08); }
body.page-template-dashboard #dashboard .gm-search--fixed:focus-within .gm-search__btn .gm-search__ico,
body.page-template-dashboard #dashboard .gm-search--fixed.has-query .gm-search__btn .gm-search__ico { opacity: 0; transform: scale(.5) rotate(90deg); }
body.page-template-dashboard #dashboard .gm-search--fixed:focus-within .gm-search__btn .gm-search__x,
body.page-template-dashboard #dashboard .gm-search--fixed.has-query .gm-search__btn .gm-search__x { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  body.page-template-dashboard #dashboard .gm-search--fixed .gm-search__btn .gm-i { transition: none; }
}
/* filtrado en cliente (Categorías y Modificadores): la fila que no coincide */
body.page-template-dashboard #dashboard .gm-filtered { display: none !important; }

/* ── «Seleccionar categoría» mide 185 px ─────────────────────────────────── */
body.page-template-dashboard #dashboard .filter-box .select-container.filter-category,
body.page-template-dashboard #dashboard .filter-category .select2-container {
  width: 185px !important;
  min-width: 185px;
  max-width: 185px;
  flex: 0 0 185px;
}

/* ── el buscador de los desplegables (select2): sin caja, sólo «Buscar...» ── */
/* El texto va con la letra y el color del placeholder del buscador de la
   barra; el rótulo lo pone gm-shell.js al abrir. */
body.page-template-dashboard .select2-container--default .select2-search--dropdown .select2-search__field,
body.page-template-dashboard .select2-container--default .select2-search--dropdown .select2-search__field:focus {
  height: 34px !important;
  padding: 0 11px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 450;
  outline: none;
}
body.page-template-dashboard .select2-container--default .select2-search--dropdown .select2-search__field::placeholder {
  color: var(--gm-field-ph, #afafaf) !important;
  font-size: 13px;
  font-weight: 450;
  opacity: 1;
}

/* ── «Cargar más ítems ↓»: texto suelto, como el recuento de registros ───── */
/* Sin caja ni fondo: el mismo gris, letra y tamaño que .gm-count, y en blanco
   al pasar por encima. La flecha va después del texto. */
body.page-template-dashboard #dashboard #load-more-btn,
body.page-template-dashboard #dashboard .gm-load-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 450;
  line-height: 1;
  color: var(--gm-text-2, #afafaf);
  cursor: pointer;
  transition: color var(--gm-t-fast);
}
body.page-template-dashboard #dashboard #load-more-btn:hover,
body.page-template-dashboard #dashboard #load-more-btn:focus-visible,
body.page-template-dashboard #dashboard .gm-load-more:hover { background: transparent; color: #fff; outline: none; }
body.page-template-dashboard #dashboard #load-more-btn:disabled { opacity: .5; cursor: default; }
body.page-template-dashboard #dashboard .gm-load-more .gm-i { width: 14px; height: 14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Pase 22 — el design system de pop-ups, en todos. Sobre el gm-modal del ítem:
   variante de una sola columna (sin pilar, el alto lo da el contenido), anchos
   --md y --sm, diálogos de confirmación con los mismos tokens, filas en línea
   (icono + campo), filas de switch, pares clave-valor, píldoras de opción,
   pestañas deshabilitadas y botones del pie que dependen de la pestaña.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── una sola columna ────────────────────────────────────────────────────── */
body.page-template-dashboard .gm-modal--single .gm-modal__body {
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: min(720px, calc(81 * var(--gm-vh, 1vh)));
}
body.page-template-dashboard .gm-modal--single .gm-modal__main { flex: 1 1 auto; }
/* en el teléfono la caja ocupa la pantalla (gm-modal, arriba) y el cuerpo
   también, así el pie queda abajo, a mano. La regla del pase 7 para el
   teléfono lo decía, pero ésta, más abajo, le devolvía el alto automático:
   el pie quedaba a media pantalla y el resto, vacío */
@media (max-width: 767px) {
  body.page-template-dashboard .gm-modal--single .gm-modal__body { height: 100%; max-height: none; }
}
/* bajada sin título de sección: sólo la línea debajo */
body.page-template-dashboard .gm-modal .form-section-header:not(:has(h3)) { padding: 0 0 12px; }
body.page-template-dashboard .gm-modal .form-section-header:not(:has(h3)) .gm-modal__lead { margin-top: 0; }
/* sección sin cabecera: la primera fila arranca pegada al título del pop-up */
body.page-template-dashboard .gm-modal .form-section > .form-section-fields:first-child > *:first-child { padding-top: 2px; }
/* pop-up sin formulario (sólo lectura): el pie va suelto */
body.page-template-dashboard .gm-modal__main > .gm-modal__scroll { flex: 1; min-height: 0; overflow-y: auto; }

/* ── pestañas: deshabilitada (p. ej. al editar una notificación) ─────────── */
body.page-template-dashboard .gm-modal__tab.is-disabled { opacity: .38; pointer-events: none; }

/* ── pie: botones que sólo valen para una pestaña ────────────────────────── */
body.page-template-dashboard .gm-modal [data-gm-only][hidden],
body.page-template-dashboard .gm-modal [data-gm-except][hidden] { display: none !important; }
body.page-template-dashboard .gm-modal__foot .gm-modal__foot-left { margin-right: auto; }
/* casilla del pie convertida en switch (p. ej. «Replicar info.» en el editor de menú):
   switchify la envuelve en un label en línea que quedaba unos px sobre el texto */
body.page-template-dashboard .gm-modal__foot-left .gm-check-row { align-items: center; margin: 0; }
body.page-template-dashboard .gm-modal__foot-left .gm-check-row > .switchify-label { display: flex; align-items: center; margin: 0; }

/* ── filas en línea: icono a la izquierda, campo al lado ─────────────────── */
body.page-template-dashboard .gm-modal .gm-row-inline { display: flex; align-items: center; gap: 10px; }
body.page-template-dashboard .gm-modal .form-section-fields .gm-row-inline > label {
  flex: none;
  width: 28px;
  margin: 0;
  justify-content: center;
  color: var(--gm-modal-text);
  font-size: 18px;
}
body.page-template-dashboard .gm-modal .gm-row-inline > label .gm-i { width: 18px; height: 18px; }
body.page-template-dashboard .gm-modal .gm-row-inline > input { flex: 1 1 auto; min-width: 0; }

/* ── filas de switch: texto (y ayuda) a la izquierda, switch a la derecha ── */
body.page-template-dashboard .gm-modal .gm-switch-row > label {
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin: 0;
  cursor: pointer;
}
body.page-template-dashboard .gm-modal .gm-switch-row > label > span:not(.switchify-switch) {
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--gm-modal-text);
  transition: color var(--gm-t-fast);
}
body.page-template-dashboard .gm-modal .gm-switch-row > label:has(input:checked) > span:not(.switchify-switch) { color: #fff; }
body.page-template-dashboard .gm-modal .gm-switch-row > label > .switchify,
body.page-template-dashboard .gm-modal .gm-switch-row > label > input,
body.page-template-dashboard .gm-modal .gm-switch-row > label > .switchify-switch { order: 10; margin-left: auto; margin-top: -2px; }
body.page-template-dashboard .gm-modal .gm-switch-row .gm-hint { margin: 5px 0 0; padding: 0; }
body.page-template-dashboard .gm-modal .gm-switch-row.is-sub { padding-left: 16px; }

/* ── pares clave-valor (fichas de sólo lectura) ─────────────────────────── */
body.page-template-dashboard .gm-modal .gm-kv {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 450;
  color: var(--gm-modal-text);
}
body.page-template-dashboard .gm-modal .gm-kv.hidden { display: none; }
body.page-template-dashboard .gm-modal .gm-kv > .gm-i { flex: none; width: 16px; height: 16px; color: var(--gm-modal-text); }
body.page-template-dashboard .gm-modal .gm-kv__k { flex: none; }
body.page-template-dashboard .gm-modal .gm-kv__v { margin-left: auto; min-width: 0; color: #fff; font-weight: 500; text-align: right; overflow-wrap: anywhere; }
body.page-template-dashboard .gm-modal .gm-kv__v:empty::before { content: "—"; color: var(--gm-modal-text); font-weight: 450; }

/* ── campos de sólo lectura ──────────────────────────────────────────────── */
body.page-template-dashboard .gm-modal .form-section-fields input:disabled,
body.page-template-dashboard .gm-modal .form-section-fields input[readonly] { color: #d4d4d4; cursor: default; opacity: 1; }

/* ── píldoras de opción (radios y casillas como chips) ─────────────────────
   La misma píldora en los pop-ups y en el panel; en el panel toma sus
   superficies, porque el campo del pop-up no se distingue sobre la tarjeta. */
body.page-template-dashboard :is(.gm-modal, #dashboard) .gm-pills { display: flex; flex-wrap: wrap; gap: 8px; }
body.page-template-dashboard :is(.gm-modal, #dashboard) .gm-pills label { position: relative; margin: 0; display: inline-flex; }
body.page-template-dashboard :is(.gm-modal, #dashboard) .gm-pills input { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
body.page-template-dashboard :is(.gm-modal, #dashboard) .gm-pills input + span {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--gm-modal-chip-border);
  border-radius: 999px;
  background: var(--gm-modal-field);
  color: var(--gm-modal-text);
  font-size: 13px;
  font-weight: 450;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--gm-t-fast), border-color var(--gm-t-fast), color var(--gm-t-fast);
}
body.page-template-dashboard :is(.gm-modal, #dashboard) .gm-pills input + span:hover { border-color: #575757; color: #fff; }
body.page-template-dashboard :is(.gm-modal, #dashboard) .gm-pills input:checked + span { background: #f9f9f9; border-color: #f9f9f9; color: #0a0a0a; }
body.page-template-dashboard :is(.gm-modal, #dashboard) .gm-pills input:focus-visible + span { outline: 1px solid #5a5a5a; outline-offset: 2px; }
/* en el panel: el fondo del panel y su borde, con la altura de los demás controles */
body.page-template-dashboard #dashboard .gm-pills input + span { height: 32px; border-color: var(--gm-border, #2f2f2f); background: var(--gm-bg, #0a0a0a); color: var(--gm-text-2, #afafaf); }
/* visita y canje conservan su color: significan cosas distintas */
body.page-template-dashboard .gm-modal .gm-pills input[value="visit"]:checked + span { background: #232d3a; border-color: #2ba6ff; color: #2ba6ff; }
body.page-template-dashboard .gm-modal .gm-pills input[value="reward"]:checked + span { background: #41272c; border-color: #ff4c61; color: #ff4c61; }
body.page-template-dashboard :is(.gm-modal, #dashboard) .gm-pills.is-disabled,
body.page-template-dashboard :is(.gm-modal, #dashboard) .gm-pills label.disabled { opacity: .4; pointer-events: none; }

/* ── casillas nativas dentro del panel (días, modalidad): como en Programar ─ */
body.page-template-dashboard .gm-modal .gm-check {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid #3d3d3d !important;
  border-radius: 6px;
  background-color: var(--gm-modal-field) !important;
  cursor: pointer;
  transition: background-color var(--gm-t-fast), border-color var(--gm-t-fast);
}
body.page-template-dashboard .gm-modal .gm-check:hover { border-color: #575757 !important; }
body.page-template-dashboard .gm-modal .gm-check:checked {
  background-color: #f9f9f9 !important;
  border-color: #f9f9f9 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}
/* casilla con texto al lado (modalidad): el texto se enciende al marcar */
body.page-template-dashboard .gm-modal .gm-check-row { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 450; color: var(--gm-modal-text); cursor: pointer; transition: color var(--gm-t-fast); }
body.page-template-dashboard .gm-modal .gm-check-row:has(input:checked) { color: #fff; }
body.page-template-dashboard .gm-modal .gm-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* ── editar categoría › Menús: quitar, linkear o separar ─────────────────── */
/* La lista va como el popup de alcance (agrupada por pantalla padre). Quitar y
   linkear se aplican al guardar y una nota dice qué va a pasar; la
   confirmación de «Separar» aparece en el lugar de su botón. */
body.page-template-dashboard .gm-modal .gm-catlink__grupo { display: flex; flex-direction: column; gap: 4px; }
body.page-template-dashboard .gm-modal .gm-catlink__grupo[hidden] { display: none; }
body.page-template-dashboard .gm-modal .gm-catlink__nota { margin: 12px 0 0; font-size: 12.5px; font-weight: 500; line-height: 1.5; color: #fff; }
body.page-template-dashboard .gm-modal .gm-catlink__nota.es-peligro { color: var(--gm-bad); }
body.page-template-dashboard .gm-modal .gm-catlink__nota[hidden] { display: none; }
/* un menú que ya tiene una categoría con este nombre: sin casilla, apagado */
body.page-template-dashboard .gm-modal .gm-catlink__ocupado { opacity: .55; }
body.page-template-dashboard .gm-modal .gm-catlink__titulo { font-size: 13.5px; font-weight: 600; color: var(--gm-modal-title); }
body.page-template-dashboard .gm-modal .gm-catlink__texto { margin: 0; font-size: 12.5px; font-weight: 450; line-height: 1.5; color: var(--gm-modal-text); }
body.page-template-dashboard .gm-modal .gm-catlink__lista { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
body.page-template-dashboard .gm-modal .gm-catlink__padre {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gm-text-3, #7c7c7c);
}
body.page-template-dashboard .gm-modal .gm-catlink__menus { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
body.page-template-dashboard .gm-modal .gm-catlink__menus .gm-check-row { font-size: inherit; }
body.page-template-dashboard .gm-modal .gm-catlink__menus .gm-check-row:has(input:disabled) { cursor: default; opacity: .55; }
/* el menú que se edita: sin casilla (una vacía, punteada) y con su rótulo */
body.page-template-dashboard .gm-modal .gm-catlink__actual { display: flex; align-items: center; gap: 10px; font-weight: 450; color: var(--gm-modal-text); }
body.page-template-dashboard .gm-modal .gm-catlink__actual::before {
  content: '';
  flex: none;
  width: 20px;
  height: 20px;
  border: 1px dashed #3d3d3d;
  border-radius: 6px;
}
body.page-template-dashboard .gm-modal .gm-catlink__tag {
  padding: 2px 8px;
  border: 1px solid var(--gm-modal-line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--gm-text-3, #7c7c7c);
}
body.page-template-dashboard .gm-modal .gm-catlink__pie { display: flex; gap: 9px; justify-content: flex-end; margin-top: 12px; }
body.page-template-dashboard .gm-modal .gm-catlink__pie .gm-btn { min-width: 96px; }
body.page-template-dashboard .gm-modal .gm-catlink__grupo.is-confirmando > .gm-catlink__pie { display: none; }
body.page-template-dashboard .gm-modal .gm-catlink__confirma {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--gm-modal-line);
  border-radius: 10px;
  background: var(--gm-modal-field);
}
body.page-template-dashboard .gm-modal .gm-catlink__confirma.es-peligro { border-color: rgba(248, 113, 113, .38); }
body.page-template-dashboard .gm-modal .gm-catlink__pregunta { margin: 0 0 4px; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--gm-modal-title); }

/* ── zona de carga de una imagen (logo, gráfica, cabecera) ──────────────── */
body.page-template-dashboard .gm-modal .upload-area,
body.page-template-dashboard .gm-modal .cat-image-box {
  background-color: var(--gm-modal-field);
  border: 1px solid var(--gm-modal-field-border);
  border-radius: 9px;
  color: var(--gm-modal-text);
  transition: border-color var(--gm-t-fast), background-color var(--gm-t-fast);
}
body.page-template-dashboard .gm-modal .upload-area:hover,
body.page-template-dashboard .gm-modal .upload-area.dragover,
body.page-template-dashboard .gm-modal .cat-image-box:hover,
body.page-template-dashboard .gm-modal .cat-image-box.dragover { background-color: #1f1f1f; border-color: var(--gm-modal-field-focus); color: #fff; }
body.page-template-dashboard .gm-modal .upload-area h3 { font-size: 13px; font-weight: 500; color: inherit; }
body.page-template-dashboard .gm-modal .cat-image-box .cat-image-empty { color: var(--gm-modal-text); }
/* archivo elegido: el nombre en gris, sin el botón nativo a la vista */
body.page-template-dashboard .gm-modal input[type="file"].gm-file { display: none; }
/* Caja para soltar o elegir un archivo (importar registros, importar
   productos): la piel de las zonas de carga de imagen, a todo el ancho y con
   el contenido centrado. */
body.page-template-dashboard .gm-modal .gm-file-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 22px 16px;
  background-color: var(--gm-modal-field);
  border: 1px solid var(--gm-modal-field-border);
  border-radius: 9px;
  color: var(--gm-modal-text);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--gm-t-fast), background-color var(--gm-t-fast), color var(--gm-t-fast);
}
body.page-template-dashboard .gm-modal .gm-file-drop:hover,
body.page-template-dashboard .gm-modal .gm-file-drop.dragover { background-color: #1f1f1f; border-color: var(--gm-modal-field-focus); color: #fff; }
body.page-template-dashboard .gm-modal .gm-file-drop .gm-i { width: 18px; height: 18px; }
/* con archivo elegido, el nombre en blanco: ya no es una invitación */
body.page-template-dashboard .gm-modal .gm-file-drop.tiene-archivo { color: #fff; }

/* ── lista de pasos (importar productos) ─────────────────────────────────── */
body.page-template-dashboard .gm-modal .gm-steps { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.page-template-dashboard .gm-modal .gm-steps li { display: flex; gap: 10px; font-size: 13px; font-weight: 450; line-height: 1.5; color: var(--gm-modal-text); }
body.page-template-dashboard .gm-modal .gm-steps li > span:first-child { flex: none; width: 18px; color: #fff; font-weight: 500; }
body.page-template-dashboard .gm-modal .gm-steps a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ── diálogos de confirmación: los mismos tokens que el gm-modal ─────────── */
body.page-template-dashboard .gm-dialog {
  position: relative;
  background-color: var(--gm-modal-bg) !important;
  border: 1px solid var(--gm-modal-border) !important;
  border-radius: 18px;
  box-shadow: var(--gm-sh-pop);
  padding: 28px 24px 22px !important;
  width: min(420px, 100%) !important;
  max-width: 420px !important;
  text-align: left;
}
body.page-template-dashboard .gm-dialog h2 {
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.3;
  color: var(--gm-modal-title);
  margin: 0 40px 6px 0;
  text-transform: none;
}
body.page-template-dashboard .gm-dialog p {
  font-size: 13px;
  font-weight: 450;
  line-height: 1.55;
  color: var(--gm-modal-text);
}
body.page-template-dashboard .gm-dialog .title + p { margin-top: 10px; }
body.page-template-dashboard .gm-dialog .linked-cat-menus {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--gm-modal-field-border);
  border-radius: 9px;
  background-color: var(--gm-modal-field);
  color: var(--gm-modal-text);
  font-size: 13px;
}
body.page-template-dashboard .gm-dialog .actions {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--gm-modal-line);
}

/* ── campo con botones dentro (contraseña del usuario) ──────────────────── */
body.page-template-dashboard .gm-modal .gm-field-wrap { position: relative; }
body.page-template-dashboard .gm-modal .gm-field-wrap > input { padding-right: 44px !important; }
body.page-template-dashboard .gm-modal .gm-field-eye {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 26px;
  height: 26px;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #7c7c7c;
  cursor: pointer;
  transition: color var(--gm-t-fast), background-color var(--gm-t-fast);
}
body.page-template-dashboard .gm-modal .gm-field-eye:hover { color: #fff; background: rgba(255, 255, 255, .08); }
body.page-template-dashboard .gm-modal .gm-field-eye .gm-i { width: 15px; height: 15px; }
body.page-template-dashboard .gm-modal .gm-field-badge {
  position: absolute;
  top: 50%;
  left: 7px;
  height: 24px;
  margin: 0;
  padding: 0 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--gm-modal-chip-border);
  border-radius: 6px;
  background: #2a2a2a;
  color: #fff;
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--gm-t-fast), border-color var(--gm-t-fast);
}
body.page-template-dashboard .gm-modal .gm-field-badge:hover { background: #333; border-color: #575757; }
body.page-template-dashboard .gm-modal .gm-field-badge .gm-i { width: 12px; height: 12px; }
body.page-template-dashboard .gm-modal .gm-field-badge.hidden { display: none; }
/* aviso ámbar: algo que conviene saber antes de guardar (el mismo ámbar de
   los distintivos, gm-tokens.css) */
body.page-template-dashboard .gm-modal .gm-note--amber { background: var(--gm-tag-amber-bg, #483822); border-color: var(--gm-tag-amber-border, #bc9f78); color: var(--gm-tag-amber-fg, #d2b286); }
/* varias filas de switch dentro de una misma fila del panel */
body.page-template-dashboard .gm-modal .gm-switch-list > .gm-switch-row + .gm-switch-row { margin-top: 14px; }
body.page-template-dashboard .gm-modal .gm-switch-list > .gm-switch-row.hidden { display: none; }
/* segunda etiqueta dentro de una misma fila */
body.page-template-dashboard .gm-modal .form-section-fields label.gm-label-gap { margin-top: 12px; }
/* estado a pantalla completa (importando, listo) */
body.page-template-dashboard .gm-modal .gm-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 0 18px;
  text-align: center;
}
body.page-template-dashboard .gm-modal .gm-state > .gm-i { width: 26px; height: 26px; margin-bottom: 8px; color: #fff; }
body.page-template-dashboard .gm-modal .gm-state__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--gm-modal-title); }
body.page-template-dashboard .gm-modal .gm-state__text { margin: 0; font-size: 12.5px; font-weight: 450; color: var(--gm-modal-text); }
/* La barra: el relleno en el blanco del panel sobre la línea de los pop-ups.
   accent-color no alcanza (Chrome la ignora en <progress>) y sin esto queda el
   verde del navegador. */
body.page-template-dashboard .gm-modal .gm-state progress {
  width: 200px;
  height: 6px;
  margin-top: 12px;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--gm-modal-line);
  accent-color: #f9f9f9;
}
body.page-template-dashboard .gm-modal .gm-state progress::-webkit-progress-bar { background: var(--gm-modal-line); }
body.page-template-dashboard .gm-modal .gm-state progress::-webkit-progress-value { background: #f9f9f9; transition: width .25s ease-in-out; }
body.page-template-dashboard .gm-modal .gm-state progress::-moz-progress-bar { background: #f9f9f9; }
body.page-template-dashboard .gm-modal .gm-state .progress-value { font-size: 12px; color: var(--gm-modal-text); font-variant-numeric: tabular-nums; }
/* importar (productos y registros): los pasos los conmuta el JS de cada
   importador; el pie sólo se ve en el primero, el del formulario */
body.page-template-dashboard .gm-modal .step { display: none; }
body.page-template-dashboard .gm-modal .step.active { display: block; }
body.page-template-dashboard .gm-modal:has(.step):not(:has(.step.form.active)) .gm-modal__foot { display: none; }

/* ── fila con la imagen a la izquierda y un campo al lado (pantalla) ─────── */
body.page-template-dashboard .gm-modal .gm-row-media { display: flex; gap: 16px; align-items: flex-start; }
body.page-template-dashboard .gm-modal .gm-row-media__box { flex: none; }
body.page-template-dashboard .gm-modal .gm-row-media__side { flex: 1 1 auto; min-width: 0; }
body.page-template-dashboard .gm-modal .gm-row-media__side input { width: 140px !important; }
body.page-template-dashboard .gm-modal .cat-image-box { width: 140px; height: 140px; }
body.page-template-dashboard .gm-modal .gm-check-row--after { margin-top: 12px; }
/* enlace dentro de una ayuda: mismo estilo que el enlace de acción */
body.page-template-dashboard .gm-modal .gm-hint .gm-modal__link { display: inline; margin: 0; font-size: inherit; font-weight: 500; }
/* la zona de carga de la cabecera, del ancho del panel */
body.page-template-dashboard .gm-modal .form-group.upload-image .upload-area { width: 100%; max-width: 330px; min-height: 160px; margin-top: 2px; }
body.page-template-dashboard .gm-modal .form-group.upload-image .upload-area .gm-i { width: 24px; height: 24px; }
body.page-template-dashboard .gm-modal .form-group.upload-image .upload-area .apply-crop .gm-i { width: 16px; height: 16px; }

/* ── selectize en cualquier pop-up: las mismas reglas que llevaba el de ítem ─ */
body.page-template-dashboard .gm-modal .selectize-input.focus,
body.page-template-dashboard .gm-modal .selectize-input.input-active,
body.page-template-dashboard .gm-modal .selectize-input.dropdown-active,
body.page-template-dashboard .gm-modal .select2-container--open .select2-selection--single,
body.page-template-dashboard .gm-modal .select2-container--open .select2-selection--multiple {
  background-color: var(--gm-modal-field) !important;
  border-color: var(--gm-modal-field-focus) !important;
}
/* múltiple con opciones: mismo aire a los cuatro lados y entre líneas */
body.page-template-dashboard .gm-modal .selectize-control.multi .selectize-input.has-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 5px !important;
}
body.page-template-dashboard .gm-modal .selectize-control.multi .selectize-input > .item {
  margin: 0 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  background: var(--gm-modal-chip) !important;
  border: 1px solid var(--gm-modal-chip-border) !important;
  color: #fff !important;
  font-size: 13px;
  line-height: 18px;
}
body.page-template-dashboard .gm-modal .selectize-control.multi .selectize-input > .item.active {
  background: #2a2a2a !important;
  border-color: #575757 !important;
}
/* el input interno de selectize no es un campo: sin fondo, sin borde, sin foco gris */
body.page-template-dashboard .gm-modal .selectize-input > input,
body.page-template-dashboard .gm-modal .selectize-input > input:focus,
body.page-template-dashboard .gm-modal .select2-search__field {
  flex: 0 1 auto;
  max-width: 100%;
  height: 18px !important;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  color: #fff;
  line-height: 18px;
}
body.page-template-dashboard .gm-modal .selectize-input > .item { line-height: 18px; }
/* el clearfix de selectize (::after con content) se vuelve un item flex vacío que
   suma un gap de más al fondo del múltiple: fuera */
body.page-template-dashboard .gm-modal .selectize-control.multi .selectize-input::after { display: none !important; content: none !important; }
/* sin foco, el input interno sale del flujo: si no cabe en la última línea de
   opciones no deja una línea vacía debajo; al hacer clic vuelve para escribir */
body.page-template-dashboard .gm-modal .selectize-control.multi .selectize-input.has-items:not(.focus):not(.input-active):not(.dropdown-active) > input {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
  pointer-events: none;
}

/* varias filas dentro de una misma fila del panel (captación, banner) */
body.page-template-dashboard .gm-modal .gm-subrows > * + * { margin-top: 14px; }
body.page-template-dashboard .gm-modal .gm-subrows > .hidden { display: none; }
body.page-template-dashboard .gm-modal .captacion-fields.hidden,
body.page-template-dashboard .gm-modal .banner-fields.hidden { display: none !important; }
/* un campo a la mitad del ancho */
body.page-template-dashboard .gm-modal .form-section-fields select.gm-w-half,
body.page-template-dashboard .gm-modal .form-section-fields input.gm-w-half { width: calc(50% - 4px) !important; }
/* dos columnas de campos (ficha del pase) */
body.page-template-dashboard .gm-modal .gm-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
body.page-template-dashboard .gm-modal .gm-grid-2 .hidden { display: none; }
body.page-template-dashboard .gm-modal .gm-device { display: flex; align-items: center; height: 38px; padding: 0 12px; color: var(--gm-modal-text); font-size: 18px; }
/* totales y acción a la derecha (visitas, canjes) */
body.page-template-dashboard .gm-modal .gm-actions-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
body.page-template-dashboard .gm-modal .gm-total {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid currentColor;
}
body.page-template-dashboard .gm-modal .gm-total--visit  { background: #232d3a; color: #2ba6ff; }
body.page-template-dashboard .gm-modal .gm-total--reward { background: #41272c; color: #ff4c62; }
body.page-template-dashboard .gm-modal .gm-total--push   { background: #372b46; color: #b562ff; margin-bottom: 12px; }
body.page-template-dashboard .gm-modal .add-action-btn .gm-i { width: 14px; height: 14px; }
body.page-template-dashboard .gm-modal .gm-cell {
  padding: 8px 10px;
  border: 1px solid var(--gm-modal-field-border);
  border-radius: 8px;
  background: var(--gm-modal-field);
  color: var(--gm-modal-text);
  font-size: 12.5px;
}
/* dos campos en línea (operador + número) */
body.page-template-dashboard .gm-modal .gm-row-inline--fields > select { flex: 0 0 150px; width: 150px !important; }
body.page-template-dashboard .gm-modal .gm-row-inline--fields > input { flex: 0 0 100px; width: 100px !important; }
/* textarea bajo un input en la misma fila */
body.page-template-dashboard .gm-modal .form-section-fields textarea.gm-field-gap { margin-top: 8px; }
/* escanear: lector centrado con su marco animado */
body.page-template-dashboard .gm-modal .gm-scan { display: flex; flex-direction: column; align-items: center; text-align: center; }
body.page-template-dashboard .gm-modal .gm-scan__title { margin: 18px 0 0; font-size: 14px; font-weight: 600; color: var(--gm-modal-title); }
body.page-template-dashboard .gm-modal .gm-scan__text { margin: 4px 0 14px; font-size: 12.5px; font-weight: 450; color: var(--gm-modal-text); }
body.page-template-dashboard .gm-modal .gm-pills--center { justify-content: center; }
body.page-template-dashboard .gm-modal .gm-center { display: flex; flex-direction: column; align-items: center; }
body.page-template-dashboard .gm-modal .gm-upload-portrait { width: 240px; aspect-ratio: .8; min-height: 0; }
/* el banner del pop-up: el dropzone y sus campos al lado */
body.page-template-dashboard .gm-modal .popup-banner-dropzone { width: 170px; }

/* ── notificación push ───────────────────────────────────────────────────── */
/* el select de tipo sigue en el DOM como estado del JS, pero no se ve */
body.page-template-dashboard .gm-modal .gm-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; pointer-events: none; }
body.page-template-dashboard .gm-modal .gm-var { color: #ffd025; font-weight: 500; }
body.page-template-dashboard .gm-modal .gm-counter { margin-top: 6px; font-size: 12px; text-align: right; color: var(--gm-modal-text); font-variant-numeric: tabular-nums; }
body.page-template-dashboard .gm-modal .gm-counter .text-yellow-500 { color: #ffd025; }
body.page-template-dashboard .gm-modal .gm-counter .text-red-500 { color: #ff5f6d; }
body.page-template-dashboard .gm-modal .gm-hint--after { margin: 10px 0 0; color: #fff; }
body.page-template-dashboard .gm-modal .form-section-fields input.gm-w-time { width: 140px !important; }
body.page-template-dashboard .gm-modal .form-section-fields input[type="datetime-local"],
body.page-template-dashboard .gm-modal .form-section-fields input[type="date"],
body.page-template-dashboard .gm-modal .form-section-fields input[type="time"] { color-scheme: dark; }
body.page-template-dashboard .gm-modal .gm-map { width: 100%; height: 260px; border-radius: 9px; background: var(--gm-modal-field); border: 1px solid var(--gm-modal-field-border); overflow: hidden; }
body.page-template-dashboard .gm-modal #recurring-date-picker.hidden,
body.page-template-dashboard .gm-modal #single-date-picker.hidden { display: none; }
body.page-template-dashboard .gm-modal .tab-content.hidden { display: none; }
/* el pop-up no tiene secciones con pestaña del módulo: las suyas se muestran siempre */
body.page-template-dashboard #popup_notification .form-section { display: block !important; }

/* ── ficha de envíos de una notificación ─────────────────────────────────── */
body.page-template-dashboard #popup_view_sent_notification .gm-sent__bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
body.page-template-dashboard #popup_view_sent_notification .gm-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--gm-modal-field-border);
  border-radius: 10px;
  background: var(--gm-modal-field);
}
body.page-template-dashboard #popup_view_sent_notification .tab-btn {
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--gm-modal-text);
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--gm-t-fast), color var(--gm-t-fast);
}
body.page-template-dashboard #popup_view_sent_notification .tab-btn:hover { color: #fff; }
body.page-template-dashboard #popup_view_sent_notification .tab-btn.active { background: var(--gm-modal-active); color: #fff; }
body.page-template-dashboard #popup_view_sent_notification .counter-wrap { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }
body.page-template-dashboard #popup_view_sent_notification .counter-icon { display: inline-flex; }
body.page-template-dashboard #popup_view_sent_notification .counter-icon .gm-i { width: 15px; height: 15px; }
body.page-template-dashboard #popup_view_sent_notification .counter-wrap.sent .counter-icon { color: #4fbf7f; }
body.page-template-dashboard #popup_view_sent_notification .counter-wrap.failed .counter-icon { color: #ff5f6d; }
body.page-template-dashboard #popup_view_sent_notification .counter-wrap.resent .counter-icon { color: #e9aac0; }
body.page-template-dashboard #popup_view_sent_notification .filter-wrap { position: relative; margin-left: auto; }
body.page-template-dashboard #popup_view_sent_notification .filter-toggle {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--gm-modal-field-border);
  border-radius: 8px;
  background: var(--gm-modal-field);
  color: var(--gm-modal-text);
  cursor: pointer;
  transition: color var(--gm-t-fast), border-color var(--gm-t-fast);
}
body.page-template-dashboard #popup_view_sent_notification .filter-toggle:hover,
body.page-template-dashboard #popup_view_sent_notification .filter-toggle.active { color: #fff; border-color: #5a5a5a; }
body.page-template-dashboard #popup_view_sent_notification .filter-toggle .gm-i { width: 14px; height: 14px; }
body.page-template-dashboard #popup_view_sent_notification .filter-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 5;
  width: 240px;
  padding: 6px;
  border: 1px solid var(--gm-modal-chip-border);
  border-radius: 10px;
  background: rgba(30, 30, 30, .9);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--gm-sh-menu);
}
body.page-template-dashboard #popup_view_sent_notification .filter-popover.hidden { display: none; }
body.page-template-dashboard #popup_view_sent_notification .filter-input {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--gm-modal-field-border);
  border-radius: 7px;
  background: var(--gm-modal-field);
  color: #fff;
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 13px;
  outline: none;
}
body.page-template-dashboard #popup_view_sent_notification .hits-container {
  border: 1px solid var(--gm-modal-field-border);
  border-radius: 9px;
  background: var(--gm-modal-field);
  padding: 6px 12px;
  min-height: 110px;
}
body.page-template-dashboard #popup_view_sent_notification .hit-list { display: flex; flex-direction: column; max-height: 360px; overflow-y: auto; }
body.page-template-dashboard #popup_view_sent_notification .hit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gm-modal-line);
  color: #fff;
  font-size: 13px;
  font-weight: 450;
}
body.page-template-dashboard #popup_view_sent_notification .hit-row:last-child { border-bottom: 0; }
body.page-template-dashboard #popup_view_sent_notification .hit-row.filtered-out { display: none; }
body.page-template-dashboard #popup_view_sent_notification .hit-info { flex: 1; min-width: 0; display: flex; align-items: center; }
body.page-template-dashboard #popup_view_sent_notification .hit-info .gm-i { width: 14px; height: 14px; }
body.page-template-dashboard #popup_view_sent_notification .empty-state { padding: 22px 0; text-align: center; font-size: 13px; color: var(--gm-modal-text); }
body.page-template-dashboard #popup_view_sent_notification .tab-content.hidden { display: none; }
body.page-template-dashboard #popup_view_sent_notification .resend-bar .gm-btn .gm-i { width: 14px; height: 14px; }

/* ── botón fantasma: como el «Cancelar» del recorte de imagen ───────────── */
body.page-template-dashboard .gm-btn--ghost {
  background-color: transparent;
  border-color: var(--gm-border, #2f2f2f);
  border-radius: 999px;
  color: var(--gm-modal-text, #afafaf);
}
body.page-template-dashboard .gm-btn--ghost:hover { background-color: #1f1f1f; border-color: var(--gm-border-hi, #3d3d3d); color: #fff; }

/* ── categoría en varias pantallas: la lista, suelta y en monoespaciada ──── */
/* Cada pantalla madre y, colgando de una L, sus hijas. */
body.page-template-dashboard .gm-dialog .linked-cat-menus {
  display: block;
  gap: 0;
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--gm-font-mono, ui-monospace, Menlo, monospace);
  font-size: 11px;
  line-height: 1.5;
  color: var(--gm-modal-text);
}
body.page-template-dashboard .gm-dialog .linked-cat-group + .linked-cat-group { margin-top: 6px; }
body.page-template-dashboard .gm-dialog .linked-cat-parent,
body.page-template-dashboard .gm-dialog .linked-cat-children li {
  font-family: var(--gm-font-mono, ui-monospace, Menlo, monospace);
  font-size: 11px;
  line-height: 1.5;
}
body.page-template-dashboard .gm-dialog .linked-cat-parent { color: #fff; font-weight: 500; }
body.page-template-dashboard .gm-dialog .linked-cat-children { margin: 0; padding: 0 0 0 4px; list-style: none; }
body.page-template-dashboard .gm-dialog .linked-cat-children li {
  position: relative;
  margin: 0;
  padding: 3px 0 3px 18px;
  border: 0;
  color: var(--gm-modal-text);
}
/* la L: arranca justo bajo la fila anterior (sin pisar su texto) y dobla
   hacia el nombre */
body.page-template-dashboard .gm-dialog .linked-cat-children li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: -2px;
  width: 9px;
  height: calc(50% + 2px);
  border-left: 1px solid #3d3d3d;
  border-bottom: 1px solid #3d3d3d;
  border-bottom-left-radius: 3px;
}
/* el tronco sigue hasta la siguiente hija */
body.page-template-dashboard .gm-dialog .linked-cat-children li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  bottom: -2px;
  border-left: 1px solid #3d3d3d;
}
/* la primera hija arranca 3 px bajo la pantalla madre, sin tocar su texto */
body.page-template-dashboard .gm-dialog .linked-cat-children li:first-child::before {
  top: 3px;
  height: calc(50% - 3px);
}
/* la seleccionada, primera y en blanco; «(seleccionada)» con el mismo estilo */
body.page-template-dashboard .gm-dialog .linked-cat-children li.is-current { color: #fff; }
body.page-template-dashboard .gm-dialog .linked-cat-current { color: inherit; font: inherit; letter-spacing: inherit; text-transform: none; }

/* ── imagen de la categoría: el dropzone del ítem, de una sola imagen ────── */
/* Sin proporción fija para la foto; la caja mide lo que la del ítem con fotos
   (principal 4:3 más la columna lateral: 16:9 del ancho completo). Igual al
   editar (#cat-gallery) y al crear (#cat-gallery-nueva). */
body.page-template-dashboard .gm-modal #cat-gallery,
body.page-template-dashboard .gm-modal #cat-gallery-nueva { max-width: none; }
body.page-template-dashboard .gm-modal #cat-gallery .multi-dropzone-grid,
body.page-template-dashboard .gm-modal #cat-gallery-nueva .multi-dropzone-grid { aspect-ratio: 16 / 9; }
body.page-template-dashboard .gm-modal #cat-gallery .multi-dropzone-item img,
body.page-template-dashboard .gm-modal #cat-gallery-nueva .multi-dropzone-item img { object-fit: contain; }
body.page-template-dashboard .gm-modal #cat-gallery .multi-dropzone-item .btn-star,
body.page-template-dashboard .gm-modal #cat-gallery-nueva .multi-dropzone-item .btn-star { display: none; }

/* ── diálogos: botones en píldora y el mismo alto; «Cancelar» es fantasma ── */
/* El pie de «Agregar cuenta» y el de /oauth/authorize (lib/oauth.php) siguen la
   misma norma: «Cancelar», «Volver» o «Usar otra cuenta», sin fondo y en píldora. */
body.page-template-dashboard .gm-dialog .actions .gm-btn,
body.page-template-dashboard #popup-agregar-cuenta .gm-modal__foot .gm-btn,
body.page-template-dashboard.gm-oauth-body .gm-modal__foot .gm-btn {
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 13.5px;
}
body.page-template-dashboard .gm-dialog .actions .gm-btn:not(.gm-btn--primary):not(.gm-btn--danger),
body.page-template-dashboard #popup-agregar-cuenta .gm-modal__foot .gm-btn:not(.gm-btn--primary),
body.page-template-dashboard.gm-oauth-body .gm-modal__foot .gm-btn:not(.gm-btn--primary) {
  background-color: transparent;
  border-color: var(--gm-border, #2f2f2f);
  color: var(--gm-modal-text, #afafaf);
}
body.page-template-dashboard .gm-dialog .actions .gm-btn:not(.gm-btn--primary):not(.gm-btn--danger):hover,
body.page-template-dashboard #popup-agregar-cuenta .gm-modal__foot .gm-btn:not(.gm-btn--primary):hover,
body.page-template-dashboard.gm-oauth-body .gm-modal__foot .gm-btn:not(.gm-btn--primary):hover {
  background-color: #1f1f1f;
  border-color: var(--gm-border-hi, #3d3d3d);
  color: #fff;
}
/* la acción destructiva: contorno y texto en rojo, sin fondo; en hover aclara */
body.page-template-dashboard .gm-btn--danger {
  background-color: transparent;
  border-color: #ed716a;
  color: #ed716a;
}
body.page-template-dashboard .gm-btn--danger:hover {
  background-color: transparent;
  border-color: #ef8c87;
  color: #ef8c87;
}

/* ── pop-ups: dos grupos dentro de una misma fila se separan (traducciones) ─ */
body.page-template-dashboard .gm-modal .form-section-fields > * > .form-group + .form-group { margin-top: 12px; }

/* ── modificadores: la caja de opciones se abre hacia abajo al tocarla ───── */
/* El formulario conserva sus 38 px: el campo de selectize sale del flujo y,
   con foco (.gm-open, dashboard.js), se despliega por encima de la lista con
   transición de entrada y de salida. Un asa (.gm-resize) en la esquina
   inferior derecha la estira; .gm-settled y .gm-resizing apagan la transición
   para que el estirado responda al instante. */
body.page-template-dashboard #dashboard #mod-options #add-mods .selectize-control {
  position: relative;
  height: 38px;
  z-index: 30;
}
body.page-template-dashboard #dashboard #mod-options #add-mods .selectize-input,
body.page-template-dashboard #dashboard #mod-options #add-mods .selectize-control.multi .selectize-input.has-items {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  height: 38px;
  min-height: 38px;
  max-height: none;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: center;
  gap: 5px;
  padding: 5px 34px 5px 5px !important;
  overflow: hidden;
  resize: none;
  transition: height .2s ease, border-color var(--gm-t-fast);
}
/* con la primera opción entra .has-items: la regla base de arriba, que también
   lo nombra, pesa más que .gm-open a secas y devolvía los 38 px; de ahí el
   segundo selector. style.css además la capaba a 44 px. */
body.page-template-dashboard #dashboard #mod-options #add-mods .selectize-input.gm-open,
body.page-template-dashboard #dashboard #mod-options #add-mods .selectize-control.multi .selectize-input.has-items.gm-open {
  height: 132px;
  max-height: none !important;
  overflow-y: auto;
  /* la regla general de .selectize-input la apaga con !important */
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5) !important;
}
body.page-template-dashboard #dashboard #mod-options #add-mods .selectize-input.gm-settled { transition: border-color var(--gm-t-fast); }
body.page-template-dashboard #dashboard #mod-options #add-mods .selectize-input.gm-resizing { transition: none; }
/* el asa: dos trazos en diagonal, como la de un textarea; sólo con la caja abierta */
body.page-template-dashboard #dashboard #mod-options #add-mods .gm-resize {
  position: absolute;
  top: 22px;
  right: 3px;
  width: 12px;
  height: 12px;
  z-index: 31;
  cursor: ns-resize;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(135deg, transparent 0 42%, #7c7c7c 42% 50%, transparent 50% 67%, #7c7c7c 67% 75%, transparent 75%);
  transition: opacity var(--gm-t-fast);
}
body.page-template-dashboard #dashboard #mod-options #add-mods .selectize-input.gm-open ~ .gm-resize {
  opacity: .9;
  pointer-events: auto;
}
body.page-template-dashboard #dashboard #mod-options #add-mods .selectize-input > .item { margin: 0 !important; }
body.page-template-dashboard #dashboard #mod-options #add-mods .selectize-input::after { display: none !important; content: none !important; }
/* con las opciones abiertas, la barra de arriba no suma su aire */
body.page-template-dashboard #dashboard #modificadores:has(#mod-options.active) > .toolbar { margin-bottom: 0; }

/* ── modificadores: el nombre de una opción en edición recupera su caja ──── */
/* La caja lleva siempre su borde (transparente) y sus 10 px de relleno; el
   hueco tras el asa baja de 15 a 3 para que el texto quede donde estaba. Al
   editar sólo se pinta el borde: nada se mueve y nada se recorta. */
body.page-template-dashboard #dashboard #mod-response > li > .col.info { gap: 3px; }
body.page-template-dashboard #dashboard #mod-response > li input.opt-title {
  border-left: 1px solid transparent;
  padding-left: 10px;
  margin-left: 0;
}
body.page-template-dashboard #dashboard #mod-response > li input.opt-title:focus {
  border-left-color: var(--gm-border-hi, #3d3d3d);
  padding-left: 10px;
  margin-left: 0;
}

/* ── pop-ups: el conmutador Pop-ups / Registros ──────────────────────────── */
/* Sin borde y fondo #414141; la pestaña activa en #212121 con texto blanco;
   la inactiva en #afafaf, sin hover. Con #popups y [data-tab] porque las
   pestañas ya tenían color con esos dos ids (pase 3). */
body.page-template-dashboard #dashboard .popup-tabs {
  padding: 2px; /* el «borde» de 2 px alrededor de la pestaña activa */
  background-color: #414141;
  border: 0;
}
body.page-template-dashboard #dashboard #popups .popup-tab[data-tab],
body.page-template-dashboard #dashboard #popups .popup-tab[data-tab]:hover {
  height: 34px;
  border-radius: 8px; /* 10 de la caja menos los 2 del borde */
  background-color: transparent;
  color: #afafaf;
}
body.page-template-dashboard #dashboard #popups .popup-tab[data-tab].active,
body.page-template-dashboard #dashboard #popups .popup-tab[data-tab].active:hover {
  background-color: #212121;
  color: var(--gm-text, #ececec); /* el del texto de los selects */
}

/* ── modificadores: lo que se escribe, con la letra de las opciones ──────── */
body.page-template-dashboard #dashboard #mod-options #add-mods .selectize-input > input {
  font-family: var(--gm-font, 'Inter', sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 400;
  /* del alto de una caja de opción (26): sin opciones la fila medía 20 y el
     cursor quedaba más arriba que con la primera opción puesta */
  height: 26px !important;
  line-height: 26px !important;
  color: var(--gm-text, #ececec) !important;
}
/* menos aire entre el nombre del grupo y el formulario de opciones */
body.page-template-dashboard #dashboard #mod-options > .header { margin-bottom: 14px; }

/* ── avisos (#toaster): la piel de los distintivos ───────────────────────── */
/* Éxito en verde agua (#0e2624 / #204b41 / #6adbc5); error con el rojo de
   «Pendiente» (Integración POS). Mismo cuerpo y peso que esos distintivos; la
   caja mide lo que el texto y va centrada abajo. toaster.js marca
   gm-toast--ok / --error. */
body.page-template-dashboard #toaster {
  left: 50%;
  margin-left: 0;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(420px, calc(100vw - 32px));
  padding: 8px 14px;
  border: 1px solid #204b41;
  border-radius: 7px;
  background-color: #0e2624;
  color: #6adbc5;
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .01em;
  text-align: center;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
body.page-template-dashboard #toaster.gm-toast--error {
  background-color: #ff5f6d2b;
  border-color: #60292e;
  color: #ff5f6d;
}
body.page-template-dashboard #toaster .gm-i { width: 13px; height: 13px; margin: 0 6px 0 0; flex-shrink: 0; }
/* cargando («Trayendo la lista de pases…», Loyalty IQ): ámbar, con la rueda y
   el texto latiendo como el «Enviando» de Notificaciones. toaster.js lo marca
   con el icono 'loader' y lo baja con toasterCerrar() al llegar los datos. */
body.page-template-dashboard #toaster.gm-toast--cargando {
  background-color: var(--gm-tag-amber-bg, #483822);
  border-color: var(--gm-tag-amber-border, #bc9f78);
  color: var(--gm-tag-amber-fg, #d2b286);
}
body.page-template-dashboard #toaster.gm-toast--cargando .gm-spin { animation: gm-rotate 2.4s linear infinite; }
body.page-template-dashboard #toaster.gm-toast--cargando span { animation: gm-latido-ambar 1.6s ease-in-out infinite; }
@keyframes gm-latido-ambar {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.page-template-dashboard #toaster.gm-toast--cargando span { animation: none; }
}

/* los avisos, 10 px más arriba (style.css los deja a 8; en móvil a 24) */
body.page-template-dashboard #toaster.visible { bottom: 18px; }
@media screen and (max-width: 768px) {
  body.page-template-dashboard #toaster.visible { bottom: 34px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Pase 25 — Pantallas: lista con miniatura; pop-ups de menú, botón, texto,
   iconos sociales, editar menú y editar pantalla principal.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── lista: la imagen principal de la pantalla (o el logo) antes del nombre ─ */
/* Cuadrada y sin fondo; la imagen entera dentro (sin recorte). */
/* La misma caja que la foto de Ítems y Categorías (48 px, esquinas de .25rem),
   pero cuadrada y sin el fondo oscuro. */
body.page-template-dashboard #dashboard #pantallas .gm-screen-thumb {
  flex: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: .25rem;
}
/* contain: con cover se recortaban los logos horizontales (Oculto) */
body.page-template-dashboard #dashboard #pantallas .gm-screen-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: .25rem;
}
/* sin miniatura («Mostrar imagen principal» apagado; gm_screen_thumb_url la
   deja vacía) no guarda el lugar: el nombre va al borde */
body.page-template-dashboard #dashboard #pantallas .gm-screen-thumb:empty {
  display: none;
}

/* ── el destello de traducciones se coloca respecto a su campo ───────────── */
/* El plugin lo cuelga como hermano del input, en absoluto: sin un grupo
   posicionado caía respecto a la sección (menú, botón, texto). */
body.page-template-dashboard .gm-modal .form-section-fields .form-group:has(> .ai-input-translation) { position: relative; }
/* si el grupo es hijo directo de la sección lleva los 14 px de relleno de fila
   (en el ítem van dentro de #traduccion-xx, sin relleno): el destello y su
   preloader bajan lo mismo */
body.page-template-dashboard .gm-modal .form-section-fields > .form-group:has(> .ai-input-translation) > .ai-button-translation { top: 44px !important; }
body.page-template-dashboard .gm-modal .form-section-fields > .form-group:has(> .ai-input-translation) > img.ai-translation-preloader { top: 41px !important; }

/* ── el título de botón y texto: el mismo que el de menú ─────────────────── */
/* style.css (.popup_wrapper .popup-title) le daba 28 px y otra familia. */
body.page-template-dashboard .popup_wrapper .gm-modal .header .popup-title {
  margin: 0;
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.006em;
}

/* ── el select de estilo (Customizer), de 250 px ─────────────────────────── */
body.page-template-dashboard .gm-modal .form-section-fields select.select-style { width: 250px !important; }

/* ── programar: aire bajo «Mostrar / ocultar en este horario» en todos ────── */
body.page-template-dashboard .gm-modal .timer-fields > .show_hide { margin-bottom: 16px; }

/* ── editar menú: la cabecera se sube a todo el ancho del panel ──────────── */
body.page-template-dashboard .gm-modal .form-group.upload-image .upload-area#featured-local {
  width: 100%;
  max-width: none !important;
}
/* el envoltorio (.form-group-wrapper) es flex y encogía al grupo a su contenido */
body.page-template-dashboard .gm-modal .form-section-fields > .form-group-wrapper { display: block; }
body.page-template-dashboard .gm-modal .form-group-wrapper > .form-group.upload-image { width: 100%; margin: 0; }

/* ── filas más apretadas: listas de enlaces (redes, delivery, iconos) ────── */
body.page-template-dashboard .gm-modal .form-section-fields.gm-fields--tight > * { padding: 8px 0; }

/* ── casilla con texto que en realidad es un switch (screens.js las cambia) ─ */
/* Aire entre el switch y el texto, centrados, y el texto en blanco al activar. */
body.page-template-dashboard .gm-modal .form-section-fields label.gm-check-row {
  gap: 10px;
  margin: 0; /* la regla general de label le dejaba 6 px abajo y sumaba al salto de 12 */
  align-items: center;
  font-weight: 450;
  color: var(--gm-modal-text);
}
body.page-template-dashboard .gm-modal .form-section-fields label.gm-check-row:has(input:checked) { color: #fff; }
body.page-template-dashboard .gm-modal .form-section-fields label.gm-check-row > label.switchify {
  flex: none;
  margin: 0;
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

/* ── redes: aire entre el icono y el nombre ──────────────────────────────── */
body.page-template-dashboard .gm-modal .form-section.social .form-section-fields label { gap: 8px; }
body.page-template-dashboard .gm-modal .form-section.social .form-section-fields label i,
body.page-template-dashboard .gm-modal .form-section.social .form-section-fields label .gm-i { width: 16px; text-align: center; }

/* ── iconos sociales: el icono se enciende con una URL escrita ───────────── */
body.page-template-dashboard .gm-modal .gm-row-inline:has(> input:not(:placeholder-shown)) > label { color: #fff; }

/* ── pantallas: 12 px entre la miniatura y el nombre ─────────────────────── */
body.page-template-dashboard #dashboard #pantallas #slide1 > li > .col.info { gap: 12px; }

/* ── editar pantalla principal: imagen a todo el ancho, ancho debajo ─────── */
body.page-template-dashboard .gm-modal .cat-image-box.gm-image-box--wide {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
body.page-template-dashboard .gm-modal .cat-image-box.gm-image-box--wide .cat-image-preview {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body.page-template-dashboard .gm-modal .form-section-fields input.gm-input--short { width: 88px !important; }
/* la regla general de label (margin 0 0 6px) pesa más: se nombra igual */
body.page-template-dashboard .gm-modal .form-section-fields label.gm-check-row--after { margin-top: 18px; }

/* ── bloques que dependen de una casilla: se atenúan con transición ──────── */
body.page-template-dashboard .gm-modal [data-gm-depends] { transition: opacity var(--gm-t-fast); }

/* ── modificadores: el cursor con aire y «Agregar nombre» al crear ───────── */
/* content-box: selectize le pone width 4px en línea y, con border-box, el
   relleno se comía el contenido y el cursor no se veía con el campo vacío */
body.page-template-dashboard #dashboard #mod-options #add-mods .selectize-input > input { padding-left: 5px !important; box-sizing: content-box !important; }
/* la fila de creación es la misma en todo el panel (opciones de modificador y
   tags de un pop-up); los desplegables de los pop-ups cuelgan de <body> */
body.page-template-dashboard .selectize-dropdown .create {
  font-weight: 400;
  color: var(--gm-text, #ececec);
}
body.page-template-dashboard .selectize-dropdown .create .gm-create {
  margin-right: 6px;
  color: #afafaf;
}
body.page-template-dashboard .selectize-dropdown .create strong { font-weight: 400; }

/* pop-up banner, destino: « – Categoría · Menú» en gris, en la lista (cuelga
   de <body>) y en lo elegido */
body.page-template-dashboard .gm-popup-link-meta { color: #afafaf; }
/* aire entre «Por producto» y el buscador: la columna del campo no lleva hueco */
body.page-template-dashboard #popup-edit-popup .popup-link-field .selectize-control { margin-top: 10px; }

/* select simple que se puede vaciar (la × de clear_button): lo elegido va en
   la cajita gris de los múltiples (recomendaciones, pantallas) y se corta con
   puntos antes de la × y la flecha */
body.page-template-dashboard .gm-modal .selectize-control.single.plugin-clear_button .selectize-input.has-items {
  display: flex;
  align-items: center;
  padding: 5px 66px 5px 5px !important;
}
/* la ×: el icono de cerrar del panel (no el carácter, que se veía bajo),
   centrada en el alto del campo y a 14 px de la flecha, con hover */
body.page-template-dashboard .gm-modal .selectize-control.single.plugin-clear_button .clear {
  top: 50%;
  right: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin: 0;
  transform: translateY(-50%);
  border-radius: 6px;
  color: #8e8e8e !important;
  opacity: 1;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
body.page-template-dashboard .gm-modal .selectize-control.single.plugin-clear_button .clear:hover {
  color: #fff !important;
  background-color: rgba(255, 255, 255, .08);
}
body.page-template-dashboard .gm-modal .selectize-control.single.plugin-clear_button .clear .gm-i { width: 12px; height: 12px; }
body.page-template-dashboard .gm-modal .selectize-control.single.plugin-clear_button .selectize-input.has-items > .item {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
  padding: 4px 8px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 6px;
  background: var(--gm-modal-chip);
  border: 1px solid var(--gm-modal-chip-border);
  color: #fff;
}

/* sin nada elegido no hay qué quitar: la × sólo con valor */
body.page-template-dashboard .gm-modal .selectize-control.single.plugin-clear_button .selectize-input:not(.has-items) + .clear { display: none; }

/* campo bloqueado por otro (en el banner, el destino y la redirección se
   excluyen): a media luz y sin respuesta, como la programación apagada */
body.page-template-dashboard .gm-modal .form-group.is-locked { opacity: .5; }
body.page-template-dashboard .gm-modal .form-group.is-locked input,
body.page-template-dashboard .gm-modal .form-group.is-locked select,
body.page-template-dashboard .gm-modal .form-group.is-locked .selectize-control { pointer-events: none; }

/* Media del ítem con video (dashboard.js, gmItemVideoSync): sólo la foto principal
   cuenta; las demás y el «agregar» quedan a media luz y sin respuesta, como un
   campo bloqueado. Sin video, el aviso se esconde y vuelve «Más fotos vende más». */
body.page-template-dashboard .gm-modal .multi-gallery .gm-gallery-hint-video { display: none; }
body.page-template-dashboard .gm-modal .multi-gallery.is-video .gm-gallery-hint-video { display: block; text-align: center; }
body.page-template-dashboard .gm-modal .multi-gallery.is-video .gm-gallery-badge-fotos { display: none; }
body.page-template-dashboard .gm-modal .multi-gallery.is-video .multi-dropzone-side { opacity: .35; pointer-events: none; filter: grayscale(.5); }

/* ── modificadores: el switch a 20 px del basurero, como en categorías ────── */
/* En grupos había 26 (10 de hueco, 8 del mx-2 del icono y 8 más) y en
   opciones 22; categorías e ítems llevan 20 del switch al icono siguiente y
   12 entre iconos. Sin márgenes sueltos: el hueco lo da la columna. */
body.page-template-dashboard #dashboard #modificadores-response .col.actions,
body.page-template-dashboard #dashboard #mod-response .col.actions { gap: 12px; padding-right: 0; }
body.page-template-dashboard #dashboard #modificadores-response .col.visibilidad,
body.page-template-dashboard #dashboard #mod-response .col.visibilidad { margin: 0 0 0 6px; }
body.page-template-dashboard #dashboard #modificadores-response .col.eliminar,
body.page-template-dashboard #dashboard #mod-response .col.eliminar { width: auto; margin: 0 0 0 8px; }
body.page-template-dashboard #dashboard #modificadores-response .col.eliminar .gm-i,
body.page-template-dashboard #dashboard #mod-response .col.eliminar .gm-i { margin: 0 !important; }

/* ── ayuda bajo un switch con texto: alineada con el texto (switch 30 + 10) ─ */
body.page-template-dashboard .gm-modal .form-section-fields .gm-hint--under {
  display: block;
  margin: 4px 0 0 40px;
}

/* ── modificadores: «Agregar nombre ↵»: el icono de Enter a la derecha ────── */
body.page-template-dashboard .selectize-dropdown .create { display: flex; align-items: center; }
body.page-template-dashboard .selectize-dropdown .create .gm-create__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.page-template-dashboard .selectize-dropdown .create .gm-create__key {
  flex: none;
  width: 15px;
  height: 15px;
  margin-left: 12px;
  color: var(--gm-text-3, #7c7c7c);
}

/* ── todos los basureros: en rojo al pasar el cursor, como el de Usuarios ─── */
/* Mismo rojo (--gm-bad) en cualquier disparador que lleve el icono de
   basurero: listas (ítems, categorías, grupos y opciones de modificadores,
   pases, pop-ups), quitar imagen en los dropzones y los botones del menú. */
body.page-template-dashboard #panel li .col.eliminar a:hover,
body.page-template-dashboard #panel li .col.eliminar:hover a,
body.page-template-dashboard #panel li .col.delete a:hover,
body.page-template-dashboard #panel li .delete_post:hover,
body.page-template-dashboard #panel li .delete-mod-opt:hover,
body.page-template-dashboard #panel li .deletecatpopup_open:hover,
body.page-template-dashboard #panel li .delete-pass:hover,
body.page-template-dashboard #panel li .popup-delete-open:hover,
body.page-template-dashboard #panel li .usuario-delete-open:hover,
body.page-template-dashboard #dashboard .responsive-table li .delete_post:hover,
body.page-template-dashboard #dashboard a:has(use[href="#gm-i-trash"]):hover,
body.page-template-dashboard #dashboard button:has(use[href="#gm-i-trash"]):hover,
body.page-template-dashboard .popup_wrapper a:has(use[href="#gm-i-trash"]):hover,
body.page-template-dashboard .popup_wrapper button:has(use[href="#gm-i-trash"]):hover { color: var(--gm-bad, #f87171) !important; }

/* ── editar menú › Modalidad: las opciones en una columna, como la lista de
   menús del ítem (12 px entre filas) ─────────────────────────────────────── */
body.page-template-dashboard .gm-modal .gm-check-grid {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 12px;
}

/* ── modificadores: el basurero no se enciende con el hover de la fila ────── */
/* Sólo con el cursor encima (la regla de :hover directo va con !important). */
body.page-template-dashboard #dashboard #mod-response > li:hover .col.eliminar a,
body.page-template-dashboard #dashboard #modificadores-response > li:hover .col.eliminar a { color: var(--gm-text-3, #7c7c7c); }

/* ── pop-ups: editor y lista ─────────────────────────────────────────────── */
/* el select de tipo, corto */
body.page-template-dashboard .gm-modal .form-section-fields select.gm-w-short { width: 160px !important; }
/* pantallas solapadas: el icono y el número en ámbar (la regla general de los
   iconos de la fila los dejaba en gris) */
body.page-template-dashboard #dashboard .popup-item .actions .popup-screens.gm-is-warn,
body.page-template-dashboard #dashboard .popup-item .actions .popup-screens.gm-is-warn .gm-i { color: var(--gm-warn, #fbbf24); }
/* clientes registrados desde un pop-up de Registro: icono + número, como las
   opciones de un grupo de modificadores */
body.page-template-dashboard #dashboard .popup-item .actions .popup-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  color: var(--gm-text-3, #7c7c7c);
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  cursor: default;
}
body.page-template-dashboard #dashboard .popup-item .actions .popup-count .gm-i { width: 15px; height: 15px; }
/* registros: la fecha con el mismo aire hacia el separador que hacia la derecha */
body.page-template-dashboard #dashboard .registro-fecha-col { min-width: 0; flex: 0 0 auto; }

/* ── pop-ups (editor): el select de pantallas y el de tags con el borde de los
   demás campos; section-popups.php (#form-popup) y style.css lo fijaban en
   #393b3e con !important ─────────────────────────────────────────────────── */
body.page-template-dashboard #form-popup .selectize-input {
  border-color: var(--gm-modal-field-border) !important;
  background-color: var(--gm-modal-field) !important;
}
body.page-template-dashboard #form-popup .selectize-input.focus,
body.page-template-dashboard #form-popup .selectize-input.input-active,
body.page-template-dashboard #form-popup .selectize-input.dropdown-active { border-color: var(--gm-modal-field-focus) !important; }
/* condiciones de visualización: más ancho */
body.page-template-dashboard .gm-modal .form-section-fields select.gm-w-wide { width: 224px !important; }
/* zonas de carga: sólo el icono (las dimensiones van en la bajada) */
body.page-template-dashboard .gm-modal .upload-area h3,
body.page-template-dashboard .gm-modal .upload-area .popup-banner-res-hint { display: none !important; }

/* ── Pop-ups › Registros: la paginación, con la letra del recuento ───────── */
/* Números sueltos, sin cajas: el mismo cuerpo, peso y gris que «N registros»
   (.gm-count). La página actual va en blanco; las flechas, con el icono del
   panel. */
body.page-template-dashboard #dashboard #registros-pagination {
  gap: 2px;
  margin-top: 20px;
}
body.page-template-dashboard #dashboard #registros-pagination .gm-page,
body.page-template-dashboard #dashboard .gm-pagination .gm-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  margin: 0;
  padding: 0 6px;
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 450;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--gm-text-2, #afafaf);
  background: transparent !important;
  border: 0 !important;
  border-radius: 6px;
  box-shadow: none;
  cursor: pointer;
  transition: color var(--gm-t-fast);
}
body.page-template-dashboard #dashboard #registros-pagination .gm-page:hover,
body.page-template-dashboard #dashboard .gm-pagination .gm-page:hover { color: #fff; }
body.page-template-dashboard #dashboard #registros-pagination .gm-page.active,
body.page-template-dashboard #dashboard .gm-pagination .gm-page.active {
  color: #fff;
  font-weight: 500;
  cursor: default;
}
body.page-template-dashboard #dashboard #registros-pagination .gm-page--arrow .gm-i,
body.page-template-dashboard #dashboard .gm-pagination .gm-page--arrow .gm-i { width: 14px; height: 14px; }
body.page-template-dashboard #dashboard #registros-pagination .gm-page:focus-visible,
body.page-template-dashboard #dashboard .gm-pagination .gm-page:focus-visible {
  outline: 1px solid var(--gm-modal-field-focus, #3a3a3a);
  outline-offset: 1px;
}

/* ── Loyalty: la misma paginación, centrada bajo la lista ────────────────── */
body.page-template-dashboard #dashboard .gm-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 20px 0 0;
}
/* Pop-ups y Registros la vacían cuando todo cabe en una página: sin lugar */
body.page-template-dashboard #dashboard .gm-pagination:empty { display: none; }
/* los puntos suspensivos no se pulsan */
body.page-template-dashboard #dashboard .gm-pagination .gm-page--gap,
body.page-template-dashboard #dashboard .gm-pagination .gm-page--gap:hover {
  min-width: 18px;
  padding: 0 2px;
  color: var(--gm-text-3, #7c7c7c);
  cursor: default;
}

/* ── «Pendiente» (Integración POS): cobre ────────────────────────────────── */
body.page-template-dashboard #dashboard .gm-tag--pos,
body.page-template-dashboard .gm-tag--pos,
body.page-template-dashboard #sidebar .gm-tag--pos {
  color: #ed9052;
  background-color: #421209;
  border: 1px solid #6b381f;
}
/* con el pilar plegado no hay sitio para el distintivo: el ítem se esconde */
body.page-template-dashboard.gm-rail-closed #sidebar .gm-pos-item { display: none; }

/* ── «Gen1» y «Gen2»: los distintivos de generación de IQ ────────────────── */
/* Mismo tamaño que el resto de distintivos (.gm-tag, .gm-navitem__badge en el
   pilar); sólo cambian los colores. El relleno se aclara hacia la derecha, el
   borde (un segundo degradado en border-box) pasa de apagado a brillante y un
   halo interior en el borde derecho da el volumen. Gen1 en azul acerado,
   Gen2 en el periwinkle y lila de su tarjeta «Night». */
body.page-template-dashboard {
  --gm-gen1-fill: linear-gradient(90deg, #131a2c 0%, #182032 45%, #34497c 85%, #4a67a2 100%);
  --gm-gen1-edge: linear-gradient(90deg, #2c3344 0%, #3e4a6e 50%, #93aee0 100%);
  --gm-gen1-glow: inset -3px 0 6px rgba(140, 178, 255, .28), 0 0 6px rgba(100, 140, 230, .18);
  --gm-gen1-text: #cddffb;
  /* Gen2 con los tonos de su tarjeta «Night» del pilar: casi negro que se
     enciende a periwinkle hacia la derecha y filo que termina en el lila
     rosado del borde de abajo de la tarjeta */
  --gm-gen2-fill: linear-gradient(90deg, #05041a 0%, #121440 45%, #3f4394 82%, #6f71c4 100%);
  --gm-gen2-edge: linear-gradient(90deg, #05041a 0%, #4f529e 50%, #d1b6e0 100%); /* parte del tono del relleno: con #2b2a3a quedaba una línea clara por dentro, a la izquierda */
  --gm-gen2-glow: inset -3px 0 6px rgba(200, 176, 230, .32), 0 0 6px rgba(120, 124, 214, .22);
  --gm-gen2-text: #e4def7;
}
body.page-template-dashboard #dashboard .gm-tag--gen,
body.page-template-dashboard .gm-tag--gen {
  color: var(--gm-gen1-text);
  border: 1px solid transparent;
  background: var(--gm-gen1-fill) padding-box, var(--gm-gen1-edge) border-box;
  box-shadow: var(--gm-gen1-glow);
}
body.page-template-dashboard #dashboard .gm-tag--gen2,
body.page-template-dashboard .gm-tag--gen2 {
  color: var(--gm-gen2-text);
  border: 1px solid transparent;
  background: var(--gm-gen2-fill) padding-box, var(--gm-gen2-edge) border-box;
  box-shadow: var(--gm-gen2-glow);
}

/* ── Norma · distintivo junto al título de una sección ───────────────────── */
/* Cualquier .gm-tag dentro del h1 de la cabecera (Loyalty passes con su plan,
   Menu IQ con Gen1/Gen2, lo que venga) va al lado del título, centrado, a
   12 px y al tamaño grande: 26 px de alto. */
body.page-template-dashboard #dashboard .section-header h1:has(> .gm-tag) {
  display: flex;
  align-items: center;
  gap: 12px;
}
body.page-template-dashboard #dashboard .section-header h1 > .gm-tag {
  height: 26px;
  padding: 0 12px;
  font-family: var(--gm-font);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
}

/* ── el distintivo grande junto al título de Menu IQ y de Menu IQ Gen2 ───── */
body.page-template-dashboard #dashboard .section-header h1.gm-iq__titulo {
  display: flex;
  align-items: center;
  gap: 12px;
}
body.page-template-dashboard #dashboard .gm-tag.gm-iq__gen {
  height: 26px;
  padding: 0 12px;
  font-family: var(--gm-font);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
}
/* En Menu IQ es un enlace: al pasar, «Gen1» se estira a «Descubre Gen2» y
   toma el azul de Gen2 (una capa encima que aparece; los degradados no se
   animan entre sí). */
body.page-template-dashboard #dashboard a.gm-iq__gen {
  position: relative;
  isolation: isolate;
  cursor: pointer;
  transition: color .25s ease;
}
body.page-template-dashboard #dashboard a.gm-iq__gen::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border: 1px solid transparent;
  border-radius: inherit;
  background: var(--gm-gen2-fill) padding-box, var(--gm-gen2-edge) border-box;
  box-shadow: var(--gm-gen2-glow);
  opacity: 0;
  transition: opacity .25s ease;
}
body.page-template-dashboard #dashboard a.gm-iq__gen:hover { color: var(--gm-gen2-text); }
body.page-template-dashboard #dashboard a.gm-iq__gen:hover::before { opacity: 1; }
body.page-template-dashboard #dashboard .gm-iq__gen-uno,
body.page-template-dashboard #dashboard .gm-iq__gen-dos {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width .3s ease, opacity .2s ease;
}
body.page-template-dashboard #dashboard .gm-iq__gen-uno { max-width: 40px; }
body.page-template-dashboard #dashboard .gm-iq__gen-dos { max-width: 0; opacity: 0; }
body.page-template-dashboard #dashboard a.gm-iq__gen:hover .gm-iq__gen-uno { max-width: 0; opacity: 0; }
body.page-template-dashboard #dashboard a.gm-iq__gen:hover .gm-iq__gen-dos { max-width: 110px; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  body.page-template-dashboard #dashboard a.gm-iq__gen,
  body.page-template-dashboard #dashboard a.gm-iq__gen::before,
  body.page-template-dashboard #dashboard .gm-iq__gen-uno,
  body.page-template-dashboard #dashboard .gm-iq__gen-dos { transition: none; }
}

/* ── pilar: Menu IQ con dos generaciones y la tarjeta «Descubre Gen2» ────── */
/* dashboard/sidebar.php. La generación sale de qué está activo (dashboard.js
   pone .active al hacer clic y al cargar con el hash):
   · Gen1: Menu IQ activo. Distintivo «Gen1», la rayita de arriba blanca y la
     tarjeta desplegada debajo.
   · Gen2: activa la tarjeta (su enlace es el de #menu-iq-gen2). La tarjeta
     se esconde, la fila de Menu IQ se ve activa con «Gen2» y la rayita de
     abajo blanca. */
body.page-template-dashboard #sidebar li.gm-navitem-iq .gm-tag--gen2 { display: none; }
body.page-template-dashboard #sidebar ul.gm-navlist:has(> li.gm-gen2card.active) > li.gm-navitem-iq .gm-tag--gen { display: none; }
body.page-template-dashboard #sidebar ul.gm-navlist:has(> li.gm-gen2card.active) > li.gm-navitem-iq .gm-tag--gen2 { display: inline-flex; }
body.page-template-dashboard #sidebar ul.gm-navlist:has(> li.gm-gen2card.active) > li.gm-navitem-iq > .gm-navitem {
  background: var(--gm-surface-active);
  font-weight: 500;
}

/* el «Gen1» de la fila lleva a Gen2 (gm-shell.js), con el globo «Descubre Gen2» */
body.page-template-dashboard #sidebar li.gm-navitem-iq .gm-tag--gen { cursor: pointer; transition: filter .2s ease; }
body.page-template-dashboard #sidebar li.gm-navitem-iq .gm-tag--gen:hover { filter: brightness(1.25); }

/* las dos rayitas: qué generación se ve (gm-shell.js cambia al tocarlas) */
/* sólo con Menu IQ activo (Gen1 o Gen2); en otras secciones no se ven */
body.page-template-dashboard #sidebar .gm-gen-switch {
  display: none;
  flex-direction: column;
  gap: 3px;
  margin: -6px -4px -6px auto;
  padding: 6px 4px;
  cursor: pointer;
}
body.page-template-dashboard #sidebar li.gm-navitem-iq.active .gm-gen-switch,
body.page-template-dashboard #sidebar ul.gm-navlist:has(> li.gm-gen2card.active) > li.gm-navitem-iq .gm-gen-switch { display: flex; }
body.page-template-dashboard #sidebar .gm-gen-switch i {
  display: block;
  width: 12px;
  height: 2.5px;
  border-radius: 2px;
  background: #3f3f46;
  transition: background-color .25s ease;
}
body.page-template-dashboard #sidebar .gm-gen-switch i:first-child { background: #fff; }
body.page-template-dashboard #sidebar ul.gm-navlist:has(> li.gm-gen2card.active) > li.gm-navitem-iq .gm-gen-switch i:first-child { background: #3f3f46; }
body.page-template-dashboard #sidebar ul.gm-navlist:has(> li.gm-gen2card.active) > li.gm-navitem-iq .gm-gen-switch i:last-child { background: #fff; }
body.page-template-dashboard #sidebar .gm-gen-switch:hover i { background: #8a8a93; }
body.page-template-dashboard #sidebar .gm-gen-switch:hover i:first-child { background: #fff; }
body.page-template-dashboard #sidebar ul.gm-navlist:has(> li.gm-gen2card.active) > li.gm-navitem-iq .gm-gen-switch:hover i:first-child { background: #8a8a93; }
/* pilar plegado: sin rayitas (no caben junto al ícono; !important porque las
   reglas que las muestran pesan más) y el ícono blanco como el resto. El globo
   de Menu IQ es un span propio (.gm-navtip, dashboard/sidebar.php) en vez del
   ::after de texto, para llevar dentro la insignia de la generación que se
   ve; cuál de las dos lo deciden las mismas reglas que la fila (arriba). */
body.page-template-dashboard.gm-rail-closed #sidebar li.gm-navitem-iq .gm-gen-switch { display: none !important; }
body.page-template-dashboard #sidebar .gm-navtip { display: none; }
body.page-template-dashboard.gm-rail-closed #sidebar li.gm-navitem-iq > .gm-navitem[data-gm-tip]::after { content: none; }
body.page-template-dashboard.gm-rail-closed #sidebar .gm-navtip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  left: calc(100% + 24px);
  top: 50%;
  transform: translateY(-50%) translateX(-3px);
  padding: 5px 6px 5px 13px;
  border: 1px solid #272727;
  border-radius: var(--gm-r-pill, 999px);
  background: #1b1b1b;
  box-shadow: var(--gm-sh-menu);
  color: #fff;
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 12.5px;
  font-weight: 450;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 1001;
  transition: opacity var(--gm-t-fast), transform var(--gm-t-fast);
}
body.page-template-dashboard.gm-rail-closed #sidebar .gm-navtip .gm-tag {
  height: 18px;
  padding: 0 7px;
  font-size: 10px;
  font-weight: 500;
}
body.page-template-dashboard.gm-rail-closed #sidebar li.gm-navitem-iq > .gm-navitem:hover .gm-navtip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* la tarjeta: cerrada salvo en Gen1 */
body.page-template-dashboard #sidebar ul.gm-navlist li.gm-gen2card {
  /* se come el 1 px de hueco de la lista: cerrada, no suma aire bajo Menu IQ */
  margin-top: -1px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: max-height .32s ease, opacity .2s ease, visibility 0s linear .32s;
}
body.page-template-dashboard #sidebar ul.gm-navlist:has(> li.gm-navitem-iq.active) > li.gm-gen2card {
  max-height: 200px;
  opacity: 1;
  visibility: visible;
  transition: max-height .32s ease, opacity .3s ease .06s, visibility 0s;
}
body.page-template-dashboard.gm-rail-closed #sidebar li.gm-gen2card { display: none; }

/* Gen2 oculto (gm_gen2_oculto(), lib/dashboard-shell.php; visible desde el
   2-oct-2026): sin la tarjeta, sin las rayitas y el «Gen1» (cabecera y fila)
   no lleva a Gen2; se entra sólo por /dashboard/#menu-iq-gen2. La tarjeta
   sigue en el HTML: su enlace es el que activa la sección al llegar con ese
   hash. */
body.page-template-dashboard.gm-gen2-oculto #sidebar li.gm-gen2card { display: none !important; }
body.page-template-dashboard.gm-gen2-oculto #sidebar .gm-gen-switch { display: none !important; }
body.page-template-dashboard.gm-gen2-oculto #sidebar li.gm-navitem-iq .gm-tag--gen { cursor: inherit; }
body.page-template-dashboard.gm-gen2-oculto #sidebar li.gm-navitem-iq .gm-tag--gen:hover { filter: none; }
body.page-template-dashboard.gm-gen2-oculto #dashboard a.gm-iq__gen { pointer-events: none; cursor: default; }

/* Gen2 habilitado en la cuenta (lib/gen2.php, body.gm-gen2-on): la fila de
   Menu IQ abre Gen2 y lleva «Gen2» salvo con Gen1 a la vista; desde Gen2, la
   fila y las rayitas vuelven a Gen1 (gm-shell.js). Sin tarjeta «Descubre
   Gen2»: sigue en el HTML porque su .active es lo que marca Gen2 en el pilar
   (y su enlace, el que abre la sección). */
body.page-template-dashboard.gm-gen2-on #sidebar li.gm-gen2card { display: none !important; }
body.page-template-dashboard.gm-gen2-on #sidebar li.gm-navitem-iq:not(.active) .gm-tag--gen { display: none; }
body.page-template-dashboard.gm-gen2-on #sidebar li.gm-navitem-iq:not(.active) .gm-tag--gen2 { display: inline-flex; }

/* El estilo de la landing de Gen2 (1-oct-2026; antes, el tema «Night»):
   negro con borde de 1 px, como sus recuadros, y detrás, en la trama de
   puntos blancos y grises (la pinta iq-gen2.js en .gm-gen2card__trama), el
   planeta del héroe, grande y apenas asomado abajo a la izquierda, y
   estrellas tenues: en reposo, quieto y algo apagado; con el ratón encima, a
   todo brillo y en movimiento. Toda la tarjeta es el enlace a Gen2. */
body.page-template-dashboard #sidebar a.gm-gen2card__box {
  position: relative;
  isolation: isolate;
  display: block;
  overflow: hidden;
  margin: 10px 0 8px;
  padding: 18px 14px 14px 18px;
  border-radius: 16px;
  background: #0a0a0a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow .3s ease;
}
body.page-template-dashboard #sidebar a.gm-gen2card__box:hover,
body.page-template-dashboard #sidebar a.gm-gen2card__box:focus-visible { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
body.page-template-dashboard #sidebar a.gm-gen2card__box:focus-visible { outline: 2px solid rgba(255, 255, 255, .4); outline-offset: 2px; }
/* en reposo la trama va algo apagada; con el ratón encima toma todo su
   brillo (y iq-gen2.js la pone a girar) */
body.page-template-dashboard #sidebar .gm-gen2card__trama { position: absolute; z-index: -1; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; opacity: .55; transition: opacity .35s ease; }
body.page-template-dashboard #sidebar a.gm-gen2card__box:hover .gm-gen2card__trama,
body.page-template-dashboard #sidebar a.gm-gen2card__box:focus-visible .gm-gen2card__trama { opacity: 1; }
body.page-template-dashboard #sidebar .gm-gen2card__title {
  display: block;
  font-family: var(--gm-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.005em;
  color: #fff;
}
body.page-template-dashboard #sidebar .gm-gen2card__text {
  display: block;
  margin-top: 4px;
  font-family: var(--gm-font);
  font-size: 12px;
  font-weight: 450;
  line-height: 1.4;
  color: #a1a1a1;
}
/* «Saber más», como «Ver propuesta» de la landing (la píldora oscura con
   borde gris), con su letra de 12 px; el fondo es translúcido con blur, así
   la trama se adivina detrás y en conjunto se ve igual */
body.page-template-dashboard #sidebar .gm-gen2card__cta {
  display: flex;
  align-items: center;
  width: fit-content;
  height: 28px;
  margin: 30px 0 0 auto;
  padding: 0 12px;
  border-radius: var(--gm-r-pill, 999px);
  box-sizing: border-box;
  background: rgba(17, 17, 17, .6);
  box-shadow: inset 0 0 0 1px #454545;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #ededed;
  font-family: var(--gm-font);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  transition: background-color .3s ease, box-shadow .3s ease;
}
body.page-template-dashboard #sidebar a.gm-gen2card__box:hover .gm-gen2card__cta { background: rgba(26, 26, 26, .7); box-shadow: inset 0 0 0 1px #5c5c5c; }
@media (prefers-reduced-motion: reduce) {
  body.page-template-dashboard #sidebar a.gm-gen2card__box,
  body.page-template-dashboard #sidebar .gm-gen2card__trama { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Pase 26 — Loyalty: escaneo con conmutador, filtros más cortos, caja de pases
   centrada, «Ver formulario» en icono, filas con hover y el pop-up del pase
   sin cajas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── lista: sin la línea antes de los escaneos (la de las fechas se queda) ─ */
body.page-template-dashboard #loyalty .responsive-table li > div:last-child { border-left: 0; }

/* ── lista: el hover de Ítems y Categorías (una regla de Loyalty lo pisaba) ─ */
body.page-template-dashboard #dashboard #loyalty .responsive-table li:hover {
  background-color: var(--gm-surface-hi, #1f1f1f);
  border-color: var(--gm-border-hi, #3d3d3d);
}

/* ── caja «Pases»: con «Todos los PDV» sobraba el relleno del contador oculto ─ */
body.page-template-dashboard #dashboard #loyalty .gm-stat .passes-pdv:has(+ .passes-total.hidden) { padding-right: 0; }

/* ── «Ver formulario»: botón cuadrado de icono ───────────────────────────── */
body.page-template-dashboard #dashboard #loyalty .view_pdv_form.gm-iconbtn { padding: 0; }

/* ── Filtros: «Número de visitas» con lo justo ───────────────────────────── */
body.page-template-dashboard .gm-modal#pass_filters .form-section-fields select[name="operator"] { width: 104px !important; flex: none; }
body.page-template-dashboard .gm-modal#pass_filters .form-section-fields input[name="visits_number"] { width: 50px !important; flex: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   Escanear pase
   ═══════════════════════════════════════════════════════════════════════════ */

/* «Escaneando pase en:» arriba y chico; el PDV debajo a tamaño de título */
body.page-template-dashboard .gm-modal#scan_qr .gm-scan__head .gm-modal__title {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
body.page-template-dashboard .gm-modal#scan_qr .gm-scan__eyebrow {
  font-size: 12.5px;
  font-weight: 450;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--gm-modal-text);
}
body.page-template-dashboard .gm-modal#scan_qr .gm-scan__pdv { line-height: 1.25; }

/* el marco de la cámara: el borde del modo (el que llevaban los botones) y
   esquinas más redondas */
body.page-template-dashboard .gm-modal#scan_qr .gm-scan__frame {
  position: relative;
  overflow: hidden;
  background: var(--gm-modal-field);
  border: 1px solid #2ba6ff;
  border-radius: 18px;
  transition: border-color var(--gm-t-fast);
}
body.page-template-dashboard .gm-modal#scan_qr .gm-scan__frame.is-reward { border-color: #ff4c61; }
body.page-template-dashboard .gm-modal#scan_qr .gm-scan__frame #reader { border-radius: 17px; }

/* el texto: la indicación en blanco y el mensaje con alto fijo de dos líneas,
   así el pop-up no cambia de alto entre visita y canje */
body.page-template-dashboard .gm-modal#scan_qr .gm-scan__title { color: #fff; }
body.page-template-dashboard .gm-modal#scan_qr .gm-scan__text {
  display: block;
  min-height: 3em;
  line-height: 1.5;
  margin-bottom: 16px;
}

/* el conmutador, como «Pop-ups / Registros». La regla vale para cualquier
   .gm-seg de radios del panel —el escaneo, Ver pase › Canjes—, no sólo para el
   pop-up del QR: la versión de pestañas (.gm-seg--tabs) va con botones */
body.page-template-dashboard .gm-seg:has(input[type="radio"]) {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  background-color: #414141;
  border-radius: 10px;
}
body.page-template-dashboard .gm-seg:has(input[type="radio"]) label {
  position: relative;
  display: flex;
  margin: 0;
}
body.page-template-dashboard .gm-seg input[type="radio"] {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
body.page-template-dashboard .gm-seg input[type="radio"] + span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: #afafaf;
  background-color: transparent;
  cursor: pointer;
  transition: background-color var(--gm-t-fast), color var(--gm-t-fast);
}
body.page-template-dashboard .gm-seg input[type="radio"]:checked + span {
  color: var(--gm-text, #ececec);
  background-color: #212121;
}
body.page-template-dashboard .gm-seg input[type="radio"]:focus-visible + span { outline: 1px solid #5a5a5a; outline-offset: 1px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Pop-up del pase
   ═══════════════════════════════════════════════════════════════════════════ */

/* sistema operativo: el icono de la lista y su nombre */
body.page-template-dashboard .gm-modal#view_pass .gm-device {
  gap: 8px;
  padding: 0;
  font-size: 13px;
  color: var(--gm-modal-text);
}
body.page-template-dashboard .gm-modal#view_pass .gm-device .gm-i { width: 16px; height: 16px; }

/* la barra: el recuento con la letra de «1316 registros» y la acción */
body.page-template-dashboard .gm-modal#view_pass .form-section-fields > .gm-pass-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 32px;
  padding: 14px 0 12px;
  border-bottom: 0;
}
body.page-template-dashboard .gm-modal#view_pass .form-section-fields > .gm-pass-bar + * { padding-top: 0; }
body.page-template-dashboard .gm-modal#view_pass .gm-count {
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 450;
  color: var(--gm-text-2, #afafaf);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.page-template-dashboard .gm-modal#view_pass .add-action-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
body.page-template-dashboard .gm-modal#view_pass .gm-pass-bar__ask {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 4px;
  font-size: 13px;
  font-weight: 450;
  color: var(--gm-modal-text);
  white-space: nowrap;
}
body.page-template-dashboard .gm-modal#view_pass .gm-pass-bar__ask .gm-i { width: 14px; height: 14px; }
body.page-template-dashboard .gm-modal#view_pass .gm-btn--sm {
  height: 32px;
  padding: 0 12px;
  gap: 6px;
  font-size: 13px;
}
body.page-template-dashboard .gm-modal#view_pass .gm-btn--sm .gm-i { width: 14px; height: 14px; }
body.page-template-dashboard .gm-modal#view_pass .gm-btn--primary.gm-btn--sm { padding: 0 16px; }
/* con «Todos los PDV»: dónde se suma, con la piel de los campos */
body.page-template-dashboard .gm-modal#view_pass .gm-pass-bar .gm-pdv-picker {
  height: 32px;
  max-width: 180px;
  padding: 0 28px 0 10px;
  font-size: 13px;
  color: #fff;
  background-color: var(--gm-modal-field);
  border: 1px solid var(--gm-modal-field-border);
  border-radius: 9px;
}

/* las listas: sin cajas, filas separadas por 1 px sobre el fondo del pop-up */
body.page-template-dashboard .gm-modal#view_pass .gm-pass-table { display: flex; flex-direction: column; width: 100%; }
body.page-template-dashboard .gm-modal#view_pass .gm-pass-row {
  display: grid;
  grid-template-columns: 22px 148px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  min-height: 40px;
  padding: 0 2px;
  border-bottom: 1px solid var(--gm-modal-line);
  font-family: var(--gm-font-mono, ui-monospace, Menlo, monospace);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
body.page-template-dashboard .gm-modal#view_pass .gm-pass-row:last-child { border-bottom: 0; }
body.page-template-dashboard .gm-modal#view_pass .gm-pass-row--head {
  min-height: 30px;
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--gm-text-3, #7c7c7c);
}
body.page-template-dashboard .gm-modal#view_pass .gm-pass-row__n { color: var(--gm-text-3, #7c7c7c); }
body.page-template-dashboard .gm-modal#view_pass .gm-pass-row__fecha { color: #d4d4d4; white-space: nowrap; }
body.page-template-dashboard .gm-modal#view_pass .gm-pass-row__pdv {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gm-modal-text);
}
body.page-template-dashboard .gm-modal#view_pass .gm-pass-row .row-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  min-width: 28px;
}
body.page-template-dashboard .gm-modal#view_pass .gm-pass-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--gm-text-3, #7c7c7c);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color var(--gm-t-fast);
}
body.page-template-dashboard .gm-modal#view_pass .gm-pass-icon .gm-i { width: 15px; height: 15px; }
body.page-template-dashboard .gm-modal#view_pass .row-delete-btn:hover { color: var(--gm-bad, #f87171); }
body.page-template-dashboard .gm-modal#view_pass .gm-pass-link {
  padding: 0;
  background: transparent;
  border: 0;
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--gm-modal-text);
  cursor: pointer;
  transition: color var(--gm-t-fast);
}
body.page-template-dashboard .gm-modal#view_pass .gm-pass-link:hover { color: #fff; }
body.page-template-dashboard .gm-modal#view_pass .gm-pass-link--bad,
body.page-template-dashboard .gm-modal#view_pass .gm-pass-link--bad:hover { color: var(--gm-bad, #f87171); }

/* notificaciones: el mensaje con la letra del panel y la fecha a la derecha */
body.page-template-dashboard .gm-modal#view_pass .gm-pass-table--push .gm-pass-row {
  grid-template-columns: minmax(0, 1fr) 132px;
  align-items: start;
  padding: 10px 2px;
}
body.page-template-dashboard .gm-modal#view_pass .gm-pass-table--push .gm-pass-row--head { align-items: center; padding: 0 2px; }
body.page-template-dashboard .gm-modal#view_pass .gm-pass-table--push .gm-pass-row > :last-child { text-align: right; }
body.page-template-dashboard .gm-modal#view_pass .gm-pass-row__msg {
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 12.5px;
  line-height: 1.5;
  color: #d4d4d4;
}
body.page-template-dashboard .gm-modal#view_pass .gm-pass-table--push .gm-pass-row__fecha { padding-top: 2px; color: var(--gm-modal-text); }

body.page-template-dashboard .gm-modal#view_pass .gm-pass-empty {
  margin: 2px 0 0;
  font-size: 12.5px;
  font-weight: 450;
  color: var(--gm-text-3, #7c7c7c);
}

/* un botón de icono con .hidden se esconde: la regla con #dashboard le ganaba */
body.page-template-dashboard #dashboard .gm-iconbtn.hidden { display: none !important; }

/* los datos de las filas en monoespaciada: el panel pone Inter en cada <span>,
   así que se nombra el span; cabecera y mensaje vuelven a la letra del panel */
body.page-template-dashboard .gm-modal#view_pass .gm-pass-row > span {
  font-family: var(--gm-font-mono, ui-monospace, Menlo, monospace);
  font-size: 12px;
  letter-spacing: 0;
}
body.page-template-dashboard .gm-modal#view_pass .gm-pass-row--head > span,
body.page-template-dashboard .gm-modal#view_pass .gm-pass-row > span.gm-pass-row__msg {
  font-family: var(--gm-font, 'Inter', sans-serif);
}
body.page-template-dashboard .gm-modal#view_pass .gm-pass-row--head > span { font-size: 11.5px; }
body.page-template-dashboard .gm-modal#view_pass .gm-pass-row > span.gm-pass-row__msg { font-size: 12.5px; }

/* «Validado por … el … a las …»: segunda línea bajo fecha y PDV; el N° y las
   acciones siguen centrados en la primera */
body.page-template-dashboard .gm-modal#view_pass .gm-pass-row--by {
  row-gap: 2px;
  padding-top: 8px;
  padding-bottom: 8px;
}
body.page-template-dashboard .gm-modal#view_pass .gm-pass-row > span.gm-pass-row__by {
  grid-column: 2 / 4;
  grid-row: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 11.5px;
  color: var(--gm-text-3, #7c7c7c);
}

/* con «Todos los PDV» la confirmación lleva el selector: ocupa el hueco libre
   y la pregunta sobra (el selector ya pregunta «Elige un PDV») */
body.page-template-dashboard .gm-modal#view_pass .add-action-container.is-asking:has(select) { flex: 1 1 auto; }
body.page-template-dashboard .gm-modal#view_pass .add-action-container.is-asking:has(select) .gm-pass-bar__ask { display: none; }
body.page-template-dashboard .gm-modal#view_pass .gm-pass-bar .add-action-container .gm-pdv-picker {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Pase 27 — Loyalty, segunda vuelta
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── acción masiva: el foco aclara el borde, sin el anillo azul del navegador ─ */
body.page-template-dashboard #loyalty .tool-box select.bulk-actions:focus,
body.page-template-dashboard #loyalty .tool-box select.bulk-actions:focus-visible {
  outline: none;
  box-shadow: none;
  border-color: var(--gm-border-hi, #3d3d3d);
}
body.page-template-dashboard #loyalty .tool-box select.bulk-actions:disabled { opacity: .5; cursor: not-allowed; }

/* ── pop-up del pase: «Sumar …» sola a la derecha, el recuento debajo ────── */
body.page-template-dashboard .gm-modal#view_pass .form-section-fields > .gm-pass-bar { padding: 14px 0 6px; }
body.page-template-dashboard .gm-modal#view_pass .gm-pass-bar .add-action-container { flex: 1 1 auto; justify-content: flex-end; }
/* confirmando: pregunta o selector a la izquierda, Cancelar y Sumar a la derecha */
body.page-template-dashboard .gm-modal#view_pass .gm-pass-bar .add-action-container.is-asking { justify-content: flex-start; }
body.page-template-dashboard .gm-modal#view_pass .gm-pass-bar .add-action-container.is-asking .add-action-cancel { margin-left: auto; }
body.page-template-dashboard .gm-modal#view_pass .gm-pass-bar .add-action-container .gm-pdv-picker {
  flex: 0 1 200px;
  width: 200px;
  max-width: 200px;
}
/* el recuento, sobre la lista y alineado a la izquierda */
body.page-template-dashboard .gm-modal#view_pass .gm-pass-list > .gm-count {
  display: block;
  margin: 2px 0 10px;
}
body.page-template-dashboard .gm-modal#view_pass .form-section.notifications .form-section-fields > .gm-pass-list { padding-top: 14px; }

/* ── escanear pase: el antetítulo más grande, en blanco y con aire ───────── */
body.page-template-dashboard .gm-modal#scan_qr .gm-scan__head .gm-modal__title { gap: 6px; }
body.page-template-dashboard .gm-modal#scan_qr .gm-scan__eyebrow {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}

/* ── el marco de la cámara palpita en el color del modo ─────────────────── */
/* visita #18b987, canje #f73e5c, cupón #a78bfa (lila); 1,8 s por latido */
body.page-template-dashboard .gm-modal#scan_qr .gm-scan__frame.is-visit { border-color: #29a358; }
body.page-template-dashboard .gm-modal#scan_qr .gm-scan__frame.is-reward { border-color: #f73e5c; }
body.page-template-dashboard .gm-modal#scan_qr .gm-scan__frame.is-cupon { border-color: #a78bfa; }
@keyframes gm-scan-latido-visita {
  0%, 100% { box-shadow: 0 0 0 0 rgba(24, 185, 135, 0), 0 0 0 0 rgba(24, 185, 135, 0); }
  50%      { box-shadow: 0 0 0 5px rgba(24, 185, 135, .22), 0 0 26px 4px rgba(24, 185, 135, .32); }
}
@keyframes gm-scan-latido-canje {
  0%, 100% { box-shadow: 0 0 0 0 rgba(247, 62, 92, 0), 0 0 0 0 rgba(247, 62, 92, 0); }
  50%      { box-shadow: 0 0 0 5px rgba(247, 62, 92, .22), 0 0 26px 4px rgba(247, 62, 92, .32); }
}
@keyframes gm-scan-latido-cupon {
  0%, 100% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0), 0 0 0 0 rgba(167, 139, 250, 0); }
  50%      { box-shadow: 0 0 0 5px rgba(167, 139, 250, .22), 0 0 26px 4px rgba(167, 139, 250, .32); }
}
body.page-template-dashboard .gm-modal#scan_qr .gm-scan__frame.is-visit { animation: gm-scan-latido-visita 1.8s ease-in-out infinite; }
body.page-template-dashboard .gm-modal#scan_qr .gm-scan__frame.is-reward { animation: gm-scan-latido-canje 1.8s ease-in-out infinite; }
body.page-template-dashboard .gm-modal#scan_qr .gm-scan__frame.is-cupon { animation: gm-scan-latido-cupon 1.8s ease-in-out infinite; }
/* el halo necesita sitio: el marco no puede recortar su propia sombra hacia fuera */
body.page-template-dashboard .gm-modal#scan_qr .gm-scan { padding-top: 6px; }
@media (prefers-reduced-motion: reduce) {
  body.page-template-dashboard .gm-modal#scan_qr .gm-scan__frame.is-visit,
  body.page-template-dashboard .gm-modal#scan_qr .gm-scan__frame.is-reward,
  body.page-template-dashboard .gm-modal#scan_qr .gm-scan__frame.is-cupon { animation: none; }
}

/* ══ Pase 28 · Loyalty ════════════════════════════════════════════════════ */

/* «Ver formulario» de la cabecera es solo para móvil: en escritorio va el que
   asoma detrás de la caja de pases (.gm-form-tab). Desde Loyalty v2 esa caja
   también vive en la cabecera, así que la regla no puede alcanzarlo. */
@media (min-width: 640px) {
  body.page-template-dashboard #dashboard #loyalty .section-header .view_pdv_form:not(.gm-form-tab) { display: none !important; }
}

/* la fila de «Seleccionar todos» bajo la barra ya no se usa: empujaba la lista */
body.page-template-dashboard #dashboard #loyalty .select-all-container { display: none !important; }

/* «20 seleccionados. Seleccionar total (1025)»: mismo texto, con subrayado al pasar */
body.page-template-dashboard #dashboard #loyalty-actions-form .control-container:has(> .gm-select-all) > .gm-selection-count::after,
body.page-template-dashboard #dashboard .control-bulk:has(> .gm-select-all) > .gm-selection-count::after { content: '.'; }
body.page-template-dashboard #dashboard #loyalty-actions-form .gm-select-all,
body.page-template-dashboard #dashboard .control-bulk .gm-select-all {
  appearance: none;
  align-self: center;
  height: auto;
  min-height: 0;
  /* la barra separa con 7,5 px: aquí basta el ancho de un espacio */
  margin: 0 0 0 -3.5px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gm-text-2, #afafaf);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: inherit;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-underline-offset: 3px;
  cursor: pointer;
}
body.page-template-dashboard #dashboard #loyalty-actions-form .gm-select-all:hover,
body.page-template-dashboard #dashboard #loyalty-actions-form .gm-select-all:focus-visible,
body.page-template-dashboard #dashboard .control-bulk .gm-select-all:hover,
body.page-template-dashboard #dashboard .control-bulk .gm-select-all:focus-visible {
  color: #fff;
  text-decoration: underline;
  outline: none;
}
body.page-template-dashboard #dashboard #loyalty-actions-form .gm-select-all[disabled],
body.page-template-dashboard #dashboard .control-bulk .gm-select-all[disabled] { cursor: default; text-decoration: none; color: var(--gm-text-2, #afafaf); }

/* píldoras sin marcar: el fondo y el borde de los campos del pop-up */
body.page-template-dashboard .gm-modal .gm-pills input:not(:checked) + span {
  background: var(--gm-modal-field);
  border-color: var(--gm-modal-field-border);
}
body.page-template-dashboard .gm-modal .gm-pills input:not(:checked) + span:hover { border-color: var(--gm-modal-field-focus); }

/* ── pop-up del pase: 80 px menos de alto ────────────────────────────────── */
/* con 680 px quedaban más de 200 px vacíos bajo «Sistema operativo»; las
   listas de visitas y canjes siguen desplazándose por dentro */
@media (min-width: 768px) {
  body.page-template-dashboard .gm-modal#view_pass .gm-modal__body { height: min(600px, calc(81 * var(--gm-vh, 1vh))); }
}

/* ── pop-ups: el bloqueo de scroll no toca el <body> en escritorio ───────── */
/* jQuery Popup Overlay (scrolllock) escribe overflow:hidden en el <body> al
   abrir y overflow:visible al cerrar. En escritorio el documento no se
   desplaza (el panel y el menú tienen su propio scroll), así que el bloqueo no
   hace nada útil, y cambiar el overflow del <body> (que pasa al viewport)
   obliga al navegador a rehacer los contenedores de scroll: tras cerrar un
   pop-up el panel y el menú saltaban hacia arriba a golpes. Se fijan los
   valores que ya tiene en reposo y los estilos en línea del plugin no cambian
   nada. En móvil el documento sí se desplaza y el bloqueo sigue. */
@media (min-width: 768px) {
  body.page-template-dashboard {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    margin-right: 0 !important;
  }
}

/* ── Loyalty · «Ver formulario» asoma detrás de la caja de pases ─────────── */
/* El botón mide 48 px y la caja le tapa los 13 de la derecha: quedan 35 a la
   vista con el icono centrado en 38. Con «Todos los PDV» (.is-guardado) el
   margen negativo cubre el ancho entero y se guarda detrás, hacia la derecha;
   al elegir un PDV vuelve a salir hacia la izquierda. La caja no se mueve: la
   barra crece hacia la izquierda. */
body.page-template-dashboard #dashboard #loyalty .toolbar-right > .gm-form-tab {
  position: relative;
  z-index: 0;
  width: 48px;
  min-width: 48px;
  padding: 0 10px 0 0;
  margin-right: -13px;
  border-radius: 10px 0 0 10px;
  visibility: visible;
  transition: margin-right .5s cubic-bezier(.45, .05, .25, 1),
              background-color var(--gm-t-fast), border-color var(--gm-t-fast), color var(--gm-t-fast),
              visibility 0s linear 0s;
}
body.page-template-dashboard #dashboard #loyalty .toolbar-right > .gm-form-tab.is-guardado {
  margin-right: -48px;
  pointer-events: none;
  visibility: hidden;
  transition: margin-right .5s cubic-bezier(.45, .05, .25, 1),
              background-color var(--gm-t-fast), border-color var(--gm-t-fast), color var(--gm-t-fast),
              visibility 0s linear .5s;
}
body.page-template-dashboard #dashboard #loyalty .toolbar-right > .active-passes {
  position: relative;
  z-index: 1;
  margin-left: 0;
}
@media (prefers-reduced-motion: reduce) {
  body.page-template-dashboard #dashboard #loyalty .toolbar-right > .gm-form-tab,
  body.page-template-dashboard #dashboard #loyalty .toolbar-right > .gm-form-tab.is-guardado { transition: none; }
}

/* ── Loyalty · la caja de pases con el borde de «Ver formulario» ─────────── */
body.page-template-dashboard #dashboard #loyalty .gm-stat { border-color: var(--gm-border, #2f2f2f); }

/* ── Loyalty v1 · la caja de pases, como la de Loyalty v2 ──────────────────
   (Martín, 12-oct) Una sola pieza con contorno y sin relleno: la cifra en la
   letra de display, a 15, y «pases» en gris a su lado, por la misma base; con
   un PDV elegido, «489 / 489» (la global en gris). «Ver formulario» ya no
   asoma detrás de la caja. Sólo forma: qué cifras se ven y cuándo lo sigue
   decidiendo loyalty.js. Sólo sin Loyalty v2 (con v2 la pinta
   loyalty-pos.css, con los mismos valores) y sólo en escritorio: en el
   teléfono va la de gm-movil.css. */
@media (min-width: 768px) {
  body.page-template-dashboard:not(.gm-loyalty-v2) #dashboard #loyalty .section-header .toolbar-right { align-self: center; align-items: stretch; height: 40px; margin-left: auto; padding: 0; gap: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px #262626; }
  body.page-template-dashboard:not(.gm-loyalty-v2) #dashboard #loyalty .section-header .toolbar-right .gm-form-tab { display: none !important; }
  body.page-template-dashboard:not(.gm-loyalty-v2) #dashboard #loyalty .section-header .toolbar-right > * + * { margin-left: 0 !important; }
  body.page-template-dashboard:not(.gm-loyalty-v2) #dashboard #loyalty .section-header .gm-stat.active-passes { flex-direction: row !important; flex-wrap: wrap; align-content: center; align-items: baseline !important; justify-content: flex-end; gap: 6px; width: auto; height: auto; min-width: 0; margin: 0; padding: 0 16px !important; border: 0 !important; border-radius: 0; background: none !important; box-shadow: none !important; overflow: visible; }
  /* «Pases:» se va y el nombre sigue a la cifra */
  body.page-template-dashboard:not(.gm-loyalty-v2) #dashboard #loyalty .section-header .gm-stat.active-passes .active-passes-header { display: none !important; }
  body.page-template-dashboard:not(.gm-loyalty-v2) #dashboard #loyalty .section-header .gm-stat.active-passes .active-passes-count { order: 0; display: flex; align-items: baseline; justify-content: flex-end; gap: 0; width: auto !important; height: auto; padding: 0; }
  body.page-template-dashboard:not(.gm-loyalty-v2) #dashboard #loyalty .section-header .gm-stat.active-passes .active-passes-count::after { content: "pases"; margin-left: 6px; font-family: var(--gm-font); font-size: 13px; font-weight: 450; line-height: 1; color: #737373; }
  /* en bloque, no en flex (de Tailwind): su línea de base es la de la cifra y «pases» se apoya en ella */
  body.page-template-dashboard:not(.gm-loyalty-v2) #dashboard #loyalty .section-header .gm-stat.active-passes .active-passes-count > div { display: block !important; width: auto !important; padding: 0 !important; border: 0 !important; font-family: var(--gm-font-disp); font-size: 15px !important; font-weight: 600; line-height: 1; letter-spacing: -.005em; color: #fff; font-variant-numeric: tabular-nums; }
  body.page-template-dashboard:not(.gm-loyalty-v2) #dashboard #loyalty .section-header .gm-stat.active-passes .active-passes-count > div + div:not(.hidden)::before { content: "/"; margin: 0 6px; font-weight: 400; color: #525252; }
  body.page-template-dashboard:not(.gm-loyalty-v2) #dashboard #loyalty .section-header .gm-stat.active-passes .active-passes-count > div + div:not(.hidden) { color: #a3a3a3; }
  body.page-template-dashboard:not(.gm-loyalty-v2) #dashboard #loyalty .section-header .gm-stat.active-passes .active-passes-count > div.hidden { display: none !important; }
}

/* ══ Pase 29 · Pop-up de notificaciones ═══════════════════════════════════ */

/* un botón por tipo: .gm-btn fija display y el atributo hidden no ocultaba */
body.page-template-dashboard .gm-modal .gm-modal__foot [data-gm-notif][hidden] { display: none !important; }

/* pestañas: con line-height 1 y overflow oculto se cortaba la tilde de «Única» */
body.page-template-dashboard .gm-modal__tab-text { line-height: 1.35; }

/* «Se omitirán N pases eliminados.»: cuelga del recuento con la L de las
   categorías en varias pantallas, en monoespaciada y con la letra de la ayuda */
body.page-template-dashboard .gm-modal .gm-hint:has(+ .gm-omitidos:not(.hidden)) { margin-bottom: 0; }
body.page-template-dashboard .gm-modal .gm-omitidos {
  position: relative;
  margin: 0 0 14px;
  padding: 6px 0 0 18px;
  border: 0;
  background: none;
  font-family: var(--gm-font-mono, ui-monospace, Menlo, monospace);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--gm-modal-text);
}
/* la L baja desde el recuento hasta la mitad de la línea (6 px de aire + 8) */
body.page-template-dashboard .gm-modal .gm-omitidos::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 1px;
  width: 9px;
  height: 13px;
  border-left: 1px solid #3d3d3d;
  border-bottom: 1px solid #3d3d3d;
  border-bottom-left-radius: 3px;
}
body.page-template-dashboard .gm-modal .gm-omitidos.hidden { display: none; }

/* ── campos de fecha y hora con calendario propio (gm-fechas.js) ─────────── */
body.page-template-dashboard .gm-modal .form-section-fields input.gm-fecha {
  padding-right: 38px !important;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.4'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 15px 15px !important;
}
body.page-template-dashboard .gm-modal .form-section-fields input.gm-fecha--hora {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6.8V12l3.4 2'/%3E%3C/svg%3E") !important;
}

/* el calendario cuelga del <body>: selectores sin .gm-modal */
body.page-template-dashboard .flatpickr-calendar.gm-calendario {
  background: #212121;
  border: 1px solid #2e2e2e;
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35);
  font-family: var(--gm-font, 'Inter', sans-serif);
  color: #afafaf;
  margin-top: 6px;
  overflow: hidden;
}
body.page-template-dashboard .flatpickr-calendar.gm-calendario::before,
body.page-template-dashboard .flatpickr-calendar.gm-calendario::after { display: none; }
body.page-template-dashboard .gm-calendario .flatpickr-months { padding: 6px 4px 0; }
body.page-template-dashboard .gm-calendario .flatpickr-months .flatpickr-month {
  height: 38px;
  background: transparent;
  color: #fff;
  fill: #fff;
}
body.page-template-dashboard .gm-calendario .flatpickr-current-month {
  padding-top: 9px;
  font-size: 14px;
  font-weight: 500;
}
body.page-template-dashboard .gm-calendario .flatpickr-current-month span.cur-month { font-weight: 500; color: #fff; margin-left: 0; }
body.page-template-dashboard .gm-calendario .flatpickr-current-month span.cur-month:hover { background: transparent; }
body.page-template-dashboard .gm-calendario .flatpickr-current-month input.cur-year {
  font-weight: 500;
  color: #fff;
  font-family: inherit;
  height: auto;
  min-height: 0;
  padding: 0 0 0 .5ch;
  border: 0;
  background: transparent;
  box-shadow: none;
}
body.page-template-dashboard .gm-calendario .numInputWrapper:hover { background: transparent; }
body.page-template-dashboard .gm-calendario .numInputWrapper span { border: 0; }
body.page-template-dashboard .gm-calendario .numInputWrapper span:hover { background: #2c2c2c; }
body.page-template-dashboard .gm-calendario .numInputWrapper span.arrowUp::after { border-bottom-color: #afafaf; }
body.page-template-dashboard .gm-calendario .numInputWrapper span.arrowDown::after { border-top-color: #afafaf; }
body.page-template-dashboard .gm-calendario .flatpickr-months .flatpickr-prev-month,
body.page-template-dashboard .gm-calendario .flatpickr-months .flatpickr-next-month {
  top: 8px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0 6px;
  border-radius: 8px;
  color: #afafaf;
  fill: none;
  transition: background-color var(--gm-t-fast), color var(--gm-t-fast);
}
body.page-template-dashboard .gm-calendario .flatpickr-months .flatpickr-prev-month:hover,
body.page-template-dashboard .gm-calendario .flatpickr-months .flatpickr-next-month:hover { background: #2c2c2c; color: #fff; }
body.page-template-dashboard .gm-calendario .flatpickr-months .flatpickr-prev-month:hover svg,
body.page-template-dashboard .gm-calendario .flatpickr-months .flatpickr-next-month:hover svg { fill: none; }
body.page-template-dashboard .gm-calendario .flatpickr-months .flatpickr-prev-month svg,
body.page-template-dashboard .gm-calendario .flatpickr-months .flatpickr-next-month svg { width: 14px; height: 14px; }
body.page-template-dashboard .gm-calendario .flatpickr-months .flatpickr-disabled { opacity: .3; }
body.page-template-dashboard .gm-calendario .flatpickr-weekdays { height: 30px; margin-top: 4px; background: transparent; }
body.page-template-dashboard .gm-calendario span.flatpickr-weekday {
  background: transparent;
  color: #7c7c7c;
  font-size: 11px;
  font-weight: 500;
  text-transform: capitalize;
}
body.page-template-dashboard .gm-calendario .flatpickr-days { border: 0; padding-bottom: 6px; }
/* el ancho lo reparte flatpickr (7 por fila, máx. 39 px): solo se toca el alto */
body.page-template-dashboard .gm-calendario .flatpickr-day {
  height: 38px;
  line-height: 36px;
  margin: 1px 0;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #d4d4d4;
  font-size: 13px;
  font-weight: 450;
  font-variant-numeric: tabular-nums;
}
body.page-template-dashboard .gm-calendario .flatpickr-day:hover,
body.page-template-dashboard .gm-calendario .flatpickr-day:focus,
body.page-template-dashboard .gm-calendario .flatpickr-day.prevMonthDay:hover,
body.page-template-dashboard .gm-calendario .flatpickr-day.nextMonthDay:hover {
  background: #2c2c2c;
  border-color: #2c2c2c;
  color: #fff;
  outline: none;
}
body.page-template-dashboard .gm-calendario .flatpickr-day.today { border-color: #4a4a4a; }
body.page-template-dashboard .gm-calendario .flatpickr-day.today:hover,
body.page-template-dashboard .gm-calendario .flatpickr-day.today:focus { background: #2c2c2c; border-color: #4a4a4a; color: #fff; }
body.page-template-dashboard .gm-calendario .flatpickr-day.selected,
body.page-template-dashboard .gm-calendario .flatpickr-day.selected:hover,
body.page-template-dashboard .gm-calendario .flatpickr-day.selected:focus,
body.page-template-dashboard .gm-calendario .flatpickr-day.selected.prevMonthDay,
body.page-template-dashboard .gm-calendario .flatpickr-day.selected.nextMonthDay {
  background: #f9f9f9;
  border-color: #f9f9f9;
  color: #0a0a0a;
  font-weight: 500;
}
body.page-template-dashboard .gm-calendario .flatpickr-day.prevMonthDay,
body.page-template-dashboard .gm-calendario .flatpickr-day.nextMonthDay { color: #555; }
body.page-template-dashboard .gm-calendario .flatpickr-day.flatpickr-disabled,
body.page-template-dashboard .gm-calendario .flatpickr-day.flatpickr-disabled:hover {
  background: transparent;
  border-color: transparent;
  color: #444;
  cursor: default;
}
/* la hora: la línea de los pop-ups encima y los números en blanco */
body.page-template-dashboard .gm-calendario.hasTime .flatpickr-time {
  height: 44px;
  max-height: 44px;
  line-height: 44px;
  border-top: 1px solid #2c2c2c;
}
body.page-template-dashboard .gm-calendario.noCalendar.hasTime .flatpickr-time { border-top: 0; }
body.page-template-dashboard .gm-calendario .flatpickr-time input {
  height: 44px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 450;
  font-variant-numeric: tabular-nums;
}
body.page-template-dashboard .gm-calendario .flatpickr-time input:hover,
body.page-template-dashboard .gm-calendario .flatpickr-time input:focus { background: #2c2c2c; outline: none; }
body.page-template-dashboard .gm-calendario .flatpickr-time .flatpickr-time-separator { color: #7c7c7c; }
body.page-template-dashboard .gm-calendario .flatpickr-time .numInputWrapper span.arrowUp::after { border-bottom-color: #afafaf; }
body.page-template-dashboard .gm-calendario .flatpickr-time .numInputWrapper span.arrowDown::after { border-top-color: #afafaf; }
/* al enfocar, flatpickr selecciona el número: sin el bloque gris claro */
body.page-template-dashboard .gm-calendario .flatpickr-time input::selection { background: rgba(255, 255, 255, .16); color: #fff; }

/* ══ Norma · fila «título + switch a la derecha + bajada debajo» ═══════════ */
/* Una sola forma para todas (Visible en Pop-ups, Notificación recurrente,
   Usuarios, Sin stock): fila de 14 px arriba y abajo, título 13 px/500,
   bajada 12,5 px/450 a 5 px del título. La bajada va en <span class="gm-hint">;
   si llega en <small>, el tema la subía 4 px (position/top) y le cambiaba la
   altura de línea: aquí se neutraliza para que el tag no importe. */
body.page-template-dashboard .gm-modal .gm-switch-row .gm-hint,
body.page-template-dashboard .gm-modal .form-group.sin-stock .gm-hint {
  display: block;
  position: static;
  top: auto;
  margin: 5px 0 0;
  padding: 0;
  font-size: 12.5px;
  font-weight: 450;
  line-height: 1.5;
  color: var(--gm-modal-text);
  text-indent: 0;
  text-align: left;
}

/* ══ Acción masiva: «seleccionar todo» dentro del selector ════════════════ */
/* La casilla va en línea con las de las filas (14 px + 1 de borde desde el
   borde de la fila) y el selector arranca en ese mismo borde, con sitio para
   la casilla antes del texto. Ítems (.control-bulk) y Loyalty. Los ids van en
   el selector para ganarle a la regla que la fijaba en top/left 0. */
body.page-template-dashboard #dashboard .tool-box .control-container.control-bulk,
body.page-template-dashboard #dashboard #loyalty-actions-form .control-container { position: relative; }
body.page-template-dashboard #dashboard .tool-box .control-container > #styled-checkbox-select-all + label,
body.page-template-dashboard #dashboard .tool-box .control-container > #loyalty-styled-checkbox-select-all + label {
  position: absolute;
  left: 15px;
  top: 50%;
  z-index: 1;
  margin: 0;
  transform: translateY(-50%);
}

/* La barra de selección de Loyalty ya no lleva el select, sino el recuento y los
   chips de acción: la casilla vuelve al flujo, porque absoluta quedaba dibujada
   encima de «N seleccionados». En la columna de las de las filas (15 px desde el
   borde), como la de Ítems. */
body.page-template-dashboard #dashboard .tool-box .control-container:has(> .gm-bulk-chips) > #loyalty-styled-checkbox-select-all + label {
  position: relative;
  left: auto;
  top: auto;
  margin: 0 2px 0 15px;
  transform: none;
}
body.page-template-dashboard #dashboard .tool-box .control-container.control-bulk select.bulk-actions,
body.page-template-dashboard #dashboard #loyalty .tool-box #loyalty-actions-form select.bulk-actions {
  min-width: 190px;
  padding-left: 46px;
}

/* Ítems, como Loyalty: la casilla va suelta, en la columna de las de las filas
   (15 px desde el borde), y el selector a su derecha, sin el hueco para ella.
   Al marcarla se abre el selector (gm-shell.js). */
body.page-template-dashboard #dashboard .tool-box .control-container.control-bulk > #styled-checkbox-select-all + label {
  position: relative;
  left: auto;
  top: auto;
  bottom: auto;
  margin: 0 2px 0 15px;
  transform: none;
}
body.page-template-dashboard #dashboard .tool-box .control-container.control-bulk > select.bulk-actions { padding-left: 14px; }

/* ── Notificaciones: fecha y hora más corta; pestañas bloqueadas con globo ─ */
/* «14 Sep 2026 · 21:35» y el icono caben en 176 px */
body.page-template-dashboard .gm-modal .form-section-fields #single-date-picker input.gm-fecha { width: 176px !important; }
/* bloqueadas por «Todos los PDV»: reciben el puntero para mostrar el globo
   («Ir a un PDV para desbloquear»), pero el clic no hace nada y no se iluminan */
body.page-template-dashboard #popup_notification .gm-modal__tab.is-disabled { pointer-events: auto; cursor: default; }
body.page-template-dashboard #popup_notification .gm-modal__tab.is-disabled:hover { background: transparent; color: #d4d4d4; }
body.page-template-dashboard #popup_notification .gm-modal__tab.is-disabled:hover .gm-i { color: #b5b5b5; }
/* marca al final del nombre de la pestaña: ancla del globo, sin ocupar sitio */
body.page-template-dashboard .gm-modal__tab-marca { display: inline-block; width: 0; height: 1em; vertical-align: middle; }

/* ── calendario: la hora, compacta ───────────────────────────────────────── */
/* Solo hora (Notificación recurrente): del ancho del campo (140 px) y no de
   308. En los dos (solo hora y fecha y hora) cada número es una casilla
   redondeada de 32 px de alto dentro de la franja, sin flechas (se cambia
   escribiendo, con la rueda o con las flechas del teclado) y sin el bloque de
   selección encima del número. */
body.page-template-dashboard .flatpickr-calendar.gm-calendario.noCalendar { width: 140px; }
body.page-template-dashboard .gm-calendario.hasTime .flatpickr-time,
body.page-template-dashboard .gm-calendario.noCalendar.hasTime .flatpickr-time {
  align-items: center;
  gap: 2px;
  height: 44px;
  max-height: 44px;
  padding: 0 6px;
  line-height: 32px;
}
body.page-template-dashboard .gm-calendario .flatpickr-time .numInputWrapper {
  flex: 1 1 0;
  float: none;
  width: auto;
  height: 32px;
  border-radius: 8px;
}
body.page-template-dashboard .gm-calendario .flatpickr-time input {
  height: 32px;
  line-height: 32px;
  border-radius: 8px;
  font-size: 14px;
}
body.page-template-dashboard .gm-calendario .flatpickr-time .numInputWrapper span { display: none; }
body.page-template-dashboard .gm-calendario .flatpickr-time .flatpickr-time-separator {
  flex: none;
  width: auto;
  height: 32px;
  padding: 0 1px;
  line-height: 32px;
}
body.page-template-dashboard .gm-calendario .flatpickr-time input::selection { background: transparent; }

/* calendario al lado del campo (gm-fechas.js lo coloca): sin el hueco de arriba */
body.page-template-dashboard .flatpickr-calendar.gm-calendario.gm-calendario--lado { margin-top: 0; }

/* ==========================================================================
   Pase 30 · Notificaciones: pestañas en vez de desplegable, cajas iguales a
   las del resto con un distintivo de color, y la ficha de envíos al día.
   ========================================================================== */

/* ── pestañas segmentadas ────────────────────────────────────────────────── */
/* Cuatro opciones que se ven de un vistazo: la activa lleva píldora, las demás
   solo texto. Mismo componente en la sección y en la ficha de envíos. */

body.page-template-dashboard #dashboard .gm-seg--tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
body.page-template-dashboard #dashboard .gm-seg--tabs .gm-seg__btn,
body.page-template-dashboard #popup_view_sent_notification .gm-seg--tabs .tab-btn {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: #cdcdcd;
  background: transparent;
  border: 0;
  border-radius: var(--gm-r-pill, 999px);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--gm-t-fast), color var(--gm-t-fast);
}
body.page-template-dashboard #dashboard .gm-seg--tabs .gm-seg__btn:hover,
body.page-template-dashboard #popup_view_sent_notification .gm-seg--tabs .tab-btn:hover { color: #fff; }
body.page-template-dashboard #dashboard .gm-seg--tabs .gm-seg__btn.is-active,
body.page-template-dashboard #popup_view_sent_notification .gm-seg--tabs .tab-btn.active {
  color: #fff;
  background: #414141;
  cursor: default;
}
body.page-template-dashboard #dashboard .gm-seg--tabs .gm-seg__btn:focus-visible,
body.page-template-dashboard #popup_view_sent_notification .gm-seg--tabs .tab-btn:focus-visible {
  outline: 1px solid var(--gm-modal-field-focus, #3a3a3a);
  outline-offset: 1px;
}
/* el desplegable sigue existiendo para los guiones, pero no se ve */
body.page-template-dashboard #dashboard #notifications select#notification-type { display: none; }

/* ── Enviadas: la fila ───────────────────────────────────────────────────── */

/* los cuatro recuentos de la derecha, un punto más pequeños */
body.page-template-dashboard #dashboard #notifications-response > li .actions .text-sm { font-size: 12px; }
body.page-template-dashboard #dashboard #notifications-response > li .actions .gm-i { width: 14px; height: 14px; }
body.page-template-dashboard #dashboard #notifications-response > li .gm-notif-fallidas { cursor: pointer; }

/* el mensaje termina antes y avisa con puntos suspensivos */
@media (min-width: 640px) {
  body.page-template-dashboard #dashboard #notifications-response > li .message > span {
    display: block;
    flex: 1 1 auto;
    width: auto;
    max-width: 70%;
    padding-right: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ── Programadas, Seguimiento y Geolocalización: la caja de siempre ──────── */

body.page-template-dashboard #panel #geolocation-response {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.page-template-dashboard #panel #geolocation-response.hidden { display: none; }

body.page-template-dashboard #dashboard #scheduled-notifications-response > li,
body.page-template-dashboard #dashboard #follow-up-response > li,
body.page-template-dashboard #dashboard #geolocation-response > li {
  min-height: 56px;
  margin: 0;
  padding: 8px 16px;
  height: auto;
  background-color: var(--gm-surface, #171717);
  border: 1px solid var(--gm-border, #2f2f2f);
  border-radius: var(--gm-r-lg, 14px);
  transition: background-color var(--gm-t-fast), border-color var(--gm-t-fast);
}
body.page-template-dashboard #dashboard #scheduled-notifications-response > li:hover,
body.page-template-dashboard #dashboard #follow-up-response > li:hover,
body.page-template-dashboard #dashboard #geolocation-response > li:hover {
  background-color: var(--gm-surface-hi, #1c1c1c);
  border-color: var(--gm-border-hi, #3a3a3a);
}
body.page-template-dashboard #dashboard #scheduled-notifications-response > li .message > span,
body.page-template-dashboard #dashboard #follow-up-response > li .message > span,
body.page-template-dashboard #dashboard #geolocation-response > li .message > span,
body.page-template-dashboard #dashboard #notifications-response > li .message > span {
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 13.5px;
  font-weight: 450;
  color: var(--gm-text, #ececec);
}
body.page-template-dashboard #dashboard #scheduled-notifications-response > li .actions .gm-i,
body.page-template-dashboard #dashboard #follow-up-response > li .actions .gm-i,
body.page-template-dashboard #dashboard #geolocation-response > li .actions .gm-i {
  width: 16px;
  height: 16px;
  color: var(--gm-text-3, #7c7c7c);
  transition: color var(--gm-t-fast);
}
body.page-template-dashboard #dashboard #scheduled-notifications-response > li .actions a:hover .gm-i,
body.page-template-dashboard #dashboard #follow-up-response > li .actions a:hover .gm-i,
body.page-template-dashboard #dashboard #geolocation-response > li .actions a:hover .gm-i { color: #fff; }

/* ── el distintivo de cada módulo ────────────────────────────────────────── */
/* Las cajas son iguales en las cuatro listas: el color del distintivo es lo
   que dice de qué tipo de notificación se trata. */

body.page-template-dashboard #dashboard .gm-tag--programada {
  background-color: #3f0e2b;
  border-color: #721946;
  color: #fbb8e3;
}
body.page-template-dashboard #dashboard .gm-tag--seguimiento {
  background-color: #1f1400;
  border-color: #3c2901;
  color: #ffd354;
}
body.page-template-dashboard #dashboard .gm-tag--geoloc {
  background-color: #191c45;
  border-color: #36357c;
  color: #bdc9ff;
}
body.page-template-dashboard #dashboard .gm-tag .gm-i {
  width: 12px;
  height: 12px;
  margin-right: 5px;
}

/* ── ficha de envíos ─────────────────────────────────────────────────────── */

/* el mensaje enviado no es un título de pop-up: se lee como texto */
body.page-template-dashboard #popup_view_sent_notification .gm-modal__main > .header {
  font-size: 16px;
  line-height: 1.35;
}
body.page-template-dashboard #popup_view_sent_notification .gm-modal__main > .header .gm-modal__sub {
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--gm-modal-text, #afafaf);
}

/* el total de la pestaña, con la tinta de su icono y algo más de aire */
body.page-template-dashboard #popup_view_sent_notification .counter-wrap { margin-left: 8px; gap: 5px; }
body.page-template-dashboard #popup_view_sent_notification .counter-wrap.sent,
body.page-template-dashboard #popup_view_sent_notification .counter-wrap.sent .counter-icon { color: var(--gm-ok, #34d399); }
body.page-template-dashboard #popup_view_sent_notification .counter-wrap.failed,
body.page-template-dashboard #popup_view_sent_notification .counter-wrap.failed .counter-icon { color: var(--gm-bad, #f87171); }
body.page-template-dashboard #popup_view_sent_notification .counter-wrap.resent,
body.page-template-dashboard #popup_view_sent_notification .counter-wrap.resent .counter-icon { color: var(--gm-warn, #fbbf24); }

/* el buscador, el fijo del panel, a la derecha de la barra ──────────────── */
/* El pop-up cuelga del <body> (lo mueve jQuery Popup Overlay), fuera de
   #dashboard: las reglas del buscador fijo no le llegaban y hay que repetir
   su piel aquí, con los tonos de los pop-ups. */
body.page-template-dashboard #popup_view_sent_notification .gm-sent__search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 172px;
  width: 172px !important;
  min-width: 172px;
  max-width: 172px;
  height: 34px;
  margin: 0 0 0 auto;
  padding: 0;
  overflow: visible;
}
body.page-template-dashboard #popup_view_sent_notification .gm-sent__search::before,
body.page-template-dashboard #popup_view_sent_notification .gm-sent__search::after { content: none; }
body.page-template-dashboard #popup_view_sent_notification .gm-sent__search input[type="text"] {
  position: static !important;
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 34px !important;
  min-height: 34px;
  max-height: 34px;
  margin: 0 !important;
  padding: 0 32px 0 12px !important;
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 13px !important;
  font-weight: 450;
  color: #fff;
  background-color: var(--gm-modal-field) !important;
  background-image: none !important;
  border: 1px solid var(--gm-modal-field-border) !important;
  border-radius: 9px;
  box-shadow: none;
  outline: none;
}
body.page-template-dashboard #popup_view_sent_notification .gm-sent__search input[type="text"]::placeholder {
  color: #6f6f6f;
  font-size: 13px;
  font-weight: 450;
  opacity: 1;
}
body.page-template-dashboard #popup_view_sent_notification .gm-sent__search input[type="text"]:focus,
body.page-template-dashboard #popup_view_sent_notification .gm-sent__search.has-query input[type="text"] {
  border-color: var(--gm-modal-field-focus) !important;
}
body.page-template-dashboard #popup_view_sent_notification .gm-sent__search .gm-search__btn {
  position: absolute;
  right: 5px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--gm-modal-text, #afafaf);
  cursor: text;
  transition: color var(--gm-t-fast), background-color var(--gm-t-fast);
}
body.page-template-dashboard #popup_view_sent_notification .gm-sent__search .gm-search__btn .gm-i {
  grid-area: 1 / 1;
  display: block;
  width: 14px;
  height: 14px;
  transition: opacity 160ms ease, transform 200ms cubic-bezier(.2, .8, .3, 1.1);
}
body.page-template-dashboard #popup_view_sent_notification .gm-sent__search .gm-search__x {
  opacity: 0;
  transform: scale(.5) rotate(-90deg);
}
body.page-template-dashboard #popup_view_sent_notification .gm-sent__search:focus-within .gm-search__btn,
body.page-template-dashboard #popup_view_sent_notification .gm-sent__search.has-query .gm-search__btn { color: #fff; cursor: pointer; }
body.page-template-dashboard #popup_view_sent_notification .gm-sent__search:focus-within .gm-search__ico,
body.page-template-dashboard #popup_view_sent_notification .gm-sent__search.has-query .gm-search__ico { opacity: 0; transform: scale(.5) rotate(90deg); }
body.page-template-dashboard #popup_view_sent_notification .gm-sent__search:focus-within .gm-search__x,
body.page-template-dashboard #popup_view_sent_notification .gm-sent__search.has-query .gm-search__x { opacity: 1; transform: none; }

/* la barra no crece más que el pop-up */
body.page-template-dashboard #popup_view_sent_notification .gm-sent__bar { flex-wrap: nowrap; min-width: 0; }
body.page-template-dashboard #popup_view_sent_notification .tabs-wrapper { flex: 0 0 auto; }

/* la lista no se encoge cuando no hay nada que mostrar */
body.page-template-dashboard #popup_view_sent_notification .hits-container {
  display: flex;
  flex-direction: column;
  min-height: 210px;
}
body.page-template-dashboard #popup_view_sent_notification .tab-content { flex: 1 1 auto; display: flex; flex-direction: column; }
body.page-template-dashboard #popup_view_sent_notification .hit-list { flex: 1 1 auto; }
body.page-template-dashboard #popup_view_sent_notification .gm-empty { margin: auto; padding: 18px 0; }
body.page-template-dashboard #popup_view_sent_notification .filter-empty {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   Pase 31 · La miniatura de las filas: esqueleto mientras llega la imagen
   ========================================================================== */

/* La caja se mide sola (el hueco de la foto ya existe antes de que llegue), así
   que el esqueleto se dibuja encima con la misma tela que el de la lista:
   el degradado de assets/css/skeleton.css al mismo tono. */

@media (min-width: 768px) {
  body.page-template-dashboard #panel li .col.image {
    display: inline-block;
    vertical-align: middle;
    line-height: 0;
  }
}
/* la foto ocupa la caja: sin esto, mientras no ha llegado mide 0 y no hay dónde
   dibujar el esqueleto */
body.page-template-dashboard #panel li .col.image > img { width: 100%; }
body.page-template-dashboard #panel li .col.image.gm-img-cargando { position: relative; }
body.page-template-dashboard #panel li .col.image.gm-img-cargando > img { visibility: hidden; }
body.page-template-dashboard #panel li .col.image.gm-img-cargando::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background-image: linear-gradient(to right, #d3d3d3 5%, #858585 20%, #d3d3d3 40%, #d3d3d3 100%);
  background-repeat: no-repeat;
  background-size: 1000px 400px;
  opacity: .06;
  animation: shimmer 2s linear infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  body.page-template-dashboard #panel li .col.image.gm-img-cargando::after { animation: none; }
}

/* Categorías: la miniatura ya es la de Ítems y no necesita la piel de .thumbnail */
body.page-template-dashboard #dashboard #cat-response li .col.image img { background: transparent; border: 0; }

/* ==========================================================================
   Pase 32 · Notificaciones: la ficha de envíos afinada, «Enviando» en gris,
   las cajas abren la edición y el distintivo junto a las acciones.
   ========================================================================== */

/* ── la ficha cuelga del <body>: nada de #dashboard en estos selectores ───── */

/* las pestañas, sin la caja gris de detrás */
body.page-template-dashboard #popup_view_sent_notification .gm-seg--tabs {
  gap: 2px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* «Enviada el …» y, a su derecha, los recuentos de la caja cerrada en monoespaciada */
body.page-template-dashboard #popup_view_sent_notification .gm-modal__main > .header .gm-sent__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  overflow: visible;
  white-space: normal;
}
body.page-template-dashboard #popup_view_sent_notification .gm-sent__stats {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
body.page-template-dashboard #popup_view_sent_notification .gm-sent__stats:empty { display: none; }
body.page-template-dashboard #popup_view_sent_notification .gm-sent__stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--gm-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  line-height: 1;
}
body.page-template-dashboard #popup_view_sent_notification .gm-sent__stat .gm-i { width: 14px; height: 14px; }
body.page-template-dashboard #popup_view_sent_notification .gm-sent__stat--total { color: var(--gm-modal-text, #afafaf); }
body.page-template-dashboard #popup_view_sent_notification .gm-sent__stat--total .gm-i { color: var(--gm-text-3, #7c7c7c); }
body.page-template-dashboard #popup_view_sent_notification .gm-sent__stat--ok   { color: var(--gm-ok, #34d399); }
body.page-template-dashboard #popup_view_sent_notification .gm-sent__stat--bad  { color: var(--gm-bad, #f87171); }
body.page-template-dashboard #popup_view_sent_notification .gm-sent__stat--warn { color: var(--gm-warn, #fbbf24); }

/* el buscador: la lupa y la X con los grises del panel, y se va sin filas */
body.page-template-dashboard #popup_view_sent_notification .gm-sent__search .gm-search__btn { color: #7c7c7c; }
body.page-template-dashboard #popup_view_sent_notification .gm-sent__search:focus-within .gm-search__btn,
body.page-template-dashboard #popup_view_sent_notification .gm-sent__search.has-query .gm-search__btn { color: #ececec; }
body.page-template-dashboard #popup_view_sent_notification .gm-sent__search:focus-within .gm-search__btn:hover,
body.page-template-dashboard #popup_view_sent_notification .gm-sent__search.has-query .gm-search__btn:hover { color: #fff; background: rgba(255, 255, 255, .08); }
body.page-template-dashboard #popup_view_sent_notification .gm-sent__search.hidden { display: none; }

/* el hueco vacío: la caja con la carpeta, y del alto de una lista llena
   (360 px de lista más el relleno y el borde de la caja) */
body.page-template-dashboard #popup_view_sent_notification .hits-container { min-height: 374px; }
body.page-template-dashboard #popup_view_sent_notification .gm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: auto;
  padding: 18px 0;
  border: 0;
  text-align: center;
}
body.page-template-dashboard #popup_view_sent_notification .gm-empty__box {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: #303030;
  border: 1px solid #3b3b3b;
  color: #fff;
}
body.page-template-dashboard #popup_view_sent_notification .gm-empty__box .gm-i { width: 26px; height: 26px; }
body.page-template-dashboard #popup_view_sent_notification .gm-empty__title {
  margin: 0;
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}
body.page-template-dashboard #popup_view_sent_notification .gm-empty__hint { display: none; }

/* los separadores entre nombres, un punto más oscuros */
body.page-template-dashboard #popup_view_sent_notification .hit-row { border-bottom-color: #242424; }

/* ── la caja cerrada ─────────────────────────────────────────────────────── */

/* los recuentos, en monoespaciada como en la ficha */
body.page-template-dashboard #dashboard #notifications-response > li .actions .text-sm:not(.get_notification_sent_hits) {
  font-family: var(--gm-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* «Enviando»: en gris, latiendo despacio entre gris y blanco, con el giro lento
   y centrado en la fila (el bloque de acciones nacía alineado arriba) */
body.page-template-dashboard #dashboard #notifications-response > li .message > .actions { align-self: center; }
body.page-template-dashboard #dashboard #notifications-response > li .get_notification_sent_hits {
  color: var(--gm-text-3, #7c7c7c);
  line-height: 1;
  animation: gm-latido 2.6s ease-in-out infinite;
}
body.page-template-dashboard #dashboard #notifications-response > li .get_notification_sent_hits .gm-spin {
  animation: gm-rotate 3s linear infinite;
}
/* «· 12 de 20» (notifications.js, gmNotifProgreso): los pases con resultado */
body.page-template-dashboard #dashboard #notifications-response > li .get_notification_sent_hits .gm-notif-progreso {
  margin-left: -2px;
  font-family: var(--gm-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
body.page-template-dashboard #dashboard #notifications-response > li .get_notification_sent_hits .gm-notif-progreso:empty { display: none; }
@keyframes gm-latido {
  0%, 100% { color: #8a8a8a; }
  50%      { color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  body.page-template-dashboard #dashboard #notifications-response > li .get_notification_sent_hits { animation: none; color: #afafaf; }
}

/* ── Programadas, Seguimiento y Geolocalización ──────────────────────────── */

/* la caja entera abre la edición */
body.page-template-dashboard #dashboard #scheduled-notifications-response > li:not(.pointer-events-none),
body.page-template-dashboard #dashboard #follow-up-response > li,
body.page-template-dashboard #dashboard #geolocation-response > li:has(a[onclick*="editGeolocation"]) { cursor: pointer; }

/* el distintivo vive ahora entre las acciones: conserva su tinta y su icono */
body.page-template-dashboard #dashboard #scheduled-notifications-response > li .actions .gm-tag .gm-i,
body.page-template-dashboard #dashboard #follow-up-response > li .actions .gm-tag .gm-i,
body.page-template-dashboard #dashboard #geolocation-response > li .actions .gm-tag .gm-i {
  width: 12px;
  height: 12px;
  color: inherit;
}

/* ── ficha de envíos: mientras llegan los pases, líneas finas ────────────── */
/* Nueve líneas al paso de una fila de la lista (37 px) con la tela del
   esqueleto de las listas (assets/css/skeleton.css): el mismo gris al 6 % y
   el mismo brillo. */
body.page-template-dashboard #popup_view_sent_notification .gm-sent__skel {
  display: flex;
  flex-direction: column;
}
body.page-template-dashboard #popup_view_sent_notification .gm-sent__skel > span {
  position: relative;
  display: block;
  height: 14px;
  margin: 11.5px 0;
  border-radius: 6px;
  background: #d3d3d3;
  opacity: .06;
  overflow: hidden;
}
body.page-template-dashboard #popup_view_sent_notification .gm-sent__skel > span::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, #d3d3d3 5%, #858585 20%, #d3d3d3 40%, #d3d3d3 100%);
  background-repeat: no-repeat;
  background-size: 1000px 400px;
  animation: shimmer 2s linear infinite;
}
body.page-template-dashboard #popup_view_sent_notification .gm-sent__skel > span:nth-child(1)  { width: 46%; }
body.page-template-dashboard #popup_view_sent_notification .gm-sent__skel > span:nth-child(2)  { width: 62%; }
body.page-template-dashboard #popup_view_sent_notification .gm-sent__skel > span:nth-child(3)  { width: 38%; }
body.page-template-dashboard #popup_view_sent_notification .gm-sent__skel > span:nth-child(4)  { width: 55%; }
body.page-template-dashboard #popup_view_sent_notification .gm-sent__skel > span:nth-child(5)  { width: 70%; }
body.page-template-dashboard #popup_view_sent_notification .gm-sent__skel > span:nth-child(6)  { width: 42%; }
body.page-template-dashboard #popup_view_sent_notification .gm-sent__skel > span:nth-child(7)  { width: 58%; }
body.page-template-dashboard #popup_view_sent_notification .gm-sent__skel > span:nth-child(8)  { width: 50%; }
body.page-template-dashboard #popup_view_sent_notification .gm-sent__skel > span:nth-child(9)  { width: 64%; }
@media (prefers-reduced-motion: reduce) {
  body.page-template-dashboard #popup_view_sent_notification .gm-sent__skel > span::before { animation: none; }
}

/* ── Usuarios: la caja abre la edición, el ojo solo cuando hace falta, y la
      rama en L de «Sólo para escanear» bajo Loyalty ─────────────────────── */
body.page-template-dashboard #dashboard #usuarios-list li.usuario-item { cursor: pointer; }
body.page-template-dashboard .gm-modal .gm-field-eye.hidden { display: none; }

/* la misma L que en «Se omitirán N pases»: baja desde la fila de arriba hasta
   la mitad del título y dobla hacia él */
body.page-template-dashboard .gm-modal .gm-switch-row.is-sub {
  position: relative;
  padding-left: 21px;
}
body.page-template-dashboard .gm-modal .gm-switch-row.is-sub::before {
  content: "";
  position: absolute;
  left: 6px;
  top: -14px;    /* arranca en el aire bajo la bajada de Loyalty */
  width: 9px;
  height: 21px;  /* y dobla a la mitad del título (7 px bajo el borde de la fila) */
  border-left: 1px solid #3d3d3d;
  border-bottom: 1px solid #3d3d3d;
  border-bottom-left-radius: 3px;
}

/* el nombre del ítem bajo «Editando ítem»: más chico y en gris */
body.page-template-dashboard .gm-modal__main > .header .item-name { color: var(--gm-modal-text, #afafaf); }

/* ── ficha del registro: separadores entre filas, nunca bajo la última ──── */
/* La regla general pone una línea bajo cada fila menos la última del DOM, y la
   última es la etiqueta, que va escondida cuando el registro no tiene: la línea
   quedaba bajo «Correo» sin nada debajo. Sin etiqueta, «Correo» tampoco la lleva.
   Con la clase que pone popups.js, no con :has(+ …[style*="none"]): un :has()
   que mira el atributo style hace que Chrome reestilice la página entera con
   cualquier cambio de style en cualquier parte (cada cuadro de una animación). */
body.page-template-dashboard .gm-modal#view_registro.sin-etiqueta .form-section-fields > .gm-kv:nth-last-child(2) { border-bottom: 0; }

/* ── Ajustes ─────────────────────────────────────────────────────────────── */

/* el logo: la zona de subida cuadrada y a la izquierda */
body.page-template-dashboard .gm-modal .form-group.upload-image.gm-logo-upload { display: flex; flex-direction: column; align-items: flex-start; }
body.page-template-dashboard .gm-modal .form-group.upload-image.gm-logo-upload .upload-area,
body.page-template-dashboard .gm-modal .form-group.upload-image.gm-logo-upload .upload-area#user-avatar {
  width: 170px !important;
  max-width: 170px;
  height: 170px !important;
  min-height: 0;
  margin-left: 0;
  margin-right: auto;
  aspect-ratio: 1;
}

/* la hora de reactivación: el selector propio, más angosto */
body.page-template-dashboard .gm-modal .gm-set-row__control input.gm-fecha--hora { width: 118px !important; }

/* los campos de contraseña, más angostos y con el ojo dentro */
body.page-template-dashboard .gm-modal .gm-field-wrap--pass { max-width: 280px; }
body.page-template-dashboard .gm-modal .gm-field-wrap--pass > input { width: 100% !important; }

/* ── Ítems: el precio es texto y la caja aparece al tocarlo ──────────────── */
/* En reposo el campo mide lo que el número y va a 12 px de los iconos (linkeado,
   programado, POS), la misma distancia que hay entre ellos. Al hacer clic la
   caja crece hacia la izquierda hasta los 84 px; al tocar fuera o con Enter se
   guarda y vuelve a ser texto. */
body.page-template-dashboard #dashboard .responsive-table li .single-price { margin-left: 0; }
body.page-template-dashboard #dashboard .responsive-table li .single-price input.inline-price {
  width: 6ch;
  min-width: 0;
  max-width: none;
  padding: 0;
  border-color: transparent;
  transition: min-width 220ms cubic-bezier(.22, .61, .36, 1), padding 220ms cubic-bezier(.22, .61, .36, 1),
              background-color 160ms ease, border-color 160ms ease;
}
@supports (field-sizing: content) {
  body.page-template-dashboard #dashboard .responsive-table li .single-price input.inline-price { width: auto; field-sizing: content; }
}
body.page-template-dashboard #dashboard .responsive-table li .single-price input.inline-price:hover { cursor: text; }
body.page-template-dashboard #panel .responsive-table li .single-price input.inline-price:focus,
body.page-template-dashboard #dashboard .responsive-table li .single-price input.inline-price:focus {
  min-width: 84px;
  padding: 0 10px;
  border-color: var(--gm-border-hi, #3d3d3d);
  background-color: var(--gm-bg, #0a0a0a) !important;
  outline: none;
}

/* ==========================================================================
   Loyalty Scan (loyalty-scan.php): el pop-up de escaneo, solo, sobre el
   fondo del panel. Arriba a la derecha, en vez de la X, «Cerrar sesión».
   ========================================================================== */

body.gm-scan-page-body { background-color: var(--gm-bg, #0a0a0a); }
body.gm-scan-page-body header,
body.gm-scan-page-body #masthead,
body.gm-scan-page-body .elementor-location-header,
body.gm-scan-page-body .elementor-location-footer,
body.gm-scan-page-body footer { display: none !important; }

body.page-template-dashboard #primary.gm-scan-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  /* más aire abajo que arriba: la caja queda un poco por encima del centro */
  padding: 24px 16px calc(24px + 9vh);
}
/* el pop-up vive suelto: no lo abre ningún plugin */
body.page-template-dashboard .gm-scan-page #scan_qr {
  display: block !important;
  position: relative;
  margin: 0;
}

/* la salida, en la caja de la X */
body.page-template-dashboard .gm-scan-page .gm-scan-page__logout { text-decoration: none; }
body.page-template-dashboard .gm-scan-page .gm-scan-page__logout .gm-i { width: 15px; height: 15px; }

/* el PDV se elige aquí: el select con la piel de los campos del pop-up */
body.page-template-dashboard .gm-scan-page .gm-scan__pdv { display: block; margin-top: 1px; }
body.page-template-dashboard .gm-scan-page .gm-scan__pdv select {
  display: block;
  width: auto;
  min-width: 220px;
  max-width: 100%;
  height: 38px;
  margin: 0;
  padding: 0 34px 0 12px;
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 450;
  line-height: 36px;
  color: #fff;
  background-color: var(--gm-modal-field) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23afafaf' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  border: 1px solid var(--gm-modal-field-border) !important;
  border-radius: 9px;
  box-shadow: none;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--gm-t-fast);
}
body.page-template-dashboard .gm-scan-page .gm-scan__pdv select:focus { border-color: var(--gm-modal-field-focus) !important; }
body.page-template-dashboard .gm-scan-page .gm-scan__pdv select option { background: var(--gm-modal-field); color: #fff; }

/* el hueco del lector sin cámara */
body.page-template-dashboard .gm-scan-page .gm-scan__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  aspect-ratio: 1;
  padding: 28px;
  border-radius: 17px;
  background: var(--gm-modal-field);
  color: var(--gm-modal-text);
  font-family: var(--gm-font, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 450;
  line-height: 1.45;
  text-align: center;
}
/* el icono, en la caja de «Nada aquí aún» (58 px allí), un poco más chica */
body.page-template-dashboard .gm-scan-page .gm-scan__placeholder-box {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  border-radius: 13px;
  background: #303030;
  border: 1px solid #3b3b3b;
  color: #fff;
}
body.page-template-dashboard .gm-scan-page .gm-scan__placeholder-box .gm-i { width: 22px !important; height: 22px !important; }

/* en el móvil la caja mide lo que su contenido: un aire parejo bajo el conmutador */
@media (max-width: 767px) {
  body.page-template-dashboard #primary.gm-scan-page { align-items: flex-start; padding: 60px 12px 24px; }
  /* el panel fija los pop-ups al viewport en el móvil (12 px por lado): aquí
     la caja vuelve al flujo y mide lo que su contenido */
  body.page-template-dashboard .gm-scan-page #scan_qr {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 18px;
  }
  body.page-template-dashboard .gm-scan-page #scan_qr .gm-modal__body,
  body.page-template-dashboard .gm-scan-page #scan_qr .gm-modal__main { min-height: 0; height: auto; }
  body.page-template-dashboard .gm-scan-page #scan_qr .gm-modal__body { height: auto; max-height: none; }
  body.page-template-dashboard .gm-scan-page #scan_qr .gm-modal__scroll { overflow: visible; padding-bottom: 6px; }
  body.page-template-dashboard .gm-scan-page #scan_qr .gm-scan { padding-bottom: 16px; }
  /* la caja del lector lleva su ancho: es hija de un flex centrado y sin él
     mide lo que su contenido; al cambiar el aviso por el video el #reader al
     100 % queda en 0 y html5-qrcode fija el video en 0 px (cámara invisible) */
  body.page-template-dashboard .gm-scan-page #scan_qr .gm-scan__frame { width: 100%; max-width: 302px; }
  body.page-template-dashboard .gm-scan-page #scan_qr #reader { width: 100% !important; max-width: 300px; }
}

/* ══ Integración POS · la solicitud desde el pie del pilar ════════════════ */
/* «En proceso»: el distintivo tras enviar la solicitud (lib/pos-request.php),
   en el ámbar de los distintivos (gm-tokens.css) */
body.page-template-dashboard #dashboard .gm-tag--proceso,
body.page-template-dashboard .gm-tag--proceso,
body.page-template-dashboard #sidebar .gm-tag--proceso {
  color: var(--gm-tag-amber-fg, #d2b286);
  background-color: var(--gm-tag-amber-bg, #483822);
  border: 1px solid var(--gm-tag-amber-border, #bc9f78);
}
/* en proceso el ítem del pilar queda estático: sin clic, hover ni globo */
body.page-template-dashboard #sidebar .gm-pos-item.is-estatico .gm-navitem {
  pointer-events: none;
  cursor: default;
}
/* el pop-up alterna formulario y resumen con el atributo hidden: las reglas
   de display del pop-up le ganaban al del navegador */
body.page-template-dashboard #popup-pos-request [hidden] { display: none !important; }
/* el pie del resumen: «Agendar llamada» (enlace) y «Listo» en píldora y del
   mismo alto, como los diálogos */
body.page-template-dashboard #popup-pos-request .gm-modal__foot .gm-btn {
  height: 38px;
  padding: 0 18px;
  border-radius: var(--gm-r-pill, 999px);
  line-height: 1;
  text-decoration: none;
}

/* ══ Pantallas · el título del widget en una sola línea ═══════════════════ */
/* Los textos largos partían en dos líneas dentro de la caja: ahora se cortan
   con puntos suspensivos. Los íconos sociales siguen en fila. */
body.page-template-dashboard #dashboard #blocks-response li .title {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.page-template-dashboard #dashboard #blocks-response li .title > i,
body.page-template-dashboard #dashboard #blocks-response li .title > svg { display: inline-block; vertical-align: middle; margin-right: 6px; }

/* ── buscador fijo: sin filas en la lista no hay nada que buscar (gm-shell.js) ── */
/* Se va y vuelve con un fundido: se encoge a 0 (y se come el hueco de la
   barra) mientras se apaga; al volver reaparece al instante y se abre. */
body.page-template-dashboard #dashboard .select-container.filter-search.gm-search--fixed {
  transition: width .25s ease, min-width .25s ease, max-width .25s ease, flex-basis .25s ease,
              margin-left .25s ease, opacity .2s ease, visibility 0s linear 0s;
}
body.page-template-dashboard #dashboard .select-container.filter-search.gm-search--fixed.gm-search--oculto {
  width: 0 !important;
  min-width: 0;
  max-width: 0;
  flex-basis: 0;
  margin-left: -12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  transition: width .25s ease, min-width .25s ease, max-width .25s ease, flex-basis .25s ease,
              margin-left .25s ease, opacity .2s ease, visibility 0s linear .25s;
}

/* ── Editar pantalla · imagen principal heredada del estilo, en gris ─────── */
body.page-template-dashboard .gm-modal .cat-image-box.is-heredada .cat-image-preview { opacity: .38; }
body.page-template-dashboard .gm-modal .screen-logo-heredada { margin: 8px 0 0; }

/* ══ Pantallas · cuentas legacy ═══════════════════════════════════════════ */
/* La primera vista son las pantallas principales y, al entrar, sus hijas en
   #legacy-response con las mismas filas que el resto de la sección. */
body.page-template-dashboard #dashboard #legacy-response > li { padding: 8px 16px; }
body.page-template-dashboard #dashboard #legacy-response .col.actions { width: auto; gap: 14px; }
/* el aviso bajo la lista: el mismo distintivo rojo de los pop-ups (.gm-note) */
body.page-template-dashboard #dashboard #pantallas #slide1 > .gm-note--lista {
  display: block;
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--gm-tag-rose-bg, #241719);
  border: 1px solid #4a262b;
  color: #e98a93;
  font-size: 12.5px;
  font-weight: 450;
  line-height: 1.55;
}

/* ══ Pantallas · el widget de texto largo ya no ensancha la caja ══════════ */
/* .col.info es un ítem flex con min-width auto: su ancho mínimo era el del
   texto en una línea y la fila se salía del contenedor. Con min-width: 0 el
   título se recorta con puntos suspensivos antes de las acciones. */
body.page-template-dashboard #dashboard #blocks-response > li > .col.info {
  flex: 1 1 auto;
  min-width: 0;
}
body.page-template-dashboard #dashboard #blocks-response > li > .col.actions { flex: none; }

/* ── Pantallas legacy: el aviso ocupa lo que mide su texto ───────────────── */
body.page-template-dashboard #dashboard #pantallas #slide1 > .gm-note--lista {
  display: inline-block;
  align-self: flex-start;
  width: auto;
}

/* ── miniaturas de Ítems y Categorías: fondo bajo la foto ─────────────────── */
/* Un PNG sin fondo dejaba ver la fila a través del recorte: la caja de la
   foto lleva un gris algo más oscuro que la fila (#171717). */
body.page-template-dashboard #panel li .col.image > img,
body.page-template-dashboard #dashboard #cat-response li .col.image img { background-color: #111111; }

/* ── widget de texto: el campo crece hacia abajo con el asa de la esquina ── */
body.page-template-dashboard #popup-add-text textarea.gm-texto-libre {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 11px 12px;
  line-height: 1.45;
  resize: vertical;
}

/* ══ Selects y buscadores en píldora ═════════════════════════════════════ */
/* Todos los selects de una sola opción (nativos y select2), en secciones y
   pop-ups, y los buscadores de las barras. Los de selección múltiple
   (recomendaciones, maridajes, modificadores: select2 múltiple y selectize)
   siguen con sus esquinas. El texto entra 16 px para acompañar la curva. */
body.page-template-dashboard #dashboard select:not([multiple]),
body.page-template-dashboard .popup_content select:not([multiple]),
body.page-template-dashboard .gm-modal .form-section-fields select:not([multiple]),
body.page-template-dashboard #loyalty .tool-box select.bulk-actions,
body.page-template-dashboard .gm-scan-page .gm-scan__pdv select {
  border-radius: var(--gm-r-pill, 999px);
  padding-left: 16px;
}
body.page-template-dashboard .select2-container--default .select2-selection--single {
  border-radius: var(--gm-r-pill, 999px) !important;
}
body.page-template-dashboard .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 16px !important;
}
body.page-template-dashboard .select2-container--default .select2-selection--single .select2-selection__arrow { right: 4px; }
/* buscadores de las barras y del pop-up de enviadas */
body.page-template-dashboard #dashboard .filter-search input[type="text"],
body.page-template-dashboard #dashboard .select-container.filter-search.gm-search--fixed input[type="text"],
body.page-template-dashboard #dashboard .select-container.filter-search.gm-search--fixed input#search-items,
body.page-template-dashboard #dashboard .select-container.filter-search.gm-search--fixed input#loyalty-search-items,
body.page-template-dashboard #dashboard .select-container.filter-search.gm-search--fixed input#search-registros,
body.page-template-dashboard #search-popups,
body.page-template-dashboard #popup_view_sent_notification .gm-sent__search input[type="text"] {
  border-radius: var(--gm-r-pill, 999px) !important;
  padding-left: 16px !important;
}
body.page-template-dashboard #dashboard .filter-search .gm-search__close,
body.page-template-dashboard #dashboard .gm-search--fixed .gm-search__btn,
body.page-template-dashboard #popup_view_sent_notification .gm-sent__search .gm-search__btn {
  border-radius: var(--gm-r-pill, 999px);
}

/* ── editar ítem · POS ID: el selector no ocupa todo el ancho ────────────── */
/* selectize copia las clases del <select> a su caja (.gm-pos-select). */
body.page-template-dashboard .gm-modal .form-section-fields .gm-pos-select.selectize-control,
body.page-template-dashboard .gm-modal .form-section-fields select.gm-pos-select {
  width: 250px !important;
  flex: none;
}
@media (max-width: 767px) {
  body.page-template-dashboard .gm-modal .form-section-fields .gm-pos-select.selectize-control,
  body.page-template-dashboard .gm-modal .form-section-fields select.gm-pos-select { width: 100% !important; }
}

/* ── conmutadores en píldora: Pop-ups / Registros y Visita / Canje del escáner ── */
body.page-template-dashboard #dashboard .popup-tabs { border-radius: var(--gm-r-pill, 999px); }
body.page-template-dashboard #dashboard #popups .popup-tab[data-tab],
body.page-template-dashboard #dashboard #popups .popup-tab[data-tab]:hover,
body.page-template-dashboard #dashboard #popups .popup-tab[data-tab].active,
body.page-template-dashboard #dashboard #popups .popup-tab[data-tab].active:hover { border-radius: var(--gm-r-pill, 999px); }
body.page-template-dashboard .gm-modal#scan_qr .gm-seg,
body.page-template-dashboard .gm-scan-page .gm-seg { border-radius: var(--gm-r-pill, 999px); }
body.page-template-dashboard .gm-modal#scan_qr .gm-seg input + span,
body.page-template-dashboard .gm-scan-page .gm-seg input + span { border-radius: var(--gm-r-pill, 999px); }

/* ══ Regla general · acción de borrar ═══════════════════════════════════ */
/* Toda acción que lleve el basurero se pone roja al pasar el mouse, esté en
   la lista que esté. Antes la regla enumeraba una clase por módulo
   (.delete_post, .delete-block, .col.eliminar…) y cada módulo nuevo se
   quedaba fuera (Geolocalización). Basta con el ícono #gm-i-trash o, si el
   ícono es otro, con la clase .gm-danger-action. */
body.page-template-dashboard #panel li a:hover:has(> .gm-i > use[href="#gm-i-trash"]),
body.page-template-dashboard #panel li button:hover:has(> .gm-i > use[href="#gm-i-trash"]),
body.page-template-dashboard #panel li .gm-danger-action:hover { color: var(--gm-bad, #f87171) !important; }
/* el ícono no hereda: otras reglas lo ponen blanco al pasar el mouse */
body.page-template-dashboard #panel li a:hover:has(> .gm-i > use[href="#gm-i-trash"]) > .gm-i,
body.page-template-dashboard #panel li button:hover:has(> .gm-i > use[href="#gm-i-trash"]) > .gm-i,
body.page-template-dashboard #panel li .gm-danger-action:hover .gm-i { color: var(--gm-bad, #f87171) !important; }

/* ── filtros de Registros (dashboard/popups/popup-filters-registros.php) ─── */
/* La fila del mes va oculta salvo con «Otro mes»: mientras no se ve, las
   píldoras son lo último y no llevan separador. */
body.page-template-dashboard .gm-modal#registros_filters [hidden] { display: none !important; }
body.page-template-dashboard .gm-modal#registros_filters .form-section-fields > .form-group:has(+ #registros_filters_month_row[hidden]) { border-bottom: 0; }

/* ══ Margen estimado (assets/js/dashboard/margen.js) ════════════════════════ */
/* Qué % del precio le queda al local con cada ítem; alimenta IQ Gen2. Tres
   piezas: la píldora junto al precio en Ítems, el campo del pop-up del ítem
   y el pop-up de la acción masiva. */

/* ── «Nuevo»: la forma de Gen1/Gen2, en los rojos de la referencia «Blocked» ── */
/* Granate casi negro a la izquierda que se enciende a coral, filo coral claro
   y el mismo halo interior a la derecha. */
body.page-template-dashboard {
  --gm-nuevo-fill: linear-gradient(90deg, #1a0a0c 0%, #26100f 45%, #6a2a28 85%, #9c4d46 100%);
  --gm-nuevo-edge: linear-gradient(90deg, #3a1a1b 0%, #6e3634 50%, #e8998c 100%);
  --gm-nuevo-glow: inset -3px 0 6px rgba(240, 150, 135, .3), 0 0 6px rgba(200, 95, 85, .2);
  --gm-nuevo-text: #f4c6bd;
  --gm-margen-up:  #51b180;
}
body.page-template-dashboard .gm-tag.gm-tag--nuevo {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: var(--gm-r-pill, 999px);
  background: var(--gm-nuevo-fill) padding-box, var(--gm-nuevo-edge) border-box;
  box-shadow: var(--gm-nuevo-glow);
  color: var(--gm-nuevo-text);
  font-family: var(--gm-font);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: none;
  white-space: nowrap;
}

/* ── la píldora de la fila ──────────────────────────────────────────────── */
/* Un campo con forma de píldora: «–%» apagado sin dato, «27%» con la flecha
   verde con dato. Al tocarla crece hacia la izquierda (la fila se alinea a la
   derecha, así el precio no se mueve) hasta una caja de 30 px como la del
   precio, y la flecha se recoge. Al guardar, la flecha sube y el borde se
   enciende en verde un instante. */
body.page-template-dashboard #dashboard .responsive-table li .gm-margen {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  height: 24px;
  min-width: 0;
  margin: 0;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--gm-r-pill, 999px);
  background-color: rgba(255, 255, 255, .03);
  color: var(--gm-text-3, #7c7c7c);
  font-family: var(--gm-font-mono);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: height 220ms cubic-bezier(.22, .61, .36, 1), min-width 220ms cubic-bezier(.22, .61, .36, 1),
              padding 220ms cubic-bezier(.22, .61, .36, 1), background-color 160ms ease,
              border-color 160ms ease, color 160ms ease, box-shadow 220ms ease;
}
body.page-template-dashboard #dashboard .responsive-table li .gm-margen .gm-margen__input {
  width: 2ch;
  min-width: 1ch;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
  caret-color: #fff;
  cursor: inherit;
}
@supports (field-sizing: content) {
  body.page-template-dashboard #dashboard .responsive-table li .gm-margen .gm-margen__input { width: auto; field-sizing: content; }
}
body.page-template-dashboard #dashboard .responsive-table li .gm-margen .gm-margen__input::placeholder { color: inherit; opacity: 1; }
/* en mono el «%» queda separado del número: se arrima */
body.page-template-dashboard #dashboard .gm-margen__pct { margin-left: -1.5px; }
body.page-template-dashboard .gm-margen__up {
  flex: 0 0 auto;
  width: 0;
  height: 9px;
  margin-left: 0;
  opacity: 0;
  overflow: visible;
  fill: none;
  stroke: var(--gm-margen-up);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: width 200ms cubic-bezier(.22, .61, .36, 1), margin 200ms cubic-bezier(.22, .61, .36, 1), opacity 160ms ease;
}
body.page-template-dashboard #dashboard .responsive-table li .gm-margen.has-value {
  border-color: rgba(255, 255, 255, .09);
  background-color: rgba(255, 255, 255, .045);
  color: var(--gm-text, #ececec);
}
body.page-template-dashboard #dashboard .responsive-table li .gm-margen.has-value .gm-margen__up { width: 7px; margin-left: 4px; opacity: 1; }
body.page-template-dashboard #dashboard .responsive-table li .gm-margen:hover {
  border-color: rgba(255, 255, 255, .15);
  background-color: rgba(255, 255, 255, .07);
  color: var(--gm-text-2, #afafaf);
}
body.page-template-dashboard #dashboard .responsive-table li .gm-margen.has-value:hover { color: #fff; }
body.page-template-dashboard #dashboard .responsive-table li .gm-margen.is-editing {
  height: 30px;
  min-width: 68px;
  padding: 0 11px;
  border-color: var(--gm-border-hi, #3d3d3d);
  background-color: var(--gm-bg, #0a0a0a);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .04);
  color: var(--gm-text, #ececec);
  cursor: text;
}
body.page-template-dashboard #dashboard .responsive-table li .gm-margen.is-editing .gm-margen__up { width: 0; margin-left: 0; opacity: 0; }
/* abierta y vacía: sólo el cursor junto al «%», sin la raya */
body.page-template-dashboard #dashboard .responsive-table li .gm-margen.is-editing .gm-margen__input::placeholder { color: transparent; }
body.page-template-dashboard #dashboard .responsive-table li .gm-margen.is-saved { animation: gm-margen-ok 1s ease-out; }
body.page-template-dashboard #dashboard .responsive-table li .gm-margen.is-saved .gm-margen__up { animation: gm-margen-sube 560ms cubic-bezier(.22, .61, .36, 1); }
@keyframes gm-margen-sube {
  0%   { transform: translateY(5px); opacity: 0; }
  55%  { transform: translateY(-1.5px); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes gm-margen-ok {
  0%   { border-color: rgba(81, 177, 128, .75); box-shadow: 0 0 0 3px rgba(81, 177, 128, .16); }
  100% { border-color: rgba(255, 255, 255, .09); box-shadow: 0 0 0 3px rgba(81, 177, 128, 0); }
}
/* El precio mide lo que su número: en el teléfono una regla de tabla le daba
   flex-basis 10 % de una caja que mide lo que su contenido, y se quedaba en
   un carácter («6» por «6.000»). El que se corta con «…» es el título. */
body.page-template-dashboard #dashboard .responsive-table li .single-price { flex: 0 0 auto; }
/* con la píldora al lado, el precio ocupa al menos lo de «18.500»: así las
   píldoras quedan en columna aunque los precios tengan distinto largo */
@media (min-width: 768px) {
  body.page-template-dashboard #dashboard .responsive-table li .gm-margen + .single-price { min-width: 52px; justify-content: flex-end; }
}
/* en el teléfono no entra junto al título: se carga desde el pop-up. El
   título cortado no se pega al precio. */
@media (max-width: 767px) {
  body.page-template-dashboard #dashboard .responsive-table li .gm-margen { display: none; }
  body.page-template-dashboard #dashboard .responsive-table li .col.actions { margin-left: 10px; }
}

/* ── el globo, con la estructura de los de IQ ───────────────────────────── */
/* Título gris, el dato grande (o qué es) y la acción en mono. */
body.page-template-dashboard .tippy-tooltip.gm-card-theme,
body.page-template-dashboard .tippy-box[data-theme~="gm-card"] {
  min-width: 150px;
  padding: 11px 14px 12px;
  border-radius: 14px;
}
body.page-template-dashboard .gm-tipcard p { margin: 0; }
body.page-template-dashboard .gm-tipcard .gm-tipcard__title {
  margin-bottom: 4px;
  color: var(--gm-text-2, #afafaf);
  font-size: 12px;
  font-weight: 450;
  line-height: 1.3;
}
body.page-template-dashboard .gm-tipcard .gm-tipcard__value {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.15;
}
body.page-template-dashboard .gm-tipcard .gm-tipcard__value .gm-margen__up { width: 9px; height: 12px; opacity: 1; stroke-width: 1.5; }
body.page-template-dashboard .gm-tipcard .gm-tipcard__text {
  margin-bottom: 8px;
  color: #fff;
  font-size: 12.5px;
  font-weight: 450;
  line-height: 1.45;
}
body.page-template-dashboard .gm-tipcard .gm-tipcard__meta {
  color: var(--gm-text-3, #7c7c7c);
  font-family: var(--gm-font-mono);
  font-size: 11.5px;
  line-height: 1.3;
}

/* ── el campo de porcentaje (pop-up del ítem y acción masiva) ──────────── */
/* El número a la derecha con el «%» fijo dentro de la caja. */
body.page-template-dashboard .gm-pct { position: relative; width: 92px; }
body.page-template-dashboard .gm-pct input.gm-pct__input {
  width: 100% !important;
  padding-right: 25px !important;
  font-family: var(--gm-font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
body.page-template-dashboard .gm-pct .gm-pct__sign {
  position: absolute;
  top: 50%;
  right: 13px;
  transform: translateY(-50%);
  color: var(--gm-text-3, #7c7c7c);
  font-family: var(--gm-font-mono);
  font-size: 13px;
  pointer-events: none;
  transition: color var(--gm-t, 160ms ease);
}
body.page-template-dashboard .gm-pct:focus-within .gm-pct__sign { color: var(--gm-text, #ececec); }
body.page-template-dashboard .gm-modal .form-section-fields label.gm-margen-field__label { gap: 8px; }

/* ── el pop-up de la acción masiva ──────────────────────────────────────── */
body.page-template-dashboard .gm-margen-dialog .gm-margen-dialog__ctx:empty { display: none; }
body.page-template-dashboard .gm-margen-dialog .gm-margen-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 18px;
  padding-top: 18px !important;
  border-top: 1px solid var(--gm-modal-line);
}
body.page-template-dashboard .gm-margen-dialog .gm-margen-field__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--gm-modal-title);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}
body.page-template-dashboard .gm-margen-dialog .gm-hint {
  display: block;
  margin: 0 0 8px;
  color: var(--gm-modal-text);
  font-size: 12.5px;
  font-weight: 450;
  line-height: 1.5;
}
body.page-template-dashboard .gm-pct.gm-pct--lg { width: 116px; }
body.page-template-dashboard .gm-margen-dialog .gm-pct input.gm-pct__input {
  height: 48px;
  padding: 0 31px 0 14px !important;
  border: 1px solid var(--gm-modal-field-border);
  border-radius: 12px;
  background: var(--gm-modal-field);
  box-shadow: none;
  outline: none;
  color: var(--gm-text, #ececec);
  font-size: 20px;
  font-weight: 500;
  transition: border-color 160ms ease, box-shadow 220ms ease;
}
body.page-template-dashboard .gm-margen-dialog .gm-pct input.gm-pct__input:focus {
  border-color: var(--gm-border-hi, #3d3d3d);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .05);
}
body.page-template-dashboard .gm-margen-dialog .gm-pct--lg .gm-pct__sign { right: 15px; font-size: 18px; }

@media (prefers-reduced-motion: reduce) {
  body.page-template-dashboard #dashboard .responsive-table li .gm-margen,
  body.page-template-dashboard .gm-margen__up { transition: none !important; animation: none !important; }
}

/* ── Norma · fila con una acción (pop-ups) ──────────────────────────────── */
/* La forma de «Prompt para tu asistente» de Ajustes, para cualquier pop-up:
   nombre y bajada a la izquierda, un botón cuadrado gris de 44 px con el ícono
   a la derecha. La separan de las demás filas las reglas de la fila del
   pop-up (14 px y la línea de 1 px). La primera que la usa es «Traducir
   todo» (dashboard/components/traducir-todo.php). */
body.page-template-dashboard .gm-modal .gm-fila-accion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
body.page-template-dashboard .gm-modal .gm-fila-accion__texto { display: block; min-width: 0; }
body.page-template-dashboard .gm-modal .gm-fila-accion__nombre {
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--gm-modal-title);
}
body.page-template-dashboard .gm-modal .gm-fila-accion__desc {
  display: block;
  margin: 3px 0 0;
  font-size: 12.5px;
  font-weight: 450;
  line-height: 1.5;
  color: var(--gm-modal-text);
  font-variant-numeric: tabular-nums;
}
body.page-template-dashboard .gm-modal .gm-fila-accion__btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0;
  border-radius: 12px;
  background-color: var(--gm-border-hi, #3d3d3d);
  border-color: var(--gm-border-hi, #3d3d3d);
  color: var(--gm-text, #ececec);
}
body.page-template-dashboard .gm-modal .gm-fila-accion__btn:hover {
  background-color: #4a4a4a;
  border-color: #4a4a4a;
  color: #fff;
}
body.page-template-dashboard .gm-modal .gm-fila-accion__btn .gm-i { width: 18px; height: 18px; }
/* ocupado: el botón no se apaga (el plugin lo pondría gris claro), el ícono late */
body.page-template-dashboard .gm-modal .gm-fila-accion__btn:disabled,
body.page-template-dashboard .gm-modal .gm-fila-accion__btn:disabled:hover {
  opacity: 1;
  cursor: progress;
  background-color: var(--gm-border-hi, #3d3d3d);
  border-color: var(--gm-border-hi, #3d3d3d);
}

/* ── «Traducir todo» (assets/js/dashboard/traducciones.js) ──────────────── */
/* Mientras traduce, la bajada cuenta «Traduciendo 2 de 6…», el ícono del botón
   late y cada campo en espera se atenúa; al llegar la traducción el borde se
   enciende en verde un instante, y en rojo si no se pudo. */
body.page-template-dashboard .gm-modal .gm-trad-todo.is-traduciendo .gm-fila-accion__btn .gm-i { animation: gm-trad-late 1s ease-in-out infinite; }
body.page-template-dashboard .gm-modal .gm-trad-todo.is-traduciendo .gm-fila-accion__desc { color: var(--gm-modal-title); }
body.page-template-dashboard .gm-modal .form-group.is-traduciendo .ai-input-translation { opacity: .45; transition: opacity 200ms ease; }
body.page-template-dashboard .gm-modal .form-group.is-traduciendo .ai-button-translation::before { animation: gm-trad-late 1s ease-in-out infinite; }
body.page-template-dashboard .gm-modal .form-group.is-traducido .ai-input-translation { animation: gm-trad-ok 1.1s ease-out; }
body.page-template-dashboard .gm-modal .form-group.is-error .ai-input-translation { border-color: rgba(248, 113, 113, .6) !important; }
@keyframes gm-trad-late {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
@keyframes gm-trad-ok {
  0%   { border-color: rgba(81, 177, 128, .8); box-shadow: 0 0 0 3px rgba(81, 177, 128, .15); }
  100% { box-shadow: 0 0 0 3px rgba(81, 177, 128, 0); }
}
@media (prefers-reduced-motion: reduce) {
  body.page-template-dashboard .gm-modal .gm-trad-todo .gm-fila-accion__btn .gm-i,
  body.page-template-dashboard .gm-modal .form-group .ai-button-translation::before,
  body.page-template-dashboard .gm-modal .form-group .ai-input-translation { animation: none !important; }
}

/* ── pilar plegado en pantallas bajas: la lista hace scroll bajo el pie ──── */
/* Plegado, la lista de módulos no hacía scroll (overflow visible, para que el
   globo con el nombre saliera hacia la derecha) y en pantallas bajas se
   desbordaba sobre el pie: los íconos de Loyalty y Reservas quedaban encima de
   Usuarios, Ajustes, Salir y la marca (Martin, 30-sep-2026). Ahora hace scroll
   como desplegada, sin barra, y se corta donde empieza el pie, que va encima
   con su fondo. El globo de las filas de la lista sale en position: fixed para
   que el scroll no lo recorte, a la altura de la fila bajo el cursor
   (--gm-tip-x y --gm-tip-y, gm-shell.js). */
body.page-template-dashboard.gm-rail-closed #sidebar #dashboard-menu {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding-bottom: 10px;
}
body.page-template-dashboard.gm-rail-closed #sidebar #dashboard-menu::-webkit-scrollbar { display: none; }
body.page-template-dashboard.gm-rail-closed #sidebar .gm-rail__foot { position: relative; background: var(--gm-bg); }
body.page-template-dashboard.gm-rail-closed #sidebar #dashboard-menu .gm-navitem[data-gm-tip]::after,
body.page-template-dashboard.gm-rail-closed #sidebar #dashboard-menu .gm-navtip {
  position: fixed;
  left: calc(var(--gm-tip-x, -400px) + 24px);
  top: var(--gm-tip-y, -100px);
}

/* Gen2 · el pop-up de acceso anticipado lo pega gen2-carga.js en <body> al
   precargar la landing (también desde Menu IQ) y lo toma gen2-acceso.js, que
   lo mete en su envoltorio de pop-up. Mientras tanto quedaba suelto y su X se
   veía arriba a la derecha: suelto en <body>, no se muestra. */
body.page-template-dashboard > #popup-gen2-acceso { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   ÍTEMS POS (lib/pos-unsynced.php)
   La sección del pilar con los productos del POS que todavía no tienen ítem
   (dashboard/section-items-pos.php, assets/js/dashboard/pos-unsynced.js):
   título con lo pendiente y «Cómo funciona» a la derecha, barra con buscador,
   vista y de cuándo es el catálogo, y una fila-tarjeta por producto con lo que
   hace falta para importarlo, de a 20. En el ancho de las demás (1000 px).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── la sección y «Cómo funciona» ────────────────────────────────────────── */
body.page-template-dashboard .gm-pu [hidden] { display: none !important; }
/* un poco más ancha que la norma de 1000: cada fila lleva tres desplegables */
body.page-template-dashboard #dashboard #panel > section#items-pos > *:not(.section-header) { max-width: 1100px; }
/* el título y «Cómo funciona» van a todo el ancho, como la cabecera de las
   demás secciones (Menu IQ con su insignia); sólo el contenido va a 1000 */
body.page-template-dashboard #dashboard #panel > section#items-pos > .section-header.gm-pu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* al bajar quedan fijos, apilados: el título con «Cómo funciona» (66 px: 20
   de aire, el h1 y 14 abajo), la barra (50) y la cabecera de la tabla. El
   aire de arriba sale de un margen negativo: quieto se ve igual que antes */
body.page-template-dashboard #dashboard section#items-pos { --pu-cab: 66px; --pu-bar: 50px; }
body.page-template-dashboard #dashboard #panel > section#items-pos > .section-header.gm-pu__head {
  position: sticky;
  top: 0;
  z-index: 4;
  height: var(--pu-cab);
  margin-top: -20px;
  margin-bottom: 8px;
  padding: 20px 0 14px;
  background: var(--gm-bg, #0a0a0a);
  box-sizing: border-box;
}
/* la insignia: la piel de «Por despegar» de los IQ (gm-iq.css .gm-iq__insignia) */
body.page-template-dashboard #dashboard .gm-pu__info { position: relative; flex: none; }
body.page-template-dashboard #dashboard .gm-pu__info-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  margin: 0;
  padding: 0 11px 0 9px;
  border: 1px solid var(--gm-border, #2f2f2f);
  border-radius: var(--gm-r-pill, 999px);
  background: var(--gm-surface-hi, #1f1f1f);
  color: var(--gm-text, #ececec);
  font-family: var(--gm-font);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--gm-t-fast), border-color var(--gm-t-fast);
}
body.page-template-dashboard #dashboard .gm-pu__info-btn:hover,
body.page-template-dashboard #dashboard .gm-pu__info-btn[aria-expanded="true"] { background: var(--gm-raised, #262626); border-color: var(--gm-border-hi, #3d3d3d); }
body.page-template-dashboard #dashboard .gm-pu__info-btn .gm-i { width: 13px; height: 13px; color: var(--gm-tag-blue-fg, #4f9ad4); }
body.page-template-dashboard #dashboard .gm-pu__info-caja {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: 380px;
  max-width: calc(100vw - 32px);
  padding: 14px 16px 14px;
  border: 1px solid var(--gm-border, #2f2f2f);
  border-radius: var(--gm-r-md, 10px);
  background: var(--gm-glass, rgba(23, 23, 23, .72));
  -webkit-backdrop-filter: var(--gm-glass-blur, blur(20px) saturate(140%));
  backdrop-filter: var(--gm-glass-blur, blur(20px) saturate(140%));
  box-shadow: var(--gm-sh-menu);
  font-family: var(--gm-font);
}
body.page-template-dashboard #dashboard .gm-pu__info-x {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--gm-text-3, #7c7c7c);
  cursor: pointer;
}
body.page-template-dashboard #dashboard .gm-pu__info-x:hover { color: var(--gm-text, #ececec); background: rgba(255, 255, 255, .08); }
body.page-template-dashboard #dashboard .gm-pu__info-x .gm-i { width: 13px; height: 13px; }
body.page-template-dashboard #dashboard .gm-pu__info-eyebrow {
  margin: 0 0 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gm-text-3, #7c7c7c);
}
body.page-template-dashboard #dashboard .gm-pu__info-titulo { margin: 0 30px 10px 0; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--gm-text, #ececec); }
body.page-template-dashboard #dashboard .gm-pu__info-lista { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.page-template-dashboard #dashboard .gm-pu__info-lista { gap: 10px; }
body.page-template-dashboard #dashboard .gm-pu__info-lista li { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--gm-text-2, #afafaf); }
body.page-template-dashboard #dashboard .gm-pu__info-lista li > strong { display: block; margin-bottom: 1px; font-weight: 600; color: var(--gm-text, #ececec); }
/* ── la barra ────────────────────────────────────────────────────────────── */
/* Queda pegada arriba al bajar por la lista: «Importar» siempre a mano. Con
   z-index 2, como la cabecera de la tabla: tapa los switches de las filas (1)
   y deja encima los desplegables de select2, que van después en body con 2. */
body.page-template-dashboard #dashboard .gm-pu__bar {
  position: sticky;
  top: var(--pu-cab);
  z-index: 2;
  margin-top: -12px;
  padding-top: 12px;
  background: var(--gm-bg, #0a0a0a);
}
body.page-template-dashboard #dashboard .gm-pu__bar > .filter-box { display: flex; align-items: center; gap: 8px; }
/* de cuándo es el catálogo, junto al buscador, con el botón para pedir otro */
body.page-template-dashboard #dashboard .gm-pu__bar > .tool-box { display: flex; align-items: center; gap: 12px; }
body.page-template-dashboard #dashboard .gm-pu__sync { display: flex; align-items: center; gap: 4px; min-width: 0; }
body.page-template-dashboard #dashboard .gm-pu__age {
  margin: 0;
  overflow: hidden;
  font-family: var(--gm-font);
  font-size: 12.5px;
  color: var(--gm-text-3, #7c7c7c);
  white-space: nowrap;
  text-overflow: ellipsis;
}
body.page-template-dashboard #dashboard .gm-pu__refresh {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--gm-r-pill, 999px);
  background: transparent;
  color: var(--gm-text-2, #afafaf);
  cursor: pointer;
  transition: color var(--gm-t-fast), background-color var(--gm-t-fast);
}
body.page-template-dashboard #dashboard .gm-pu__refresh:hover { color: #fff; background: rgba(255, 255, 255, .07); }
body.page-template-dashboard #dashboard .gm-pu__refresh .gm-i { width: 14px; height: 14px; }
body.page-template-dashboard #dashboard .gm-pu__refresh.is-busy { cursor: progress; }
body.page-template-dashboard #dashboard .gm-pu__refresh.is-busy .gm-i { animation: gm-pu-gira 1s linear infinite; }
@keyframes gm-pu-gira { to { transform: rotate(360deg); } }
/* con filas marcadas: recuento a la izquierda, las dos acciones a la derecha */
body.page-template-dashboard #dashboard .gm-pu.is-selecting .gm-pu__bar > .filter-box,
body.page-template-dashboard #dashboard .gm-pu.is-selecting .gm-pu__bar > .tool-box { display: none; }
body.page-template-dashboard #dashboard .gm-pu__bulk {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
body.page-template-dashboard #dashboard .gm-pu__count {
  font-family: var(--gm-font);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gm-text, #ececec);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.page-template-dashboard #dashboard .gm-pu__progress {
  font-family: var(--gm-font);
  font-size: 12.5px;
  color: var(--gm-text-3, #7c7c7c);
  font-variant-numeric: tabular-nums;
}
body.page-template-dashboard #dashboard .gm-pu__progress:empty { display: none; }
body.page-template-dashboard #dashboard .gm-pu__bulk [data-pu-ignore] { margin-left: auto; }
/* «20 seleccionados. Seleccionar total (172)»: el enlace de Ítems y Loyalty */
body.page-template-dashboard #dashboard .gm-pu__bulk .gm-select-all {
  appearance: none;
  margin: 0 0 0 -6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gm-text-2, #afafaf);
  font-family: var(--gm-font);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-underline-offset: 3px;
  cursor: pointer;
}
body.page-template-dashboard #dashboard .gm-pu__bulk .gm-select-all:hover,
body.page-template-dashboard #dashboard .gm-pu__bulk .gm-select-all:focus-visible { color: #fff; text-decoration: underline; outline: none; }

/* ── vistas: las pestañas de Notificaciones, con su cuenta en gris ───────── */
body.page-template-dashboard #dashboard .gm-pu__vistas { display: flex; flex-wrap: nowrap; margin: 0; }
body.page-template-dashboard #dashboard .gm-pu__vista-n { margin-left: 5px; color: var(--gm-text-3, #7c7c7c); font-variant-numeric: tabular-nums; }
body.page-template-dashboard #dashboard .gm-pu__vistas .gm-seg__btn.is-active .gm-pu__vista-n { color: var(--gm-text-2, #afafaf); }

/* ── estados: todo sincronizado, sin resultados (cargando: el esqueleto de Ítems) ── */
body.page-template-dashboard #dashboard .gm-pu__empty-text {
  margin: 6px 0 0;
  font-family: var(--gm-font);
  font-size: 13px;
  color: var(--gm-text-3, #7c7c7c);
  text-align: center;
}

/* ── la lista: una tabla cuyas filas son tarjetas, como las de Ítems ─────── */
body.page-template-dashboard #dashboard .gm-pu__table {
  width: 100%;
  margin: -8px 0 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0 8px;
  table-layout: fixed;
  font-family: var(--gm-font);
  font-size: 13.5px;
}
body.page-template-dashboard #dashboard .gm-pu__table th,
body.page-template-dashboard #dashboard .gm-pu__table td { border: 0; }
/* la cabecera se pega bajo la barra (12 de aire + 38 de alto) */
body.page-template-dashboard #dashboard .gm-pu__table thead th {
  position: sticky;
  top: calc(var(--pu-cab) + var(--pu-bar));
  z-index: 2;
  padding: 12px 6px 10px;
  background: var(--gm-bg, #0a0a0a);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--gm-text, #ececec);
  text-align: left;
  white-space: nowrap;
}
/* al bajar (con la cabecera pegada, .is-pegada lo pone pos-unsynced.js), una
   línea recta bajo ella; arriba, sin línea, la primera fila queda limpia */
body.page-template-dashboard #dashboard .gm-pu.is-pegada .gm-pu__table thead th { box-shadow: inset 0 -1px 0 var(--gm-border, #2f2f2f); }
body.page-template-dashboard #dashboard .gm-pu__table tbody td {
  padding: 10px 6px;
  border-top: 1px solid var(--gm-border, #2f2f2f);
  border-bottom: 1px solid var(--gm-border, #2f2f2f);
  background: var(--gm-surface, #171717);
  color: var(--gm-text, #ececec);
  vertical-align: middle;
  transition: background-color var(--gm-t-fast), border-color var(--gm-t-fast);
}
body.page-template-dashboard #dashboard .gm-pu__table tbody td:first-child {
  border-left: 1px solid var(--gm-border, #2f2f2f);
  border-radius: var(--gm-r-lg, 14px) 0 0 var(--gm-r-lg, 14px);
}
body.page-template-dashboard #dashboard .gm-pu__table tbody td:last-child {
  border-right: 1px solid var(--gm-border, #2f2f2f);
  border-radius: 0 var(--gm-r-lg, 14px) var(--gm-r-lg, 14px) 0;
}
/* fila marcada: un escalón más clara */
body.page-template-dashboard #dashboard .gm-pu__table tbody tr:has([data-pu-row]:checked) td {
  background: var(--gm-surface-hi, #1f1f1f);
  border-color: var(--gm-border-hi, #3d3d3d);
}
/* columnas */
/* columnas, para 1000 px: los tres desplegables se llevan la mitad, el nombre
   lo que sobra; precio con su ícono, switch y reloj, justos */
/* columnas: los tres desplegables se llevan la mitad, el nombre lo que sobra;
   precio con ancho fijo (cabe 000.000 y «Variable (N)»), modificadores,
   switch y reloj, justos */
body.page-template-dashboard #dashboard .gm-pu__table .gm-pu__c-check { width: 44px; padding-left: 14px; padding-right: 6px; }
body.page-template-dashboard #dashboard .gm-pu__table .gm-pu__c-item { width: 18%; }
body.page-template-dashboard #dashboard .gm-pu__table .gm-pu__c-menu { width: 16.5%; }
body.page-template-dashboard #dashboard .gm-pu__table .gm-pu__c-cat { width: 18%; }
body.page-template-dashboard #dashboard .gm-pu__table .gm-pu__c-price { width: 100px; }
body.page-template-dashboard #dashboard .gm-pu__table .gm-pu__c-mods { width: 66px; text-align: center; }
body.page-template-dashboard #dashboard .gm-pu__table .gm-pu__c-vis { width: 54px; padding-left: 2px; padding-right: 2px; text-align: center; }
body.page-template-dashboard #dashboard .gm-pu__table .gm-pu__c-date { width: 44px; padding-left: 2px; padding-right: 12px; text-align: center; }
body.page-template-dashboard #dashboard .gm-pu__table thead th.gm-pu__c-mods { text-align: center; }
body.page-template-dashboard #dashboard .gm-pu__table tbody .gm-pu__c-vis label.switchify { vertical-align: middle; }

/* «Editado»: ordenar (la flecha indica el sentido; apagada = por nombre) */
body.page-template-dashboard #dashboard .gm-pu__sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  white-space: nowrap;
}
body.page-template-dashboard #dashboard .gm-pu__sort:hover { color: var(--gm-text, #ececec); }
/* la flecha siempre ocupa su sitio (si no, la columna se corría al ordenar):
   apagada, asoma al pasar; encendida, dice el sentido */
body.page-template-dashboard #dashboard .gm-pu__sort-ico { flex: none; width: 12px; height: 12px; opacity: 0; transition: transform var(--gm-t-fast, .15s), opacity var(--gm-t-fast, .15s); }
body.page-template-dashboard #dashboard .gm-pu__sort:hover .gm-pu__sort-ico,
body.page-template-dashboard #dashboard .gm-pu__sort:focus-visible .gm-pu__sort-ico { opacity: .4; }
/* Visible y el reloj van centrados sobre su columna: ahí la flecha cuelga a
   la derecha, fuera del flujo, para que el centro sea el del texto o el reloj */
body.page-template-dashboard #dashboard .gm-pu__table thead th.gm-pu__c-vis,
body.page-template-dashboard #dashboard .gm-pu__table thead th.gm-pu__c-date { text-align: center; }
body.page-template-dashboard #dashboard .gm-pu__table thead th.gm-pu__c-mods .gm-pu__sort,
body.page-template-dashboard #dashboard .gm-pu__table thead th.gm-pu__c-vis .gm-pu__sort,
body.page-template-dashboard #dashboard .gm-pu__table thead th.gm-pu__c-date .gm-pu__sort { position: relative; vertical-align: middle; }
body.page-template-dashboard #dashboard .gm-pu__table thead th.gm-pu__c-mods .gm-pu__sort-ico,
body.page-template-dashboard #dashboard .gm-pu__table thead th.gm-pu__c-vis .gm-pu__sort-ico,
body.page-template-dashboard #dashboard .gm-pu__table thead th.gm-pu__c-date .gm-pu__sort-ico { position: absolute; left: 100%; top: 50%; margin: -6px 0 0 2px; }
body.page-template-dashboard #dashboard th.is-desc .gm-pu__sort-ico,
body.page-template-dashboard #dashboard th.is-asc .gm-pu__sort-ico { opacity: 1; }
body.page-template-dashboard #dashboard th.is-asc .gm-pu__sort-ico { transform: rotate(180deg); }
body.page-template-dashboard #dashboard th.is-desc .gm-pu__sort,
body.page-template-dashboard #dashboard th.is-asc .gm-pu__sort { color: var(--gm-text, #ececec); }

/* ── el producto del POS: nombre, datos, modificadores y resultado ───────── */
/* el nombre en una sola línea, con «…» si no cabe; las etiquetas al lado */
body.page-template-dashboard #dashboard .gm-pu__name { display: flex; align-items: center; gap: 4px; min-width: 0; font-weight: 500; line-height: 1.35; }
body.page-template-dashboard #dashboard .gm-pu__name-t { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body.page-template-dashboard #dashboard .gm-pu__name .gm-pu__tag { flex: none; margin-left: 2px; }
body.page-template-dashboard #dashboard .gm-pu__meta { margin-top: 2px; overflow: hidden; font-size: 11.5px; line-height: 1.4; color: var(--gm-text-3, #7c7c7c); white-space: nowrap; text-overflow: ellipsis; }
body.page-template-dashboard #dashboard .gm-pu__tag {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 7px;
  border-radius: var(--gm-r-pill, 999px);
  background: var(--gm-tag-gray-bg, #1c1c1c);
  box-shadow: inset 0 0 0 1px var(--gm-border, #2f2f2f);
  color: var(--gm-tag-gray-fg, #9a9a9a);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.3;
  vertical-align: 1px;
  white-space: nowrap;
}
body.page-template-dashboard #dashboard .gm-pu__tag--off { background: var(--gm-tag-rose-bg, #241719); box-shadow: none; color: var(--gm-tag-rose-fg, #d95f6b); }
body.page-template-dashboard #dashboard .gm-pu__status { margin-top: 4px; font-size: 11.5px; line-height: 1.35; }
body.page-template-dashboard #dashboard .gm-pu__status:empty { display: none; }
body.page-template-dashboard #dashboard .gm-pu__status.is-ok { color: var(--gm-ok, #34d399); }
body.page-template-dashboard #dashboard .gm-pu__status.is-error { color: var(--gm-bad, #f87171); }
body.page-template-dashboard #dashboard .gm-pu__status.is-busy { color: var(--gm-text-3, #7c7c7c); }
body.page-template-dashboard #dashboard .gm-pu__muted { color: var(--gm-text-3, #7c7c7c); }
/* la fecha del POS: un reloj con la fecha en el globo (escrita en la tarjeta) */
body.page-template-dashboard #dashboard .gm-pu__date-ico {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  color: var(--gm-text-3, #7c7c7c);
  cursor: help;
  vertical-align: middle;
  transition: color var(--gm-t-fast), background-color var(--gm-t-fast);
}
body.page-template-dashboard #dashboard .gm-pu__date-ico:hover,
body.page-template-dashboard #dashboard .gm-pu__date-ico:focus-visible { color: var(--gm-text, #ececec); background: rgba(255, 255, 255, .06); outline: none; }
body.page-template-dashboard #dashboard .gm-pu__date-ico .gm-i { width: 14px; height: 14px; }
body.page-template-dashboard #dashboard .gm-pu__date-txt { display: none; font-family: var(--gm-font-mono); }
body.page-template-dashboard #dashboard .gm-pu__sort-clock { flex: none; width: 14px; height: 14px; }

/* ── campos de la fila: desplegables (nativos hasta tocarlos, luego selectize) e importe ── */
body.page-template-dashboard #dashboard .gm-pu__table tbody select,
body.page-template-dashboard #dashboard .gm-pu__table .gm-pu__price {
  width: 100%;
  height: 34px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--gm-border, #2f2f2f);
  border-radius: var(--gm-r-md, 10px);
  background-color: var(--gm-surface-hi, #1f1f1f);
  color: var(--gm-text, #ececec);
  font-family: var(--gm-font);
  font-size: 13px;
  line-height: 1.2;
  box-shadow: none;
  transition: border-color var(--gm-t-fast), background-color var(--gm-t-fast);
}
body.page-template-dashboard #dashboard .gm-pu__table tbody select {
  padding-right: 28px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23afafaf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 13px;
  text-overflow: ellipsis;
  cursor: pointer;
}
body.page-template-dashboard #dashboard .gm-pu__table tbody select:hover:not(:disabled),
body.page-template-dashboard #dashboard .gm-pu__table .gm-pu__price:hover:not(:disabled) { border-color: var(--gm-border-hi, #3d3d3d); }
body.page-template-dashboard #dashboard .gm-pu__table tbody select:focus,
body.page-template-dashboard #dashboard .gm-pu__table .gm-pu__price:focus { outline: none; border-color: #575757; }
body.page-template-dashboard #dashboard .gm-pu__table .gm-pu__price {
  background-color: var(--gm-field, #212121);
  font-family: var(--gm-font-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
body.page-template-dashboard #dashboard .gm-pu__table .selectize-control { width: 100%; }
body.page-template-dashboard #dashboard .gm-pu__table .selectize-control .selectize-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: 34px !important;
  padding: 4px 10px !important;
  border: 1px solid #575757 !important;
  border-radius: var(--gm-r-md, 10px) !important;
  background: var(--gm-surface-hi, #1f1f1f) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  line-height: 18px;
}
body.page-template-dashboard #dashboard .gm-pu__table .selectize-control .selectize-input::after { display: none !important; content: none !important; }
body.page-template-dashboard #dashboard .gm-pu__table .selectize-control.multi .selectize-input.has-items { padding: 4px !important; }
/* el campo interno de selectize no es un campo: sin caja y con la letra de la fila */
body.page-template-dashboard #dashboard .gm-pu__table .selectize-input > input,
body.page-template-dashboard #dashboard .gm-pu__table .selectize-input > input:focus {
  flex: 1 1 40px;
  min-width: 40px;
  max-width: 100%;
  height: 18px !important;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  color: var(--gm-text, #ececec);
  font-family: var(--gm-font);
  font-size: 13px !important;
  line-height: 18px;
}
body.page-template-dashboard #dashboard .gm-pu__table .selectize-input > input::placeholder { color: var(--gm-text-3, #7c7c7c); }
body.page-template-dashboard #dashboard .gm-pu__table .selectize-control.single .selectize-input > div.item {
  padding: 0;
  border: 0;
  background: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* abierto, un múltiple con varios elegidos crece hacia abajo por encima de las
   filas siguientes, sin estirar la suya (sólo en la tabla; en la tarjeta va en
   su sitio) */
@media (min-width: 1180px) {
  body.page-template-dashboard #dashboard .gm-pu__table tbody td.gm-pu__c-menu,
  body.page-template-dashboard #dashboard .gm-pu__table tbody td.gm-pu__c-cat { position: relative; height: 54px; }
  body.page-template-dashboard #dashboard .gm-pu__table tbody td .selectize-control.multi {
    position: absolute;
    top: 50%;
    left: 6px;
    right: 6px;
    width: auto;
    margin-top: -17px;
    z-index: 3;
  }
}
/* múltiples: cada elegido, una etiqueta en una línea (con su X) */
body.page-template-dashboard #dashboard .gm-pu__table .selectize-control.multi .selectize-input > .item {
  position: relative;
  max-width: 100%;
  margin: 0 !important;
  padding: 2px 22px 2px 7px !important;
  border: 1px solid var(--gm-border-hi, #3d3d3d) !important;
  border-radius: 6px !important;
  background: var(--gm-raised, #262626) !important;
  color: var(--gm-text, #ececec) !important;
  font-size: 12.5px;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.page-template-dashboard #dashboard .gm-pu__table .selectize-control.multi .selectize-input > .item.active { border-color: #575757 !important; background: var(--gm-raised-hi, #303030) !important; }
body.page-template-dashboard #dashboard .gm-pu__table .selectize-control.multi .selectize-input > .item > .remove {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  padding: 0;
  border: 0;
  background: inherit; /* tapa el final de un nombre que no cabe */
  color: var(--gm-text-2, #afafaf);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
}
body.page-template-dashboard #dashboard .gm-pu__table .selectize-control.multi .selectize-input > .item > .remove:hover { background: inherit; color: #fff; }
body.page-template-dashboard #dashboard .gm-pu__table tbody select:disabled,
body.page-template-dashboard #dashboard .gm-pu__table .gm-pu__price:disabled,
body.page-template-dashboard #dashboard .gm-pu__table .selectize-control .selectize-input.disabled { opacity: .4; cursor: not-allowed; }
/* precio: el importe (o «Variable» si sale de los modificadores) y, al lado,
   el ícono de los modificadores del POS con cuántos grupos trae */
body.page-template-dashboard #dashboard .gm-pu__price-box { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
body.page-template-dashboard #dashboard .gm-pu__price-box > .gm-pu__price,
body.page-template-dashboard #dashboard .gm-pu__price-box > .gm-pu__var { flex: 1 1 0; min-width: 0; }
/* «Variable (N)»: con la forma del campo del precio, un escalón más claro; es
   también el botón del detalle de modificadores */
body.page-template-dashboard #dashboard .gm-pu__var {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  margin: 0;
  padding: 0 10px;
  justify-content: center;
  width: 100%;
  border: 1px solid var(--gm-border-hi, #3d3d3d);
  border-radius: var(--gm-r-md, 10px);
  background: var(--gm-border-hi, #3d3d3d);
  color: var(--gm-text, #ececec);
  font-family: var(--gm-font);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--gm-t-fast), background-color var(--gm-t-fast);
}
body.page-template-dashboard #dashboard .gm-pu__var:hover,
body.page-template-dashboard #dashboard .gm-pu__var:focus-visible { border-color: #4a4a4a; background: #4a4a4a; color: #fff; outline: none; }
body.page-template-dashboard #dashboard .gm-pu__var-n { color: var(--gm-text-2, #afafaf); font-variant-numeric: tabular-nums; }
/* el botón de los modificadores del POS: una píldora ámbar (la de los
   distintivos) con el ícono y cuántos grupos; abre su panel */
body.page-template-dashboard #dashboard .gm-pu__mods-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  margin: 0;
  padding: 0 8px 0 7px;
  border: 1px solid var(--gm-tag-amber-border, #bc9f78);
  border-radius: var(--gm-r-pill, 999px);
  background: var(--gm-tag-amber-bg, #483822);
  color: var(--gm-tag-amber-fg, #d2b286);
  font-family: var(--gm-font);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: filter var(--gm-t-fast);
}
body.page-template-dashboard #dashboard .gm-pu__mods-btn:hover,
body.page-template-dashboard #dashboard .gm-pu__mods-btn:focus-visible { filter: brightness(1.18); outline: none; }
body.page-template-dashboard #dashboard .gm-pu__mods-btn .gm-i { width: 12px; height: 12px; }
/* precio 0 que se importaría a $0: el campo en ámbar */
body.page-template-dashboard #dashboard .gm-pu__price-box.is-aviso > .gm-pu__price { border-color: var(--gm-tag-amber-border, #bc9f78); }
body.page-template-dashboard #dashboard .gm-pu__table tbody select.gm-pu__group { flex: 1 1 100%; height: 28px; padding-left: 8px; font-size: 11.5px; border-radius: 8px; }
/* enlazar un ítem existente: el precio y su aviso se apagan con el resto */
body.page-template-dashboard #dashboard .gm-pu__table tr.is-link .gm-pu__var { opacity: .4; }
/* «Crear ítem nuevo»: sólo el + en verde (el del margen guardado), para ver
   de un vistazo qué se crea y qué se enlaza; el select, como los demás. En el
   select nativo el + es un fondo más, junto al chevron. */
body.page-template-dashboard #dashboard .gm-pu__table tbody select.is-nuevo {
  padding-left: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2351b180' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"),
                    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23afafaf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: left 9px center, right 9px center;
  background-size: 11px, 13px;
}
body.page-template-dashboard .gm-pu__mas { display: inline-block; margin-right: 5px; color: #51b180; font-weight: 600; }
/* enlazar un ítem existente apaga el visible junto con el resto */
body.page-template-dashboard #dashboard .gm-pu__table tr.is-link .gm-pu__c-vis label.switchify { opacity: .4; pointer-events: none; }

/* casillas: las del panel (.styled-checkbox), dibujadas sobre el input */
body.page-template-dashboard #dashboard .gm-pu .gm-pu-check {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  display: inline-block;
  width: 17px;
  height: 17px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--gm-border-hi, #3d3d3d);
  border-radius: 5px;
  background: var(--gm-surface, #171717) center / 11px no-repeat;
  box-shadow: none;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color var(--gm-t-fast), border-color var(--gm-t-fast);
}
body.page-template-dashboard #dashboard .gm-pu .gm-pu-check:hover { border-color: #575757; }
body.page-template-dashboard #dashboard .gm-pu .gm-pu-check:focus-visible { outline: 2px solid var(--gm-border-hi, #3d3d3d); outline-offset: 2px; }
body.page-template-dashboard #dashboard .gm-pu .gm-pu-check:checked,
body.page-template-dashboard #dashboard .gm-pu .gm-pu-check:indeterminate {
  background-color: var(--gm-primary, #f9f9f9);
  border-color: var(--gm-primary, #f9f9f9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
}
body.page-template-dashboard #dashboard .gm-pu .gm-pu-check:indeterminate {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}
body.page-template-dashboard #dashboard .gm-pu .gm-pu-check:disabled { opacity: .35; cursor: not-allowed; }

/* desplegable de los combobox (va en body) */
body.page-template-dashboard .selectize-dropdown.gm-modal__dd .create { padding: 7px 10px; color: #fff; }
body.page-template-dashboard .selectize-dropdown.gm-modal__dd .optgroup-header {
  padding: 8px 10px 4px;
  background: none;
  color: #8a8a8a;
  font-size: 11px;
  font-weight: 500;
}

/* detalle del grupo al pasar sobre el chip: opciones y precios (en body, fuera del scroll) */
body.page-template-dashboard .gm-pu__pop {
  position: fixed;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  min-width: 260px;
  max-width: 340px;
  max-height: 60vh;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--gm-border, #2f2f2f);
  border-radius: var(--gm-r-md, 10px);
  background: var(--gm-glass, rgba(23, 23, 23, .72));
  -webkit-backdrop-filter: var(--gm-glass-blur, blur(20px) saturate(140%));
  backdrop-filter: var(--gm-glass-blur, blur(20px) saturate(140%));
  box-shadow: var(--gm-sh-menu);
  color: var(--gm-text, #ececec);
  font-family: var(--gm-font);
  font-size: 12.5px;
}
body.page-template-dashboard .gm-pu__pop[hidden] { display: none; }
body.page-template-dashboard .gm-pu__pop-top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 6px 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
body.page-template-dashboard .gm-pu__pop-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px 12px; }
body.page-template-dashboard .gm-pu__pop-x { display: grid; place-items: center; width: 26px; height: 26px; margin: 0; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--gm-text-3, #7c7c7c); cursor: pointer; }
body.page-template-dashboard .gm-pu__pop-x:hover { color: var(--gm-text, #ececec); background: rgba(255, 255, 255, .08); }
body.page-template-dashboard .gm-pu__pop-x .gm-i { width: 13px; height: 13px; }
body.page-template-dashboard .gm-pu__pop-head { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gm-text-3, #7c7c7c); }
body.page-template-dashboard .gm-pu__pop-group + .gm-pu__pop-group { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .08); }
body.page-template-dashboard .gm-pu__pop-name { margin-bottom: 4px; font-weight: 600; }
/* los datos del grupo (Tomás): id en el POS, otros productos, en Gourmedia */
body.page-template-dashboard .gm-pu__pop-datos { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 8px 0 0; font-size: 11.5px; line-height: 1.35; }
body.page-template-dashboard .gm-pu__pop-datos dt { color: var(--gm-text-3, #7c7c7c); white-space: nowrap; }
body.page-template-dashboard .gm-pu__pop-datos dd { margin: 0; color: var(--gm-text-2, #afafaf); overflow-wrap: anywhere; }
body.page-template-dashboard .gm-pu__pop-mono { font-family: var(--gm-font-mono); font-size: 11px; }
body.page-template-dashboard .gm-pu__pop-foot { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .08); color: var(--gm-text-2, #afafaf); font-size: 11.5px; line-height: 1.4; }
body.page-template-dashboard .gm-pu__pop-tag { margin-left: 4px; padding: 1px 7px; border: 1px solid currentColor; border-radius: 999px; background: var(--gm-tag-blue-bg, #161d26); color: var(--gm-tag-blue-fg, #4f9ad4); font-size: 10.5px; font-weight: 500; }
body.page-template-dashboard .gm-pu__pop-list { margin: 0; padding: 0; list-style: none; }
body.page-template-dashboard .gm-pu__pop-list li { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; border-top: 1px solid rgba(255, 255, 255, .06); }
body.page-template-dashboard .gm-pu__pop-list li:first-child { border-top: 0; }
body.page-template-dashboard .gm-pu__pop-list li.is-off { opacity: .45; }
body.page-template-dashboard .gm-pu__pop-price { font-family: var(--gm-font-mono); font-size: 12px; white-space: nowrap; }
body.page-template-dashboard .gm-pu__pop-note { margin: 6px 0 0; color: var(--gm-text-2, #afafaf); font-size: 11.5px; line-height: 1.35; }

/* fila ya importada: queda a la vista con su resultado, apagada */
body.page-template-dashboard #dashboard .gm-pu__table tr.is-done td > * { opacity: .45; }
body.page-template-dashboard #dashboard .gm-pu__table tr.is-done td.gm-pu__pos > * { opacity: 1; }
body.page-template-dashboard #dashboard .gm-pu__table tr.is-done .gm-pu__name,
body.page-template-dashboard #dashboard .gm-pu__table tr.is-done .gm-pu__meta { opacity: .55; }

/* «Cargar más», centrado al pie como en Ítems (#load-more-container) */
body.page-template-dashboard #dashboard .gm-pu__more { padding: 20px 0 8px; text-align: center; }

/* el ítem del pilar sólo sale con algo pendiente (lo marca pos-unsynced.js);
   si se está dentro, no desaparece al importar lo último */
body.page-template-dashboard #sidebar li.gm-pu-nav:not(.is-pendiente):not(.active) { display: none; }
/* el distintivo del pilar no sale hasta saber cuántos hay (y con cero, tampoco) */
body.page-template-dashboard #dashboard #sidebar .gm-navitem__badge[hidden],
body.page-template-dashboard #sidebar .gm-navitem__badge[hidden] { display: none; }

/* ── bajo 1180 de pantalla (menos de 860 de lista): cada producto, una tarjeta ── */
@media (max-width: 1179px) {
  body.page-template-dashboard #dashboard .gm-pu__date-ico { display: none; }
  body.page-template-dashboard #dashboard .gm-pu__table thead th::after { display: none; }
  body.page-template-dashboard #dashboard .gm-pu__date-txt { display: inline; }
  body.page-template-dashboard #dashboard .gm-pu__table thead th.gm-pu__c-date[class] { width: auto; padding: 0; }
  body.page-template-dashboard #dashboard .gm-pu__table,
  body.page-template-dashboard #dashboard .gm-pu__table thead,
  body.page-template-dashboard #dashboard .gm-pu__table tbody,
  body.page-template-dashboard #dashboard .gm-pu__table tbody td { display: block; }
  /* [class]: por encima de los anchos y rellenos de columna de la tabla */
  body.page-template-dashboard #dashboard .gm-pu__table thead th[class],
  body.page-template-dashboard #dashboard .gm-pu__table tbody td[class] { width: auto; }
  body.page-template-dashboard #dashboard .gm-pu__table { margin: 0; }
  /* de la cabecera quedan «seleccionar todos» y el orden por fecha */
  body.page-template-dashboard #dashboard .gm-pu__table thead tr { display: flex; align-items: center; gap: 10px; padding: 0 14px 10px 16px; }
  body.page-template-dashboard #dashboard .gm-pu__table thead th[class] { position: static; display: none; padding: 0; background: none; }
  body.page-template-dashboard #dashboard .gm-pu__table thead th.gm-pu__c-check,
  body.page-template-dashboard #dashboard .gm-pu__table thead th.gm-pu__c-pos { display: block; }
  body.page-template-dashboard #dashboard .gm-pu__table thead th.gm-pu__c-date { display: block; margin-left: auto; }
  body.page-template-dashboard #dashboard .gm-pu__table tbody tr {
    display: grid;
    grid-template-columns: 27px repeat(4, minmax(0, 1fr));
    grid-auto-flow: dense; /* «Visible» sube junto al precio aunque «Modif.» vaya antes */
    gap: 12px 10px;
    margin: 0 0 8px;
    padding: 14px 14px 12px 15px;
    border: 1px solid var(--gm-border, #2f2f2f);
    border-radius: var(--gm-r-lg, 14px);
    background: var(--gm-surface, #171717);
  }
  body.page-template-dashboard #dashboard .gm-pu__table tbody tr[hidden] { display: none; }
  body.page-template-dashboard #dashboard .gm-pu__table tbody tr:has([data-pu-row]:checked) { background: var(--gm-surface-hi, #1f1f1f); border-color: var(--gm-border-hi, #3d3d3d); }
  body.page-template-dashboard #dashboard .gm-pu__table tbody td[class],
  body.page-template-dashboard #dashboard .gm-pu__table tbody td:first-child,
  body.page-template-dashboard #dashboard .gm-pu__table tbody td:last-child {
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    text-align: left;
  }
  body.page-template-dashboard #dashboard .gm-pu__table tbody td.gm-pu__c-check { grid-column: 1; grid-row: 1; padding-top: 1px; }
  body.page-template-dashboard #dashboard .gm-pu__table tbody .gm-pu__pos { grid-column: 2 / -1; grid-row: 1; }
  body.page-template-dashboard #dashboard .gm-pu__table tbody .gm-pu__c-item { grid-column: 2 / 4; }
  body.page-template-dashboard #dashboard .gm-pu__table tbody .gm-pu__c-menu { grid-column: 4 / 6; }
  body.page-template-dashboard #dashboard .gm-pu__table tbody .gm-pu__c-cat { grid-column: 2 / 4; }
  body.page-template-dashboard #dashboard .gm-pu__table tbody .gm-pu__c-price { grid-column: 4 / 5; }
  body.page-template-dashboard #dashboard .gm-pu__table tbody .gm-pu__c-vis { grid-column: 5 / 6; }
  body.page-template-dashboard #dashboard .gm-pu__table tbody .gm-pu__c-mods { grid-column: 2 / 4; }
  body.page-template-dashboard #dashboard .gm-pu__table tbody td.gm-pu__c-date {
    grid-column: 4 / -1;
    align-self: end;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 11px;
    color: var(--gm-text-3, #7c7c7c);
  }
  body.page-template-dashboard #dashboard .gm-pu__table tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 5px;
    font-family: var(--gm-font);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .01em;
    color: var(--gm-text-3, #7c7c7c);
    white-space: nowrap;
  }
  body.page-template-dashboard #dashboard .gm-pu__table tbody td.gm-pu__c-date::before { margin: 0; }
  body.page-template-dashboard #dashboard .gm-pu__table tbody .gm-pu__c-vis label.switchify { padding: 7px 0; }
}

/* ── móvil: una columna, controles de 40 px y las acciones a todo el ancho ─ */
@media (max-width: 767px) {
  body.page-template-dashboard #dashboard .gm-pu__info-caja { position: fixed; top: 72px; left: 16px; right: 16px; width: auto; }
  /* en el teléfono el título no queda fijo (con «Cómo funciona» son dos
     líneas): la barra se pega arriba de todo */
  body.page-template-dashboard #dashboard section#items-pos { --pu-cab: 0px; }
  body.page-template-dashboard #dashboard #panel > section#items-pos > .section-header.gm-pu__head { position: static; height: auto; margin-top: 0; padding: 0; }
  /* la barra sólo se pega arriba con filas marcadas: sin selección son tres
     renglones de filtros y taparían media pantalla */
  body.page-template-dashboard #dashboard .gm-pu__bar { position: static; }
  body.page-template-dashboard #dashboard .gm-pu.is-selecting .gm-pu__bar { position: sticky; }
  body.page-template-dashboard #dashboard .gm-pu__bar > .filter-box { flex: 1 1 100%; flex-wrap: wrap; }
  body.page-template-dashboard #dashboard .gm-pu__sync { flex: 1 1 100%; order: 3; margin-left: 0; }
  body.page-template-dashboard #dashboard .gm-pu__refresh { width: 40px; height: 40px; }
  body.page-template-dashboard #dashboard .gm-pu__var { height: 40px; }
  /* la píldora sigue chica; su zona de toque llega a 40 px */
  body.page-template-dashboard #dashboard .gm-pu__mods-btn { position: relative; }
  body.page-template-dashboard #dashboard .gm-pu__mods-btn::before { content: ''; position: absolute; inset: -8px -4px; }
  body.page-template-dashboard #dashboard .gm-pu__bar > .filter-box > .filter-search { flex: 1 1 100%; width: auto !important; min-width: 0; }
  body.page-template-dashboard #dashboard .gm-pu__bar > .filter-box > .filter-search input { width: 100% !important; }
  /* las pestañas se deslizan de lado en vez de partirse en dos filas */
  body.page-template-dashboard #dashboard .gm-pu__vistas { flex: 1 1 100%; order: 2; flex-wrap: nowrap; margin-right: -16px; padding-right: 16px; overflow-x: auto; scrollbar-width: none; }
  body.page-template-dashboard #dashboard .gm-pu__vistas::-webkit-scrollbar { display: none; }
  body.page-template-dashboard #dashboard .gm-pu__vistas .gm-seg__btn { flex: none; height: 40px; }
  /* «Última actualización» arriba y, si hay, «Deshacer» debajo, a lo ancho */
  body.page-template-dashboard #dashboard .gm-pu__bar > .tool-box { flex: 1 1 100%; flex-wrap: wrap; gap: 8px; margin-left: 0; }
  body.page-template-dashboard #dashboard .gm-pu__bar > .tool-box > .gm-pu__sync { flex: 1 1 100%; order: -1; }
  body.page-template-dashboard #dashboard .gm-pu__bar > .tool-box > [data-pu-undo] { flex: 1 1 100%; height: 40px; }
  /* recuento (y avance) arriba; debajo, las dos acciones a medias */
  body.page-template-dashboard #dashboard .gm-pu__bulk { flex-wrap: wrap; gap: 8px; }
  body.page-template-dashboard #dashboard .gm-pu__bulk .gm-pu__count { line-height: 24px; }
  body.page-template-dashboard #dashboard .gm-pu__bulk .gm-pu__progress { flex: 1 1 0; line-height: 24px; text-align: right; }
  /* las dos acciones, a medias en su propia fila (el 40 % no les deja subir
     junto al recuento) */
  body.page-template-dashboard #dashboard .gm-pu__bulk .gm-btn { flex: 1 1 40%; height: 40px; margin: 0; padding-left: 8px; padding-right: 8px; }
  body.page-template-dashboard #dashboard .gm-pu__bulk [data-pu-ignore] { margin-left: 0; }
  body.page-template-dashboard #dashboard .gm-pu__bulk .gm-select-all { min-height: 40px; }
  body.page-template-dashboard #dashboard .gm-pu__table tbody tr { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr); padding-left: 14px; }
  body.page-template-dashboard #dashboard .gm-pu__table tbody .gm-pu__c-item,
  body.page-template-dashboard #dashboard .gm-pu__table tbody .gm-pu__c-menu,
  body.page-template-dashboard #dashboard .gm-pu__table tbody .gm-pu__c-cat { grid-column: 2 / -1; }
  body.page-template-dashboard #dashboard .gm-pu__table tbody .gm-pu__c-price { grid-column: 2 / 3; }
  body.page-template-dashboard #dashboard .gm-pu__table tbody .gm-pu__c-vis { grid-column: 3 / 4; }
  body.page-template-dashboard #dashboard .gm-pu__table tbody .gm-pu__c-mods { grid-column: 2 / 3; }
  body.page-template-dashboard #dashboard .gm-pu__table tbody td.gm-pu__c-date { grid-column: 2 / -1; }
  body.page-template-dashboard #dashboard .gm-pu__table tbody select,
  body.page-template-dashboard #dashboard .gm-pu__table .gm-pu__price { height: 40px; font-size: 14px; }
  body.page-template-dashboard #dashboard .gm-pu__table .selectize-control .selectize-input { min-height: 40px !important; }
  body.page-template-dashboard #dashboard .gm-pu__table .selectize-input > input,
  body.page-template-dashboard #dashboard .gm-pu__table .selectize-input > input:focus { font-size: 16px !important; } /* iOS no hace zoom */
  body.page-template-dashboard #dashboard .gm-pu__table tbody .gm-pu__c-vis label.switchify { padding: 10px 12px 10px 0; }
  /* la casilla crece y su zona de toque llega a 40 px */
  body.page-template-dashboard #dashboard .gm-pu__table .gm-pu__c-check .gm-pu-check { position: relative; width: 20px; height: 20px; border-radius: 6px; background-size: 13px; }
  body.page-template-dashboard #dashboard .gm-pu__table .gm-pu__c-check .gm-pu-check::before { content: ''; position: absolute; inset: -10px; }
  body.page-template-dashboard #dashboard .gm-pu__sort { min-height: 40px; }
  body.page-template-dashboard #dashboard .gm-pu__table thead tr { padding-bottom: 2px; padding-left: 14px; }
}

/* ── la guía desde IQ en Ítems (margen.js gmMargen.guiar, recos.js) ─────── */
/* Las píldoras de margen vacías laten en ámbar un par de veces y un globo
   con botones explica el paso y ofrece el lote. */
body.page-template-dashboard #dashboard .responsive-table li .gm-margen.is-guia {
  border-color: rgba(210, 178, 134, .7);
  color: var(--gm-tag-amber-fg, #d2b286);
  animation: gm-margen-guia 1.4s ease-in-out 3;
}
@keyframes gm-margen-guia {
  0%, 100% { box-shadow: 0 0 0 0 rgba(210, 178, 134, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(210, 178, 134, .22); }
}
body.page-template-dashboard .gm-tipcard--guia { max-width: 272px; }
body.page-template-dashboard .gm-tipcard--guia .gm-tipcard__title { color: var(--gm-tag-amber-fg, #d2b286); }
body.page-template-dashboard .gm-tipcard--guia .gm-tipcard__text { margin-bottom: 12px; color: var(--gm-text, #ececec); }
body.page-template-dashboard .gm-tipcard__acciones {
  display: flex;
  align-items: center;
  gap: 14px;
}
body.page-template-dashboard .gm-tipcard__acciones .gm-btn--sm {
  height: 30px;
  padding: 0 14px;
  font-size: 12.5px;
}
body.page-template-dashboard .gm-tipcard__link {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gm-text-2, #afafaf);
  font-family: var(--gm-font);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}
body.page-template-dashboard .gm-tipcard__link:hover { color: #fff; }

/* ── el pop-up de recomendaciones en lote (popup-bulk-recos.php) ────────── */
/* La forma del de margen: el primer campo con su raya, los demás pegados. */
body.page-template-dashboard .gm-dialog.gm-recos-dialog { width: min(480px, 100%) !important; max-width: 480px !important; }
body.page-template-dashboard .gm-recos-dialog .gm-margen-field + .gm-margen-field {
  margin-top: 16px;
  padding-top: 0 !important;
  border-top: 0;
}
body.page-template-dashboard .gm-recos-dialog .gm-hint { margin: 2px 0 0; }
/* Lista y Qué hacer: el select en píldora de «Tipo» en el pop-up de Pop-ups
   (Banner / Registro), con los colores de campo del pop-up */
body.page-template-dashboard :is(#bulkrecospopup, #bulkitemspopup) select.gm-recos-select {
  width: 160px;
  max-width: 100%;
  height: 38px;
  padding: 0 30px 0 16px;
  background-color: var(--gm-modal-field) !important;
  border: 1px solid var(--gm-modal-field-border) !important;
  border-radius: var(--gm-r-pill, 999px);
  color: #fff;
  font-size: 13px;
}
body.page-template-dashboard :is(#bulkrecospopup, #bulkitemspopup) select.gm-recos-select--lista { width: 240px; }
body.page-template-dashboard :is(#bulkrecospopup, #bulkitemspopup) select.gm-recos-select:focus { border-color: var(--gm-modal-field-focus) !important; outline: none; }
body.page-template-dashboard .gm-recos-dialog .selectize-control { width: 100%; padding: 0; }
body.page-template-dashboard :is(#bulkrecospopup, #bulkitemspopup) .selectize-control .selectize-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  /* el mismo aire en los cuatro lados: 8 px a las fichas, y el texto a 12 como en los campos */
  padding: 8px !important;
  background: var(--gm-modal-field) !important;
  border: 1px solid var(--gm-modal-field-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: #fff;
  font-size: 13px;
  line-height: 18px;
}
body.page-template-dashboard :is(#bulkrecospopup, #bulkitemspopup) .selectize-control .selectize-input::after { display: none !important; content: none !important; }
body.page-template-dashboard :is(#bulkrecospopup, #bulkitemspopup) .selectize-control .selectize-input.focus { border-color: var(--gm-modal-field-focus) !important; }
body.page-template-dashboard :is(#bulkrecospopup, #bulkitemspopup) .selectize-control .selectize-input > input {
  height: 22px !important;
  margin: 0 !important;
  padding: 0 0 0 4px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff;
}
body.page-template-dashboard :is(#bulkrecospopup, #bulkitemspopup) .selectize-control.multi .selectize-input > div.item {
  display: inline-flex;
  align-items: center;
  margin: 0 !important;
  padding: 3px 4px 3px 8px !important;
  border: 1px solid var(--gm-modal-chip-border) !important;
  border-radius: 7px !important;
  background: var(--gm-modal-chip) !important;
  color: #fff !important;
  font-size: 12.5px;
  line-height: 18px;
}
body.page-template-dashboard :is(#bulkrecospopup, #bulkitemspopup) .selectize-control.plugin-remove_button .item .remove {
  position: static;
  margin-left: 6px;
  padding: 0 4px;
  border-left: 0 !important;
  color: var(--gm-modal-text);
  font-size: 14px;
  line-height: 18px;
}
body.page-template-dashboard :is(#bulkrecospopup, #bulkitemspopup) .selectize-control.plugin-remove_button .item .remove:hover { background: none; color: #fff; }
body.page-template-dashboard .selectize-dropdown.gm-recos-dropdown {
  z-index: 100001;
  margin-top: 6px;
  padding: 4px;
  border: 1px solid var(--gm-modal-border);
  border-radius: 12px;
  background: #262626;
  box-shadow: var(--gm-sh-menu);
  color: var(--gm-text, #ececec);
  font-family: var(--gm-font);
  font-size: 13px;
}
body.page-template-dashboard .selectize-dropdown.gm-recos-dropdown .selectize-dropdown-content { max-height: 260px; }
body.page-template-dashboard .selectize-dropdown.gm-recos-dropdown .option,
body.page-template-dashboard .selectize-dropdown.gm-recos-dropdown .optgroup-header {
  padding: 7px 10px;
  border-radius: 7px;
  background: transparent;
  color: var(--gm-text, #ececec);
}
body.page-template-dashboard .selectize-dropdown.gm-recos-dropdown .optgroup-header { color: var(--gm-text-3, #7c7c7c); font-size: 11.5px; }
body.page-template-dashboard .selectize-dropdown.gm-recos-dropdown .active { background: #333 !important; color: #fff !important; }

/* ── Categoría, Menú, Modificadores y Duplicar (popup-bulk-items.php) ───── */
/* El mismo pop-up que Recomendaciones; cada acción muestra sus campos
   (data-gm-para). El primero que se ve lleva la raya de arriba, como el
   primero del de margen (bulk-items.js le pone .es-primero). */
body.page-template-dashboard #bulkitemspopup [hidden] { display: none !important; }
body.page-template-dashboard #bulkitemspopup .gm-margen-field.es-primero {
  margin-top: 18px;
  padding-top: 18px !important;
  border-top: 1px solid var(--gm-modal-line);
}
body.page-template-dashboard #bulkitemspopup select.gm-recos-select--ancho { width: 100%; }
body.page-template-dashboard #bulkitemspopup .gm-bulk-items__pos { margin-top: 16px; }
@media (prefers-reduced-motion: reduce) {
  body.page-template-dashboard #dashboard .responsive-table li .gm-margen.is-guia { animation: none; }
}

/* ── Loyalty · acción masiva con chips ──────────────────────────────────────
   Las acciones se eligen como las pestañas de Notificaciones (.gm-seg--tabs),
   no con un select y «Aplicar»: el recuento y «Seleccionar total» quedan a la
   izquierda, junto a la casilla, y los chips justificados a la derecha, en la
   misma línea. El select sigue en el DOM, oculto: es la fuente de verdad que
   leen gm-shell.js, el Escape y el submit del formulario. */
/* la barra ocupa el ancho de la lista: si mide lo que su contenido, los chips no
   tienen contra qué justificarse y se corren cada vez que cambia el recuento */
body.page-template-dashboard #dashboard #loyalty.gm-selecting .gm-toolbar > .tool-box { flex: 1 1 auto; min-width: 0; }
body.page-template-dashboard #dashboard .tool-box > #loyalty-actions-form { flex: 1 1 auto; min-width: 0; }
body.page-template-dashboard #dashboard #loyalty-actions-form .control-container { flex-wrap: wrap; row-gap: 8px; }
body.page-template-dashboard #dashboard #loyalty-actions-form .control-container > .gm-selection-count { order: 1; }
body.page-template-dashboard #dashboard #loyalty-actions-form .control-container > .gm-select-all { order: 2; }
body.page-template-dashboard #dashboard #loyalty-actions-form .control-container > .gm-bulk-chips { order: 3; margin-left: auto; }
body.page-template-dashboard #dashboard #loyalty-actions-form .control-container:has(> .gm-bulk-chips) > div:has(> select.bulk-actions),
body.page-template-dashboard #dashboard #loyalty-actions-form .control-container:has(> .gm-bulk-chips) > button[type="submit"] { display: none; }
/* el chip dispara una acción, no elige nada: ni el foco ni el uso le dejan marca.
   Lo único que lo distingue al pasar por encima es lo mismo que en Notificaciones. */
body.page-template-dashboard #dashboard #loyalty-actions-form .gm-bulk-chips .gm-seg__btn,
body.page-template-dashboard #dashboard #loyalty-actions-form .gm-bulk-chips .gm-seg__btn:hover,
body.page-template-dashboard #dashboard #loyalty-actions-form .gm-bulk-chips .gm-seg__btn:focus,
body.page-template-dashboard #dashboard #loyalty-actions-form .gm-bulk-chips .gm-seg__btn:focus-visible,
body.page-template-dashboard #dashboard #loyalty-actions-form .gm-bulk-chips .gm-seg__btn:active {
  background: transparent; border: 0; box-shadow: none; outline: none;
}
body.page-template-dashboard #dashboard #loyalty-actions-form .gm-bulk-chips .gm-seg__btn:hover { color: #fff; }
body.page-template-dashboard #dashboard #loyalty-actions-form .gm-bulk-chips .gm-seg__btn:focus-visible { outline: 1px solid var(--gm-modal-field-focus, #3a3a3a); outline-offset: 1px; }
body.page-template-dashboard #dashboard #loyalty-actions-form .gm-bulk-chips .gm-seg__btn[disabled] { opacity: .45; pointer-events: none; }

/* ── multicuenta: el selector de cuentas del pie del pilar ───────────────── */
/* dashboard/components/cuentas.php, assets/js/dashboard/gm-cuentas.js. El
   botón es la marca de siempre (logo grande + plan) con el ícono de selector.
   Abierto, el menú se pone encima en el mismo lugar: la cuenta actual queda
   donde estaba el botón, bajo una raya, y arriba van «Tus cuentas», las otras
   y «Agregar cuenta» (15-oct-2026: filas parejas y un hover que se distingue,
   para que no se vea blando). */

body.page-template-dashboard #sidebar .gm-account.gm-cuentas {
  position: relative;
  display: block;
  padding: 0;
}
body.page-template-dashboard #sidebar .gm-cuentas__boton {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 6px 10px 6px 8px;
  border: 0;
  border-radius: 14px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--gm-t-fast, .15s) var(--gm-ease, ease);
}
body.page-template-dashboard #sidebar .gm-cuentas__boton:hover { background: var(--gm-surface-hi, #1f1f1f); }
body.page-template-dashboard #sidebar .gm-cuentas__boton:focus-visible { outline: 2px solid var(--gm-border-hi, #4a4a4a); outline-offset: 2px; }
body.page-template-dashboard #sidebar .gm-cuentas__flecha {
  width: 18px;
  height: 18px;
  margin-left: auto;
  color: var(--gm-text-3, #7c7c7c);
  flex: none;
  transition: color var(--gm-t-fast, .15s) var(--gm-ease, ease);
}
body.page-template-dashboard #sidebar .gm-cuentas__boton:hover .gm-cuentas__flecha { color: #fff; }
/* abierto, el botón queda a la vista encima del menú, en su lugar: la cuenta
   actual es él mismo (logo y plan, como antes de tocarlo) */
body.page-template-dashboard #sidebar .gm-cuentas.is-open .gm-cuentas__boton { position: relative; z-index: 61; }
/* sin el gris del hover: abierto es parte del menú, bajo su raya */
body.page-template-dashboard #sidebar .gm-cuentas.is-open .gm-cuentas__boton,
body.page-template-dashboard #sidebar .gm-cuentas.is-open .gm-cuentas__boton:hover { background: none; }

body.page-template-dashboard #sidebar .gm-cuentas__menu {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: max(100%, 248px);
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: 6px;
  background: var(--gm-raised, #262626);
  border: 1px solid #363636;
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .35);
}
/* «Tus cuentas»: lo que es el menú, en gris y chico */
body.page-template-dashboard #sidebar .gm-cuentas__titulo {
  padding: 8px 8px 4px;
  color: var(--gm-text-3, #7c7c7c);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}
body.page-template-dashboard #sidebar .gm-cuentas__menu[hidden] { display: none; }

body.page-template-dashboard #sidebar .gm-cuentas__op {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 6px 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--gm-text, #ececec);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--gm-t-fast, .15s) var(--gm-ease, ease);
}
body.page-template-dashboard #sidebar button.gm-cuentas__op:hover,
body.page-template-dashboard #sidebar button.gm-cuentas__op:focus-visible {
  background: #333;
  outline: none;
}
body.page-template-dashboard #sidebar button.gm-cuentas__op:disabled { cursor: wait; }
body.page-template-dashboard #sidebar .gm-cuentas__op.is-loading { opacity: .6; }
/* el lugar del botón, al pie del menú: su alto menos el borde y el aire del
   menú (gm-cuentas.js lo mide al abrir), bajo una raya */
body.page-template-dashboard #sidebar .gm-cuentas__aqui {
  flex: none;
  height: calc(var(--gm-cuentas-alto, 68px) - 7px);
  margin-top: 5px;
  border-top: 1px solid #363636;
}

/* el logo de cada cuenta en su recuadro: contain, para que un logo ancho no se corte */
body.page-template-dashboard #sidebar .gm-cuentas__logo {
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  flex: none;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 9px;
  background: #141414;
  object-fit: contain;
}
body.page-template-dashboard #sidebar .gm-cuentas__inicial {
  display: grid;
  place-items: center;
  background: #2c2c2c;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
}
/* «Agregar cuenta»: el más en un recuadro lleno, como un logo más (el punteado se veía a medio hacer) */
body.page-template-dashboard #sidebar .gm-cuentas__mas {
  display: grid;
  place-items: center;
  border: 0;
  background: #333;
  color: #fff;
}
body.page-template-dashboard #sidebar .gm-cuentas__agregar .gm-cuentas__nombre { color: var(--gm-modal-text, #afafaf); font-weight: 450; }
body.page-template-dashboard #sidebar .gm-cuentas__agregar:hover .gm-cuentas__nombre { color: #fff; }
body.page-template-dashboard #sidebar .gm-cuentas__mas .gm-i { width: 16px; height: 16px; }

body.page-template-dashboard #sidebar .gm-cuentas__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
body.page-template-dashboard #sidebar .gm-cuentas__nombre {
  max-width: 100%;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* el plan de cada cuenta, como texto gris bajo el nombre (una pastilla por fila
   era ruido); la actual, que es el botón, conserva la pastilla del pie */
body.page-template-dashboard #sidebar .gm-cuentas__plan.gm-tag--quiet {
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gm-text-3, #7c7c7c);
  font-size: 12px;
  font-weight: 450;
  white-space: nowrap;
}

/* pilar plegado: el botón es sólo la marca; el menú sale con su ancho */
body.page-template-dashboard.gm-rail-closed #sidebar .gm-cuentas__boton { justify-content: center; padding: 0; }
body.page-template-dashboard.gm-rail-closed #sidebar .gm-cuentas__flecha { display: none; }