/* ============================================================
   SOS Mi Gente: mg-acceso.css — pantallas a las que se llega por
   un codigo: el QR de una alcaldia, el QR de un centro de acopio
   y el enlace que llega al correo.
   Depende de mg-brand.css. Se activa con la clase "acceso" en el
   body y se carga DESPUES de mg-app.css y mg-brand.css.

   Las tres comparten la misma situacion y por eso comparten hoja:
   se llega de fuera, muchas veces desde la camara del telefono y
   de pie en la calle o dentro de una bodega. De ahi las decisiones:

   1. Una sola columna, centrada, y nada de barra de navegacion.
      Quien escanea viene a hacer una cosa; cada enlace de arriba
      es una salida.
   2. Primero la identidad de quien invita (la alcaldia, el centro).
      Sin eso el codigo no genera confianza y nadie sigue.
   3. Las acciones son grandes y llegan antes que cualquier dato:
      la decision va arriba, el contexto debajo.
   ============================================================ */

body.acceso { background: var(--page); }
body.acceso .wrapper { min-height: 100dvh; display: flex; flex-direction: column; }
body.acceso .main-content { flex: 1; padding: 0; max-width: none; }

.ac { display: flex; flex-direction: column; align-items: center;
    gap: clamp(20px, 3vw, 30px); width: min(560px, calc(100% - 36px));
    margin-inline: auto; padding-block: clamp(26px, 4vw, 52px); }
/* La eleccion de rol necesita mas ancho: dos tarjetas caben de lado. */
.ac.ancho { width: min(760px, calc(100% - 36px)); }

/* ---------------- marca ----------------
   Discreta: aqui la que manda es la alcaldia o el centro, no nosotros. */
.ac-marca { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.ac-marca svg.logo { width: 34px; height: auto; aspect-ratio: 708 / 697; flex: 0 0 34px; }
.ac-marca b { font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 15.5px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.ac-marca:hover { text-decoration: none; }

/* ---------------- quien invita ---------------- */
.ac-id { display: grid; justify-items: center; gap: 10px; text-align: center; }
.ac-id-escudo { display: grid; place-items: center; width: 62px; height: 62px;
    border-radius: 20px; background: var(--sos-soft); color: var(--sos); }
.ac-id-escudo .ico { width: 30px; height: 30px; }
/* El escudo de la alcaldia manda sobre el marcador generico cuando existe. */
.ac-id-logo { max-height: 86px; width: auto; margin-inline: auto; }
.ac-id h1 { font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: clamp(24px, 4.2vw, 33px); font-weight: 800; letter-spacing: -.035em;
    line-height: 1.08; }
.ac-id-donde { font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.ac-id-lede { max-width: 46ch; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.ac-id-lede b { color: var(--ink); font-weight: 700; }

/* ---------------- tarjetas ---------------- */
body.acceso .card { display: grid; gap: 14px; width: 100%; padding: clamp(18px, 2.4vw, 24px);
    border: 1px solid var(--hairline); border-radius: var(--r-lg);
    background: var(--paper); box-shadow: var(--sh-1); }
body.acceso .card .section-h { font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: var(--ink);
    margin: 0; padding: 0; border: 0; text-transform: none; }
.ac-centrado { justify-items: center; text-align: center; }
body.acceso .card p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
body.acceso .card p b { color: var(--ink); font-weight: 700; }
body.acceso .hint, body.acceso .card .hint { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
body.acceso .btn-block { width: 100%; }

/* ---------------- elegir rol (QR de alcaldia) ----------------
   Dos tarjetas enteras y pulsables, no dos enlaces: en un telefono
   sostenido con una mano el area de toque es la mitad del diseno. */
.ac-roles { display: grid; gap: 12px; width: 100%; }
.ac-rol { display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 14px;
    align-items: start; padding: 18px; text-decoration: none;
    border: 1.5px solid var(--hairline); border-radius: var(--r-lg);
    background: var(--paper); box-shadow: var(--sh-1);
    transition: border-color .18s, transform .18s, box-shadow .18s; }
.ac-rol:hover { border-color: var(--ink); transform: translateY(-3px);
    box-shadow: var(--sh-2); text-decoration: none; }
.ac-rol:focus-visible { outline: 2px solid var(--sos); outline-offset: 3px; }
.ac-rol i { display: grid; place-items: center; width: 46px; height: 46px;
    border-radius: 15px; background: var(--sos-soft); color: var(--sos); }
.ac-rol .ico { width: 22px; height: 22px; }
.ac-rol b { display: block; font-size: 16.5px; font-weight: 700;
    letter-spacing: -.02em; color: var(--ink); }
.ac-rol span { display: block; margin-top: 4px; font-size: 13.5px;
    line-height: 1.5; color: var(--ink-2); }
.ac-rol em { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
    font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--sos-ink); }
.ac-rol em .ico { width: 14px; height: 14px; transition: transform .18s; }
.ac-rol:hover em .ico { transform: translateX(4px); }

/* ---------------- cifras de la ciudad ----------------
   Van despues de la decision: son la razon para confiar, no la tarea. */
.ac-cifras { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%;
    border: 1px solid var(--hairline); border-radius: var(--r-md);
    background: var(--paper); overflow: hidden; }
.ac-cifra { display: grid; justify-items: center; gap: 4px; padding: 18px 16px; text-align: center; }
.ac-cifra + .ac-cifra { border-left: 1px solid var(--line-2); }
.ac-cifra b { font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-size: 30px; font-weight: 800; letter-spacing: -.035em; line-height: 1; color: var(--ink); }
.ac-cifra.acento b { color: var(--dato); }
.ac-cifra small { font-size: 11.5px; font-weight: 600; color: var(--ink-2); line-height: 1.35; }

/* El contexto de la ciudad va en un solo bloque para poder mostrarlo de una
   vez cuando el API responde; hereda el ritmo vertical de .ac. */
.ac-contexto { display: grid; gap: clamp(20px, 3vw, 30px); width: 100%; }

/* ---------------- contacto de la alcaldia ---------------- */
.ac-contacto { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ac-contacto li { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 11px;
    align-items: center; padding: 11px 0; border-top: 1px solid var(--line-2); }
.ac-contacto li:first-child { border-top: 0; padding-top: 0; }
.ac-contacto li:last-child { padding-bottom: 0; }
.ac-contacto i { display: grid; place-items: center; width: 30px; height: 30px;
    border-radius: 10px; background: var(--page); border: 1px solid var(--line-2);
    color: var(--ink-2); }
.ac-contacto .ico { width: 15px; height: 15px; }
.ac-contacto small { display: block; font-size: 11px; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.ac-contacto .dato { display: block; margin-top: 1px; font-size: 14px; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; }
.ac-contacto a { color: var(--sos-ink); font-weight: 700; }

/* ---------------- salidas de abajo ---------------- */
.ac-pie { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.ac-nota { max-width: 48ch; font-size: 12.5px; line-height: 1.5;
    color: var(--ink-3); text-align: center; }

/* ---------------- pestañas (QR de centro) ---------------- */
.ac-tabs { display: inline-flex; gap: 4px; padding: 4px; align-self: stretch;
    border: 1px solid var(--hairline); border-radius: 999px; background: var(--paper); }
.ac-tabs .tab { flex: 1; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px;
    background: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700;
    color: var(--ink-2); transition: background .16s, color .16s; }
.ac-tabs .tab:hover { background: var(--page); }
.ac-tabs .tab.active { background: var(--ink); color: #fff; }

/* ---------------- aviso de que cambia algo ----------------
   Cambiarse de centro deja el anterior: se dice antes del boton,
   no despues, y con el peso suficiente para que se lea. */
body.acceso .ac-aviso, body.acceso .card .ac-aviso {
    display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 10px;
    padding: 13px 15px; border-radius: var(--r-sm);
    background: #FFF4E2; color: #7A4E0B; font-size: 13.5px; line-height: 1.5; }
.ac-aviso .ico { width: 18px; height: 18px; margin-top: 1px; color: #B8791A; }

/* ---------------- formularios ---------------- */
body.acceso .form-group { display: grid; gap: 6px; margin: 0; }
body.acceso label { font-size: 13px; font-weight: 700; color: var(--ink); }
body.acceso .form-control { width: 100%; min-height: 48px; padding: 12px 14px;
    border: 1.5px solid var(--hairline); border-radius: var(--r-sm); background: var(--paper);
    font: inherit; font-size: 15.5px; color: var(--ink);
    transition: border-color .16s, box-shadow .16s; }
body.acceso .form-control:hover { border-color: #CFC8BC; }
body.acceso .form-control:focus { outline: none; border-color: var(--sos);
    box-shadow: 0 0 0 3px rgba(240,64,42,.14); }
body.acceso .form-control::placeholder { color: #A9A196; }

/* ---------------- el enlace ya salio ---------------- */
.ac-enviado-ico { display: grid; place-items: center; width: 54px; height: 54px;
    border-radius: 50%; background: var(--sos-soft); color: var(--sos); }
.ac-enviado-ico .ico { width: 25px; height: 25px; }

/* ---------------- espera (consumo del enlace) ----------------
   Una pantalla de dos segundos: sin tarjeta, sin borde, sin nada
   que leer. Solo la senal de que algo esta pasando. */
.ac-espera { display: grid; justify-items: center; gap: 16px; text-align: center;
    padding-block: clamp(40px, 12vh, 110px); }
.ac-espera p { font-size: 15.5px; color: var(--ink-2); }
body.acceso .spinner { margin: 0; }

/* ---------------- codigo que no vale ----------------
   El afiche pudo quedar viejo: se dice eso, y se ofrece la salida
   util en vez de dejar a alguien parado frente a una pared. */
.ac-fallo { display: grid; justify-items: center; gap: 14px; width: 100%;
    padding: clamp(30px, 5vw, 44px) 24px; text-align: center;
    border: 1px dashed var(--hairline); border-radius: var(--r-lg); }
.ac-fallo > i { display: grid; place-items: center; width: 54px; height: 54px;
    border-radius: 50%; background: var(--paper); border: 1px solid var(--hairline);
    color: var(--ink-3); }
.ac-fallo .ico { width: 25px; height: 25px; }
.ac-fallo b { font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-size: 19px; font-weight: 800; letter-spacing: -.025em; }
.ac-fallo p { max-width: 44ch; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }

/* ---------------- pie ---------------- */
body.acceso .site-foot { padding: 24px 18px 30px; text-align: center;
    font-size: 12px; color: var(--ink-3); border-top: 1px solid var(--hairline); }

@media (min-width: 640px) {
    .ac-roles { grid-template-columns: repeat(2, 1fr); }
    .ac-rol { grid-template-columns: 1fr; }
    .ac-rol i { margin-bottom: 2px; }
}
@media (prefers-reduced-motion: reduce) {
    .ac-rol { transition: none; }
    .ac-rol:hover { transform: none; }
    .ac-rol:hover em .ico { transform: none; }
}