/* ============================================================
   css/agenda.css — #/agenda (2026-09-01, docs/contrato-agenda.md).
   Variante B «línea de tiempo» (Fernando, sobre los 4 mockups de
   docs/design/direcciones/agenda-{a,b}{,-desktop}.html). Extiende
   clases que YA EXISTEN (.appbar, .seg, .sheet*, .opt*, .flabel,
   .filters-block, .link-btn, .chip, .mono, .empty-state) — acá solo
   lo NUEVO de esta pantalla. Cero color fuera de tokens.css: el
   modo oscuro sale gratis.
   ============================================================ */

/* ---- Appbar de dos filas: título + herramientas, segmented + nav de fecha ---- */
.agn-title-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
/* "N acciones sin fecha" pasó de `<span>` decorativo a `<button>` real (agenda.js): el reset
   mínimo para que un `.chip` se vea igual sobre un `<button>` que sobre el `<span>` de siempre —
   `.chip` ya pone background/border/padding/border-radius, esto solo saca lo que el navegador le
   agrega A UN BOTÓN por default (appearance nativo, cursor de flecha). */
.agn-sinfecha { white-space: nowrap; cursor: pointer; appearance: none; -webkit-appearance: none; }
@media (pointer: coarse) { .agn-sinfecha { position: relative; } .agn-sinfecha::after { content: ""; position: absolute; inset: -10px; } }
.agn-tools { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }

/* El navegador de fechas va PEGADO al segmentado, no en el extremo opuesto (2026-09-02, pedido de
   Fernando: "mueve el cambiador de dias a la izquierda, mas cerca del modulo donde se puede
   seleccionar dia, semana, mes"). Es el mismo caso que "Nueva acción" el mismo día: un
   `space-between` heredado separaba dos controles que se usan JUNTOS — elegís la granularidad y
   acto seguido navegás con las flechas, y había ~800px de recorrido del mouse entre una cosa y la
   otra. `flex-start` los deja a un `gap` de distancia.
   ⚠️ El `flex-wrap` se conserva: en pantalla angosta la fecha larga ("Miércoles, 2 de septiembre")
   baja a su propio renglón en vez de apretar el segmentado. */
.agn-seg-row {
  display: flex; align-items: center; justify-content: flex-start;
  gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-2);
}
.agn-seg { flex-shrink: 0; }

/* `[hidden]{display:none!important}` ya es una regla global (app.css:36) — no hace falta
   repetirla acá por cada clase que se oculta con el atributo (`.agn-datenav`, `.agn-filters`,
   `.agn-sinfecha`). */
.agn-datenav { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.agn-datenav-label {
  font-size: var(--fs-body); font-weight: 600; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.agn-nav-arrow {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--blue); background: var(--surface); border: 1px solid var(--border);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.agn-nav-arrow:active { background: var(--surface-3); }
@media (pointer: coarse) { .agn-nav-arrow::after { content: ""; position: absolute; inset: -7px; } }
.agn-hoy-btn { margin-left: 2px; flex-shrink: 0; }

/* Filtros (Día/Semana/Mes únicamente — "Hoy" es siempre cartera propia, no hay "ajeno" que
   filtrar ahí; `agenda.js` esconde este bloque entero con `.hidden` en ese segmento). */
.agn-filtro-seg { gap: 2px; }
.agn-filtro-seg button { min-width: 0; }

/* Filtro por persona — chips derivadas de lo cargado (`renderPersonasFiltro`, agenda.js). Fila
   propia, debajo del segmentado Todo/Asignadas a mí: son dos ejes distintos (propio-vs-ajeno,
   y "de cuál de todos"), no tiene sentido apretarlos en el mismo control. */
.agn-personas-row { margin-top: var(--sp-2); flex-wrap: wrap; }

/* Cobertura por persona ("Jose — 6 agendadas · 4 arrastradas · 0 hechas", solo ver_todo) —
   texto chico, informativo, no compite con los controles interactivos de arriba. */
.agn-personas-stats { display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-2); }
.agn-personas-stats-line { font-size: var(--fs-chip); color: var(--text-3); }

/* ---- "Hoy" embebido: se reusa VIEWS.hoy tal cual (agenda.js). Se opaca su propio appbar
   (large-title "Hoy", avatar, fecha, badge) porque el de Agenda ya cumple ese rol — dos
   cabeceras apiladas es peor que esta redundancia. El banner de frescura NO se oculta: es
   información, no cromo. */
.agenda-hoy-embed .view.view-hoy { max-width: none; margin: 0; padding: 0; gap: var(--sp-4); }
.agenda-hoy-embed .view.view-hoy > .appbar { display: none; }

/* ---- Bloques "Sin hora" / "Arrastradas de días anteriores" (contrato §5.bis) ---- */
.agn-block {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); padding: var(--sp-3);
}
.agn-block-label {
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: var(--sp-2);
}
.agn-arrastradas .agn-block-label { color: var(--red-text); }
.agn-block-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.agn-arrastradas + .agn-sinhora { margin-top: var(--sp-3); }
.agn-dia-side { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-3); }

/* Línea honesta cuando NO hay ninguna acción con hora este día (`buildTimelineVacio`, agenda.js):
   reemplaza al gutter entero — un timeline de franjas horarias vacías no informa, decora. */
.agn-timeline-vacio { font-size: var(--fs-sm); color: var(--text-3); padding: var(--sp-3) 0; }

/* ---- Timeline con gutter de horas (Día) ---- */
.agn-expand-btn { display: inline-block; margin-bottom: var(--sp-2); }
.agn-timeline { display: flex; flex-direction: column; }
.agn-slot { display: flex; align-items: flex-start; min-height: 52px; }
.agn-gutter {
  width: 52px; flex-shrink: 0; padding-right: var(--sp-2); padding-top: 2px;
  display: flex; flex-direction: column; align-items: flex-end; position: relative;
}
.agn-gutter::after {
  content: ""; position: absolute; right: 0; top: 16px; bottom: -4px; width: 1px; background: var(--border);
}
.agn-gutter-time { font-size: 11px; font-weight: 500; color: var(--text-3); white-space: nowrap; }
.agn-gutter-time.is-active { color: var(--text-1); font-weight: 700; }
.agn-gutter-dot {
  width: 7px; height: 7px; border-radius: 50%; margin-top: 4px; flex-shrink: 0;
  border: 1.5px solid var(--border); background: var(--bg-app);
}
.agn-gutter-dot.is-active { background: var(--blue-solid); border-color: var(--blue-solid); }
.agn-slot-content { flex: 1; min-width: 0; padding: 0 0 var(--sp-2) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); }
.agn-slot:not(.has-item) .agn-slot-content { min-height: 44px; }

/* ---- Tarjeta de acción (tarea/promesa) — un solo renderer, chico y compacto ---- */
.agn-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--sh-1); padding: var(--sp-2) var(--sp-3); display: flex; flex-direction: column; gap: 6px;
}
.agn-card.is-ajena { border-left: 3px solid var(--border-strong); }
.agn-card-hd { display: flex; align-items: flex-start; gap: 8px; }
.agn-card-ico { color: var(--text-3); flex-shrink: 0; margin-top: 1px; }
.agn-card-main { min-width: 0; flex: 1; }
.agn-card-title {
  font-size: var(--fs-sm); font-weight: 700; color: var(--text-1); line-height: 1.35;
  overflow-wrap: anywhere;
}
.agn-card-cliente { font-size: var(--fs-chip); color: var(--text-2); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Descripción de la tarea (2026-09-02, `tasks.descripcion`) — 2 líneas con `line-clamp`, nunca
   una sola: a diferencia del nombre de cliente (una línea alcanza), el detalle de qué hay que
   hacer necesita más aire. El `title` completo lo pone `agenda.js` (§4.1 nº12). */
.agn-card-desc {
  font-size: var(--fs-chip); color: var(--text-2); margin-top: 2px; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.agn-card-hd .mono.xs { flex-shrink: 0; margin-top: 1px; }
.mono.xs { width: 20px; height: 20px; font-size: 9px; }
.agn-card-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.agn-monto { font-size: var(--fs-sm); font-weight: 700; color: var(--text-1); }
.agn-card-note { font-size: var(--fs-chip); color: var(--text-3); }
/* Chip con el nombre completo del responsable (2026-09-02). Nunca desborda su tarjeta: en la
   columna de Semana la celda mide ~165px. Si no entra se corta con ellipsis, y el `title` que le
   pone `asigneeChip` garantiza que el nombre entero siga siendo legible — cortar sin tooltip
   dejaría indistinguibles a dos personas con el mismo comienzo de nombre (§4.1 nº12). */
.agn-quien { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.agn-card-actions { display: flex; justify-content: flex-end; }

/* ---- Botones de acción MÁS CHICOS, solo acá (2026-09-02, pedido de Fernando: "en la vista dia
   los botones hecho, reprogramar y reasignar son demasiado grandes, deberian ser mas chicos").
   El desbalance medido: `.btn` trae `min-height: 44px` y `font-size: 14px` (app.css), o sea ~72px
   de botonera —tres botones en grilla + la fila de Canal/Eliminar— dentro de una tarjeta cuyo
   TÍTULO mide 13px. Los controles pesaban más que el dato.
   Los números salen de `.btn-sm`, que YA existe en app.css (36px / --fs-sm): no nace una variante
   nueva (Mand. XI). No se usa la clase directamente porque quien construye los botones es
   `components/timeline.js::taskActions`, compartido con la ficha y con Hoy — y Fernando eligió
   que el cambio fuera SOLO en la Agenda, donde la tarjeta es chica. De ahí el descendiente
   `.agn-card`: especificidad (0,3,0) contra la (0,2,0) de `.tc-actions .btn`, y este archivo
   además carga después de app.css.
   ⚠️ 36px rompe el mínimo táctil de 44px, así que se restituye con pseudo-elemento y NUNCA con
   padding —agrandar la caja real descoloca la fila—, igual que `.tc-del`, `.opt` y `.seg button`.
   El `::after` de `.btn` está libre: la clase no lo usa. */
.agn-card .tc-actions .btn { min-height: 36px; font-size: var(--fs-sm); }
@media (pointer: coarse) {
  .agn-card .tc-actions .btn { position: relative; }
  .agn-card .tc-actions .btn::after { content: ""; position: absolute; inset: -4px 0; }
}

/* Compacta (Semana desktop / navegación por click) — sin acciones, toda la tarjeta es un botón */
.agn-card.is-compact { padding: 6px 8px; gap: 3px; }
.agn-card.is-compact .agn-card-title { font-size: 12px; }
.agn-card.is-compact .agn-card-cliente { display: none; }
.agn-card.is-compact .agn-card-desc { display: none; }
/* `.is-clickable` es compartida por dos casos: la compacta de arriba (navega al Día) y la
   tarjeta completa que navega a la ficha del cliente (`attachClienteNav`, agenda.js) — el cursor
   es el mismo gesto en los dos, así que vive acá una sola vez en vez de en cada caso. */
.agn-card.is-clickable { cursor: pointer; }
.agn-card.is-clickable:hover { border-color: var(--blue-border); background: var(--blue-soft); }
.agn-card.is-clickable:focus-visible { box-shadow: var(--sh-focus); }

/* Blanco táctil ≥44px en tarjetas compactas (celda chica, pointer coarse) */
@media (pointer: coarse) {
  .agn-card.is-compact { min-height: 44px; justify-content: center; }
}

/* ---- Semana ---- */
.agn-semana-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-2); }
.agn-semana-col { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.agn-semana-col-hd {
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: var(--sp-1) 0;
  border-radius: var(--r-sm); background: var(--surface-2);
}
.agn-semana-col.is-hoy .agn-semana-col-hd { background: var(--blue-soft); color: var(--blue-text); }
.agn-semana-col-hd .dow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.agn-semana-col.is-hoy .agn-semana-col-hd .dow { color: var(--blue-text); }
.agn-semana-col-hd .num { font-size: 15px; font-weight: 800; color: var(--text-1); }
.agn-semana-col.is-hoy .agn-semana-col-hd .num { color: var(--blue-text); }
.agn-semana-col-list { display: flex; flex-direction: column; gap: 6px; min-height: 40px; min-width: 0; }
/* Semana muestra la tarjeta COMPLETA desde el 2026-09-02 (pedido de Fernando: "la misma cantidad
   de informacion que aparece en la vista diaria eccepto los accionables"). La celda es angosta
   (~165px con 7 columnas sobre 1208px útiles), así que la tarjeta crece en ALTO y nunca en ancho:
   todo lo que pueda ser largo se corta con ellipsis y conserva su `title`. El padding baja al de
   la compacta que reemplazó — el aire de la vista Día ahí adentro sería la mitad de la celda. */
.agn-semana-col .agn-card { padding: 6px 8px; }
.agn-semana-col .agn-card-title { font-size: var(--fs-chip); }
.agn-semana-empty { text-align: center; font-size: 11px; color: var(--text-4); padding: var(--sp-2) 0; }

/* Semana mobile: pills de fecha + lista del día elegido */
.agn-pills { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.agn-pill {
  flex: 1 0 40px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 52px; padding: 6px 4px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface); cursor: pointer; position: relative;
  -webkit-tap-highlight-color: transparent;
}
.agn-pill .dow { font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--text-3); }
.agn-pill .num { font-size: 15px; font-weight: 800; color: var(--text-1); }
.agn-pill .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); position: absolute; bottom: 4px; }
.agn-pill.is-hoy { border-color: var(--blue-border); }
.agn-pill.on { background: var(--blue-solid); border-color: var(--blue-solid); }
.agn-pill.on .dow, .agn-pill.on .num { color: #fff; }
.agn-pill.on .dot { background: #fff; }
.agn-pill-lista { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }

/* ---- Mes ---- */
.agn-mes-dow {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); text-align: center;
}
.agn-mes-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.agn-mes-cell {
  all: unset; box-sizing: border-box; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 3px;
  min-height: 44px; padding: 4px; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--surface); position: relative; -webkit-tap-highlight-color: transparent;
}
.agn-mes-cell:hover { background: var(--surface-2); }
.agn-mes-cell:focus-visible { box-shadow: var(--sh-focus); }
.agn-mes-cell.is-fuera { opacity: .45; }
.agn-mes-cell.is-hoy { border-color: var(--blue-border); background: var(--blue-soft); }
.agn-mes-num { font-size: 12px; font-weight: 700; color: var(--text-1); }
.agn-mes-cell.is-hoy .agn-mes-num { color: var(--blue-text); }
.agn-mes-items { display: flex; flex-direction: column; gap: 1px; }
.agn-mes-chip {
  font-size: 10px; line-height: 1.3; color: var(--text-2); background: var(--gray-soft); border-radius: 4px;
  padding: 1px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.agn-mes-chip.is-atraso { background: var(--red-soft); color: var(--red-text); }
.agn-mes-more { font-size: 10px; font-weight: 600; color: var(--text-3); }
.agn-mes-count {
  align-self: flex-end; font-size: 10px; font-weight: 700; color: var(--blue-text);
  background: var(--blue-soft); border-radius: var(--r-pill); padding: 0 5px; min-width: 15px; text-align: center;
}

/* ---- Inputs del sheet "Nueva acción" (texto/fecha/hora): app.css estiliza input[type=text]
   pero no date/time — se define acá para no dejarlos con el look nativo del navegador. ---- */
.agn-input {
  width: 100%; min-height: var(--touch); padding: 0 var(--sp-3);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-1); font-size: var(--fs-body-lg); font-family: var(--font);
}
.agn-input:focus-visible { border-color: var(--blue); box-shadow: var(--sh-focus); outline: none; }

@media (min-width: 900px) {
  /* El appbar de Agenda queda VISIBLE con cualquier scroll (contrato §6: "el conmutador es
     cromo permanente"). En escritorio el resto de la app usa `.appbar { position: static }`
     (topbar simple que scrollea con el contenido) — acá se anula ESE override puntual, sin
     tocar app.css (que no es ownership de esta tarea): la granularidad no es una elección
     secundaria y tiene que seguir a la vista. Fondo opaco (no el `background:none` que trae
     el appbar desktop genérico): sticky con fondo transparente deja pasar el contenido por
     detrás al scrollear. */
  .view-agenda .appbar {
    position: sticky; top: 0; z-index: var(--z-bar);
    background: var(--bg-app);
  }

  /* Flexbox y no grid, a propósito: cuando no hay "sin hora"/"arrastradas" que mostrar,
     `.agn-dia-side` ni se agrega al DOM (ver `buildDia`) — con flex, `.agn-dia-timeline`
     (flex:1) ocupa el ancho entero sola, sin la columna vacía que una grilla de dos
     columnas fijas dejaría. */
  .agn-dia { display: flex; gap: var(--sp-5); align-items: flex-start; }
  /* 372px. ⚠️ Este comentario decía "con 340px quedan ~97px por botón y entran los tres con
     holgura", y era FALSO — medido el 2026-09-02 con `Range` contra la caja: a 340px el botón
     mide 90px, no 97, y "Reprogramar" (el label más largo, que el 1/9 reemplazó a "Posponer")
     necesita 88px de texto contra 74px disponibles. Desbordaba 14px en 4 de 12 botones, y el
     comentario afirmaba lo contrario desde el día que se escribió: un comentario del propio repo
     es MEMORIA, no fuente (CLAUDE.md §4).
     El arreglo son las DOS palancas juntas, porque ninguna sola alcanza: la columna pasa a 372px
     (caja ~100px) y el padding del botón baja a 4px dentro de la tarjeta (regla de más abajo),
     dejando ~92px disponibles contra los 83px que mide el texto a 13px. Holgura real: 9px.
     ⚠️ Ensanchar y no apretar es deliberado (§4.1 nº18: "cuando no hay sobrante, ensanchar es la
     respuesta; apretar es elegir a quién cortar"). Hay de dónde: el timeline queda en ~780px, y
     en producción está VACÍO — las 18 tareas tienen `due_time` en NULL, así que ninguna se ubica
     en una franja horaria. */
  .agn-dia-side { flex: 0 0 372px; margin-bottom: 0; }
  /* El padding horizontal del botón baja a 4px SOLO acá (en la tarjeta de la Agenda). Es el mismo
     valor que app.css ya usa por debajo de 900px por el mismo motivo, y es la segunda mitad del
     arreglo de arriba: sin él, a 372px quedan 84px disponibles contra 83px de texto, o sea 1px de
     margen, que es no tener margen. */
  .agn-card .tc-actions .btn { padding: 0 var(--sp-1); }
  .agn-dia-timeline { flex: 1; min-width: 0; }

  /* ---- Los filtros en UNA línea (2026-09-02, pedido textual de Fernando: "el buscador, los
     filtros y los nombres de las personas todo eso lo puedes poner en una linea, no hace falta
     que este uno a bajo del otro, queda mucho espacio inutil a la derecha").
     Tenía razón y se mide: el buscador topa en 360px y ocupaba una fila de 1208px él solo.
     Suma de la línea con el equipo de hoy: 360 (buscador) + ~170 (segmentado) + ~140 (switch)
     + ~358 (4 chips) + 3 gaps de 12 = ~1064px. Entra, y sobran ~144px.
     ⚠️ `.filters-block` (app.css) es COMPARTIDA por Clientes, Problemas, Cobranzas y
     Sin-ubicación: no se toca. `.agn-filters` tiene la MISMA especificidad y este archivo se
     carga después, así que gana por orden — si alguien mueve el <link> de index.html, esto se
     rompe en silencio. ---- */
  .agn-filters {
    flex-direction: row;
    flex-wrap: wrap;
    /* ⚠️ OBLIGATORIO: `.filters-block` no declara `align-items`, o sea `stretch`. En columna eso
       significa "todos a lo ancho" (inofensivo) y en fila significa "todos a lo ALTO del más
       alto" — el buscador de 44px se estiraría hasta la altura del bloque de chips cuando los
       chips envuelven. Cambiar la dirección cambia en silencio lo que hace el default heredado. */
    align-items: center;
    /* Horizontal 12 (separa GRUPOS de controles distintos), vertical 8 (el mismo ritmo que tenía
       la columna, para que nada se mueva cuando algo envuelve). */
    column-gap: var(--sp-3);
    row-gap: var(--sp-2);
  }
  /* El segmentado y el switch viajan juntos y NUNCA se encogen: ni `.seg button` ni `.switch`
     recortan su texto, así que apretarlos no lo corta — lo saca FUERA de la caja, sin que
     `scrollWidth > clientWidth` lo note (§4.1 nº12, adenda). Es el mismo defecto que se midió con
     "Reasignar" a 48px. */
  .agn-filters .filter-row { flex: 0 0 auto; gap: var(--sp-3); }
  /* El buscador deja de ser `width: 100%`. Tres clases para ganarle a `input[type="search"]`
     (0,1,1) y a la regla de `max-width` de más abajo. `flex: 0 1 360px` = "quiero mis 360px
     medidos, no más aunque sobre lugar": el espacio libre se lo lleva la fila de personas.
     Piso de 220px, abajo del cual una razón social tipeada no se lee entera. */
  .view-agenda .agn-filters .agn-search { flex: 0 1 360px; width: auto; min-width: 220px; }
  /* Chips de persona: N variable (hoy 4, mañana 10). `flex: 1 1 auto` con base `auto` es la
     clave — la base del ítem es su tamaño MAX-CONTENT, así que el corte de línea lo decide el
     ancho REAL de los chips y no un número inventado. Con 4 entran en la línea 1 y se comen el
     sobrante; con 10 la fila ENTERA baja al segundo renglón, donde tiene los 1208px para ella.
     Con un `flex-basis` fijo pasaría lo peor: quedarse arriba con 500px y envolver adentro en
     tres pisos. `min-width: 0` para que, si quedara justa, envuelva en vez de desbordar.
     ⚠️ El `margin-top` de la regla base se escribió para el apilado en columna; en una fila con
     `align-items: center` deja el ítem 8px más abajo que el buscador — la "asimetría entre
     espacios" que Fernando ya reportó una vez. */
  .agn-personas-row { flex: 1 1 auto; min-width: 0; margin-top: 0; }
  /* La cobertura por persona NO es un filtro: son N líneas de texto que solo ve dirección. Una
     base del 100% no puede compartir línea con nada, así que baja SIEMPRE a su propio renglón sin
     sacarla del flex ni envolverla en un div nuevo. El `row-gap` de arriba reemplaza exactamente
     al `margin-top` que tenía, anulado por el mismo motivo que el de los chips. */
  .agn-personas-stats { flex: 0 0 100%; min-width: 0; margin-top: 0; }
}


/* ---- Buscador de la Agenda ----
   Tope de ancho: medido el 2026-09-01, se estiraba a 1152px en escritorio para la frase "Buscar
   por cliente…". Es el mismo patrón que Fernando marcó el 28/8 con el botón de 572px de ancho
   para la palabra "One-pager": un control no vale el ancho de la pantalla porque haya lugar, vale
   lo que necesita su contenido. 360px entran cómodos el placeholder y una razón social larga.
   ⚠️ Hacen falta DOS clases y no una: `input[type="search"] { width: 100% }` (app.css) pesa
   (0,1,1) y le ganaría a `.agn-search` sola (0,1,0). */
.view-agenda .agn-search { max-width: 360px; }

/* ---- "Nueva acción" en el appbar ----
   ⚠️ A 390px (iPhone) el botón con su texto medía 132px y el appbar termina en 390: se salía
   **47px fuera del contenedor**, medido el 2026-09-01. No lo detectaba la sonda de
   `scrollWidth > clientWidth` porque un `.btn` no recorta — el texto simplemente se sale.
   En mobile queda solo el "+", que es el patrón de acción primaria de toda la app; el
   `aria-label` viaja igual, así que un lector de pantalla lee "Nueva acción" en los dos formatos.
   El texto vuelve a partir del breakpoint de escritorio, donde sobra ancho. */
.agn-nueva .agn-nueva-txt { display: none; }
@media (min-width: 900px) { .agn-nueva .agn-nueva-txt { display: inline; } }