/* Pantallas de acceso de Loans2 (login, recuperar y nueva contraseña).
   Panel de marca en azul profundo (degradado radial, viñeta y grano fino)
   con un trazo que se dibuja solo; el trazo es el saldo de
   un crédito que baja cuota a cuota, con la composición capital/interés de
   cada cuota apareciendo al paso del cursor. Formulario sobre blanco. */
:root {
    --ac-navy: #0f2340;
    --ac-navy-2: #13305a;
    --ac-azul: #1d4ed8;
    --ac-azul-osc: #1e40af;
    --ac-azul-foco: rgba(29, 78, 216, .2);
    --ac-tinta: #142033;
    --ac-suave: #56637a;
    --ac-tenue: #8792a6;
    --ac-linea: #d3dae5;
    --ac-fondo: #f5f7fa;
    --ac-ok: #0f6b45;   --ac-ok-fondo: #eaf6f0;   --ac-ok-borde: #b3dcc7;
    --ac-error: #a32626; --ac-error-fondo: #fcefef; --ac-error-borde: #efc0c0;
    --ac-radio: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body.acceso {
    margin: 0;
    min-height: 100vh;
    background: #fff;
    color: var(--ac-tinta);
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.acceso-grid {
    display: grid;
    grid-template-columns: minmax(380px, 44%) 1fr;
    min-height: 100vh;
}

/* ── Panel de marca ─────────────────────────────────────────────── */
.acceso-marca {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 44px 52px 36px;
    color: #fff;
    isolation: isolate;
    background-color: #0b1a31;
    /* Azul profundo con luz suave arriba a la izquierda y un halo detrás de la
       gráfica; sin cuadrícula. El grano y la viñeta van en ::before / ::after. */
    background-image:
        radial-gradient(120% 80% at 0% 0%, rgba(59, 104, 179, .38) 0%, rgba(59, 104, 179, 0) 55%),
        radial-gradient(90% 60% at 70% 78%, rgba(37, 99, 235, .22) 0%, rgba(37, 99, 235, 0) 60%),
        linear-gradient(160deg, #10284a 0%, #0b1a31 55%, #081428 100%);
}
/* Grano fino (ruido SVG) y viñeta: profundidad sin dibujos */
.acceso-marca::before,
.acceso-marca::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}
.acceso-marca::before {
    opacity: .09;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.acceso-marca::after {
    background: radial-gradient(140% 100% at 40% 40%, rgba(0, 0, 0, 0) 55%, rgba(2, 8, 20, .55) 100%);
}

.acceso-nombre { position: relative; display: flex; flex-direction: column; gap: 2px; }
.acceso-nombre-texto {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: #fff;
}
.acceso-nombre-sub {
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.acceso-grafica {
    position: relative;
    margin: auto 0 0;
    padding: 0;
    width: 100%;
    max-width: 560px;
}
.acceso-grafica svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Paralaje leve con el mouse (login.js pone --px / --py entre -1 y 1) */
.acceso-grafica { transform: translate3d(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 7px), 0); transition: transform .5s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.acceso-grafica .g-capa-fondo { transform: translate3d(calc(var(--px, 0) * -4px), calc(var(--py, 0) * -3px), 0); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }

.g-eje { stroke: rgba(191, 219, 254, .18); stroke-width: .75; }
.g-rotulo {
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    font-size: 13px;
    letter-spacing: .12em;
    fill: rgba(191, 219, 254, .5);
}
.g-fin { text-anchor: end; }
.g-area { fill: url(#g-area-fill); }
.g-cap { fill: url(#g-cap-fill); }
.g-int { fill: rgba(255, 255, 255, .09); }
.g-saldo {
    fill: none;
    stroke: #dbeafe;
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}
.g-cursor {
    stroke: rgba(191, 219, 254, .45);
    stroke-width: .75;
    stroke-dasharray: 2 4;
    opacity: 0;
}

/* Un solo ciclo de 7 s compartido: el saldo se dibuja, el barrido descubre
   las cuotas y el cursor recorre la fecha de pago; luego se sostiene, se
   desvanece y vuelve a empezar, como el monitor del login de SICMED. */
.g-saldo   { animation: acSaldo 7s linear .3s infinite; }
.g-barrido { animation: acBarrido 7s linear .3s infinite; }
.g-cursor  { animation: acCursor 7s linear .3s infinite; }
.acceso-grafica .g-capa-datos { animation: acDesvanecer 7s linear .3s infinite; }

@keyframes acSaldo {
    0%   { stroke-dashoffset: 1000; opacity: 1; }
    62%  { stroke-dashoffset: 0;    opacity: 1; }
    86%  { stroke-dashoffset: 0;    opacity: 1; }
    100% { stroke-dashoffset: 0;    opacity: 0; }
}
@keyframes acBarrido {
    0%   { transform: translateX(0); }
    62%  { transform: translateX(var(--recorrido, 672px)); }
    100% { transform: translateX(var(--recorrido, 672px)); }
}
@keyframes acCursor {
    0%   { transform: translateX(0); opacity: 1; }
    62%  { transform: translateX(var(--recorrido, 672px)); opacity: 1; }
    70%  { transform: translateX(var(--recorrido, 672px)); opacity: 0; }
    100% { transform: translateX(var(--recorrido, 672px)); opacity: 0; }
}
@keyframes acDesvanecer {
    0%, 86% { opacity: 1; }
    100%    { opacity: 0; }
}

.acceso-frase { position: relative; max-width: 470px; padding: 40px 0 32px; }
.acceso-frase h2 {
    font-size: 1.9rem;
    line-height: 1.22;
    font-weight: 500;
    letter-spacing: -.015em;
    color: #fff;
    margin: 0 0 12px;
}
.acceso-frase p {
    font-size: .95rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .7);
    margin: 0;
    max-width: 40ch;
}
.acceso-pie { position: relative; font-size: .78rem; color: rgba(255, 255, 255, .5); }

/* ── Panel del formulario ───────────────────────────────────────── */
.acceso-form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    background: #fff;
}
.acceso-caja {
    width: 100%;
    max-width: 368px;
    animation: acEntrada .45s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes acEntrada {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.acceso-caja h1 {
    font-size: 1.55rem;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--ac-tinta);
    margin: 0 0 6px;
}
.acceso-sub { font-size: .9rem; color: var(--ac-suave); margin: 0 0 26px; }

.acceso-campo { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.acceso-etiqueta {
    display: block;
    padding: 0;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ac-tinta);
    margin-bottom: 6px;
}
.acceso-fila-etiqueta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.acceso-fila-etiqueta a,
.acceso-volver a {
    font-size: .8rem;
    font-weight: 500;
    color: var(--ac-azul);
    text-decoration: none;
}
.acceso-fila-etiqueta a:hover,
.acceso-volver a:hover { text-decoration: underline; }

.acceso-input {
    display: block;
    width: 100%;
    height: 42px;
    padding: 8px 12px;
    font: inherit;
    font-size: 15px;
    color: var(--ac-tinta);
    background: #fff;
    border: 1px solid var(--ac-linea);
    border-radius: var(--ac-radio);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.acceso-input::placeholder { color: #9aa5b6; opacity: 1; }
.acceso-input:hover { border-color: #b9c3d2; }
.acceso-input:focus { border-color: var(--ac-azul); box-shadow: 0 0 0 3px var(--ac-azul-foco); }
.acceso-input.is-invalid { border-color: #d77a7a; }
.acceso-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(163, 38, 38, .15); }
.acceso-ayuda { margin: 6px 0 0; font-size: .76rem; color: var(--ac-tenue); }

/* País: control segmentado con radios nativos (flechas del teclado incluidas) */
.acceso-segmentos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 3px;
    gap: 3px;
    background: var(--ac-fondo);
    border: 1px solid var(--ac-linea);
    border-radius: var(--ac-radio);
}
.acceso-segmentos label { position: relative; display: block; cursor: pointer; }
.acceso-segmentos input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.acceso-segmentos span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    font-size: .88rem;
    font-weight: 500;
    color: var(--ac-suave);
    border-radius: 4px;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.acceso-segmentos label:hover span { color: var(--ac-tinta); }
.acceso-segmentos input:checked + span {
    background: #fff;
    color: var(--ac-tinta);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(20, 32, 51, .12), 0 0 0 1px rgba(20, 32, 51, .06);
}
.acceso-segmentos input:focus-visible + span { outline: 2px solid var(--ac-azul); outline-offset: 1px; }

/* Ojito dentro del campo de la clave */
.acceso-clave { position: relative; }
.acceso-clave .acceso-input { padding-right: 44px; }
.acceso-ver-clave {
    position: absolute;
    top: 0;
    right: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ac-tenue);
    cursor: pointer;
    border-radius: 0 var(--ac-radio) var(--ac-radio) 0;
}
.acceso-ver-clave:hover { color: var(--ac-tinta); }
.acceso-ver-clave:focus-visible { outline: 2px solid var(--ac-azul); outline-offset: -2px; }
.acceso-ver-clave .ojo-cerrado { display: none; }
.acceso-ver-clave[aria-pressed="true"] .ojo-abierto { display: none; }
.acceso-ver-clave[aria-pressed="true"] .ojo-cerrado { display: block; }

.acceso-recordar {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 2px 0 20px;
    font-size: .86rem;
    color: var(--ac-suave);
    cursor: pointer;
    user-select: none;
}
.acceso-recordar input { width: 16px; height: 16px; margin: 0; accent-color: var(--ac-azul); cursor: pointer; }
.acceso-recordar input:focus-visible { outline: 2px solid var(--ac-azul); outline-offset: 2px; }

.acceso-boton {
    display: block;
    width: 100%;
    height: 44px;
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    color: #fff;
    background: var(--ac-azul);
    border: 1px solid var(--ac-azul);
    border-radius: var(--ac-radio);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.acceso-boton:hover { background: var(--ac-azul-osc); border-color: var(--ac-azul-osc); }
.acceso-boton:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(29, 78, 216, .35); }
.acceso-boton:disabled { opacity: .75; cursor: progress; }

.acceso-volver { margin: 22px 0 0; text-align: center; }
.acceso-caja a:focus-visible { outline: 2px solid var(--ac-azul); outline-offset: 2px; border-radius: 2px; }

/* Avisos: fondo pálido + borde + texto oscuro del mismo tono */
.acceso-aviso {
    margin: 0 0 18px;
    padding: 10px 12px;
    font-size: .86rem;
    line-height: 1.45;
    border: 1px solid;
    border-radius: var(--ac-radio);
}
.acceso-aviso-ok    { color: var(--ac-ok);    background: var(--ac-ok-fondo);    border-color: var(--ac-ok-borde); }
.acceso-aviso-error { color: var(--ac-error); background: var(--ac-error-fondo); border-color: var(--ac-error-borde); }
.acceso-sacudir { animation: acSacudir .4s ease-in-out .2s; }
@keyframes acSacudir {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* ── Celular y tableta: una columna, la marca como franja ───────── */
@media (max-width: 900px) {
    .acceso-grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .acceso-marca { padding: 20px 16px 0; }
    .acceso-nombre-texto { font-size: 1.15rem; }
    .acceso-frase, .acceso-pie { display: none; }
    .acceso-grafica { margin: 10px 0 0; max-width: 300px; opacity: .85; }
    .g-rotulo { display: none; }
    .acceso-form { align-items: flex-start; padding: 28px 16px 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .g-saldo, .g-barrido, .g-cursor, .acceso-grafica .g-capa-datos,
    .acceso-caja, .acceso-sacudir { animation: none; }
    .g-saldo { stroke-dashoffset: 0; }
    .g-barrido { transform: translateX(var(--recorrido, 672px)); }
    .g-cursor { opacity: 0; }
    .acceso-input, .acceso-segmentos span, .acceso-boton { transition: none; }
    .acceso-grafica, .acceso-grafica .g-capa-fondo { transform: none; transition: none; }
}

/* Enlaces legales bajo el formulario de ingreso */
.acceso-legal { margin: 28px 0 0; padding-top: 16px; border-top: 1px solid var(--ac-linea); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; font-size: .8rem; color: var(--ac-tenue); }
.acceso-legal a { color: var(--ac-suave); text-decoration: none; }
.acceso-legal a:hover { color: var(--ac-azul); text-decoration: underline; }


/* Aviso de ubicación en el login */
.acceso-geo { display:flex; align-items:flex-start; gap:.5rem; margin:.25rem 0 1rem; font-size:.82rem; line-height:1.4; color:#5b6b82; }
.acceso-geo .acceso-geo-ico { flex:0 0 auto; }
.acceso-geo.is-ok { color:#1a7f46; }
.acceso-geo.is-warn { color:#9a6a12; }