/* 
        Estilos par alos formularios
        Estilo para la tarjeta inicial con instrucciones */
            .form-reactivo-instrucciones {
                background: #ffffff; /* Fondo blanco */
                border: 1px solid #9c9c9c; /* Borde del color del fondo de la cabecera */
                border-radius: 8px; /* Bordes redondeados */
                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Sombra suave */
                margin-bottom: 15px; /* Separación entre tarjetas */
                width: 100%; /* Ocupar ancho completo */
            }
            
            /* Cabecera de la tarjeta inicial */
            .form-reactivo-instrucciones .form-reactivo-header {
                background: #dcdcdc; /* Fondo gris oscuro */
                color: #000000; /* Texto blanco */
                padding: 15px; /* Espaciado interno */
                font-size: 22px !important; /* Tamaño del texto */
                font-weight: bold !important; /* Negrita */
                border-top-left-radius: 8px; /* Bordes redondeados */
                border-top-right-radius: 8px;
            }
            
            /* Subtítulos dentro de la cabecera */
            .form-reactivo-instrucciones .form-reactivo-header small {
                font-size: 14px; /* Tamaño del subtítulo */
                font-weight: normal; /* Sin negrita */
                display: block; /* Forzar salto de línea */
                margin-top: 5px; /* Separación superior */
            }
            
            /* Cuerpo de la tarjeta inicial */
            .form-reactivo-instrucciones .form-reactivo-body {
                padding: 20px; /* Espaciado interno */
            }
            
            /* Elementos del formulario en la tarjeta inicial */
            .form-reactivo-instrucciones .form-reactivo-body input,
            .form-reactivo-instrucciones .form-reactivo-body select,
            .form-reactivo-instrucciones .form-reactivo-body textarea {
                width: 100%; /* Ocupar todo el ancho */
                padding: 10px; /* Espaciado interno */
                margin-top: 8px; /* Separación superior */
                border: 1px solid #e0e0e0; /* Borde gris */
                border-radius: 4px; /* Bordes redondeados */
                font-size: 16px; /* Tamaño del texto */
                box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.1); /* Sombra interna */
            }
            
            /* Hover y focus para inputs en la tarjeta inicial */
            .form-reactivo-instrucciones .form-reactivo-body input:focus,
            .form-reactivo-instrucciones .form-reactivo-body select:focus,
            .form-reactivo-instrucciones .form-reactivo-body textarea:focus {
                outline: none; /* Sin contorno */
                border-color: #4285f4; /* Azul Google */
                box-shadow: 0 0 4px rgba(66, 133, 244, 0.3); /* Sombra azul */
            }
            
            /* Etiquetas dentro de la tarjeta inicial */
            .form-reactivo-instrucciones .form-reactivo-body label {
                font-weight: bold; /* Negrita */
                font-size: 16px; /* Tamaño del texto */
                color: #333333; /* Color oscuro */
                margin-bottom: 10px; /* Separación inferior */
                display: block; /* Bloque para alineación */
            }
            
            /* Estilo para cada reactivo del formulario */
            .form-reactivo {
                background: #ffffff; /* Fondo blanco */
                border: 1px solid #82898F; /* Borde del color de la cabecera */
                border-radius: 8px; /* Bordes redondeados */
                box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Sombra suave */
                padding: 20px; /* Espaciado interno */
                margin-bottom: 15px; /* Separación entre reactivos */
                width: 100%; /* Ocupar ancho completo */
            }
            
            /* Etiqueta para la pregunta */
            .form-reactivo label {
                font-weight: bold; /* Negrita */
                font-size: 16px; /* Tamaño del texto */
                color: #333333; /* Color oscuro */
                margin-bottom: 10px; /* Separación inferior */
                display: block; /* Bloque para alineación */
            }
            
            /* Estilo para los inputs */
            .form-reactivo input,
            .form-reactivo select,
            .form-reactivo textarea {
                width: 100%; /* Ocupar todo el ancho */
                padding: 10px; /* Espaciado interno */
                margin-top: 8px; /* Separación superior */
                border: 1px solid #e0e0e0; /* Borde gris */
                border-radius: 4px; /* Bordes redondeados */
                font-size: 16px; /* Tamaño del texto */
                box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.1); /* Sombra interna */
            }
            
            /* Efecto hover en inputs */
            .form-reactivo input:focus,
            .form-reactivo select:focus,
            .form-reactivo textarea:focus {
                outline: none; /* Sin contorno */
                border-color: #4285f4; /* Azul Google */
                box-shadow: 0 0 4px rgba(66, 133, 244, 0.3); /* Sombra azul */
            }
            
            /* Botón del formulario */
            .formulario-boton {
                text-align: right; /* Alineación a la derecha */
                margin-top: 20px; /* Separación superior */
            }
            .formulario-boton button {
            background-color: transparent; /* Fondo transparente */
            color: #343a40; /* Texto en color oscuro */
            border: 1px solid #343a40; /* Borde oscuro */
            padding: 10px 50px; /* Espaciado interno */
            font-size: 16px; /* Tamaño del texto */
            font-weight: bold; /* Texto en negrita */
            border-radius: 4px; /* Bordes redondeados */
            transition: all 0.3s ease; /* Suavidad en transiciones */
        }
        
        /* Hover: invertir colores */
        .formulario-boton button:hover {
            background-color: #343a40; /* Fondo oscuro */
            color: #ffffff; /* Texto blanco */
            border: 1px solid #343a40; /* Mantener el borde oscuro */
        }
        /* Estilo para la tarjeta de escaneo QR */
.qr-card {
    background: #ffffff; /* Fondo blanco */
    border: 1px solid #9c9c9c; /* Borde similar a otras tarjetas */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Sombra suave */
    padding: 20px; /* Espaciado interno */
    margin-bottom: 20px; /* Separación entre tarjetas */
    width: 100%; /* Ocupar ancho completo */
}

/* Cabecera de la tarjeta */
.qr-card .card-header {
    background: #dcdcdc; /* Fondo gris */
    color: #000000; /* Texto negro */
    padding: 15px; /* Espaciado interno */
    font-size: 20px; /* Tamaño del texto */
    font-weight: bold; /* Negrita */
    border-top-left-radius: 8px; /* Bordes redondeados */
    border-top-right-radius: 8px;
    text-align: center; /* Centrar texto */
}

/* Cuerpo de la tarjeta */
.qr-card .card-body {
    text-align: center; /* Centrar contenido */
    padding: 20px; /* Espaciado interno */
}

/* Estilo para la imagen QR */
.qr-card img {
    max-width: 100%; /* Ajuste responsivo */
    height: auto;
    margin-bottom: 15px; /* Espaciado inferior */
}

/* Estilo para el canvas oculto de QR */
.qr-card canvas {
    display: none; /* Oculto por defecto */
    max-width: 100%; /* Ajuste responsivo */
}

/* Estilo para los botones de la cámara */
.qr-card .btn {
    width: 100%; /* Botón ocupa todo el ancho */
    background-color: transparent; /* Fondo transparente */
    color: #343a40; /* Texto en color oscuro */
    border: 1px solid #343a40; /* Borde oscuro */
    padding: 10px 20px; /* Espaciado interno */
    font-size: 16px; /* Tamaño del texto */
    font-weight: bold; /* Texto en negrita */
    border-radius: 4px; /* Bordes redondeados */
    transition: all 0.3s ease; /* Suavidad en transiciones */
    margin-top: 10px; /* Espaciado superior */
}

/* Hover: invertir colores en los botones */
.qr-card .btn:hover {
    background-color: #343a40; /* Fondo oscuro */
    color: #ffffff; /* Texto blanco */
    border: 1px solid #343a40; /* Mantener el borde oscuro */
}

/* Contenedor principal de la sección QR */
.qr-container {
    margin-top: 50px; /* Separación superior */
    margin-bottom: 50px; /* Separación inferior */
}

/* time line*/

.timeline {
            position: relative;
            padding: 20px 0;
        }
        .timeline::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            width: 4px;
            height: 100%;
            background: #6c757d;
            transform: translateX(-50%);
        }
        .timeline-step {
            position: relative;
            margin-bottom: 30px;
            text-align: center;
        }
        .timeline-step .icon {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
            border: 2px solid #6c757d;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            color: #6c757d;
        }
        .timeline-content {
            padding: 15px;
            background: #f8f9fa;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .status-icon {
            font-size: 24px;
            margin-left: 10px;
        }
        .incomplete {
            color: #dc3545;
        }
        .completed {
            color: #28a745;
        }

        /* Responsive Design */
        @media (max-width: 767px) {
            .timeline::before {
                left: 20px;
            }
            .timeline-step {
                flex-direction: column;
                align-items: start;
                text-align: left;
            }
            .timeline-step .icon {
                left: 0;
                transform: translateY(-50%);
                width: 50px;
                height: 50px;
                font-size: 24px;
            }
            .timeline-content {
                margin-left: 70px;
            }
        }