/* =====================================================================
   ECAST · Estilos EXCLUSIVOS de la pantalla de login
   Todo va bajo  body.ecast-login  -> esa clase SOLO existe en el login
   (la pone/quita ecast-login.js). Cuando entras al panel, la clase se
   retira y NADA de esto afecta el panel interior.
   ===================================================================== */

body.ecast-login{
  --ecast-blue:#002DAB;
  --ecast-blue2:#1f5cff;
  --ecast-accent:#00e0ff;
  background:linear-gradient(135deg,#0a1230 0%,#0d2050 45%,#0a2e6b 100%) fixed !important;
  min-height:100vh;
}

/* Oculta el logo original de Flussonic desde el primer pintado (sin parpadeo) */
body.ecast-login .border-bottom img,
body.ecast-login .border-bottom > a,
body.ecast-login .border-bottom svg:not(.ecast-svg){
  display:none !important;
}

/* ---------- Animaciones ---------- */
@keyframes ecastFadeUp{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:translateY(0)}}
@keyframes ecastDash{to{stroke-dashoffset:0}}
@keyframes ecastPulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.08);opacity:1}}
@keyframes ecastWave{0%{transform:scaleY(.4)}50%{transform:scaleY(1)}100%{transform:scaleY(.4)}}
@keyframes ecastSpin{to{transform:rotate(360deg)}}
@keyframes ecastShine{to{background-position:200% center}}

/* ---------- Logo ECAST ---------- */
body.ecast-login .ecast-brand{
  width:420px;max-width:90vw;margin:0 auto 6px;
  text-align:center;
  animation:ecastFadeUp .9s ease both;
}
body.ecast-login .ecast-logo-wrap{position:relative;display:inline-block;}
body.ecast-login .ecast-svg{width:230px;height:auto;display:block;margin:0 auto 4px;}
body.ecast-login .ecast-svg .ring{
  fill:none;stroke:var(--ecast-blue2);stroke-width:6;stroke-linecap:round;
  stroke-dasharray:360;stroke-dashoffset:360;
  animation:ecastDash 1.6s ease forwards .2s, ecastSpin 14s linear infinite 1.8s;
  transform-origin:60px 60px;
}
body.ecast-login .ecast-svg .ring2{
  fill:none;stroke:var(--ecast-accent);stroke-width:4;opacity:.7;stroke-linecap:round;
  stroke-dasharray:220;stroke-dashoffset:220;
  animation:ecastDash 1.6s ease forwards .5s, ecastSpin 9s linear infinite reverse 1.8s;
  transform-origin:60px 60px;
}
body.ecast-login .ecast-svg .dot{fill:var(--ecast-accent);animation:ecastPulse 2s ease-in-out infinite;transform-origin:60px 60px;}
body.ecast-login .ecast-bars{display:flex;gap:5px;justify-content:center;align-items:flex-end;height:22px;margin-top:2px;}
body.ecast-login .ecast-bars span{
  display:block;width:5px;height:100%;border-radius:3px;
  background:linear-gradient(var(--ecast-blue2),var(--ecast-accent));
  animation:ecastWave 1s ease-in-out infinite;
}
body.ecast-login .ecast-bars span:nth-child(1){animation-delay:0s}
body.ecast-login .ecast-bars span:nth-child(2){animation-delay:.15s}
body.ecast-login .ecast-bars span:nth-child(3){animation-delay:.3s}
body.ecast-login .ecast-bars span:nth-child(4){animation-delay:.45s}
body.ecast-login .ecast-bars span:nth-child(5){animation-delay:.6s}
body.ecast-login .ecast-bars span:nth-child(6){animation-delay:.75s}
body.ecast-login .ecast-bars span:nth-child(7){animation-delay:.9s}
body.ecast-login .ecast-title{
  font-family:'Segoe UI',Arial,sans-serif;
  font-size:60px;font-weight:900;letter-spacing:9px;margin:4px 0 0;line-height:1;
  background:linear-gradient(90deg,var(--ecast-blue),var(--ecast-blue2),var(--ecast-accent));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--ecast-blue);
  background-size:200% auto;animation:ecastShine 4s linear infinite;
}
body.ecast-login .ecast-sub{
  font-family:'Segoe UI',Arial,sans-serif;
  font-size:14px;color:#aab8e0;letter-spacing:10px;
  margin-top:8px;text-transform:uppercase;font-weight:600;
}

/* ---------- Tarjeta del formulario ---------- */
body.ecast-login .MuiGrid-container{ justify-content:center !important; }

/* Columna que contiene los inputs -> tarjeta */
body.ecast-login .MuiGrid-item.MuiGrid-grid-md-4:has(input){
  margin:0 auto !important;
  background:rgba(255,255,255,0.97);
  border-radius:20px;
  padding:26px 30px 30px !important;
  box-shadow:0 30px 80px rgba(0,15,60,.55), 0 0 0 1px rgba(120,160,255,.15);
  animation:ecastFadeUp .8s ease both .15s;
}
/* Columna vacía hermana -> oculta */
body.ecast-login .MuiGrid-item.MuiGrid-grid-md-4:not(:has(input)){
  display:none !important;
}

/* Etiquetas como títulos arriba de cada campo */
body.ecast-login .MuiInputLabel-root,
body.ecast-login .MuiFormLabel-root{
  position:static !important;transform:none !important;display:block !important;
  margin:0 0 4px 2px !important;
  font-family:'Segoe UI',Arial,sans-serif !important;
  font-size:13px !important;color:#33456b !important;font-weight:700 !important;
  letter-spacing:.6px;max-width:none !important;
}

/* Inputs rellenos y redondeados */
body.ecast-login .MuiInput-root,
body.ecast-login .MuiInputBase-root{
  background:#eef3ff !important;border-radius:12px !important;
  padding:4px 14px !important;margin-top:0 !important;
  transition:box-shadow .25s, background .25s;
}
body.ecast-login .MuiInput-root:hover{background:#e6edff !important;}
body.ecast-login .MuiInput-root.Mui-focused{background:#fff !important;box-shadow:0 0 0 2px var(--ecast-blue2);}
body.ecast-login .MuiInput-input,
body.ecast-login .MuiInputBase-input{
  font-family:'Segoe UI',Arial,sans-serif !important;
  font-size:16px !important;color:#10203f !important;padding:10px 2px !important;
}
body.ecast-login .MuiInput-underline:before,
body.ecast-login .MuiInput-underline:after,
body.ecast-login .MuiInput-underline:hover:not(.Mui-disabled):before{
  border-bottom:0 !important;content:none !important;
}

/* Separación entre campos */
body.ecast-login .MuiTextField-root{margin-bottom:14px !important;display:block !important;width:100% !important;}

/* Columna del botón -> ancho completo */
body.ecast-login .MuiBox-root:has(> .MuiButton-containedPrimary),
body.ecast-login .MuiGrid-item:has(.MuiButton-containedPrimary){
  width:100% !important;max-width:100% !important;flex-basis:100% !important;display:block !important;
}

/* Botón SIGN */
body.ecast-login .MuiButton-containedPrimary{
  display:block !important;
  background:linear-gradient(90deg,var(--ecast-blue),var(--ecast-blue2)) !important;
  width:100% !important;border-radius:12px !important;padding:12px 0 !important;margin-top:18px !important;
  font-family:'Segoe UI',Arial,sans-serif !important;font-weight:700 !important;font-size:16px !important;
  letter-spacing:3px !important;text-transform:uppercase !important;
  box-shadow:0 10px 25px rgba(0,45,171,.45) !important;
  transition:transform .15s, box-shadow .25s, filter .2s;
}
body.ecast-login .MuiButton-containedPrimary:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 16px 35px rgba(31,92,255,.55) !important;}
body.ecast-login .MuiButton-containedPrimary:active{transform:translateY(0);}