/* Autocontenida a propósito: es la única página que se sirve sin
     sesión, así que cuanta menos superficie abierta, mejor. */
  * { box-sizing: border-box; }

  body {
    margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px;
    font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    color: #1f2733;
    background: #f5f7fa;
    background-image:
      radial-gradient(circle at 15% 0%, rgba(0,159,227,.09), transparent 42%),
      radial-gradient(circle at 90% 100%, rgba(255,61,180,.07), transparent 45%);
  }

  .caja {
    width: 100%; max-width: 392px; background: #fff; border: 1px solid #e4e9ef;
    border-radius: 16px; padding: 38px 34px 32px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 14px 40px rgba(16,24,40,.10);
  }

  /* ---- Los dos logos, uno frente a otro ---- */
  .logos { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 34px; }
  .logos img { display: block; }
  /* Uno es casi cuadrado y el otro muy apaisado: igualarlos de altura
     haría que el segundo pesara el doble. Se equilibran a ojo. */
  .logo-btb { height: 44px; width: auto; }
  .logo-rs { width: 158px; height: auto; }
  .division { width: 1px; height: 38px; background: #e4e9ef; flex: none; }

  label { display: block; font-size: 12.5px; font-weight: 600; color: #5b6675; margin: 0 0 6px; }
  input {
    width: 100%; font: inherit; font-size: 14.5px; padding: 11px 13px; margin-bottom: 17px;
    border: 1px solid #e4e9ef; border-radius: 9px; background: #fff; color: #1f2733;
  }
  input:focus { outline: 2px solid #009fe3; outline-offset: 1px; border-color: #009fe3; }

  button {
    width: 100%; font: inherit; font-size: 14.5px; font-weight: 600; padding: 12px;
    margin-top: 4px; border: 0; border-radius: 999px; background: #0e1116; color: #fff; cursor: pointer;
    transition: background .14s ease;
  }
  button:hover { background: #262f3b; }
  button[disabled] { opacity: .55; cursor: default; }

  .error {
    display: none; margin: 0 0 17px; padding: 10px 13px; border-radius: 9px;
    background: #fdeaef; color: #9f0f33; font-size: 13px; line-height: 1.45;
  }
  .error.visible { display: block; }

  @media (max-width: 420px) {
    .caja { padding: 30px 22px 26px; }
    .logos { gap: 14px; }
    .logo-btb { height: 36px; }
    .logo-rs { width: 128px; }
  }