/* ============================================================
   SOCIOS ECOM — La plataforma como app en el móvil (2026-11-10)

   La última capa del armazón: lo que hace que en el teléfono se
   sienta instalada y no una web encogida.

   1 · Lo táctil: sin destello al tocar, respuesta al pulsar, campos
       que no amplían la página y nada que se toque por debajo de
       44 px (--se-tactil).
   2 · El armazón del móvil (hasta 1024 px, en el MVP): sin barra
       lateral ni hamburguesa, cabecera con el nombre de la pantalla
       y la barra de abajo (app.js, pintarBarraApp), todo respetando
       la raya de inicio y el notch (--se-zona-*).
   3 · Piezas compartidas: los esqueletos de carga.

   Los tokens están en tokens.css (--se-tactil, --se-barra-app…).
   ============================================================ */

/* ---------- 1 · Lo táctil ---------- */

html {
  /* El destello gris de iOS y Android al tocar delata la web: cada control ya tiene su :active. */
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
/* Sin la espera de «¿doble toque?»: el toque responde al momento. */
:where(a, button, [role="button"], [role="tab"], summary, label, select) { touch-action: manipulation; }
/* Mantener pulsado un botón no selecciona su texto (el texto de la página sí se puede copiar). */
:where(button, [role="button"], [role="tab"], .btn, .mboton, .barra-app__item, .pestanas-seccion__item) {
  -webkit-user-select: none;
  user-select: none;
}

/*
 * Con el dedo, los campos a 16 px como mínimo: con menos, iOS amplía la
 * página al tocarlos y no la devuelve. Va con !important a propósito: es
 * una regla de la plataforma y tiene que ganar a la letra de cada
 * componente (los buscadores de Miembros, Top 1 %, Clonar…).
 */
@media (pointer: coarse) {
  input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select {
    font-size: max(var(--se-fs-campo), 1em) !important;
  }
}

/* Respuesta al pulsar, en el acto: el botón se hunde un poco bajo el dedo. */
@media (prefers-reduced-motion: no-preference) {
  :is(.btn, .mboton, .mb-btn, .mb-filtro, .marco-chip, .mres__pestana, .mhoja__pestana, .pestanas-seccion__item, .perfil-ajuste, .barra-app__item) {
    transition: var(--se-pulsar), background-color var(--se-trans), color var(--se-trans), border-color var(--se-trans);
  }
  :is(.btn, .mboton, .mb-btn, .mb-filtro, .marco-chip, .mres__pestana, .mhoja__pestana, .pestanas-seccion__item, .perfil-ajuste):active:not(:disabled) {
    transform: scale(.97);
  }
}

/*
 * En pantallas táctiles, todo lo que se toca mide al menos 44 px de alto.
 * Los enlaces dentro de un párrafo no: el texto que los rodea ya los separa.
 */
@media (pointer: coarse) {
  :is(.mres__pestana, .mb-filtro, .mb-btn, .top1-filtro, .marco-chip, .pestanas-seccion__item,
      .acceso__olvido, .perfil-enlace, .ag-enlace, .ag-chip, .ag-boton, .cl-boton, .guardado__borrar,
      .btn, .mboton, .manuncio__boton, .tut__btn, .tut__saltar, .campo__control, .mb-buscar, .mb-select) {
    min-height: var(--se-tactil);
  }
  /* La estrella de cada referente: el gesto que más se repite en la lista */
  .mfila__estrella { width: var(--se-tactil); height: var(--se-tactil); }
  .mb-sumar button { min-width: var(--se-tactil); min-height: 40px; }
  :is(.marco-composer__enviar, .marco-micro, .ag-enviar, .acceso__ver, .mhoja__flecha, .mhoja__cerrar) {
    min-width: var(--se-tactil);
    min-height: var(--se-tactil);
  }
  :is(.acceso__olvido, .perfil-enlace, .ag-enlace) { display: inline-flex; align-items: center; }
  details > summary { min-height: var(--se-tactil); display: flex; align-items: center; }
}

/* ---------- 2 · El armazón del móvil ---------- */

.barra-app { display: none; }

@media (max-width: 1024px) {
  /* Sin hamburguesa: lo que había en el cajón está en la barra de abajo. */
  .es-mvp .sidebar,
  .es-mvp .velo,
  .es-mvp #btn-menu,
  .es-mvp .topbar .icono-btn--pronto,
  .es-mvp .usuario-caja { display: none; }

  /* La cabecera: la marca, el nombre de la pantalla (las migas de consola.js) y el cupo.
     Por debajo del notch, con su fondo detrás. */
  .es-mvp .topbar {
    height: calc(var(--se-topbar) + var(--se-zona-arriba));
    padding: var(--se-zona-arriba) max(var(--se-margen-movil), env(safe-area-inset-right)) 0 max(var(--se-margen-movil), env(safe-area-inset-left));
    gap: 10px;
  }
  .es-mvp .topbar .cs-migas [aria-current] { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
  .es-mvp .topbar .creditos { height: 36px; }

  /* El contenido no queda debajo de la barra de abajo. */
  .es-mvp .hoja { padding-bottom: calc(var(--se-barra-app) + var(--se-zona-abajo) + 24px); }

  .es-mvp .barra-app {
    position: fixed;
    inset: auto 0 0;
    z-index: var(--se-z-sticky);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    height: calc(var(--se-barra-app) + var(--se-zona-abajo));
    padding: 0 env(safe-area-inset-right) var(--se-zona-abajo) env(safe-area-inset-left);
    background: color-mix(in srgb, var(--se-papel) 90%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border-top: 1px solid var(--se-linea);
  }
  /* La ficha de Marco, el tutorial y los avisos van por encima de la barra. */
  .con-hoja-marco .barra-app { display: none; }
}

.barra-app__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: var(--se-tactil);
  color: var(--se-tinta-3);
  text-decoration: none;
  /* 11 px es la letra de las barras de pestañas de iOS y Android: va debajo de un icono que ya dice dónde lleva. */
  font: 600 11px/1.15 var(--se-fuente);
  letter-spacing: .01em;
}
.barra-app__icono {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 30px;
  border-radius: 999px;
  transition: background-color .2s ease, color .2s ease, transform .12s var(--se-salida);
}
.barra-app__icono svg { width: 22px; height: 22px; }
.barra-app__texto { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.barra-app__item.es-activo { color: var(--se-tinta); }
.barra-app__item.es-activo .barra-app__icono { background: var(--se-lateral-activo); color: var(--se-verde-tinta); }
.barra-app__item:active .barra-app__icono { transform: scale(.9); }
.barra-app__item:focus-visible { outline: none; }
.barra-app__item:focus-visible .barra-app__icono { box-shadow: var(--se-anillo-foco); }
.barra-app__item.es-pronto { opacity: .5; cursor: default; }
.barra-app__pronto {
  position: absolute;
  top: 3px;
  left: calc(50% + 8px);
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--se-papel-hundido);
  color: var(--se-tinta-2);
  font: 700 10px/1.3 var(--se-fuente);
}
.barra-app__cuenta {
  position: absolute;
  top: -3px;
  left: calc(50% + 6px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--se-verde);
  color: var(--se-sobre-verde);
  font: 700 11px/18px var(--se-fuente);
  text-align: center;
}
.es-vacio .barra-app__cuenta { display: none; }

/* La barra lateral de escritorio no se pliega en el MVP: con tres secciones no estorba. */
@media (min-width: 1025px) {
  .es-mvp #btn-menu { display: none; }
}

/* ---------- 3 · Esqueletos de carga ----------
   El sitio de lo que va a llegar, latiendo, en vez de una pantalla en blanco. */

.esqueleto-lista { display: grid; gap: 12px; }
.esqueleto {
  display: block;
  border-radius: var(--se-r-card);
  background: linear-gradient(100deg, var(--se-papel-hundido) 30%, var(--se-linea) 50%, var(--se-papel-hundido) 70%) 0 0 / 300% 100%;
  animation: esqueleto-late 1.4s ease-in-out infinite;
}
.esqueleto--tarjeta { height: 112px; }
@keyframes esqueleto-late { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .esqueleto, .mmovil__pantalla { animation: none; }
}