.container-fluid {
  padding-left: 0;
  padding-right: 0;
}

body {
  background-color: black;
  color: white;
}

.grid-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #333;
  border: none; /* Se elimina la l�nea exterior */
  border-radius: 0 !important;
  overflow: hidden;
  color: white;
  align-items: stretch;
}

.card .list-group-flush .list-group-item:last-child {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.card .list-group-item,
.card .list-group-item:last-child,
.card .list-group-item:first-child {
  border-radius: 0 !important;
}

.card img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.card-section {
  padding: 10px;
  transition: background-color 2s ease;
}

.card-section.title {
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  background-color: #444;
  padding: 15px;
}

.card-section.message {
  text-align: center;
  background-color: #555;
}

.card-section.comments {
  background-color: #666;
  text-align: center;
  padding: 15px;
}

.list-group-item {
  background-color: #333;
  border: none;
  transition: background-color 2s ease;
}

.rainbow-text span {
  display: inline-block;
  transition: color 2s ease;
}

.collapse {
  transition: max-height 0.5s ease;
  overflow: hidden;
}

.collapse.show {
  max-height: 500px;
}

.collapse:not(.show) {
  max-height: 0;
}
 
.grid-container .card {
  align-self: stretch;
}

/* Bot�n con colores din�micos */
.btn-dynamic {
  transition: background-color 2s ease, color 2s ease;
  border: none;
}

/* Paginaci�n minimalista */
.pagination {
  margin-top: 2rem;
}

/* Estado deshabilitado */
.page-item.disabled .page-link {
  opacity: 0.3;
  pointer-events: none;
}



.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    margin: 20px 0;
    width: 100%;
    position: relative;
}

.btn-page-item-atras, .btn-page-item-pag-actual, .btn-page-item-siguiente {
    padding: 12px 24px;
    font-size: 1.2rem;
    color: white;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease-in-out;
}

.btn-page-item-atras {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.btn-page-item-pag-actual {
    /* Estilo base para la p�gina actual */
}

.btn-page-item-siguiente {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}
 
.rainbow-fallback {
  animation: rainbowFallback 0.3s infinite;
}

.rainbow-fallback {
  animation: rainbowFallback 0.3s infinite;
}

@keyframes rainbowFallback {
  0%   { color: red; }
  20%  { color: orange; }
  40%  { color: yellow; }
  60%  { color: green; }
  80%  { color: blue; }
  100% { color: purple; }
}
 
.card-body,
.card-footer,
.card-section {
  padding: 0.3666rem !important; /* Ajusta a tu gusto */
  margin: 0 !important;        /* Si no quieres margen adicional */
}
  
.card,
.card-body,
.card-footer,
.card-section {
  border-radius: 0 !important;
}
.card-img-top,
.img-thumbnail {
  border-radius: 0 !important;
}

.card-img-top {
    /* Agregar borde */
  border: 5px solid transparent !important; /* o el color y grosor que prefieras */
  border-radius: 0 !important;       /* esquinas cuadradas */
}

/* Si quieres el mismo estilo que en .card-img-top */
.card-img-top,
.carousel-item img {
    /* Agregar borde */
    border: 5px solid transparent !important; /* o el color y grosor que prefieras */
    border-radius: 0 !important;       /* esquinas cuadradas */
}

/* Quitar el borde superior y redondeo de todos los card-footer */
.card-footer {
  border-top: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
}

/* Quitar la línea entre card-body y card-footer */
.card-body + .card-footer {
  border-top: none !important;
}

/* Quitar la línea entre múltiples card-footer */
.card-footer + .card-footer {
  border-top: none !important;
}

/* Asegurarse de que el último card-footer no tenga borde redondeado en la parte inferior */
.card-footer:last-child {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}


/* 1) Permitir que la propia card expanda su altura */
.card,
.card-body,
.card-footer {
  overflow: visible !important;
}

/* 2) Quitar cualquier max-height u overflow: hidden del collapse */
.collapse {
  max-height: none !important;
  overflow: visible !important;
}

/* 3) (Opcional) Si prefieres que la lista tenga scroll en lugar de alargar la card */
.collapse .list-group {
  max-height: 300px;      /* ajústalo a tu gusto */
  overflow-y: auto;
}

ul.list-group li { border-left:4px solid #aaa } ul.list-group li li { border-color:#f66 }