:root{
  --blue:#1267f2;
  --blue-dark:#0757e8;
  --violet:#7b61ff;
  --ink:#0b1633;
  --muted:#66758e;
  --line:#dfe6f1;
  --page:#f8faff;
  --danger:#9b263a;
  --success:#0f6947;
  --radius-card:22px;
  --radius-control:10px;
  --shadow:0 24px 70px rgba(51,78,124,.14);
  --font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  font-family:var(--font);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

button,input{font:inherit}

.prisma-auth-page{
  display:grid;
  place-items:center;
  padding:40px 20px;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 20%,rgba(67,139,255,.14),transparent 30%),
    radial-gradient(circle at 83% 16%,rgba(123,97,255,.14),transparent 30%),
    linear-gradient(135deg,#f8fbff 0%,#f7f7ff 52%,#fbfcff 100%);
}

.auth-shell{
  width:min(100%,510px);
  position:relative;
  z-index:1;
}

.auth-card{
  background:rgba(255,255,255,.94);
  border:1px solid rgba(207,219,236,.82);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow);
  padding:44px 44px 34px;
  backdrop-filter:blur(12px);
}

.brand-block{text-align:center}

.prisma-mark{
  width:64px;
  height:58px;
  margin:0 auto 9px;
}

.prisma-mark svg{
  width:100%;
  height:100%;
  display:block;
}

.brand-name{
  margin:0;
  font-size:30px;
  letter-spacing:.16em;
  font-weight:760;
}

.brand-subtitle{
  margin:10px 0 0;
  color:var(--muted);
  font-size:14px;
}

.auth-heading{
  text-align:center;
  margin:28px 0;
}

.auth-heading h2{
  margin:0;
  color:var(--blue-dark);
  font-size:21px;
}

.heading-accent{
  display:block;
  width:32px;
  height:2px;
  margin:10px auto 0;
  border-radius:99px;
  background:linear-gradient(90deg,var(--blue),var(--violet));
}

.auth-form{
  display:grid;
  gap:18px;
}

.field-group{
  display:grid;
  gap:8px;
}

.field-group label{
  font-size:13px;
  font-weight:650;
}

.input-shell{
  position:relative;
  display:flex;
  align-items:center;
  min-height:52px;
  border:1px solid #cbd6e6;
  border-radius:var(--radius-control);
  background:#fff;
  transition:border-color .18s ease, box-shadow .18s ease;
}

.input-shell:focus-within{
  border-color:#2f7df4;
  box-shadow:0 0 0 4px rgba(47,125,244,.10);
}

.input-icon{
  position:absolute;
  left:15px;
  width:18px;
  height:18px;
  color:#70809a;
  pointer-events:none;
}

.input-icon svg,
.icon-button svg,
.secure-note svg,
.button-arrow{
  width:100%;
  height:100%;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.input-shell input{
  width:100%;
  min-height:50px;
  border:0;
  outline:0;
  background:transparent;
  padding:0 48px 0 44px;
  color:var(--ink);
}

.input-shell input::placeholder{
  color:#98a5ba;
}

.icon-button{
  position:absolute;
  right:10px;
  width:34px;
  height:34px;
  padding:7px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#6c7a93;
  cursor:pointer;
}

.icon-button:hover{
  background:#eaf2ff;
  color:var(--blue-dark);
}

.form-options{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}

.check-control{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  cursor:pointer;
}

.check-control input{
  width:16px;
  height:16px;
  accent-color:var(--blue);
}

.text-button{
  border:0;
  background:transparent;
  color:var(--blue-dark);
  font-size:13px;
  cursor:pointer;
}

.text-button:hover{text-decoration:underline}

.auth-message{
  display:none;
  padding:11px 13px;
  border-radius:9px;
  font-size:13px;
  line-height:1.45;
}

.auth-message.is-visible{display:block}
.auth-message.is-error{background:#fff0f3;border:1px solid #ffd2db;color:var(--danger)}
.auth-message.is-info{background:#eef6ff;border:1px solid #d5e8ff;color:#25517e}
.auth-message.is-success{background:#ecfbf4;border:1px solid #cbeedf;color:var(--success)}

.primary-button{
  position:relative;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  border-radius:9px;
  color:#fff;
  background:linear-gradient(110deg,#0757e8,#176bf2 65%,#216ff4);
  box-shadow:0 10px 24px rgba(18,103,242,.22);
  font-weight:680;
  cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease;
}

.primary-button:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 13px 27px rgba(18,103,242,.27);
}

.primary-button:disabled{
  opacity:.78;
  cursor:wait;
}

.button-arrow{
  position:absolute;
  right:18px;
  width:19px;
  height:19px;
}

.button-spinner{
  display:none;
  width:17px;
  height:17px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .7s linear infinite;
}

.primary-button.is-loading .button-spinner{display:inline-block}
.primary-button.is-loading .button-arrow{display:none}

@keyframes spin{
  to{transform:rotate(360deg)}
}

.secure-note{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:28px;
  color:#75839a;
  font-size:12px;
}

.secure-note svg{
  width:18px;
  height:18px;
  color:#6e82a2;
}

/* Se conserva porque dashboard.html temporal ya lo usa */
.prisma-test-dashboard{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:30px;
  background:var(--page);
}

.test-panel{
  width:min(100%,620px);
  padding:36px;
  text-align:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow);
}

.test-panel p{
  color:var(--muted);
  line-height:1.6;
}

.secondary-button{
  min-height:44px;
  padding:0 20px;
  border:1px solid #cbd6e6;
  border-radius:9px;
  background:#fff;
  cursor:pointer;
}

@media(max-width:560px){
  .prisma-auth-page{padding:20px 14px}
  .auth-card{padding:34px 24px 28px;border-radius:18px}
  .form-options{align-items:flex-start;flex-direction:column;gap:11px}
  .text-button{align-self:flex-end}
}