/* =============================================================================
   app.css — el panel del anfitrión como app (DESIGN.md §8 y §8b, 16-oct-2026)
   Va con js/app.js. Se carga DESPUÉS de css/marca.css (y de css/site.css si la
   página lo usa): solo usa los tokens de la marca (--fondo, --superficie, --texto,
   --texto-2, --linea, --linea-control, --acento, --sobre-acento, --foco, --curva…).

   CARGA
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
       (sin viewport-fit=cover, env(safe-area-inset-bottom) vale 0 y la barra queda
        debajo de la raya del iPhone)
     <link rel="stylesheet" href="css/app.css" />
     <script src="js/app.js"></script>      (al final del <body>, después de js/auth.js)

   QUÉ TRAE
   1) LA BARRA ÚNICA DE ABAJO (solo celular, < 760 px): Inicio · + Crear · Eventos, igual
      en todas las páginas que la llevan (ver js/app.js). La llevan las páginas con
      <body data-chrome="publico|panel"> o con data-app-tab; data-app-tab="ninguna" (crear,
      pagar, control del muro, cuenta) NO la lleva. En escritorio no aparece.
      Mientras hay barra, <html> lleva .app-con-tabs y --app-abajo vale el alto de la barra
      + el área segura del teléfono (0 en escritorio y con el teclado abierto). Es la ÚNICA
      variable para lo que flota abajo (reemplaza a --pub-barra-alto y --app-tabs-alto):
        .mi-aviso{bottom:calc(16px + var(--app-abajo))}
      Con el teclado abierto <html> lleva .app-teclado y la barra se esconde.

   2) HOJA que sube desde abajo (celular) o diálogo centrado (escritorio). La maneja
      BrinddiApp.hoja(elemento) en js/app.js, que MUEVE ese mismo nodo de la página
      adentro de la hoja y lo devuelve a su lugar al cerrar. Clases que deja:
        .app-velo  .app-hoja (.abierta)  .app-hoja-cab  .app-hoja-titulo
        .app-hoja-x  .app-hoja-cuerpo
      Con opción "ancla", en escritorio es un menú que cuelga del botón (.app-hoja-ancla).

   3) Piezas para el contenido de una hoja (opcionales, sirven en cualquier página):
        .app-lista  > a|button   filas de 52 px con ícono, nombre y flechita
        .app-mosaico > a|button  botones grandes con ícono arriba (2-3 por fila)
        .app-peligro             lo destructivo, aparte y en gris (borde punteado)
   ============================================================================= */

/* --app-barra-alto es lo que mide la barra sin el área segura: 6 + 56 + 6. Cada pestaña mide 56
   (4 + 30 del ícono o la placa de Crear + 3 + 15 del nombre + 4), y la barra se fija a ese alto
   (height, no min-height): lo que se apoya en var(--app-abajo) queda justo arriba de ella.
   --app-carril es una franja fija pegada arriba de la barra (la de "Instalar la app", en
   css/cascara.css). Entra en --app-abajo, así nada queda debajo de ella. */
:root{--app-abajo:0px;--app-barra-alto:68px;--app-carril:0px}
.app-ico{width:24px;height:24px;flex:none;display:block}

/* ---------- 1) la barra única de abajo ----------
   Un paso más oscura que la página (tinta profunda): se lee como el dock de una app, sin raya
   ni vidrio. z-index 50: arriba del header público (45) y abajo de las hojas (90). */
.app-tabs{display:none}
@media (max-width:759px){
  html.app-con-tabs{--app-abajo:calc(var(--app-barra-alto) + var(--app-carril) + env(safe-area-inset-bottom,0px))}
  html.app-con-tabs.app-teclado{--app-abajo:0px}
  html.app-con-tabs body{padding-bottom:var(--app-abajo)}
  html.app-con-tabs{scroll-padding-bottom:calc(var(--app-abajo) + 16px)}
  .app-tabs{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:4px;box-sizing:border-box;
    height:calc(var(--app-barra-alto) + env(safe-area-inset-bottom,0px));
    padding:6px max(12px,env(safe-area-inset-left,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-right,0px));
    background:var(--tinta-profunda,#0C1C39);view-transition-name:cs-barra}
  html.app-teclado .app-tabs{display:none}
}
.app-tab{flex:1 1 0;min-width:0;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:4px 2px;border-radius:14px;color:var(--texto-2);text-decoration:none;
  font-family:var(--fuente);font-size:.8125rem;font-weight:var(--peso-menu);letter-spacing:var(--tracking-chico);line-height:1.15;
  -webkit-tap-highlight-color:transparent;transition:background-color .16s ease,color .16s ease}
.app-tab > span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-tab > .app-ico{margin:3px 0}          /* mismo alto que la placa de Crear: los nombres quedan en línea */
.app-tab[aria-current="page"]{color:var(--texto);font-weight:var(--peso-boton)}
.app-tab[aria-current="page"] .app-ico{color:var(--acento)}
.app-tab:active{background:var(--superficie)}
@media (hover:hover){.app-tab:hover{color:var(--texto)}}
.app-tab:focus-visible{outline:2px solid var(--foco);outline-offset:-2px}
/* Crear: la acción destacada. Placa coral con el + en tinta profunda (5.00:1). */
.app-tab-mas{display:flex;align-items:center;justify-content:center;width:48px;height:30px;border-radius:var(--pildora);
  background:var(--acento);color:var(--sobre-acento)}
.app-tab-mas .app-ico{width:22px;height:22px;color:var(--sobre-acento)!important}
@media (prefers-reduced-motion:no-preference){ .app-tab:active .app-ico,.app-tab:active .app-tab-mas{transform:scale(.92)} }
.app-tab .app-ico,.app-tab-mas{transition:transform .14s var(--curva)}

/* ---------- 2) hoja ---------- */
html.app-hoja-abierta{overflow:hidden}
/* Con overflow en <html>, el overflow-x:hidden del body (site.css) ya no pasa a la ventana
   y el body se vuelve contenedor de scroll: la cabecera sticky se iba de la pantalla
   mientras la hoja estaba abierta. clip recorta igual sin crear contenedor de scroll. */
html.app-hoja-abierta body{overflow-x:clip}
.app-velo{position:fixed;inset:0;z-index:90;background:rgba(12,28,57,.72);opacity:0;pointer-events:none;transition:opacity .2s ease}
.app-velo.abierta{opacity:1;pointer-events:auto}
.app-velo.claro{background:transparent}
.app-hoja{position:fixed;left:0;right:0;bottom:0;z-index:91;display:flex;flex-direction:column;
  max-height:calc(100dvh - 24px);max-height:min(90vh,calc(100dvh - 24px));
  background:var(--superficie);color:var(--texto);border-radius:24px 24px 0 0;box-shadow:var(--sombra-flota);outline:none;
  transform:translateY(102%);visibility:hidden;
  transition:transform .3s var(--curva),visibility 0s linear .3s}
.app-hoja.abierta{transform:none;visibility:visible;transition:transform .3s var(--curva),visibility 0s}
/* la cabecera es la tiradera: se arrastra hacia abajo para cerrar */
.app-hoja-cab{flex:none;position:relative;display:flex;align-items:flex-start;gap:8px;min-height:60px;padding:18px 8px 6px 20px;
  touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.app-hoja-cab::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:5px;background:var(--linea-control)}
.app-hoja-titulo{flex:1;min-width:0;margin:6px 0 0;font-size:var(--t-sub);font-weight:var(--peso-titulo);line-height:1.2;color:var(--texto);
  overflow-wrap:anywhere;text-wrap:balance}
.app-hoja-x{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-top:-4px;border-radius:50%;
  background:var(--fondo);border:0;color:var(--texto);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .16s ease}
.app-hoja-x .app-ico{width:20px;height:20px}
@media (hover:hover){.app-hoja-x:hover{background:color-mix(in srgb,var(--texto) 12%,var(--fondo))}}
.app-hoja-x:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
.app-hoja-cuerpo{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:6px 20px calc(24px + env(safe-area-inset-bottom,0px))}
.app-hoja.arrastrando{transition:none}

/* escritorio: diálogo centrado */
@media (min-width:760px){
  .app-hoja{left:50%;top:50%;right:auto;bottom:auto;width:min(520px,calc(100vw - 48px));max-height:min(82vh,760px);
    border-radius:var(--radio);transform:translate(-50%,-47%) scale(.98);opacity:0;
    transition:transform .22s var(--curva),opacity .2s ease,visibility 0s linear .22s}
  .app-hoja.abierta{transform:translate(-50%,-50%);opacity:1;transition:transform .22s var(--curva),opacity .2s ease,visibility 0s}
  .app-hoja-cab{cursor:default;touch-action:auto;padding:20px 12px 6px 24px}
  .app-hoja-cab::before{display:none}
  .app-hoja-titulo{margin-top:4px}
  .app-hoja-cuerpo{padding:6px 24px 24px}
  /* menú que cuelga de su botón (opción "ancla") */
  .app-hoja.app-hoja-ancla{left:auto;top:auto;width:300px;transform:translateY(-6px);border-radius:18px}
  .app-hoja.app-hoja-ancla.abierta{transform:none}
  .app-hoja.app-hoja-ancla .app-hoja-cab{min-height:0;padding:14px 8px 0 18px}
  .app-hoja.app-hoja-ancla .app-hoja-cuerpo{padding:4px 10px 10px}
}
@media (prefers-reduced-motion:reduce){
  .app-hoja,.app-hoja.abierta,.app-velo{transition:none!important}
}

/* ---------- 3) piezas para el contenido ---------- */
/* filas: una acción por fila, ícono + nombre + flechita */
.app-lista{display:flex;flex-direction:column}
.app-lista > a,.app-lista > button{display:flex;align-items:center;gap:14px;width:100%;min-height:52px;padding:0 6px;
  background:transparent;border:0;border-bottom:1px solid var(--linea);color:var(--texto);text-align:left;text-decoration:none;cursor:pointer;
  font-family:var(--fuente);font-size:var(--t-cuerpo);font-weight:var(--peso-menu);line-height:1.25;
  -webkit-tap-highlight-color:transparent;transition:background-color .16s ease}
.app-lista > :last-child{border-bottom:0}
.app-lista > a::after,.app-lista > button::after{content:"";margin-left:auto;flex:none;width:8px;height:8px;border-right:1.7px solid var(--texto-2);
  border-top:1.7px solid var(--texto-2);transform:rotate(45deg);margin-right:6px}
.app-lista .app-ico{width:22px;height:22px;color:var(--texto-2)}
.app-lista > :active{background:color-mix(in srgb,var(--texto) 6%,transparent)}
@media (hover:hover){.app-lista > a:hover,.app-lista > button:hover{background:color-mix(in srgb,var(--texto) 6%,transparent)}}
.app-lista > a:focus-visible,.app-lista > button:focus-visible{outline:2px solid var(--foco);outline-offset:-2px;border-radius:12px}

/* mosaico: botones grandes con el ícono arriba */
/* De a 3 por fila; si en la última sobran 2, van de a 2; si sobra 1, las últimas 4 van
   en dos filas de 2. Así nunca queda un botón solo y torcido. */
.app-mosaico{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.app-mosaico > *{grid-column:span 2}
.app-mosaico > :nth-child(3n+1):nth-last-child(2),.app-mosaico > :nth-child(3n+1):nth-last-child(2) ~ *,
.app-mosaico > :nth-child(3n+1):nth-last-child(4),.app-mosaico > :nth-child(3n+1):nth-last-child(4) ~ *{grid-column:span 3}
.app-mosaico > :only-child{grid-column:1 / -1}
.app-mosaico > a,.app-mosaico > button{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:10px;min-height:84px;
  padding:12px;border-radius:16px;background:var(--fondo);border:1px solid transparent;color:var(--texto);text-align:left;text-decoration:none;cursor:pointer;
  font-family:var(--fuente);font-size:var(--t-chico);font-weight:var(--peso-menu);letter-spacing:var(--tracking-chico);line-height:1.2;
  -webkit-tap-highlight-color:transparent;transition:border-color .16s ease,transform .16s var(--curva)}
.app-mosaico .app-ico{color:var(--acento)}
@media (hover:hover){.app-mosaico > a:hover,.app-mosaico > button:hover{border-color:var(--linea-control)}}
.app-mosaico > :active{transform:translateY(1px)}
.app-mosaico > a:focus-visible,.app-mosaico > button:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
@media (max-width:339px){.app-mosaico > *{grid-column:span 3!important}}

/* lo que puede borrar: aparte, abajo, en gris y con borde punteado */
.app-peligro{margin-top:22px;padding-top:16px;border-top:1px solid var(--linea)}
.app-peligro > a,.app-peligro > button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--pildora);
  background:transparent;border:1px dashed var(--linea-control);color:var(--texto-2);text-decoration:none;cursor:pointer;
  font-family:var(--fuente);font-size:var(--t-chico);font-weight:var(--peso-menu);transition:color .16s ease,border-color .16s ease}
.app-peligro .app-ico{width:18px;height:18px}
@media (hover:hover){.app-peligro > a:hover,.app-peligro > button:hover{color:var(--texto);border-color:var(--acento);border-style:solid}}
/* segundo toque pendiente ("¿Borrar? Toca otra vez"): borde coral lleno */
.app-peligro > .confirmar{color:var(--texto);border-color:var(--acento);border-style:solid}
.app-peligro > a:focus-visible,.app-peligro > button:focus-visible{outline:2px solid var(--foco);outline-offset:2px}

@media print{.app-tabs,.app-velo,.app-hoja{display:none!important}html.app-con-tabs body{padding-bottom:0!important}}