/* ========== ESTILOS ESPECÍFICOS PARA INDEX (Dashboard Principal) ========== */
/* Los estilos de header, sidebar y elementos generales están en global.css */

/* Layout específico del contenido principal */
.contentDash {
  height: 100%;
}

/* Cards superiores - 3 en línea */
.strategicPlan, 
.nextActivities, 
.Trends {
  color: #001D3D;    
  font-family: Arial, Helvetica, sans-serif;
  background-color: #fff;
  text-align: center;
  display: inline-block;
  padding: 1%;
  width: 28%; /* Ajustado para que quepan 3 en una línea con márgenes */
  margin: 1%;
  height: 30%;
  border-radius: 10px;
  border: 1px solid #001d3d42;
  vertical-align: top;
  box-shadow: 0 2px 4px rgba(0, 29, 61, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto hover en cards superiores */
.strategicPlan:hover, 
.nextActivities:hover, 
.Trends:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 29, 61, 0.2);
}

/* Card grande inferior - Rendimiento general */
.dailyAgenda {
  color: #001D3D;   
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #fff;
  padding: 3%;
  height: 50%;
  margin: 1%;
  border-radius: 10px;
  border: 1px solid #001d3d42;
  box-shadow: 0 2px 4px rgba(0, 29, 61, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dailyAgenda:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 29, 61, 0.2);
}

/* Títulos de las cards */
.strategicPlan h2, 
.nextActivities h2, 
.Trends h2, 
.dailyAgenda h2 {
  margin-bottom: 2rem;
  font-size: 1.8rem;
}

/* Botones específicos de las cards del dashboard */
.strategicPlan button, 
.nextActivities button, 
.Trends button, 
.dailyAgenda button {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #001D3D;
  border: none;
  border-radius: 30px;
  padding: 12px 24px;
  margin: 1%;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.95rem;
}

.strategicPlan button:hover, 
.nextActivities button:hover, 
.Trends button:hover, 
.dailyAgenda button:hover {
  color: #001D3D;
  background-color: #fff;
  border: 2px solid #001D3D;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 29, 61, 0.2);
}

/* Enlaces dentro de las cards */
.strategicPlan a, 
.nextActivities a, 
.Trends a, 
.dailyAgenda a {
  text-decoration: none;
}

/* Espaciado específico para <br> */
.strategicPlan br, 
.nextActivities br, 
.Trends br, 
.dailyAgenda br {
  display: block;
  margin-bottom: 1rem;
}

/* ========== RESPONSIVE ESPECÍFICO PARA INDEX ========== */

/* Tablets */
@media (max-width: 1024px) {
  .strategicPlan, 
  .nextActivities, 
  .Trends {
    width: 45%; /* 2 cards por fila en tablets */
    margin: 2%;
  }
  
  .dailyAgenda {
    height: 40%;
  }
}

/* Móviles */
@media (max-width: 768px) {
  .strategicPlan, 
  .nextActivities, 
  .Trends {
    width: 90%; /* 1 card por fila en móviles */
    display: block;
    margin: 2% auto;
    height: auto;
    min-height: 200px;
  }
  
  .dailyAgenda {
    width: 90%;
    margin: 2% auto;
    height: auto;
    min-height: 250px;
  }
  
  .strategicPlan h2, 
  .nextActivities h2, 
  .Trends h2, 
  .dailyAgenda h2 {
    font-size: 1.5rem;
  }
}

/* Móviles pequeños */
@media (max-width: 480px) {
  .strategicPlan, 
  .nextActivities, 
  .Trends,
  .dailyAgenda {
    padding: 2rem 1rem;
  }
  
  .strategicPlan h2, 
  .nextActivities h2, 
  .Trends h2, 
  .dailyAgenda h2 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
  }
  
  .strategicPlan button, 
  .nextActivities button, 
  .Trends button, 
  .dailyAgenda button {
    padding: 10px 20px;
    font-size: 0.9rem;
  }
}