/* ============================================
   GesCorp Enterprise - Módulo: REQUERIMIENTOS
   Estilos específicos del módulo (NO globales)
   @version 1.0.0 - ISO 25010 Compliant
   ============================================ */

/* ---------- VARIABLES DEL MÓDULO ---------- */
:root {
    --req-pending: #ffc107;
    --req-approved: #28a745;
    --req-cancelled: #6c757d;
    --req-rejected: #dc3545;
    --req-high-priority: #dc3545;
    --req-medium-priority: #ffc107;
    --req-low-priority: #17a2b8;
}

/* ---------- BADGES DE ESTADO ---------- */
.badge-requ-P {
    background-color: var(--req-pending);
    color: #212529;
}
.badge-requ-A {
    background-color: var(--req-approved);
    color: #fff;
}
.badge-requ-C {
    background-color: var(--req-cancelled);
    color: #fff;
}
.badge-requ-R {
    background-color: var(--req-rejected);
    color: #fff;
}

/* ---------- PRIORIDADES ---------- */
.priority-high {
    border-left: 4px solid var(--req-high-priority);
    padding-left: 12px;
}
.priority-medium {
    border-left: 4px solid var(--req-medium-priority);
    padding-left: 12px;
}
.priority-low {
    border-left: 4px solid var(--req-low-priority);
    padding-left: 12px;
}

/* ---------- TABLA DE DETALLE ---------- */
#tblDetalleRequ tbody tr {
    transition: background-color 0.2s ease;
}
#tblDetalleRequ tbody tr:hover {
    background-color: rgba(64, 140, 188, 0.05);
}
#tblDetalleRequ .item-number {
    font-weight: 600;
    color: var(--primary-color);
    min-width: 40px;
    text-align: center;
}
#tblDetalleRequ .btn-remove-item {
    opacity: 0.7;
    transition: opacity 0.2s;
}
#tblDetalleRequ .btn-remove-item:hover {
    opacity: 1;
}

/* ---------- MODAL REQUERIMIENTO ---------- */
#modalRequ .modal-header {
    background: linear-gradient(
        135deg,
        var(--primary-color),
        var(--primary-dark)
    );
    color: white;
    border-bottom: none;
}
#modalRequ .modal-title {
    font-weight: 600;
}
#modalRequ .form-section-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-dark);
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 8px;
    margin: 20px 0 15px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ---------- TOTAL CALCULADO ---------- */
.total-calculado {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 8px;
    padding: 12px 20px;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary-dark);
    text-align: right;
    border: 1px solid #dee2e6;
}
.total-calculado .monto {
    font-size: 1.4rem;
    color: var(--primary-color);
}

/* ---------- ACCIONES EN TABLA PRINCIPAL ---------- */
.tblRequ .btn-action {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: transform 0.15s ease;
}
.tblRequ .btn-action:hover {
    transform: scale(1.1);
}
.tblRequ .btn-view {
    background-color: #17a2b8;
    color: white;
}
.tblRequ .btn-edit {
    background-color: #ffc107;
    color: #212529;
}
.tblRequ .btn-delete {
    background-color: #dc3545;
    color: white;
}
.tblRequ .btn-approve {
    background-color: #28a745;
    color: white;
}

/* ---------- RESPONSIVE MÓDULO ---------- */
@media (max-width: 768px) {
    #tblDetalleRequ .hide-mobile {
        display: none;
    }
    .total-calculado {
        text-align: center;
        margin-top: 15px;
    }
    .form-section-title {
        font-size: 0.85rem;
    }
}

/* ---------- ANIMACIONES ESPECÍFICAS ---------- */
@keyframes reqHighlight {
    0% {
        background-color: rgba(40, 167, 69, 0.2);
    }
    100% {
        background-color: transparent;
    }
}
.row-added {
    animation: reqHighlight 2s ease-out;
}

/* ---------- SELECT2 PERSONALIZADO PARA PRODUCTOS ---------- */
.select2-product .select2-selection__rendered {
    display: flex;
    align-items: center;
    gap: 8px;
}
.select2-product .product-code {
    font-weight: 600;
    color: var(--primary-color);
    background: #eef2ff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
}