/* ============================================================
   InteliBPO Visitantes — Panel admin (admin.html)
   Alinea el panel con el kiosco: Montserrat, azul oscuro de marca,
   navegación en una línea y jerarquía clara. Se carga al final.
   ============================================================ */
:root {
  --a-ink: #0f2742; --a-ink-2: #33475f; --a-muted: #586b82;
  --a-line: #dfe5ec; --a-ground: #f4f6f9; --a-blue: #2d5d9f; --a-blue-d: #24508a; --a-teal: #00767c;
}

body, button, input, select, textarea, .nav-btn, .btn-stripe-cta {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
body {
  background: var(--a-ground) !important;
  background-image: none !important;
  color: var(--a-ink) !important;
}

/* ——— Encabezado ——— */
header.main-header { height: 68px !important; padding: 0 28px !important; gap: 20px; box-shadow: none !important; border-bottom: 1px solid var(--a-line) !important; }
header.main-header::before { display: none !important; }
.system-nav { gap: 2px !important; flex: 1; margin: 0 !important; }
.nav-btn {
  white-space: nowrap; min-height: 44px; padding: 0 14px !important; border-radius: 10px !important;
  font-size: 0.85rem !important; font-weight: 600 !important; color: var(--a-muted) !important;
}
.nav-btn span { white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .nav-btn:not(.active):hover { background: #eef2f7 !important; color: var(--a-ink) !important; } }
.nav-btn.active { background: #eaeff6 !important; color: var(--a-blue-d) !important; border-color: transparent !important; box-shadow: none !important; }
.nav-btn.active svg { color: var(--a-blue); }

/* ——— Título de página ——— */
.stripe-title h1 { font-size: 1.9rem !important; font-weight: 800 !important; letter-spacing: -0.03em !important; color: var(--a-ink) !important; }
.stripe-title p { font-size: 0.95rem !important; color: var(--a-muted) !important; letter-spacing: 0 !important; }
.stripe-hero { border-bottom: 0 !important; }

/* ——— Métricas ——— */
.metric-card {
  border: 0 !important; border-radius: 18px !important; background: #fff !important;
  box-shadow: 0 0 0 1px var(--a-line) !important; padding: 22px 24px !important;
}
.metric-card h3 { font-size: 0.9rem !important; font-weight: 600 !important; color: var(--a-muted) !important; letter-spacing: 0 !important; }
.metric-value { font-size: 2.75rem !important; font-weight: 800 !important; letter-spacing: -0.04em !important; color: var(--a-ink) !important; font-variant-numeric: tabular-nums; }
.metric-icon { width: 40px !important; height: 40px !important; border-radius: 12px !important; }
.metric-subtext { color: var(--a-muted) !important; font-size: 0.8rem !important; }

/* ——— Tarjetas de sección y tablas ——— */
.glass-card { border: 0 !important; border-radius: 18px !important; box-shadow: 0 0 0 1px var(--a-line) !important; }
.section-title, .glass-card h3.section-title { font-weight: 700 !important; letter-spacing: -0.01em !important; color: var(--a-ink) !important; }
th { font-size: 0.72rem !important; letter-spacing: 0.06em !important; color: var(--a-muted) !important; font-weight: 700 !important; }
td { font-size: 0.9rem; }
@media (hover: hover) and (pointer: fine) { tr:hover td { background: #f7f9fb !important; } }

/* ——— Botones ——— */
.btn-stripe-cta { background: var(--a-blue) !important; border-radius: 12px !important; min-height: 48px; box-shadow: 0 6px 16px -6px rgba(45, 93, 159, 0.6) !important; }
@media (hover: hover) and (pointer: fine) { .btn-stripe-cta:hover { background: var(--a-blue-d) !important; } }
.btn-checkout-action, .btn-view-badge, .btn-edit-visit { min-height: 40px; border-radius: 10px !important; }

/* ——— Campos ——— */
.filter-input, .filter-bar input, .filter-bar select { min-height: 44px; border-radius: 10px !important; }
.modal-header h3 { letter-spacing: -0.01em; }

/* Botones del encabezado en una sola línea */
header.main-header button, header.main-header .btn-logout, header.main-header .user-badge { white-space: nowrap; }
header.main-header > button, header.main-header .header-actions button { min-height: 44px; padding: 0 14px; font-size: 0.82rem; }

/* ——— Encabezado: sin desborde horizontal en pantallas medianas ——— */
header.main-header { min-width: 0; }
.system-nav { min-width: 0; }
@media (max-width: 1600px) {
  .nav-btn { padding: 0 10px !important; gap: 6px !important; font-size: 0.8rem !important; }
  header.main-header { gap: 12px; padding: 0 20px !important; }
}
@media (max-width: 1500px) { .nav-btn > svg { display: none; } }
@media (max-width: 1180px) {
  header.main-header { height: auto !important; flex-wrap: wrap; padding: 10px 16px !important; row-gap: 8px; }
  .system-nav { order: 3; flex: 1 0 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav-btn > svg { display: inline-block; }
}
html, body { max-width: 100%; overflow-x: hidden; }

/* ——— Directorio: el botón eliminar vive en su fila (regla antigua lo ubicaba en la esquina) ——— */
#dir-hosts-table-body .host-delete-btn, table .host-delete-btn { position: static; top: auto; right: auto; }
#dir-hosts-table-body td:last-child, #dir-areas-table-body td:last-child, #dir-users-table-body td:last-child { white-space: nowrap; }
#dir-hosts-table-body td:last-child > * { vertical-align: middle; }
#dir-hosts-table-body td:last-child button { min-width: 36px; min-height: 36px; }
.host-delete-btn, .host-edit-btn, .btn-edit-host { transition: transform 140ms var(--ease-out), background-color 160ms ease; }
.host-delete-btn:active { transform: scale(0.95); }

/* Textos de métricas completos en celular (antes se cortaban con "…") */
.metric-subtext { white-space: normal !important; text-overflow: clip !important; overflow: visible !important; }

/* ============================================================
   PREVISUALIZACIÓN EN VIVO DEL KIOSCO — réplica reducida del diseño real
   Los colores llegan por variables que fija updateLivePreview() (app.js).
   ============================================================ */
.live-preview-stage { --pv-primary: #2d5d9f; --pv-secondary: #009ba2; --pv-bg: #f4f6f9; --pv-card: #ffffff; padding: 12px !important; }
.live-preview-kiosk.pv2 { padding: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; max-width: none !important; width: 100%; }
.pv2-card.live-pv-card { padding: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; margin: 0 !important; }

.pv2-screen {
  display: grid; grid-template-columns: 38% minmax(0, 1fr); min-height: 300px;
  border-radius: 14px; overflow: hidden; background: var(--pv-bg);
  box-shadow: 0 0 0 1px rgba(15, 39, 66, 0.10), 0 12px 28px -16px rgba(15, 39, 66, 0.45);
  font-family: 'Montserrat', sans-serif; color: #0f2742; text-align: left;
}
.pv2-rail {
  --pv-ink: color-mix(in srgb, var(--pv-primary) 28%, #0a1626);
  background: var(--pv-ink); color: #fff; padding: 14px 12px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-width: 0;
}
.pv2-logo { height: 20px; width: auto; max-width: 100%; object-fit: contain; object-position: left; filter: brightness(0) invert(1); display: block; }
.pv2-hero-text { margin-top: auto; }
.pv2-hero-text h3 { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 6px; color: #fff; overflow-wrap: anywhere; }
.pv2-hero-text p { font-size: 0.58rem; line-height: 1.45; color: #c3d0e0; margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pv2-clock { font-size: 0.5rem; color: #9fb2c8; line-height: 1.4; }

.pv2-steps { display: flex; flex-direction: column; gap: 9px; margin: auto 0; }
.pv2-step { display: flex; align-items: center; gap: 7px; }
.pv2-dot { width: 17px; height: 17px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 0.55rem; font-weight: 700; color: #7e93ab; box-shadow: inset 0 0 0 1.5px #2f4a68; }
.pv2-dot.is-on { background: #fff; color: #0f2742; box-shadow: none; }
.pv2-dot.is-done { background: color-mix(in srgb, var(--pv-secondary) 52%, #fff); color: transparent; box-shadow: none; position: relative; }
.pv2-dot.is-done::after { content: ''; position: absolute; width: 4px; height: 7px; border: solid #0f2742; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translate(-1px, -1px); }
.pv2-step-label { font-size: 0.58rem; font-weight: 600; color: #9fb2c8; }
.pv2-step-label.is-on { color: #fff; font-weight: 700; }
.pv2-help { font-size: 0.45rem; color: #7e93ab; line-height: 1.4; }

.pv2-main { padding: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pv2-center { justify-content: center; }
.pv2-h { font-size: 0.82rem; font-weight: 800; letter-spacing: -0.02em; color: #0f2742; }

.pv2-cta { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; background: #fff; color: #0f2742; box-shadow: 0 0 0 1px #dfe5ec; }
.pv2-cta.is-primary { background: var(--pv-primary); color: #fff; box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--pv-primary) 70%, transparent); }
.pv2-cta-ico { width: 26px; height: 26px; border-radius: 8px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--pv-secondary) 14%, #fff); color: color-mix(in srgb, var(--pv-secondary) 80%, #000); }
.pv2-cta.is-primary .pv2-cta-ico { background: rgba(255, 255, 255, 0.18); color: #fff; }
.pv2-cta-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pv2-cta-text b { font-size: 0.72rem; font-weight: 700; letter-spacing: -0.01em; }
.pv2-cta-text small { font-size: 0.5rem; opacity: 0.8; }
.pv2-privacy { margin: 4px 0 0; font-size: 0.45rem; line-height: 1.45; color: #586b82; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pv2-privacy strong { color: #0f2742; }

.pv2-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pv2-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pv2-field.is-wide { grid-column: span 2; }
.pv2-field span { font-size: 0.45rem; font-weight: 600; color: #33475f; }
.pv2-field i { display: block; height: 20px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px #c8d1dc; }
.pv2-custom { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: start; min-height: 0; }
.pv2-custom:empty { display: none; }

.pv2-media { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pv2-box { height: 84px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 0.5rem; font-weight: 600; color: #586b82; background: #fff; box-shadow: inset 0 0 0 1px #c8d1dc; }
.pv2-box.is-dark { background: color-mix(in srgb, var(--pv-primary) 28%, #0a1626); color: #9fb2c8; box-shadow: none; }

.pv2-nav { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; gap: 6px; }
.pv2-btn, .pv2-btn-sec { font-size: 0.55rem; font-weight: 700; padding: 6px 10px; border-radius: 8px; white-space: nowrap; }
.pv2-btn { background: var(--pv-primary); color: #fff; }
.pv2-btn.is-ok { background: color-mix(in srgb, var(--pv-secondary) 78%, #000); }
.pv2-btn-sec { background: #fff; color: #33475f; box-shadow: 0 0 0 1px #dfe5ec; }

/* Con el diseño de dos zonas ya no aplican el orden de bloques ni la posición de botones */
.builder-subtab-btn[data-builder-tab="layout"], .builder-subtab-btn[data-builder-tab="buttons"] { display: none !important; }

.pv2-card.live-pv-card { align-items: stretch !important; width: 100%; }
.pv2-custom .pv-block-element { padding: 4px !important; border-radius: 8px; }
.pv2-custom .pv-block-element > span { font-size: 0.5rem !important; }
.pv2-custom .pv-block-element > div:not(.pv-drag-indicator) { height: 18px !important; font-size: 0.5rem !important; padding: 0 6px !important; }
.pv2-custom .pv-block-element .pv-drag-indicator { display: none !important; }
.pv2-custom .pv-block-element span span[style*="Estándar"], .pv2-custom [style*="background:#e2e8f0"] { display: none; }

/* ============================================================
   NAVEGACIÓN: barra lateral (≥1025 px) y vistas Monitor / Historial
   ============================================================ */
.nav-group-label { display: none; }

/* Monitor e Historial son dos vistas de la misma pestaña */
body[data-dash="history"] #admin-view .dashboard-grid,
body[data-dash="history"] #dash-monitor-section,
body[data-dash="history"] #admin-view .stripe-hero-actions { display: none !important; }
body:not([data-dash="history"]) #dash-history-section { display: none !important; }
body[data-dash="history"] #dash-history-section { margin-top: 0 !important; }

@media all {

  body header.main-header {
    position: fixed !important; top: 0; left: 0; bottom: 0;
    width: 264px !important; height: 100vh !important; height: 100dvh !important;
    box-sizing: border-box;
    flex-direction: column !important; flex-wrap: nowrap !important;
    align-items: stretch !important; justify-content: flex-start !important;
    gap: 20px !important; padding: 24px 16px !important;
    background: #0f2742 !important; border: 0 !important; box-shadow: none !important;
    overflow-y: auto; z-index: 300 !important;
  }
  body header.main-header::before { display: none !important; }

  header.main-header .brand { padding: 0 8px; }
  header.main-header .brand img { height: 34px !important; width: auto; filter: brightness(0) invert(1); }

  header.main-header .system-nav {
    display: flex !important; flex-direction: column !important; flex: none !important;
    gap: 4px !important; width: 100%; margin: 0 !important; overflow: visible;
  }
  .nav-group-label {
    display: block; padding: 14px 12px 6px; font-size: 11px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; color: #8aa0b8;
  }
  .nav-group-label[data-group="operacion"] { order: 0; padding-top: 0; }
  .nav-btn[data-dash-section="monitor"] { order: 1; }
  .nav-btn[data-dash-section="history"] { order: 2; }
  .nav-group-label[data-group="gestion"] { order: 3; }
  .nav-btn[data-admin-tab="directory"] { order: 4; }
  .nav-btn[data-admin-tab="reports"] { order: 5; }
  .nav-group-label[data-group="sistema"] { order: 6; }
  .nav-btn[data-admin-tab="customization"] { order: 7; }
  .nav-btn[data-admin-tab="settings"] { order: 8; }

  header.main-header .nav-btn {
    width: 100%; min-height: 44px; justify-content: flex-start !important;
    padding: 0 12px !important; gap: 12px !important; border-radius: 10px !important;
    font-size: 14px !important; font-weight: 600 !important;
    color: #c3d0e0 !important; background: transparent !important; border: 0 !important;
  }
  header.main-header .nav-btn > svg { display: inline-block !important; flex: none; width: 20px; height: 20px; }
  header.main-header .nav-btn.active { background: #ffffff !important; color: #0f2742 !important; font-weight: 700 !important; }
  header.main-header .nav-btn.active svg { color: #2d5d9f; }
  @media (hover: hover) and (pointer: fine) {
    header.main-header .nav-btn:not(.active):hover { background: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; }
  }
  header.main-header .nav-btn:focus-visible { outline: 2px solid #7fd1d5; outline-offset: 2px; }

  /* Acciones de sesión al pie de la barra */
  header.main-header .header-actions {
    margin-top: auto; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; width: 100%;
  }
  header.main-header #btn-open-scanner {
    width: 100%; min-height: 44px; justify-content: flex-start !important; gap: 12px !important;
    padding: 0 12px !important; border-radius: 10px !important; font-size: 14px !important;
    background: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; border: 0 !important; box-shadow: none !important;
  }
  header.main-header .user-session-badge {
    width: 100%; box-sizing: border-box; padding: 12px 14px !important; border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.07) !important; border: 0 !important; color: #ffffff !important;
    font-size: 14px !important; font-weight: 700 !important;
  }
  header.main-header .user-session-badge, header.main-header .user-session-badge * { color: #ffffff; }
  header.main-header #btn-admin-logout {
    width: 100%; min-height: 44px; justify-content: flex-start !important; gap: 12px !important;
    padding: 0 12px !important; border-radius: 10px !important; font-size: 14px !important;
    background: transparent !important; color: #ffb4ab !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; box-shadow: none !important;
  }

}

/* Contenido: usa todo el ancho disponible junto a la barra (solo escritorio) */
@media (min-width: 1025px) {
  body { padding-left: 264px; }
  #app-container { max-width: none; }
}

/* (≤1024 px: la barra lateral pasa a ser un menú deslizable; ver bloque móvil al final) */

@media (min-width: 1025px) { header.main-header .system-nav { margin-top: 10px !important; } }

/* ============================================================
   INICIO DE SESIÓN: dos zonas (marca + formulario), como el kiosco
   ============================================================ */
#login-modal { background: #f4f6f9 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
#login-modal .login-hero { display: none; }
#login-modal .modal-container { box-shadow: none !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; max-width: 420px !important; }
#login-modal .modal-container::before { display: none !important; }
#login-modal .modal-header { background: transparent !important; border: 0 !important; padding: 0 0 8px !important; justify-content: flex-start !important; position: static !important; }
#login-modal .modal-header h3 { font-size: 2rem !important; font-weight: 800 !important; letter-spacing: -0.03em; color: #0f2742; text-align: left !important; }
#login-modal .modal-body { padding: 0 !important; align-items: stretch !important; overflow: visible !important; }
#login-modal .modal-body > img { display: none; }
#login-modal .modal-body > p { text-align: left !important; font-size: 1rem !important; color: #586b82 !important; margin-bottom: 1.5rem !important; }
#login-modal input { min-height: 56px; font-size: 1.05rem; }
#login-modal #btn-submit-login { min-height: 56px; font-size: 1.05rem; border-radius: 14px; }

@media (min-width: 901px) {
  #login-modal { padding: 48px 48px 48px 608px !important; align-items: center !important; }
  #login-modal .login-hero {
    display: flex; position: absolute; left: 0; top: 0; bottom: 0; width: 560px; box-sizing: border-box;
    flex-direction: column; justify-content: space-between; padding: 56px; color: #ffffff;
    background:
      radial-gradient(120% 60% at 100% 100%, rgba(127, 209, 213, 0.13) 0%, transparent 60%),
      radial-gradient(90% 50% at 0% 0%, rgba(45, 93, 159, 0.30) 0%, transparent 60%),
      #0f2742;
  }
  .login-hero-logo { height: 40px; width: auto; object-fit: contain; object-position: left; align-self: flex-start; filter: brightness(0) invert(1); }
  .login-hero-eyebrow { font-size: 14px; font-weight: 600; color: #7fd1d5; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; }
  .login-hero h2 { margin: 0; font-size: 3.1rem; line-height: 1.05; font-weight: 800; letter-spacing: -0.04em; }
  .login-hero p { margin: 20px 0 0; font-size: 1.1rem; line-height: 1.55; color: #c3d0e0; max-width: 400px; }
  .login-hero-foot { font-size: 13px; color: #8aa0b8; }
}
@media (max-width: 900px) {
  #login-modal { padding: 24px !important; align-items: center !important; }
  #login-modal .modal-container { margin: auto !important; }
}

/* ============================================================
   HISTORIAL: selector de estado y rango de fechas
   ============================================================ */
.history-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 1.25rem; }
.status-segment { display: inline-flex; flex-wrap: wrap; gap: 2px; background: #eaeff6; border-radius: 12px; padding: 4px; }
.status-seg-btn {
  min-height: 40px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600; color: #586b82; white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease, transform 140ms var(--ease-out);
}
.status-seg-btn:active { transform: scale(0.97); }
.status-seg-btn.is-on { background: #ffffff; color: #0f2742; font-weight: 700; box-shadow: 0 1px 3px rgba(15, 39, 66, 0.15); }
@media (hover: hover) and (pointer: fine) { .status-seg-btn:not(.is-on):hover { color: #0f2742; } }
.status-seg-btn:focus-visible { outline: 2px solid #2d5d9f; outline-offset: 2px; }

.date-range { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.date-range label { font-size: 13px; font-weight: 600; color: #586b82; text-transform: none; letter-spacing: 0; }
.date-range input[type="date"] {
  min-height: 44px; width: auto; max-width: 170px; padding: 0 12px; border-radius: 10px;
  font-family: inherit; font-size: 14px; color: #0f2742; background: #ffffff; border: 1px solid #c8d1dc;
}
.date-range input[type="date"]:focus { outline: none; border-color: #2d5d9f; box-shadow: 0 0 0 4px rgba(45, 93, 159, 0.14); }

.history-clear {
  min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700; color: #24508a;
}
.history-clear[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .history-clear:hover { background: #eaeff6; } }
@media (max-width: 640px) { .status-segment { width: 100%; } .status-seg-btn { flex: 1 1 auto; } }

/* Controles más compactos para que "Limpiar filtros" quepa en la misma fila */
.status-seg-btn { padding: 0 11px; }
.date-range { gap: 6px; }
.date-range input[type="date"] { max-width: 148px; padding: 0 8px; }
.history-filters { gap: 10px 12px; }
.history-clear { padding: 0 10px; }
#dash-history-section .section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ============================================================
   REVISIÓN COMPLETA (v14): coherencia entre módulos
   ============================================================ */

/* ——— Márgenes de página iguales en todos los módulos (con barra lateral) ——— */
@media (min-width: 1025px) {
  .view-panel { padding: 2.5rem 2.5rem 3rem !important; }
  #settings-view { max-width: none !important; margin: 0 !important; }
  #settings-view > * { max-width: 960px; }
}
#customization-view > div:first-child h2, #reports-view h2, #settings-view h2, #directory-view h2 { letter-spacing: -0.03em; }

/* ——— Monitor ——— */
.duration-pill { display: inline-block; padding: 4px 10px; border-radius: 99px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.duration-pill.is-ok { background: #e6f4f5; color: #00676c; }
.duration-pill.is-long { background: #fdf1dc; color: #7a4e00; }
.duration-pill.is-stale { background: #fdecea; color: #a8281f; }
.stale-flag { display: block; margin-top: 6px; font-size: 12px; font-weight: 700; color: #a8281f; }
.badge-counter { white-space: nowrap; }

#active-visits-table td:last-child > div { flex-wrap: nowrap !important; align-items: center; }
#active-visits-table .btn, #history-table .btn { white-space: nowrap; min-height: 40px; }
#history-table td:last-child > div { flex-wrap: nowrap !important; align-items: center; }
#history-table .btn-icon-edit, #active-visits-table .btn-edit-visit { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
#history-table td, #active-visits-table td { vertical-align: middle; }

.dash-anomaly {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 20px; padding: 14px 18px;
  background: #fdf1dc; color: #5c3a00; border-radius: 14px; box-shadow: inset 0 0 0 1px #f0d49a; font-size: 14px; font-weight: 600;
}
.dash-anomaly[hidden] { display: none; }
.dash-anomaly svg { flex: none; color: #8a5a00; }
.dash-anomaly span { flex: 1 1 260px; }
.dash-anomaly-link { color: #24508a; font-weight: 700; text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 8px; }
@media (hover: hover) and (pointer: fine) { .dash-anomaly-link:hover { background: rgba(255, 255, 255, 0.6); } }

/* ——— Reportes ——— */
#anomaly-banner { border: 0 !important; border-radius: 14px !important; background: #fdf1dc !important; box-shadow: inset 0 0 0 1px #f0d49a; }
#anomaly-banner strong, #anomaly-banner span { color: #5c3a00 !important; }
#anomaly-banner svg { stroke: #8a5a00 !important; }

#reports-view > div[style*="justify-content:space-between"] { flex-wrap: wrap; align-items: flex-end !important; }
#reports-view .filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#reports-view .filter-bar select, #reports-view .filter-bar .ui-select-trigger { min-width: 170px; max-width: none !important; }
#reports-view .filter-bar input[type="date"] { min-height: 44px; width: 160px; max-width: none; padding: 0 12px !important; border-radius: 10px; }
#btn-export-csv, #btn-export-pdf { white-space: nowrap; min-height: 44px; }
#btn-export-pdf { background: #2d5d9f !important; border-color: #2d5d9f !important; box-shadow: 0 6px 16px -6px rgba(45, 93, 159, 0.6) !important; }
@media (hover: hover) and (pointer: fine) { #btn-export-pdf:hover { background: #24508a !important; } }

#reports-view .metric-card { position: relative; }
#reports-view .metric-icon { position: absolute; top: 20px; right: 22px; margin: 0 !important; }
#reports-view .metric-info h3 { text-transform: none !important; letter-spacing: 0 !important; font-size: 0.9rem !important; font-weight: 600 !important; color: #586b82 !important; margin-bottom: 6px; padding-right: 48px; }
#reports-view .metric-value { font-size: 2.5rem !important; }
#rep-metric-area, #rep-metric-company { font-size: clamp(1.25rem, 1.7vw, 1.8rem) !important; line-height: 1.2; overflow-wrap: anywhere; margin: 8px 0 4px; }
#reports-view canvas { max-width: 100%; }

/* ——— Directorio ——— */
#dir-search-host { min-width: 280px; }
#dir-panel-hosts .filter-bar, #dir-panel-hosts div[style*="max-width:500px"] { flex-wrap: wrap; }
#areas-list-container { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
#areas-list-container .host-item-card {
  background: #ffffff !important; border: 0 !important; box-shadow: inset 0 0 0 1px #dfe5ec; border-radius: 14px !important;
  padding: 10px 12px 10px 16px !important; min-height: 56px; text-align: left;
}
#areas-list-container .host-item-card > div:first-child { font-size: 0.95rem !important; font-weight: 700 !important; }
#areas-list-container .area-edit-btn, #areas-list-container .area-delete-btn { width: 40px; height: 40px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px !important; }
#areas-list-container .host-item-card > div:last-child { gap: 6px !important; }
#form-add-area { align-items: center; gap: 10px; }
#form-add-area input { min-height: 48px; }
#form-add-area .btn { min-height: 48px; white-space: nowrap; }

/* ——— Diseño y Kiosco ——— */
.form-group:has(#cfg-logo-url) { display: none; }   /* el logotipo vertical ya no se usa en el kiosco */
#customization-view textarea { font-family: inherit; font-size: 0.95rem; line-height: 1.5; min-height: 112px; padding: 12px 14px; border-radius: 12px; }
#customization-view input[type="text"], #customization-view input:not([type]) { font-size: 0.95rem; }

/* ——— Correos y SMTP: ancho y campos como el resto ——— */
#settings-view textarea, #settings-view input { font-size: 0.95rem; }
#settings-view .glass-card { margin-bottom: 1.25rem; }
#btn-test-smtp, #btn-save-smtp { white-space: nowrap; min-height: 48px; }
#cfg-test-email { min-width: 220px; }

/* ——— Utilidades de accesibilidad ——— */
.btn:focus-visible, .nav-btn:focus-visible, .status-seg-btn:focus-visible, a:focus-visible, input:focus-visible { outline-offset: 2px; }

/* ——— Ajustes de la revisión (v16) ——— */
body[data-dash="history"] #dash-anomaly { display: none !important; }
#active-visits-table td:first-child { min-width: 230px; }

/* Reportes: título + exportar en una fila; filtros debajo en una sola fila */
#reports-view > div[style*="justify-content:space-between"] { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 16px 12px !important; }
#reports-view > div[style*="justify-content:space-between"] > div:first-child { order: 1; flex: 1 1 320px; }
#reports-view > div[style*="justify-content:space-between"] > div:last-child { display: contents !important; }
#btn-export-csv { order: 2; }
#btn-export-pdf { order: 2; }
#reports-view .filter-bar { order: 3; flex: 1 1 100%; margin: 0 !important; }
#reports-view .filter-bar > span { align-self: center; }

#reports-view .metric-card { min-height: 148px; padding: 20px 22px !important; }
#reports-view .metric-icon { width: 36px !important; height: 36px !important; top: 18px; right: 20px; }
#reports-view .metric-icon svg { width: 18px; height: 18px; }
#rep-metric-area, #rep-metric-company { font-size: clamp(1.1rem, 1.35vw, 1.45rem) !important; margin: 12px 0 4px; }

/* ——— Correos y SMTP: las filas del formulario vuelven a ir en columnas en pantallas anchas ——— */
@media (min-width: 769px) {
  #settings-view form div[style*="grid-template-columns"] { display: grid !important; flex-direction: initial !important; }
  #settings-view form div[style*="justify-content:space-between"][style*="border-top"] { flex-direction: row !important; align-items: center !important; }
  #settings-view form div[style*="display:flex; gap:10px; align-items:center"] { flex-direction: row !important; width: auto !important; }
  #cfg-test-email { width: 260px !important; max-width: 100% !important; }
  #btn-test-smtp, #btn-save-smtp { width: auto !important; }
}

/* ——— KPI de texto en Reportes (más especificidad que la regla general) ——— */
#reports-view #rep-metric-area, #reports-view #rep-metric-company { font-size: clamp(1.1rem, 1.35vw, 1.45rem) !important; margin: 12px 0 4px; overflow-wrap: anywhere; }

/* ——— Departamentos: nombre a la izquierda y acciones a la derecha ——— */
#areas-list-container .host-item-card { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; text-align: left !important; }
#areas-list-container .host-item-card > div:first-child { text-align: left; }

/* Los campos del SMTP ocupan una celda (la regla genérica .form-group { span 6 } es del kiosco) */
#settings-view form .form-group { grid-column: auto !important; min-width: 0; }

/* ============================================================
   MÓVIL Y TABLET (≤1024 px): barra superior + menú deslizable
   ============================================================ */
.mobile-appbar, .mobile-scrim { display: none; }

@media (max-width: 1024px) {
  body { padding-left: 0 !important; padding-top: calc(56px + env(safe-area-inset-top)); }
  body.nav-open { overflow: hidden; }

  /* Barra superior fija */
  .mobile-appbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 250; box-sizing: border-box;
    display: flex; align-items: center; gap: 4px;
    height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0;
    background: #0f2742; color: #ffffff;
  }
  .mobile-appbar-title { flex: 1; min-width: 0; padding: 0 6px; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-appbar-btn {
    width: 48px; height: 48px; flex: none; border: 0; border-radius: 12px; background: transparent; color: #ffffff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; touch-action: manipulation;
    transition: background-color 160ms ease, transform 140ms var(--ease-out);
  }
  .mobile-appbar-btn:active { transform: scale(0.94); background: rgba(255, 255, 255, 0.12); }
  .mobile-appbar-btn:focus-visible { outline: 2px solid #7fd1d5; outline-offset: -2px; }

  /* La barra lateral pasa a ser un panel que entra desde la izquierda */
  body header.main-header {
    width: min(86vw, 320px) !important; max-width: 320px;
    transform: translateX(-100%); visibility: hidden;
    transition: transform 280ms var(--ease-drawer), visibility 0s linear 280ms;
    padding-top: calc(24px + env(safe-area-inset-top)) !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
    z-index: 400 !important;
  }
  body.nav-open header.main-header {
    transform: none; visibility: visible; transition-delay: 0s;
    box-shadow: 24px 0 48px -12px rgba(8, 20, 38, 0.5) !important;
  }
  .mobile-scrim {
    display: block; position: fixed; inset: 0; z-index: 350; background: rgba(15, 39, 66, 0.5);
    opacity: 0; transition: opacity 220ms ease;
  }
  .mobile-scrim[hidden] { display: none; }
  body.nav-open .mobile-scrim { opacity: 1; }

  /* Contenido */
  .view-panel { padding: 1rem 1rem 6.5rem !important; }
  #app-container { max-width: none; }
  #admin-view .stripe-hero { margin-bottom: 1rem !important; }
  #admin-view .stripe-title h1, .view-panel h2 { font-size: 1.5rem !important; }
  #admin-view .stripe-title p, #directory-view > div > div > p, #reports-view > div > div > p, #customization-view > div > div > p, #settings-view > div > p { display: none; }
  #admin-view .stripe-hero { align-items: flex-start; }

  /* Botón flotante "Nuevo pre-registro" */
  #admin-view .stripe-hero-actions { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 200; margin: 0; }
  #btn-open-preregister {
    width: 60px; height: 60px; min-height: 60px; padding: 0 !important; border-radius: 50% !important; justify-content: center;
    box-shadow: 0 12px 28px -8px rgba(45, 93, 159, 0.7) !important;
  }
  #btn-open-preregister span { display: none; }
  #btn-open-preregister svg { width: 26px; height: 26px; }

  /* Aviso de anomalías compacto */
  .dash-anomaly { padding: 12px 14px; font-size: 13px; margin-bottom: 14px; }
  #anomaly-banner { padding: 12px 14px !important; }
  #anomaly-banner > div { flex-wrap: wrap; gap: 6px 10px !important; align-items: flex-start !important; }
  #anomaly-banner svg { width: 20px; height: 20px; flex: none; }
  #anomaly-banner strong, #anomaly-banner span { font-size: 13px; }

  /* Métricas: dos columnas compactas */
  #admin-view .dashboard-grid, #reports-view .dashboard-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin-bottom: 14px !important; }
  .metric-card { padding: 14px !important; border-radius: 16px !important; min-height: 0 !important; }
  .metric-card h3 { font-size: 0.78rem !important; line-height: 1.25; padding-right: 0 !important; }
  .metric-card .metric-icon { width: 32px !important; height: 32px !important; border-radius: 10px !important; }
  .metric-card .metric-icon svg { width: 16px; height: 16px; }
  .metric-value { font-size: 1.9rem !important; line-height: 1.1; margin: 6px 0 2px !important; }
  .metric-subtext { font-size: 0.7rem !important; }
  #reports-view .metric-icon { top: 12px; right: 12px; }
  #reports-view #rep-metric-area, #reports-view #rep-metric-company { font-size: 1.05rem !important; margin: 8px 0 2px; }

  /* Tarjetas de sección */
  .glass-card { padding: 16px !important; border-radius: 18px !important; }
  .section-title-row { margin-bottom: 12px; }
  .section-title { font-size: 1rem !important; }
  .filter-bar { gap: 10px !important; }
  .filter-bar .search-box-wrapper { flex: 1 1 100%; max-width: none; }
  .filter-bar select, .filter-bar .ui-select-trigger { width: 100% !important; max-width: none !important; }

  /* Historial: estado en una fila deslizable, fechas en dos columnas */
  .history-filters { flex-direction: column; align-items: stretch; gap: 10px; }
  .status-segment { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .status-segment::-webkit-scrollbar { display: none; }
  .status-seg-btn { flex: 1 0 auto; }
  .date-range { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; width: 100%; }
  .date-range input[type="date"] { max-width: none; width: 100%; padding: 0 8px; }

  /* Reportes: filtros apilados y exportar en dos columnas */
  #reports-view > div[style*="justify-content:space-between"] { gap: 12px !important; }
  #reports-view > div[style*="justify-content:space-between"] > div:first-child { flex: 1 1 100%; }
  #btn-export-csv, #btn-export-pdf { order: 3; flex: 1 1 calc(50% - 6px); justify-content: center; }
  #reports-view .filter-bar { order: 2; display: grid; grid-template-columns: 1fr 1fr; }
  #reports-view .filter-bar select, #reports-view .filter-bar .ui-select-trigger { min-width: 0; }
  #reports-view .filter-bar input[type="date"] { width: 100%; }
  #reports-view .filter-bar > span { display: none; }
  #reports-view canvas { max-height: 260px; }
  #reports-view .glass-card > div[style*="height"] { height: 260px !important; }

  /* Directorio y demás subpestañas */
  #directory-view .system-nav, .builder-subtabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  #dir-search-host { min-width: 0; width: 100%; }
  #areas-list-container { grid-template-columns: 1fr; }

  /* Diseño y Kiosco y SMTP en una columna */
  #customization-view > div[style*="grid"], .customization-layout { grid-template-columns: 1fr !important; }
  #settings-view > * { max-width: none; }
}

/* ——— Tablas como tarjetas en celular y tablet vertical (≤900 px) ——— */
@media (max-width: 900px) {
  .table-wrapper { overflow: visible !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  .table-wrapper table { display: block; min-width: 0 !important; width: 100%; border: 0; }
  .table-wrapper thead { display: none; }
  .table-wrapper tbody { display: block; }
  .table-wrapper tbody tr {
    display: flex; flex-direction: column; gap: 2px; background: #ffffff; margin: 0 0 12px; padding: 14px 16px;
    border: 0 !important; border-radius: 16px; box-shadow: 0 0 0 1px #dfe5ec;
  }
  .table-wrapper tbody td {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; width: 100%; box-sizing: border-box;
    padding: 6px 0 !important; border: 0 !important; background: transparent !important; text-align: right; min-width: 0 !important; font-size: 0.9rem;
  }
  .table-wrapper tbody td::before {
    content: attr(data-label); flex: none; max-width: 42%; text-align: left;
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #586b82; padding-top: 3px;
  }
  .table-wrapper tbody td:first-child { display: block; text-align: left; padding-bottom: 10px !important; margin-bottom: 4px; border-bottom: 1px solid #eef1f5 !important; font-size: 1rem; }
  .table-wrapper tbody td:first-child::before { display: none; }
  .table-wrapper tbody td[colspan] { display: block; text-align: center; color: #586b82; }
  .table-wrapper tbody td[colspan]::before { display: none; }
  .table-wrapper tbody td:last-child { padding-top: 12px !important; margin-top: 6px; border-top: 1px solid #eef1f5 !important; }
  .table-wrapper tbody td:last-child::before { display: none; }
  .table-wrapper tbody td:last-child > div { width: 100%; flex-wrap: wrap !important; justify-content: stretch; gap: 8px !important; }
  .table-wrapper tbody td:last-child .btn { flex: 1 1 auto; min-height: 44px !important; justify-content: center; }
  .table-wrapper .btn-icon-edit, .table-wrapper .btn-edit-visit { min-width: 44px; min-height: 44px; }
  #active-visits-table td:first-child { min-width: 0; }
  .avatar-cell { gap: 12px; align-items: center; }
  .stale-flag { display: inline-block; margin: 0 0 0 8px; }
}

/* ——— Ajustes móviles (v21) ——— */
@media (max-width: 1024px) {
  /* La animación de entrada de la vista creaba un contexto que rompía el botón flotante */
  .view-panel, #admin-view { animation: none !important; transform: none !important; }

  /* El título de cada módulo ya está en la barra superior */
  #admin-view .stripe-title, #directory-view h2, #reports-view h2, #customization-view h2, #settings-view h2 { display: none !important; }
  #admin-view .stripe-hero { margin: 0 !important; padding: 0 !important; min-height: 0; border: 0; }
  #customization-view > div:first-child, #directory-view > div:first-child, #reports-view > div[style*="justify-content:space-between"] { margin-bottom: 12px !important; }
  #customization-view > div:first-child { flex-wrap: wrap; gap: 10px; }
  #customization-view > div:first-child > div:last-child { display: flex; width: 100%; gap: 10px; }
  #customization-view > div:first-child .btn { flex: 1; justify-content: center; min-height: 48px; }

  .metric-card-top-row { gap: 8px; align-items: flex-start; }
  .metric-card-top-row h3 { flex: 1; min-width: 0; margin: 0; }
}

@media (max-width: 900px) {
  /* Etiqueta a la izquierda, valor a la derecha, sin que el contenido se aplaste */
  .table-wrapper tbody td { display: grid; grid-template-columns: minmax(86px, 36%) minmax(0, 1fr); column-gap: 12px; align-items: start; text-align: left; }
  .table-wrapper tbody td::before { grid-column: 1; grid-row: 1; max-width: none; }
  .table-wrapper tbody td > * { grid-column: 2; justify-self: start; min-width: 0; }
  .table-wrapper tbody td:first-child { display: block; }
  .table-wrapper tbody td:last-child { display: block; }
  .table-wrapper tbody td[colspan] { display: block; }
  .table-wrapper tbody td .status-badge, .table-wrapper tbody td .duration-pill { justify-self: start; }
  .table-wrapper tbody td .stale-flag { display: block; margin: 4px 0 0; }
}

/* ——— Menú deslizable: orden y contenido (v22) ——— */
@media (max-width: 1024px) {
  body header.main-header { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 20px !important; overflow-y: auto; }
  body header.main-header .brand { order: 0; }
  body header.main-header .system-nav { order: 1; display: flex !important; flex-direction: column !important; width: 100%; overflow: visible !important; flex: none !important; margin: 0 !important; }
  body header.main-header .header-actions { order: 2; margin-top: auto !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100%; gap: 10px !important; }
  body header.main-header .nav-btn { width: 100% !important; min-height: 48px !important; justify-content: flex-start !important; flex: none !important; }
  body header.main-header .nav-btn > svg { display: inline-block !important; }
  .nav-group-label { display: block !important; }
  header.main-header #btn-open-scanner { min-height: 48px; }
  header.main-header #btn-admin-logout { min-height: 48px; width: 100% !important; justify-content: flex-start !important; }
  header.main-header #btn-admin-logout[style*="inline-flex"], header.main-header #btn-admin-logout[style*="flex"] { display: flex !important; }
  header.main-header #btn-admin-logout span { display: inline !important; }
  header.main-header .user-session-badge[style*="inline-flex"], header.main-header .user-session-badge[style*="flex"] { display: flex !important; }
  header.main-header .user-session-badge { min-height: 48px; align-items: center; }

  /* Botón flotante: círculo perfecto */
  #admin-view .stripe-hero-actions { width: auto !important; }
  #btn-open-preregister { width: 60px !important; min-width: 60px !important; height: 60px !important; flex: none !important; aspect-ratio: 1 / 1; gap: 0 !important; }
}
@media (max-width: 1024px) {
  body header.main-header .brand { order: 0 !important; }
  body header.main-header .system-nav { order: 1 !important; }
  body header.main-header .header-actions { order: 2 !important; }
}

/* ——— Ajustes móviles (v24) ——— */
@media (max-width: 1024px) {
  /* Historial: fechas en dos columnas (etiqueta arriba, campo abajo) */
  .date-range { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 10px; width: 100%; }
  .date-range label[for="history-date-from"] { grid-area: 1 / 1; }
  .date-range label[for="history-date-to"] { grid-area: 1 / 2; }
  .date-range #history-date-from { grid-area: 2 / 1; }
  .date-range #history-date-to { grid-area: 2 / 2; }
  .date-range input[type="date"] { min-width: 0; width: 100% !important; }

  /* Reportes: filtros en dos columnas y exportar bajo ellos */
  #reports-view .filter-bar { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; flex-direction: initial !important; width: 100% !important; }
  #reports-view .filter-bar > *:not(.ui-select-native) { min-width: 0; width: 100% !important; max-width: none !important; }
  #reports-view .filter-bar .ui-select-trigger { padding: 0 10px; font-size: 0.85rem; }
  #reports-view .filter-bar input[type="date"] { padding: 0 8px !important; font-size: 0.85rem; }
  #reports-view .metric-info h3 { padding-right: 40px !important; }
  #reports-view .metric-value, .metric-value { white-space: nowrap; }
  #reports-view .metric-value { font-size: 1.6rem !important; }

  /* Directorio */
  #dir-filter-host-area, #dir-panel-hosts .ui-select-trigger { width: 100% !important; max-width: none !important; }
  #directory-view .system-nav { padding: 4px !important; margin: 0 0 12px !important; gap: 6px; }
  #directory-view .system-nav .nav-btn { flex: none; }
}

/* ——— Ajustes móviles (v25) ——— */
@media (max-width: 1024px) {
  .customization-split-layout { display: flex !important; flex-direction: column !important; gap: 16px !important; width: 100%; min-width: 0; }
  .customization-split-layout > * { min-width: 0 !important; width: 100% !important; max-width: none !important; position: static !important; }
  .customization-controls-pane { min-width: 0; }
  .builder-subtabs { display: flex; overflow-x: auto; flex-wrap: nowrap; }
  .builder-subtab-btn { flex: none; white-space: nowrap; }
  #settings-view > div:first-child > div > p, #customization-view > div:first-child > div:first-child > p, #directory-view > div:first-child > div:first-child > p { display: none !important; }
  #settings-view > div:first-child { display: none; }
  #customization-view > div:first-child > div:first-child { display: none; }
  #customization-view > div:first-child > div:last-child { width: 100%; }
  #customization-view .form-group, #customization-view input, #customization-view textarea { min-width: 0; max-width: 100%; }
  #customization-view .glass-card > div[style*="display:flex"][style*="gap"] { flex-wrap: wrap; }
}

@media (max-width: 700px) {
  #builder-tab-identity div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  #btn-reset-customization { white-space: nowrap; padding: 0.6rem 0.8rem !important; }
}

/* El select nativo oculto nunca debe ocupar espacio (las reglas de .filter-bar lo agrandaban) */
.filter-bar select.ui-select-native, #reports-view .filter-bar > select.ui-select-native { width: 1px !important; height: 1px !important; min-width: 0 !important; max-width: 1px !important; }