/* ============================================================
   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; }
}