/* ========================================
   NOTIFICACIONES - ESTILOS ESPECÍFICOS (Refactor Clean Code)
   ======================================== */

/* Estilos generales de notificaciones */
.notif-item:hover { background-color: #f0f7ff; }
.notif-item.active {
  background-color: #d9ecff; /* más vivo para distinguir */
  border-left: 4px solid #4594be;
}
.modal-header .fa-bell { color: #4594be; }

/* Scroll sólo visible al pasar el ratón por la lista */
.notif-scroll { overflow-y: hidden; }
.notif-scroll:hover { overflow-y: auto; }

/* Asegurar que no se quede oculto tras navegar detalles */
#notif-list { will-change: scroll-position; }

/* Panel derecho suave y header azul */
#notificationsModal .modal-header { background-color: #4594be; color: #fff; }
#notificationsModal .modal-header .btn-close { filter: brightness(0) invert(1); }
#notificationsModal .modal-title, #notificationsModal .modal-title i { color: #fff; }
#notif-detail { background-color: #f7f9fc; }

/* Alturas de fila/lista/detalle en desktop */
.notif-row-height { height: 65vh; max-height: 65vh; }
.notif-list-height { max-height: 65vh; }
.notif-detail-height { max-height: 65vh; }

/* Títulos y fechas en el listado */
.notif-title { max-width: 65%; }
.notif-item.active .notif-title { font-weight: 700; color: #1f2d3d; }
.notif-date { min-width: 170px; text-align: right; }

/* Paginación */
#notif-paginator { /* visibility managed via Bootstrap utility classes */ }
#notif-paginator .btn { border-color: #4594be; color: #4594be; }
#notif-paginator .btn:hover { background-color: #4594be; color: #fff; }

/* Móvil: modal a pantalla completa y lista compacta sin fecha */
@media (max-width: 576px) {
  #notificationsModal .modal-dialog { margin: 0; max-width: 100%; }
  #notificationsModal .modal-content { border-radius: 0; }
  #notificationsModal .modal-body { height: calc(100vh - 70px); overflow: hidden; }
  #notificationsModal .modal-body .row {
    flex-direction: column !important;
    height: calc(100vh - 120px) !important; /* reservar espacio bajo el header */
    max-height: calc(100vh - 120px) !important;
    min-height: calc(100vh - 120px) !important;
    overflow: hidden;
  }
  #notificationsModal .col-12.col-lg-6 { 
    border-right: 0 !important; 
    border-bottom: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
  }
  .notif-list-height { max-height: 40vh; }
  .notif-detail-height { 
    max-height: calc(100vh - 200px) !important; /* Altura máxima para el detalle */
    height: calc(100vh - 200px) !important;
    min-height: calc(100vh - 200px) !important;
  }
  #notificationsModal .notif-date { display: none !important; }
  #notificationsModal .notif-title { max-width: 100%; }
  #notif-paginator { flex-wrap: wrap; }
  #notif-paginator .btn { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
  #notif-paginator .btn i { margin: 0 !important; }
  #notif-paginator .btn span:not(.visually-hidden) { display: none; }
  #notif-paginator .small { font-size: 0.65rem; }

  /* Asegurar visibilidad del detalle en móvil */
  /* La primera columna (lista + paginador) ocupa su altura natural (máx 40vh).
     La segunda columna (detalle) crece para ocupar el resto con estructura flex. */
  #notificationsModal .modal-body .row > .col-12 { flex: 0 0 auto; }
  #notificationsModal .modal-body .row > .col-12:last-child { 
    flex: 1 1 auto; 
    display: flex;
    flex-direction: column;
    min-height: 0; /* Importante para flex */
    overflow: hidden;
  }
  
  /* Estructura flex para el detalle: header fijo, contenido con scroll, botones fijos */
  #notif-detail {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important; /* Sin scroll en el contenedor principal */
    padding: 1rem !important;
    min-height: 0 !important; /* Crítico para flex */
    height: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Header del detalle (título y fecha) - sin scroll */
  #notif-detail > .d-flex.align-items-center,
  #notif-detail > .text-muted {
    flex-shrink: 0 !important;
    min-height: auto !important;
  }
  
  /* Contenedor del mensaje con scroll - crece para ocupar espacio disponible */
  #notif-detail > .border {
    flex: 1 1 0 !important; /* Usar 0 en lugar de auto para mejor control */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0.75rem 0 !important;
    min-height: 0 !important; /* Crítico para que flex funcione con overflow */
    max-height: 100% !important; /* No exceder el contenedor padre */
    height: 0 !important; /* Forzar que flex calcule la altura */
    position: relative !important;
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
    /* Asegurar que el contenido interno no cause problemas */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    /* Forzar que el contenido sea visible */
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
  }
  
  /* Asegurar que el contenido dentro del border sea visible */
  #notif-detail > .border > * {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Botones de navegación - siempre visibles, sin scroll */
  #notif-detail > .d-flex.justify-content-center {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    margin-top: 0.75rem !important;
    padding-top: 0.75rem !important;
    border-top: 1px solid #e9ecef;
    min-height: auto !important;
  }
  
  /* Ajustes de tipografía */
  #notif-detail h5 { font-size: 1rem; }
  #notif-detail .mb-3 { margin-bottom: 0.75rem !important; }
  #notif-detail .border p { font-size: 0.95rem; line-height: 1.5; word-wrap: break-word; }
  
  /* Scrollbar personalizado para el contenido del mensaje */
  #notif-detail > .border::-webkit-scrollbar {
    width: 6px;
  }
  #notif-detail > .border::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
  }
  #notif-detail > .border::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
  }
  #notif-detail > .border::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
  }
}

/* ========================================
   NOTIFICACIONES - ESTILOS UI AVANZADOS
   ======================================== */

#notificationsModal .modal-content { border-radius: 12px; }
#notificationsModal .modal-header { border-bottom: 1px solid #e9ecef; }

#notificationsModal #notif-list { scrollbar-color: #cbd5e1 transparent; scrollbar-width: thin; }
#notificationsModal #notif-list::-webkit-scrollbar { width: 8px; }
#notificationsModal #notif-list::-webkit-scrollbar-track { background: transparent; }
#notificationsModal #notif-list::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 8px; }

#notificationsModal #notif-list .list-group-item {
  border: 0;
  border-bottom: 1px solid #f1f3f5;
  transition: background-color .15s ease, transform .08s ease;
}
#notificationsModal #notif-list .list-group-item:hover { background-color: #f6f9ff; }

#notificationsModal #notif-list .fw-bold { display: inline-flex; align-items: center; gap: .25rem; }
#notificationsModal #notif-list .badge.bg-danger { font-size: .65rem; }

#notificationsModal #notif-detail .border {
  background: #fff;
  border: 1px solid #e9ecef;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  border-radius: 10px;
}

/* Asegurar que el contenido del mensaje sea visible en cualquier tamaño */
#notificationsModal #notif-detail .border p { margin-bottom: 0.5rem; word-wrap: break-word; }
#notificationsModal #notif-detail .border p:last-child { margin-bottom: 0; }

/* Listas dentro del detalle: asegurar visibilidad en todas las vistas */
#notificationsModal #notif-detail .border {
  color: #212529 !important; /* Forzar color de texto oscuro */
}

#notificationsModal #notif-detail .border ul {
  display: block !important;
  list-style: disc !important; /* Asegurar bullets */
  list-style-position: outside !important; /* Mejor para HTML complejo */
  padding-left: 1.5rem !important; /* Espacio para bullets fuera */
  margin: 0 0 1rem 0 !important;
  color: #212529 !important;
}

#notificationsModal #notif-detail .border li {
  display: list-item !important;
  margin: 0.25rem 0 !important;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  color: #212529 !important;
}

#notificationsModal #notif-detail .border p {
  display: block !important;
  color: #212529 !important;
  margin-bottom: 0.75rem !important;
}

#notif-badge { min-width: 1.25rem; }

/* Estilos para el badge de notificaciones en el navbar */
.navbar .nav-link #notif-badge {
  min-width: 1.25rem;
  white-space: nowrap;
}