/* Paleta HI-PERSOL */
:root{
  --hp-bg:#0b0d10;            /* negro industrial */
  --hp-card:#0f141aee;        /* vidrio oscuro */
  --hp-stroke:#273447;        /* azul acero */
  --hp-primary:#1f3b5b;       /* azul marino del logo */
  --hp-accent:#c44e2e;        /* naranja/rojo INDUSTRIAL */
  --hp-text:#e6e9ef;          /* texto claro */
  --hp-muted:#98a2ad;         /* texto tenue */
  --hp-ok:#24c38a;
  --hp-warn:#f1b434;
  --hp-err:#ff5d5d;
  --hp-radius:18px;
  --hp-shadow:0 20px 60px rgba(0,0,0,.45);
}

/* Layout base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, "Segoe UI", Roboto, system-ui, -apple-system, Arial, sans-serif;
  background:var(--hp-bg);
  color:var(--hp-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.hp-auth{
  position:relative;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:32px 16px;
  overflow:hidden;
}

/* Fondo hexagonal animado */
.hp-bg{position:absolute; inset:0; overflow:hidden;}
.hp-grid{
  position:absolute; inset:-200px;
  background:
    radial-gradient(circle at 50% 50%, rgba(196,78,46,.08), transparent 50%) 0 0/100% 100% no-repeat,
    repeating-linear-gradient(60deg, transparent 0 30px, rgba(255,255,255,.03) 30px 31px),
    repeating-linear-gradient(-60deg, transparent 0 30px, rgba(255,255,255,.03) 30px 31px);
  filter:contrast(1.05);
  animation: drift 26s linear infinite;
}
@keyframes drift{ from{transform:translate3d(0,0,0) rotate(0)} to{transform:translate3d(0,10px,0) rotate(.5deg)} }

.hp-glow{
  position:absolute; inset:0;
  background:
    radial-gradient(800px 400px at 20% 20%, rgba(31,59,91,.35), transparent 60%),
    radial-gradient(600px 300px at 80% 70%, rgba(196,78,46,.25), transparent 65%);
  mix-blend-mode:screen; pointer-events:none;
  animation:pulse 8s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.9}50%{opacity:.6}}

/* Tarjeta */
.hp-card{
  position:relative;
  width:min(440px, 100%);
  backdrop-filter: blur(12px);
  background:linear-gradient(180deg, rgba(17,23,29,.9), rgba(12,16,20,.9));
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--hp-radius);
  box-shadow:var(--hp-shadow);
  padding:28px 26px 20px;
  z-index:1;
}

/* Encabezado */
.hp-header{ text-align:center; margin-bottom:12px; }
.hp-logo{ width:min(220px, 70%); height:auto; display:block; margin:0 auto 8px; }
.hp-header h1{
  font-size:1.35rem; margin:.25rem 0 .25rem; letter-spacing:.3px; font-weight:700;
}
.hp-sub{ color:var(--hp-muted); margin:0 0 8px; }

/* Formulario */
.hp-form{ margin-top:12px; display:grid; gap:14px; }
.hp-field label{
  display:block; font-size:.9rem; color:var(--hp-muted); margin:0 0 6px 2px;
}
.hp-field input{
  width:100%; padding:14px 14px; border-radius:12px;
  border:1px solid #263241; background:#0f1319; color:var(--hp-text);
  outline:none; transition:border-color .2s, box-shadow .2s;
}
.hp-field input:focus{
  border-color:var(--hp-primary);
  box-shadow:0 0 0 3px rgba(31,59,91,.25);
}
.hp-help{ color:#7f8b98; font-size:.8rem; margin-top:6px; display:block; }

/* Password + toggle */
.hp-passwrap{ position:relative; }
.hp-passwrap input{ padding-right:44px; }
.hp-toggle{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:10px; border:1px solid #243245;
  background:#0f161e; display:grid; place-items:center; cursor:pointer;
  transition:background .2s, border-color .2s, transform .06s;
}
.hp-toggle:hover{ background:#121b26; border-color:#2a3a51; }
.hp-toggle:active{ transform:translateY(-50%) scale(.98); }
.hp-toggle.is-on svg{ fill:var(--hp-accent); }
.hp-toggle svg{ fill:#7e8ca0; }

/* Fila utilidades */
.hp-row{
  display:flex; justify-content:space-between; align-items:center;
  gap:10px; margin-top:4px;
}
.hp-check{ display:inline-flex; align-items:center; gap:8px; color:#9aa7b5; font-size:.9rem; }
.hp-check input{ width:18px; height:18px; accent-color:var(--hp-primary); }
.hp-link{ color:var(--hp-accent); text-decoration:none; font-size:.9rem; }
.hp-link:hover{ text-decoration:underline; }

/* Botón */
.hp-btn{
  position:relative; width:100%;
  border:0; border-radius:14px; padding:13px 16px;
  background:linear-gradient(180deg, #264a74, #1f3b5b);
  color:#fff; font-weight:700; letter-spacing:.3px; cursor:pointer;
  box-shadow:0 10px 28px rgba(31,59,91,.35);
  transition:transform .06s ease, box-shadow .2s ease, filter .2s ease;
}
.hp-btn:hover{ filter:brightness(1.05); box-shadow:0 12px 32px rgba(31,59,91,.45); }
.hp-btn:active{ transform:translateY(1px); }
.hp-btn[disabled]{ opacity:.75; cursor:not-allowed; }

/* Spinner */
.hp-spinner{
  --sz:18px;
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:var(--sz); height:var(--sz); border-radius:50%;
  border:3px solid rgba(255,255,255,.25); border-top-color:#fff;
  animation:spin .9s linear infinite; display:none;
}
.hp-btn.is-loading .hp-spinner{ display:block; }
.hp-btn.is-loading .hp-btn__label{ opacity:.85; }

@keyframes spin { to{ transform:translateY(-50%) rotate(360deg); } }

/* Alertas */
.hp-alert{
  margin-top:12px; padding:10px 12px; border-radius:12px; font-size:.92rem;
  border:1px solid transparent; background:#121920;
}
.hp-alert--ok{ border-color:rgba(36,195,138,.35); color:#b7ffdf; background:rgba(36,195,138,.08); }
.hp-alert--warn{ border-color:rgba(241,180,52,.35); color:#ffe6b0; background:rgba(241,180,52,.08); }
.hp-alert--error{ border-color:rgba(255,93,93,.35); color:#ffd1d1; background:rgba(255,93,93,.08); }
.hp-list{ margin:0; padding-left:18px; }

/* Footer chip */
.hp-foot{
  margin-top:10px; display:flex; gap:10px; justify-content:space-between; align-items:center;
  color:#8895a5; font-size:.85rem;
}
.hp-badge{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:linear-gradient(180deg, rgba(196,78,46,.2), rgba(196,78,46,.08));
  border:1px solid rgba(196,78,46,.35); color:#ffd2c4;
}
.hp-version{ opacity:.7 }

/* Validación simple */
.was-validated input:invalid{ border-color:var(--hp-err); }
.was-validated input:invalid:focus{ box-shadow:0 0 0 3px rgba(255,93,93,.25); }

/* Responsivo */
@media (max-width:420px){
  .hp-card{ padding:22px 18px 16px; }
  .hp-header h1{ font-size:1.18rem; }
  .hp-sub{ font-size:.92rem; }
  .hp-btn{ padding:12px 14px; }
  .hp-logo{ width:180px; }
}

/* Modo claro opcional (si algún día lo activas)
@media (prefers-color-scheme: light){
  :root{ --hp-bg:#f5f7fb; --hp-text:#0e141b; }
  .hp-card{ background:rgba(255,255,255,.85); }
  .hp-field input{ background:#fff; border-color:#dfe6ef; color:#0e141b; }
}
*/