/* ============================================================
   SOS Mi Gente: mg-auth.css — ingreso y creacion de cuenta
   Depende de mg-brand.css (tokens, tipografia, botones).

   Dos decisiones que mandan sobre todo lo demas:
   1. Sin barra de navegacion. Una pantalla de acceso se disena
      para una sola tarea; cada enlace de arriba es una salida.
   2. Sin scroll en escritorio: el formulario cabe entero, por eso
      los campos van en dos columnas y el panel tiene su propio
      desbordamiento por si la ventana es muy baja.
   ============================================================ */

body.auth { min-height: 100dvh; overflow: hidden; }
body.auth .wrapper { min-height: 100dvh; }
body.auth .main-content { padding: 0; max-width: none; }

.au { display: grid; grid-template-columns: 1fr; min-height: 100dvh; }

/* ============================================================
   Panel izquierdo: el porque, con un diagrama vivo
   ============================================================ */
.au-lado { position: relative; display: none; overflow: hidden; isolation: isolate;
    color: #fff; background: #0B0E0D; }
/* resplandor calido detras del diagrama */
/* Un resplandor tenue: tiene que leerse como luz detras del circuito, no
   como una mancha roja encima del panel. */
.au-lado::before { content: ""; position: absolute; inset: 12% -18% 18% -8%;
    background: radial-gradient(52% 48% at 46% 50%, rgba(240,64,42,.16), transparent 70%);
    filter: blur(26px); pointer-events: none; }
.au-lado::after { content: ""; position: absolute; inset: 0;
    background: radial-gradient(90% 60% at 12% -6%, rgba(255,106,77,.09), transparent 60%);
    pointer-events: none; }
/* minmax(0,1fr) y no 1fr: "1fr" equivale a minmax(auto,1fr), y ese minimo
   automatico deja que la fila del diagrama crezca y se monte sobre la tarjeta. */
.au-lado-cuerpo { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 20px; height: 100dvh; padding: clamp(28px, 3vw, 46px); }

.au-marca { display: flex; align-items: center; gap: 11px; }
.au-marca svg.logo { width: 42px; height: auto; aspect-ratio: 708 / 697; }
.au-marca b { font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-size: 20px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.au-marca small { display: block; margin-top: 2px; font-size: 10px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; opacity: .55; }

.au-intro { display: grid; gap: 12px; }
.au-ojal { font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--sos-2); }
.au-lado h2 { max-width: 14ch; font-size: clamp(30px, 3vw, 42px); }
.au-lado h2 em { font-style: normal; color: var(--sos-2); }
.au-lado p { max-width: 40ch; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.68); }

/* ---------------- el diagrama ----------------
   Es el circuito real del producto: donante -> centro -> comunidad.
   Los pulsos viajan por los cables en ese sentido. */
.au-flujo { position: relative; display: block; min-height: 0; overflow: hidden;
    padding-block: clamp(6px, 1.4vw, 20px); }
/* El SVG llena su caja y preserveAspectRatio (meet, por defecto) encaja y
   centra el dibujo dentro. Centrar el SVG con place-items hacia indefinido su
   alto, Chrome ignoraba el porcentaje y el diagrama se montaba sobre la
   tarjeta de abajo. */
.au-flujo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cable { stroke: rgba(255,255,255,.16); stroke-width: 1.5; fill: none; }
.pulso { stroke: var(--sos-2); stroke-width: 2.5; fill: none; stroke-linecap: round;
    stroke-dasharray: 26 210; filter: drop-shadow(0 0 6px rgba(255,106,77,.9));
    animation: viaja 3.4s linear infinite; }
.pulso.b { animation-delay: 1.13s; }
.pulso.c { animation-delay: 2.26s; }
@keyframes viaja { from { stroke-dashoffset: 236; } to { stroke-dashoffset: 0; } }

.nodo-caja { fill: rgba(18,22,21,.72); stroke: rgba(255,255,255,.13); }
.nodo-caja.viva { fill: rgba(24,18,17,.82); stroke: rgba(255,106,77,.42); }
.nodo-halo { fill: rgba(255,106,77,.13); animation: late 3.4s ease-in-out infinite; transform-origin: center; }
.nodo-halo.b { animation-delay: 1.13s; }
.nodo-halo.c { animation-delay: 2.26s; }
@keyframes late { 0%,72%,100% { opacity: 0; transform: scale(.6); }
                  16% { opacity: 1; transform: scale(1); } }
.nodo-tx { fill: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12.5px; font-weight: 700; }
.nodo-sub { fill: rgba(255,255,255,.58); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 10.5px; }
.nodo-ico { stroke: #fff; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------- pie del panel ---------------- */
.au-seguro { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 14px; align-items: center;
    padding: 15px 17px; border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-md);
    background: rgba(255,255,255,.04); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.au-seguro i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px;
    background: rgba(240,64,42,.18); color: var(--sos-2); }
.au-seguro .ico { width: 19px; height: 19px; }
.au-seguro b { display: block; font-size: 13.5px; }
.au-seguro span { display: block; margin-top: 2px; font-size: 12px; color: rgba(255,255,255,.6); line-height: 1.45; }
/* Centradas en su columna: en fila a la izquierda quedaban descuadradas
   respecto a la tarjeta de arriba. */
.au-cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; }
.au-cifra { text-align: center; }
.au-cifra b { display: block; font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-size: 21px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.au-cifra small { display: block; margin-top: 3px; font-size: 11px; color: rgba(255,255,255,.55); }

/* ============================================================
   Panel derecho: el formulario
   ============================================================ */
.au-panel { position: relative; display: grid; grid-template-rows: auto 1fr;
    padding: clamp(18px, 2.2vw, 32px) clamp(18px, 3vw, 48px) clamp(14px, 1.6vw, 24px);
    background: var(--page); max-height: 100dvh; overflow-y: auto; }
.au-top { display: flex; align-items: center; gap: 14px; align-self: start;
    margin-bottom: clamp(14px, 2vw, 26px); }
.au-volver { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px;
    font-weight: 600; color: var(--ink-2); }
.au-volver:hover { color: var(--ink); text-decoration: none; }
.au-volver .ico { width: 15px; height: 15px; transform: rotate(180deg); }
.au-cambio { font-size: 13px; color: var(--ink-2); }
.au-cambio button { border: 0; background: none; font: inherit; font-weight: 700;
    color: var(--sos-ink); cursor: pointer; text-decoration: underline; padding: 4px; }

.au-caja { width: 100%; max-width: 560px; margin-inline: auto; display: grid; gap: 14px;
    align-content: start; align-self: start; }
.au-cab { display: grid; gap: 6px; }
body.auth .au-cab h1.display { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.08; }
.au-cab p { color: var(--ink-2); font-size: 14.5px; }

/* pestañas */
.au-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
    border: 1px solid var(--hairline); border-radius: var(--r-full); background: var(--paper); }
.au-tabs .tab { border: 0; border-radius: var(--r-full); background: none; cursor: pointer;
    font: inherit; font-size: 14px; font-weight: 700; color: var(--ink-2);
    min-height: 42px; padding: 0 12px; transition: background .18s, color .18s; }
.au-tabs .tab:hover { background: var(--page); }
.au-tabs .tab.active { background: var(--ink); color: #fff; }
.au-tabs .tab:focus-visible { outline: 2px solid var(--sos); outline-offset: 2px; }

body.auth .card { border: 1px solid var(--hairline); border-radius: var(--r-lg);
    background: var(--paper); box-shadow: var(--sh-1);
    padding: clamp(18px, 2.2vw, 24px); padding-bottom: 16px; display: grid; gap: 14px; }

/* dos columnas: es lo que permite que el formulario quepa sin scroll */
.au-fila { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 620px) { .au-fila { grid-template-columns: 1fr 1fr; } }

/* ---------------- selector de tipo ---------------- */
.type-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.type-pick button { position: relative; display: grid; grid-template-columns: 30px minmax(0,1fr);
    gap: 10px; align-items: center; padding: 12px 13px; min-height: 0;
    border: 1.5px solid var(--hairline); border-radius: var(--r-md);
    background: var(--paper); font: inherit; text-align: left; cursor: pointer; overflow: hidden;
    transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; }
.type-pick button::before { content: ""; position: absolute; inset: 0; opacity: 0;
    background: radial-gradient(120px circle at var(--mx,50%) var(--my,50%), rgba(240,64,42,.16), transparent 70%);
    transition: opacity .2s; pointer-events: none; }
.type-pick button:hover { border-color: var(--ink); transform: translateY(-2px); }
.type-pick button:hover::before { opacity: 1; }
.type-pick button:focus-visible { outline: 2px solid var(--sos); outline-offset: 2px; }
.type-pick i { position: relative; display: grid; place-items: center; width: 30px; height: 30px;
    border-radius: 10px; background: var(--page); color: var(--ink-2); transition: background .2s, color .2s; }
.type-pick .ico { width: 16px; height: 16px; }
.type-pick b { position: relative; display: block; font-size: 13.5px; font-weight: 700;
    letter-spacing: -.01em; color: var(--ink); }
.type-pick small { position: relative; display: block; font-size: 11.5px; color: var(--ink-2); line-height: 1.35; }
.type-pick button.active { border-color: var(--sos); background: var(--sos-soft);
    box-shadow: 0 6px 18px rgba(240,64,42,.14); }
.type-pick button.active i { background: var(--sos); color: #fff; }
.type-pick button.active b { color: var(--sos-ink); }

/* ---------------- campos ---------------- */
body.auth .form-group { display: grid; gap: 5px; align-content: start; }
body.auth label { font-size: 12.5px; font-weight: 700; color: var(--ink); }
body.auth label .opt { font-weight: 500; color: var(--ink-2); }

.au-campo { position: relative; display: block; }
.au-campo > .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 17px; height: 17px; color: var(--ink-3); pointer-events: none; transition: color .16s; }
.au-campo:focus-within > .ico { color: var(--sos); }
body.auth .form-control {
    width: 100%; min-height: 48px; padding: 12px 14px 12px 42px;
    border: 1.5px solid var(--hairline); border-radius: var(--r-sm);
    background: var(--paper); font: inherit; font-size: 16px; color: var(--ink);
    transition: border-color .16s, box-shadow .16s, background .16s;
}
body.auth .form-control::placeholder { color: #9AA29D; }
body.auth .form-control:hover { border-color: #CFC8BC; }
body.auth .form-control:focus { outline: none; border-color: var(--sos);
    box-shadow: 0 0 0 3px rgba(240,64,42,.14); }

/* invalido: color + icono + texto, nunca solo el borde */
body.auth [aria-invalid="true"] { border-color: var(--sos); background: #FFF9F8; }
.au-error { display: none; align-items: flex-start; gap: 5px; font-size: 12px;
    color: var(--sos-ink); font-weight: 600; line-height: 1.35; }
.au-error.visible { display: flex; }
.au-error .ico { width: 13px; height: 13px; margin-top: 1px; color: var(--sos); flex: 0 0 13px; }
.au-pista { font-size: 11.5px; color: var(--ink-2); line-height: 1.4; }

/* ---------------- contraseña ---------------- */
.au-pass .form-control { padding-right: 48px; }
.au-ojo { position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px; display: grid; place-items: center;
    border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; z-index: 2; }
.au-ojo:hover { background: var(--page); color: var(--ink); }
.au-ojo:focus-visible { outline: 2px solid var(--sos); outline-offset: 1px; }
.au-fuerza { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 2px; }
.au-fuerza i { height: 4px; border-radius: 2px; background: var(--hairline); transition: background .3s; }
.au-fuerza[data-nivel="1"] i:nth-child(1) { background: var(--sos); }
.au-fuerza[data-nivel="2"] i:nth-child(-n+2) { background: #E9A23B; }
.au-fuerza[data-nivel="3"] i:nth-child(-n+3) { background: #7FB13B; }
.au-fuerza[data-nivel="4"] i { background: var(--verde); }
/* lista de requisitos: se marcan solos mientras escribes */
.au-reglas { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; margin-top: 2px; }
.au-regla { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); }
.au-regla .ico { width: 13px; height: 13px; flex: 0 0 13px; color: var(--hairline); transition: color .2s, transform .2s; }
.au-regla.ok { color: var(--verde-ink); }
.au-regla.ok .ico { color: var(--verde); transform: scale(1.15); }

/* ---------------- aviso y boton ---------------- */
.au-aviso { display: none; align-items: flex-start; gap: 9px; padding: 11px 13px;
    border-radius: var(--r-sm); background: var(--sos-soft); color: var(--sos-ink);
    font-size: 13px; line-height: 1.45; font-weight: 600; }
.au-aviso.visible { display: flex; }
.au-aviso .ico { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; color: var(--sos); }

body.auth .btn-block { width: 100%; }
body.auth .btn { min-height: 50px; }
body.auth .btn[disabled] { opacity: .6; pointer-events: none; }
body.auth .btn-primary .ico { width: 17px; height: 17px; transition: transform .2s; }
body.auth .btn-primary:hover .ico { transform: translateX(4px); }
.au-pie { font-size: 11px; color: var(--ink-2); line-height: 1.35; text-align: center; margin-top: -3px; }
.au-pie a { color: var(--sos-ink); font-weight: 700; }

/* ---------------- escritorio ---------------- */
@media (min-width: 960px) {
    .au { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
    .au-lado { display: block; }
    /* El formulario se centra en la banda que queda bajo la fila de arriba,
       que se mantiene fija: asi "Volver al inicio" no salta entre pestañas. */
    .au-caja { align-self: center; }
}
/* ventanas bajas: se recorta el aire, no el contenido */
/* Ventanas bajas: se recorta el aire, nunca el contenido. El objetivo es que
   el boton de envio quede a la vista sin rodar en un portatil de 720px. */
@media (max-height: 860px) and (min-width: 960px) {
    .au-caja { gap: 10px; }
    body.auth .card { gap: 9px; padding: 15px; }
    .au-top { margin-bottom: 6px; }
    .au-tabs .tab { min-height: 38px; }
    .type-pick button { padding: 10px 12px; }
    body.auth .form-control, .sel-boton { min-height: 45px; }
    .au-ojo { width: 34px; height: 34px; }
}
@media (max-height: 810px) and (min-width: 960px) {
    .au-cab p { display: none; }
    .au-reglas { grid-template-columns: repeat(4, auto); justify-content: start; gap: 2px 14px; }
}
/* Portatiles de 720px o menos: el ultimo apretón para que el boton de envio
   siga cayendo dentro de la pantalla. */
@media (max-height: 730px) and (min-width: 960px) {
    .au-caja { gap: 8px; }
    body.auth .card { gap: 8px; padding: 13px; }
    .au-top { margin-bottom: 4px; }
    body.auth .form-control, .sel-boton { min-height: 42px; }
    body.auth .btn { min-height: 46px; }
    .au-pie { display: none; }
}
@media (max-height: 710px) and (min-width: 960px) {
    .au-caja { gap: 6px; }
    .au-tabs .tab { min-height: 34px; }
    .type-pick button { padding: 8px 12px; }
    body.auth .au-cab h1.display { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .pulso, .nodo-halo { animation: none; }
    .pulso { opacity: .5; }
    .type-pick button, body.auth .form-control, .au-fuerza i, .sel-lista { transition: none; }
    .type-pick button:hover { transform: none; }
}

/* ============================================================
   Enlace por correo (fase 7.5)
   El camino corto va arriba y la contrasena queda plegada debajo:
   la mayoria entra con el enlace, y quien tiene contrasena la abre.
   ============================================================ */

/* Separador con la palabra dentro de la linea, no encima. */
.au-o { display: flex; align-items: center; gap: 10px; color: var(--ink-3);
    font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.au-o::before, .au-o::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }

/* El desplegable de la contrasena: un boton que no compite con el primario. */
.au-alterna { display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; min-height: 42px; padding: 0 14px; border: 1px solid var(--hairline);
    border-radius: var(--r-sm); background: none; cursor: pointer;
    font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-2);
    transition: background .16s, border-color .16s, color .16s; }
.au-alterna:hover { background: var(--page); border-color: var(--ink-3); color: var(--ink); }
.au-alterna .ico { width: 15px; height: 15px; color: var(--ink-3); }
.au-alterna[aria-expanded="true"] { background: var(--page); color: var(--ink); }
.au-alterna[aria-expanded="true"] .ico { color: var(--sos); }

/* El bloque de la contrasena, una vez abierto. */
#passwordBox { display: flex; flex-direction: column; gap: 12px;
    padding-top: 14px; border-top: 1px dashed var(--hairline); }
#passwordBox.hidden { display: none; }

/* Acuse de que el enlace salio: cierra la tarea, no pide nada mas. */
.au-enviado { text-align: center; }
.au-enviado-ico { display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; margin: 0 auto; border-radius: 50%;
    background: var(--sos-soft); color: var(--sos); }
.au-enviado-ico .ico { width: 24px; height: 24px; }
.au-enviado b { font-size: 17px; letter-spacing: -.02em; }
.au-enviado p { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.au-volver-ico { transform: rotate(180deg); }

/* Ciudad decidida por el codigo QR de una alcaldia: se ve, no se elige. */
.au-fijado { font-size: 11.5px; color: var(--ink-2); line-height: 1.4; }
.sel-boton[disabled] { opacity: .72; pointer-events: none; background: var(--page); }

/* El campo del ingreso lleva un icono dentro, asi que su selector propio
   necesita el hueco que el resto del sistema no reserva. */
.au-campo .sel-boton { padding-left: 42px; }