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