/* ==========================================================================
   qaio-contrast.css — ajuste global de contraste de texto
   --------------------------------------------------------------------------
   Se carga DESPUÉS de core.css y theme-default.css para pisar los grises del
   tema (Sneat), que sobre fondo blanco quedan por debajo de WCAG AA (4.5:1).

   Historial: el fix original usaba dos tonos (#566a7f / #5f7285). Tras un
   comparador A/B/C probado en /upload_or_combine se pasó a un color único
   (#23292f), luego #2a333c, y hoy este (#13171b) — cada cambio de decisión obligaba a
   tocar ~18 archivos (esta hoja + los <style> propios de cada template +
   2 archivos JS de charts).

   A partir de ahora la fuente única del color es la variable de abajo:
   --qaio-text. TODO lo demás — en esta hoja y en los <style> inline de los
   templates — referencia `var(--qaio-text)` en vez de un hex literal.
   El equivalente en JS (leyendas de ApexCharts) es config.colors.qaioText
   en static/assets/js/config.js.

   2026-08-24 — barrido de literales: los 152 `color:` hardcodeados que
   quedaban en los <style> de 41 templates (#4a4a4a x87, #6c757d, #333,
   #555, #666, #888, #a6a6a6, #212529) pasaron a var(--qaio-text). Para que
   la variable exista en TODAS las páginas, esta hoja ahora también se carga
   desde base-login.html y base.html (antes solo admin_base.html y
   newdashboard_base.html). Si creas un base nuevo, enlázala ahí también.
   Los `border: 1px solid #4a4a4a` de algunos inputs se dejaron como estaban:
   son bordes, no texto.

   OJO: los <style> de los templates NO son la unica fuente de texto. Dos
   hojas propias tambien pintaban texto por encima del body y tapaban el
   token (se veia en los tbody de los breakdowns de /reporting):
     · tables/css/fds-family.css  -> .qaio-table-family tbody td
     · tables/css/datatables.custom.css -> paginate/length/filter/info
   Ambas ya usan var(--qaio-text) y se cargan siempre bajo admin_base o
   newdashboard_base, asi que la variable existe. Si agregas una hoja
   propia que pinte texto, usa el token — no un hex.

   >>> Para cambiar el color del dashboard: edita SOLO la línea de abajo
       (--qaio-text) y la de config.js (qaioText). Nada más. <<<

   NO editar core.css / theme-default.css: son archivos del tema.
   ========================================================================== */

:root {
  --qaio-text: #13171b;             /* 18.01:1 sobre blanco */
  --bs-body-color: var(--qaio-text);
  --bs-body-color-rgb: 19, 23, 27;  /* mantener en sync con --qaio-text */
}

/* .text-muted se usa en ~58 templates como label secundario. */
.text-muted,
.text-muted[href]:hover,
.text-muted[href]:focus {
  color: var(--qaio-text) !important;
}

/* --------------------------------------------------------------------------
   Placeholders de inputs
   El tema los pinta #b4bdc6 -> 1.90:1, casi invisibles (se ve en el form de
   "New Campaign": Campaign Name / Notification email / Select date range).
   -------------------------------------------------------------------------- */
.form-control::placeholder,
.form-select::placeholder,
textarea.form-control::placeholder {
  color: var(--qaio-text);
  opacity: 1;
}

.form-control::-moz-placeholder,
.form-select::-moz-placeholder,
textarea.form-control::-moz-placeholder {
  color: var(--qaio-text);
  opacity: 1;
}

/* El tema vuelve a fijar #b4bdc6 en las variantes de .form-floating */
.form-floating > .form-control:focus::placeholder,
.form-floating > .form-control:not(:placeholder-shown)::placeholder {
  color: var(--qaio-text);
}

.form-floating > .form-control:focus::-moz-placeholder,
.form-floating > .form-control:not(:-moz-placeholder-shown)::-moz-placeholder {
  color: var(--qaio-text);
}

/* Texto de ayuda bajo los inputs — mismo #b4bdc6 ilegible del tema */
.form-text {
  color: var(--qaio-text);
}


/* ==========================================================================
   BARRIDO COMPLETO
   Resultado de auditar las 1032 declaraciones `color:` de core.css,
   theme-default.css, page-auth.css y los <style> de los base templates
   (75 valores distintos). Abajo van todas las que renderizan sobre fondo
   claro y no llegaban a 4.5:1 — unificadas en un solo bloque.
   -------------------------------------------------------------------------- */
.table:not(.table-dark),
.form-control,
.form-control:focus,
.form-control::file-selector-button,
.form-control-plaintext,
.form-select,
.input-group-text,
.dropdown-menu,
.dropdown-item,
.dropdown-item-text,
.page-link,
.page-link:hover,
.page-link:focus,
.list-group-item:not([class*="list-group-item-"]),
.breadcrumb-item,
.breadcrumb-item a,
.card-action .card-header .card-action-element,
.card-action .card-header .card-action-element a,
.layout-navbar,
.switch-label,
.footer.bg-white,
.footer.bg-white .footer-text,
.nav-link,
caption,
.figure-caption,
.dropdown-header,
.breadcrumb-item + .breadcrumb-item::before,
.blockquote-footer,
.link-secondary,
.footer.bg-white .footer-link {
  color: var(--qaio-text);
}

/* Regla aparte: Chrome invalida el bloque entero si no reconoce el pseudo */
.form-control::-webkit-file-upload-button {
  color: var(--qaio-text);
}

/* .alert-success/.alert-info/.alert-warning/.alert-danger: core.css les pone
   el mismo tono saturado como fondo Y como texto (ej. alert-success:
   fondo #e8fadf, texto #E6EFFF -- casi invisible, pensado para fondo oscuro).
   Detectado en admin_deleteuser (banner "Completed successfully" ilegible). */
.alert-success,
.alert-success .alert-link,
.alert-info,
.alert-info .alert-link,
.alert-warning,
.alert-warning .alert-link,
.alert-danger,
.alert-danger .alert-link {
  color: var(--qaio-text) !important;
}

/* core.css trae su propia regla para encabezados de tabla, con más
   especificidad (0,2,1) que un simple ".table": ".table:not(.table-dark) th
   {color:#566a7f}". Sin este duplicado exacto, los th quedarían en el tono
   viejo del tema mientras el resto de la tabla ya usa --qaio-text. */
.table:not(.table-dark) th {
  color: var(--qaio-text);
}


/* ==========================================================================
   PÁGINAS ESPECÍFICAS — mismo --qaio-text, clases propias de cada template
   --------------------------------------------------------------------------
   Estas clases no existen en Bootstrap/el tema; son widgets propios del
   dashboard. Viven aquí (en vez de en el <style> de cada template) para que
   un cambio de color futuro sea SOLO esta hoja + config.js.
   -------------------------------------------------------------------------- */

/* Toolbar de filtros (heatmap admin+cliente, revenue chart, saturation/vr) */
.hm-filter-btn .hm-filter-count,
.hm-filter-btn .hm-caret,
.hm-empty,
.hm-status,
.vr-filter-btn .vr-filter-count,
.vr-filter-btn .vr-caret,
.vr-status,
.vr-empty,
#revenueChartBlock .rc-filter-btn .rc-filter-count,
#revenueChartBlock .rc-filter-btn .rc-caret,
#revenueChartBlock .rc-empty,
.hod-status {
  color: var(--qaio-text);
}

/* Selección masiva de batches (admin_deleteuser / delete_multiple_batches /
   get_shopify_data — mismo widget triplicado en las 3 páginas) */
.btn-select-all,
.progress-pill,
.progress-pill.idle {
  color: var(--qaio-text);
}

/* Buscador de Full Dataset Search (admin_dataset.html + full_dataset.html) */
.fds-search-icon {
  color: var(--qaio-text);
}

/* Separador de hora en Super Spike */
.time-separator {
  color: var(--qaio-text);
}

/* Label de sección en Run Excluding (confirmación) */
.section-label {
  color: var(--qaio-text);
}

/* Nota "read-only" en Admin Google Login */
.muted {
  color: var(--qaio-text);
}

/* Input de nombre de campaña (New Campaign, Combo Sampler) */
.batch-id-input {
  color: var(--qaio-text);
}

/* New Campaign / Combine Campaigns (upload_combine.html) */
.upload-page-subtitle,
.dash-box-head,
.file-input-label,
.batch-table-title,
.selected-count,
.empty-batches {
  color: var(--qaio-text);
}

/* Labels de las toolbars de charts ("Variable (Y axis)", "Market", "Granularity"…).
   Estaban en #5a607f (5.85:1) — legible pero más claro que el resto del texto,
   lo que hacía que los controles de los reportes desentonaran. */
.hm-toolbar label,
.hod-toolbar label,
.vr-toolbar label,
#revenueChartBlock .rc-toolbar label,
#revenueChartBlock .rc-kpi-select,
.cr-controls label,
.dow-controls label,
.hod-controls label,
.mk-controls label,
.mt-controls label,
.mo-controls label,
.st-controls label,
.wk-controls label {
  color: var(--qaio-text);
}


/* ==========================================================================
   COLORES SEMÁNTICOS — NO se pasan al color del dashboard a propósito
   --------------------------------------------------------------------------
   Estos también estaban bajo 4.5:1, pero volverlos --qaio-text borraría su
   significado (un mensaje de error en negro deja de leerse como error).
   Se oscurecen dentro de su propio tono. Si prefieres dejarlos como estaban,
   basta con borrar este bloque.
   ========================================================================== */

/* Errores de validación: #ff3e1d -> 3.52:1 */
.invalid-feedback,
form .error:not(li):not(input) {
  color: #d63a17;                  /* 4.69:1 — AA, mismo rojo-naranja */
}

/* Hover de links: #787bff -> 3.46:1 (el link normal, #045CB3, ya da 6.77:1) */
a:hover {
  color: #034a91;                  /* 8.78:1 — azul primario oscurecido */
}

/* <code> inline: #e83e8c -> 3.82:1 */
code {
  color: #c2185b;                  /* 5.89:1 — mismo rosa */
}


/* ==========================================================================
   EXCLUIDO A PROPÓSITO (no tocar)
   --------------------------------------------------------------------------
   · Estados :disabled / .disabled (#c7cdd4, #b4bdc6, rgba(67,89,113,.5)):
     WCAG 1.4.3 exime a los controles deshabilitados, y oscurecerlos los haría
     parecer activos.
   · hr y .card hr (#d9dee3): ahí `color` pinta la línea, no texto.
   · .navbar.bg-*, .menu-*, .footer-dark, .dropdown-menu-dark, .btn-*,
     .badge, .alert, .bg-label-*: van sobre fondo oscuro o de color; su
     contraste real no es contra blanco.
   · .text-light / .text-lighter / .text-lightest: 0 usos en templates.
   · .valid-feedback (#e6efff -> 1.16:1): es prácticamente invisible, pero
     hereda de --bs-success, que en este tema está definido como un azul muy
     claro (#E6EFFF). Arreglarlo es decidir un color de "éxito" nuevo, no un
     ajuste de contraste — queda pendiente de tu criterio.
   ========================================================================== */