/* modern.css */

/* Contenedores modernos basados en Bootstrap */
.modern-table-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
  }

  /* Asegura que la tabla se vea completa en móviles */
.modern-table-container .table-responsive {
    overflow-x: auto;
    }
/* Asegura que el canvas se adapte al ancho disponible */
canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    max-width: 100%;
    min-height: 300px;
  }
  
.modern-chart-container {
background-color: #255, 255, 255, 0.15;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-top: 30px;
}

/* Modernización de las cards, aprovechando el sistema de Bootstrap */
.modern-card {
border: none;
box-shadow: 0 2px 8px rgba(255, 255, 255, 0.15);
border-radius: 8px;
overflow: hidden;
background-color: #fff;
}

.modern-card .card-body {
padding: 20px;
}

.modern-card .card-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 10px;
}

.modern-card .card-subtitle {
font-size: 1rem;
font-weight: 400;
color: #666;
margin-bottom: 15px;
}

/* Estilos opcionales para botones modernos basados en Bootstrap */
.btn-modern {
border-radius: 4px;
padding: 10px 16px;
font-size: 1rem;
}

.chart-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.titulo-fondo-animado-wrapper {
  position: relative;
  height: 40px; /* opcional: también podés achicar un poco la altura */
  overflow: hidden;
  margin-bottom: 10px;  /* ⬅️ Menos espacio debajo */
  background-color: #255, 255, 255, 0.15;
  border-radius: 10px;
  padding: 4px 4px;  /* ⬅️ Menos espacio interno */
}

.titulo-fondo-animado-img {
  position: absolute;
  width: 2rem;
  height: 2rem;
  opacity: 0.5;
  pointer-events: none;
  will-change: transform;
  animation: flotar 18s infinite ease-in-out;
  transform-origin: center;
}

/* Animación suave */
@keyframes flotar {
  0%   { transform: translateY(0px) rotate(0deg); }
  50%  { transform: translateY(-12px) rotate(180deg); }
  100% { transform: translateY(0px) rotate(360deg); }
}

.titulo-fondo-animado-texto {
  position: relative;
  z-index: 2;
  text-align: left;
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  padding: 0.2rem 0 0.1rem 0; /* ⬅️ Menos espacio abajo */
}

.img-0 { top: 5px; left: 40%;  animation-duration: 19s; }
.img-1 { top: 5px; left: 55%; animation-duration: 21s; }
.img-2 { top: 5px; left: 70%; animation-duration: 17s; }


/* Ajustes responsivos: reducimos padding en dispositivos pequeños */
@media (max-width: 767.98px) {
.modern-table-container,
.modern-chart-container {
    padding: 15px;
}
canvas {
    min-height: 400px; /* En móviles, un poco más alto */
    }

.modern-chart-container .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
    }
  .chart-wrapper {
    height: 400px;
  }
}


/* Tabla responsiva: evita recortes y mantiene el contenido visible */
.modern-table-container .table-responsive {
  overflow-x: auto;
}

.modern-table-container table {
  table-layout: auto;
  white-space: nowrap; /* evita saltos de línea */
  width: 100%;
}

.modern-table-container th,
.modern-table-container td {
  text-align: center;
  vertical-align: middle;
  padding: 8px 12px;
  white-space: nowrap; /* no cortar texto */
  font-size: 0.95rem;
}

/* Ajustes responsivos para móviles */
@media (max-width: 767.98px) {
  .modern-table-container th,
  .modern-table-container td {
    font-size: 0.8rem;
    padding: 6px 8px;
  }

  .modern-table-container table {
    font-size: 0.85rem;
  }
}