/* ============================================================
   eventos.css — el listado del espacio

   Manda la FECHA: agrupado por cuando, el dia es lo mas grande
   de la fila. Un negocio de eventos es un calendario y la
   pregunta al abrir es "que se viene".

   Cuatro vistas. Las dos agrupadas conservan los grupos porque
   los grupos SON la propuesta; las dos sueltas los descartan a
   proposito, que es lo que las hace utiles con cuarenta eventos.

   Sin colores literales: todo sale de las fichas del design
   system, asi que los 28 temas lo repintan sin tocar esto.
   ============================================================ */

/* --- el desplegable de vista ----------------------------------------------
   El kit trae `.menu` y `.menu__list`; esto es lo que el listado le agrega:
   el ancho que necesitan dos lineas por opcion, la nota, y el tilde. */

.menu__list { min-width: 15rem; }

/* UNA SOLA COSA, A PROPOSITO.

   Esta regla declaraba tambien display, align-items, gap y flex-wrap, y los
   cuatro los redeclara la regla de mas abajo con el mismo selector: estaban
   escritos y no se aplicaban. Lo unico que de verdad llegaba a aplicarse era
   este relleno, asi que es lo unico que queda.

   No se movio abajo para no cambiar el orden de la cascada. */
.herramientas {
  /* Respiro de pantalla: la fila de buscador y vista es una cabecera de
     herramientas y lo que sigue es el contenido. Mismo escalon que separa la
     barra del titulo. */
  padding-bottom: var(--e64);
}


.buscador { position: relative; flex: 1; max-width: 340px; min-width: 200px; }

/*
 * El relleno sale de la escala y el alto lo decide el contenido.
 *
 * 12 arriba y abajo, 16 a los costados. A la izquierda el icono mide 16 y hay
 * 16 de hueco hasta el texto, asi que el texto arranca en 16+16+16 = 48. Esta
 * escrito como suma y no como "48px" para que se siga leyendo de donde sale:
 * si manana el icono crece, el numero se acomoda solo.
 */
.buscador input {
  width: 100%;
  padding: var(--e12) var(--e16);
  padding-inline-start: calc(var(--e16) + 16px + var(--e16));
  background: var(--color-field);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  color: var(--color-text);
  font: inherit;
  font-size: var(--t-cuerpo);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.buscador input::placeholder { color: var(--color-text-subtle); }
.buscador input:hover { border-color: var(--color-border-hover); }

.buscador input:focus-visible {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--aro-focus);
}

.buscador svg {
  position: absolute;
  left: var(--e16);
  top: 50%;
  margin-top: -8px;
  color: var(--color-text-subtle);
  pointer-events: none;
}

/*
 * El desplegable de vista.
 *
 * Un solo objetivo, en vez de cuatro iconos compitiendo en una barra por algo
 * que se cambia una vez cada tanto.
 *
 * Adentro va SOLO el valor elegido. El rotulo "Vista" vive afuera, como el de
 * cualquier campo: adentro competia con el valor y no se sabia cual de los dos
 * era la opcion puesta. Y todo el control es de un color: un icono blanco, un
 * texto blanco y un chevron gris son tres jerarquias para un control que no
 * tiene ninguna.
 */
/*
 * Icono de la vista y el nombre de la vista. Nada mas.
 *
 * Tenia un icono a la izquierda, la palabra "Vista" en el medio y un chevron a
 * la derecha: tres cosas para decir una, y ninguna de las tres decia en que
 * vista estabas. Ahora el icono y el texto son la misma informacion dicha dos
 * veces -lo que el control ES- y el chevron sobra: un boton que se abre ya se
 * nota al tocarlo.
 *
 * Mismo relleno que el buscador, asi los dos controles de la fila miden igual.
 */
.disparador-vista {
  display: inline-flex;
  align-items: center;
  gap: var(--e16);
  padding: var(--e12) var(--e16);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-field);
  color: var(--color-text);
  font: inherit;
  font-size: var(--t-cuerpo);
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.disparador-vista:hover { border-color: var(--color-border-hover); }

/* Abierto y en foco se ven igual: en los dos casos el control esta activo, y
   dos tratamientos distintos para el mismo estado es lo que se leia como
   brusco. */
.menu.is-open .disparador-vista,
.disparador-vista:focus-visible {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--aro-focus);
}

/* El icono acompana al texto, no compite con el. */
.disparador-vista svg { color: var(--color-text-muted); }

/* El rotulo, afuera. */
.con-rotulo { display: flex; align-items: center; gap: var(--e8); }

.con-rotulo__texto {
  font-size: var(--t-etiqueta);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* --- lo comun a las cuatro vistas --------------------------------------- */

/* Con caja, las filas necesitan separarse: dos bordes pegados se leen como una
   linea de 2px entre dos cajas, que es peor que no tener ninguna. */
.lista { display: flex; flex-direction: column; gap: var(--e8); }

.grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--e16);
}

.grilla--compacta { grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: var(--e8); }

.fila-evento,
.tarjeta-evento {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.fila-evento:active,
.tarjeta-evento:active { transform: scale(0.995); }

/* Manda el NOMBRE DEL EVENTO, no el de los clientes.
   Quien opera piensa "la boda de la quinta", no "Carla Ponce": el nombre es
   como llama al trabajo, y los clientes son con quien lo acordo. */
.nombre-evento {
  font-size: var(--t-tarjeta);
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nombre-clientes {
  font-size: var(--t-apoyo);
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip-tipo {
  display: inline-flex;
  align-items: center;
  gap: var(--e8);
  height: 26px;
  padding: 0 var(--e8);
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  font-size: var(--t-etiqueta);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  flex: none;
}

/* Lo que ya paso baja de peso, no desaparece: se sigue entrando a bajar las
   fotos durante meses. */
.es-pasado { opacity: 0.55; }

/* --- grupos de fecha ----------------------------------------------------- */

.grupo { padding-bottom: var(--e64); }

.grupo__titulo {
  display: flex;
  align-items: baseline;
  gap: var(--e16);
  padding-bottom: var(--e16);
  margin-bottom: var(--e8);
}

.grupo__cuando {
  font-size: var(--t-apoyo);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.grupo__cuantos { font-size: var(--t-etiqueta); color: var(--color-text-subtle); }

/* --- vista LISTA --------------------------------------------------------- */

/*
 * Una caja en reposo, mas sutil que la del hover.
 *
 * Antes la fila era invisible hasta que el mouse la encontraba: sin borde y sin
 * fondo, lo unico que la delimitaba era el relleno del hover. Ahora el borde
 * esta siempre y el hover agrega el relleno, asi que el reposo se ve y el hover
 * sigue siendo un cambio.
 *
 * El borde va en los DOS estados -no solo en el hover- porque un borde que
 * aparece corre el contenido un pixel, y catorce filas moviendose un pixel al
 * pasar el mouse es peor que no tener borde.
 *
 * El relleno es parejo en los cuatro lados: ver el comentario de `.dia-grande`,
 * que es donde estaba la asimetria de verdad.
 */
.fila-evento {
  display: flex;
  align-items: center;
  gap: var(--e24);
  padding: var(--e16);
  /* CON RELLENO, y es el mismo que las cajas de los pasos: lo pidio Leon -*"le
     vamos a poner un fill, el mismo que tienen las secciones grandes de la vista
     de evento individual para que no se vea simplemente con fondo
     transparente"*-. La formula vive en `temas.css`, no aca. */
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-inner);
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

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

/*
 * El dia, del tamano de un titulo: es el dato que se busca al abrir.
 *
 * AQUI estaba la asimetria. La columna mide 56 y el numero iba CENTRADO en
 * ella, asi que un "7" quedaba a unos veinte pixeles del borde de la fila y un
 * "28" a quince, mientras que del lado derecho el texto terminaba pegado al
 * relleno. Tres cosas distintas: el borde izquierdo se movia segun el numero,
 * no coincidia con el derecho, y en el grupo "Sin fecha" -que no tiene esta
 * columna- el texto arrancaba en otro lugar mas.
 *
 * Alineado a la izquierda, el numero empieza donde empieza el relleno, igual
 * que en las filas sin fecha, y los dos bordes de la fila miden lo mismo. El
 * ancho fijo se queda porque es lo que mantiene los nombres en una columna.
 */
.dia-grande {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 56px;
  flex: none;
  line-height: 1;
}

.dia-grande strong {
  font-size: var(--t-seccion);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.dia-grande span {
  margin-top: var(--e6);
  font-size: var(--t-etiqueta);
  color: var(--color-text-muted);
}

.falta {
  font-size: var(--t-apoyo);
  color: var(--color-text-muted);
  text-align: right;
  flex: none;
  white-space: nowrap;
}

/* --- vista GRILLA -------------------------------------------------------- */

.tarjeta-evento {
  padding: var(--e24);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--e16);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.tarjeta-evento:hover { border-color: var(--color-border-hover); }

.tarjeta-evento__fecha { display: flex; align-items: baseline; gap: var(--e8); }

.tarjeta-evento__fecha strong {
  font-size: var(--t-titulo);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.025em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tarjeta-evento__fecha span { font-size: var(--t-apoyo); color: var(--color-text-muted); }

/* --- vista GRILLA COMPACTA ----------------------------------------------- */

.tarjeta-evento--compacta {
  padding: var(--e16);
  border-radius: var(--radius-card);
  gap: var(--e8);
}

.tarjeta-evento--compacta .nombre-evento { font-size: var(--t-cuerpo); }

/* --- vista TABLA --------------------------------------------------------- */

.table th {
  cursor: pointer;
  user-select: none;
  padding: var(--e16);
  font-size: var(--t-etiqueta);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
}

.table th:hover { color: var(--color-text); }

/*
 * LOS CUATRO TITULOS DEL MISMO COLOR.
 *
 * "Fecha" se veia mas oscuro que los otros tres y parecia un error de estilo.
 * No lo era: la tabla arranca ordenada por fecha y la columna activa se pintaba
 * con el color fuerte. Cuando habia flechitas, el color acompanaba a la flecha y
 * se entendia; sin ellas quedo solo, y un titulo mas oscuro que sus vecinos no
 * se lee como "se ordena por aca", se lee como un descuido.
 *
 * Asi que el encabezado es parejo. El precio esta anotado: la columna por la que
 * se ordena ya no se distingue de las demas.
 */

.table td { padding: var(--e16); }
.table tbody tr { cursor: pointer; }

.tipo-en-linea {
  display: inline-flex;
  align-items: center;
  gap: var(--e8);
  color: var(--color-text-muted);
  font-size: var(--t-apoyo);
  white-space: nowrap;
}

.celda-evento { font-weight: var(--weight-medium); }
.celda-clientes { color: var(--color-text-muted); }
.celda-fecha { white-space: nowrap; font-variant-numeric: tabular-nums; }
.falta-chica { color: var(--color-text-subtle); font-size: var(--t-etiqueta); }

/* --- nada que mostrar ---------------------------------------------------- */

.sin-resultados {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e16);
  padding: var(--e128) var(--e32);
  color: var(--color-text-muted);
  text-align: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-card);
}

/* --- telefono ------------------------------------------------------------ */

@media (max-width: 47.99rem) {
  .cabecera { padding-top: var(--e32); padding-bottom: var(--e24); }
  .grilla { grid-template-columns: 1fr; }
  .grilla--compacta { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .fila-evento { gap: var(--e16); padding: var(--e16) var(--e6); }
  .falta { display: none; }
  .fila-evento .chip-tipo { display: none; }

  .buscador { max-width: none; }
}


/* --- el lapiz de datos, en las cuatro vistas --------------------------------

   Los items eran `<button>` enteros y un boton adentro de otro es HTML
   invalido: el navegador cierra el de afuera antes de abrir el de adentro y el
   item se parte, sin error ni aviso. Ahora el item es un contenedor con una
   TAPA que lo cubre -la que abre, y la que recibe el foco del teclado como
   antes- y el lapiz por encima. */

.item-evento { position: relative; }

/*
 * La tapa va ARRIBA del contenido, y esto es un arreglo.
 *
 * Estaba en `z-index: 1` con el contenido en 2 -o sea el contenido ENCIMA- y un
 * comentario que decia "los clics igual los recibe la tapa, que esta debajo".
 * Eso es falso: el elemento de arriba recibe el clic y no lo pasa, salvo que
 * tenga `pointer-events: none`.
 *
 * El resultado es el que se reporto: tocar un evento lo abria A VECES. Cayendo
 * sobre el nombre, la fecha o el chip el clic lo comia el contenido, que no hace
 * nada; solo los huecos entre medio llegaban a la tapa. "A veces entra" era en
 * realidad "depende de donde toques".
 *
 * Se pierde poder seleccionar el texto de la tarjeta. Es el intercambio
 * correcto: una tarjeta de la agenda existe para abrirse.
 *
 * NO LO ATRAPA UNA PRUEBA DEL DOM DE JUGUETE: un clic en una prueba se despacha
 * sobre el nodo elegido, sin apilado ni geometria. El guardia que sirve es sobre
 * el CSS.
 */
/*
 * SIN REGLA DE FOCO PROPIA, a proposito.
 *
 * Habia una aca y en tres lugares mas, todas apuntando a `--color-ring`, que no
 * esta definida en ninguna hoja. Una declaracion con una ficha sin definir y sin
 * respaldo es invalida y el navegador la descarta: las cuatro parecian poner un
 * anillo y no ponian nada.
 *
 * El foco se ve igual, porque `fundamentos.css` declara uno universal sobre
 * `:where(a, button, [tabindex]):focus-visible`. Su especificidad es cero, asi
 * que una regla propia lo pisaria; por eso no se pone una salvo que haga falta
 * otra cosa, y aca no hace falta.
 */
.item-evento__tapa {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* Sin fondo ni borde: es area de clic, no un boton que se vea. */
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: inherit;
  /* Hereda el redondeo del item para que el anillo de foco no salga cuadrado
     sobre una tarjeta redondeada. */
}

/* El contenido queda DEBAJO de la tapa, que es la que recibe los clics. El
   lapiz va por encima de las dos. */
.item-evento > *:not(.item-evento__tapa):not(.item-evento__editar) {
  position: relative;
  z-index: 1;
}

.item-evento__editar {
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  flex: none;
  border: 0;
  /* `--radius-micro` y no `--radio-8`: esa ficha NO EXISTE -la escala del kit se
     llama `--radius-*`- asi que venia dibujando siempre su respaldo de 8px.
     Tercera de la misma familia, con `.btn-quitar` y la caja del checklist. */
  border-radius: var(--radius-micro);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  /* Por encima de la tapa, o el clic abriria el evento en vez de los datos. */
  z-index: 3;
  transition: background-color .12s ease, color .12s ease;
}

/*
 * SIEMPRE VISIBLE, no solo en hover.
 *
 * Aparecia con `opacity: 0` y se encendia al pasar el mouse. El lugar lo ocupa
 * igual -es parte del renglon- asi que esconderlo no ahorraba ni un pixel: solo
 * dejaba un hueco en blanco del que no se puede deducir que hay un boton.
 *
 * Y un control que hay que descubrir pasando el mouse es un control que la
 * mayoria no encuentra. Lo unico que agrega el hover ahora es el fondo.
 */

.item-evento__editar:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

/* Declaraba tambien `inline-size: 48px`, que la regla de mas abajo redeclara
   -con `1%`-: estaba escrito y no se aplicaba. Lo que de verdad llegaba a
   aplicarse es el centrado, asi que es lo unico que queda.

   No se movio abajo para no cambiar el orden de la cascada. */
.celda-editar { text-align: center; }



/* ===========================================================================
   LA REVISION DE LAS CUATRO VISTAS
   =========================================================================== */

/* --- el lapiz de una tarjeta, arriba a la derecha ------------------------ */

/*
 * EL LAPIZ NO ABRIA LOS DATOS EN LAS DOS VISTAS DE TARJETAS: abria el evento,
 * como si no estuviera.
 *
 * Estaba envuelto en un renglon junto con la fecha -o con el tipo, en la
 * compacta-, y ese renglon es hijo directo del item, asi que le pegaba la regla
 * de abajo: `position: relative; z-index: 1`. Eso le crea un CONTEXTO DE
 * APILADO, y adentro de un contexto los z-index de los hijos solo compiten
 * entre ellos: el lapiz tiene `z-index: 3`, pero su renglon entero queda en el
 * 1, debajo de la tapa que esta en el 2. La tapa recibia el clic y abria el
 * evento.
 *
 * En la lista no pasaba porque ahi el lapiz es hijo directo del item, y en la
 * tabla tampoco porque la tabla no tiene tapa: el `tr` es lo que abre.
 *
 * El arreglo no es subirle el z-index al renglon -eso pondria la fecha encima de
 * la tapa y ese pedazo de la tarjeta dejaria de abrir el evento-: es que EL
 * LAPIZ SEA HIJO DIRECTO DEL ITEM en las cuatro vistas, hermano de la tapa y no
 * nieto. Asi ningun contenedor puede volver a encerrarlo, que es la familia
 * entera del defecto y no este caso. Una prueba lo exige.
 *
 * Y al salir del renglon se posiciona solo, en la esquina de arriba a la
 * derecha, que es donde ya estaba.
 */
.tarjeta-evento > .item-evento__editar {
  position: absolute;
  inset-block-start: var(--e16);
  inset-inline-end: var(--e16);
}

.tarjeta-evento--compacta > .item-evento__editar {
  inset-block-start: var(--e8);
  inset-inline-end: var(--e8);
}

/*
 * Y el contenido no pasa por abajo del lapiz.
 *
 * Antes el renglon lo tenia como hermano y le dejaba el lugar; ahora flota, asi
 * que el primer renglon reserva el hueco. Es la fecha en la grilla y el tipo en
 * la compacta: las dos son cortas, pero "30 oct - en 3 semanas" con el nombre
 * largo de un mes llega hasta ahi.
 */
.tarjeta-evento > .tarjeta-evento__fecha,
.tarjeta-evento--compacta > .tipo-en-linea { padding-inline-end: var(--e32); }

/* --- la tabla ------------------------------------------------------------ */

/*
 * EL REBOTE AL LLEGAR AL TOPE.
 *
 * Al deslizar la tabla a lo ancho y llegar al final, el contenido seguia un
 * instante mas y volvia -el `overscroll` del navegador- dejando el marco quieto
 * y moviendo lo de adentro. Se ve raro, y de paso asoma la linea vertical del
 * borde de los titulos.
 *
 * `overscroll-behavior-x: contain` corta ese rebote sin tocar el scroll normal, y
 * ademas evita que el gesto se propague a la pagina cuando la tabla ya llego al
 * tope -que es lo que hace que un deslizamiento horizontal termine navegando
 * para atras en algunos navegadores-.
 */
.table-wrap {
  overscroll-behavior-x: contain;
  /* El scroll se detiene en los bordes, sin el salto elastico. */
  scroll-behavior: auto;
}

/*
 * MAS AIRE EN CADA CELDA.
 *
 * Los clientes caian en dos renglones aunque midieran diez caracteres, porque
 * las cuatro columnas se repartian el ancho a partes iguales y a ninguna le
 * sobraba. El nombre del evento es lo que se busca, asi que se lleva el ancho
 * que necesita y el tipo, que es la mas corta, deja de pedir el suyo.
 */
.table th,
.table td {
  padding: var(--e16) var(--e16);
  vertical-align: middle;
}

/*
 * UNA SOLA COLUMNA ELASTICA, y las demas del ancho de su contenido.
 *
 * El hueco entre columnas se veia distinto en cada par, y el mas grande era el
 * de al lado del nombre del evento. El motivo: el nombre tenia 40% fijo y los
 * clientes NO tenian ancho, asi que la columna de clientes se quedaba con todo
 * lo que sobraba. En una tabla ancha eso son trescientos pixeles de aire dentro
 * de una celda que dice "Ana y Luis", y al lado una de 40% con un nombre corto
 * adentro. Dos columnas infladas, cada una por un motivo distinto: de ahi la
 * inconsistencia.
 *
 * Ahora el hueco entre dos columnas es SIEMPRE el relleno de las celdas, en
 * todos los pares, porque solo una columna absorbe lo que sobra. Es la del
 * nombre, que es por donde se busca y la unica que de verdad puede ser larga.
 *
 * `inline-size: 1%` sobre el resto es el idioma de las tablas para "el ancho de
 * tu contenido y nada mas": un ancho declarado tan chico que el reparto se lo
 * lleva el que no declaro ninguno.
 */
.table th:first-child,
.table td:first-child,
.table th:nth-child(3),
.table td:nth-child(3),
.table th:nth-child(4),
.table td:nth-child(4) { inline-size: 1%; white-space: nowrap; }

/* La del nombre: se lleva todo lo que sobra. */
.table th:nth-child(2),
.table td:nth-child(2) { inline-size: 100%; }

/* Los clientes y la fecha, en una sola linea cada uno. */
.celda-clientes,
.celda-fecha { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* La columna del lapiz: lo justo. */
.celda-editar { inline-size: 1%; padding-inline: var(--e8); }

/* --- el buscador y el selector de vista ---------------------------------- */

/*
 * SIEMPRE UNO AL LADO DEL OTRO, y el buscador es el que cede.
 *
 * Con la grilla compacta el selector se iba debajo del buscador: el buscador
 * tenia un ancho propio y el selector, al crecerle el nombre de la vista, ya no
 * entraba al lado. Dos controles de la misma fila que se apilan segun que vista
 * este elegida es una fila que cambia de alto sin motivo.
 *
 * Ahora el buscador es el unico flexible -`min-inline-size: 0` es lo que lo deja
 * encogerse de verdad- y el selector no se encoge nunca.
 */
.herramientas { display: flex; align-items: center; gap: var(--e12); flex-wrap: nowrap; }
.herramientas .buscador { flex: 1 1 auto; min-inline-size: 0; max-inline-size: none; }
.herramientas .menu { flex: none; }

/* ===========================================================================
   TELEFONO
   =========================================================================== */

@media (max-width: 47.99rem) {
  /*
   * EL PADDING DE LA FILA, PAREJO.
   *
   * La fecha salia casi pegada al borde izquierdo y la etiqueta de la derecha a
   * otra distancia del suyo: la fila tenia su relleno pero el dia grande traia
   * un margen negativo propio para alinearse con el titulo del grupo, y en
   * angosto eso lo sacaba del renglon.
   */
  .fila-evento { padding: var(--e16); }
  .fila-evento > .dia-grande { margin: 0; }

  /*
   * EL BOTON DE NUEVO EVENTO, FLOTANTE Y AL ANCHO.
   *
   * Es la accion mas importante de esta pantalla y estaba arriba, en la fila de
   * herramientas: con quince eventos en la lista hay que subir para crear el
   * dieciseis. Abajo queda al alcance del pulgar.
   *
   * Y EL LUGAR PARA QUE EL ULTIMO EVENTO NO QUEDE TAPADO LO RESERVA SU PROPIA
   * CAJA, no `.panel__app`.
   *
   * Era `.panel__app { padding-bottom: 64 + 64 }`, y esa clase es el contenedor
   * de TODAS las pantallas del panel: crear un evento, los ajustes del espacio y
   * las fotos quedaban con 192px de nada abajo -el relleno base mas este- en una
   * pantalla que no tiene ningun boton flotante que esquivar. Leon lo reporto
   * desde el formulario de crear: *"abajo queda un espacio enorme en moviles que
   * no tiene nada asi que puedo scrollear mas abajo de lo normal"*.
   *
   * El lugar lo pide el flotante, asi que lo reserva el flotante. La caja deja de
   * ser `display: contents` -que no ocupa nada- y pasa a ser un bloque de la
   * altura del boton mas su aire: 52 de boton, 16 de separacion del borde y 16 de
   * respiro contra el ultimo evento.
   */
  .nuevo-evento-flotante-caja { block-size: calc(52px + var(--e32)); }

  .nuevo-evento-flotante {
    position: fixed;
    inset-inline: var(--e16);
    inset-block-end: max(var(--e16), env(safe-area-inset-bottom));
    z-index: 40;
    justify-content: center;
    box-shadow: 0 -8px 24px -12px var(--color-bg);
  }
}

/* En escritorio el flotante no se dibuja: el de la cabecera esta siempre a la
   vista, y dos botones de la misma accion en la misma pantalla es uno de mas. */
@media (min-width: 48rem) {
  .nuevo-evento-flotante-caja { display: none; }
}

/*
 * Y EN TELEFONO NO SE DIBUJA EL DE LA CABECERA, que es la otra mitad de la
 * misma regla.
 *
 * Faltaba, asi que en un telefono se veian los dos: el de arriba y el flotante,
 * misma palabra y misma accion. El de arriba ademas se va de la pantalla al
 * primer scroll, asi que de los dos el que sirve es el de abajo.
 *
 * El corte es el mismo 48rem de la regla de arriba a proposito: entre los dos,
 * exactamente uno de los dos botones esta visible en cualquier ancho. Dos
 * numeros distintos dejarian una franja con dos botones o con ninguno.
 */
@media (max-width: 47.99rem) {
  .nuevo-evento-cabeza { display: none; }
}