/* Auxilio · estilos propios. La base viene de https://www.zojim.com.ar/zojim-ui.css
   Si esa hoja no llega (sin internet y sin copia guardada), los valores de respaldo de acá alcanzan para usar la app. */

/* Color de Auxilio: índigo. Calma, confianza y seguridad, sin asustar.
   En la interfaz va la versión clara (el texto oscuro encima se lee bien). El índigo profundo queda para el ícono. */
:root {
  --z-negro: #09090a; --z-superficie: #151516; --z-texto: #f5f3ee; --z-texto-2: #d4d0c8; --z-texto-3: #aaa69e;
  --z-borde: rgba(255,255,255,.12); --z-borde-fuerte: rgba(255,255,255,.28); --z-dorado: #d6b264; --z-dorado-claro: #ead7a4;
  --z-ok: #7ee2a8; --z-error: #f8a59b; --z-alerta: #f5cb6e;
}
[data-app="auxilio"] {
  --z-app-1: #818cf8;
  --z-app-2: #a5b4fc;
  --z-app-tinta: #0d0b2e;
  --a-indigo: #4f46e5;
  --a-profundo: #1e1b4b;
  --a-rojo: #ff8a80;
}
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; }
body.z {
  margin: 0; min-height: 100vh; color: var(--z-texto); line-height: 1.6;
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(120% 55% at 50% -10%, rgba(79, 70, 229, .38), transparent 60%) var(--z-negro) no-repeat;
}
body.z *, body.z *::before, body.z *::after { box-sizing: border-box; }
body.z [hidden] { display: none !important; }
.z-contenedor { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .z-contenedor { padding: 0 32px; } }

/* Cabecera */
.cabecera { padding: 14px 0 6px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
.cabecera .z-contenedor { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.marca { min-width: 0; display: inline-flex; align-items: center; gap: 12px; min-height: 48px; color: var(--z-texto) !important; text-decoration: none; font-weight: 700; font-size: 1.45rem; letter-spacing: -0.02em; }
.marca img { width: 44px; height: 44px; border-radius: 22%; box-shadow: 0 10px 26px -10px var(--z-app-1); }
.marca-textos { display: flex; flex-direction: column; line-height: 1.1; }
.marca-textos small { font-size: .875rem; font-weight: 500; letter-spacing: 0; color: var(--z-texto-2); margin-top: 4px; }

main { padding-top: 12px; padding-bottom: 48px; }
.pantalla > * + * { margin-top: 18px; }
.pantalla h1 { margin: 0; font-size: clamp(1.7rem, 6.5vw, 2.4rem); line-height: 1.12; letter-spacing: -0.03em; font-weight: 650; }
.pantalla h2 { margin: 0; font-size: 1.333rem; line-height: 1.2; letter-spacing: -0.02em; }
.pantalla p { margin: 0; }
.suave { color: var(--z-texto-2); }
.chico { font-size: .875rem; color: var(--z-texto-2); }
.grande { font-size: 1.125rem; }

/* ---------- 911: siempre visible, tel:911 escrito en el HTML ---------- */
.btn-911 {
  display: flex; align-items: center; gap: 16px; width: 100%; min-height: 4.5rem; padding: 12px 20px;
  border-radius: 22px; border: 3px solid var(--a-rojo); background: rgba(255, 138, 128, .1);
  color: var(--z-texto) !important; text-decoration: none; font-weight: 700; font-size: 1.15rem;
  -webkit-tap-highlight-color: transparent;
}
.btn-911:active { transform: scale(.99); }
.btn-911-num {
  flex-shrink: 0; display: grid; place-items: center; min-width: 4.2rem; height: 3rem; padding: 0 12px; border-radius: 14px;
  background: var(--a-rojo); color: #2a0503; font-size: 1.45rem; font-weight: 800; letter-spacing: .02em;
}
.btn-911-textos { display: flex; flex-direction: column; line-height: 1.2; }
.btn-911-textos small { font-weight: 500; font-size: .95rem; color: var(--z-texto-2); margin-top: 2px; }

/* ---------- El botón grande de ayuda ---------- */
.btn-ayuda {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 12.5rem; padding: 24px 20px; border: none; border-radius: 32px; cursor: pointer;
  background: radial-gradient(120% 120% at 20% 0%, #c7d0ff 0%, var(--z-app-2) 30%, var(--z-app-1) 75%, #6c74f0 100%);
  color: var(--z-app-tinta); font: 800 clamp(1.9rem, 8.5vw, 2.6rem)/1.05 "Geist", system-ui, sans-serif; letter-spacing: -0.03em;
  box-shadow: 0 24px 60px -22px var(--z-app-1), inset 0 2px 0 rgba(255,255,255,.45), inset 0 -6px 0 rgba(13, 11, 46, .18);
  -webkit-tap-highlight-color: transparent; transition: transform .15s;
}
.btn-ayuda:active { transform: scale(.985); }
.btn-ayuda svg { width: 3.4rem; height: 3.4rem; }
.btn-ayuda small { font-size: 1.05rem; font-weight: 600; letter-spacing: 0; opacity: .9; }
.btn-ayuda:focus-visible { outline: 4px solid #fff; outline-offset: 4px; }

/* Aviso legal visible en la pantalla principal */
.aviso-911 { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; border: 2px dashed rgba(255, 138, 128, .55); background: rgba(255, 138, 128, .06); color: var(--z-texto-2); }
.aviso-911 b { color: var(--z-texto); }
.aviso-911 svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--a-rojo); margin-top: 1px; }

/* Menú de la pantalla principal: filas grandes */
.menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fila {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 4.2rem; padding: 12px 16px; border-radius: 20px;
  border: 1px solid var(--z-borde-fuerte); background: rgba(255,255,255,.045); color: var(--z-texto) !important;
  text-decoration: none; text-align: left; font: 600 1.05rem/1.25 "Geist", system-ui, sans-serif; cursor: pointer;
}
.fila:hover { background: rgba(255,255,255,.08); }
.fila-icono { flex-shrink: 0; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 14px; background: color-mix(in srgb, var(--z-app-1) 18%, transparent); color: var(--z-app-2); }
.fila-icono svg { width: 1.5rem; height: 1.5rem; }
.fila-textos { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fila-textos small { font-weight: 500; font-size: .9rem; color: var(--z-texto-2); margin-top: 2px; }
.fila::after { content: ""; flex-shrink: 0; width: 10px; height: 10px; border-right: 3px solid var(--z-texto-3); border-top: 3px solid var(--z-texto-3); transform: rotate(45deg); margin-right: 6px; }
.etq-pro { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; vertical-align: 2px; color: var(--z-app-tinta); background: linear-gradient(120deg, var(--z-app-1), var(--z-app-2)); }

/* Tarjetas de familiares */
.persona { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 22px; border: 1px solid var(--z-borde-fuerte); background: rgba(255,255,255,.04); }
.persona-cabeza { display: flex; align-items: center; gap: 14px; }
.persona-inicial { flex-shrink: 0; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: color-mix(in srgb, var(--z-app-1) 22%, transparent); color: var(--z-app-2); font-weight: 800; font-size: 1.3rem; }
.persona-nombre { font-weight: 700; font-size: 1.15rem; line-height: 1.2; overflow-wrap: anywhere; }
.persona-tel { color: var(--z-texto-2); font-variant-numeric: tabular-nums; }
.persona-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.persona-botones .z-btn { padding-left: 12px; padding-right: 12px; }
.persona.enviado { border-color: rgba(126, 226, 168, .6); background: rgba(126, 226, 168, .06); }
.estado-ok { color: var(--z-ok); font-weight: 700; }

/* Botones de mandar (WhatsApp, SMS, llamar) */
.btn-wa { background: #25d366 !important; color: #052e16 !important; border: none !important; font-size: 1.125rem; min-height: 3.6rem; }
.btn-wa:hover { filter: brightness(1.05); }
.btn-wa svg { width: 1.5em; height: 1.5em; }

/* Mensaje que se va a mandar */
.mensaje { white-space: pre-wrap; overflow-wrap: anywhere; padding: 16px 18px; border-radius: 18px 18px 18px 6px; background: #1d2b22; border: 1px solid rgba(37, 211, 102, .35); color: #eafbe9; font-size: 1rem; }

/* Formularios */
.formulario { display: grid; gap: 18px; }
.z-entrada { font-size: 1.05rem; }
select.z-entrada { appearance: auto; }
.normalizado { font-weight: 700; color: var(--z-ok); }

/* Mis datos a pantalla completa (para mostrarle a quien ayuda) */
.ficha { display: grid; gap: 14px; }
.ficha-dato { padding: 14px 18px; border-radius: 18px; background: #f5f3ee; color: #111; }
.ficha-dato dt { font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #3b3a6b; }
.ficha-dato dd { margin: 4px 0 0; font-size: 1.35rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; white-space: pre-wrap; }
.ficha-dato.importante { background: #fff1ef; outline: 3px solid var(--a-rojo); }

/* Números útiles */
.numeros { display: grid; gap: 12px; }
.numero { display: flex; align-items: center; gap: 16px; min-height: 4.2rem; padding: 12px 16px; border-radius: 20px; border: 1px solid var(--z-borde-fuerte); background: rgba(255,255,255,.045); color: var(--z-texto) !important; text-decoration: none; }
.numero-num { flex-shrink: 0; display: grid; place-items: center; min-width: 4.4rem; height: 3rem; border-radius: 14px; background: rgba(255,255,255,.1); font-size: 1.35rem; font-weight: 800; }
.numero-textos { display: flex; flex-direction: column; line-height: 1.25; font-weight: 700; }
.numero-textos small { font-weight: 500; color: var(--z-texto-2); font-size: .92rem; margin-top: 3px; }

/* Buscando la ubicación */
.buscando { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; padding: 28px 8px; }
.radar { position: relative; width: 120px; height: 120px; }
.radar i { position: absolute; inset: 0; border-radius: 50%; border: 4px solid var(--z-app-1); opacity: 0; animation: radar 1.8s ease-out infinite; }
.radar i:nth-child(2) { animation-delay: .6s; }
.radar i:nth-child(3) { animation-delay: 1.2s; }
.radar b { position: absolute; inset: 38px; border-radius: 50%; background: var(--z-app-1); }
@keyframes radar { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .radar i { animation: none; opacity: .5; } .btn-ayuda { transition: none; } }

/* Confirmación grande */
.confirmar { text-align: center; }
.confirmar .z-btn-app { min-height: 5rem; font-size: 1.5rem; font-weight: 800; border-radius: 24px; }

/* Aviso abajo (tostada) */
.tostada {
  position: fixed; left: 16px; right: 16px; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); z-index: 120; max-width: 560px; margin: 0 auto;
  padding: 16px 18px; border-radius: 18px; background: #12261b; border: 2px solid var(--z-ok); color: #effcf3; font-weight: 600;
  box-shadow: 0 20px 50px -20px #000;
}
.tostada.error { background: #2b1513; border-color: var(--z-error); color: #fff0ee; }

/* Ventana de confirmar */
.velo { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.72); }
.ventana { width: 100%; max-width: 460px; background: #151516; }
.ventana p { margin: 0 0 20px; font-size: 1.15rem; font-weight: 600; }
.ventana-botones { display: grid; gap: 12px; }

/* Pro */
.precio-pro { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.precio-pro b { font-size: 2.6rem; font-weight: 650; letter-spacing: -0.03em; line-height: 1; }
.precio-pro span { color: var(--z-texto-2); font-size: 1.125rem; }
.lista-tildes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lista-tildes li { display: flex; gap: 12px; align-items: flex-start; }
.lista-tildes li::before { content: "✓"; flex-shrink: 0; display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; background: var(--z-app-1); color: var(--z-app-tinta); font-weight: 800; font-size: .9rem; }
.clave-campo { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; }
.enlace { display: inline-flex; align-items: center; min-height: 48px; color: var(--z-dorado-claro); text-decoration: underline; text-underline-offset: 4px; }

/* Instalar */
.instalar-caja { display: flex; gap: 16px; align-items: center; }
.instalar-caja img { width: 64px; height: 64px; border-radius: 22%; flex-shrink: 0; }
.pasos { margin: 0; padding-left: 1.4em; display: grid; gap: 10px; }
.pasos li::marker { font-weight: 800; color: var(--z-app-2); }
.icono-compartir { display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -0.25em; }

/* Pie legal (propio: legal.js no le pone estilos si el pie ya existe) */
#pie-legal { border-top: 1px solid rgba(255,255,255,.08); padding: 32px 16px 120px; color: var(--z-texto-2); background: var(--z-negro); }
#pie-legal .pl-wrap { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
#pie-legal .pie-auxilio { margin: 0; }
#pie-legal .pie-auxilio b { color: var(--z-texto); }
#pie-legal .pl-botones { display: flex; flex-wrap: wrap; gap: 12px; }
#pie-legal .pl-btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 22px; border-radius: 999px; border: 2px solid rgba(214,178,100,.7); color: #ead7a4; text-decoration: none; font-weight: 600; background: rgba(214,178,100,.06); }
#pie-legal .pl-links { display: flex; flex-wrap: wrap; gap: 0 22px; }
#pie-legal .pl-links a { display: inline-flex; align-items: center; min-height: 48px; color: var(--z-texto); text-decoration: underline; text-underline-offset: 4px; }
#pie-legal .pl-titular { color: var(--z-texto-3); font-size: .875rem; }
#pie-legal .pl-titular a { color: var(--z-texto-3); }

/* ---------- Impresión: solo la tarjeta ---------- */
#impresion { display: none; }
@media print {
  @page { margin: 12mm; }
  body.z { background: #fff !important; color: #000 !important; }
  body.z > *:not(#impresion) { display: none !important; }
  #letra-grande, #zv, #zojim-volver, .circulo-instalar { display: none !important; }
  #impresion { display: block !important; font-family: "Geist", Arial, sans-serif; color: #000; }
  .tarjeta-billetera { width: 85.6mm; min-height: 54mm; padding: 4mm 5mm; border: 0.4mm dashed #444; border-radius: 3mm; font-size: 8.5pt; line-height: 1.3; break-inside: avoid; }
  .tarjeta-billetera h3 { margin: 0 0 1.5mm; font-size: 10.5pt; }
  .tarjeta-billetera p { margin: 0 0 1mm; }
  .tarjeta-billetera .t911 { font-weight: 800; }
  .hoja-heladera { margin-top: 10mm; padding: 8mm; border: 0.6mm solid #000; border-radius: 4mm; font-size: 14pt; line-height: 1.4; break-inside: avoid; }
  .hoja-heladera h2 { margin: 0 0 4mm; font-size: 22pt; }
  .hoja-heladera .grande911 { font-size: 30pt; font-weight: 800; margin: 0 0 4mm; }
  .hoja-heladera dl { margin: 0; display: grid; grid-template-columns: 45mm 1fr; gap: 2mm 6mm; }
  .hoja-heladera dt { font-weight: 700; }
  .hoja-heladera dd { margin: 0; white-space: pre-wrap; }
  .corte { margin: 2mm 0 0; font-size: 8pt; color: #444; }
}

/* Páginas de texto (condiciones y privacidad) */
.doc { max-width: 760px; padding-top: 16px; padding-bottom: 56px; }
.doc > * + * { margin-top: 16px; }
.doc h1 { margin-top: 18px; }
.doc h2 { margin: 36px 0 0; font-size: 1.333rem; line-height: 1.25; letter-spacing: -0.02em; }
.doc p, .doc li { color: var(--z-texto-2); }
.doc b { color: var(--z-texto); }
.doc ul { padding-left: 1.3em; display: grid; gap: 8px; }
.doc a:not(.z-btn):not(.btn-911) { color: var(--z-dorado-claro); }

/* Los botones que son enlaces: "body.z a" de zojim-ui.css les pondría letra dorada. */
body.z a.z-btn { color: var(--z-texto); text-decoration: none; }
body.z a.z-btn-app { color: var(--z-app-tinta); }
body.z a.z-btn-texto { color: var(--z-dorado-claro); text-decoration: underline; }

/* Respaldo por si zojim-ui.css no llega (primera visita sin señal). :where() no pesa nada:
   si la hoja de Zojim carga, manda la de Zojim. */
:where(.z-btn) { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 3rem; padding: 10px 24px; border-radius: 999px;
  border: 2px solid rgba(255,255,255,.28); background: rgba(255,255,255,.04); color: #f5f3ee; font: 600 1rem/1.2 "Geist", system-ui, sans-serif; text-decoration: none; cursor: pointer; }
:where(.z-btn svg) { width: 1.2em; height: 1.2em; }
:where(.z-btn-app) { min-height: 3.25rem; border: none; color: var(--z-app-tinta); background: linear-gradient(120deg, var(--z-app-1), var(--z-app-2)); font-size: 1.125rem; }
:where(.z-btn-ancho) { display: flex; width: 100%; }
:where(.z-btn-peligro) { border-color: rgba(248,165,155,.6); color: var(--z-error); }
:where(.z-btn-texto) { border-color: transparent; background: transparent; color: var(--z-dorado-claro); text-decoration: underline; }
:where(.z-kicker) { display: inline-block; font-size: .875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--z-app-1); }
:where(.z-acento) { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; color: var(--z-app-2); }
:where(.z-campo) { display: flex; flex-direction: column; gap: 8px; }
:where(.z-etiqueta) { font-weight: 600; }
:where(.z-ayuda) { font-size: .875rem; color: var(--z-texto-2); margin: 0; }
:where(.z-entrada) { width: 100%; min-height: 3.25rem; padding: 12px 18px; border-radius: 16px; border: 2px solid rgba(255,255,255,.28); background: #151516; color: #f5f3ee; font: 500 1rem/1.4 "Geist", system-ui, sans-serif; }
:where(textarea.z-entrada) { min-height: 7rem; }
:where(.z-error-texto) { margin: 0; color: var(--z-error); font-weight: 600; }
:where(.z-aviso) { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.04); color: var(--z-texto-2); }
:where(.z-aviso svg) { width: 24px; height: 24px; flex-shrink: 0; }
:where(.z-aviso-error) { border-color: rgba(248,165,155,.55); background: rgba(248,165,155,.08); color: var(--z-texto); }
:where(.z-aviso-ok) { border-color: rgba(126,226,168,.5); background: rgba(126,226,168,.08); color: var(--z-texto); }
:where(.z-tarjeta) { position: relative; padding: 28px 24px; border-radius: 24px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
:where(.z-pila > * + *) { margin-top: 16px; }
:where(.z-casilla) { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; border: 2px solid rgba(255,255,255,.12); }
:where(.z-casilla input) { width: 28px; height: 28px; margin: 0; accent-color: var(--z-app-1); }
:where(.z-volver) { display: inline-flex; align-items: center; min-height: 3rem; padding: 8px 18px; border-radius: 999px; border: 2px solid rgba(255,255,255,.28); color: #f5f3ee; text-decoration: none; font-weight: 600; }

/* Franja fina de arriba con arrepentimiento y baja (Disp. 954/2025) */
.franja-legal { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 22px; padding: 0 16px; padding-top: env(safe-area-inset-top, 0px); background: #151516; border-bottom: 1px solid rgba(255,255,255,.12); }
.franja-legal a { display: inline-flex; align-items: center; min-height: 48px; color: var(--z-dorado-claro); font-size: .95rem; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }