/**
 * Percapita Theme — Dirección de Salud Municipal de Tomé (DISAM Tomé)
 * Personalización visual del template NiceAdmin.
 *
 * Este archivo se carga DESPUÉS de style.css y sobrescribe únicamente
 * apariencia (color, tipografía, sombras, bordes). No contiene lógica.
 *
 * Estructura:
 *   1. Paleta base (escala institucional navy + escalas de espaciado/
 *      tipografía/radios; alias --color-* en la Sección 2)
 *   2. Variables semánticas (incluye alias --color-*, mapeo --bs-*)
 *   3. General / fondo
 *   4. Header / Navbar
 *   5. Sidebar
 *   6. Cards y KPI
 *   7. Botones
 *   8. Tablas
 *   9. Badges de estado
 *  10. Formularios
 *  11. Modales
 *  12. Alertas
 *  13. Dropdowns
 *  14. Paginación
 *  15. Breadcrumbs
 *  16. Gráficos (paleta de series)
 *  17. Otras vistas NiceAdmin (404, footer, perfil, faq, contacto, iconos)
 *  18. Loader global de vistas
 *  19. Modo compacto (reduce paddings/márgenes del layout NiceAdmin)
 *  20. Toasts (Bootstrap 5 nativo, minimalistas y coloreados por estado)
 *  21. Notificaciones del header (panel con BD + modal de aviso)
 *
 * Las secciones 4 y 5 (Header/Navbar y Sidebar) implementan la estructura
 * de CardioTrack (C:\laragon\www\proyecto): navbar con degradado institucional
 * (marca de 2 líneas + botón de menú + buscador + perfil con avatar, todo en
 * blanco/translúcido sobre el degradado) y aside claro como cajón superpuesto
 * (overlay) controlado por SidebarDrawerController (vistas/src/common.js),
 * reexpresados con los tokens --pc-* del proyecto. La sección 21 hace lo
 * mismo con el panel de notificaciones (BD + polling) y el modal de difusión
 * de CardioTrack.
 */

/*--------------------------------------------------------------
# 1-3. Tokens, alias --pc-*, puente Bootstrap y base tipográfica
   Movidos a app.css (design system). Este archivo ya no define
   tokens: solo consume var(--color-*) / var(--pc-*).
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# 4-5. Header y Sidebar
   Movidos a app.css (sección 6, shell). No redefinir aquí.
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# 6. Cards y KPI
--------------------------------------------------------------*/
.card {
  border: 1px solid var(--pc-border);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(var(--color-primary-900-rgb), 0.06);
}

.card-title {
  color: var(--pc-primary);
}

.card-title span {
  color: var(--pc-text-secondary);
}

.card-header,
.card-footer {
  border-color: var(--pc-border);
  color: var(--pc-text-secondary);
}

.accordion-button:not(.collapsed) {
  color: var(--pc-primary);
  background-color: var(--pc-surface-soft);
}

.accordion-flush .accordion-button:not(.collapsed) {
  color: var(--pc-primary);
}

/* Tabs Bootstrap genéricos: indicador de estado activo/hover discreto,
   reutilizando el color institucional (no aplica a .sidebar-nav .nav-link,
   que es un componente distinto ya resuelto en el bloque de navegación). */
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  color: var(--pc-primary);
}

.nav-tabs-bordered .nav-link:hover,
.nav-tabs-bordered .nav-link:focus {
  color: var(--pc-primary);
}

.nav-tabs-bordered .nav-link.active {
  color: var(--pc-primary);
  border-bottom: 2px solid var(--pc-primary);
}

/* KPI del dashboard: identidad institucional por defecto */
.dashboard .info-card h6 {
  color: var(--pc-primary);
}

.dashboard .sales-card .card-icon {
  color: var(--pc-primary);
  background: var(--color-primary-soft);
}

/* KPI semántico: informativo */
.dashboard .revenue-card .card-icon {
  color: var(--pc-info);
  background: var(--pc-info-bg);
}

/* KPI semántico: secundario institucional */
.dashboard .customers-card .card-icon {
  color: var(--color-secondary);
  background: #eef0fb;
}

.dashboard .filter .icon:hover,
.dashboard .filter .icon:focus {
  color: var(--pc-primary);
}

/* Desglose por estado dentro de la tarjeta de Cargas de trabajo */
.dashboard .carga-trabajo-total-label {
  display: block;
  font-size: 12px;
  color: var(--pc-muted, #6c757d);
  margin-top: 2px;
}

.dashboard .carga-trabajo-substats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--pc-border, #e6e9ee);
}

.dashboard .carga-trabajo-substat {
  flex: 1 1 140px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--pc-surface-soft, #f8f9fb);
}

.dashboard .carga-trabajo-substat__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.dashboard .carga-trabajo-substat__texto {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.dashboard .carga-trabajo-substat__valor {
  font-weight: 700;
  font-size: 16px;
  color: var(--pc-primary);
}

.dashboard .carga-trabajo-substat__label {
  font-size: 12px;
  color: var(--pc-muted, #6c757d);
}

.dashboard .carga-trabajo-substat--progreso .carga-trabajo-substat__icon {
  color: var(--pc-warning, #e0a800);
  background: var(--pc-warning-bg, #fdf2d8);
}

.dashboard .carga-trabajo-substat--gestion .carga-trabajo-substat__icon {
  color: var(--pc-info);
  background: var(--pc-info-bg);
}

.dashboard .carga-trabajo-substat--finalizado .carga-trabajo-substat__icon {
  color: var(--pc-success, #2eca6a);
  background: var(--pc-success-bg, #e0f8e9);
}

.dashboard .carga-trabajo-substat--clickable {
  position: relative;
  cursor: pointer;
  padding-right: 30px;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.dashboard .carga-trabajo-substat--clickable:hover,
.dashboard .carga-trabajo-substat--clickable:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-focus);
  outline: none;
}

.dashboard .carga-trabajo-substat__hint {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 12px;
  color: var(--pc-success, #2eca6a);
  opacity: 0.6;
}

.dashboard
  .carga-trabajo-substat--clickable:hover
  .carga-trabajo-substat__hint {
  opacity: 1;
}

.dashboard .carga-trabajo-centros-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--pc-border, #e6e9ee);
  background: var(--pc-surface-soft, #f8f9fb);
  color: var(--pc-primary);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.dashboard .carga-trabajo-centros-trigger:hover,
.dashboard .carga-trabajo-centros-trigger:focus-visible {
  background: var(--pc-info-bg);
  border-color: var(--pc-info);
  outline: none;
}

.dashboard .recent-sales .table thead,
.dashboard .top-selling .table thead {
  background: #f0f0f7;
}

.dashboard .activity .activite-label::before {
  background-color: var(--pc-border);
}

.dashboard .news h4 a {
  color: var(--pc-primary);
}

.dashboard .news h4 a:hover {
  color: var(--pc-600);
}

.faq .basic h6 {
  color: var(--pc-primary);
}

/*--------------------------------------------------------------
# 7. Botones — movido a app.css (sección 7).
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# 8-9. Tablas y badges de estado — movidos a app.css (secciones 9 y 10).
--------------------------------------------------------------*/
/* Indicadores laterales para KPI/tarjetas de estado */
.kpi-primary {
  border-left: 4px solid var(--pc-500);
}

.kpi-success {
  border-left: 4px solid var(--pc-success);
}

.kpi-warning {
  border-left: 4px solid var(--pc-warning);
}

.kpi-danger {
  border-left: 4px solid var(--pc-danger);
}

.kpi-info {
  border-left: 4px solid var(--pc-info);
}

/*--------------------------------------------------------------
# 10. Formularios — movido a app.css (sección 8, incluye Select2).
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# 11. Modales
--------------------------------------------------------------*/






.swal2-popup {
  border: 1px solid rgba(var(--color-primary-rgb), 0.1);
  box-shadow: var(--shadow-overlay);
  padding: 2rem 2rem 1.6rem;
}

.swal2-title {
  color: var(--pc-900);
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.swal2-html-container {
  color: var(--pc-text);
  font-size: var(--pc-font-md);
  line-height: 1.65;
}

.swal2-icon {
  margin-top: 0.35rem;
  margin-bottom: 1rem;
}

/* Iconos de estado alineados a la paleta semántica institucional */
.swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(46, 125, 91, 0.28) !important;
}

.swal2-icon.swal2-success [class^="swal2-success-line"] {
  background-color: var(--pc-success) !important;
}

.swal2-icon.swal2-error {
  border-color: var(--pc-danger) !important;
}

.swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
  background-color: var(--pc-danger) !important;
}

.swal2-icon.swal2-warning {
  border-color: var(--pc-warning) !important;
  color: var(--pc-warning) !important;
}

.swal2-icon.swal2-info {
  border-color: var(--pc-info) !important;
  color: var(--pc-info) !important;
}

.swal2-icon.swal2-question {
  border-color: var(--pc-primary) !important;
  color: var(--pc-primary) !important;
}

.swal2-confirm,
.swal2-cancel {
  font-weight: 500 !important;
  box-shadow: none !important;
  padding: 0.4375rem 0.85rem !important;
  font-size: var(--pc-font-md) !important;
}

.swal2-confirm {
  background: var(--pc-primary) !important;
}

.swal2-confirm:hover {
  background: var(--pc-primary-hover) !important;
}

.swal2-confirm:focus-visible,
.swal2-cancel:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.18) !important;
}

.swal2-cancel {
  background: var(--pc-50) !important;
  color: var(--pc-700) !important;
}

.swal2-actions {
  gap: 0.75rem;
}

.swal2-loader {
  border-color: var(--pc-500) transparent var(--pc-700) transparent !important;
}

.swal2-popup.swal2-project-modal {
  width: 780px !important;
  max-width: 92vw;
  padding: 2.2rem 2.6rem;
}

.swal2-popup.swal2-project-modal .swal2-title {
  margin-bottom: 0.9rem;
}

.swal2-popup.swal2-project-modal .swal2-html-container {
  margin: 0;
  padding: 0;
}

.project-alert-body {
  display: grid;
  gap: 1rem;
  text-align: left;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.project-alert-lead {
  margin: 0;
  color: var(--pc-text);
  font-size: 1.03rem;
}

.project-alert-highlight {
  display: grid;
  gap: 0.85rem;
  padding: 1.05rem 1.15rem;
  border: 1px solid var(--pc-200);
  border-radius: 7px;
  background: var(--pc-100);
}

.project-alert-row {
  display: grid;
  grid-template-columns: 22px 1px 1fr;
  gap: 0.85rem;
  align-items: center;
}

.project-alert-row i {
  color: var(--pc-600);
  font-size: 1.2rem;
  text-align: center;
}

.project-alert-divider {
  align-self: stretch;
  width: 1px;
  background: rgba(36, 52, 95, 0.22);
}

.project-alert-row-content {
  display: flex;
  flex-direction: column;
}

.project-alert-label {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--pc-text-secondary);
  font-size: var(--pc-font-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}

.project-alert-value {
  color: var(--pc-900);
  font-size: var(--pc-font-md);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.01em;
  word-break: break-word;
}

.project-alert-note-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.project-alert-icon-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 0.1rem;
  border-radius: 50%;
  background: var(--pc-500);
  color: #fff;
}

.project-alert-note {
  margin: 0;
  color: var(--pc-text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}

.project-alert-note strong {
  color: var(--pc-900);
}

.project-alert-note-muted {
  margin: 0;
  color: var(--pc-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

@media (max-width: 575px) {
  .swal2-popup {
    width: calc(100% - 1.5rem) !important;
    border-radius: var(--pc-radius-lg);
    padding: 1.5rem 1.1rem 1.2rem;
  }

  .swal2-title {
    font-size: 1.15rem;
  }
}

/*--------------------------------------------------------------
# 11-14. Modales base, alertas, dropdowns y paginación — en app.css
   (secciones 9 y 12). Aquí solo queda SweetAlert2 (arriba).
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# 15. Breadcrumbs
--------------------------------------------------------------*/
.breadcrumb {
  color: var(--pc-text-secondary);
}

.breadcrumb a {
  color: var(--color-accent);
}

.breadcrumb a:hover {
  color: var(--pc-primary-hover);
}

.breadcrumb .breadcrumb-item::before {
  color: var(--pc-text-secondary);
}

.breadcrumb .active {
  color: var(--pc-text);
}

/*--------------------------------------------------------------
# 16. Gráficos — paleta de referencia para series (uso vía JS de datos,
# no se modifica lógica; disponible como variables para futuras series)
--------------------------------------------------------------*/
:root {
  --pc-chart-1: var(--pc-500);
  --pc-chart-2: var(--pc-400);
  --pc-chart-3: var(--pc-300);
  --pc-chart-4: var(--pc-600);
  --pc-chart-5: var(--pc-700);
  --pc-chart-6: var(--pc-800);
  --pc-chart-7: var(--pc-900);
}

/*--------------------------------------------------------------
# 17. Otras vistas NiceAdmin
--------------------------------------------------------------*/
/* Error 404 */
.error-404 h1 {
  color: var(--pc-600);
}

.error-404 h2 {
  color: var(--pc-900);
}

.error-404 .btn {
  background: var(--pc-800);
}

.error-404 .btn:hover {
  background: var(--pc-900);
}

/* Footer */
.footer {
  border-top: 1px solid var(--pc-200);
}

body:not(.login-page) .footer {
  padding-inline: var(--pc-layout-gutter);
}

body:not(.login-page) .footer .copyright,
body:not(.login-page) .footer .credits {
  width: min(100%, var(--pc-layout-max));
  margin-inline: auto;
}

.footer .copyright,
.footer .credits {
  color: var(--pc-900);
}

/* Contacto */
.contact .info-box i {
  color: var(--pc-600);
}

.contact .info-box h3 {
  color: var(--pc-900);
}

/*--------------------------------------------------------------
# 18. Loader global de vistas
--------------------------------------------------------------*/
.view-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pc-background);
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

body.view-loaded .view-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.view-loader-ring {
  position: absolute;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 4px solid var(--pc-200);
  border-top-color: var(--pc-500);
  animation: view-loader-spin 0.9s linear infinite;
}

.view-loader-img {
  position: relative;
  width: 56px;
  height: 56px;
  object-fit: contain;
  animation: view-loader-pulse 1.4s ease-in-out infinite;
}

@keyframes view-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes view-loader-pulse {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .view-loader-ring,
  .view-loader-img {
    animation: none;
  }
}

/*--------------------------------------------------------------
# 19. Modo compacto (reduce paddings/márgenes del layout NiceAdmin)
--------------------------------------------------------------*/
/* Alto del header, ancho del menú y layout de #main: ver app.css (sección 6). */

.pagetitle {
  margin-bottom: var(--pc-space-2);
}

.pagetitle h1 {
  font-size: var(
    --pc-font-2xl
  ); /* 22px: 19px quedaba por debajo del rango
    de título principal (22-26px); el header fijo (56px) no lo comprime,
    porque el pagetitle vive en #main, debajo del header, sin restricción
    de altura. */
}

.breadcrumb {
  font-size: var(--pc-font-base);
  margin-bottom: 0;
}

/* Tarjetas */
.card {
  margin-bottom: var(--pc-space-4);
  border-radius: var(--pc-radius-md);
}

.card-header,
.card-footer {
  padding: 10px 14px;
}

.card-title {
  padding: 14px 0 10px 0;
  font-size: var(--pc-font-lg);
  font-weight: 600;
}

.card-body {
  padding: 0 var(--pc-space-4) var(--pc-space-4) var(--pc-space-4);
}

/* Tablas: ver app.css (sección 9). */
/* Formularios y botones: ver app.css (secciones 7 y 8). */

/*--------------------------------------------------------------
# 20. Toasts (Bootstrap 5 nativo, minimalistas y coloreados por estado)
--------------------------------------------------------------*/
/* Toasts vía SweetAlert2 (mixin `toast: true` en fireProjectToast(),
   common.js), estilo "colored toasts" del recipe gallery oficial:
   https://sweetalert2.github.io/recipe-gallery/colored-toasts.html
   El fondo se tiñe según el ícono (success/error/warning/info/question)
   con los colores de marca del proyecto. */
.pc-colored-toast {
  --pc-toast-accent: var(--pc-info);
  --pc-toast-surface: #ffffff;
  --pc-toast-border: var(--pc-border);
  --pc-toast-title: var(--pc-text);
  --pc-toast-body: var(--pc-text-secondary);
  min-width: 320px;
  max-width: 420px;
  padding: 0;
  border: 1px solid var(--pc-toast-border);
  border-left-width: 4px;
  border-left-color: var(--pc-toast-accent);
  border-radius: 0.75rem;
  background: var(--pc-toast-surface) !important;
  box-shadow: 0 0.5rem 1rem rgba(var(--color-primary-900-rgb), 0.15);
  color: var(--pc-toast-title);
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 0.75rem;
  overflow: hidden;
}

.pc-colored-toast.swal2-icon-success {
  --pc-toast-accent: var(--pc-success);
  --pc-toast-surface: var(--pc-success-bg);
  --pc-toast-border: rgba(25, 135, 84, 0.18);
  --pc-toast-title: var(--pc-success-text);
  --pc-toast-body: var(--pc-success-text);
}

.pc-colored-toast.swal2-icon-error {
  --pc-toast-accent: var(--pc-danger);
  --pc-toast-surface: var(--pc-danger-bg);
  --pc-toast-border: rgba(199, 62, 77, 0.18);
  --pc-toast-title: var(--pc-danger-text);
  --pc-toast-body: var(--pc-danger-text);
}

.pc-colored-toast.swal2-icon-warning {
  --pc-toast-accent: var(--pc-warning);
  --pc-toast-surface: var(--pc-warning-bg);
  --pc-toast-border: rgba(230, 167, 0, 0.2);
  --pc-toast-title: var(--pc-warning-text);
  --pc-toast-body: var(--pc-warning-text);
}

.pc-colored-toast.swal2-icon-info {
  --pc-toast-accent: var(--pc-info);
  --pc-toast-surface: var(--pc-info-bg);
  --pc-toast-border: rgba(49, 130, 206, 0.18);
  --pc-toast-title: var(--pc-info-text);
  --pc-toast-body: var(--pc-info-text);
}

.pc-colored-toast.swal2-icon-question {
  --pc-toast-accent: var(--pc-primary);
  --pc-toast-surface: var(--color-primary-soft);
  --pc-toast-border: rgba(var(--color-primary-rgb), 0.14);
  --pc-toast-title: var(--pc-primary);
  --pc-toast-body: var(--pc-primary);
}

.pc-colored-toast .swal2-title,
.pc-colored-toast .swal2-html-container,
.pc-colored-toast .swal2-close,
.pc-colored-toast .swal2-timer-progress-bar-container {
  color: inherit;
}

.pc-colored-toast .swal2-title {
  grid-column: 2;
  margin: 0;
  padding: 0.85rem 0 0.5rem;
  border-bottom: 1px solid rgba(82, 101, 143, 0.16);
  color: var(--pc-toast-title);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
}

.pc-colored-toast .swal2-html-container {
  grid-column: 2;
  margin: 0;
  padding: 0.65rem 0 0.85rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--pc-toast-body);
}

.pc-colored-toast .swal2-timer-progress-bar {
  height: 0.2rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pc-toast-accent) 78%, transparent);
}

.pc-colored-toast .swal2-icon {
  grid-column: 1;
  margin: 0.9rem 0 0 0.9rem;
  border-width: 2px;
  color: var(--pc-toast-accent);
  align-self: start;
}

.pc-colored-toast .swal2-icon .swal2-icon-content {
  color: inherit;
}

.pc-colored-toast.swal2-icon-success [class^="swal2-success-line"] {
  background-color: var(--pc-success);
}

.pc-colored-toast.swal2-icon-success .swal2-success-ring {
  border-color: rgba(25, 135, 84, 0.24);
}

.pc-colored-toast .swal2-x-mark-line {
  background-color: var(--pc-danger) !important;
}

.pc-colored-toast .swal2-icon.swal2-warning,
.pc-colored-toast .swal2-icon.swal2-info,
.pc-colored-toast .swal2-icon.swal2-question,
.pc-colored-toast .swal2-icon.swal2-error {
  border-color: currentColor;
}

.pc-colored-toast .swal2-close {
  grid-column: 3;
  position: static;
  align-self: start;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0.55rem 0.55rem 0 0;
  padding: 0;
  border-radius: 0.5rem;
  color: var(--pc-toast-title);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.pc-colored-toast .swal2-close:hover,
.pc-colored-toast .swal2-close:focus-visible {
  background: var(--pc-50);
  outline: 0;
}

.pc-colored-toast .swal2-timer-progress-bar-container {
  grid-column: 1 / -1;
  margin: 0;
  background: transparent;
}

@media (max-width: 575px) {
  .pc-colored-toast {
    min-width: 0;
    max-width: calc(100vw - 1.5rem);
  }
}

.project-toast-container {
  z-index: 1095;
}

.project-toast.toast {
  --project-toast-accent: var(--pc-info);
  --project-toast-surface: var(--pc-surface);
  --project-toast-border: var(--pc-border);
  --project-toast-title: #ffffff;
  --project-toast-body: var(--pc-text-secondary);
  --project-toast-glow: rgba(49, 130, 206, 0.18);
  --project-toast-header-bg: var(--pc-info);
  --project-toast-header-border: rgba(255, 255, 255, 0.16);
  --project-toast-time: rgba(255, 255, 255, 0.82);
  --project-toast-close-filter: brightness(0) invert(1);
  min-width: 320px;
  max-width: 420px;
  border: 1px solid var(--project-toast-border);
  border-left: 4px solid var(--project-toast-accent);
  border-radius: 0.75rem;
  background:
    var(--project-toast-surface);
  color: var(--project-toast-title);
  box-shadow:
    0 0.5rem 1rem rgba(var(--color-primary-900-rgb), 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.28) inset,
    0 0 0 0 var(--project-toast-glow);
  overflow: hidden;
  transform-origin: bottom right;
}

.project-toast.toast.project-toast--primary {
  --project-toast-accent: var(--pc-primary);
  --project-toast-surface: var(--color-primary-soft);
  --project-toast-border: rgba(var(--color-primary-rgb), 0.14);
  --project-toast-title: #ffffff;
  --project-toast-body: var(--pc-primary);
  --project-toast-glow: rgba(var(--color-primary-rgb), 0.18);
  --project-toast-header-bg: var(--pc-primary);
  --project-toast-time: rgba(255, 255, 255, 0.82);
  --project-toast-close-filter: brightness(0) invert(1);
}

.project-toast.toast.project-toast--success {
  --project-toast-accent: var(--pc-success);
  --project-toast-surface: #e7f5ee;
  --project-toast-border: rgba(25, 135, 84, 0.28);
  --project-toast-title: #ffffff;
  --project-toast-body: var(--pc-success-text);
  --project-toast-glow: rgba(25, 135, 84, 0.22);
  --project-toast-header-bg: var(--pc-success);
  --project-toast-time: rgba(255, 255, 255, 0.82);
  --project-toast-close-filter: brightness(0) invert(1);
}

.project-toast.toast.project-toast--danger {
  --project-toast-accent: var(--pc-danger);
  --project-toast-surface: #fbeaed;
  --project-toast-border: rgba(199, 62, 77, 0.28);
  --project-toast-title: #ffffff;
  --project-toast-body: var(--pc-danger-text);
  --project-toast-glow: rgba(199, 62, 77, 0.22);
  --project-toast-header-bg: var(--pc-danger);
  --project-toast-time: rgba(255, 255, 255, 0.82);
  --project-toast-close-filter: brightness(0) invert(1);
}

.project-toast.toast.project-toast--warning {
  --project-toast-accent: var(--pc-warning);
  --project-toast-surface: #fff6db;
  --project-toast-border: rgba(230, 167, 0, 0.3);
  --project-toast-title: #ffffff;
  --project-toast-body: var(--pc-warning-text);
  --project-toast-glow: rgba(230, 167, 0, 0.22);
  --project-toast-header-bg: var(--pc-warning);
  --project-toast-time: rgba(71, 45, 0, 0.76);
  --project-toast-close-filter: none;
}

.project-toast.toast.project-toast--info {
  --project-toast-accent: var(--pc-info);
  --project-toast-surface: #e8f2fb;
  --project-toast-border: rgba(49, 130, 206, 0.28);
  --project-toast-title: #ffffff;
  --project-toast-body: var(--pc-info-text);
  --project-toast-glow: rgba(49, 130, 206, 0.22);
  --project-toast-header-bg: var(--pc-info);
  --project-toast-time: rgba(255, 255, 255, 0.82);
  --project-toast-close-filter: brightness(0) invert(1);
}

.project-toast.toast:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow:
    0 1rem 2rem rgba(var(--color-primary-900-rgb), 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.34) inset,
    0 0 0 4px var(--project-toast-glow);
  filter: saturate(1.04);
}

/* El toast mantiene su posición (anclado abajo-derecha, .project-toast-
   container es bottom-0 end-0): al aparecer se desliza de derecha a
   izquierda hasta su lugar; al desaparecer recorre el mismo camino de
   izquierda a derecha. Bootstrap Toast solo alterna dos clases
   (.showing y .show) tanto para abrir como para cerrar, así que cada
   dirección toma su curva del propio estado de destino (mayor
   especificidad al combinarse) en vez de en .fade: al abrir, .showing
   se retira y gana la curva "rebote" de .show; al cerrar, .showing se
   reañade sobre .show y sus curvas propias (opacity más lenta y
   "ease-out", para que se desvanezca gradualmente) ganan por cascada. */
.project-toast.toast.fade {
  transition-property: opacity, transform, box-shadow;
  transition-duration: 0.38s;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.project-toast.toast.show {
  opacity: 1;
  transform: translateX(0);
  box-shadow:
    0 0.75rem 1.6rem rgba(var(--color-primary-900-rgb), 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.28) inset,
    0 0 0 0 var(--project-toast-glow);
}

/* .showing va DESPUÉS de .show a propósito: Bootstrap añade ambas
   clases juntas al abrir (aquí gana el estado oculto de .showing) y
   vuelve a añadir .showing sobre .show ya presente al cerrar (aquí
   .showing debe seguir ganando para que el cierre SÍ anime en vez de
   quedarse en los valores de .show hasta el corte final). Si este
   bloque se declara antes que .show, la cascada invierte quién gana en
   el estado combinado y el cierre deja de animarse.

   IMPORTANTE: Bootstrap Toast espera el PRIMER "transitionend" que
   llega del elemento (sin filtrar por propiedad) para dar el cierre
   por terminado y recién ahí quitar .show/.showing (lo que oculta el
   toast). Si aquí cada propiedad dura algo distinto, la más corta
   dispara ese primer transitionend y corta en seco a las demás a
   mitad de camino — por eso el fade se sentía "de golpe". Deben
   compartir la misma duración para que terminen juntas. */
.project-toast.toast.showing {
  opacity: 0;
  transform: translateX(48px);
  transition:
    opacity 0.42s ease-out,
    transform 0.42s cubic-bezier(0.4, 0, 1, 1),
    box-shadow 0.42s ease-out;
  box-shadow:
    0 0.1rem 0.2rem rgba(var(--color-primary-900-rgb), 0.03),
    0 0 0 1px rgba(255, 255, 255, 0.16) inset,
    0 0 0 0 var(--project-toast-glow);
}

.project-toast__header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 0.85rem 0.65rem;
  background: var(--project-toast-header-bg);
  border-bottom: 1px solid var(--project-toast-header-border);
}

.project-toast__badge {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 1.08rem;
  background:
    rgba(255, 255, 255, 0.24);
  color: #ffffff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0.35rem 0.7rem rgba(0, 0, 0, 0.12);
  animation: project-toast-badge-pulse 2.8s ease-in-out infinite;
}

.project-toast__title {
  color: var(--project-toast-title);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
}

.project-toast__time {
  color: var(--project-toast-time);
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.82;
}

.project-toast__close {
  margin-left: 0.1rem !important;
  border-radius: 0.45rem;
  background-size: 0.8rem;
  filter: var(--project-toast-close-filter);
  opacity: 0.65;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    background-color 0.2s ease;
}

.project-toast__close:hover,
.project-toast__close:focus-visible {
  transform: rotate(90deg);
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.45);
  box-shadow: none;
}

.project-toast__body {
  padding: 0.75rem 0.85rem 0.85rem;
  color: var(--pc-text-secondary);
  font-size: 0.83rem;
  line-height: 1.45;
}

.project-toast__body strong {
  color: var(--project-toast-body);
}

.project-toast .toast-body a {
  color: var(--project-toast-title);
  font-weight: 700;
}

.project-toast .toast-body a:hover {
  opacity: 0.82;
}

.project-toast .toast-body,
.project-toast .toast-header {
  position: relative;
  z-index: 1;
}

.project-toast .toast-body::before {
  content: none;
}

@keyframes project-toast-badge-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--project-toast-accent) 16%, white),
      0 0.35rem 0.7rem
        color-mix(in srgb, var(--project-toast-accent) 18%, transparent);
  }
  50% {
    transform: scale(1.06);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--project-toast-accent) 16%, white),
      0 0.5rem 1rem
        color-mix(in srgb, var(--project-toast-accent) 24%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-toast.toast,
  .project-toast__badge,
  .project-toast__close {
    animation: none;
    transition: none;
  }
}

@media (max-width: 575px) {
  .project-toast.toast {
    min-width: 0;
    max-width: calc(100vw - 1.5rem);
  }
}

/*--------------------------------------------------------------
# 21. Notificaciones del header (panel con BD + modal de aviso)
   Estructura y comportamiento tomados de CardioTrack (C:\laragon\www\proyecto):
   panel deslizante bajo la campana (HeaderNotificationsPanel, en
   vistas/src/common.js) más un modal de pantalla completa para avisos
   marcados como "desplegables" (ProjectBroadcastModal). El origen usaba su
   paleta teal/rojo (--ct-*); aquí todo se reexpresa con los tokens --pc-*
   institucionales + los semánticos --pc-success/--pc-warning/--pc-danger/--pc-info
   para no introducir una segunda identidad de color. El contador ya
   reutiliza .badge-number (sección 4); solo se completa su posicionamiento
   dentro del botón con badge (.has-badge).
--------------------------------------------------------------*/
.header-icon-btn.has-badge {
  position: relative;
}

.header-notifications-wrap {
  position: relative;
}

.header-notifications-overlay {
  position: fixed;
  top: var(--header-h);
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(var(--color-primary-rgb), 0.24);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    backdrop-filter 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1190;
}

.header-notifications-wrap.is-open .header-notifications-overlay {
  opacity: 1;
  pointer-events: auto;
}

.header-notifications-panel {
  position: fixed;
  top: var(--header-h);
  right: 0;
  width: min(400px, 100vw);
  height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  border: 0;
  border-left: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
  transform: translateX(calc(100% + 18px));
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1350;
}

.header-notifications-wrap.is-open .header-notifications-panel {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
  box-shadow: var(--shadow-overlay);
}

.header-notifications-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  background: var(--color-primary);
  flex-shrink: 0;
}

.header-notifications-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-size: 0.98rem;
  font-weight: 800;
}

.header-notifications-title i {
  font-size: 1rem;
}

.header-notifications-close {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.16s ease;
}

.header-notifications-close:hover,
.header-notifications-close:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  outline: 0;
}

.header-notifications-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--pc-border);
  flex-shrink: 0;
}

.header-notifications-bar__info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--pc-text);
  font-size: 0.77rem;
  font-weight: 700;
}

.header-notifications-bar__info i {
  color: var(--pc-primary);
  font-size: 0.8rem;
}

.header-notifications-mark-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--pc-border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--pc-text);
  font-size: 0.71rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.header-notifications-mark-all i {
  color: var(--pc-700);
  font-size: 0.8rem;
}

.header-notifications-mark-all:hover,
.header-notifications-mark-all:focus-visible {
  background: var(--color-primary-soft);
  border-color: var(--pc-300);
  outline: 0;
}

.header-notifications-mark-all.is-all-read {
  background: var(--color-primary);
  border-color: transparent;
  color: #ffffff;
}

.header-notifications-mark-all.is-all-read i {
  color: #ffffff;
}

.header-notifications-mark-all.is-all-read:hover,
.header-notifications-mark-all.is-all-read:focus-visible {
  background: var(--color-primary-800);
  border-color: transparent;
}

.header-notifications-mark-all:disabled {
  cursor: default;
  opacity: 1;
}

.header-notifications-list {
  display: grid;
  gap: 10px;
  padding: 12px;
  overflow-y: auto;
  flex: 1 1 auto;
  align-content: start;
  grid-auto-rows: max-content;
}

.header-notifications-empty {
  min-height: 148px;
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 18px;
  border-radius: 16px;
  border: 1px dashed var(--pc-border);
  color: var(--pc-text-secondary);
  text-align: center;
}

.header-notifications-empty i {
  font-size: 1.4rem;
  color: var(--pc-300);
}

/* Tarjetas: cada tono usa el par -bg/-text semántico en vez de un color
   fijo, así queda alineado con badges/alertas/toasts del resto del tema. */
.header-notification-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--pc-border);
  background: #ffffff;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease;
  cursor: pointer;
}

.header-notification-card:hover,
.header-notification-card:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-focus);
  outline: 0;
}

.header-notification-card--info {
  background: var(--pc-info-bg);
  border-color: var(--pc-info);
}
.header-notification-card--success {
  background: var(--pc-success-bg);
  border-color: var(--pc-success);
}
.header-notification-card--warning {
  background: var(--pc-warning-bg);
  border-color: var(--pc-warning);
}
.header-notification-card--danger {
  background: var(--pc-danger-bg);
  border-color: var(--pc-danger);
}
.header-notification-card.is-seen {
  background: var(--pc-neutral-bg);
  border-color: var(--pc-border);
  opacity: 0.72;
}

.header-notification-rail {
  display: flex;
  justify-content: center;
  padding-top: 2px;
}

.header-notification-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex: 0 0 40px;
  color: #ffffff;
}

.header-notification-card--info .header-notification-icon {
  background: var(--pc-info);
}
.header-notification-card--success .header-notification-icon {
  background: var(--pc-success);
}
.header-notification-card--warning .header-notification-icon {
  background: var(--pc-warning);
}
.header-notification-card--danger .header-notification-icon {
  background: var(--pc-danger);
}
.header-notification-card.is-seen .header-notification-icon {
  background: var(--pc-neutral-bg);
  color: var(--pc-neutral);
}

.header-notification-body {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.header-notification-meta {
  display: flex;
  align-items: center;
  gap: 5px;
}

.header-notification-badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #ffffff;
  flex-shrink: 0;
}

.header-notification-badge--info {
  background: var(--pc-info);
}
.header-notification-badge--success {
  background: var(--pc-success);
}
.header-notification-badge--warning {
  background: var(--pc-warning);
}
.header-notification-badge--danger {
  background: var(--pc-danger);
}

.header-notification-date {
  color: var(--pc-text-secondary);
  font-size: 0.68rem;
  font-weight: 500;
  flex: 1 1 auto;
  text-align: right;
  white-space: nowrap;
}

.header-notification-ack {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--pc-border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--pc-neutral);
  font-size: 0.76rem;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.14s ease,
    border-color 0.14s ease,
    color 0.14s ease;
}

.header-notification-ack:hover,
.header-notification-ack:focus-visible {
  background: var(--pc-success-bg);
  border-color: var(--pc-success);
  color: var(--pc-success-text);
  outline: 0;
}

.header-notification-ack-done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--pc-success-bg);
  color: var(--pc-success-text);
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

.header-notification-title {
  display: block;
  color: var(--pc-900);
  font-size: 0.81rem;
  font-weight: 800;
  line-height: 1.35;
}

.header-notification-card.is-seen .header-notification-title {
  color: var(--pc-text-secondary);
}

.header-notification-message {
  margin: 0;
  color: var(--pc-text);
  font-size: 0.77rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Al desplegar, el detalle reemplaza al resumen de 2 líneas (no se repite el texto). */
.header-notification-card.is-expanded .header-notification-preview {
  display: none;
}

.header-notification-card.is-expanded .header-notification-message--full {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.header-notification-card.is-seen .header-notification-message {
  color: var(--pc-text-secondary);
}

.header-notification-message > *:first-child {
  margin-top: 0;
}

.header-notification-message > *:last-child {
  margin-bottom: 0;
}

.header-notification-preview {
  min-width: 0;
}

.header-notification-detail {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  margin-top: 2px;
  border-top: 1px solid rgba(82, 101, 143, 0.18);
}

.header-notification-detail[hidden] {
  display: none !important;
}

.header-notification-message--full {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
  overflow: visible;
}

.header-notification-message p,
.project-broadcast-card__message p {
  margin: 0 0 0.45rem;
}

.header-notification-message ul,
.header-notification-message ol,
.project-broadcast-card__message ul,
.project-broadcast-card__message ol {
  margin: 0 0 0.5rem;
  padding-left: 1rem;
}

.header-notification-message li,
.project-broadcast-card__message li {
  margin-bottom: 0.25rem;
}

.header-notification-message strong,
.project-broadcast-card__message strong {
  font-weight: 700;
}

.header-notification-message a,
.project-broadcast-card__message a {
  color: var(--pc-600);
  font-weight: 600;
  text-decoration: underline;
}

/* Imágenes insertadas en el mensaje desde el editor del panel. */
.notif-mensaje-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0.4rem 0;
  border: 1px solid var(--pc-border);
  border-radius: 8px;
}

/* La vista previa de 2 líneas no muestra imágenes: solo el detalle. */
.header-notification-preview .notif-mensaje-img {
  display: none;
}

.header-notification-message ul + p,
.header-notification-message ol + p,
.project-broadcast-card__message ul + p,
.project-broadcast-card__message ol + p {
  margin-top: 0.55rem;
}

.header-notification-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--pc-600);
  font-size: 0.74rem;
  font-weight: 700;
  text-decoration: none;
}

.header-notification-link:hover,
.header-notification-link:focus-visible {
  color: var(--pc-800);
  text-decoration: underline;
  outline: 0;
}

/* Archivos adjuntos (campana, aviso emergente y bandeja del panel). */
.header-notification-adjuntos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0;
}

.header-notification-adjunto {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 3px 9px;
  border: 1px solid var(--pc-border);
  border-radius: 999px;
  background: var(--pc-50);
  color: var(--pc-800);
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.14s ease, border-color 0.14s ease;
}

.header-notification-adjunto span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
}

.header-notification-adjunto i {
  color: var(--pc-600);
}

.header-notification-adjunto:hover,
.header-notification-adjunto:focus-visible {
  border-color: var(--pc-600);
  background: var(--pc-100);
  color: var(--pc-900);
  outline: 0;
}

.header-notification-expand {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 6px 0 0;
  border: 0;
  background: transparent;
  color: var(--pc-neutral);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.14s ease;
}

.header-notification-expand i {
  transition: transform 0.2s ease;
}

.header-notification-card.is-expanded .header-notification-expand i {
  transform: rotate(180deg);
}

.header-notification-expand:hover {
  color: var(--pc-text);
}

body.project-notification-canvas-open {
  overflow: hidden;
}

.project-notification-canvas {
  position: fixed;
  inset: 0;
  z-index: 1800;
}

.project-notification-canvas__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 15, 35, 0.48);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.project-notification-canvas__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(100%, 540px);
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px 18px 18px;
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
  transform: translateX(100%);
  transition: transform 0.24s ease;
}

.project-notification-canvas.is-open .project-notification-canvas__backdrop {
  opacity: 1;
}

.project-notification-canvas.is-open .project-notification-canvas__panel {
  transform: translateX(0);
}

.project-notification-canvas__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.project-notification-canvas__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pc-700);
}

.project-notification-canvas__close {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pc-border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--pc-700);
}

.project-notification-canvas__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding-right: 4px;
}

.project-notification-canvas__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--pc-border);
  border-left: 6px solid var(--pc-info);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.project-notification-canvas__card--success {
  border-left-color: var(--pc-success);
}

.project-notification-canvas__card--warning {
  border-left-color: var(--pc-warning);
}

.project-notification-canvas__card--danger {
  border-left-color: var(--pc-danger);
}

.project-notification-canvas__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.project-notification-canvas__badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-notification-canvas__badge--info {
  background: var(--pc-info);
}

.project-notification-canvas__badge--success {
  background: var(--pc-success);
}

.project-notification-canvas__badge--warning {
  background: var(--pc-warning);
}

.project-notification-canvas__badge--danger {
  background: var(--pc-danger);
}

.project-notification-canvas__date {
  color: var(--pc-text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
}

.project-notification-canvas__title-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.project-notification-canvas__icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(42, 123, 155, 0.12);
  color: var(--pc-700);
  font-size: 1rem;
}

.project-notification-canvas__title {
  margin: 0;
  color: var(--pc-900);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.3;
}

.project-notification-canvas__message {
  color: var(--pc-text);
  font-size: 0.92rem;
  line-height: 1.7;
}

.project-notification-canvas__message > *:first-child {
  margin-top: 0;
}

.project-notification-canvas__message > *:last-child {
  margin-bottom: 0;
}

.project-notification-canvas__message p {
  margin: 0 0 0.7rem;
}

.project-notification-canvas__message ul,
.project-notification-canvas__message ol {
  margin: 0 0 0.8rem;
  padding-left: 1.1rem;
}

.project-notification-canvas__message li {
  margin-bottom: 0.35rem;
}

.project-notification-canvas__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--pc-50);
  color: var(--pc-700);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.project-notification-canvas__link:hover,
.project-notification-canvas__link:focus-visible,
.project-notification-canvas__close:hover,
.project-notification-canvas__close:focus-visible {
  background: var(--pc-100);
  color: var(--pc-900);
  outline: 0;
}

@media (max-width: 575.98px) {
  .project-notification-canvas__panel {
    width: 100%;
    padding: 16px 14px 14px;
  }

  .project-notification-canvas__card {
    padding: 16px;
    border-radius: 18px;
  }
}

.header-notifications-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 16px;
  border-top: 1px solid var(--pc-border);
  flex-shrink: 0;
}

.header-notifications-foot__updated {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--pc-text-secondary);
  font-size: 0.68rem;
}

.header-notifications-foot__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--pc-success);
  flex-shrink: 0;
}

.header-notifications-foot__brand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--pc-text-secondary);
  font-size: 0.68rem;
  font-weight: 600;
}

.header-notifications-foot__brand i {
  color: var(--pc-primary);
  font-size: 0.76rem;
}

/* Pantalla completa solo en teléfonos; en tablet sigue siendo panel lateral. */
@media (max-width: 575.98px) {
  .header-notifications-panel {
    width: 100vw;
    border-left: 0;
  }
}

/* ---- Modal de difusión (avisos "desplegables") ----
   Portado de ProjectBroadcastModal (vistas/src/common.js): construye su
   propio DOM en document.body la primera vez que se muestra, así que estas
   reglas no dependen de ningún scaffold presente en las vistas PHP. */
body.project-broadcast-modal-open {
  overflow: hidden;
}

.project-broadcast-modal {
  position: fixed;
  inset: 0;
  z-index: 1380;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.project-broadcast-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.project-broadcast-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--color-primary-rgb), 0.24);
  backdrop-filter: blur(2px);
}

.project-broadcast-modal__dialog {
  position: relative;
  width: min(620px, 100%);
  max-height: min(90vh, 720px);
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  border: 1px solid var(--pc-border);
  background: #ffffff;
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
  transform: scale(0.96) translateY(8px);
  transition: transform 0.22s ease;
}

.project-broadcast-modal.is-open .project-broadcast-modal__dialog {
  transform: scale(1) translateY(0);
}

.project-broadcast-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 72px;
  padding: 16px 20px;
  background: var(--color-primary);
  flex-shrink: 0;
}

.project-broadcast-modal__title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
}

.project-broadcast-modal__title i {
  font-size: 1rem;
}

.project-broadcast-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1rem;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease;
}

.project-broadcast-modal__close:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
}

.project-broadcast-modal__body {
  display: grid;
  gap: 12px;
  padding: 14px 14px 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.project-broadcast-modal__body::-webkit-scrollbar {
  width: 8px;
}
.project-broadcast-modal__body::-webkit-scrollbar-thumb {
  background: rgba(var(--color-primary-rgb), 0.22);
  border-radius: 999px;
  border: 2px solid #ffffff;
}
.project-broadcast-modal__body::-webkit-scrollbar-track {
  background: transparent;
}

.project-broadcast-modal__footer {
  display: flex;
  gap: 8px;
  padding: 12px 14px 14px;
  background: #ffffff;
  border-top: 1px solid var(--pc-border);
  flex-shrink: 0;
}

.project-broadcast-modal__action {
  flex: 1 1 0;
  min-height: 42px;
  border-radius: 12px;
  font-size: 0.84rem;
  font-weight: 800;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

.project-broadcast-modal__action--primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: none;
}

.project-broadcast-modal__action--primary:hover {
  background: var(--color-primary-700);
  color: #fff;
}

.project-broadcast-modal__action--secondary {
  background: #ffffff;
  border-color: var(--pc-300);
  color: var(--pc-700);
}

.project-broadcast-modal__action--secondary:hover {
  background: var(--color-primary-soft);
  color: var(--pc-800);
}

.project-broadcast-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--pc-warning);
  background: var(--pc-warning-bg);
  align-items: flex-start;
}

.project-broadcast-card--info {
  border-color: var(--pc-info);
  background: var(--pc-info-bg);
}
.project-broadcast-card--success {
  border-color: var(--pc-success);
  background: var(--pc-success-bg);
}
.project-broadcast-card--warning {
  border-color: var(--pc-warning);
  background: var(--pc-warning-bg);
}
.project-broadcast-card--danger {
  border-color: var(--pc-danger);
  background: var(--pc-danger-bg);
}

.project-broadcast-card__rail {
  display: flex;
  justify-content: center;
  padding-top: 4px;
}

.project-broadcast-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  background: var(--pc-warning);
  color: #ffffff;
}

.project-broadcast-card--info .project-broadcast-card__icon {
  background: var(--pc-info);
}
.project-broadcast-card--success .project-broadcast-card__icon {
  background: var(--pc-success);
}
.project-broadcast-card--warning .project-broadcast-card__icon {
  background: var(--pc-warning);
}
.project-broadcast-card--danger .project-broadcast-card__icon {
  background: var(--pc-danger);
}

.project-broadcast-card__content {
  display: grid;
  gap: 8px;
}

.project-broadcast-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.project-broadcast-card__badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--pc-warning);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-broadcast-card__badge--info {
  background: var(--pc-info);
}
.project-broadcast-card__badge--success {
  background: var(--pc-success);
}
.project-broadcast-card__badge--warning {
  background: var(--pc-warning);
}
.project-broadcast-card__badge--danger {
  background: var(--pc-danger);
}

.project-broadcast-card__date {
  color: var(--pc-text-secondary);
  font-size: 0.7rem;
  font-weight: 600;
}

.project-broadcast-card__title {
  margin: 0;
  color: var(--pc-900);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.project-broadcast-card__message {
  margin: 0;
  color: var(--pc-text);
  font-size: 0.86rem;
  line-height: 1.62;
  word-break: break-word;
}

.project-broadcast-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--pc-600);
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
}

.project-broadcast-card__link:hover,
.project-broadcast-card__link:focus-visible {
  color: var(--pc-800);
  text-decoration: underline;
  outline: 0;
}

@media (max-width: 480px) {
  .project-broadcast-modal {
    padding: 12px;
    align-items: flex-end;
  }
  .project-broadcast-modal__dialog {
    border-radius: 20px 20px 12px 12px;
    max-height: 88vh;
  }
  .project-broadcast-card {
    grid-template-columns: 1fr;
  }
  .project-broadcast-card__rail {
    justify-content: flex-start;
    padding-top: 0;
  }
  .project-broadcast-modal__footer {
    flex-direction: column-reverse;
  }
}