:root{
  --ink:        #12130f;   /* panel izquierdo, casi negro */
  --stone:      #f4f1ea;   /* panel derecho, piedra clara */
  --stone-line: #d9d3c4;   /* líneas sobre la piedra */
  --patina:     #40564a;   /* verde bronce envejecido, único acento de color */
  --text-dark:  #1b1c17;
  --text-muted: #77715f;
  --ink-line:   rgba(244,241,234,0.28);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  min-height:100vh;
  display:flex;
  font-family:'IBM Plex Sans', sans-serif;
  color:var(--text-dark);
  background:var(--stone);
}

.stage{
  display:flex;
  width:100%;
  min-height:100vh;
}

/* ---- panel izquierdo: columna grabada + inscripción vertical ---- */
.rite-panel{
  flex:0 0 40%;
  background:var(--ink);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  min-height:280px;
}

.rite-panel svg{ width:56%; max-width:220px; opacity:0.9; }

.inscription{
  position:absolute;
  left:28px;
  top:0;
  bottom:0;
  display:flex;
  align-items:center;
}
.inscription span{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:0.95rem;
  letter-spacing:0.32em;
  color:var(--ink-line);
}

/* ---- panel derecho: formulario ---- */
.form-panel{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:56px 10%;
}

.form-wrap{ width:100%; max-width:360px; }

.form-wrap h1{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:2.1rem;
  letter-spacing:0.01em;
  margin:0 0 10px;
  color:var(--text-dark);
}

.form-wrap .kicker{
  font-size:0.82rem;
  color:var(--text-muted);
  line-height:1.5;
  margin:0 0 40px;
  max-width:280px;
}

.field{ margin-bottom:30px; position:relative; }

.field label{
  display:block;
  font-size:0.72rem;
  letter-spacing:0.03em;
  color:var(--text-muted);
  margin-bottom:8px;
}

/* inputs sin caja: solo una línea base, como una inscripción */
.field .form-control{
  border:none;
  border-bottom:1px solid var(--stone-line);
  border-radius:0;
  background:transparent;
  padding:6px 26px 10px 0;
  font-size:1rem;
  color:var(--text-dark);
  box-shadow:none;
}
.field .form-control::placeholder{ color:#b3ac99; }
.field .form-control:focus{
  background:transparent;
  border-bottom-color:var(--patina);
  box-shadow:none;
}

.toggle-password{
  position:absolute;
  right:2px;
  bottom:12px;
  color:var(--text-muted);
  cursor:pointer;
  font-size:0.95rem;
}
.toggle-password:hover{ color:var(--patina); }

.btn-login{
  width:100%;
  background:var(--text-dark);
  border:none;
  border-radius:0;
  color:var(--stone);
  font-weight:500;
  font-size:0.88rem;
  letter-spacing:0.02em;
  padding:14px 0;
  margin-top:8px;
  transition:background 0.2s ease;
}
.btn-login:hover:not(:disabled){ background:var(--patina); }
.btn-login:disabled{ opacity:0.65; }

.footer-links{
  text-align:left;
  font-size:0.72rem;
  color:var(--text-muted);
  margin-top:28px;
}

@media (max-width: 820px){
  .stage{ flex-direction:column; }
  .rite-panel{ flex:0 0 190px; }
  .rite-panel svg{ width:34%; max-width:120px; }
  .inscription{ display:none; }
  .form-panel{ padding:44px 8%; }
}