/* ============================================================
   css/problemas.css — #/problemas (vista transversal de problemas
   y oportunidades, 2026-09-01). Extiende clases que YA EXISTEN
   (.tile, .prob-*, .brief-*, .filters-block, .toggle-chip, .stack)
   — acá solo lo que es nuevo de esta pantalla: la tarjeta de
   resumen por categoría (botón sobre `.tile`) y la cabecera de
   cliente/comercial que se antepone a cada fila (`problemRow` no
   la conoce — ver el docstring de problemas-cuenta.js).
   ============================================================ */

/* ---- Tarjetas de resumen por categoría — un <button> sobre `.tile` ----
   `.tile` ya trae fondo/borde/sombra/padding y `.lb`/`.v`/`.d` ya están
   estilizados (tablero.js/cobranzas.js/pipeline.js): acá solo el reset de
   los estilos nativos de <button> + el estado interactivo/activo. */
/* Va AUTO-FIT y no AUTO-FILL (medido el 2026-09-01 en la pasada visual). La diferencia: auto-FILL
   crea columnas VACIAS para rellenar el ancho disponible, asi que con las 3 categorias que habia
   ese dia el grid rendia 7 columnas de 155px y dejaba 654px MUERTOS -- el 57% del contenedor --
   mientras "1 de 3 clientes" se envolvia en tres renglones dentro de una caja angosta. auto-FIT
   colapsa las columnas vacias y estira las que existen. El grid se habia dimensionado para el
   caso futuro de 8 categorias y el caso REAL de hoy pagaba el precio (§4.1 nº18: el ancho se
   mide contra el contenido real, no contra el que va a haber). */
.prob-cat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: var(--sp-2); margin-bottom: var(--sp-4);
}
.prob-cat-card {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%; text-align: left; font: inherit;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--sh-1); padding: var(--sp-3);
  display: flex; flex-direction: column; gap: 2px;
  transition: border-color .12s, background .12s;
}
.prob-cat-card:hover { background: var(--surface-2); }
.prob-cat-card:focus-visible { box-shadow: var(--sh-focus); }
.prob-cat-card:active { transform: scale(.98); }
.prob-cat-card.active { border-color: var(--blue-border); background: var(--blue-soft); }
.prob-cat-card.active .lb, .prob-cat-card.active .v { color: var(--blue-text); }
.prob-cat-card .chip.mini { margin-top: 4px; align-self: flex-start; }

/* ---- Cabecera de cliente/comercial que views/problemas.js inserta al principio de
   `.prob-main` (primer hijo, antes de `.prob-body`) — mismo criterio de "quién es" que
   `.crow-name`/`.td-name` del resto de la app, pero en miniatura porque acá conviven con el
   texto del problema en la misma fila. */
.prob-row-cliente { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.prob-row-cliente-name {
  font-size: var(--fs-body); font-weight: 700; color: var(--text-1); text-decoration: none;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.prob-row-cliente-name:hover { color: var(--blue-text); text-decoration: underline; }
.prob-row-cliente-name.dim { font-weight: 600; color: var(--text-3); }
.prob-row-comercial { font-size: var(--fs-chip); color: var(--text-3); flex-shrink: 0; }

/* La primera sección es hija directa de `.group` (a diferencia de `.prob-resolved` en la ficha,
   que siempre tiene la lista de "abiertos" arriba): sin esto, su `border-top` (reusado de
   `.prob-resolved`, app.css) dibuja una segunda línea pegada al borde superior de la tarjeta. */
.prob-cat-section:first-child { border-top: none; }

@media (max-width: 899px) {
  .prob-cat-grid { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
}

/* Blancos táctiles de lo que nace en ESTA vista (2026-09-01, medido: 20px el nombre de cliente, contra los 44
   de la regla; los checkbox de filtro NO entran: su blanco real es el `<label class="toggle-chip">`
   que los envuelve, no el `<input>` de adentro). Pseudo-elemento, nunca padding. */
@media (pointer: coarse) {
  .prob-row-cliente-name { position: relative; }
  .prob-row-cliente-name::after { content: ""; position: absolute; inset: -12px -6px; }
}