/* ==========================================================================
   MARCA v7 — login del portal (D7, 04/11/2026). Mockup: optopus-admin
   docs/rediseno/login-branding.html. Fondo navy, tarjeta blanca, UN azul (el botón),
   cubo del menú como logo. Solo apariencia: ids, campos y lógica del login no cambian.
   Va después de portal-ds.css.
   ========================================================================== */
@media screen {
  .pin-overlay { background: var(--marino, #0F172A); backdrop-filter: none; padding: 24px 16px; }
  .pin-box { max-width: 380px; padding: 32px 28px 22px; border-radius: var(--r-tarjeta, 16px); box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
             font-family: var(--fuente, system-ui); color: var(--tinta, #0F172A); }
  .pin-marca { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
  .pin-logo { width: 44px; height: 44px; border-radius: 12px; background: var(--marca, #3B5BFD); display: grid; place-items: center; flex: none; }
  .pin-logo svg { width: 24px; height: 24px; color: #fff; }
  .pin-box .pin-title { font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.1; text-align: left; color: var(--tinta, #0F172A); }
  .pin-box .pin-sub { font-size: 13px; color: var(--tinta-3, #667085); margin-top: 3px; text-align: left; }
  .pin-box .pin-label { font-size: 13px; font-weight: 500; color: var(--tinta-2, #475467); text-transform: none; letter-spacing: 0; margin-bottom: 6px; }
  .pin-box .pin-cajero-select { font-family: inherit; font-size: 15px; font-weight: 400; padding: 11px 12px; border: 1px solid var(--linea, #E7E9EE);
                                border-radius: var(--r-interno, 10px); margin-bottom: 14px; color: var(--tinta, #0F172A); }
  .pin-box .pin-cajero-select:focus, .pin-box .pin-input:focus { outline: 3px solid var(--marca-suave, #ECF0FF); border-color: var(--marca, #3B5BFD); box-shadow: none; }
  .pin-box .pin-cajero-select:disabled { color: var(--apagado, #A0A7B4); background: var(--fila-alterna, #F8F9FB); }
  /* Los puntos del PIN con la fuente del sistema: la de marca no trae «•». */
  .pin-box .pin-input { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 22px; font-weight: 600; letter-spacing: .5em;
                        padding: 11px 12px; border: 1px solid var(--linea, #E7E9EE); border-radius: var(--r-interno, 10px); background: #fff; }
  .pin-box .pin-error { background: var(--problema-fondo, #FEE2E2); color: var(--problema, #B91C1C); border-radius: var(--r-interno, 10px); font-weight: 500; text-align: left; }
  .pin-box .pin-actions { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 18px; }
  .pin-box .pin-btn { font-family: inherit; font-size: 15px; font-weight: 600; border-radius: var(--r-interno, 10px); padding: 12px 16px; transform: none; }
  .pin-box .pin-btn-cancel { background: #fff; color: var(--tinta-2, #475467); border: 1px solid var(--linea, #E7E9EE); box-shadow: none; }
  .pin-box .pin-btn-ok { background: var(--marca, #3B5BFD); box-shadow: none; }
  .pin-box .pin-btn-ok:hover { background: var(--marca-hover, #2F4BE6); transform: none; box-shadow: none; }
  .pin-box .pin-version { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linea, #E7E9EE); display: flex; justify-content: space-between;
                          font-size: 12px; color: var(--tinta-3, #667085); letter-spacing: 0; text-align: left; }
  #agenciaInfo { background: var(--marca-suave, #ECF0FF) !important; color: var(--marca-tinta, #2A3FC4) !important; }
  @media (max-width: 600px) { .pin-box { padding: 26px 20px 18px; } }
}