/* =============================================
   VECTORK — Capa de pulido UI (compartida)
   Se carga DESPUÉS del CSS de cada producto (link versionado ?v=uiN).
   No rediseña: unifica y profesionaliza los componentes comunes
   (.section, .vk-table, .btn, modales, tabs, forms, badges) sobre los
   tokens --vk-*. Escritorio y móvil.
   ============================================= */

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
::selection { background: var(--vk-info-soft); }

/* Scrollbars discretos (WebKit) */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--vk-border-strong); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background-color: var(--vk-text-muted); }
*::-webkit-scrollbar-track { background: transparent; }

/* Foco accesible y consistente en toda la web */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--vk-primary);
  outline-offset: 2px;
  border-radius: var(--vk-radius-sm);
}

/* ---------- Secciones / tarjetas ---------- */
body .section {
  border-radius: var(--vk-radius-lg);
  box-shadow: var(--vk-shadow-sm);
  transition: box-shadow var(--vk-transition);
}
body .section:hover { box-shadow: var(--vk-shadow); }

/* ---------- Encabezados de página ---------- */
body .page-header h1, body .main-header h1 { letter-spacing: -0.02em; }
body .subtitle { max-width: 68ch; }

/* ---------- Tablas ---------- */
body .table-wrap { border-radius: var(--vk-radius-md); }
body .vk-table { font-variant-numeric: tabular-nums; }
body .vk-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--vk-surface-sunken);
}
body .vk-table tbody tr { transition: background 80ms ease; }
body .vk-table tbody tr:hover { background: var(--vk-info-soft); }
body .vk-table td.empty, body .vk-table .empty {
  text-align: center; color: var(--vk-text-muted); font-style: italic;
  padding: 28px 12px;
}

/* ---------- Botones ---------- */
body .btn {
  transition: transform 80ms ease, box-shadow var(--vk-transition), background var(--vk-transition);
}
body .btn:active:not(:disabled) { transform: translateY(1px); }
body .btn:disabled { opacity: .55; cursor: not-allowed; }
body .btn-primary:hover:not(:disabled) { box-shadow: var(--vk-shadow-md); }

/* ---------- Formularios ---------- */
body .field input:hover:not(:focus), body .field select:hover:not(:focus) {
  border-color: var(--vk-text-muted);
}
body .field label { user-select: none; }
body input::placeholder, body textarea::placeholder { color: var(--vk-text-muted); opacity: .7; }

/* ---------- Tabs (estilo base para páginas que no los definen: CRM, Rendición…) ---------- */
body .tabs { display: flex; gap: var(--vk-space-1); border-bottom: 1px solid var(--vk-border); flex-wrap: nowrap; overflow-x: auto; }
body .tab {
  appearance: none; background: transparent; border: none; border-bottom: 2px solid transparent;
  padding: 9px 14px; font-family: inherit; font-size: var(--vk-text-base); font-weight: 600;
  color: var(--vk-text-muted); cursor: pointer; white-space: nowrap;
  transition: color var(--vk-transition), border-color var(--vk-transition);
}
body .tab:hover { color: var(--vk-text-strong); }
body .tab.active { color: var(--vk-primary); border-bottom-color: var(--vk-primary); }
body .tab-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--vk-radius-pill); background: var(--vk-surface-sunken);
  color: var(--vk-text-muted); font-size: var(--vk-text-xs);
}
body .tab.active .tab-count { background: var(--vk-info-soft); color: var(--vk-primary); }

/* ---------- Modales (ambos sistemas: dialog.vk-modal y .modal-overlay) ---------- */
body dialog.vk-modal, body .modal-box, body .modal-card {
  border-radius: var(--vk-radius-lg);
  box-shadow: var(--vk-shadow-xl);
  animation: vkModalIn 140ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes vkModalIn {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
body .modal-overlay { backdrop-filter: blur(2px); }

/* Dialogs sin .modal-inner (Rendición, etc.): styles.css les pone overflow:hidden
   y el contenido más alto que 88vh queda cortado sin scroll. */
body dialog.vk-modal:not(:has(.modal-inner)),
body dialog.vk-modal-lg:not(:has(.modal-inner)) { overflow-y: auto; max-height: 92vh; }
/* modales overlay (conciliación): sin esto el contenido alto se corta sin scroll */
body .modal-box { max-height: 88vh; overflow-y: auto; }

/* Modales con .modal-inner + <form>: el form intermedio rompía la cadena flex,
   así que .modal-body (que tiene el scroll) no se estiraba y el contenido largo
   se recortaba. min-height:0 + form como flex-column restauran el scroll. */
body dialog.vk-modal .modal-inner { min-height: 0; }
body dialog.vk-modal .modal-inner > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
body dialog.vk-modal .modal-body { min-height: 0; overflow-y: auto; }

/* ---------- UX: estados de carga (vectork-ux.js) ---------- */
body .vk-spinner {
  display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: vkSpin .7s linear infinite; opacity: .85; flex: none;
}
@keyframes vkSpin { to { transform: rotate(360deg); } }
body .btn.is-loading { pointer-events: none; opacity: .78; }

body .ia-status { display: inline-flex; align-items: center; color: var(--vk-primary); font-weight: 600; }
body .ia-dots::after { content: ''; display: inline-block; width: 1.2em; text-align: left; animation: vkDots 1.2s steps(4, end) infinite; }
@keyframes vkDots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

body .sk {
  display: block; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, var(--vk-surface-sunken) 25%, var(--vk-border) 50%, var(--vk-surface-sunken) 75%);
  background-size: 200% 100%; animation: vkShimmer 1.2s ease-in-out infinite;
}
@keyframes vkShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
body tr.sk-row td { padding: 13px 10px; }

/* ---------- UX: ojo de password (input[data-eye]) ---------- */
body .vk-pass-wrap { position: relative; display: flex; }
body .vk-pass-wrap input { flex: 1; padding-right: 38px; }
body .vk-eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; cursor: pointer; font-size: 15px; padding: 4px 7px;
  opacity: .55; border-radius: 6px; line-height: 1;
}
body .vk-eye:hover, body .vk-eye.on { opacity: 1; }

/* ---------- Logo de marca ---------- */
/* Login (tarjeta blanca): logo directo. */
body .brand .brand-img { max-width: 210px; max-height: 84px; width: auto; height: auto; display: block; margin: 0 auto; }
/* Sidebar (fondo oscuro): logo en versión blanca, sin fondo. */
body .sidebar-brand .brand-img-side {
  max-width: 100%; width: auto; height: auto; max-height: 42px; display: block;
}

/* ---------- Lightbox (VKUX.lightbox) ---------- */
body .vk-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15, 25, 45, .82); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 32px;
  animation: vkModalIn 140ms ease;
}
body .vk-lightbox .vk-lb-body { max-width: 92vw; max-height: 88vh; display: flex; }
body .vk-lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.5); object-fit: contain; }
body .vk-lightbox iframe { width: 88vw; height: 88vh; border: 0; border-radius: 10px; background: #fff; }
body .vk-lightbox .vk-lb-close {
  position: fixed; top: 18px; right: 22px; width: 40px; height: 40px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.15); color: #fff; font-size: 20px; border-radius: 50%; line-height: 1;
}
body .vk-lightbox .vk-lb-close:hover { background: rgba(255,255,255,.3); }

/* ---------- Accesibilidad ---------- */
body :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--vk-primary); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ---------- Utilitarias ---------- */
/* .hide vivía solo en CSS locales (conciliación, prospección-2); las páginas
   core (Rendición, etc.) la toggleaban sin efecto → tabs "no funcionaban". */
body .hide { display: none !important; }

/* ---------- Listas de checkboxes (aprobadores, módulos) ---------- */
body .cb-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border: 1px solid var(--vk-border); border-radius: var(--vk-radius-md);
  background: var(--vk-surface); cursor: pointer; transition: border-color .12s, background .12s;
}
body .cb-item:hover { border-color: var(--vk-primary); background: var(--vk-info-soft); }
body .cb-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--vk-primary); flex: none; }
body .cb-item .cb-name { font-weight: 600; }
body .cb-item .cb-mail { margin-left: auto; color: var(--vk-text-muted); font-size: var(--vk-text-xs); }
/* Árbol de módulos (VKUX.moduleTree) — una fila por línea, submódulo indentado */
body .mt-tree { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 4px; width: 100%; }
body .mt-tree .cb-item.mt-row { width: 100%; }
body .cb-item.mt-row { justify-content: flex-start; }
body .cb-item .cb-name.mt-parent { font-weight: 700; }
body .mt-check { width: 16px; height: 16px; accent-color: var(--vk-primary); flex: none; }

/* ---------- Badges / chips ---------- */
body .badge { letter-spacing: .02em; }

/* ---------- Toasts ---------- */
body .toast { box-shadow: var(--vk-shadow-lg); border-radius: var(--vk-radius-md); }

/* ---------- Sidebar: selector de empresa activa ---------- */
body .sidebar-org { padding: 10px 14px 4px; }
body .sidebar-org-label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.55); margin-bottom: 4px; }
body .sidebar-org-select {
  width: 100%; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600;
  background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.18); cursor: pointer;
}
body .sidebar-org-select option { color: #1a2b45; }

/* ---------- Sidebar (desktop): jerarquía más limpia ---------- */
body .sidebar .nav-item { border-radius: var(--vk-radius); }
body .sidebar .nav-item.active { box-shadow: inset 3px 0 0 var(--vk-accent-bright); }

/* ---------- Móvil ≤600: densidad y tacto ---------- */
@media (max-width: 600px) {
  body .vk-table { font-size: var(--vk-text-sm); }
  body .btn { min-height: 38px; }
  body .btn-sm, body .btn-xs { min-height: 34px; }
  body .field input, body .field select { min-height: 40px; }
  /* botones de acción de modales a lo ancho */
  body dialog.vk-modal .modal-actions .btn { flex: 1; }
}

/* ---------- Tablet 601–900: márgenes intermedios ---------- */
@media (min-width: 601px) and (max-width: 900px) {
  body .main, body .main-content { padding: var(--vk-space-5); }
}