/* Web app de socios de tero: páginas públicas (/app/…). Pensada para el celular, a una mano.
   Toma la tipografía y los valores efectivos de la landing, sin alterar los tokens globales. */

.app {
    --app-ink: #244959;
    --app-accion: #1d69a0;
    --app-accion-hover: #185a8a;
    --app-dark: #16303b;
    --app-papel: #f8f9fb;
    --app-papel-suave: #f5f8fa;
    --app-sage: #94c782;
    --app-gold: #d99a3f;
    --app-success: #3f7a4d;
    --app-danger: #d1584f;
    --app-trazo: rgba(36, 73, 89, 0.09);
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--app-papel);
    color: var(--app-ink);
    font-family: 'Open Sans', system-ui, sans-serif;
    line-height: 1.55;
    accent-color: var(--app-accion);
    scrollbar-color: color-mix(in srgb, var(--app-ink) 45%, transparent) transparent;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    -webkit-text-size-adjust: 100%;
}
.app *, .app *::before, .app *::after { box-sizing: border-box; }
.app ::selection { background: color-mix(in srgb, var(--app-accion) 28%, white); color: inherit; }
.app a:not(.app-boton) { color: var(--app-accion); text-decoration: none; }
.app :focus-visible { outline: 2px solid var(--app-accion); outline-offset: 2px; border-radius: 6px; }

/* ── Estructura ─────────────────────────────────────────── */
.app-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 70px; padding: calc((70px - 49px) / 2) 1.5rem; width: 100%; max-width: 72rem; margin: 0 auto; }
.app-top__marca img { display: block; height: auto; }
.app-enlace { display: inline-flex; align-items: center; justify-content: center; font-size: 0.92rem; font-weight: 700; line-height: 1.4; color: #fff !important; background: var(--app-accion); border-radius: 0.7rem; padding: 0.62rem 1.2rem; text-decoration: none; }
.app-enlace:hover { color: #fff !important; background: var(--app-accion-hover); text-decoration: none; }
.app-enlace:focus-visible { outline-color: var(--app-accion); }
.app-main { flex: 1; width: 100%; max-width: 32rem; margin: 0 auto; padding: 0.5rem 1.25rem 2.5rem; }
.app-main--ancho { max-width: 72rem; }
.app-pie { background: #f8f9fb; color: #16303b; padding: 40px 0; border-top: 1px solid rgba(22, 48, 59, 0.08); }
.app-pie__wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 20px; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.app-pie a:not(.app-boton) { color: #16303b; }
.app-pie a:not(.app-boton):hover { color: #1d69a0; }
.app-pie .footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.app-pie .footer-legal__dpa--short { display: none; }

/* ── Piezas ─────────────────────────────────────────────── */
.app-tarjeta { background: #fff; border: 1px solid var(--app-trazo); border-radius: 18px; padding: 1.75rem 1.5rem; box-shadow: 0 2px 8px -2px rgba(22, 48, 59, 0.12); }
.app-tarjeta h1 { font-family: inherit; font-weight: 800; font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.02em; margin: 0.5rem 0; text-wrap: balance; }
.app-centrado { text-align: center; }
.app-icono-grande { font-size: 3rem; color: var(--app-accion); }

.app-boton { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 48px; padding: 0 1.25rem; border-radius: 14px; border: 2px solid transparent; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.15s, box-shadow 0.15s; }
.app-boton:active { transform: scale(0.98); }
.inicio__acciones .app-boton:hover { transform: translateY(-2px); }
.inicio__acciones .app-boton:active { transform: translateY(0) scale(0.98); }
.app-boton--grande { min-height: 56px; font-size: 1.0625rem; width: 100%; }
.app-boton--primario { background: var(--app-accion); color: #fff; box-shadow: none; }
.app-boton--primario:hover { background: var(--app-accion-hover); }
.app-boton--secundario { background: #fff; color: var(--app-ink); border-color: var(--app-ink); }
.app-boton--secundario:hover { background: rgba(29, 105, 160, 0.07); }
.app-boton--claro { background: #fff; color: var(--app-ink); }
.app-boton--claro:hover { background: rgba(29, 105, 160, 0.07); }
.instalar .app-boton--claro:hover { background: #f5f8fa; transform: translateY(-2px); }
.instalar .app-boton--claro:active { transform: translateY(0) scale(0.98); }
.app-boton[hidden], .instalar [hidden] { display: none; }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: #fff; padding: 0.5rem 1rem; z-index: 10; border-radius: 8px; }

/* ── Página de inicio ───────────────────────────────────── */
.inicio { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.inicio > * { min-width: 0; }

/* Héroe tipográfico: el ícono de la app sobre aros de marca. */
.inicio__hero { text-align: center; padding: 0.75rem 0 0; }
.inicio__marca { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 11.5rem; height: 11.5rem; margin-bottom: 0.25rem; }
.inicio__aro { position: absolute; border-radius: 50%; pointer-events: none; }
.inicio__aro--1 { inset: 0; border: 1.5px solid color-mix(in srgb, var(--app-accion) 22%, transparent); }
.inicio__aro--2 { inset: 1.35rem; border: 1.5px solid color-mix(in srgb, var(--app-sage) 55%, transparent); }
.inicio__icono { position: relative; width: 6.5rem; height: 6.5rem; border-radius: 26px; box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--app-ink) 55%, transparent); display: block; }
.inicio__eyebrow { margin: 0.5rem 0 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--app-accion); }
.inicio__titulo { font-family: inherit; font-weight: 800; font-size: clamp(2.25rem, 9vw, 3.5rem); line-height: 1.04; letter-spacing: -0.02em; margin: 0.5rem auto 0; max-width: 16ch; text-wrap: balance; }
.inicio__titulo em { color: var(--app-accion); font-style: normal; }
.inicio__bajada { font-size: 1.125rem; margin: 0.9rem auto 0; max-width: 34ch; color: color-mix(in srgb, var(--app-ink) 88%, transparent); }
.inicio__acciones { display: grid; gap: 0.75rem; margin-top: 1.75rem; max-width: 26rem; margin-left: auto; margin-right: auto; }
.inicio__ingresar { margin: 0.25rem 0 0; text-align: center; font-size: 0.95rem; }
.inicio__ingresar a, .app-aparte a { color: #1d69a0; font-weight: 600; text-decoration: none; }
.inicio__ingresar a:hover, .app-aparte a:hover { text-decoration: underline; }
.inicio__cuerpo { max-width: 44rem; margin: 0 auto; width: 100%; }

.instalar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; background: var(--app-dark); color: #fff; border-radius: 18px; padding: 1.25rem; margin-top: 2rem; }
.instalar__icono { border-radius: 16px; display: block; outline: 1px solid rgb(255 255 255 / 0.32); outline-offset: -1px; }
.instalar h2 { font-size: 1.25rem; line-height: 1.2; margin: 0; }
.instalar p { margin: 0.35rem 0 0.9rem; color: rgb(255 255 255 / 0.88); }
.instalar .instalar__nota { margin-bottom: 0; font-size: 0.95rem; }
.instalar__pasos { margin: 0; padding-left: 1.25rem; color: rgb(255 255 255 / 0.92); display: grid; gap: 0.35rem; }
.instalar a:not(.app-boton) { color: #fff; }

.inicio__usos { margin-top: 2.25rem; }
.inicio__usos h2 { font-size: 1.25rem; margin: 0 0 0.5rem; }
.inicio__usos dl { margin: 0; }
.inicio__usos dl > div { padding: 0.95rem 0; border-top: 1px solid var(--app-trazo); }
.inicio__usos dl > div:last-child { border-bottom: 1px solid var(--app-trazo); }
.inicio__usos dt { font-weight: 700; display: flex; align-items: center; gap: 0.45rem; }
.inicio__usos dt i { color: var(--app-accion); font-size: 1.15em; }
.inicio__usos dd { margin: 0.15rem 0 0; color: color-mix(in srgb, var(--app-ink) 84%, transparent); }

/* Un solo momento de movimiento: el héroe entra al cargar. */
@media (prefers-reduced-motion: no-preference) {
    .inicio__marca, .inicio__eyebrow, .inicio__titulo, .inicio__bajada, .inicio__acciones { animation: app-entra 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
    .inicio__eyebrow { animation-delay: 0.05s; }
    .inicio__titulo { animation-delay: 0.1s; }
    .inicio__bajada { animation-delay: 0.16s; }
    .inicio__acciones { animation-delay: 0.22s; }
    @keyframes app-entra { from { opacity: 0; transform: translateY(10px); } }
}

/* ── Pantalla ancha: héroe centrado, usos en dos columnas ── */
@media (min-width: 56rem) {
    .app-main { padding-top: 1rem; }
    .inicio__hero { padding-top: 2.5rem; }
    .inicio__usos dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
    .inicio__usos dl > div:last-child { border-bottom: 1px solid var(--app-trazo); }
    .inicio__usos dl > div:nth-last-child(2) { border-bottom: 1px solid var(--app-trazo); }
    .inicio__usos { margin-top: 2.5rem; }
}

@media (max-width: 760px) {
    .app-enlace { font-size: 0.85rem; padding: 0.55rem 0.95rem; }
    .app-pie__wrap { flex-direction: column; justify-content: center; text-align: center; }
    .app-pie .footer-legal__dpa--full { display: none; }
    .app-pie .footer-legal__dpa--short { display: inline; }
}

@media (max-width: 560px) {
    .app-top { padding-left: 1.25rem; padding-right: 1.25rem; }
    .app-pie__wrap { padding: 0 20px; }
}

/* ── Formularios y resultados ───────────────────────────── */
.app-bajada { margin: 0.25rem 0 1.25rem; color: color-mix(in srgb, var(--app-ink) 86%, transparent); }
.app-form { display: grid; gap: 0.5rem; }
.app-label { font-weight: 700; }
.app-campo { width: 100%; min-height: 56px; padding: 0 1rem; border: 2px solid var(--app-ink); border-radius: 14px; font: inherit; font-size: 1rem; letter-spacing: 0.04em; background: #fff; color: var(--app-ink); box-sizing: border-box; }
.app-campo:focus-visible { outline: 3px solid rgba(29, 105, 160, 0.35); outline-offset: 2px; }
.app-campo[aria-invalid="true"] { border-color: var(--app-danger); }
.app-error { margin: 0; color: var(--app-danger); font-weight: 600; }
.app-mensaje-balanceado { text-wrap: balance; }
.app-form .app-boton { margin-top: 0.75rem; }
#agregar-hijo { margin-top: 0; }
.app-aparte { margin: 1.25rem 0 0; font-size: 0.95rem; text-align: center; }
.app-nota { font-size: 0.9rem; color: color-mix(in srgb, var(--app-ink) 72%, transparent); }
.app-nota--hijos { margin: 0; }
.app-centrado .app-boton { margin-top: 0.5rem; }

/* ── Alta de socios nuevos ──────────────────────────────── */
.app-subtitulo { font-size: 1.15rem; margin: 1.5rem 0 0.25rem; }
.app-fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.app-campo-grupo { display: grid; gap: 0.35rem; margin-top: 0.5rem; min-width: 0; }
.app-campo--normal { font-size: 1rem; letter-spacing: 0; min-height: 48px; }
select.app-campo { appearance: auto; }
.app-grupo-checks { border: 0; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.25rem; }
.app-check { display: flex; align-items: center; gap: 0.75rem; min-height: 44px; font-size: 0.95rem; font-weight: 600; }
.app-check input { width: 22px; height: 22px; accent-color: var(--app-accion); }
.app-hijo { border: 2px solid var(--app-trazo); border-radius: 14px; padding: 1rem; margin: 0.75rem 0; display: grid; gap: 0.5rem; min-width: 0; }
.app-terminos { max-height: 11rem; overflow: auto; border: 1px solid var(--app-trazo); border-radius: 12px; padding: 0.75rem 1rem; font-size: 0.9rem; background: color-mix(in srgb, var(--app-ink) 4%, white); }
.app-lista { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; }
.app-lista__item, .app-lista__fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--app-trazo); text-decoration: none; min-height: 56px; }
.app-lista__club { display: inline-flex; align-items: center; gap: 0.75rem; min-width: 0; }
.app-lista__logo { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; overflow: hidden; color: var(--app-accion); }
.app-lista__logo img { width: 100%; height: 100%; object-fit: contain; }
.app-lista__logo i { font-size: 1.1rem; }
.app-lista__club .app-nota { margin: 0.15rem 0 0; }
.app-lista li:last-child { border-bottom: 1px solid var(--app-trazo); }
.app-estado { display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; background: var(--app-papel-suave); color: var(--app-ink); }
.app-estado--aceptada { background: rgba(76, 140, 90, 0.15); color: var(--app-success); }
.app-estado--rechazada { background: rgba(209, 88, 79, 0.15); color: var(--app-danger); }
.app-aviso { margin: 0.5rem 0 1rem; padding: 0.75rem 1rem; border: 1px solid var(--app-trazo); border-radius: 12px; background: var(--app-papel-suave); color: var(--app-ink); }
.app-aviso--success { background: rgba(76, 140, 90, 0.15); color: var(--app-success); }
.app-aviso--error { background: rgba(209, 88, 79, 0.15); color: var(--app-danger); }
.app-paginas { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; }
@media (min-width: 30rem) { .app-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } }