/* =============================================================================
   cascara.css — la cáscara del celular de Brinddi (DESIGN.md §8, decidido el 18-oct-2026)
   Va con js/cascara.js. Necesita css/marca.css y css/app.css (la barra de abajo y las
   hojas son de app.css). Se carga en las páginas con <body data-chrome="publico|panel">,
   NUNCA en las del invitado ni en el muro.

   QUÉ TRAE
   · El hueco del header ([data-cascara-acciones]): el botón de cuenta en todos los anchos,
       el mismo en públicas y panel (desde 1100 px con "Hola, nombre" o "Iniciar sesión"), y
       el menú por debajo de 1100 px. Entre 760 y 1099 px la .pub-nav muestra sus links
       cortos al lado; desde 1100 px, los links completos y sin menú.
   · El header en celular: 68 px fijos en todas las páginas y, al bajar (html.cs-bajo, lo
       pone js/cascara.js), la tinta profunda. Igual en las públicas y en el panel.
   · El contenido de las hojas "Menú" y "Tu cuenta" (.cs-filas, .cs-menu-pie, .cs-pagos).
   · "Instalar la app": el carril (.cs-carril) pegado arriba de la barra, solo en celular. Su
       alto entra en --app-abajo (--app-carril), así nada queda debajo y se ve todo el tiempo.
   · Las transiciones entre páginas (@view-transition) para que el header y la barra no
     parpadeen al navegar.
   Sin vidrio, sin sombras en reposo, sin rayas. Todo lo que se toca mide 44 px o más.
   ============================================================================= */

/* ---------- transiciones entre páginas: el header y la barra quedan quietos ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
body[data-chrome] :is(header.pub-nav,.dash-head,.gal-head,.ed-head,.l-head,header.nav){view-transition-name:cs-cabeza}
::view-transition-old(cs-cabeza),::view-transition-new(cs-cabeza),
::view-transition-old(cs-barra),::view-transition-new(cs-barra){animation:none}

/* ---------- el hueco del header ---------- */
[data-cascara-acciones]{display:inline-flex;align-items:center;gap:4px;flex:none;margin-right:-6px}
/* los links del nav van a la derecha, pegados al hueco (no en el medio del header) */
body[data-chrome="publico"] header.pub-nav > nav{margin-left:auto}
@media (max-width:759px){
  /* la .pub-nav en celular: el logo a la izquierda y el hueco a la derecha */
  body[data-chrome="publico"] header.pub-nav{gap:12px}
}
/* desde 1100 px entran todos los links: el menú se va y la cuenta queda sola */
@media (min-width:1100px){
  body[data-chrome] .cs-menu-btn{display:none}
  body[data-chrome] [data-cascara-acciones]{margin-right:0}
}
/* el header en celular es UNO: 68 px (12 + 44 + 12, más el área segura) en todas las pestañas,
   acompaña el scroll y al bajar pasa a la tinta profunda. Sin raya ni vidrio. Así, al pasar de
   una pestaña a otra, el logo y los botones no saltan ni cambian de color. */
@media (max-width:759px){
  body[data-chrome="publico"] header.pub-nav,
  body[data-chrome="publico"] header.pub-nav.pub-nav-baja{padding-top:calc(12px + env(safe-area-inset-top,0px));padding-bottom:12px}
  body[data-chrome="panel"] :is(.dash-head,.gal-head,.ed-head,.l-head,header.nav){position:sticky;top:0;background:var(--fondo);transition:background-color 220ms ease}
  html.cs-bajo body[data-chrome] :is(header.pub-nav,.dash-head,.gal-head,.ed-head,.l-head,header.nav){background:var(--tinta-profunda,#0C1C39)}
}
/* en celular, la cabecera del panel es la misma que la de las públicas: 68 px (más el área
   segura), 16 px a los costados, los botones a 12 px del borde de arriba y sin raya. Así, al
   pasar de una pestaña a otra, el logo y los botones no saltan. */
@media (max-width:759px){
  body[data-chrome="panel"] :is(.dash-head,.gal-head,.ed-head,.l-head,header.nav){border-bottom:0!important}
  body[data-chrome="panel"] :is(.dash-head,.gal-head){padding:calc(12px + env(safe-area-inset-top,0px)) 0 12px}
  body[data-chrome="panel"] :is(.dash-head-in,.gal-head-in){padding:0 16px;min-height:44px}
  body[data-chrome="panel"] .dash-head .brand{padding:0;min-height:44px}
  body[data-chrome="panel"] :is(.ed-head,.l-head){padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px}
  body[data-chrome="panel"] header.nav{padding-top:env(safe-area-inset-top,0px)}
  body[data-chrome="panel"] header.nav .nav-in{padding:12px 16px}
  /* y el contenido cuelga del mismo margen de 16 px que el logo (antes iba a 5vw: 20 px a 390) */
  body[data-chrome="panel"] :is(main.dash,main.gal,main.cc){padding-left:16px;padding-right:16px}
}

/* botón de cuenta y botón de menú: 44 px para el dedo */
.cs-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;margin:0;
  border:0;border-radius:50%;background:transparent;color:var(--texto);font-family:var(--fuente);cursor:pointer;text-decoration:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color .16s ease,transform .14s var(--curva)}
.cs-btn svg{width:24px;height:24px;display:block}
.cs-btn:focus-visible{outline:2px solid var(--foco);outline-offset:2px}
@media (hover:hover){.cs-menu-btn:hover{background:color-mix(in srgb,var(--texto) 10%,transparent)}}
@media (prefers-reduced-motion:no-preference){.cs-btn:active{transform:scale(.94)}}

/* el círculo de la cuenta: la inicial, o el ícono de persona sin sesión */
.cs-avatar{position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:38px;height:38px;border-radius:50%;
  background:var(--superficie);color:var(--texto);font-weight:var(--peso-boton);font-size:1rem;line-height:1;font-variant-numeric:tabular-nums}
.cs-avatar svg{width:22px;height:22px}
/* ya entró alguna vez en este navegador: mientras responde /auth/me, el círculo queda vacío
   en lugar del ícono de persona (no salta de un dibujo a otro) */
.cs-avatar.cs-espera{color:transparent}
/* falta completar el perfil: un punto coral */
.cs-avatar.falta::after{content:"";position:absolute;top:-1px;right:-1px;box-sizing:border-box;width:11px;height:11px;border-radius:50%;background:var(--acento);border:2px solid var(--fondo)}
@media (hover:hover){.cs-cuenta-btn:hover .cs-avatar{background:var(--superficie-2,#2A4675)}}
/* con foto de perfil: la foto tapa la inicial (que queda debajo por si la foto no carga) */
.cs-avatar .cs-foto-img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.cs-avatar.con-foto{color:transparent}
.cs-avatar.falta::after{z-index:1}
.cs-nombre{display:none}
.cs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* escritorio (1100 px o más), públicas y panel: la píldora con la inicial y "Hola, nombre" (la
   de Mis eventos). Sin sesión, "Iniciar sesión" como un link más del nav. Mientras se espera la
   respuesta de quien ya entró alguna vez, solo el círculo vacío (no salta de un texto a otro). */
@media (min-width:1100px){
  body[data-chrome] .cs-cuenta-btn{width:auto;min-width:0;max-width:min(24vw,260px);gap:10px;padding:0 16px 0 3px;border-radius:var(--pildora);
    border:1px solid var(--linea-control);font-size:var(--t-chico)}
  body[data-chrome] .cs-cuenta-btn .cs-avatar{width:36px;height:36px;font-size:.9375rem}
  body[data-chrome] .cs-nombre{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--texto-2)}
  body[data-chrome] .cs-nombre b{color:var(--texto);font-weight:var(--peso-menu)}
  body[data-chrome] .cs-cuenta-btn.cs-sin-sesion{padding:0 4px;border:0;border-radius:10px;font-size:inherit}
  body[data-chrome] .cs-cuenta-btn.cs-sin-sesion .cs-avatar{display:none}
  body[data-chrome] .cs-cuenta-btn.cs-sin-sesion .cs-nombre{color:var(--texto);font-weight:var(--peso-menu)}
  body[data-chrome] .cs-cuenta-btn.cs-esperando{width:44px;padding:0}
  body[data-chrome] .cs-cuenta-btn.cs-esperando .cs-avatar{display:flex}
  body[data-chrome] .cs-cuenta-btn.cs-esperando .cs-nombre{display:none}
  @media (hover:hover){
    body[data-chrome] .cs-cuenta-btn:hover{background:color-mix(in srgb,var(--texto) 8%,transparent)}
    body[data-chrome] .cs-cuenta-btn.cs-sin-sesion:hover{background:transparent}
    body[data-chrome] .cs-cuenta-btn.cs-sin-sesion:hover .cs-nombre{color:var(--damasco,var(--texto))}
  }
}

/* ---------- el contenido de las hojas ---------- */
.cs-hoja [hidden]{display:none!important}
/* filas grandes, sin rayas: ícono + nombre. La página actual va marcada */
.cs-filas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.cs-fila{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:0 14px;margin:0;border:0;border-radius:14px;
  background:transparent;color:var(--texto);font-family:var(--fuente);font-size:1.0625rem;font-weight:var(--peso-menu);line-height:1.25;
  text-align:left;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .16s ease}
.cs-fila svg{width:22px;height:22px;flex:none;color:var(--texto-2)}
.cs-fila > span{min-width:0;overflow-wrap:anywhere}
.cs-fila .cs-dato{margin-left:auto;flex:none;color:var(--texto-2);font-size:var(--t-chico);font-weight:var(--peso-menu);font-variant-numeric:tabular-nums}
.cs-fila:active{background:color-mix(in srgb,var(--texto) 8%,transparent)}
@media (hover:hover){.cs-fila:hover{background:color-mix(in srgb,var(--texto) 7%,transparent)}}
.cs-fila:focus-visible{outline:2px solid var(--foco);outline-offset:-2px}
.cs-fila[aria-current="page"]{background:var(--fondo);font-weight:var(--peso-boton)}
.cs-fila[aria-current="page"] svg{color:var(--acento)}
.cs-fila.falta svg{color:var(--acento)}
.cs-fila.falta span{font-weight:var(--peso-boton)}
/* arriba de "Tu cuenta": la foto grande con la camarita, el nombre, el correo y la foto */
/* La foto ocupa dos filas: arriba el nombre y el correo, abajo subir o quitar. En una hoja
   angosta (la de escritorio deja menos de 290 px) subir y quitar pasan abajo, a todo el ancho. */
.cs-yo{container-type:inline-size;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;padding:2px 14px 14px}
.cs-yo-foto{grid-column:1;grid-row:1 / span 2;align-self:center}
.cs-yo-txt{grid-column:2;grid-row:1;align-self:end}
.cs-yo-acc{grid-column:2;grid-row:2;align-self:start}
@container (max-width:290px){
  .cs-yo-foto{grid-row:1}
  .cs-yo-txt{align-self:center}
  .cs-yo-acc{grid-column:1 / -1;margin-top:6px}
}
.cs-yo-foto{position:relative;display:block;width:72px;height:72px;padding:0;margin:0;border:0;border-radius:50%;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .14s var(--curva)}
.cs-yo-foto .cs-avatar{width:72px;height:72px;font-size:1.75rem;background:var(--fondo)}
.cs-yo-foto:focus-visible{outline:2px solid var(--foco);outline-offset:3px}
.cs-yo-foto:disabled{cursor:progress}
@media (prefers-reduced-motion:no-preference){.cs-yo-foto:active:not(:disabled){transform:scale(.96)}}
.cs-yo-cam{position:absolute;right:-3px;bottom:-3px;display:flex;align-items:center;justify-content:center;width:28px;height:28px;box-sizing:border-box;
  border-radius:50%;background:var(--acento);color:var(--sobre-acento,#0C1C39);border:2px solid var(--superficie)}
.cs-yo-cam svg{width:16px;height:16px;display:block}
.cs-yo-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.cs-yo-txt > b{font-weight:var(--peso-boton);font-size:var(--t-cuerpo);line-height:1.3;overflow-wrap:anywhere}
.cs-yo-txt > span{color:var(--texto-2);font-size:var(--t-chico);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cs-yo-txt > b.cs-yo-mail{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cs-yo-acc{display:flex;flex-wrap:wrap;column-gap:16px}
.cs-yo-btn{display:inline-flex;align-items:center;min-height:44px;padding:0;margin:0;border:0;background:none;color:var(--texto);font-family:var(--fuente);
  font-size:var(--t-chico);font-weight:var(--peso-menu);text-decoration:underline;text-decoration-color:var(--acento);text-decoration-thickness:2px;
  text-underline-offset:5px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cs-yo-btn.cs-yo-quitar{color:var(--texto-2);text-decoration-color:var(--linea-control)}
.cs-yo-btn:disabled{opacity:.55;cursor:progress}
.cs-yo-btn:focus-visible{outline:2px solid var(--foco);outline-offset:2px;border-radius:4px}
.cs-yo-msg{grid-column:1 / -1;margin:10px 0 0;color:var(--texto-2);font-size:var(--t-chico);line-height:1.45}
.cs-yo-msg:empty{display:none}
.cs-yo-msg.mal{color:var(--texto)}
.cs-yo-msg.mal::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--acento);vertical-align:1px}
/* mientras sube, el círculo late despacio (quieto con movimiento reducido) */
.cs-avatar.cs-subiendo{opacity:.6}
@media (prefers-reduced-motion:no-preference){
  .cs-avatar.cs-subiendo{animation:cs-late 1.1s ease-in-out infinite alternate}
  @keyframes cs-late{from{opacity:.45}to{opacity:.85}}
}
.cs-salir{margin-top:14px}
.cs-salir .cs-fila{color:var(--texto-2)}

/* el pie del menú, más chico: los legales y las seis redes */
.cs-menu-pie{margin-top:18px;padding:0 6px}
.cs-legales{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 4px}
.cs-legales a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;border-radius:10px;color:var(--texto-2);font-size:var(--t-chico);
  font-weight:var(--peso-menu);text-decoration:none;-webkit-tap-highlight-color:transparent}
.cs-legales a[aria-current="page"]{color:var(--texto);text-decoration:underline;text-decoration-color:var(--acento);text-underline-offset:4px}
@media (hover:hover){.cs-legales a:hover{color:var(--texto)}}
.cs-redes{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.cs-redes a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--texto-2);
  -webkit-tap-highlight-color:transparent;transition:color .16s ease,background-color .16s ease}
.cs-redes svg{width:20px;height:20px;display:block}
.cs-redes a:active{background:color-mix(in srgb,var(--texto) 8%,transparent)}
@media (hover:hover){.cs-redes a:hover{color:var(--texto)}}
.cs-legales a:focus-visible,.cs-redes a:focus-visible{outline:2px solid var(--foco);outline-offset:0}

/* "Tus pagos": un comprobante por fila (qué, cuánto, cuándo y los dos números) */
.cs-pagos{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cs-pagos li{background:var(--fondo);border-radius:14px;padding:12px 14px;display:grid;gap:3px;
  font-size:var(--t-chico);line-height:1.45;color:var(--texto-2)}
.cs-pagos .pg-arriba{display:flex;justify-content:space-between;gap:12px;align-items:baseline;color:var(--texto)}
.cs-pagos .pg-arriba b{font-weight:var(--peso-boton);font-size:var(--t-cuerpo);min-width:0;overflow-wrap:anywhere}
.cs-pagos .pg-monto{flex:none;font-weight:var(--peso-boton);font-variant-numeric:tabular-nums;color:var(--texto)}
.cs-pagos li b{color:var(--texto);font-weight:var(--peso-menu);overflow-wrap:anywhere}
.cs-nota{color:var(--texto-2);font-size:var(--t-chico);line-height:1.5;margin:12px 0 0}

/* la hoja "Agrega Brinddi a tu pantalla": el ícono, los pasos y Listo */
.cs-pasos-ico{display:block;width:64px;height:64px;border-radius:16px;margin:2px 0 14px}
.cs-pasos{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.cs-pasos li{display:flex;gap:14px;align-items:flex-start;font-size:var(--t-cuerpo);line-height:1.45}
.cs-pasos i{display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:12px;background:var(--fondo);color:var(--acento)}
.cs-pasos i svg{width:22px;height:22px}
.cs-pasos b{font-weight:var(--peso-boton)}
.cs-listo{display:flex;width:100%;min-height:52px;margin-top:22px;justify-content:center}

/* ---------- "Instalar la app": el carril de arriba de la barra (solo celular) ----------
   Una franja de la misma tinta que la barra, pegada a ella, con el botón a la derecha (lejos del
   Crear del centro). Su alto (--app-carril) entra en --app-abajo: el padding del body y todo lo
   fijo de cada página lo descuentan, así que no tapa nada y se ve en todo el recorrido. Blanco
   tibio sobre la tinta: se ve sin competir con el coral. Sin sombra. */
.cs-carril{display:none}
@media (max-width:759px){
  html.app-con-tabs.cs-con-instalar{--app-carril:52px}
  html.app-con-tabs.cs-con-instalar .cs-carril:not([hidden]){position:fixed;left:0;right:0;z-index:50;
    bottom:calc(var(--app-barra-alto) + env(safe-area-inset-bottom,0px));height:var(--app-carril);box-sizing:border-box;
    display:flex;align-items:flex-end;justify-content:flex-end;padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));
    background:var(--tinta-profunda,#0C1C39);view-transition-name:cs-carril}
  html.app-teclado .cs-carril{display:none!important}
}
/* celular acostado (480 px de alto o menos): la barra ya ocupa un quinto de la pantalla y el
   carril se va. Instalar sigue en el menú */
@media (max-width:759px) and (max-height:480px){
  html.app-con-tabs.cs-con-instalar{--app-carril:0px}
  .cs-carril{display:none!important}
}
.cs-instalar{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px 0 14px;border:0;border-radius:var(--pildora);
  background:var(--blanco-tibio,#F7F0E8);color:var(--tinta-profunda,#0C1C39);font-family:var(--fuente);font-size:.9375rem;font-weight:var(--peso-boton);
  line-height:1;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .14s var(--curva)}
.cs-instalar svg{width:20px;height:20px;flex:none}
.cs-instalar:focus-visible{outline:2px solid var(--foco);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){.cs-instalar:active{transform:scale(.96)}}
::view-transition-old(cs-carril),::view-transition-new(cs-carril){animation:none}

/* abierta como app y con sesión, mientras salta a Mis eventos: sin destello de la portada */
html.cs-saltando body{visibility:hidden}

@media print{
  [data-cascara-acciones],.cs-carril{display:none!important}
}