/* =============================================================================
   W&K — Estilos institucionales globales (todos los roles y módulos)
   Paleta: wk_institutional_colors.html
   Tipografía: var(--font-sans) del documento de referencia
   ============================================================================= */

:root {
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}

/* Fuente única en toda la plataforma */
html,
body,
button,
input,
select,
textarea,
label,
table,
th,
td,
a,
h1, h2, h3, h4, h5, h6,
.wk-app,
.vista360-body,
.v360-wrap,
.postlogin,
.content,
.main-content,
.container,
.container-wk,
.topbar,
.sidebar,
.card,
.panel,
.modal,
.programador-dashboard,
.lider-dashboard,
.dashboard-consolidado-dir {
  font-family: var(--font-sans) !important;
}

code,
pre,
.mono,
.font-mono {
  font-family: var(--font-mono) !important;
}

/* ── Modo claro: fondo y texto base ─────────────────────────────────────── */
html[data-theme="light"],
html[data-theme="light"] body,
html[data-theme="light"] body.postlogin {
  background-color: var(--wk-cloud) !important;
  color: var(--wk-charcoal) !important;
}

/* ── Marca de agua VIGMASOFT (modo claro y oscuro) ─────────────────────────
   No alterar position del sidebar (fixed) ni del topbar (sticky). */
body.postlogin::before,
body.vista360-body.postlogin::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--wk-logo-watermark);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: var(--wk-logo-watermark-size);
  mix-blend-mode: screen;
  opacity: var(--wk-logo-watermark-opacity-dark);
}

html[data-theme="light"] body.postlogin::before,
html[data-theme="light"] body.vista360-body.postlogin::before {
  opacity: var(--wk-logo-watermark-opacity-light);
  mix-blend-mode: screen;
}

/* Órdenes: tabla densa — marca aún más tenue en modo oscuro */
body.page-ordenes-director.postlogin::before {
  opacity: 0.06;
}

body.page-ordenes-director.postlogin .content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--wk-logo-watermark);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: var(--wk-logo-watermark-size);
  mix-blend-mode: screen;
  opacity: 0.06;
}

body.page-ordenes-director.postlogin .content {
  position: relative;
}

body.page-ordenes-director.postlogin .content > * {
  position: relative;
  z-index: 1;
}

html[data-theme="light"] body.page-ordenes-director.postlogin::before,
body.light-mode.page-ordenes-director.postlogin::before {
  opacity: var(--wk-logo-watermark-opacity-light);
}

html[data-theme="light"] body.page-ordenes-director.postlogin .content::before,
body.light-mode.page-ordenes-director.postlogin .content::before {
  opacity: var(--wk-logo-watermark-opacity-light);
}

/* Módulos con panel a ancho completo (.viat-main, .content) tapan la marca del body */
body.postlogin .viat-main,
body.postlogin.director-institucional .content,
body.postlogin.director-institucional .main-content,
body.postlogin.finanzas-page .content,
body.postlogin.equipo-page .content,
body.postlogin.dashboard-consolidado-page .content {
  position: relative;
}

body.postlogin .viat-main::before,
body.postlogin.director-institucional .content::before,
body.postlogin.director-institucional .main-content::before,
body.postlogin.finanzas-page .content::before,
body.postlogin.equipo-page .content::before,
body.postlogin.dashboard-consolidado-page .content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--wk-logo-watermark);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: var(--wk-logo-watermark-size);
  opacity: var(--wk-logo-watermark-opacity-dark);
  mix-blend-mode: screen;
}

html[data-theme="light"] body.postlogin .viat-main::before,
html[data-theme="light"] body.postlogin.director-institucional .content::before,
html[data-theme="light"] body.postlogin.director-institucional .main-content::before,
html[data-theme="light"] body.postlogin.finanzas-page .content::before,
html[data-theme="light"] body.postlogin.equipo-page .content::before,
html[data-theme="light"] body.postlogin.dashboard-consolidado-page .content::before,
body.light-mode.postlogin .viat-main::before,
body.light-mode.postlogin.director-institucional .content::before,
body.light-mode.postlogin.director-institucional .main-content::before,
body.light-mode.postlogin.finanzas-page .content::before,
body.light-mode.postlogin.equipo-page .content::before,
body.light-mode.postlogin.dashboard-consolidado-page .content::before {
  opacity: var(--wk-logo-watermark-opacity-light);
  mix-blend-mode: screen;
}

body.postlogin .viat-main > *,
body.postlogin.director-institucional .content > *,
body.postlogin.director-institucional .main-content > *,
body.postlogin.finanzas-page .content > *,
body.postlogin.equipo-page .content > *,
body.postlogin.dashboard-consolidado-page .content > * {
  position: relative;
  z-index: 1;
}

/* Evita texto duplicado en el botón de tema (Modo oscuro + Oscuro) */
#wkThemeToggle .topbar-btn-label-short {
  display: none;
}

@media (max-width: 768px) {
  #wkThemeToggle .topbar-btn-label-full {
    display: none;
  }

  #wkThemeToggle .topbar-btn-label-short {
    display: inline;
  }
}

/* ── Modo oscuro suave (plata / gris azulado) ───────────────────────────── */
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] body.postlogin {
  background-color: var(--wk-dark-base, #3A4454) !important;
  color: var(--wk-dark-text, #E8EDF2) !important;
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .vista360-topbar {
  background: var(--wk-dark-topbar, #2F3847) !important;
  border-color: var(--wk-dark-border-soft, rgba(186, 198, 212, 0.14)) !important;
  color: var(--wk-dark-text, #E8EDF2) !important;
}

html[data-theme="dark"] .sidebar {
  background: var(--wk-dark-panel, #434E60) !important;
  border-color: var(--wk-dark-border-soft, rgba(186, 198, 212, 0.14)) !important;
}

html[data-theme="dark"] .sidebar a,
html[data-theme="dark"] .sidebar .nav-item {
  color: var(--wk-dark-text-muted, #AEBBC6) !important;
}

html[data-theme="dark"] .sidebar a:hover,
html[data-theme="dark"] .sidebar a.active,
html[data-theme="dark"] .sidebar .nav-item:hover,
html[data-theme="dark"] .sidebar .nav-item.active {
  background: rgba(107, 163, 199, 0.12) !important;
  color: var(--wk-dark-text, #E8EDF2) !important;
  border-left-color: var(--wk-ice, #6BA3C7) !important;
}

html[data-theme="dark"] .content,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel {
  background: var(--wk-dark-card, #536074) !important;
  border-color: var(--wk-dark-border-soft, rgba(186, 198, 212, 0.14)) !important;
  color: var(--wk-dark-text, #E8EDF2) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .module-title {
  color: var(--wk-dark-text, #E8EDF2) !important;
}

html[data-theme="dark"] .nav-section-label,
html[data-theme="dark"] .topbar-subtitle,
html[data-theme="dark"] small,
html[data-theme="dark"] .text-muted {
  color: var(--wk-dark-text-muted, #AEBBC6) !important;
}

/* ── Títulos de módulo (Navy #1B3A54 — headings, navbar) ─────────────────── */
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6,
html[data-theme="light"] .page-title,
html[data-theme="light"] .page-header h1,
html[data-theme="light"] .page-header h2,
html[data-theme="light"] .hero-title,
html[data-theme="light"] .module-title,
html[data-theme="light"] .section-title,
html[data-theme="light"] .panel-title,
html[data-theme="light"] .card-title,
html[data-theme="light"] .content > h1,
html[data-theme="light"] .content > h2,
html[data-theme="light"] .main-content > h1,
html[data-theme="light"] .main-content > h2,
html[data-theme="light"] .container > h1,
html[data-theme="light"] .container > h2,
html[data-theme="light"] .container-wk > h1,
html[data-theme="light"] .container-wk > h2,
html[data-theme="light"] .programador-hero h1,
html[data-theme="light"] .programador-hero h2,
html[data-theme="light"] .programador-dashboard h1,
html[data-theme="light"] .programador-dashboard h2,
html[data-theme="light"] .lider-dashboard h1,
html[data-theme="light"] .lider-dashboard h2,
html[data-theme="light"] .dashboard-consolidado-dir .page-title,
html[data-theme="light"] .logo-text {
  color: var(--wk-navy) !important;
}

/* Texto de párrafo / cuerpo */
html[data-theme="light"] p,
html[data-theme="light"] .content,
html[data-theme="light"] .main-content,
html[data-theme="light"] .container,
html[data-theme="light"] .container-wk {
  color: var(--wk-charcoal);
}

html[data-theme="light"] .page-subtitle,
html[data-theme="light"] small,
html[data-theme="light"] .text-muted,
html[data-theme="light"] .nav-section-label,
html[data-theme="light"] .logo-sub {
  color: var(--wk-steel) !important;
}

/* Enlaces */
html[data-theme="light"] a:not(.btn):not(.nav-item):not(.sidebar a) {
  color: var(--wk-ice);
}

html[data-theme="light"] a:not(.btn):not(.nav-item):hover {
  color: var(--wk-navy);
}

/* Topbar / navbar */
html[data-theme="light"] .topbar,
html[data-theme="light"] .vista360-topbar {
  background: var(--wk-navy) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--wk-frost) !important;
}

html[data-theme="light"] .topbar-user,
html[data-theme="light"] .topbar .topbar-subtitle {
  color: rgba(234, 242, 248, 0.92) !important;
}

/* Sidebar */
html[data-theme="light"] .sidebar {
  background: var(--wk-white) !important;
  border-color: rgba(27, 58, 84, 0.12) !important;
}

html[data-theme="light"] .sidebar a,
html[data-theme="light"] .sidebar .nav-item {
  color: var(--wk-steel) !important;
}

html[data-theme="light"] .sidebar a:hover,
html[data-theme="light"] .sidebar a.active,
html[data-theme="light"] .sidebar .nav-item:hover,
html[data-theme="light"] .sidebar .nav-item.active {
  background: var(--wk-frost) !important;
  color: var(--wk-navy) !important;
  border-left-color: var(--wk-teal) !important;
}

/* Cards y paneles */
html[data-theme="light"] .card,
html[data-theme="light"] .container,
html[data-theme="light"] .container-wk,
html[data-theme="light"] .panel,
html[data-theme="light"] .programador-hero {
  background: var(--wk-white) !important;
  border-color: rgba(27, 58, 84, 0.1) !important;
  color: var(--wk-charcoal) !important;
}

html[data-theme="light"] .content,
html[data-theme="light"] .main-content {
  background: var(--wk-white);
  border-color: rgba(27, 58, 84, 0.1);
  color: var(--wk-charcoal);
}

/* Botones primarios */
html[data-theme="light"] .btn-primario,
html[data-theme="light"] button.btn-primary,
html[data-theme="light"] .btn-primary {
  background: var(--wk-steel) !important;
  border-color: var(--wk-navy) !important;
  color: var(--wk-white) !important;
}

html[data-theme="light"] .btn-primario:hover,
html[data-theme="light"] button.btn-primary:hover {
  background: var(--wk-navy) !important;
}

/* Tablas */
html[data-theme="light"] .table-wk thead th,
html[data-theme="light"] table thead th {
  background: var(--wk-frost) !important;
  color: var(--wk-navy) !important;
}

html[data-theme="light"] .table-wk td,
html[data-theme="light"] table tbody td {
  color: var(--wk-charcoal) !important;
}

/* Anular fuentes externas (Rajdhani, Exo, Syne, Orbitron en módulos viejos) */
html[data-theme="light"] [style*="font-family: Rajdhani"],
html[data-theme="light"] [style*="font-family: Exo"],
html[data-theme="light"] .programador-hero,
html[data-theme="light"] .programador-dashboard * {
  font-family: var(--font-sans) !important;
}

/* Topbar navy: texto claro en modo claro (todos los tenants) */
html[data-theme="light"] .topbar .topbar-meta strong,
html[data-theme="light"] .vista360-topbar .vista360-topbar-meta strong {
  color: var(--wk-white) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--wk-white) !important;
}

html[data-theme="light"] .topbar .topbar-subtitle,
html[data-theme="light"] .topbar .topbar-label,
html[data-theme="light"] .topbar .topbar-user {
  color: rgba(234, 242, 248, 0.92) !important;
}

/* Diálogos wk-confirm: el tema claro pinta h3/p en navy; si la caja también es navy el texto no se lee */
html[data-theme="light"] .wk-confirm-ov .wk-confirm-box,
html[data-theme="dark"] .wk-confirm-ov .wk-confirm-box,
.wk-confirm-ov .wk-confirm-box {
  background: #ffffff !important;
  color: #123047 !important;
  border: 1px solid #9eb4cc !important;
}

html[data-theme="light"] .wk-confirm-ov .wk-confirm-box h3,
html[data-theme="light"] .wk-confirm-ov .wk-confirm-box p,
html[data-theme="dark"] .wk-confirm-ov .wk-confirm-box h3,
html[data-theme="dark"] .wk-confirm-ov .wk-confirm-box p,
.wk-confirm-ov .wk-confirm-box h3,
.wk-confirm-ov .wk-confirm-box p {
  color: #123047 !important;
}

.wk-confirm-ov .wk-confirm-box h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.wk-confirm-ov .wk-confirm-box p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}

html[data-theme="light"] .wk-confirm-ov .wk-confirm-ok,
html[data-theme="light"] .wk-confirm-ov a.wk-confirm-ok,
.wk-confirm-ov .wk-confirm-ok,
.wk-confirm-ov a.wk-confirm-ok {
  background: #0099bb !important;
  color: #ffffff !important;
}

html[data-theme="light"] .wk-confirm-ov .wk-confirm-no,
.wk-confirm-ov .wk-confirm-no {
  background: #ffffff !important;
  color: #123047 !important;
  border: 1px solid #9eb4cc !important;
}