/* ============================================================
 *  styles.css — Estilos de la app Netradyne CEMEX
 * ============================================================ */

:root {
  --red:#fa2231; --red-dark:#c7101c;
  --blue:#0102b2; --blue-dark:#010188;
  --g50:#fafafb; --g100:#f5f5f7; --g200:#e5e7eb; --g300:#d1d5db;
  --g400:#9ca3af; --g500:#6b7280; --g700:#374151; --g900:#0b0b0c;
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --sh-1:0 1px 2px rgba(0,0,0,.05);
  --sh-2:0 3px 10px rgba(0,0,0,.07);
  --sh-3:0 12px 32px rgba(0,0,0,.10);
}
*{box-sizing:border-box}
body{margin:0;font-family:"Inter",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
     background:
       radial-gradient(900px 620px at 10% -6%, rgba(1,2,178,.10), transparent 60%),
       radial-gradient(820px 600px at 102% 2%, rgba(250,34,49,.07), transparent 56%),
       linear-gradient(180deg,#eef0f7 0%,#f3f4f6 100%);
     background-attachment:fixed;
     color:var(--g900);min-height:100vh;-webkit-font-smoothing:antialiased}

/* ============ FONDO TECH CEMEX (canvas constelación + orbes + grid) ============ */
/* Constelación animada (la dibuja platform-bg.js en azul CEMEX) */
.cmx-bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;
        pointer-events:none;opacity:.5}
/* Orbes de luz que flotan despacio */
.cmx-orb{position:fixed;border-radius:50%;z-index:0;pointer-events:none;
         filter:blur(80px);opacity:.5}
.cmx-orb-1{width:480px;height:480px;left:-130px;top:-90px;
           background:radial-gradient(circle,rgba(1,2,178,.55),transparent 68%);
           animation:cmx-float-a 22s ease-in-out infinite}
.cmx-orb-2{width:420px;height:420px;right:-110px;bottom:-70px;
           background:radial-gradient(circle,rgba(250,34,49,.42),transparent 68%);
           animation:cmx-float-b 27s ease-in-out infinite}
@keyframes cmx-float-a{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,42px)}}
@keyframes cmx-float-b{0%,100%{transform:translate(0,0)}50%{transform:translate(-52px,-40px)}}
/* Grid sutil que se desplaza, difuminado hacia abajo */
body:not(.platform-landing)::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(1,2,178,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(1,2,178,.05) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(125% 95% at 50% 0%,#000 32%,transparent 80%);
          mask-image:radial-gradient(125% 95% at 50% 0%,#000 32%,transparent 80%);
  animation:cmx-grid-pan 28s linear infinite}
@keyframes cmx-grid-pan{from{background-position:0 0}to{background-position:54px 54px}}
/* Mientras estamos en la plataforma Soltek, el fondo CEMEX se oculta */
body.platform-landing .cmx-bg,
body.platform-landing .cmx-orb{display:none}
/* El contenido de la herramienta va por encima del fondo */
.hdr,.modgrp,.ftr{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){
  .cmx-orb,body:not(.platform-landing)::before{animation:none}
}

/* ============ HEADER ============ */
.hdr{background:linear-gradient(135deg,var(--blue) 0%,#0a0dcf 60%,var(--blue-dark) 100%);
     color:#fff;position:relative;box-shadow:0 4px 20px rgba(1,2,178,.25)}
.hdr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
            background:linear-gradient(90deg,var(--red),#ff6b35);animation:redPulse 3s ease-in-out infinite}
@keyframes redPulse{0%,100%{opacity:1}50%{opacity:.75}}
.hdr-in{max-width:1180px;margin:0 auto;padding:20px 28px;display:flex;align-items:center;
        justify-content:space-between;gap:18px;flex-wrap:wrap}
.hdr-l{display:flex;align-items:center;gap:16px}
.hdr-logo-box{background:#fff;border-radius:10px;padding:8px 14px;display:flex;
  flex-direction:column;align-items:center;gap:3px;box-shadow:0 2px 12px rgba(0,0,0,.18)}
.hdr-logo{height:36px;width:auto;display:block}
.hdr-brand{font-size:7.5px;font-weight:900;letter-spacing:2.5px;color:var(--blue);
           text-transform:uppercase;line-height:1}
.hdr-text{display:flex;flex-direction:column;gap:2px}
.hdr-title{margin:0;font-size:18px;font-weight:800;letter-spacing:.1px;
           transition:opacity .18s ease}
.hdr-sub{font-size:12px;opacity:.7;margin-top:1px;transition:opacity .18s ease;font-weight:400}
.hdr-r{font-size:12px;opacity:.95;text-align:right;line-height:1.6}
.hdr-r b{font-size:13px}

/* ============ MODULE TABS ============ */
.modtabs {
  position: sticky; top: 0; z-index: 100;
  background: rgba(243,244,246,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--g200);
  box-shadow: 0 1px 0 var(--g200), 0 4px 20px rgba(0,0,0,.05);
  margin: 0; max-width: none;
  padding: 0 max(28px, calc((100vw - 1236px) / 2));
  display: flex; gap: 0; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none;
}
.modtabs::-webkit-scrollbar { display: none; }
.modtab {
  padding: 0 18px;
  height: 48px;
  background: transparent; border: none; border-radius: 0;
  border-bottom: 3px solid transparent;
  font-weight: 600; font-size: 13px;
  cursor: pointer; color: var(--g500);
  transition: color .15s, border-color .18s, background .15s;
  display: flex; align-items: center; gap: 7px;
  white-space: nowrap; flex-shrink: 0;
  margin-bottom: -1px;
}
.modtab::before { display: none; }
.modtab:hover { color: var(--blue); background: rgba(1,2,178,.04); }
/* Pestaña Admin: oculta salvo para rol admin */
.modtab-admin { display: none; }
body[data-role="admin"] .modtab-admin { display: flex; }
.modtab.active {
  color: var(--blue); font-weight: 700;
  border-bottom-color: var(--red);
  background: rgba(1,2,178,.05);
  box-shadow: none; transform: none;
}
.modgrp { display: none; }
@keyframes modFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.modgrp.active { display: block; animation: modFadeIn .26s cubic-bezier(.22,.61,.36,1); }

/* ============ STEPPER ============ */
.steps{max-width:1180px;margin:28px auto 20px auto;padding:0 28px;
       display:flex;align-items:center;gap:10px}
.dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
     font-weight:700;font-size:13px;background:var(--g200);color:var(--g500);transition:all .2s}
.dot.active{background:var(--blue);color:#fff;box-shadow:0 0 0 4px rgba(1,2,178,.15)}
.dot.done{background:var(--red);color:#fff}
.dot-lb{font-size:13px;color:var(--g500);font-weight:500}
.dot-sep{flex:1;height:2px;background:var(--g200)}

/* ============ STEPS ============ */
.step{max-width:1180px;margin:0 auto 30px auto;padding:0 28px;display:none}
.step.active{display:block}
.step h2{font-size:22px;font-weight:700;margin:0 0 6px 0}
.step .desc{color:var(--g500);font-size:14px;margin-bottom:22px}

/* ============ DROPZONE ============ */
.dz{border:2px dashed var(--blue);background:#fff;border-radius:var(--r-lg);
    padding:40px 24px;text-align:center;cursor:pointer;transition:all .2s;box-shadow:var(--sh-1)}
.dz:hover,.dz.hover{background:#f6f7ff;border-color:var(--red);transform:translateY(-2px);box-shadow:var(--sh-2)}
.dz .ic{font-size:42px;margin-bottom:10px;transition:transform .2s}
.dz:hover .ic{transform:scale(1.1) translateY(-2px)}
.dz .t{font-size:15px;font-weight:700}
.dz .h{color:var(--g500);font-size:12px;margin-top:6px}
@keyframes dzOkPulse{
  0%  {box-shadow:0 0 0 0 rgba(16,185,129,.35)}
  70% {box-shadow:0 0 0 10px rgba(16,185,129,0)}
  100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}
}
.dz.ok{border-color:#10b981 !important;background:#f0fdf4 !important;
        animation:dzOkPulse 1.4s ease 0s 1}
.up-msg{margin-top:14px;padding:12px 16px;border-radius:var(--r-sm);font-size:14px}
.up-msg.loading{background:#eef;color:var(--blue)}
.up-msg.ok{background:#e6f9ef;color:#047857}
.up-msg.err{background:#fef2f2;color:var(--red);font-weight:600}

/* ============ STEP 2 - CARDS ============ */
.region{margin-top:24px}
.region-ttl{font-size:11px;font-weight:800;letter-spacing:2px;color:var(--blue);
            padding:4px 14px;background:#eef0ff;border-radius:999px;margin:0 0 14px 0;display:inline-block}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.cd{background:#fff;border:1px solid var(--g200);border-radius:var(--r-lg);padding:16px 16px 14px 16px;
    box-shadow:var(--sh-1);position:relative;transition:all .18s;display:flex;flex-direction:column;gap:2px;
    overflow:hidden}
.cd::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--blue);border-radius:var(--r-lg) 0 0 var(--r-lg)}
.cd:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
.cd.new::before{background:#10b981}
.cd.new{background:#f0fdf4}
.cd-tag{display:inline-block;font-size:9px;background:var(--red);color:#fff;padding:2px 8px;border-radius:999px;
        letter-spacing:1.5px;font-weight:800;margin-bottom:8px;align-self:flex-start}
.cd-h{font-weight:700;font-size:15px;color:var(--g900)}
.cd-t{color:var(--blue);font-size:11px;margin:2px 0 12px 0;font-weight:700;letter-spacing:.3px;text-transform:uppercase}
.cd-hint{font-size:10px;color:var(--g400);margin-top:6px;letter-spacing:.3px;text-align:center}
.tog{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--red);font-weight:600;margin:2px 0 10px 0;cursor:pointer}
.st{display:flex;align-items:center;gap:6px;width:100%}
.st input[type=number]{flex:1 1 auto;min-width:0;width:100%;padding:9px 8px;border:1px solid var(--g300);border-radius:var(--r-sm);
                       text-align:center;font-size:17px;font-weight:800;color:var(--g900);background:#fff;
                       -moz-appearance:textfield}
.st input[type=number]::-webkit-outer-spin-button,
.st input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.st input[type=number]:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(1,2,178,.12)}
.st input[type=number]:disabled{background:#f3f4f6;color:var(--g400)}
.st-b{flex:0 0 34px;width:34px;height:36px;border:1px solid var(--g300);background:#fff;border-radius:var(--r-sm);
      font-size:16px;font-weight:800;color:var(--blue);cursor:pointer;transition:all .12s}
.st-b:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.st-b:active{transform:scale(.95)}
.st-b:disabled{opacity:.4;cursor:not-allowed}

/* ============ BUTTONS ============ */
.btn{padding:10px 18px;border-radius:var(--r-sm);border:1px solid transparent;
     font-weight:600;font-size:14px;cursor:pointer;transition:all .15s;font-family:inherit;
     display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn-p{background:var(--red);color:#fff}
.btn-p:hover{background:var(--red-dark)}
.btn-g{background:#fff;color:var(--blue);border-color:var(--g300)}
.btn-g:hover{border-color:var(--blue);background:#f8faff}
.btn-lg{padding:13px 26px;font-size:15px}
.btn.ok{background:#10b981!important;color:#fff!important;border-color:#10b981!important}
.btn.err{background:#ef4444!important;color:#fff!important;border-color:#ef4444!important}
.acts{margin-top:22px;display:flex;justify-content:flex-end;gap:10px}

/* ============ STEP 3 - RESULT UI ============ */
.top-bar{background:#fff;border:1px solid var(--g200);border-radius:var(--r-md);
         padding:16px 20px;margin-bottom:20px;box-shadow:var(--sh-1);
         display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.top-bar-l{font-size:13px;color:var(--g700)}
.top-bar-l b{color:var(--blue)}
.top-bar-r{display:flex;gap:8px;flex-wrap:wrap}
.msg-box{background:#fff;border:1px solid var(--g200);border-radius:var(--r-md);
         padding:16px 18px;margin-bottom:22px;box-shadow:var(--sh-1)}
.msg-box .lab{font-size:11px;color:var(--g500);font-weight:700;letter-spacing:1.5px;margin-bottom:10px}
.msg-box .inner{background:#f7f9fb;border-radius:var(--r-sm);padding:12px 14px;
                font-size:13px;color:var(--g700);line-height:1.55;white-space:pre-wrap}
.msg-box .img-ph{background:repeating-linear-gradient(45deg,#eef,#eef 6px,#fff 6px,#fff 12px);
                 border:1px dashed var(--blue);border-radius:var(--r-sm);padding:14px;margin:10px 0;
                 text-align:center;color:var(--blue);font-weight:600;font-size:12px}
.res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:18px}
.res{background:#fff;border:1px solid var(--g200);border-radius:var(--r-lg);overflow:hidden;
     box-shadow:var(--sh-1);transition:all .2s;display:flex;flex-direction:column}
.res:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
.res.sent{opacity:.5}
.res.sent .res-img-wrap{filter:grayscale(.6)}
.res-h{padding:14px 18px;background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#fff;
       display:flex;justify-content:space-between;align-items:center;gap:10px}
.res-h-l{display:flex;flex-direction:column;gap:2px}
.res-h-ti{font-weight:700;font-size:15px;letter-spacing:.2px}
.res-h-re{font-size:10px;letter-spacing:2px;opacity:.8;font-weight:600}
.res-h-r{font-size:12px;opacity:.95;text-align:right;line-height:1.3}
.res-h-r b{display:block;font-size:15px;font-weight:800}
.res-img-wrap{padding:12px;background:var(--g50);min-height:200px;display:flex;align-items:center;
              justify-content:center;border-bottom:1px solid var(--g200)}
.res-img{width:100%;height:auto;border-radius:var(--r-sm);box-shadow:var(--sh-1);cursor:pointer}
.skeleton{width:100%;height:200px;background:linear-gradient(90deg,#f1f3f6 25%,#e5e7eb 50%,#f1f3f6 75%);
          background-size:200% 100%;animation:shim 1.2s linear infinite;border-radius:var(--r-sm)}
@keyframes shim{0%{background-position:200% 0}100%{background-position:-200% 0}}
.res-acts{padding:12px;display:grid;grid-template-columns:2fr 1fr;gap:8px;background:#fff}
.res-acts .btn{padding:10px 10px;font-size:12px;width:100%}
.res-acts .btn.wide{grid-column:span 2}
.err-box{padding:14px;background:#fef2f2;color:var(--red);border-radius:var(--r-sm);font-size:13px}

/* ============ AUDITORÍAS ============ */
.au-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.au-row .au-field{background:#fff;border:1px solid var(--g200);border-radius:var(--r-sm);padding:14px}
.au-row label{display:block;font-size:12px;font-weight:700;color:var(--g500);
              text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.au-row select{width:100%;padding:10px 12px;border:1px solid var(--g200);border-radius:8px;
               font-size:15px;font-weight:600;background:#fff}
.au-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:18px}
.au-dz{border:2px dashed var(--g200);background:#fff;border-radius:var(--r-sm);
       padding:18px 14px;text-align:center;cursor:pointer;transition:all .15s;min-height:130px;
       display:flex;flex-direction:column;justify-content:center;align-items:center}
.au-dz:hover,.au-dz.hover{border-color:var(--blue);background:#f6f7ff}
.au-dz.ok{border-color:#047857;background:#e6f9ef;border-style:solid}
.au-dz .ic{font-size:30px;margin-bottom:6px}
.au-dz .t{font-size:13px;font-weight:700;color:var(--g700)}
.au-dz .h{font-size:11px;color:var(--g500);margin-top:4px;line-height:1.4}
.au-dz.ok .t{color:#047857}
.au-actions{display:flex;gap:10px;align-items:center;margin:16px 0}
.au-result{background:#fff;border:1px solid var(--g200);border-radius:var(--r-sm);overflow:hidden}
.au-result-bar{padding:14px 18px;background:#f5f5f7;display:flex;justify-content:space-between;
               align-items:center;flex-wrap:wrap;gap:12px;border-bottom:1px solid var(--g200)}
.au-result-bar b{color:var(--blue)}
.au-tbl-wrap{overflow-x:auto;max-height:540px;overflow-y:auto}
.au-tbl{width:100%;border-collapse:collapse;font-size:12px}
.au-tbl thead th{background:var(--blue);color:#fff;padding:10px 8px;text-align:left;
                 position:sticky;top:0;font-weight:700;white-space:nowrap}
.au-tbl tbody td{padding:8px;border-bottom:1px solid var(--g200);white-space:nowrap}
.au-tbl tbody tr:nth-child(odd){background:#fafbfc}
.au-tbl td.au-empty{background:#fef9c3;color:#92400e;font-style:italic}
.au-tbl td.au-bad{background:#fef2f2;color:var(--red);font-weight:600}

/* ============ MATCH CÁMARAS ============ */
.cam-add       { background:#fde8e8!important; color:#9b1c1c }
.cam-ok        { background:#d1fae5!important; color:#065f46 }
.cam-ya        { background:#fef3c7!important; color:#92400e }
.cam-inactive  { background:#fef9c3!important; color:#92400e; font-weight:600 }
.cam-under-inv { background:#fff7ed!important; color:#c2410c; font-weight:600 }
.cam-status    { font-weight:700; white-space:nowrap }
.cam-bl-btn {
  padding:5px 10px; font-size:11px; font-weight:700;
  border-radius:6px; cursor:pointer; transition:all .15s ease;
  border:1px solid var(--g300); background:#f3f4f6; color:var(--g600);
}
.cam-bl-btn:hover { background:#e5e7eb; transform:translateY(-1px) }
.cam-bl-btn.off   { border-color:#fca5a5; background:#fee2e2; color:#991b1b }
.cam-bl-btn.off:hover { background:#fecaca }

/* ============ GEOCERCAS ============ */
.geo-ok      { background:#d1fae5!important; color:#065f46 }
.geo-bad     { background:#fde8e8!important; color:#9b1c1c }
.geo-err-sys { background:#fef9c3!important; color:#92400e }
.geo-sin-rem { background:#f3f4f6!important; color:var(--g500) }
.geo-status  { font-weight:700; white-space:nowrap }

/* Spinner inside up-msg.loading */
.geo-spin {
  display:inline-block;width:13px;height:13px;
  border:2px solid rgba(1,2,178,.25);border-top-color:var(--blue);
  border-radius:50%;animation:geo-spin .7s linear infinite;
  vertical-align:middle;margin-right:6px;
}
@keyframes geo-spin { to { transform:rotate(360deg); } }

/* ============ MISC ============ */
.loader{padding:40px;text-align:center;color:var(--g500);font-size:14px}
.ftr{max-width:1180px;margin:36px auto 20px auto;padding:18px 28px;border-top:1px solid var(--g200);
     color:var(--g500);font-size:12px;text-align:center}
.ftr b{color:var(--blue)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.78);display:none;align-items:center;
       justify-content:center;z-index:1000;padding:24px}
.modal.on{display:flex}
.modal img{max-width:92vw;max-height:92vh;border-radius:10px;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.modal .x{position:absolute;top:16px;right:20px;color:#fff;font-size:30px;cursor:pointer;
          background:none;border:0;font-weight:300}

/* ============ WA SEND MODULE ============ */
.wa-status-bar{display:flex;align-items:center;gap:12px;padding:14px 18px;background:#fff;
               border:1px solid var(--g200);border-radius:var(--r-lg);margin-bottom:20px;box-shadow:var(--sh-1)}
.wa-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;transition:background .3s}
.wa-dot-offline,.wa-dot-unknown,.wa-dot-disconnected{background:var(--g400)}
.wa-dot-qr,.wa-dot-connecting{background:#f59e0b;animation:waPulse 1.2s ease-in-out infinite}
.wa-dot-ready{background:#10b981}
@keyframes waPulse{0%,100%{opacity:1}50%{opacity:.35}}
.wa-status-txt{font-weight:600;font-size:14px;color:var(--g900)}
.wa-status-hint{font-size:12px;color:var(--g500);margin-left:auto}
.wa-reset-btn{flex-shrink:0;padding:6px 12px;font-size:12px}
.wa-qr-panel{background:#fff;border:1px solid var(--g200);border-radius:var(--r-lg);
             padding:22px;margin-bottom:20px;text-align:center;box-shadow:var(--sh-1)}
.wa-qr-panel p{margin:0 0 14px 0;font-size:14px;color:var(--g700)}
.wa-qr-panel img{max-width:240px;border-radius:8px;border:1px solid var(--g200)}
.wa-instr-panel{background:#eef0ff;border:1px solid rgba(1,2,178,.15);border-radius:var(--r-lg);
                padding:18px 22px;margin-bottom:20px}
.wa-instr-panel p{margin:0 0 10px 0;font-weight:600;color:var(--blue);font-size:14px}
.wa-instr-panel ol{margin:0;padding-left:20px;font-size:13px;color:var(--g700);line-height:2.2}
.wa-instr-panel code{background:rgba(1,2,178,.1);padding:1px 7px;border-radius:4px;font-size:12px}
.wa-panel{background:#fff;border:1px solid var(--g200);border-radius:var(--r-lg);
          padding:20px 22px;margin-bottom:20px;box-shadow:var(--sh-1)}
.wa-panel-hdr{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.wa-panel-ttl{font-size:16px;font-weight:700;color:var(--g900);margin:0;flex:1}
.wa-group-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--g200);flex-wrap:wrap}
.wa-group-row:last-child{border-bottom:none}
.wa-group-l{display:flex;align-items:center;gap:8px;flex:0 0 210px;min-width:0}
.wa-region-badge{font-size:9px;font-weight:800;letter-spacing:1.5px;color:var(--blue);background:#eef0ff;
                 padding:2px 7px;border-radius:999px;white-space:nowrap}
.wa-plaza-name{font-weight:700;font-size:14px;color:var(--g900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-group-r{flex:1;display:flex;align-items:center;gap:8px;min-width:260px}
.wa-group-search{width:96px;padding:7px 9px;border:1px solid var(--g300);border-radius:7px;
                 font-size:12px;color:var(--g700);background:#f9fafb;flex-shrink:0;
                 transition:width .2s,border-color .15s}
.wa-group-search:focus{outline:none;border-color:var(--blue);width:140px;
                       box-shadow:0 0 0 3px rgba(1,2,178,.08);background:#fff}
.wa-group-search::placeholder{color:var(--g400)}
.wa-group-sel{flex:1;padding:8px 10px;border:1px solid var(--g300);border-radius:8px;
              font-size:13px;background:#fff;color:var(--g900);cursor:pointer}
.wa-group-sel:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(1,2,178,.1)}
.wa-tog-lbl{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--g700);cursor:pointer;white-space:nowrap}
.wa-save-dirty{background:var(--red) !important;color:#fff !important;
               animation:wa-dirty-pulse 1.8s ease-in-out infinite}
.wa-msg-lbl{display:block;font-size:13px;font-weight:700;color:var(--g900);margin:14px 0 6px}
.wa-msg-lbl:first-of-type{margin-top:0}
.wa-msg-sub{font-weight:400;color:var(--g500);font-size:12px}
.wa-msg-area{width:100%;box-sizing:border-box;font:inherit;font-size:14px;line-height:1.5;
             padding:10px 12px;border:1px solid var(--g200);border-radius:8px;color:var(--g900);
             resize:vertical;background:#fff}
.wa-msg-area:focus{outline:none;border-color:var(--blue,#2563eb);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
/* Paneles plegables (mensaje / config grupos) */
.wa-details{padding:0;overflow:hidden}
.wa-details-sum{display:flex;align-items:center;gap:12px;flex-wrap:wrap;cursor:pointer;
                padding:18px 22px;list-style:none;user-select:none}
.wa-details-sum::-webkit-details-marker{display:none}
.wa-details-sum::before{content:"▸";color:var(--g500);font-size:13px;transition:transform .15s}
.wa-details[open] .wa-details-sum::before{transform:rotate(90deg)}
.wa-details-sum:hover{background:#f9fafb}
.wa-details-hint{font-size:12px;color:var(--g500);font-weight:400}
.wa-details-body{padding:0 22px 22px}
/* Vista previa en vivo del mensaje */
.wa-msg-preview{margin-top:16px;border:1px dashed var(--g200);border-radius:10px;
                background:#f7faf7;padding:14px 16px}
.wa-msg-preview-lab{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--g500);
                    text-transform:uppercase;margin-bottom:10px}
.wa-msg-preview-body{display:flex;flex-direction:column;gap:8px}
.wa-prev-line{white-space:pre-wrap;font-size:14px;line-height:1.5;color:var(--g900)}
.wa-prev-img{align-self:flex-start;font-size:13px;color:var(--g500);background:#fff;
             border:1px solid var(--g200);border-radius:8px;padding:8px 14px}
@keyframes wa-dirty-pulse{0%,100%{box-shadow:0 0 0 0 rgba(250,34,49,.30)}50%{box-shadow:0 0 0 5px rgba(250,34,49,.08)}}
.wa-prog-hdr{font-weight:700;font-size:14px;color:var(--g900);margin-bottom:14px}
.wa-retry-wrap{display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px 14px;background:#fff8e1;border:1px solid #f9c74f;border-radius:8px;flex-wrap:wrap}
.wa-retry-btn{padding:8px 14px;font-size:13px;font-weight:700;background:#fa2231;color:#fff;border:none;border-radius:6px;cursor:pointer}
.wa-retry-btn:hover{background:#d61828}
.wa-retry-note{font-size:12px;color:#7a5a00}
.wa-prog-list{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.wa-prog-row{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#f9fafb;border-radius:8px;font-size:13px}
.wa-pr-icon{font-size:16px;flex-shrink:0;width:22px;text-align:center}
.wa-pr-name{font-weight:600;flex:0 0 120px;color:var(--g900)}
.wa-pr-note{color:var(--g500);font-size:12px}
.wa-pr-ok .wa-pr-icon{color:#10b981}
.wa-pr-err .wa-pr-icon{color:var(--red)}
.wa-pr-wait .wa-pr-icon{color:#f59e0b}

/* ============ 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; }

/* ============ Módulo Ralentí ============ */
.ral-grid { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; margin-top: 18px; }
.ral-grid > :first-child { grid-column: 1 / -1; }
.ral-card { background: #fff; border: 1px solid var(--g200); border-radius: 12px;
            padding: 16px 18px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.ral-card-ttl { font-weight: 700; font-size: 14.5px; margin-bottom: 12px; color: var(--g700); }

.ral-bd details { border-bottom: 1px solid var(--g100); padding: 6px 0; }
.ral-bd details:last-of-type { border-bottom: none; }
.ral-bd summary { display: grid; grid-template-columns: minmax(180px,1.4fr) 2fr auto auto;
                  gap: 14px; align-items: center; padding: 10px 6px; cursor: pointer;
                  list-style: none; user-select: none; }
.ral-bd summary::-webkit-details-marker { display: none; }
.ral-bd summary::before { content: "▸"; color: var(--g400); margin-right: 4px;
                          transition: transform .15s; display: inline-block; }
.ral-bd details[open] > summary::before { transform: rotate(90deg); }
.ral-pl-name { font-weight: 700; font-size: 14px; color: var(--g700); }
.ral-pl-h    { font-weight: 800; font-size: 14.5px; color: #1e293b; text-align: right; }
.ral-pl-sub  { font-size: 12px; color: var(--g400); text-align: right; }
.ral-bar     { display: block; height: 8px; background: var(--g100); border-radius: 4px; overflow: hidden; }
.ral-bar-in  { display: block; height: 100%; background: linear-gradient(90deg,#3b82f6,#06b6d4); border-radius: 4px; }

.ral-pd      { padding: 4px 0 8px 26px; }
.ral-pd-hd   { display: flex; justify-content: space-between; align-items: center;
               font-weight: 600; font-size: 13px; color: var(--g700); padding: 6px 0; }
.ral-cb      { display: grid; grid-template-columns: 1fr 80px 100px 110px 110px;
               gap: 10px; align-items: center; padding: 5px 10px; font-size: 12.5px;
               background: var(--g50); border-radius: 6px; margin: 3px 0; }
.ral-cb-name { color: var(--g700); font-weight: 600; }
.ral-cb-crs  { color: var(--g500); font-size: 12px; }
.ral-cb-tot  { font-weight: 700; color: #1e293b; text-align: right; }
.ral-cb-prom { color: var(--g500); font-size: 12px; text-align: right; }
.ral-cb-av   { font-weight: 700; text-align: right; font-size: 12.5px; }

.ral-top-row { display: grid; grid-template-columns: 28px 70px 1fr 80px 80px;
               gap: 10px; align-items: center; padding: 8px 6px;
               border-bottom: 1px solid var(--g100); font-size: 13px; }
.ral-top-row:last-child { border-bottom: none; }
.ral-top-rk  { font-weight: 800; color: var(--g400); text-align: center; }
.ral-top-cr  { font-weight: 700; color: var(--g700); }
.ral-top-meta { color: var(--g500); font-size: 11.5px; line-height: 1.3; }
.ral-top-bar { height: 6px; background: var(--g100); border-radius: 3px; overflow: hidden; }
.ral-top-bar-in { display: block; height: 100%; border-radius: 3px; }
.ral-top-h   { font-weight: 800; text-align: right; font-size: 13px; }

@media (max-width: 900px) {
  .ral-grid { grid-template-columns: 1fr; }
  .ral-cb { grid-template-columns: 1fr auto; gap: 6px; }
  .ral-top-row { grid-template-columns: 24px 60px 1fr 70px; }
  .ral-top-bar { display: none; }
}

/* ============================================================
 *  PLATAFORMA SOLTEK — landing de clientes (después del login)
 *  Aditivo: no afecta a la herramienta CEMEX, que conserva su
 *  identidad. Solo se muestra cuando body tiene .platform-landing.
 * ============================================================ */

/* Wordmark Soltek */
/* Wordmark Soltek — réplica del logo: "soltek" en fuente redondeada
   (Baloo 2) con la bandera naranja en la esquina superior de la 'k'. */
.sk-word{font-family:"Baloo 2","Inter",sans-serif;font-weight:800;letter-spacing:-.5px;
         line-height:1;color:#fff;display:inline-block;position:relative}
.sk-word .sk-accent{color:#f47b20}
/* Bandera naranja (paralelogramo inclinado) sobre la 'k' */
.sk-word .sk-flag{position:absolute;top:.02em;right:-.04em;
                  width:.32em;height:.30em;background:#f47b20;
                  clip-path:polygon(18% 0,100% 0,82% 100%,0 100%);
                  animation:sk-flag-glow 2.8s ease-in-out infinite}
@keyframes sk-flag-glow{0%,100%{filter:drop-shadow(0 0 0 rgba(244,123,32,0))}
                        50%{filter:drop-shadow(0 0 6px rgba(244,123,32,.8))}}
/* Compat: el punto antiguo, por si queda en algún markup */
.sk-word .sk-dot{display:none}
.sk-word.sk-lg{font-size:38px}
.sk-word.sk-md{font-size:25px}
.sk-word.sk-xl{font-size:48px}

/* Wordmark Monarch — "M[globo]NARCH" con globo Tierra + señal como la 'O' */
.mn-word{font-family:"Inter",sans-serif;font-weight:900;letter-spacing:.8px;color:#fff;
         display:inline-flex;align-items:baseline;line-height:1;font-size:21px}
.mn-word.mn-sm{font-size:15px}
.mn-word.mn-md{font-size:19px}
.mn-globe{display:inline-block;width:1.04em;height:1.21em;position:relative;top:.30em;
          margin:0 .015em}
.mn-globe svg{width:100%;height:100%;display:block;overflow:visible}

/* Co-marca soltek + Monarch */
.sk-lockup{display:inline-flex;align-items:center;gap:14px}
/* Cruz "+" gruesa (SVG) como en el logo original */
.sk-x{display:inline-flex;align-items:center;justify-content:center;
      color:rgba(255,255,255,.92);line-height:0}
.sk-x svg{width:1em;height:1em;display:block}
.sk-lockup .sk-x{font-size:19px}
.sk-partner{display:inline-flex;align-items:center;gap:8px;margin-top:8px;
            font-size:12px;color:rgba(255,255,255,.5)}
.sk-partner .sk-x{font-size:11px;color:rgba(255,255,255,.6)}

/* La landing ocupa toda la pantalla por encima de la app */
#client-landing{display:none}
body.platform-landing{overflow:hidden}
body.platform-landing #client-landing{display:flex}
/* Mientras se muestra la plataforma (ya autenticado y sin boot), ocultar
   por completo la herramienta CEMEX. Si solo la tapáramos con z-index, el
   fade-in de la landing dejaría ver la herramienta detrás un instante
   (el parpadeo). Se excluyen los loaders para que puedan superponerse en
   las transiciones. */
body.platform-landing:not(.auth-locked):not(.auth-booting)
  > *:not(#client-landing):not(#cemex-loader):not(#boot-loader){
  display:none !important;
}

.pf-land{
  position:fixed;inset:0;z-index:9000;flex-direction:column;
  background-color:#161616;color:#fff;overflow:hidden auto;
}
/* Cuadrícula de fondo sutil */
.pf-land::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:56px 56px;
}
/* Entrada de la landing */
.pf-land{animation:pf-fade .4s ease both}
@keyframes pf-fade{from{opacity:0}to{opacity:1}}
/* Salida suave al entrar a un cliente */
.pf-land.pf-exit{animation:pf-out .26s ease forwards}
@keyframes pf-out{to{opacity:0;transform:scale(.97)}}

/* Orbs de luz animados */
.pf-orb{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none;z-index:0}
.pf-orb-1{width:520px;height:520px;background:rgba(244,123,32,.20);
           top:-140px;left:-100px;animation:pf-orb-float 11s ease-in-out infinite alternate}
.pf-orb-2{width:380px;height:380px;background:rgba(244,123,32,.12);
           bottom:-80px;right:-60px;animation:pf-orb-float 14s ease-in-out infinite alternate-reverse}
.pf-orb-3{width:260px;height:260px;background:rgba(80,100,255,.07);
           top:45%;left:58%;animation:pf-orb-float 9s ease-in-out infinite alternate}
@keyframes pf-orb-float{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(35px,22px) scale(1.10)}
}

/* Contenido principal sobre los orbs */
.pf-topbar,.pf-hero,.pf-grid,.pf-foot{position:relative;z-index:1}

/* Topbar */
.pf-topbar{display:flex;align-items:center;gap:14px;padding:20px 32px;
           border-bottom:1px solid rgba(255,255,255,.07);
           background:rgba(22,22,22,.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
           animation:pf-topbar-in .38s ease both}
@keyframes pf-topbar-in{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}
.pf-topbar-lbl{font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
               color:rgba(255,255,255,.35);border-left:1px solid rgba(255,255,255,.12);padding-left:14px}
.pf-topbar-r{margin-left:auto;display:flex;align-items:center;gap:14px}
.pf-user{font-size:12px;color:rgba(255,255,255,.45);font-weight:500}
.pf-logout{background:rgba(255,255,255,.07);color:rgba(255,255,255,.75);
           border:1px solid rgba(255,255,255,.13);
           border-radius:8px;padding:7px 15px;font:inherit;font-size:12px;font-weight:600;
           cursor:pointer;transition:background .18s,color .18s}
.pf-logout:hover{background:rgba(255,255,255,.16);color:#fff}

/* Hero */
.pf-hero{text-align:center;padding:64px 24px 32px;
         animation:pf-hero-in .45s .07s ease both}
@keyframes pf-hero-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
/* Eyebrow badge animado */
.pf-eyebrow{display:inline-flex;align-items:center;gap:7px;
            background:rgba(244,123,32,.10);border:1px solid rgba(244,123,32,.22);
            border-radius:999px;padding:5px 16px;margin-bottom:20px;
            font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#f47b20}
.pf-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:#f47b20;flex-shrink:0;
                animation:pf-eyedot 2s ease-in-out infinite}
@keyframes pf-eyedot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.65)}}
.pf-h1{margin:0 0 12px;font-size:40px;font-weight:900;letter-spacing:-.8px;line-height:1.1}
.pf-h1 .sk-accent{color:#f47b20}
.pf-sub{margin:0;font-size:15px;color:rgba(255,255,255,.45);font-weight:500;letter-spacing:.1px}
/* Stats rápidos */
.pf-stats{display:flex;justify-content:center;align-items:center;gap:0;margin-top:30px}
.pf-stat{display:flex;flex-direction:column;align-items:center;gap:3px;padding:0 28px}
.pf-stat+.pf-stat{border-left:1px solid rgba(255,255,255,.1)}
.pf-stat-n{font-size:28px;font-weight:900;color:#f47b20;letter-spacing:-1.5px;line-height:1}
.pf-stat-l{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
           color:rgba(255,255,255,.32);margin-top:2px}

/* Grid de clientes */
.pf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(275px,315px));gap:24px;
         justify-content:center;padding:4px 24px 52px;max-width:980px;margin:0 auto;width:100%}
.pf-card{position:relative;background:rgba(255,255,255,.04);
         border:1px solid rgba(255,255,255,.09);
         border-radius:22px;padding:32px 26px 26px;
         display:flex;flex-direction:column;align-items:center;
         gap:9px;text-align:center;min-height:256px;justify-content:center;
         animation:pf-card-in .52s cubic-bezier(.22,.68,0,1.2) both}
.pf-card:nth-child(1){animation-delay:.20s}
.pf-card:nth-child(2){animation-delay:.34s}
.pf-card:nth-child(3){animation-delay:.46s}
@keyframes pf-card-in{from{opacity:0;transform:translateY(34px) scale(.96)}
                      to{opacity:1;transform:translateY(0) scale(1)}}

.pf-card-active{cursor:pointer;background:#fff;border:1px solid transparent;color:#1f1f1f;
                box-shadow:0 22px 64px rgba(0,0,0,.5);
                transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease}
.pf-card-active:hover{transform:translateY(-8px) scale(1.015);
                      box-shadow:0 36px 80px rgba(244,123,32,.26),0 0 0 2px rgba(244,123,32,.55)}
.pf-card-active:hover .pf-arrow{transform:translateX(5px)}

.pf-card-logo{height:50px;width:auto;display:block;margin-bottom:4px}
.pf-card-ph{height:50px;width:50px;border-radius:14px;background:rgba(255,255,255,.07);
            display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:300;
            color:rgba(255,255,255,.3)}
.pf-card-name{font-size:21px;font-weight:900;letter-spacing:-.1px;margin-top:2px}
.pf-card-active .pf-card-name{color:#111}
.pf-card-desc{font-size:12px;line-height:1.55;color:#6b7280;font-weight:500;max-width:230px}
.pf-card-soon .pf-card-name,.pf-card-soon .pf-card-desc{color:rgba(255,255,255,.32)}

/* Chips de módulos */
.pf-card-modules{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:5px}
.pf-card-modules span{font-size:10px;font-weight:700;letter-spacing:.3px;
  background:rgba(244,123,32,.08);color:#d05e0c;
  border:1px solid rgba(244,123,32,.20);border-radius:999px;padding:2px 9px}

/* CTA con flecha animada */
.pf-card-cta{margin-top:10px;font-size:13px;font-weight:800;color:#f47b20;
             letter-spacing:.4px;display:inline-flex;align-items:center;gap:5px}
.pf-arrow{display:inline-block;transition:transform .22s cubic-bezier(.34,1.56,.64,1)}

/* Badge "Activo" con pulso de halo */
.pf-card-badge{position:absolute;top:16px;right:16px;font-size:9px;font-weight:800;
               letter-spacing:.8px;text-transform:uppercase;padding:3px 10px;border-radius:999px;
               background:#f47b20;color:#fff;
               animation:pf-badge-halo 2.6s ease-in-out infinite}
@keyframes pf-badge-halo{
  0%,100%{box-shadow:0 0 0 0 rgba(244,123,32,.55)}
  55%{box-shadow:0 0 0 7px rgba(244,123,32,0)}
}
.pf-card-badge.pf-soon{background:rgba(255,255,255,.09);color:rgba(255,255,255,.38);animation:none}
.pf-card-soon{opacity:.7;transition:opacity .20s,border-color .20s}
.pf-card-soon:hover{opacity:.9;border-color:rgba(255,255,255,.18)}

.pf-foot{margin-top:auto;text-align:center;padding:20px;font-size:11px;
         color:rgba(255,255,255,.2);letter-spacing:.5px;position:relative;z-index:1}

/* Botón "volver a plataforma" en el header de la herramienta CEMEX */
#pf-back{background:rgba(244,123,32,.16);color:#f8a060;
         border:1px solid rgba(244,123,32,.32);
         border-radius:8px;padding:6px 14px;font:inherit;font-size:11px;font-weight:700;
         cursor:pointer;transition:background .18s,transform .18s,color .18s;
         margin-right:8px;display:inline-flex;align-items:center;gap:5px;letter-spacing:.2px}
#pf-back:hover{background:rgba(244,123,32,.30);color:#fff;transform:translateX(-2px)}

@media (max-width:640px){
  .pf-h1{font-size:27px}
  .pf-grid{grid-template-columns:1fr}
  .pf-topbar{padding:14px 18px}
  .pf-hero{padding:42px 18px 26px}
  .pf-stats{gap:0}
  .pf-stat{padding:0 18px}
  .pf-stat-n{font-size:22px}
}

/* ============================================================
 *  LOGIN SOLTEK — sobreescribe el tema CEMEX del login.
 *  Va al final para ganar por orden de cascada. Identidad oscura
 *  + naranja, igual que la plataforma. No toca la herramienta CEMEX.
 * ============================================================ */
.login-ov{
  background-color:#141414;
  background-image:
    radial-gradient(at 0% 0%,   rgba(244,123,32,.20) 0, transparent 50%),
    radial-gradient(at 100% 100%, rgba(244,123,32,.13) 0, transparent 52%),
    radial-gradient(at 80% 0%,  rgba(80,100,255,.06) 0, transparent 50%),
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:100% 100%,100% 100%,100% 100%,52px 52px,52px 52px;
  animation:lo-fade .3s ease, lg-grid-pan 24s linear infinite;
}
@keyframes lg-grid-pan{
  from{background-position:0 0,0 0,0 0,0 0,0 0}
  to{background-position:0 0,0 0,0 0,52px 52px,52px 52px}
}
.login-card{
  background:rgba(255,255,255,.045);
  backdrop-filter:blur(28px) saturate(140%);
  -webkit-backdrop-filter:blur(28px) saturate(140%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 2px 4px rgba(0,0,0,.2),0 24px 70px rgba(0,0,0,.55),
             inset 0 1px 0 rgba(255,255,255,.08);
  color:#fff;
  z-index:1;
}
/* Canvas de constelación (landing + login) */
.pf-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;
       display:block;pointer-events:none}
.login-accent{background:linear-gradient(90deg,#f47b20 0%,#ffb46a 100%)}
.login-logo-box{
  background:transparent;border:none;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  padding:6px 4px 2px;margin-bottom:18px;
}
.login-brand h1{color:#fff}
.login-brand p{color:rgba(255,255,255,.45)}
#login-form label span,#pwd-rotation-form label span{color:rgba(255,255,255,.55)}
#login-form input,#pwd-rotation-form input{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:#fff;
}
#login-form input::placeholder,#pwd-rotation-form input::placeholder{color:rgba(255,255,255,.30)}
#login-form input:hover,#pwd-rotation-form input:hover{
  border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.07);
}
#login-form input:focus,#pwd-rotation-form input:focus{
  border-color:#f47b20;background:rgba(255,255,255,.08);
  box-shadow:0 0 0 3px rgba(244,123,32,.18);
}
/* Botón principal: naranja Soltek */
#login-btn,#pwd-rotation-btn{
  background:#f47b20;
  background-image:linear-gradient(180deg,#ff9442 0%,#f47b20 55%,#e06806 100%);
  box-shadow:0 2px 10px rgba(244,123,32,.40),inset 0 1px 0 rgba(255,255,255,.25);
}
#login-btn:hover:not(:disabled),#pwd-rotation-btn:hover:not(:disabled){
  filter:brightness(1.07);
  box-shadow:0 6px 20px rgba(244,123,32,.5),inset 0 1px 0 rgba(255,255,255,.3);
}
.login-foot{color:rgba(255,255,255,.4)}
.lf-dot{background:#f47b20;box-shadow:0 0 0 3px rgba(244,123,32,.18);
        animation:lf-pulse-sk 2s ease-in-out infinite}
@keyframes lf-pulse-sk{
  0%,100%{box-shadow:0 0 0 3px rgba(244,123,32,.18)}
  50%{box-shadow:0 0 0 6px rgba(244,123,32,.04)}
}
.login-err{background:rgba(244,123,32,.10);color:#ffb37a;border:1px solid rgba(244,123,32,.3)}

/* ============================================================
 *  ANIMACIONES "TECH" de la landing Soltek
 * ============================================================ */
/* La cuadrícula de fondo se desplaza lentamente (parallax sutil) */
.pf-land::before{animation:pf-grid-pan 26s linear infinite}
@keyframes pf-grid-pan{from{background-position:0 0}to{background-position:56px 56px}}

/* Haz de luz que barre la pantalla de forma perpetua */
.pf-land::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(244,123,32,.07) 50%,transparent 62%);
  background-size:280% 280%;
  animation:pf-beam 9s ease-in-out infinite;
}
@keyframes pf-beam{0%{background-position:120% 0}100%{background-position:-40% 0}}

/* Partículas flotantes (capa decorativa, sin HTML extra) */
.pf-particles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.pf-particles i{position:absolute;display:block;width:4px;height:4px;border-radius:50%;
  background:#f47b20;opacity:.5;box-shadow:0 0 8px rgba(244,123,32,.8);
  animation:pf-rise linear infinite}
.pf-particles i:nth-child(1){left:8%; animation-duration:14s;animation-delay:0s}
.pf-particles i:nth-child(2){left:22%;animation-duration:18s;animation-delay:3s;width:3px;height:3px}
.pf-particles i:nth-child(3){left:38%;animation-duration:12s;animation-delay:1s}
.pf-particles i:nth-child(4){left:55%;animation-duration:20s;animation-delay:5s;width:5px;height:5px}
.pf-particles i:nth-child(5){left:68%;animation-duration:16s;animation-delay:2s;opacity:.35}
.pf-particles i:nth-child(6){left:80%;animation-duration:13s;animation-delay:6s;width:3px;height:3px}
.pf-particles i:nth-child(7){left:92%;animation-duration:19s;animation-delay:4s}
.pf-particles i:nth-child(8){left:47%;animation-duration:15s;animation-delay:7s;width:3px;height:3px;opacity:.3}
@keyframes pf-rise{
  0%{transform:translateY(105vh) scale(.6);opacity:0}
  10%{opacity:.5}
  90%{opacity:.5}
  100%{transform:translateY(-10vh) scale(1);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .pf-land::after,.pf-particles i,.pf-land::before,.login-ov{animation:none !important}
}

/* ── Panel de config de correos por plaza (Ralentí / Geocercas) ── */
.re-cfg-panel{background:#fff;border:1px solid var(--g200);border-radius:var(--r-sm);padding:14px 18px}
.re-cfg-panel>summary{cursor:pointer;font-weight:700;color:var(--blue);font-size:14px;list-style:none}
.re-cfg-panel>summary::-webkit-details-marker{display:none}
.re-cfg-panel>summary::before{content:"▸ ";color:var(--g400)}
.re-cfg-panel[open]>summary::before{content:"▾ "}
.re-cfg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 12px;flex-wrap:wrap}
.re-cfg-sub{font-weight:400;color:var(--g500);font-size:12px}
.re-cfg-grid{display:flex;flex-direction:column;gap:6px}
.re-cfg-colh,.re-cfg-row{display:grid;grid-template-columns:230px 1fr 1fr;gap:10px;align-items:center}
.re-cfg-colh{font-size:11px;font-weight:700;color:var(--g500);text-transform:uppercase;letter-spacing:.04em;padding:0 2px 4px}
.re-cfg-plaza{display:flex;align-items:center}
.re-cfg-tog{display:flex;align-items:center;gap:7px;font-weight:600;font-size:13px;color:var(--g700);cursor:pointer}
.re-cfg-tog input{width:15px;height:15px;cursor:pointer}
.re-cfg-row input[type=text]{padding:7px 10px;border:1px solid var(--g200);border-radius:7px;font-size:12px;width:100%}
.re-cfg-row input[type=text]:focus{outline:none;border-color:var(--blue)}
.re-cfg-msg{margin-top:10px;font-size:13px;font-weight:600}
.re-cfg-msg.ok{color:#059669}
.re-cfg-msg.err{color:#dc2626}
@media (max-width:760px){
  .re-cfg-colh{display:none}
  .re-cfg-row{grid-template-columns:1fr;gap:4px;padding:8px 0;border-bottom:1px solid var(--g100)}
}