/* Estilos compartidos de reportes (prefijo vs-): ventasEnSucursal.php, reporteCortesias.php. 2026-10-11 */

:root {
    --vs-fondo: #f5f7fa; --vs-card: #ffffff; --vs-borde: #e5e8ee; --vs-borde2: #eef0f4;
    --vs-texto: #1f2937; --vs-suave: #6b7280; --vs-tenue: #9ca3af;
    --vs-primario: #2563eb; --vs-primario-suave: #eff4ff;
    --vs-verde: #059669; --vs-ambar: #d97706; --vs-rojo: #dc2626; --vs-morado: #7c3aed; --vs-gris: #64748b;
    --vs-mesa: #2563eb; --vs-llevar: #059669; --vs-domicilio: #d97706; --vs-delivery: #7c3aed;
    --vs-radio: 10px; --vs-sombra: 0 1px 2px rgba(16, 24, 40, .05);
}
#content.vs { background: var(--vs-fondo); font-family: 'Inter', 'Open Sans', Arial, sans-serif; color: var(--vs-texto); padding-bottom: 30px; }
.vs * { box-sizing: border-box; }
.vs-encabezado { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 16px; }
.vs-encabezado h1 { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -.2px; color: var(--vs-texto); }
.vs-encabezado .sub { color: var(--vs-suave); font-size: 13px; margin-top: 3px; }
.vs-card { background: var(--vs-card); border: 1px solid var(--vs-borde); border-radius: var(--vs-radio); box-shadow: var(--vs-sombra); }

/* Filtros */
.vs-filtros { padding: 16px; margin-bottom: 16px; }
.vs-filtros-grid { display: grid; grid-template-columns: minmax(200px, 1.4fr) minmax(260px, 1.6fr) minmax(150px, 1fr) minmax(170px, 1fr) auto; gap: 12px; align-items: end; }
.vs-campo label { display: block; font-size: 12px; font-weight: 600; color: var(--vs-suave); margin-bottom: 6px; }
.vs-rango { display: flex; align-items: center; border: 1px solid var(--vs-borde); border-radius: 8px; height: 38px; padding: 0 10px; background: #fff; }
.vs-rango i { color: var(--vs-tenue); }
.vs-rango input { border: 0; outline: 0; width: 100%; font-size: 13px; text-align: center; background: transparent; color: var(--vs-texto); height: 36px; }
.vs-rango span { color: var(--vs-tenue); padding: 0 4px; }
.vs-rango:focus-within { border-color: var(--vs-primario); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.vs-atajos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.vs-atajo { border: 1px solid var(--vs-borde); background: #fff; color: var(--vs-suave); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.vs-atajo:hover { border-color: var(--vs-primario); color: var(--vs-primario); }
.vs-atajo.activo { background: var(--vs-primario-suave); border-color: var(--vs-primario); color: var(--vs-primario); font-weight: 600; }
.vs-boton { height: 38px; border-radius: 8px; border: 1px solid transparent; padding: 0 18px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.vs-boton.primario { background: var(--vs-primario); color: #fff; }
.vs-boton.primario:hover { background: #1d4ed8; }
.vs-boton.primario:disabled { opacity: .7; cursor: default; }
.vs-boton.secundario { background: #fff; border-color: var(--vs-borde); color: var(--vs-texto); }
.vs-boton.secundario:hover { border-color: #cfd5de; background: #fafbfc; }
.vs-boton.chico { height: 32px; padding: 0 12px; font-size: 12px; }

/* select2 */
.vs .select2-container { width: 100% !important; }
.vs .select2-container--default .select2-selection--single { height: 38px; border: 1px solid var(--vs-borde); border-radius: 8px; }
.vs .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; padding-left: 12px; font-size: 13px; color: var(--vs-texto); }
.vs .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; right: 6px; }
.vs .select2-container--default.select2-container--focus .select2-selection--single,
.vs .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--vs-primario); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.select2-dropdown.vs-drop { border: 1px solid var(--vs-borde); border-radius: 8px; box-shadow: 0 10px 24px rgba(16, 24, 40, .12); overflow: hidden; font-family: 'Inter', 'Open Sans', sans-serif; font-size: 13px; }
.select2-dropdown.vs-drop .select2-results__option { padding: 7px 12px; }
.select2-dropdown.vs-drop .select2-results__option--highlighted[aria-selected] { background: var(--vs-primario-suave); color: var(--vs-primario); }
.select2-dropdown.vs-drop .select2-results__option[aria-selected=true] { background: #f3f4f6; color: var(--vs-texto); font-weight: 600; }
.select2-dropdown.vs-drop .select2-search__field { border-radius: 6px; border: 1px solid var(--vs-borde); padding: 6px 8px; }
.vs-opt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }

/* Avisos */
.vs-aviso { display: flex; gap: 8px; align-items: flex-start; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 8px; padding: 8px 12px; font-size: 12.5px; margin-bottom: 10px; }
.vs-aviso.info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }

/* KPIs */
.vs-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.vs-kpi { padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; }
.vs-kpi .ic { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex: 0 0 38px; }
.vs-kpi .t { font-size: 12px; color: var(--vs-suave); font-weight: 500; }
.vs-kpi .v { font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.3px; }
.vs-kpi .s { font-size: 12px; color: var(--vs-tenue); margin-top: 2px; }
.ic.azul { background: #eff4ff; color: var(--vs-primario); } .ic.verde { background: #ecfdf5; color: var(--vs-verde); }
.ic.ambar { background: #fffbeb; color: var(--vs-ambar); } .ic.rojo { background: #fef2f2; color: var(--vs-rojo); }
.vs-mezcla { padding: 14px 16px; margin-bottom: 16px; }
.vs-mezcla .tit { display: flex; justify-content: space-between; font-size: 12px; color: var(--vs-suave); font-weight: 600; margin-bottom: 10px; }
.vs-barra { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--vs-borde2); }
.vs-barra div { height: 100%; }
.vs-leyenda { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 10px; font-size: 12.5px; }
.vs-leyenda .pt { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; }
.vs-leyenda b { font-weight: 600; } .vs-leyenda .pc { color: var(--vs-tenue); margin-left: 4px; }

/* Canales */
.vs-canales { display: inline-flex; flex-wrap: wrap; gap: 4px; background: #eef1f5; padding: 4px; border-radius: 10px; }
.vs-canal { cursor: pointer; border-radius: 7px; padding: 6px 12px; font-size: 12.5px; color: var(--vs-suave); user-select: none; display: inline-flex; align-items: center; gap: 6px; }
.vs-canal:hover { color: var(--vs-texto); }
.vs-canal.activo { background: #fff; color: var(--vs-texto); box-shadow: 0 1px 3px rgba(16, 24, 40, .1); font-weight: 600; }
.vs-canal .n { background: rgba(100, 116, 139, .12); border-radius: 999px; padding: 0 7px; font-size: 11px; font-weight: 600; }
.vs-canal .m { color: var(--vs-tenue); font-weight: 500; }

/* Tabla */
.vs-tabla-card { overflow: hidden; }
.vs-tabla-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--vs-borde2); }
.vs-tabla-top .dataTables_filter { float: none; margin: 0; }
.vs-tabla-top .dataTables_filter label { margin: 0; }
.vs-tabla-top .dataTables_filter input { width: 240px !important; height: 32px; border: 1px solid var(--vs-borde); border-radius: 8px; padding: 0 10px 0 30px; font-size: 12.5px; margin: 0 !important;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%239ca3af' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 10px center; }
.vs-tabla-top .dataTables_filter input:focus { outline: 0; border-color: var(--vs-primario); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.vs-tabla-scroll { overflow-x: auto; }
table.vs-tabla { width: 100% !important; border-collapse: collapse !important; margin: 0 !important; border: 0 !important; }
table.vs-tabla thead th { background: #fafbfc !important; color: var(--vs-suave); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
    border: 0 !important; border-bottom: 1px solid var(--vs-borde) !important; padding: 10px 10px !important; white-space: nowrap; }
table.vs-tabla thead th.sorting, table.vs-tabla thead th.sorting_asc, table.vs-tabla thead th.sorting_desc { padding-right: 24px !important; }
table.vs-tabla thead .sorting:after, table.vs-tabla thead .sorting_asc:after, table.vs-tabla thead .sorting_desc:after { right: 8px !important; font-size: 9px; opacity: .35; }
table.vs-tabla thead .sorting_asc:after, table.vs-tabla thead .sorting_desc:after { opacity: .8; color: var(--vs-primario); }
table.vs-tabla tbody td { border: 0 !important; border-bottom: 1px solid var(--vs-borde2) !important; padding: 9px 10px !important; font-size: 12.5px; vertical-align: middle; background: #fff !important; }
table.vs-tabla tbody tr:hover td { background: #fafcff !important; }
table.vs-tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.vs-tabla tfoot td { background: #fafbfc; border: 0 !important; border-top: 1px solid var(--vs-borde) !important; padding: 10px !important; font-weight: 700; font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.vs-tabla tr.vs-cancelado td { color: var(--vs-tenue); }
table.vs-tabla tr.vs-cancelado td.num { text-decoration: line-through; }
.vs-tabla-pie { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 14px; font-size: 12px; color: var(--vs-suave); }
.vs-tabla-pie .dataTables_info { padding: 0 !important; }
.vs-tabla-pie .dataTables_paginate { float: none !important; margin: 0 !important; }
.vs-tabla-pie .pagination { margin: 0 !important; }
.vs-tabla-pie .pagination > li > a { border-radius: 6px !important; margin: 0 2px; border: 1px solid var(--vs-borde); color: var(--vs-texto); font-size: 12px; padding: 4px 10px; }
.vs-tabla-pie .pagination > .active > a { background: var(--vs-primario); border-color: var(--vs-primario); color: #fff; }
.vs-cero { color: #cbd2db; }
.vs-fecha b { font-weight: 600; } .vs-fecha span { color: var(--vs-tenue); font-size: 11px; margin-left: 4px; }
.vs-sub { display: block; font-size: 11px; color: var(--vs-tenue); margin-top: 1px; }
.vs-tipo { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; text-transform: capitalize; white-space: nowrap; }
.vs-tipo:before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vs-tipo.mesa { background: #eff4ff; color: var(--vs-mesa); } .vs-tipo.llevar { background: #ecfdf5; color: var(--vs-llevar); }
.vs-tipo.domicilio { background: #fffbeb; color: var(--vs-domicilio); } .vs-tipo.delivery { background: #f5f3ff; color: var(--vs-delivery); }
.vs-tipo.otro { background: #f1f5f9; color: var(--vs-gris); }
.vs-status { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 500; background: #f1f5f9; color: #475569; text-transform: capitalize; }
.vs-status.cancelado { background: #fef2f2; color: var(--vs-rojo); }
.vs-status.abierto, .vs-status.pendiente { background: #fffbeb; color: var(--vs-ambar); }
.vs-dup { color: var(--vs-rojo); margin-left: 5px; font-size: 11px; cursor: help; }
.vs-ver { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--vs-borde); background: #fff; color: var(--vs-suave); cursor: pointer; }
.vs-ver:hover { border-color: var(--vs-primario); color: var(--vs-primario); }

/* Vacío / cargando */
.vs-vacio { text-align: center; color: var(--vs-suave); padding: 56px 16px; }
.vs-vacio .ic { width: 52px; height: 52px; border-radius: 14px; background: var(--vs-primario-suave); color: var(--vs-primario); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 12px; }
.vs-vacio h3 { font-size: 15px; font-weight: 600; color: var(--vs-texto); margin: 0 0 4px; }

/* Modal */
.vs-modal .modal-dialog { width: 780px; max-width: 96%; margin-top: 40px; }
.vs-modal .modal-content { display: flex; flex-direction: column; max-height: calc(100vh - 80px); border-radius: 12px; border: 0; overflow: hidden; font-family: 'Inter', 'Open Sans', sans-serif; color: var(--vs-texto); }
.vs-modal .modal-header { padding: 16px 20px; border-bottom: 1px solid var(--vs-borde2); }
.vs-modal .modal-title { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vs-modal .modal-title .vs-sub { display: inline; font-weight: 400; font-size: 12px; }
.vs-modal .modal-body { overflow-y: auto; padding: 16px 20px; background: var(--vs-fondo); }
.vs-modal .modal-footer { padding: 12px 20px; border-top: 1px solid var(--vs-borde2); display: flex; justify-content: flex-end; gap: 8px; }
.vs-m-datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.vs-m-dato { background: #fff; border: 1px solid var(--vs-borde); border-radius: 8px; padding: 8px 10px; }
.vs-m-dato .t { font-size: 11px; color: var(--vs-tenue); } .vs-m-dato .v { font-size: 13px; font-weight: 600; word-break: break-word; }
.vs-m-sec { background: #fff; border: 1px solid var(--vs-borde); border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.vs-m-sec h5 { margin: 0; padding: 10px 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--vs-suave); border-bottom: 1px solid var(--vs-borde2); }
.vs-m-sec table { width: 100%; margin: 0; }
.vs-m-sec table td, .vs-m-sec table th { padding: 7px 14px !important; font-size: 12.5px; border-bottom: 1px solid var(--vs-borde2); }
.vs-m-sec table th { font-size: 11px; color: var(--vs-tenue); font-weight: 600; text-transform: uppercase; }
.vs-m-sec table tr:last-child td { border-bottom: 0; }
.vs-m-sec .cuerpo { padding: 12px 14px; }
.vs-m-cobro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.vs-m-cobro div { display: flex; justify-content: space-between; padding: 5px 0; font-size: 12.5px; border-bottom: 1px dashed var(--vs-borde2); }
.vs-m-cobro div span { color: var(--vs-suave); }
.vs-m-cobro div.total { font-weight: 700; font-size: 14px; }
.vs-formas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vs-formas label { font-size: 12px; font-weight: 600; color: var(--vs-suave); margin-bottom: 4px; display: block; }
.vs-formas .ent { display: flex; align-items: center; border: 1px solid var(--vs-borde); border-radius: 8px; height: 36px; padding: 0 10px; background: #fff; }
.vs-formas .ent span { color: var(--vs-tenue); margin-right: 4px; }
.vs-formas .ent input { border: 0; outline: 0; width: 100%; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; background: transparent; }
.vs-formas .ent:focus-within { border-color: var(--vs-primario); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.vs-formas input:disabled { color: var(--vs-suave); }
.vs-suma { font-size: 12.5px; margin-top: 10px; font-weight: 600; }
.vs-suma.mal { color: var(--vs-rojo); } .vs-suma.bien { color: var(--vs-verde); }

@media (max-width: 1100px) {
    .vs-filtros-grid { grid-template-columns: 1fr 1fr; }
    .vs-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .vs-filtros-grid, .vs-kpis, .vs-m-datos, .vs-formas, .vs-m-cobro { grid-template-columns: 1fr; }
    .vs-tabla-top .dataTables_filter input { width: 100% !important; }
}

/* Resúmenes con barra (reporteCortesias.php) */
.vs-resumenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.vs-resumen h4 { margin: 0; padding: 12px 14px; font-size: 13px; font-weight: 600; color: var(--vs-texto); border-bottom: 1px solid var(--vs-borde2); display: flex; align-items: center; gap: 8px; }
.vs-resumen h4 i { color: var(--vs-tenue); }
.vs-resumen .lista { max-height: 260px; overflow-y: auto; padding: 4px 0; }
.vs-resumen .fila { padding: 8px 14px; font-size: 12.5px; }
.vs-resumen .fila .arriba { display: flex; justify-content: space-between; gap: 8px; }
.vs-resumen .fila .arriba .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-resumen .fila .arriba .mon { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vs-resumen .fila .arriba .ped { color: var(--vs-tenue); font-weight: 400; margin-left: 6px; }
.vs-resumen .barra { height: 5px; background: var(--vs-borde2); border-radius: 999px; margin-top: 5px; overflow: hidden; }
.vs-resumen .barra span { display: block; height: 100%; background: var(--vs-primario); border-radius: 999px; }
.vs-resumen .vacio { padding: 18px 14px; color: var(--vs-tenue); font-size: 12px; text-align: center; }
.vs-chip { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; margin: 1px 2px 1px 0; }
.vs-chip.cortesia { background: #fef2f2; color: var(--vs-rojo); }
.vs-chip.descuento { background: #fffbeb; color: var(--vs-ambar); }
.vs-nota { font-size: 12px; color: var(--vs-suave); margin: 0 0 14px; line-height: 1.5; }
.vs-nota b { color: var(--vs-texto); }
.vs-kpi .v.texto { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
@media (max-width: 1100px) { .vs-resumenes { grid-template-columns: 1fr; } }

/* =====================================================================================================
   Capa de tema: <body class="vs-tema"> aplica el diseño a los componentes de Bootstrap / SmartAdmin
   que ya usa la página (tablas, widgets, botones, inputs, select2, pestañas, paneles, modales).
   Solo dentro de #content y de los modales: el menú y la barra superior no cambian.
   ===================================================================================================== */
.vs-tema #content { background: var(--vs-fondo); font-family: 'Inter', 'Open Sans', Arial, sans-serif; color: var(--vs-texto); padding-bottom: 30px; min-height: calc(100vh - 100px); }
.vs-tema #content, .vs-tema .modal { font-size: 13px; }
.vs-tema .modal-content, .vs-tema .select2-dropdown { font-family: 'Inter', 'Open Sans', Arial, sans-serif; }

/* Encabezado de SmartAdmin (h1.page-title) */
.vs-tema #content h1.page-title { font-size: 22px; font-weight: 700; letter-spacing: -.2px; color: var(--vs-texto) !important; margin: 6px 0 16px; }
.vs-tema #content h1.page-title > .fa { display: none; }
.vs-tema #content h1.page-title small { display: block; font-size: 13px; font-weight: 400; color: var(--vs-suave); margin-top: 3px; letter-spacing: 0; }

/* Contenedores */
.vs-tema #content .jarviswidget { border: 1px solid var(--vs-borde) !important; border-radius: var(--vs-radio); box-shadow: var(--vs-sombra); background: #fff; overflow: hidden; margin-bottom: 16px; }
.vs-tema #content .jarviswidget > header { background: #fff !important; border: 0 !important; border-bottom: 1px solid var(--vs-borde2) !important; color: var(--vs-texto) !important; height: auto; min-height: 44px; padding: 4px 6px; }
.vs-tema #content .jarviswidget > header h2 { font-size: 13px; font-weight: 600; color: var(--vs-texto); line-height: 36px; }
.vs-tema #content .jarviswidget > header .widget-icon { color: var(--vs-tenue); }
.vs-tema #content .jarviswidget > div, .vs-tema #content .jarviswidget .widget-body { border: 0 !important; background: #fff; }
.vs-tema #content .jarviswidget .widget-body { padding: 16px; }
.vs-tema #content .well { background: #fff; border: 1px solid var(--vs-borde); border-radius: var(--vs-radio); box-shadow: var(--vs-sombra); }
.vs-tema #content .panel, .vs-tema .modal .panel { border: 1px solid var(--vs-borde); border-radius: var(--vs-radio); box-shadow: var(--vs-sombra); overflow: hidden; }
.vs-tema #content .panel-heading, .vs-tema .modal .panel-heading { background: #fafbfc !important; border-bottom: 1px solid var(--vs-borde2) !important; color: var(--vs-texto) !important; font-weight: 600; }

/* Formularios */
.vs-tema #content label, .vs-tema .modal label { font-size: 12px; color: var(--vs-suave); }
.vs-tema #content .form-group > label, .vs-tema .modal .form-group > label, .vs-tema #content .control-label { font-weight: 600; margin-bottom: 6px; }
.vs-tema #content .form-control, .vs-tema .modal .form-control {
    height: 36px !important; border: 1px solid var(--vs-borde) !important; border-radius: 8px !important; box-shadow: none !important;
    font-size: 13px !important; color: var(--vs-texto); padding: 6px 10px; background-color: #fff; }
.vs-tema #content textarea.form-control, .vs-tema .modal textarea.form-control { height: auto !important; }
.vs-tema #content .form-control:focus, .vs-tema .modal .form-control:focus { border-color: var(--vs-primario) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12) !important; }
.vs-tema #content .form-control[readonly], .vs-tema #content .form-control[disabled], .vs-tema .modal .form-control[readonly], .vs-tema .modal .form-control[disabled] { background: #f9fafb; color: var(--vs-suave); }
.vs-tema #content .input-group .form-control:first-child, .vs-tema .modal .input-group .form-control:first-child { border-radius: 8px 0 0 8px !important; }
.vs-tema #content .input-group-btn .btn, .vs-tema .modal .input-group-btn .btn { height: 36px !important; border-radius: 0 8px 8px 0 !important; }
.vs-tema #content .icon-addon label.fa { top: 30px !important; color: var(--vs-tenue); }
.vs-tema #content input[type=checkbox], .vs-tema .modal input[type=checkbox], .vs-tema #content input[type=radio], .vs-tema .modal input[type=radio] { accent-color: var(--vs-primario); }

/* Botones */
.vs-tema #content .btn, .vs-tema .modal .btn {
    border-radius: 8px !important; font-weight: 600; font-size: 13px; padding: 7px 14px; box-shadow: none !important;
    border: 1px solid transparent; transition: background .15s, border-color .15s; text-shadow: none; }
.vs-tema #content .btn-sm, .vs-tema .modal .btn-sm { font-size: 12px; padding: 5px 11px; }
.vs-tema #content .btn-xs, .vs-tema .modal .btn-xs { font-size: 11.5px; padding: 4px 9px; border-radius: 7px !important; }
.vs-tema #content .btn-default, .vs-tema .modal .btn-default { background: #fff; border-color: var(--vs-borde); color: var(--vs-texto); }
.vs-tema #content .btn-default:hover, .vs-tema .modal .btn-default:hover { background: #f9fafb; border-color: #cfd5de; }
.vs-tema #content .btn-default.active, .vs-tema .modal .btn-default.active { background: var(--vs-primario-suave); border-color: var(--vs-primario); color: var(--vs-primario); }
.vs-tema #content .btn-primary, .vs-tema .modal .btn-primary { background: var(--vs-primario); border-color: var(--vs-primario); color: #fff; }
.vs-tema #content .btn-primary:hover, .vs-tema .modal .btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
.vs-tema #content .btn-info, .vs-tema .modal .btn-info { background: #eff6ff; border-color: #bfdbfe; color: var(--vs-primario); }
.vs-tema #content .btn-info:hover, .vs-tema .modal .btn-info:hover { background: #dbeafe; }
.vs-tema #content .btn-success, .vs-tema .modal .btn-success { background: var(--vs-verde); border-color: var(--vs-verde); color: #fff; }
.vs-tema #content .btn-success:hover, .vs-tema .modal .btn-success:hover { background: #047857; }
.vs-tema #content .btn-danger, .vs-tema .modal .btn-danger { background: #fff; border-color: #fecaca; color: var(--vs-rojo); }
.vs-tema #content .btn-danger:hover, .vs-tema .modal .btn-danger:hover { background: #fef2f2; border-color: var(--vs-rojo); }
.vs-tema #content .btn-warning, .vs-tema .modal .btn-warning { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.vs-tema #content .btn[disabled], .vs-tema .modal .btn[disabled] { opacity: .55; }

/* Tablas */
.vs-tema #content .table, .vs-tema .modal .table { background: #fff; margin-bottom: 0; border-collapse: collapse !important; }
.vs-tema #content .table-bordered, .vs-tema .modal .table-bordered { border: 0 !important; }
.vs-tema #content .table > thead > tr > th, .vs-tema .modal .table > thead > tr > th {
    background: #fafbfc !important; color: var(--vs-suave) !important; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
    border: 0 !important; border-bottom: 1px solid var(--vs-borde) !important; padding: 10px !important; vertical-align: middle; }
.vs-tema #content .table > thead > tr > th.hasinput { background: #fff !important; padding: 8px 6px !important; text-transform: none; }
.vs-tema #content .table > tbody > tr > td, .vs-tema .modal .table > tbody > tr > td, .vs-tema #content .table > tfoot > tr > td, .vs-tema #content .table > tfoot > tr > th {
    border: 0 !important; border-bottom: 1px solid var(--vs-borde2) !important; padding: 9px 10px !important; vertical-align: middle !important; font-size: 12.5px; }
.vs-tema #content .table > tfoot > tr > td, .vs-tema #content .table > tfoot > tr > th { background: #fafbfc; font-weight: 700; border-top: 1px solid var(--vs-borde) !important; }
.vs-tema #content .table-striped > tbody > tr:nth-of-type(odd), .vs-tema .modal .table-striped > tbody > tr:nth-of-type(odd) { background: #fcfcfd; }
.vs-tema #content .table-hover > tbody > tr:hover > td, .vs-tema #content .table > tbody > tr:hover > td { background: #fafcff; }
.vs-tema #content .table-responsive { border: 0; }
.vs-tema #content .dataTables_wrapper .dt-toolbar, .vs-tema #content .dataTables_wrapper .dt-toolbar-footer { background: #fff; border: 0; padding: 10px 12px; }
.vs-tema #content .dataTables_filter input, .vs-tema #content .dataTables_length select { height: 32px !important; border: 1px solid var(--vs-borde) !important; border-radius: 8px !important; font-size: 12.5px !important; }
.vs-tema #content .dataTables_filter .input-group-addon { border-radius: 8px 0 0 8px; background: #fafbfc; border-color: var(--vs-borde); }
.vs-tema #content .dataTables_filter .input-group-addon + input { border-radius: 0 8px 8px 0 !important; }
.vs-tema #content .dataTables_info { color: var(--vs-suave); font-size: 12px; }
.vs-tema #content .pagination > li > a, .vs-tema #content .pagination > li > span { border-radius: 6px !important; margin: 0 2px; border: 1px solid var(--vs-borde); color: var(--vs-texto); font-size: 12px; padding: 4px 10px; }
.vs-tema #content .pagination > .active > a, .vs-tema #content .pagination > .active > span { background: var(--vs-primario); border-color: var(--vs-primario); color: #fff; }

/* Pestañas */
.vs-tema #content .nav-tabs, .vs-tema .modal .nav-tabs { border-bottom: 1px solid var(--vs-borde); margin-bottom: 0; }
.vs-tema #content .nav-tabs > li > a, .vs-tema .modal .nav-tabs > li > a {
    border: 0 !important; border-bottom: 2px solid transparent !important; background: transparent !important; color: var(--vs-suave);
    font-weight: 600; font-size: 13px; padding: 10px 14px; margin-right: 4px; border-radius: 0 !important; box-shadow: none !important; }
.vs-tema #content .nav-tabs > li > a:hover, .vs-tema .modal .nav-tabs > li > a:hover { color: var(--vs-texto); }
.vs-tema #content .nav-tabs > li.active > a, .vs-tema .modal .nav-tabs > li.active > a { color: var(--vs-primario) !important; border-bottom-color: var(--vs-primario) !important; }
.vs-tema #content .nav-tabs > li.active { margin-top: 0 !important; }
.vs-tema #content .nav-tabs > li > a:before, .vs-tema #content .nav-tabs > li.active > a:before { display: none !important; }

/* Etiquetas, insignias y avisos */
.vs-tema #content .label, .vs-tema .modal .label { border-radius: 6px; font-weight: 600; font-size: 11px; padding: 3px 8px; }
.vs-tema #content .label-success, .vs-tema .modal .label-success { background: #ecfdf5; color: var(--vs-verde); }
.vs-tema #content .label-danger, .vs-tema .modal .label-danger { background: #fef2f2; color: var(--vs-rojo); }
.vs-tema #content .label-warning, .vs-tema .modal .label-warning { background: #fffbeb; color: #b45309; }
.vs-tema #content .label-info, .vs-tema #content .label-primary, .vs-tema .modal .label-info, .vs-tema .modal .label-primary { background: #eff6ff; color: var(--vs-primario); }
.vs-tema #content .label-default, .vs-tema .modal .label-default { background: #f1f5f9; color: #475569; }
.vs-tema #content .badge, .vs-tema .modal .badge { border-radius: 999px; font-weight: 600; font-size: 11px; }
.vs-tema #content .alert, .vs-tema .modal .alert { border-radius: 8px; border-width: 1px; border-style: solid; box-shadow: none; font-size: 12.5px; padding: 9px 12px; }
.vs-tema #content .alert-warning, .vs-tema .modal .alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.vs-tema #content .alert-info, .vs-tema .modal .alert-info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.vs-tema #content .alert-danger, .vs-tema .modal .alert-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.vs-tema #content .alert-success, .vs-tema .modal .alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }

/* select2 */
.vs-tema #content .select2-container, .vs-tema .modal .select2-container { width: 100% !important; }
.vs-tema #content .select2-container--default .select2-selection--single, .vs-tema .modal .select2-container--default .select2-selection--single { height: 36px; border: 1px solid var(--vs-borde); border-radius: 8px; }
.vs-tema #content .select2-container--default .select2-selection--single .select2-selection__rendered, .vs-tema .modal .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 34px; padding-left: 10px; font-size: 13px; color: var(--vs-texto); }
.vs-tema #content .select2-container--default .select2-selection--single .select2-selection__arrow, .vs-tema .modal .select2-container--default .select2-selection--single .select2-selection__arrow { height: 34px; right: 6px; }
.vs-tema #content .select2-container--default .select2-selection--multiple, .vs-tema .modal .select2-container--default .select2-selection--multiple { min-height: 36px; border: 1px solid var(--vs-borde); border-radius: 8px; }
.vs-tema #content .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--vs-primario-suave); border: 0; color: var(--vs-primario); border-radius: 6px; font-size: 12px; }
.vs-tema #content .select2-container--focus .select2-selection, .vs-tema #content .select2-container--open .select2-selection, .vs-tema .modal .select2-container--open .select2-selection { border-color: var(--vs-primario) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.vs-tema .select2-dropdown { border: 1px solid var(--vs-borde); border-radius: 8px; box-shadow: 0 10px 24px rgba(16, 24, 40, .12); overflow: hidden; font-size: 13px; }
.vs-tema .select2-results__option { padding: 7px 12px; }
.vs-tema .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--vs-primario-suave); color: var(--vs-primario); }
.vs-tema .select2-search--dropdown .select2-search__field { border-radius: 6px; border: 1px solid var(--vs-borde); }

/* Modales */
.vs-tema .modal-content { border: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 50px rgba(16, 24, 40, .25); color: var(--vs-texto); }
.vs-tema .modal-header { padding: 16px 20px; border-bottom: 1px solid var(--vs-borde2); background: #fff; }
.vs-tema .modal-title { font-size: 16px; font-weight: 700; color: var(--vs-texto); }
.vs-tema .modal-title .fa { color: var(--vs-tenue); }
.vs-tema .modal-body { padding: 16px 20px; }
.vs-tema .modal-footer { padding: 12px 20px; border-top: 1px solid var(--vs-borde2); background: #fafbfc; }
.vs-tema .modal-header .close { opacity: .45; font-size: 22px; }
.vs-tema .modal-header .close:hover { opacity: .8; }

/* ---------- Ajustes por pantalla (clases propias de cada una) ---------- */

/* Avisos de ayuda: tokens_pos.php (tkn-), perfiles_pos.php (pp-) */
.vs-tema .tkn-ayuda, .vs-tema .pp-ayuda { background: #eff6ff; border: 1px solid #bfdbfe; border-left: 1px solid #bfdbfe; border-radius: 8px; color: #1e40af; padding: 10px 14px; font-size: 12.5px; }
.vs-tema .tkn-ayuda b, .vs-tema .pp-ayuda b { color: #1e3a8a; }
.vs-tema .tkn-subtitulo, .vs-tema .pp-subtitulo, .vs-tema .pst-subtitulo { color: var(--vs-suave); font-size: 13px; }

/* Insignias de estado (pastilla suave) */
.vs-tema .tkn-badge, .vs-tema .pp-badge { border-radius: 6px; font-weight: 600; padding: 3px 8px; }
.vs-tema .tkn-ok, .vs-tema .pp-ok { background: #ecfdf5; color: var(--vs-verde); }
.vs-tema .tkn-sin, .vs-tema .pp-warn { background: #fffbeb; color: #b45309; }
.vs-tema .tkn-off, .vs-tema .pp-off { background: #f1f5f9; color: #64748b; }
.vs-tema .pp-info { background: #eff6ff; color: var(--vs-primario); }
.vs-tema .tkn-muted, .vs-tema .pp-muted { color: var(--vs-tenue); }

/* Tarjetas de tabla */
.vs-tema .tkn-tabla-wrap, .vs-tema .pst-tabla-wrap { background: #fff; border: 1px solid var(--vs-borde); border-radius: var(--vs-radio); box-shadow: var(--vs-sombra); padding: 0; overflow: hidden; }
.vs-tema .tkn-tabla > thead > tr > th, .vs-tema .pp-tabla > thead > tr > th, .vs-tema .pst-tabla > thead > tr > th { background: #fafbfc !important; }
.vs-tema .tkn-modal-tabla th { background: #fafbfc !important; }
.vs-tema .tkn-comparte .tkn-clave { background: var(--vs-primario-suave); color: var(--vs-primario); border-radius: 5px; }
.vs-tema .tkn-alcance, .vs-tema .pp-sucursales { border-color: var(--vs-borde); border-radius: 8px; }

/* perfiles_pos.php: pestañas sobre tarjeta */
.vs-tema .pp-panel { background: #fff; border: 1px solid var(--vs-borde); border-top: 0; border-radius: 0 0 var(--vs-radio) var(--vs-radio); box-shadow: var(--vs-sombra); padding: 16px; }
.vs-tema #content .nav-tabs + .tab-content { margin-top: 0; }
.vs-tema .pp-grupo { border-color: var(--vs-borde); border-radius: 8px; overflow: hidden; }
.vs-tema .pp-grupo-tit { background: #fafbfc; border-bottom: 1px solid var(--vs-borde2); }
.vs-tema .pp-comp-wrap { border-color: var(--vs-borde); border-radius: var(--vs-radio); }
.vs-tema .pp-comp-tit { background: #fafbfc; border-bottom-color: var(--vs-borde2); }
.vs-tema .pp-comp thead th { background: #fafbfc; color: var(--vs-suave); }
.vs-tema .pp-comp tr.pp-central td { background: var(--vs-primario-suave); }

/* rrhh_puestos: indicadores, formulario y accesos */
.vs-tema .pst-kpis { margin: 0 -6px 16px; }
.vs-tema .pst-kpi { margin: 0 6px 8px; padding: 12px 16px; border: 1px solid var(--vs-borde); border-radius: var(--vs-radio); box-shadow: var(--vs-sombra); border-left: 1px solid var(--vs-borde); position: relative; }
.vs-tema .pst-kpi:before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--vs-primario); }
.vs-tema .pst-kpi.verde:before { background: var(--vs-verde); }
.vs-tema .pst-kpi.gris:before { background: var(--vs-gris); }
.vs-tema .pst-kpi .n { font-size: 22px; font-weight: 700; letter-spacing: -.3px; }
.vs-tema .pst-kpi .t { font-size: 12px; text-transform: none; color: var(--vs-suave); font-weight: 500; }
.vs-tema .pst-kpi.activo { background: var(--vs-primario-suave); box-shadow: 0 0 0 2px var(--vs-primario) inset; border-color: var(--vs-primario); }
.vs-tema .pst-form { border: 1px solid var(--vs-borde); border-radius: var(--vs-radio); box-shadow: var(--vs-sombra); overflow: hidden; margin-bottom: 16px; }
.vs-tema .pst-form-header { background: #fafbfc; border-bottom: 1px solid var(--vs-borde2); color: var(--vs-texto); text-transform: none; font-size: 13px; font-weight: 600; padding: 12px 16px; }
.vs-tema .pst-form-body { padding: 16px 16px 6px; }
.vs-tema .pst-form-footer { border-top-color: var(--vs-borde2); padding: 12px 0; }
.vs-tema .pst-label { color: var(--vs-suave); font-weight: 600; }
.vs-tema .pst-acceso { border: 1px solid var(--vs-borde); border-left: 1px solid var(--vs-borde); border-radius: 8px; background: #fff; padding: 10px 12px 12px; }
.vs-tema .pst-acceso-web.activo { border-color: #bfdbfe; background: #f5f9ff; }
.vs-tema .pst-acceso-pos.activo { border-color: #a7f3d0; background: #f3fdf8; }

/* reporteComprasSuc.php */
.vs-tema #content .jarviswidget .widget-body.p-0 { padding: 16px !important; }
.vs-tema #exampleModal2 .modal-header { background: #fff; color: var(--vs-texto); border-radius: 0; }
.vs-tema #exampleModal2 .modal-header .close { color: inherit; opacity: .45; }
.vs-tema #exampleModal2 .modal-footer { background: #fafbfc; border-top-color: var(--vs-borde2); }
.vs-tema #exampleModal2 .section-label { color: var(--vs-suave); border-bottom-color: var(--vs-borde2); }
.vs-tema #exampleModal2 .pagada-box { border-radius: 8px; background: #eff6ff; border-color: #bfdbfe; }
.vs-tema #ComprasSucTable td { padding: 9px 10px !important; }

/* ventasPorCanal.php: sus variables (vc-) toman la paleta del tema; los colores de las series no cambian */
.vs-tema .vc { --vc-borde: var(--vs-borde); --vc-borde-2: var(--vs-borde2); --vc-texto: var(--vs-texto); --vc-texto-2: var(--vs-suave);
    --vc-muted: var(--vs-tenue); --vc-acento: var(--vs-primario); --vc-acento-suave: var(--vs-primario-suave); --vc-grupo: #fafbfc; }
.vs-tema .vc-card { border-radius: var(--vs-radio); box-shadow: var(--vs-sombra); padding: 16px; }
.vs-tema .vc-head .page-title { margin: 6px 0 4px !important; }
.vs-tema .vc-head p { color: var(--vs-suave); }
.vs-tema .vc-segmento { border-radius: 8px; }
.vs-tema .vc-titulo { font-size: 13.5px; font-weight: 600; }

/* servicios/serviciosPendientes.php: sus variables (sv-) toman la paleta del tema; los colores de estado no cambian */
.vs-tema .sv { --sv-surface: #fff; --sv-fondo: #fafbfc; --sv-borde: var(--vs-borde); --sv-borde-2: var(--vs-borde2);
    --sv-texto: var(--vs-texto); --sv-texto-2: var(--vs-suave); --sv-muted: var(--vs-tenue);
    --sv-acento: var(--vs-primario); --sv-acento-suave: var(--vs-primario-suave); }
.vs-tema .sv-head .page-title { margin: 6px 0 4px !important; }
.vs-tema .sv-head p { color: var(--vs-suave); }
.vs-tema .sv-card, .vs-tema .sv-kpi, .vs-tema .sv-tabla-wrap { border-radius: var(--vs-radio); }
.vs-tema .sv-card, .vs-tema .sv-tabla-wrap { box-shadow: var(--vs-sombra); }
.vs-tema .sv-card { padding: 16px; }
.vs-tema .sv-kpi { padding: 12px 16px 12px 18px; box-shadow: inset 3px 0 0 var(--k), var(--vs-sombra); }
.vs-tema .sv-kpi.apagado { box-shadow: inset 3px 0 0 var(--vs-borde); }
.vs-tema .sv-kpi .et { font-weight: 500; }
.vs-tema .sv-kpi .val { letter-spacing: -.3px; }
.vs-tema .sv-tabla thead th { font-size: 11px; letter-spacing: .4px; }
.vs-tema .sv-tabla tbody tr:hover td { background: #fafcff; }
.vs-tema .sv-segmento { border-radius: 8px; }
.vs-tema .sv-tag { border-radius: 6px; }
.vs-tema .sv-modal .modal-content { border-radius: 12px; }