/* ============================================
   OC360 Login Page - Vanilla CSS
   Replica do OC360 2.0 (Next.js) para WebForms
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* === Layout Principal === */
.login-page{
  font-family:'Nunito',sans-serif;
  display:flex;
  height:100vh;
  overflow:hidden;
  background:#073e50;
}

/* === HERO (lado esquerdo 60%) === */
.login-hero{
  display:none;
  position:relative;
  width:60%;
  overflow:hidden;
  background:#073e50;
}

@media(min-width:1024px){
  .login-hero{display:flex}
}

/* --- Camada 1: Gradientes base --- */
.hero-gradients{
  position:absolute;inset:0;opacity:.4;
  background:
    radial-gradient(circle at 20% 30%,rgba(6,182,212,.6) 0%,transparent 60%),
    radial-gradient(circle at 80% 20%,rgba(147,51,234,.5) 0%,transparent 60%),
    radial-gradient(circle at 60% 80%,rgba(59,130,246,.4) 0%,transparent 60%),
    radial-gradient(circle at 30% 70%,rgba(16,185,129,.4) 0%,transparent 60%),
    radial-gradient(circle at 90% 60%,rgba(236,72,153,.3) 0%,transparent 50%);
}

/* --- Camada 2: Grid tecnológico --- */
.hero-grid{
  position:absolute;inset:0;opacity:.25;
  background:
    linear-gradient(rgba(6,182,212,.6) 1px,transparent 1px),
    linear-gradient(90deg,rgba(6,182,212,.6) 1px,transparent 1px),
    linear-gradient(rgba(147,51,234,.4) 1px,transparent 1px),
    linear-gradient(90deg,rgba(147,51,234,.4) 1px,transparent 1px);
  background-size:50px 50px,50px 50px,100px 100px,100px 100px;
}

/* --- Camada 3: Textura hexagonal (circles) --- */
.hero-hex{
  position:absolute;inset:0;opacity:.15;
  background-image:url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%2306B6D4' fill-opacity='0.8'%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size:80px 80px;
}

/* --- Camada 4: Scan lines animadas --- */
.hero-scanlines{position:absolute;inset:0;opacity:.15}
.scanline{
  position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(6,182,212,.8),transparent);
  transform:scaleX(0);
  animation:scanline 4s ease-in-out infinite;
}
.scanline:nth-child(1){top:10%;animation-delay:0s}
.scanline:nth-child(2){top:22%;animation-delay:.5s}
.scanline:nth-child(3){top:34%;animation-delay:1s}
.scanline:nth-child(4){top:46%;animation-delay:1.5s}
.scanline:nth-child(5){top:58%;animation-delay:2s}
.scanline:nth-child(6){top:70%;animation-delay:2.5s}
.scanline:nth-child(7){top:82%;animation-delay:3s}
.scanline:nth-child(8){top:94%;animation-delay:3.5s}

@keyframes scanline{
  0%,100%{transform:scaleX(0);opacity:0}
  50%{transform:scaleX(1);opacity:.6}
}

/* --- Camada 5: Mouse tracking gradient (JS sets --mx, --my) --- */
.hero-mouse{
  position:absolute;inset:0;
  background:
    radial-gradient(circle 250px at var(--mx,50%) var(--my,50%),rgba(6,182,212,.25) 0%,transparent 60%),
    radial-gradient(circle 150px at calc(var(--mx,50%) + 100px) calc(var(--my,50%) + 50px),rgba(147,51,234,.2) 0%,transparent 70%);
  pointer-events:none;
}

/* --- Camada 6: Pulso de energia --- */
.hero-pulse{
  position:absolute;inset:0;
  animation:energyPulse 4s ease-in-out infinite;
}
@keyframes energyPulse{
  0%,100%{background:radial-gradient(circle 200px at 25% 25%,rgba(6,182,212,.3) 0%,transparent 50%)}
  50%{background:radial-gradient(circle 300px at 25% 25%,rgba(6,182,212,.1) 0%,transparent 70%)}
}

/* === Partículas === */
.particles-container{position:absolute;inset:0;pointer-events:none}
.particle{
  position:absolute;
  border-radius:50%;
  opacity:.6;
  will-change:transform;
  animation:particleFloat 12s ease-in-out infinite alternate;
}
.particle--cyan{background:#22d3ee;box-shadow:0 0 12px rgba(6,182,212,.7)}
.particle--purple{background:#c084fc;box-shadow:0 0 12px rgba(147,51,234,.7)}
.particle--blue{background:#60a5fa;box-shadow:0 0 12px rgba(59,130,246,.7)}
.particle--green{background:#34d399;box-shadow:0 0 12px rgba(16,185,129,.7)}

@keyframes particleFloat{
  0%{transform:translate(0,0) scale(1);opacity:.6}
  50%{transform:translate(var(--px,30px),var(--py,30px)) scale(1.8);opacity:.9}
  100%{transform:translate(var(--px2,-20px),var(--py2,-20px)) scale(1);opacity:.6}
}

/* === Circuitos SVG (rotação) === */
.circuit-tl{
  position:absolute;top:80px;left:80px;opacity:.25;
  width:192px;height:192px;
  animation:spin 40s linear infinite;
}
.circuit-br{
  position:absolute;bottom:80px;right:80px;opacity:.25;
  width:160px;height:160px;
  animation:spin 35s linear infinite reverse;
}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* === Elementos geométricos flutuantes === */
.geo-square{
  position:absolute;top:33%;left:25%;opacity:.2;
  width:64px;height:64px;
  border:2px solid #22d3ee;border-radius:8px;
  animation:geoFloat1 8s ease-in-out infinite;
}
@keyframes geoFloat1{
  0%,100%{transform:translateY(-20px) rotate(0deg) scale(1)}
  50%{transform:translateY(20px) rotate(180deg) scale(1.1)}
}
.geo-circle{
  position:absolute;bottom:33%;right:25%;opacity:.2;
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,#c084fc,#60a5fa);
  animation:geoFloat2 6s ease-in-out infinite;
}
@keyframes geoFloat2{
  0%,100%{transform:translate(-15px,0) rotate(0deg) scale(1)}
  50%{transform:translate(15px,0) rotate(-180deg) scale(1.2)}
}

/* === Conexões de rede SVG === */
.network-paths{position:absolute;inset:0;opacity:.15;pointer-events:none}
.network-paths path{
  stroke-dasharray:10 5;
  animation:dashMove 8s linear infinite;
}
.network-paths path:nth-child(2){
  stroke-dasharray:8 4;
  animation:dashMove 6s linear infinite reverse;
}
@keyframes dashMove{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-50px}}

/* === Ícones Tech flutuantes === */
.tech-icons{position:absolute;inset:0;pointer-events:none}
.tech-icon{
  position:absolute;opacity:.4;
  will-change:transform;
  filter:drop-shadow(0 0 8px var(--glow));
}
.tech-icon svg{width:100%;height:100%}
.ti-smartphone{top:128px;left:40px;width:40px;height:40px;--glow:rgba(6,182,212,.6);color:#22d3ee;animation:techFloat 4s ease-in-out infinite}
.ti-cpu{top:160px;right:80px;width:48px;height:48px;--glow:rgba(147,51,234,.6);color:#c084fc;animation:techFloat 5s ease-in-out infinite 1s}
.ti-cloud{bottom:160px;left:80px;width:56px;height:56px;--glow:rgba(59,130,246,.6);color:#60a5fa;animation:techFloat 6s ease-in-out infinite 2s}
.ti-wifi{top:240px;left:25%;width:32px;height:32px;--glow:rgba(16,185,129,.6);color:#34d399;animation:techFloat 8s ease-in-out infinite}
.ti-network{top:50%;right:33%;width:40px;height:40px;--glow:rgba(236,72,153,.6);color:#f472b6;animation:techFloat 7s ease-in-out infinite .5s}
.ti-database{bottom:50%;left:33%;width:36px;height:36px;--glow:rgba(251,191,36,.6);color:#fbbf24;animation:techFloat 9s ease-in-out infinite 1.5s}

@keyframes techFloat{
  0%,100%{transform:translateY(0) rotate(0deg) scale(1)}
  50%{transform:translateY(-20px) rotate(15deg) scale(1.15)}
}

/* === Light points pulsantes === */
.light-point{
  position:absolute;width:8px;height:8px;
  background:#22d3ee;border-radius:50%;opacity:.6;
  filter:drop-shadow(0 0 6px rgba(6,182,212,.8));
  animation:lightPulse 2s ease-in-out infinite;
}
.light-point:nth-child(1){top:20%;left:10%;animation-delay:0s}
.light-point:nth-child(2){top:35%;left:25%;animation-delay:.3s}
.light-point:nth-child(3){top:50%;left:40%;animation-delay:.6s}
.light-point:nth-child(4){top:65%;left:55%;animation-delay:.9s}
.light-point:nth-child(5){top:80%;left:70%;animation-delay:1.2s}
.light-point:nth-child(6){top:95%;left:85%;animation-delay:1.5s}

@keyframes lightPulse{
  0%,100%{transform:scale(1);opacity:.6}
  50%{transform:scale(1.5);opacity:1}
}

/* === Channel Icons flutuantes === */
.channel-icons{position:absolute;inset:0;pointer-events:none}
.channel-icon{position:absolute;will-change:transform}
.channel-icon img{width:100%;height:100%;object-fit:contain}
.ci-whatsapp{top:80px;right:128px;width:60px;height:60px;filter:drop-shadow(0 0 20px rgba(37,211,102,.6));animation:channelFloat 4s ease-in-out infinite}
.ci-facebook{top:192px;right:80px;width:55px;height:55px;filter:drop-shadow(0 0 20px rgba(24,119,242,.6));animation:channelFloat 5s ease-in-out infinite .5s}
.ci-instagram{top:320px;right:112px;width:58px;height:58px;filter:drop-shadow(0 0 20px rgba(225,48,108,.6));animation:channelFloat 4.5s ease-in-out infinite 1s}
.ci-webchat{bottom:160px;right:96px;width:56px;height:56px;filter:drop-shadow(0 0 20px rgba(6,182,212,.6));animation:channelFloat 3.8s ease-in-out infinite 1.5s;color:#22d3ee}
.ci-webchat svg{width:100%;height:100%}

@keyframes channelFloat{
  0%,100%{transform:translateY(0) rotate(0deg) scale(1)}
  50%{transform:translateY(-15px) rotate(5deg) scale(1.08)}
}

/* === Hero Content (imagem central) === */
.hero-content{
  position:relative;z-index:10;
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;padding:32px;
}
.hero-image-wrapper{
  position:relative;
  transform:translateY(80px) translateX(32px);
}
.hero-image-wrapper img{
  width:550px;height:auto;object-fit:contain;
  animation:heroFadeIn .8s ease-out;
}
@keyframes heroFadeIn{
  0%{opacity:0;transform:scale(.8)}
  100%{opacity:1;transform:scale(1)}
}

/* === Chat Simulation Widget === */
.chat-sim{
  position:absolute;
  top:24px;left:-64px;
  width:208px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);
  border-radius:16px;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.25);
  border:1px solid #e5e7eb;
  overflow:hidden;
  z-index:30;
  animation:chatSlideIn 1s ease-out .3s both;
}
@keyframes chatSlideIn{
  0%{opacity:0;transform:translateX(-100px)}
  100%{opacity:1;transform:translateX(0)}
}

/* Chat header */
.chat-sim-header{
  padding:8px;color:#fff;
  display:flex;align-items:center;justify-content:space-between;
}
.chat-sim-header.ch-whatsapp{background:#22c55e}
.chat-sim-header.ch-instagram{background:#a855f7}
.chat-sim-header.ch-facebook{background:#3b82f6}
.chat-sim-header.ch-webchat{background:#06b6d4}

.chat-sim-avatar{
  width:24px;height:24px;
  background:rgba(255,255,255,.2);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;
}
.chat-sim-info{flex:1;margin-left:8px}
.chat-sim-name{font-weight:700;font-size:12px}
.chat-sim-channel{font-size:10px;opacity:.9;display:flex;align-items:center;gap:4px}
.chat-sim-channel::before{
  content:'';width:4px;height:4px;
  background:#4ade80;border-radius:50%;
  animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Chat messages */
.chat-sim-messages{
  padding:8px;height:208px;overflow-y:auto;
  background:#f9fafb;
  scrollbar-width:none;
}
.chat-sim-messages::-webkit-scrollbar{display:none}

.chat-msg{
  display:flex;margin-bottom:8px;
  animation:msgAppear .4s cubic-bezier(.34,1.56,.64,1) both;
}
.chat-msg--client{justify-content:flex-start}
.chat-msg--bot,.chat-msg--agent{justify-content:flex-end}

.chat-bubble{
  max-width:75%;border-radius:12px;
  padding:6px 8px;box-shadow:0 1px 3px rgba(0,0,0,.1);
  font-size:11px;line-height:1.3;text-align:left;
}
.chat-bubble--client{background:#fff;border:1px solid #e5e7eb;color:#1f2937}
.chat-bubble--bot{background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe;color:#374151}
.chat-bubble--agent{background:#3b82f6;color:#fff}

.chat-bubble-sender{font-size:10px;font-weight:500;margin-bottom:2px;display:flex;align-items:center;gap:4px}
.chat-bubble-sender svg{width:10px;height:10px}
.chat-bubble--bot .chat-bubble-sender{color:#3b82f6}
.chat-bubble--agent .chat-bubble-sender{color:rgba(255,255,255,.8)}

.chat-bubble-meta{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:4px;font-size:9px;
}
.chat-bubble--client .chat-bubble-meta{color:#6b7280}
.chat-bubble--agent .chat-bubble-meta{color:rgba(255,255,255,.7)}
.chat-bubble--bot .chat-bubble-meta{color:#6b7280}

.chat-bubble-status svg{width:10px;height:10px}
.status-read{color:#3b82f6}
.status-delivered{color:#9ca3af}
.status-sending{color:#9ca3af;animation:spin 1s linear infinite}

@keyframes msgAppear{
  0%{opacity:0;transform:translateY(15px) scale(.85)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

/* Typing indicator */
.chat-typing{
  display:flex;justify-content:flex-start;margin-bottom:8px;
  animation:msgAppear .3s cubic-bezier(.34,1.56,.64,1) both;
}
.chat-typing-bubble{
  background:#e5e7eb;border-radius:12px;
  padding:8px 12px;display:flex;align-items:center;gap:6px;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.typing-dots{display:flex;gap:3px;align-items:end}
.typing-dot{
  width:6px;height:6px;background:#6b7280;border-radius:50%;
  animation:typingBounce .8s ease-in-out infinite;
}
.typing-dot:nth-child(2){animation-delay:.15s}
.typing-dot:nth-child(3){animation-delay:.3s}
@keyframes typingBounce{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-4px) scale(1.1)}
}
.typing-text{font-size:10px;color:#6b7280;animation:typingFade 1.5s ease-in-out infinite}
@keyframes typingFade{0%,100%{opacity:.6}50%{opacity:1}}

/* Chat input bar */
.chat-sim-input{
  padding:8px;background:#fff;border-top:1px solid #e5e7eb;
  display:flex;align-items:center;gap:8px;
}
.chat-sim-input-field{
  flex:1;background:#f3f4f6;border-radius:9999px;
  padding:6px 12px;font-size:10px;color:#6b7280;
}
.chat-sim-input-send{
  width:28px;height:28px;background:#3b82f6;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;flex-shrink:0;
}
.chat-sim-input-send svg{width:12px;height:12px}

/* === FORM SIDE (direita 40%) === */
.login-form-side{
  width:100%;display:flex;align-items:center;justify-content:center;
  background:#fff;padding:16px;
}
@media(min-width:1024px){
  .login-form-side{width:40%;padding:32px}
}

.login-form-container{width:100%;max-width:448px}

/* Logo */
.login-logo{text-align:center;margin-bottom:32px}
.login-logo img{margin:0 auto 24px;width:200px;height:auto}

/* Heading */
.login-heading{
  font-size:24px;font-weight:700;
  color:#1f2937;margin-bottom:8px;text-align:center;
}
@media(min-width:640px){.login-heading{font-size:28px}}
.login-subheading{
  color:#6b7280;text-align:center;margin-bottom:32px;font-size:15px;
}

/* Form fields */
.login-field{margin-bottom:16px}
.login-field label{
  display:block;font-weight:500;margin-bottom:8px;
  color:#1f2937;font-size:14px;
}
.login-field .input-wrap{position:relative}
.login-field .input-icon{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  color:#9ca3af;pointer-events:none;
}
.login-field .input-icon svg{width:18px;height:18px}
.login-field input{
  width:100%;height:44px;
  padding:0 16px 0 44px;
  border:1px solid #e5e7eb;border-radius:8px;
  font-size:14px;font-family:'Nunito',sans-serif;
  background:#fff;color:#1f2937;
  transition:border-color .2s,box-shadow .2s;
  outline:none;
}
.login-field input::placeholder{color:#9ca3af}
.login-field input:focus{
  border-color:#4361ee;
  box-shadow:0 0 0 3px rgba(67,97,238,.15);
}
.login-field input.input-error{border-color:#ef4444}
.login-error-text{color:#ef4444;font-size:13px;margin-top:6px}

/* Password toggle */
.input-toggle-pw{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  cursor:pointer;color:#9ca3af;padding:2px;
  transition:color .2s;
}
.input-toggle-pw:hover{color:#4361ee}
.input-toggle-pw svg{display:block}

/* Submit button */
.btn-login-gradient{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:44px;margin-top:24px;
  border:0;border-radius:8px;
  font-family:'Nunito',sans-serif;
  font-size:14px;font-weight:600;
  text-transform:uppercase;letter-spacing:.5px;
  color:#fff;cursor:pointer;
  background:linear-gradient(135deg,#EF1262,#4361EE);
  box-shadow:0 10px 20px -10px rgba(67,97,238,.44);
  transition:all .3s ease;
}
.btn-login-gradient:hover{
  background:linear-gradient(135deg,#4361EE,#EF1262);
  box-shadow:none;
}
.btn-login-gradient:disabled{opacity:.5;cursor:not-allowed}

/* Error div (server-side) */
.login-server-error{
  color:#ef4444;font-size:13px;margin-top:8px;
}

/* === Reduced motion === */
@media(prefers-reduced-motion:reduce){
  .particle,.scanline,.circuit-tl,.circuit-br,.geo-square,.geo-circle,
  .tech-icon,.light-point,.channel-icon,.chat-msg,.hero-pulse,
  .network-paths path,.typing-dot,.typing-text{
    animation:none!important;
  }
}