/* Fondo con tu imagen (puedes cambiar en style inline del template) */
.neural-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(59,130,246,.12), transparent 60%),
              radial-gradient(1000px 600px at 120% 110%, rgba(139,92,246,.10), transparent 60%),
              rgba(10,10,15,0.96);
}
.neural-bg::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image: var(--login-bg);
  background-size: cover; background-position: center;
  opacity:.18; filter:saturate(1.1) contrast(1.05);
}

/* Contenedor */
.login-wrap{ position:relative; z-index:1; width:100%; display:flex; justify-content:center; padding:24px; }
.login-card{
  background: rgba(15,15,20,.92); backdrop-filter: blur(18px);
  border:1px solid rgba(59,130,246,.20); border-radius:20px; width:min(460px,100%);
  padding:40px 32px; position:relative; overflow:hidden;
}
.ai-glow{ position:absolute; inset:-50%; pointer-events:none;
  background: radial-gradient(circle, rgba(59,130,246,.10) 0%, transparent 70%); animation:glow 6s ease-in-out infinite; }
@keyframes glow{ 0%,100%{transform:rotate(0) scale(1)} 50%{transform:rotate(180deg) scale(1.1)} }

.login-header{ text-align:center; margin-bottom:28px; }
.ai-logo{ position:relative; width:90px; height:90px; margin:0 auto 18px; }
.logo-core{
  position:relative; z-index:2; width:86px; height:86px; border-radius:9999px; overflow:hidden;
  display:grid; place-items:center; border:1px solid rgba(59,130,246,.35); background:rgba(20,20,28,.6);
}
.logo-core img{ width:78px; height:78px; object-fit:contain; filter:drop-shadow(0 0 12px rgba(59,130,246,.25)); }
.logo-rings .ring{ position:absolute; border:1px solid rgba(59,130,246,.35); border-radius:9999px; animation:ring 3s ease-in-out infinite; }
.ring-1{ inset:14px; animation-delay:0s } .ring-2{ inset:8px; animation-delay:1s } .ring-3{ inset:2px; animation-delay:2s }
@keyframes ring{ 0%,100%{opacity:.35; transform:scale(1)} 50%{opacity:.65; transform:scale(1.05)} }

.login-header h1{ color:#f8fafc; font-size:1.6rem; font-weight:700; letter-spacing:-.02em; margin:2px 0 6px; }
.login-header p{ color:#94a3b8; font-size:.92rem; }

/* Campos */
.smart-field{ position:relative; margin-bottom:22px; }
.field-background{ position:absolute; inset:0; background:rgba(30,41,59,.50); border:1px solid rgba(59,130,246,.20); border-radius:12px; transition:.25s; }
.smart-field input{ width:100%; background:transparent; border:none; padding:16px 50px 16px 16px; color:#f8fafc; font-size:15px; outline:0; position:relative; z-index:2; }
.smart-field input::placeholder{ color:transparent; }
.smart-field label{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:#74839a; font-size:15px; background:rgba(15,15,20,.8); padding:0 4px; transition:.25s; z-index:3; }
.smart-field input:focus + label, .smart-field input:not(:placeholder-shown)+label{ top:0; font-size:12px; font-weight:600; color:#3b82f6; transform:translateY(-50%); }
.smart-field input:focus ~ .field-background{ border-color:#3b82f6; background:rgba(30,41,59,.80); box-shadow:0 0 0 1px rgba(59,130,246,.45) }
.ai-indicator{ position:absolute; right:16px; top:50%; transform:translateY(-50%); width:6px; height:6px; }
.ai-pulse{ width:100%; height:100%; background:#3b82f6; border-radius:50%; opacity:0; animation:pulse 2s ease-in-out infinite; }
.smart-field input:focus ~ .ai-indicator .ai-pulse{ opacity:1 }
@keyframes pulse{ 0%,100%{transform:scale(1); opacity:.6} 50%{transform:scale(1.5); opacity:1} }
.field-completion{ position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,#3b82f6,#8b5cf6); width:0; border-radius:0 0 12px 12px; transition:width .5s }
.smart-field input:valid ~ .field-completion{ width:100% }

.smart-field:has(.smart-toggle) input{ padding-right:90px }
.smart-toggle{ position:absolute; right:50px; top:50%; transform:translateY(-50%); border:0; background:none; color:#74839a; padding:6px; border-radius:6px; z-index:4; }
.smart-toggle:hover{ color:#3b82f6; background:rgba(59,130,246,.10) }
.toggle-hide{ display:none } .smart-toggle.toggle-active .toggle-show{ display:none } .smart-toggle.toggle-active .toggle-hide{ display:block }

.form-options{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin:8px 0 24px }
.smart-checkbox{ display:flex; align-items:center; gap:10px; color:#cbd5e1; font-size:14px; }
.smart-checkbox input{ display:none }
.checkbox-ai{ width:20px; height:20px; position:relative; display:grid; place-items:center }
.checkbox-core{ position:absolute; inset:0; border:1.5px solid rgba(59,130,246,.4); border-radius:6px; background:rgba(30,41,59,.5); transition:.25s }
.smart-checkbox input:checked + .checkbox-ai .checkbox-core{ background:#3b82f6; border-color:#3b82f6; box-shadow:0 0 8px rgba(59,130,246,.4) }
.neural-link{ color:#3b82f6; text-decoration:none; font-size:14px }
.neural-link:hover{ color:#60a5fa }

.neural-button{ width:100%; min-height:50px; border-radius:12px; border:0; background:transparent; position:relative; margin-bottom:24px; color:#fff; font-weight:600; display:grid; place-items:center; overflow:hidden }
.button-bg{ position:absolute; inset:0; background:linear-gradient(135deg,#3b82f6,#8b5cf6); transition:.25s }
.neural-button:hover .button-bg{ background:linear-gradient(135deg,#2563eb,#7c3aed); transform:scale(1.02) }
.button-text{ position:relative; z-index:2 } .button-loader{ position:absolute; z-index:2; opacity:0; transition:.2s }
.neural-spinner{ display:flex; gap:4px } .spinner-segment{ width:4px; height:16px; background:#fff; border-radius:2px; animation:bars 1.2s ease-in-out infinite }
.spinner-segment:nth-child(2){ animation-delay:.1s } .spinner-segment:nth-child(3){ animation-delay:.2s }
@keyframes bars{ 0%,80%,100%{ transform:scaleY(.5); opacity:.5 } 40%{ transform:scaleY(1); opacity:1 } }
.neural-button.loading .button-text{ opacity:0 } .neural-button.loading .button-loader{ opacity:1 }
.button-glow{ position:absolute; inset:-2px; background:linear-gradient(135deg,#3b82f6,#8b5cf6); border-radius:14px; filter:blur(8px); opacity:0; transition:.25s; z-index:-1 }
.neural-button:hover .button-glow{ opacity:.6 }

.auth-separator{ display:flex; align-items:center; gap:16px; margin:18px 0 22px }
.separator-line{ flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(59,130,246,.3),transparent) }
.separator-text{ color:#74839a; font-size:.8rem; text-transform:uppercase; letter-spacing:.5px }

.neural-social{ display:flex; gap:12px; margin-bottom:20px }
.social-neural{ flex:1; position:relative; display:flex; align-items:center; justify-content:center; gap:8px; min-height:46px; border-radius:10px; color:#cbd5e1; text-decoration:none; overflow:hidden }
.social-bg{ position:absolute; inset:0; background:rgba(30,41,59,.5); border:1px solid rgba(59,130,246,.2); border-radius:10px; transition:.2s }
.social-glow{ position:absolute; inset:-1px; background:rgba(59,130,246,.2); border-radius:11px; filter:blur(4px); opacity:0; transition:.2s }
.social-neural:hover .social-bg{ background:rgba(30,41,59,.8); border-color:rgba(59,130,246,.4) }
.social-neural:hover .social-glow{ opacity:1 }

.signup-section{ text-align:center; color:#74839a; font-size:14px }
.neural-signup{ color:#3b82f6; text-decoration:none; font-weight:600 }
.neural-signup:hover{ color:#60a5fa }

/* Errores */
.alert-minor{ background:#1f2937; color:#fda4af; border:1px solid #ef44441a; padding:10px 12px; border-radius:8px; font-size:.9rem; margin-bottom:12px }
.error-message{ color:#ef4444; font-size:12px; margin-top:6px }

/* Responsive */
@media (max-width:480px){ .login-card{ padding:28px 22px; border-radius:16px } .ai-logo{ width:72px; height:72px } }



/* Collage triangular */
.tri-collage{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.tri{position:absolute; background-size:cover; background-position:center; filter:saturate(1.05) contrast(1.05); opacity:.28;}
.t1{clip-path:polygon(0 0,60% 0,0 60%); top:0; left:0; width:60%; height:60%; background-image:var(--img1);}
.t2{clip-path:polygon(100% 0,40% 0,100% 60%); top:0; right:0; width:60%; height:60%; background-image:var(--img2);}
.t3{clip-path:polygon(0 100%,0 40%,60% 100%); bottom:0; left:0; width:60%; height:60%; background-image:var(--img3);}
.t4{clip-path:polygon(100% 100%,40% 100%,100% 40%); bottom:0; right:0; width:60%; height:60%; background-image:var(--img4);}
.t5{clip-path:polygon(50% 10%,90% 50%,10% 50%); top:20%; left:15%; width:70%; height:60%; background-image:var(--img5); opacity:.22;}
.tri-overlay{position:absolute; inset:0; background:radial-gradient(circle at 20% -10%, rgba(59,130,246,.18), transparent 40%), radial-gradient(circle at 120% 110%, rgba(139,92,246,.15), transparent 40%), rgba(10,10,15,.86);}


/* === HARD-FIX LOGIN LAYOUT (append-only) ========================= */

/* 1) Anti-scroll lateral y centrado */
html, body { overflow-x: hidden; }
* { box-sizing: border-box; }
.login-wrap { display:flex; justify-content:center; padding:16px; }
.login-card, .login-form { max-width:520px; width:100%; margin:0 auto !important; }

/* 2) Inputs estables (no mover el fondo ni aplicar transforms) */
:root { --input-eye-space: 44px; }

.smart-field,
.smart-field * {
  transform: none !important;
  transition: none !important;
}

.field-background {
  position: absolute; inset: 0;         /* ocupa todo el campo */
  transform: none !important;           /* nunca se mueve */
}

.smart-field input {
  width: 100% !important;
  padding-right: var(--input-eye-space);
  font-size: 16px;
  border: 1px solid rgba(255,255,255,.18);
}

.smart-field input:focus {
  outline: 0;
  border-color: #547aff;
  box-shadow: 0 0 0 2px rgba(84,122,255,.25);
}

.smart-toggle {
  position: absolute;
  right: 10px; top: 50%;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  transform: translateY(-50%) !important;
}

.ai-indicator,
.field-completion {
  position: absolute;
  right: 52px; top: 50%;
  transform: translateY(-50%) !important;
  pointer-events: none;
}

/* 3) Botones sociales: solo ícono, tamaño fijo y sin estirarse */
.neural-social.icon-only {
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.neural-social.icon-only .social-neural {
  flex: 0 0 auto !important;            /* NO se estira */
  min-height: 0 !important;
  width: 40px !important; height: 40px !important;
  border-radius: 10px;
  display: grid; place-items: center;
  overflow: hidden; font-size: 0;
}
.neural-social.icon-only .social-bg,
.neural-social.icon-only .social-glow { display: none !important; }
.neural-social.icon-only .social-neural span { display: none !important; }
.neural-social.icon-only .social-neural svg,
.neural-social.icon-only .social-neural img {
  width: 20px !important; height: 20px !important; display: block;
}
@media (max-width:480px){
  .neural-social.icon-only .social-neural {
    width: 50px !important; height: 50px !important;
  }
}

/* 4) Evitar “arrastre” horizontal en mobile */
.login-card, .login-form {
  overscroll-behavior-x: none;
  touch-action: manipulation;
}


/* === FIX 1: barrita de "completion" al fondo, no en el medio === */
.field-completion{
  left: 0; right: 0;
  bottom: 0 !important;
  top: auto !important;
  height: 2px;
  transform: none !important;
}

/* Asegurá que SOLO el puntito use el centro vertical */
.ai-indicator{
  right: 16px; top: 50%;
  transform: translateY(-50%) !important;
}

/* === FIX 2: compactar la card en pantallas 1366x768 (y similares) === */
.login-wrap{ padding: 16px; }
.login-card{
  max-width: 420px !important;
  padding: 28px 22px !important;
}

/* Títulos y logo más chicos para evitar scroll */
.login-header h1{ font-size: 1.4rem !important; margin: 4px 0 6px; }
.login-header p{ font-size: .9rem !important; }
.ai-logo{ width: 72px !important; height: 72px !important; }
.logo-core{ width: 70px !important; height: 70px !important; }
.logo-core img{ width: 62px !important; height: 62px !important; }

/* Inputs compactos */
.smart-field{ margin-bottom: 14px !important; }
.smart-field input{ padding: 12px 44px 12px 14px !important; font-size: 15px !important; }
.smart-toggle{ right: 10px; }

/* Botón y separador más finos */
.neural-button{ min-height: 44px !important; margin-bottom: 16px !important; }
.auth-separator{ margin: 12px 0 14px !important; }

/* Iconos sociales chicos y sin estirar */
.neural-social.icon-only{ gap: 10px !important; }
.neural-social.icon-only .social-neural{
  flex: 0 0 auto !important;
  width: 36px !important; height: 36px !important;
}
.neural-social.icon-only .social-neural svg,
.neural-social.icon-only .social-neural img{
  width: 18px !important; height: 18px !important;
}

/* En alturas bajas (laptops) aún más compacto */
@media (max-height: 820px){
  .login-card{ padding: 24px 18px !important; }
  .ai-logo{ width: 64px !important; height: 64px !important; }
  .logo-core{ width: 62px !important; height: 62px !important; }
  .logo-core img{ width: 56px !important; height: 56px !important; }
  .neural-button{ min-height: 42px !important; }
}

/* === Triángulos más visibles + rombo con fallback real === */

/* quita el lavado (capa oscura y gradientes) */
.tri-overlay{
  background: none !important;
}

/* sube visibilidad de cada triángulo */
.tri{
  opacity: .58 !important;                  /* antes .22/.28 */
  filter: saturate(1.15) contrast(1.08) !important;
  mix-blend-mode: normal !important;
}

/* fallbacks por si alguna var no viene */
.t1{ background-image: var(--img1, url("/static/core/img/bg1.d1380d51900c.jpg")) !important; }
.t2{ background-image: var(--img2, url("/static/core/img/bg2.35d479edeb27.jpeg")) !important; }
.t3{ background-image: var(--img3, url("/static/core/img/bg3.d1380d51900c.jpg")) !important; }
.t4{ background-image: var(--img4, url("/static/core/img/bg4.9cc9d2a96ddc.jpg")) !important; }
.t5{ background-image: var(--img5, url("/static/core/img/bg5.d39a07bb6287.jpg")) !important; }
.t6{ background-image: var(--img6, url("/static/core/img/bg6.9cc9d2a96ddc.jpg")) !important; }

/* rombo central: usa --img5, y si falta, cae a bg5 luego bg4 */
.t5{
  background-image:
    var(--img5),
    url("/static/core/img/bg5.d39a07bb6287.jpg"),
    url("/static/core/img/bg6.9cc9d2a96ddc.jpg"),
    url("/static/core/img/bg4.9cc9d2a96ddc.jpg") !important;
  opacity: .62 !important;                  /* que destaque un poco más */
}

/* base de imagen a pantalla completa: garantiza que no haya huecos */
.tri-base{
  position:absolute; inset:0;
  background-image: var(--imgBase, var(--img6, url("/static/core/img/bg6.9cc9d2a96ddc.jpg")));
  background-size: cover; background-position:center;
  opacity:.70;                           /* más visible que antes */
  filter:saturate(1.5) contrast(1.55);
  z-index:0;
}

/* seguimos sin “velo” encima */
.tri-overlay{ background:none !important; }

/* triángulos: más opacos y con más solapamiento para no dejar juntas */
.tri{
  position:absolute; z-index:1;
  background-size:cover; background-position:center;
  opacity:.90 !important;
  filter:saturate(1.15) contrast(1.08) !important;
}

/* aumentamos a 70% para cubrir mejor y solapar */
.t1{ clip-path:polygon(0 0,70% 0,0 70%); top:0; left:0; width:70%; height:70%;
     background-image: var(--img1, url("/static/core/img/bg1.d1380d51900c.jpg")) !important; }

.t2{ clip-path:polygon(100% 0,30% 0,100% 70%); top:0; right:0; width:70%; height:70%;
     background-image: var(--img2, url("/static/core/img/bg2.35d479edeb27.jpeg")) !important; }

.t3{ clip-path:polygon(0 100%,0 30%,70% 100%); bottom:0; left:0; width:70%; height:70%;
     background-image: var(--img3, url("/static/core/img/bg3.d1380d51900c.jpg")) !important; }

.t4{ clip-path:polygon(100% 100%,30% 100%,100% 30%); bottom:0; right:0; width:70%; height:70%;
     background-image: var(--img4, url("/static/core/img/bg4.9cc9d2a96ddc.jpg")) !important; }

/* si dejás t5/t6, podés reutilizarlos para pequeños rellenos, si no, eliminar */
.t5,.t6{ display:none; }