/* ── BITÁCORA ──
   [v2026.09.26-1] navbar-alertas.css
   2026-09-26 | En celular el panel se salía por la izquierda (captura de Alberto, 26-09):
     el ancho de pantalla completa, alineado a la campana —que no está en el borde—, dejaba
     el sobrante fuera. Ahora el ancho es "372 px o lo que quepa" en cualquier pantalla
     (min(), sin @media; 100vw - 26px: los 12 px de cada lado y el borde) y navbar-alertas.js [v2026.09.26-1] corre el panel lo justo para
     que quede entero. El margen de 12 px a cada lado es ALERTAS_PANEL_MARGEN_PX del JS.
     Se retira el right: -10px del @media: la posición ahora la corrige el JS midiendo.
   [v2026.09.25-1] navbar-alertas.css
   2026-09-25 | Los chips del resumen pasan a ser BOTONES de filtro (navbar-alertas.js
     [v2026.09.25-1]): mano al pasar, el elegido con su borde del color del nivel y los
     demás atenuados mientras hay un filtro puesto, y "Ver todo" para quitarlo. Las reglas
     de color siguen siendo las mismas (.r / .a / .v).
   [v2026.09.22-3] navbar-alertas.css
   2026-09-22 (3) | + .hv-al-preg: la pregunta que aparece en la fila antes de cerrar un pago
     (navbar-alertas.js [v2026.09.22-4]). Ocupa el ancho completo para que los botones bajen
     a la línea siguiente y no se toque "Sí" por inercia donde estaba el botón anterior.
   [v2026.09.22-2] navbar-alertas.css
   2026-09-22 (2) | + .prim.rojo: el boton "Resuelto" del aviso rojo, en el rojo del resto
     del panel (navbar-alertas.js [v2026.09.22-2]).
   [v2026.09.22-1] navbar-alertas.css
   2026-09-22 | + la pestaña PAGOS (navbar-alertas.js [v2026.09.22-1]; preview aprobado por
     Alberto el 22-09): las dos pestañas con su contador, el avatar del pago con un recibo,
     el verde de "por conciliar" (que la campanita no tenía en chips ni puntos), el monto
     a la derecha del nombre y los botones "Conciliado" y "Abrir conversación". Mismos
     colores del resto: rojo #B3261E, ámbar #C98A16, verde #1D8A63.
   [v2026.08.24-7] navbar-alertas.css
   2026-08-24 (7) | El tooltip pasa a .hv-tip, un elemento propio, y se retira el
     ::after con :hover. Con el pseudo-elemento el aspecto dependia de ganarle a
     cualquier otra regla del panel, y cuando algo lo pisaba habia que salir a buscar
     que — se fueron varias vueltas hoy en eso. Un div con clase propia nadie lo toca.
     Hermano de .cal-pay-tip (calendario) y .emb-tip (embudos): copia consciente, cada
     modulo con sus archivos. Si cambia uno, mirar los otros.
   [v2026.08.24-6] navbar-alertas.css
   2026-08-24 (6) | El panel aprovecha mejor el alto en CELULAR. El @media solo ajustaba
     el ANCHO y dejaba el max-height en 70vh: en un iPhone SE eso son 341 px de lista, o
     sea tres alertas y media. Ahora sube a 82vh en pantalla angosta —donde el panel es
     lo unico que se mira, no hay razon para dejar un tercio de pantalla vacia— y las
     filas se compactan un poco.
     En escritorio se queda en 70vh: ahi el panel flota sobre el trabajo y taparlo todo
     seria peor.
   [v2026.08.24-5] navbar-alertas.css
   2026-08-24 (5) | El tooltip pasa a BLANCO, como el de calendario y embudos. Salio
     negro porque copie el color de configuracion.css (#2b3556) en vez del que ya usa el
     panel: blanco con borde #f0edfa y sombra suave. Mismo error que el 22-ago en
     embudos, ahora al reves — alli el negro venia del selector global, aca lo escribi yo.
   [v2026.08.24-4] navbar-alertas.css
   2026-08-24 (4) | Dos limpiezas: + la propiedad estandar line-clamp junto a la de
     -webkit (el editor la pedia por compatibilidad; sin ella el recorte a dos lineas
     depende solo del prefijo), y se retira .hv-al-sw, el CSS del interruptor que la -3
     reemplazo por los cuatro botones. Dejar estilos de algo que ya no existe confunde a
     quien lea el archivo despues.
   [v2026.08.24-3] navbar-alertas.css
   2026-08-24 (3) | + tooltip propio de los botones de nivel, con el estilo del panel.
     Antes usaban el `title` del navegador —feo y lento, justo lo que sacamos de
     embudos— y sin explicacion nadie entiende que hace "No marcar": ni Alberto, que
     conoce el sistema, lo tenia claro al verlo.
     NO se reusa el [data-tip] global de configuracion.css porque ese sale a la IZQUIERDA
     y en una sola linea: en botones de 70px dentro de un panel angosto se saldria del
     panel, sobre todo el del primer boton. Este sale ARRIBA y admite dos lineas.
     El atributo es data-hvtip, propio: usar data-tip encenderia ADEMAS el global y
     saldrian los dos, que es exactamente el bug que tuvimos el 22-ago en embudos.
   [v2026.08.24-2] navbar-alertas.css
   2026-08-24 (2) | FIX del apretado: .hv-al-item seguia siendo display:flex de cuando la
     fila era avatar + texto + interruptor EN LINEA. Al agregar los cuatro botones se
     sumaron como tercera columna y aplastaron el texto contra el borde: el motivo
     quedaba en una columna de dos palabras por linea.
     Ahora la fila es en BLOQUE — arriba avatar y texto, abajo los botones a lo ancho— y
     el panel pasa de 340 a 372 px, que es lo que necesitan cuatro botones para que
     "No marcar" quepa en una linea.
   [v2026.08.24-1] navbar-alertas.css
   2026-08-24 | + los cuatro botones de nivel en cada fila (reemplazan el interruptor) y
     la seccion gris de ATENDIDAS HOY. El interruptor tenia un hueco: al apagar, la
     conversacion salia del panel y no habia como volver a marcarla.
   [v2026.08.23-2] navbar-alertas.css
   2026-08-23 (2) | Los colores de urgencia pasan a los MISMOS del calendario: rojo
     #B3261E y ambar #C98A16, con sus fondos #FDECEA y #FAEEDA. Los anteriores
     (#E2445C / #E8B84B) eran mas calientes de lo que usa el panel, y ademas hacian que
     "rojo" significara un tono aca y otro alla. Ahora es el mismo en todas partes.
   [v2026.08.23-1] navbar-alertas.css
   2026-08-23 | Estilos de la campanita de urgencias (navbar-alertas.js). Archivo propio
     y no dentro del CSS del navbar: es una pieza nueva y completa, y así se puede
     retirar entera si algún día no se usa.
     El panel cuelga de .hv-nav-bell, que ya es position:relative — si no lo fuera, se
     posicionaría respecto del body y quedaría suelto al mover la barra.
   ────────────────────────────────────────────────────────────────────────── */

/* La campana necesita ser el ancla del panel y del contador. */
.hv-nav-bell { position: relative; cursor: pointer; }
.hv-nav-bell.con-alertas svg { color: #FFD666; }
.hv-nav-bell.open svg { color: #fff; }

/* El contador. Ámbar por defecto, rojo si hay alguna urgente: el color dice el nivel
   más alto sin tener que abrir el panel. */
.hv-bell-pip {
  position: absolute; top: -5px; right: -6px;
  background: #C98A16; color: #5C3A05;
  border-radius: 9px; padding: 1px 5px;
  font-size: 9.5px; font-weight: 800; line-height: 1.35;
  border: 2px solid #6b74d8;   /* recorta el círculo contra la barra */
  font-family: 'DM Sans', sans-serif;
}
.hv-bell-pip.rojo { background: #B3261E; color: #fff; }

/* ── El panel ── */
.hv-alertas-panel {
  position: absolute; top: calc(100% + 10px); right: -8px; z-index: 1000;
  /* 372 px: lo que necesitan cuatro botones para que "No marcar" quepa en una línea
     sin partirse. */
  /* [26-09-2026] O lo que quepa, dejando 12 px por lado (ALERTAS_PANEL_MARGEN_PX en el JS)
     más el borde de 1 px por lado: 100vw - 26px. */
  width: min(372px, calc(100vw - 26px)); max-height: 70vh; overflow: hidden;
  background: #fff; border: 1px solid #eceaf7; border-radius: 13px;
  box-shadow: 0 12px 34px rgba(30,25,80,.18);
  font-family: 'DM Sans', sans-serif; color: #3B4256;
  display: flex; flex-direction: column;
  cursor: default;
}
/* En pantalla angosta ocupa casi todo el ancho —372 px fijos se saldrían— y también más
   alto: acá el panel es lo único que se está mirando, así que dejar un tercio de
   pantalla vacía no aporta. En escritorio flota sobre el trabajo y sí conviene acotarlo. */
@media (max-width: 480px) {
  .hv-alertas-panel { max-height: 82vh; }
  /* Filas algo más compactas: con el alto de un teléfono, cada píxel es una alerta más
     a la vista. */
  .hv-al-item { padding: 10px 13px 9px; }
  .hv-al-niv  { padding-left: 41px; margin-top: 8px; }
  .hv-al-ext  { -webkit-line-clamp: 1; line-clamp: 1; }
}

.hv-al-head { padding: 12px 15px 10px; border-bottom: 1px solid #f0f0f5;
  display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; }
.hv-al-head b { font-size: 13.5px; flex: 1; }
.hv-al-cnt { font-size: 10.5px; color: #b8bed0; }

.hv-al-res { display: flex; gap: 7px; padding: 9px 15px; background: #fcfcfe;
  border-bottom: 1px solid #f0f0f5; flex-shrink: 0; flex-wrap: wrap; }
.hv-al-res span,
.hv-al-res button { display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; border-radius: 16px; padding: 3px 9px; }
/* [25-09-2026] Los chips filtran: son botones. */
.hv-al-res button { border: 1.5px solid transparent; cursor: pointer; font-family: inherit;
  transition: opacity .15s, border-color .15s; }
.hv-al-res button:hover { filter: brightness(.97); }
.hv-al-res.filtrando button:not(.on):not(.hv-al-quitar) { opacity: .45; }
.hv-al-res button.r.on { border-color: #B3261E; }
.hv-al-res button.a.on { border-color: #854F0B; }
.hv-al-res button.v.on { border-color: #1D8A63; }
.hv-al-res .hv-al-quitar { background: #fff; color: #6b7280; border-color: #e5e7eb;
  font-weight: 600; margin-left: auto; }
.hv-al-res .r { background: #FDECEA; color: #B3261E; }
.hv-al-res .a { background: #FAEEDA; color: #854F0B; }
.hv-al-res .v { background: #E1F5EE; color: #1D8A63; }

/* Solo la lista rueda: la cabecera y el pie quedan fijos, igual que en el modal de
   programas. Con quince alertas, perder de vista el resumen sería perder el sentido. */
.hv-al-lista { overflow-y: auto; flex: 1; min-height: 0; }
.hv-al-lista::-webkit-scrollbar { width: 6px; }
.hv-al-lista::-webkit-scrollbar-thumb { background: #dcd8ea; border-radius: 3px; }

/* [24-08 (2)] En bloque, no en línea: los cuatro botones van DEBAJO del texto, no al
   lado. Como columna aplastaban el motivo, que es lo que hace útil la alerta. */
.hv-al-item { display: block; padding: 12px 15px 11px;
  border-bottom: 1px solid #f7f7fa; }
.hv-al-item:last-child { border-bottom: none; }
.hv-al-item:hover { background: #fcfcfe; }

.hv-al-av { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; position: relative;
  background: linear-gradient(135deg, #9961FF, #5b8dee); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; }
.hv-al-pt { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px;
  border-radius: 50%; border: 2px solid #fff; }
.hv-al-pt.r { background: #B3261E; }
.hv-al-pt.a { background: #C98A16; }

.hv-al-c { flex: 1; min-width: 0; }
.hv-al-n { font-size: 12.5px; font-weight: 700; display: flex; align-items: center;
  gap: 6px; flex-wrap: wrap; }
.hv-al-chip { font-size: 9px; font-weight: 800; border-radius: 5px; padding: 1px 6px; }
.hv-al-chip.r { background: #FDECEA; color: #B3261E; }
.hv-al-chip.a { background: #FAEEDA; color: #854F0B; }
/* El motivo es lo que hace útil la alerta: dice POR QUÉ está marcada, y por eso pesa
   más que el extracto. */
/* Sin restricción de ancho: antes competía con los botones por el espacio y quedaba en
   una columna de dos palabras. */
.hv-al-motivo { font-size: 10.5px; font-weight: 600; margin-top: 3px; line-height: 1.4; }
.hv-al-motivo.r { color: #B3261E; }
.hv-al-motivo.a { color: #854F0B; }
/* Dos líneas como máximo: el extracto es contexto, no el contenido. La propiedad va
   con prefijo y sin él — el estándar es lo que quedará. */
.hv-al-ext { font-size: 11px; color: #767D99; margin-top: 3px; line-height: 1.4;
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
  -webkit-line-clamp: 2; line-clamp: 2; }
.hv-al-t { font-size: 9.5px; color: #b8bed0; margin-top: 4px; }

/* [24-08 (4)] Acá vivía .hv-al-sw, el interruptor de encender/apagar. Lo reemplazaron
   los cuatro botones de nivel: con dos estados no se podía distinguir "ya la atendí" de
   "no me la marques más", y una vez apagada no había cómo volver a subirla. */

.hv-al-vacio { padding: 34px 16px; text-align: center; font-size: 13px; color: #b8bed0; }
.hv-al-pie { padding: 10px 15px; text-align: center; font-size: 11.5px; color: #9961FF;
  font-weight: 700; background: #fcfcfe; border-top: 1px solid #f0f0f5;
  cursor: pointer; flex-shrink: 0; }
.hv-al-pie:hover { background: #f5f0ff; }

/* ── Los cuatro niveles en cada fila  [24-08-2026] ────────────────────────────
   Reemplazan al interruptor: con dos estados no se podia distinguir "atendida" de
   "no me la marques mas", y una vez apagada no habia como volver a subirla.
   ────────────────────────────────────────────────────────────────────────── */
.hv-al-top { display: flex; gap: 10px; align-items: flex-start; }

/* Alineados con el texto de arriba (avatar 33px + 10 de separación), no con el borde:
   así se lee como parte de esa alerta y no como una barra suelta. */
.hv-al-niv { display: flex; gap: 5px; margin-top: 10px; padding-left: 43px; }
.hv-al-nb {
  flex: 1; min-width: 0;
  border: 1.5px solid #e4e9f5; border-radius: 8px; padding: 6px 2px;
  background: #fff; cursor: pointer; text-align: center; transition: all .14s;
  font-family: 'DM Sans', sans-serif;
}
.hv-al-nb .p { width: 7px; height: 7px; border-radius: 50%; margin: 0 auto 3px; display: block; }
.hv-al-nb .l { font-size: 9px; font-weight: 700; color: #767D99; display: block; line-height: 1.15; }
.hv-al-nb:hover { border-color: #cfd6ea; background: #fcfcfe; }
.hv-al-nb.on.r { background: #FDECEA; border-color: #B3261E; }
.hv-al-nb.on.r .l { color: #B3261E; }
.hv-al-nb.on.a { background: #FAEEDA; border-color: #C98A16; }
.hv-al-nb.on.a .l { color: #854F0B; }
.hv-al-nb.on.v { background: #E1F5EE; border-color: #1D8A63; }
.hv-al-nb.on.v .l { color: #1D8A63; }
.hv-al-nb.on.x { background: #f2f2f6; border-color: #b8bed0; }
.hv-al-nb.on.x .l { color: #6b7194; }

/* Las atendidas hoy: presentes pero apagadas, para poder volver a marcarlas. */
.hv-al-sep {
  padding: 8px 15px 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .05em;
  color: #b8bed0; background: #fcfcfe;
  border-top: 1px solid #f0f0f5; border-bottom: 1px solid #f0f0f5;
}
.hv-al-item.atendida { background: #fcfcfe; }
.hv-al-item.atendida .hv-al-n,
.hv-al-item.atendida .hv-al-ext { opacity: .55; }
.hv-al-chip.x { background: #f2f2f6; color: #6b7194; }

/* ── Tooltip de los botones de nivel  [24-08-2026] ────────────────────────────
   Elemento propio (.hv-tip), creado por JS. Antes era un ::after con :hover: el aspecto
   dependia de que mi regla le ganara a cualquier otra del panel, y eso es fragil.
   Hermano de .cal-pay-tip (calendario) y .emb-tip (embudos) — mismos valores.
   ────────────────────────────────────────────────────────────────────────── */
.hv-tip {
  display: none; position: fixed; z-index: 10000;
  background: #fff; border: 1px solid #f0edfa; border-radius: 10px;
  padding: 9px 11px; width: 200px;
  box-shadow: 0 8px 26px rgba(30,25,80,.14);
  font-family: 'DM Sans', sans-serif; pointer-events: none;
}
.hv-tip-ttl { font-size: 9.5px; letter-spacing: .06em; color: #b8bed0;
  margin-bottom: 6px; font-weight: 700; }
.hv-tip-txt { font-size: 11.5px; color: #383838; line-height: 1.42; }

/* ── PESTAÑA PAGOS  [22-09-2026] ──────────────────────────────────────────── */
.hv-al-tabs { display: flex; border-bottom: 1px solid #f0f0f5; flex-shrink: 0; }
.hv-al-tab { flex: 1; border: none; background: none; padding: 9px 4px; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 700; color: #8b90a8;
  border-bottom: 2px solid transparent; }
.hv-al-tab.on { color: #7c3aed; border-bottom-color: #9961FF; }
.hv-al-tab .n { display: inline-block; margin-left: 5px; border-radius: 9px; padding: 0 6px;
  font-size: 9.5px; background: #f1f2f7; color: #6b7194; }
.hv-al-tab.on .n { background: #F3EEFF; color: #7c3aed; }
.hv-al-tab .n.r { background: #FDECEA; color: #B3261E; }   /* hay un pago en rojo */

.hv-al-av.pago { background: #F3EEFF; color: #7c3aed; font-size: 14px; }
.hv-al-pt.v { background: #1D8A63; }
.hv-al-chip.v { background: #E1F5EE; color: #1D8A63; }
.hv-al-motivo.v { color: #1D8A63; }
.hv-al-monto { margin-left: auto; font-weight: 800; color: #1f2433; }

/* Alineados con el texto de arriba, igual que los botones de nivel. */
.hv-al-acc { display: flex; gap: 6px; margin-top: 9px; padding-left: 43px; flex-wrap: wrap; }
.hv-al-acc button { border: 1.5px solid #e4e9f5; background: #fff; border-radius: 8px;
  padding: 6px 10px; cursor: pointer; font-family: 'DM Sans', sans-serif;
  font-size: 10.5px; font-weight: 700; color: #5b6180; }
.hv-al-acc button:hover:not([disabled]):not(.prim) { border-color: #c9b8ff; color: #7c3aed; }
.hv-al-acc button.prim { background: #1D8A63; border-color: #1D8A63; color: #fff; }
.hv-al-acc button.prim.rojo { background: #B3261E; border-color: #B3261E; }
.hv-al-preg { width: 100%; font-size: 11px; font-weight: 700; color: #5b6180; margin-bottom: 2px; }
.hv-al-acc button[disabled] { opacity: .6; cursor: default; }
@media (max-width: 480px) { .hv-al-acc { padding-left: 41px; } }