/* =============================================
   ESTILOS DE GESTIÓN DE RIESGOS - 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 */
}

/* =============================================
   ALERTAS INFORMATIVAS
   ============================================= */

/* Alerta de riesgos sectoriales */
.alert-info.border-0 {
  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 .alert-heading {
  color: var(--petrol-blue) !important;
  font-weight: 600 !important;
}

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

/* =============================================
   TARJETAS DE ESTADÍSTICAS
   ============================================= */

/* Tarjetas de estadísticas */
.stat-card {
  background: white !important;
  border: 1px solid var(--maya-blue) !important;
  border-top: 3px solid var(--maya-blue) !important;
  border-radius: 0.375rem !important;
  box-shadow: 0 2px 4px rgba(127, 217, 255, 0.18) !important;
  transition: all 0.3s ease !important;
}

.stat-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 15px rgba(15, 31, 51, 0.25) !important;
}

.stat-card__title {
  color: var(--petrol-blue) !important;
  font-weight: 500 !important;
}

.stat-card__value {
  color: var(--maya-blue) !important;
  font-weight: 700 !important;
}

/* =============================================
   TABLA PRINCIPAL DE RIESGOS
   Usa estilos globales de theme.css (.table thead th)
   ============================================= */

/* Filas de riesgos sectoriales - estilo visual en celdas */
.table tbody tr.table-info {
  background: rgba(127, 217, 255, 0.12);
  border-left: 3px solid var(--maya-blue);
}

.table tbody tr.table-info:hover {
  background: rgba(127, 217, 255, 0.18);
}

/* =============================================
   BADGES Y ETIQUETAS - TAMAÑO REDUCIDO
   ============================================= */

/* Badge sectorial */
.badge.bg-info.text-dark {
  background: var(--maya-blue) !important;
  color: white !important;
  font-weight: 500 !important;
  font-size: 0.7rem !important; /* Badge más pequeño */
  padding: 0.2rem 0.4rem !important;
}

/* Badge adoptado del sector */
.badge.bg-warning.text-dark {
  background: var(--maya-medium) !important;
  color: white !important;
  font-weight: 500 !important;
  font-size: 0.7rem !important; /* Badge más pequeño */
  padding: 0.2rem 0.4rem !important;
}

/* Badge de información sectorial */
.badge.bg-secondary {
  background: var(--petrol-blue) !important;
  color: white !important;
  font-weight: 500 !important;
  font-size: 0.7rem !important; /* Badge más pequeño */
  padding: 0.2rem 0.4rem !important;
}

/* Etiquetas de ubicación */
.location-tags .badge {
  background: var(--maya-bg) !important;
  color: var(--petrol-blue) !important;
  border: 1px solid var(--maya-blue) !important;
  font-weight: 500 !important;
  font-size: 0.65rem !important; /* Badge más pequeño */
  padding: 0.15rem 0.3rem !important;
}

/* Badges de factores de riesgo - Sin rojo */
.badge.bg-danger {
  background: var(--maya-medium) !important; /* Cambiado de rojo a azul Maya medio */
  color: white !important;
  font-size: 0.7rem !important; /* Badge más pequeño */
  padding: 0.2rem 0.4rem !important;
}

.badge.bg-primary {
  background: var(--maya-blue) !important;
  color: white !important;
  font-size: 0.7rem !important; /* Badge más pequeño */
  padding: 0.2rem 0.4rem !important;
}

.badge.bg-info.text-dark {
  background: var(--maya-medium) !important;
  color: white !important;
  font-size: 0.7rem !important; /* Badge más pequeño */
  padding: 0.2rem 0.4rem !important;
}

/* =============================================
   BOTONES DE ACCIÓN - SIN ROJO
   ============================================= */

/* Botones de texto */
.btn-text {
  color: var(--maya-blue) !important;
  background: transparent !important;
  border: none !important;
  transition: all 0.2s ease !important;
}

.btn-text:hover {
  color: var(--maya-medium) !important;
  background: rgba(127, 217, 255, 0.18) !important;
  transform: translateY(-1px) !important;
}

/* Botón de adoptar */
.btn-text[title="Adoptar este riesgo"] {
  color: var(--maya-blue) !important;
  font-weight: 500 !important;
}

.btn-text[title="Adoptar este riesgo"]:hover {
  color: var(--maya-medium) !important;
  background: rgba(127, 217, 255, 0.18) !important;
}

/* Botón de eliminar - Sin rojo */
.btn-danger {
  background: var(--petrol-blue) !important; /* Cambiado de rojo a azul petróleo */
  border-color: var(--petrol-blue) !important;
  color: white !important;
}

.btn-danger:hover {
  background: var(--petrol-medium) !important; /* Hover azul petróleo medio */
  border-color: var(--petrol-medium) !important;
  color: white !important;
}

/* Botón de proyecto */
.btn-card-secondary {
  background: var(--petrol-blue) !important;
  border-color: var(--petrol-blue) !important;
  color: white !important;
}

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

/* =============================================
   TARJETAS DE ACCIONES DISPONIBLES
   ============================================= */

/* Tarjeta de acciones disponibles */
.card {
  border: 1px solid var(--maya-blue) !important;
  border-top: 3px solid var(--maya-blue) !important;
  border-radius: 0.375rem !important;
  box-shadow: 0 2px 4px rgba(127, 217, 255, 0.18) !important;
  transition: all 0.3s ease !important;
}

.card:hover {
  box-shadow: 0 5px 15px rgba(15, 31, 51, 0.25) !important;
}

.card-header {
  background: var(--maya-bg) !important;
  border-bottom: 2px solid var(--maya-blue) !important;
  color: var(--petrol-blue) !important;
  font-weight: 600 !important;
}

.card-header h5 {
  color: var(--petrol-blue) !important;
  font-weight: 600 !important;
  text-transform: none !important; /* Evitar mayúsculas sostenidas - igual que dashboard */
}

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

/* =============================================
   BOTONES DE ACCIONES DISPONIBLES
   ============================================= */

/* Botón primario */
.btn-card-primary {
  background: var(--maya-blue) !important;
  border-color: var(--maya-blue) !important;
  color: white !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
}

.btn-card-primary:hover {
  background: var(--maya-medium) !important;
  border-color: var(--maya-medium) !important;
  color: white !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(127, 217, 255, 0.35) !important;
}

/* Botón secundario */
.btn-card-secondary {
  background: var(--petrol-blue) !important;
  border-color: var(--petrol-blue) !important;
  color: white !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
}

.btn-card-secondary:hover {
  background: var(--petrol-medium) !important;
  border-color: var(--petrol-medium) !important;
  color: white !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 18px rgba(16, 32, 64, 0.25) !important;
}

/* Botón de éxito */
.btn-card-success {
  background: #28a745 !important;
  border-color: #28a745 !important;
  color: white !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
}

.btn-card-success:hover {
  background: #218838 !important;
  border-color: #218838 !important;
  color: white !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3) !important;
}

/* =============================================
   MODAL DE DETALLES
   ============================================= */

/* Header del modal */
.modal-header {
  background: var(--maya-bg) !important;
  border-bottom: 2px solid var(--maya-blue) !important;
}

.modal-title {
  color: var(--petrol-blue) !important;
  font-weight: 600 !important;
}

/* Contenido del modal */
.modal-body h6 {
  color: var(--petrol-blue) !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
}

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

@media (max-width: 768px) {
  #tabla-riesgos {
    font-size: 0.8rem !important;
  }
  
  #tabla-riesgos thead th {
    padding: 0.5rem 0.25rem !important;
  }
  
  #tabla-riesgos.table-sm td {
    padding: 0.5rem 0.25rem !important;
  }
  
  .btn-sm {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.8rem !important;
  }
  
  .d-flex.gap-3 .btn {
    min-width: 150px !important;
    font-size: 0.9rem !important;
  }
}

/* =============================================
   EFECTOS ESPECIALES
   ============================================= */

/* Animación para filas de tabla */
@keyframes fadeInRow {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#tabla-riesgos tbody tr {
  animation: fadeInRow 0.3s ease-out;
}

/* Efecto de brillo en hover de botones */
.btn-card-primary:hover,
.btn-card-secondary:hover,
.btn-card-success:hover {
  position: relative;
  overflow: hidden;
}

.btn-card-primary:hover::before,
.btn-card-secondary:hover::before,
.btn-card-success:hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn-card-primary:hover::before,
.btn-card-secondary:hover::before,
.btn-card-success:hover::before {
  left: 100%;
}