/**
 * Aspecto compartido de los tres listados de traslados (Entradas, Salidas y
 * Traslados internos). Mismo lenguaje visual que Términos de Pago.
 *
 * Va aparte porque las tres pantallas son la misma tabla y tener tres copias del
 * mismo bloque <style> era garantía de que se desincronizaran.
 * Lo acompaña vistas/js/stockpicklistux.js.
 */

/* ── La tabla ──────────────────────────────────────────────────────────── */
#tblPickList { font-size: 12px; }
#tblPickList thead th {
    background: #2c3d63; color: #fff;
    white-space: nowrap; vertical-align: middle;
    padding: 7px 8px; font-weight: 600; font-size: 11px;
    text-align: center;
}
#tblPickList tbody td { vertical-align: middle; padding: 5px 8px; }

/* Toda la fila abre el traslado: el cursor lo tiene que anunciar */
#tblPickList tbody tr { cursor: pointer; }

/* Columna Acciones angosta, con los botones uniformes */
#tblPickList tbody td:last-child { white-space: nowrap; text-align: center; }
#tblPickList tbody td:last-child .btn {
    padding: 2px 8px; font-size: 11px; line-height: 1.5; margin: 0 1px;
}

/* «Ver detalles» sale de la vista: abrir es clic en la fila. El botón sigue en el
   DOM a propósito —oculto— porque su handler (delegado en document desde
   stockPick.js) es quien hace la carga y la redirección; la fila lo dispara en
   lugar de duplicar esa lógica. Queda visible solo «Validar». */
#tblPickList .btnVerFormulariostokpick_ing,
#spk-grouped-view .btnVerFormulariostokpick_ing { display: none !important; }

/* ── Barra superior ─────────────────────────────────────────────────────
   Antes «Nuevo», «Rango de fecha», «Mostrar» y «Buscar» caían en columnas
   Bootstrap sueltas y quedaban a distinta altura. Ahora los controles de acción
   van en una fila y los que genera DataTables (largo y buscador) en la suya,
   alineados a los extremos. */
.spk-toolbar {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 6px; margin-bottom: 12px;
}
#spk-box .dataTables_wrapper .row:first-child {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; margin: 0 0 8px;
}
#spk-box .dataTables_length, #spk-box .dataTables_filter { float: none; margin: 0; }
#spk-box .dataTables_filter { text-align: right; }
#spk-box .dataTables_length label, #spk-box .dataTables_filter label {
    font-weight: 400; font-size: 12px; margin: 0;
}
#spk-box .dataTables_length select { margin: 0 4px; }
#spk-box .dataTables_filter input { margin-left: 6px; }

/* ── Menús de Filtros y Agrupar por ─────────────────────────────────────── */
.spk-dropdown { min-width: 260px; padding: 6px 0; }
.spk-dropdown .dropdown-header {
    font-size: 11px; font-weight: 600; color: #888;
    text-transform: uppercase; letter-spacing: .5px; padding: 6px 14px 2px;
}
.spk-dropdown .spk-field { padding: 2px 14px 8px; }
.spk-group-opt.active > a { background: #f5f5f5; font-weight: 600; color: #2c3d63; }

/* Bootstrap 3 le pone line-height:30px a select.input-sm dentro de una caja de
   30px: el texto se recorta por abajo. Se corrige acotado, nunca en .input-sm. */
.spk-dropdown select.form-control {
    line-height: normal; height: 30px; padding: 4px 26px 4px 8px;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23777' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center;
    background-size: 10px 7px;
}
.spk-dropdown select.form-control::-ms-expand { display: none; }

/* ── Chips de lo aplicado, para no tener que abrir los menús ─────────────── */
.spk-chips { display: inline-block; margin-left: 4px; }
.spk-chip {
    display: inline-block; background: #eef1f6; border: 1px solid #d6dceb;
    color: #2c3d63; border-radius: 12px; font-size: 12px;
    padding: 2px 10px; margin: 0 4px 4px 0; white-space: nowrap;
}
.spk-chip .spk-chip-x { color: #8a93a8; margin-left: 6px; cursor: pointer; font-weight: bold; }
.spk-chip .spk-chip-x:hover { color: #dd4b39; }

/* ── Filas de grupo (misma convención que Existencias) ───────────────────── */
.spk-grp-hdr { cursor: pointer; background: #f5f5f5; }
.spk-grp-hdr:hover { background: #eaf2ff; }
.spk-grp-icon { margin-right: 6px; font-size: 11px; color: #666; }
#tblPickListGrouped > thead > tr > th {
    background: #2c3d63; color: #fff; font-weight: 600; font-size: 11px;
    padding: 7px 8px; vertical-align: middle;
}