/* ===============================
   🎨 VIGMASOFT / W&K OFFICIAL THEME
   Paleta: wk_institutional_colors.html
   Tipografía: --font-sans (mismo criterio que documento institucional)
   =============================== */

: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, "Courier New", monospace;

  /* Paleta institucional W&K (fuente única — anti-fatiga en modo claro) */
  --wk-navy: #1B3A54;
  --wk-steel: #4A7FA5;
  --wk-ice: #6BA3C7;
  --wk-teal: #0099BB;
  --wk-frost: #EAF2F8;
  --wk-cloud: #F7F9FC;
  --wk-charcoal: #2D3748;
  --wk-white: #FFFFFF;

  /* Marca de agua VIGMASOFT (fondo en todos los módulos post-login) */
  --wk-logo-watermark: url('../img/logo_vigmasoft_watermark.png');
  --wk-logo-watermark-size: min(52vmin, 520px);
  --wk-logo-watermark-opacity-dark: 0.10;
  --wk-logo-watermark-opacity-light: 0.42;

  /* Tokens modo oscuro (referencia en wk-style) */
  --wk-dark-base: #3A4454;
  --wk-dark-panel: #434E60;
  --wk-dark-surface: #4B576A;
  --wk-dark-card: #536074;
  --wk-dark-card-2: #5C6A7E;
  --wk-dark-topbar: #2F3847;
  --wk-dark-border: rgba(186, 198, 212, 0.22);
  --wk-dark-border-soft: rgba(186, 198, 212, 0.14);
  --wk-dark-text: #E8EDF2;
  --wk-dark-text-muted: #AEBBC6;
  --wk-dark-text-dim: #8E9DAB;

  --wk-sidebar-width: 220px;

  /* Valores por defecto = modo claro (antes de que JS aplique data-theme) */
  --bg-primary-1: var(--wk-cloud);
  --bg-primary-2: var(--wk-frost);
  --bg-primary-3: var(--wk-white);
  --card-bg-1: var(--wk-white);
  --card-bg-2: var(--wk-frost);
  --border-soft-1: rgba(74, 127, 165, 0.35);
  --border-soft-2: var(--wk-ice);
  --text-primary-1: var(--wk-charcoal);
  --text-primary-2: var(--wk-navy);
  --text-secondary-1: var(--wk-steel);
  --text-secondary-2: rgba(45, 55, 72, 0.65);
  --icon-primary: var(--wk-navy);

  /* ===============================
     🚦 ESTADOS OFICIALES
     =============================== */
  --status-success: #2ECC71;
  --status-success-soft: rgba(46, 204, 113, 0.15);

  --status-warning: #F39C12;
  --status-warning-soft: rgba(243, 156, 18, 0.15);

  --status-info: #3498DB;
  --status-info-soft: rgba(52, 152, 219, 0.15);

  --status-danger: #E74C3C;
  --status-danger-soft: rgba(231, 76, 60, 0.15);

  --status-neutral: #95A5A6;
  --status-neutral-soft: rgba(149, 165, 166, 0.15);

  /* ===============================
     🏢 ARL — Colores oficiales
     Uso: fondo soft + borde/indicador, no fondo completo
     =============================== */
  /* COLMENA */
  --arl-colmena-primary: #00A859;
  --arl-colmena-accent: #FFD200;
  --arl-colmena-soft: rgba(0, 168, 89, 0.15);

  /* SURA */
  --arl-sura-primary: #0033A0;
  --arl-sura-soft: rgba(0, 51, 160, 0.15);

  /* BOLIVAR */
  --arl-bolivar-primary: #00843D;
  --arl-bolivar-soft: rgba(0, 132, 61, 0.15);

  /* POSITIVA */
  --arl-positiva-primary: #F58220;
  --arl-positiva-soft: rgba(245, 130, 32, 0.15);

  /* COLPATRIA */
  --arl-colpatria-primary: #C8102E;
  --arl-colpatria-soft: rgba(200, 16, 46, 0.15);

  /* SURA PYMES */
  --arl-sura-pymes-primary: #00AEEF;
  --arl-sura-pymes-soft: rgba(0, 174, 239, 0.15);

  /* Otros / fallback */
  --arl-otros-primary: #9FB6C7;
  --arl-otros-soft: rgba(159, 182, 199, 0.15);
}

/* Modo oscuro suave — plata / gris azulado */
html[data-theme="dark"] {
  --wk-dark-base: #3A4454;
  --wk-dark-panel: #434E60;
  --wk-dark-surface: #4B576A;
  --wk-dark-card: #536074;
  --wk-dark-card-2: #5C6A7E;
  --wk-dark-topbar: #2F3847;
  --wk-dark-border: rgba(186, 198, 212, 0.22);
  --wk-dark-border-soft: rgba(186, 198, 212, 0.14);
  --wk-dark-text: #E8EDF2;
  --wk-dark-text-muted: #AEBBC6;
  --wk-dark-text-dim: #8E9DAB;
  --bg-primary-1: var(--wk-dark-base);
  --bg-primary-2: var(--wk-dark-panel);
  --bg-primary-3: var(--wk-dark-surface);
  --card-bg-1: var(--wk-dark-card);
  --card-bg-2: var(--wk-dark-card-2);
  --border-soft-1: rgba(107, 163, 199, 0.45);
  --border-soft-2: rgba(132, 182, 212, 0.55);
  --text-primary-1: var(--wk-dark-text);
  --text-primary-2: #F2F5F8;
  --text-secondary-1: var(--wk-dark-text-muted);
  --text-secondary-2: var(--wk-dark-text-dim);
  --icon-primary: #E6F0F6;
}

html[data-theme="light"] {
  --bg-primary-1: var(--wk-cloud);
  --bg-primary-2: var(--wk-frost);
  --bg-primary-3: var(--wk-white);
  --card-bg-1: var(--wk-white);
  --card-bg-2: var(--wk-frost);
  --border-soft-1: rgba(74, 127, 165, 0.35);
  --border-soft-2: var(--wk-ice);
  --text-primary-1: var(--wk-charcoal);
  --text-primary-2: var(--wk-navy);
  --text-secondary-1: var(--wk-steel);
  --text-secondary-2: rgba(45, 55, 72, 0.65);
  --icon-primary: var(--wk-navy);
}

/* ===============================
   🌌 Fuente global y fondo
   =============================== */

html,
body,
.vista360-body,
.wk-app,
input,
select,
textarea,
label,
button,
.btn,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
}

body,
.vista360-body,
.wk-app {
  margin: 0;
  color: var(--text-primary-1);
}

html[data-theme="light"] body,
html[data-theme="light"] .vista360-body,
html[data-theme="light"] .wk-app {
  background: var(--wk-cloud);
  color: var(--wk-charcoal);
}

html[data-theme="dark"] body,
html[data-theme="dark"] .vista360-body,
html[data-theme="dark"] .wk-app {
  background: linear-gradient(
    135deg,
    var(--bg-primary-1),
    var(--bg-primary-2),
    var(--bg-primary-3)
  );
  color: var(--text-primary-1);
}

/* ===============================
   🧱 Tarjetas
   =============================== */

.card {
  background: linear-gradient(
    145deg,
    var(--card-bg-1),
    var(--card-bg-2)
  );
  border: 1px solid var(--border-soft-1);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 0 12px rgba(127, 166, 189, 0.15);
}

/* Cards con indicador lateral por ARL */
.card.arl-colmena { border-left: 4px solid var(--arl-colmena-primary); }
.card.arl-sura { border-left: 4px solid var(--arl-sura-primary); }
.card.arl-bolivar { border-left: 4px solid var(--arl-bolivar-primary); }
.card.arl-positiva { border-left: 4px solid var(--arl-positiva-primary); }
.card.arl-colpatria { border-left: 4px solid var(--arl-colpatria-primary); }
.card.arl-sura-pymes { border-left: 4px solid var(--arl-sura-pymes-primary); }
.card.arl-otros { border-left: 4px solid var(--arl-otros-primary); }

/* ===============================
   📝 Textos
   =============================== */

h1, h2, h3, .heading {
  color: var(--text-primary-2);
  font-family: var(--font-sans);
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] .heading {
  color: var(--wk-navy);
}

p, span, small, .text-muted {
  color: var(--text-secondary-1);
}

html[data-theme="light"] .wk-confirm-ov .wk-confirm-box h3,
html[data-theme="light"] .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 {
  background: #ffffff !important;
  color: #123047 !important;
}

/* ===============================
   🔹 Botones
   =============================== */

button,
.btn {
  font-family: "Segoe UI", "Microsoft Sans Serif", sans-serif;
  background-color: var(--card-bg-2);
  color: var(--text-primary-2);
  border: 1px solid var(--border-soft-2);
  border-radius: 10px;
  padding: 8px 16px;
  transition: 0.3s ease;
}

button:hover,
.btn:hover {
  background-color: var(--border-soft-1);
  color: var(--bg-primary-1);
}

/* ===============================
   📊 Iconos
   =============================== */

.icon,
[class*="icon-"] {
  color: var(--icon-primary);
}

/* ===============================
   🚦 BADGES ESTADOS OFICIALES
   Fondo suave + borde + texto sólido
   =============================== */

.badge-success,
.badge.estado-ejecutada,
.estado-badge.estado-ejecutada,
.estado-badge.estado-verde {
  background: var(--status-success-soft);
  color: var(--status-success);
  border: 1px solid var(--status-success);
}

.badge-warning,
.badge.estado-programada,
.estado-badge.estado-programada,
.estado-badge.estado-naranja,
.estado-badge.estado-por-vencer {
  background: var(--status-warning-soft);
  color: var(--status-warning);
  border: 1px solid var(--status-warning);
}

.badge-info,
.badge.estado-en-proceso,
.estado-badge.estado-en-proceso,
.estado-badge.estado-azul {
  background: var(--status-info-soft);
  color: var(--status-info);
  border: 1px solid var(--status-info);
}

.badge-danger,
.badge.estado-vencida,
.estado-badge.estado-vencida,
.estado-badge.estado-rojo {
  background: var(--status-danger-soft);
  color: var(--status-danger);
  border: 1px solid var(--status-danger);
}

.badge-neutral,
.badge.estado-cancelada,
.badge.estado-gris,
.estado-badge.estado-gris-oscuro,
.estado-badge.estado-gris-claro {
  background: var(--status-neutral-soft);
  color: var(--status-neutral);
  border: 1px solid var(--status-neutral);
}

/* Base badge (tamaño y forma) */
.badge-success,
.badge-warning,
.badge-info,
.badge-danger,
.badge-neutral {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-family: "Segoe UI", "Microsoft Sans Serif", sans-serif;
}

/* Modal Asignación múltiple: no aplicar color de botón global (texto blanco en oscuro) */
#modalAsignacionMulti button,
#modalAsignacionMulti .btn {
  color: #ffffff !important;
}
[data-theme="light"] #modalAsignacionMulti .btn-outline,
[data-theme="light"] #modalAsignacionMulti .modal-asignacion-tab:not(.active),
body.light-mode #modalAsignacionMulti .btn-outline,
body.light-mode #modalAsignacionMulti .modal-asignacion-tab:not(.active) {
  color: var(--wk-navy) !important;
}
[data-theme="light"] #modalAsignacionMulti .btn-primario,
body.light-mode #modalAsignacionMulti .btn-primario {
  background: var(--wk-navy) !important;
  border-color: var(--wk-navy) !important;
  color: var(--wk-white) !important;
}