/* ============================================================
   La vista de TARJETAS de un evento.

   Una de las dos formas de ver el mismo evento; la otra -la lista de pasos con
   el checklist- vive en `evento.css`. Lo que esta aca es solo lo que esta vista
   agrega: los colores, las tipografias, los botones y la escala de espaciado
   salen del design system.

   Salio del banco -/disenio/evento-e.css- y es el mismo CSS: por eso el banco
   carga las hojas del panel de verdad, para que lo elegido encaje sin sorpresas.

   SOBRE LA ELEVACION EN HOVER. El design system declara los cuatro `--shadow-*`
   en `none` a proposito: su doctrina dice que la profundidad la hace la escalera
   de seis grises y los bordes -"NO drop shadows"-. Asi que la elevacion se hace
   como la hace el sistema: la superficie sube un escalon de gris, el borde se
   afirma, y la tarjeta se levanta un pixel.
   ============================================================ */

/* --- la pantalla ---------------------------------------------------------- */

/*
 * 64 entre la cabecera del evento y el cuerpo.
 *
 * Es el mismo salto que el panel usa entre un encabezado y lo que encabeza -del
 * header al h1, de la fila de herramientas al primer evento- asi que la pantalla
 * del evento respira igual que el resto.
 */
.ev-cuerpo { margin-block-start: var(--e64); }

/*
 * `.ev` Y NO `.e`: era `.e` y no tomaba nada.
 *
 * La hoja salio del banco, donde las clases se llamaban `e-algo`, y al traerla
 * se renombro el prefijo `.e-` a `.ev-`. Este selector es la clase SOLA, sin
 * guion, asi que no entro en ese reemplazo: quedo apuntando a una clase que
 * nadie dibuja.
 *
 * El efecto no fue un error sino la AUSENCIA de todo: el contenedor de la vista
 * se quedo sin `flex` y sin `gap`, asi que las cifras, la rejilla y la salida
 * quedaron apiladas y pegadas. Es exactamente el sintoma que se reporto -"las
 * fotos del evento sale pegada a la grid"-.
 */
.ev {
  display: flex;
  flex-direction: column;
  /*
   * El MISMO hueco que entre tarjetas.
   *
   * Estaba en 32 contra las 16 de la rejilla, asi que la salida iba a quedar mas
   * lejos de las tarjetas que las tarjetas entre si: se leeria como otra seccion
   * y no como el pie de esta. Con el mismo valor, la rejilla y su salida son un
   * bloque.
   */
  gap: var(--e16);
}



/* --- el encabezado, de B -------------------------------------------------- */

.ev-cabeza {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--e24);
  flex-wrap: wrap;
}

.ev-cabeza__izq { display: flex; flex-direction: column; gap: var(--e6); min-inline-size: 0; }

.ev-cabeza__tipo {
  display: flex;
  align-items: center;
  gap: var(--e6);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.ev-cabeza__titulo {
  margin: 0;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.ev-cabeza__apoyo { margin: 0; font-size: 14px; color: var(--color-text-muted); }

.ev-cabeza__der { display: flex; align-items: center; gap: var(--e8); flex-wrap: wrap; flex: none; }

.ev-estado {
  display: inline-flex;
  align-items: center;
  gap: var(--e8);
  padding: var(--e6) var(--e12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full, 999px);
  font-size: 13px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.ev-estado__punto {
  inline-size: 7px;
  block-size: 7px;
  border-radius: var(--radius-full, 999px);
  background: var(--color-text-muted);
  flex: none;
}

.ev-estado.is-vivo { color: var(--color-text); }
/* El punto del evento en vivo, con la ficha del tema. Estaba en
   `--color-highlight-text`, que es amarillo en los veintisiete temas: "Recibiendo
   fotos" salia amarillo en cualquiera, y amarillo es el rol de la advertencia. */
.ev-estado.is-vivo .ev-estado__punto { background: var(--color-action); }

/* --- la casilla de cada tarjeta ------------------------------------------- */

/*
 * CUADRADA, no un circulo.
 *
 * Estaba en un circulo de 20 con un tilde chico adentro, y el icono del set ya
 * ES un cuadrado con el tilde: `check.svg` dibuja la caja y la marca en la
 * misma forma. Meterlo adentro de un circulo era dibujar una caja adentro de
 * otra.
 *
 * Vacia es la silueta del cuadrado y marcada es el icono, los dos a 24, asi que
 * la caja no cambia de medida al tocarla y la cabecera de la tarjeta no salta.
 * El radio sale del sistema y acompana el del propio dibujo.
 */
.ev-casilla {
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  flex: none;
  padding: 0;
  /* El mismo borde y el mismo relleno que la casilla de la vista de pasos y que
     la salida del checklist -ver la nota en `evento.css`-: Leon senialo ese
     borde y pidio ese, y el borde solo no alcanzaba para igualarlos porque el
     contraste depende de lo que tiene detras. */
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease, transform .12s ease;
}

/* El apreton se siente, igual que en los botones del kit. */
.ev-casilla:active { transform: scale(0.88); }

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

/* Marcada: el icono, y sin borde ni relleno propios porque el icono ya trae lo
   suyo. */
.ev-casilla.is-listo {
  border-color: transparent;
  background: none;
  color: var(--color-text);
}

/*
 * La que se MIDIO no se toca.
 *
 * Esta lista porque hay doce fotos cargadas, no porque alguien lo dijo, asi que
 * desmarcarla no es una decision que exista. El cursor normal lo anuncia antes
 * del clic -el titulo explica por que- en vez de dejar que alguien toque y crea
 * que la pantalla se colgo.
 */
.ev-casilla.is-medido { cursor: default; }
.ev-casilla.is-medido:hover { border-color: transparent; color: var(--color-text); }

/* --- las cifras, solo durante la fiesta ---------------------------------- */

/*
 * SIN TARJETA, como en la consola de B.
 *
 * Estaban en una caja con borde y fondo, y eso las ponia al mismo nivel que las
 * seis tarjetas de abajo: tres numeros compitiendo con seis cosas que se hacen.
 * Sueltos sobre el fondo son lo que son, un dato de contexto.
 *
 * Y a la IZQUIERDA, en fila, no repartidas a lo ancho: una fila corta se lee de
 * un barrido, y tres columnas estiradas obligan a saltar de un extremo al otro.
 */
.ev-cifras {
  display: flex;
  gap: var(--e32);
  flex-wrap: wrap;
}

.ev-cifra { display: flex; flex-direction: column; gap: 2px; }

/* Los pesos de B: el numero primero y grande, el rotulo chico debajo. Una fila
   de cifras se mira de un barrido, y al reves hay que leer cada rotulo para
   encontrar el que importa. */
.ev-cifra__valor {
  font-size: 26px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.ev-cifra__rotulo { font-size: 12px; color: var(--color-text-muted); }

/* --- las tarjetas, uniformes ---------------------------------------------- */

/*
 * TRES COLUMNAS, fijas.
 *
 * Estaba en `auto-fit` con un minimo de 260px, y en 1200 de ancho eso da CUATRO
 * columnas: el `auto-fit` mete tantas como entren, asi que el numero de columnas
 * lo decidia el ancho de la pantalla y no el diseno. Con seis tarjetas, cuatro
 * columnas dejan dos solas en el segundo renglon.
 *
 * Tres son dos renglones parejos de tres, y cada tarjeta queda en 376px a ancho
 * completo, que es donde un link entra en una linea.
 */
.ev-rejilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e16);
}

@media (max-width: 62.5rem) { .ev-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .ev-rejilla { grid-template-columns: minmax(0, 1fr); } }

.ev-carta {
  display: flex;
  flex-direction: column;
  gap: var(--e8);
  padding: var(--e24);
  border: 1px solid var(--color-border);
  /* Un poco mas redondeadas: 16 en vez de 12. */
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  /* `translate` y no el atajo `transform`: el atajo pisaria cualquier otra
     transformacion que la tarjeta tenga despues. */
  transition: translate .14s ease, background-color .14s ease, border-color .14s ease;
}

/*
 * La elevacion, como la hace el sistema.
 *
 * Sin sombra -los `--shadow-*` estan en `none` a proposito-: la superficie sube
 * un escalon de gris, el borde se afirma, y la tarjeta se levanta un pixel.
 */
.ev-carta:hover {
  translate: 0 -1px;
  background: var(--color-surface-muted);
  border-color: var(--color-border-strong, var(--color-text-muted));
}

@media (prefers-reduced-motion: reduce) {
  .ev-carta { transition: background-color .14s ease, border-color .14s ease; }
  .ev-carta:hover { translate: none; }
}

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

.ev-carta__glifo {
  display: grid;
  place-items: center;
  flex: none;
  color: var(--color-text-muted);
}

.ev-carta__titulo { margin: 0; font-size: 15px; font-weight: 500; min-inline-size: 0; }

/* Los secundarios, como en D: todos en el gris de apoyo. Ninguna tarjeta tiene
   su texto secundario a fuerza completa. */
.ev-carta__estado { margin: 0; font-size: 12px; color: var(--color-text-muted); }

.ev-carta__dato {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
  word-break: break-all;
  padding-block-start: var(--e6);
}

/* LA TARJETA QUE SE ABRE, y que se note que se abre.

   Solo dos la llevan -la proyeccion y el QR- porque son las dos que uno quiere
   abrir rapido mientras arma la fiesta. El cursor y el borde al pasar por encima
   son toda la senial que hace falta: el link ya esta escrito en la tarjeta, y
   agregarle una palabra o una flecha seria explicar lo que se ve.

   El cursor va en la tarjeta y se devuelve a normal en lo que no abre nada: sin
   eso, el pie y la casilla parecen parte del mismo gesto. */
.ev-carta--abre { cursor: pointer; }
.ev-carta--abre:hover { border-color: var(--color-border-hover); }
.ev-carta--abre .ev-carta__pie,
.ev-carta--abre .ev-carta__cabeza { cursor: auto; }

/* El link del dato: es el mismo texto de siempre, pero alcanzable con teclado.
   Sin subrayado permanente -la tarjeta entera ya es el blanco- y con el al
   pasar por encima, que es lo que dice que ese texto lleva a alguna parte. */
.ev-carta__link {
  color: inherit;
  text-decoration: none;
}

.ev-carta__link:hover { text-decoration: underline; }
.ev-carta__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* El pie se pega abajo por su propio margen, y asi los pies de las seis quedan a
   la misma altura aunque arriba haya un dato, dos renglones de estado, o nada.
   Antes lo empujaba el dato, que es fragil: la tarjeta sin dato se desalineaba. */
.ev-carta__pie {
  display: flex;
  gap: var(--e8);
  flex-wrap: wrap;
  margin-block-start: auto;
  padding-block-start: var(--e16);
}

/*
 * Lo hecho se ofusca, para que la atencion caiga en lo que falta.
 *
 * Al pasar el mouse vuelve a fuerza completa: sigue siendo operable -se cargan
 * mas fotos base despues de decir que ya estan- y una tarjeta que no se puede
 * leer sin desmarcarla seria peor que no ofuscarla.
 */
.ev-carta.is-listo { opacity: 0.5; }
.ev-carta.is-listo:hover,
.ev-carta.is-listo:focus-within { opacity: 1; }

/*
 * AQUI VIVIA `.ev-salida`, el renglon "Las fotos del evento".
 *
 * Se retiro el 2026-10-16 junto con el nodo: la tarjeta de la entrega ahora
 * lleva a esa misma pantalla de un toque, asi que eran dos caminos al mismo
 * lugar, uno encima del otro. Leon lo vio asi: *"la ultima tarjeta ya mostrara
 * la galeria de todos modos, asi que ese ultimo link se vuelve irrelevante"*.
 *
 * Las reglas se van con el: una hoja que estila algo que nadie dibuja es trabajo
 * que el navegador hace para nada y una pista falsa para el que lea.
 */


/* --- el selector de vista ------------------------------------------------- */

/*
 * El boton de volver y el selector: son del evento, no de una forma de verlo,
 * asi que viven en el cascaron y estan en las dos vistas.
 *
 * 64 ARRIBA, entre la barra del panel y esta fila. `panel.css` ya separa la
 * barra de lo que sigue, pero con la medida de una pantalla cualquiera; la del
 * evento arranca con una fila chica y pegada a la barra se leia como parte de
 * ella.
 */
.ev-chrome {
  display: flex;
  align-items: center;
  gap: var(--e16);
  flex-wrap: wrap;
  margin-block-start: var(--e64);
  margin-block-end: var(--e24);
}

.ev-vistas { display: flex; gap: var(--e6); }

.ev-vista {
  display: flex;
  align-items: center;
  gap: var(--e6);
  padding: var(--e6) var(--e12);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}

.ev-vista:hover { color: var(--color-text); background: var(--color-surface-muted); }

.ev-vista.is-on {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}

/* En angosto, solo el icono: dos nombres al lado del boton de volver no entran
   en un telefono, y el icono ya distingue una lista de una rejilla. */
@media (max-width: 35rem) {
  .ev-vista span { display: none; }
  .ev-vista { padding: var(--e8); }
}

/* --- el boton que sube fotos --------------------------------------------- */

/*
 * Es un `label` con el input de archivos escondido adentro.
 *
 * Un `label` que envuelve al input abre el selector sin una linea de
 * JavaScript. Lo que le falta respecto de un boton de verdad es poco: el cursor
 * -un label no lo trae- y el anillo de foco, que el sistema le pone a `button` y
 * `a` pero no a esto.
 *
 * El foco llega al input escondido, no al label, asi que el anillo se dibuja
 * sobre el label cuando su input esta enfocado.
 */
.ev-subir { cursor: pointer; }

.ev-subir:focus-within {
  outline: 2px solid var(--color-action);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- la tarjeta del paso que toca (variante `nueva`) -------------------------
 *
 * Reemplaza al boton primario como seniial de "este es el siguiente". Una
 * tarjeta puede tener varios botones -la de moderacion tiene dos links y un
 * "agregar"- asi que el color de uno nunca podia senialar la tarjeta, solo una
 * de sus acciones.
 *
 * `--color-action` es la ficha que cada tema reserva para lo que pide atencion.
 * Solo el contorno, sobre el borde que la tarjeta ya tiene: no mueve el layout y
 * no pinta nada.
 */
/* Y la que toca, CONSTANTE y sin la luz: lo pidio asi -"el borde que esta
   resaltado indicandole al usuario donde esta, ese si debe ser constante"- y
   ademas tiene sentido, porque lo que dice no es relieve sino "aca estas".
   `--color-border-current` es la accion mezclada hacia el borde normal: resalta
   sin gritar, que era la otra mitad del pedido. */
.ev-carta.is-en-curso {
  border-color: var(--color-border-current);
}