:root{
  --paper:#F4F2EE; --surf:#FFFFFF; --ink:#16191D; --ink2:#5A646E;
  --rule:#E2DED7; --slate:#3B5568; --stop:#96331E; --stopBg:#F7E6E0;
  --shadow:0 1px 2px rgba(22,25,29,.05), 0 12px 32px -20px rgba(22,25,29,.35);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --paper:#101315; --surf:#191D21; --ink:#E9EBEA; --ink2:#99A4AC;
  --rule:#2A3238; --slate:#93B4C7; --stop:#E09976; --stopBg:#2E2019;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -20px rgba(0,0,0,.9);
}}
:root[data-theme="dark"]{
  --paper:#101315; --surf:#191D21; --ink:#E9EBEA; --ink2:#99A4AC;
  --rule:#2A3238; --slate:#93B4C7; --stop:#E09976; --stopBg:#2E2019;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -20px rgba(0,0,0,.9);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{
  margin:0; min-height:100vh; display:grid; place-items:center; padding:24px;
  background:var(--paper); color:var(--ink);
  font-family:"Source Serif 4",Georgia,serif; font-size:15.5px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.caja{
  width:100%; max-width:380px; background:var(--surf);
  border:1px solid var(--rule); border-radius:12px; box-shadow:var(--shadow);
  padding:32px 28px 26px;
}
h1{font-family:Archivo,system-ui,sans-serif; font-size:25px; font-weight:700;
   letter-spacing:-.02em; margin:0 0 4px}
.bajo{color:var(--ink2); font-size:14px; margin:0 0 24px}
label{display:block; font-family:Archivo,system-ui,sans-serif; font-size:10.5px;
      font-weight:600; letter-spacing:.09em; text-transform:uppercase;
      color:var(--slate); margin:0 0 6px}
input{
  width:100%; padding:10px 12px; font-size:15px; font-family:Archivo,system-ui,sans-serif;
  border:1px solid var(--rule); border-radius:8px; background:var(--paper); color:var(--ink);
  margin-bottom:16px;
}
input:focus{outline:2px solid var(--slate); outline-offset:1px}
button{
  width:100%; padding:11px; font-family:Archivo,system-ui,sans-serif;
  font-size:14px; font-weight:600; cursor:pointer; border:1px solid var(--slate);
  border-radius:8px; background:var(--slate); color:var(--surf); margin-top:4px;
}
button:hover{opacity:.9}
button[disabled]{opacity:.55; cursor:default}
button:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
/* El botón de Google va primero y con más peso: es la vía normal. La
   contraseña se queda como respaldo — para cuando Google falle, y para
   quien administra. */
.google{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; padding:11px; margin:0 0 4px;
  background:#fff; color:#1f1f1f; border:1px solid #dadce0; border-radius:8px;
  font-family:Archivo,system-ui,sans-serif; font-size:14px; font-weight:600;
  cursor:pointer; text-decoration:none;
}
.google:hover{background:#f8f9fa}
.google svg{width:17px; height:17px; flex:none}
.dominio{color:var(--ink2); font-size:12.5px; text-align:center; margin:0 0 20px}
.o{
  display:flex; align-items:center; gap:10px; color:var(--ink2);
  font-size:11px; text-transform:uppercase; letter-spacing:.09em;
  margin:0 0 16px; font-family:Archivo,system-ui,sans-serif;
}
.o::before,.o::after{content:""; flex:1; border-top:1px solid var(--rule)}
#conGoogle[hidden]{display:none}
.error{
  background:var(--stopBg); color:var(--stop); border-left:3px solid var(--stop);
  border-radius:8px; padding:10px 13px; font-size:14px; margin:0 0 18px;
  font-family:Archivo,system-ui,sans-serif; font-weight:600;
}
.pie{color:var(--ink2); font-size:12.5px; margin:20px 0 0; padding-top:16px;
     border-top:1px solid var(--rule)}