/* ─────────────────────────────────────────────────────────────────────
   Pantalla de acceso
   Dos mitades: panel de marca y panel de formulario. En móvil se apilan
   y el panel de marca se reduce a una cabecera compacta.
   ───────────────────────────────────────────────────────────────────── */

body.acceso{background:var(--bg);overflow-x:hidden}
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:100vh}

/* ── Panel de marca ─────────────────────────────────────────────────── */
.marca-panel{position:relative;overflow:hidden;color:#EAF6F9;display:flex}
.mp-fondo{position:absolute;inset:0}
.mp-fondo svg{width:100%;height:100%;display:block}
.mp-cont{position:relative;display:flex;flex-direction:column;justify-content:space-between;
         padding:44px 52px;width:100%;max-width:620px;margin:0 auto;gap:30px}
.mp-medio{margin:auto 0}

.mp-logo-img{width:100%;max-width:236px;height:auto;display:block;margin-bottom:9px}
.mp-coop{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--lima);font-weight:600}

.mp-medio{max-width:520px}
.mp-titulo{font-size:29px;line-height:1.3;font-weight:700;letter-spacing:-.015em;color:#FFF;margin-bottom:16px}
.mp-bajada{font-size:14.5px;line-height:1.7;color:var(--verde-tenue);max-width:440px}
.mp-ilus{width:100%;max-width:460px;height:auto;margin-top:30px;display:block}

.mp-pie{font-size:12.5px;line-height:1.65;color:#A9CFB4;max-width:430px;
        padding-top:20px;border-top:1px solid rgba(255,255,255,.13)}

/* ── Panel de acceso ────────────────────────────────────────────────── */
.acceso-panel{position:relative;display:flex;align-items:center;justify-content:center;padding:44px 24px}
.acceso-caja{width:100%;max-width:404px;background:var(--s1);border:1px solid var(--b1);
             border-radius:18px;padding:36px 34px;box-shadow:var(--sh)}

.tema-flota{position:absolute;top:22px;right:24px}

.movil-marca{display:none;margin-bottom:26px}
.mm-logo{width:100%;max-width:186px;height:auto;display:block}
.mm-sub{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
        color:var(--p);font-weight:600;margin-top:7px}

.acceso-t{font-size:24px;font-weight:700;letter-spacing:-.015em;margin-bottom:6px}
.acceso-s{font-size:13.5px;color:var(--t2);margin-bottom:26px}

.acceso .campo{margin-bottom:17px}
.acceso .campo label{font-size:13px;margin-bottom:7px;color:var(--t1)}
.acceso .campo input{padding:11px 14px;font-size:14px;border-radius:var(--r2)}

.clave-caja{position:relative}
.clave-caja input{padding-right:44px!important}
.ver-clave{position:absolute;right:5px;top:50%;transform:translateY(-50%);
           width:34px;height:34px;display:grid;place-items:center;border-radius:7px;color:var(--t3)}
.ver-clave:hover{color:var(--t1);background:var(--s3)}
.ver-clave svg{width:17px;height:17px}
.ver-clave .ojo-tachado{display:none}
.ver-clave[aria-pressed="true"] .ojo{display:none}
.ver-clave[aria-pressed="true"] .ojo-tachado{display:block}

.acceso-btn{width:100%;justify-content:center;padding:13px;font-size:14.5px;margin-top:8px}

.acceso .err{margin-bottom:18px}

/* ── Cuentas de demostración ────────────────────────────────────────── */
.demo{margin-top:28px}
.demo-t{position:relative;text-align:center;margin-bottom:14px}
.demo-t::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--b1)}
.demo-t span{position:relative;background:var(--s1);padding:0 12px;font-size:10.5px;font-weight:600;
             text-transform:uppercase;letter-spacing:.09em;color:var(--t3)}
.demo-lista{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cuenta{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:9px;text-align:left;
        border:1px solid var(--b1);background:var(--s2);transition:border-color .12s,background .12s;width:100%}
.cuenta:hover{border-color:var(--p);background:var(--pa)}
.cuenta-av{width:26px;height:26px;border-radius:50%;background:var(--s4);color:var(--t2);
           display:grid;place-items:center;font-size:9.5px;font-weight:700;flex-shrink:0}
.cuenta:hover .cuenta-av{background:var(--p);color:var(--sobre-p)}
.cuenta-txt{display:flex;flex-direction:column;min-width:0}
.cuenta-n{font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cuenta-r{font-size:10.5px;color:var(--t3)}

.acceso-pie{margin-top:26px;font-size:12px;color:var(--t3);text-align:center;line-height:1.6}

/* ── Adaptación ─────────────────────────────────────────────────────── */
@media(max-width:1080px){
  .mp-cont{padding:38px 36px}
  .mp-titulo{font-size:26px}
  .mp-ilus{margin-top:26px}
}
@media(max-width:860px){
  .split{grid-template-columns:1fr}
  .marca-panel{display:none}
  .movil-marca{display:block}
  .acceso-panel{align-items:flex-start;padding:26px 16px 44px;min-height:100vh}
  .acceso-caja{margin:0 auto;padding:28px 22px;border-radius:16px}
  .tema-flota{top:18px;right:18px}
}
@media(max-width:420px){
  .demo-lista{grid-template-columns:1fr}
}

/* ── Fondo con movimiento ────────────────────────────────────────────
   Ondas que nacen del mismo punto y se expanden, como una solicitud que
   entra y se propaga. El ciclo es largo y la opacidad baja: debe notarse
   sin llamar la atención, porque lo que se viene a hacer aquí es escribir
   una contraseña.                                                      */
.mp-onda{
  stroke-opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  animation:mp-expandir 9s ease-out infinite;
  animation-delay:var(--d, 0s);
}
.mp-onda-b{animation-duration:11s}

@keyframes mp-expandir{
  0%   {stroke-opacity:0;    stroke-width:2.4; transform:scale(.55)}
  18%  {stroke-opacity:.22}
  70%  {stroke-opacity:.07;  stroke-width:1}
  100% {stroke-opacity:0;    stroke-width:.6;  transform:scale(2.3)}
}

/* Motas que suben despacio: dan sensación de aire sin competir con nada */
.mp-mota{
  opacity:0;
  animation:mp-flotar 16s linear infinite;
  animation-delay:var(--d, 0s);
}
@keyframes mp-flotar{
  0%   {opacity:0;   transform:translate(0, 40px)}
  22%  {opacity:.42}
  78%  {opacity:.18}
  100% {opacity:0;   transform:translate(var(--x, 24px), -170px)}
}

/* Quien pidió menos movimiento no lo recibe: el fondo se queda quieto y
   legible, que es lo único que esta pantalla necesita de verdad. */
@media (prefers-reduced-motion: reduce){
  .mp-onda,.mp-mota{animation:none}
  .mp-onda{stroke-opacity:.12}
  .mp-mota{opacity:.3}
}