@charset "UTF-8";
/* =====================================================================
   REBRAND COMPLIANCE21 · AREA "FLEXIGRID"  (re-skin por CSS, solo piel)
   ---------------------------------------------------------------------
   Reproduce la tabla del mockup glassmorphism (.tbl + .pager) sobre las
   clases reales que genera el plugin Flexigrid en los listados del panel
   (entidades, grupos, etc.). NO se toca el HTML ni el JS: este CSS se
   carga DESPUES de flexigrid.css + UBold + Bootstrap 3 y gana la cascada
   con selectores especificos y !important puntual (Flexigrid impone
   estilos inline y con !important, asi que aqui se responde igual).

   Mapa mockup -> Flexigrid:
     .tbl thead th ....... .flexigrid .hDiv / .hDivBox thead th
     .tbl tbody td ....... .flexigrid .bDiv tbody td
     fila :hover ......... .flexigrid .bDiv tr:hover
     fila activa ......... .flexigrid tr.trSelected
     .pager / .pg ........ .flexigrid .pDiv (.pButton, .pcontrol, select)
     titulo tabla ........ .flexigrid .mDiv
     buscador ............ .flexigrid .sDiv / .sDiv2
     botones barra ....... .flexigrid .fbutton (add/editar/delete) y .nBtn
   ===================================================================== */

/* ===== SISTEMA DE TOKENS GLASSMORPHISM (compartido, NO cambiar los valores) ===== */
:root{
  --bg1:#eef2f8; --bg2:#f6f8fc; --bg3:#eef3f9;
  --ink:#1b2434; --ink-2:#3d475b; --muted:#6b7488;
  --glass:rgba(255,255,255,.88); --glass-2:rgba(255,255,255,.94); --glass-hi:#ffffff;
  --border:rgba(23,32,49,.10); --border-in:rgba(23,32,49,.07); --line:rgba(23,32,49,.08);
  --accent:#2f5fc7; --accent-2:#4d7ce0; --accent-soft:rgba(47,95,199,.10);
  --low:#2fa860; --mid:#dca11f; --high:#e07b2b; --crit:#d23b3b;
  --low-s:rgba(47,168,96,.13); --mid-s:rgba(220,161,31,.15); --high-s:rgba(224,123,43,.14); --crit-s:rgba(210,59,59,.13);
  --shadow:0 1px 2px rgba(23,40,80,.06), 0 10px 26px -14px rgba(23,40,80,.20);
  --shadow-sm:0 1px 2px rgba(23,40,80,.08);
  --blur:9px; --radius:14px;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;
  --blob-a:rgba(59,111,212,.42); --blob-b:rgba(53,184,201,.32); --blob-c:rgba(240,168,90,.28); --blob-d:rgba(120,90,220,.24);
}
/* --- Tokens DARK: por preferencia del sistema (respeta el data-theme="light") --- */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg1:#0c1120; --bg2:#0f1626; --bg3:#111a2e;
  --ink:#e9edf5; --ink-2:#bcc4d4; --muted:#7d879c;
  --glass:rgba(28,38,58,.52); --glass-2:rgba(32,44,68,.66); --glass-hi:rgba(44,58,86,.7);
  --border:rgba(255,255,255,.09); --border-in:rgba(255,255,255,.05); --line:rgba(255,255,255,.07);
  --accent:#6f9bef; --accent-2:#8db1f5; --accent-soft:rgba(111,155,239,.16);
  --low:#4bc57e; --mid:#e6bd52; --high:#ec9256; --crit:#e56a6a;
  --low-s:rgba(75,197,126,.14); --mid-s:rgba(230,189,82,.14); --high-s:rgba(236,146,86,.14); --crit-s:rgba(229,106,106,.15);
  --shadow:0 4px 16px -6px rgba(0,0,0,.5), 0 22px 50px -24px rgba(0,0,0,.75);
  --shadow-sm:0 2px 10px -4px rgba(0,0,0,.5);
  --blob-a:rgba(59,111,212,.36); --blob-b:rgba(53,184,201,.20); --blob-c:rgba(240,168,90,.16); --blob-d:rgba(140,110,240,.30);
}}
/* --- Tokens DARK: por eleccion explicita (toggle) --- */
:root[data-theme="dark"]{
  --bg1:#0c1120; --bg2:#0f1626; --bg3:#111a2e;
  --ink:#e9edf5; --ink-2:#bcc4d4; --muted:#7d879c;
  --glass:rgba(28,38,58,.52); --glass-2:rgba(32,44,68,.66); --glass-hi:rgba(44,58,86,.7);
  --border:rgba(255,255,255,.09); --border-in:rgba(255,255,255,.05); --line:rgba(255,255,255,.07);
  --accent:#6f9bef; --accent-2:#8db1f5; --accent-soft:rgba(111,155,239,.16);
  --low:#4bc57e; --mid:#e6bd52; --high:#ec9256; --crit:#e56a6a;
  --low-s:rgba(75,197,126,.14); --mid-s:rgba(230,189,82,.14); --high-s:rgba(236,146,86,.14); --crit-s:rgba(229,106,106,.15);
  --shadow:0 4px 16px -6px rgba(0,0,0,.5), 0 22px 50px -24px rgba(0,0,0,.75);
  --shadow-sm:0 2px 10px -4px rgba(0,0,0,.5);
  --blob-a:rgba(59,111,212,.36); --blob-b:rgba(53,184,201,.20); --blob-c:rgba(240,168,90,.16); --blob-d:rgba(140,110,240,.30);
}

/* =====================================================================
   1) CONTENEDOR .flexigrid — sin bordes duros, integrado en la .card-box
   ===================================================================== */
.flexigrid{
  font-family:var(--sans) !important;   /* mata el Arial 12px del plugin */
  font-size:13px !important;
  color:var(--ink) !important;
  background:transparent !important;
  border:0 !important;
  overflow:visible;                     /* que respire dentro de la card */
  width:100% !important;                 /* llena el ancho de la .card-box (anula el ancho px inline del plugin) */
}
/* ANCHO: Flexigrid fija anchos en px por JS (sin !important) en el contenedor y en cada capa,
   por eso la tabla queda corta y sobra hueco a la derecha. Forzamos que TODAS las capas llenen
   el 100% de la .card-box; nuestro !important gana al style inline del plugin. */
.flexigrid div.mDiv,
.flexigrid div.tDiv,
.flexigrid div.hDiv,
.flexigrid div.bDiv,
.flexigrid div.pDiv,
.flexigrid div.sDiv{
  width:100% !important;
  box-sizing:border-box;
}
/* El plugin reserva 40px de padding-right en .hDivBox para el scrollbar; con la cabecera al 100%
   ese hueco descuadra columnas cabecera/cuerpo, asi que lo anulamos. */
.flexigrid div.hDivBox{ padding-right:0 !important; }
/* Cabecera y cuerpo comparten el MISMO colModel (mismos anchos px), asi que forzar ambas tablas a
   width:100% con table-layout:fixed reparte el sobrante por igual en las dos -> quedan sincronizadas
   y sin hueco muerto a la derecha. */
.flexigrid div.hDiv table,
.flexigrid div.bDiv table{
  width:100% !important;
  table-layout:fixed;
}
/* La tabla interna no debe pintar bordes/fondos propios */
.flexigrid table{
  background:transparent !important;
  border:0 !important;
  border-collapse:collapse;
}

/* =====================================================================
   2) .mDiv — titulo de la tabla (coherente con el header del mockup)
   ===================================================================== */
.flexigrid div.mDiv{
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--line) !important;
  font-weight:700;
  color:var(--ink);
}
.flexigrid div.mDiv div{
  padding:14px 18px;
  font-size:15.5px;
  letter-spacing:-.01em;
  color:var(--ink);
}
/* Boton de plegar/desplegar el titulo: discreto, de vidrio */
.flexigrid div.mDiv div.ptogtitle{
  border:1px solid var(--border-in) !important;
  border-radius:8px;
  background:var(--glass-2) !important;
}
.flexigrid div.mDiv div.ptogtitle:hover{ background:var(--glass-hi) !important; }

/* =====================================================================
   3) .tDiv (barra de herramientas) + .fbutton (Nuevo / Editar / Eliminar)
      Estilo boton "ghost" del rebrand, conservando los iconos PNG.
   ===================================================================== */
.flexigrid div.tDiv{
  background:transparent !important;
  border:0 !important;
  margin-bottom:14px;
}
.flexigrid div.tDiv2{ padding:2px 0; }

/* Boton base de la barra */
.flexigrid div.fbutton{
  display:inline-flex !important;
  align-items:center;
  background:var(--glass-2) !important;
  border:1px solid var(--border-in) !important;
  border-radius:12px !important;
  padding:1px 4px !important;
  margin-right:8px;
  cursor:pointer;
  color:var(--ink-2);
  box-shadow:var(--shadow-sm);
  transition:transform .16s, background .16s, box-shadow .16s;
}
.flexigrid div.fbutton:hover,
.flexigrid div.fbutton.fbOver{
  background:var(--glass-hi) !important;
  border:1px solid var(--border-in) !important;   /* anula el borde gris beveado del plugin */
  padding:1px 4px !important;
  transform:translateY(-1px);
  box-shadow:var(--shadow);
}
/* Contenedor interno .add/.editar/.delete: lleva el icono PNG como background.
   BUG original: se usaba 'background-position:center left 2px' (forma de 3 valores ambigua),
   que el navegador interpreta como 'center' horizontal -> el icono se pintaba en el MEDIO del
   boton, encimado sobre el texto. Se fija posicion valida y sin equivoco: icono a la izquierda,
   centrado en vertical, con padding-left suficiente para que el texto no lo pise. */
.flexigrid div.fbutton div{
  float:none !important;
  display:flex;
  align-items:center;
  padding:5px 8px !important;
  border:0 !important;                        /* quita los bordes beveados del hover */
}
/* El icono (add/editar/delete) es el BACKGROUND del <span> (flexigrid.js le pone
   la clase bclass al span, no al div) y el texto va DENTRO del span; por eso el
   hueco y la posicion del icono van AQUI, en el span, no en el div. */
.flexigrid div.fbutton span{
  float:none !important;
  display:inline-block;
  padding:2px 4px 2px 24px !important;              /* 24px de hueco para el icono a la izq */
  background-repeat:no-repeat !important;
  background-position:left 2px center !important;   /* icono a la izquierda, centrado vertical */
  background-size:15px 15px !important;             /* normaliza el tamano del PNG */
  font-size:13px;
  font-weight:600;
  color:var(--ink-2);
  cursor:pointer;
  white-space:nowrap;
}
.flexigrid div.fbutton:hover span,
.flexigrid div.fbutton:hover div{ border:0 !important; }

/* Separadores verticales entre grupos de botones */
.flexigrid div.btnseparator{
  border-left:1px solid var(--line) !important;
  border-right:0 !important;
  height:20px;
  margin:2px 4px;
}

/* =====================================================================
   4) .hDiv / .hDivBox thead th — cabecera mono, uppercase, tracking,
      color --muted, fondo transparente (sin el degradado gris de UBold).
   ===================================================================== */
.flexigrid div.hDiv{
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--line) !important;
}
.flexigrid div.hDiv table{ border:0 !important; }

.flexigrid div.hDiv th,
.flexigrid div.hDivBox th{
  background:transparent !important;
  border:0 !important;
  height:auto;
  font-weight:600;
  vertical-align:middle !important;
}
/* El texto real de la cabecera vive en el div interno */
.flexigrid div.hDiv th div{
  padding:13px 14px !important;
  font-family:var(--mono) !important;
  font-size:9.5px !important;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--muted) !important;
  border:0 !important;
}
/* Columna ordenada: resaltada en tinta y con subrayado acento sutil */
.flexigrid div.hDiv th.sorted{
  background:transparent !important;
  border-bottom:2px solid var(--accent) !important;
}
.flexigrid div.hDiv th.sorted div{
  color:var(--ink-2) !important;
  border:0 !important;
  padding-bottom:11px !important;
}
/* Hover sobre cabecera: quita el borde naranja del plugin */
.flexigrid div.hDiv th.thOver div,
.flexigrid div.hDiv th.sorted.thOver div{
  border-bottom:0 !important;
  padding-bottom:13px !important;
  color:var(--ink-2) !important;
}
/* Guia de reordenacion de columnas (arrastrar): coherente con el vidrio */
div.colCopy{
  font-family:var(--mono) !important;
  background:var(--glass-hi) !important;
  border:1px solid var(--border-in) !important;
  border-radius:8px;
  color:var(--muted);
}

/* =====================================================================
   5) .bDiv tbody td — celdas con linea inferior --line, padding comodo;
      filas :hover con --glass-2; sin rayado gris de UBold.
   ===================================================================== */
.flexigrid div.bDiv{
  background:transparent !important;
  border:0 !important;
}
.flexigrid div.bDiv table{ border:0 !important; }

.flexigrid div.bDiv td{
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--line) !important;
  vertical-align:middle !important;
  white-space:normal;
  color:var(--ink-2);
}
.flexigrid div.bDiv td div{
  padding:12px 14px !important;
  border:0 !important;
  color:var(--ink-2);
}
/* Neutraliza el rayado (filas pares) del plugin: en el mockup no hay stripes */
.flexigrid div.bDiv tr.erow td,
.flexigrid.novstripe div.bDiv tr.erow td{
  background:transparent !important;
  border-left-color:transparent !important;
  border-right-color:transparent !important;
  border-bottom:1px solid var(--line) !important;
}
/* Hover de fila -> vidrio suave (sustituye el celeste #d9ebf5 del plugin) */
.flexigrid div.bDiv tr:hover td,
.flexigrid div.bDiv tr:hover td.sorted,
.flexigrid div.bDiv tr.trOver td,
.flexigrid div.bDiv tr.trOver td.sorted{
  background:var(--glass-2) !important;
  border-left:0 !important;
  border-right:0 !important;
  border-bottom:1px solid var(--line) !important;
}

/* =====================================================================
   6) .trSelected — fila seleccionada con --accent-soft (no el azul plano)
   ===================================================================== */
.flexigrid tr.trSelected td,
.flexigrid tr.trSelected td.sorted,
.flexigrid div.bDiv tr.trSelected:hover td,
.flexigrid div.bDiv tr.trSelected:hover td.sorted,
.flexigrid div.bDiv tr.trOver.trSelected td,
.flexigrid div.bDiv tr.trOver.trSelected td.sorted,
.flexigrid.novstripe div.bDiv tr.trSelected:hover td,
.flexigrid.novstripe tr.trSelected td{
  background:var(--accent-soft) !important;
  border-left:0 !important;
  border-right:0 !important;
  border-bottom:1px solid var(--line) !important;
  color:var(--ink) !important;
}

/* =====================================================================
   7) .pDiv (paginacion) — como el .pager del mockup:
      botones .pg de vidrio, activo azul, texto muted.
   ===================================================================== */
.flexigrid div.pDiv{
  background:transparent !important;
  border:0 !important;
  border-top:1px solid var(--line) !important;
  margin-top:0;
  padding:8px 8px 6px;
}
.flexigrid div.pDiv div.pDiv2{ margin:4px 2px; }
div.pGroup{ height:30px; margin:0 5px; }

/* Botones de navegacion (primera/prev/sig/ultima/recargar) como pastillas .pg */
.flexigrid div.pDiv div.pButton{
  width:30px !important;
  height:30px !important;
  border:1px solid var(--border-in) !important;
  border-radius:9px !important;
  background:var(--glass-2) !important;
  box-shadow:var(--shadow-sm);
  margin-right:5px;
  overflow:hidden;
  transition:background .16s, transform .16s;
}
.flexigrid div.pDiv div.pButton:hover,
.flexigrid div.pDiv div.pButton.pBtnOver{
  width:30px !important;
  height:30px !important;
  border:1px solid var(--border-in) !important;
  background:var(--glass-hi) !important;
  transform:translateY(-1px);
}
/* La flecha PNG vive dentro del span; se centra dentro de la pastilla */
.flexigrid div.pDiv div.pButton span{
  width:28px !important;
  height:28px !important;
  border:0 !important;
  background-position:center !important;
}
.flexigrid div.pDiv div.pButton:hover span,
.flexigrid div.pDiv div.pButton.pBtnOver span{
  width:28px !important;
  height:28px !important;
  border:0 !important;
}

/* Control de pagina: "Pagina X de Y" + input central */
.flexigrid div.pDiv .pcontrol{
  color:var(--muted);
  font-size:12px;
  top:6px;
}
.flexigrid div.pDiv .pcontrol span{ color:var(--ink-2); font-weight:600; }
.flexigrid div.pDiv input{
  background:var(--glass-2) !important;
  border:1px solid var(--border-in) !important;
  border-radius:9px !important;
  color:var(--ink) !important;
  height:28px !important;
  padding:0 6px !important;
  text-align:center;
  font-family:var(--mono);
  font-size:12px;
}
.flexigrid div.pDiv input:focus{
  outline:none;
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px var(--accent-soft);
}
/* Selector de "filas por pagina": select de vidrio */
.flexigrid div.pDiv select{
  background:var(--glass-2) !important;
  border:1px solid var(--border-in) !important;
  border-radius:9px !important;
  color:var(--ink) !important;
  height:30px !important;
  padding:0 6px !important;
  font-family:var(--sans);
  font-size:12px;
}
.flexigrid div.pDiv select:focus{
  outline:none;
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px var(--accent-soft);
}
/* Contador "Mostrando X a Y de Z": texto muted mono */
.flexigrid div.pDiv .pPageStat{
  color:var(--muted);
  font-family:var(--mono);
  font-size:11px;
  top:6px;
}

/* =====================================================================
   8) .sDiv / .sDiv2 (buscador) — inputs y selects de vidrio, coherentes.
   ===================================================================== */
.flexigrid div.sDiv{
  background:transparent !important;
  border:0 !important;
  border-top:1px solid var(--line) !important;
  /* El plugin dimensiona este contenedor para inputs de 23px y lo recorta con
     overflow:hidden; el rebrand usa inputs de 34px, que quedaban cortados por
     abajo. Se deja crecer y sin recorte. */
  overflow:visible !important;
  height:auto !important;
}
.flexigrid div.sDiv2{ padding:10px 8px !important; width:auto !important; height:auto !important; overflow:visible !important; }
.flexigrid div.sDiv2 input[type="text"],
.flexigrid div.sDiv2 select,
.flexigrid .flexi_div_busqueda input,
.flexigrid .flexi_div_busqueda select{
  background:var(--glass-2) !important;
  border:1px solid var(--border-in) !important;
  border-radius:11px !important;
  color:var(--ink) !important;
  height:34px !important;
  padding:0 12px !important;
  font-family:var(--sans);
  font-size:13px;
}
.flexigrid div.sDiv2 input[type="text"]:focus,
.flexigrid div.sDiv2 select:focus,
.flexigrid .flexi_div_busqueda input:focus,
.flexigrid .flexi_div_busqueda select:focus{
  outline:none;
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px var(--accent-soft);
}

/* =====================================================================
   9) .nBtn (mostrar/ocultar columnas) y menu .nDiv — estilo vidrio.
   ===================================================================== */
.flexigrid div.nBtn{
  background:var(--glass-2) !important;
  border:0 !important;
  border-left:1px solid var(--line) !important;
}
.flexigrid div.nBtn div{ border-left:1px solid var(--border-in) !important; }
.flexigrid div.nDiv{
  background:var(--glass-hi) !important;   /* panel blanco casi solido: sin backdrop-filter (rendimiento) */
  border:1px solid var(--border) !important;
  border-radius:12px;
  box-shadow:var(--shadow);
  color:var(--ink-2);
}
.flexigrid div.nDiv td{ border-color:transparent !important; }
.flexigrid div.nDiv tr:hover td,
.flexigrid div.nDiv tr.ndcolover td{
  background:var(--accent-soft) !important;
  border-color:transparent !important;
}
/* Caja de edicion inline sobre celda (iDiv): borde acento suave */
.flexigrid div.iDiv{ border:1px solid var(--accent) !important; }

/* =====================================================================
   10) AJUSTES DARK MODE — las flechas del pager y de ordenacion son PNG
       oscuros; se invierten para que se vean sobre el vidrio oscuro.
       (Los iconos de color de la barra Nuevo/Editar/Eliminar NO se tocan.)
   ===================================================================== */
:root[data-theme="dark"] .flexigrid div.pDiv div.pButton span,
:root[data-theme="dark"] .flexigrid div.hDiv th div.sasc,
:root[data-theme="dark"] .flexigrid div.hDiv th div.sdesc{
  filter:invert(1) brightness(1.6);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .flexigrid div.pDiv div.pButton span,
  :root:not([data-theme="light"]) .flexigrid div.hDiv th div.sasc,
  :root:not([data-theme="light"]) .flexigrid div.hDiv th div.sdesc{
    filter:invert(1) brightness(1.6);
  }
}