.portal{
  text-align: center;
  font-weight: 600;
  font-size: 18px;
}

.leyenda_portal{
  text-align: justify;
  font-size: 16px;
}

.info_portal{
  color: #000;
  text-align: justify;
}

.card, .info_portal, .card_fracciones {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease-out;
}
.card.visible, .info_portal.visible, .card_fracciones.visible {
  opacity: 1;
  transform: translateY(0);
}

.OT{
  text-align: center;
}

.alert-verde {
  background-color: #c8e6c9;
  border: 1px solid #81c784;
}

.fracciones{
  height: 65px;
  font-weight: 400;
  font-size: 12px;
  text-decoration: none;
  color: #fff;
}

.card_fracciones{
  background-color: #C38033;
}

.alto_link{
  line-height: 0.8;
}

.fondo_fraccion {
    background-color: #C38033a2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.datos_fraccion{
  font-size: small;
  line-height: 1.2;
}

.fraccion_hover:hover{
  background-color: #1b4573;
  transition: background-color 0.3s ease;
  border-radius: 10px;
  color: #fff;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
}

/* Para Obligaciones de DP */
.boton-accion {
  background-color: #f0f0f0; /* color normal */
  transition: background-color 0.3s;
}

.boton-accion:hover {
  background-color: #d0d0d0; /* color al pasar el mouse */
}

.boton-accion.activo {
  background-color: #4CAF50; /* color cuando está activo */
  color: white;
}

/* Estado inicial: oculto y desplazado */
.seccion .card_fracciones {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease-out;
}

/* Estado visible: ya animado */
.seccion .card_fracciones.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Por defecto: ocultos hasta hover */
.boton-acciones {
  opacity: 0;
  transition: opacity 0.3s;
}

/* En escritorio: aparecen al pasar el mouse */
.fraccion_hover:hover .boton-acciones {
  opacity: 1;
}

/* En móvil: siempre visibles */
@media (max-width: 768px) {
  .boton-acciones {
    opacity: 1 !important;
  }
}