/* =============================================
   ESTILOS DE DIRECCIÓN DE PROYECTOS - PALETA AZUL
   ============================================= */

/* Variables de colores azules de la plataforma */
:root {
  --maya-blue: #7FD9FF;      /* Azul Maya - Principal */
  --maya-medium: #6D9BFF;    /* Azul Maya Medio */
  --maya-light: #7AD2FF;     /* Azul Maya Claro */
  --petrol-blue: #102840;    /* Azul Petróleo - Oscuro */
  --petrol-medium: #1C4C6E;  /* Azul Petróleo Medio */
  --maya-bg: #F5FAFF;        /* Fondo Azul Maya muy tenue */
}

/* =============================================
   HEADER PRINCIPAL DEL PROYECTO
   ============================================= */

/* Header con gradiente azul Maya */
.card-header.bg-gradient-primary {
  background: linear-gradient(135deg, var(--maya-blue) 0%, var(--maya-medium) 100%) !important;
  border: none !important;
  color: white !important;
}

/* Título del proyecto */
.card-header h3 {
  color: white !important;
  font-weight: 600 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Icono del proyecto */
.card-header .fas.fa-project-diagram {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Badge de estado */
.card-header .badge {
  background: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  font-weight: 500 !important;
}

/* =============================================
   BOTONES DE ACCIÓN
   ============================================= */

/* Botón Volver */
.btn-outline-secondary {
  border-color: var(--petrol-blue) !important;
  color: var(--petrol-blue) !important;
  background: transparent !important;
}

.btn-outline-secondary:hover {
  background: var(--petrol-blue) !important;
  color: white !important;
  border-color: var(--petrol-blue) !important;
}

/* Botón Editar */
.btn-warning {
  background: var(--maya-medium) !important;
  border-color: var(--maya-medium) !important;
  color: white !important;
}

.btn-warning:hover {
  background: var(--maya-blue) !important;
  border-color: var(--maya-blue) !important;
  color: white !important;
}

/* Botón Reportar Avance */
.btn-success {
  background: var(--petrol-medium) !important;
  border-color: var(--petrol-medium) !important;
  color: white !important;
}

.btn-success:hover {
  background: var(--petrol-blue) !important;
  border-color: var(--petrol-blue) !important;
  color: white !important;
}

/* =============================================
   TARJETAS DE CONTENIDO
   ============================================= */

/* Headers de tarjetas */
.card-header.bg-white {
  background: var(--maya-bg) !important;
  border-bottom: 2px solid var(--maya-blue) !important;
  color: var(--petrol-blue) !important;
}

/* Títulos de tarjetas - Evitar mayúsculas sostenidas */
.card-header.bg-white h5,
.card-header.bg-white h5.mb-0,
.card-header h5,
.card-header h5.mb-0,
.card.shadow-sm .card-header h5,
.card.shadow-sm .card-header h5.mb-0 {
  color: var(--petrol-blue) !important;
  font-weight: 600 !important;
  text-transform: none !important; /* Evitar mayúsculas sostenidas */
  font-size: 1.1rem !important; /* Tamaño similar al dashboard de empresas */
  letter-spacing: 0.025em !important; /* Espaciado de letras como en dashboard */
  line-height: 1.3 !important; /* Altura de línea como en dashboard */
}

/* Asegurar que ningún estilo global sobrescriba - aplicar a todos los hijos también */
.card-header h5,
.card-header h5 *,
.card-header h5 i + * {
  text-transform: none !important;
}

.card-header .fas {
  color: var(--maya-blue) !important;
}

/* =============================================
   TARJETAS DE KPIs
   ============================================= */

/* Tarjetas de KPIs */
.card.bg-light {
  background: white !important;
  border: 1px solid var(--maya-blue) !important;
  border-top: 3px solid var(--maya-blue) !important;
}

.card.bg-light .card-body {
  background: linear-gradient(135deg, var(--maya-bg) 0%, white 100%) !important;
}

/* Títulos de KPIs */
.card.bg-light h6 {
  color: var(--petrol-blue) !important;
  font-weight: 500 !important;
}

/* Valores de KPIs */
.card.bg-light h3 {
  color: var(--maya-blue) !important;
  font-weight: 700 !important;
}

/* Barra de progreso */
.progress-bar.bg-primary {
  background: linear-gradient(135deg, var(--maya-blue) 0%, var(--maya-medium) 100%) !important;
}

/* =============================================
   ALERTAS Y NOTIFICACIONES
   ============================================= */

/* Alerta de indicador original */
.alert-info {
  background: linear-gradient(135deg, var(--maya-bg) 0%, rgba(127, 217, 255, 0.18) 100%) !important;
  border: 1px solid var(--maya-blue) !important;
  border-left: 4px solid var(--maya-blue) !important;
  color: var(--petrol-blue) !important;
}

.alert-info h6 {
  color: var(--petrol-blue) !important;
  font-weight: 600 !important;
}

.alert-info .fas {
  color: var(--maya-blue) !important;
}

/* Alerta de indicador SASB */
.alert-success {
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.1) 0%, rgba(40, 167, 69, 0.05) 100%) !important;
  border: 1px solid #28a745 !important;
  border-left: 4px solid #28a745 !important;
  color: var(--petrol-blue) !important;
}

.alert-success h6 {
  color: #28a745 !important;
  font-weight: 600 !important;
}

.alert-success .fas {
  color: #28a745 !important;
}

/* Alerta de indicadores adicionales */
.alert-warning {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 193, 7, 0.05) 100%) !important;
  border: 1px solid #ffc107 !important;
  border-left: 4px solid #ffc107 !important;
  color: var(--petrol-blue) !important;
}

.alert-warning h6 {
  color: #856404 !important;
  font-weight: 600 !important;
}

.alert-warning .fas {
  color: #ffc107 !important;
}

/* =============================================
   NODOS DE CONVERGENCIA
   ============================================= */

/* Nodos de convergencia */
.alert-info .alert-info {
  background: rgba(127, 217, 255, 0.18) !important;
  border: 1px solid var(--maya-blue) !important;
  color: var(--petrol-blue) !important;
}

/* Badges de nodos */
.badge.bg-info {
  background: var(--maya-blue) !important;
  color: white !important;
}

.badge.bg-warning {
  background: var(--maya-medium) !important;
  color: white !important;
}

/* =============================================
   TABLA DE TAREAS
   ============================================= */

/* Header de tabla */
.table thead th {
  background: var(--maya-bg) !important;
  color: var(--petrol-blue) !important;
  border-bottom: 2px solid var(--maya-blue) !important;
  font-weight: 600 !important;
}

/* Filas de tabla */
.table tbody tr:hover {
  background: rgba(127, 217, 255, 0.12) !important;
}

/* Estados de tareas */
.table-success {
  background: rgba(40, 167, 69, 0.1) !important;
}

.table-warning {
  background: rgba(255, 193, 7, 0.1) !important;
}

.table-danger {
  background: rgba(220, 53, 69, 0.1) !important;
}

/* Badges de estado de tareas */
.badge.bg-success {
  background: #28a745 !important;
  color: white !important;
}

.badge.bg-warning {
  background: #ffc107 !important;
  color: #212529 !important;
}

.badge.bg-danger {
  background: #dc3545 !important;
  color: white !important;
}

.badge.bg-secondary {
  background: var(--petrol-blue) !important;
  color: white !important;
}

/* =============================================
   BOTONES DE TAREAS
   ============================================= */

/* Botón Añadir Paso */
.btn-sm.btn-primary {
  background: var(--maya-blue) !important;
  border-color: var(--maya-blue) !important;
  color: white !important;
}

.btn-sm.btn-primary:hover {
  background: var(--maya-medium) !important;
  border-color: var(--maya-medium) !important;
}

/* Botones de acciones de tareas */
.btn-sm.btn-outline-primary {
  border-color: var(--maya-blue) !important;
  color: var(--maya-blue) !important;
}

.btn-sm.btn-outline-primary:hover {
  background: var(--maya-blue) !important;
  color: white !important;
}

.btn-sm.btn-outline-secondary {
  border-color: var(--petrol-blue) !important;
  color: var(--petrol-blue) !important;
}

.btn-sm.btn-outline-secondary:hover {
  background: var(--petrol-blue) !important;
  color: white !important;
}

/* =============================================
   ELEMENTOS DE RIESGO
   ============================================= */

/* Tarjeta de riesgo */
.alert-light {
  background: var(--maya-bg) !important;
  border: 1px solid var(--maya-blue) !important;
  color: var(--petrol-blue) !important;
}

/* Enlace del riesgo */
.alert-light a {
  color: var(--maya-blue) !important;
  text-decoration: none !important;
}

.alert-light a:hover {
  color: var(--maya-medium) !important;
  text-decoration: underline !important;
}

/* Elemento del riesgo que mitiga */
.bg-info.bg-opacity-10 {
  background: rgba(127, 217, 255, 0.18) !important;
  border: 1px solid var(--maya-blue) !important;
}

.bg-info.bg-opacity-10 h6 {
  color: var(--petrol-blue) !important;
}

.bg-info.bg-opacity-10 .badge {
  background: var(--maya-blue) !important;
  color: white !important;
}

/* =============================================
   RESPONSIVE DESIGN
   ============================================= */

@media (max-width: 768px) {
  .card-header h3 {
    font-size: 1.25rem !important;
  }
  
  .btn-group {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  
  .btn-group .btn {
    width: 100% !important;
  }
}