/*
 * El panel de la organizacion.
 *
 * Casi no hay estilos acá: los controles, las tarjetas, los botones y los
 * campos son los del design system. Esto define lo propio de la pagina — el
 * ancho de lectura, la barra de arriba, la grilla de eventos y las pestañas de
 * un evento.
 *
 * Se usa tanto en una notebook como parado en el salon con el telefono, asi
 * que todo lo que se toca cumple el minimo tactil y la grilla se acomoda sola.
 */

body.panel {
  min-height: 100dvh;
  background: var(--color-bg);
}

.panel__app {
  /* El ancho del sistema, no uno propio.

     `fundamentos.css` declara `--ancho: 1200px` centrado desde el dia uno y
     las paginas de /disenio/ lo usan; el panel real tenia 60rem (960px)
     escrito a mano. Dos anchos distintos para la misma app es la mitad de lo
     que se veia como incoherencia de contenedores. */
  max-width: var(--ancho);
  margin: 0 auto;
  padding:
    max(var(--e16), env(safe-area-inset-top))
    max(var(--margen-lateral), env(safe-area-inset-right))
    var(--e64)
    max(var(--margen-lateral), env(safe-area-inset-left));
}

/* --- encabezado de pagina --- */

/*
 * El respiro entre la barra y el titulo.
 *
 * Era CERO: la barra es pegajosa y queda en el flujo, y nada ponia aire
 * debajo, asi que el titulo arrancaba pegado a su borde. Sesenta y cuatro es
 * el escalon de "respiro de pantalla" de la escala, que es exactamente lo que
 * separa una cabecera de su contenido.
 */
.barra + .panel-cabeza,
.barra + * > .panel-cabeza:first-child { margin-top: var(--e64); }

.panel-cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e16);
  flex-wrap: wrap;
  margin-bottom: var(--e32);
}

.panel-cabeza h1 {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.panel-cabeza p {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/*
 * El problema era real y la solucion estaba en el lugar equivocado.
 *
 * Una fila de etiqueta y control a 1200 de ancho deja las dos puntas
 * separadas por medio metro de nada, asi que la tarjeta se achicaba a 44rem.
 * Pero achicar la TARJETA deja dos anchos de contenedor en la misma pagina
 * sin ninguna logica visible, y eso es lo que se leia como incoherencia: el
 * calendario llegaba al borde y "quien puede operar" se cortaba antes.
 *
 * El que no tiene que estirarse es el RENGLON, no la tarjeta. Asi los bordes
 * de todas las secciones caen en la misma linea y adentro el texto conserva
 * una medida que se lee.
 */
.panel__app .ds-bloque .ds-fila { max-width: 46rem; }

/* La nota al pie de un dialogo: el detalle de un error, la explicacion de una
   confirmacion. Letra chica y apagada, debajo de lo que importa. */
.panel-link__nota {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  line-height: var(--leading-snug);
}

/* La zona donde se sueltan las fotos. Grande y explicita: cargar el album es
   de las pocas cosas que se hacen una sola vez por evento y conviene que no
   haya que buscarla. */
.panel-soltar {
  display: grid;
  place-items: center;
  gap: var(--space-2);
  padding: var(--space-10) var(--space-5);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}

/* Encima, con la ficha del tema. `--color-accent-soft` -lo que tenia- es el
   verde de "salio bien" en los veintisiete temas, asi que la zona se ponia
   verde en todos: el tema elegido no se enteraba. */
.panel-soltar:hover,
.panel-soltar.is-sobre {
  border-color: var(--color-action);
  background: var(--color-action-soft);
}

.panel-soltar .ic { width: 1.75rem; height: 1.75rem; color: var(--color-text-muted); }

/* --- la tira de lo que se esta subiendo --------------------------------------

   Acompania a la zona de soltar, asi que vive al lado de ella y no en la hoja
   de una pantalla: la usan la vista de pasos y la de tarjetas.

   Antes la subida solo soltaba toasters -uno por foto y uno al final-, que
   cuentan cuantas fallaron y no dicen CUALES. El detalle entero esta en
   `client/panel/subidas.js`. */

.subidas {
  display: grid;
  gap: var(--space-2);
  /* EL AIRE QUE PIDIO LEON -*"asegura un gap apropiado para que no quede tan
     pegada del dropzone y boton de ver todas esa fila de miniaturas"*-. La pila
     que la contiene separa 16; estos 8 la llevan a 24 arriba y abajo, que es el
     escalon de la escala que sigue y el mismo que separa los pasos entre si. */
  margin-block: var(--space-2);
}

.tira-subidas {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  /* Que no se corten los bordes de la primera y la ultima al desplazarse. */
  padding-block-end: var(--space-2);
  /* Cae en una miniatura entera y no a mitad de camino, pero sin forzar: con
     `mandatory` un empujon corto rebota al lugar de donde salio. */
  scroll-snap-type: x proximity;
  /* iOS: sin esto el desplazamiento se frena en seco en vez de deslizarse. */
  -webkit-overflow-scrolling: touch;
  /*
   * SE MUESTRA MIENTRAS SE USA Y DESPUES SE VA, sin escribir una segunda barra.
   *
   * `base.css` ya pinta UNA barra para todo el producto y la pinta con
   * `--color-border-strong`. Escribir aca `scrollbar-color` y
   * `::-webkit-scrollbar` seria una copia de esas reglas que algun dia se
   * desincroniza -hay una prueba que lo prohibe, y la cazo-.
   *
   * Asi que no se toca la barra: se apaga la FICHA que la barra consume. En
   * reposo la tira redefine `--color-border-strong` como transparente y la barra
   * del producto se vuelve invisible donde esta; `.is-rodando` -que pone el
   * listener de `subidas.js` mientras hay scroll- quita la redefinicion y
   * reaparece, con el color del tema, flaca y en su canal.
   *
   * Se puede hacer porque adentro de la tira nada mas consume esa ficha: las
   * miniaturas se dibujan con `--color-border` y `--color-danger`. Si alguna
   * pasara a usar el escalon fuerte, se le iria el borde en reposo.
   *
   * Aparece y desaparece de golpe, sin desvanecerse: un `var()` no se interpola
   * sin registrar la ficha con `@property`, y registrar una ficha del tema para
   * que una barra se desvanezca es mucho peso para poco.
   */
  --color-border-strong: transparent;
}

.tira-subidas.is-rodando { --color-border-strong: initial; }

/* Cuadradas y chicas: son una confirmacion de que la foto es la que se queria,
   no una vista para elegir. Fijas y no flexibles, porque una fila donde cada
   miniatura mide distinto segun cuantas haya no se lee como una fila. */
.subida {
  position: relative;
  flex: none;
  width: 4rem;
  height: 4rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-thumb);
  background: var(--color-surface-sunken);
  scroll-snap-align: start;
}

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

/*
 * LA MARCA DE ESTADO, SIN DISCO DETRAS.
 *
 * Tenia un circulo de `--color-surface` para que el tilde se leyera sobre
 * cualquier foto. Resolvia el contraste y agregaba un objeto: Leon lo vio asi
 * -*"el icono de check cuando una foto se cargo, luce bien pero esta metida como
 * en un circulo negro, quitaselo"*- y en los trece temas oscuros ese disco ES un
 * circulo negro.
 *
 * El contraste lo da ahora una sombra proyectada en el color del fondo. Hace lo
 * mismo que el disco -separa el tilde de la foto- sin dibujar una figura: sigue
 * el contorno del icono en vez de encerrarlo.
 *
 * Va en el rincon de abajo a la derecha: arriba a la izquierda es donde cae la
 * cara en casi toda foto de fiesta.
 */
.subida__marca {
  position: absolute;
  inset-block-end: 0.1875rem;
  inset-inline-end: 0.1875rem;
  display: grid;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-text);
  filter: drop-shadow(0 0 2px var(--color-bg)) drop-shadow(0 0 3px var(--color-bg));
}

.subida.is-listo .subida__marca { color: var(--color-accent); }

/*
 * SUBIENDO: la foto atenuada y latiendo.
 *
 * El pulso va en la OPACIDAD de la foto y no en un `background-position` ni en
 * un `filter`: esos dos repintan en cada cuadro, y esto puede estar latiendo
 * doce veces mientras el navegador sube archivos.
 */
.subida.is-subiendo .subida__foto {
  opacity: 0.45;
  /* `ease-in-out` del navegador y no una ficha: el kit tiene UNA curva
     -`--ease-out`- y es para algo que entra y se queda. Un latido va y vuelve,
     asi que tiene que frenar en los dos extremos o se ve como un parpadeo. */
  animation: subida-late 1.4s ease-in-out infinite;
}

@keyframes subida-late {
  50% { opacity: 0.8; }
}

/* Y FALLO: el borde de peligro y la flecha de volver a intentar. La miniatura
   entera es el boton, asi que tambien cambia el cursor. */
.subida.is-fallo {
  border-color: var(--color-danger);
  cursor: pointer;
}

.subida.is-fallo .subida__foto { opacity: 0.4; }
.subida.is-fallo .subida__marca { color: var(--color-danger); }

/* Y al pasar por encima se nota que se puede tocar: la foto vuelve un poco. */
.subida.is-fallo:hover .subida__foto { opacity: 0.6; }

/* Eliminar: chico, en el rincon de arriba, y solo en las que ya subieron. */
.subida__quitar {
  position: absolute;
  inset-block-start: 0.1875rem;
  inset-inline-end: 0.1875rem;
  display: grid;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-bg) 70%, transparent);
  color: var(--color-text);
  cursor: pointer;
  /*
   * SE VE SIEMPRE EN TELEFONO, y en escritorio aparece al acercarse.
   *
   * No hay `hover` en un telefono: un boton que solo aparece al pasar por
   * encima no existe ahi. Asi que el estado base es visible y lo que la
   * consulta hace es ESCONDERLO donde si hay puntero, no al reves.
   */
  opacity: 1;
  transition: opacity var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
  .subida__quitar { opacity: 0; }
  .subida:hover .subida__quitar,
  .subida__quitar:focus-visible { opacity: 1; }
}

.subidas__nota { margin: 0; }

/* Menos movimiento: el pulso se va y queda la atenuacion, que es la que dice
   que esa foto todavia no termino. */
@media (prefers-reduced-motion: reduce) {
  .subida.is-subiendo .subida__foto { animation: none; }
}

/* --- estados vacios --- */

.panel-vacio {
  display: grid;
  place-items: center;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-5);
  text-align: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-card);
}

.panel-vacio p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  max-width: 32ch;
}

/* --- entrar --- */

/* --- la puerta ----------------------------------------------------------

   Una columna centrada EN LA VENTANA. Media 80dvh, asi que se apoyaba en el
   40% del alto y quedaba corrida hacia arriba. */

.panel-entrar {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-12) 0 var(--space-16);
}

.panel-entrar__columna {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 420px;
  padding-inline: var(--space-5);
}

/* La marca. El hueco de abajo es grande: la marca pertenece a lo que viene,
   no flota entre dos cosas. */
.panel-entrar__marca { margin: 0 0 var(--space-8); line-height: 0; }

/*
 * El logo de la puerta.
 *
 * Mas grande que en la barra -es lo primero que se ve- pero acotado por ANCHO:
 * el logo entero mide 4,5 veces su alto, asi que una medida fija en altura se
 * sale de un telefono de 320.
 */
.panel-entrar__logo {
  block-size: clamp(1.5rem, 8vw, 2rem);
  margin-inline: auto;
  color: var(--color-text);
}

/*
 * EL TITULO, con la medida del nombre de cualquier pantalla del panel.
 *
 * `--t-display` son 48 px y existe para UNA frase en todo el producto: la
 * promesa de una pagina de venta. Esta pantalla no vende -la abre quien ya es
 * cliente, todas las semanas- y a 48 px el titulo pesaba mas que el boton, que
 * es lo unico que se vino a tocar.
 */
.panel-entrar__titulo {
  margin: 0 0 var(--space-3);
  font-size: var(--t-titulo, var(--text-3xl));
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: var(--weight-semibold);
  text-wrap: balance;
}

/* El apoyo DICE QUE HACER; no explica el producto. Decia "Las fotos de tu
   evento, proyectadas en vivo", que es la frase de una pagina de venta. */
.panel-entrar__apoyo {
  margin: 0;
  color: var(--color-text-muted);
  max-width: 32ch;
}

.panel-entrar__acciones {
  width: 100%;
  margin-top: var(--space-8);
  display: grid;
  gap: var(--space-3);
}

/* --- el boton de Google -------------------------------------------------

   NO es el boton primario del tema.

   Lo era, asi que en cada uno de los 28 temas salia pintado del color del tema
   con la palabra "Google" adentro: un boton rosa que dice Google no se parece
   a ningun boton de Google que alguien haya visto antes, y ese reconocimiento
   es justamente para lo que sirve.

   Asi que es una superficie neutra con la G de color. Es lo que pide la guia de
   marca de Google y lo que hace que se reconozca de un vistazo. */

.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  inline-size: 100%;
  min-height: 48px;
  padding: 0 var(--space-6);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}

.btn-google:hover {
  border-color: var(--color-border-hover);
  background: var(--color-surface-muted);
}

.btn-google:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* La G a 20 y no a 16: es el unico objeto de color de la pantalla, y mas chica
   se lee como un icono de sistema. */
.btn-google__g { flex: none; width: 20px; height: 20px; }

/* --- la raya con rotulo ------------------------------------------------

   Separa la unica forma real de entrar de la de desarrollo. Sin la raya, las
   dos se leen como dos opciones equivalentes y la de abajo -que en produccion
   no existe- parece la alternativa barata. */

.panel-entrar__o {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  inline-size: 100%;
  margin: var(--space-4) 0 var(--space-2);
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

.panel-entrar__o::before,
.panel-entrar__o::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: var(--color-border);
}

/* --- la entrada de desarrollo -----------------------------------------

   Dentro de una caja punteada y A LA IZQUIERDA: es un formulario, y un campo
   de texto centrado no se lee como un campo. La caja dice "esto es de otra
   naturaleza" sin tener que escribirlo dos veces. */

.panel-entrar__dev {
  inline-size: 100%;
  text-align: start;
  padding: var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-inner);
  display: grid;
  gap: var(--space-3);
}

.panel-entrar__dev .btn { inline-size: 100%; }

/* --- el error del callback de Google ----------------------------------

   Va ARRIBA del titulo y no como un toast: un toast se va solo a los cinco
   segundos, y este mensaje es la respuesta a lo ultimo que la persona hizo. */

.panel-entrar__error {
  inline-size: 100%;
  margin: 0 0 var(--space-6);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-inner);
  background: var(--color-danger-soft);
  color: var(--color-text);
  font-size: var(--text-sm);
  text-align: start;
}

/* --- sin ninguna entrada configurada --------------------------------- */

.panel-entrar__sin {
  inline-size: 100%;
  margin-top: var(--space-6);
  padding: var(--space-6);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-card);
}

.panel-entrar__sin p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

@media (max-width: 34rem) {
  .panel-entrar { padding: var(--space-6) 0 var(--space-10); }
  .panel-entrar__acciones { margin-top: var(--space-6); }
}

/* --- carga inicial --- */

/* --- los esqueletos de carga ----------------------------------------------

   AQUI VIVIA `.cargando`: una marca redonda que respiraba en el medio de la
   pantalla, igual para las cinco. Decia "espera" y nada mas, y tenia dos
   costos: la pagina SALTABA al llegar el contenido -el preloader ocupa el
   centro, lo que viene ocupa otra cosa- y no decia a donde mirar.

   Las piezas las trae el kit (`componentes/esqueleto.css`). Aca estan las
   FORMAS, una por pantalla, y la regla es que cada una se parezca a la suya:
   mismas cajas, mismas alturas, misma grilla. Ver `panel/esqueletos.js`. */

.esq-pantalla { display: grid; gap: var(--e32); }

/* La barra: la altura de la de verdad, para que al aparecer no mueva nada. */
.esq-barra {
  display: flex;
  align-items: center;
  gap: var(--e16);
  min-block-size: 3.5rem;
}

.esq-cabeza { display: grid; gap: var(--e12); }
.esq-parrafo { display: grid; gap: var(--e8); }
.esq-angosto { max-inline-size: var(--ancho-angosto); }

/* El buscador y el selector de vista, uno al lado del otro y sin envolverse,
   igual que `.herramientas`. */
.esq-herramientas { display: flex; align-items: center; gap: var(--e12); }

.esq-filas { display: grid; gap: var(--e8); }

/* Una fila del listado: el glifo, dos renglones y la etiqueta de la derecha,
   con el relleno y el redondeo de `.fila-evento`. */
.esq-fila {
  display: flex;
  align-items: center;
  gap: var(--e24);
  padding: var(--e16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-inner);
  background: var(--color-surface-sunken);
}

/* Las cajas de los pasos, con el aire y el relleno de `.paso`. */
.esq-pasos { display: grid; gap: var(--e32); }

.esq-paso {
  display: grid;
  gap: var(--e16);
  padding: var(--e32) var(--e16);
  background: var(--color-surface-sunken);
}

@media (min-width: 64rem) {
  .esq-paso { padding-inline: var(--e32); }
}

.esq-paso__cabeza { display: flex; align-items: center; gap: var(--e8); }

/* Los tres numeros del album, y el muro. Las columnas son las mismas que las
   del muro de verdad: si fueran otras, la grilla se reacomodaria al llegar. */
.esq-numeros { display: grid; gap: var(--e16); grid-template-columns: repeat(3, 1fr); }

.esq-muro {
  display: grid;
  gap: var(--e8);
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
}

.esq-chips { display: flex; flex-wrap: wrap; gap: var(--e8); }
.esq-campo { display: grid; gap: var(--e8); }

/* --- una fila que se elige, dentro de un dialogo ------------------------- */

/*
 * Se usa para elegir de que evento traer el diseno. Elegir una ES la respuesta,
 * asi que la fila entera es el blanco: un dialogo donde hay que tocar una fila
 * y despues confirmar pide dos toques para una decision que ya se tomo.
 */
.elegible {
  display: flex;
  align-items: center;
  gap: var(--e16);
  width: 100%;
  min-height: 56px;
  padding: var(--e8) var(--e16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
}

.elegible:hover {
  border-color: var(--color-action);
  background: var(--color-surface-muted);
}

.elegible__nombre { font-weight: var(--weight-medium); }

.elegible__nota {
  font-size: var(--t-etiqueta);
  color: var(--color-text-muted);
}

/* --- las chips de tipo de evento ----------------------------------------- */

/*
 * Vivian en `evento-nuevo.css`, y ya no son de una sola pantalla: el mismo
 * control elige el tipo al crear el evento y al editar su ficha en la modal.
 * Una regla que estiliza dos pantallas desde el archivo de una de las dos es
 * una regla que se borra el dia que esa pantalla cambie.
 */

.tipos { display: flex; flex-wrap: wrap; gap: var(--e8); }

.tipo {
  display: inline-flex;
  align-items: center;
  gap: var(--e8);
  height: 44px;
  padding: 0 var(--e16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--t-apoyo);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.tipo:hover { border-color: var(--color-border-hover); color: var(--color-text); }

.tipo.is-on {
  border-color: var(--color-action);
  background: var(--color-action);
  color: var(--color-on-action);
}


/* --- la pantalla de ajustes ------------------------------------------------

   Las dos listas de la pantalla —el equipo y las invitaciones abiertas— y el
   control de foto que usan el espacio y la cuenta.

   NINGUNA DE LAS TRES USA `.ds-fila`, y vale decir por que. Esa fila es
   "etiqueta a la izquierda, control a la derecha", y debajo de 26rem se apila
   —con razon: un desplegable al lado de su etiqueta no entra en un telefono—.
   Pero un nombre con su rol al lado SI entra, asi que apilarse le costaba un
   renglon a cada miembro y dejaba la pastilla del rol sola, alineada a la
   derecha, debajo del nombre.
*/

.miembro,
.invitacion {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* No se parte. Lo que cede es el nombre, que se recorta: el rol y los
     botones miden lo que miden y son lo que hay que poder tocar. */
  flex-wrap: nowrap;
  min-height: 3rem;
}

/* El apilado y el hueco los pone `pila pila-4`. Aca, solo que se pueda
   encoger: sin esto el nombre largo empuja al rol fuera de la fila. */
.miembro__quien,
.invitacion__que { min-width: 0; }

.miembro__nombre,
.invitacion__rol {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La letra chica: el mail de quien es, y hasta cuando sirve la invitacion. */
.miembro__mail,
.invitacion__vence {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Los dos botones de una invitacion, juntos y a la derecha. Estaban debajo:
   cada invitacion ocupaba dos renglones y medio, y tres llenaban un telefono. */
.invitacion__acciones {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
}

/* El rol no se encoge: "Administradora" cortada a la mitad no dice nada. */
.miembro .rol { flex: none; }
.miembro .btn { flex: none; }




/* --- eliminar el espacio de trabajo -------------------------------------

   El ultimo bloque de la pantalla de ajustes, y el unico sin vuelta atras.

   Se dibuja como los otros bloques -misma caja, mismo radio- y NO en rojo. Un
   recuadro rojo al final de una pantalla de ajustes se lee como una alarma: hay
   algo roto. No hay nada roto; hay una accion que destruye, y lo que tiene que
   avisar de eso es la confirmacion -que pide escribir el nombre- no el color de
   la caja.

   El borde punteado es la unica diferencia: dice "esto no es un ajuste" sin
   gritar. El unico rojo de la pantalla es el texto del boton, que ya lo pone
   `.ficha-borrar`. */
/* BORRAR EL ESPACIO. Sin borde punteado.

   El punteado se usa para una zona donde se SUELTA algo -ahi dice "esto espera
   algo que todavia no esta"- y esto no espera nada: es el bloque de una accion
   que no tiene vuelta atras. El punteado alrededor no la hacia mas seria, la
   hacia parecer un hueco a medio hacer.

   Lo que la separa es el aire de arriba y que su boton es rojo. Alcanza: es lo
   ultimo de la pantalla y lo unico de ese color. */
.panel-peligro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e16);
  flex-wrap: wrap;
  margin-block-start: var(--e32);
}

.panel-peligro__titulo {
  margin: 0;
  font-size: var(--t-tarjeta);
  font-weight: var(--weight-medium);
}

/* El boton al costado en pantalla ancha, y debajo en telefono: apilado por el
   `flex-wrap`, sin un media query propio. */
.panel-peligro .ficha-borrar { flex: none; }

/* El apoyo de la pantalla de invitacion.

   Tenia la clase del apoyo del login, y al rehacer la puerta se quedo sin
   estilo. Dos pantallas distintas compartiendo una clase es una que se rompe
   cuando la otra cambia. */
.panel-invitacion__apoyo {
  margin: 0;
  color: var(--color-text-muted);
  max-width: 32ch;
}

/* --- la pantalla de ajustes ------------------------------------------------

   MAS ANGOSTA QUE EL RESTO, y es el unico lugar del panel que lo es hasta
   ahora.

   1200 es el ancho de una pantalla que MUESTRA COSAS: la agenda, una pared de
   doscientas fotos, las seis tarjetas de un evento. Ahi el ancho es util porque
   hay material que lo llena. Una pantalla de ajustes no tiene con que: un campo
   de nombre de 1200 px de ancho no es generoso, es raro —el ojo recorre medio
   metro de renglon vacio para llegar al control, y dos campos seguidos no se
   leen como una lista—.

   Los tres anchos viven en `fundamentos.css`. Este usa el del medio, que es el
   que deja las filas de Miembros comodas: avatar, nombre, rol y boton sin que
   el nombre se recorte. */
.columna-ajustes { max-width: var(--ancho-medio); }

/* LA CABECERA RESPIRA MAS QUE LOS BLOQUES ENTRE SI, Y AHORA SON 64 DE VERDAD.

   Eran 120. La columna era flex con `gap: 24`, la cabecera llevaba ademas
   `margin-block-end: 64`, y adentro de la cabecera el `.panel-cabeza` trae sus
   propios 32 debajo del subtitulo. En flex los margenes NO se colapsan y el
   `gap` se SUMA, asi que las tres reglas -en dos archivos- se apilaban:
   32 + 64 + 24. Reportado como "un gap muy amplio" en escritorio.

   Y es por eso que la guardia estaba verde: verificaba la declaracion, que
   decia 64, y no la distancia, que vive en tres lugares.

   Ahora el hueco esta en UN valor y es el MISMO que la pantalla del evento:
   ahi `.ev-cuerpo` lleva `margin-block-start: 64` y la cabecera no lleva nada.
   El `gap` de 24 pasa al cuerpo, donde separa bloque de bloque y no alcanza a
   la cabecera. */
.ajustes-cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--e24);
  margin-block-start: var(--e64);
}

/* Los 32 del `.panel-cabeza` no van en esta pantalla: aca el aire bajo la
   cabecera lo pone el cuerpo, en un solo lugar. */
.ajustes-cabeza .panel-cabeza { margin-bottom: 0; }

/* Y 24 entre la vuelta y el titulo, como `.ev-chrome` en la pantalla del
   evento: la flecha es la salida de la pantalla, no el primer renglon del
   titulo. */
.ajustes-cabeza > .volver { margin-block-end: var(--e24); }

/* EL AVATAR DEL ESPACIO: la imagen es el control.

   Tenia dos botones al costado -"Subir una imagen" y "Quitar"- y una regla
   flex para acomodarlos en un telefono. Ahora usa la misma pieza que tu propia
   foto en Miembros: el lapiz encima de la imagen. Lo unico propio es el tamano
   -72 px contra 40- y la esquina mas redondeada, porque a ese tamano el
   cuadrado se lee como una tarjeta. */
.ajustes-avatar__caja .espacio-avatar { border-radius: var(--radius-lg); }

/* EL DISPARADOR DEL TEMA: el mismo aspecto que el de la vista de la pared.

   Lleva la muestra de color adelante porque el nombre no dice de que color es
   un tema: "Terciopelo" y "Vino" se distinguen mirando, no leyendo.

   ANCHO COMPLETO, igual que el campo del nombre que esta arriba.

   Tenia `max-inline-size: 16rem` porque vivia en la celda derecha de una
   `fila()` -rotulo a la izquierda, control a la derecha-. Esa fila se fue: a
   este ancho las dos puntas quedaban desconectadas y el rotulo repetia el
   titulo de la seccion. Ahora el disparador va debajo del subtitulo, y en una
   columna de dos controles apilados el de abajo no puede medir la mitad que el
   de arriba: una diferencia de ancho entre dos campos del mismo bloque no se
   lee como intencion. */
.disparador-tema {
  display: flex;
  align-items: center;
  gap: var(--e8);
  inline-size: 100%;
  min-height: 40px;
  padding: 0 var(--e12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-field, var(--color-surface));
  color: var(--color-text);
  font: inherit;
  font-size: var(--t-apoyo);
  text-align: start;
  cursor: pointer;
}

.disparador-tema:hover { border-color: var(--color-border-hover); }
.disparador-tema:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* LA REJILLA DE TEMAS DE LA MODAL.

   `auto-fill` con un minimo y no un numero de columnas: en el cajon de un
   telefono entran dos, en la modal de escritorio cuatro o cinco, y la cuenta la
   hace el navegador. Un numero fijo obliga a una media query por tamano.

   El minimo es 8rem porque el nombre mas largo del catalogo -"Luz negra"- entra
   en una linea al lado de la muestra. Mas angosto y el nombre se corta, que es
   justo lo que la muestra no puede reemplazar. */
.rejilla-temas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: var(--e8);
}

.pastilla-tema {
  display: flex;
  align-items: center;
  gap: var(--e8);
  min-width: 0;
  min-height: 44px;
  padding: var(--e8) var(--e12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--t-apoyo);
  text-align: start;
  cursor: pointer;
}

.pastilla-tema:hover { border-color: var(--color-border-hover); }
.pastilla-tema:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* El elegido, con el borde del color de accion y su tilde. El tilde no se
   esconde con `display: none` sino con la opacidad: asi la pastilla elegida y
   las demas miden lo mismo y la rejilla no se mueve al cambiar de tema. */
.pastilla-tema.is-on { border-color: var(--color-action); }

.pastilla-tema__nombre {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pastilla-tema__tilde {
  flex: none;
  display: inline-flex;
  opacity: 0;
  color: var(--color-action);
}

.pastilla-tema.is-on .pastilla-tema__tilde { opacity: 1; }

/* La muestra de color de cada tema: dos colores en diagonal, porque un tema es
   un fondo y un acento. Con un solo cuadrado, "Vino" y "Terciopelo" se ven
   igual. */
.muestra-tema {
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}

/* --- tu avatar en la fila de Miembros ------------------------------------- */

/* EL LAPIZ ENCIMA DEL AVATAR, y solo en tu fila.

   No es un boton al lado: al lado seria una cuarta cosa en una fila que ya
   tiene avatar, nombre, rol y un boton. Encima del avatar dice de que foto se
   trata sin una palabra.

   `position: relative` en la caja y los dos controles anclados a sus esquinas.
   La caja mide lo que el avatar -`inline-size: fit-content`- para que no empuje
   al nombre. */
.miembro-avatar {
  position: relative;
  inline-size: fit-content;
  flex: none;
  line-height: 0;
}

/* LA IMAGEN ES EL CONTROL, y el lapiz es su senia.

   El unico blanco que abria el selector de archivos era el lapiz: un circulo de
   20 px en la esquina de una imagen de 72. La imagen -el objeto grande y
   evidente- no hacia nada.

   `position: relative` aca y no en la caja: el lapiz se ancla a la imagen, que
   es lo que mide el boton. La caja sigue anclando la cruz de quitar, que es
   otro boton porque hace otra cosa. */
.miembro-avatar__foto {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
}

/* CADA UNO DECLARA SU BORDE Y SU FONDO EN SU REGLA BASE.

   Estaban los dos en una regla agrupada con el borde, y el fondo en la regla de
   cada uno: la guardia que vigila que ningun boton del panel se quede con el
   estilo nativo busca el bloque cuyo selector ES la clase, y encontraba el
   agrupado -que no declaraba fondo-. Tenia razon: un fondo que vive en otra
   regla es un fondo que se puede perder sin que se note, y el fondo nativo de
   un boton es un color del SISTEMA, que sale gris en los veintiocho temas.

   El area de toque la agranda un pseudoelemento: un blanco de 20 px no se puede
   tocar sin apuntar, y agrandar el circulo lo haria enorme al lado de un avatar
   de 40. */
.miembro-avatar__lapiz {
  position: absolute;
  inset-block-end: -4px;
  inset-inline-end: -4px;
  display: grid;
  place-items: center;
  inline-size: 20px;
  block-size: 20px;
  padding: 0;
  border: 2px solid var(--color-bg);
  border-radius: var(--radius-full);
  background: var(--color-action);
  color: var(--color-on-action);
  cursor: pointer;
}

.miembro-avatar__quitar {
  position: absolute;
  inset-block-start: -4px;
  inset-inline-end: -4px;
  display: grid;
  place-items: center;
  inline-size: 20px;
  block-size: 20px;
  padding: 0;
  border: 2px solid var(--color-bg);
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  cursor: pointer;
}

.miembro-avatar__quitar::after {
  content: "";
  position: absolute;
  inset: -12px;
}

.miembro-avatar__quitar:hover { background: var(--color-danger-soft); color: var(--color-danger); }

.miembro-avatar__foto:focus-visible,
.miembro-avatar__quitar:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}