/* =============================
     FORZAR VISIBILIDAD DE SALIDAS EN MÓVIL
     ============================= */
@media (max-width: 768px) {
    .salidas-main-container, .seccion-solicitudes, .tabla-solicitudes, .tabla-solicitudes tr, .tabla-solicitudes td, .tabla-solicitudes th {
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: auto !important;
        background: #fff !important;
        color: #222 !important;
    }
    .tabla-solicitudes {
        font-size: 0.98em !important;
        border-radius: 10px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        margin-bottom: 18px !important;
    }
    .tabla-solicitudes th, .tabla-solicitudes td {
        padding: 12px 8px !important;
        border-bottom: 1px solid #e5e7eb !important;
        text-align: left !important;
    }
    .tabla-solicitudes tr {
        margin-bottom: 8px !important;
        border-radius: 8px !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    }
}
/* =============================
     MEJORAS RESPONSIVE FILTROS SALIDAS
     ============================= */
@media (max-width: 768px) {
    .filtros-solicitudes {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 10px 4px !important;
    }
    .filtro-busqueda, .filtro-estado {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-bottom: 6px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
    }
    .filtro-busqueda input {
        font-size: 1em !important;
        min-height: 44px !important;
        padding: 10px 12px !important;
    }
    .filtros-estado-checkboxes {
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .checkbox-estado {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        font-size: 1em !important;
        padding: 8px 10px !important;
        margin-bottom: 2px !important;
    }
    .checkbox-estado input[type="checkbox"] {
        width: 22px !important;
        height: 22px !important;
        margin-right: 8px !important;
    }
}
/* ===================================================================
   ESTILOS PROFESIONALES PARA EL MÓDULO DE SALIDAS - VERSIÓN COMPACTA
   =================================================================== */

/* --- CONTENEDOR PRINCIPAL DE SALIDAS --- */

.btn-crear-salida {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-crear-salida:hover {
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-crear-salida:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* --- SECCIÓN DE SOLICITUDES (SIEMPRE VISIBLE) --- */
.seccion-solicitudes {
    background: #ffffff;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    padding: 15px 10px;
    box-shadow: var(--sombra-suave);
    margin-bottom: 15px;
    width: 100%;
}

.header-solicitudes {
    display: block;
    width: 100%;
    margin-bottom: 20px;
}

.titulo-y-crear {
    display: flex;
    align-items: center;
    gap: 15px;
}



.filtros-solicitudes {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
}

.filtro-busqueda {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 200px;
    max-width: 300px;
}

.filtro-busqueda input {
    flex: 1;
    padding: 6px 10px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.85em;
    transition: all 0.2s ease;
    background: white;
}

.filtro-busqueda input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.filtros-solicitudes label {
    font-weight: 600;
    color: var(--color-primario);
    font-size: 0.85em;
    margin-bottom: 0;
    white-space: nowrap;
}

.filtro-estado {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
}

.filtros-estado-checkboxes {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
    overflow-x: auto;
}

.checkbox-estado {
    display: flex;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 16px;
    transition: all 0.2s ease;
    font-size: 9px;
    user-select: none;
    border: 2px solid transparent;
    font-weight: 500;
    min-height: 28px;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 110px;
    max-width: 170px;
}

.checkbox-estado input[type="checkbox"] {
    flex: 0 0 20%;
    max-width: 20%;
}

.checkbox-estado span {
    flex: 1 1 80%;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Colores específicos para cada estado */
.checkbox-estado:nth-child(1) {
    /* Sin Aprobación */
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border-color: #f59e0b;
}

.checkbox-estado:nth-child(1):hover {
    background: linear-gradient(135deg, #fde68a, #fcd34d);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.checkbox-estado:nth-child(1) input:checked ~ span {
    font-weight: 700;
}

.checkbox-estado:nth-child(2) {
    /* Salida Rechazada */
    background: linear-gradient(135deg, #fef2f2, #fecaca);
    color: #dc2626;
    border-color: #ef4444;
}

.checkbox-estado:nth-child(2):hover {
    background: linear-gradient(135deg, #fecaca, #fca5a5);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.checkbox-estado:nth-child(3) {
    /* En Evento */
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1e40af;
    border-color: #3b82f6;
}

.checkbox-estado:nth-child(3):hover {
    background: linear-gradient(135deg, #bfdbfe, #93c5fd);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.checkbox-estado:nth-child(4) {
    /* Retorno Incompleto */
    background: linear-gradient(135deg, #f3e8ff, #ddd6fe);
    color: #7c3aed;
    border-color: #8b5cf6;
}

.checkbox-estado:nth-child(4):hover {
    background: linear-gradient(135deg, #ddd6fe, #c4b5fd);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.checkbox-estado:nth-child(5) {
    /* Retorno Completo */
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #166534;
    border-color: #22c55e;
}

.checkbox-estado:nth-child(5):hover {
    background: linear-gradient(135deg, #bbf7d0, #86efac);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

.checkbox-estado input[type="checkbox"] {
    cursor: pointer;
    transform: scale(1.0);
    margin: 0;
    border-radius: 3px;
}

.checkbox-estado input[type="checkbox"]:checked {
    transform: scale(1.1);
}

.filtro-estado[multiple] {
    height: auto;
    min-height: 80px;
    max-height: 120px;
    overflow-y: auto;
}

.filtro-estado[multiple] option {
    padding: 4px 8px;
    margin: 1px 0;
}

.filtro-estado[multiple] option:checked {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
}

.filtro-estado:focus {
    outline: none;
    border-color: var(--color-secundario);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.tabla-solicitudes {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border-radius: var(--radio-borde);
    overflow: hidden;
    box-shadow: var(--sombra-suave);
}

.tabla-solicitudes th {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    color: var(--color-primario);
    font-weight: 600;
    padding: 12px;
    text-align: left;
    border-bottom: 2px solid var(--color-borde);
    font-size: 0.9em;
}

.tabla-solicitudes td {
    padding: 12px;
    border-bottom: 1px solid #f1f3f4;
    vertical-align: top;
    font-size: 0.9em;
}

/* Columna de estado con ancho mejorado para 2 líneas */
.tabla-solicitudes th:nth-child(5),
.tabla-solicitudes td:nth-child(5) {
    width: 140px;
    min-width: 140px;
    max-width: 180px;
    text-align: center;
    padding: 12px 8px;
    vertical-align: middle;
    line-height: 1.2;
}

.tabla-solicitudes tr:hover {
    background-color: #f8f9fa;
}

.tabla-solicitudes .btn-revisar {
    background: linear-gradient(135deg, #27ae60, #229954);
    color: white;
    border: none;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 500;
    transition: all 0.2s ease;
    min-height: 28px;
}

.tabla-solicitudes .btn-revisar:hover {
    background: linear-gradient(135deg, #229954, #1e8449);
    transform: translateY(-1px);
}

.badge-pendiente {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7em;
    font-weight: 600;
}

.badge-aprobada {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7em;
    font-weight: 600;
}

/* Estados con diseño continuo y progresivo - Mismos colores que filtros */
.badge-sin-aprobacion,
.badge-rechazada,
.badge-en-evento,
.badge-retorno-incompleto,
.badge-retornado-completo {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.65em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    position: relative;
    overflow: visible;
    transition: all 0.3s ease;
    min-width: 80px;
    max-width: 140px;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    min-height: 28px;
    word-break: break-word;
    hyphens: auto;
    border: 2px solid;
}

/* Estado inicial - Sin Aprobación (Amarillo/Ámbar como filtros) */
.badge-sin-aprobacion {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border-color: #f59e0b;
}

/* .badge-sin-aprobacion::before {
    content: "";
    margin-right: 0px;
    color: #92400e;
    font-size: 0.9em;
} */

/* Estado de rechazo - Rojo como filtros */
.badge-rechazada {
    background: linear-gradient(135deg, #fef2f2, #fecaca);
    color: #dc2626;
    border-color: #ef4444;
}

/* .badge-rechazada::before {
    content: "";
    margin-right: 0px;
    font-size: 0.8em;
} */

/* Estado en progreso - En Evento (Azul como filtros) */
.badge-en-evento {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1e40af;
    border-color: #3b82f6;
}

/* .badge-en-evento::before {
    content: "";
    margin-right: 0px;
    font-size: 0.8em;
} */

/* Estado intermedio - Retorno Incompleto (Morado como filtros) */
.badge-retorno-incompleto {
    background: linear-gradient(135deg, #f3e8ff, #ddd6fe);
    color: #7c3aed;
    border-color: #8b5cf6;
}

/* .badge-retorno-incompleto::before {
    content: "";
    margin-right: 0px;
    color: #7c3aed;
    font-size: 0.8em;
} */

/* Estado final - Retornado Completo (Verde como filtros) */
.badge-retornado-completo {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #166534;
    border-color: #22c55e;
}

/* .badge-retornado-completo::before {
    content: "";
    margin-right: 0px;
    color: #166534;
    font-size: 0.8em;
} */

/* Efectos hover para mejor interactividad - Colores actualizados */
.badge-sin-aprobacion:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
    background: linear-gradient(135deg, #fde68a, #fcd34d);
}

.badge-rechazada:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
    background: linear-gradient(135deg, #fecaca, #fca5a5);
}

.badge-en-evento:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    background: linear-gradient(135deg, #bfdbfe, #93c5fd);
}

.badge-retorno-incompleto:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
    background: linear-gradient(135deg, #ddd6fe, #c4b5fd);
}

.badge-retornado-completo:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
    background: linear-gradient(135deg, #bbf7d0, #86efac);
}

/* Animación para estados activos */
.badge-en-evento,
.badge-retorno-incompleto {
    position: relative;
}

.badge-en-evento::before,
.badge-retorno-incompleto::before {
    animation: pulseIcon 2s ease-in-out infinite;
}

@keyframes pulseIcon {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* Regla general para todos los badges de estado para asegurar texto en múltiples líneas */
[class*="badge"], [class*="estado"], .estado-badge, .badge {
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    text-overflow: unset !important;
    overflow: visible !important;
    line-height: 1.3 !important;
    min-height: 28px !important;
    max-width: 160px !important;
}

.badge-desconocido {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 600;
}

/* Contenedor de estado con barra de progreso visual */
.estado-con-progreso {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.barra-progreso-estado {
    position: absolute;
    bottom: -3px;
    left: 0;
    height: 3px;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.badge-sin-aprobacion .barra-progreso-estado {
    width: 20%;
    background: linear-gradient(90deg, #95a5a6, #7f8c8d);
}

.badge-rechazada .barra-progreso-estado {
    width: 100%;
    background: linear-gradient(90deg, #e74c3c, #c0392b);
}

.badge-en-evento .barra-progreso-estado {
    width: 60%;
    background: linear-gradient(90deg, #3498db, #2980b9);
}

.badge-retorno-incompleto .barra-progreso-estado {
    width: 80%;
    background: linear-gradient(90deg, #f39c12, #e67e22);
}

.badge-retornado-completo .barra-progreso-estado {
    width: 100%;
    background: linear-gradient(90deg, #27ae60, #2ecc71);
}

/* Efecto de conexión visual entre estados */
.tabla-solicitudes td:nth-child(5) {
    position: relative;
}

.tabla-solicitudes td:nth-child(5)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -10px;
    width: 20px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(52, 152, 219, 0.3));
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tabla-solicitudes tr:hover td:nth-child(5)::after {
    opacity: 1;
}

/* Responsive para badges de estado */
@media (max-width: 768px) {
    .badge-sin-aprobacion,
    .badge-rechazada,
    .badge-en-evento,
    .badge-retorno-incompleto,
    .badge-retornado-completo {
        min-width: 50px;
        max-width: 70px;
        font-size: 0.6em;
        padding: 2px 6px;
        letter-spacing: 0.2px;
    }
    
    .badge-sin-aprobacion::before,
    .badge-rechazada::before,
    .badge-en-evento::before,
    .badge-retorno-incompleto::before,
    .badge-retornado-completo::before {
        font-size: 0.7em;
        margin-right: 1px;
    }
    
    /* Ocultar flechas decorativas en móvil para ahorrar espacio */
    .badge-rechazada::after,
    .badge-en-evento::after,
    .badge-retorno-incompleto::after,
    .badge-retornado-completo::after {
        display: none;
    }
}

/* Para pantallas muy pequeñas, mostrar solo iconos */
@media (max-width: 480px) {
    .badge-sin-aprobacion,
    .badge-rechazada,
    .badge-en-evento,
    .badge-retorno-incompleto,
    .badge-retornado-completo {
        min-width: 30px;
        max-width: 40px;
        padding: 2px 4px;
        font-size: 0;
    }
    
    .badge-sin-aprobacion::before,
    .badge-rechazada::before,
    .badge-en-evento::before,
    .badge-retorno-incompleto::before,
    .badge-retornado-completo::before {
        margin-right: 0;
        font-size: 1em;
    }
}

/* --- SECCIÓN DE APROBACIONES INTEGRADA --- */
.seccion-aprobaciones {
    background: #ffffff;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    padding: 20px;
    box-shadow: var(--sombra-suave);
}

.titulo-aprobaciones {
    margin: 0 0 20px 0;
    font-size: 1.2em;
    font-weight: 600;
    color: var(--color-primario);
    display: flex;
    align-items: center;
    gap: 8px;
}

.tabla-aprobaciones {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border-radius: var(--radio-borde);
    overflow: hidden;
    box-shadow: var(--sombra-suave);
}

.tabla-aprobaciones th {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    color: var(--color-primario);
    font-weight: 600;
    padding: 12px;
    text-align: left;
    border-bottom: 2px solid var(--color-borde);
    font-size: 0.9em;
}

.tabla-aprobaciones td {
    padding: 12px;
    border-bottom: 1px solid #f1f3f4;
    vertical-align: top;
    font-size: 0.9em;
}

.tabla-aprobaciones tr:hover {
    background-color: #f8f9fa;
}

.tabla-aprobaciones .btn-revisar {
    background: linear-gradient(135deg, #27ae60, #229954);
    color: white;
    border: none;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 500;
    transition: all 0.2s ease;
    min-height: 28px;
}

.tabla-aprobaciones .btn-revisar:hover {
    background: linear-gradient(135deg, #229954, #1e8449);
    transform: translateY(-1px);
}

/* --- FORMULARIO CONTAINER (OCULTO INICIALMENTE) --- */
.formulario-container {
    background: #ffffff;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    padding: 20px;
    margin-top: 20px;
    box-shadow: var(--sombra-suave);
}

/* --- MODAL DE REVISIÓN DE APROBACIONES --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-aprobacion-contenido {
    background: white;
    border-radius: var(--radio-borde);
    width: 95%;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.modal-header {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    padding: 15px 20px;
    border-radius: var(--radio-borde) var(--radio-borde) 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.2em;
    font-weight: 600;
}

.modal-cerrar {
    background: none;
    border: none;
    color: white;
    font-size: 1.5em;
    cursor: pointer;
    padding: 5px;
    line-height: 1;
}

.modal-body {
    padding: 20px;
}

.info-solicitud {
    background: #f8f9fa;
    padding: 15px;
    border-radius: var(--radio-borde);
    margin-bottom: 20px;
}

.info-solicitud p {
    margin: 8px 0;
    font-size: 0.9em;
}

.equipos-solicitud h4 {
    margin: 0 0 15px 0;
    font-size: 1.1em;
    color: var(--color-primario);
}

.tabla-equipos-revision {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.tabla-equipos-revision th,
.tabla-equipos-revision td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid var(--color-borde);
    font-size: 0.9em;
}

.tabla-equipos-revision th {
    background: #f8f9fa;
    font-weight: 600;
    color: var(--color-primario);
}

.cantidad-aprobada {
    width: 80px;
    padding: 5px;
    border: 1px solid var(--color-borde);
    border-radius: 4px;
    text-align: center;
}

.observaciones-aprobacion {
    margin-bottom: 20px;
}

.observaciones-aprobacion label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--color-primario);
}

.observaciones-aprobacion textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    resize: vertical;
    font-family: inherit;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px 20px;
    border-top: 1px solid var(--color-borde);
    background: #f8f9fa;
    border-radius: 0 0 var(--radio-borde) var(--radio-borde);
}

.btn-aprobar {
    background: linear-gradient(135deg, #27ae60, #229954);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: var(--radio-borde);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-aprobar:hover {
    background: linear-gradient(135deg, #229954, #1e8449);
    transform: translateY(-1px);
}

.btn-rechazar {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: var(--radio-borde);
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-rechazar:hover {
    background: linear-gradient(135deg, #c0392b, #a93226);
    transform: translateY(-1px);
}

/* --- VARIABLES CSS PARA MEJOR CONSISTENCIA --- */
:root {
    --color-primario: #2c3e50;
    --color-secundario: #3498db;
    --color-exito: #27ae60;
    --color-fondo: #f8f9fa;
    --color-borde: #e3e6ea;
    --sombra-suave: 0 2px 8px rgba(0,0,0,0.06);
    --sombra-hover: 0 3px 12px rgba(0,0,0,0.1);
    --radio-borde: 6px;
    --espaciado-compacto: 12px;
}

/* --- ENCABEZADO COMPACTO Y PROFESIONAL --- */
.salida-header-compacto {
    background: #ffffff;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    padding: 12px 16px;
    margin-bottom: 15px;
    box-shadow: var(--sombra-suave);
    position: relative;
}

.salida-header-compacto::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-secundario), var(--color-exito));
    border-radius: var(--radio-borde) var(--radio-borde) 0 0;
}

.titulo-principal-salida {
    margin: 0;
    font-size: 1.8em;
    font-weight: 600;
    color: var(--color-primario);
    display: flex;
    align-items: center;
    gap: 10px;
}

.titulo-principal-salida-pequeno {
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--color-primario);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Removemos el antiguo header burdeo */
.salida-header {
    display: none;
}

/* --- FORMULARIO PROFESIONAL COMPACTO --- */
.form-salida-profesional {
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 0;
}

.seccion-formulario {
    background: #fff;
    padding: var(--espaciado-compacto) 10px 15px 10px;
    border-radius: var(--radio-borde);
    box-shadow: var(--sombra-suave);
    border: 1px solid var(--color-borde);
    position: relative;
    transition: box-shadow 0.3s ease;
    width: 100%;
    margin: 0;
}

.seccion-formulario:hover {
    box-shadow: var(--sombra-hover);
}

.titulo-seccion {
    margin: 0 0 16px 0;
    color: var(--color-primario);
    font-size: 1.2em;
    font-weight: 600;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-secundario);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- CAMPOS DEL PROYECTO COMPACTOS --- */
.campos-proyecto {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 20px;
}

.campo-grupo {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.campo-grupo label {
    font-weight: 600;
    color: #34495e;
    font-size: 0.9em;
    margin-bottom: 4px;
}

.campo-grupo select {
    padding: 10px 12px;
    border: 2px solid #e3e6ea;
    border-radius: 6px;
    font-size: 0.95em;
    transition: all 0.3s ease;
    background-color: #fff;
    height: 44px;
}

.campo-grupo select:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

/* --- SELECTOR DE EQUIPOS FUSIONADO COMPACTO --- */
.selector-equipos-fusionado {
    display: grid;
    grid-template-columns: 2fr 120px 1fr auto;
    gap: 16px;
    align-items: end;
}

/* --- SELECTOR DE VEHICULOS MEJORADO Y MÁS INTUITIVO --- */
.selector-vehiculos-fusionado {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: end;
    max-width: 100%;
    background: linear-gradient(135deg, #f8fafc 0%, #e3f2fd 100%);
    padding: 16px;
    border-radius: 8px;
    border: 2px solid #e3f2fd;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.selector-vehiculos-fusionado .buscar-vehiculo {
    min-width: 250px;
}

.selector-vehiculos-fusionado .buscar-vehiculo label {
    font-weight: 600;
    color: #1976d2;
    font-size: 0.9em;
    margin-bottom: 6px;
    display: block;
}

.selector-vehiculos-fusionado .selector-vehiculo {
    font-size: 0.9em;
    padding: 8px 40px 8px 12px;
    min-height: 38px;
    border: 2px solid #90caf9;
    border-radius: 6px;
    background: white;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 280px;
}

.selector-vehiculos-fusionado .selector-vehiculo:focus {
    outline: none;
    border-color: #1976d2;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.selector-vehiculos-fusionado .btn-agregar {
    font-size: 0.9em;
    padding: 10px 20px;
    min-width: 140px;
    white-space: nowrap;
    background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 8px rgba(76, 175, 80, 0.3);
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.selector-vehiculos-fusionado .btn-agregar:hover {
    background: linear-gradient(135deg, #388e3c 0%, #2e7d32 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(76, 175, 80, 0.4);
}

.selector-vehiculos-fusionado .btn-agregar:active {
    transform: translateY(0);
}

.selector-vehiculos-fusionado .btn-agregar .btn-icono {
    font-size: 1.1em;
    font-weight: bold;
}

/* --- SECCIÓN DE VEHÍCULOS MEJORADA Y MÁS PROMINENTE --- */
.seccion-vehiculos {
    border: 2px solid #e3f2fd !important;
    background: linear-gradient(135deg, #fafafa 0%, #f0f8ff 100%) !important;
    position: relative;
}

.seccion-vehiculos::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #4caf50 0%, #2196f3 100%);
    border-radius: 4px 4px 0 0;
}

.titulo-seccion-vehiculos {
    margin: 8px 0 16px 0 !important;
    font-size: 1.2em !important;
    font-weight: 700 !important;
    color: #1976d2 !important;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: 6px;
    margin: -4px -4px 16px -4px;
    border-left: 5px solid #1976d2;
}

.titulo-seccion-vehiculos i {
    color: #4caf50;
    font-size: 1.1em;
}

/* --- CONTENEDOR DE VEHÍCULOS SELECCIONADOS MEJORADO --- */
.vehiculos-seleccionados-container {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 12px;
    min-height: 60px;
    margin-top: 12px;
}

.lista-vehiculos-compacta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vehiculo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #757575;
    font-style: italic;
    padding: 20px;
    background: #f9f9f9;
    border: 2px dashed #ddd;
    border-radius: 6px;
    text-align: center;
}

.vehiculo-placeholder i {
    color: #1976d2;
    font-size: 1.1em;
}

/* --- ESTILOS PARA VEHÍCULOS SELECCIONADOS --- */
.vehiculo-item-seleccionado {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.vehiculo-item-seleccionado:hover {
    border-color: #1976d2;
    box-shadow: 0 4px 8px rgba(25, 118, 210, 0.15);
    transform: translateY(-1px);
}

.vehiculo-info-salida {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.vehiculo-principal {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vehiculo-placa {
    font-weight: 600;
    color: #1976d2;
    font-size: 1em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.vehiculo-placa i {
    color: #4caf50;
}

.vehiculo-detalle-salida {
    color: #555;
    font-size: 0.9em;
    font-style: italic;
}

.vehiculo-datos-extra {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.dato-vehiculo {
    background: #e3f2fd;
    color: #1976d2;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.dato-vehiculo i {
    font-size: 0.9em;
}

.vehiculo-acciones {
    display: flex;
    gap: 6px;
    align-items: center;
}

.btn-ver-datos-vehiculo,
.btn-eliminar-vehiculo-salida {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 0.9em;
}

.btn-ver-datos-vehiculo {
    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(33, 150, 243, 0.3);
}

.btn-ver-datos-vehiculo:hover {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
    transform: scale(1.1);
    box-shadow: 0 3px 6px rgba(33, 150, 243, 0.4);
}

.btn-eliminar-vehiculo-salida {
    background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
    color: white;
    box-shadow: 0 2px 4px rgba(244, 67, 54, 0.3);
}

.btn-eliminar-vehiculo-salida:hover {
    background: linear-gradient(135deg, #d32f2f 0%, #c62828 100%);
    transform: scale(1.1);
    box-shadow: 0 3px 6px rgba(244, 67, 54, 0.4);
}

/* --- ANIMACIONES Y EFECTOS ESPECIALES --- */
.vehiculo-item-seleccionado {
    animation: slideInVehiculo 0.4s ease-out;
}

@keyframes slideInVehiculo {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.selector-vehiculos-fusionado {
    position: relative;
    overflow: hidden;
}

.selector-vehiculos-fusionado::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #4caf50, #2196f3, #4caf50);
    border-radius: 10px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.selector-vehiculos-fusionado:hover::after {
    opacity: 0.1;
}

/* Efecto de pulso en el botón agregar cuando está vacío */
.selector-vehiculos-fusionado .btn-agregar.pulse {
    animation: pulseAgregar 2s infinite;
}

@keyframes pulseAgregar {
    0% {
        box-shadow: 0 3px 8px rgba(76, 175, 80, 0.3);
    }
    50% {
        box-shadow: 0 3px 12px rgba(76, 175, 80, 0.6);
        transform: scale(1.02);
    }
    100% {
        box-shadow: 0 3px 8px rgba(76, 175, 80, 0.3);
    }
}

/* --- MEJORAS PARA EL SELECT DE VEHÍCULOS --- */
.selector-vehiculos-fusionado .selector-vehiculo {
    position: relative;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231976d2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.selector-vehiculos-fusionado .selector-vehiculo:hover {
    border-color: #1976d2;
}

/* Estilos para cuando no hay vehículos disponibles */
.selector-vehiculos-fusionado.sin-vehiculos .selector-vehiculo {
    background-color: #fafafa;
    color: #999;
    cursor: not-allowed;
}

.selector-vehiculos-fusionado.sin-vehiculos .btn-agregar {
    background: #e0e0e0;
    color: #999;
    cursor: not-allowed;
    box-shadow: none;
}

.selector-vehiculos-fusionado.sin-vehiculos .btn-agregar:hover {
    transform: none;
    background: #e0e0e0;
}

.info-stock-compacto {
    display: flex;
    flex-direction: column;
    gap: 0px;
    font-size: 0.78em;
}

.info-stock-compacto .stock-info-grupo {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.info-stock-compacto .equipo-info {
    font-style: italic;
    color: #7f8c8d;
    margin-top: 0px;
    font-size: 0.90em;
    line-height: 1;
}

/* --- SELECTOR DE EQUIPOS COMPACTO --- */
.selector-equipos {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    gap: 16px;
    align-items: center;
}

.buscar-equipo {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.buscar-equipo label {
    font-weight: 600;
    color: #34495e;
    font-size: 0.9em;
}

.cantidad-stock-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}

.campo-cantidad {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.campo-cantidad label {
    font-weight: 600;
    color: #34495e;
    font-size: 0.9em;
}

.campo-cantidad input {
    padding: 10px 12px;
    border: 2px solid #e3e6ea;
    border-radius: 6px;
    font-size: 0.95em;
    transition: all 0.3s ease;
    height: 44px;
}

.campo-cantidad input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.info-stock {
    display: flex;
    flex-direction: column;
    gap: 0px;
    font-size: 0.78em;
}

.stock-info-grupo {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.stock-bodega {
    color: #27ae60;
    font-weight: 600;
    font-size: 0.90em;
    background: none;
    padding: 0;
    margin: 0;
    line-height: 1;
}

.stock-evento {
    color: #f39c12;
    font-weight: 600;
    font-size: 0.90em;
    background: none;
    padding: 0;
    margin: 0;
    line-height: 1;
}

.stock-total {
    color: #3498db;
    font-weight: 600;
    font-size: 0.90em;
    background: none;
    padding: 0;
    margin: 0;
    line-height: 1;
}

.equipo-info {
    color: #7f8c8d;
    font-style: italic;
    margin-top: 0px;
    font-size: 0.90em;
    background: none;
    padding: 0;
    line-height: 1;
}

/* --- BUSCADOR MEJORADO COMPACTO --- */
.searchable-select-wrapper {
    position: relative;
    width: 100%;
}

.searchable-select-input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e3e6ea;
    border-radius: 6px;
    font-size: 0.95em;
    transition: all 0.3s ease;
    background-color: #fff;
    box-sizing: border-box;
    height: 44px;
}

.searchable-select-input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.searchable-select-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid #e3e6ea;
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.searchable-select-options.active {
    display: block;
}

.searchable-select-options > div {
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #f8f9fa;
    min-height: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.searchable-select-options > div:hover {
    background-color: #f8f9fa;
}

.searchable-select-options > div:last-child {
    border-bottom: none;
}

.opcion-equipo {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.opcion-equipo-linea {
    padding: 10px 12px;
    font-size: 0.9em;
    color: #2c3e50;
    font-weight: 500;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    pointer-events: none; /* Evita conflictos de eventos */
}

.equipo-nombre {
    font-weight: 600;
    color: #2c3e50;
    font-size: 1em;
}

.equipo-detalles {
    font-size: 0.85em;
    color: #7f8c8d;
}

.no-resultados {
    padding: 15px;
    text-align: center;
    color: #95a5a6;
    font-style: italic;
}

/* --- BOTÓN AGREGAR COMPACTO AZUL --- */
.btn-agregar {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(52, 152, 219, 0.25);
    height: 44px;
}

.btn-agregar:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(52, 152, 219, 0.35);
}

.btn-agregar:active {
    transform: translateY(0);
}

.btn-icono {
    font-size: 1.1em;
}

/* --- TABLA DE EQUIPOS SELECCIONADOS COMPACTA --- */
.tabla-equipos-container {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

.tabla-equipos-seleccionados {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.tabla-equipos-seleccionados thead {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
}

.tabla-equipos-seleccionados th {
    padding: 8px 6px;
    text-align: left;
    font-weight: 600;
    font-size: 0.85em;
    letter-spacing: 0.3px;
    color: #2c3e50 !important;
    background: #f8f9fa;
}

.tabla-equipos-seleccionados td {
    padding: 12px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}

.tabla-equipos-seleccionados tbody tr:hover {
    background-color: #f8f9fa;
}

.fila-vacia td {
    text-align: center;
    padding: 40px;
    color: #95a5a6;
    font-style: italic;
    background: #fafbfc;
}

.texto-vacio {
    color: #7f8c8d;
    font-size: 1.1em;
}

/* --- CELDAS ESPECÍFICAS DE LA TABLA --- */
.equipo-sku {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #34495e;
    font-size: 0.9em;
}

.equipo-descripcion {
    font-weight: 600;
    color: #2c3e50;
}

.equipo-marca {
    color: #7f8c8d;
    font-size: 0.95em;
}

/* --- ESTILOS PARA COLUMNA DE EQUIPOS EN TABLA DE SALIDAS --- */
.tabla-solicitudes-salidas td:nth-child(6) {
    vertical-align: top;
    line-height: 1.4;
    padding-top: calc(0.75rem + 1px);
}

.equipo-id {
    font-weight: 700;
    color: #1a1a1a;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    background: rgba(52, 73, 94, 0.05);
    padding: 1px 4px;
    border-radius: 3px;
    margin-right: 4px;
}

.badge-stock {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
    display: inline-block;
}

.input-cantidad {
    width: 80px;
    padding: 8px;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    text-align: center;
    font-weight: 600;
    transition: all 0.3s ease;
}

.input-cantidad:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.btn-eliminar-equipo {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.85em;
    margin-left: 3px;
}

.btn-eliminar-equipo:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
}

.btn-historial-equipo {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.85em;
}

.btn-historial-equipo:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.4);
}

.equipo-acciones {
    display: flex;
    gap: 3px;
    justify-content: center;
    align-items: center;
}

/* --- ANCHOS ESPECÍFICOS PARA COLUMNAS DE TABLA DE EQUIPOS SELECCIONADOS --- */
.tabla-equipos-seleccionados th:nth-child(1), /* SKU */
.tabla-equipos-seleccionados td:nth-child(1) {
    width: 9%; /* Reducido 40% (de ~15% a 9%) */
}

.tabla-equipos-seleccionados th:nth-child(2), /* Descripción */
.tabla-equipos-seleccionados td:nth-child(2) {
    width: 46%; /* Aumentado para recibir el espacio liberado */
}

.tabla-equipos-seleccionados th:nth-child(3), /* Marca */
.tabla-equipos-seleccionados td:nth-child(3) {
    width: 15%; /* Se mantiene similar */
}

.tabla-equipos-seleccionados th:nth-child(4), /* Stock Bodega */
.tabla-equipos-seleccionados td:nth-child(4) {
    width: 12%; /* Reducido 20% (de ~15% a 12%) */
    text-align: center;
}

.tabla-equipos-seleccionados th:nth-child(5), /* Cantidad */
.tabla-equipos-seleccionados td:nth-child(5) {
    width: 10%; /* Mantiene el mismo ancho (0% de cambio) */
    text-align: center;
}

.tabla-equipos-seleccionados th:nth-child(6), /* Acciones */
.tabla-equipos-seleccionados td:nth-child(6) {
    width: 8%; /* Reducido 20% (de ~10% a 8%) */
    text-align: center;
}

/* --- COLUMNAS ORDENABLES --- */
.sortable-column {
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.sortable-column:hover {
    background-color: rgba(52, 152, 219, 0.15) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(52, 152, 219, 0.2);
}

.sortable-column:active {
    transform: translateY(0);
}

.sort-indicator {
    margin-left: 6px;
    font-size: 0.85em;
    opacity: 0.4;
    font-weight: bold;
    transition: all 0.2s ease;
}

.sort-indicator::after {
    content: "⇅";
    color: #7f8c8d;
}

.sortable-column[data-sort="asc"] {
    background-color: rgba(46, 204, 113, 0.1) !important;
    color: #27ae60 !important;
}

.sortable-column[data-sort="asc"] .sort-indicator {
    opacity: 1;
    color: #27ae60;
    animation: sortPulse 0.3s ease;
}

.sortable-column[data-sort="asc"] .sort-indicator::after {
    content: "↑";
    font-weight: bold;
}

.sortable-column[data-sort="desc"] {
    background-color: rgba(231, 76, 60, 0.1) !important;
    color: #e74c3c !important;
}

.sortable-column[data-sort="desc"] .sort-indicator {
    opacity: 1;
    color: #e74c3c;
    animation: sortPulse 0.3s ease;
}

.sortable-column[data-sort="desc"] .sort-indicator::after {
    content: "↓";
    font-weight: bold;
}

/* Animación para los indicadores de ordenamiento */
@keyframes sortPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Tooltip para explicar el funcionamiento */
.sortable-column::before {
    content: "Clic: ↑ → ↓ → sin orden";
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: #2c3e50;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    pointer-events: none;
}

.sortable-column::after {
    content: "";
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #2c3e50;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.sortable-column:hover::before,
.sortable-column:hover::after {
    opacity: 1;
    visibility: visible;
}

/* --- ESTILOS PARA RESALTADO DE FILAS --- */
.fila-resaltada {
    background-color: rgba(255, 193, 7, 0.3) !important;
    border: 2px solid #ffc107 !important;
    border-radius: 4px;
    animation: pulsoResaltado 2s ease-in-out;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
}

.fila-resaltada td {
    background-color: transparent !important;
    font-weight: 600;
    color: #856404;
}

.input-resaltado {
    background-color: rgba(255, 193, 7, 0.2) !important;
    border: 2px solid #ffc107 !important;
    animation: pulsoInput 1.5s ease-in-out;
    box-shadow: 0 0 5px rgba(255, 193, 7, 0.7);
}

@keyframes pulsoResaltado {
    0%, 100% { 
        background-color: rgba(255, 193, 7, 0.3);
        transform: scale(1); 
    }
    50% { 
        background-color: rgba(255, 193, 7, 0.5);
        transform: scale(1.02); 
    }
}

@keyframes pulsoInput {
    0%, 100% { 
        background-color: rgba(255, 193, 7, 0.2);
        transform: scale(1); 
    }
    50% { 
        background-color: rgba(255, 193, 7, 0.4);
        transform: scale(1.05); 
    }
}

/* --- ESTILOS PARA MODAL DE EQUIPO DUPLICADO --- */
.swal-equipo-duplicado {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.swal-equipo-duplicado .swal2-title {
    color: #856404 !important;
    font-size: 1.5em !important;
}

.swal-equipo-duplicado .swal2-html-container {
    color: #495057 !important;
    font-size: 1em !important;
    line-height: 1.5 !important;
}

.swal-equipo-duplicado .swal2-confirm {
    background-color: #3498db !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
}

.swal-equipo-duplicado .swal2-confirm:hover {
    background-color: #2980b9 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
}

/* --- MODAL DE HISTORIAL --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modal-historial-contenido {
    background: white;
    border-radius: 12px;
    width: 95%;
    max-width: 95vw;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.modal-header {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    padding: 20px;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.4em;
}

.modal-cerrar {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.modal-cerrar:hover {
    background: rgba(255, 255, 255, 0.2);
}

.modal-body {
    padding: 25px;
}

.equipo-info-historial {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 25px;
}

.equipo-info-historial h4 {
    margin: 0 0 10px 0;
    color: #2c3e50;
    font-size: 1.3em;
}

.equipo-info-historial p {
    margin: 5px 0;
    color: #7f8c8d;
}

.stock-actual {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.stock-actual span {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 600;
}

.historial-movimientos h4 {
    color: #2c3e50;
    margin: 0 0 15px 0;
    font-size: 1.2em;
}

.tabla-historial {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tabla-historial th {
    background: #34495e;
    color: white;
    padding: 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.9em;
}

.tabla-historial td {
    padding: 12px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}

.tabla-historial tr:hover {
    background: #f8f9fa;
}

.tipo-salida {
    background: #e74c3c;
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.8em;
}

.tipo-retorno {
    background: #27ae60;
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.8em;
}

.estado-pendiente {
    background: #f39c12;
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.8em;
}

.estado-aprobado {
    background: #27ae60;
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.8em;
}

.estado-en-terreno {
    background: #3498db;
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.8em;
}

.estado-retornado {
    background: #95a5a6;
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.8em;
}

/* Nuevos badges para estados de retorno */
.badge-en-terreno {
    background: #3498db;
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 500;
}

.badge-retorno-incompleto {
    background: #f39c12;
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 500;
}

.badge-retornado {
    background: #27ae60;
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 500;
}

.sin-movimientos {
    text-align: center;
    color: #7f8c8d;
    font-style: italic;
    padding: 40px 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

/* --- RESUMEN Y TOTALES --- */
.resumen-equipos {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    text-align: center;
    font-size: 1.1em;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.3);
}

/* --- BOTONES DE ACCIÓN --- */
.acciones-formulario {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 30px 0;
    border-top: 1px solid #e9ecef;
    margin-top: 20px;
}

.btn-cancelar {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
    color: white;
    border: none;
    padding: 15px 15px;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 60px;
}

.btn-cancelar:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(149, 165, 166, 0.4);
}

.btn-enviar {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border: none;
    padding: 12px 12px;
    border-radius: 6px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 80px;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(52, 152, 219, 0.25);
}

.btn-enviar:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(52, 152, 219, 0.35);
}

.btn-enviar:active {
    transform: translateY(0);
}

/* --- RESPONSIVIDAD --- */
@media (max-width: 768px) {
    .campos-proyecto {
        grid-template-columns: 1fr;
    }
    
    .selector-equipos-fusionado {
        grid-template-columns: 1fr;
        gap: 12px;
        align-items: start;
    }
    
    .selector-equipos {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .cantidad-stock-info {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .btn-agregar {
        justify-self: center;
        width: 100%;
        justify-content: center;
    }
    
    .tabla-equipos-seleccionados {
        font-size: 0.9em;
    }
    
    .tabla-equipos-seleccionados th,
    .tabla-equipos-seleccionados td {
        padding: 8px 6px;
    }
    
    /* Mantener proporciones de columnas en móvil */
    .tabla-equipos-seleccionados th:nth-child(1), 
    .tabla-equipos-seleccionados td:nth-child(1) {
        width: 12%; /* SKU - ligeramente más ancho en móvil */
    }
    
    .tabla-equipos-seleccionados th:nth-child(2), 
    .tabla-equipos-seleccionados td:nth-child(2) {
        width: 40%; /* Descripción - sigue siendo protagonista */
    }
    
    .tabla-equipos-seleccionados th:nth-child(3), 
    .tabla-equipos-seleccionados td:nth-child(3) {
        width: 15%; /* Marca */
    }
    
    .tabla-equipos-seleccionados th:nth-child(4), 
    .tabla-equipos-seleccionados td:nth-child(4) {
        width: 13%; /* Stock Bodega */
    }
    
    .tabla-equipos-seleccionados th:nth-child(5), 
    .tabla-equipos-seleccionados td:nth-child(5) {
        width: 12%; /* Cantidad */
    }
    
    .tabla-equipos-seleccionados th:nth-child(6), 
    .tabla-equipos-seleccionados td:nth-child(6) {
        width: 8%; /* Acciones */
    }
    
    .acciones-formulario {
        flex-direction: column;
        align-items: center;
    }
    
    .btn-cancelar,
    .btn-enviar {
        width: 48%;
        max-width: 150px;
    }
    
    /* Botones compactos también más pequeños en móvil */
    .btn-cancelar-compacto,
    .btn-enviar-compacto {
        min-width: 60px; /* Aún más pequeño en móvil */
        max-width: 85px;
        padding: 8px 10px;
        font-size: 0.85em;
    }
}

/* --- ESTILOS PARA EL MÓDULO DE RETORNOS (MANTENIDOS) --- */
.modal-contenido-retorno { 
    background-color: #fefefe; 
    margin: auto; 
    padding: 20px 30px; 
    border: 1px solid #888; 
    width: 80%; 
    max-width: 600px; 
    border-radius: 8px; 
    position: relative; 
}

.item-retorno { 
    display: grid; 
    grid-template-columns: 3fr 1fr; 
    gap: 10px; 
    align-items: center; 
    margin-bottom: 15px; 
}

.item-retorno label { 
    font-weight: bold; 
    font-size: 14px; 
}

/* --- ANIMACIONES Y TRANSICIONES --- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.seccion-formulario {
    animation: fadeIn 0.5s ease-out;
}

/* --- MEJORAS DE ACCESIBILIDAD --- */
.btn-agregar:focus,
.btn-enviar:focus,
.btn-cancelar:focus {
    outline: 2px solid #3498db;
    outline-offset: 2px;
}

.searchable-select-input:focus,
.campo-grupo select:focus,
.campo-cantidad input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

/* --- BOTONES DE ACCIONES DE EQUIPOS --- */
.acciones-equipo {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
}

.acciones-equipo .btn-small {
    padding: 4px 8px !important;
    font-size: 14px !important;
    min-width: 32px !important;
    height: 32px !important;
    border-radius: 4px !important;
    border: 1px solid #ddd;
    background: #f8f9fa;
    color: #495057;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.acciones-equipo .btn-historial-equipo:hover {
    background: #007bff;
    color: white;
    border-color: #007bff;
    transform: translateY(-1px);
}

.acciones-equipo .btn-eliminar-equipo:hover {
    background: #dc3545;
    color: white;
    border-color: #dc3545;
    transform: translateY(-1px);
}

/* --- NUEVOS ESTILOS COMPACTOS --- */

/* Sección de formulario más compacta */
.seccion-formulario-compacta {
    background: #ffffff;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    padding: 20px;
    margin-bottom: 0; /* Sin margen para que se pegue con la tabla */
    box-shadow: var(--sombra-suave);
    position: relative;
}

/* Título pequeño */
.titulo-seccion-pequeno {
    margin: 0 0 16px 0;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--color-primario);
    border-left: 4px solid var(--color-secundario);
    padding-left: 12px;
}

/* Tabla pegada sin separación */
.tabla-equipos-pegada {
    margin-top: 16px;
    border-top: 1px solid var(--color-borde);
    padding-top: 0;
}

/* Resumen de equipos compacto */
.resumen-equipos-compacto {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: #f8f9fa;
    border: 1px solid var(--color-borde);
    border-top: none;
    border-radius: 0 0 var(--radio-borde) var(--radio-borde);
    font-size: 0.85em;
}

.total-equipos-pequeno {
    color: var(--color-primario);
    font-weight: 500;
}

.total-costo-pequeno {
    color: var(--color-exito);
    font-weight: 600;
}

/* Botones de acción compactos y profesionales */
.acciones-formulario-compactas {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 0;
    margin-top: 20px;
}

.btn-cancelar-compacto,
.btn-enviar-compacto {
    padding: 10px 12px; /* Reducido padding horizontal de 20px a 12px */
    border: none;
    border-radius: 5px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 72px; /* Reducido 40%: 120px * 0.6 = 72px */
    max-width: 100px; /* Límite máximo para mantener compacto */
    height: 40px;
}

.btn-cancelar-compacto {
    background: #6c757d;
    color: white;
}

.btn-cancelar-compacto:hover {
    background: #5a6268;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

.btn-enviar-compacto {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    box-shadow: 0 2px 6px rgba(52, 152, 219, 0.25);
}

.btn-enviar-compacto:hover {
    background: linear-gradient(135deg, #2980b9, #3498db);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.35);
}

/* ===================================================================
   ESTILOS PARA BOTONES DE ACCIONES COMPACTAS
   =================================================================== */

.acciones-compactas {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    align-items: stretch;
    min-width: 160px;
}

.fila-botones-superior,
.fila-botones-inferior {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

.btn-accion {
    border: none;
    background: transparent;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 65px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex: 1;
}

.btn-accion i {
    font-size: 12px;
}

.btn-accion:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.btn-accion:active {
    transform: scale(0.95);
}

.btn-accion:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-accion:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Estilos específicos por tipo de botón */
.btn-pdf {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
    padding: 4px 10px;
    min-height: 28px;
}

.btn-pdf:hover:not(:disabled) {
    background: linear-gradient(135deg, #c82333, #dc3545);
}

.btn-editar {
    background: linear-gradient(135deg, #ffc107, #e0a800);
    color: #212529;
    padding: 4px 10px;
    min-height: 28px;
}

.btn-editar:hover:not(:disabled) {
    background: linear-gradient(135deg, #e0a800, #ffc107);
}

.btn-eliminar {
    background: linear-gradient(135deg, #6f42c1, #5a359b);
    color: white;
    padding: 4px 10px;
    min-height: 28px;
}

.btn-eliminar:hover:not(:disabled) {
    background: linear-gradient(135deg, #5a359b, #6f42c1);
}

/* Regla general para todos los botones de acciones en tablas */
.tabla-solicitudes td button,
.tabla-aprobaciones td button,
table td .btn {
    padding: 4px 10px !important;
    min-height: 28px !important;
    font-size: 0.8em !important;
    line-height: 1.2 !important;
}

.btn-revisar {
    background: linear-gradient(135deg, #17a2b8, #138496);
    color: white;
}

.btn-revisar:hover:not(:disabled) {
    background: linear-gradient(135deg, #138496, #17a2b8);
}

/* Tooltips para accesibilidad */
.btn-accion[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
}

.btn-accion[title]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(1px);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #333;
    z-index: 1000;
    pointer-events: none;
}

/* ===================================================================
   ESTILOS PARA EL MODAL DE EDICIÓN MEJORADO
   =================================================================== */

.modal-edicion-contenido {
    background: white;
    border-radius: 12px;
    width: 78%;
    max-width: 78vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    position: relative;
}

.modal-edicion-contenido .modal-header {
    background: linear-gradient(135deg, #8e44ad, #9b59b6);
    color: white;
    padding: 20px 25px;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
}

.modal-edicion-contenido .modal-header h3 {
    margin: 0;
    font-size: 1.4em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.solicitud-info {
    font-size: 0.9em;
    opacity: 0.9;
    background: rgba(255, 255, 255, 0.15);
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 500;
}

.modal-edicion-contenido .modal-cerrar {
    position: absolute;
    top: 15px;
    right: 20px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.modal-edicion-contenido .modal-cerrar:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Formulario de edición */
.form-edicion-salida {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.seccion-info-basica {
    background: #f8f9fa;
    padding: 25px;
    border-bottom: 1px solid #e9ecef;
}

.seccion-info-basica h4 {
    margin: 0 0 20px 0;
    color: #2c3e50;
    font-size: 1.1em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.campos-fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Campos de solo lectura en el modal de edición */
.campo-readonly {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.95em;
    color: #495057;
    min-height: 20px;
    display: flex;
    align-items: center;
    font-weight: 500;
    position: relative;
}

.campo-readonly::after {
    content: "📌";
    position: absolute;
    right: 10px;
    color: #6c757d;
    font-size: 0.8em;
}

/* Sección de equipos en el modal */
.seccion-equipos-edicion {
    padding: 25px;
}

.seccion-equipos-edicion h4 {
    margin: 0 0 20px 0;
    color: #2c3e50;
    font-size: 1.1em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid #3498db;
    padding-bottom: 8px;
}

/* Búsqueda de equipos en el modal */
.busqueda-equipos-edicion {
    display: grid;
    grid-template-columns: 2fr 120px auto;
    gap: 15px;
    align-items: end;
    margin-bottom: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.campo-busqueda {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

.campo-busqueda .searchable-select-wrapper {
    position: relative;
    width: 100%;
}

.campo-busqueda .searchable-select-input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e3e6ea;
    border-radius: 6px;
    font-size: 0.95em;
    transition: all 0.3s ease;
    background-color: #fff;
    box-sizing: border-box;
    height: 44px;
}

.campo-busqueda .searchable-select-input:focus {
    outline: none;
    border-color: #8e44ad;
    box-shadow: 0 0 0 3px rgba(142, 68, 173, 0.1);
}

.campo-busqueda .searchable-select-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid #e3e6ea;
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.campo-cantidad-edicion {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.campo-cantidad-edicion input {
    padding: 10px 12px;
    border: 2px solid #e3e6ea;
    border-radius: 6px;
    font-size: 0.95em;
    transition: all 0.3s ease;
    height: 44px;
}

.campo-cantidad-edicion input:focus {
    outline: none;
    border-color: #8e44ad;
    box-shadow: 0 0 0 3px rgba(142, 68, 173, 0.1);
}

.btn-agregar-equipo {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    white-space: nowrap;
}

.btn-agregar-equipo:hover {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(39, 174, 96, 0.3);
}

/* Información de stock en el modal */
.info-stock-container {
    background: #e8f5e8;
    border: 1px solid #c3e6c3;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

.stock-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stock-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.equipo-seleccionado {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.95em;
}

.stock-detalle {
    display: flex;
    gap: 15px;
    font-size: 0.9em;
}

.stock-bodega {
    color: #27ae60;
    font-weight: 600;
}

.stock-evento {
    color: #3498db;
    font-weight: 600;
}

.stock-total {
    color: #e67e22;
    font-weight: 600;
}

.stock-disponible {
    color: #27ae60;
    font-weight: 600;
    font-size: 0.9em;
}

/* Tabla de equipos en el modal */
.tabla-equipos-edicion-container {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e9ecef;
}

.tabla-equipos-edicion {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.tabla-equipos-edicion thead {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}

.tabla-equipos-edicion th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.9em;
    color: #2c3e50;
    letter-spacing: 0.3px;
    border-bottom: 2px solid #dee2e6;
}

.tabla-equipos-edicion td {
    padding: 12px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
    font-size: 0.9em;
}

.tabla-equipos-edicion tbody tr:hover {
    background-color: #f8f9fa;
}

.tabla-equipos-edicion tbody tr:last-child td {
    border-bottom: none;
}

.input-cantidad-edicion {
    width: 80px;
    padding: 6px 8px;
    border: 2px solid #e9ecef;
    border-radius: 4px;
    text-align: center;
    font-weight: 600;
    transition: all 0.3s ease;
}

.input-cantidad-edicion:focus {
    outline: none;
    border-color: #8e44ad;
    box-shadow: 0 0 0 2px rgba(142, 68, 173, 0.2);
}

.btn-eliminar-equipo-edicion {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1em;
    margin-left: 5px;
}

.btn-eliminar-equipo-edicion:hover {
    background: linear-gradient(135deg, #c0392b, #e74c3c);
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
}

.btn-historial-equipo-edicion {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1em;
    margin-right: 5px;
}

.btn-historial-equipo-edicion:hover {
    background: linear-gradient(135deg, #2980b9, #3498db);
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.4);
}

/* Botón de historial deshabilitado */
.btn-historial-disabled {
    background: #e9ecef;
    color: #6c757d;
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 1.1em;
    margin-right: 5px;
    cursor: not-allowed;
    opacity: 0.6;
    display: inline-block;
}

/* Opciones del dropdown en el modal */
.opcion-equipo-edicion {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #f8f9fa;
}

.opcion-equipo-edicion:hover {
    background-color: #f8f9fa;
}

.opcion-equipo-edicion:last-child {
    border-bottom: none;
}

.option-header {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
}

.option-name {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.95em;
    text-align: left;
}

.option-brand {
    color: #7f8c8d;
    font-size: 0.85em;
    text-align: left;
}

.option-detail {
    font-size: 0.8em;
    color: #95a5a6;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    align-items: flex-start;
}

.option-sku {
    color: #34495e;
    font-weight: 500;
    text-align: left;
}

.option-stock {
    color: #27ae60;
    font-weight: 600;
    text-align: left;
}

/* --- ESTILOS PARA INFORMACIÓN DE STOCK EN TABLA --- */
.stock-info-tabla {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stock-principal {
    color: #28a745;
    font-weight: 600;
}

.stock-detalle-mini {
    color: #6c757d;
    font-size: 0.8em;
    line-height: 1.2;
}

.acciones-tabla {
    display: flex;
    gap: 5px;
    align-items: center;
    width: 100%; /* Ocupar todo el ancho de la celda */
    height: 100%; /* Ocupar toda la altura de la celda */
    padding: 12px; /* Aplicar el padding que antes tenía la celda */
    box-sizing: border-box; /* Incluir padding en el cálculo del ancho */
}

.btn-historial-equipo-edicion,
.btn-eliminar-equipo-edicion {
    background: none;
    border: none;
    padding: 4px 6px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-historial-equipo-edicion {
    color: #007bff;
    background-color: #e3f2fd;
}

.btn-historial-equipo-edicion:hover {
    background-color: #bbdefb;
    transform: scale(1.1);
}

.btn-eliminar-equipo-edicion {
    color: #dc3545;
    background-color: #ffebee;
}

.btn-eliminar-equipo-edicion:hover {
    background-color: #ffcdd2;
    transform: scale(1.1);
}

/* --- MEJORAS EN OPCIONES DEL BUSCADOR --- */
.searchable-option {
    border-left: 3px solid transparent;
}

.searchable-option:hover {
    border-left-color: #007bff;
    background-color: #f8f9fa !important;
}

/* --- ESTILOS ESPECÍFICOS PARA OPCIONES DE EDICIÓN --- */
.opcion-equipo-edicion {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    text-align: left;
}

.opcion-equipo-edicion .option-header {
    width: 100%;
}

.opcion-equipo-edicion .option-detail {
    width: 100%;
}

.opcion-equipo-edicion .option-name,
.opcion-equipo-edicion .option-brand,
.opcion-equipo-edicion .option-sku,
.opcion-equipo-edicion .option-stock {
    display: block;
    width: 100%;
    text-align: left;
}

/* Resumen en el modal */
.resumen-edicion {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 12px 16px;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    font-size: 0.9em;
    border-radius: 0 0 8px 8px;
}

.total-equipos-edicion {
    color: #2c3e50;
    font-weight: 600;
}

/* Footer del modal */
.modal-edicion-contenido .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 25px;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
    border-radius: 0 0 12px 12px;
}

.modal-edicion-contenido .btn-cancelar {
    background: #6c757d;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.modal-edicion-contenido .btn-cancelar:hover {
    background: #5a6268;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

.modal-edicion-contenido .btn-guardar {
    background: linear-gradient(135deg, #8e44ad, #9b59b6);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(142, 68, 173, 0.25);
}

.modal-edicion-contenido .btn-guardar:hover {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(142, 68, 173, 0.35);
}

/* Estilos para mensajes de validación */
.no-results {
    padding: 15px;
    text-align: center;
    color: #95a5a6;
    font-style: italic;
    background: #f8f9fa;
    border-radius: 4px;
}

/* Responsividad para el modal de edición */
@media (max-width: 768px) {
    .modal-edicion-contenido {
        width: 95%;
        max-height: 95vh;
        margin: 10px;
    }
    
    .campos-fila {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .busqueda-equipos-edicion {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .tabla-equipos-edicion {
        font-size: 0.85em;
    }
    
    .tabla-equipos-edicion th,
    .tabla-equipos-edicion td {
        padding: 8px 6px;
    }
    
    .modal-edicion-contenido .modal-footer {
        flex-direction: column;
        gap: 10px;
    }
    
    .modal-edicion-contenido .btn-cancelar,
    .modal-edicion-contenido .btn-guardar {
        width: 100%;
        justify-content: center;
    }
}

/* ===================================================================
   MEJORAS ESPECÍFICAS PARA LA TABLA DE SOLICITUDES DE SALIDA
   =================================================================== */

/* Reducir tamaño de fuente general de la tabla */
.tabla-solicitudes th,
.tabla-solicitudes td {
    font-size: 0.85em; /* Reducido de 0.9em a 0.85em (1px menos aproximadamente) */
}

/* Ajustar anchos específicos de columnas */
.tabla-solicitudes th:nth-child(1), /* ID */
.tabla-solicitudes td:nth-child(1) {
    width: 60px;
    max-width: 60px;
    text-align: center;
    font-weight: 600;
}

.tabla-solicitudes th:nth-child(2), /* Proyecto */
.tabla-solicitudes td:nth-child(2) {
    width: 21.11%; /* Aumentado con el 15% del ancho de Vehículos (de 17% a 21.11%) */
    min-width: 130px;
}

.tabla-solicitudes th:nth-child(3), /* Encargado */
.tabla-solicitudes td:nth-child(3) {
    width: 10%;
    min-width: 120px;
}

.tabla-solicitudes th:nth-child(4), /* Fecha Solicitud */
.tabla-solicitudes td:nth-child(4) {
    width: 8.5%; /* Reducido de 10% a 8.5% (-15% = -1.5%) */
    min-width: 85px; /* Reducido proporcionalmente */
}

.tabla-solicitudes th:nth-child(5), /* Estado */
.tabla-solicitudes td:nth-child(5) {
    width: 12%; /* Aumentado 10% (de 10% a 12%) tomado de acciones */
    min-width: 130px;
    max-width: 160px;
    text-align: center;
}

.tabla-solicitudes th:nth-child(6), /* Equipos */
.tabla-solicitudes td:nth-child(6) {
    width: 12.25%; /* Reducido 50% del ancho anterior (de 24.5% a 12.25%) */
    min-width: 90px; /* Reducido proporcionalmente */
}

.tabla-solicitudes th:nth-child(7), /* Vehículos */
.tabla-solicitudes td:nth-child(7) {
    width: 23.26%; /* Reducido 15% del ancho anterior (de 27.37% a 23.26%) */
    min-width: 150px; /* Reducido proporcionalmente */
}

.tabla-solicitudes th:nth-child(8), /* Acciones */
.tabla-solicitudes td:nth-child(8) {
    width: 11.88%; /* Aumentado de 10.2% a 11.88% (+1.68% tomado de vehículos) */
    min-width: 85px; /* Aumentado proporcionalmente */
    padding: 2px !important; /* Pequeño padding para mejor visualización */
}

/* Mantener padding normal en el header de acciones */
.tabla-solicitudes th:nth-child(8) {
    padding: 12px !important;
}

/* Reducir tamaño de botones de acción específicamente en tabla de solicitudes */
.tabla-solicitudes .btn-accion {
    font-size: 9px !important; /* Restaurado a tamaño legible */
    padding: 3px 4px !important; /* Padding optimizado para aprovechar espacio */
    min-width: auto !important; /* Eliminar min-width fijo para que se adapten */
    flex: 1; /* Hacer que los botones se expandan para llenar el espacio */
    letter-spacing: 0.1px !important; /* Ajustado para mejor legibilidad en espacio reducido */
    margin: 0 !important; /* Eliminar margen para maximizar espacio */
    text-align: center; /* Centrar texto en los botones */
}

.tabla-solicitudes .btn-accion i {
    font-size: 9px !important; /* Reducido de 10px a 9px */
}

/* Ajustar contenedor de acciones para la tabla específica */
.tabla-solicitudes .acciones-compactas {
    width: 100%; /* Ocupar todo el ancho disponible de la columna */
    min-width: 100%; /* Asegurar que use todo el espacio */
    gap: 1px; /* Gap ligeramente mayor ya que tenemos más espacio */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    padding: 1px; /* Pequeño padding para mejor visualización */
}

.tabla-solicitudes .fila-botones-superior,
.tabla-solicitudes .fila-botones-inferior {
    gap: 4px; /* Gap aumentado para mejor separación visual */
    display: flex;
    justify-content: stretch; /* Cambiar de center a stretch para llenar el espacio */
    flex-wrap: nowrap;
}

/* Estilo específico para botones PDF en la tabla de solicitudes - MÁS PEQUEÑOS */
.tabla-solicitudes .btn-pdf-moderno {
    flex: 0 0 auto; /* No expandir, tamaño fijo */
    min-width: 54px !important; /* Reducido 10% (60px * 0.9) */
    max-width: 63px !important; /* Reducido 10% (70px * 0.9) */
    font-size: 8px !important; /* Reducido 10% (9px * 0.9 ≈ 8px) */
    padding: 2.7px 5.4px !important; /* Reducido 10% (3px * 0.9, 6px * 0.9) */
    gap: 1.8px !important; /* Reducido 10% (2px * 0.9) */
    height: auto !important; /* Permitir altura automática más compacta */
}

.tabla-solicitudes .btn-pdf-moderno .texto-btn {
    display: none; /* Ocultar texto en espacios reducidos */
}

.tabla-solicitudes .btn-pdf-moderno .icono-pdf {
    font-size: 10.8px; /* Reducido 10% (12px * 0.9) */
}

/* Estilo específico para botón de notas en la tabla de solicitudes - EXPANDIDO */
.tabla-solicitudes .btn-notas {
    border: none !important;
    background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%) !important;
    color: #212529 !important;
    font-size: 9px !important; /* Reducido 10% (10px * 0.9) */
    font-weight: 600 !important; /* Añadir peso de fuente */
    padding: 3.6px 12.6px !important; /* Reducido 10% (4px * 0.9, 14px * 0.9) */
    border-radius: 4.5px !important; /* Reducido 10% (5px * 0.9) */
    cursor: pointer !important;
    min-width: 51.84px !important; /* Reducido 20% adicional (64.8px * 0.8) */
    width: auto !important; /* Permitir que se expanda más */
    max-width: 64.8px !important; /* Reducido 20% adicional (81px * 0.8) */
    flex: none !important; /* Cambiar para no expandirse automáticamente */
    letter-spacing: 0.18px !important; /* Reducido 10% (0.2px * 0.9) */
    margin: 0 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Igual que PDF */
    text-align: center !important;
    text-transform: uppercase !important; /* Igual que PDF */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2.7px !important; /* Reducido 10% (3px * 0.9) */
    box-shadow: 0 0.9px 3.6px rgba(255, 193, 7, 0.3) !important; /* Reducida 10% (1px * 0.9, 4px * 0.9) */
    position: relative !important;
    overflow: hidden !important;
    flex-shrink: 1 !important; /* Permitir que se reduzca si es necesario */
    height: auto !important; /* Permitir altura automática */
    white-space: nowrap !important;
}

/* Efecto de brillo para botón de notas (similar a PDF) */
.tabla-solicitudes .btn-notas::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.tabla-solicitudes .btn-notas:hover::before {
    left: 100%;
}

.tabla-solicitudes .btn-notas:hover {
    background: linear-gradient(135deg, #e0a800 0%, #d4a200 100%) !important;
    color: #000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4) !important;
}

/* Estilos adicionales para botones PDF compactos en espacios reducidos */
@media (max-width: 1200px) {
    .tabla-solicitudes .btn-pdf-moderno {
        min-width: 45px !important; /* Reducido 10% (50px * 0.9) */
        max-width: 49.5px !important; /* Reducido 10% (55px * 0.9) */
        padding: 1.8px 3.6px !important; /* Reducido 10% (2px * 0.9, 4px * 0.9) */
        font-size: 7.2px !important; /* Reducido 10% (8px * 0.9) */
    }
    
    .tabla-solicitudes .btn-pdf-moderno .icono-pdf {
        font-size: 9px; /* Reducido 10% (10px * 0.9) */
    }
    
    /* Botón de notas también se adapta en pantallas medianas */
    .tabla-solicitudes .btn-notas {
        font-size: 8.1px !important; /* Reducido 10% (9px * 0.9) */
        padding: 2.7px 9px !important; /* Reducido 10% (3px * 0.9, 10px * 0.9) */
        min-width: 43.2px !important; /* Reducido 20% adicional (54px * 0.8) */
        max-width: 54px !important; /* Reducido 20% adicional (67.5px * 0.8) */
    }
}

/* Mostrar solo ícono en pantallas muy pequeñas */
@media (max-width: 768px) {
    .tabla-solicitudes .btn-pdf-moderno {
        min-width: 27px !important; /* Reducido 10% (30px * 0.9) */
        max-width: 31.5px !important; /* Reducido 10% (35px * 0.9) */
        padding: 3.6px !important; /* Reducido 10% (4px * 0.9) */
    }
    
    .tabla-solicitudes .btn-pdf-moderno .icono-pdf {
        font-size: 12.6px; /* Reducido 10% (14px * 0.9) */
    }
    
    /* Botón de notas en pantallas pequeñas */
    .tabla-solicitudes .btn-notas {
        font-size: 7.2px !important; /* Reducido 10% (8px * 0.9) */
        padding: 2.7px 7.2px !important; /* Reducido 10% (3px * 0.9, 8px * 0.9) */
        min-width: 34.56px !important; /* Reducido 20% adicional (43.2px * 0.8) */
        max-width: 43.2px !important; /* Reducido 20% adicional (54px * 0.8) */
    }
}

/* ===================================================================
   ESTILOS PARA BÚSQUEDA DE SOLICITUDES
   =================================================================== */

/* Mejorar la distribución de filtros */
.filtros-solicitudes {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.filtro-busqueda,
.filtro-estado {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filtro-busqueda {
    flex: 1;
    min-width: 250px;
}

.filtro-estado {
    min-width: 150px;
}

.campo-busqueda-solicitudes {
    padding: 8px 12px;
    border: 2px solid #e1e5e9;
    border-radius: 6px;
    font-size: 0.9em;
    transition: all 0.2s ease;
    background: white;
    width: 100%;
}

.campo-busqueda-solicitudes:focus {
    outline: none;
    border-color: var(--color-secundario);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
    background: #fafbfc;
}

.campo-busqueda-solicitudes::placeholder {
    color: #6c757d;
    font-style: italic;
}

/* Resaltar texto encontrado en la tabla */
.busqueda-highlight {
    background-color: #fff3cd;
    color: #856404;
    padding: 1px 2px;
    border-radius: 2px;
    font-weight: 600;
}

/* Mensaje cuando no hay resultados de búsqueda */
.no-resultados-busqueda {
    text-align: center;
    color: #6c757d;
    font-style: italic;
    padding: 20px;
}

/* Responsive para filtros */
@media (max-width: 768px) {
    .filtros-solicitudes {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 6px;
        padding: 8px 10px;
        overflow-x: auto;
    }
    
    .filtro-busqueda {
        flex: 0 0 150px;
        min-width: 150px;
        max-width: 150px;
    }
    
    .filtro-estado {
        flex: 1 1 auto;
        min-width: unset;
    }
    
    .checkbox-estado {
        font-size: 8px;
        padding: 3px 6px;
        min-height: 26px;
        border-radius: 12px;
        min-width: 95px;
        max-width: 140px;
    }
    
    .checkbox-estado input[type="checkbox"] {
        flex: 0 0 20%;
        max-width: 20%;
    }

    .checkbox-estado span {
        flex: 1 1 80%;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .filtros-estado-checkboxes {
        gap: 3px;
    }
}

/* ===================================================================
   ESTILOS PARA MODAL DE REVISIÓN MEJORADO
   =================================================================== */

/* Modal de revisión con funcionalidades avanzadas */
.info-solicitud-mejorada {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 25px; /* Aumentado de 20px a 25px */
    margin-bottom: 25px; /* Aumentado de 20px a 25px */
}

.header-solicitud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #dee2e6;
}

.header-solicitud h3 {
    margin: 0;
    color: #2c3e50;
    font-size: 1.4em;
    font-weight: 600;
}

.estado-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 0.65em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    position: relative;
    transition: all 0.3s ease;
    min-width: 70px;
    max-width: 160px;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid transparent;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-word;
    text-align: center;
    line-height: 1.3;
    min-height: 32px;
    overflow: visible;
}

.info-basica {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Aumentado de 200px a 220px */
    gap: 18px; /* Aumentado de 15px a 18px */
    margin-top: 18px; /* Aumentado de 15px a 18px */
}

.campo-info {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Aumentado de 5px a 8px */
}

.campo-info .label {
    font-weight: 600;
    color: #6c757d;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.campo-info .valor {
    color: #2c3e50;
    font-size: 1em;
    font-weight: 500;
}

/* Sección de equipos en revisión */
.seccion-equipos-revisar {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
}

.header-equipos {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-equipos h4 {
    margin: 0;
    font-size: 1.2em;
    font-weight: 600;
}

.btn-agregar-equipo {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-agregar-equipo:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
}

/* Buscador de equipos */
.buscador-equipos {
    padding: 15px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.campo-busqueda {
    position: relative;
    width: 100%;
}

.campo-busqueda input {
    width: 100%;
    padding: 10px 15px;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    font-size: 0.95em;
    transition: border-color 0.3s ease;
}

.campo-busqueda input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.dropdown-equipos {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 6px 6px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.dropdown-item-equipo {
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f1f3f4;
    transition: background-color 0.2s ease;
}

.dropdown-item-equipo:hover {
    background: #f8f9fa;
}

.dropdown-item-equipo:last-child {
    border-bottom: none;
}

.equipo-dropdown-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.equipo-dropdown-info .nombre {
    font-weight: 600;
    color: #2c3e50;
}

.equipo-dropdown-info .marca {
    color: #6c757d;
    font-size: 0.9em;
}

.equipo-dropdown-info .disponible {
    color: #28a745;
    font-size: 0.85em;
    font-weight: 500;
}

.dropdown-item-vacio {
    padding: 12px 15px;
    color: #6c757d;
    font-style: italic;
    text-align: center;
}

/* Tabla de equipos en revisión */
.tabla-equipos-revisar {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.tabla-equipos-revisar th {
    background: #f8f9fa;
    color: #495057;
    font-weight: 600;
    padding: 12px 8px;
    text-align: left;
    border-bottom: 2px solid #dee2e6;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tabla-equipos-revisar td {
    padding: 12px 8px;
    border-bottom: 1px solid #f1f3f4;
    vertical-align: middle;
}

.tabla-equipos-revisar tr:hover {
    background: #f8f9fa;
}

.tabla-equipos-revisar tr.fila-nueva {
    background: #e8f5e8;
    animation: resaltarNuevo 2s ease-out;
}

@keyframes resaltarNuevo {
    0% { background: #d4edda; }
    100% { background: #e8f5e8; }
}

.equipo-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nombre-equipo {
    font-weight: 500;
    color: #2c3e50;
}

.btn-historial {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 4px;
    border-radius: 3px;
    transition: all 0.2s ease;
    font-size: 0.8em;
}

.btn-historial:hover {
    color: #3498db;
    background: #f8f9fa;
}

.stock-total {
    font-weight: 600;
    color: #2c3e50;
}

.stock-bodega {
    font-weight: 600;
    color: #28a745;
}

.stock-bodega.sin-stock {
    color: #dc3545;
    font-weight: 700;
}

.stock-evento {
    color: #ffc107;
    font-weight: 500;
}

.input-cantidad-revisar {
    width: 80px;
    padding: 6px 8px;
    border: 2px solid #dee2e6;
    border-radius: 4px;
    text-align: center;
    font-weight: 500;
    transition: border-color 0.3s ease;
}

.input-cantidad-revisar:focus {
    outline: none;
    border-color: #3498db;
}

.input-cantidad-revisar.cantidad-excedida {
    border-color: #dc3545;
    background: #ffeaea;
    color: #dc3545;
}

.btn-eliminar-equipo {
    background: #dc3545;
    color: white;
    border: none;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8em;
}

.btn-eliminar-equipo:hover {
    background: #c82333;
    transform: scale(1.05);
}

/* Resumen de stock */
.resumen-stock {
    padding: 15px 20px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

.alertas-stock {
    min-height: 20px;
}

.alertas-stock-lista {
    background: #fff3cd;
    color: #856404;
    padding: 12px 15px;
    border: 1px solid #ffeaa7;
    border-radius: 6px;
    font-size: 0.9em;
    line-height: 1.5;
}

.alertas-stock-lista:empty {
    display: none;
}

/* Responsive para tabla de equipos */
@media (max-width: 1200px) {
    .tabla-equipos-revisar th:nth-child(3),
    .tabla-equipos-revisar td:nth-child(3) {
        display: none;
    }
}

@media (max-width: 992px) {
    .tabla-equipos-revisar th:nth-child(4),
    .tabla-equipos-revisar td:nth-child(4),
    .tabla-equipos-revisar th:nth-child(6),
    .tabla-equipos-revisar td:nth-child(6) {
        display: none;
    }
    
    .header-equipos {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .info-basica {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .tabla-equipos-revisar {
        font-size: 0.8em;
    }
    
    .tabla-equipos-revisar th,
    .tabla-equipos-revisar td {
        padding: 8px 4px;
    }
    
    .input-cantidad-revisar {
        width: 60px;
    }
    
    .header-solicitud {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

/* ===================================================================
   ESTILOS PARA MODAL INTERACTIVO DE SOLICITUDES
   =================================================================== */

/* Modal mejorado con estructura profesional */
.modal-contenido-aprobacion-mejorado {
    background: white;
    border-radius: 12px;
    width: 95%;
    max-width: 1200px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
}

.modal-header {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #2980b9;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.4em;
    font-weight: 600;
    color: white !important;
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.modal-footer {
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Sección de equipos interactiva */
.seccion-equipos-interactiva {
    background: white;
    border-bottom: 1px solid #dee2e6;
}

.header-equipos-interactivo {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 15px 25px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-equipos-interactivo h3 {
    margin: 0;
    color: #2c3e50;
    font-size: 1.2em;
    font-weight: 600;
}

.controles-equipos {
    display: flex;
    gap: 10px;
}

.btn-agregar-interactivo,
.btn-verificar-stock {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-verificar-stock {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
}

.btn-agregar-interactivo:hover,
.btn-verificar-stock:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Buscador de equipos */
.buscador-equipos-modal {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 15px 25px;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        height: 0;
        opacity: 0;
    }
    to {
        height: auto;
        opacity: 1;
    }
}

.campo-busqueda-modal {
    position: relative;
    width: 100%;
}

.campo-busqueda-modal input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    font-size: 1em;
    transition: border-color 0.3s ease;
    background: white;
}

.campo-busqueda-modal input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.resultados-busqueda {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.lista-resultados {
    padding: 5px 0;
}

.resultado-equipo {
    padding: 12px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid #f1f3f4;
    transition: background-color 0.2s ease;
}

.resultado-equipo:hover {
    background: #f8f9fa;
}

.resultado-equipo:last-child {
    border-bottom: none;
}

.info-resultado {
    flex: 1;
}

.nombre-resultado {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 2px;
}

.detalles-resultado {
    display: flex;
    gap: 15px;
    font-size: 0.85em;
    color: #6c757d;
}

.stock-resultado {
    display: flex;
    align-items: center;
    gap: 10px;
}

.disponible-resultado {
    background: #e8f5e8;
    color: #27ae60;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 600;
}

.disponible-resultado.sin-stock {
    background: #ffeaea;
    color: #dc3545;
}

.btn-agregar-resultado {
    background: #3498db;
    color: white;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-agregar-resultado:hover {
    background: #2980b9;
    transform: scale(1.1);
}

.sin-resultados,
.error-busqueda {
    padding: 15px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
}

/* Tabla interactiva de equipos */
.contenedor-tabla-equipos {
    max-height: 400px;
    overflow-y: auto;
    border-bottom: 1px solid #dee2e6;
}

.tabla-equipos-interactiva {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.tabla-equipos-interactiva th {
    background: #f8f9fa;
    color: #495057;
    font-weight: 600;
    padding: 12px 8px;
    text-align: left;
    border-bottom: 2px solid #dee2e6;
    position: sticky;
    top: 0;
    z-index: 10;
}

.tabla-equipos-interactiva td {
    padding: 12px 8px;
    border-bottom: 1px solid #f1f3f4;
    vertical-align: middle;
}

.fila-equipo-interactiva:hover {
    background: #f8f9fa;
}

.info-equipo-completa {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nombre-equipo-modal {
    font-weight: 500;
    color: #2c3e50;
}

.btn-historial-modal {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 3px;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.btn-historial-modal:hover {
    color: #3498db;
    background: #f8f9fa;
}

.info-stock-detallada {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stock-disponible {
    font-weight: 600;
    color: #27ae60;
    font-size: 1.1em;
}

.stock-disponible.sin-stock {
    color: #dc3545;
}

.stock-detalle {
    color: #6c757d;
    font-size: 0.8em;
}

/* Control de cantidad interactivo */
.control-cantidad {
    display: flex;
    align-items: center;
    gap: 2px;
    background: #f8f9fa;
    border-radius: 6px;
    padding: 2px;
}

.btn-disminuir-cantidad,
.btn-aumentar-cantidad {
    background: #3498db;
    color: white;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-weight: bold;
}

.btn-disminuir-cantidad:hover,
.btn-aumentar-cantidad:hover {
    background: #2980b9;
    transform: scale(1.1);
}

.input-cantidad-interactiva {
    width: 50px;
    text-align: center;
    border: none;
    background: transparent;
    font-weight: 600;
    color: #2c3e50;
    padding: 4px;
}

.input-cantidad-interactiva:focus {
    outline: 1px solid #3498db;
    background: white;
    border-radius: 3px;
}

.input-cantidad-interactiva.cantidad-excedida {
    color: #dc3545;
    background: #ffeaea;
}

/* Acciones de equipo */
.acciones-equipo {
    display: flex;
    gap: 5px;
}

.btn-duplicar-equipo,
.btn-eliminar-equipo-modal {
    background: none;
    border: 1px solid transparent;
    color: #6c757d;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.btn-duplicar-equipo:hover {
    color: #3498db;
    border-color: #3498db;
    background: rgba(52, 152, 219, 0.1);
}

.btn-eliminar-equipo-modal:hover {
    color: #dc3545;
    border-color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
}

/* Resumen de equipos */
.resumen-equipos-modal {
    background: #f8f9fa;
    padding: 15px 25px;
    border-bottom: 1px solid #dee2e6;
}

.estadisticas-equipos {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
    font-size: 0.9em;
}

.total-equipos,
.equipos-sin-stock {
    color: #6c757d;
}

.equipos-sin-stock.tiene-problemas {
    color: #dc3545;
    font-weight: 600;
}

.alertas-stock-modal {
    min-height: 20px;
}

.lista-alertas-stock {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.alerta-error,
.alerta-warning {
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.alerta-error {
    background: #ffeaea;
    color: #dc3545;
    border: 1px solid #f5c6cb;
}

.alerta-warning {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.sin-alertas {
    color: #27ae60;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Sección de observaciones */
.seccion-observaciones {
    padding: 20px 25px;
    background: white;
}

.seccion-observaciones label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #2c3e50;
}

.seccion-observaciones textarea {
    width: 100%;
    min-height: 80px;
    padding: 12px;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.9em;
    resize: vertical;
    transition: border-color 0.3s ease;
}

.seccion-observaciones textarea:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

/* Botones del footer */
.botones-secundarios {
    display: flex;
    gap: 10px;
}

.botones-principales {
    display: flex;
    gap: 10px;
}

.btn-pdf-modal {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 5px;
    font-weight: 500;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-rechazar-modal {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-aprobar-modal {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-pdf-modal:hover,
.btn-rechazar-modal:hover,
.btn-aprobar-modal:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Responsive para modal interactivo */
@media (max-width: 1024px) {
    .modal-contenido-aprobacion-mejorado {
        width: 98%;
        max-height: 95vh;
    }
    
    .tabla-equipos-interactiva th:nth-child(3),
    .tabla-equipos-interactiva td:nth-child(3) {
        display: none;
    }
}

@media (max-width: 768px) {
    .modal-header {
        padding: 15px 20px;
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .header-equipos-interactivo {
        flex-direction: column;
        gap: 10px;
        padding: 15px 20px;
    }
    
    .controles-equipos {
        width: 100%;
        justify-content: center;
    }
    
    .modal-footer {
        flex-direction: column;
        gap: 15px;
        padding: 15px 20px;
    }
    
    .botones-principales,
    .botones-secundarios {
        width: 100%;
        justify-content: center;
    }
    
    .estadisticas-equipos {
        flex-direction: column;
        gap: 5px;
    }
    
    .tabla-equipos-interactiva {
        font-size: 0.8em;
    }
    
    .control-cantidad {
        flex-direction: column;
        gap: 2px;
    }
    
    .btn-disminuir-cantidad,
    .btn-aumentar-cantidad {
        width: 30px;
        height: 20px;
    }
}

/* ========================================
   MEJORAS RESPONSIVE MÓVILES PARA SALIDAS
   ======================================== */

/* Convertir tablas principales a tarjetas en móvil */
@media (max-width: 768px) {
    /* Ocultar tablas principales */
    .tabla-solicitudes,
    .tabla-aprobaciones,
    .tabla-equipos-seleccionados {
        display: none !important;
    }
    
    /* Mostrar versiones móviles */
    .solicitudes-mobile-cards,
    .aprobaciones-mobile-cards,
    .equipos-mobile-cards {
        display: flex !important;
        flex-direction: column;
        gap: 12px;
        padding: 0;
    }
    
    /* Estilo de tarjetas móviles para solicitudes */
    .solicitud-mobile-card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        border: 1px solid #e2e8f0;
        overflow: hidden;
        transition: all 0.2s ease;
    }
    
    .solicitud-mobile-card:active {
        transform: scale(0.98);
        box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    }
    
    .solicitud-mobile-header {
        background: linear-gradient(135deg, #3498db, #2980b9);
        color: white;
        padding: 16px;
        position: relative;
    }
    
    .solicitud-mobile-id {
        position: absolute;
        top: 8px;
        right: 12px;
        background: rgba(255,255,255,0.2);
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 0.75em;
        font-weight: 600;
    }
    
    .solicitud-mobile-title {
        font-size: 1.1em;
        font-weight: 600;
        margin: 0 0 8px 0;
        line-height: 1.3;
        padding-right: 60px;
    }
    
    .solicitud-mobile-subtitle {
        font-size: 0.9em;
        opacity: 0.9;
        margin: 0;
    }
    
    .solicitud-mobile-body {
        padding: 16px;
    }
    
    .solicitud-mobile-info {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 16px;
    }
    
    .solicitud-info-item {
        display: flex;
        flex-direction: column;
    }
    
    .solicitud-info-label {
        font-size: 0.8em;
        color: #6b7280;
        font-weight: 500;
        margin-bottom: 2px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .solicitud-info-value {
        color: #1f2937;
        font-weight: 500;
        font-size: 0.9em;
    }
    
    .solicitud-mobile-status {
        text-align: center;
        margin-bottom: 16px;
    }
    
    .solicitud-mobile-equipos {
        background: #f8fafc;
        border-radius: 8px;
        padding: 12px;
        margin-bottom: 16px;
    }
    
    .solicitud-equipos-title {
        font-size: 0.85em;
        color: #6b7280;
        font-weight: 600;
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .solicitud-equipos-list {
        font-size: 0.85em;
        color: #374151;
        line-height: 1.4;
    }
    
    .solicitud-mobile-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .solicitud-mobile-action {
        flex: 1;
        min-width: 120px;
        padding: 6px 10px;
        border-radius: 8px;
        border: none;
        font-size: 0.85em;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 36px;
    }
    
    .solicitud-mobile-action.primary {
        background: #3498db;
        color: white;
    }
    
    .solicitud-mobile-action.secondary {
        background: #f8fafc;
        color: #374151;
        border: 1px solid #e2e8f0;
    }
    
    .solicitud-mobile-action.warning {
        background: #f59e0b;
        color: white;
    }
    
    .solicitud-mobile-action.danger {
        background: #ef4444;
        color: white;
    }
    
    .solicitud-mobile-action:active {
        transform: scale(0.95);
    }
    
    /* Adaptaciones para filtros móviles */
    .filtros-solicitudes {
        flex-direction: column;
        gap: 12px;
        background: white;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .filtro-busqueda,
    .filtro-estado {
        width: 100%;
        min-width: unset;
    }
    
    .campo-busqueda-solicitudes {
        font-size: 16px; /* Evita zoom en iOS */
        padding: 12px;
    }
    
    /* Navegación de pestañas móvil */
    .nav-tabs {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        background: white;
        border-radius: 12px;
        margin-bottom: 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .nav-tabs .nav-link {
        white-space: nowrap;
        padding: 16px 20px;
        font-size: 0.9em;
        scroll-snap-align: start;
        border: none;
        border-radius: 0;
        color: #6b7280;
        font-weight: 500;
        transition: all 0.2s ease;
    }
    
    .nav-tabs .nav-link.active {
        background: linear-gradient(135deg, #3498db, #2980b9);
        color: white;
        border-radius: 12px;
        margin: 4px;
    }
    
    /* Formulario de nueva salida móvil */
    .form-salida-profesional {
        background: white;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 16px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .campos-proyecto {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .selector-equipos-fusionado {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .campo-grupo select,
    .campo-cantidad input,
    .searchable-select-input {
        font-size: 16px !important; /* Evita zoom en iOS */
        padding: 12px;
        border-radius: 8px;
        min-height: 44px;
    }
    
    .btn-agregar {
        width: 100%;
        min-height: 48px;
        font-size: 1em;
        border-radius: 8px;
    }
    
    /* Modales ocupan toda la pantalla en móvil */
    .modal-overlay {
        padding: 0;
        align-items: flex-end;
    }
    
    .modal-aprobacion-contenido,
    .modal-edicion-contenido,
    .modal-historial-contenido {
        width: 100%;
        height: 95vh;
        margin: 0;
        border-radius: 16px 16px 0 0;
        animation: slideInFromBottom 0.3s ease;
    }
    
    @keyframes slideInFromBottom {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }
    
    .modal-header {
        padding: 16px;
        position: relative;
    }
    
    .modal-header::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2px;
    }
    
    .modal-body {
        padding: 16px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .modal-footer {
        padding: 16px;
        flex-direction: column;
        gap: 12px;
    }
    
    .modal-footer .btn {
        width: 100%;
        min-height: 48px;
    }
    
    /* Mejoras para botones en móvil */
    .btn {
        min-height: 44px;
        padding: 12px 16px;
        font-size: 0.9em;
        border-radius: 8px;
    }
    
    .btn-group {
        flex-direction: column;
        gap: 8px;
    }
    
    .btn-group .btn {
        width: 100%;
        border-radius: 8px !important;
    }
    
    /* Alertas más visibles en móvil */
    .alert {
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 16px;
        font-size: 0.9em;
    }
    
    /* Badges más grandes en móvil */
    .badge {
        padding: 6px 12px;
        font-size: 0.8em;
        border-radius: 12px;
    }
    
    /* Headers de sección más compactos */
    .salida-header-compacto {
        padding: 12px;
        margin-bottom: 12px;
        border-radius: 12px;
    }
    
    .titulo-principal-salida {
        font-size: 1.3em;
    }
    
    .titulo-seccion {
        font-size: 1.1em;
        margin-bottom: 12px;
        padding-bottom: 6px;
    }
}

/* Móviles pequeños (iPhone SE, etc.) */
@media (max-width: 480px) {
    .solicitud-mobile-info {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .solicitud-mobile-actions {
        flex-direction: column;
    }
    
    .solicitud-mobile-action {
        width: 100%;
        min-width: unset;
    }
    
    .modal-aprobacion-contenido,
    .modal-edicion-contenido,
    .modal-historial-contenido {
        height: 100vh;
        border-radius: 0;
    }
    
    .modal-header {
        padding: 12px;
    }
    
    .modal-body {
        padding: 12px;
    }
    
    .modal-footer {
        padding: 12px;
    }
}

/* Mejoras para paisaje en móviles */
@media (max-width: 768px) and (orientation: landscape) {
    .modal-aprobacion-contenido,
    .modal-edicion-contenido,
    .modal-historial-contenido {
        height: 95vh;
        border-radius: 12px;
        margin: 2.5vh auto;
    }
}

/* Modo oscuro básico para móviles */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
    .solicitud-mobile-card {
        background: #1f2937;
        border-color: #374151;
    }
    
    .solicitud-mobile-body {
        color: #f9fafb;
    }
    
    .solicitud-info-label {
        color: #9ca3af;
    }
    
    .solicitud-info-value {
        color: #f3f4f6;
    }
    
    .solicitud-mobile-equipos {
        background: #374151;
    }
    
    .form-salida-profesional,
    .filtros-solicitudes {
        background: #1f2937;
        border-color: #374151;
    }
}

/* Optimizaciones específicas para la columna de equipos */
#tabla-solicitudes-salidas td:nth-child(6),
.tabla-solicitudes td:nth-child(6) {
    padding-top: 8px !important;
}

.equipo-id {
    font-weight: 700 !important;
    color: #1a1a1a !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: rgba(0, 123, 255, 0.08);
    padding: 1px 4px;
    border-radius: 2px;
    font-size: 12px;
}

/* === RESPONSIVE PARA SELECTOR DE VEHICULOS MEJORADO === */
@media (max-width: 1200px) {
    .selector-vehiculos-fusionado {
        max-width: 100%;
        grid-template-columns: 1fr auto;
    }
}

@media (max-width: 992px) {
    .selector-vehiculos-fusionado {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .selector-vehiculos-fusionado .buscar-vehiculo {
        min-width: 100%;
    }
    
    .selector-vehiculos-fusionado .btn-agregar {
        width: 100%;
        min-width: unset;
        padding: 12px 20px;
        font-size: 1em;
    }
    
    .vehiculo-item-seleccionado {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .vehiculo-principal {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    
    .vehiculo-datos-extra {
        justify-content: space-between;
    }
    
    .vehiculo-acciones {
        align-self: flex-end;
    }
    
    .titulo-seccion-vehiculos {
        font-size: 1.1em !important;
        margin: 0 0 12px 0 !important;
    }
}

@media (max-width: 768px) {
    .seccion-vehiculos {
        margin: 0 -8px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    
    .selector-vehiculos-fusionado {
        background: white;
        border: 1px solid #e0e0e0;
        padding: 12px;
    }
    
    .vehiculo-datos-extra {
        flex-direction: column;
        gap: 8px;
    }
    
    .dato-vehiculo {
        padding: 6px 10px;
        font-size: 0.85em;
    }
}

/* ===== REDUCCIÓN DE TAMAÑO DE BOTONES - ACTUALIZADO 08/08/2025 ===== */

/* 60% más pequeños - Botones Cancelar y Enviar Solicitud en crear salida */
.btn-cancelar,
.btn-enviar {
    font-size: 0.7em !important;
    padding: 6px 12px !important;
    min-height: 32px !important;
    min-width: 80px !important;
}

/* 40% más pequeños - Botones de modal de vehículo (Cancelar y Agregar) */
.modal-datos-vehiculo .btn-cancelar,
.modal-datos-vehiculo .btn-guardar,
#modal-datos-vehiculo .btn-cancelar,
#modal-datos-vehiculo .btn-guardar,
.modal-edicion-contenido .btn-cancelar,
.modal-edicion-contenido .btn-guardar {
    font-size: 0.8em !important;
    padding: 8px 16px !important;
    min-height: 36px !important;
    min-width: 100px !important;
}

/* 80% más pequeños - Botones de ver (ojo) y eliminar (X) de vehículos */
.btn-ver-datos-vehiculo,
.btn-eliminar-vehiculo-salida {
    font-size: 0.6em !important;
    padding: 4px 6px !important;
    min-height: 24px !important;
    min-width: 24px !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #ddd !important;
    background: #f8f9fa !important;
    cursor: pointer !important;
}

.btn-ver-datos-vehiculo:hover {
    background: #e9ecef !important;
    border-color: #adb5bd !important;
}

.btn-eliminar-vehiculo-salida:hover {
    background: #f8d7da !important;
    border-color: #f5c6cb !important;
}

.btn-ver-datos-vehiculo i,
.btn-eliminar-vehiculo-salida i {
    font-size: 0.8em !important;
    margin: 0 !important;
}

/* Ajuste para contenedor de acciones de vehículo */
.vehiculo-acciones {
    display: flex;
    gap: 4px;
    align-items: center;
}

@media (max-width: 768px) {
    .selector-vehiculos-fusionado {
        max-width: 100%;
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .selector-vehiculos-fusionado .btn-agregar {
        width: 100%;
        justify-self: stretch;
    }
    
    .selector-vehiculos-fusionado .buscar-vehiculo {
        min-width: auto;
        width: 100%;
    }
    
    /* Mantener tamaños reducidos en móvil pero legibles */
    .btn-cancelar,
    .btn-enviar {
        min-height: 36px;
        font-size: 0.75em;
    }
    
    .btn-ver-datos-vehiculo,
    .btn-eliminar-vehiculo-salida {
        min-height: 28px;
        width: 28px;
        height: 28px;
    }
}

/* --- ESTILOS ESPECÍFICOS PARA TABLA DE RETORNOS --- */
.tabla-retornos {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border-radius: var(--radio-borde);
    overflow: hidden;
    box-shadow: var(--sombra-suave);
}

.tabla-retornos th {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    color: var(--color-primario);
    font-weight: 600;
    padding: 12px;
    text-align: left;
    border-bottom: 2px solid var(--color-borde);
    font-size: 0.9em;
}

.tabla-retornos td {
    padding: 12px;
    border-bottom: 1px solid #f1f3f4;
    vertical-align: top;
    font-size: 0.9em;
}

.tabla-retornos tr:hover {
    background-color: #f8f9fa;
}

/* Estilos específicos para la columna de vehículos */
.tabla-retornos th:nth-child(7),
.tabla-retornos td:nth-child(7) {
    width: 180px;
    min-width: 150px;
    max-width: 220px;
    vertical-align: top;
}

/* Estilo para información de vehículos */
.tabla-retornos td:nth-child(7) {
    font-size: 0.85em;
    line-height: 1.3;
}

/* Botón retornar */
.btn-retornar {
    background: linear-gradient(135deg, #27ae60, #229954);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 500;
    transition: all 0.2s ease;
    min-height: 32px;
}

.btn-retornar:hover {
    background: linear-gradient(135deg, #229954, #1e8449);
    transform: translateY(-1px);
}

.texto-retorno-completo {
    color: #6c757d;
    font-style: italic;
    font-size: 0.85em;
}

/* ===================================================================
   MODAL DE DETALLES DE SALIDA - DISEÑO PROFESIONAL Y COMPACTO
   =================================================================== */

/* Overlay del modal */
.modal-detalles-salida {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.modal-detalles-salida.modal-show {
    opacity: 1;
    visibility: visible;
}

/* Contenedor principal del modal */
.modal-content-detalles {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 900px;
    width: 90%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    transform: scale(0.9) translateY(20px);
    transition: all 0.3s ease;
}

.modal-show .modal-content-detalles {
    transform: scale(1) translateY(0);
}

/* Header del modal */
.modal-detalles-salida .modal-header {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    padding: 16px 20px;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: none;
}

.modal-detalles-salida .modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-detalles-salida .modal-header h3 i {
    font-size: 16px;
}

.modal-detalles-salida .modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.modal-detalles-salida .modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Cuerpo del modal */
.modal-body-detalles {
    padding: 0;
    overflow-y: auto;
    flex: 1;
}

/* Grid de detalles */
.detalles-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 20px;
}

/* Secciones de detalles */
.seccion-detalles {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 16px;
}

.seccion-detalles h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #495057;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.seccion-detalles h4 i {
    font-size: 12px;
    color: #007bff;
}

/* Items de información */
.info-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
}

.info-item label {
    font-weight: 600;
    color: #6c757d;
    min-width: 100px;
    margin-right: 8px;
    margin-bottom: 0;
}

.info-item span {
    color: #212529;
}

.valor-destacado {
    font-weight: 700;
    color: #007bff !important;
    font-size: 14px !important;
}

/* Badges de estado */
.badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-sin-aprobacion {
    background: #ffc107;
    color: #212529;
}

.badge-rechazada {
    background: #dc3545;
    color: white;
}

.badge-en-evento {
    background: #007bff;
    color: white;
}

.badge-retorno-incompleto {
    background: #fd7e14;
    color: white;
}

.badge-retornado-completo {
    background: #28a745;
    color: white;
}

/* Listas de equipos y vehículos */
.equipos-lista, .vehiculos-lista {
    max-height: 200px;
    overflow-y: auto;
}

.equipo-item, .vehiculo-item {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.equipo-info, .vehiculo-info {
    flex: 1;
}

.equipo-info strong, .vehiculo-info strong {
    display: block;
    color: #212529;
    font-size: 13px;
    margin-bottom: 2px;
}

.equipo-info small, .vehiculo-info small {
    color: #6c757d;
    font-size: 11px;
}

.equipo-cantidades {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: right;
}

.cantidad {
    font-size: 12px;
    color: #495057;
}

.cantidad strong {
    color: #007bff;
}

.badge-small {
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 10px;
    background: #e9ecef;
    color: #495057;
}

/* Cronología */
.cronologia {
    background: white;
    border-radius: 6px;
    padding: 12px;
}

.evento-cronologia {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    color: #495057;
}

.evento-cronologia:last-child {
    margin-bottom: 0;
}

.evento-cronologia i {
    color: #28a745;
    font-size: 14px;
}

/* Sección de notas */
.seccion-notas {
    grid-column: 1 / -1;
}

.notas-lista {
    max-height: 150px;
    overflow-y: auto;
}

.nota-item {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 8px;
}

.nota-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.nota-header strong {
    color: #007bff;
    font-size: 12px;
}

.nota-header small {
    color: #6c757d;
    font-size: 11px;
}

.nota-contenido {
    color: #495057;
    font-size: 12px;
    line-height: 1.4;
}

/* Mensaje cuando no hay datos */
.no-data {
    color: #6c757d;
    font-style: italic;
    text-align: center;
    margin: 10px 0;
    font-size: 12px;
}

/* Footer del modal */
.modal-detalles-salida .modal-footer {
    padding: 16px 20px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    border-radius: 0 0 12px 12px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.modal-detalles-salida .modal-footer .btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-detalles-salida .modal-footer .btn-secondary {
    background: #6c757d;
    color: white;
}

.modal-detalles-salida .modal-footer .btn-secondary:hover {
    background: #5a6268;
}

.modal-detalles-salida .modal-footer .btn-primary {
    background: #007bff;
    color: white;
}

.modal-detalles-salida .modal-footer .btn-primary:hover {
    background: #0056b3;
}

/* Link del ID en la tabla */
.id-salida-link {
    color: #007bff;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.id-salida-link:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* ID clickeable en la tabla */
.id-salida-clickeable {
    color: #007bff;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease;
    text-decoration: none;
}

.id-salida-clickeable:hover {
    color: #0056b3;
    background-color: rgba(0, 123, 255, 0.1);
    padding: 2px 4px;
    border-radius: 3px;
}

/* Detalles de vehículos en modal */
.vehiculo-detalles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.detalle-pequeno {
    font-size: 11px;
    background: #f8f9fa;
    padding: 2px 6px;
    border-radius: 3px;
    color: #6c757d;
}

/* Responsive */
@media (max-width: 768px) {
    .modal-content-detalles {
        width: 95%;
        max-height: 90vh;
    }
    
    .detalles-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 15px;
    }
    
    .modal-detalles-salida .modal-header {
        padding: 12px 16px;
    }
    
    .modal-detalles-salida .modal-header h3 {
        font-size: 16px;
    }
    
    .modal-detalles-salida .modal-footer {
        padding: 12px 16px;
    }
    
    .seccion-detalles {
        padding: 12px;
    }
    
    .info-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    
    .info-item label {
        min-width: auto;
        margin-right: 0;
    }
}

/* =============================
     MODAL EQUIPOS SALIDA
     ============================= */
.cantidad-equipos-clickeable {
    color: #2563eb;
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1em;
    transition: all 0.2s ease;
    padding: 4px 8px;
    border-radius: 6px;
}

.cantidad-equipos-clickeable:hover {
    background-color: #eff6ff;
    color: #1d4ed8;
    text-decoration: none;
    transform: scale(1.05);
}

/* Estilos base para modales con animación */
#modal-equipos-salida.modal-overlay {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

#modal-equipos-salida.modal-overlay.modal-active {
    opacity: 1;
    visibility: visible;
}

#modal-equipos-salida .modal-container {
    transform: scale(0.7);
    transition: transform 0.3s ease;
}

#modal-equipos-salida.modal-active .modal-container {
    transform: scale(1);
}

.modal-equipos {
    max-width: 900px; /* Ligeramente más ancho */
    width: 92%;
    background: white;
    border-radius: 12px; /* Bordes redondeados uniformes */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.15); /* Sombra más profunda */
    overflow: hidden; /* Para que el border-radius funcione bien */
}

.modal-equipos .modal-header {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    color: white;
    padding: 20px 24px;
    border-radius: 12px 12px 0 0; /* Bordes más redondeados */
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(30, 64, 175, 0.2); /* Sombra sutil */
    border-bottom: 3px solid rgba(59, 130, 246, 0.3); /* Línea de separación */
}

.modal-equipos .modal-header h3 {
    margin: 0;
    font-size: 16px; /* Título más pequeño */
    font-weight: 700; /* Más bold */
    color: white; /* Color blanco explícito */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Sombra del texto */
}

.modal-equipos .modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.modal-equipos .modal-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.modal-equipos .modal-content {
    padding: 24px; /* Más padding */
    max-height: 70vh;
    overflow-y: auto;
    background: #fafbfc; /* Fondo sutilmente diferente */
}

.info-salida {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); /* Gradiente sutil */
    border: 1px solid #e2e8f0;
    border-radius: 10px; /* Más redondeado */
    padding: 20px; /* Más padding */
    margin-bottom: 24px; /* Más separación */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Sombra sutil */
}

.info-salida p {
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.info-salida p:last-child {
    margin-bottom: 0;
}

.info-salida strong {
    color: #374151;
    font-weight: 600;
}

.buscador-equipos-modal {
    position: relative;
    margin-bottom: 16px;
}

.input-buscar-equipos {
    width: 100%;
    padding: 12px 40px 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    background: white;
}

.input-buscar-equipos:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.input-buscar-equipos::placeholder {
    color: #9ca3af;
    font-style: italic;
}

.btn-limpiar-busqueda {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6b7280;
    font-size: 20px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-limpiar-busqueda:hover {
    background-color: #f3f4f6;
    color: #374151;
}

.btn-limpiar-busqueda:active {
    background-color: #e5e7eb;
}

.tabla-equipos-modal-container {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: white;
}

.tabla-equipos-modal {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.tabla-equipos-modal thead {
    background: #f8fafc;
}

.tabla-equipos-modal th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: #374151;
    border-bottom: 2px solid #e2e8f0;
}

.tabla-equipos-modal td {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
}

.tabla-equipos-modal tbody tr:hover {
    background-color: #f8fafc;
}

.tabla-equipos-modal tbody tr:last-child td {
    border-bottom: none;
}

/* Anchos específicos para las columnas del modal de equipos */
.tabla-equipos-modal th:nth-child(1), /* SKU */
.tabla-equipos-modal td:nth-child(1) {
    width: 15%; /* Se mantiene igual */
}

.tabla-equipos-modal th:nth-child(2), /* Descripción */
.tabla-equipos-modal td:nth-child(2) {
    width: 47%; /* Reducido ligeramente de 50% a 47% para compensar */
}

.tabla-equipos-modal th:nth-child(3), /* Marca */
.tabla-equipos-modal td:nth-child(3) {
    width: 25%; /* Se mantiene igual */
}

.tabla-equipos-modal th:nth-child(4), /* Cantidad */
.tabla-equipos-modal td:nth-child(4) {
    width: 13%; /* Aumentado de 10% a 13% */
    text-align: center;
}

.cantidad-badge {
    background: #e0f2fe;
    color: #0891b2;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    display: inline-block;
    min-width: 24px;
}

.no-resultados-equipos td {
    text-align: center;
    padding: 24px 16px;
    color: #6b7280;
    font-style: italic;
    background-color: #f9fafb;
}

.texto-sin-resultados {
    font-size: 14px;
}

/* Responsive para el modal de equipos */
@media (max-width: 768px) {
    .modal-equipos {
        width: 95%;
        max-height: 90vh;
    }
    
    .modal-equipos .modal-content {
        padding: 16px;
        max-height: 60vh;
    }
    
    .info-salida {
        padding: 12px;
        margin-bottom: 16px;
    }
    
    .buscador-equipos-modal {
        margin-bottom: 12px;
    }
    
    .input-buscar-equipos {
        padding: 10px 36px 10px 12px;
        font-size: 13px;
    }
    
    .btn-limpiar-busqueda {
        width: 28px;
        height: 28px;
        font-size: 18px;
        right: 6px;
    }
    
    .tabla-equipos-modal {
        font-size: 13px;
    }
    
    .tabla-equipos-modal th,
    .tabla-equipos-modal td {
        padding: 10px 12px;
    }
    
    .tabla-equipos-modal th {
        font-size: 12px;
    }
    
    /* Mantener proporciones en móvil */
    .tabla-equipos-modal th:nth-child(1), 
    .tabla-equipos-modal td:nth-child(1) {
        width: 18%; /* SKU - se mantiene */
    }
    
    .tabla-equipos-modal th:nth-child(2), 
    .tabla-equipos-modal td:nth-child(2) {
        width: 44%; /* Descripción - ajustado para compensar */
    }
    
    .tabla-equipos-modal th:nth-child(3), 
    .tabla-equipos-modal td:nth-child(3) {
        width: 23%; /* Marca - se mantiene */
    }
    
    .tabla-equipos-modal th:nth-child(4), 
    .tabla-equipos-modal td:nth-child(4) {
        width: 15%; /* Cantidad - aumentado de 12% a 15% */
    }
}

/* =============================
     EQUIPOS CON STOCK CERO
     ============================= */
.equipo-stock-cero {
    background-color: #ffebee !important;
    border: 2px solid #f44336 !important;
    animation: pulsoStock 2s infinite;
}

.equipo-stock-cero:hover {
    background-color: #ffcdd2 !important;
}

.icono-stock-cero {
    font-size: 16px;
    animation: parpadeoIcono 1.5s infinite;
}

@keyframes pulsoStock {
    0%, 100% { 
        background-color: #ffebee; 
        border-color: #f44336; 
    }
    50% { 
        background-color: #ffcdd2; 
        border-color: #d32f2f; 
    }
}

@keyframes parpadeoIcono {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.6; }
}

/* Estilos para resaltar filas */
.fila-resaltada {
    background-color: #e3f2fd !important;
    border: 2px solid #2196f3 !important;
    animation: resaltarFila 3s ease-in-out;
    transition: all 0.3s ease;
}

.fila-nueva {
    background-color: #e8f5e8 !important;
    border: 2px solid #4caf50 !important;
    animation: nuevaFila 3s ease-in-out;
    transition: all 0.3s ease;
}

@keyframes resaltarFila {
    0% { 
        background-color: #e3f2fd;
        transform: scale(1);
    }
    25% { 
        background-color: #bbdefb;
        transform: scale(1.02);
    }
    50% { 
        background-color: #90caf9;
        transform: scale(1.01);
    }
    75% { 
        background-color: #bbdefb;
        transform: scale(1.02);
    }
    100% { 
        background-color: #e3f2fd;
        transform: scale(1);
    }
}

@keyframes nuevaFila {
    0% { 
        background-color: #e8f5e8;
        transform: scale(1);
    }
    25% { 
        background-color: #c8e6c9;
        transform: scale(1.02);
    }
    50% { 
        background-color: #a5d6a7;
        transform: scale(1.01);
    }
    75% { 
        background-color: #c8e6c9;
        transform: scale(1.02);
    }
    100% { 
        background-color: #e8f5e8;
        transform: scale(1);
    }
}