/* ============================================================
   WARPER SKIN — capa de refresh (Etapa 0 / cimiento)
   ------------------------------------------------------------
   Cargar SIEMPRE AL FINAL, después de soe.css, en el index.php
   del template, con cache-busting:
     <link href=".../css/warper-skin.css?<?= date('is') ?>" rel="stylesheet">
   Y poner class="wg-theme" en el <body> (una sola vez).

   Estructura:
   - :root            -> tokens (colores, radios, sombras). GLOBALES.
   - .wg-theme ...     -> lo que vive dentro del body tematizado
                          (tablas, cards, badges, botones, filtros,
                          breadcrumb). Cubre todos los reportes vía
                          clases compartidas.
   - .ui-datepicker /
     .table-container -> componentes que se inyectan FUERA de
                          .wg-theme (popup de fecha y modal de árbol).
                          Van globales pero acotados a su contenedor.

   NOTA sobre !important: la mayoría NO lo necesita (este archivo
   carga al final y gana por orden). Solo queda donde peleamos
   contra reglas !important / anchos inline de tus hojas actuales
   (thead-dark en soe.css, floats de filters.css, etc.). Esos se
   pueden ir limpiando en QA si editas la regla fuente.
   ============================================================ */

:root{
  --wg-bg:#f4f6f9;
  --wg-surface:#ffffff;
  --wg-surface-2:#f7f9fc;
  --wg-hover:#e3e9f2;        /* hover visible para controles tipo botón (segmentado, rangos, trigger) */
  --wg-border:#e6eaf0;
  --wg-border-2:#d4dbe6;
  --wg-text:#212121;
  --wg-text-2:#525252;
  --wg-text-3:#737373;
  --wg-brand:#2f9e6b;       /* verde de marca / confirmar */
  --wg-brand-700:#1c7a4f;
  --wg-brand-50:#e7f6ec;
  --wg-info:#2563eb;        /* azul primario */
  --wg-info-700:#1d4ed8;
  --wg-info-50:#eef4ff;
  --wg-danger:#dc2626;
  --wg-danger-700:#c1322f;
  --wg-danger-50:#fdecec;
  --wg-warning:#b45309;
  --wg-warning-50:#fdf2e3;
  --wg-radius:8px;
  --wg-radius-lg:12px;
  --wg-radius-pill:999px;
  --wg-shadow:0 1px 3px rgba(15,23,42,.06);
  --wg-shadow-pop:0 8px 24px rgba(15,23,42,.12);
}

/* ============================================================
   BASE GLOBAL DE TEXTO
   ============================================================ */
/* Color base neutro para TODO el admin (incluye pantallas no rediseñadas). */
/* `html body` (0,0,2) le gana al body de Hyper por especificidad, sin depender */
/* del orden de carga. Es SOLO base heredada: cualquier .clase con su propio */
/* color (links, badges, estados, deltas, blanco sobre fondo) sigue mandando. */
/* NO usar !important aquí, o se romperían esos colores con significado. */
html body{color:var(--wg-text);}

/* ============================================================
   CIFRAS — números tabulares
   ============================================================ */
/* Dígitos de ancho fijo en todo el admin (por herencia): las columnas de */
/* importes alinean y no "bailan" al refrescar (betTicker cada 5s). */
html body{font-variant-numeric:tabular-nums;}
/* Refuerzo donde más importa: celdas numéricas alineadas a la derecha. */
.wg-theme .table td.text-right,
.wg-theme .table th.text-right{font-variant-numeric:tabular-nums;}

/* ============================================================
   CARDS
   ============================================================ */
.wg-theme .card{border:1px solid var(--wg-border);border-radius:var(--wg-radius-lg);box-shadow:var(--wg-shadow);}

/* ============================================================
   TABLAS (reportes)
   ============================================================ */
.wg-theme .table{margin-bottom:0;color:var(--wg-text);}
.wg-theme .table-bordered,
.wg-theme .table-bordered td,
.wg-theme .table-bordered th{border:0;}
/* Header claro. !important para vencer soe.css: table .thead-dark th{background:#0b3867!important} */
.wg-theme .table thead th,
.wg-theme .table thead.thead-dark th,
.wg-theme .table .thead-dark th{
  background:var(--wg-surface-2)!important;color:#354357!important;font-weight:600!important;
  font-size:11.5px;border:0!important;border-bottom:1px solid var(--wg-border-2)!important;
  padding:10px 12px;position:sticky;top:0;z-index:2;white-space:nowrap;}
.wg-theme .table tbody td{border:0;border-top:1px solid var(--wg-border);padding:9px 12px;font-size:12.5px;vertical-align:middle;}
.wg-theme .table.table-striped tbody tr:nth-of-type(odd) td{background:var(--wg-surface);}
.wg-theme .table.table-striped tbody tr:nth-of-type(even) td{background:var(--wg-surface-2);}
.wg-theme .table:not(.risk-control) tbody tr:hover td{background:var(--wg-info-50);}
/* Fila seleccionada (listas con tr.active, p.ej. .ligas_tr.active).
   !important para vencer el zebra (más específico). */
.wg-theme .table tbody tr.active td,
.wg-theme .table tbody tr.active th{background:#dce8fb!important;color:var(--wg-text)!important;font-weight:500;}
.wg-theme .table tbody tr.active td:first-child,
.wg-theme .table tbody tr.active th:first-child{box-shadow:inset 3px 0 0 var(--wg-info);}
.wg-theme .table tbody tr.active:hover td,
.wg-theme .table tbody tr.active:hover th{background:#cfe0fa!important;}
.wg-theme .table td.text-right{font-variant-numeric:tabular-nums;}
#contenedor_datos_jugadores div.x_content table td{padding:7px 5px !important;border:none;}
/* Filas de agrupación de reportes: fecha (first-level) y totales (second-level).
   OJO: estas clases también se usan en el modal de árbol, pero allá van
   scopeadas a .table-container (más abajo), así que no chocan. */
.wg-theme .table tr.first-level td{background:var(--wg-info-50);color:#1d4ed8;font-weight:500;font-size:12px;border-top:1px solid var(--wg-border-2);border-bottom:1px solid #9fb6dd;}
.wg-theme .table tr.second-level td{background:var(--wg-surface-2);color:var(--wg-text-2);font-size:11.5px;border-top:1px solid var(--wg-border-2);border-bottom:1px solid var(--wg-border-2);}
.wg-theme .table tr.second-level td.divider{font-weight:500;}
.wg-theme .table tr.second-level td.text-right{color:var(--wg-text);font-weight:600;}
/* Otro patrón de totales (varios reportes): subtotal por bloque (tot_tit_fecha)
   y gran total del reporte (totales). Usan celdas <th> dentro del <tbody>.
   La de .totales venía navy desde tables.css; la pasamos a banda clara fuerte. */
.wg-theme .table tr.tot_tit_fecha th,
.wg-theme .table tr.tot_tit_fecha td{background:#e9eef5!important;color:var(--wg-text)!important;font-weight:600!important;font-size:11.5px;border-top:1px solid var(--wg-border-2)!important;border-bottom:1px solid var(--wg-border-2)!important;padding:9px 12px;vertical-align:middle;}
.wg-theme .table tr.totales th,
.wg-theme .table tr.totales td{background:#d7dfea!important;color:var(--wg-text)!important;font-weight:700!important;font-size:12px;border-top:2px solid #b9c4d4!important;border-bottom:0!important;padding:10px 12px;vertical-align:middle;}
.wg-theme .table tr.tot_tit_fecha th.text-center,
.wg-theme .table tr.tot_tit_fecha td.text-center,
.wg-theme .table tr.totales th.text-center,
.wg-theme .table tr.totales td.text-center{font-variant-numeric:tabular-nums;}
/* Negativos en el pie: la banda de .totales fija el color con !important, asi que la .red del
   archivo de datos se perdia justo ahi. Se rescata sumando .red al selector (4 clases frente a
   3) para que gane por especificidad. Solo el color: fondo, borde y grosor de la banda quedan
   intactos. Por patron, no por reporte: tr.totales lo comparten varios reportes de casino. */
.wg-theme .table tr.totales th.red,
.wg-theme .table tr.totales td.red{color:var(--wg-danger)!important;}
/* Super totales = gran total final (bottom line), lo mas fuerte de la jerarquia.
   tables.css lo pinta negro en el <tr>, pero el zebra/hover nuestro pinta el <td>
   ENCIMA -> el fondo del tr no se ve y queda texto blanco sobre claro (ilegible).
   Solucion: pintar el <td>/<th> directo (con !important para vencer al zebra, que
   es mas especifico) y mantenerlo en :hover. Banda oscura de marca, texto claro. */
.wg-theme .table tr.supertotales td,
.wg-theme .table tr.supertotales th,
.wg-theme .table tr.supertotales:hover td,
.wg-theme .table tr.supertotales:hover th{background:var(--wg-text)!important;color:#fff!important;font-weight:700!important;font-size:12px;border-top:2px solid #0f172a!important;border-bottom:0!important;padding:10px 12px!important;vertical-align:middle;}
.wg-theme .table tr.supertotales td.text-right,
.wg-theme .table tr.supertotales td.text-center{font-variant-numeric:tabular-nums;}
/* Fila de TITULO de reporte: <td class="titles"><h4>Titulo</h4></td>, colspan
   a todo el ancho. Venia con padding vertical inflado (padding del td + margen
   del <h4> de soe.css + line-height, todo apilado -> ~79px de alto) y colores
   inconsistentes (banda verde con barra azul). La dejamos como banda de titulo
   compacta: fondo claro de sistema, texto oscuro bold, padding apretado, y se
   neutraliza el <h4> interno (margen 0, fondo transparente) para que no infle
   el alto ni reaparezca el verde/azul. */
.wg-theme .table td.titles{background:var(--wg-surface-2)!important;color:var(--wg-text)!important;text-align:center;padding:8px 12px!important;border-top:1px solid var(--wg-border-2)!important;border-bottom:1px solid var(--wg-border-2)!important;font-weight:600;font-size:13px;line-height:1.2;}
.wg-theme .table td.titles h4{margin:0!important;padding:0!important;background:transparent!important;font-size:13px!important;font-weight:600!important;line-height:1.3!important;color:inherit!important;}
/* Árboles profundos por deporte (Perfil de Límites, Markets, Momios...).
   Las filas first..fifth-level marcan PROFUNDIDAD, no totales. Las filas de
   nivel 2+ llevan *_Niv* en su clase (momio_Niv*, splimit_Niv*...), así que
   se scopea por esa familia para no chocar con reportes ni con el modal de
   Sucursales. El texto de los niveles profundos venía blanco -> ilegible.
   (El nivel 1 lo cubre la regla general de .first-level, más arriba.) */
.wg-theme .table tr[class*="_Niv"] td{background:#fff!important;color:var(--wg-text)!important;border-top:1px solid var(--wg-border)!important;}
.wg-theme .table tr[class*="_Niv"] td.divider,
.wg-theme .table tr[class*="_Niv"] td.ac{color:var(--wg-text)!important;}
.wg-theme .table tr[class*="_Niv"].second-level td{background:var(--wg-surface-2)!important;color:var(--wg-text)!important;font-weight:500!important;}
.wg-theme .table tr[class*="_Niv"].third-level td,
.wg-theme .table tr[class*="_Niv"].fourth-level td,
.wg-theme .table tr[class*="_Niv"].fifth-level td{background:#fff!important;color:var(--wg-text-2)!important;}
.wg-theme .table tr[class*="_Niv"] .td-tree,
.wg-theme .table tr[class*="_Niv"] .td-mini-btn{background:transparent!important;border-top:0!important;}
.wg-theme .table tr[class*="_Niv"] .td-mini-btn .fas{color:var(--wg-text-3)!important;}
/* Inputs y selects dentro de los árboles (ej. Tipo de Cálculo / Porcentaje):
   normalizar alto, radio y borde para que no se vean como pastillas raras. */
.wg-theme .table tr[class*="_Niv"] select,
.wg-theme .table tr[class*="_Niv"] input[type="text"],
.wg-theme .table tr[class*="_Niv"] input[type="number"]{height:30px!important;padding:3px 8px!important;font-size:12px!important;line-height:1.2!important;border:1px solid var(--wg-border-2)!important;border-radius:6px!important;background-color:#fff!important;box-shadow:none!important;color:var(--wg-text)!important;}
.wg-theme .table tr[class*="_Niv"] select{padding-right:22px!important;}
/* Hover de la fila padre (nivel 1) en los árboles */
.wg-theme .table:not(.risk-control) tr.first-level:hover td{background:#e2ebfc!important;}
/* Empty-state centrado (cualquier colspan; excluye fila de fecha, paginación y
   las filas ESPACIADORAS vacías —esas tienen su propia regla, abajo—). */
.wg-theme .table tbody tr:not(.first-level) > td[colspan]:only-child:not(.td-pagination):not(:empty){text-align:center;padding:26px 12px;color:var(--wg-text-3);}
/* Fila ESPACIADORA: <tr><td colspan="N"></td></tr> sin contenido, separa bloques
   de filas. Antes caia en el empty-state (padding 26px) y quedaba como banda alta.
   :only-child + :empty la distingue del empty-state (que lleva texto) y de celdas
   vacias sueltas dentro de filas con datos (ej. el colspan vacio de supertotales,
   que NO es only-child). Gap limpio de 12px, sin borde ni hover. */
.wg-theme .table tbody tr > td[colspan]:only-child:empty,
.wg-theme .table tbody tr:hover > td[colspan]:only-child:empty{height:12px!important;padding:0!important;background:var(--wg-surface)!important;border:0!important;}
/* Paginación */
.wg-theme .td-pagination{padding:11px 14px!important;border-top:1px solid var(--wg-border);}

/* ============================================================
   BADGES (pill)
   ============================================================ */
.wg-theme .badge{border-radius:var(--wg-radius-pill);font-weight:500;font-size:11px;padding:3px 10px;}
.wg-theme .badge-success{background:var(--wg-brand-50);color:var(--wg-brand-700);}
.wg-theme .badge-warning{background:var(--wg-warning-50);color:var(--wg-warning);}
.wg-theme .badge-danger{background:var(--wg-danger-50);color:var(--wg-danger-700);}
.wg-theme .badge-secondary{background:#eef1f5;color:var(--wg-text-2);}

/* ============================================================
   BOTONES
   ============================================================ */
.wg-theme .btn{border-radius:var(--wg-radius);}
.wg-theme .btn-success{background:var(--wg-brand);border-color:var(--wg-brand);}
.wg-theme .btn-success:hover{background:var(--wg-brand-700);border-color:var(--wg-brand-700);}
.wg-theme .btn-blue,
.wg-theme .btn-info{background:var(--wg-info);border-color:var(--wg-info);color:#fff;}
/* Acciones dentro de tabla -> íconos fantasma */
.wg-theme .button_table{width:28px;height:28px;padding:0;border-radius:7px;border:1px solid var(--wg-border-2);background:#fff;display:inline-flex;align-items:center;justify-content:center;}
.wg-theme .button_table.btn-success{color:var(--wg-brand);}
.wg-theme .button_table.btn-success:hover{background:var(--wg-brand-50);border-color:var(--wg-brand);}
.wg-theme .button_table.btn-danger{color:var(--wg-danger);background:#fff;border-color:var(--wg-border-2);}
.wg-theme .button_table.btn-danger:hover{background:var(--wg-danger-50);border-color:var(--wg-danger);}

/* ============================================================
   INPUTS base
   ============================================================ */
.wg-theme .form-control{border-radius:var(--wg-radius);box-shadow:none;}
.wg-theme .form-control:focus{border-color:var(--wg-brand);box-shadow:0 0 0 3px rgba(47,158,107,.15);}
.wg-theme .input-group-text{background:var(--wg-surface-2);color:var(--wg-text-2);}
/* Selects (global): caret propio + apariencia limpia para los selects SUELTOS, igual que los de filtros.
   Los de .filter-card/.filtro/_Niv tienen reglas mas especificas y conservan su tamaño. */
.wg-theme select.form-control{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;border:1px solid var(--wg-border-2)!important;border-radius:var(--wg-radius)!important;color:var(--wg-text)!important;background-color:var(--wg-surface)!important;padding:.4rem 1.9rem .4rem .6rem!important;height:34px!important;line-height:1.2!important;font-size:12.5px!important;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right .65rem center!important;background-size:12px!important;}
.wg-theme select.form-control::-ms-expand{display:none;}
/* Excepcion: solo los selects GENUINAMENTE diminutos (paginacion/limite por pagina
   y filtros dentro de celda) conservan alto compacto. Los selects de tabla normales
   (ej. config con inp_small) toman el 34px estandar como el resto. */
.wg-theme select.sel_splimit,
.wg-theme select.sel_lglimit,
.wg-theme select.filter-form-control{height:auto!important;line-height:normal!important;}

/* ============================================================
   BREADCRUMB / barra de título (.titulo-pag)
   El navy lo pinta soe.css en .titles-reports; lo apagamos en
   toda la cadena y dejamos una franja clara.
   ============================================================ */
.wg-theme .titulo-pag > .col-md-12,
.wg-theme .titulo-pag .titles-reports,
.wg-theme .titulo-pag .titles-reports > .col-6,
.wg-theme .titulo-pag .menu_titulos_seccion,
.wg-theme .titulo-pag h3,
.wg-theme .titulo-pag .moduletable,
.wg-theme .titulo-pag .bread_mobg,
.wg-theme .titulo-pag .breadcrumb-wrapper,
.wg-theme .titulo-pag .breadcrumb-wrapper > .col-12,
.wg-theme .titulo-pag .page-title-box,
.wg-theme .titulo-pag .page-title-right,
.wg-theme .titulo-pag .breadcrumb{background:transparent!important;background-color:transparent!important;}
.wg-theme .titulo-pag{background:var(--wg-surface)!important;border-bottom:1px solid var(--wg-border);border-radius:0;margin-top:0!important;margin-bottom:12px!important;}
.wg-theme .titulo-pag > .col-md-12{padding:0!important;}
.wg-theme .titulo-pag .titles-reports{margin:0!important;align-items:center;}
.wg-theme .titulo-pag .moduletable,
.wg-theme .titulo-pag .breadcrumb-wrapper,
.wg-theme .titulo-pag .breadcrumb-wrapper > .col-12,
.wg-theme .titulo-pag .page-title-box{margin:0!important;padding:0!important;}
.wg-theme .titulo-pag h3{margin:0!important;font-size:inherit!important;font-weight:400!important;line-height:1.2!important;}
.wg-theme .titulo-pag > h3{padding:11px 14px!important;font-size:13px!important;}
.wg-theme .titulo-pag .page-title{display:none!important;}
.wg-theme .titulo-pag .breadcrumb{display:flex;flex-wrap:wrap;align-items:center;list-style:none;font-size:13px;margin:0!important;padding:11px 14px!important;}
.wg-theme .titulo-pag h3,
.wg-theme .titles-reports h3,
.wg-theme .titles-reports h3 span,
.wg-theme .breadcrumb,
.wg-theme .breadcrumb a,
.wg-theme .breadcrumb-item,
.wg-theme .breadcrumb-item span{color:var(--wg-text-2)!important;}
.wg-theme .breadcrumb-item.active,
.wg-theme .breadcrumb-item.active span,
.wg-theme .breadcrumb-item:last-child,
.wg-theme .breadcrumb-item:last-child span{color:var(--wg-text)!important;font-weight:600!important;}
/* Variante hand-built: <h3>Texto <i class="fa-chevron-right"></i> ... </h3>.
   Chevrons como separadores sutiles (CSS puro, vence el font-size inline).
   La hoja necesita ir envuelta en <span class="bc-current"> porque no se
   puede targetear un nodo de texto suelto. */
.wg-theme .titulo-pag h3 .fa-chevron-right,
.wg-theme .titles-reports h3 .fa-chevron-right{color:var(--wg-text-3)!important;font-size:9px!important;margin:0 5px!important;vertical-align:middle;}
.wg-theme .titulo-pag h3 .bc-current,
.wg-theme .titles-reports h3 .bc-current{color:var(--wg-text)!important;font-weight:600!important;}
.wg-theme .titulo-pag .breadcrumb .breadcrumb-item + .breadcrumb-item::before{content:"\203A";color:var(--wg-text-3);padding:0 9px;float:none;}
.wg-theme .titulo-pag .menu_titulos_seccion{height:auto!important;display:flex;justify-content:flex-end;align-items:center;padding-right:12px!important;}
.wg-theme .titulo-pag .menu_principal{display:flex;gap:6px;float:none!important;margin:0;padding:0;}
.wg-theme .titulo-pag .menu_principal li{float:none!important;}

/* ============================================================
   BARRA DE FILTROS de reportes (acotada a .filter-card, así
   cubre cualquier reporte sin depender del id del form).
   Vence floats/anchos de filters.css y soe.css.
   Markup requerido en cada reporte: los botones Limpiar/Filtrar
   dentro de <div class="filtros-acciones"> (ver plan de acción).
   ============================================================ */
.wg-theme .filter-card .card{border:1px solid var(--wg-border)!important;border-radius:var(--wg-radius-lg)!important;overflow:hidden;box-shadow:none!important;}
.wg-theme .filter-card form{display:block!important;}
.wg-theme .filter-card .row-filter{display:flex!important;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0!important;padding:12px!important;border:none!important;box-shadow:none!important;}
/* El #form_filtro de la búsqueda avanzada (línea ~983) mata el padding con un ID.
   Restauramos el padding interior SOLO para el row-filter de filter-card (más específico). */
.wg-theme .filter-card form#form_filtro > div.filtros.row-filter{padding:12px!important;}
.wg-theme .filter-card ul.col{display:contents!important;}
.wg-theme .filter-card li{float:none!important;display:flex!important;flex-direction:row;align-items:center;gap:8px;margin:0!important;}
.wg-theme .filter-card li > label{font-size:12px;color:var(--wg-text-2);font-weight:500;line-height:1.2;margin:0;white-space:nowrap;}
.wg-theme .filter-card div.form-group{float:none!important;width:auto!important;margin:0!important;padding:0!important;}
.wg-theme .filter-card input.form-control,
.wg-theme .filter-card select.form-control{font-size:12.5px!important;height:34px!important;padding:.35rem .55rem!important;line-height:1.2!important;border-radius:8px!important;}
.wg-theme .filter-card input.form-control.hasDatepicker[readonly]{width:104px!important;text-align:left!important;}
/* Fechas: unir input + ícono de calendario */
.wg-theme .filter-card .input-group{flex-wrap:nowrap;}
.wg-theme .filter-card .input-group > input.form-control:not(:last-child){border-top-right-radius:0!important;border-bottom-right-radius:0!important;border-right:0!important;}
.wg-theme .filter-card .input-group .input-group-text{height:34px!important;border:1px solid var(--wg-border-2)!important;border-left:0!important;border-radius:0 8px 8px 0!important;background:var(--wg-surface-2)!important;color:var(--wg-text-2)!important;padding:0 .55rem!important;}
/* Selects: flecha propia */
.wg-theme .filter-card select.form-control{border:1px solid var(--wg-border-2)!important;min-width:160px;padding:.35rem 1.7rem .35rem .55rem!important;background-color:var(--wg-surface)!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat!important;background-position:right .55rem center!important;background-size:12px!important;}
.wg-theme .filter-card button.btn{height:34px!important;font-size:12px!important;line-height:1!important;margin:0!important;}
.wg-theme .filter-card .filtros-acciones{display:flex;gap:6px;align-items:flex-end;align-self:flex-end;margin-left:auto;}
/* Spacer vacío final: <div class="filters"> que solo envuelve un .v-space (margen
   legado 5px 0 + filas vacías). Vive DESPUÉS de la fila de campos y mete alto extra
   abajo del card -> el espacio queda disparejo (más aire abajo que arriba). Se colapsa.
   Scopeado con :not(.filtros) + :has(.v-space) para NO tocar la fila de campos real
   (que es .row-filter.filtros.filters) ni bloques .filters con contenido legítimo. */
.wg-theme .filter-card .filters:not(.filtros):has(.v-space){display:none!important;}
/* Variante: campos envueltos en un div.p-0 con varios <ul> (no ul.col directo).
   Se aplanan el wrapper y los ul (display:contents) para que los campos
   fluyan en la fila flex como en los demás filtros. */
.wg-theme .filter-card .row-filter > div.p-0:not(.col){display:contents!important;}
.wg-theme .filter-card .row-filter ul{display:contents!important;}
/* Variante: los <li> de campos van envueltos en divs intermedios DENTRO de ul.col
   (ej. <div class="row pl-2"> para fechas + un <div> suelto para selects), no
   directos. Cada wrapper actuaba como un solo item flex (las fechas como mini-fila
   aparte y los selects apilados en columna). Se aplanan esos wrappers para que los
   <li> suban al flex de .row-filter y fluyan en una sola fila. */
.wg-theme .filter-card .row-filter ul.col > div{display:contents!important;}
.wg-theme .filter-card .row-filter > div.col.p-0{display:flex!important;justify-content:flex-end!important;align-items:flex-end!important;flex:0 0 auto!important;width:auto!important;margin-left:auto!important;}
.wg-theme .filter-card .row-filter > div.col.p-0 > .pull-right{display:flex!important;gap:6px;float:none!important;}
/* Generalización: el grupo de botones (Limpiar/Filtrar) llega en muchos reportes dentro
   de un wrapper col-N (ej. div.col-2.p-0 > .pull-right), no solo .col.p-0. Esos wrappers
   col-N.p-0 se aplanan por la regla de arriba (div.p-0:not(.col) -> display:contents), así
   que el .pull-right queda como item flex SUELTO entre los campos y no se va a la derecha.
   Aquí: (1) se aplana también cualquier wrapper col-N sin p-0 que contenga el .pull-right,
   y (2) se empuja el .pull-right de acciones a la derecha con margin-left:auto. El selector
   exige que el .pull-right sea hijo directo de un div hijo directo de .row-filter, así que
   NO toca los .pull-right de los campos (que cuelgan de li > div.form-group.pull-right). */
.wg-theme .filter-card .row-filter > div:has(> .pull-right){display:contents!important;}
.wg-theme .filter-card .row-filter > div > .pull-right{margin-left:auto!important;float:none!important;display:flex!important;gap:6px;align-items:flex-end;}
.wg-theme .filter-card .row-filter > div[style*="clear"]{display:none!important;}
/* "Limpiar" (reset) en barra de filtros: aunque venga btn-blue (markup viejo con los
   dos botones azules), es acción secundaria y debe ir NEUTRO; solo "Filtrar" va azul
   sólido. Se detecta por el icono de escoba (fa-broom). Scopeado a .row-filter para no
   tocar otros btn-blue. Filtrar lleva fa-filter, así que no se ve afectado. */
.wg-theme .row-filter .btn-blue.btn-xs:has(> i.fa-broom){background:var(--wg-surface)!important;border:1px solid var(--wg-border-2)!important;color:var(--wg-text-2)!important;}
.wg-theme .row-filter .btn-blue.btn-xs:has(> i.fa-broom):hover{background:var(--wg-surface-2)!important;border-color:var(--wg-border-2)!important;color:var(--wg-text)!important;filter:none!important;}
.wg-theme .row-filter .btn-blue.btn-xs:has(> i.fa-broom) > i{color:var(--wg-text-3)!important;}
/* Igualar el ancho del filtro con la tabla (ambos al ras) */
.wg-theme .row > .col-12.p-1{padding:0!important;}
/* Col full-width que envuelve contenido (tabla) pero viene PELON (sin p-0/p-1):
   conserva el padding horizontal de Bootstrap (~15px) y deja el card indentado
   respecto al filtro/bloques con p-0. Se aplana el padding horizontal de los cols
   de 12-de-12 (col-12 / col-md-12) que son hijos directos de un .row de la pagina.
   Seguro: un col full-width no tiene gutter de columnas que preservar (los grids
   multi-columna usan col-6/col-4, no col-12), asi que esto NO afecta esos layouts.
   Tambien se anula su margen vertical (ej. my-1): la separacion entre bloques la
   gobierna el margin-bottom:12px del .row, asi que un my-1 en el col solo descuadra
   el ritmo. Dejamos que el sistema de 12px del row mande. */
.wg-theme #wrapper :has(> .titulo-pag) > .row > .col-12,
.wg-theme #wrapper :has(> .titulo-pag) > .row > .col-md-12,
.wg-theme #wrapper :has(> .filter-card) > .row > .col-12,
.wg-theme #wrapper :has(> .filter-card) > .row > .col-md-12{padding-left:0!important;padding-right:0!important;margin-top:0!important;margin-bottom:0!important;}

/* ============================================================
   CABECERA + FILTROS del perfil de jugador (.titulos-seccion / .filtro).
   Patrón distinto al de reportes (.titulo-pag / .filter-card): aquí la
   sección usa .titulos-seccion y el filtro es .filtro > #form_filtro con
   ul.col-10 (campos) + .col-2 > .pull-right (botones). Lo estandarizamos
   al mismo look.
   ============================================================ */
/* Cabecera de sección como franja clara */
.wg-theme .titulos-seccion{background:var(--wg-surface)!important;border:1px solid var(--wg-border)!important;border-radius:var(--wg-radius-lg)!important;padding:10px 14px!important;margin-bottom:12px!important;font-size:13px;color:var(--wg-text-2);display:flex;align-items:center;gap:8px;}
.wg-theme .titulos-seccion strong{color:var(--wg-text-2);font-weight:500;}
.wg-theme .titulos-seccion .fa-chevron-circle-right,
.wg-theme .titulos-seccion .fa{color:var(--wg-text-3)!important;font-size:11px;}
/* Barra de filtros */
.wg-theme .filtro{margin-bottom:12px!important;}
.wg-theme .filtro form{display:block!important;width:100%;}
.wg-theme .filtro .row-filter{display:flex!important;flex-wrap:wrap;align-items:flex-end;gap:12px;margin:0!important;padding:10px 12px!important;background:var(--wg-surface);border:1px solid var(--wg-border);border-radius:var(--wg-radius-lg);}
.wg-theme .filtro ul.col-10,
.wg-theme .filtro .col-2{display:contents!important;}
.wg-theme .filtro li{float:none!important;display:flex!important;flex-direction:column;margin:0!important;}
.wg-theme .filtro li > label,
.wg-theme .filtro label{font-size:12px;color:var(--wg-text-2);font-weight:500;line-height:1.2;margin:0 0 4px 0;}
.wg-theme .filtro div.form-group{float:none!important;width:auto!important;margin:0!important;padding:0!important;}
.wg-theme .filtro input.form-control,
.wg-theme .filtro select.form-control{font-size:12.5px!important;height:34px!important;padding:.35rem .55rem!important;line-height:1.2!important;border-radius:8px!important;}
.wg-theme .filtro input.form-control.hasDatepicker[readonly]{width:104px!important;text-align:left!important;}
.wg-theme .filtro .input-group{flex-wrap:nowrap;}
.wg-theme .filtro .input-group > input.form-control:not(:last-child){border-top-right-radius:0!important;border-bottom-right-radius:0!important;border-right:0!important;}
.wg-theme .filtro .input-group .input-group-text{height:34px!important;border:1px solid var(--wg-border-2)!important;border-left:0!important;border-radius:0 8px 8px 0!important;background:var(--wg-surface-2)!important;color:var(--wg-text-2)!important;padding:0 .55rem!important;}
.wg-theme .filtro select.form-control{border:1px solid var(--wg-border-2)!important;min-width:160px;padding:.35rem 1.7rem .35rem .55rem!important;background-color:var(--wg-surface)!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat!important;background-position:right .55rem center!important;background-size:12px!important;}
.wg-theme .filtro button.btn{height:34px!important;font-size:12px!important;line-height:1!important;padding:.35rem .7rem!important;margin:0!important;}
.wg-theme .filtro .pull-right{float:none!important;display:flex;gap:6px;align-items:flex-end;align-self:flex-end;margin-left:auto;}
.wg-theme .filtro > div[style*="clear"],
.wg-theme .filtro .row-filter > div[style*="clear"]{display:none!important;}

/* ============================================================
   PESTAÑAS (.menu_callcenter > .menu_principal) — estilo subrayado.
   OJO: menu_principal también es la botonera de los reportes (en
   .titulo-pag), por eso esto se acota a .menu_callcenter para no
   tocar esos botones.
   ============================================================ */
.wg-theme .menu_callcenter{margin-top:14px!important;margin-bottom:0px!important;height:auto!important;min-height:0!important;overflow:visible!important;background:transparent!important;}
.wg-theme .menu_callcenter .menu_principal{display:flex!important;flex-wrap:wrap;gap:2px;list-style:none;margin:0!important;padding:0!important;border-bottom:1px solid var(--wg-border-2)!important;}
.wg-theme .menu_callcenter .menu_principal > li{float:none!important;margin:0!important;padding:0!important;list-style:none;background:transparent!important;border:0!important;}
.wg-theme .menu_callcenter .menu_principal > li > a.item{display:block;height:auto!important;padding:11px 14px!important;font-size:13px!important;line-height:1.3!important;color:var(--wg-text-2)!important;text-decoration:none!important;border:0!important;border-bottom:3px solid transparent!important;margin-bottom:-1px!important;background:transparent!important;border-radius:0!important;cursor:pointer;transition:color .12s,border-color .12s;}
.wg-theme .menu_callcenter .menu_principal > li > a.item:hover{color:var(--wg-text)!important;background:transparent!important;border-bottom-color:var(--wg-brand)!important;}
/* Tabs superiores (#main-tab-area): mismo hover de rayita verde que el tab activo (border-bottom) */
.wg-theme #sortable > div:not(.active) .main-tab-content:hover{ border-bottom-color:var(--wg-brand)!important; color:var(--wg-text)!important; }
.wg-theme .menu_callcenter .menu_principal > li.active{background:transparent!important;border:0!important;}
.wg-theme .menu_callcenter .menu_principal > li.active > a.item{color:var(--wg-text)!important;font-weight:500!important;background:transparent!important;border-bottom-color:var(--wg-brand)!important;}
.wg-theme .menu_callcenter .menu_principal > div[style*="clear"]{display:none!important;}

/* ============================================================
   CHECKBOX de cabecera (ej. "Automatico" / auto-refresh en ul.menu_principal).
   El <label> traia color:#fff inline (era para la barra navy vieja) -> invisible
   sobre fondo claro. Se hace visible + check personalizado de marca: cuadro
   limpio, VERDE con palomita blanca al estar activo (activo = encendido).
   Se oculta el input nativo y se dibuja la caja con ::before (matamos el ::after
   de soe.css). Scopeado a .menu_principal para NO tocar checks de tablas/filtros
   (que tienen su propia logica, incluida la de estado indeterminado).
   ============================================================ */
.wg-theme .menu_principal .checkbox{display:inline-flex;align-items:center;min-height:34px;margin-bottom:0;padding-left:0;}
.wg-theme .menu_principal .checkbox input[type="checkbox"]{position:absolute;width:16px;height:16px;margin:0;opacity:0;cursor:pointer;}
.wg-theme .menu_principal .checkbox label{position:relative;display:inline-flex;align-items:center;margin:0;padding-left:24px;min-height:16px;font-size:13px;line-height:1.2;color:var(--wg-text-2)!important;cursor:pointer;}
.wg-theme .menu_principal .checkbox label::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:16px;height:16px;margin:0;border:1px solid var(--wg-border-2);border-radius:4px;background:var(--wg-surface);transition:background .12s,border-color .12s,box-shadow .12s;}
.wg-theme .menu_principal .checkbox input[type="checkbox"]:checked+label::before{border-color:var(--wg-brand);background:var(--wg-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;}
.wg-theme .menu_principal .checkbox input[type="checkbox"]:checked+label::after{content:none!important;}
.wg-theme .menu_principal .checkbox input[type="checkbox"]:focus+label::before{border-color:var(--wg-brand);box-shadow:0 0 0 3px rgba(47,158,107,.15);}

/* ============================================================
   DATEPICKER jQuery UI — GLOBAL (el popup vive en <body>).
   Usa los tokens de :root porque son globales.
   ============================================================ */
.ui-datepicker{width:auto!important;min-width:262px;padding:10px!important;border:1px solid var(--wg-border)!important;border-radius:var(--wg-radius-lg)!important;background:#fff!important;box-shadow:var(--wg-shadow-pop)!important;margin-top:4px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:13px;color:var(--wg-text);}
.ui-datepicker .ui-datepicker-header{background:transparent!important;border:0!important;padding:2px 0 8px!important;position:relative;}
.ui-datepicker .ui-datepicker-title{display:flex;gap:6px;justify-content:center;align-items:center;margin:0 30px;line-height:normal;}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year{width:auto!important;height:28px!important;box-sizing:border-box!important;border:1px solid var(--wg-border-2)!important;border-radius:7px!important;font-size:13px!important;color:var(--wg-text)!important;line-height:normal!important;padding:2px 26px 2px 12px!important;background-color:#fff!important;-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' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:11px;cursor:pointer;}
.ui-datepicker select.ui-datepicker-month{min-width:92px;}
.ui-datepicker select.ui-datepicker-year{min-width:78px;}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next{top:2px!important;width:28px;height:28px;box-sizing:border-box!important;border-radius:7px!important;border:1px solid var(--wg-border)!important;background:#fff!important;cursor:pointer;}
.ui-datepicker .ui-datepicker-prev{left:2px!important;}
.ui-datepicker .ui-datepicker-next{right:2px!important;}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover{top:2px!important;background:var(--wg-surface-2)!important;border-color:var(--wg-border-2)!important;}
.ui-datepicker .ui-datepicker-prev-hover{left:2px!important;}
.ui-datepicker .ui-datepicker-next-hover{right:2px!important;}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span{display:none!important;}
.ui-datepicker .ui-datepicker-prev::after,
.ui-datepicker .ui-datepicker-next::after{content:"";position:absolute;top:50%;left:50%;width:7px;height:7px;border-top:2px solid var(--wg-text-2);border-right:2px solid var(--wg-text-2);}
.ui-datepicker .ui-datepicker-prev::after{transform:translate(-30%,-50%) rotate(-135deg);}
.ui-datepicker .ui-datepicker-next::after{transform:translate(-70%,-50%) rotate(45deg);}
.ui-datepicker .ui-datepicker-calendar{margin:4px 0 0!important;border-collapse:collapse;width:100%;}
.ui-datepicker .ui-datepicker-calendar th{padding:7px 0;font-size:11.5px;font-weight:500;color:var(--wg-text-3);text-align:center;border:0;}
.ui-datepicker .ui-datepicker-calendar td{padding:2px;border:0;}
.ui-datepicker .ui-datepicker-calendar td a,
.ui-datepicker .ui-datepicker-calendar td span{display:block;text-align:center;min-width:32px;padding:8px 0;border-radius:8px;font-size:13px;color:var(--wg-text);border:0!important;background:transparent!important;text-decoration:none;}
.ui-datepicker .ui-datepicker-calendar td a.ui-state-hover{background:var(--wg-info-50)!important;}
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today a{background:var(--wg-brand-50)!important;color:var(--wg-brand-700)!important;}
.ui-datepicker .ui-datepicker-calendar td a.ui-state-active,
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day a{background:var(--wg-brand)!important;color:#fff!important;font-weight:500;}
.ui-datepicker .ui-datepicker-calendar td.ui-state-disabled span,
.ui-datepicker .ui-datepicker-calendar td.ui-state-disabled a{color:#cbd5e1!important;opacity:1!important;}

/* ============================================================
   MODAL DE ÁRBOL DE SELECCIÓN (Sucursales, etc.) — GLOBAL.
   Acotado a .table-container para NO chocar con first/second/
   third-level de los reportes.
   ============================================================ */
.table-container table{margin:0!important;border:0!important;}
.table-container .table-bordered,
.table-container .table-bordered td,
.table-container .table-bordered th{border:0!important;}
.table-container .thead-dark th{background:var(--wg-surface-2)!important;color:var(--wg-text-2)!important;border:0!important;border-bottom:1px solid var(--wg-border-2)!important;font-weight:500!important;font-size:12px!important;padding:9px 10px!important;}
.table-container tbody td{background:#fff!important;color:var(--wg-text)!important;border:0!important;border-bottom:1px solid #eef2f6!important;padding:7px 8px!important;vertical-align:middle!important;white-space:nowrap;}
.table-container tbody tr:hover td{background:var(--wg-surface-2)!important;}
.table-container tr.first-level td{background:#eef2f7!important;color:var(--wg-text)!important;font-weight:500!important;border-bottom:1px solid var(--wg-border-2)!important;}
.table-container tr.second-level td{background:#fff!important;color:#334155!important;}
.table-container tr.third-level td{background:#fff!important;color:#475569!important;}
.table-container td.divider{border-right:0!important;}
.table-container td.td-tree{background:transparent!important;border-bottom:0!important;}
.table-container .td-mini-btn .fas{color:var(--wg-text-3)!important;cursor:pointer;font-size:12px;}
.table-container .td-mini-btn .fas:hover{color:var(--wg-brand)!important;}

/* ============================================================
   MODALES CON FORMULARIO (.modal-body0)
   Ese cuerpo no trae padding propio (variante "0"), por eso el
   formulario queda pegado a los bordes. Le devolvemos el respiro
   interno, el espaciado entre campos y la separación del footer.
   ============================================================ */
.modal-body0{padding:18px 18px 14px!important;}
.modal-body0 .soe-form .form-group{margin-bottom:14px;}
.modal-body0 .soe-form .control-label{font-size:12px;color:var(--wg-text-2);font-weight:500;margin-bottom:4px;}
.modal-body0 .soe-form .form-control{border-radius:var(--wg-radius);box-shadow:none;}
.modal-body0 .soe-form .form-control:focus{border-color:var(--wg-brand);box-shadow:0 0 0 3px rgba(47,158,107,.15);}
.modal-body0 .modal-footer{padding:12px 0 0!important;margin-top:8px!important;border-top:1px solid var(--wg-border);gap:6px;align-items:center;}
.modal-body0 .modal-footer > span{margin-right:auto;font-size:12px;color:var(--wg-text-3);}

/* ============================================================
   MENÚ SUPERIOR (#topnav — plantilla Hyper) — pulido PROVISIONAL.
   Solo color / estados / hover / submenús. NO toca el layout
   ícono-sobre-texto. Todo acotado a #topnav. Provisional hasta
   el shell con menú lateral (Etapa 4).
   ============================================================ */
/* Barra */
.wg-theme #topnav .navbar-custom{background:var(--wg-surface)!important;box-shadow:none!important;border-bottom:1px solid var(--wg-border)!important;padding-left:0!important;padding-right:0!important;}

/* Items de primer nivel */
.wg-theme #topnav #navigation .navigation-menu > li > a{color:var(--wg-text-2)!important;line-height:1.3!important;box-shadow:inset 0 -3px 0 transparent;transition:color .12s,background .12s,box-shadow .12s;}
.wg-theme #topnav #navigation .navigation-menu > li > a > i{color:var(--wg-text-3)!important;transition:color .12s;}
.wg-theme #topnav #navigation .navigation-menu > li > a:hover{color:var(--wg-text)!important;background:var(--wg-surface-2)!important;}
.wg-theme #topnav #navigation .navigation-menu > li > a:hover > i{color:var(--wg-text-2)!important;}
.wg-theme #topnav #navigation .navigation-menu > li.active > a,
.wg-theme #topnav #navigation .navigation-menu > li.open > a{color:var(--wg-text)!important;background:#f1f8f4!important;box-shadow:inset 0 -3px 0 var(--wg-brand)!important;}
.wg-theme #topnav #navigation .navigation-menu > li.active > a > i,
.wg-theme #topnav #navigation .navigation-menu > li.open > a > i{color:var(--wg-brand)!important;}

/* Carets */
.wg-theme #topnav .navigation-menu .arrow-down{opacity:.55;}

/* Submenús (todos los niveles) */
.wg-theme #topnav .navigation-menu .submenu{background:var(--wg-surface)!important;border:1px solid var(--wg-border)!important;border-radius:var(--wg-radius-lg)!important;box-shadow:0 10px 30px rgba(15,23,42,.12),0 2px 6px rgba(15,23,42,.06)!important;padding:12px!important;}
.wg-theme #topnav .navigation-menu .submenu li > a{color:var(--wg-text-2)!important;border-radius:0!important;padding:8px 12px!important;line-height:1.3!important;font-size:13px!important;transition:color .12s,background .12s,box-shadow .12s;}
.wg-theme #topnav .navigation-menu .submenu li > a:hover{background:#f1f8f4!important;color:var(--wg-text)!important;box-shadow:inset 3px 0 0 var(--wg-brand)!important;}
.wg-theme #topnav .navigation-menu .submenu li.active > a,
.wg-theme #topnav .navigation-menu .submenu li.current > a{color:var(--wg-brand-700)!important;background:var(--wg-brand-50)!important;font-weight:500!important;box-shadow:inset 3px 0 0 var(--wg-brand)!important;}
.wg-theme #topnav .navigation-menu .submenu li.current > a{color:var(--wg-text)!important;}

/* Menú de usuario (derecha) */
.wg-theme #topnav .topnav-menu .main-menu-user > a{color:var(--wg-text-2)!important;}
.wg-theme #topnav .topnav-menu .submenu{background:var(--wg-surface)!important;border:1px solid var(--wg-border)!important;border-radius:var(--wg-radius-lg)!important;box-shadow:0 10px 30px rgba(15,23,42,.12),0 2px 6px rgba(15,23,42,.06)!important;padding:12px!important;}
.wg-theme #topnav .topnav-menu .submenu li > a{color:var(--wg-text-2)!important;border-radius:0!important;padding:8px 12px!important;line-height:1.3!important;font-size:13px!important;transition:color .12s,background .12s,box-shadow .12s;}
.wg-theme #topnav .topnav-menu .submenu li > a:hover{background:#f1f8f4!important;color:var(--wg-text)!important;box-shadow:inset 3px 0 0 var(--wg-brand)!important;}

/* Menú superior: quitar el triángulo "pointer" de Hyper y reforzar el
   blanco del submenú (sin tocar los carets inline .arrow-down) */
.wg-theme #topnav .navigation-menu > li > a::after,
.wg-theme #topnav .navigation-menu > li > a::before,
.wg-theme #topnav .navigation-menu > li.active::after,
.wg-theme #topnav .navigation-menu > li.active::before,
.wg-theme #topnav .navigation-menu > li.open::after,
.wg-theme #topnav .navigation-menu > li.open::before,
.wg-theme #topnav .navigation-menu .submenu::before,
.wg-theme #topnav .navigation-menu .submenu::after{display:none!important;content:none!important;}
.wg-theme #topnav .navigation-menu .submenu,
.wg-theme #topnav .navigation-menu .submenu > li,
.wg-theme #topnav .topnav-menu .submenu,
.wg-theme #topnav .topnav-menu .submenu > li{background:var(--wg-surface)!important;}

/* Menú superior: chip de usuario (derecha, .main-menu-user) */
.wg-theme #topnav .topnav-menu.float-right .main-menu-user > a{display:flex!important;align-items:center;gap:7px;height:auto!important;line-height:1.3!important;padding:7px 12px!important;color:var(--wg-text-2)!important;border:0.5px solid var(--wg-border-2)!important;border-radius:var(--wg-radius)!important;font-size:13px!important;background:transparent!important;}
.wg-theme #topnav .topnav-menu.float-right .main-menu-user > a:hover{background:var(--wg-surface-2)!important;color:var(--wg-text)!important;}
.wg-theme #topnav .topnav-menu.float-right .main-menu-user > a .arrow-down{opacity:.55;}
.wg-theme #topnav .topnav-menu.float-right .main-menu-user.active > a,
.wg-theme #topnav .topnav-menu.float-right .main-menu-user.open > a{background:var(--wg-surface-2)!important;color:var(--wg-text)!important;}
.wg-theme #topnav .topnav-menu.float-right .main-menu-user::after,
.wg-theme #topnav .topnav-menu.float-right .main-menu-user::before{display:none!important;content:none!important;}

/* Menú superior: barra como flex para centrar verticalmente y mandar el
   chip de usuario al ras de la derecha (alineado con Filtros). Se respeta
   el orden visual con order, ya que en el HTML el bloque de usuario va primero. */
.wg-theme #topnav .navbar-custom .container-fluid{display:flex!important;align-items:center!important;}
.wg-theme #topnav .logo-box{order:1;}
.wg-theme #topnav #navigation{order:2;}
.wg-theme #topnav .topnav-menu.float-right{order:3;margin-left:auto!important;margin-bottom:0!important;float:none!important;position:static!important;top:auto!important;transform:none!important;}

/* (Alineación fina de orillas del menú superior: se deja para el shell —
   Etapa 4. Tocar el padding/ancho del logo-box aquí rompe el layout de la
   plantilla y desalinea el breadcrumb.) */

/* ============================================================
   CONTENEDOR DE PÁGINA — padding uniforme de 12px, detectado por
   CONTENIDO (tiene breadcrumb .titulo-pag o filtros .filter-card),
   NO por id — porque el id del contenedor varía entre vistas
   (#main.container-fluid, #container-fluid, #contenedor_edo_cuenta…).
   Una sola regla cubre todas. Requiere :has() (Chrome 105+).
   Se neutraliza el margen negativo (-15px) de las .row y se deja
   12px parejo a los lados, abajo y entre bloques. El breadcrumb se
   "saca" del padding para ir a ancho completo, pegado al menú.
   ============================================================ */
.wg-theme #wrapper :has(> .titulo-pag),
.wg-theme #wrapper :has(> .filter-card){padding:12px!important;}
.wg-theme #wrapper :has(> .titulo-pag) > .row,
.wg-theme #wrapper :has(> .filter-card) > .row{margin-left:0!important;margin-right:0!important;}
.wg-theme #wrapper :has(> .titulo-pag) > .titulo-pag{margin:-12px -12px 12px -12px!important;}
.wg-theme #wrapper :has(> .filter-card) > .filter-card{margin-bottom:12px!important;}
/* Separacion vertical entre TODOS los bloques: cualquier .row hijo directo que no
   sea el ultimo lleva 12px abajo (no solo titulo-pag/filter-card). Asi los reportes
   con bloques intermedios (ej. #contenedor_totales_lineas entre el filtro y la
   tabla) mantienen el gap. El ultimo .row sigue en margin-bottom:0 (regla de abajo). */
.wg-theme #wrapper :has(> .titulo-pag) > .row:not(:last-child),
.wg-theme #wrapper :has(> .filter-card) > .row:not(:last-child){margin-bottom:12px!important;}
.wg-theme #wrapper :has(> .titulo-pag) > .row:last-child,
.wg-theme #wrapper :has(> .filter-card) > .row:last-child{margin-bottom:0!important;}
/* Variante con WRAPPER INTERMEDIO: algunos reportes meten el contenido dentro de
   un div (ej. #data, que ademas envuelve los Warnings de PHP) en vez de colgarlo
   directo del contenedor. Ese .row es NIETO -> la neutralizacion de arriba (solo
   hijos directos) no lo alcanza, conserva el -15px de Bootstrap y se sale del
   gutter (se come los 12px y sobresale). Se neutraliza el .row hijo directo del
   wrapper. id-agnostico (> div > .row) y a UN solo nivel, para NO tocar los .row
   de grids anidados (columnas multiples), que viven mas profundo y necesitan su
   gutter propio. El padding del col ya lo mata la regla global de .col-12.p-1. */
.wg-theme #wrapper :has(> .titulo-pag) > div > .row,
.wg-theme #wrapper :has(> .filter-card) > div > .row{margin-left:0!important;margin-right:0!important;}

/* Estado de Cuenta es un TAB de jugador (vive dentro del .col-md-12 de .player-cont-data,
   que ya aporta su espaciado), NO una página de reporte. El padding de contenedor de
   arriba le queda DOBLE y separa los bloques. Se neutraliza solo para este contenedor,
   y se anula el margen negativo del breadcrumb para que no sobresalga. */
.wg-theme #wrapper #contenedor_edo_cuenta,
.wg-theme #wrapper #contenedor_cuentas_retiro,
.wg-theme #wrapper #contenedor_general_casino,
.wg-theme #wrapper #contenedor_general_bonos{padding:0!important;}
.wg-theme #wrapper #contenedor_edo_cuenta > .titulo-pag,
.wg-theme #wrapper #contenedor_cuentas_retiro > .titulo-pag,
.wg-theme #wrapper #contenedor_general_casino > .titulo-pag,
.wg-theme #wrapper #contenedor_general_bonos > .titulo-pag{margin:0 0 12px 0!important;}

/* La banda .player-cont-data (template base) trae un borde solido #cad6e6 alrededor.
   Lo quitamos para que los tabs queden limpios (no editamos el base, override aqui). */
.wg-theme #contenedor.content-player div.row.player-cont-data,
.wg-theme #contenedor_reportes div.row.player-cont-data{border:none!important;}
/* NOTA: el espaciado de orillas de TODOS los tabs de jugador lo da el gutter estandar
   del col-12 de .player-cont-data (mismo para cards y para filtros/tablas). Las vistas
   de filtro NO llevan padding extra en su contenedor (#contenedor_edo_cuenta / etc. van
   con padding:0), asi que no hay doble espacio: todo queda parejo. */

/* ============================================================
   ETAPA 2 — SISTEMA DE BOTONES (aplanado + jerarquía semántica).
   Formulario: azul = primaria (Filtrar/Buscar) · verde = crear/
   guardar (Nuevo/Guardar) · rojo = destructivo · neutro =
   secundaria (Limpiar/Cancelar = btn-info).
   Tabla (.button_table): versión suave (fondo tenue + icono color),
   conservando el color de cada acción.
   Se separan por :not(.button_table) porque las clases se reusan.
   ============================================================ */
.wg-theme .btn{background-image:none!important;box-shadow:none!important;text-shadow:none!important;border-radius:var(--wg-radius)!important;transition:background .12s,border-color .12s,color .12s,filter .12s;}

/* Formulario — primaria (azul) */
.wg-theme .btn-blue:not(.button_table){background:var(--wg-info)!important;border:1px solid var(--wg-info)!important;color:#fff!important;}
.wg-theme .btn-blue:not(.button_table):hover{background:#1d4ed8!important;border-color:#1d4ed8!important;color:#fff!important;}
/* Formulario — crear / guardar (verde) */
.wg-theme .btn-success:not(.button_table){background:var(--wg-brand)!important;border:1px solid var(--wg-brand)!important;color:#fff!important;}
.wg-theme .btn-success:not(.button_table):hover{background:var(--wg-brand-700)!important;border-color:var(--wg-brand-700)!important;color:#fff!important;}
/* Formulario — destructivo (rojo) */
.wg-theme .btn-danger:not(.button_table){background:#dc2626!important;border:1px solid #dc2626!important;color:#fff!important;}
.wg-theme .btn-danger:not(.button_table):hover{background:#b91c1c!important;border-color:#b91c1c!important;color:#fff!important;}
/* Formulario — secundaria neutra (Limpiar = btn-info) */
.wg-theme .btn-info:not(.button_table){background:var(--wg-surface)!important;border:1px solid var(--wg-border-2)!important;color:var(--wg-text-2)!important;}
.wg-theme .btn-info:not(.button_table):hover{background:var(--wg-surface-2)!important;border-color:var(--wg-border-2)!important;color:var(--wg-text)!important;}

/* Esquinas rectas en botones dentro de input-group (ej. Buscar) */
.wg-theme .input-group-append > .btn{border-top-left-radius:0!important;border-bottom-left-radius:0!important;}
.wg-theme .input-group-prepend > .btn{border-top-right-radius:0!important;border-bottom-right-radius:0!important;}

/* Tabla (.button_table) — acciones suaves */
.wg-theme .btn.button_table{border:0!important;min-width:30px;height:30px;padding:0 7px!important;display:inline-flex;align-items:center;justify-content:center;}
.wg-theme .btn-blue.button_table{background:var(--wg-info-50)!important;color:var(--wg-info)!important;}
.wg-theme .btn-info.button_table{background:#e6f5fb!important;color:#0e8aaa!important;}
.wg-theme .btn-success.button_table{background:var(--wg-brand-50)!important;color:var(--wg-brand-700)!important;}
.wg-theme .btn-danger.button_table{background:#fdecec!important;color:#dc2626!important;}
.wg-theme .btn-secondary.button_table{background:#eef1f5!important;color:var(--wg-text-2)!important;}
.wg-theme .btn-primary.button_table{background:#eef1f5!important;color:var(--wg-text-2)!important;}
.wg-theme .btn.button_table:hover{filter:brightness(.96);}

/* Botones pequeños solo-icono en TOOLBAR (exportar Excel/PDF/CSV, imprimir) y
   acciones de icono dentro de celdas de tabla (ej. "Selecciones" en td.col_ico)
   — azulejo suave. Anclado a <li> Y <td>: asi cubre toolbar y acciones de fila,
   pero NO afecta botones de accion con texto (Limpiar/Filtrar) que tambien son
   btn-xs pero viven en .pull-right/.filtros-acciones (sin li ni td). */
.wg-theme :is(li,td) .btn-xs:not(.button_table){min-width:30px!important;height:30px!important;padding:0 8px!important;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent!important;border-radius:7px!important;font-size:13px!important;box-shadow:none!important;text-shadow:none!important;background-image:none!important;}
.wg-theme :is(li,td) .btn-xs:not(.button_table) > i{margin:0!important;}
.wg-theme :is(li,td) .btn-success.btn-xs:not(.button_table){background:var(--wg-brand-50)!important;color:var(--wg-brand-700)!important;}
.wg-theme :is(li,td) .btn-info.btn-xs:not(.button_table){background:#e6f5fb!important;color:#0e8aaa!important;}
.wg-theme :is(li,td) .btn-danger.btn-xs:not(.button_table){background:#fdecec!important;color:#dc2626!important;}
.wg-theme :is(li,td) .btn-blue.btn-xs:not(.button_table){min-width:0!important;height:34px!important;padding:0 14px!important;gap:6px;border-radius:var(--wg-radius)!important;font-size:12.5px!important;font-weight:500!important;background:var(--wg-info)!important;border:1px solid var(--wg-info)!important;color:#fff!important;}
.wg-theme :is(li,td) .btn-blue.btn-xs:not(.button_table) > i{color:#fff!important;}
.wg-theme :is(li,td) .btn-blue.btn-xs:not(.button_table):hover{background:#1d4ed8!important;border-color:#1d4ed8!important;color:#fff!important;filter:none!important;}
/* Limpiar el glow/anillo de foco feo que dejan Bootstrap/Hyper al hacer click
   (ej. "Filtrar" tras getBettingTypesData()). Sin box-shadow ni outline. */
.wg-theme .btn:not(.button_table):focus,
.wg-theme .btn:not(.button_table).focus,
.wg-theme .btn:not(.button_table):active:focus,
.wg-theme .btn:not(.button_table):active{box-shadow:none!important;outline:none!important;}
.wg-theme :is(li,td) .btn-secondary.btn-xs:not(.button_table){background:#eef1f5!important;color:var(--wg-text-2)!important;}
.wg-theme :is(li,td) .btn-xs:not(.button_table):hover{filter:brightness(.95)!important;border-color:transparent!important;}
/* Toggle "Filtros" (btn-primary) cuando vive DENTRO de un <li> (ej. en
   ul.menu_principal.pull-right): caia en el azulejo base de btn-xs y perdia el
   borde (border:transparent), quedando como texto suelto. btn-primary no esta en
   la lista de colores tintados, asi que se quedaba sin caja. Le devolvemos el
   outline neutro, mismo look del toggle Filtros en los demas contextos. */
.wg-theme li .btn-primary.btn-xs:not(.button_table){background:var(--wg-surface)!important;border:1px solid var(--wg-border-2)!important;color:var(--wg-text-2)!important;height:34px!important;min-width:0!important;padding:0 14px!important;font-size:13px!important;line-height:1!important;border-radius:var(--wg-radius)!important;gap:6px;}
.wg-theme li .btn-primary.btn-xs:not(.button_table):hover{background:var(--wg-surface-2)!important;border-color:var(--wg-border-2)!important;color:var(--wg-text)!important;filter:none!important;}

/* Botones de ACCION CON TEXTO dentro de celdas (td): NO son solo-icono (no traen
   <i>), asi que no deben tomar el azulejo cuadrado de 30px (se aplastaba y cortaba
   el texto de 2 lineas). Se distinguen con :not(:has(> i)). Se les da tamano de
   boton de accion con texto: alto auto (permite 2 lineas), padding comodo, radio
   del sistema, centrado y wrap, con el mismo tinte por color que los azulejos para
   continuidad (incluye btn-warning, ej. "Cerrar Lineas"). */
.wg-theme td .btn-xs:not(.button_table):not(:has(> i)){min-width:0!important;height:auto!important;min-height:32px!important;padding:5px 10px!important;display:inline-flex;align-items:center;justify-content:center;white-space:normal!important;text-align:center;line-height:1.15!important;border:1px solid transparent!important;border-radius:var(--wg-radius)!important;font-size:12px!important;font-weight:500!important;box-shadow:none!important;text-shadow:none!important;background-image:none!important;}
.wg-theme td .btn-success.btn-xs:not(.button_table):not(:has(> i)){background:var(--wg-brand-50)!important;color:var(--wg-brand-700)!important;}
.wg-theme td .btn-info.btn-xs:not(.button_table):not(:has(> i)){background:#e6f5fb!important;color:#0e8aaa!important;}
.wg-theme td .btn-warning.btn-xs:not(.button_table):not(:has(> i)){background:#fef3e2!important;color:#b9770e!important;}
.wg-theme td .btn-danger.btn-xs:not(.button_table):not(:has(> i)){background:#fdecec!important;color:#dc2626!important;}
.wg-theme td .btn-blue.btn-xs:not(.button_table):not(:has(> i)){background:var(--wg-info-50)!important;color:var(--wg-info)!important;}
.wg-theme td .btn-xs:not(.button_table):not(:has(> i)):hover{filter:brightness(.95)!important;border-color:transparent!important;}

/* Inputs de celda .form-control-cr: NO traen la clase base .form-control, por eso
   se ven pelones (sin borde/radio del sistema). Se les da el input compacto con
   foco verde. No se fuerza width: conservan el ancho que ya traen. */
.wg-theme .form-control-cr{height:30px!important;padding:.25rem .5rem!important;font-size:12px!important;line-height:1.2!important;color:var(--wg-text)!important;background-color:var(--wg-surface)!important;border:1px solid var(--wg-border-2)!important;border-radius:6px!important;box-shadow:none!important;}
.wg-theme .form-control-cr:focus{border-color:var(--wg-brand)!important;box-shadow:0 0 0 3px rgba(47,158,107,.15)!important;outline:none!important;}

/* Etapa 2 — tamaño uniforme de botones (no tabla) y toggle "Filtros" neutro */
.wg-theme .btn:not(.button_table){height:34px!important;padding:0 14px!important;font-size:13px!important;line-height:1!important;display:inline-flex;align-items:center;justify-content:center;gap:6px;}
.wg-theme .btn:not(.button_table) > i{margin-left:0!important;margin-right:0!important;}
.wg-theme .input-group > input.form-control{height:34px!important;}
/* Toggle "Filtros" (btn-primary) → neutro outline (es solo mostrar/ocultar) */
.wg-theme .btn-primary:not(.button_table){background:var(--wg-surface)!important;border:1px solid var(--wg-border-2)!important;color:var(--wg-text-2)!important;}
.wg-theme .btn-primary:not(.button_table):hover{background:var(--wg-surface-2)!important;border-color:var(--wg-border-2)!important;color:var(--wg-text)!important;}
/* Boton de login "Iniciar Sesion": es btn-primary, pero btn-primary lo tenemos
   neutralizado (toggle Filtros), asi que salia sin color. En la pagina de login
   es la accion principal -> solido de marca (verde). Acotado a .authentication-bg
   (marcador del body de login en soe.css) + btn-block, para NO tocar el toggle
   Filtros ni otros btn-primary del admin. Doble selector por si wg-theme y
   authentication-bg van en el mismo body (compuesto) o en ancestros distintos. */
.wg-theme.authentication-bg .btn-primary.btn-block,
.wg-theme .authentication-bg .btn-primary.btn-block{background:var(--wg-brand)!important;border:1px solid var(--wg-brand)!important;color:#fff!important;}
.wg-theme.authentication-bg .btn-primary.btn-block:hover,
.wg-theme .authentication-bg .btn-primary.btn-block:hover{background:var(--wg-brand-700)!important;border-color:var(--wg-brand-700)!important;color:#fff!important;}

/* Botón selector DENTRO de un campo de filtro (ej. Sucursales: abre picker
   y muestra contador). Es control de campo, no acción primaria → neutro,
   con el contador en pill para que la selección resalte. */
.wg-theme .filter-card li .btn,
.wg-theme .filtro li .btn{background:var(--wg-surface)!important;border:1px solid var(--wg-border-2)!important;color:var(--wg-text-2)!important;}
.wg-theme .filter-card li .btn:hover,
.wg-theme .filtro li .btn:hover{background:var(--wg-surface-2)!important;border-color:var(--wg-border-2)!important;color:var(--wg-text)!important;}
.wg-theme .filter-card li .btn .badge,
.wg-theme .filtro li .btn .badge{background:var(--wg-info-50)!important;color:var(--wg-info)!important;font-weight:600!important;margin-left:6px;border-radius:5px!important;padding:2px 5px!important;min-width:18px;text-align:center;line-height:1.3!important;box-shadow:none!important;text-shadow:none!important;filter:none!important;}
/* matar halo/sombra del boton selector en foco/activo y Waves */
.wg-theme .filter-card li .btn,
.wg-theme .filtro li .btn,
.wg-theme .filter-card li .btn:focus,
.wg-theme .filtro li .btn:focus,
.wg-theme .filter-card li .btn:active,
.wg-theme .filtro li .btn:active,
.wg-theme .filter-card li .btn.focus,
.wg-theme .filtro li .btn.focus{box-shadow:none!important;filter:none!important;outline:none!important;}
.wg-theme .filter-card li .btn .badge::before,
.wg-theme .filter-card li .btn .badge::after,
.wg-theme .filtro li .btn .badge::before,
.wg-theme .filtro li .btn .badge::after{box-shadow:none!important;display:none!important;}

/* ============================================================
   FILTRO POR DEPORTE (ul#sports-container) — chips de filtro.
   Cada boton = icono (.sport-button-img) + label + contador (.badge).
   Son btn-outline-blue btn-xs dentro de <li>, asi que con el azulejo
   generico de btn-xs se aplastaban (height:30px). Aqui se SACAN de esa
   regla (gana por el #id) y se tratan como chips:
   - inactivo: neutro (blanco, borde gris, texto gris)
   - activo (.active): azul (semantica de filtro) + contador azul solido
   Contador cuadrado, estilo del de Sucursales.
   NOTA: el activo se asume con clase .active; si tu JS marca el activo de
   otra forma, avisar para reapuntar el selector.
   ============================================================ */
/* Barra de chips */
.wg-theme #sports-container{display:flex!important;flex-wrap:wrap;gap:6px;align-items:center;margin:0!important;padding:0!important;list-style:none;}
.wg-theme #sports-container > li{float:none!important;margin:0!important;padding:0!important;list-style:none;}
/* Chip inactivo */
.wg-theme #sports-container .btn.btn-xs{height:auto!important;min-width:0!important;padding:6px 11px!important;display:inline-flex;align-items:center;gap:7px;font-size:12.5px!important;font-weight:500!important;line-height:1.2!important;border:1px solid var(--wg-border-2)!important;border-radius:var(--wg-radius)!important;background:var(--wg-surface)!important;color:var(--wg-text-2)!important;box-shadow:none!important;text-shadow:none!important;background-image:none!important;}
.wg-theme #sports-container .btn.btn-xs > i{margin:0!important;}
.wg-theme #sports-container .btn.btn-xs:hover{background:var(--wg-surface-2)!important;border-color:var(--wg-border-2)!important;color:var(--wg-text)!important;}
.wg-theme #sports-container .btn.btn-xs:focus,
.wg-theme #sports-container .btn.btn-xs.focus{box-shadow:none!important;outline:none!important;filter:none!important;}
/* Contador (cuadrado, como Sucursales) */
.wg-theme #sports-container .btn .badge{background:#eef1f5!important;color:var(--wg-text-2)!important;font-weight:600!important;font-size:11px!important;border-radius:5px!important;min-width:20px;text-align:center;line-height:1.3!important;box-shadow:none!important;text-shadow:none!important;filter:none!important;margin-left:1px!important;}
/* Chip activo (azul = filtro aplicado) */
.wg-theme #sports-container .btn.btn-xs.active,
.wg-theme #sports-container .btn.btn-xs.active:hover{background:var(--wg-info-50)!important;border-color:var(--wg-info)!important;color:var(--wg-info)!important;}
.wg-theme #sports-container .btn.btn-xs.active .badge{background:var(--wg-info)!important;color:#fff!important;}

/* ============================================================
   FILTRO COMPACTO INLINE (.row-filter.filtros.filters) — LABEL AL LADO.
   Variante donde se quiere el label JUNTO al campo (ahorrar espacio), no arriba
   como en .filter-card/.filtro. No vive en esos contenedores, asi que sin estas
   reglas se queda con el layout legado flotado (disparejo, select sin ancho).
   Se aplana ul.col, cada li es fila (label + campo centrados), inputs/selects
   parejos a 34px y select con ancho decente. Se piden las 3 clases para ganar
   por especificidad si llegara a vivir dentro de un .filter-card. Sin borde de
   card a proposito (parece ya estar en un contenedor); si se quiere, se agrega.
   ============================================================ */
.wg-theme .row-filter.filtros.filters{display:flex!important;flex-wrap:wrap;align-items:center;gap:14px;margin:0!important;padding:6px 0!important;}
/* Si esta variante inline-compacta vive DENTRO de un .filter-card (hibrido: trae
   las 3 clases pero tambien card), restaura el padding de filtro normal: el 6px 0
   standalone dejaba los campos pegados al borde del card. Mas especifico -> gana. */
.wg-theme .filter-card .row-filter.filtros.filters{padding:10px 12px!important;}
.wg-theme .row-filter.filtros.filters > ul.col{display:contents!important;}
.wg-theme .row-filter.filtros.filters li{float:none!important;display:flex!important;flex-direction:row!important;align-items:center;gap:8px;margin:0!important;}
.wg-theme .row-filter.filtros.filters li > label{margin:0!important;font-size:12.5px;font-weight:500;color:var(--wg-text-2);line-height:1.2;white-space:nowrap;}
.wg-theme .row-filter.filtros.filters div.form-group{float:none!important;width:auto!important;margin:0!important;padding:0!important;}
.wg-theme .row-filter.filtros.filters input.form-control,
.wg-theme .row-filter.filtros.filters select.form-control{height:34px!important;font-size:12.5px!important;padding:.35rem .55rem!important;line-height:1.2!important;border:1px solid var(--wg-border-2)!important;border-radius:8px!important;background-color:var(--wg-surface)!important;}
.wg-theme .row-filter.filtros.filters select.form-control{min-width:140px;padding:.35rem 1.7rem .35rem .55rem!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat!important;background-position:right .55rem center!important;background-size:12px!important;}
.wg-theme .row-filter.filtros.filters input.form-control.hasDatepicker[readonly]{width:104px!important;text-align:left!important;}
.wg-theme .row-filter.filtros.filters .input-group{flex-wrap:nowrap;width:auto;}
.wg-theme .row-filter.filtros.filters .input-group > input.form-control:not(:last-child){border-top-right-radius:0!important;border-bottom-right-radius:0!important;border-right:0!important;}
.wg-theme .row-filter.filtros.filters .input-group .input-group-text{height:34px!important;border:1px solid var(--wg-border-2)!important;border-left:0!important;border-radius:0 8px 8px 0!important;background:var(--wg-surface-2)!important;color:var(--wg-text-2)!important;padding:0 .55rem!important;}
.wg-theme .row-filter.filtros.filters > div[style*="clear"]{display:none!important;}

/* ============================================================
   Tabla risk-control — bordes de celdas a peticion.
   .last-element     -> borde inferior azul (#9fb6dd)
   .border-separator -> bordes laterales gris claro (#e6eaf0)
   Scopeado a .table.risk-control para no tocar esas clases en otras tablas.
   ============================================================ */
.wg-theme .table.risk-control .last-element{border-bottom:1px solid #9fb6dd!important;}
.wg-theme .table.risk-control .border-separator{border-right:1px solid #e6eaf0!important;border-left:1px solid #e6eaf0!important;}

/* ============================================================
   PESTAÑAS DE ITEMS ABIERTOS (#main-tab-area / #sortable / .main-tab-content)
   — mismo estilo SUBRAYADO de bonos (.menu_callcenter): planas, sin caja ni
   fondo; inactivo gris, activo con texto fuerte + subrayado verde de marca que
   se monta sobre el riel (margin-bottom:-1px). Conservan icono de deporte y los
   pin/cerrar. La realmente seleccionada es el wrapper #sortable > div.active
   (no el .main-tab-content.active, que solo marca "abierta").
   ============================================================ */
/* Riel / contenedor */
.wg-theme #main-tab-area{height:auto!important;min-height:0!important;background:transparent!important;border-bottom:1px solid var(--wg-border)!important;overflow:visible!important;}
.wg-theme #sortable-area{height:auto!important;min-height:0!important;overflow-x:auto;overflow-y:hidden;clear:none!important;}
.wg-theme #sortable{height:auto!important;display:flex!important;align-items:flex-end;gap:2px;}
.wg-theme #sortable > div{float:none!important;margin:0!important;}
/* Pestaña (inactiva) — plana, subrayado transparente que monta sobre el riel */
.wg-theme #sortable .main-tab-content{position:relative;width:auto!important;min-width:0!important;max-width:220px;height:auto!important;min-height:0!important;padding:9px 38px 11px 12px!important;display:flex!important;align-items:center;gap:7px;font-family:inherit!important;font-size:13px!important;font-weight:500!important;color:var(--wg-text-2)!important;background:transparent!important;border:0!important;border-bottom:3px solid transparent!important;border-radius:0!important;margin:0 0 -1px 0!important;transition:color .12s,border-color .12s;}
.wg-theme #sortable .main-tab-content.firt-tab{color:var(--wg-text)!important;}
.wg-theme #sortable > div:hover .main-tab-content{color:var(--wg-text)!important;border-bottom-color:var(--wg-border-2)!important;background:transparent!important;}
/* Pestaña activa (seleccionada = wrapper .active): texto fuerte + subrayado verde */
.wg-theme #sortable > div.active .main-tab-content,
.wg-theme #sortable > div.active:hover .main-tab-content{color:var(--wg-text)!important;font-weight:600!important;background:transparent!important;border-bottom-color:var(--wg-brand)!important;}
/* Label + icono de deporte */
.wg-theme #sortable .name-tab{height:auto!important;padding:0!important;display:flex!important;align-items:center;gap:7px;font-size:12.5px!important;color:inherit!important;background:transparent!important;line-height:1.2!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0;}
.wg-theme #sortable .name-tab > i{flex-shrink:0;}
.wg-theme #sortable .spimg{width:16px!important;height:16px!important;flex-shrink:0;}
/* Pin / cerrar (absolutos a la derecha, aparecen en hover/activa) */
.wg-theme #sortable .pin,
.wg-theme #sortable .close{width:20px!important;height:100%!important;top:0!important;display:flex!important;align-items:center;justify-content:center;padding:0!important;background:transparent!important;}
.wg-theme #sortable .pin{right:20px!important;}
.wg-theme #sortable .close{right:2px!important;}
.wg-theme #sortable .pin i,
.wg-theme #sortable .close i{font-size:11px!important;color:var(--wg-text-3)!important;}
.wg-theme #sortable > div:hover .pin,
.wg-theme #sortable > div:hover .close,
.wg-theme #sortable > div.active .pin,
.wg-theme #sortable > div.active .close{opacity:1!important;}
.wg-theme #sortable .pin:hover i{color:var(--wg-info)!important;}
.wg-theme #sortable .pin.pinned i{color:var(--wg-brand)!important;}
.wg-theme #sortable .close:hover i{color:#dc2626!important;}

/* ============================================================
   FILTRO DE TITULOS DE SECCION (.menu_titulos_seccion) — label + select + Filtrar.
   Otra variante con ul.menu_principal (reusada: toolbar/tabs/aqui), por eso TODO
   scopeado a .menu_titulos_seccion.
   - label.filtro-barra venia color:#fff (barra navy vieja) -> invisible: se hace visible.
   - select #serch_titulos_seccion traia height fijo por id (filters.css) -> 34px.
   - boton Filtrar (btn-blue btn-xs) vive en <li> y caia en azulejo suave -> solido azul.
   ============================================================ */
.wg-theme .menu_titulos_seccion{height:auto!important;}
.wg-theme .menu_titulos_seccion .menu_principal{display:flex!important;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin:0!important;padding:0!important;float:none!important;list-style:none;}
.wg-theme .menu_titulos_seccion .menu_principal > li{float:none!important;display:flex!important;align-items:center;gap:8px;margin:0!important;padding:0!important;}
/* Label visible */
.wg-theme .menu_titulos_seccion label.filtro-barra{color:var(--wg-text-2)!important;font-weight:500!important;font-size:12.5px!important;line-height:1.2!important;margin:0!important;white-space:nowrap;}
/* Select a 34px con ancho decente (el caret/flecha lo pone la regla global de select.form-control) */
.wg-theme .menu_titulos_seccion div.form-group{float:none!important;width:auto!important;margin:0!important;padding:0!important;}
.wg-theme .menu_titulos_seccion select.form-control{height:34px!important;min-width:180px;font-size:12.5px!important;padding:.35rem 1.7rem .35rem .6rem!important;line-height:1.2!important;border:1px solid var(--wg-border-2)!important;border-radius:8px!important;background-color:var(--wg-surface)!important;}
/* Filtrar = azul solido (primaria de filtro), no azulejo suave */
.wg-theme .menu_titulos_seccion .btn-blue.btn-xs{display:inline-flex;align-items:center;gap:6px;height:34px!important;min-width:0!important;padding:0 14px!important;border-radius:8px!important;font-size:12.5px!important;background:var(--wg-info)!important;border:1px solid var(--wg-info)!important;color:#fff!important;box-shadow:none!important;}
.wg-theme .menu_titulos_seccion .btn-blue.btn-xs > i{margin:0!important;color:#fff!important;}
.wg-theme .menu_titulos_seccion .btn-blue.btn-xs:hover{background:#1d4ed8!important;border-color:#1d4ed8!important;color:#fff!important;filter:none!important;}
/* EXCEPCIÓN: el toggle "Filtros" (showHideFilters) trae btn-blue pero NO es un submit
   "Filtrar" -> es un toggle mostrar/ocultar panel y debe ir en outline neutro (estándar
   de toggles del proyecto), no azul sólido. Se detecta por su caret colapsable
   #spanCollapsable (id estable en fa-caret-up / fa-caret-down). El id en :has() le da
   especificidad suficiente para vencer las reglas de azul sólido de arriba y de li/td. */
.wg-theme .btn-blue.btn-xs:has(> i#spanCollapsable){background:var(--wg-surface)!important;border:1px solid var(--wg-border-2)!important;color:var(--wg-text-2)!important;}
.wg-theme .btn-blue.btn-xs:has(> i#spanCollapsable):hover{background:var(--wg-surface-2)!important;border-color:var(--wg-border-2)!important;color:var(--wg-text)!important;filter:none!important;}
.wg-theme .btn-blue.btn-xs:has(> i#spanCollapsable) > i{color:var(--wg-text-3)!important;}

/* ============================================================
   TOOLBAR DE ACCIONES SOLO-ICONO en .text-right (crear/editar/borrar/duplicar/
   historial/ordenar/guardar/cancelar). Cuelgan DIRECTO de un .text-right (sea col
   o div pelon). Sin estar en <li>/<td> caian en botones solidos fuertes,
   inconsistentes con el resto de acciones-icono (azulejo suave). Se les da el
   azulejo suave por color. Solo-icono via :has(> i); hijos directos (>) para no
   tocar botones con texto anidados. Si algun boton CON TEXTO cuelga directo de un
   .text-right y sale apretado, reportar para excluirlo.
   ============================================================ */
.wg-theme .text-right > .btn-xs:not(.button_table):has(> i){min-width:30px!important;width:30px!important;height:30px!important;padding:0!important;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent!important;border-radius:7px!important;font-size:13px!important;box-shadow:none!important;text-shadow:none!important;background-image:none!important;}
.wg-theme .text-right > .btn-xs:not(.button_table):has(> i) > i{margin:0!important;}
.wg-theme .text-right > .btn-success.btn-xs:has(> i){background:var(--wg-brand-50)!important;color:var(--wg-brand-700)!important;border-color:transparent!important;}
.wg-theme .text-right > .btn-danger.btn-xs:has(> i){background:#fdecec!important;color:#dc2626!important;border-color:transparent!important;}
.wg-theme .text-right > .btn-blue.btn-xs:has(> i){background:var(--wg-info-50)!important;color:var(--wg-info)!important;border-color:transparent!important;}
.wg-theme .text-right > .btn-info.btn-xs:has(> i){background:#e6f5fb!important;color:#0e8aaa!important;border-color:transparent!important;}
.wg-theme .text-right > .btn-primary.btn-xs:has(> i){background:var(--wg-surface-2)!important;color:var(--wg-text-2)!important;border-color:var(--wg-border-2)!important;}
.wg-theme .text-right > .btn-secondary.btn-xs:has(> i){background:#eef1f5!important;color:var(--wg-text-2)!important;border-color:transparent!important;}
.wg-theme .text-right > .btn-xs:not(.button_table):has(> i):hover{filter:brightness(.95)!important;}

/* ============================================================
   btn-xxs (boton diminuto, SIEMPRE solo-icono: acciones de fila info/editar/
   guardar/etc.) -> azulejo suave en li/td/.text-right. Descendiente (no solo
   hijo directo) porque suelen ir anidados (td > .row > .col > button). Incluye
   btn-blue como TINTE (no solido): a diferencia de Filtrar, un btn-xxs no lleva
   texto, asi que no aplica la regla de azul solido de btn-blue.btn-xs.
   ============================================================ */
.wg-theme :is(li,td) .btn-xxs:not(.button_table),
.wg-theme .text-right .btn-xxs:not(.button_table){min-width:28px!important;width:28px!important;height:28px!important;padding:0!important;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent!important;border-radius:6px!important;font-size:11px!important;box-shadow:none!important;text-shadow:none!important;background-image:none!important;}
.wg-theme :is(li,td) .btn-xxs:not(.button_table) > i,
.wg-theme .text-right .btn-xxs:not(.button_table) > i{margin:0!important;}
.wg-theme :is(li,td) .btn-blue.btn-xxs:not(.button_table),
.wg-theme .text-right .btn-blue.btn-xxs:not(.button_table){background:var(--wg-info-50)!important;color:var(--wg-info)!important;}
.wg-theme :is(li,td) .btn-success.btn-xxs:not(.button_table),
.wg-theme .text-right .btn-success.btn-xxs:not(.button_table){background:var(--wg-brand-50)!important;color:var(--wg-brand-700)!important;}
.wg-theme :is(li,td) .btn-danger.btn-xxs:not(.button_table),
.wg-theme .text-right .btn-danger.btn-xxs:not(.button_table){background:#fdecec!important;color:#dc2626!important;}
.wg-theme :is(li,td) .btn-info.btn-xxs:not(.button_table),
.wg-theme .text-right .btn-info.btn-xxs:not(.button_table){background:#e6f5fb!important;color:#0e8aaa!important;}
.wg-theme :is(li,td) .btn-primary.btn-xxs:not(.button_table),
.wg-theme .text-right .btn-primary.btn-xxs:not(.button_table){background:var(--wg-surface-2)!important;color:var(--wg-text-2)!important;border-color:var(--wg-border-2)!important;}
.wg-theme :is(li,td) .btn-xxs:not(.button_table):hover,
.wg-theme .text-right .btn-xxs:not(.button_table):hover{filter:brightness(.95)!important;}

/* ============================================================
   Azulejos de accion en HOVER de fila: el hover de fila es info-50 (azul claro)
   y los azulejos azules tambien -> se funden y el icono queda sin caja. Al hacer
   hover la fila, los azulejos pasan a fondo BLANCO + borde sutil para resaltar
   como chips; el icono conserva su color (mantiene el codigo de color).
   (risk-control no tiene hover, asi que no aplica ahi.)
   ============================================================ */
.wg-theme .table tbody tr:hover td .btn-xs:not(.button_table):has(> i),
.wg-theme .table tbody tr:hover td .btn-xxs:not(.button_table):has(> i),
.wg-theme .table tbody tr:hover td .button_table{background:var(--wg-surface)!important;border:1px solid var(--wg-border)!important;}

/* ============================================================
   CHECKBOX DE MARCA — GLOBAL. Reemplaza el estilo legado (amber/chico de Hyper +
   soe.css). Caja propia via label::before (16px, radio 4px), VERDE con palomita
   blanca al checked. Se mata el ::after legado. Maneja:
   - checkbox-single (label vacio, solo la caja, ej. status en tabla)
   - indeterminate (guion, para el "seleccionar todo")
   - disabled (solo lectura: atenuado pero legible)
   Fuerza verde sobre las variantes de color (checkbox-warning/success/...). Si en
   algun lado se quiere conservar color-coding del check, reportar para excluir.
   ============================================================ */
.wg-theme .checkbox{position:relative;}
.wg-theme .checkbox input[type="checkbox"]{position:absolute;left:0;top:50%;transform:translateY(-50%);width:16px!important;height:16px!important;margin:0!important;opacity:0;cursor:pointer;z-index:1;}
.wg-theme .checkbox label{position:relative;display:inline-block;min-height:16px;min-width:16px;padding-left:22px;margin:0;cursor:pointer;line-height:16px;}
.wg-theme .checkbox label::before{content:""!important;position:absolute!important;left:0!important;top:50%!important;transform:translateY(-50%)!important;width:16px!important;height:16px!important;margin:0!important;border:1px solid var(--wg-border-2)!important;border-radius:4px!important;background:var(--wg-surface)!important;box-sizing:border-box!important;}
.wg-theme .checkbox label::after{content:none!important;display:none!important;}
.wg-theme .checkbox input[type="checkbox"]:checked + label::before{border-color:var(--wg-brand)!important;background:var(--wg-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat!important;}
.wg-theme .checkbox input[type="checkbox"]:indeterminate + label::before{border-color:var(--wg-brand)!important;background:var(--wg-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round'%3E%3Cline x1='6' y1='12' x2='18' y2='12'/%3E%3C/svg%3E") center/11px no-repeat!important;}
/* single: label vacio -> solo la caja */
.wg-theme .checkbox.checkbox-single{display:inline-block;}
.wg-theme .checkbox.checkbox-single label{width:16px;height:16px;min-width:16px;padding-left:16px;}
/* disabled: solo lectura, legible pero atenuado */
.wg-theme .checkbox input[type="checkbox"]:disabled + label{cursor:default;}
.wg-theme .checkbox input[type="checkbox"]:disabled + label::before{opacity:.85;}
/* foco accesible (no en disabled) */
.wg-theme .checkbox input[type="checkbox"]:focus:not(:disabled) + label::before{border-color:var(--wg-brand)!important;box-shadow:0 0 0 3px rgba(47,158,107,.15)!important;}

/* ============================================================
   SCROLLBARS: el control de las barras de desplazamiento se MOVIO al CSS del
   TEMPLATE (sitio completo), para que sea global y no dependa del skin.
   Motivo tecnico: Chrome moderno ignora ::-webkit-scrollbar cuando el elemento
   tiene scrollbar-color / scrollbar-width; por eso en el template se separan los
   dos modelos con @supports not selector(::-webkit-scrollbar) (webkit para
   Blink/WebKit; props estandar solo para Firefox).
   La unica regla de scroll que permanece aqui es la que OCULTA la barra del
   strip de tabs (#sortable-area), por ser especifica de ese componente.
   ============================================================ */

/* ============================================================
   REPORTE "BUSCAR JUGADOR" — form#form_filtro.busqueda_avanzada.
   Sistema de filtros PROPIO (NO .filter-card): bloques .row.filtros.jug-busq
   (.basic-search + .adv-search). El colapsar/expandir lo hace jQuery con
   .hide()/.show() (togglea display INLINE) sobre .jug-busq / .basic-search /
   .adv-search / #btn-serch / #btn-adv-serch / #toggle-search-adv.
   >>> REGLA DURA: NUNCA usar display:...!important en esos elementos (rompe el
   show/hide). El display:inline-flex global de .btn es NO-important a propósito,
   así jQuery puede ocultar/mostrar los botones-toggle sin pelearse.
   --- Parte 1 de N: FOOTER (Bloque Botones). ---
   ============================================================ */
/* Spacer izquierdo (col-md-5 que solo tiene un ".") -> ocultar el glifo, conservar ancho */
.wg-theme #form_filtro-footer > .col-md-5:first-child{font-size:0!important;}
/* Chevrons de colapsar (.toggle-filter): son toggles mostrar/ocultar -> NEUTRO outline,
   no azul sólido. Icon-only 34px. Sin tocar display (lo da el .btn global no-important,
   para que #toggle-search-adv siga ocultándose/mostrándose por JS). */
.wg-theme #form_filtro-footer .toggle-filter.btn-blue.btn-xs{width:34px!important;min-width:34px!important;height:34px!important;padding:0!important;border-radius:7px!important;background:var(--wg-surface)!important;border:1px solid var(--wg-border-2)!important;color:var(--wg-text-2)!important;box-shadow:none!important;}
.wg-theme #form_filtro-footer .toggle-filter.btn-blue.btn-xs > i{margin:0!important;color:var(--wg-text-2)!important;}
.wg-theme #form_filtro-footer .toggle-filter.btn-blue.btn-xs:hover{background:var(--wg-surface-2)!important;border-color:var(--wg-text-3)!important;color:var(--wg-text)!important;}
.wg-theme #form_filtro-footer .toggle-filter + .toggle-filter{margin-left:6px!important;}
/* Par Limpiar (btn-info=neutro) + Filtrar (btn-blue tras el cambio de markup=azul):
   normalizar márgenes y separarlos. El tamaño inline (22px/11px/line-height:.5) ya
   lo pisa el estándar global de .btn (34px). */
.wg-theme #form_filtro-footer #btn-adv-serch .btn{margin:0!important;}
.wg-theme #form_filtro-footer #btn-adv-serch .btn + .btn{margin-left:6px!important;}

/* --- Parte 2: BLOQUE 1 (basic-search) — inputs de texto + picker "Sucursales". ---
   Inputs al estándar del sistema (34px, radio 8, borde-2, foco verde, placeholder
   tenue). Se EXCLUYEN los .hasDatepicker: viven en input-group y se tratan en la
   tanda de rangos de fecha (radio unido al icono del calendario). Los <select> ya
   los cubre la regla global .wg-theme select.form-control. */
.wg-theme .busqueda_avanzada input.form-control:not(.hasDatepicker){height:34px!important;padding:.35rem .55rem!important;font-size:12.5px!important;line-height:1.2!important;color:var(--wg-text)!important;background-color:var(--wg-surface)!important;border:1px solid var(--wg-border-2)!important;border-radius:8px!important;box-shadow:none!important;}
.wg-theme .busqueda_avanzada input.form-control:not(.hasDatepicker)::placeholder{color:var(--wg-text-3)!important;opacity:1;}
.wg-theme .busqueda_avanzada input.form-control:not(.hasDatepicker):focus{border-color:var(--wg-brand)!important;box-shadow:0 0 0 3px rgba(47,158,107,.15)!important;outline:none!important;}
/* Separación de filas un poco más compacta y pareja */
.wg-theme .busqueda_avanzada .basic-search > .form-group{margin-bottom:8px!important;}
/* Etiqueta "Sucursales:" (la única con <label> en este bloque) al tono del sistema */
.wg-theme .busqueda_avanzada .basic-search > .form-group > label{font-size:12.5px!important;color:var(--wg-text-2)!important;font-weight:500!important;margin:0 6px 0 0!important;white-space:nowrap;}
/* Picker "Sucursales" (btn-blue + badge contador): AZUL SÓLIDO con icono blanco y
   contador en pastilla blanca (así lo tienen en la plataforma). Se detecta por su
   badge interno, así sirve para cualquier picker-con-contador del form. Sólo se
   aplana/empareja al estándar 34px del sistema, conservando el azul. */
.wg-theme .busqueda_avanzada .form-group .btn-blue.btn-xs:has(> .badge){height:34px!important;min-width:0!important;padding:0 11px!important;display:inline-flex;align-items:center;gap:7px;border-radius:8px!important;background:var(--wg-info)!important;border:1px solid var(--wg-info)!important;color:#fff!important;box-shadow:none!important;font-size:12.5px!important;}
.wg-theme .busqueda_avanzada .form-group .btn-blue.btn-xs:has(> .badge) > i{margin:0!important;color:#fff!important;}
.wg-theme .busqueda_avanzada .form-group .btn-blue.btn-xs:has(> .badge):hover{background:#1d4ed8!important;border-color:#1d4ed8!important;color:#fff!important;}
.wg-theme .busqueda_avanzada .form-group .btn-blue.btn-xs > .badge{background:#fff!important;color:var(--wg-info)!important;font-weight:700!important;border-radius:10px!important;padding:1px 7px!important;min-width:20px;text-align:center;line-height:1.4!important;font-size:11px!important;box-shadow:none!important;text-shadow:none!important;}

/* --- Parte 3: BLOQUES 2-4 (adv-search) — pares "label + rango" (fecha / número / IP).
   Misma estructura en las 3 bandas avanzadas. Show/hide jQuery sobre .jug-busq/.adv-search
   => SIN display:!important en esas bandas. --- */

/* FONDO ÚNICO: las bandas legadas traen background #f3f3f3 + border #cad6e6 (3 ids en
   template.css). Las dejamos transparentes (se ve el card blanco) con divisor sutil. */
.wg-theme #form_filtro > div.filtros.row{background:transparent!important;border-bottom:none!important;padding:0!important;}
.wg-theme #form_filtro .jug-busq{background-color:transparent!important;border-bottom:1px solid var(--wg-border)!important;padding:12px!important;margin:0!important;}

/* Cada par "label + inputs + / + inputs" (los .row internos de cada col-md-4) -> FLEX
   centrado verticalmente: alinea el label con sus inputs y el "/". */
.wg-theme .busqueda_avanzada .adv-search > .col-md-4 > .row{display:flex!important;flex-wrap:nowrap;align-items:center;gap:6px;margin:0 0 8px 0!important;line-height:normal!important;}
.wg-theme .busqueda_avanzada .adv-search > .col-md-4 > .row:last-child{margin-bottom:0!important;}
/* Ocultar los <div clear:both> (ya no hacen falta en flex) */
.wg-theme .busqueda_avanzada .adv-search > .col-md-4 > .row > div[style*="clear"]{display:none!important;}
/* Label: ocupa el espacio izquierdo, texto a la derecha, tono del sistema */
.wg-theme .busqueda_avanzada .adv-search > .col-md-4 > .row > .col{flex:1 1 auto;min-width:0;text-align:right!important;padding:0 4px 0 0!important;color:var(--wg-text-2)!important;font-size:12.5px!important;font-weight:500!important;white-space:nowrap;}
/* Wrappers de input: sin padding/float/margin legados (el espacio lo da el gap) */
.wg-theme .busqueda_avanzada .adv-search .form-group.xdisplay_inputx{padding:0!important;float:none!important;margin:0!important;}
/* "/" separador (div sin clase con float:right) centrado, con aire */
.wg-theme .busqueda_avanzada .adv-search > .col-md-4 > .row > div[style*="float"]:not([class]){flex:0 0 auto;color:var(--wg-text-3)!important;padding:0 2px;font-weight:500;}

/* Inputs (incluye los datepickers, que en el Bloque 1 excluimos): 34px del sistema */
.wg-theme .busqueda_avanzada .adv-search input.form-control{height:34px!important;font-size:12px!important;padding:.35rem .5rem!important;line-height:1.2!important;border:1px solid var(--wg-border-2)!important;border-radius:8px!important;background-color:var(--wg-surface)!important;color:var(--wg-text)!important;box-shadow:none!important;}
.wg-theme .busqueda_avanzada .adv-search input.form-control:focus{border-color:var(--wg-brand)!important;box-shadow:0 0 0 3px rgba(47,158,107,.15)!important;outline:none!important;}

/* Input-group de FECHA (input + icono calendario): unir bordes y redondear extremos.
   Solo cuando hay icono (.input-group-text). El de Mont. Bonos es input solo -> queda
   redondo completo por la regla de arriba. */
.wg-theme .busqueda_avanzada .adv-search .input-group{flex-wrap:nowrap;}
.wg-theme .busqueda_avanzada .adv-search .input-group:has(.input-group-text) > input.form-control{border-right:0!important;border-radius:8px 0 0 8px!important;text-align:left!important;}
.wg-theme .busqueda_avanzada .adv-search .input-group .input-group-text{height:34px!important;border:1px solid var(--wg-border-2)!important;border-left:0!important;border-radius:0 8px 8px 0!important;background:var(--wg-surface-2)!important;color:var(--wg-text-2)!important;padding:0 .5rem!important;}
.wg-theme .busqueda_avanzada .adv-search .input-group:focus-within > input.form-control,
.wg-theme .busqueda_avanzada .adv-search .input-group:focus-within .input-group-text{border-color:var(--wg-brand)!important;}
.wg-theme .busqueda_avanzada .adv-search .input-group:focus-within > input.form-control{box-shadow:none!important;}

/* --- Parte 4: FOOTER layout — acciones a la DERECHA, chevrons CENTRADOS, alto AUTO,
   fondo único. El footer no es .jug-busq, así que conservaba el gris #f3f3f3 y el
   height:36px legado (template.css, 4 ids). #btn-serch/#btn-adv-serch los togglea
   jQuery -> SIN display:!important en ellos; solo flexeo sus contenedores col. --- */
.wg-theme #form_filtro-footer{display:flex!important;align-items:center;height:auto!important;min-height:0!important;padding:8px 12px!important;background-color:transparent!important;border-bottom:1px solid var(--wg-border)!important;text-align:left!important;font-size:13px!important;gap:8px;}
/* Zona izquierda: spacer que crece (oculta el ".") */
.wg-theme #form_filtro-footer > .col-md-5:first-child{flex:1 1 0;min-width:0;font-size:0!important;padding:0!important;float:none!important;}
/* Zona centro: chevrons centrados */
.wg-theme #form_filtro-footer > .col-md-2{flex:0 0 auto;display:flex;justify-content:center;align-items:center;gap:6px;padding:0!important;float:none!important;}
.wg-theme #form_filtro-footer > .col-md-2 .toggle-filter{margin:0!important;}
/* Zona derecha: acciones pegadas al borde derecho (3er hijo = el col-md-5 que NO es
   el spacer). Sus hijos #btn-adv-serch / #btn-serch se alinean al final. */
.wg-theme #form_filtro-footer > .col-md-5:not(:first-child){flex:1 1 0;min-width:0;display:flex;justify-content:flex-end;align-items:center;padding:0!important;float:none!important;}
/* Ocultar todos los clearfix del footer (inútiles en flex) */
.wg-theme #form_filtro-footer div[style*="clear"]{display:none!important;}

/* --- Parte 5: BÚSQUEDA RÁPIDA (#btn-serch) — input + lupa al estándar del sistema,
   reemplaza el pill legado (border-radius:25px de template.css). Se muestra al colapsar
   el panel; #btn-serch lo togglea jQuery -> NO tocar su display. --- */
.wg-theme #btn-serch #busqueda_user,
.wg-theme #btn-serch #btn-busqueda_user{vertical-align:middle!important;}
.wg-theme #btn-serch #busqueda_user{height:34px!important;min-height:0!important;width:220px!important;font-size:12.5px!important;line-height:1.2!important;color:var(--wg-text)!important;background:var(--wg-surface)!important;border:1px solid var(--wg-border-2)!important;border-right:0!important;border-radius:8px 0 0 8px!important;box-shadow:none!important;padding:.35rem .6rem!important;}
.wg-theme #btn-serch #busqueda_user::placeholder{color:var(--wg-text-3)!important;opacity:1;}
.wg-theme #btn-serch #busqueda_user:focus{border-color:var(--wg-brand)!important;box-shadow:none!important;outline:none!important;}
.wg-theme #btn-serch #btn-busqueda_user{height:34px!important;min-width:40px!important;padding:0 11px!important;display:inline-flex;align-items:center;justify-content:center;font-size:13px!important;border:1px solid var(--wg-info)!important;border-radius:0 8px 8px 0!important;background-color:var(--wg-info)!important;color:#fff!important;box-shadow:none!important;margin:0!important;}
.wg-theme #btn-serch #btn-busqueda_user:hover{background-color:#1d4ed8!important;border-color:#1d4ed8!important;color:#fff!important;}
.wg-theme #btn-serch #btn-busqueda_user:focus,
.wg-theme #btn-serch #btn-busqueda_user.focus{box-shadow:none!important;outline:none!important;}

/* --- Acción de fila "ver jugador / icono" en celda de iconos (td.col_ico): es
   btn-blue.btn-xs SOLO-ÍCONO, así que caía en la regla de btn-blue.btn-xs de li/td
   = AZUL SÓLIDO (pensada para "Filtrar/Buscar" CON texto). Por diseño un icono de
   acción debe ser AZULEJO suave azul. Scopeado a td.col_ico para no tocar los sólidos
   con texto. El hover-blanco al pasar la fila ya lo da la regla general de azulejos. --- */
.wg-theme td.col_ico .btn-blue.btn-xs:has(> i){min-width:30px!important;width:30px!important;height:30px!important;padding:0!important;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent!important;border-radius:7px!important;font-size:13px!important;font-weight:400!important;background:var(--wg-info-50)!important;color:var(--wg-info)!important;box-shadow:none!important;text-shadow:none!important;background-image:none!important;}
.wg-theme td.col_ico .btn-blue.btn-xs:has(> i) > i{margin:0!important;color:var(--wg-info)!important;}
.wg-theme td.col_ico .btn-blue.btn-xs:has(> i):hover{filter:brightness(.96)!important;}

/* --- TAB BAR de jugadores: scroll horizontal estable (punto 2) + icono "cerrar
   tabs" (punto 3). Estructura: #main-tab-area > #sortable-area(scroll) > #sortable
   > div(wrapper) > .main-tab-content; y .close-tabs absoluto a la derecha. --- */
/* Punto 2: los tabs NO se encogen -> conservan su ancho (<=220px) y, al pasarse del
   ancho, entra el scroll horizontal de #sortable-area. */
.wg-theme #sortable > div{flex:0 0 auto!important;}
/* Pestaña fija "Jugadores" (sin pin/close): quitar el padding-right reservado a iconos */
.wg-theme #sortable .main-tab-content:not(.player-tab){padding-right:14px!important;}
/* Strip de tabs: la barra nativa de #sortable-area (overflow:auto de template.css)
   se ve tosca para esta zona -> se OCULTA en todos los navegadores. El scroll
   horizontal SIGUE funcionando (rueda/trackpad/arrastre), solo sin barra visible. */
.wg-theme #sortable-area{scrollbar-width:none!important;-ms-overflow-style:none!important;}
.wg-theme #sortable-area::-webkit-scrollbar{display:none!important;height:0!important;width:0!important;}
/* Layout FLEX del strip: las flechas y el icono cerrar-tabs van en SLOTS PROPIOS
   (ya no flotan en position:absolute sobre los tabs). #sortable-area ocupa el centro
   (flex:1) y hace su scroll interno. Así un click en la flecha cae SIEMPRE en la
   flecha y nunca en el tab que antes asomaba por debajo. */
.wg-theme #sortable-area{flex:1 1 auto!important;min-width:0!important;order:2;margin:0!important;}
/* FLECHAS de scroll del tab strip. Se muestran SOLO cuando hay overflow, vía la clase
   .has-scroll que el JS pone en #main-tab-area. Ya NO flotan: cada flecha es un slot
   flex propio (28px) a un costado del área de tabs, con un borde que la separa. */
.wg-theme #main-tab-area .tab-scroll{display:none;flex:0 0 28px;align-items:center;justify-content:center;cursor:pointer;color:var(--wg-text-2);background:var(--wg-surface);align-self:stretch;transition:color .12s,background .12s;}
.wg-theme #main-tab-area.has-scroll .tab-scroll{display:flex;}
.wg-theme #main-tab-area .tab-scroll:hover{color:var(--wg-text);background:var(--wg-surface-2);}
.wg-theme #main-tab-area .tab-scroll.disabled{opacity:.3;pointer-events:none;}
.wg-theme #main-tab-area .tab-scroll i{font-size:13px;line-height:1;}
.wg-theme #main-tab-area .tab-scroll-left{order:1;border-right:1px solid var(--wg-border);}
.wg-theme #main-tab-area .tab-scroll-right{order:3;border-left:1px solid var(--wg-border);}
/* Punto 3: icono "cerrar todos los tabs (excepto Jugadores y pinneados)". Reemplaza el
   PNG legado por un icono de papelera (vía background-image) neutro, con hover en chip
   rojo suave + icono rojo (acción de limpieza). Fijo a la derecha, centrado vertical. */
.wg-theme #main-tab-area{position:relative;display:flex!important;align-items:stretch!important;}
.wg-theme #main-tab-area .close-tabs{width:24px!important;height:24px!important;top:50%!important;right:6px!important;left:auto!important;bottom:auto!important;transform:translateY(-50%)!important;background-color:#eef1f5!important;border:1px solid var(--wg-border)!important;background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2364748b'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%206h18'/%3E%3Cpath%20d='M8%206V4a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2'/%3E%3Cpath%20d='M19%206v14a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2V6'/%3E%3Cline%20x1='10'%20y1='11'%20x2='10'%20y2='17'/%3E%3Cline%20x1='14'%20y1='11'%20x2='14'%20y2='17'/%3E%3C/svg%3E")!important;background-size:15px!important;background-position:center!important;background-repeat:no-repeat!important;border-radius:6px!important;cursor:pointer;transition:background-color .15s;}
.wg-theme #main-tab-area .close-tabs:hover{background-color:#fdecec!important;border-color:#f3c4c4!important;background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23dc2626'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%206h18'/%3E%3Cpath%20d='M8%206V4a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2'/%3E%3Cpath%20d='M19%206v14a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2V6'/%3E%3Cline%20x1='10'%20y1='11'%20x2='10'%20y2='17'/%3E%3Cline%20x1='14'%20y1='11'%20x2='14'%20y2='17'/%3E%3C/svg%3E")!important;}
/* Override de posición: en el layout flex el close-tabs deja de ser absoluto y pasa a
   ser el último slot (order:4), centrado vertical, separado de la flecha derecha. */
.wg-theme #main-tab-area .close-tabs{position:static!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;transform:none!important;order:4;flex:0 0 auto;align-self:center;margin:0 6px 0 2px!important;}

/* ============================================================
   FICHA DEL JUGADOR — Bloque 1: tira de resumen (.row.player)
   Scope: #contenedor.content-player .row.player (mismo ancla que el CSS legado,
   para empatar/superar su especificidad por id).
   IMPORTANTE: NO !important en display de los botones edit/cancel — el JS
   (ShowSelectSucursalPlayer) los togglea con display:none/inline.
   ============================================================ */

/* Marco del bloque al sistema */
.wg-theme #contenedor.content-player .row.player{border-color:var(--wg-border)!important;border-radius:var(--wg-radius)!important;}

/* Divisores entre columnas: suavizar el #C1C1C1 inline */
.wg-theme #contenedor.content-player .row.player > .cont-top{border-right-color:var(--wg-border)!important;}

/* Centrado vertical SOLO de columnas de info (las de balance llevan el lomo
   .badge-blue y se excluyen). Mata el hueco inferior sin romper el panel. */
.wg-theme #contenedor.content-player .row.player > .cont-top:not(:has(.badge-blue)){display:flex!important;flex-direction:column!important;justify-content:center!important;}

/* Jerarquia: rotulo tenue mayuscula + valor oscuro seminegrita */
.wg-theme #contenedor.content-player .row.player .player-label{font-size:10px!important;font-weight:500!important;text-transform:uppercase!important;letter-spacing:.02em!important;color:var(--wg-text-3)!important;line-height:1.35!important;margin-bottom:1px!important;}
.wg-theme #contenedor.content-player .row.player .player-data{font-size:12px!important;font-weight:600!important;color:var(--wg-text)!important;height:auto!important;min-height:0!important;margin-bottom:6px!important;}

/* Sistema de badges de estatus (tinte suave; color = significado, forma unica) */
.wg-theme #contenedor.content-player .row.player .badge{display:inline-block!important;font-size:11px!important;font-weight:500!important;line-height:1.5!important;padding:2px 10px!important;border-radius:var(--wg-radius-pill)!important;border:0!important;box-shadow:none!important;text-shadow:none!important;vertical-align:middle!important;}
.wg-theme #contenedor.content-player .row.player .badge-success{background:var(--wg-brand-50)!important;color:var(--wg-brand-700)!important;}
.wg-theme #contenedor.content-player .row.player .badge-warning{background:#f3a81d!important;color:#241500!important;font-weight:700!important;}
.wg-theme #contenedor.content-player .row.player .badge-important,
.wg-theme #contenedor.content-player .row.player .badge-danger{background:var(--wg-danger)!important;color:#fff!important;font-weight:600!important;}
.wg-theme #contenedor.content-player .row.player .badge-info{background:var(--wg-info-50)!important;color:var(--wg-info-700)!important;}

/* Boton editar sucursal -> azulejo neutro; cancelar -> azulejo rojo suave.
   Icon-only 24px. SIN display:!important (lo togglea el JS). */
.wg-theme #contenedor.content-player .row.player .btn.toggle-filter.btn-xs{width:24px!important;height:24px!important;min-width:24px!important;padding:0!important;line-height:22px!important;text-align:center!important;vertical-align:middle!important;border-radius:6px!important;box-shadow:none!important;}
.wg-theme #contenedor.content-player .row.player .btn-primary.toggle-filter.btn-xs{background:var(--wg-info-50)!important;border:1px solid #bcd0f5!important;color:var(--wg-info)!important;}
.wg-theme #contenedor.content-player .row.player .btn-primary.toggle-filter.btn-xs:hover{background:#dce8fd!important;border-color:var(--wg-info)!important;color:var(--wg-info-700)!important;}
.wg-theme #contenedor.content-player .row.player .btn-danger.toggle-filter.btn-xs{background:var(--wg-danger-50)!important;border:1px solid #f3c4c4!important;color:var(--wg-danger-700)!important;}
.wg-theme #contenedor.content-player .row.player .btn-danger.toggle-filter.btn-xs:hover{background:#fbdada!important;border-color:#eaa9a9!important;}
.wg-theme #contenedor.content-player .row.player .btn.toggle-filter.btn-xs > i{color:inherit!important;margin:0!important;font-size:12px!important;}

/* Lomo vertical (TicketBet / Sitio Web): azul solido -> tinte info redondeado.
   Si lo prefieres solido: background:var(--wg-info)!important;color:#fff!important; */
.wg-theme #contenedor.content-player .row.player .badge-blue{background:var(--wg-info-50)!important;color:var(--wg-info-700)!important;border-radius:6px!important;}

/* Balance total: mas grande y pesado para que destaque del resto de valores */
.wg-theme #contenedor.content-player .row.player .total-bal{font-size:16px!important;font-weight:700!important;color:var(--wg-text)!important;}
.wg-theme #contenedor.content-player .row.player .total-bal small{font-size:11px!important;color:var(--wg-text-3)!important;}
/* Check de saldos conciliados -> verde de marca */
.wg-theme #contenedor.content-player .row.player .fa-check-circle.green,
.wg-theme #contenedor.content-player .row.player .total-bal .fa-check-circle{color:var(--wg-brand)!important;}

/* ============================================================
   FICHA DEL JUGADOR — Bloque 2: barra de badges + botones
   (es otro .row.player, comparte el sistema de badges del bloque 1)
   ============================================================ */

/* --- Punto 1: badges en GRUPO (Depositos+0, Retiros+0, Bonos+lupa+check).
   Las clases legadas badge-left/center/right forman una pastilla segmentada;
   re-armamos sus esquinas y cerramos el espacio inline con margin negativo. --- */
.wg-theme #contenedor.content-player .row.player .badge-left{border-radius:var(--wg-radius-pill) 0 0 var(--wg-radius-pill)!important;padding-right:9px!important;margin-right:0!important;}
.wg-theme #contenedor.content-player .row.player .badge-center{border-radius:0!important;margin-left:-4px!important;padding-left:8px!important;padding-right:8px!important;}
.wg-theme #contenedor.content-player .row.player .badge-right{border-radius:0 var(--wg-radius-pill) var(--wg-radius-pill) 0!important;margin-left:-4px!important;padding-left:8px!important;}
/* Segmento "contador/icono" del grupo -> neutro gris (badge-disabled) */
.wg-theme #contenedor.content-player .row.player .badge-disabled{background:#eef1f5!important;color:var(--wg-text-2)!important;}
/* Badges con icono (lupa/check): centrar el glifo y apretar el padding */
.wg-theme #contenedor.content-player .row.player .badge:has(> i){padding-left:7px!important;padding-right:7px!important;}
.wg-theme #contenedor.content-player .row.player .badge > i{vertical-align:middle!important;line-height:1!important;}

/* --- Puntos 4 y 5: BOTONES (.btn-player). Tamaño homologado + color por accion. --- */
.wg-theme #contenedor.content-player .row.player .btn-player{height:30px!important;padding:0 14px!important;font-size:12px!important;font-weight:500!important;line-height:1!important;border-radius:var(--wg-radius)!important;box-shadow:none!important;display:inline-flex!important;align-items:center!important;gap:5px!important;vertical-align:middle!important;margin-left:6px!important;}
/* Ajust. Balance -> accion primaria (verde de marca, solido) */
.wg-theme #contenedor.content-player .row.player .btn-success.btn-player{background:var(--wg-brand)!important;border:1px solid var(--wg-brand)!important;color:#fff!important;}
.wg-theme #contenedor.content-player .row.player .btn-success.btn-player:hover{background:var(--wg-brand-700)!important;border-color:var(--wg-brand-700)!important;}
/* Otorgar Bono -> accion positiva secundaria (azul info, solido). Sin badge hijo. */
.wg-theme #contenedor.content-player .row.player .btn-primary.btn-player:not(:has(.badge)):not([disabled]){background:var(--wg-info)!important;border:1px solid var(--wg-info)!important;color:#fff!important;}
.wg-theme #contenedor.content-player .row.player .btn-primary.btn-player:not(:has(.badge)):not([disabled]):hover{background:var(--wg-info-700)!important;border-color:var(--wg-info-700)!important;}
/* Notas -> abre formulario, accion neutra (outline). Lleva el contador como badge hijo. */
.wg-theme #contenedor.content-player .row.player .btn-primary.btn-player:has(> .badge){background:var(--wg-surface)!important;border:1px solid var(--wg-border-2)!important;color:var(--wg-text)!important;}
.wg-theme #contenedor.content-player .row.player .btn-primary.btn-player:has(> .badge):hover{background:var(--wg-surface-2)!important;border-color:var(--wg-text-3)!important;}
.wg-theme #contenedor.content-player .row.player .btn-player .badge-light{background:var(--wg-surface-2)!important;color:var(--wg-text-2)!important;}
/* Actualizar -> utilidad/recarga, accion neutra (outline) */
.wg-theme #contenedor.content-player .row.player .btn-info.btn-player{background:var(--wg-surface)!important;border:1px solid var(--wg-border-2)!important;color:var(--wg-text)!important;}
.wg-theme #contenedor.content-player .row.player .btn-info.btn-player:hover{background:var(--wg-surface-2)!important;border-color:var(--wg-text-3)!important;}
/* Estado disabled (p.ej. Otorgar Bono cuando no aplica) -> gris inactivo claro */
.wg-theme #contenedor.content-player .row.player .btn-player[disabled],
.wg-theme #contenedor.content-player .row.player .btn-player:disabled{background:#eef1f5!important;border:1px solid var(--wg-border)!important;color:var(--wg-text-3)!important;opacity:1!important;cursor:not-allowed!important;}

/* --- Espaciado vertical de la barra: las dos mitades (badges / botones) son
   columnas flotadas con padding desigual -> no se centraban entre si. Centramos
   con flex y emparejamos el padding vertical. --- */
.wg-theme #contenedor.content-player .row.player > .col-md-12{display:flex!important;align-items:center!important;flex-wrap:wrap!important;}
.wg-theme #contenedor.content-player .row.player > .col-md-12 > .col-md-7,
.wg-theme #contenedor.content-player .row.player > .col-md-12 > .col-md-5{padding-top:7px!important;padding-bottom:7px!important;}

/* Desloguear Jugador -> accion de precaucion (no destructiva): rojo OUTLINE,
   no solido. Asi no compite con la primaria ni se confunde con un borrado. */
.wg-theme #contenedor.content-player .row.player .btn-danger.btn-player{background:var(--wg-surface)!important;border:1px solid #e6a6a6!important;color:var(--wg-danger)!important;}
.wg-theme #contenedor.content-player .row.player .btn-danger.btn-player:hover{background:var(--wg-danger-50)!important;border-color:var(--wg-danger)!important;color:var(--wg-danger-700)!important;}

/* ============================================================
   FICHA DEL JUGADOR — Submenús de las pestañas (ul.sub-menu)
   Se unifican con el dropdown del menú superior: tarjeta blanca, sombra suave,
   items verticales, hover con barrita verde. NO se toca el show/hide (el legado
   lo hace con opacity/visibility en :hover, no con display).
   ============================================================ */
.wg-theme .menu_callcenter .menu_principal ul.sub-menu{top:100%!important;left:0!important;margin:4px 0 0 0!important;min-width:210px!important;background:var(--wg-surface)!important;border:1px solid var(--wg-border)!important;border-top:1px solid var(--wg-border)!important;border-radius:var(--wg-radius-lg)!important;box-shadow:0 10px 30px rgba(15,23,42,.12),0 2px 6px rgba(15,23,42,.06)!important;padding:12px!important;z-index:60!important;}
.wg-theme .menu_callcenter .menu_principal ul.sub-menu li{float:none!important;width:100%!important;line-height:normal!important;}
.wg-theme .menu_callcenter .menu_principal ul.sub-menu li a.item{width:auto!important;display:block!important;height:auto!important;margin:0!important;padding:8px 12px!important;font-size:13px!important;line-height:1.3!important;color:var(--wg-text-2)!important;background:var(--wg-surface)!important;border:0!important;border-radius:0!important;white-space:nowrap;transition:color .12s,background .12s,box-shadow .12s;}
.wg-theme .menu_callcenter .menu_principal ul.sub-menu li a.item:hover{background:#f1f8f4!important;color:var(--wg-text)!important;height:auto!important;box-shadow:inset 3px 0 0 var(--wg-brand)!important;}
.wg-theme .menu_callcenter .menu_principal ul.sub-menu li.active > a.item{background:var(--wg-brand-50)!important;color:var(--wg-brand-700)!important;font-weight:500!important;height:auto!important;box-shadow:inset 3px 0 0 var(--wg-brand)!important;}

/* Caret de las pestañas con submenú -> chevron fino (como el menú superior),
   reemplaza el triangulo solido fa-caret-down. */
.wg-theme .menu_callcenter .menu_principal > li > a.text_separator > i.fa-caret-down{display:none!important;}
.wg-theme .menu_callcenter .menu_principal > li > a.text_separator::after{content:"";display:inline-block;width:5px;height:5px;margin-left:7px;margin-bottom:2px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);vertical-align:middle;opacity:.55;}

/* Puente invisible sobre el hueco de 4px entre la pestaña y su dropdown: evita que
   el submenú se cierre al mover el mouse hacia el (mantiene vivo el :hover). */
.wg-theme .menu_callcenter .menu_principal ul.sub-menu::before{content:"";position:absolute;left:0;right:0;top:-6px;height:8px;background:transparent;}

/* ============================================================
   FIX altura submenús del MENÚ SUPERIOR: el <span> interno heredaba el
   line-height alto del navbar (~70px) e inflaba los items. Lo limitamos para
   que queden compactos, igual que el submenú de las pestañas.
   ============================================================ */
.wg-theme #topnav .navigation-menu .submenu li a,
.wg-theme #topnav .topnav-menu .submenu li a{padding:8px 12px!important;line-height:1.3!important;min-height:0!important;height:auto!important;}
.wg-theme #topnav .navigation-menu .submenu li a span:not(.arrow-down),
.wg-theme #topnav .topnav-menu .submenu li a span:not(.arrow-down){line-height:1.3!important;vertical-align:middle!important;}
.wg-theme #topnav .navigation-menu .submenu li a i,
.wg-theme #topnav .topnav-menu .submenu li a i{line-height:1!important;vertical-align:middle!important;}

/* La regla que controla el espaciado vive en soe.css EN EL <li> (.submenu li{padding}),
   y el <a> está forzado a padding:0!important — por eso los overrides al <a> no se veían.
   Pasamos el padding al <a> (que ya tiene 8px 12px y gana por especificidad), dejamos el
   <li> en 0, y matamos el hover gris del <li> para que mande el verde del <a>. */
.wg-theme #topnav .navigation-menu .submenu li,
.wg-theme #topnav .topnav-menu .submenu li{padding:0!important;}
.wg-theme #topnav .navigation-menu .submenu li:hover,
.wg-theme #topnav .navigation-menu .submenu li.active,
.wg-theme #topnav .topnav-menu .submenu li:hover,
.wg-theme #topnav .topnav-menu .submenu li.active{background:transparent!important;}
/* Asegurar que el <a> gane el padding pese al soe.css a{padding:0!important} */
.wg-theme #topnav .navigation-menu .submenu li a,
.wg-theme #topnav .topnav-menu .submenu li a{padding:8px 12px!important;}

/* 4px de separación entre items de TODOS los submenús (pestañas + menú superior) */
.wg-theme .menu_callcenter .menu_principal ul.sub-menu li + li,
.wg-theme #topnav .navigation-menu .submenu li + li,
.wg-theme #topnav .topnav-menu .submenu li + li{margin-top:4px!important;}

/* ============================================================
   FICHA · SWITCHES — color por SALUD (perilla y forma NATIVAS del tema)
   Decisión acordada: NO se toca la perilla ni las medidas del plugin.
   Solo se cambia el FONDO (relleno) de cada mitad on/off según la
   salud del campo. Agnóstico al tema (apunta por prefijo de id).
   ============================================================ */

/* Verde — activo / permitido */
.wg-theme div[id^="acount_act_login-"] .toggle-on,
.wg-theme div[id^="play_casino-"] .toggle-on,
.wg-theme div[id^="Play_inplay-"] .toggle-on,
.wg-theme div[id^="play_prematch-"] .toggle-on{background:none!important;background-color:#2f9e6b!important;color:#fff!important;}

/* Rojo — bloqueo / restricción crítica */
.wg-theme div[id^="block-"] .toggle-on,
.wg-theme div[id^="acount_close-"] .toggle-on,
.wg-theme div[id^="login_dis-"] .toggle-on,
.wg-theme div[id^="pin_code_locked-"] .toggle-on,
.wg-theme div[id^="acount_act_login-"] .toggle-off{background:none!important;background-color:#dc2626!important;color:#fff!important;}

/* Ámbar — excepción a vigilar */
.wg-theme div[id^="test_player-"] .toggle-on{background:none!important;background-color:#f59e0b!important;color:#7a3e00!important;}

/* Gris — sano / neutro (lado bueno de cada campo) */
.wg-theme div[id^="block-"] .toggle-off,
.wg-theme div[id^="acount_close-"] .toggle-off,
.wg-theme div[id^="login_dis-"] .toggle-off,
.wg-theme div[id^="pin_code_locked-"] .toggle-off,
.wg-theme div[id^="test_player-"] .toggle-off,
.wg-theme div[id^="play_casino-"] .toggle-off,
.wg-theme div[id^="Play_inplay-"] .toggle-off,
.wg-theme div[id^="play_prematch-"] .toggle-off,
.wg-theme div[id^="tp_allow_trans-"] .toggle-on,
.wg-theme div[id^="tp_allow_trans-"] .toggle-off{background:none!important;background-color:#cbd5e1!important;color:#475569!important;}

/* --- Alineación: toggle anclado a la derecha; el spinner sale a su IZQUIERDA --- */
/* direction:rtl invierte el orden visual de los 2 hijos (toggle, spinner) sin tocar */
/* el markup ni romper el table-cell: el toggle queda fijo a la derecha y el spinner */
/* crece hacia la izquierda, así el switch no se mueve al interactuar. */
.wg-theme table.busq_group td:has(> .max-widht-50){direction:rtl;text-align:right;white-space:nowrap;}
.wg-theme table.busq_group td > .max-widht-50{float:none!important;display:inline-block;vertical-align:middle;direction:ltr;}
.wg-theme table.busq_group td > .spin-player{float:none!important;display:inline-block;vertical-align:middle;direction:ltr;margin-right:6px;}

/* --- Tinte de renglón cuando el estado de atención está ACTIVO --- */
.wg-theme table.busq_group tr.wg-alert-red > td{background-color:var(--wg-danger-50)!important;}
.wg-theme table.busq_group tr.wg-alert-red > td:first-child{box-shadow:inset 3px 0 0 var(--wg-danger);}
.wg-theme table.busq_group tr.wg-alert-amber > td{background-color:var(--wg-warning-50)!important;}
.wg-theme table.busq_group tr.wg-alert-amber > td:first-child{box-shadow:inset 3px 0 0 #d97706;}

/* --- Leyenda de colores de la tarjeta de Acceso --- */
.wg-theme .wg-acc-legend{display:flex;flex-wrap:wrap;gap:10px 14px;padding:4px 4px 10px;font-size:11px;color:var(--wg-text-2);}
.wg-theme .wg-acc-legend span{display:inline-flex;align-items:center;gap:5px;}
.wg-theme .wg-acc-legend .wg-dot{width:9px;height:9px;border-radius:50%;display:inline-block;}

/* --- Ícono de info en etiquetas (paréntesis movidos a tooltip) --- */
.wg-theme .wg-info{color:var(--wg-text-3);font-size:12px;cursor:help;margin-left:2px;}
.wg-theme .wg-info:hover{color:var(--wg-text-2);}

/* ============================================================
   FICHA · BONOS — color por salud (perilla/forma nativas)
   no_bonus (Bloquear bonos): on=ámbar (restricción) · bonus_seeker: on=azul (info)
   ============================================================ */
/* Ámbar — restricción activa */
.wg-theme div[id^="no_bonus-"] .toggle-on{background:none!important;background-color:#f59e0b!important;color:#7a3e00!important;}
/* Azul info — bandera informativa */
.wg-theme div[id^="bonus_seeker-"] .toggle-on{background:none!important;background-color:#2563eb!important;color:#fff!important;}
/* Gris — neutro */
.wg-theme div[id^="no_bonus-"] .toggle-off,
.wg-theme div[id^="bonus_seeker-"] .toggle-off{background:none!important;background-color:#cbd5e1!important;color:#475569!important;}

/* ============================================================
   FICHA · DATOS PERSONALES — color por salud (perilla/forma nativas)
   ver_edad (Edad verificada): on=verde (verificada / sano) ·
   off=ámbar (sin verificar / a vigilar; sincroniza con el badge de Edad).
   ============================================================ */
.wg-theme div[id^="ver_edad-"] .toggle-on{background:none!important;background-color:#2f9e6b!important;color:#fff!important;}
.wg-theme div[id^="ver_edad-"] .toggle-off{background:none!important;background-color:#cbd5e1!important;color:#475569!important;}

/* Celda de Usuario: valor a la izquierda, acciones (editar/guardar/cancelar) ancladas
   a la derecha. flex-wrap deja que en anchos chicos el grupo de botones caiga a 2ª fila
   (derecha) sin romper. NO !important en display (save/cancel se togglean por JS). */
.wg-theme .wg-user-cell{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;}
.wg-theme .wg-user-cell > input{flex:1 1 auto;min-width:0;width:auto!important;}
.wg-theme .wg-user-cell > .wg-user-actions{margin-left:auto;display:inline-flex;gap:6px;align-self:flex-start;}

/* ============================================================
   FICHA · INFORMACIÓN DE JUEGO — matriz de montos (#tabla_game_act-*)
   Banda de título con el segmentado Real/Bono/Total a la derecha, fila de
   columnas ligera, montos a la derecha con cifras tabulares, rojo calmado
   para negativos, y separador suave entre bloques (clase wg-sep).
   Scope al id de la tabla para NO tocar otras tarjetas (p.ej. Bonos usa td_montos).
   ============================================================ */
/* Banda de título: el th conserva su colspan (NO flexar el th); flexamos un div interno
   a 100% para alinear el segmentado a la derecha. */
.wg-theme [id^="tabla_game_act-"] .wg-juego-head{padding:6px 10px!important;}
.wg-theme [id^="tabla_game_act-"] .wg-juego-bar{display:flex;align-items:center;width:100%;}
.wg-theme [id^="tabla_game_act-"] .wg-juego-title{display:inline-flex;align-items:center;}
.wg-theme [id^="tabla_game_act-"] .wg-juego-title > i{margin-right:7px;color:var(--wg-text-2);font-size:12px;}
.wg-theme [id^="tabla_game_act-"] .wg-juego-bar .wg-seg{margin:0 0 0 auto!important;}

/* Fila de columnas (Casino/Previas/…): sub-encabezado ligero, no una 2ª banda gris */
.wg-theme [id^="tabla_game_act-"] thead tr.wg-juego-cols th{background:var(--wg-surface)!important;color:var(--wg-text-2)!important;font-weight:600!important;font-size:11px!important;border-bottom:1px solid var(--wg-border)!important;padding:7px 10px!important;text-align:right!important;position:static!important;}
.wg-theme [id^="tabla_game_act-"] thead tr.wg-juego-cols th:first-child{text-align:left!important;}

/* Montos: a la derecha, cifras tabulares; la etiqueta de la 1ª col queda a la izq. */
.wg-theme [id^="tabla_game_act-"] td.td_montos{text-align:right!important;font-variant-numeric:tabular-nums;white-space:nowrap;}
/* Negativos (clase .red del archivo de datos): rojo calmado, solo texto */
.wg-theme [id^="tabla_game_act-"] td.td_montos.red{color:var(--wg-danger)!important;font-weight:600!important;}

/* Separador entre bloques (Win / % Win): línea de token en vez del 2px #D0D0D0 inline */
.wg-theme [id^="tabla_game_act-"] tr.wg-sep > td{border-top:1px solid var(--wg-border-2)!important;}

/* Control segmentado Real/Bono/Total (.wg-seg): patrón "riel + pastilla".
   El riel lleva el marco y un padding interno; cada segmento es una pastilla
   redondeada de tamaño IDÉNTICO. El activo solo se pinta de azul DENTRO del riel,
   sin tocar el marco, así no se ve más grande que los inactivos. */
.wg-theme [id^="tabla_game_act-"] .wg-seg{display:inline-flex;align-items:center;gap:2px;padding:2px;background:var(--wg-surface-2)!important;border:1px solid var(--wg-border-2)!important;border-radius:var(--wg-radius)!important;box-shadow:none!important;}
.wg-theme [id^="tabla_game_act-"] .wg-seg > .btn{box-sizing:border-box!important;height:24px!important;min-height:0!important;flex:0 0 auto!important;padding:0 12px!important;display:inline-flex;align-items:center;justify-content:center;font-size:12px!important;font-weight:500!important;line-height:1!important;background:transparent!important;color:var(--wg-text-2)!important;border:0!important;border-radius:6px!important;box-shadow:none!important;margin:0!important;}
.wg-theme [id^="tabla_game_act-"] .wg-seg > .btn:hover{background:var(--wg-hover)!important;color:var(--wg-text)!important;}
.wg-theme [id^="tabla_game_act-"] .wg-seg > .btn.active{background:var(--wg-info)!important;color:#fff!important;}
/* Oculta el radio nativo sin romper el toggle de Bootstrap ni el change que recarga */
.wg-theme [id^="tabla_game_act-"] .wg-seg > .btn > input[type="radio"]{position:absolute!important;opacity:0;width:0;height:0;margin:0;pointer-events:none;}

/* Tinte de renglón azul (info) — reutilizable */
.wg-theme table.busq_group tr.wg-alert-info > td{background-color:var(--wg-info-50)!important;}
.wg-theme table.busq_group tr.wg-alert-info > td:first-child{box-shadow:inset 3px 0 0 var(--wg-info);}

/* ============================================================
   ENCABEZADOS DE GRUPO (.titulo_cont) — más presencia + ícono
   Banda gris con líneas + texto oscuro/negrita + ícono neutro a la izq.
   Global: mejora todas las tarjetas. El ícono se agrega por markup.
   ============================================================ */
.wg-theme .titulo_cont{
  font-weight:600!important;
  color:#0f172a!important;
  background:var(--wg-surface-2)!important;
  border-top:1px solid var(--wg-border)!important;
  border-bottom:1px solid var(--wg-border)!important;
  padding:7px 10px!important;
}
.wg-theme .titulo_cont > i{margin-right:7px;color:var(--wg-text-2);font-size:12px;}

/* ============================================================
   PÍLDORAS DE ESTADO (.wg-pill) — reusables en valores de tabla
   Para Tipo/Estatus y otros estados read-only. Calmado.
   ============================================================ */
.wg-theme .wg-pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px!important;font-weight:600!important;line-height:1.5;}
.wg-theme .wg-pill-ok{background:var(--wg-brand-50)!important;color:var(--wg-brand-700)!important;}
.wg-theme .wg-pill-muted{background:#eef1f5!important;color:var(--wg-text-2)!important;}
.wg-theme .wg-pill-vip{background:var(--wg-warning-50)!important;color:var(--wg-warning)!important;}

/* ============================================================
   ACCIÓN "EDITAR" (lápiz) → azulejo azul info suave. ESTÁNDAR GLOBAL.
   Se detecta por el ícono fa-edit / fa-pencil(-alt) dentro de un
   btn-primary, para NO tocar el toggle "Filtros" (también btn-primary,
   pero con caret). Mismo look que el soft-blue de la barra de jugador.
   ============================================================ */
.wg-theme .btn-primary:has(> i.fa-edit),
.wg-theme .btn-primary:has(> i.fa-pencil-alt),
.wg-theme .btn-primary:has(> i.fa-pencil){
  background:var(--wg-info-50)!important;border:1px solid #bcd0f5!important;color:var(--wg-info)!important;
}
.wg-theme .btn-primary:has(> i.fa-edit):hover,
.wg-theme .btn-primary:has(> i.fa-pencil-alt):hover,
.wg-theme .btn-primary:has(> i.fa-pencil):hover{
  background:#dce8fd!important;border-color:var(--wg-info)!important;color:var(--wg-info)!important;filter:none!important;
}

/* ============================================================
   DATE RANGE PICKER (bootstrap-daterangepicker) — popup inyectado al body.
   Acotado a .daterangepicker (va global, como el datepicker de jQuery UI).
   Botones con especificidad extra para ganarle a las reglas globales de .btn.
   ============================================================ */
.daterangepicker{background:var(--wg-surface)!important;border:1px solid var(--wg-border)!important;border-radius:var(--wg-radius-lg)!important;box-shadow:var(--wg-shadow-pop)!important;font-family:inherit!important;color:var(--wg-text)!important;}
.daterangepicker:before,.daterangepicker:after{display:none!important;} /* sin flechita */

/* Inputs superiores (.input-mini) */
.daterangepicker .input-mini{border:1px solid var(--wg-border-2)!important;border-radius:var(--wg-radius)!important;height:32px!important;color:var(--wg-text)!important;font-size:12.5px!important;}
.daterangepicker .input-mini.active{border-color:var(--wg-info)!important;background:var(--wg-info-50)!important;}
.daterangepicker .daterangepicker_input i,.daterangepicker .drp-calendar .calendar-time i{color:var(--wg-text-3)!important;}

/* Calendarios */
.daterangepicker .calendar-table{background:var(--wg-surface)!important;border:0!important;border-radius:var(--wg-radius)!important;}
.daterangepicker th,.daterangepicker td{font-size:12px!important;border-radius:6px;}
.daterangepicker thead th{color:var(--wg-text-2)!important;font-weight:600!important;}
.daterangepicker th.month{font-weight:600!important;color:var(--wg-text)!important;}
.daterangepicker th.week,.daterangepicker td.week{color:var(--wg-text-3)!important;font-weight:500!important;}
.daterangepicker td.available:hover,.daterangepicker th.available:hover{background:var(--wg-info-50)!important;color:var(--wg-info-700)!important;}
.daterangepicker td.off,.daterangepicker td.off.in-range,.daterangepicker td.off.start-date,.daterangepicker td.off.end-date{color:var(--wg-text-3)!important;background:var(--wg-surface)!important;}
.daterangepicker td.in-range{background:var(--wg-info-50)!important;color:var(--wg-info-700)!important;border-radius:0!important;}
.daterangepicker td.active,.daterangepicker td.active:hover,.daterangepicker td.start-date,.daterangepicker td.end-date{background:var(--wg-info)!important;color:#fff!important;}
.daterangepicker td.start-date{border-radius:6px 0 0 6px!important;}
.daterangepicker td.end-date{border-radius:0 6px 6px 0!important;}
.daterangepicker td.start-date.end-date{border-radius:6px!important;}
.daterangepicker td.today,.daterangepicker td.today.available{box-shadow:inset 0 0 0 1px var(--wg-brand)!important;}
.daterangepicker td.disabled,.daterangepicker option.disabled{color:var(--wg-text-3)!important;text-decoration:line-through;}

/* Selects de mes/año y flechas prev/next */
.daterangepicker select.monthselect,.daterangepicker select.yearselect,.daterangepicker select.hourselect,.daterangepicker select.minuteselect,.daterangepicker select.secondselect,.daterangepicker select.ampmselect{border:1px solid var(--wg-border-2)!important;border-radius:6px!important;height:28px!important;font-size:12px!important;color:var(--wg-text)!important;background:var(--wg-surface)!important;padding:0 6px!important;}
.daterangepicker .prev span,.daterangepicker .next span{border-color:var(--wg-text-2)!important;}
.daterangepicker .prev:hover,.daterangepicker .next:hover{background:var(--wg-surface-2)!important;border-radius:6px!important;}

/* Panel de rangos (Hoy / Ayer / … / Personalizado) */
.daterangepicker .ranges{margin-top:0!important;}
.daterangepicker .ranges ul{padding:6px!important;width:auto!important;min-width:150px;}
.daterangepicker .ranges li{color:var(--wg-text-2)!important;font-size:12.5px!important;padding:8px 12px!important;border-radius:var(--wg-radius)!important;border:0!important;margin-bottom:2px;transition:background .12s,color .12s,box-shadow .12s;}
.daterangepicker .ranges li:hover{background:var(--wg-hover)!important;color:var(--wg-text)!important;}
.daterangepicker .ranges li.active{background:var(--wg-info)!important;color:#fff!important;}

/* Botones inferiores: Aplicar (Enviar)=azul sólido, Cancelar=neutro.
   Selectores con .btn + contenedor para ganarle a .wg-theme .btn-primary/.btn-success. */
.daterangepicker .drp-buttons,.daterangepicker .range_inputs{border-top:1px solid var(--wg-border)!important;padding:8px 10px!important;}
.daterangepicker .drp-selected{color:var(--wg-text-2)!important;font-size:12px!important;}
.daterangepicker .drp-buttons .btn,.daterangepicker .range_inputs .btn{height:32px!important;border-radius:var(--wg-radius)!important;font-size:12.5px!important;padding:0 16px!important;box-shadow:none!important;background-image:none!important;}
.daterangepicker .drp-buttons .btn.applyBtn,.daterangepicker .range_inputs .btn.applyBtn{background:var(--wg-info)!important;border:1px solid var(--wg-info)!important;color:#fff!important;}
.daterangepicker .drp-buttons .btn.applyBtn:hover,.daterangepicker .range_inputs .btn.applyBtn:hover{background:var(--wg-info-700)!important;border-color:var(--wg-info-700)!important;}
.daterangepicker .drp-buttons .btn.cancelBtn,.daterangepicker .range_inputs .btn.cancelBtn{background:var(--wg-surface)!important;border:1px solid var(--wg-border-2)!important;color:var(--wg-text-2)!important;}
.daterangepicker .drp-buttons .btn.cancelBtn:hover,.daterangepicker .range_inputs .btn.cancelBtn:hover{background:var(--wg-surface-2)!important;color:var(--wg-text)!important;}

/* ============================================================
   CAJA DISPARADORA DEL PICKER (#reportrange-*) — el botón con la fecha
   que abre el daterangepicker. Estilo input/control del sistema.
   ============================================================ */
.wg-theme [id^="reportrange-"]{display:inline-flex!important;align-items:center;gap:8px;min-height:34px;padding:0 12px!important;background:var(--wg-surface)!important;border:1px solid var(--wg-border-2)!important;border-radius:var(--wg-radius)!important;color:var(--wg-text)!important;font-size:12.5px!important;cursor:pointer;box-shadow:none!important;white-space:nowrap;transition:background .12s,border-color .12s;}
.wg-theme [id^="reportrange-"]:hover{background:var(--wg-hover)!important;border-color:var(--wg-text-3)!important;}
.wg-theme [id^="reportrange-"] > i,.wg-theme [id^="reportrange-"] > .fa,.wg-theme [id^="reportrange-"] i.fa{color:var(--wg-text-2)!important;}
.wg-theme [id^="reportrange-"] span{color:var(--wg-text)!important;font-weight:500;}
.wg-theme [id^="reportrange-"] .caret,.wg-theme [id^="reportrange-"] b.caret{color:var(--wg-text-3)!important;}

/* ============================================================
   FICHA · DATOS FINANCIEROS — toggles por salud, filas resaltadas,
   badge calmado y botones "Validar". Toggles por prefijo de id (agnósticos
   al tema); el resto scopeado a #tabla_financial-* para no tocar otras vistas.
   ============================================================ */
/* Toggles dep_allow / wd_allow: on=verde, off=ROJO (permiso crítico).
   OJO: [id^="wd_allow-"] NO matchea wd_allow_no_bets- (lleva "_", no "-"). */
.wg-theme div[id^="dep_allow-"] .toggle-on,
.wg-theme div[id^="wd_allow-"] .toggle-on{background:none!important;background-color:#2f9e6b!important;color:#fff!important;}
.wg-theme div[id^="dep_allow-"] .toggle-off,
.wg-theme div[id^="wd_allow-"] .toggle-off{background:none!important;background-color:#dc2626!important;color:#fff!important;}
.wg-theme div[id^="wd_allow_no_bets-"] .toggle-on{background:none!important;background-color:#f59e0b!important;color:#7a3e00!important;}
.wg-theme div[id^="wd_allow_no_bets-"] .toggle-off{background:none!important;background-color:#cbd5e1!important;color:#475569!important;}
/* Banderas wd_allow_no_bets / susp_no_trans_allow: on=ÁMBAR, off=gris */
.wg-theme div[id^="wd_allow_no_bets-"] .toggle-on,
.wg-theme div[id^="susp_no_trans_allow-"] .toggle-on{background:none!important;background-color:#f59e0b!important;color:#7a3e00!important;}
.wg-theme div[id^="wd_allow_no_bets-"] .toggle-off,
.wg-theme div[id^="susp_no_trans_allow-"] .toggle-off{background:none!important;background-color:#cbd5e1!important;color:#475569!important;}

/* Filas resaltadas: promedios=info, pendientes=ámbar. Tinte calmado, sin barra.
   !important para vencer al zebra (más específico pero sin !important). */
.wg-theme [id^="tabla_financial-"] tr.wg-hl-info > td{background-color:var(--wg-info-50)!important;color:var(--wg-info-700)!important;}
.wg-theme [id^="tabla_financial-"] tr.wg-hl-warn > td{background-color:var(--wg-warning-50)!important;color:var(--wg-warning)!important;}

/* Fila neta (Depósitos - Retiros): separador superior; el bold viene por clase */
.wg-theme [id^="tabla_financial-"] tr.wg-fin-net > td{border-top:1px solid var(--wg-border-2)!important;}

/* Badge calculado (label-success/warning): píldora calmada, sin text-white */
.wg-theme [id^="tabla_financial-"] .label{display:inline-block;border-radius:var(--wg-radius-pill)!important;font-size:11px!important;font-weight:600!important;padding:2px 9px!important;text-shadow:none!important;}
.wg-theme [id^="tabla_financial-"] .label.label-success{background:var(--wg-brand-50)!important;color:var(--wg-brand-700)!important;}
.wg-theme [id^="tabla_financial-"] .label.label-warning{background:var(--wg-warning-50)!important;color:var(--wg-warning)!important;}

/* Botones "Validar": azul de acción, ancho completo. Especificidad (0,4,0) para
   ganarle a :is(li,td) .btn-xs (0,3,1) y a .btn-primary:not(.button_table) (0,3,0). */
.wg-theme [id^="btn_mp_valida-"].btn.btn-primary,
.wg-theme [id^="btn_mr_valida-"].btn.btn-primary{width:100%!important;height:32px!important;min-width:0!important;padding:0 12px!important;display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--wg-radius)!important;font-size:12.5px!important;font-weight:500!important;background:var(--wg-info)!important;border:1px solid var(--wg-info)!important;color:#fff!important;box-shadow:none!important;}
.wg-theme [id^="btn_mp_valida-"].btn.btn-primary:hover,
.wg-theme [id^="btn_mr_valida-"].btn.btn-primary:hover{background:var(--wg-info-700)!important;border-color:var(--wg-info-700)!important;}
.wg-theme [id^="btn_mp_valida-"].btn.btn-primary > i,
.wg-theme [id^="btn_mr_valida-"].btn.btn-primary > i{margin:0 4px 0 0!important;}

/* FIX: en hover de fila, el azulejo blanco global (tr:hover td .btn-xs:has(>i))
   pisa el fondo del Validar y, como su texto es blanco, desaparece. Lo re-forzamos
   a azul. Especificidad (0,7,3) para ganarle a esa regla (0,6,3). */
.wg-theme .table tbody tr:hover td [id^="btn_mp_valida-"].btn-primary.btn-xs,
.wg-theme .table tbody tr:hover td [id^="btn_mr_valida-"].btn-primary.btn-xs{background:var(--wg-info)!important;border:1px solid var(--wg-info)!important;color:#fff!important;}
.wg-theme .table tbody tr:hover td [id^="btn_mp_valida-"].btn-primary.btn-xs:hover,
.wg-theme .table tbody tr:hover td [id^="btn_mr_valida-"].btn-primary.btn-xs:hover{background:var(--wg-info-700)!important;border-color:var(--wg-info-700)!important;}

/* ============================================================
   FICHA · MÉTODOS DE CONTACTO — rejilla de toggles + verificación 3 estados.
   Toggles por CLASE DE FAMILIA (un solo par de reglas para los 11). El resto
   scopeado a #tabla_contact-* / .contact-verfif.
   ============================================================ */
/* Toggles de contacto (todos de habilitación): on=verde, off=gris */
.wg-theme div[class*="contact-methods-toggle-"] .toggle-on{background:none!important;background-color:#2f9e6b!important;color:#fff!important;}
.wg-theme div[class*="contact-methods-toggle-"] .toggle-off{background:none!important;background-color:#cbd5e1!important;color:#475569!important;}

/* Fila de columnas de la rejilla: sub-encabezado ligero (no 2ª banda gris) */
.wg-theme [id^="tabla_contact-"] thead tr.wg-contact-cols th{background:var(--wg-surface)!important;color:var(--wg-text-2)!important;font-weight:600!important;font-size:11px!important;border-bottom:1px solid var(--wg-border)!important;padding:7px 8px!important;text-align:center!important;position:static!important;}
.wg-theme [id^="tabla_contact-"] thead tr.wg-contact-cols th:nth-child(2){text-align:left!important;}

/* Toggles de la rejilla CENTRADOS en su columna (el resto del skin los manda a la
   derecha; aquí son contenido de columna). Especificidad (0,4,2) para ganarle a la
   regla global de alineación de toggles (0,3,2). El direction:rtl (spinner a la izq) se conserva. */
.wg-theme table.busq_group[id^="tabla_contact-"] td:has(> .max-widht-50){text-align:center!important;}

/* Radio de método preferido: acento verde de marca */
.wg-theme [id^="tabla_contact-"] input[type="radio"]{accent-color:var(--wg-brand);width:15px;height:15px;cursor:pointer;}

/* Verificación 3 estados (íconos): calmado. verde=verificada, ámbar=no verif., rojo=no válida */
.wg-theme .contact-verfif{white-space:nowrap;}
.wg-theme .contact-verfif > i{font-size:15px;vertical-align:middle;margin-right:3px;}
.wg-theme .contact-verfif .green{color:var(--wg-brand)!important;}
.wg-theme .contact-verfif .orange{color:#d97706!important;}
.wg-theme .contact-verfif .red{color:var(--wg-danger)!important;}

/* Leyenda de verificación (reusa wg-acc-legend): un respiro arriba */
.wg-theme .wg-contact-legend{padding-top:10px;}

/* ============================================================
   ENCABEZADO DEL JUGADOR — v7.4 fase 1 (fusionado al final del skin)
   ============================================================ */
/* ============================================================================
   WARPER · Encabezado del jugador — v2 fase 1
   Hoja independiente. Cargar DESPUÉS de warper-skin.css.
   Usa los tokens del proyecto con respaldo: var(--wg-x, #fallback).
   Todo scopeado a .wg-theme para no filtrar a otras pantallas.
   ============================================================================ */

/* ---- Contenedor ---- */
.wg-theme .wg-ph{
    background: var(--wg-surface, #ffffff);
    border: 1px solid var(--wg-border, #e3e7ee);
    border-radius: var(--wg-radius-lg, 12px);
    padding: 12px;
    display: block;
    margin: 0 0 8px 0;
}
/* El CSS legado escopa #contenedor.content-player .row.player a nivel id y le gana al
   padding del contenedor → los tiles quedaban pegados a la izquierda/abajo.
   Forzamos la separación estándar del sitio (12px) con la misma ancla por id. */
.wg-theme #contenedor.content-player .row.player.wg-ph{ display:block !important; padding:12px !important; margin:0 0 8px 0 !important; }

/* ===== Tier 1: saldo (izq) + identidad + acciones ===== */
.wg-theme .wg-ph-top{ display:flex; gap:14px; flex-wrap:wrap; align-items:stretch; }
.wg-theme .wg-ph-saldo{
    flex:2 1 520px; width:auto; background:transparent; order:2;
    border-radius:0; padding:0; display:flex; flex-direction:column; min-width:0;
}
.wg-theme .wg-ph-saldo-head{ display:flex; justify-content:flex-end; align-items:center; gap:8px; }
.wg-theme .wg-ph-saldo .wg-saldo-fix{ align-self:flex-start; }
.wg-theme .wg-ph-saldo-head .wg-saldo-actions{ margin-top:0; }
.wg-theme .wg-bcards{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; justify-content:flex-end; }
.wg-theme .wg-bcard{ display:flex; align-items:center; gap:9px; background:var(--wg-surface,#fff); border:1px solid var(--wg-border,#e3e7ee); border-radius:10px; padding:8px 14px; min-width:150px; }
.wg-theme .wg-bcard--total{ border-color:var(--wg-brand,#2f9e6b); background:var(--wg-brand-50,#e7f4ee); }
.wg-theme .wg-bcard-ic{ width:28px; height:28px; flex:none; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; }
.wg-theme .wg-bcard-ic--g{ background:var(--wg-brand-50,#e7f4ee); color:var(--wg-brand-700,#1d7a52); }
.wg-theme .wg-bcard-ic--p{ background:#eee9fb; color:#534ab7; }
.wg-theme .wg-bcard-ic--b{ background:var(--wg-info-50,#e7eefc); color:var(--wg-info,#2563eb); }
.wg-theme .wg-bcard-ic--t{ background:var(--wg-brand,#2f9e6b); color:#fff; }
.wg-theme .wg-bcard-txt{ min-width:0; display:flex; flex-direction:column; }
.wg-theme .wg-bcard-lbl{ font-size:10px; color:var(--wg-text-3,#6b7280); text-transform:uppercase; letter-spacing:.03em; line-height:1.25; white-space:nowrap; }
.wg-theme .wg-bcard-v{ font-size:15px; font-weight:600; color:var(--wg-text,#1f2430); font-variant-numeric:tabular-nums; line-height:1.2; white-space:nowrap; }
.wg-theme .wg-bcard-v small{ font-size:9.5px; color:var(--wg-text-3,#6b7280); font-weight:400; }
.wg-theme .wg-ph-main{ flex:1; min-width:300px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:flex-start; }
.wg-theme .wg-ph-id{ display:flex; gap:12px; align-items:flex-start; flex:1; min-width:240px; order:1; }
.wg-theme .wg-ph-avatar{
    position:relative; width:46px; height:46px; flex:none; border-radius:50%;
    background:var(--wg-surface-2, #eef1f5); display:flex; align-items:center; justify-content:center;
    color:var(--wg-text-3, #6b7280);
}
.wg-theme .wg-ph-avatar > i{ font-size:22px; }
.wg-theme .wg-ph-dot{
    position:absolute; right:0; bottom:0; width:11px; height:11px; border-radius:50%;
    background:var(--wg-brand, #2f9e6b); border:2px solid var(--wg-surface, #ffffff);
}
.wg-theme .wg-ph-name{ font-weight:600; font-size:15px; line-height:1.25; color:var(--wg-text, #1f2430); }
.wg-theme .wg-ph-ud{ font-size:12px; color:var(--wg-text-2, #4b5563); margin-top:2px; }
.wg-theme .wg-ph-badges{ display:flex; gap:6px; margin-top:9px; flex-wrap:wrap; }

/* badges de identidad (Activa / Clase / Riesgo / Tipo) */
.wg-theme .wg-flag,
.wg-theme .wg-ph-badges .badge{
    display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:500;
    padding:3px 9px; border:0; border-radius:var(--wg-radius, 8px); line-height:1.5; white-space:nowrap;
}
.wg-theme .wg-flag i, .wg-theme .wg-ph-badges .badge i{ font-size:12px; }
.wg-theme .wg-flag-neutral{ background:var(--wg-surface-2, #eef1f5); color:var(--wg-text-2, #4b5563); }
.wg-theme .wg-ph-badges .badge-success{ background:var(--wg-brand-50, #e7f4ee); color:var(--wg-brand-700, #1d7a52); }
.wg-theme .wg-ph-badges .badge-warning{ background:var(--wg-warning-50, #fbf0dc); color:var(--wg-warning, #b45309); }
.wg-theme .wg-ph-badges .badge-important,
.wg-theme .wg-ph-badges .badge-danger{ background:var(--wg-danger-50, #fdecec); color:var(--wg-danger, #dc2626); }

/* botones de acción */
.wg-theme .wg-ph-actions{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; align-items:flex-start; }
.wg-theme .wg-act{
    font-size:11.5px; font-weight:500; padding:6px 11px; border-radius:var(--wg-radius, 8px);
    display:inline-flex; align-items:center; gap:5px; white-space:nowrap; cursor:pointer; line-height:1.2;
    border:1px solid transparent;
}
.wg-theme .wg-act i{ font-size:13px; }
.wg-theme .wg-act-primary{ background:var(--wg-brand, #2f9e6b); color:#fff; border-color:var(--wg-brand, #2f9e6b); }
.wg-theme .wg-act-primary:hover{ filter:brightness(.96); }
.wg-theme .wg-act-info{ background:var(--wg-info-50, #e7eefc); color:var(--wg-info, #2563eb); border-color:var(--wg-info-200, #c7d7f7); }
.wg-theme .wg-act-info:hover{ filter:brightness(.97); }
.wg-theme .wg-act-ghost{ background:transparent; color:var(--wg-text-2, #4b5563); border-color:var(--wg-border, #d7dce5); }
.wg-theme .wg-act-ghost:hover{ background:var(--wg-hover, #e3e9f2); }
.wg-theme .wg-act-danger{ background:transparent; color:var(--wg-danger, #dc2626); border-color:var(--wg-danger-200, #f0c2c2); }
.wg-theme .wg-act-danger:hover{ background:var(--wg-danger-50, #fdecec); }
.wg-theme .wg-act[disabled]{ opacity:.5; }
.wg-theme .wg-act-count{
    background:var(--wg-surface-2, #eef1f5); color:var(--wg-text-3, #6b7280);
    border-radius:var(--wg-radius-pill, 999px); padding:0 6px; font-size:10px; margin-left:3px;
}

/* ===== Tier 2: barra de banderas + leyenda ===== */
.wg-theme .wg-ph-flags-row{
    display:flex; justify-content:flex-start; gap:8px; flex-wrap:wrap; align-items:center;
    margin-top:13px; padding-top:13px; border-top:1px solid var(--wg-border, #e3e7ee);
}
.wg-theme .wg-ph-flags-label{ font-size:10px; color:var(--wg-text-3, #6b7280); }
.wg-theme .wg-ph-flags{ font-size:0; line-height:0; }   /* mata el espacio en blanco entre badges para los grupos segmentados */
.wg-theme .wg-ph-flags .badge{
    display:inline-block; vertical-align:middle; font-size:11px; line-height:1.6; font-weight:500;
    padding:3px 9px; margin:3px; border:0; border-radius:var(--wg-radius-pill, 999px);
}
.wg-theme .wg-ph-flags .badge i{ font-size:inherit; }
/* grupos segmentados (Depósitos·0, Retiros·0, Bonos·lupa·check) — unir sin huecos */
.wg-theme .wg-ph-flags .badge-left{ margin-right:0; border-top-right-radius:0; border-bottom-right-radius:0; }
.wg-theme .wg-ph-flags .badge-center{ margin-left:0; margin-right:0; border-radius:0; }
.wg-theme .wg-ph-flags .badge-right{ margin-left:0; border-top-left-radius:0; border-bottom-left-radius:0; }
/* tintes calmados: solo Edad/KYC/problemas "encienden" */
.wg-theme .wg-ph-flags .badge-success{ background:var(--wg-brand-50, #e7f4ee); color:var(--wg-brand-700, #1d7a52); }
.wg-theme .wg-ph-flags .badge-important,
.wg-theme .wg-ph-flags .badge-danger{ background:var(--wg-danger-50, #fdecec); color:var(--wg-danger, #dc2626); }
.wg-theme .wg-ph-flags .badge-warning{ background:var(--wg-warning-50, #fbf0dc); color:var(--wg-warning, #b45309); }
.wg-theme .wg-ph-flags .badge-disabled{ background:var(--wg-surface-2, #eef1f5); color:var(--wg-text-3, #6b7280); }
.wg-theme .wg-ph-flags .badge-info{ background:var(--wg-info-50, #e7eefc); color:var(--wg-info, #2563eb); }

.wg-theme .wg-ph-legend{ display:flex; gap:10px; flex-wrap:wrap; }
.wg-theme .wg-ph-legend span{ font-size:10.5px; color:var(--wg-text-3, #6b7280); display:inline-flex; align-items:center; gap:5px; }
.wg-theme .wg-leg-dot{ width:7px; height:7px; border-radius:50%; display:inline-block; }
.wg-theme .wg-leg-ok{ background:var(--wg-brand, #2f9e6b); }
.wg-theme .wg-leg-warn{ background:var(--wg-warning, #b45309); }
.wg-theme .wg-leg-crit{ background:var(--wg-danger, #dc2626); }

/* ===== Tier 3: tiles de salud + tarjetas ===== */
.wg-theme .wg-ph-tiles{
    display:flex; gap:9px; flex-wrap:wrap; align-items:stretch;
    margin-top:12px; padding-top:12px; border-top:1px solid var(--wg-border, #e3e7ee);
}
.wg-theme .wg-tile{
    flex:0 1 168px; max-width:210px; background:var(--wg-surface-2, #f1f4f8);
    border-radius:var(--wg-radius, 8px); padding:10px 12px;
}
.wg-theme .wg-tile-lbl{ font-size:10px; color:var(--wg-text-3, #6b7280); display:flex; align-items:center; gap:5px; }
.wg-theme .wg-tile-val{ font-size:13px; font-weight:600; margin-top:3px; display:flex; align-items:center; gap:5px; color:var(--wg-text, #1f2430); }
.wg-theme .wg-tile-val > i{ font-size:14px; }
.wg-theme .wg-tile--ok .wg-tile-val > i{ color:var(--wg-brand, #2f9e6b); }
.wg-theme .wg-tile--neutral .wg-tile-val > i{ color:var(--wg-text-3, #6b7280); }
.wg-theme .wg-tile--warn{ background:var(--wg-warning-50, #fbf0dc); }
.wg-theme .wg-tile--warn .wg-tile-lbl{ color:var(--wg-warning, #b45309); opacity:.85; }
.wg-theme .wg-tile--warn .wg-tile-val{ color:var(--wg-warning, #b45309); }
.wg-theme .wg-tile--crit{ background:var(--wg-danger-50, #fdecec); }
.wg-theme .wg-tile--crit .wg-tile-lbl{ color:var(--wg-danger, #dc2626); opacity:.85; }
.wg-theme .wg-tile--crit .wg-tile-val{ color:var(--wg-danger, #dc2626); }

/* último acceso: respeta el badge que genera el modelo */
.wg-theme .wg-tile-lastvisit > i{ color:var(--wg-text-3, #6b7280); }
.wg-theme .wg-tile-lastvisit .badge{ font-size:12px; font-weight:600; padding:1px 8px; border:0; border-radius:var(--wg-radius-pill, 999px); }
.wg-theme .wg-tile-lastvisit .badge-success{ background:var(--wg-brand-50, #e7f4ee); color:var(--wg-brand-700, #1d7a52); }
.wg-theme .wg-tile-lastvisit .badge-info{ background:var(--wg-info-50, #e7eefc); color:var(--wg-info, #2563eb); }
.wg-theme .wg-tile-lastvisit .badge-warning{ background:var(--wg-warning-50, #fbf0dc); color:var(--wg-warning, #b45309); }
.wg-theme .wg-tile-lastvisit .badge-danger{ background:var(--wg-danger-50, #fdecec); color:var(--wg-danger, #dc2626); }

/* punto de venta */
.wg-theme .wg-tile-pdv .wg-tile-val{ word-break:break-word; }
.wg-theme .wg-tile-edit{
    width:20px; height:20px; padding:0; display:inline-flex; align-items:center; justify-content:center;
    font-size:11px; border-radius:6px; border:1px solid var(--wg-info-200, #c7d7f7);
    background:transparent; color:var(--wg-info, #2563eb); cursor:pointer; vertical-align:middle; margin-left:3px;
}
.wg-theme .wg-tile-edit-cancel{ border-color:var(--wg-danger-200, #f0c2c2); color:var(--wg-danger, #dc2626); }
.wg-theme .wg-tile-pdv .form-control.segment{ width:100%; }

/* tile de Sesión: en línea / desconectado + desloguear solo-icono */
.wg-theme .wg-tile-sesion-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:3px; }
.wg-theme .wg-online{ display:flex; align-items:center; gap:6px; margin-top:0; font-size:13px; font-weight:600; color:var(--wg-brand-700, #1d7a52); }
.wg-theme .wg-offline{ display:flex; align-items:center; gap:6px; margin-top:0; font-size:13px; font-weight:500; color:var(--wg-text-2, #4b5563); }
.wg-theme .wg-online-dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.wg-theme .wg-online .wg-online-dot{ background:var(--wg-brand, #2f9e6b); box-shadow:0 0 0 3px rgba(47,158,107,.20); }
.wg-theme .wg-offline .wg-online-dot{ background:var(--wg-text-3, #6b7280); opacity:.5; }
.wg-theme .wg-logout-ico{
    width:26px; height:26px; flex:none; padding:0; display:inline-flex; align-items:center; justify-content:center;
    border-radius:var(--wg-radius, 8px); background:transparent; color:var(--wg-danger, #dc2626);
    border:1px solid var(--wg-danger-200, #f0c2c2); cursor:pointer;
}
.wg-theme .wg-logout-ico:hover{ background:var(--wg-danger-50, #fdecec); }

/* saldo Sitio Web (neutro; el chip lleva el estado) */
.wg-theme .wg-tile-saldo{ flex:1.5; min-width:168px; }
.wg-theme .wg-tile-saldo-head{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.wg-theme .wg-tile-saldo-amount{ font-size:18px; font-weight:700; margin-top:3px; color:var(--wg-text, #1f2430); }
.wg-theme .wg-tile-saldo-amount small{ font-size:11px; color:var(--wg-text-3, #6b7280); font-weight:400; }
.wg-theme .wg-tile-saldo-sub{ font-size:11.5px; color:var(--wg-text-3, #6b7280); margin-top:2px; }
.wg-theme .wg-saldo-chip{
    display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600;
    padding:2px 8px; border-radius:var(--wg-radius-pill, 999px); white-space:nowrap;
}
.wg-theme .wg-saldo-chip i{ font-size:12px; }
.wg-theme .wg-saldo-chip--ok{ background:var(--wg-brand-50, #e7f4ee); color:var(--wg-brand-700, #1d7a52); }
.wg-theme .wg-saldo-chip--info{ background:var(--wg-info-50, #e7eefc); color:var(--wg-info, #2563eb); }
.wg-theme .wg-saldo-chip--warn{ background:var(--wg-warning-50, #fbf0dc); color:var(--wg-warning, #b45309); }
.wg-theme .wg-saldo-chip--crit{ background:var(--wg-danger-50, #fdecec); color:var(--wg-danger, #dc2626); }
.wg-theme .wg-saldo-fix{
    font-size:11px; font-weight:500; padding:5px 10px; display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
    border-radius:var(--wg-radius, 8px); background:var(--wg-info, #2563eb); border:1px solid var(--wg-info, #2563eb);
    color:#fff; cursor:pointer;
}
.wg-theme .wg-saldo-fix:hover{ filter:brightness(.96); }
.wg-theme .wg-saldo-fix i{ font-size:12px; }

/* tile informativo/en-proceso (azul) — KYC "En proceso", Bonos "Con bono activo" */
.wg-theme .wg-tile--info .wg-tile-val{ color:var(--wg-info, #2563eb); }
.wg-theme .wg-tile--info .wg-tile-val > i{ color:var(--wg-info, #2563eb); }

/* iconos junto al nombre (Actualizar / Notas) */
.wg-theme .wg-ph-name-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.wg-theme .wg-ph-name-actions{ display:inline-flex; gap:5px; }
.wg-theme .wg-ico-btn{
    position:relative; width:28px; height:28px; flex:none; padding:0; display:inline-flex; align-items:center; justify-content:center;
    border-radius:var(--wg-radius, 8px); background:transparent; color:var(--wg-text-2, #4b5563); border:1px solid var(--wg-border, #d7dce5); cursor:pointer;
}
.wg-theme .wg-ico-btn:hover{ background:var(--wg-hover, #e3e9f2); }
.wg-theme .wg-ico-btn i{ font-size:14px; }
.wg-theme .wg-ico-count{
    position:absolute; top:-5px; right:-5px; background:var(--wg-info, #2563eb); color:#fff; border-radius:var(--wg-radius-pill, 999px);
    font-size:9px; min-width:14px; height:14px; display:flex; align-items:center; justify-content:center; padding:0 3px; line-height:1;
}

/* acciones dentro del panel de saldo (Ajust. balance + Actualizar saldos) */
.wg-theme .wg-saldo-actions{ display:flex; gap:6px; flex-wrap:nowrap; margin-top:10px; }
.wg-theme .wg-saldo-actions .wg-saldo-fix{ margin-top:0; align-self:auto; }
.wg-theme .wg-saldo-adjust{
    font-size:11px; padding:5px 10px; display:inline-flex; align-items:center; gap:5px; border-radius:var(--wg-radius, 8px); white-space:nowrap;
    background:transparent; color:var(--wg-text-2, #4b5563); border:1px solid var(--wg-border, #d7dce5); cursor:pointer;
}
.wg-theme .wg-saldo-adjust:hover{ background:var(--wg-hover, #e3e9f2); }
.wg-theme .wg-saldo-adjust[disabled]{ opacity:.5; cursor:not-allowed; }
.wg-theme .wg-saldo-adjust i{ font-size:12px; }

/* tile de Bonos (estado + acción Otorgar) */
.wg-theme .wg-tile-bonos{ flex:0 1 232px; max-width:280px; }
.wg-theme .wg-tile-bonos-head{ display:flex; justify-content:space-between; align-items:center; gap:6px; }
.wg-theme .wg-bono-btn{
    font-size:11px; padding:4px 9px; display:inline-flex; align-items:center; gap:5px; border-radius:var(--wg-radius, 8px);
    background:var(--wg-info-50, #e7eefc); color:var(--wg-info, #2563eb); border:1px solid var(--wg-info-200, #c7d7f7); cursor:pointer;
}
.wg-theme .wg-bono-btn:hover{ filter:brightness(.97); }
.wg-theme .wg-bono-btn[disabled]{ opacity:.45; cursor:not-allowed; }
.wg-theme .wg-bono-btn i{ font-size:12px; }
.wg-theme .wg-tile-bonos-flags{ margin-top:6px; }
.wg-theme .wg-bono-seeker{
    display:inline-flex; align-items:center; gap:4px; font-size:10.5px; padding:1px 7px; border-radius:var(--wg-radius-pill, 999px);
    background:var(--wg-warning-50, #fbf0dc); color:var(--wg-warning, #b45309);
}
.wg-theme .wg-bono-seeker i{ font-size:11px; }

/* responsive estrecho */
@media (max-width: 640px){
    .wg-theme .wg-ph-saldo{ width:100%; }
}

/* ============================================================
   FICHA · DATOS PERSONALES v2 — div/grid (sustituye a las tablas)
   Tarjeta informativa. Secciones con etiqueta tenue en mayúsculas,
   filas en grid (132px/1fr), dos tiles (Nacimiento / Verificación),
   y colapsables (Documentos, Datos de registro). Tokens del proyecto.
   El toggle #ver_edad-* conserva su color verde/ámbar del bloque previo.
   ============================================================ */
.wg-theme .wg-pi{font-size:13px;color:var(--wg-text);}

/* Sección + divisor suave entre secciones */
.wg-theme .wg-pi-sec{padding:7px 4px;}
.wg-theme .wg-pi-sec + .wg-pi-sec{border-top:1px solid var(--wg-border);}

/* Encabezado de sección: etiqueta tenue + acción/chevron a la derecha */
.wg-theme .wg-pi-sechead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;min-height:0;}
.wg-theme .wg-pi-seclbl{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--wg-text-3);}
.wg-theme .wg-pi-seclbl > i{font-size:12px;color:var(--wg-text-3);}

/* Botón "Editar" (abre el modal). Hereda el azul suave global por fa-edit;
   aquí sólo ajusto tamaño/alineación porque lleva texto. */
.wg-theme .wg-pi-edit{display:inline-flex!important;align-items:center;gap:5px;font-size:10.5px!important;line-height:1!important;padding:3px 9px!important;height:auto!important;min-height:0!important;}
.wg-theme .wg-pi-edit > i{font-size:11px;}
/* Botones de usuario (editar/guardar/cancelar) e input compactos dentro de la ficha */
.wg-theme .wg-pi .wg-user-cell .btn{min-height:0!important;height:24px!important;padding:0 8px!important;line-height:1!important;display:inline-flex;align-items:center;justify-content:center;}
.wg-theme .wg-pi .wg-user-cell > input{height:24px;padding-top:0;padding-bottom:0;}

/* Filas: grid etiqueta/valor. Cada fila = 1 elemento (hide/show limpio). */
.wg-theme .wg-pi-grid{display:flex;flex-direction:column;gap:4px;}
.wg-theme .wg-pi-row{display:grid;grid-template-columns:126px 1fr;gap:3px 10px;align-items:center;}
.wg-theme .wg-pi-k{color:var(--wg-text-3);font-size:12px;}
.wg-theme .wg-pi-v{color:var(--wg-text);word-break:break-word;min-width:0;}
.wg-theme .wg-pi-strong{font-weight:600;}

/* Identidad sin labels: nombre prominente · línea ID editable · meta (código • plataforma) */
.wg-theme .wg-pi-ident{display:flex;flex-direction:column;gap:3px;}
.wg-theme .wg-pi-name{font-size:14px;font-weight:600;color:var(--wg-text);line-height:1.25;}
.wg-theme .wg-pi-idline{min-height:24px;}
.wg-theme .wg-pi-idpfx{flex:none;color:var(--wg-text-3);font-size:12px;}
.wg-theme .wg-pi-idline > input{font-size:13px;}
.wg-theme .wg-pi-meta{color:var(--wg-text-2);font-size:12px;}

/* Micro-acción "copiar" (email/celular/teléfono) */
.wg-theme .wg-pi-copyrow{display:inline-flex;align-items:center;gap:6px;min-width:0;}
.wg-theme .wg-pi-copy{background:transparent;border:0;padding:1px 5px;cursor:pointer;color:var(--wg-text-3);line-height:1;border-radius:6px;opacity:.6;transition:opacity .12s,color .12s,background .12s;}
.wg-theme .wg-pi-copy:hover{color:var(--wg-info);background:var(--wg-info-50);opacity:1;}
.wg-theme .wg-pi-copy.wg-pi-copied{color:var(--wg-brand);opacity:1;}
.wg-theme .wg-pi-copy > i{font-size:12px;}

/* Chevron de colapsar: botón sutil (neutralizo el azul de .btn) */
.wg-theme .wg-pi-chevbtn{background:transparent!important;border:1px solid var(--wg-border)!important;color:var(--wg-text-2)!important;width:26px;height:21px;min-height:0!important;padding:0!important;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--wg-radius)!important;box-shadow:none!important;}
.wg-theme .wg-pi-chevbtn:hover{background:var(--wg-hover)!important;color:var(--wg-text)!important;filter:none!important;}
.wg-theme .wg-pi-chevbtn > i{font-size:13px;}

/* Tiles (Nacimiento / Verificación) — molde de los tiles del encabezado */
.wg-theme .wg-pi-tiles{display:flex;gap:9px;align-items:stretch;}
.wg-theme .wg-pi-tile{flex:1 1 0;min-width:0;background:var(--wg-surface-2);border:1px solid var(--wg-border);border-radius:var(--wg-radius);padding:8px 10px;}
.wg-theme .wg-pi-tilelbl{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--wg-text-3);margin-bottom:6px;}
.wg-theme .wg-pi-tilelbl > i:first-child{font-size:12px;}
.wg-theme .wg-pi-tilelbl .wg-info{text-transform:none;}
.wg-theme .wg-pi-tline{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;padding:2px 0;}
.wg-theme .wg-pi-tk{color:var(--wg-text-3);font-size:12px;}

/* Tile de verificación: fila badge + toggle + spinner */
.wg-theme .wg-pi-verif-row{display:flex;align-items:center;gap:10px;margin-bottom:6px;min-height:0;}
.wg-theme .wg-pi-verif-row > .wg-pill{margin-right:auto;}
.wg-theme .wg-pi-verif .spin-player{align-self:center;}
/* Sin verificar: solo fondo ámbar suave + borde ámbar (sin filo izquierdo) */
.wg-theme .wg-pi-verif--alert{background:var(--wg-warning-50);border-color:#f0d9a8;}

/* EDAD — el JS de verificación togglea badge-warning/badge-success en este span
   (no tocamos el JS). Lo dejamos como píldora bonita y el PHP fija la clase inicial
   según el estatus, así NO queda transparente al recargar. Scope por id para que
   sobreviva aunque el JS reescriba las clases. */
.wg-theme [id^="span_edad-"]{display:inline-block;padding:1px 10px;border-radius:var(--wg-radius-pill,999px);font-size:12px!important;font-weight:600;line-height:1.7;}
.wg-theme [id^="span_edad-"].badge-success{background:var(--wg-brand-50)!important;color:var(--wg-brand-700)!important;}
.wg-theme [id^="span_edad-"].badge-warning{background:var(--wg-warning-50)!important;color:var(--wg-warning)!important;}

/* Responsive: tiles apilados y filas a una columna en anchos chicos */
@media (max-width:560px){
  .wg-theme .wg-pi-tiles{flex-direction:column;}
  .wg-theme .wg-pi-row{grid-template-columns:1fr;gap:1px 0;}
  .wg-theme .wg-pi-k{font-size:11px;}
}

/* ============================================================
   FICHA · INFORMACIÓN FINANCIERA v2 — dashboard div/cards
   Tarjetas planas (Depósitos/Retiros/Neto, Detalle de saldos,
   Contracargos, Permisos, Bonos). Tintes suaves, montos tabulares
   con color en el número, toggles + banderas de riesgo. Tokens del
   proyecto. Las rejillas (.wg-fin-g2/g3) las puede sobreescribir el tab.
   ============================================================ */
.wg-theme .wg-fin{font-size:13px;color:var(--wg-text);padding-top:14px;}
.wg-theme .wg-fin-seclbl{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--wg-text);margin:2px 0 10px;}
.wg-theme .wg-fin-seclbl>i{color:var(--wg-text-2);font-size:14px;}
.wg-theme .wg-fin-kpis{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin:0 0 14px;}
.wg-theme .wg-fin-kpi{background:var(--wg-surface);border:1px solid var(--wg-border);border-radius:var(--wg-radius-lg,12px);padding:12px 13px;display:flex;flex-direction:column;gap:6px;min-width:0;}
.wg-theme .wg-fin-kpi-top{display:flex;align-items:center;gap:8px;}
.wg-theme .wg-fin-kpi-ic{width:26px;height:26px;flex:0 0 26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;}
.wg-theme .wg-fin-kpi-ic--g{background:var(--wg-brand-50);color:var(--wg-brand-700);}
.wg-theme .wg-fin-kpi-ic--r{background:var(--wg-danger-50);color:var(--wg-danger-700,var(--wg-danger));}
.wg-theme .wg-fin-kpi-ic--b{background:var(--wg-info-50);color:var(--wg-info-700,var(--wg-info));}
.wg-theme .wg-fin-kpi-ic--a{background:var(--wg-warning-50);color:var(--wg-warning);}
.wg-theme .wg-fin-kpi-lbl{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--wg-text-3);line-height:1.25;}
.wg-theme .wg-fin-kpi-val{font-size:19px;font-weight:700;color:var(--wg-text);font-variant-numeric:tabular-nums;line-height:1.1;white-space:nowrap;}
.wg-theme .wg-fin-kpi-val .wg-fin-cur{font-size:10px;color:var(--wg-text-3);font-weight:400;}
.wg-theme .wg-fin-kpi-val--g{color:var(--wg-brand-700);}
.wg-theme .wg-fin-kpi-val--r{color:var(--wg-danger-700,var(--wg-danger));}
.wg-theme .wg-fin-kpi-sub{font-size:11px;color:var(--wg-text-3);line-height:1.25;}
@media (max-width:1200px){.wg-theme .wg-fin-kpis{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media (max-width:760px){.wg-theme .wg-fin-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}}

.wg-theme .wg-fin-g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;}
.wg-theme .wg-fin-g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;}

/* Layout: zona principal (Resumen + Detalle/Contracargos) + barra lateral
   (Permisos arriba, Bonos abajo). Colapsa a una columna en pantallas chicas. */
.wg-theme .wg-fin-layout{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(330px,1fr);gap:12px;align-items:start;}
.wg-theme .wg-fin-main{display:flex;flex-direction:column;gap:12px;min-width:0;}
.wg-theme .wg-fin-side{display:flex;flex-direction:column;gap:12px;min-width:0;}
@media (max-width:1100px){.wg-theme .wg-fin-layout{grid-template-columns:1fr;}}

.wg-theme .wg-fin-card{background:var(--wg-surface);border:1px solid var(--wg-border);border-radius:var(--wg-radius-lg);padding:13px 14px;}
.wg-theme .wg-fin-ch{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.wg-theme .wg-fin-ct{font-size:14px;font-weight:600;}
.wg-theme .wg-fin-chip{width:26px;height:26px;border-radius:var(--wg-radius);display:flex;align-items:center;justify-content:center;flex:none;font-size:14px;}
.wg-theme .wg-fin-chip--g{background:var(--wg-brand-50);color:var(--wg-brand-700);}
.wg-theme .wg-fin-chip--r{background:var(--wg-danger-50);color:var(--wg-danger-700,var(--wg-danger));}
.wg-theme .wg-fin-chip--b{background:var(--wg-info-50);color:var(--wg-info-700,var(--wg-info));}
.wg-theme .wg-fin-chip--n{background:var(--wg-surface-2);color:var(--wg-text-2);}

.wg-theme .wg-fin-mr{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:3px 0;}
.wg-theme .wg-fin-k{color:var(--wg-text-2);}
.wg-theme .wg-fin-kstrong{color:var(--wg-text)!important;font-weight:600;}
.wg-theme .wg-fin-m{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;}
.wg-theme .wg-fin-m--g{color:var(--wg-brand-700);}
.wg-theme .wg-fin-m--r{color:var(--wg-danger);}
.wg-theme .wg-fin-m--mut{color:var(--wg-text-3);font-weight:400;}
.wg-theme .wg-fin-m--big{font-size:17px;}
.wg-theme .wg-fin-cur{font-size:10px;color:var(--wg-text-3);font-weight:400;}
.wg-theme .wg-fin-pendwarn .wg-fin-m{color:var(--wg-warning);}

.wg-theme .wg-fin-pill{display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:2px 10px;border-radius:var(--wg-radius-pill,999px);font-variant-numeric:tabular-nums;}
.wg-theme .wg-fin-pill--pos{background:var(--wg-brand-50);color:var(--wg-brand-700);}
.wg-theme .wg-fin-pill--neg{background:var(--wg-danger-50);color:var(--wg-danger-700,var(--wg-danger));}
.wg-theme .wg-fin-pill--big{font-size:15px;padding:3px 12px;}

.wg-theme .wg-fin-sub{margin-top:10px;border-radius:var(--wg-radius);padding:8px 10px;font-size:12px;}
.wg-theme .wg-fin-sub--g{background:var(--wg-brand-50);}
.wg-theme .wg-fin-sub--r{background:var(--wg-danger-50);}
.wg-theme .wg-fin-sub--n{background:var(--wg-surface-2);}
.wg-theme .wg-fin-sline{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 0;color:var(--wg-text-2);}
.wg-theme .wg-fin-sline>span>i{margin-right:5px;color:var(--wg-text-3);}
.wg-theme .wg-fin-d{font-variant-numeric:tabular-nums;color:var(--wg-text);}

.wg-theme .wg-fin-btn{width:100%;box-sizing:border-box;border:1px solid var(--wg-border-2,var(--wg-border));border-radius:var(--wg-radius);background:var(--wg-surface);padding:8px;font-size:12.5px;font-weight:600;color:var(--wg-text-2);display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;margin-top:11px;}
.wg-theme .wg-fin-btn:hover{background:var(--wg-hover);color:var(--wg-text);}
.wg-theme .wg-fin-btn>i{font-size:12px;}

.wg-theme .wg-fin-note{display:flex;align-items:center;gap:7px;font-size:11.5px;border-radius:var(--wg-radius);padding:8px 11px;}
.wg-theme .wg-fin-note>i{font-size:12px;}
.wg-theme .wg-fin-note--i{background:var(--wg-info-50);color:var(--wg-info-700,var(--wg-info));margin-top:10px;}
.wg-theme .wg-fin-note--w{background:var(--wg-warning-50);color:var(--wg-warning);margin-top:12px;margin-bottom:12px;}

.wg-theme .wg-fin-perm{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--wg-border);}
.wg-theme .wg-bperm .wg-fin-perm{padding:14px 0;}
.wg-theme .wg-permcol{display:flex;flex-direction:column;}
.wg-theme .wg-permcol > div{display:flex;flex-direction:column;flex:1;min-height:0;}
.wg-theme .wg-permcol .x_panel.card{flex:1;display:flex;flex-direction:column;}
.wg-theme .wg-permcol .x_content{flex:1;display:flex;flex-direction:column;}
.wg-theme .wg-permcol .wg-bperm{flex:1;display:flex;flex-direction:column;justify-content:space-around;}
.wg-theme .wg-bperm{font-size:13px;color:var(--wg-text);}
.wg-theme .wg-rowico{display:inline-block;width:16px;text-align:center;margin-right:7px;font-size:12px;}
.wg-theme .wg-pi-stat{display:inline-flex;align-items:center;gap:5px;margin-left:auto;margin-right:8px;font-size:11px;font-weight:500;white-space:nowrap;}
.wg-theme .wg-pi-statdot{width:8px;height:8px;border-radius:50%;flex:none;}
.wg-theme .wg-pi-stat--ok{color:var(--wg-brand-700);}
.wg-theme .wg-pi-stat--ok .wg-pi-statdot{background:var(--wg-brand);}
.wg-theme .wg-pi-stat--warn{color:var(--wg-warning);}
.wg-theme .wg-pi-stat--warn .wg-pi-statdot{background:#d97706;}
.wg-theme .wg-cls{font-size:13px;color:var(--wg-text);}
.wg-theme .wg-cls-sec{padding:14px 0 4px;}
.wg-theme .wg-cls-divt{border-top:1px solid var(--wg-border);}
.wg-theme .wg-cls-lbl{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--wg-text-3);margin-bottom:7px;}
.wg-theme .wg-cls-lbl>i{color:var(--wg-text-2);font-size:12px;}
.wg-theme .wg-cls-clase{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:5px 0;}
.wg-theme .wg-cls-clasev{font-size:14px;font-weight:600;}
.wg-theme .wg-cls-pills{display:inline-flex;gap:6px;}
.wg-theme .wg-cls-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 0;}
.wg-theme .wg-cls-row--strong .wg-cls-k{font-weight:600;color:var(--wg-text);}
.wg-theme .wg-cls-k{color:var(--wg-text-2);flex:0 0 auto;}
.wg-theme .wg-cls-v{display:inline-flex;align-items:center;gap:6px;min-width:0;justify-content:flex-end;flex:1 1 auto;}
.wg-theme .wg-cls-vtxt{display:inline-flex;align-items:center;gap:5px;min-width:0;font-variant-numeric:tabular-nums;}
.wg-theme .wg-cls-select{height:28px!important;font-size:12px!important;min-width:0;max-width:120px;}
.wg-theme .wg-cls-ib{width:24px;height:24px;flex:0 0 24px;padding:0!important;display:inline-flex;align-items:center;justify-content:center;min-height:0!important;}
.wg-theme .wg-cls-ib>i{font-size:11px;margin:0!important;}
.wg-theme .wg-cls-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.wg-theme .wg-cls-tile{background:var(--wg-surface-2);border:1px solid var(--wg-border);border-radius:var(--wg-radius);padding:9px 6px;text-align:center;}
.wg-theme .wg-cls-tv{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1;}
.wg-theme .wg-cls-tl{font-size:10px;color:var(--wg-text-3);margin-top:2px;line-height:1.2;}
.wg-theme .x_title h2 .wg-cardico{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;background:var(--wg-brand-50);color:var(--wg-brand-700);margin-right:8px;font-size:12px;vertical-align:middle;}
.wg-theme .x_title h2 .wg-cardico.wg-cardico--warn{background:var(--wg-warning-50);color:var(--wg-warning);}
.wg-theme .x_title h2 .wg-cardico.wg-cardico--risk{background:var(--wg-danger-50);color:var(--wg-danger-700,var(--wg-danger));}
.wg-theme .wg-fin-card .wg-fin-perm:last-child,
.wg-theme .wg-bperm .wg-fin-perm:last-child{border-bottom:0;}
.wg-theme .wg-fin-perm:last-of-type{border-bottom:0;}
.wg-theme .wg-fin-perm.wg-fin-red{background:var(--wg-danger-50);box-shadow:inset 3px 0 0 var(--wg-danger);margin:0 -14px;padding:7px 14px;border-bottom:0;}
.wg-theme .wg-fin-perm.wg-fin-risk{background:var(--wg-warning-50);box-shadow:inset 3px 0 0 #f59e0b;margin:0 -14px;padding:7px 14px;border-bottom:0;}
.wg-theme .wg-fin-perm.wg-fin-info{background:var(--wg-info-50);box-shadow:inset 3px 0 0 var(--wg-info);margin:0 -14px;padding:7px 14px;border-bottom:0;}
.wg-theme .wg-fin-perm.wg-fin-red .wg-fin-k{color:var(--wg-danger-700,var(--wg-danger));}
.wg-theme .wg-fin-perm.wg-fin-risk .wg-fin-k{color:var(--wg-warning);}
.wg-theme .wg-fin-riskico{margin-right:5px;}
.wg-theme .wg-fin-tgwrap{display:flex;align-items:center;flex:none;flex-direction:row-reverse;gap:6px;}
.wg-theme .wg-fin-tgwrap .spin-player{margin:0!important;}

.wg-theme .wg-fin-divl{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--wg-text-3);margin:11px 0 4px;font-weight:600;}

.wg-theme .wg-fin-seg{display:flex;align-items:center;gap:8px;padding:12px 0;}
.wg-theme .wg-fin-seg > .wg-fin-k{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.wg-theme .wg-fin-segctl{display:flex;align-items:center;gap:6px;flex:0 0 auto;}
.wg-theme .wg-fin-select{flex:0 0 130px!important;width:130px!important;height:30px!important;font-size:12px!important;}
.wg-theme .wg-fin-segbtn{flex:0 0 34px!important;width:34px!important;min-width:34px!important;height:30px!important;padding:0!important;min-height:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;}
.wg-theme .wg-fin-segbtn > i{margin:0!important;font-size:13px!important;}
.wg-theme .wg-fin-segedit{display:inline-block;flex:0 0 auto;width:24px!important;min-width:24px!important;height:24px!important;padding:0!important;min-height:0!important;text-align:center!important;line-height:22px!important;}
.wg-theme .wg-fin-segedit > i{margin:0!important;font-size:11px!important;line-height:22px!important;vertical-align:middle;}

/* ============================================================
   Sub-tabs de Casino (#menu_bonos_player) -> segmented control.
   Vence los estilos inline del contenedor y reestiliza los
   .button_soe-* (btn-primary) como pastillas. El .active lo
   togglea el JS de la vista (se conserva). id-agnostico via input.btn.
   ============================================================ */
.wg-theme #menu_bonos_player{padding:0!important;margin:14px 0!important;background:transparent!important;}
.wg-theme .wg-seg{display:inline-flex;background:var(--wg-surface-2);border:1px solid var(--wg-border);border-radius:10px;padding:4px;gap:3px;}
.wg-theme .wg-seg .wg-seg-btn{-webkit-appearance:none;appearance:none;border:1px solid var(--wg-border-2);background-color:var(--wg-surface);color:var(--wg-text-2);border-radius:7px;padding:9px 20px;font-size:13px;font-weight:500;line-height:1.2;cursor:pointer;transition:background-color .12s ease,color .12s ease,border-color .12s ease;}
.wg-theme .wg-seg .wg-seg-btn:hover{color:var(--wg-text);background-color:var(--wg-hover);border-color:var(--wg-border);}
.wg-theme .wg-seg .wg-seg-btn.active,
.wg-theme .wg-seg .wg-seg-btn.active:hover{background-color:var(--wg-brand);border-color:var(--wg-brand);color:#fff;}

/* Barra de busqueda de la LISTA de Jugadores (#cont-jugadores ... #form_filtro).
   OJO: #form_filtro tambien lo usan los filtros de las vistas de detalle (filter-card),
   por eso se ancla a #cont-jugadores #contenedor para NO tocar aquellos. El base la deja
   rectangular con borde #cad6e6 (3 lados, sin radio). La pasamos a caja redondeada del skin. */
.wg-theme #cont-jugadores #contenedor #form_filtro{border:1px solid var(--wg-border)!important;border-radius:var(--wg-radius-lg)!important;margin-bottom:8px!important;box-shadow:none!important;}
.wg-theme #cont-jugadores #contenedor #form_filtro-footer{border-bottom:none!important;}

/* ============================================================
   BET TICKER — reporte de apuestas en vivo
   Clases: .bt-* (prefijo propio, sin colisiones)
   ============================================================ */



/* Rejilla del reporte — gutter de 12px (igual al dashboard) */
/* Hyper fuerza padding:0 en las columnas directas del grid principal (imbatible), */
/* por eso el hueco main<->sidebar se hace con margin-left en las TARJETAS del */
/* sidebar, no en la columna. Los KPI van en una fila ANIDADA que Hyper no toca, */
/* asi que ahi el padding si funciona y alinea todo al ancho de la columna. */
.wg-theme #bt-layout{margin-left:0;margin-right:0;}
.wg-theme #bt-layout > [class*="col-lg-3"] > .card{margin-left:12px;}
.wg-theme #ps-layout{margin-left:0;margin-right:0;}
.wg-theme #ps-layout > [class*="col-lg-3"] > .x_panel{margin-left:12px;}
.wg-theme #ps-layout > [class*="col-lg-3"] > .card{margin-left:12px;}
.wg-theme #bt-kpi-row{margin-left:-6px;margin-right:-6px;}
.wg-theme #bt-kpi-row > [class*="col-"]{padding-left:6px!important;padding-right:6px!important;}
.wg-theme #ps-kpi-row{margin-left:-6px;margin-right:-6px;}
.wg-theme #ps-kpi-row > [class*="col-"]{padding-left:6px!important;padding-right:6px!important;}

/* La tabla va pegada al borde (card-body p-0), así que sus esquinas cuadradas tapan */
/* el radio de 12px de la card. overflow:hidden SOLO en la card de la tabla (única */
/* .card hija directa de col-lg-9) redondea las esquinas superiores. El scroll */
/* horizontal vive anidado en .table-responsive, así que no se ve afectado. */
.wg-theme #bt-layout > [class*="col-lg-9"] > .card{overflow:hidden;}

/* Selectores de registros por página — forzar ancho contra min-width de Bootstrap */
#bt-per-page-top,
#bt-per-page-bottom { min-width:70px!important; width:70px!important; }
#ps-per-page-top,
#ps-per-page-bottom { min-width:70px!important; width:70px!important; }

/* Filas nuevas en auto-refresh — Opción D: fade + borde izquierdo */
.wg-theme .bt-new-row {
    border-left: 3px solid var(--wg-brand) !important;
}
.wg-theme .bt-new-row.bt-fading {
    background-color: var(--wg-brand-50);
    transition: background-color 3s ease;
}
.wg-theme .bt-new-row.bt-fade-done {
    background-color: transparent;
    transition: background-color 3s ease;
}
.wg-theme .ps-new-row {
    border-left: 3px solid var(--wg-brand) !important;
}
.wg-theme .ps-new-row.ps-fading {
    background-color: var(--wg-brand-50);
    transition: background-color 3s ease;
}
.wg-theme .ps-new-row.ps-fade-done {
    background-color: transparent;
    transition: background-color 3s ease;
}

/* Badge de riesgo en tabla BetTicker */
.wg-theme .bt-risk-low   { display:inline-block; padding:2px 8px; border-radius:20px; font-weight:600; font-size:12px; background:var(--wg-brand-50); color:var(--wg-brand-700); }
.wg-theme .bt-risk-mid   { display:inline-block; padding:2px 8px; border-radius:20px; font-weight:600; font-size:12px; background:var(--wg-warning-50); color:var(--wg-warning); }
.wg-theme .bt-risk-high  { display:inline-block; padding:2px 8px; border-radius:20px; font-weight:600; font-size:12px; background:var(--wg-danger-50); color:var(--wg-danger-700,var(--wg-danger)); }

/* Clases de tipografia y colores para filas de la tabla BetTicker */
.wg-theme .bt-chevron-icon  { font-size:10px; color:var(--wg-text-3); transition:transform .2s; }
.wg-theme .bt-ticket-num    { font-size:11px; font-weight:600; color:var(--wg-info); }
.wg-theme .bt-cell-main     { font-size:12px; font-weight:500; color:var(--wg-text); }
.wg-theme .bt-cell-sub      { font-size:10px; color:var(--wg-text-3); }
.wg-theme .bt-cell-date     { white-space:nowrap; font-size:11px; color:var(--wg-text-3); }
.wg-theme .bt-cell-win      { font-size:12px; font-weight:500; color:var(--wg-brand-700); }

/* KPI cards */
.wg-theme .bt-kpi-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.wg-theme .bt-kpi-label{font-size:10px;color:var(--wg-text-3);font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.wg-theme .bt-kpi-val{font-size:22px;font-weight:600;line-height:1;color:var(--wg-text);}
.wg-theme .bt-kpi-sub{font-size:11px;color:var(--wg-text-3);margin-top:2px;}
.wg-theme .bt-kpi-sub--up{color:var(--wg-brand-700);}
.wg-theme .bt-kpi-sub--dn{color:var(--wg-danger);}

/* Badges de estado */
.wg-theme .bt-badge-status{display:inline-block;padding:3px 8px;border-radius:var(--wg-radius-pill);font-size:10px;font-weight:600;white-space:nowrap;}
.wg-theme .bt-badge-pending{background:var(--wg-warning-50);color:var(--wg-warning);}
.wg-theme .bt-badge-winner{background:var(--wg-brand-50);color:var(--wg-brand-700);}
.wg-theme .bt-badge-loser{background:var(--wg-danger-50);color:var(--wg-danger-700,var(--wg-danger));}
.wg-theme .bt-badge-cancelled{background:var(--wg-danger-50);color:var(--wg-danger-700,var(--wg-danger));}
.wg-theme .bt-badge-push{background:var(--wg-info-50);color:var(--wg-info-700,var(--wg-info));}
.wg-theme .bt-badge-hold{background:var(--wg-surface-2);color:var(--wg-text-2);}

/* Fila de detalle expandible */
.wg-theme .bt-detail-row td{background:#f8faff;border-top:none;}
.wg-theme .bt-detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 12px;padding:6px 0;}
.wg-theme .bt-detail-grid--op{grid-template-columns:200px 200px 200px!important;gap:8px 16px!important;}
.wg-theme .bt-detail-item label{font-size:10px;color:var(--wg-text-3);display:block;margin-bottom:2px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;}
.wg-theme .bt-detail-item span{font-size:12px;font-weight:500;color:var(--wg-text);}

/* Sidebar resumen */
.wg-theme .bt-summary-row{display:flex;justify-content:space-between;align-items:flex-start;padding:6px 0;border-bottom:1px solid var(--wg-border);font-size:12px;color:var(--wg-text-2);}
.wg-theme .bt-summary-row:last-child{border-bottom:none;}
.wg-theme .bt-summary-row strong{color:var(--wg-text);font-variant-numeric:tabular-nums;}
/* Ticket clickeable (Mayor riesgo / Mayor premio): se ve como link con lupa */
.wg-theme .bt-ticket-link{color:#2563eb;font-weight:600;}
.wg-theme .bt-ticket-link i{font-size:10px;margin-right:2px;}
.wg-theme .bt-summary-row[data-ticket]:not([data-ticket=""]):hover .bt-ticket-link{text-decoration:underline;}

/* Badges de estatus de eventos — estándar compartido (Control de Riesgo + reporte de eventos). Fuente única de verdad. */
.wg-theme .rc-badge{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.03em;border-radius:var(--wg-radius-pill);padding:3px 8px;text-transform:uppercase;white-space:nowrap;}
.wg-theme .b-abierto{background:var(--wg-brand-50);color:var(--wg-brand-700);}
.wg-theme .b-cerrado{background:#e5e7eb;color:#374151;}
.wg-theme .b-suspendido{background:#fdf2e3;color:#d97706;}
.wg-theme .b-detenido{background:var(--wg-danger-50);color:var(--wg-danger);}
.wg-theme .b-nojugado{background:#eceef1;color:var(--wg-text-3);}
.wg-theme .b-vencido{background:#fdf2e3;color:#d97706;}
/* Píldora "En juego" con punto pulsante (idéntica a CR) */
.wg-theme .rc-cd{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:var(--wg-radius-pill);white-space:nowrap;}
.wg-theme .rc-cd .rc-cd-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.wg-theme .cd-live{background:var(--wg-danger);color:#fff;}
.wg-theme .cd-live .rc-cd-dot{background:#fff;animation:rcPulse 1s infinite;}
/* "Vencido" como píldora con punto pulsante (evento por resolver, debe saltar a la vista) */
.wg-theme .cd-vencido{background:#fdf2e3;color:#d97706;}
.wg-theme .cd-vencido .rc-cd-dot{background:#d97706;box-shadow:0 0 0 3px rgba(217,119,6,.18);animation:rcPulse 1s infinite;}
@keyframes rcPulse{0%,100%{opacity:1}50%{opacity:.35}}

/* Accesos rápidos sidebar */
.wg-theme .bt-quick-item{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--wg-border);cursor:pointer;font-size:12px;color:var(--wg-text-2);transition:color .15s;}
.wg-theme .bt-quick-item:last-child{border-bottom:none;}
.wg-theme .bt-quick-item:hover{color:var(--wg-info);}

/* Paginación */
.wg-theme .page-btn-bt{min-width:28px;height:28px;padding:0 6px;border:1px solid var(--wg-border-2);border-radius:var(--wg-radius);background:none;cursor:pointer;font-size:12px;display:inline-flex;align-items:center;justify-content:center;color:var(--wg-text-2);transition:background .12s;}
.wg-theme .page-btn-bt:hover{background:var(--wg-hover);color:var(--wg-text);}
.wg-theme .page-btn-bt.active{background:var(--wg-info);color:#fff;border-color:var(--wg-info);}
.wg-theme .page-btn-bt:disabled{opacity:.4;cursor:default;}

/* Banner nuevas apuestas */
.wg-theme #bt-new-banner{background:var(--wg-brand-50);color:var(--wg-brand-700);border-bottom:1px solid var(--wg-brand);font-size:12px;font-weight:500;padding:6px 14px;display:flex;align-items:center;justify-content:space-between;}

/* Spinner auto-refresh */
#bt-refresh-icon,#ps-refresh-icon{animation:btSpin .8s linear infinite;}
@keyframes btSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

/* Label Automatico atenuado durante refresh */
.wg-theme .bt-refreshing{opacity:.7;transition:opacity .3s;}

/* Animacion banner entrada */
@keyframes btFadeIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}

/* Spinner auto-refresh */
#bt-refresh-icon { font-size:14px; color:#ffd700; margin-right:6px; display:none; animation:btSpin .8s linear infinite; }

/* Label Automatico */
.wg-theme .bt-auto-label { color:#fff; }

/* KPI iconos */
.wg-theme .bt-kpi-ico         { font-size:18px; }
.wg-theme .bt-kpi-ico--brand  { color:var(--wg-brand-700); }
.wg-theme .bt-kpi-ico--warning{ color:var(--wg-warning); }
.wg-theme .bt-kpi-ico--danger { color:var(--wg-danger); }
.wg-theme .bt-kpi-ico--info   { color:var(--wg-info); }

/* Paginacion info */
.wg-theme .bt-pagination-info { font-size:12px; color:var(--wg-text-3); }

/* Sidebar titulos */
.wg-theme .bt-sidebar-title { font-size:11px; font-weight:600; color:var(--wg-text-3); text-transform:uppercase; letter-spacing:.04em; }
.wg-theme .bt-sidebar-label { font-size:12px; color:var(--wg-text-2); }

/* Iconos sidebar */
.wg-theme .bt-icon-muted  { color:var(--wg-text-3); }
.wg-theme .bt-icon-brand  { color:var(--wg-brand-700); }
.wg-theme .bt-icon-danger { color:var(--wg-danger); }
.wg-theme .bt-icon-live   { color:var(--wg-danger); font-size:8px; }

/* Chevron accesos rapidos */
.wg-theme .bt-chevron-sm  { color:var(--wg-text-3); font-size:10px; }

/* Badges accesos rapidos — anular box-shadow de Bootstrap/Hyper */
.wg-theme .bt-quick-badge { box-shadow:none !important; }
/* Badges accesos rapidos */
.wg-theme .bt-quick-badge            { font-size:10px; font-weight:600; padding:2px 7px; border-radius:var(--wg-radius-pill); }
.wg-theme .bt-quick-badge--warning   { background:var(--wg-warning-50); color:var(--wg-warning); }
.wg-theme .bt-quick-badge--info      { background:var(--wg-info-50); color:var(--wg-info); }
.wg-theme .bt-quick-badge--brand     { background:var(--wg-brand-50); color:var(--wg-brand-700); }
.wg-theme .bt-quick-badge--danger    { background:var(--wg-danger-50); color:var(--wg-danger); }

/* Link ver todos los reportes */
.wg-theme .bt-link { font-size:12px; color:var(--wg-info); }
.wg-theme .ps-detail-row:hover { background:transparent !important; }
/* Badge de riesgo — Preselecciones */
.wg-theme .ps-risk-low  { display:inline-block;padding:2px 8px;border-radius:20px;font-size:12px;font-weight:500;background:#e1f5ee;color:#0f6e56; }
.wg-theme .ps-risk-mid  { display:inline-block;padding:2px 8px;border-radius:20px;font-size:12px;font-weight:500;background:#faeeda;color:#854f0b; }
.wg-theme .ps-risk-high { display:inline-block;padding:2px 8px;border-radius:20px;font-size:12px;font-weight:500;background:#fcebeb;color:#a32d2d; }
/* Franja izquierda por cambio de estatus en BetTicker */
.wg-theme .bt-updated-winner  { border-left:3px solid var(--wg-brand)    !important; }
.wg-theme .bt-updated-loser   { border-left:3px solid var(--wg-danger)   !important; }
.wg-theme .bt-updated-push    { border-left:3px solid var(--wg-info)     !important; }
.wg-theme .bt-updated-partial { border-left:3px solid var(--wg-info)     !important; }
.wg-theme .bt-updated-void    { border-left:3px solid var(--wg-text-3)   !important; }

/* Flash de color por cambio de estatus */
.wg-theme .bt-flash-winner  { background-color:var(--wg-brand-50);  transition:background-color 2s ease; }
.wg-theme .bt-flash-loser   { background-color:var(--wg-danger-50); transition:background-color 2s ease; }
.wg-theme .bt-flash-push    { background-color:var(--wg-info-50);   transition:background-color 2s ease; }
.wg-theme .bt-flash-partial { background-color:var(--wg-info-50);   transition:background-color 2s ease; }
.wg-theme .bt-flash-void    { background-color:var(--wg-surface-2); transition:background-color 2s ease; }
.wg-theme .bt-flash-done    { background-color:transparent;         transition:background-color 2s ease; }