/* Sophia Studio — página de nueva contraseña.
   Tokens de los temas de la app Sophia Studio (ver sophia_studio_web/TEMAS_UI.md):
   Physys claro por defecto (predeterminado de la app); Physys oscuro si el
   sistema del usuario está en modo oscuro (la página no tiene selector propio). */
:root {
  color-scheme: light;
  --acento: #1668b5;
  --primario-activo: #1a7ad0;
  --fondo: #eef0f3;
  --panel: #ffffff;
  --alterno: #f7f8fa;
  --borde: #d2d7de;
  --texto: #2b3138;
  --texto-suave: #5a6472;
  --tenue: #9aa3ad;
  --contextual: #2e8b57;
  --error: #e5484d;
  --sobre-acento: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --acento: #4da3ff;
    --primario-activo: #6bb5ff;
    --fondo: #171d27;
    --panel: #232c39;
    --alterno: #27313f;
    --borde: #364152;
    --texto: #e8edf4;
    --texto-suave: #a7b3c2;
    --tenue: #8a96a6;
    --contextual: #4cc38a;
    --error: #ff6b6b;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fondo);
  color: var(--texto);
  font-family: 'Segoe UI', 'Liberation Sans', Arial, sans-serif;
  font-size: 12px;
  line-height: 1.45;
}
/* Superficie de la app: PANEL, borde 1 px, radio 9, sin sombra. */
.card {
  width: 100%;
  max-width: 380px;
  margin: 16px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 9px;
  padding: 20px 22px;
}
h1 { font-size: 24px; font-weight: 600; margin: 0 0 4px; }
.subtitle { color: var(--texto-suave); margin: 0 0 18px; }
label { display: block; margin: 12px 0 4px; color: var(--texto-suave); }
input[type="password"] {
  width: 100%;
  min-height: 32px;
  padding: 6px 9px;
  background: var(--alterno);
  border: 1px solid var(--borde);
  border-radius: 5px;
  color: var(--texto);
  font: inherit;
  outline: none;
}
input[type="password"]::placeholder { color: var(--tenue); }
input[type="password"]:focus { border-color: var(--acento); }
/* Botón primario de la app. */
button {
  width: 100%;
  margin-top: 18px;
  padding: 9px 15px;
  background: var(--acento);
  color: var(--sobre-acento);
  border: 1px solid transparent;
  border-radius: 5px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.1s ease;
}
button:hover:not(:disabled) { background: var(--primario-activo); }
button:disabled { background: var(--borde); color: var(--texto-suave); cursor: default; }
button:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.msg { margin-top: 14px; min-height: 1.2em; }
.msg.error { color: var(--error); }
.msg.success { color: var(--contextual); }
.hidden { display: none; }
.logo {
  width: 40px; height: 40px; border-radius: 5px;
  background: var(--acento);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; margin-bottom: 14px; color: var(--sobre-acento);
}