/* ============ DROPZONE ICON + LOADING/OK STATES ============ */
.dz .ic { font-size: 0; display: block; margin: 0 auto 14px; position: relative; width: 54px; height: 54px; }
.dz .ic svg { display: block; }
.dz .ic img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Loading: white fill sweeps up over the glass icon */
.dz.loading .ic::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,.30);
  border-radius: 0 0 12px 12px;
  pointer-events: none;
  animation: xlsFill 1.6s ease-in-out infinite;
}
@keyframes xlsFill {
  0%   { height: 0%;   opacity: .9; border-radius: 0 0 12px 12px; }
  55%  { height: 100%; opacity: .5; border-radius: 12px; }
  100% { height: 100%; opacity: 0;  border-radius: 12px; }
}
.dz.loading {
  border-color: rgba(1,2,178,.55) !important;
  border-style: solid !important;
  background: rgba(225,230,255,.70) !important;
  backdrop-filter: blur(18px) !important;
}
.dz.loading .t { color: var(--blue); font-weight: 700; }

/* Ok: icon pops on success */
@keyframes ic-pop {
  from { transform: scale(.82); opacity: .6; }
  to   { transform: scale(1);   opacity: 1; }
}
.dz.ok .ic { animation: ic-pop .38s cubic-bezier(.18,1.05,.5,1.1); }

/* ============================================================
 *  BOOT LOADER — evita el flash de login al abrir pestaña nueva
 * ============================================================ */
/* ── BOOT LOADER SOLTEK (verificación de sesión / arranque de plataforma) ── */
#boot-loader {
  position: fixed; inset: 0; z-index: 10000;
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 30px;
  background: #161616; overflow: hidden;
}
body.auth-booting #boot-loader { display: flex; }
/* Orbs de luz para igualar la estética de la landing */
.boot-orb { position: absolute; border-radius: 50%; filter: blur(110px); pointer-events: none; }
.boot-orb-a { width: 460px; height: 460px; background: rgba(244,123,32,.20);
              top: -120px; left: -90px; animation: pf-orb-float 10s ease-in-out infinite alternate; }
.boot-orb-b { width: 340px; height: 340px; background: rgba(244,123,32,.12);
              bottom: -70px; right: -50px; animation: pf-orb-float 13s ease-in-out infinite alternate-reverse; }
.boot-sk { position: relative; z-index: 1; display: flex; flex-direction: column;
           align-items: center; gap: 10px; animation: pf-fade .4s ease both; }
.boot-sk-lbl { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
               color: rgba(255,255,255,.35); }
.boot-spinner { position: relative; z-index: 1;
                width: 30px; height: 30px;
                border: 3px solid rgba(255,255,255,.12); border-top-color: #f47b20;
                border-radius: 50%; animation: boot-spin .65s linear infinite; }
@keyframes boot-spin { to { transform: rotate(360deg); } }

/* ── LOADER CEMEX (transición al entrar a la herramienta) ── */
#cemex-loader {
  position: fixed; inset: 0; z-index: 9500;
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: #f0f1f5;
  animation: pf-fade .25s ease both;
}
body.cemex-loading #cemex-loader { display: flex; }
.cmx-spinner { width: 28px; height: 28px;
               border: 3px solid var(--g200); border-top-color: var(--blue);
               border-radius: 50%; animation: boot-spin .65s linear infinite; }
.boot-badge {
  background: #fff; border-radius: 16px;
  padding: 16px 28px 14px;
  box-shadow: 0 2px 20px rgba(0,0,0,.09), 0 0 0 1px var(--g200);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.boot-badge img    { height: 36px; width: auto; display: block; }
.boot-brand-lbl    { font-size: 7.5px; font-weight: 900; letter-spacing: 3.2px;
                     color: var(--blue); text-transform: uppercase; line-height: 1; }

/* AUTH STATE RULES */
/* Fase 1 — booting: solo el loader, todo lo demás oculto */
body.auth-booting > *:not(#boot-loader) { display: none !important; }
/* Fase 2 — sin sesión: solo el overlay de login */
body.auth-locked:not(.auth-booting) { overflow: hidden; }
body.auth-locked:not(.auth-booting) > *:not(#login-overlay):not(#pwd-rotation-modal) {
  display: none !important;
}

/* ============================================================
 *  LOGIN OVERLAY & USER BADGE
 * ============================================================ */
.login-ov {
  position: fixed; inset: 0; z-index: 9999;
  background-color: #edeef3;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%,  rgba(1,2,178,.09) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(250,34,49,.06) 0%, transparent 60%),
    radial-gradient(circle, var(--g300) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 22px 22px;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: lo-fade .3s ease;
}
@keyframes lo-fade { from { opacity: 0; } to { opacity: 1; } }

.login-card {
  position: relative;
  background: #fff; border-radius: 16px;
  padding: 44px 42px 34px;
  width: 100%; max-width: 460px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(1,2,178,.10), 0 24px 60px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.04);
  overflow: hidden;
  animation: lo-pop .35s cubic-bezier(.18,1.05,.5,1.1);
}
@keyframes lo-pop {
  from { transform: translateY(14px) scale(.985); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Línea roja CEMEX arriba de la card */
.login-accent {
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--red) 0%, #ff6b35 100%);
}

.login-brand { text-align: center; margin-bottom: 28px; }
.login-logo-box {
  display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
  background: #fff; padding: 12px 20px 10px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 0 0 1px var(--g200);
  margin-bottom: 20px;
}
.login-cemex-logo {
  height: 36px; width: auto; display: block;
}
.login-logo-brand {
  font-size: 8.5px; font-weight: 900; letter-spacing: 2.6px;
  color: var(--blue); text-transform: uppercase; line-height: 1;
}
.login-brand h1 {
  margin: 0 0 6px; font-size: 24px; font-weight: 800;
  letter-spacing: .1px; color: var(--g900);
}
.login-brand p {
  margin: 0; font-size: 13px; color: var(--g500); font-weight: 500;
  letter-spacing: .3px;
}

.login-foot {
  margin-top: 20px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 10.5px; color: var(--g500);
  letter-spacing: .3px; font-weight: 500;
  text-transform: uppercase;
}
.lf-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red); display: inline-block;
  box-shadow: 0 0 0 3px rgba(250,34,49,.15);
  animation: lf-pulse 2s ease-in-out infinite;
}
@keyframes lf-pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(250,34,49,.15); }
  50%     { box-shadow: 0 0 0 6px rgba(250,34,49,.05); }
}

#login-form, #pwd-rotation-form { display: flex; flex-direction: column; gap: 16px; }
#login-form label, #pwd-rotation-form label { display: flex; flex-direction: column; gap: 6px; }
#login-form label span, #pwd-rotation-form label span {
  font-size: 12px; font-weight: 600; color: var(--g700);
  letter-spacing: .4px; text-transform: uppercase;
}
#login-form input, #pwd-rotation-form input {
  padding: 13px 15px; border: 1px solid var(--g200); border-radius: 9px;
  font: inherit; font-size: 14.5px; outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
  background: var(--g50);
  color: var(--g900);
}
#login-form input::placeholder, #pwd-rotation-form input::placeholder {
  color: var(--g400); font-weight: 400;
}
#login-form input:hover, #pwd-rotation-form input:hover {
  border-color: var(--g300); background: #fff;
}
#login-form input:focus, #pwd-rotation-form input:focus {
  border-color: var(--blue); background: #fff;
  box-shadow: 0 0 0 3px rgba(1,2,178,.10);
}
/* Botón principal de sesión: CEMEX red (acción de acceso = identidad de marca) */
#login-btn {
  margin-top: 10px; padding: 14px 18px;
  background: var(--red);
  background-image: linear-gradient(180deg, #fc3343 0%, var(--red) 50%, var(--red-dark) 100%);
  color: #fff;
  border: none; border-radius: 9px;
  font: inherit; font-size: 15px; font-weight: 700;
  letter-spacing: .4px;
  cursor: pointer;
  transition: filter .15s, transform .08s, box-shadow .15s;
  box-shadow: 0 2px 8px rgba(250,34,49,.32), inset 0 1px 0 rgba(255,255,255,.18);
}
#login-btn:hover:not(:disabled) {
  filter: brightness(1.06);
  box-shadow: 0 5px 16px rgba(250,34,49,.42), inset 0 1px 0 rgba(255,255,255,.22);
}
/* Botón de cambio de contraseña: sigue en azul */
#pwd-rotation-btn {
  margin-top: 10px; padding: 13px 18px;
  background: var(--blue);
  background-image: linear-gradient(180deg, #0a0dcf 0%, var(--blue) 50%, var(--blue-dark) 100%);
  color: #fff;
  border: none; border-radius: 9px;
  font: inherit; font-size: 14.5px; font-weight: 700;
  letter-spacing: .3px;
  cursor: pointer;
  transition: filter .15s, transform .08s, box-shadow .15s;
  box-shadow: 0 2px 6px rgba(1,2,178,.25), inset 0 1px 0 rgba(255,255,255,.15);
}
#login-btn:hover:not(:disabled), #pwd-rotation-btn:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: 0 4px 12px rgba(1,2,178,.32), inset 0 1px 0 rgba(255,255,255,.18);
}
#login-btn:active, #pwd-rotation-btn:active { transform: translateY(1px); filter: brightness(.95); }
#login-btn:disabled, #pwd-rotation-btn:disabled {
  opacity: .55; cursor: wait; filter: grayscale(.3);
}

.login-err {
  background: #fef2f2; color: var(--red-dark);
  border: 1px solid #fecaca; border-radius: 7px;
  padding: 8px 11px; font-size: 12.5px; font-weight: 500;
  line-height: 1.4;
}

/* ── MODO LOCAL (sin Supabase, solo localhost) ── */
.local-mode-wrap { margin-top: 4px; }
.local-mode-sep {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 12px; color: rgba(255,255,255,.4);
  font-size: 11px; letter-spacing: .4px; text-transform: uppercase;
}
.local-mode-sep::before, .local-mode-sep::after {
  content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.14);
}
.local-mode-btn {
  width: 100%; padding: 12px 18px;
  background: rgba(255,255,255,.06); color: #fff;
  border: 1px solid rgba(255,255,255,.22); border-radius: 9px;
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.local-mode-btn:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.35); }
.local-mode-note {
  margin: 9px 2px 0; color: rgba(255,255,255,.45);
  font-size: 11.5px; line-height: 1.4; text-align: center;
}

/* ── USER BADGE EN HEADER ── */
.hdr-user {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.18);
}
#user-badge {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-size: 11px; line-height: 1.3;
}
.ub-mail { opacity: .85; font-weight: 500; }
.ub-role {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase;
}
.ub-admin  { background: #fef3c7; color: #92400e; }
.ub-editor { background: #dbeafe; color: #1e40af; }
.ub-visor  { background: #e5e7eb; color: #374151; }
#logout-btn {
  background: rgba(255,255,255,.15); color: #fff;
  border: 1px solid rgba(255,255,255,.25); border-radius: 7px;
  padding: 5px 11px; font: inherit; font-size: 11px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
#logout-btn:hover { background: rgba(255,255,255,.28); }

/* ── ROLE-BASED UI GATING (oculta acciones para roles bajos) ── */
body[data-role="visor"]  .role-editor,
body[data-role="visor"]  .role-admin,
body[data-role="editor"] .role-admin {
  display: none !important;
}

/* ============================================================
 *  POLISH — mejoras visuales generales
 * ============================================================ */

/* Mesh-gradient: 4 orbes en esquinas — el vidrio blurrea esto */
body {
  background-color: #e8ecf7;
  background-image:
    radial-gradient(at 0%   0%,   rgba(1,2,178,.24) 0, transparent 56%),
    radial-gradient(at 100% 0%,   rgba(250,34,49,.15) 0, transparent 50%),
    radial-gradient(at 60%  90%,  rgba(1,2,178,.18) 0, transparent 54%),
    radial-gradient(at 0%   100%, rgba(250,34,49,.09) 0, transparent 46%);
  background-attachment: fixed;
  background-size: 100% 100%;
}

/* Section h2: acento rojo izquierdo + tipografía más fuerte */
.step h2 {
  display: flex; align-items: center; gap: 10px;
}
.step h2::before {
  content: ""; flex-shrink: 0;
  width: 4px; height: 22px;
  background: linear-gradient(180deg, var(--red), var(--red-dark));
  border-radius: 2px;
}

/* Step description más legible */
.step .desc { font-size: 14.5px; line-height: 1.65; }

/* Panel general: sombra más pronunciada en hover */
.wa-panel:hover { box-shadow: var(--sh-2); transition: box-shadow .2s; }

/* Dropzones principales: icono con fondo sutil */
.dz { border-radius: 14px; }
.dz .h { font-size: 12.5px; line-height: 1.6; }

/* Tablas: fila hover highlight */
.au-tbl tbody tr:hover td { background: #f0f4ff !important; }

/* Cards de plaza (step 2): hover más suave */
.cd { transition: box-shadow .18s, transform .18s; }

/* Botones: mejor press state */
.btn:active { transform: scale(.97); }
.btn-p:active { filter: brightness(.94); }

/* Login card: sombra más dramática + sutil blur de borde */
.login-card {
  box-shadow:
    0 1px 2px rgba(0,0,0,.03),
    0 8px 24px rgba(1,2,178,.12),
    0 28px 64px rgba(0,0,0,.10);
}

/* Login inputs: focus más prominente */
#login-form input:focus, #pwd-rotation-form input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(250,34,49,.12);
}

/* Footer: separador rojo sutil */
.ftr { border-top: 2px solid transparent;
       border-image: linear-gradient(90deg, transparent, var(--g200) 20%, var(--g200) 80%, transparent) 1; }

/* Paginación de tablas */
#geo-page-bar, #cam-page-bar { display: flex !important; }

/* WA progress rows: mejor padding */
.wa-prog-row { border-radius: 10px; transition: background .15s; }
.wa-pr-ok  { background: #f0fdf4 !important; }
.wa-pr-err { background: #fef2f2 !important; }

/* Status bar: mejor separación visual */
.wa-status-bar { border-radius: 12px; }

/* Hint de estado WA offline: color más visible */
.wa-instr-panel code { background: rgba(1,2,178,.12); font-size: 12.5px; }

/* Scroll fino en tablas */
.au-tbl-wrap::-webkit-scrollbar { width: 6px; height: 6px; }
.au-tbl-wrap::-webkit-scrollbar-track { background: var(--g100); border-radius: 3px; }
.au-tbl-wrap::-webkit-scrollbar-thumb { background: var(--g300); border-radius: 3px; }
.au-tbl-wrap::-webkit-scrollbar-thumb:hover { background: var(--g400); }

/* ============================================================
 *  GLASS DESIGN SYSTEM — Fluent/visionOS corporate glass
 *  Requiere el mesh-gradient del body para que el blur sea visible.
 *  Todas las reglas van aquí (al final) para sobrescribir las base.
 * ============================================================ */

/* ── HEADER ── */
.hdr {
  background:
    linear-gradient(135deg,
      rgba(1,2,178,.96)  0%,
      rgba(10,13,207,.92) 55%,
      rgba(1,1,136,.96)  100%);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border-bottom: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 4px 40px rgba(0,0,50,.30), 0 1px 0 rgba(255,255,255,.08);
}
/* Logo box: glass sobre el header azul */
.hdr-logo-box {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.40);
  box-shadow:
    0 2px 20px rgba(0,0,60,.28),
    inset 0 1px 0 rgba(255,255,255,.90);
  border-radius: 12px;
}
/* Botón salir: glass blanco translúcido */
#logout-btn {
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.28);
  letter-spacing: .2px;
  transition: background .15s, border-color .15s;
}
#logout-btn:hover {
  background: rgba(255,255,255,.24);
  border-color: rgba(255,255,255,.42);
}

/* ── TAB BAR ── */
.modtabs {
  background: rgba(228,232,245,.88);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 1px 0 rgba(1,2,178,.08), 0 6px 24px rgba(0,0,0,.07);
}
.modtab { color: var(--g500); }
.modtab:hover { background: rgba(255,255,255,.40); color: var(--blue); }
.modtab.active { background: rgba(255,255,255,.55); color: var(--blue); font-weight: 700; }

/* ── PANELS / TARJETAS PRINCIPALES ── */
.wa-status-bar,
.wa-panel,
.wa-qr-panel,
.wa-instr-panel,
.top-bar,
.msg-box {
  background: rgba(255,255,255,.68);
  backdrop-filter: blur(20px) saturate(155%);
  -webkit-backdrop-filter: blur(20px) saturate(155%);
  border: 1px solid rgba(255,255,255,.58);
  box-shadow: 0 6px 28px rgba(1,2,50,.08), inset 0 1px 0 rgba(255,255,255,.82);
}
.wa-panel:hover { box-shadow: 0 10px 36px rgba(1,2,50,.12), inset 0 1px 0 rgba(255,255,255,.90); }
.wa-status-bar { border-radius: 14px; }

/* ── TABLA DE RESULTADOS ── */
.au-result {
  background: rgba(255,255,255,.68);
  backdrop-filter: blur(20px) saturate(155%);
  -webkit-backdrop-filter: blur(20px) saturate(155%);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 6px 28px rgba(1,2,50,.08);
  border-radius: var(--r-md);
  overflow: hidden;
}
.au-result-bar {
  background: rgba(250,251,253,.85);
  border-bottom: 1px solid rgba(255,255,255,.55);
}
.au-tbl tbody tr:hover td { background: rgba(238,242,255,.75) !important; }

/* ── DROPZONES ── */
.dz {
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 2px dashed rgba(1,2,178,.30);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(1,2,50,.05), inset 0 1px 0 rgba(255,255,255,.70);
}
.dz:hover, .dz.hover {
  background: rgba(255,255,255,.80);
  border-color: rgba(250,34,49,.50);
  box-shadow: 0 6px 24px rgba(1,2,50,.10), inset 0 1px 0 rgba(255,255,255,.90);
}
.dz.ok {
  background: rgba(240,253,244,.78);
  border-color: #10b981;
  backdrop-filter: blur(14px);
}
.au-dz {
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px dashed rgba(180,185,210,.75);
  box-shadow: 0 2px 8px rgba(1,2,50,.04), inset 0 1px 0 rgba(255,255,255,.65);
}
.au-dz:hover, .au-dz.hover {
  background: rgba(255,255,255,.80);
  border-color: rgba(1,2,178,.50);
}
.au-dz.ok {
  background: rgba(240,253,244,.80);
  border-color: #047857;
  backdrop-filter: blur(12px);
}

/* ── TARJETAS (plaza cards, result cards) ── */
.cd {
  background: rgba(255,255,255,.68);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 4px 16px rgba(1,2,50,.07), inset 0 1px 0 rgba(255,255,255,.75);
}
.cd:hover {
  box-shadow: 0 8px 28px rgba(1,2,50,.12), inset 0 1px 0 rgba(255,255,255,.88);
}
.res {
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 4px 16px rgba(1,2,50,.07), inset 0 1px 0 rgba(255,255,255,.75);
}
.res:hover {
  box-shadow: 0 10px 32px rgba(1,2,50,.12), inset 0 1px 0 rgba(255,255,255,.88);
}

/* ── WA PROGRESS ROWS ── */
.wa-prog-row {
  background: rgba(249,250,251,.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.50);
}
.wa-pr-ok  { background: rgba(240,253,244,.80) !important; border-color: rgba(16,185,129,.20) !important; }
.wa-pr-err { background: rgba(254,242,242,.80) !important; border-color: rgba(250,34,49,.20) !important; }

/* ── MENSAJES (up-msg) ── */
.up-msg.loading { background: rgba(238,238,255,.80); backdrop-filter: blur(8px); }
.up-msg.ok      { background: rgba(230,249,239,.80); backdrop-filter: blur(8px); }
.up-msg.err     { background: rgba(254,242,242,.80); backdrop-filter: blur(8px); }

/* ── LOGIN CARD ── */
.login-card {
  background: rgba(255,255,255,.80);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255,255,255,.68);
  box-shadow:
    0 2px 4px rgba(0,0,0,.03),
    0 12px 40px rgba(1,2,100,.18),
    0 36px 80px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.95);
}
/* Login background: versión más intensa del mesh */
.login-ov {
  background-color: #dce1f2;
  background-image:
    radial-gradient(at 0%   0%,   rgba(1,2,178,.30) 0, transparent 56%),
    radial-gradient(at 100% 0%,   rgba(250,34,49,.20) 0, transparent 50%),
    radial-gradient(at 55%  90%,  rgba(1,2,178,.22) 0, transparent 54%),
    radial-gradient(circle, rgba(1,2,100,.06) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 22px 22px;
}
/* Logo box del login: blanco puro con sombra glass */
.login-logo-box {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.60);
  box-shadow: 0 4px 20px rgba(1,2,50,.12), inset 0 1px 0 rgba(255,255,255,1);
}
/* Input focus: anillo rojo */
#login-form input:focus, #pwd-rotation-form input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(250,34,49,.12);
  background: rgba(255,255,255,.95);
}

/* ── LOADER CEMEX — glass refinado (la transición a la herramienta) ── */
#cemex-loader {
  background: rgba(226,230,245,.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
#cemex-loader .boot-badge {
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.60);
  box-shadow: 0 4px 24px rgba(1,2,50,.12), inset 0  1px 0 rgba(255,255,255,.95);
}

/* ── FOOTER ── */
.ftr {
  max-width: calc(1180px + 56px);
  margin: 36px auto 20px;
  padding: 16px 28px;
  background: rgba(255,255,255,.52);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: var(--r-lg);
  border-top: none;
}

/* ── MODAL ── */
.modal { background: rgba(0,0,0,.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ── REGION BADGES (step 2) ── */
.region-ttl {
  background: rgba(238,240,255,.80);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(1,2,178,.12);
}

/* ── DOTS (stepper) ── */
.dot.active {
  box-shadow: 0 0 0 5px rgba(1,2,178,.16), 0 2px 8px rgba(1,2,178,.25);
}

/* ── WA: PLAZA NUEVA BADGE ── */
.wa-badge-nueva {
  background: #059669 !important;
  color: #fff !important;
  font-weight: 900;
  letter-spacing: 1.2px;
  animation: wa-nueva-pulse 2.5s ease-in-out infinite;
}
@keyframes wa-nueva-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(5,150,105,.30); }
  50%      { box-shadow: 0 0 0 4px rgba(5,150,105,.08); }
}

/* ── WA: SUMMARY PANEL (banner de resumen post-Excel) ── */
.wa-summary {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 18px;
}
.wa-sum-ok, .wa-sum-warn {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 18px; border-radius: var(--r-md);
  font-size: 13.5px; line-height: 1.5;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  animation: lo-fade .3s ease;
}
.wa-sum-ok {
  background: rgba(236,253,245,.88);
  border: 1px solid rgba(5,150,105,.25);
  color: #065f46;
}
.wa-sum-warn {
  background: rgba(255,251,235,.88);
  border: 1px solid rgba(245,158,11,.28);
  color: #78350f;
}
.wa-sum-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.wa-sum-list { font-size: 12px; opacity: .75; margin-top: 4px; line-height: 1.6; }

/* ===================== Dashboard Geocercas ===================== */
.geo-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 14px;
}
.geo-kpi {
  background: #fff; border: 1px solid var(--g200); border-radius: var(--r-md);
  padding: 14px 16px; box-shadow: 0 1px 3px rgba(0,0,0,.05);
  position: relative; overflow: hidden;
}
.geo-kpi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--accent, var(--blue));
}
.geo-kpi .v { font-size: 27px; font-weight: 800; line-height: 1.05; }
.geo-kpi .l { font-size: 12.5px; color: var(--g700); font-weight: 700; margin-top: 3px; }
.geo-kpi .s { font-size: 11px; color: var(--g400); margin-top: 1px; }

.geo-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px;
  background: #fff; border: 1px solid var(--g200); border-radius: var(--r-md);
  padding: 14px 16px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.geo-fgroup { display: flex; flex-direction: column; gap: 7px; }
.geo-flabel {
  font-size: 10px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--g400);
}
.geo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.geo-chip {
  font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--g200); background: #fff; color: var(--g700);
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.geo-chip:hover { border-color: var(--blue); color: var(--blue); }
.geo-chip.active {
  background: var(--blue); border-color: var(--blue); color: #fff;
  box-shadow: 0 2px 8px rgba(1,2,178,.25);
}
.geo-chip .n { opacity: .7; font-weight: 700; margin-left: 5px; }
.geo-chip.active .n { opacity: .85; }
.geo-select {
  padding: 8px 12px; border: 1px solid var(--g200); border-radius: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer; background: #fff; min-width: 190px;
}
.geo-clear {
  margin-left: auto; align-self: flex-end; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--g200); background: #fff; color: var(--g500);
  font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .15s;
}
.geo-clear:hover { border-color: var(--red); color: var(--red); background: #fff5f5; }

.geo-bd {
  background: #fff; border: 1px solid var(--g200); border-radius: var(--r-md);
  padding: 14px 16px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.geo-bd-ttl { font-size: 13px; font-weight: 700; color: var(--g700); margin-bottom: 10px; }
.geo-bd-row {
  display: grid; grid-template-columns: 190px 1fr 56px; align-items: center;
  gap: 14px; padding: 7px 8px; border-radius: 8px; cursor: pointer; transition: background .15s;
}
.geo-bd-row:hover { background: var(--g50); }
.geo-bd-row.active { background: rgba(1,2,178,.07); box-shadow: inset 0 0 0 1px rgba(1,2,178,.2); }
.geo-bd-name {
  font-size: 13px; font-weight: 700; color: var(--g900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.geo-bd-name .sub { font-size: 11px; font-weight: 500; color: var(--g500); }
.geo-bd-bar { height: 18px; border-radius: 5px; background: var(--g100); overflow: hidden; display: flex; }
.geo-bd-bar .ok    { background: #34d399; }
.geo-bd-bar .bad   { background: #f87171; }
.geo-bd-bar .other { background: #cbd5e1; }
.geo-bd-pct { font-size: 13.5px; font-weight: 800; text-align: right; }