/* ============================================
   ESTILOS DE VALIDACIÓN - PERSONA QUE RECOGE
   ============================================ */

/* Asterisco rojo para campos obligatorios */
.text-danger {
    color: #dc3545 !important;
    font-weight: 600;
}

/* ============================================
   ESTADOS DE VALIDACIÓN
   ============================================ */

/* Campo válido */
.form-control.is-valid {
    border-color: #28a745 !important;
    border-width: 2px;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Campo inválido */
.form-control.is-invalid {
    border-color: #dc3545 !important;
    border-width: 2px;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Mensajes de feedback */
.invalid-feedback {
    display: none !important;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #dc3545;
    font-weight: 500;
}

.form-control.is-invalid ~ .invalid-feedback {
    display: block !important;
}

.valid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #28a745;
    font-weight: 500;
}

.form-control.is-valid ~ .valid-feedback {
    display: block;
}

/* ============================================
   TRANSICIONES Y ANIMACIONES
   ============================================ */

.form-control {
    transition: border-color 0.3s ease-in-out,
                box-shadow 0.3s ease-in-out,
                background-color 0.2s ease;
}

.form-control:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 47, 135, 0.25);
}

.form-control.is-invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.form-control.is-valid:focus {
    border-color: #28a745 !important;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* ============================================
   BOTÓN "YO MISMO"
   ============================================ */

#btnYoMismo {
    border-radius: 5px;
    padding: 0.5rem 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
}

#btnYoMismo:hover {
    background-color: #002F87;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 47, 135, 0.2);
}

#btnYoMismo:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 47, 135, 0.1);
}

#btnYoMismo i {
    margin-right: 0.5rem;
}

/* ============================================
   GRUPO DE CAMPOS - PERSONA QUE RECOGE
   ============================================ */

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Encabezado con botón "Yo Mismo" */
.d-flex.justify-content-between.align-items-center {
    margin-bottom: 1.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e0e0e0;
}

/* ============================================
   AYUDA Y INFORMACIÓN
   ============================================ */

.form-text {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #6c757d;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 576px) {
    #btnYoMismo {
        width: 100%;
        margin-top: 0.5rem;
    }

    .form-control {
        font-size: 16px;
        /* Evita zoom en iOS */
    }

    .d-flex.justify-content-between.align-items-center {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .d-flex.justify-content-between.align-items-center label {
        width: 100%;
    }
}

/* ============================================
   ICONOGRAFÍA Y SÍMBOLOS
   ============================================ */

.fa-user-check::before {
    content: "\f058";
}

/* ============================================
   FOCUS Y ACCESIBILIDAD
   ============================================ */

.form-control:focus-visible {
    outline: 2px solid #002F87;
    outline-offset: 2px;
}

/* ============================================
   DESHABILITADO
   ============================================ */

.form-control:disabled,
.form-control[readonly] {
    background-color: #f5f5f5;
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.65;
}

/* ============================================
   DARK MODE (opcional)
   ============================================ */

@media (prefers-color-scheme: dark) {
    .form-control {
        background-color: #2d2d2d;
        color: #fff;
        border-color: #444;
    }

    .form-control:focus {
        background-color: #3d3d3d;
    }

    .form-group label {
        color: #e0e0e0;
    }

    .invalid-feedback {
        color: #ff6b6b;
    }

    .valid-feedback {
        color: #51cf66;
    }
}