/* ── BITÁCORA ──
   [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. */
  width: 372px; 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 { width: calc(100vw - 24px); right: -10px; 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 { display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; border-radius: 16px; padding: 3px 9px; }
.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; }