/* ════════════════════════════════════════════════════════════
   CENTRAL DE ÁNGELES — Re-skin de MÓDULOS legacy (páginas embebidas
   en iframe dentro de una pestaña del shell: #dvbody / #dvtitulo /
   TabContainer de AjaxControlToolkit / .fondo-glass / botones).
   Compartido por varias páginas (Br_Rastreadores, Browser_Rastreadores,
   BrAlertas, VerReporteDiario, PanelDeControl, movil_UltimaLocaliza…).

   • AUTOCONTENIDO: tokens propios (--c-*). NO carga cean-ui/css/tokens.css.
   • IMPORTANTE — riesgo de contraste: `CentAnge.css` define
     `#dvbody { color: white !important }` porque estas páginas asumen
     un fondo oscuro/de marca inyectado en runtime por el servidor
     (`<link id="FileCss" runat="server">`, vacío en este entorno).
     Por eso este skin NO toca `#dvbody` ni su fondo: solo introduce
     superficies (tarjetas) con su PROPIO fondo claro Y su PROPIO color
     de texto oscuro emparejados explícitamente, para no depender de
     ese fondo desconocido ni heredar el `color:white` global.
   • No invasivo: solo CSS sobre los IDs/clases YA existentes en el
     markup (#dvtitulo, .fondo-glass, .ajax__tab_*, .btn). No se agregan
     clases nuevas al HTML.
   ════════════════════════════════════════════════════════════ */

:root {
  --c-bg:             #E8EEF7;
  --c-surface:        #FFFFFF;
  --c-surface-3:      #EBF0F9;
  --c-border-1:       #C8D6EC;
  --c-border-2:       #D8E4F2;
  --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;
  --c-shadow:         0 1px 3px rgba(15,32,68,.08);
}

/* ── OSCURO ──────────────────────────────────────────────────
   Sigue la misma preferencia global que el resto de la app
   (localStorage 'cean-theme', ver el bootstrap de tema que ya trae
   MBrowserGrid.ascx y movil_HistoricoLocalizaWeb.aspx). Como cada
   regla de este archivo ya usa var(--c-*), con solo redefinir los
   tokens aquí se pone oscuro TODO: #dvbody, #dvtitulo, .fondo-glass
   y las pestañas AjaxControlToolkit (.ajax__tab_*). En páginas que no
   tengan el bootstrap de tema, html nunca tiene data-theme="dark", así
   que este bloque queda inerte — no cambia nada para ellas. */
html[data-theme="dark"] {
  --c-bg:             #0A1628;
  --c-surface:        #1E2D4A;
  --c-surface-3:      #243558;
  --c-border-1:       rgba(176,197,222,0.14);
  --c-border-2:       rgba(176,197,222,0.10);
  --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);
  --c-shadow:         0 1px 4px rgba(0,0,0,0.3);
}

/* ══════════════════════════════════════════════════════════
   FONDO Y TEXTO DETERMINISTAS  (arregla "las letras no se ven")
   ──────────────────────────────────────────────────────────
   PROBLEMA: CentAnge.css define  #dvbody { color: white !important }
   porque estas páginas asumían un fondo OSCURO inyectado en runtime
   (el fondo satelital / de marca vía <link id="FileCss">). Cuando ese
   fondo no llega —o es claro— TODO el texto queda blanco sobre claro,
   es decir, invisible. Se vio en Panel de Control: el título y
   "Seleccione un Rastreador" desaparecían.

   SOLUCIÓN: dejar de depender de un fondo desconocido. Estas páginas
   (las que enlazan este archivo) fijan su PROPIO fondo claro y su
   PROPIO color de texto oscuro, emparejados. Esto además quita el
   fondo satelital viejo, que es justo el look que estamos reemplazando.

   Si algún cliente necesita conservar su fondo de marca, basta con no
   enlazar este CSS en esa página.
   ══════════════════════════════════════════════════════════ */
body {
  background: var(--c-bg) !important;
  background-image: none !important;
}
#dvbody {
  background: transparent !important;
  color: var(--c-text-2) !important;   /* gana al color:white heredado */
}
/* Texto suelto dentro de los contenedores del módulo (p. ej. el
   "Seleccione un Rastreador" que vive en un <div> dentro de #Pnl_grid) */
#dvbody div,
#dvbody span,
#dvbody td,
#dvbody label,
#dvbody p,
#Pnl_grid,
#Pnl_grid div { color: var(--c-text-2); }
#dvbody a { color: var(--c-electric) !important; }

/* ── Título del módulo (#dvtitulo) ───────────────────────── */
/* CentAnge.css lo deja con width:5% (residual) y color:white heredado
   del fondo desconocido; aquí se convierte en una barra propia. */
#dvtitulo {
  width: 100% !important;
  box-sizing: border-box;
  background: var(--c-surface) !important;
  color: var(--c-text-1) !important;
  border: 1px solid var(--c-border-1);
  border-radius: var(--c-radius);
  padding: 10px 16px !important;
  margin: 0 0 10px 0 !important;
  font-family: var(--c-font);
  font-size: 1rem !important;
  box-shadow: var(--c-shadow);
}

/* ── Paneles "glass" (filtros, gráficas) ─────────────────── */
/* Se vuelven tarjetas opacas con texto propio (evita heredar el
   color:white de #dvbody sobre un fondo ahora claro). */
.fondo-glass {
  background: var(--c-surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--c-border-1) !important;
  border-radius: var(--c-radius) !important;
  box-shadow: var(--c-shadow);
  color: var(--c-text-2) !important;
  font-family: var(--c-font);
  /* Tamaño por defecto (sin !important): páginas como Br_Rastreadores.aspx
     ya traen su propio font-size inline (12px / small) en la tabla y ese
     sigue ganando. Esto solo cubre las que no lo tienen (ej.
     movil_UltimaLocaliza.aspx), que sin esto heredaban el tamaño por
     defecto del navegador (~16px) y se veían más grandes que el resto. */
  font-size: 13px;
}
.fondo-glass td,
.fondo-glass label,
.fondo-glass span { color: var(--c-text-2) !important; }
.fondo-glass td.alignright { color: var(--c-text-3) !important; font-weight: 600; }

/* ── Inputs y selects (filtros: asp:TextBox / asp:DropDownList) ──
   Estos controles quedaban con el estilo nativo del navegador (gris,
   sin radio, sin foco visible) porque este archivo solo cubría
   contenedores/texto/pestañas/botones, no los controles de formulario.
   Pantallas: movil_UltimaLocaliza, MBrowser_Geocercas, BrLugares (y
   cualquier otra que enlace este archivo).
   :not(.input) evita pisar los controles que ya usan el estilo más
   nuevo de cean-ui/css/components/forms.css (ej. BrAlertas.aspx,
   dentro de su propio #TCMain con cean-tabmenu-legacy.css). */
#dvbody input[type="text"]:not(.input),
#dvbody input[type="password"]:not(.input),
#dvbody input[type="number"]:not(.input),
#dvbody select:not(.input) {
  background: var(--c-surface);
  border: 1.5px solid var(--c-border-1);
  border-radius: var(--c-radius);
  padding: 7px 12px;
  font-family: var(--c-font);
  font-size: 13px;
  color: var(--c-text-1);
  outline: none;
  box-shadow: var(--c-shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}
#dvbody select:not(.input) { cursor: pointer; }
#dvbody input[type="text"]:not(.input):focus,
#dvbody input[type="password"]:not(.input):focus,
#dvbody input[type="number"]:not(.input):focus,
#dvbody select:not(.input):focus {
  border-color: var(--c-electric);
  box-shadow: 0 0 0 3px rgba(0,87,255,0.12);
}
#dvbody input[type="text"]:not(.input)[readonly],
#dvbody input[type="text"]:not(.input):disabled,
#dvbody input[type="number"]:not(.input):disabled,
#dvbody select:not(.input):disabled {
  background: var(--c-surface-3);
  color: var(--c-text-4);
  cursor: not-allowed;
}

/* ── Pestañas AjaxControlToolkit (cc1:TabContainer) ──────── */
.ajax__tab_outer,
.ajax__tab_inner { background: none !important; border: none !important; overflow-y: hidden !important; }
.ajax__tab_header {
  display: flex !important;
  gap: 6px;
  padding: 4px 4px 0 4px !important;
  background: transparent !important;
  overflow-x: auto;
  overflow-y: hidden !important;
  font-family: var(--c-font);
}
.ajax__tab_tab {
  padding: 9px 16px !important;
  border-radius: 10px 10px 0 0 !important;
  background: var(--c-surface-3) !important;
  color: var(--c-text-3) !important;
  font-weight: 600 !important;
  white-space: nowrap;
  cursor: pointer;
}
.ajax__tab_active .ajax__tab_tab {
  background: var(--c-surface) !important;
  color: var(--c-electric) !important;
}
.ajax__tab_body {
  background: var(--c-surface) !important;
  color: var(--c-text-2) !important;
  border: 1px solid var(--c-border-1) !important;
  border-radius: 0 0 var(--c-radius) var(--c-radius) !important;
  padding: 14px !important;
  font-family: var(--c-font);
}

/* ── Scrollbar (página + paneles internos) ───────────────────
   Usa --c-border-1/--c-text-4, que ya cambian bajo
   html[data-theme="dark"] arriba, así que sigue el tema activo sin
   necesitar reglas de oscuro aparte. Cubre el scroll de la página
   (html) y los contenedores internos que hacen scroll propio
   (#dvbody, #Pnl_grid, .fondo-glass, .ajax__tab_body). */
html,
#dvbody,
#Pnl_grid,
.fondo-glass,
.ajax__tab_body {
  scrollbar-width: thin;
  scrollbar-color: var(--c-border-1) transparent;
}
html::-webkit-scrollbar,
#dvbody::-webkit-scrollbar,
#Pnl_grid::-webkit-scrollbar,
.fondo-glass::-webkit-scrollbar,
.ajax__tab_body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
html::-webkit-scrollbar-track,
#dvbody::-webkit-scrollbar-track,
#Pnl_grid::-webkit-scrollbar-track,
.fondo-glass::-webkit-scrollbar-track,
.ajax__tab_body::-webkit-scrollbar-track {
  background: transparent;
}
html::-webkit-scrollbar-thumb,
#dvbody::-webkit-scrollbar-thumb,
#Pnl_grid::-webkit-scrollbar-thumb,
.fondo-glass::-webkit-scrollbar-thumb,
.ajax__tab_body::-webkit-scrollbar-thumb {
  background: var(--c-border-1);
  border-radius: 999px;
}
html::-webkit-scrollbar-thumb:hover,
#dvbody::-webkit-scrollbar-thumb:hover,
#Pnl_grid::-webkit-scrollbar-thumb:hover,
.fondo-glass::-webkit-scrollbar-thumb:hover,
.ajax__tab_body::-webkit-scrollbar-thumb:hover {
  background: var(--c-text-4);
}

/* ── Calendario AjaxControlToolkit (cc1:CalendarExtender) ────
   Mismo problema que #dvtitulo/.fondo-glass más arriba: el popup del
   calendario (clases ajax__calendar_*, confirmadas leyendo el binario
   de AjaxControlToolkit.dll — no vienen de ningún .css del proyecto,
   AjaxControlToolkit las inyecta con su propio estilo por defecto)
   puede terminar heredando el color:white !important de #dvbody si
   queda anidado ahí, y su fondo por defecto es blanco — texto blanco
   sobre blanco, invisible. Mismo criterio: fondo y color de texto
   propios, explícitos, con los mismos --c-* de arriba (así sigue el
   tema claro/oscuro activo sin reglas aparte). */
.ajax__calendar {
  font-family: var(--c-font) !important;
}
.ajax__calendar_container {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border-1) !important;
  border-radius: var(--c-radius) !important;
  box-shadow: var(--c-shadow) !important;
  padding: 6px 10px 10px !important;
}
/* AjaxControlToolkit trae su propio fondo (blanco) por celda/fila/tabla
   además del que ya se puso arriba en .ajax__calendar_container — sin
   esto quedaba un tablero de dos tonos (cada celda con su propio fondo
   por defecto asomándose sobre el de la tarjeta). Todo transparente acá
   para que se vea un solo fondo parejo, el de la tarjeta. */
.ajax__calendar_body,
.ajax__calendar_days,
.ajax__calendar_days table,
.ajax__calendar_days tr,
.ajax__calendar_months,
.ajax__calendar_months table,
.ajax__calendar_months tr,
.ajax__calendar_years,
.ajax__calendar_years table,
.ajax__calendar_years tr,
.ajax__calendar_header,
.ajax__calendar_day,
.ajax__calendar_dayname,
.ajax__calendar_month,
.ajax__calendar_year {
  background: transparent !important;
  border: none !important;
}
.ajax__calendar_title {
  color: var(--c-text-1) !important;
  font-weight: 600 !important;
}
.ajax__calendar_next,
.ajax__calendar_prev {
  color: var(--c-text-3) !important;
}
.ajax__calendar_title:hover,
.ajax__calendar_next:hover,
.ajax__calendar_prev:hover {
  color: var(--c-electric) !important;
  cursor: pointer;
}
.ajax__calendar_dayname {
  color: var(--c-text-3) !important;
  font-weight: 600 !important;
}
.ajax__calendar_day,
.ajax__calendar_month,
.ajax__calendar_year {
  color: var(--c-text-2) !important;
}
.ajax__calendar_other { color: var(--c-text-4) !important; }
.ajax__calendar_day:hover,
.ajax__calendar_month:hover,
.ajax__calendar_year:hover,
.ajax__calendar_hover {
  background: var(--c-electric-light) !important;
  color: var(--c-electric) !important;
  cursor: pointer;
}
/* _active = celda con foco de teclado (no necesariamente la fecha ya
   escrita en el textbox) — se marca con contorno, no relleno sólido,
   para no confundirla con hover/today. */
.ajax__calendar_active {
  outline: 1.5px solid var(--c-electric) !important;
  outline-offset: -1px;
  border-radius: 4px;
}
/* _today también envuelve el texto del footer ("Today: ...") —
   ahí se ve como texto, no como celda con fondo. */
.ajax__calendar_day.ajax__calendar_today {
  font-weight: 700 !important;
  color: var(--c-electric) !important;
}
.ajax__calendar_footer {
  border-top: 1px solid var(--c-border-1) !important;
  margin-top: 6px !important;
  padding-top: 6px !important;
}
.ajax__calendar_footer .ajax__calendar_today {
  color: var(--c-text-3) !important;
  font-weight: 400 !important;
}

/* ── Botones (.btn / .btn-primary / .btn-secondary) ──────── */
/* Ya traen fondo+color propios (sin riesgo de herencia); solo se
   moderniza forma y hover. */
.btn, .btn-primary, .btn-primary-small, .btn-secondary {
  border-radius: 999px !important;
  font-family: var(--c-font);
  font-weight: 600 !important;
  border: none;
  cursor: pointer;
  transition: filter .15s ease, background .15s ease;
}
.btn-primary:hover, .btn-primary-small:hover { filter: brightness(1.08); }
.btn-secondary { background: var(--c-surface-3) !important; color: var(--c-text-2) !important; }
.btn-secondary:hover { background: var(--c-border-2) !important; }