/* ============================================================
   barra.css — la barra de arriba y la hoja de espacios

   Tres cosas: la marca, el nombre del espacio (que es CONTEXTO,
   no una accion) y el avatar, que es la puerta a lo que no es
   del evento. El avatar va SOLO, sin el nombre al lado: ya
   sabes quien sos, y ese lugar lo necesita el nombre del
   espacio, que si informa.

   La lista de espacios no vive en el menu del avatar -ese menu
   es de la cuenta, y una lista ahi lo hace crecer sin techo-.
   Va en su hoja: modal en escritorio, cajon desde abajo en el
   telefono.

   El unico color literal es el blanco de la tinta del avatar,
   que se apoya sobre un tono generado y no sobre una ficha.
   ============================================================ */

/*
 * La barra se pega arriba y CRUZA la ventana.
 *
 * Vive dentro de `.panel__app`, que tiene padding y un ancho maximo, asi que su
 * superficie terminaba antes del borde y la linea de abajo quedaba cortada. Los
 * margenes negativos la devuelven al ancho completo, y el padding propio
 * mantiene su contenido alineado con la columna del panel.
 */
/*
 * Sin fondo, sin linea, y por eso tampoco pegajosa.
 *
 * Era una barra: fondo translucido, desenfoque y una linea abajo, pegada arriba
 * mientras se scrollea. Quitarle el fondo y la linea la deja de ser una barra y
 * pasa a ser el encabezado de la pagina, asi que dejarla pegajosa seria un bug:
 * sin fondo que la respalde, el contenido pasaria POR DETRAS del titulo y las
 * dos cosas se leerian encimadas. Se queda arriba y se va con el scroll.
 */
.barra {
  margin-bottom: var(--e24);
}

/* Sin ancho ni relleno propios: ya esta dentro del contenedor de la pagina,
   que es el que decide el ancho y el margen lateral. Los tenia porque la barra
   se salia del contenedor con margenes negativos para pintar su fondo de borde
   a borde; sin fondo, no hace falta salirse. */
.barra__interior {
  display: flex;
  align-items: center;
  gap: var(--e8);
}

/*
 * La marca no es un boton del kit.
 *
 * ESTE era el bug del header. `barra__marca` es un <button>, y el kit solo le
 * hereda la tipografia y el cursor: el borde, el fondo y el padding nativos del
 * navegador quedaban puestos, asi que la palabra se dibujaba como un bloque
 * gris con relieve. El avatar se salvaba de casualidad, porque una segunda
 * regla mas abajo los apagaba.
 *
 * El relleno negativo a los costados compensa el propio: deja el texto alineado
 * con el borde de la columna y le da al puntero donde entrar.
 */
.barra__marca {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex: none;
  min-width: 0;
  border-radius: var(--radius-sm);
  padding: var(--e6) var(--e8);
  margin-inline-start: calc(-1 * var(--e8));
  color: var(--color-action);
}

/*
 * El logo, a la altura que tenia la palabra.
 *
 * 20 px y no 24: la palabra media 24 de caja tipografica, pero de eso la letra
 * ocupa unos 17. El logo no tiene ascendentes ni descendentes, asi que a 24
 * pesaba mas que todo lo demas de la barra.
 */
.barra__logo {
  block-size: 20px;
  color: var(--color-text);
  transition: color var(--duration-fast) var(--ease-out);
}

.barra__marca:hover .barra__logo { color: var(--color-action); }

/* --- avatar y su menu --------------------------------------------------- */

/*
 * Solo la foto, y declarado UNA vez.
 *
 * Estaba escrito dos veces: el primer bloque le ponia borde, fondo, radio
 * circular y una transicion sobre `border-color`, y un segundo bloque mas abajo
 * apagaba las cuatro cosas y cambiaba el realce a `outline`. Nada del primero
 * se veia -ganaba el ultimo- pero la transicion quedaba animando una propiedad
 * que ya no cambiaba, asi que el realce aparecia de golpe.
 *
 * El nombre propio no va al lado: ya sabes quien sos, y el nombre del espacio
 * tampoco, porque lo dice el h1 de la pantalla.
 */
.avatar {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  appearance: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius-micro);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  overflow: hidden;
  /* El realce es un `outline`, que no ocupa lugar: un borde que aparece al
     pasar por encima correria un pixel todo lo que tiene al lado. */
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition:
    outline-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

.avatar:hover { outline-color: var(--color-border-hover); color: var(--color-text); }
.menu.is-open .avatar { outline-color: var(--color-action); color: var(--color-text); }

.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* --- rol ------------------------------------------------------------------ */

/* Dueño lleva el color de accion y operador es gris. La diferencia entre los
   dos es de PODER, y el color lo dice antes que la palabra. */
.rol {
  flex: none;
  padding: 2px var(--e8);
  border-radius: var(--radius-full);
  font-size: var(--t-etiqueta);
  font-weight: var(--weight-medium);
  border: 1px solid transparent;
}

/* Los ids son los del SERVIDOR (`owner` / `operator`), no traducciones: el
   diseno los tenia en castellano y esas dos reglas no aplicaban a nada. */
.rol--owner { background: var(--color-action); color: var(--color-on-action); }

.rol--operator {
  background: var(--color-surface-muted);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}


/* --- avatar de un espacio -------------------------------------------------
   Siempre una imagen: la que se subio, o la de la marca. `object-fit: cover`
   porque la medida la da quien lo usa y una foto que no es cuadrada tiene que
   recortarse, no deformarse. */

.espacio-avatar {
  flex: none;
  display: block;
  border-radius: var(--radius-micro);
  object-fit: cover;
  /* Mientras baja, el hueco del color del tema y no un marco roto. */
  background: var(--color-surface-muted);
}

/* EL AVATAR SIN IMAGEN: el color del espacio y el simbolo encima.

   Era una sola imagen de fabrica para todos, asi que cinco espacios en el
   elector eran cinco veces la misma cosa y lo unico que los distinguia era leer
   el nombre. El color lo deriva `tonoDeEspacio` del id.

   EL SIMBOLO ENTRA POR MASCARA y no pintado: asi el archivo es UNO para todos
   los colores, y es el mismo recurso que ya usa el icono del calendario de un
   campo de fecha. Pintado seria un color fijo contra veintiocho temas.

   Oscuro y a poca opacidad a proposito: tiene que leerse como "todavia no
   eligieron una imagen" y no como la imagen elegida. Un logo nuestro opaco en
   el avatar de un salon diria que el salon es nuestro.

   Al 52% y centrado: el simbolo es mas alto que ancho -su caja es 760x901- asi
   que `contain` lo ajusta por el alto y queda con aire a los costados, que es
   lo que lo hace ver como una marca de agua y no como un icono apretado. */
.espacio-avatar--marca {
  position: relative;
  background: var(--tono, var(--color-surface-muted));
  overflow: hidden;
}

.espacio-avatar--marca::after {
  content: "";
  position: absolute;
  inset: 0;
  /* El mas oscuro de la escala del kit, y no un negro literal: el design system
     no permite un color escrito a mano, y con razon -un literal es un color que
     no sigue a la paleta-. La escala de neutros no la pisa ningun tema, asi que
     este oscuro es oscuro en los veintiocho. */
  background: var(--neutral-950);
  opacity: 0.3;
  -webkit-mask: url(/ds/marca/simbolo.svg) center / 52% no-repeat;
  mask: url(/ds/marca/simbolo.svg) center / 52% no-repeat;
}

/* --- cabecera del menu del avatar ------------------------------------------
   Es el ESPACIO en el que estas, no vos: tocarla lleva a tu cuenta, y el mail
   de abajo dice con que estas autenticada. */

.menu__quien {
  display: flex;
  align-items: center;
  gap: var(--e16);
  padding: var(--e8);
  border-radius: var(--radius-control);
  text-decoration: none;
  color: inherit;
}

.menu__quien:hover { background: var(--color-surface-muted); }

.menu__quien-nombre {
  font-size: var(--t-apoyo);
  font-weight: var(--weight-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu__quien-mail {
  font-size: var(--t-etiqueta);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- elegir espacio -------------------------------------------------------
   Modal en escritorio y cajon desde abajo en el telefono: la misma lista,
   puesta donde llega la mano en cada uno.

   No vive en el desplegable del avatar. Ese menu es de la CUENTA, y una lista
   de espacios metida ahi mezcla dos cosas distintas y lo hace crecer sin
   techo. */

.velo {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--color-backdrop);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}

.velo.is-abierto { opacity: 1; }

.hoja-espacios {
  width: min(420px, calc(100vw - var(--e32)));
  max-height: min(600px, calc(100dvh - var(--e64)));
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  translate: 0 8px;
  transition: translate var(--duration-base) var(--ease-out);
}

.velo.is-abierto .hoja-espacios { translate: 0 0; }

.hoja-espacios__cabeza {
  display: flex;
  align-items: center;
  gap: var(--e16);
  padding: var(--e16) var(--e16) var(--e16) var(--e24);
  /* La misma linea que la cabecera de un dialogo del kit. Ademas de parecerse,
     hace falta: la lista scrollea y sin ella los espacios se deslizan por
     debajo del titulo. */
  border-bottom: 1px solid var(--color-border);
}

.hoja-espacios__titulo {
  flex: 1;
  margin: 0;
  font-size: var(--t-cuerpo);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
}

.hoja-espacios__cerrar {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

.hoja-espacios__cerrar:hover { background: var(--color-surface-muted); color: var(--color-text); }

.hoja-espacios__lista {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--e8) var(--e8) var(--e8);
  display: flex;
  flex-direction: column;
  gap: var(--e6);
}

/* Foto, nombre y rol. Sin cuentas de eventos ni "sos esto": lo que hace falta
   para reconocer el espacio y saber que podes hacer ahi.

   LA FILA ES UN <button>, Y HAY QUE APAGARLE LO QUE EL NAVEGADOR LE PONE.

   Es el mismo bug que tenia la marca del header, con tres sintomas a la vez: el
   borde nativo (una linea clara alrededor de cada fila), el fondo nativo -que es
   un color del SISTEMA, asi que era gris con cualquiera de los veintiocho
   temas- y el texto centrado, porque un boton centra su contenido. El kit solo
   le hereda la tipografia y el cursor; el resto hay que apagarlo. */
.espacio {
  appearance: none;
  inline-size: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: start;
  cursor: pointer;
  color: inherit;
  text-decoration: none;

  display: flex;
  align-items: center;
  gap: var(--e12);
  min-height: 64px;
  padding: var(--e8) var(--e12);
  border-radius: var(--radius-lg);
  transition: background var(--duration-fast) var(--ease-out);
}

.espacio:hover { background: var(--color-surface-muted); }

/*
 * El elegido se marca con el FONDO y con el tilde, no con el color de la letra.
 *
 * Pintaba el nombre con el color de accion. Un nombre propio en el color de las
 * acciones se lee como algo que se puede apretar -y las otras filas tambien lo
 * son- asi que el color no decia "estas aca", decia otra cosa. El acento queda
 * para el tilde, que es el unico elemento cuyo oficio es justamente ese.
 */
.espacio.is-on { background: var(--color-surface-muted); }
.espacio__tilde { flex: none; display: flex; color: var(--color-action); }

/*
 * El nombre y, debajo, el rol en letra chica.
 *
 * El rol estuvo un rato como la pastilla del listado de miembros. Ahi funciona
 * —una por fila, leidas en columna, comparandose entre si— y aca no: hay un
 * solo rol y va debajo del nombre del espacio, asi que la pastilla le ganaba la
 * jerarquia al dato que importa. Ademas se estiraba de punta a punta, porque en
 * una columna flexible un hijo se estira al ancho entero.
 *
 * El apilado y el hueco los pone `pila pila-4`, que es la utilidad para dos
 * renglones del mismo dato.
 */
.espacio__nombre {
  font-size: var(--t-cuerpo);
  font-weight: var(--weight-medium);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La misma letra chica que el mail debajo de un miembro, en los ajustes. */
.espacio__rol {
  font-size: var(--t-etiqueta);
  color: var(--color-text-muted);
}

.hoja-espacios__nuevo {
  appearance: none;
  inline-size: 100%;
  text-align: start;
  display: flex;
  align-items: center;
  gap: var(--e8);
  min-height: 56px;
  padding: 0 var(--e24);
  border: 0;
  border-top: 1px solid var(--color-border);
  background: none;
  color: var(--color-action);
  font: inherit;
  font-size: var(--t-apoyo);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.hoja-espacios__nuevo:hover { background: var(--color-surface-muted); }

/* En el telefono, cajon desde abajo: llega el pulgar. */
@media (max-width: 40rem) {
  .velo { place-items: end center; }
  .hoja-espacios {
    width: 100%;
    max-width: none;
    /* El mismo radio que el cajon del kit (`modal.css`): son dos cajones que
       suben desde abajo en la misma aplicacion, y a 24 contra 16 se ven como
       dos componentes distintos. */
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    border-bottom: 0;
    translate: 0 24px;
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* --- el desplegable del avatar ------------------------------------------- */

/*
 * El kit ya lo ancla a la derecha y lo posiciona; repetirlo aca seria la misma
 * duplicacion que tenia el avatar. Lo unico propio: que el menu no se estire en
 * la fila, y que el panel entre en una pantalla angosta -su contenido es el
 * nombre del espacio y un mail, que son largos.
 */
.barra .menu { flex: none; margin-left: var(--e8); }

.barra .menu__list {
  min-width: 17rem;
  max-width: calc(100vw - var(--e32));
}

/* En el telefono el logo baja tres pixeles: a 20 contra el avatar, el header
   queda casi sin aire a los costados. */
@media (max-width: 30rem) {
  .barra__logo { block-size: 17px; }
}

/* ============================================================
   EL CONTADOR DE EVENTOS, AL LADO DEL AVATAR
   ============================================================

   Pedido asi: "arriba al lado del avatar, asi como los casinos que muestran
   cuantas monedas tienes o las apps muestran creditos".

   CON PALABRA Y SIN ICONO: el set no tiene un glifo de "evento" y poner uno que
   signifique otra cosa es peor que ninguno. Y un numero solo al lado de un
   avatar se lee como un contador de notificaciones.

   EN CERO CAMBIA DE TONO, NO DE FORMA. Un contador que desaparece al llegar a
   cero deja a quien se quedo sin eventos sin ningun lugar donde preguntar, que
   es exactamente cuando mas lo necesita. Con la ficha de accion se lee como
   "esto es lo que hay que hacer ahora" en vez de como una falla —el rojo diria
   que algo se rompio, y no se rompio nada: ya uso lo que tenia—. */

.creditos {
  display: inline-flex;
  align-items: center;
  gap: var(--e6);
  /* 32 px de alto, como el avatar de al lado: dos pastillas de distinto alto en
     la misma fila se leen como un error de alineacion. */
  min-block-size: 32px;
  padding-inline: var(--e12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--t-etiqueta);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.creditos:hover {
  background: var(--color-surface);
  border-color: var(--color-border-hover);
}

/* El texto entero -numero mas palabra- en una linea, y el numero en tinta
   plena: lo que se busca es el numero, la palabra solo lo desambigua.

   CON SEPARACION EXPLICITA. El espacio iba dentro del texto -" eventos"- y un
   nodo de texto que ARRANCA con espacio dentro de un contenedor flex lo pierde:
   cada hijo es su propia caja y el blanco del borde se colapsa. Se veia "3eventos".
   El gap es la unica forma de separar dos cajas flex. */
/* EN UNA SOLA LINEA. Desde que la frase es "Te quedan 3 eventos" son cuatro
   cajas flex, y sin esto la pastilla puede partirse en dos renglones en una
   barra angosta: con 32px de alto fijo, el segundo renglon se corta. */
.creditos__texto {
  display: inline-flex;
  align-items: baseline;
  gap: var(--e6);
  white-space: nowrap;
}
.creditos__n { color: var(--color-text); font-variant-numeric: tabular-nums; }

/* EN CERO: LA MISMA PASTILLA, UN TONO MAS PRESENTE. No la ficha de accion.

   La primera version le puso el borde y la tinta de accion, y queda tosco: la
   pastilla deja de ser una pastilla y se vuelve un boton de color en la barra,
   al lado del avatar, que es el lugar mas tranquilo de la pantalla. Una cuenta
   que se termino no es una alarma.

   La diferencia alcanza con el relleno suave de accion y la tinta plena: se nota
   que cambio de estado -y que se puede tocar- sin gritar. El borde sigue siendo
   el mismo, que es lo que la mantiene hermana de la version con saldo. */
/* Y TODO LO DE LA PASTILLA EN CERO VIVE EN ESTA REGLA.
   Quedaron dos `.creditos--cero` cuando se le agrego el brillo, y es la trampa
   que este archivo ya tuvo: un `.creditos--cero:hover` duplicado gano por
   cascada y devolvio el borde primary que se habia sacado. Ademas una guardia
   que lea "la regla de .creditos--cero" encuentra la primera y mide media
   verdad, que es como esto se descubrio. */
.creditos--cero {
  background: var(--color-action-soft);
  color: var(--color-text);
  position: relative;
  isolation: isolate;
  /* El reflejo ocupa el lugar del borde, asi que el borde se corre. */
  border-color: transparent;
  padding-inline: calc(var(--e12) + 1.5px);
  /* El conico se recorta con la pastilla: sin esto sale cuadrado por fuera. */
  overflow: hidden;
  /* El halo, quieto. Dos capas: una pegada al canto y una abierta. */
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--color-action) 22%, transparent),
    0 0 12px -2px color-mix(in oklab, var(--color-action) 35%, transparent);
}

/* El hover de la pastilla en cero lo resuelve su relleno, mas abajo: el borde
   ahora es el reflejo conico y pintarlo aqui lo taparia. */


/* En un telefono la barra tiene el logo, el contador y el avatar, y el nombre
   del espacio ya no esta: alcanza. Pero si alguna vez aprieta, lo que se va es
   la palabra y queda el numero. */
@media (max-width: 29.99rem) {
  .creditos { padding-inline: var(--e8); }
}

/* ============================================================
   EL BRILLO DEL CONTADOR EN CERO
   ============================================================

   Lo pidio Leon: *"ponle un efecto asi al boton que dice Te quedan 0 eventos
   cuando llega a cero, asi le indica al usuario de forma constante que no tiene
   eventos con ese brillito en el borde o alrededor"*.

   ES EL MISMO MECANISMO QUE `.brillo` del invitado -el reflejo conico que
   recorre el contorno- y no el barrido que cruza. La diferencia es deliberada y
   sale de lo que el pidio dos veces: aca tiene que ser CONSTANTE. El barrido
   pasa una vez cada siete segundos y el resto del tiempo no dice nada, que es lo
   correcto para una invitacion y lo contrario de lo que hace falta para un
   estado. Es el mismo criterio que la tarjeta del paso que toca, donde eligio el
   borde constante *"sin la luz"*.

   SIN ENVOLTORIO, que es la unica diferencia tecnica con `.brillo`. Alla el
   reflejo vive en un contenedor con 1,5px de relleno y el boton encima; aca el
   nodo es uno solo -una pastilla de la barra- asi que las dos capas son sus
   pseudo-elementos: `::before` es el conico que gira y `::after` el relleno de
   la pastilla encima, dejando ver 1,5px de reflejo por el canto.

   Y EL HALO NO SE MUEVE. Con movimiento solo, hay que estar mirando la pastilla
   en el momento justo; el halo se ve de reojo. Los dos juntos son "esto esta
   pasando ahora" sin ser una alarma: la cuenta se termino, no se rompio nada.

   Anima solo `transform`, que es lo que el compositor resuelve sin repintar. */

/* La caja y el halo estan arriba, en la unica regla de `.creditos--cero`. Lo que
   sigue son las dos capas del reflejo, que no pueden vivir alla porque son
   pseudo-elementos. */

.creditos--cero::before,
.creditos--cero::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

/* El reflejo que recorre el contorno. Arco largo y vuelta lenta: a 3 segundos
   se lee como un cargador, que es lo que ya se habia corregido en el invitado. */
.creditos--cero::before {
  inset: -120%;
  z-index: 0;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    color-mix(in oklab, var(--color-action) 18%, transparent) 55deg,
    color-mix(in oklab, var(--color-action) 80%, transparent) 110deg,
    color-mix(in oklab, var(--color-action) 18%, transparent) 165deg,
    transparent 220deg);
  animation: creditos-girar 9s linear infinite;
}

@keyframes creditos-girar { to { transform: rotate(1turn); } }

/* El relleno de la pastilla, encima del reflejo. Deja ver 1,5px por el canto,
   que es el ancho del borde que se corrio. */
.creditos--cero::after {
  inset: 1.5px;
  z-index: 1;
  border-radius: inherit;
  background: var(--color-action-soft);
}

/* El texto, arriba de las dos capas. */
.creditos--cero .creditos__texto { position: relative; z-index: 2; }

/* El hover levanta el relleno y no toca el reflejo: dos cosas moviendose a la
   vez bajo el puntero se leen como un error. */
.creditos--cero:hover::after {
  background: color-mix(in oklab, var(--color-action) 16%, var(--color-action-soft));
}

/*
 * SIN MOVIMIENTO, EL HALO SE QUEDA.
 *
 * Es lo que distingue este efecto del `.brillo` del invitado: alla la luz es
 * relieve y apagarla no quita informacion. Aca el brillo DICE que la cuenta esta
 * en cero, asi que con `prefers-reduced-motion` se detiene la vuelta y el halo
 * sigue: lo que se apaga es el movimiento, no el aviso.
 */
@media (prefers-reduced-motion: reduce) {
  .creditos--cero::before { animation: none; }
}