/* =========================================================
   WRAPPERS Y CONTENEDORES
   ========================================================= */
.wrapTable {
    width: 100%;
    top: 0;
    overflow: hidden;
    position: relative;
    background: #eee;
    bottom: 30px !important;
    margin: 0 auto !important;
}
body.iframed .wrapTable { bottom: 0 !important; }

.wrapTableInner { /* scroll interno horizontal oculto */
    height: 100%;
    overflow: auto hidden;
}

.isAbsolute > .table-container-fade { /* degradado lateral al final de tabla */
    z-index: 10;
    position: absolute;
    right: -3px;
    display: none;
    width: 17px;
    opacity: .7;
    height: 100%;
    background: linear-gradient(to right, rgba(255,0,0,0) 0, rgba(255,255,255,0) 36%, rgba(0,0,0,.4) 100%);
}

/* =========================================================
   IMÁGENES EN CELDAS
   ========================================================= */
.wrapTable td img {
    margin-bottom: 0;
    display: inline;
    width: 40px;
    height: 40px;
}
.wrapTable td img.imgbg { /* imagen vía background */
    margin-bottom: 0;
    display: inline;
    width: 51px;
    height: 51px;
    background: #fff;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* icono institución dentro de wrapTable */
.wrapTable .fa-institution {
    top: -2px;
    font-size: 11px;
}

/* =========================================================
   BADGES / WRAP TEXT COLOR
   ========================================================= */
.wrapTextColor, .wTC {
    border-radius: 3px;
    overflow-wrap: initial;
    padding: 2px 5px;
    margin: 4px 2px 0 auto;
    display: inline-block;
    font-size: 12px;
    text-overflow: ellipsis;
    font-weight: bold;
    opacity: .7;
}
a > .wrapTextColor, a > .wTC { cursor: pointer !important; }
.wrapTextColor:hover, .wTC:hover { opacity: 1; }

.wrapTextColor2, .wTC2 {
    border-radius: 3px;
    overflow-wrap: break-word;
    font-size: 11px;
    padding: 3px 5px;
    display: block;
    font-weight: bold;
}
.wrapTextColor2 d, .wTC2 d, .wrapTextColor d, .wTC d { display: inline !important; }

.wTC.block { white-space: nowrap; }
.wTC.inline-block {
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wrapTable .wTC.inline-block {
    font-size: 11px;
    user-select: none;
}

/* =========================================================
   TABLA PRINCIPAL .table2 (estructura, cabeceras, estados)
   ========================================================= */
.table2 {
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    width: 100% !important;
}
.wrapTable .table2 .label {
    display: inline-block;
    font-size: 12px;
    white-space: pre-line;
    position: relative;
    margin: 0 auto;
    left: auto;
    right: auto;
}

/* filas abiertas */
.table2 tr[opened="1"] td { background-color: rgba(0,0,0,.04); }

/* cabecera */
.wrapTable thead {
    background: #ededed;
    border-bottom: 1px solid #dfdfdf;
    color: #333;
    font-size: 12px;
    padding: 4px 6px;
    text-align: left;
    text-shadow: #fff 0 1px 0;
}
.wrapTable thead th, .wrapTable thead td {
    vertical-align: middle !important;
    padding: 4px 0 3px !important;
    font-size: 10px !important;
}
.wrapTable .table2 thead th {
    width: 75px;
    text-align: center;
    padding: 0 !important;
}
.wrapTable .table2 thead .cell { position: relative; }

/* primera columna cabecera */
.wrapTable .table2 thead th:first-child,
.wrapTable.rowType .table2 th:first-child {
    width: 55px;
    border-left: 1px solid rgb(237 237 237);
}
.wrapTable .table2 thead th.td_type_gallery { width: 72px; }

/* tipos de th/td comunes */
.wrapTable .table2 td, .wrapTable .table2 th { box-sizing: border-box !important; }
.wrapTable .table2 th, .wrapTable .table2 td {
    text-align: left;
    padding: 0 !important;
}
.wrapTable .table2 th.td_type_bool { text-align: center; }
.wrapTable .table2 th {
    font-weight: bold;
    border-left: 1px solid rgb(88,76,76);
    border-right: 1px solid #ccc;
}
.wrapTable .table2 tr td {
    border-width: 1px;
    border-style: solid;
    border-color: transparent transparent #f0f0f0;
    font-size: 13px;
    padding: 0;
    margin: 0;
    color: rgb(109,109,109);
    border-right-width: 0 !important;
    border-left-width: 0 !important;
}
.wrapTable .table2 tr td:last-child .wW { padding-right: 6px; }
.wrapTable .table2 tr td:nth-last-child(2) { padding-right: 5px; }
.wrapTable .table2 tr td.unix_created input { font-size: 10px; }

/* zebra + hover */
.wrapTable .table2 .odd { background-color: #f8f8f8; }
.wrapTable .table2 .even { background-color: #fff !important; }
.wrapTable .table2 tbody tr:hover td { background: rgba(0,0,0,.03); }

/* =========================================================
   RESIZE COLUMNAS (asas invisibles)
   ========================================================= */
.wrapTable .table2 thead th.JSresizing { cursor: col-resize; user-select: none; }
.wrapTable .table2 thead th .JSresizable {
    width: 3px;
    height: 100%;
    position: absolute;
    cursor: col-resize;
    box-sizing: content-box;
    right: -6px;
    top: -1px;
    border-left: 5px solid #ededed;
    border-right: 5px solid #ededed;
    opacity: 0;
    background: transparent;
    z-index: 999999998;
}
.wrapTable .table2 thead th.JSresizing .JSresizable,
.wrapTable .table2 thead th .JSresizable:hover {
    background: #9e9e9e;
    cursor: col-resize;
    opacity: 1;
}
.wrapTable .table2 thead th.JSresizing .JShideColumn,
.wrapTable .table2 thead th.JSresizing .JSsort { display: none !important; }

/* =========================================================
   FILTROS (fila de filtros)
   ========================================================= */
.wrapTable .table2 .filters,
.wrapTable .table2 .filters:hover { background-color: rgb(241,249,255) !important; }
.wrapTable .table2 .filters.existFilter,
.wrapTable .table2 .filters.existFilter:hover { background-color: rgb(137,255,141) !important; }
.wrapTable .table2 .filters .controls { margin: 0 1px; }

/* =========================================================
   TIPOS DE CELDA / LAYOUTS
   ========================================================= */
.wrapTable .table2 .td_type_imgmodal img {
    border: 2px solid #f0f0f0;
    cursor: pointer;
    width: 100%;
    object-fit: contain;
    background: #fff;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 100% !important;
}


.wrapTable .table2 .td_type_imgmodal img:hover { border: 2px solid rgb(56,170,232); }
.wrapTable .table2 .td_type_imgmodal,
.wrapTable .table2 .td_type_bool,
.wrapTable .table2 .td_type_img { width: 73px; }

.wrapTable .table2 .td_type_bools { text-align: center; }
.wrapTable .table2 .td_type_bools .switch2 { width: 100%; display: inline-block; }

.wrapTable .table2 .td_type_datetime,
.wrapTable .table2 .td_type_price { text-align: right; width: 80px; }

.wrapTable .table2 .td_type_price_format th { width: 100px; }
.wrapTable .table2 td.td_type_price_format { text-align: right !important; }

.wrapTable .table2 .td_type_infowindow .wW { overflow: visible; text-align: center; }
.wrapTable .table2 .td_type_siNo { text-align: center; }

.wrapTable .table2 .td_type_images .wW { height: auto !important; max-height: none !important; }
.wrapTable .table2 .td_type_img .wW { text-overflow: inherit; }
.wrapTable .table2 .td_type_html .wW,
.wrapTable .table2 .td_type_img .wW,
.wrapTable .table2 .td_type_gallery .wW,
.wrapTable .table2 .td_type_imgmodal .wW {
    text-overflow: inherit;
    max-height: none !important;
    height: inherit !important;
    padding-bottom: 3px !important;
    padding-top: 3px !important;
}
.wrapTable .table2 .td_type_html .wHtml {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* celda botones de acción */
.wrapTable .table2 .td_type_buttons {
    text-align: center;
    position: relative;
    width: 17px !important;
    padding: 0 !important;
}
.wrapTable .table2 .td_type_buttons .wW {
    overflow: visible;
    height: 100%;
    top: 0;
    position: absolute;
    padding: 0 !important;
}
.wrapTable .table2 .td_type_buttons .JSresizable { display: none; }
.wrapTable .table2 .td_type_buttons .wWI { display: block; height: 100%; overflow: visible; padding: 0 !important; }
.wrapTable .table2 .td_type_buttons .btn-group { width: 100%; height: 100%; }
.wrapTable .table2 tr:hover .td_type_buttons .btn-group { opacity: 1; }
.wrapTable .table2 .td_type_buttons button {
    width: 100%;
    height: 100%;
    padding: 0;
    text-align: center;
    border: 0;
    font-weight: bold;
    display: block;
    position: relative;
    background: 0 center;
}
.wrapTable .table2 .td_type_buttons .th-inner { display: none; }
.wrapTable .table2 .td_type_buttons button:hover,
.wrapTable .table2 .td_type_buttons button:focus {
    color: #1b1b1b;
    text-decoration: none;
    text-shadow: none;
    background-color: #b1b1b1;
}
.wrapTable .table2 .td_type_buttons i {
    margin-right: 10px !important;
    top: 1px !important;
}
.wrapTable .table2 .td_type_buttons .dropdown-toggle {
    box-shadow: none;
    background-color: rgb(228 228 228);
    border-radius: 0 !important;
    opacity: 0;
}
.wrapTable .table2 tr:hover .td_type_buttons .dropdown-toggle { opacity: 1; }
.wrapTable .table2 .td_type_buttons .dropdown-toggle > i {
    font-size: 18px;
    margin: 0 !important;
    color: #777 !important;
}
.wrapTable .table2 .td_type_buttons .dropdown-menu {
    top: 50%;
    margin-top: 16px;
    padding: 0;
    border-radius: 0;
}

/* batería */
.wrapTable .table2 th.td_type_battery { width: 54px; }
.wrapTable .table2 td.td_type_battery .battery {
    margin-top: 50%;
    top: -7px;
    position: relative;
}

/* alineaciones helper */
.wrapTable .table2 td.text-center { text-align: center !important; }
.wrapTable .table2 td.text-right  { text-align: right !important; }
.wrapTable .table2 td.text-left   { text-align: left !important; }

/* ancho columnas especiales */
.table2.ft_agroupated_repeated th:last-child { width: 100px !important; }
.form-group .wrapTable th { width: auto; }
.wrapTable .table2 th.sortable,
.wrapTable .table2 td.sortable {
    width: 22px !important;
    border-right: 1px solid rgb(237 237 237);
}
.wrapTable .table2 th.jsThCheckboxes,
.wrapTable .table2 td.jsTdCheckbox { width: 32px !important; text-align: center !important; }
.wrapTable .table2 th.jsThCheckboxes span {
    min-height: 17px;
    display: block;
    text-align: center !important;
    padding: 0 3px !important;
}

/* =========================================================
   CONTENIDO EDITABLE / ENVOLTORIOS
   ========================================================= */
.wrapTable .table2 td .wW { /* wrapper de celda */
    position: relative;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 15px;
    min-height: 21px;
    width: 100% !important;
    padding: 6px 9px 7px !important;
}
.wrapTable .table2 td .wWI { /* contenido interior */
    display: inline-block;
    overflow-wrap: normal;
    text-overflow: ellipsis;
    line-height: 14px;
    position: relative;
}
.wrapTable .table2 td.td_type_trilean .wWI,
.wrapTable .table2 td.td_type_html .wWI2 { display: block !important; }
.wrapTable .table2 td.td_type_simplemodal .wWI d { display: inline-block; }

.wrapTable .table2 td .wWI a {
    font-weight: bold;
    font-size: 14px;
    line-height: 18px;
    display: inline-block;
}
.wrapTable .table2 td .wWI a.wrapImg { width: 50px; height: 50px; display: block; }
.wrapTable .table2 td .wWI a:hover { text-decoration: underline; }

.wrapTable .table2 td .JS_text {
    display: block;
    min-height: 14px;
    position: relative;
    padding: 3px 4px;
    border: 1px solid transparent;
}
.wrapTable .table2 td .JS_wrap:hover {
    background: rgb(216,253,213);
    border: 1px solid rgb(141,219,124);
    cursor: text;
}
.wrapTable .table2 td .wW .JS_text:focus {
    background: #fff;
    border: 1px solid rgba(81,161,211,.7);
    box-shadow: rgba(0,0,0,.4) 0 0 3px inset;
    color: #000;
}
.wrapTable .table2 td .JS_wrap i { /* icono editar inline */
    display: none;
    font-size: 11px;
    position: absolute !important;
    right: -7px !important;
    top: -2px !important;
    background: #fff !important;
    width: 18px !important;
    height: 18px !important;
    text-align: center !important;
    line-height: 18px !important;
    border: 1px solid #bbb !important;
}
.wrapTable .table2 td.text-center .JS_wrap i,
.wrapTable .table2 td.text-right .JS_wrap i { left: -5px; right: auto; }
.wrapTable .table2 td .JS_wrap:hover i { display: block; }
.wrapTable .table2 td .wW .JS_text:focus i { display: none; }
.wrapTable .table2 td .wW .JS_input { padding: 3px 7px 2px; width: 100%; }

/* progreso */
.wrapTable .table2 td.td_type_progressBar .wWI { display: block; }
.wrapTable .table2 td.td_type_progressBar .progress {
    top: 11px;
    position: relative;
    text-shadow: #000 1px 1px 0;
    font-size: 12px;
}

/* filas clicables */
.wrapTable .table2 tr[data-href] { cursor: pointer; }

/* =========================================================
   MENÚS DENTRO DE LA TABLA
   ========================================================= */
.wrapTable .table2 .dropdown-menu li { border-bottom: 1px dashed #e1e1e1; }
.wrapTable .table2 .dropdown-menu a {
    padding: 7px 0 7px 11px;
    margin-right: 0;
    color: #333 !important;
    display: block !important;
}
.wrapTable .table2 .dropdown-menu a:hover,
.wrapTable .table2 .dropdown-menu a:focus {
    background: #edf7ff;
    text-decoration: none !important;
}
.wrapTable .table2 .dropdown-menu a.jsListDeleteBtn:hover,
.wrapTable .table2 .dropdown-menu a.jsListDeleteBtn:focus {
    background: #f00;
    color: #fff !important;
}
.wrapTable .table2 .dropdown-menu a.jsListDeleteBtn:hover i,
.wrapTable .table2 .dropdown-menu a.jsListDeleteBtn:focus i { color: #fff !important; }
.wrapTable .table2 .dropdown-menu a i { top: 0 !important; color: rgba(0,0,0,.7) !important; }

/* =========================================================
   SORT / ICONOS ORDEN
   ========================================================= */
.wrapTable .sortCol { left: 0; opacity: .2 !important; right: auto !important; }
.wrapTable .sortCol.fa-sort-desc,
.wrapTable .sortCol.fa-sort-asc,
.wrapTable .sortCol:hover { opacity: 1 !important; }
.wrapTable thead i.fa-sort-desc,
.wrapTable thead i.fa-sort-asc,
.wrapTable thead i.fa-sort {
    margin: 0 3px;
    opacity: .4;
    font-size: 13px;
    position: absolute !important;
    float: none !important;
    top: 3px !important;
}
.wrapTable thead i.fa-sort { display: none; }
.wrapTable thead th:hover i.fa-sort { display: block; }
.wrapTable .table2 .fa.fa-info {
    width: 23px;
    line-height: 23px;
    border: 1px solid #ddd;
    height: 23px;
    border-radius: 20px;
    position: relative;
    float: none !important;
    background: #ababab !important;
    top: 0 !important;
    color: #545454 !important;
}
.wrapTable thead i.fa-sort-desc,
.wrapTable thead i.fa-sort-asc { opacity: 1; color: red !important; }

/* botón ocultar columna en th */
.wrapTable thead .JShideColumn {
    border-radius: 16px;
    width: 12px;
    top: 0;
    line-height: 11px;
    font-size: 14px;
    text-align: center;
    height: 12px;
    text-shadow: none;
    overflow: hidden;
    z-index: 999999999;
    visibility: hidden;
    position: absolute !important;
    left: auto !important;
    right: 0 !important;
    color: #ababab !important;
}
.wrapTable thead th:hover .JShideColumn { visibility: visible; }
.wrapTable thead .JShideColumn:hover { color: #222 !important; }

/* =========================================================
   CELDAS ESPECIALES / TEXTO
   ========================================================= */
.wrapTable td.paragrahp { color: #888 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.wrapTable td.paragrahp strong { color: #333; font-size: 14px; }
.wrapTable td b, .wrapTable td i, .wrapTable td strong, .wrapTable td span { cursor: default; }
.wrapTable .oneline { text-overflow: ellipsis; white-space: nowrap; height: 17px; overflow: hidden; }
.wrapTable .wLabelT { text-align: center; cursor: default; }
.wrapTable .cursiveGrey { font-weight: bold; font-style: italic; color: #555; }
.wrapTable span.highlight { background: rgb(145,145,114); color: #000; }

/* =========================================================
   CABECERA FIJA / STRUCTURAS ENVOLTURA
   ========================================================= */
.wrapTbody {
    margin-top: 0;
    overflow-x: hidden;
    height: 100%;
    z-index: 1;
    position: relative;
    padding-top: 45px;
}
.wrapTbody table { margin-top: -48px; position: relative; }
.wrapTbody thead, .wrapTbody thead tr { height: 1px; overflow: hidden; }
.wrapTbody thead { font-size: 0; padding: 0 !important; }
.wrapTable .wrapTbody thead th { height: 1px; font-size: 0 !important; padding: 0 !important; }
.wrapTable .wrapTbody thead th input,
.wrapTable .wrapTbody thead th i { display: none; }
.wrapTable .wrapTbody thead th span { line-height: 0 !important; padding: 0 !important; min-height: 0 !important; }

.wrapThead { z-index: 2; position: relative; }
.wrapThead tbody, .wrapThead thead { pointer-events: auto; }
.wrapThead thead th { height: 40px; position: relative; }
.wrapThead thead .th-inner {
    overflow: hidden;
    line-height: 14px;
    border-left: 1px solid #e4e4e4;
    margin-right: -1px;
    font-size: 11px;
    vertical-align: middle;
    display: block;
    font-weight: bold;
    color: #6a6e6f;
}
.wrapTable thead .th-inner2 {
    margin: 0;
    border-bottom: none;
    line-height: 11px;
    display: table;
    width: 100%;
    height: 100%;
    position: relative !important;
    float: none !important;
    top: 0 !important;
}
.wrapTable thead span {
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    padding: 0 4px;
    line-height: 11px;
    width: 100%;
    display: block;
}

/* checkbox en th (ajuste visual) */
.wrapThead thead .th-inner input[type="checkbox"]::after { top: -3px; }
.wrapThead thead .th-inner input[type="checkbox"] {
    left: -1px;
    position: relative;
}

/* =========================================================
   BOTONES / TOOLBARS
   ========================================================= */
.buttonsActionsList { margin-right: 4px; line-height: 28px; }
.buttonsActionsList > a {
    font-weight: bold;
    padding: 0 6px;
    margin: 0;
    border-right: 1px solid #a2a2a2;
}
.buttonsActionsList > a:last-child { border: 0; }

.squareBtn {
    float: right;
    width: 26px;
    text-align: center;
    border: 1px solid #c4c4c4 !important;
    background: -webkit-linear-gradient(top, #fff 1%, #f3f3f3 100%) !important;
    border-radius: 2px !important;
    color: #333 !important;
    display: inline-block !important;
    font-weight: bold !important;
    line-height: 24px !important;
    margin: 0 4px !important;
    min-height: 26px !important;
    text-decoration: none !important;
}
.squareBtn > i.fa {
    background: transparent;
    color: #000;
    margin: 0;
    display: inline-block;
    font-size: 14px;
}
.squareBtn:hover {
    border: 1px solid #a3a3a3 !important;
    background: #e8e6e6 !important;
}
.squareBtn.undo { margin: 0 !important; }
.table_options.head .squareBtn { margin: 0 !important; }

.tableHtmlBottom { font-size: 12px; font-weight: normal; float: left; }
.tableHtmlBottom a { font-weight: bold; }
.tableHtmlBottom a:hover { text-decoration: underline; }

/* botón sort número dentro de celda */
.wrapTable .JS_sort_cell,
.wrapTable .JS_sort_cell.JS_text {
    width: 25px;
    height: 25px;
    line-height: 25px;
    background: #e9e9e9;
    color: #000;
    font-size: 12px;
    text-align: center;
    display: inline-block;
    font-weight: bold;
    border-radius: 34px;
    border: 0 !important;
    margin: 0 auto;
    padding: 0 !important;
}

/* =========================================================
   PAGINACIÓN
   ========================================================= */
.pagination { float: right; padding: 0; margin: 0 0 0 2px !important; }
.pagination li { float: left; }
.pagination a {
    width: 26px;
    text-align: center;
    border: 1px solid #cecece !important;
    background: #ececec !important;
    color: #afafaf !important;
    display: inline-block !important;
    float: left !important;
    font-weight: bold !important;
    line-height: 24px !important;
    overflow: hidden;
    margin-right: 4px !important;
    height: 26px !important;
    text-decoration: none !important;
}
.pagination a:hover {
    border: 1px solid #a3a3a3 !important;
    background: #cecece !important;
    color: #8a8a8a !important;
}
.pagination .active a,
.pagination .active a:hover {
    color: #f2f2f2 !important;
    box-shadow: #eaeaea 0 1px 0, #67c3da 0 1px 0 inset !important;
    border-color: #5098aa !important;
    background: #88bbc8 !important;
}
.pagination li.totalPages { font-weight: bold; font-size: 15px; }
.pagination ul {
    margin-bottom: 0;
    display: inline-block;
    margin-left: 5px;
    float: left;
}
.pagination .dropdownPerPage { position: relative; float: right; }
.pagination .totalsPages {
    display: inline-block;
    position: relative;
    float: left;
    margin-left: 2px;
    line-height: 28px;
}
.pagination li.active a input {
    color: #000;
    padding: 0 0 4px;
    text-align: center;
    background: transparent;
    border: none;
    width: 100%;
    font-size: 13px;
    max-height: 100%;
}
.pagination li.active a input:hover,
.pagination li.active a input:focus { background: #fff; }

/* =========================================================
   TABLAS FIJAS / SCROLLER
   ========================================================= */
.table-fixed thead { width: 97%; }
.table-fixed tbody {
    height: 365px;
    overflow-y: auto;
    width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr,
.table-fixed td, .table-fixed th { display: block; }
.table-fixed tbody td, .table-fixed thead > tr > th {
    float: left;
    border-bottom-width: 0;
}

/* =========================================================
   ICONOS / ESTADOS / VARIOS
   ========================================================= */
.JS_handle {
    position: relative;
    margin-top: 17px;
    margin-left: 13px;
    cursor: move;
    background: none !important;
    color: #aaa !important;
}
.JS_handle:hover { color: #222 !important; }

.wrapTable .fa-external-link {
    font-size: 7px;
    margin-right: 3px;
    top: 7px;
    left: 0;
    background: transparent;
    color: #000;
    position: absolute !important;
}
.wrapTable i.fa {
    color: #000;
    padding: 0;
    cursor: pointer;
    margin-right: 3px;
    position: relative;
    background: transparent;
}
.wrapTable ul.dropdown-menu i.fa { background: transparent !important; position: relative !important; }
.wrapTable a.disabled i.fa {
    font-size: 14px;
    cursor: default !important;
    opacity: .3 !important;
    color: #000 !important;
}
.wrapTable a.disabled i.fa:hover { background: rgb(42,76,117) !important; }

/* icono editar simple modal */
.wrapTable i.JSsimpleModalEditVal {
    position: absolute;
    right: 1px;
    border-radius: 20px;
    background: #dedede;
    text-align: center;
    height: 20px;
    width: 20px;
    text-indent: 2px;
    top: 8px;
    line-height: 20px;
    color: #999;
    display: none;
}
.wrapTable td:hover i.JSsimpleModalEditVal { display: block; }
.wrapTable i.JSsimpleModalEditVal:hover { background: #ababab; color: #666; }
.wrapTable .td_type_simplemodal:hover i.JSsimpleModalEditVal,
.wrapTable .td_type_external:hover i.JSsimpleModalEditVal { display: inline; }

/* tiendas / badges */
.wrapTable .shopCircle {
    width: 23px;
    height: 23px;
    line-height: 23px;
    font-size: 12px;
    display: inline-block;
    font-weight: bold;
    border-radius: 50%;
}
.wrapTable .table2 td.shop_name {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 9px;
    text-align: center;
}

/* =========================================================
   ELEMENTOS VISUALES EXTRA (barras, números, scroll ghost)
   ========================================================= */
.wrapTable td span.bar {
    width: 120px;
    position: relative;
    height: 6px;
    display: block;
}
.wrapTable td span.bar > span {
    background: rgb(21,199,21);
    position: absolute;
    height: 100%;
    border-radius: 7px;
    border: 1px solid rgb(9,176,8);
}
.wrapTable span.numRight {
    position: absolute;
    right: 3px;
    top: 50%;
    margin-top: -6px;
}
.wrapTable .JSverticalGhostScroll {
    position: absolute;
    right: 0;
    top: 50px;
    bottom: 0;
    width: 10px;
    z-index: 1;
    overflow-y: auto;
}
.wrapTable .JSverticalGhostScroll .inner {}

/* =========================================================
   BLOQUES ESPECÍFICOS (productos/imágenes/galerías)
   ========================================================= */
.wrapTable .orderProducts .wrapProducts {
    margin-left: 52px;
    font-size: 11px;
    display: block;
    float: none;
    width: 100%;
}
.wrapTable .orderProducts .wrapImg { float: left; margin-right: 6px; }
.wrapTable .orderProducts img { width: 44px; height: 44px; border-radius: 0; }

.wrapTable .JSimageModal {
    width: 50px;
    height: 50px;
    max-height: 62px;
    position: relative;
    object-fit: unset;
    text-align: center;
    display: inline-block;
    background: #fff;
    vertical-align: middle;
    overflow: hidden;
    border: 2px solid transparent;
}
.wrapTable .complexCell .JSimageModal { float: left; }
.wrapTable .JSimageModal:hover { border-color: rgba(0,0,0,.3); }
.wrapTable .JSimageModal img {
    display: block;
    background-size: contain;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 100% !important;
    max-height: 100% !important;
}

/* buscador complejo */
.JSfilterComplexCell {
    position: relative;
    padding-right: 28px;
    min-width: 237px;
    height: 28px;
    margin-right: 5px;
}
.JSfilterComplexCell > input[type="text"] {
    width: 100%;
    display: block;
    height: 28px !important;
}
.JSfilterComplexCell > .JSsubmit {
    position: absolute;
    right: 0;
    display: block;
    top: 0;
    height: 100%;
    text-align: center;
    width: 29px;
    border: none;
    background: rgb(13,31,63);
    line-height: 27px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.JSfilterComplexCell > .JSsubmit > i { background: none !important; color: #fff; }

/* etiquetas búsqueda / tamaños fuente */
.wrapTable .JS_search_filters {
    margin: 0 6px 0 12px;
    display: block;
    font-size: 13px;
    font-weight: bold;
}
.wrapTable .miniFontSize { font-size: 10px; line-height: 10px; display: block; }
.wrapTable .miniFontSize strong { font-size: 10px !important; }
.wrapTable .middleFontSize { font-size: 12px; line-height: 12px; display: block; }
.wrapTable .middleFontSize strong { font-size: 12px !important; }

/* grid de carritos */
.wrapTable .imgCarts { margin-top: 7px; }
.wrapTable .imgCarts a {
    display: inline-block;
    margin-right: 6px;
    position: relative;
    border: 2px solid transparent;
    width: 40px;
    height: 40px;
    background: #cdcdcd;
}
.wrapTable .imgCarts a:hover { border-color: rgb(13,31,63); }
.wrapTable .imgCarts img {
    display: block;
    background: #fff;
    max-width: 100% !important;
    height: auto !important;
    max-height: 100%;
}
.wrapTable .imgCarts span {
    background: rgb(16,187,0);
    width: 16px;
    height: 16px;
    display: block;
    position: absolute;
    bottom: 0;
    right: -5px;
    font-weight: bold;
    color: #fff;
    font-size: 9px;
    text-align: center;
    line-height: 16px;
    border-radius: 50px;
}
.wrapTable .imgCarts span.status0 { background: red; }

/* =========================================================
   DROPDOWNS / CHECKS / POPUPS
   ========================================================= */
.wrapTable tr.JSrowPopupSelect td { cursor: pointer; }
.wrapTable tr.JSrowPopupSelect:hover td { background: rgb(215,244,255) !important; }

/* ebay botón circular */
.wrapTable a.btncircle > i {
    background: url("ebay-icon.png") center center / 19px no-repeat #fff;
    text-align: center;
    content: " ";
    position: relative;
    display: inline-block;
    color: #666;
    padding-top: 2px;
    line-height: 24px;
    padding-left: 0;
    box-shadow: rgba(0,0,0,.4) 0 0 5px;
    width: 28px;
    border-radius: 20px;
    height: 28px;
    margin-top: 4px;
    text-indent: 1px;
    margin-bottom: 3px;
    font-size: 14px !important;
}
.wrapTable .btncircle > i { margin: 0; display: inline; color: #666; }
.wrapTable a.btncircle i:hover { box-shadow: rgb(0,112,192) 0 0 7px; color: rgb(0,112,192); }

/* =========================================================
   COLUMNAS ELIMINABLES
   ========================================================= */
.wrapTable .table2 .JS_deleteColumn {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 11px;
    height: 10px;
    line-height: 6px;
    cursor: pointer;
    color: #aaa;
    border: 1px solid #bbb;
    border-radius: 53px;
    text-shadow: none;
    background: #ddd;
    font-size: 10px;
    opacity: 1;
    text-align: center;
    font-weight: bold;
    display: inline-block;
}
.wrapTable .table2 .JS_deleteColumn:hover {
    text-decoration: none;
    border: 1px solid #fff;
    background: #999;
    color: #fff;
}

/* =========================================================
   ESTRUCTURAS FIJAS / CONTAINERS AUX
   ========================================================= */
.fixed-table-container-inner {
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: #fff;
    min-width: 100%;
}
.fixed-table-container-inner .table2 { width: 100% !important; }
.fixed-table-container-inner .table2 .first .th-inner { border-left: none; padding-left: 6px; }
.fixed-table-container-inner .table2 .extrawrap th { text-align: center; }
.fixed-table-container-inner .table2 .extra-wrap { width: 100%; }
.fixed-table-container-inner .table2 .zupa div.zupa1 { margin: 0 auto !important; width: 0 !important; }
.fixed-table-container-inner .table2 .zupa div.th-inner {
    width: 100%;
    margin-left: -50%;
    text-align: center;
    border: 0;
}
.fixed-table-container-inner .table2 .hidden-head { min-width: 530px; }
.fixed-table-container-inner .table2 .hidden-header .th-inner {
    position: static;
    overflow-y: hidden;
    height: 0;
    white-space: nowrap;
    padding-right: 5px;
}
.fixed-table-container-inner .table2 table.table3 .control-group {
    border: 0;
    padding: 3px 8px;
    min-height: 0;
}

/* drag & sort cabecera */
.fixed-table-container-inner .dragtable-sortable {
    position: absolute;
    z-index: 9999999;
    height: 55px;
    top: -3px;
    background: transparent;
}
.fixed-table-container-inner .dragtable-sortable li {
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

/* lista sortable de columnas */
ul#sortableColumn { z-index: 99999999; top: 0; }
ul#sortableColumn li {
    float: left;
    background: #ededed !important;
    opacity: 1 !important;
}
ul#sortableColumn .table2 { margin-bottom: 0 !important; }
ul#sortableColumn .table2 thead { background: #ededed; }
ul#sortableColumn .table2 .th-inner {
    height: 49px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #eee;
    display: table;
}
ul#sortableColumn .table2 .th-inner2 {
    width: 39px;
    display: table-cell;
    vertical-align: middle;
}

/* =========================================================
   TABLE 3 / FORM TABLES / AGRUPADAS
   ========================================================= */
.table3 { width: 100%; }
.table3 th {
    background: #dedede;
    padding: 5px 5px;
    height: 44px;
    font-size: 11px;
    text-align: center;
    line-height: 12px;
    vertical-align: middle;
    text-transform: uppercase;
}
.table3 th.sortable { width: 40px !important; }
.table3 .td_type_buttons { width: 70px !important; }

table.ft_agroupated_repeated .control-group {
    min-height: 20px;
    height: inherit;
    border: 0;
    padding: 1px;
}
table.ft_agroupated_repeated input[type="text"] {
    height: 34px;
    padding: 2px 5px;
}
table.ft_agroupated_repeated input[type="text"].text-right {}
table.ft_agroupated_repeated input.jsFieldMultilang { padding-right: 32px; }
table.ft_agroupated_repeated .JS_handle { margin-top: 6px; }
table.ft_agroupated_repeated .control-label,
table.ft_agroupated_repeated .label_comment { display: none; }
table.ft_agroupated_repeated .control_group_checkbox { text-align: center; }
table.ft_agroupated_repeated .control_group_checkbox input[type="checkbox"] { display: inline-block; }

/* =========================================================
   ESTADOS / ANIMACIONES
   ========================================================= */
@-webkit-keyframes flashRowUpdate {
    0% { background-color: rgb(246,255,154); }
    100% { background-color: transparent; }
}
li.flashRowUpdate, tr.flashRowUpdate {
    animation-name: flashRowUpdate;
    animation-duration: 1s;
    animation-iteration-count: 8;
    animation-timing-function: ease-in-out;
}

/* =========================================================
   EDITABLE MODE (tabla editable)
   ========================================================= */
.wrapTable table.editable {}
.wrapTable table.editable td {}
.wrapTable table.editable td .wW { padding: 0 !important; }
.wrapTable table.editable td input {
    height: 23px;
    max-width: 100%;
    padding: 0 5px !important;
    border: none;
    background: transparent;
    height: 1px;
    width: 1px;
}
.wrapTable table.editable td input:after { left: -9px; top: -13px; }
.wrapTable table.editable td .wWI { display: block; }
.wrapTable table.editable td .wWI2 { padding: 5px 3px 3px; }

/* =========================================================
   VARIOS
   ========================================================= */
.wrapTable .JS_wrap {
    display: block;
    width: 100%;
    min-width: 60px;
    max-width: 100%;
    border: 1px solid transparent;
    position: relative;
}
.wrapTable .JS_search_filters {}
.wrapTable .JSheadTableList > .scroller {
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none;    /* Firefox */
    width: 100%;
    min-width: 100%;
    position: absolute;
    height: -webkit-fill-available;
    left: 0;
}
.JSheadTableList > .scroller::-webkit-scrollbar { display: none; }
.JSheadTableList .scrollerInner {
    width: 2000px;
    height: 100%;
    padding: 3px 5px 5px 5px;
    position: absolute;
    left: 0;
    top: 0;
    min-width: 100%;
}
.JSheadTableList .pagination .JS_per_page { top: -2px; position: relative; }

/* filas repetibles ocultas por defecto */
tr.JSrowRepeatable { display: none; }

/* =========================================================
   ICONOS DE PLATAFORMA (sprites/imagenes)
   ========================================================= */
.wrapTable .icon-chrome,
.wrapTable .icon-firefox,
.wrapTable .icon-safari,
.wrapTable .icon-windows,
.wrapTable .icon-opera,
.wrapTable .icon-android,
.wrapTable .icon-linux,
.wrapTable .icon-chromeos,
.wrapTable .icon-apple {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 7px;
}
.wrapTable .icon-chrome        { background-image: url("../img/icons/chrome-icon.png"); }
.wrapTable .icon-firefox       { background-image: url("../img/icons/firefox-icon.png"); }
.wrapTable .icon-safari        { background-image: url("../img/icons/safari-icon.png"); }
.wrapTable .icon-apple         { background-image: url("../img/icons/apple-icon.png"); }
.wrapTable .icon-opera         { background-image: url("../img/icons/opera-icon.png"); }
.wrapTable .icon-android       { background-image: url("../img/icons/android-icon.png"); }
.wrapTable .icon-linux         { background-image: url("../img/icons/linux-icon.png"); }
.wrapTable .icon-androidbrowser{ background-image: url("../img/icons/androidbrowser-icon.png"); }
.wrapTable .icon-windows       { background-image: url("../img/icons/windows-icon.png"); }
.wrapTable .icon-msie          { background-image: url("../img/icons/msie-icon.png"); }
.wrapTable .icon-chromeos      { background-image: url("../img/icons/chromeos-icon.png"); }
.wrapTable .icon-version {
    margin-top: 0;
    min-height: 20px;
    position: relative;
    line-height: 20px;
    display: inline-block;
    color: #999;
    top: -6px;
    font-size: 11px;
}

/* =========================================================
   UTILIDADES / AJUSTES VARIOS
   ========================================================= */
.table2-responsive { width: 100%; overflow-y: hidden; }
.form-group .wrapTable .table2 td:first-child { width: auto; }
.wrapTable .table2 .td_type_tooltip { text-align: center; }
.wrapTable .table2 .td_type_tooltip .wWI { display: block; text-align: center; }
.wrapTable .table2 th.td_type_price_format { width: 100px; }

.wrapTable .table2 tr:hover .td_type_buttons,
.wrapTable .table2 .td_type_buttons {} /* placeholder para overrides */

.wrapTable thead .th-inner2 input[type="checkbox"] {} /* placeholder */

.wrapTable .JSheadTableList {} /* placeholder */
.wrapThead table {} /* placeholder */

.table-striped > tbody > tr:nth-of-type(2n+1) { background: #fff; }

.wrapTable a.btncircle i:hover {} /* duplicado intencional (override permitido) */

/* =========================================================
   MEDIA QUERIES
   ========================================================= */
@media screen and (max-width: 900px) {
    .table2-responsive > .table2 > thead > tr > th,
    .table2-responsive > .table2 > tbody > tr > th,
    .table2-responsive > .table2 > tfoot > tr > th,
    .table2-responsive > .table2 > thead > tr > td,
    .table2-responsive > .table2 > tbody > tr > td,
    .table2-responsive > .table2 > tfoot > tr > td {
        white-space: nowrap;
    }
}

/* =========================================================
   MODO IFRAME
   ========================================================= */
body.iframed .table_options.bottom { display: none; }




/* === Modernización de tabla principal === */

/* Fondo general más claro */
.wrapTable {
  background: #f9fafb; /* gris claro moderno */
}

/* Cabecera */
.wrapTable thead {
  background: #f3f4f6; /* gris suave */
  border-bottom: 1px solid #e5e7eb;
  color: #374151; /* gris oscuro neutro */
  font-size: 12px;
  text-shadow: none; /* fuera efecto glossy */
}

.wrapTable thead th, 
.wrapTable thead td {
  padding: 10px 8px !important;
  font-size: 11px !important;
  font-weight: 600;
  text-transform: uppercase;
  border: none; /* fuera bordes internos gruesos */
}

/* Filas */
.wrapTable .table2 tr td {
  border: none;
  border-bottom: 1px solid #f1f1f1; /* divider sutil */
  font-size: 13px;
  color: #374151;
  padding: 10px 8px !important;
}

/* Alternancia de filas */
.wrapTable .table2 tr:nth-child(even) td {
  background-color: #fff;
}
.wrapTable .table2 tr:nth-child(odd) td {
  background-color: #fafafa;
}

/* Hover */
.wrapTable .table2 tbody tr:hover td {
  background-color: #eef2ff; /* azul clarito */
}

/* Badges */
.wrapTextColor, .wTC {
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  opacity: 1;
  padding: 3px 7px;
}

/* Botones de acción */
.wrapTable .table2 .td_type_buttons .dropdown-toggle {
  border-radius: 6px !important;
  background-color: #e5e7eb;
  transition: background 0.2s;
}
.wrapTable .table2 .td_type_buttons .dropdown-toggle:hover {
  background-color: #d1d5db;
}

/* Paginación */
.pagination a {
  border: 1px solid #d1d5db !important;
  background: #f3f4f6 !important;
  color: #4b5563 !important;
  border-radius: 6px;
}
.pagination a:hover {
  background: #e5e7eb !important;
  color: #111827 !important;
}
.pagination .active a {
  background: #3b82f6 !important; /* azul primario */
  border-color: #2563eb !important;
  color: #fff !important;
}

/* Sticky header */
.wrapTable .table2 thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f3f4f6;
}