/* =========================
   Variables y ajustes base
========================= */
:root {
  --radius: 14px;
  --shadow: 0 10px 25px rgba(0,0,0,.06);
  --azul: #042a63;
}

.grecaptcha-badge{
  z-index: 999999 !important;
}
/* Mostrar badge SOLO en login */
body:not(.login-mode) .grecaptcha-badge{
  visibility: hidden !important;
  pointer-events: none !important;
}

.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
}

/* =========================
   Header fijo (una sola fila)
========================= */
.app-header{
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  width: 100%;
  background: var(--azul); color: #fff;
  z-index: 1050;
  box-shadow: 0 6px 18px rgba(13,110,253,0.25);
}
.app-header .inner{
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 0; max-width: none; flex: 1;
}
.app-header .logo{ display:block; width:400px; height:70px; border-radius:12px; object-fit:contain; }
.app-header h1{
  font-size: 1.25rem; font-weight: 600; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Campana + badge a la derecha */
#notificaciones-admin{
  position: static !important;
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto;
}
/* Chip usuario */
.usuario-sesion{
  margin: 0; padding: 8px 10px;
  font-size: 14px; font-weight: 700; color: #312c2c;
  background:#f3f2ee; border-radius:8px;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  display: inline-flex; align-items: center; justify-content: center;
}

/* Reservas para header y footer fijos */
body{ padding-top:110px; padding-bottom:60px; }

/* =========================
   Nav rápido (botonera)
========================= */
.nav-quick{
  display:flex; gap:8px; flex-wrap:wrap;
  margin:10px 0 16px; justify-content:center;
}
.nav-quick a{
  text-decoration:none; padding:.5rem .75rem;
  border-radius:.65rem; border:1px solid #dee2e6;
  color:#0d6efd; background:#fff;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.nav-quick a.active,
.nav-quick a:hover{ background:var(--azul); color:#fff; border-color:#0d6efd; }

/* =========================
   Menú hamburguesa
========================= */
.hamburguesa-container{ position:relative; display:inline-block; }
#hamburguesa-btn{
  background:#c2bcbc; color:#000; font-size:20px;
  padding:10px 15px; border:none; border-radius:6px; cursor:pointer;
}
#menu-desplegable{
  position:absolute; top:100%; right:0;
  background:#fff; box-shadow:0 4px 10px rgba(0,0,0,.15);
  border:1px solid #d8dee7; border-radius:12px; display:none; min-width:265px;
  max-height:calc(100vh - 125px); overflow-y:auto; z-index:10000;
}
.dropdown-item{
  width:100%; padding:12px 16px; text-align:left; font-size:15px;
  color:#333; border:none; background:none; cursor:pointer; transition: background .2s, color .2s;
}
.dropdown-item:hover{ background:#000; color:#b85757; }

/* Botón cerrar sesión del menú */
#cerrar-sesion{
  width:100%; padding:10px; border:none; cursor:pointer;
  border-radius:8px; background:#6e1111; color:#fff; transition: background-color .2s;
}
#cerrar-sesion:hover{ background:#a7560b; }
/* =========================
   Menú hamburguesa (columna real)
========================= */

/* cuando el JS agrega .show, se abre en flex-col */
#menu-desplegable.show{
  display: flex !important;
  flex-direction: column !important;
  gap: 6px;
  padding: 12px;
}

/* asegurar que cualquier botón dentro del menú sea "fila" completa */
#menu-desplegable button{
  width: 100% !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items:center !important;
  min-height:40px;
  padding:8px 11px !important;
  border:1px solid #d5dbe4 !important;
  border-left:4px solid var(--menu-accent, #64748b) !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#1f2937 !important;
  font-size:14px !important;
  font-weight:650 !important;
  line-height:1.2;
  text-align:left;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
#menu-desplegable button:hover,
#menu-desplegable button:focus-visible{
  background:#f1f5f9 !important;
  border-color:#aeb8c6 !important;
  border-left-color:var(--menu-accent, #334155) !important;
  color:#0f172a !important;
  transform:translateX(2px);
  box-shadow:0 2px 5px rgba(15,23,42,.10);
}
#menu-desplegable button i{
  width:18px;
  flex:0 0 18px;
  color:var(--menu-accent, #475569);
  font-size:15px;
}
#menu-desplegable .btn-outline-primary{ --menu-accent:#2563eb; }
#menu-desplegable .btn-outline-success{ --menu-accent:#168a55; }
#menu-desplegable .btn-outline-warning{ --menu-accent:#d97706; }
#menu-desplegable .btn-outline-info{ --menu-accent:#0284c7; }
#menu-desplegable .btn-outline-danger{ --menu-accent:#dc3545; }
#menu-desplegable .btn-outline-dark{ --menu-accent:#475569; }

.menu-section-label{
  margin:7px 4px 1px;
  color:#64748b;
  font-size:10px;
  font-weight:800;
  letter-spacing:.085em;
  line-height:1.2;
  text-transform:uppercase;
}
.menu-section-label:first-child{ margin-top:1px; }
.menu-section-cuenta{
  border-top:1px solid #e2e8f0;
  margin-top:9px;
  padding-top:9px;
}

/* opcional: separar el cerrar sesión */
#menu-desplegable #cerrar-sesion{
  margin-top:0;
  justify-content:center !important;
  border:1px solid #6e1111 !important;
  border-left:4px solid #430808 !important;
  background:#6e1111 !important;
  color:#fff !important;
  font-weight:750 !important;
}
#menu-desplegable #cerrar-sesion:hover,
#menu-desplegable #cerrar-sesion:focus-visible{
  background:#8f1a1a !important;
  border-color:#8f1a1a !important;
  color:#fff !important;
}
#menu-desplegable #cerrar-sesion i{ color:#fff; }


/* =========================
   Modo SUBAGENTE (UX) - ocultar AG-only por CSS
   (Esto NO reemplaza el bloqueo backend; es UX.)
========================= */
body.subag-mode #btn-abrir-sugerencias,
body.subag-mode #modalSugerenciasChat{
  display: none !important;
}

/* Botones AG-only del menú */
body.subag-mode #btn-abrir-transfer,
body.subag-mode #btn-abrir-asignar-subagente,
body.subag-mode [data-bs-target="#modalSubagente"],
body.subag-mode [data-bs-target="#modalAsignarSubagente"],
body.subag-mode [data-bs-target="#modalTransfer"],
body.subag-mode [data-bs-target="#modalActivarSerie"]{
  display: none !important;
}

/* Modales AG-only (por si quedan en DOM) */
body.subag-mode #modalTransfer,
body.subag-mode #modalAsignarSubagente,
body.subag-mode #modalSubagente,
body.subag-mode #modalActivarSerie{
  display: none !important;
}


/* IMPORTANTE:
   asegurar visibles los permitidos (por si tienen d-none en algún breakpoint) */
body.subag-mode [data-bs-target="#modalIngresoManual"],
body.subag-mode [data-bs-target="#modalPadronAgencia"],
body.subag-mode #cerrar-sesion{
  display: inline-flex !important;
}

/* =========================
   Modal notificaciones
========================= */
.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  display:none; justify-content:center; align-items:center; z-index:9999;
}
.modal-box{
  background:#fff; padding:20px 25px; border-radius:10px;
  max-width:520px; width:90%; max-height:80vh; overflow-y:auto;
  box-shadow:0 5px 20px rgba(0,0,0,.3); position:relative; animation:slideIn .3s ease;
}
@keyframes slideIn{ from{opacity:0; transform:scale(.9)} to{opacity:1; transform:scale(1)} }
.sugerencias-lista>div{
  background:#f9f9f9; border-left:5px solid #007bff;
  padding:12px 15px; margin-bottom:12px; border-radius:8px; transition: background .2s;
}
.sugerencias-lista>div:hover{ background:#eef5ff; }
.tipo-global{ border-left-color:#007bff; }
.tipo-respuesta{ border-left-color:#28a745; }
.close-btn{ position:absolute; top:10px; right:15px; font-size:22px; cursor:pointer; color:#555; }

/* Badge / campana */
.badge-noti{
  position:absolute; top:-5px; right:-5px;
  background:red; color:#fff; border-radius:50%;
  padding:2px 6px; font-size:12px; font-weight:700; display:none; z-index:10;
}
.badge-noti.nueva{ animation:pulse 1s infinite; }
@keyframes pulse{ 0%{transform:scale(1)} 50%{transform:scale(1.2)} 100%{transform:scale(1)} }
.campana-noti{ font-size:1.6rem; line-height:1; cursor:pointer; }
.campana-noti .badge-noti{ font-size:.65rem; top:-4px; right:-4px; }

/* Conversaciones de sugerencias */
#sug-badge{ margin-left:auto; }
.sug-layout{ display:grid; grid-template-columns:minmax(220px, 34%) 1fr; min-height:430px; border:1px solid #dee2e6; border-radius:12px; overflow:hidden; }
.sug-hilos{ background:#f7f8fa; border-right:1px solid #dee2e6; overflow-y:auto; max-height:58vh; }
.sug-hilo{ width:100%; display:flex; flex-direction:column; gap:3px; padding:12px; text-align:left; border:0; border-bottom:1px solid #e1e5ea; background:transparent; }
.sug-hilo:hover,.sug-hilo.activo{ background:#e9f2ff; }
.sug-hilo.no-leido{ border-left:5px solid #dc3545; background:#fff8f8; }
.sug-hilo-head{ display:flex; justify-content:space-between; gap:8px; }
.sug-hilo-head i{ color:#dc3545; font-size:.72rem; }
.sug-hilo span:not(.sug-hilo-head),.sug-hilo small,.sug-hilo time{ color:#68717a; font-size:.78rem; }
.sug-conversacion{ display:flex; flex-direction:column; min-width:0; background:#fff; }
.sug-chat{ flex:1; min-height:310px; max-height:48vh; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
.sug-mensaje{ max-width:82%; padding:10px 12px; border-radius:12px; background:#f0f2f5; align-self:flex-start; overflow-wrap:anywhere; }
.sug-mensaje.propio{ background:#d9fdd3; align-self:flex-end; }
.sug-mensaje small{ display:block; color:#6c757d; margin-bottom:4px; font-size:.72rem; }
.sug-responder{ display:flex; gap:8px; align-items:flex-end; border-top:1px solid #dee2e6; padding:12px; }
.sug-responder textarea{ resize:vertical; }
@media (max-width: 767px){
  .sug-layout{ grid-template-columns:1fr; }
  .sug-hilos{ max-height:190px; border-right:0; border-bottom:1px solid #dee2e6; }
  .sug-chat{ max-height:42vh; }
}

/* =========================
   Spinner overlay global
========================= */
#spinner-container.spinner-container{
  position: fixed;
  inset: 0;
  display: none;             /* se muestra con showSpinner() */
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  z-index: 9999;
}
#spinner-container .spinner{
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
#spinner-container .spinner div{
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  animation: spinner-bounce 1.4s infinite ease-in-out both;
}
#spinner-container .spinner div:nth-child(2){ animation-delay: -0.3s; }
#spinner-container .spinner div:nth-child(3){ animation-delay: -0.6s; }
@keyframes spinner-bounce{
  0%, 80%, 100% { transform: scale(0); }
  40%           { transform: scale(1); }
}
#spinner-message{
  color: #fff;
  font-size: 1.1rem;
  line-height: 1.3;
  text-align: center;
  opacity: 0;                /* se anima en JS a 1 */
  transition: opacity .25s ease;
}

/* =========================
   Contenido principal
========================= */
main.container{ max-width:900px; }
.section-title{ margin-bottom:.75rem; }

#contenedor{
  background:#f8f9fa; border:1px solid #dee2e6; border-radius:8px;
  padding:20px; max-width:900px; margin:20px auto; box-shadow:0 0 10px rgba(0,0,0,.05);
}
#contenedor h2{
  font-size:28px; color:#004085; text-align:center;
  margin-bottom:20px; border-bottom:2px solid #cce5ff; padding-bottom:10px;
}
#contenedor p{ font-size:16px; line-height:1.6; color:#343a40; margin-bottom:15px; }
#contenedor ul{ padding-left:20px; list-style:none; }
#contenedor form{
  max-width:400px; margin:0 auto; padding:20px; background:#f9f9f9;
  border-radius:10px; box-shadow:0 0 10px rgba(0,0,0,.1);
}
#contenedor form label{ display:block; margin-bottom:10px; font-weight:600; color:#444; }
#contenedor form input{
  width:100%; padding:8px 10px; border:1px solid #ccc; border-radius:6px; box-sizing:border-box; margin-top:4px;
}
#contenedor form button{
  width:100%; padding:12px; margin-top:20px; background:#007bff; color:#fff;
  border:none; border-radius:6px; font-weight:700; font-size:16px; cursor:pointer; transition:background .3s;
}
#contenedor form button:hover{ background:#0056b3; }


/* =========================
   Extras
========================= */
#btn-volver-arriba{
  position:fixed; bottom:25px; right:25px; margin-bottom:15px;
  background:#e0dcd6; color:rgb(107,64,64);
  border:none; padding:10px 14px; border-radius:8px;
  cursor:pointer; font-size:14px; box-shadow:0 2px 5px rgba(0,0,0,.2);
  display:none; z-index:1000; transition:opacity .3s;
}
#btn-volver-arriba:hover{ background:#9c9994; }

.interruptor{ position:relative; display:inline-block; width:60px; height:34px; }
.interruptor input{ opacity:0; width:0; height:0; }
.slider{
  position:absolute; inset:0; cursor:pointer;
  background:#d33; transition:.4s; border-radius:34px;
}
.slider:before{
  position:absolute; content:""; height:26px; width:26px;
  left:4px; bottom:4px; background:#fff; transition:.4s; border-radius:50%;
}
input:checked + .slider{ background:#4caf50; }
input:checked + .slider:before{ transform:translateX(26px); }

          .pa-topbar{
            top: 0;
            z-index: 1055;
            background:#fff;
            padding: 6px 0 10px 0;
            border-bottom: 1px solid rgba(0,0,0,.06);
          }
          .pa-modal-spinner{
            position:absolute;
            inset:0;
            background: rgba(255,255,255,.72);
            backdrop-filter: blur(2px);
            z-index: 1060;
            display:flex;
            align-items:center;
            justify-content:center;
          }
          .pa-modal-spinner-card{
            background:#fff;
            border:1px solid rgba(0,0,0,.1);
            border-radius:14px;
            padding:18px 22px;
            box-shadow: 0 10px 25px rgba(0,0,0,.10);
            text-align:center;
            min-width: 220px;
          }

/* =========================
   Responsivo
========================= */
@media (max-width: 768px){
  .app-header h1{ white-space:normal; }
  nav{ justify-content:space-evenly; }
  .menu-btn{ font-size:14px; padding:8px 12px; }
}
@media (max-width: 576px){
  .card .card-body{ padding:1rem; }
  .app-header .logo{ max-height:78px; }
  body{ padding-top:140px; padding-bottom:50px; }
}

/* Ocultar temporalmente la opción 'Verificar Premio' */
.nav-quick a[data-view="premio"] { display: none !important; }

/* ===== Login: bloquear scroll y centrar (usa body.login-mode) ===== */
html, body { height: 100%; }

body.login-mode {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #f4f6f8;
}
body.login-mode #root {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
}
body.login-mode #root .container {
  width: min(520px, 92vw);
  margin: 0;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 24px 22px;
  background: #fff;
}
/* Logo rectangular para login */
body.login-mode #logo {
  display: block;
  max-width: 460px;
  width: 100%;
  height: auto;
  margin: 0 auto 12px;
  border-radius: 8px;  /* si lo querés “filo vivo”, poné 0 */
}
/* Inputs & botón */
body.login-mode h1 { 
  font-size: clamp(20px, 2.6vw, 24px);
  text-align: center;
  margin: 8px 0 16px;
}
body.login-mode label { font-weight: 600; margin: 8px 0 6px; }
body.login-mode input[type="text"],
body.login-mode input[type="password"] { height: 44px; }
body.login-mode button#btn-login { height: 44px; font-weight: 600; }
/* Ojo del password */
body.login-mode .campo-contraseña { position: relative; }
body.login-mode .campo-contraseña input { padding-right: 40px; }
body.login-mode .campo-contraseña svg {
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
}
/* Spinner sobre login */
body.login-mode .spinner-container {
  position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.6); z-index: 9999;
}

/* Hover/active con texto blanco para los botones outline del header */
.app-header .btn.btn-outline-success:hover,
.app-header .btn.btn-outline-success:focus,
.app-header .btn.btn-outline-success:active {
  color: #fff !important;
  background-color: var(--bs-success);
  border-color: var(--bs-success);
}

.app-header .btn.btn-outline-info:hover,
.app-header .btn.btn-outline-info:focus,
.app-header .btn.btn-outline-info:active {
  color: #fff !important;
  background-color: var(--bs-info);
  border-color: var(--bs-info);
}

.app-header .btn.btn-outline-warning:hover,
.app-header .btn.btn-outline-warning:focus,
.app-header .btn.btn-outline-warning:active {
  color: #fff !important;
  background-color: var(--bs-warning);
  border-color: var(--bs-warning);
}

.app-header .btn.btn-outline-primary:hover,
.app-header .btn.btn-outline-primary:focus,
.app-header .btn.btn-outline-primary:active {
  color: #fff !important;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* Para el de Subagente: outline-light por defecto hace fondo blanco con texto oscuro.
   Si querés texto blanco al hover, dale un gris fuerte de fondo para que contraste. */
.app-header .btn.btn-outline-light:hover,
.app-header .btn.btn-outline-light:focus,
.app-header .btn.btn-outline-light:active {
  color: #fff !important;
  background-color: #6c757d; /* gris medio */
  border-color: #6c757d;
}

/* Si en algún momento volvés a usar outline-dark, mismo criterio: */
.app-header .btn.btn-outline-dark:hover,
.app-header .btn.btn-outline-dark:focus,
.app-header .btn.btn-outline-dark:active {
  color: #fff !important;
  background-color: var(--bs-dark);
  border-color: var(--bs-dark);
}

/* =========================
   Footer fijo
========================= */
.app-footer{
  position:fixed; bottom:0; left:0; right:0; width:100%;
  background:var(--azul); color:#fff; text-align:center;
  font-size:.9rem; font-weight:500; padding:12px 16px; z-index:1050;
  box-shadow:0 -6px 18px rgba(13,110,253,.25);
}

/* =========================
   SUBAG MODE: ocultar features de Agencia
========================= */
body.subag-mode .ag-only { display: none !important; }

/* ===== FIX: login a pantalla completa aunque esté dentro de un .container ===== */
body.login-mode { padding-top: 0 !important; padding-bottom: 0 !important; }

body.login-mode main.container,
body.login-mode #root,
body.login-mode #root .container {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* el login manda */
body.login-mode #login-page{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  margin: 0;
  z-index: 2000;
}

.grid thead { display: table-header-group; }
.grid tr { page-break-inside: avoid; }

.pi-modal-spinner {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.78);
  border-radius: var(--bs-modal-border-radius);
}

.pi-modal-spinner.d-none {
  display: none !important;
}

.pi-modal-spinner-card {
  min-width: 260px;
  padding: 1.25rem 1.5rem;
  text-align: center;
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.18);
}

/* En pantallas de poca altura, la anulación puede crecer al preparar una
   jugada. El pie pasa al flujo para no tapar acciones ni provocar desbordes. */
@media (max-height: 700px) {
  html:has(#del-scan),
  body:has(#del-scan) {
    max-width: 100%;
    overflow-x: hidden;
  }

  body:has(#del-scan) {
    padding-bottom: 60px !important;
  }
}
/* Buscador global visible en el encabezado */
.header-billet-search{
  flex:0 1 300px; min-width:210px; height:40px;
  display:flex; align-items:center; gap:7px;
  padding:4px 5px 4px 11px; border-radius:10px;
  background:#fff; color:#425466; border:1px solid rgba(255,255,255,.55);
  box-shadow:0 2px 8px rgba(0,0,0,.16);
}
.header-billet-search input{
  min-width:0; flex:1; border:0; outline:0; background:transparent;
  color:#172b4d; font-size:14px;
}
.header-billet-search input::placeholder{color:#6c7888;opacity:1}
.header-billet-search button{
  border:0; border-radius:7px; padding:6px 10px;
  background:#0d6efd; color:#fff; font-size:12px; font-weight:700;
}
.header-billet-search:focus-within{box-shadow:0 0 0 3px rgba(255,255,255,.28)}

@media(max-width:768px){
  .app-header{
    display:grid;
    grid-template-columns:auto auto minmax(0,1fr) auto;
    grid-template-areas:
      "logo bell user menu"
      "search search search search";
    align-items:center;
    gap:7px 9px;
    padding:8px 12px;
  }
  .app-header .inner{grid-area:logo;flex:none;min-width:0}
  .app-header .logo{width:150px;height:48px;border-radius:8px}
  #notificaciones-admin{grid-area:bell;margin:0!important;justify-self:center}
  .usuario-sesion{
    grid-area:user;
    min-width:0;
    max-width:100%!important;
    padding:7px 8px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    justify-self:end;
  }
  .hamburguesa-container{grid-area:menu;justify-self:end}
  #hamburguesa-btn{padding:8px 12px}
  .header-billet-search{grid-area:search;min-width:0;width:auto;max-width:100%;justify-self:stretch;height:38px}
  .header-billet-search button{padding:5px 12px}
  body{padding-top:120px}
  #modalBuscadorGlobal .modal-dialog{margin:.5rem;max-width:calc(100% - 1rem)}
  #modalBuscadorGlobal .modal-body{padding:.8rem}
  #modalBuscadorGlobal .card-header{align-items:flex-start!important;gap:.5rem}
  #modalBuscadorGlobal .card-header .badge{white-space:normal;text-align:right}
}

@media(max-width:576px){
  .app-header{
    grid-template-columns:auto auto minmax(72px,1fr) auto;
    gap:6px;
    padding:7px 8px;
  }
  .app-header .inner{display:flex}
  .app-header .logo{width:82px;height:42px;border-radius:7px}
  .usuario-sesion{font-size:12px;padding:6px;justify-self:stretch}
  #hamburguesa-btn{font-size:18px;padding:7px 10px}
  .header-billet-search{height:38px}
  .header-billet-search input{font-size:13px}
  .header-billet-search button{padding:5px 9px}
  body{padding-top:110px}
  #bg-form{display:grid;grid-template-columns:auto 1fr}
  #bg-form .input-group-text{border-radius:.375rem 0 0 .375rem}
  #bg-form #bg-numero{min-width:0;border-radius:0 .375rem .375rem 0}
  #bg-form #bg-buscar{grid-column:1/-1;margin-top:.5rem;border-radius:.375rem}
  #modalBuscadorGlobal .modal-header{padding:.8rem}
  #modalBuscadorGlobal .modal-title{font-size:1.05rem}
  #modalBuscadorGlobal .card-body{padding:.8rem}
  #menu-desplegable{
    position:fixed;
    top:104px;
    right:8px;
    left:auto!important;
    width:calc(100% - 16px)!important;
    max-width:310px;
    min-width:0;
    box-sizing:border-box!important;
  }
  #menu-desplegable.show{max-height:calc(100vh - 112px);overflow-y:auto;overscroll-behavior:contain}
}

/* Los procesos iniciados dentro de modales largos siempre deben verse en móvil. */
@media(max-width:768px){
  .pa-modal-spinner,
  .pi-modal-spinner,
  #modalReporteVentasAg .rv-overlay-spinner,
  #as-local-spinner{
    position:fixed!important;
    inset:0!important;
    z-index:20050!important;
    padding:16px;
    align-items:center!important;
    justify-content:center!important;
  }
  .pa-modal-spinner-card,
  .pi-modal-spinner-card,
  #modalReporteVentasAg .rv-overlay-card,
  #as-local-spinner > div{
    width:min(100%,340px);
    max-width:340px;
    margin:auto;
  }
  .network-spinner-global{
    left:10px!important;
    right:10px!important;
    bottom:10px!important;
    justify-content:center;
    text-align:center;
    border-radius:12px!important;
  }
}