/* ══════════════════════════════════════════════════════════════════
   validacion.css — Estilos de validacion visual para FullContable ERP
   Prefijo: fc- (FullContable) para evitar conflictos con Bootstrap
   ══════════════════════════════════════════════════════════════════ */

/* ── Campo INVALIDO (rojo) ─────────────────────────────────────── */
.fc-invalid,
.fc-fiscal-invalid,
.fc-invalid.form-control,
.fc-fiscal-invalid.form-control,
.fc-invalid.custom-select,
input.fc-invalid,
input.fc-fiscal-invalid,
select.fc-invalid,
textarea.fc-invalid {
    border-color: #dc3545 !important;
    background-color: #fff5f5 !important;
    box-shadow: 0 0 0 0.18rem rgba(220, 53, 69, 0.18) !important;
    transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Icono X para campo invalido (solo inputs y selects visibles) */
input.fc-invalid:not([type="hidden"]),
input.fc-fiscal-invalid:not([type="hidden"]),
select.fc-invalid,
textarea.fc-invalid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='6' fill='%23dc3545'/%3E%3Cpath d='M4.5 4.5L9.5 9.5M9.5 4.5L4.5 9.5' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px 14px;
    padding-right: 30px !important;
}

/* El :is con ID centinela supera resets legacy con #modulo + !important. */
body .input-group:is(#fc-fiscal-priority, .input-group):has(.fc-invalid),
body .input-group:is(#fc-fiscal-priority, .input-group):has(.fc-fiscal-invalid) {
    border-color: #dc3545 !important;
    border-radius: 0.25rem;
    outline: 1.5px solid #dc3545 !important;
    outline-offset: -1.5px;
    box-shadow: 0 0 0 0.18rem rgba(220, 53, 69, 0.18) !important;
}

.input-group:has(.fc-invalid) .input-group-prepend .input-group-text,
.input-group:has(.fc-fiscal-invalid) .input-group-prepend .input-group-text,
.input-group:has(.fc-invalid) .input-group-append .input-group-text,
.input-group:has(.fc-fiscal-invalid) .input-group-append .input-group-text {
    border-color: #dc3545 !important;
    color: #dc3545;
}

/* ── Campo VALIDO (verde) ──────────────────────────────────────── */
.fc-valid,
.fc-fiscal-valid,
.fc-valid.form-control,
.fc-fiscal-valid.form-control,
.fc-valid.custom-select,
input.fc-valid,
input.fc-fiscal-valid,
select.fc-valid,
textarea.fc-valid {
    border-color: #28a745 !important;
    background-color: #f0fff4 !important;
    box-shadow: 0 0 0 0.18rem rgba(40, 167, 69, 0.12) !important;
    transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Icono check para campo valido */
input.fc-valid:not([type="hidden"]),
input.fc-fiscal-valid:not([type="hidden"]),
select.fc-valid,
textarea.fc-valid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='6' fill='%2328a745'/%3E%3Cpath d='M4 7L6 9.5L10 4.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px 14px;
    padding-right: 30px !important;
}

/* Input-group con campo valido */
body .input-group:is(#fc-fiscal-priority, .input-group):has(.fc-valid),
body .input-group:is(#fc-fiscal-priority, .input-group):has(.fc-fiscal-valid) {
    border-color: #28a745 !important;
    border-radius: 0.25rem;
    outline: 1.5px solid #28a745 !important;
    outline-offset: -1.5px;
    box-shadow: 0 0 0 0.18rem rgba(40, 167, 69, 0.12) !important;
}

.input-group:has(.fc-valid) .input-group-prepend .input-group-text,
.input-group:has(.fc-fiscal-valid) .input-group-prepend .input-group-text,
.input-group:has(.fc-valid) .input-group-append .input-group-text,
.input-group:has(.fc-fiscal-valid) .input-group-append .input-group-text {
    border-color: #28a745 !important;
    color: #28a745;
}

/* Contenedores personalizados que dibujan el borde fuera del input (Notas CxP). */
body #ncc-app .ncc-input-wrap:has(> input.fc-fiscal-invalid) {
    border-color: #dc3545 !important;
    outline: 1.5px solid #dc3545 !important;
    outline-offset: -1.5px;
    box-shadow: 0 0 0 0.18rem rgba(220, 53, 69, 0.18) !important;
}

body #ncc-app .ncc-input-wrap:has(> input.fc-fiscal-valid) {
    border-color: #28a745 !important;
    outline: 1.5px solid #28a745 !important;
    outline-offset: -1.5px;
    box-shadow: 0 0 0 0.18rem rgba(40, 167, 69, 0.12) !important;
}

body #ncc-app .ncc-input-wrap:has(> input.fc-fiscal-invalid) .ncc-pfx {
    border-color: #dc3545 !important;
    color: #dc3545 !important;
}

body #ncc-app .ncc-input-wrap:has(> input.fc-fiscal-valid) .ncc-pfx {
    border-color: #28a745 !important;
    color: #28a745 !important;
}

/* ── Mensaje de error debajo del campo ─────────────────────────── */
.fc-error-msg {
    display: block;
    font-size: 11.5px;
    color: #dc3545;
    margin-top: 3px;
    margin-bottom: 2px;
    padding-left: 2px;
    line-height: 1.3;
    animation: fcFadeIn 0.2s ease;
}

.fc-fiscal-hint {
    display: block;
    margin: 4px 2px 0;
    padding: 4px 8px;
    border: 1px solid rgba(220, 53, 69, 0.28);
    border-radius: 6px;
    background: rgba(220, 53, 69, 0.07);
    color: #b42332;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    box-shadow: 0 3px 10px rgba(120, 24, 38, 0.08);
    animation: fcFadeIn 0.2s ease;
}

/* ── Animacion SHAKE para campos invalidos ─────────────────────── */
.fc-shake {
    animation: fcShake 0.5s ease;
}

@keyframes fcShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

@keyframes fcFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Labels de campos obligatorios ─────────────────────────────── */
.fc-required::after {
    content: ' *';
    color: #dc3545;
    font-weight: bold;
}

/* ── Resumen de errores en SweetAlert ──────────────────────────── */
.swal2-html-container ul {
    text-align: left;
}

.swal2-html-container ul li strong {
    color: #dc3545;
}

/* ── Focus mejorado para accesibilidad ─────────────────────────── */
.fc-invalid:focus,
.fc-fiscal-invalid:focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.35) !important;
    outline: none;
}

.fc-valid:focus,
.fc-fiscal-valid:focus {
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
    outline: none;
}

/* ── Transicion suave al cambiar de estado ─────────────────────── */
.form-control,
.custom-select,
input,
select,
textarea {
    transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

/* ── Tooltip de error en hover (complemento) ───────────────────── */
.fc-invalid[title] {
    cursor: help;
}

/* ── Tabla/grid con error (borde rojo en contenedor) ───────────── */
.fc-table-invalid {
    border: 2px solid #dc3545 !important;
    border-radius: 4px;
    box-shadow: 0 0 0 0.18rem rgba(220, 53, 69, 0.15);
}

.fc-table-valid {
    border: 2px solid #28a745 !important;
    border-radius: 4px;
    box-shadow: 0 0 0 0.18rem rgba(40, 167, 69, 0.10);
}

/* ── Ocultar iconos de validacion en campos dentro de input-group ── */
.input-group .fc-invalid,
.input-group .fc-fiscal-invalid,
.input-group .fc-valid,
.input-group .fc-fiscal-valid {
    background-image: none !important;
    padding-right: 12px !important;
}

/* ── Responsive: ajustar shake en movil ────────────────────────── */
@media (max-width: 576px) {
    .fc-error-msg {
        font-size: 11px;
    }

    @keyframes fcShake {
        0%, 100% { transform: translateX(0); }
        10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
        20%, 40%, 60%, 80% { transform: translateX(2px); }
    }
}