:root{
  /* Superficie del contenido (también usada por el pill activo) */
  --surface:#ffffff;

  /* cuánto “sale” la pastilla hacia la derecha en escritorio */
  --pill-out: 22px;
}

*{ box-sizing:border-box; }
html, body, #root{ height:100%; }

/* Fondo global: degradado verde */
html{
  background: linear-gradient(180deg, var(--dark), var(--dark-3));
}

/* Sin scroll global: el scroll vive en .admin-content */
body{
  margin:0;
  background: transparent;
  font-family:'Poppins',system-ui,sans-serif;
  color:var(--slate);
  overflow: hidden;
}

/* Bloqueo de scroll cuando el drawer está abierto */
.drawer-open body{ overflow: hidden; }

/* ===== Layout contenedor ===== */
.admin-container{
  height: 100dvh;
  background: transparent;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "sidebar content"
    "sidebar content";
  gap: 10px;
  padding: 10px;
}

/* ===== Sidebar (sin scroll, footer visible) ===== */
.sidebar{
  grid-area: sidebar;
  position: sticky;
  top: 10px;
  height: calc(100dvh - 20px);
  width: var(--sb-open);
  background: linear-gradient(180deg, var(--brand-dark), var(--brand-darker)); /* navy SISTEMI */
  color:var(--on-dark);
  display:flex; flex-direction:column;
  overflow: visible; /* el pill del activo puede sobresalir */
  border-radius: var(--radius);
  z-index: 1000; /* por encima del backdrop */
}

.sb-header{ position:relative; padding:14px 12px 8px; }
.brand{ display:grid; place-items:center; height:120px; }
.brand img{ max-width:16rem; height:auto; }

.menu-btn{
  display:none;
  position:absolute; top:.6rem; right:.6rem;
  width:2.2rem; height:2.2rem; border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.12); box-shadow:0 6px 18px rgba(0,0,0,.18);
  color:#fff; font-size:18px;
}

/* ===== Menú ===== */
.menu-container{
  flex:1 0 auto;
  padding: 20px 12px;
  overflow-y: auto;                 /* scroll interno del sidebar */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: 84px;             /* que el footer no tape el último ítem */
}
.menu-container::-webkit-scrollbar{ width:6px; height:6px; }
.menu-container::-webkit-scrollbar-thumb{ background:var(--brand-bright); border-radius:6px; }
.menu-container{ scrollbar-width:thin; scrollbar-color:var(--brand-bright) var(--brand-dark); }
@media(forced-colors:active){.menu-container{scrollbar-color:auto}}

.menu{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap: var(--item-gap);
}

/* Ítems */
.menu-link{
  position:relative;
  display:flex; align-items:center; gap:.9rem;
  width: 100%;
  margin-right: 0;
  padding:12px 14px 12px 52px;
  border-radius:16px;
  color:var(--on-dark);
  text-decoration:none;
  transition:transform .08s ease, background .25s, color .25s, box-shadow .25s;
  font-size:1.3rem; font-weight:600;
  min-height:54px; will-change: transform, width, margin-right;
}
.menu-link:hover{
  background: rgba(255,255,255,.08);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.menu-link img{
  position:absolute; left:12px;
  width: var(--item-icon); height: var(--item-icon);
  padding:6px; border-radius:12px;
  background: rgba(255,255,255,.14);
  box-shadow: var(--inner-shadow);
  object-fit:contain;
}

/* Activo sobresaliente */
.menu-link.active{
  background: var(--surface);
  color: var(--dark);
  border-radius: 18px;
  width: calc(101% + var(--pill-out));
  margin-right: calc(var(--pill-out) * -1);
  position: relative;
  z-index: 3;
  transition:
    width .28s ease, margin-right .28s ease,
    background .25s ease, color .25s ease, box-shadow .25s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.menu-link.active img{
  background:var(--surface-soft);
  box-shadow: inset 0 0 0 1px rgba(140,19,23,.08);
}

/* Accesibilidad */
.menu-link:focus-visible{
  outline: none;
  box-shadow:
    0 10px 30px rgba(148, 38, 38, 0.12),
    0 0 0 2px rgba(255,255,255,.65) inset;
}

/* ===== Footer del sidebar ===== */
.sb-footer{
  margin-top: auto;
  border-top:1px solid rgba(255,255,255,.15);
  padding:10px 12px 14px;
  background: transparent;
}
.footer-actions{ display:flex; gap:10px; flex-direction:column; }

.logout-button{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:8px;
  height:42px; border-radius:14px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.12);
  color:#fff; cursor:pointer; font-weight:600;
}
.logout-button i{ font-size:1.2rem; }
.logout-button:hover{
  background: white; color: var(--dark-2); border-color: var(--dark-2);
}

/* ===== Área de contenido ===== */
.admin-content{
  grid-area: content;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: auto !important;
}

/* Userbar */
.userbar{
  top: 0;
  z-index: 5;
  display:flex; align-items:center; justify-content:end;
  backdrop-filter: blur(6px);
  color:var(--dark-2);
  padding:5px 5px;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
}

.userbar .user-chip{ display:flex; align-items:center; gap:10px; }
.userbar .user-chip img{
  width:38px; height:38px; border-radius:50%; object-fit:cover;
  background-color: white; box-shadow:0 4px 10px rgba(0,0,0,.18);
}
.userbar .meta{ display:flex; flex-direction:column; line-height:1.1; }
.userbar .meta strong{ font-size:.95rem; }
.userbar .meta small{ opacity:1; color: var(--dark-2); }
.userbar .actions .icon-btn{
  width:40px; height:40px; border-radius:14px;
  margin-right: 10px;
  border:1px solid rgba(255,255,255,.25);
  background: var(--dark-2);
  color: white; cursor:pointer; gap:4px;
}
.userbar .actions .icon-btn:hover{
  background: white; color: var(--dark-2); border-color: var(--dark-2);
}

/* Tarjeta que contiene el <Outlet /> */
.content-card{
  background: var(--surface);
  color: var(--slate);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px clamp(16px,3vw,40px);
  min-height: calc(100dvh - 120px);
  overflow-x: hidden;
  border: 1px solid rgba(0,0,0,.04);
}

/* ===== Backdrop (drawer móvil) ===== */
.backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.25);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
  z-index: 900; /* debajo del sidebar */
}
.backdrop.show{ opacity: 1; pointer-events: auto; }

/* ===== Botón hamburguesa ===== */
.mobile-trigger{
  position: fixed;
  left: 16px; top: 16px;
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.62);      /* más oscuro */
  display:none; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,.28);
  z-index: 1002; cursor:pointer;
  color:#fff; font-size:22px;
  backdrop-filter: blur(6px);
}
.mobile-trigger:hover{ background: rgba(0,0,0,.75); }

/* ===== Submenús (Registrar / Historial) ===== */
.menu-item.group { margin: 6px 0; }

.menu-item.group > .group-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: .9rem;
  width: 100%;
  padding: 12px 14px 12px 52px;
  border-radius: 16px;
  background: transparent;
  color: var(--on-dark);
  border: 0;
  cursor: pointer;
  font-size: 1.3rem;
  font-weight: 600;
  text-align: left;
  transition:transform .08s ease, background .25s, color .25s, box-shadow .25s;
}
.menu-item.group > .group-toggle:hover {
  background: rgba(255,255,255,.08);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.menu-item.group > .group-toggle img {
  position: absolute;
  left: 12px;
  width: var(--item-icon);
  height: var(--item-icon);
  padding: 6px;
  border-radius: 12px;
  background: rgba(255,255,255,.14);
  box-shadow: var(--inner-shadow);
  object-fit: contain;
}
.menu-item.group > .group-toggle i {
  margin-left: auto;
  font-size: 1.1rem;
  opacity: .9;
}

/* Submenú */
.submenu {
  list-style: none;
  margin: 8px 0 4px;
  padding: 0 0 0 44px;
  display: grid;
  gap: 6px;
  overflow: visible; /* deja sobresalir la pastilla */
}
.submenu-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--on-dark);
  text-decoration: none;
  font-weight: 500;
  transition:
    transform .08s ease,
    background .25s ease,
    color .25s ease,
    box-shadow .25s ease,
    width .28s ease,
    margin-right .28s ease;
  will-change: transform, width, margin-right;
}
.submenu-link:hover {
  background: rgba(255,255,255,.08);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.submenu-link.active {
  background: var(--surface);
  color: var(--dark);
  font-weight: 700;
  border-radius: 18px;
  width: calc(101% + var(--pill-out));
  margin-right: calc(var(--pill-out) * -1);
  position: relative;
  z-index: 3;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.group-toggle:focus-visible,
.submenu-link:focus-visible {
  outline: none;
  box-shadow:
    0 10px 30px rgba(148, 38, 38, 0.12),
    0 0 0 2px rgba(255,255,255,.65) inset;
}
@media (max-width: 1100px){
  .submenu-link.active{
    width: 100%;
    margin-right: 0;
    border-radius: 18px;
  }
}

/* ===== Responsive / Drawer behavior ===== */
@media (max-width: 1100px){
  .admin-container{
    grid-template-columns: 1fr;
    grid-template-areas:
      "content"
      "content";
  }

  .sidebar{
    position: fixed;
    top: 0; bottom: 0; left: 0;
    height: 100dvh;
    width: min(90vw, var(--sb-open));
    max-width: var(--sb-open);
    transform: translateX(-100%);
    transition: transform .28s ease;
    border-radius: 0 20px 20px 0;
    overflow: hidden;
  }
  .sidebar.open{ transform: translateX(0); }

  .mobile-trigger{ display:flex; }

  .admin-content{
    grid-area: content;
    padding-top: 74px;
    overflow: auto;
  }

  /* En móvil, el pill no sobresale */
  :root{ --pill-out: 0px; }
  .menu-link.active{
    width: 100%; margin-right: 0;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
  }

  .menu-container{ padding-bottom: 110px; }
}

/* Ajustes adicionales de la userbar en pantallas pequeñas */
@media (max-width: 720px){
  /* Layout: usuario a la izquierda, botón a la derecha (misma fila) */
  .userbar{
    display: grid !important;
    grid-template-areas: "chip actions";
    grid-template-columns: 1fr auto;  /* chip ocupa, el botón se pega a la derecha */
    align-items: center;
    gap: 10px;
    padding: 8px 8px;
    background: rgba(255,255,255,.85);
    border-radius: 12px;
  }

  .userbar .user-chip{ grid-area: chip; justify-self: start; min-width: 0; }
  .userbar .actions{ grid-area: actions; justify-self: end; }

  .userbar .actions .icon-btn{
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 14px;
  }

  .userbar .user-chip img{ width:34px; height:34px; }
  .userbar .meta strong{ font-size:.9rem; }
  .userbar .meta small{ font-size:.75rem; }
}

/* ================== FIXES de Registrar Cierre (apertura) ================== */
.rc-col-hd{
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 8px !important;
}
.rc-col-hd > div:last-child{
  margin-left: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  min-width: 80px !important;
}
.rc-col-hd > div:last-child .rc-cell-label{
  white-space: nowrap !important;
  font-weight: 700;
  color: #6b7280;
}
.rc-col-hd > div:last-child .rc-input{
  width: 110px !important;
  height: 34px !important;
  padding: 6px 8px !important;
  font-size: 14px !important;
  text-align: right !important;
  max-width: none !important;
  font-variant-numeric: tabular-nums;
}
.rc-col-hd > div:last-child .rc-input.rc-no-spin,
.rc-col-hd > div:last-child .rc-input.rc-no-step{
  appearance: textfield !important;
  -moz-appearance: textfield !important;
  -webkit-appearance: none !important;
}
.rc-col-hd > div:last-child .rc-input.rc-no-spin::-webkit-outer-spin-button,
.rc-col-hd > div:last-child .rc-input.rc-no-spin::-webkit-inner-spin-button,
.rc-col-hd > div:last-child .rc-input.rc-no-step::-webkit-outer-spin-button,
.rc-col-hd > div:last-child .rc-input.rc-no-step::-webkit-inner-spin-button{
  -webkit-appearance: none !important;
  margin: 0 !important;
}
@media (max-width: 500px){
  .rc-col-hd > div:last-child .rc-input{ width: 96px !important; }
}

/* ==== FIX: scroll vertical del sidebar con submenús largos ==== */
.sidebar{
  display: flex !important;
  flex-direction: column !important;
  overflow-x: hidden !important;    /* sin scroll horizontal */
  overflow-y: hidden !important;    /* el scroll vive en .menu-container */
}
.menu-container{
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;      /* scroll vertical aquí */
  overflow-x: hidden !important;    /* sin scroll horizontal */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: 96px !important;
}
.menu-container::-webkit-scrollbar{ width:0; height:0; }
.menu-container{ scrollbar-width: none; }
@media (max-width:1100px){
  .menu-container{ padding-bottom: 120px !important; }
}

/* ====== OVERRIDES ====== */
/* --- FIX 1: en móvil, deja que la página pueda crecer y scrollear --- */
@media (max-width:1100px){
  html, body {
    height: auto;            /* que no se encajen a 100dvh */
  }
  body{
    overflow: auto;          /* permite scroll del documento */
  }

  /* El grid puede medir más que el viewport si el contenido lo requiere */
  .admin-container{
    height: auto;            /* en lugar de 100dvh rígido */
    min-height: 100dvh;      /* aún llena la pantalla mínima */
  }

  /* El área de contenido ya no necesita “forzar” alturas mínimas */
  .content-card{
    min-height: unset;       /* evita pelear con los 100dvh del contenedor */
  }
}

/* --- FIX 2: asegura que el contenido no quede detrás de la userbar --- */
.userbar{
  position: sticky;   /* ya actúa como barra superior */
  top: 0;
}

/* --- FIX 3: evita que el overlay/backdrop tape el contenido por z-index --- */
.admin-content{
  position: relative;
  z-index: 1;         /* por encima del backdrop (z:900) ya estás, pero explícitalo */
}

/* --- FIX 4: si usas drawer en móvil, solo bloquea el scroll al ABRIRLO --- */
/* Ya tienes .drawer-open body { overflow:hidden; }  */


/* 2) Modal SIEMPRE por encima del sidebar */
.rc-modal-mask,
.ReactModal__Overlay,
.modal-backdrop{
  z-index: 2000 !important;
}

/* === OVERRIDES: quitar pill y dejar activo normal === */
.menu-link.active,
.submenu-link.active{
  width: 100% !important;
  margin-right: 0 !important;
  border-radius: 16px !important;   /* igual que los ítems normales */
  position: static !important;      /* sin posicionamiento especial */
  z-index: auto !important;         /* sin elevar por encima */
}

/* Si quieres asegurarte de que nada sobresalga, deja oculto el overflow horizontal */
.sidebar,
.menu-container{
  overflow-x: hidden !important;
}

/* === A 350px o menos: ocultar email en la userbar === */
@media (max-width: 370px){
  .userbar .user-chip { min-width: 0; }        /* permite encoger el chip */
  .userbar .meta { overflow: hidden; }         /* habilita elipsis */
  .userbar .meta small { display: none !important; } /* oculta email */
  .userbar .meta strong{
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;                   /* elipsis para nombres largos */
  }
}

/* Identidad de la sucursal activa en el encabezado lateral (logo desde sucursales.logo_url). */

.sidebar-sucursal{display:grid;gap:6px;margin:0 14px 8px;padding:10px;border-radius:10px;background:rgba(255,255,255,.12)}.sidebar-sucursal label,.sidebar-sucursal-label{font-size:12px;font-weight:700;color:var(--on-dark)}@media(max-width:720px){.sidebar-sucursal{margin:0 12px 8px}}

/* Selector de sucursal con logo */
.sucursal-selector{ position:relative; }
.sucursal-selector-btn,
.sucursal-actual,
.sucursal-selector-list button{
  width:100%; min-height:44px; display:flex; align-items:center; gap:10px;
  padding:6px 10px; border:1px solid var(--line-strong); border-radius:8px;
  background:#fff; color:#172536 !important; font:inherit; font-size:14px; text-align:left;
}
.sucursal-selector-btn{ cursor:pointer; background:#fff !important; color:#172536 !important; }
.sucursal-selector-btn i{ margin-left:auto; font-size:18px; color:#64748b; }
.sucursal-selector-name,
.sucursal-actual span,
.sucursal-selector-list button span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; color:#172536 !important; }
.sucursal-selector-list{
  position:absolute; z-index:999; left:0; right:0; top:calc(100% + 4px);
  margin:0; padding:4px; list-style:none; display:grid; gap:4px;
  background:#fff !important; border:1px solid var(--line-strong); border-radius:10px; box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.sucursal-selector-list button{ border-color:transparent; cursor:pointer; background:#fff !important; color:#172536 !important; }
.sucursal-selector-list button:hover{ background:#f1f5f9 !important; color:#0f172a !important; }
.sucursal-selector-list button:hover span{ color:#0f172a !important; }
.sucursal-selector-list button.active{ background:#eaf5ef !important; color:#16794c !important; }
.sucursal-selector summary{list-style:none}.sucursal-selector summary::-webkit-details-marker{display:none}.sucursal-selector-btn{cursor:pointer!important;justify-content:space-between}.sucursal-selector-chevron{flex:0 0 auto;color:#64748b;font-size:18px;transition:transform .15s ease}.sucursal-selector[open] .sucursal-selector-chevron{transform:rotate(180deg)}.sucursal-selector-popover{position:absolute;z-index:1200;top:calc(100% + 5px);left:0;right:0;display:grid;gap:4px;max-height:min(60vh,420px);overflow-y:auto;padding:5px;background:#fff;border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 12px 28px rgba(0,0,0,.22)}.sucursal-selector-option{display:flex;align-items:center;gap:9px;min-height:40px;padding:6px 9px;border-radius:7px;color:#172536;text-decoration:none;font-size:12px;font-weight:600}.sucursal-selector-option:hover{background:#f1f5f9}.sucursal-selector-option.active{background:#eaf5ef;color:#16794c}.sucursal-selector-option>span:nth-child(2){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sucursal-option-icon{display:grid;place-items:center;flex:0 0 25px;width:25px;height:25px;border-radius:7px;background:#eef3f5;color:#527078;font-size:14px}.sucursal-option-check{margin-left:auto;color:#16794c}.sucursal-selector-manage{display:flex;justify-content:space-between;align-items:center;margin-top:4px;padding:10px 9px 4px;border-top:1px solid #e7edef;color:#28777a;text-decoration:none;font-size:11px;font-weight:700}.sucursal-selector-manage:hover{text-decoration:underline}
.sucursal-selector-list button.active span{ color:#16794c !important; }

/* Opción activa: acento verde SISTEMI */
.menu-link.active,
.submenu-link.active{ box-shadow: inset 4px 0 0 var(--brand-bright), 0 10px 24px rgba(0,0,0,.18); }

/* Crédito "Construido por SISTEMI": discreto, al pie del menú */
.sb-credito{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin:10px 0 0; font-size:11px; letter-spacing:.02em;
  color:var(--on-dark); opacity:.65;
}
.sb-credito img{ width:16px; height:16px; border-radius:50%; background:#fff; }

/* Logo de SISTEMI arriba del menú (sobre tarjeta blanca para que se lea en el fondo oscuro) */
.brand{ height:auto; padding:4px 8px; }
.brand .sidebar-sistemi-logo{ width:100%; max-width:11rem; height:auto; background:#fff; border-radius:14px; padding:10px 12px; }

/* Interfaz del cajero: sin sidebar ni navegación administrativa. */
.cajero-container{height:100dvh;display:flex;flex-direction:column;background:#f5f7f4;color:var(--ink);overflow:hidden}
.cajero-header{flex:none;position:relative;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:64px;padding:8px clamp(12px,3vw,28px);background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 10px rgba(0,0,0,.06)}
.cajero-identidad,.cajero-sucursal{display:flex;align-items:center;gap:8px;min-width:0}
.cajero-sistemi{width:34px;height:34px;object-fit:contain;flex:none}
.cajero-separador{height:28px;width:1px;background:var(--line-strong);flex:none}
.cajero-sucursal strong{font-size:14px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cajero-usuario{position:relative;flex:none}
.cajero-usuario-btn{display:flex;align-items:center;gap:6px;min-height:44px;padding:4px 8px;border:1px solid var(--line-strong);
  border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.cajero-usuario-inicial{display:grid;place-items:center;width:29px;height:29px;flex:none;border-radius:50%;background:var(--brand-soft);color:var(--brand-text)}
.cajero-usuario-nombre{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cajero-menu-cerrar{position:fixed;inset:0;border:0;background:transparent;z-index:1;cursor:default}
.cajero-usuario-menu{position:absolute;right:0;top:calc(100% + 5px);min-width:140px;padding:5px;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 10px 26px rgba(0,0,0,.16);z-index:2}
.cajero-usuario-menu button{width:100%;min-height:44px;text-align:left;border:0;border-radius:7px;background:#fff;color:var(--ink);
  padding:8px 12px;font:inherit;font-weight:700;cursor:pointer}
.cajero-usuario-menu button:hover,.cajero-usuario-menu button:focus-visible{background:var(--brand-soft)}
.cajero-content{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;padding:16px clamp(12px,3vw,28px) 28px}
.cajero-content .ct-shell{max-width:1100px;margin:0 auto}
.cajero-content .apertura-page{max-width:560px}
@media(max-width:600px){
  .cajero-header{min-height:58px;padding:6px 10px;gap:6px}
  .cajero-sistemi{width:30px;height:30px}
  .cajero-sucursal strong{font-size:12px;max-width:105px}
  .cajero-usuario-nombre{max-width:72px;font-size:12px}
  .cajero-content{padding:12px 10px calc(96px + env(safe-area-inset-bottom))}
  .cajero-content .apertura-page{padding:0}
}

/* Opción "Todas las sucursales" del selector global */
.sucursal-todas-icono{width:32px;height:32px;flex:0 0 32px;display:inline-grid;place-items:center;border-radius:8px;background:var(--brand-soft);color:var(--brand);font-size:18px}

.menu-group-label{list-style:none;padding:12px 12px 4px;margin-top:8px;color:rgba(255,255,255,.52);font-size:10px;font-weight:800;letter-spacing:.13em}.menu-group-label:first-child{margin-top:0}