/* Pantalla de conexión (OAuth) — misma identidad, una sola columna, una sola acción. */
.conectar { min-height: 100dvh; display: grid; place-items: center; padding: var(--e-5) var(--e-4); }
.conectar__caja {
  width: 100%; max-width: 460px; background: var(--superficie); border-radius: 24px;
  padding: var(--e-7) var(--e-6); box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: var(--e-5);
}
.conectar__marca { display: flex; align-items: center; gap: var(--e-3); }
.conectar h1 { font-size: var(--t-l); line-height: 1.25; }
.conectar__lead { color: var(--tinta-2); font-size: var(--t-s); }
.conectar__lista { margin: calc(-1 * var(--e-3)) 0 0; padding-left: 1.2em; color: var(--tinta); font-size: var(--t-s); display: grid; gap: var(--e-1); }
.conectar__prueba { background: var(--terracota-suave); border-radius: var(--radio-s); padding: var(--e-4); font-size: var(--t-s); color: var(--tinta-2); }
.conectar__prueba strong { color: var(--tinta); }
.conectar__opciones { display: grid; gap: var(--e-3); }
.boton--opcion {
  background: var(--superficie); color: var(--tinta); border: 1px solid var(--linea);
  text-decoration: none; width: 100%; gap: var(--e-3);
}
.boton--opcion:hover { background: var(--cantera); filter: none; }
.boton--opcion svg { flex: none; }
.conectar__form { display: grid; gap: var(--e-3); }
.conectar__form .boton { width: 100%; }
.conectar__form label { display: grid; gap: var(--e-1); font-size: var(--t-xs); color: var(--tinta-2); font-weight: 600; }
.conectar__form input {
  width: 100%; min-width: 0; min-height: 52px; padding: 0 var(--e-4); border: 1px solid var(--linea); border-radius: var(--radio-s);
  font: inherit; font-size: var(--t-m); background: var(--superficie); color: var(--tinta);
}
.conectar__form input:focus { outline: 2px solid var(--azul); outline-offset: 1px; }
.conectar__codigo { letter-spacing: .3em; padding-left: .3em !important; text-align: center; font-size: var(--t-xl) !important; font-variant-numeric: tabular-nums; }
.conectar__error { color: var(--chile); font-size: var(--t-s); font-weight: 600; }
.conectar__volver { text-align: center; font-size: var(--t-s); color: var(--azul); }
.conectar__cancelar { background: none; border: 0; color: var(--tinta-3); font-size: var(--t-s); cursor: pointer; width: 100%; padding: var(--e-2); margin-top: calc(-1 * var(--e-3)); }
.conectar__fino { font-size: var(--t-xs); color: var(--tinta-3); }