/* ════════════════════════════════════════════════════════════
   CENTRAL DE ÁNGELES — Re-skin de la TABLA legacy (GridView .grid)
   Aplica el lenguaje visual nuevo (cean-ui) al GridView compartido
   UserControls/MBrowserGrid.ascx  →  <table class="grid">.
   Como ese control lo usan ~22 páginas, esto moderniza la tabla de
   todos esos módulos de una sola vez.

   • AUTOCONTENIDO: define sus propios tokens (--c-*). NO carga
     tokens.css, porque tokens.css trae reglas globales (html/body/a/
     font-size) que romperían las páginas legacy.
   • NO invasivo: solo estilos; no toca la lógica de datos ni el VB.
   • Se enlaza con un <link>. La prueba final (con datos reales) la
     hace el programador en su servidor.
   ════════════════════════════════════════════════════════════ */

/* Tokens locales en el contenedor del grid; los descendientes heredan */
#tbGrid {
  --c-surface:        #FFFFFF;
  --c-bg:             #E8EEF7;
  --c-surface-3:      #EBF0F9;
  --c-border-1:       #C8D6EC;
  --c-border-2:       #D8E4F2;
  --c-border-3:       #E8EEF7;
  --c-text-1:         #0F2044;
  --c-text-2:         #2D4A7A;
  --c-text-3:         #48679B;
  --c-text-4:         #5D739C;
  --c-electric:       #0057FF;
  --c-electric-light: #E8EFFE;
  --c-radius:         12px;
  --c-font:           'Inter', 'Segoe UI', Arial, sans-serif;
}

/* ── OSCURO ──────────────────────────────────────────────────
   Mismos valores que ya usa cean-module-legacy.css/cean-tabmenu-legacy.css
   para el resto de la página (esta tabla siempre se carga junto con esos
   archivos). Sin esto, la fila seleccionada (fondo claro fijo
   --c-electric-light + texto oscuro fijo --c-text-1) se veía lavada/casi
   ilegible en modo oscuro: quedaba clara sobre un tema que en el resto de
   la página ya es oscuro. Con este bloque, toda la tabla (no solo la fila
   seleccionada) sigue el tema activo (localStorage 'cean-theme'). */
html[data-theme="dark"] #tbGrid {
  --c-surface:        #1E2D4A;
  --c-bg:             #0A1628;
  --c-surface-3:      #243558;
  --c-border-1:       rgba(176,197,222,0.14);
  --c-border-2:       rgba(176,197,222,0.10);
  --c-border-3:       rgba(176,197,222,0.08);
  --c-text-1:         #F0F4FF;
  --c-text-2:         #DCE4F7;
  --c-text-3:         #9FB0D0;
  --c-text-4:         #8296BD;
  --c-electric:       #6BA5FF;
  --c-electric-light: rgba(0,87,255,0.15);
}

/* Contenedor exterior */
#tbGrid { width: 100%; border-collapse: collapse; }
#tbGrid td.gridcontainer { padding: 0; }

/* ── Tabla ─────────────────────────────────────────────── */
table.grid {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-surface);
  font-family: var(--c-font) !important;
  border: 1px solid var(--c-border-1);
  border-radius: var(--c-radius);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15,32,68,0.08);
}

/* ── Encabezado ────────────────────────────────────────── */
/* font-family explícito (antes solo se heredaba de table.grid): en un
   servidor real, CentAnge.css puede traer su propia regla para ".grid th"
   con una fuente distinta (ya pasó con ".altrow" — la copia local de
   CentAnge.css no siempre coincide con la del servidor). Con !important
   directo en el th ya no depende de que nada rompa la herencia.

   table.grid tr:first-child td: en páginas donde el GridView autogenera
   columnas (AutoGenerateColumns=True, sin declararlas a mano con
   AddBoundField — ej. MBrowser_Geocercas.aspx), "UseAccessibleHeader" no
   está seteado en ningún lado. Si en este entorno/versión de .NET queda en
   false, la fila de encabezado se renderiza con <td> en vez de <th> y
   "table.grid th" nunca la alcanza. Esta regla cubre ese caso: como el
   GridView siempre pone la fila de encabezado primero, ":first-child"
   la identifica sin importar si terminó siendo <th> o <td>. */
/* var(--token, #hex): además de #tbGrid (cean-grid-legacy.css) y :root
   (cean-module-legacy.css), hay controles que comparten CssClass="grid"
   sin ninguno de los dos alrededor — ej. UserControls/PnlGridView.ascx
   ("Seleccione un Rastreador"), que no envuelve su GridView en #tbGrid.
   Sin un token --c-text-4 definido en ningún ancestro, "color: var(--c-text-4)"
   no resuelve a nada válido y el navegador la descarta entera, cayendo al
   azul de link por defecto del navegador para el <a> del encabezado
   ordenable. El segundo argumento de var() es el valor si la variable no
   existe — así siempre hay un color/fuente correctos, existan o no los
   tokens alrededor. */
table.grid th,
table.grid tr:first-child td {
  text-align: left;
  background: var(--c-bg, #E8EEF7);
  color: var(--c-text-4, #5D739C) !important;
  font-family: var(--c-font, 'Inter', 'Segoe UI', Arial, sans-serif) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 10px 14px;
  border-bottom: 1.5px solid var(--c-border-1, #C8D6EC);
  white-space: nowrap;
}
/* Enlaces de ordenamiento (AllowSorting) dentro del th */
table.grid th a { color: var(--c-text-4, #5D739C) !important; font-family: var(--c-font, 'Inter', 'Segoe UI', Arial, sans-serif) !important; text-decoration: none; }
table.grid th a:hover { color: var(--c-text-2, #2D4A7A) !important; text-decoration: underline; }

/* ── Celdas / filas ────────────────────────────────────── */
table.grid td {
  padding: 9px 14px;
  font-size: 13px;
  font-family: var(--c-font, 'Inter', 'Segoe UI', Arial, sans-serif) !important;
  color: var(--c-text-2, #2D4A7A);
  border-bottom: 1px solid var(--c-border-3, #E8EEF7);
  white-space: nowrap;
}
table.grid tbody tr { transition: background 0.12s ease; }
table.grid tr:hover td { background: var(--c-surface-3); }

/* Fila alterna (AlternatingRowStyle CssClass="altrow") */
/* !important + fondo OPACO: antes era un tinte casi transparente
   (rgba(0,87,255,0.022)), pensado como un realce sutil sobre el fondo
   normal. En un servidor real, CentAnge.css tiene ".altrow" con un azul
   marino sólido SIN condicionar al tema (no es cosa de este checkout: la
   copia local de CentAnge.css sigue con su valor original #f2f2f2) — como
   esa regla pinta el <tr> y la de acá solo pintaba el <td> con un tinte
   casi invisible, el marino de abajo se veía a través sin importar el
   tema. Con un fondo opaco + !important esto ya no depende de qué color
   traiga CentAnge.css debajo. */
table.grid .altrow td { background: var(--c-surface-3) !important; }
table.grid .altrow:hover td { background: var(--c-border-2) !important; }

/* Fila seleccionada (SelectedRowStyle CssClass="selectedrow") */
/* !important: sin esto, "#dvbody td { color: var(--c-text-2) }" de
   cean-module-legacy.css le gana a esta regla por especificidad (un
   selector con #dvbody —un ID— vence a table.grid .selectedrow —puras
   clases— sin importar cuántas clases tenga este último). Eso dejaba el
   texto de la fila seleccionada con el color equivocado en vez del
   pensado para contrastar con --c-electric-light. */
table.grid .selectedrow td {
  background: var(--c-electric-light) !important;
  color: var(--c-text-1) !important;
  box-shadow: inset 3px 0 0 var(--c-electric);
}

/* Columnas ocultas (CssClass="ColumnaOculta") — se respetan */
.ColumnaOculta { display: none !important; }

/* ── Botón "Selec." (CommandField, primera columna) ────── */
table.grid input[type="button"],
table.grid input[type="submit"] {
  font-family: var(--c-font);
  font-size: 12px;
  font-weight: 600;
  color: var(--c-electric);
  background: var(--c-electric-light);
  border: 1px solid rgba(0,87,255,0.25);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
table.grid input[type="button"]:hover,
table.grid input[type="submit"]:hover {
  background: var(--c-electric);
  color: #FFFFFF;
}

/* Checkbox de selección múltiple */
table.grid input[type="checkbox"] { accent-color: var(--c-electric); cursor: pointer; }

/* ── Paginación (PagerStyle CssClass="pagerstyle") ─────── */
.pagerstyle {
  background: var(--c-bg);
  color: var(--c-text-3);
  font-family: var(--c-font);
  font-size: 12px;
}
.pagerstyle td { padding: 8px 12px; }
/* Todo el contenido del pager es inline (select/input/label/botones) con
   alturas distintas; sin esto cada uno se alinea a su "baseline" de texto
   y quedan escalonados en vez de centrados en la fila. */
.pagerstyle select,
.pagerstyle label,
.pagerstyle span,
.pagerstyle input,
.pagerstyle .letranormal,
.pagerstyle .paggo,
.pagerstyle .pagfirst,
.pagerstyle .pagprev,
.pagerstyle .pagnext,
.pagerstyle .paglast {
  vertical-align: middle;
}
.pagerstyle select,
.pagerstyle .letranormal,
.pagerstyle input[type="text"],
.pagerstyle .paggo {
  font-family: var(--c-font);
  font-size: 12px;
  border: 1px solid var(--c-border-1);
  border-radius: 8px;
  padding: 3px 6px;
  color: var(--c-text-2);
  background: #FFFFFF;
}
.pagerstyle .paggo { width: 46px; text-align: center; }

/* La fila de paginación no es un registro de datos: no debe reaccionar
   al hover genérico de filas ("table.grid tr:hover td"), que la pintaba
   como si fuera una fila más de la tabla al pasar el mouse. */
table.grid tr.pagerstyle:hover td {
  background: var(--c-bg) !important;
}

/* Botones de página (first / prev / next / last) */
/* Antes traían su ícono de CentAnge.css ("../imagenes/GridViewBlue/*.png",
   background como shorthand). Esta regla también usa "background" como
   shorthand (antes solo con color, sin imagen) y por cargarse DESPUÉS de
   CentAnge.css en el documento le ganaba en la cascada — no por
   especificidad, sino por orden, ya que ambas reglas son ".pagXxx" con la
   misma especificidad — y "background" resetea "background-image" a su
   valor inicial aunque no se lo mencione explícitamente. Resultado: los
   íconos dejaban de verse. Se reemplaza por un ícono propio (SVG inline,
   sin depender de las imágenes viejas) usando background-color +
   background-image por separado, con variante para modo oscuro. */
.pagfirst, .pagprev, .pagnext, .paglast {
  font-family: var(--c-font);
  font-size: 0 !important;
  color: transparent !important;
  min-width: 30px !important;
  height: 28px !important;
  border: 1px solid var(--c-border-1) !important;
  border-radius: 8px !important;
  background-color: var(--c-surface) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.pagfirst:hover, .pagprev:hover, .pagnext:hover, .paglast:hover {
  background-color: var(--c-surface-3) !important;
}
.pagfirst:disabled, .pagprev:disabled, .pagnext:disabled, .paglast:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Íconos — CLARO (trazo #2D4A7A = --c-text-2 en claro) */
.pagfirst {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D4A7A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='17 5 9 12 17 19'/%3E%3Cline x1='6' y1='5' x2='6' y2='19'/%3E%3C/svg%3E") !important;
}
.pagprev {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D4A7A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 5 8 12 15 19'/%3E%3C/svg%3E") !important;
}
.pagnext {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D4A7A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 5 16 12 9 19'/%3E%3C/svg%3E") !important;
}
.paglast {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D4A7A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 5 15 12 7 19'/%3E%3Cline x1='18' y1='5' x2='18' y2='19'/%3E%3C/svg%3E") !important;
}

/* Íconos — OSCURO (trazo #DCE4F7 = --c-text-2 en oscuro) */
html[data-theme="dark"] #tbGrid .pagfirst {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCE4F7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='17 5 9 12 17 19'/%3E%3Cline x1='6' y1='5' x2='6' y2='19'/%3E%3C/svg%3E") !important;
}
html[data-theme="dark"] #tbGrid .pagprev {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCE4F7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 5 8 12 15 19'/%3E%3C/svg%3E") !important;
}
html[data-theme="dark"] #tbGrid .pagnext {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCE4F7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 5 16 12 9 19'/%3E%3C/svg%3E") !important;
}
html[data-theme="dark"] #tbGrid .paglast {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCE4F7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 5 15 12 7 19'/%3E%3Cline x1='18' y1='5' x2='18' y2='19'/%3E%3C/svg%3E") !important;
}