/* =====================================================================
   REGISTRO DE EVENTOS — hoja propia de la pestaña ?tab=events
   Destino en producción: assets/admin2-events.css, cargada DESPUÉS de
   assets/admin2.css.

   Casi todo sale de admin2.css (.tarjeta, .tabla, .filtros, .estado,
   .pildora, .aviso, .vacio, .tabla-scroll). Aquí solo vive lo que no
   existía: la marca de color del evento, el bloque «qué pasó» de dos
   renglones y la línea de detalle en mono. Prefijo ev- para que se vea de
   un vistazo qué es de esta pestaña y qué habría que subir a admin2.css.
   ===================================================================== */

/* Phosphor: relleno, nunca trazo. Se repite aquí (además del atributo del
   SVG) porque un atributo de presentación pierde contra cualquier regla CSS
   y ya nos pasó una vez que un `svg{fill:none}` heredado los apagó todos. */
.ev-ico { fill: currentColor; flex: none; display: block; }

/* Fila de familias, debajo del buscador y dentro de la misma tarjeta. */
.ev-focos { padding: 12px 16px; }

/* En táctil los controles suben a 44 px. En admin2.css `.filtro`,
   `.selector-mini` y `.boton--sm` miden 32-38 px, que con el dedo se falla; y
   aquí, además, fallar significa cambiar de filtro sin querer en mitad de una
   revisión. Se sube SOLO dentro de esta pestaña para no mover el sistema por
   la espalda — si convence, la regla se sube tal cual a admin2.css. */
@media (max-width: 600px) {
  .ev-focos { padding: 12px; }
  .ev-focos .filtro { height: 44px; padding: 0 14px; }
  .ev-barra .selector-mini,
  .ev-barra .boton--sm { height: 44px; }
  .ev-barra .buscador input { height: 44px; }
  .ev-detalle { max-width: 240px; }
}

/* ── Celda «Qué pasó» ───────────────────────────────────────────────
   Marca de color + nombre en castellano + nombre técnico debajo. El técnico
   es el que se busca cuando algo falla, así que se conserva; va en mono y en
   gris secundario para que no compita con el título. */
.ev-que { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ev-que__texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ev-que__texto strong {
  font-size: 13px; font-weight: 700; color: var(--tinta);
  letter-spacing: -.01em; white-space: nowrap;
}
.ev-crudo {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  color: var(--tinta-3); white-space: nowrap;
}

/* La marca da el tono antes de leer: verde va bien, ámbar mira esto, rojo
   actúa. Nunca es el ÚNICO indicio — la palabra cambia también, y las filas
   graves llevan la barra roja de .fila--alerta. */
.ev-marca {
  width: 24px; height: 24px; border-radius: var(--r-xs, 7px); flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--sup-3); color: var(--tinta-2);
}
.ev-marca--bien   { background: var(--verde-sua);   color: var(--verde); }
.ev-marca--dinero { background: var(--verde-sua);   color: var(--verde-osc); }
.ev-marca--aviso  { background: var(--ambar-sua);   color: var(--ambar); }
.ev-marca--alerta { background: var(--rojo-sua);    color: var(--rojo); }
.ev-marca--neutro { background: var(--sup-3);       color: var(--tinta-2); }

/* ── Cliente y detalle ─────────────────────────────────────────────── */
.ev-cliente {
  font-size: 13px; font-weight: 700; color: var(--tinta);
  text-decoration: none; white-space: nowrap;
}
.ev-cliente:hover { color: var(--verde); text-decoration: underline; }

/* El detalle es el JSON aplanado. Se recorta a un renglón: leerlo entero es
   cosa de dos veces al año y para eso está el title del navegador. */
.ev-detalle {
  display: block; max-width: 340px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  color: var(--tinta-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Anchos de la tabla desplazable ─────────────────────────────────
   Es la única tabla del panel donde se acepta arrastrar de lado: son
   renglones de bitácora, no fichas por cliente, y apilarlas convertiría 40
   eventos en 40 tarjetas. Se fijan mínimos para que el título del evento no
   se parta en dos líneas al estrecharse. */
.ev-dia .tabla-scroll .tabla { min-width: 760px; }
.ev-dia .tabla thead th:nth-child(2),
.ev-dia .tabla tbody td:nth-child(2) { min-width: 240px; }
.ev-dia .tabla thead th:nth-child(3),
.ev-dia .tabla tbody td:nth-child(3) { min-width: 160px; }

/* Filas y días que el filtro deja fuera. `hidden` a secas bastaría, pero
   .tabla fija estilos sobre tr y td y más vale no depender de la cascada. */
.ev-fila[hidden], .ev-dia[hidden] { display: none !important; }