/* ============================================================================
   VLOKI Reloaded — Design system / utility classes globales
   ----------------------------------------------------------------------------
   Equivalente del legacy CMS_CombinedCSS.css en el ecosistema Blazor/MAUI.
   Se carga UNA sola vez desde el host (Blazor Server o MAUI Hybrid) vía:
     <link href="css/vk-globals.css" rel="stylesheet" />

   Convención:
   - Toda clase del design system va con prefijo `vk-`
   - Componentes CMS_*_HYB_Blazor_VW reutilizan estas clases (no importan nada)
   - Si un componente necesita CSS muy específico, usa Component.razor.css
     (CSS isolation Blazor) ADEMÁS de las clases globales
============================================================================ */

/* ============================================================================
   TOKENS — variables CSS reutilizables por cualquier componente
============================================================================ */
:root {
  /* Paleta de marca */
  --vk-yellow-400: #FFD633;
  --vk-yellow-500: #FFCC00;
  --vk-yellow-600: #E6B800;

  /* Neutros (escala oscura → clara) */
  --vk-black:      #0F0F10;
  --vk-gray-900:   #1A1A1C;
  --vk-gray-800:   #27272A;
  --vk-gray-700:   #4A4A4F;
  --vk-gray-500:   #8C8C92;
  --vk-gray-300:   #D1D1D6;
  --vk-gray-200:   #E5E5EA;
  --vk-gray-100:   #F5F5F7;
  --vk-white:      #FFFFFF;

  /* Estado / semántica */
  --vk-success:    #10B981;
  --vk-warning:    #F59E0B;
  --vk-danger:     #EF4444;
  --vk-info:       #3B82F6;

  /* Aliases semánticos */
  --vk-bg:         var(--vk-white);
  --vk-surface:    var(--vk-gray-100);
  --vk-text:       var(--vk-gray-900);
  --vk-text-soft:  var(--vk-gray-700);
  --vk-text-muted: var(--vk-gray-500);
  --vk-border:     var(--vk-gray-300);

  /* Tipografía */
  --vk-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
             Helvetica, Arial, sans-serif;
  --vk-font-mono: 'Fira Code', 'Cascadia Code', Consolas, monospace;

  /* Escala de spacing (incremento de 4px) */
  --vk-1: 4px;
  --vk-2: 8px;
  --vk-3: 12px;
  --vk-4: 16px;
  --vk-5: 24px;
  --vk-6: 32px;
  --vk-8: 48px;
  --vk-10: 64px;

  /* Bordes redondeados */
  --vk-radius-sm: 6px;
  --vk-radius:    8px;
  --vk-radius-lg: 12px;
  --vk-radius-full: 999px;

  /* Sombras */
  --vk-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --vk-shadow:    0 4px 12px rgba(0,0,0,.08);
  --vk-shadow-lg: 0 12px 32px rgba(0,0,0,.16);

  /* Tamaños del chrome (compartidos con vk-chrome.css) */
  --vk-topbar-h: 60px;
  --vk-header-h: 64px;
  --vk-footer-h: 48px;
}

/* ============================================================================
   RESET — scopeado a elementos con clase `vk-*`
   No toca elementos sin prefijo (no rompe legacy en el mismo host)
============================================================================ */
[class^="vk-"], [class*=" vk-"],
[class^="vk-"] *, [class*=" vk-"] *,
[class^="vk-"] *::before, [class*=" vk-"] *::before,
[class^="vk-"] *::after, [class*=" vk-"] *::after {
  box-sizing: border-box;
}
[class^="vk-"] a, [class*=" vk-"] a {
  color: inherit;
  text-decoration: none;
}
[class^="vk-"] button, [class*=" vk-"] button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

/* ============================================================================
   UTILITY CLASSES — composición rápida sin necesidad de crear CSS por componente
============================================================================ */

/* Display */
.vk-block      { display: block; }
.vk-inline     { display: inline; }
.vk-inline-block { display: inline-block; }
.vk-flex       { display: flex; }
.vk-inline-flex { display: inline-flex; }
.vk-grid       { display: grid; }
.vk-hidden     { display: none; }

/* Flex direction */
.vk-flex-row     { flex-direction: row; }
.vk-flex-col     { flex-direction: column; }
.vk-flex-wrap    { flex-wrap: wrap; }
.vk-flex-nowrap  { flex-wrap: nowrap; }

/* Alignment */
.vk-items-start    { align-items: flex-start; }
.vk-items-center   { align-items: center; }
.vk-items-end      { align-items: flex-end; }
.vk-items-stretch  { align-items: stretch; }
.vk-justify-start  { justify-content: flex-start; }
.vk-justify-center { justify-content: center; }
.vk-justify-end    { justify-content: flex-end; }
.vk-justify-between { justify-content: space-between; }
.vk-justify-around  { justify-content: space-around; }

/* Gaps */
.vk-gap-1 { gap: var(--vk-1); }
.vk-gap-2 { gap: var(--vk-2); }
.vk-gap-3 { gap: var(--vk-3); }
.vk-gap-4 { gap: var(--vk-4); }
.vk-gap-5 { gap: var(--vk-5); }

/* Padding (all sides) */
.vk-pad-1 { padding: var(--vk-1); }
.vk-pad-2 { padding: var(--vk-2); }
.vk-pad-3 { padding: var(--vk-3); }
.vk-pad-4 { padding: var(--vk-4); }
.vk-pad-5 { padding: var(--vk-5); }

/* Padding direccional */
.vk-pt-1 { padding-top: var(--vk-1); } .vk-pt-2 { padding-top: var(--vk-2); }
.vk-pt-3 { padding-top: var(--vk-3); } .vk-pt-4 { padding-top: var(--vk-4); }
.vk-pb-1 { padding-bottom: var(--vk-1); } .vk-pb-2 { padding-bottom: var(--vk-2); }
.vk-pb-3 { padding-bottom: var(--vk-3); } .vk-pb-4 { padding-bottom: var(--vk-4); }

/* Margin */
.vk-m-0 { margin: 0; }
.vk-m-1 { margin: var(--vk-1); }
.vk-m-2 { margin: var(--vk-2); }
.vk-m-3 { margin: var(--vk-3); }
.vk-m-4 { margin: var(--vk-4); }
.vk-ml-auto { margin-left: auto; }
.vk-mr-auto { margin-right: auto; }
.vk-mx-auto { margin-left: auto; margin-right: auto; }

/* Text */
.vk-text-left   { text-align: left; }
.vk-text-center { text-align: center; }
.vk-text-right  { text-align: right; }
.vk-text-bold   { font-weight: 700; }
.vk-text-medium { font-weight: 500; }
.vk-text-uppercase { text-transform: uppercase; letter-spacing: 0.05em; }
.vk-text-muted  { color: var(--vk-text-muted); }
.vk-text-soft   { color: var(--vk-text-soft); }

/* Sizes */
.vk-w-full { width: 100%; }
.vk-h-full { height: 100%; }

/* ============================================================================
   COMPONENTES DEL DESIGN SYSTEM — patrones reutilizables
============================================================================ */

/* Botón base + variantes */
.vk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vk-2);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--vk-font);
  color: var(--vk-text);
  background: var(--vk-white);
  border: 1px solid var(--vk-border);
  border-radius: var(--vk-radius-sm);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  text-decoration: none;
}
.vk-btn:hover { background: var(--vk-gray-100); }
.vk-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.vk-btn--primary {
  background: var(--vk-yellow-500);
  border-color: var(--vk-yellow-500);
  color: var(--vk-black);
  font-weight: 600;
}
.vk-btn--primary:hover { background: var(--vk-yellow-600); border-color: var(--vk-yellow-600); }

.vk-btn--danger {
  background: var(--vk-danger);
  border-color: var(--vk-danger);
  color: var(--vk-white);
}
.vk-btn--danger:hover { filter: brightness(0.95); }

.vk-btn--ghost {
  background: transparent;
  border-color: transparent;
}
.vk-btn--ghost:hover { background: var(--vk-gray-100); }

.vk-btn--sm { padding: 6px 10px; font-size: 12px; }
.vk-btn--lg { padding: 14px 22px; font-size: 16px; }

/* Card / panel */
.vk-card {
  background: var(--vk-white);
  border: 1px solid var(--vk-border);
  border-radius: var(--vk-radius);
  padding: var(--vk-4);
  box-shadow: var(--vk-shadow-sm);
}
.vk-card__header {
  margin: calc(var(--vk-4) * -1) calc(var(--vk-4) * -1) var(--vk-3);
  padding: var(--vk-3) var(--vk-4);
  border-bottom: 1px solid var(--vk-border);
  font-weight: 600;
  font-size: 15px;
}
.vk-card__footer {
  margin: var(--vk-3) calc(var(--vk-4) * -1) calc(var(--vk-4) * -1);
  padding: var(--vk-3) var(--vk-4);
  border-top: 1px solid var(--vk-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--vk-2);
}

/* Inputs */
.vk-input,
.vk-textarea,
.vk-select {
  display: block;
  width: 100%;
  padding: 9px 12px;
  font-size: 14px;
  font-family: var(--vk-font);
  color: var(--vk-text);
  background: var(--vk-white);
  border: 1px solid var(--vk-border);
  border-radius: var(--vk-radius-sm);
  transition: border-color .15s, box-shadow .15s;
}
.vk-input:focus,
.vk-textarea:focus,
.vk-select:focus {
  outline: none;
  border-color: var(--vk-yellow-500);
  box-shadow: 0 0 0 3px rgba(255,204,0,0.15);
}
.vk-input:disabled,
.vk-textarea:disabled,
.vk-select:disabled { background: var(--vk-gray-100); cursor: not-allowed; }

.vk-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--vk-text-soft);
  margin-bottom: var(--vk-1);
}

/* Field wrapper — para forms */
.vk-field {
  display: flex;
  flex-direction: column;
  gap: var(--vk-1);
  margin-bottom: var(--vk-3);
}
.vk-field--error .vk-input,
.vk-field--error .vk-textarea,
.vk-field--error .vk-select { border-color: var(--vk-danger); }
.vk-field__error {
  font-size: 12px;
  color: var(--vk-danger);
}

/* Badge */
.vk-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--vk-radius-full);
  background: var(--vk-gray-200);
  color: var(--vk-text);
}
.vk-badge--primary { background: var(--vk-yellow-500); color: var(--vk-black); }
.vk-badge--success { background: var(--vk-success); color: var(--vk-white); }
.vk-badge--danger  { background: var(--vk-danger); color: var(--vk-white); }

/* Alert / mensaje */
.vk-alert {
  padding: var(--vk-3) var(--vk-4);
  border-radius: var(--vk-radius);
  border: 1px solid var(--vk-border);
  background: var(--vk-gray-100);
  font-size: 14px;
}
.vk-alert--info    { border-color: var(--vk-info);    background: rgba(59,130,246,0.08); }
.vk-alert--success { border-color: var(--vk-success); background: rgba(16,185,129,0.08); }
.vk-alert--warning { border-color: var(--vk-warning); background: rgba(245,158,11,0.08); }
.vk-alert--danger  { border-color: var(--vk-danger);  background: rgba(239,68,68,0.08); }

/* Tabla */
.vk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--vk-white);
}
.vk-table th,
.vk-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--vk-border);
}
.vk-table th {
  font-weight: 600;
  color: var(--vk-text-soft);
  background: var(--vk-gray-100);
}
.vk-table tbody tr:hover { background: var(--vk-gray-100); }

/* Heading scale */
.vk-h1 { font-size: 28px; font-weight: 700; line-height: 1.2; margin: 0 0 var(--vk-3); }
.vk-h2 { font-size: 22px; font-weight: 600; line-height: 1.3; margin: 0 0 var(--vk-3); }
.vk-h3 { font-size: 18px; font-weight: 600; line-height: 1.4; margin: 0 0 var(--vk-2); }
.vk-h4 { font-size: 15px; font-weight: 600; line-height: 1.4; margin: 0 0 var(--vk-2); }

/* Divider */
.vk-divider {
  height: 1px;
  background: var(--vk-border);
  margin: var(--vk-3) 0;
}

/* ============================================================================
   ESTE ARCHIVO CRECE — agregar nuevas clases acá conforme los componentes
   las necesiten. Mantener la convención `vk-` y usar las CSS variables.
============================================================================ */