/*
 * SiE7E POR COLOMBiA (c) 2026 - Proyecto 7PorColombia
 *
 * ARCHIVO   : apoyo_cronograma.css
 * UBICACIÓN : assets/css/apoyo_cronograma.css
 * FUNCIÓN   : Estilos de la página "Ruta de apoyo". Todo va con el prefijo .apoyo-
 *             para no afectar otras páginas.
 */
#apoyo-app { --apoyo-azul: #003893; --apoyo-rojo: #CE1126; --apoyo-amarillo: #FFCD00; }

#apoyo-app .apoyo-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; border-bottom: 2px solid var(--apoyo-azul); }
#apoyo-app .apoyo-tabs .nav-link { white-space: nowrap; color: var(--apoyo-azul); font-weight: 600; border: 0; border-radius: .5rem .5rem 0 0; }
#apoyo-app .apoyo-tabs .nav-link:hover { background: rgba(0, 56, 147, .08); }
#apoyo-app .apoyo-tabs .nav-link.active { background: var(--apoyo-azul); color: #fff; }

#apoyo-app .apoyo-card { transition: transform .15s ease, box-shadow .15s ease; border-top: 4px solid var(--apoyo-amarillo) !important; }
#apoyo-app .apoyo-card:hover { transform: translateY(-3px); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12) !important; }
/* Fecha siempre al pie de la tarjeta: las 7 quedan alineadas aunque el texto varíe de largo */
#apoyo-app .apoyo-card .card-body { display: flex; flex-direction: column; }
#apoyo-app .apoyo-card .card-body > .badge { margin-top: auto; align-self: flex-start; }

#apoyo-app .apoyo-icono {
  width: 46px; height: 46px; flex: 0 0 46px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--apoyo-azul); color: #fff; font-size: 1.15rem;
}

#apoyo-app .apoyo-pasos { padding-left: 1.2rem; }
#apoyo-app .apoyo-pasos li { margin-bottom: .6rem; }
#apoyo-app .apoyo-pasos li::marker { color: var(--apoyo-rojo); font-weight: 700; }

#apoyo-app #apoyo-codigo { letter-spacing: .4em; font-size: 1.15rem; font-weight: 700; }

@media (max-width: 575.98px) {
  #apoyo-app .apoyo-tabs .nav-link { padding: .5rem .7rem; font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  #apoyo-app .apoyo-card { transition: none; }
}

/* El portal (7porcol2.css) define .accordion-body { height: 0; overflow: hidden } para otro acordeón
   y pisa el de Bootstrap: aquí se anula, solo dentro de #apoyo-app, para que el panel de Administración se vea completo. */
#apoyo-app .accordion-body { height: auto; overflow: visible; transition: none; border-bottom: 0; }