/* ============================================================
   boletines.css - Modulo de Boletines Agroclimaticos
   Identidad Cenipalma: #002856 / #005587 / #00A9E0 / #FF8200
   ============================================================ */

/* -- Panel full-screen (cubre el mapa, respeta la sidebar) -- */
.panel-fullscreen {
  display: none;
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  right: 0;
  bottom: 0;
  background: linear-gradient(160deg, #002856 0%, #00305f 60%, #005587 100%);
  z-index: 1002;
  overflow-y: auto;
  font-family: 'Inter', sans-serif;
  color: #ffffff;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}

/* Compatibilidad: el panel secundario fue removido en la migracion a
   floating panels. Si la clase 'with-clima-panel' sigue aplicandose
   por codigo legacy, ignorarla y mantener el offset solo del sidebar. */
.panel-fullscreen.with-clima-panel {
  left: var(--sidebar-width);
}

.panel-fullscreen::-webkit-scrollbar { width: 6px; }
.panel-fullscreen::-webkit-scrollbar-track { background: transparent; }
.panel-fullscreen::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }

/* ============================================================
   VISTA HUB
   ============================================================ */

/* Grid 2x2 de categorias */
.bol-hub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 28px 32px 40px;
  max-width: 880px;
  margin: 0 auto;
}

/* Tarjeta de categoria */
.bol-cat-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  overflow: hidden;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.bol-cat-card:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* Cabecera clicable (abre listado) */
.bol-cat-header-link {
  cursor: pointer;
  transition: opacity 0.15s;
}
.bol-cat-header-link:hover {
  opacity: 0.75;
}

/* Bloque imagen+info clicable (abre visor PDF) */
.bol-hub-pdf-link {
  cursor: pointer;
  display: block;
  border-radius: 9px;
  transition: background 0.2s ease;
}
.bol-hub-pdf-link:hover .bol-thumb-wrap {
  opacity: 0.82;
  transition: opacity 0.15s;
}
.bol-hub-pdf-link:hover .bol-latest-titulo {
  color: #4ac8e8;
  transition: color 0.15s;
}

/* -- Bloque destacado en hub -- */
.bol-hub-pdf-link.destacado {
  background: rgba(255,130,0,0.06);
  border: 1px solid rgba(255,130,0,0.30);
  padding: 0 0 6px;
}

.bol-hub-pdf-link.destacado .bol-thumb-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #FF8200, #FFB81C);
}

.bol-hub-pdf-link.destacado:hover {
  background: rgba(255,130,0,0.11);
}

.bol-hub-pdf-link.destacado:hover .bol-latest-titulo {
  color: #FFB81C;
}

/* Franja de color superior */
.bol-cat-accent {
  height: 4px;
  background: var(--cat-color, #00A9E0);
  flex-shrink: 0;
}

.bol-cat-card-inner {
  padding: 18px 20px 16px;
}

.bol-cat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.bol-cat-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--cat-color, #00A9E0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #ffffff;
  flex-shrink: 0;
}

.bol-cat-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: #ffffff;
}

/* Miniatura en la tarjeta */
.bol-thumb-wrap {
  width: 100%;
  height: 130px;
  border-radius: 9px;
  overflow: hidden;
  background: rgba(0,0,0,0.22);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.bol-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bol-thumb-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.2);
  font-size: 28px;
}

.bol-thumb-placeholder span {
  font-size: 10px;
  font-weight: 400;
  color: rgba(255,255,255,0.25);
}

/* Info del ultimo boletin */
.bol-latest-titulo {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(255,255,255,0.88);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
  min-height: 35px;
}

.bol-latest-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  color: rgba(255,255,255,0.45);
}

.bol-latest-meta i { margin-right: 3px; }

.bol-latest-empty {
  font-size: 11px;
  color: rgba(255,255,255,0.28);
  font-style: italic;
  min-height: 35px;
  display: flex;
  align-items: center;
}

/* Footer de tarjeta */
.bol-cat-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.07);
  text-align: right;
}

.btn-ver-cat {
  background: var(--cat-color, #00A9E0) !important;
  border: none !important;
  color: #ffffff !important;
  border-radius: 7px !important;
  padding: 6px 14px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: opacity 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-ver-cat:hover { opacity: 0.82; }

/* Estados de carga/error en hub */
.bol-loading,
.bol-error,
.bol-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.38);
  text-align: center;
}

.bol-error { color: rgba(255,120,120,0.7); }
.bol-loading i, .bol-error i, .bol-empty i { font-size: 32px; }

/* ============================================================
   VISTA LISTADO
   ============================================================ */

.bol-list-header {
  padding: 24px 32px 0;
}

.bol-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.btn-hub {
  background: transparent !important;
  border: none !important;
  color: #00A9E0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.btn-hub:hover { text-decoration: underline; color: #3bbde8 !important; }

.bol-breadcrumb .sep {
  color: rgba(255,255,255,0.25);
  font-size: 10px;
}

.bol-breadcrumb .current {
  color: rgba(255,255,255,0.85);
  font-weight: 600;
}

/* Barra de filtros */
.bol-filters-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 32px 16px;
  flex-wrap: wrap;
}

.bol-search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 420px;
}

.bol-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.35);
  font-size: 11px;
  pointer-events: none;
  z-index: 1;
}

/* Sobrescribir estilos de Shiny textInput dentro del modulo */
.bol-filters-bar .form-group { margin-bottom: 0; flex: 1; min-width: 200px; max-width: 420px; }
.bol-filters-bar .form-group label { display: none; }
.bol-filters-bar input.form-control {
  background: rgba(255,255,255,0.09) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  padding: 8px 12px 8px 32px !important;
  font-size: 12px !important;
  height: 36px !important;
  box-shadow: none !important;
  transition: border-color 0.2s;
}

.bol-filters-bar input.form-control::placeholder { color: rgba(255,255,255,0.32); }
.bol-filters-bar input.form-control:focus {
  border-color: rgba(0,169,224,0.55) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0,169,224,0.15) !important;
}

/* Subcategoria select */
.bol-subcat-wrap { flex-shrink: 0; min-width: 180px; }
.bol-subcat-wrap .form-group { margin-bottom: 0; }
.bol-subcat-wrap .form-group label { display: none; }
.bol-subcat-wrap .form-control,
.bol-subcat-wrap .selectize-input {
  background: rgba(255,255,255,0.09) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-size: 12px !important;
  height: 36px !important;
  box-shadow: none !important;
}

/* Informacion de resultados */
.bol-results-info {
  padding: 0 32px 10px;
  font-size: 11px;
  color: rgba(255,255,255,0.38);
}

/* Grid de tarjetas de boletines */
.bol-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  padding: 0 32px 24px;
}

/* Tarjeta de boletin individual */
.bol-item-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 11px;
  overflow: hidden;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}

.bol-item-card:hover {
  background: rgba(255,255,255,0.11);
  transform: translateY(-2px);
}

/* -- Tarjeta destacada -- */
.bol-item-card.destacado {
  border-color: rgba(255,130,0,0.38);
  background: rgba(255,130,0,0.05);
}

.bol-item-card.destacado::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #FF8200, #FFB81C);
  border-radius: 11px 11px 0 0;
  z-index: 1;
}

.bol-item-card.destacado:hover {
  background: rgba(255,130,0,0.10);
  box-shadow: 0 6px 24px rgba(255,130,0,0.14);
}

/* Contenedor miniatura en lista (incluye badge flotante) */
.bol-thumb-wrap-item {
  position: relative;
  flex-shrink: 0;
}

/* Badge flotante "Destacado" sobre la miniatura */
.bol-thumb-badge-destacado {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255,130,0,0.88);
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  backdrop-filter: blur(4px);
  z-index: 2;
  pointer-events: none;
}

.bol-item-thumb {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
}

.bol-item-thumb-placeholder {
  width: 100%;
  height: 110px;
  background: linear-gradient(135deg, rgba(0,55,110,0.7), rgba(0,30,70,0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.18);
  font-size: 26px;
}

.bol-item-body {
  padding: 13px 14px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.bol-item-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  background: rgba(0,169,224,0.18);
  color: #4ac8e8;
  border-radius: 4px;
  padding: 2px 7px;
  margin-bottom: 7px;
  align-self: flex-start;
}

.bol-item-badge.destacado {
  background: rgba(255,130,0,0.18);
  color: #FF9F30;
}

.bol-item-titulo {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  margin-bottom: 8px;
  color: rgba(255,255,255,0.88);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.bol-item-meta {
  font-size: 10px;
  color: rgba(255,255,255,0.38);
  margin-bottom: 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.bol-item-meta i { margin-right: 3px; }

.bol-item-actions {
  display: flex;
  gap: 7px;
}

.btn-ver-pdf {
  flex: 1;
  background: rgba(0,85,135,0.7) !important;
  border: 1px solid rgba(0,119,174,0.4) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
  cursor: pointer;
  transition: background 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.btn-ver-pdf:hover {
  background: rgba(0,119,174,0.8) !important;
}

.btn-descargar-pdf {
  background: rgba(255,130,0,0.12) !important;
  border: 1px solid rgba(255,130,0,0.28) !important;
  color: #FF8200 !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-descargar-pdf:hover {
  background: rgba(255,130,0,0.22) !important;
}

/* Estado vacio en lista */
.bol-list-empty {
  text-align: center;
  padding: 50px 32px;
  color: rgba(255,255,255,0.3);
  font-size: 13px;
  grid-column: 1 / -1;
}

.bol-list-empty i {
  font-size: 32px;
  display: block;
  margin-bottom: 10px;
}

/* Paginacion */
.bol-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 14px 32px 40px;
  flex-wrap: wrap;
}

.bol-page-btn {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.11) !important;
  color: rgba(255,255,255,0.7) !important;
  border-radius: 6px !important;
  padding: 5px 11px !important;
  font-size: 12px !important;
  cursor: pointer;
  min-width: 32px;
  text-align: center;
  transition: background 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bol-page-btn.active {
  background: #00A9E0 !important;
  border-color: #00A9E0 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.bol-page-btn:hover:not(.active):not(:disabled) {
  background: rgba(255,255,255,0.15) !important;
  color: #ffffff !important;
}

.bol-page-btn:disabled {
  opacity: 0.28 !important;
  cursor: default !important;
  pointer-events: none;
}

/* ============================================================
   VISTA PDF
   ============================================================ */

.bol-pdf-header {
  padding: 24px 32px 0;
}

/* Fila titulo + boton descargar */
.bol-pdf-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 32px 14px;
}

.bol-pdf-titulo {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bol-pdf-dl-btn {
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-size: 11px !important;
  padding: 6px 14px !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  white-space: nowrap;
}

/* Contenedor que ocupa el resto del alto disponible */
.bol-pdf-container {
  padding: 0 32px 24px;
}

/* Iframe del PDF */
.bol-pdf-frame {
  display: block;
  width: 100%;
  height: calc(100vh - 140px);
  border: none;
  border-radius: 10px;
  background: #ffffff;
}

/* Animacion suave de entrada */
@keyframes bolFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bol-hub-grid, .bol-list-grid {
  animation: bolFadeIn 0.28s ease both;
}

/* ─────────────────────────────────────────────────────────────────────
   TABS DE CATEGORIAS (sustituyen la vista hub de tarjetas)
   Integrados al fondo azul del panel, estilo Chrome-tabs.
   ───────────────────────────────────────────────────────────────────── */
.bol-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 22px 32px 0;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}

.bol-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
  margin-bottom: -1px;
  letter-spacing: 0.01em;
}

.bol-tab:hover {
  background: rgba(255,255,255,0.10);
  color: #ffffff;
}

.bol-tab.active {
  background: var(--cat-color, #00A9E0);
  color: #ffffff;
  border-color: var(--cat-color, #00A9E0);
  font-weight: 600;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.18);
}

.bol-tab .bol-tab-icon {
  font-size: 14px;
}

.bol-tab .bol-tab-label {
  font-size: 13px;
}

@media (max-width: 768px) {
  .bol-tabs {
    padding: 16px 12px 0;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .bol-tab {
    padding: 8px 14px;
    font-size: 12px;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   LISTADO COMO FILAS (sustituye .bol-list-grid de tarjetas)
   Cada fila es clickeable y abre el visor PDF.
   ───────────────────────────────────────────────────────────────────── */
.bol-row-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 32px 32px;
  animation: bolFadeIn 0.28s ease both;
}

.bol-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  cursor: pointer;
  color: #ffffff;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.bol-row:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
  transform: translateX(2px);
}

.bol-row:focus-visible {
  outline: 2px solid #00A9E0;
  outline-offset: 2px;
}

.bol-row-icon {
  font-size: 18px;
  color: rgba(255,255,255,0.55);
  flex-shrink: 0;
}

.bol-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bol-row-titulo {
  font-size: 13.5px;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bol-row-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: rgba(255,255,255,0.6);
}

.bol-row-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  background: rgba(0,169,224,0.18);
  color: #7dd6f4;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.bol-row-pill.destacado {
  background: rgba(255,130,0,0.18);
  color: #ffb066;
}

.bol-row-fecha {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.bol-row-download {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.75);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}

.bol-row-download:hover {
  background: rgba(255,255,255,0.12);
  color: #ffffff;
  border-color: rgba(255,255,255,0.32);
}

.bol-row-chevron {
  color: rgba(255,255,255,0.32);
  font-size: 12px;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.bol-row.expanded .bol-row-chevron {
  transform: rotate(90deg);
  color: #00A9E0;
}

.bol-row.expanded {
  background: rgba(255,255,255,0.10);
  border-color: rgba(0,169,224,0.45);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}

/* Embed del PDF desplegado bajo la fila, manteniendo el ancho de la fila
   y un borde sutil que la conecta visualmente. */
.bol-row-embed {
  display: block;
  margin: -2px 0 8px;
  background: #ffffff;
  border: 1px solid rgba(0,169,224,0.30);
  border-top: none;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  animation: bolEmbedReveal 0.28s ease both;
}

@keyframes bolEmbedReveal {
  from { opacity: 0; transform: translateY(-6px); max-height: 0; }
  to   { opacity: 1; transform: translateY(0);    max-height: 95vh; }
}

.bol-row-embed-frame {
  width: 100%;
  height: 85vh;
  border: 0;
  background: #ffffff;
  display: block;
}

@media (max-width: 768px) {
  .bol-row-embed-frame { height: 70vh; }
}

@media (max-width: 768px) {
  .bol-row-list { padding: 0 12px 20px; }
  .bol-row { padding: 10px 12px; gap: 10px; }
  .bol-row-titulo { font-size: 13px; -webkit-line-clamp: 3; }
  .bol-row-chevron { display: none; }
}

/* ===================================================================
   Boletines - Layout refactor (chip bar + visor + historico)
   =================================================================== */
.bol-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  background: #f5f7fa;
  position: relative;
  overflow: hidden;
}

/* Chip bar superior — patron floating panel */
.bol-chip-bar {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
}
.bol-chip-bar .map-fpanel-mini {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  padding: 4px;
}
.bol-chips {
  display: flex;
  gap: 4px;
}
.bol-chips .fpanel-chip {
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  background: transparent;
  color: #475569;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.bol-chips .fpanel-chip:hover { background: rgba(0, 122, 174, 0.08); color: #007AAE; }
.bol-chips .fpanel-chip.active {
  background: #007AAE;
  color: white;
}

/* Cuerpo: 2 columnas */
.bol-body {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 14px;
  padding: 64px 14px 14px 14px;
  overflow: hidden;
  transition: grid-template-columns 0.25s ease;
}

/* Histórico colapsado: el visor PDF ocupa todo el ancho */
.bol-body.bol-history-collapsed {
  grid-template-columns: 1fr 0;
  gap: 0;
}
.bol-body.bol-history-collapsed .bol-history {
  display: none;
}

/* Botón discreto para colapsar/expandir el histórico — esquina sup. der. */
.bol-hist-toggle {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  color: #64748b;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  z-index: 1101;
  transition: color 0.15s ease;
}
.bol-hist-toggle:hover {
  color: #007AAE;
}
.bol-hist-toggle i {
  transition: transform 0.25s ease;
}
.bol-body.bol-history-collapsed .bol-hist-toggle i {
  transform: rotate(180deg);
}

/* Visor PDF */
.bol-viewer {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #2c2c2c;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  min-width: 0;
}
/* uiOutput() envuelve su contenido en un div, asi que el hijo flex de
   .bol-viewer es ese wrapper — el resumen y el iframe viven dentro de el. */
.bol-viewer > .shiny-html-output {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.bol-pdf-frame {
  flex: 1;
  width: 100%;
  /* Anula el height: calc(100vh - 140px) de la regla legacy (~L666), que
     sin esto gana y desborda el contenedor flex. */
  height: auto;
  min-height: 0;
  border: 0;
  display: block;
}

/* Resumen del boletin — franja sobre el visor, dentro del chrome oscuro.
   Solo aparece cuando el boletin trae texto (la mayoria del historico no). */
.bol-pdf-resumen {
  flex: 0 0 auto;
  padding: 10px 14px 10px 12px;
  border-left: 3px solid #007AAE;
  background: #333333;
  cursor: pointer;
  transition: background 0.15s ease;
}
.bol-pdf-resumen:hover { background: #3a3a3a; }
.bol-pdf-resumen p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #cbd5e1;
  /* Recorte a 2 lineas: los resumenes llegan a ~800 caracteres y sin
     clamp se comen media pantalla en movil. Clic = expandir. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Expandido: tope de 35vh con scroll propio, para que un resumen largo
   no aplaste el iframe del PDF (sobre todo en movil). */
.bol-pdf-resumen.expanded p {
  -webkit-line-clamp: unset;
  max-height: 35vh;
  overflow-y: auto;
}
.bol-pdf-placeholder {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #cbd5e1;
}
.bol-pdf-placeholder i { font-size: 48px; opacity: 0.5; }
.bol-pdf-placeholder p { font-size: 14px; margin: 0; }

/* Historico */
.bol-history {
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  overflow: hidden;
}
.bol-history-header {
  padding: 14px 18px 10px;
  border-bottom: 1px solid #eef2f7;
}
.bol-history-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}
.bol-history-list-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.bol-hist-list { display: flex; flex-direction: column; gap: 4px; }

.bol-hist-card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s;
  border: 1px solid transparent;
}
.bol-hist-card:hover { background: #f5f9ff; }
.bol-hist-card.active {
  background: #e3f0fb;
  border-color: #b6d6f0;
}
.bol-hist-card.active .bol-hist-titulo { color: #007AAE; }

.bol-hist-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}
.bol-hist-text { min-width: 0; }
.bol-hist-titulo {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bol-hist-fecha {
  font-size: 11.5px;
  color: #64748b;
  margin-top: 2px;
}
.bol-hist-download {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #64748b;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.bol-hist-download:hover { background: #e3f0fb; color: #007AAE; }
.bol-hist-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; padding: 24px; color: #94a3b8;
  font-size: 13px;
}
.bol-hist-empty i { font-size: 24px; opacity: 0.6; }

.bol-history-more {
  padding: 10px 14px 14px;
  border-top: 1px solid #eef2f7;
}
.bol-history-more-btn {
  width: 100%;
  background: white;
  border: 1px solid #d6e4f0;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  color: #007AAE;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .15s;
}
.bol-history-more-btn:hover { background: #f5f9ff; }

@media (max-width: 900px) {
  .bol-body { grid-template-columns: 1fr; }
  .bol-history { max-height: 240px; }
}

/* Móvil: la barra de categorías ocupa el ancho disponible y permite
   scroll horizontal cuando los chips no caben — antes quedaba centrada
   y más ancha que la pantalla, ocultando categorías sin forma de verlas. */
@media (max-width: 768px) {
  .bol-chip-bar {
    /* Entre el botón hamburguesa (izq, left:14px ancho 40px) y el botón
       de colapso del histórico (der, right:14px ancho 32px). */
    left: 62px;
    right: 54px;
    transform: none;
    max-width: none;
  }
  .bol-chip-bar .map-fpanel-mini {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .bol-chip-bar .map-fpanel-mini::-webkit-scrollbar { display: none; }
  .bol-chips {
    flex-wrap: nowrap;
  }
  .bol-chips .fpanel-chip {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* Navegacion de paginas (anterior/siguiente) en el historico */
.bol-history-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 14px 8px;
  border-top: 1px solid #eef2f7;
}
.bol-history-nav-btn {
  width: 28px;
  height: 24px;
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0;
  transition: color .15s;
}
.bol-history-nav-btn:hover:not(:disabled) { color: #007AAE; }
.bol-history-nav-btn:disabled { color: #cbd5e1; cursor: not-allowed; }
.bol-history-nav-info {
  font-size: 11.5px;
  color: #94a3b8;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Botón de descarga discreto sobre el visor PDF (esquina inferior der). */
.bol-pdf-download {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  color: #007AAE;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.10);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
              background 0.15s ease, color 0.15s ease;
  z-index: 5;
}
.bol-pdf-download:hover {
  transform: translateY(-2px);
  background: #007AAE;
  color: #ffffff;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.24);
}