/* Estas son sobre-escrituras de bootstrap */
 .progress-nav .nav .nav-link {
    width: 2rem;
    height: 2rem;
    background-color: var(--vz-light);
    padding: 0;
    color: var(--vz-body-color);
    font-weight: 500;
}
.progress-nav .nav .nav-link.active, .progress-nav .nav .nav-link.done {
    background-color: #ab0033;
    color: #fff;
}

 .alert-c1 {
     --alert-color: #54565a;
     /* Color de texto en blanco para buen contraste */
     --alert-bg: #f4d8dd;
     /* Fondo con el color atenuado */
     --alert-border-color: #914155;
     /* Borde ligeramente más oscuro */
     --alert-link-color: #ddc9a3;
     /* Enlaces en un tono beige claro */

     color: var(--alert-color);
     background-color: var(--alert-bg);
     border-color: var(--alert-border-color);
 }

 .alert-c1 a {
     color: var(--alert-link-color);
     text-decoration: underline;
 }

 .alert-c1 a:hover {
     color: darken(var(--alert-link-color), 10%);
 }

 .alert-c2 {
     --alert-color: #6d6e71;
     /* Color de texto más claro */
     --alert-bg: #f4eee3;
     /* Fondo más suave */
     --alert-border-color: #e3c8a3;
     /* Borde más claro y tenue */
     --alert-link-color: #a74d65;
     /* Enlace en un tono rosa apagado */

     color: var(--alert-color);
     background-color: var(--alert-bg);
     border-color: var(--alert-border-color);
 }

 .alert-c2 a {
     color: var(--alert-link-color);
     text-decoration: underline;
 }

 .alert-c2 a:hover {
     color: darken(var(--alert-link-color), 10%);
 }

 /* Esto francamente debió ir en el archivo app */
 .progress-c2 .progress-bar {
     background-color: #bc955c;
 }

 .progress-c2 .progress-bar::after {
     border-right-color: #bc955c;
 }

 .progress-c2 .progress-bar:nth-child(2) {
     background-color: rgba(37, 160, 226, 0.1) !important;
     color: #bc955c !important;
 }

 .progress-c2 .progress-bar:nth-child(2)::after {
     border-right-color: rgba(37, 160, 226, 0.1);
 }

 .alert-additional.alert-c2 .alert-content {
     background-color: #e3c8a3;
     color: #fff;
 }

 .bg-c2 {
     background: #bc955c !important;
 }

 /* Botones personalizados */
 .btn-c1-light {
     color: #ab0033;
     border-color: #be0a40;
     /* border-radius: 15px; */
     background: white;
     cursor: pointer;
 }

 .btn-c1-light:hover {
     color: white !important;
     border-color: #ab0033;
     background: #ab0033;
 }

 .btn-c2-light {
     color: #bc955c;
     border-color: #bc955c;
     border-radius: 15px;
     background: white;
     cursor: pointer;
 }

 .btn-c2-light:hover {
     color: white !important;
     border-color: #bc955c;
     background: #bc955c;
 }

 .btn-c3-light {
     cursor: pointer;
     background: white;
     color: #ddc9a3;
     /* border-radius: 15px; */
     border-color: #ddc9a3;
 }

 .btn-c3-light:hover {
     color: white !important;
     border-color: #ddc9a3;
     background: #ddc9a3;
 }

 .btn-c4-light {
     cursor: pointer;
     background: white;
     color: #54565a;
     /* border-radius: 15px; */
     border-color: #54565a;
 }

 .btn-c4-light:hover {
     color: white !important;
     border-color: #54565a;
     background: #54565a;
 }

 .fixed-height-wizard {
     height: 620px;
     /* Altura fija para el wizard */
     overflow-y: auto !important;
     /* Habilita el scroll interno si el contenido excede la altura fija */
 }

 @media (max-width: 768px) {
     .fixed-height-wizard {
         height: 100%;
         /* Ajuste para pantallas pequeñas */
         min-height: 310px;
         /* Altura mínima para dispositivos móviles */
     }
 }