:root {
    /* === PALETA DE COLORES OFICIAL === */
    
    /* Colores principales basados en la paleta */
    --primary: #19BCB9;           /* Aqua principal */
    --primary-hover: #15A3A1;     /* Aqua hover */
    --primary-dark: #0D6D6B;      /* Aqua oscuro */
    
    --secondary: #2A7B9B;         /* Azul petróleo (para botones) */
    --secondary-hover: #205E75;   /* Azul petróleo hover */
    --secondary-dark: #1A4A5F;    /* Azul petróleo oscuro */
    
    --info: #6CCBD2;              /* Turquesa claro (btn-info_4) */
    --info-hover: #4EA3A8;        /* Turquesa hover */
    --info-dark: #3A7D82;         /* Turquesa oscuro */
    
    --success: #A1D40B;           /* Verde lima (aceptar) */
    --success-hover: #7CA80A;     /* Verde lima hover */
    --success-dark: #5D7907;      /* Verde lima oscuro */
    
    --warning: #CCE4E9;           /* Azul grisáceo claro (btn-info_2) */
    --warning-hover: #B0D4DB;     /* Azul grisáceo hover */
    --warning-dark: #94C4CD;      /* Azul grisáceo oscuro */
    
    --danger: #F55503;            /* Naranja (rechazar/cancelar) */
    --danger-hover: #C24402;      /* Naranja hover */
    --danger-dark: #8F3302;       /* Naranja oscuro */
    
    --critical: #000000;          /* Negro (eliminar) */
    --critical-hover: #333333;    /* Negro hover */
    --critical-dark: #1a1a1a;     /* Negro oscuro */
    
    --light: #F0F4F9;             /* Gris azulado muy claro (btn-info_0) */
    --light-hover: #D1DFEA;       /* Gris azulado hover */
    --light-dark: #B2CDDE;        /* Gris azulado oscuro */
    
    /* Variaciones rgba para transparencias */
    --rgba-primary-1: rgba(25, 188, 185, 0.1);
    --rgba-primary-2: rgba(25, 188, 185, 0.2);
    --rgba-primary-3: rgba(25, 188, 185, 0.3);
    --rgba-primary-4: rgba(25, 188, 185, 0.4);
    --rgba-primary-5: rgba(25, 188, 185, 0.5);
    --rgba-primary-6: rgba(25, 188, 185, 0.6);
    --rgba-primary-7: rgba(25, 188, 185, 0.7);
    --rgba-primary-8: rgba(25, 188, 185, 0.8);
    --rgba-primary-9: rgba(25, 188, 185, 0.9);
    
    --rgba-secondary-1: rgba(42, 123, 155, 0.1);
    --rgba-secondary-2: rgba(42, 123, 155, 0.2);
    --rgba-secondary-3: rgba(42, 123, 155, 0.3);
    --rgba-secondary-4: rgba(42, 123, 155, 0.4);
    --rgba-secondary-5: rgba(42, 123, 155, 0.5);
    
    --rgba-danger-1: rgba(245, 85, 3, 0.1);
    --rgba-danger-2: rgba(245, 85, 3, 0.2);
    --rgba-danger-3: rgba(245, 85, 3, 0.3);
    --rgba-danger-4: rgba(245, 85, 3, 0.4);
    --rgba-danger-5: rgba(245, 85, 3, 0.5);
  }
  
  /* === SOBRESCRITURAS DE BOOTSTRAP === */
  
  /* Botones principales */
.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}
  
  .btn-primary:hover,
  .btn-primary:focus,
  .btn-primary:active,
  .btn-primary.active {
      background-color: var(--primary-hover) !important;
      border-color: var(--primary-hover) !important;
      color: white !important;
  }
  
  .btn-primary:disabled {
      background-color: var(--rgba-primary-5) !important;
      border-color: var(--rgba-primary-5) !important;
  }

  /* Estandarización de botones pequeños */
  .btn-sm {
      height: 30px !important;
      padding: 0.25rem 0.75rem !important;
      font-size: 0.875rem !important;
      line-height: 1.3 !important;
      border-radius: 0.25rem !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
  }
  
  /* Botones secundarios */
  .btn-secondary {
      background-color: var(--secondary) !important;
      border-color: var(--secondary) !important;
      color: white !important;
  }
  
  .btn-secondary:hover,
  .btn-secondary:focus,
  .btn-secondary:active,
  .btn-secondary.active {
      background-color: var(--secondary-hover) !important;
      border-color: var(--secondary-hover) !important;
      color: white !important;
  }
  
  /* Botones de información */
  .btn-info {
      background-color: var(--info) !important;
      border-color: var(--info) !important;
      color: white !important;
  }
  
  .btn-info:hover,
  .btn-info:focus,
  .btn-info:active,
  .btn-info.active {
      background-color: var(--info-hover) !important;
      border-color: var(--info-hover) !important;
      color: white !important;
  }
  
  /* Botones de éxito */
  .btn-success {
      background-color: var(--success) !important;
      border-color: var(--success) !important;
      color: white !important;
  }
  
  .btn-success:hover,
  .btn-success:focus,
  .btn-success:active,
  .btn-success.active {
      background-color: var(--success-hover) !important;
      border-color: var(--success-hover) !important;
      color: white !important;
  }
  
  /* Botones de advertencia */
  .btn-warning {
      background-color: var(--warning) !important;
      border-color: var(--warning) !important;
      color: #666666 !important;
  }
  
  .btn-warning:hover,
  .btn-warning:focus,
  .btn-warning:active,
  .btn-warning.active {
      background-color: var(--warning-hover) !important;
      border-color: var(--warning-hover) !important;
      color: #666666 !important;
  }
  
  /* Botones de peligro */
  .btn-danger {
      background-color: var(--danger) !important;
      border-color: var(--danger) !important;
      color: white !important;
  }
  
  .btn-danger:hover,
  .btn-danger:focus,
  .btn-danger:active,
  .btn-danger.active {
      background-color: var(--danger-hover) !important;
      border-color: var(--danger-hover) !important;
      color: white !important;
  }
  
  /* Botones claros */
  .btn-light {
      background-color: var(--light) !important;
      border-color: var(--light) !important;
      color: #888888 !important;
  }
  
  .btn-light:hover,
  .btn-light:focus,
  .btn-light:active,
  .btn-light.active {
      background-color: var(--light-hover) !important;
      border-color: var(--light-hover) !important;
      color: #888888 !important;
  }
  
  /* === BOTONES OUTLINE === */
  .btn-outline-primary {
      color: var(--primary) !important;
      border-color: var(--primary) !important;
  }
  
  .btn-outline-primary:hover,
  .btn-outline-primary:focus,
  .btn-outline-primary:active {
      background-color: var(--primary) !important;
      border-color: var(--primary) !important;
      color: white !important;
  }
  
  .btn-outline-secondary {
      color: var(--secondary) !important;
      border-color: var(--secondary) !important;
  }
  
  .btn-outline-secondary:hover,
  .btn-outline-secondary:focus,
  .btn-outline-secondary:active {
      background-color: var(--secondary) !important;
      border-color: var(--secondary) !important;
      color: white !important;
  }
  
  .btn-outline-info {
      color: var(--info) !important;
      border-color: var(--info) !important;
  }
  
  .btn-outline-info:hover,
  .btn-outline-info:focus,
  .btn-outline-info:active {
      background-color: var(--info) !important;
      border-color: var(--info) !important;
      color: white !important;
  }
  
  .btn-outline-success {
      color: var(--success) !important;
      border-color: var(--success) !important;
  }
  
  .btn-outline-success:hover,
  .btn-outline-success:focus,
  .btn-outline-success:active {
      background-color: var(--success) !important;
      border-color: var(--success) !important;
      color: white !important;
  }
  
  .btn-outline-danger {
      color: var(--danger) !important;
      border-color: var(--danger) !important;
  }
  
  .btn-outline-danger:hover,
  .btn-outline-danger:focus,
  .btn-outline-danger:active {
      background-color: var(--danger) !important;
      border-color: var(--danger) !important;
      color: white !important;
  }
  
  /* === ALERTS/ALERTAS === */
  .alert-primary {
      background-color: var(--rgba-primary-1) !important;
      border-color: var(--rgba-primary-3) !important;
      color: var(--primary-dark) !important;
  }
  
  .alert-secondary {
      background-color: var(--rgba-secondary-1) !important;
      border-color: var(--rgba-secondary-3) !important;
      color: var(--secondary-dark) !important;
  }
  
  .alert-info {
      background-color: var(--rgba-primary-1) !important;
      border-color: var(--rgba-primary-3) !important;
      color: var(--info-dark) !important;
  }
  
  .alert-success {
      background-color: rgba(161, 212, 11, 0.1) !important;
      border-color: rgba(161, 212, 11, 0.3) !important;
      color: var(--success-dark) !important;
  }
  
  .alert-warning {
      background-color: rgba(204, 228, 233, 0.3) !important;
      border-color: rgba(204, 228, 233, 0.5) !important;
      color: #666666 !important;
  }
  
  .alert-danger {
      background-color: var(--rgba-danger-1) !important;
      border-color: var(--rgba-danger-3) !important;
      color: var(--danger-dark) !important;
  }
  
  /* === BADGES/ETIQUETAS === */
  .badge-primary {
      background-color: var(--primary) !important;
      color: white !important;
  }
  
  .badge-secondary {
      background-color: var(--secondary) !important;
      color: white !important;
  }
  
  .badge-info {
      background-color: var(--info) !important;
      color: white !important;
  }
  
  .badge-success {
      background-color: var(--success) !important;
      color: white !important;
  }
  
  .badge-warning {
      background-color: var(--warning) !important;
      color: #666666 !important;
  }
  
  .badge-danger {
      background-color: var(--danger) !important;
      color: white !important;
  }
  
  /* === CONTROLES DE FORMULARIO === */
  
  /* Checkboxes */
  .form-check-input:checked {
      background-color: var(--primary) !important;
      border-color: var(--primary) !important;
  }
  
  .form-check-input:focus {
      border-color: var(--primary-hover) !important;
      box-shadow: 0 0 0 0.25rem var(--rgba-primary-2) !important;
  }
  
  /* Radio buttons */
  .form-check-input[type="radio"]:checked {
      background-color: var(--primary) !important;
      border-color: var(--primary) !important;
  }
  
  /* Form controls focus */
  .form-control:focus,
  .form-select:focus {
      border-color: var(--primary) !important;
      box-shadow: 0 0 0 0.25rem var(--rgba-primary-2) !important;
  }
  
  /* === LINKS/ENLACES === */
  /* Removemos las reglas generales de enlaces para no afectar textos y títulos */
  /* Solo aplicamos colores específicos donde sea necesario */
  
  /* Enlaces en contextos específicos donde queremos el color primary */
  .btn-link {
      color: var(--primary) !important;
  }
  
  .btn-link:hover {
      color: var(--primary-hover) !important;
  }
  
  /* Enlaces en cards y componentes específicos */
  .card a:not(.btn):not(.nav-link):not(.breadcrumb-item a):not(.dropdown-item) {
      color: var(--primary) !important;
  }
  
  .card a:not(.btn):not(.nav-link):not(.breadcrumb-item a):not(.dropdown-item):hover {
      color: var(--primary-hover) !important;
  }
  
  /* === PROGRESS BARS === */
  .progress-bar {
      background-color: var(--primary) !important;
  }
  
  .progress-bar-striped {
      background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
  }
  
  /* === PAGINACIÓN === */
  .pagination .page-link {
      color: var(--primary) !important;
  }
  
  .pagination .page-link:hover {
      color: var(--primary-hover) !important;
      background-color: var(--rgba-primary-1) !important;
      border-color: var(--primary) !important;
  }
  
  .pagination .page-item.active .page-link {
      background-color: var(--primary) !important;
      border-color: var(--primary) !important;
      color: white !important;
  }
  
  /* === TABS === */
  .nav-tabs .nav-link.active {
      color: var(--primary) !important;
      border-color: #dee2e6 #dee2e6 var(--primary) !important;
  }
  
  .nav-tabs .nav-link:hover {
      color: var(--primary-hover) !important;
  }
  
  .nav-pills .nav-link.active {
      background-color: var(--primary) !important;
  }
  
  .nav-pills .nav-link:hover {
      color: var(--primary-hover) !important;
  }
  
  /* === DROPDOWNS === */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--rgba-primary-1) !important;
    color: var(--primary-dark) !important;
}

.dropdown-item.active {
    background-color: var(--primary) !important;
    color: white !important;
}

/* Elemento eliminar específico */
.dropdown-item.text-danger {
    color: #3f3f3f !important;
}

.dropdown-item.text-danger:hover,
.dropdown-item.text-danger:focus {
    background-color: transparent !important;
    color: #F55503 !important;
}
  
  /* === TOASTS/NOTIFICACIONES === */
  .toast-header {
      background-color: var(--rgba-primary-1) !important;
  }
  
  /* === SPINNERS === */
  .spinner-border-primary {
      color: var(--primary) !important;
  }
  
  .spinner-grow-primary {
      color: var(--primary) !important;
  }
  
  /* === BORDERS === */
  .border-primary {
      border-color: var(--primary) !important;
  }
  
  .border-secondary {
      border-color: var(--secondary) !important;
  }
  
  .border-success {
      border-color: var(--success) !important;
  }
  
  .border-info {
      border-color: var(--info) !important;
  }
  
  .border-warning {
      border-color: var(--warning) !important;
  }
  
  .border-danger {
      border-color: var(--danger) !important;
  }
  
  /* === COLORES DE TEXTO === */
  /* Solo aplicamos a clases específicas de Bootstrap, no a elementos generales */
  .text-primary {
      color: var(--primary) !important;
  }
  
  .text-secondary {
      color: #656565!important;
  }

  /* Elementos específicos con color gris oscuro */
  p.mb-0 {
      color: #656565 !important;
  }

  .bc-title h5 {
      color: #202020 !important;
  }
  
  .text-success {
      color: var(--success) !important;
  }
  
  .text-info {
      color: var(--info) !important;
  }
  
  .text-warning {
      color: #666666 !important;
  }
  
  .text-danger {
      color: var(--danger) !important;
  }
  
  /* Exclusiones para preservar estilos originales */
  .page-titles * {
      color: inherit !important;
  }
  
  .breadcrumb-item a {
      color: inherit !important;
  }
  
  .bc-title {
      color: inherit !important;
  }
  
  /* === COLORES DE FONDO === */
  .bg-primary {
      background-color: var(--primary) !important;
  }
  
  .bg-secondary {
      background-color: var(--secondary) !important;
  }
  
  .bg-success {
      background-color: var(--success) !important;
  }
  
  .bg-info {
      background-color: var(--info) !important;
  }
  
  .bg-warning {
      background-color: var(--warning) !important;
  }
  
  .bg-danger {
      background-color: var(--danger) !important;
  }
  
  .bg-light {
      background-color: var(--light) !important;
  }
  
  /* === UTILIDADES ADICIONALES === */
  
  /* Clases específicas de la plataforma */
  .btn-aceptar {
      background-color: var(--success) !important;
      border-color: var(--success) !important;
      color: white !important;
  }
  
  .btn-aceptar:hover {
      background-color: var(--success-hover) !important;
      border-color: var(--success-hover) !important;
      color: white !important;
  }
  
  .btn-critical {
      background-color: var(--critical) !important;
      border-color: var(--critical) !important;
      color: white !important;
  }
  
  .btn-critical:hover {
      background-color: var(--critical-hover) !important;
      border-color: var(--critical-hover) !important;
      color: white !important;
  }
  
  /* Sobrescritura de elementos específicos del template */
  .card-header.bg-primary {
      background-color: var(--primary) !important;
  }
  
  .list-group-item.active {
      background-color: var(--primary) !important;
      border-color: var(--primary) !important;
  }
  
  /* === COMPATIBILIDAD CON ELEMENTOS EXISTENTES === */
  
  /* Para mantener compatibilidad con estilos ya definidos */
  .custom-color-button-login {
      background-color: var(--primary) !important;
      border-color: var(--primary) !important;
  }
  
  .custom-color-button-login:hover {
      background-color: var(--primary-hover) !important;
      border-color: var(--primary-hover) !important;
  }
  
  /* === PRESERVAR COLORES ORIGINALES EN CONTEXTOS ESPECÍFICOS === */
  
  /* Preservar colores originales en navegación y títulos */
  .nav-header *,
  .header *,
  .page-titles *,
  .breadcrumb *,
  .deznav * {
      color: inherit !important;
  }
  
  /* Preservar iconos en botones - no forzar colores */
  .btn i,
  .btn svg,
  .btn .fa,
  .btn .fas,
  .btn .far,
  .btn .fab {
      color: inherit;
  }
  
  /* Preservar colores de texto en elementos de navegación lateral */
  .dlabnav-scroll .metismenu a,
  .dlabnav-scroll .metismenu li,
  .menu-tabs .nav-link {
      color: inherit !important;
  }
  
  /* Preservar colores en dropdowns del template original */
  .dropdown-menu .dropdown-item {
      color: inherit;
  }
  
  /* Solo aplicar nuestros colores primary en contextos muy específicos */
  .content-body .card a.text-primary,
  .content-body .alert a,
  .table a.text-primary {
      color: var(--primary) !important;
  }

  /* === AJUSTES ESPECÍFICOS PARA EVENTO CARTEL === */
  /* Ajustar espaciado entre tipo de evento y título - SOLO en evento cartel */
  .evento-cartel .event-image-container + .card-header,
  .evento-cartel .card .card-header {
      margin-top: -18px !important;
      padding-top: 10px !important;
  }

  /* Agregar margen superior y padding al tipo de evento - SOLO en evento cartel */
  .evento-cartel .card > div:first-child {
      padding-left: 5px !important;
      padding-right: 15px !important;
  }

  .evento-cartel .card > div:first-child h5 {
      margin-top: 15px !important;
      margin-bottom: 5px !important;
  }

  /* === SISTEMA DE NOTIFICACIONES TOAST EMERGENTES === */

  /* Notificaciones flotantes con position-fixed */
  .alert.position-fixed {
      /* Base limpia y minimalista */
      background: #f0f9f0 !important; /* Fondo suave por defecto (éxito) */
      border: none !important;
      border-left: 4px solid var(--success) !important; /* Barra lateral izquierda */
      color: #2d5a2d !important; /* Texto oscuro para contraste */
      
      /* Diseño minimalista */
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
      border-radius: 4px !important;
      padding: 1rem 1.5rem !important;
      
      /* Animación suave */
      transition: all 0.3s ease-in-out !important;
      animation: slideInFromRight 0.5s ease-out;
      
      /* Tipografía limpia */
      font-weight: 400 !important;
      font-size: 14px !important;
      line-height: 1.4 !important;
  }

  /* Variaciones por tipo de alerta - Estilo minimalista con barra lateral */
  .alert-success.position-fixed {
      background: #f0f9f0 !important; /* Fondo suave verde lima */
      border-left-color: var(--success) !important; /* Barra verde lima */
      color: #2d5a2d !important; /* Texto verde oscuro */
  }

  .alert-info.position-fixed {
      background: #f0f8f9 !important; /* Fondo suave turquesa */
      border-left-color: var(--info) !important; /* Barra turquesa */
      color: #1a4a4d !important; /* Texto turquesa oscuro */
  }

  .alert-warning.position-fixed {
      background: #f8fbfc !important; /* Fondo suave azul grisáceo */
      border-left-color: var(--warning) !important; /* Barra azul grisáceo */
      color: #4a5568 !important; /* Texto gris oscuro */
  }

  .alert-danger.position-fixed {
      background: #fef5f0 !important; /* Fondo suave naranja */
      border-left-color: var(--danger) !important; /* Barra naranja */
      color: #7c2d12 !important; /* Texto naranja oscuro */
  }

  .alert-primary.position-fixed {
      background: #f0f8f8 !important; /* Fondo suave aqua */
      border-left-color: var(--primary) !important; /* Barra aqua */
      color: #0d4748 !important; /* Texto aqua oscuro */
  }

  /* Estilos para el contenido - más minimalista */
  .alert.position-fixed strong {
      color: inherit !important;
      font-weight: 600 !important;
      display: block !important;
      margin-bottom: 4px !important;
  }

  .alert.position-fixed i {
      display: none !important; /* Ocultar iconos para diseño más limpio */
  }

  /* Botón de cerrar minimalista */
  .alert.position-fixed .btn-close {
      background: none !important;
      border: none !important;
      width: 20px !important;
      height: 20px !important;
      padding: 0 !important;
      opacity: 0.6 !important;
      transition: opacity 0.3s ease !important;
      color: currentColor !important;
  }

  .alert.position-fixed .btn-close:hover {
      opacity: 1 !important;
      background: rgba(0, 0, 0, 0.05) !important;
      border-radius: 3px !important;
  }

  .alert.position-fixed .btn-close:focus {
      box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1) !important;
      outline: none !important;
  }

  /* Animación de entrada */
  @keyframes slideInFromRight {
      0% {
          transform: translateX(100%);
          opacity: 0;
      }
      100% {
          transform: translateX(0);
          opacity: 1;
      }
  }

  /* Animación de salida */
  .alert.position-fixed.fade {
      transition: all 0.3s ease-out;
  }

  .alert.position-fixed.fade:not(.show) {
      transform: translateX(100%);
      opacity: 0;
  }

  /* Hover effect minimalista */
  .alert.position-fixed:hover {
      transform: translateX(-2px) !important;
      box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15) !important;
  }

  /* Responsivo para dispositivos móviles */
  @media (max-width: 768px) {
      .alert.position-fixed {
          left: 10px !important;
          right: 10px !important;
          max-width: none !important;
          width: calc(100% - 20px) !important;
          top: 10px !important;
      }
  }

  /* Estado de carga/actualización */
  .alert.position-fixed .spinner-border {
      width: 1rem !important;
      height: 1rem !important;
      border-width: 0.125em !important;
      color: currentColor !important;
      opacity: 0.7 !important;
  }

  /* Texto de notificaciones - colores según el tipo */
  .alert.position-fixed small {
      color: inherit !important;
      opacity: 0.8 !important;
      font-size: 12px !important;
      display: block !important;
      margin-top: 2px !important;
  }

  /* === FIN SISTEMA DE NOTIFICACIONES TOAST === */