:root {
  /* ===============================
     BRAND (RGB sin comas)
  =============================== */
  --vg-primary: 59 130 246;
  --vg-secondary: 96 165 250;
  --vg-navy: 30 41 59;

  /* Fondo principal VeloraGuard */
  --vg-surface: 248 250 254;
  --vg-text: 15 23 42;

  /* Override gray-50 usado por Filament */
  --gray-50: 248 250 254;

  /* Blanco roto premium */
  --vg-white: 252 252 252;

  /* ===============================
     STATES
  =============================== */
  --vg-success: 34 197 94;
  --vg-warning: 245 158 11;
  --vg-danger: 239 68 68;

  /* ===============================
     UI TOKENS
  =============================== */
  --vg-radius: 12px;
}

/* ===============================
   BASE GLOBAL STYLING
=============================== */

body {
  background-color: rgb(var(--vg-surface));
  color: rgb(var(--vg-text));
}

.fi-body {
  background-color: rgb(var(--vg-surface)) !important;
  color: rgb(var(--vg-text));
}

/* ===============================
   BLANCO GLOBAL OVERRIDE
=============================== */

.bg-white {
  background-color: rgb(var(--vg-white)) !important;
}

/* Superficies principales Filament */
.fi-topbar,
.fi-sidebar,
.fi-sidebar-header,
.fi-card,
.fi-section,
.fi-modal-window,
.fi-dropdown-panel,
.fi-ta-table,
.fi-ta-ctn,
.fi-in-card,
.fi-wi-widget {
  background-color: rgb(var(--vg-white)) !important;
}

/* ===============================
   BORDES MÁS PREMIUM
=============================== */

.fi-card,
.fi-section,
.fi-ta-table,
.fi-modal-window,
.fi-dropdown-panel {
  border-color: #eef2f7 !important;
}

/* ===============================
   BOTONES
=============================== */

.fi-btn-primary {
  background-color: rgb(var(--vg-primary)) !important;
  border-color: rgb(var(--vg-primary)) !important;
}

.fi-btn-primary:hover {
  filter: brightness(0.95);
}

/* ===============================
   BADGES
=============================== */

.fi-badge-primary {
  background-color: rgb(var(--vg-primary)) !important;
}

/* ===============================
   RADIOS GLOBALES
=============================== */

button,
.fi-card,
.fi-section,
.fi-modal-window,
.fi-dropdown-panel {
  border-radius: var(--vg-radius);
}

/* Inputs solo donde tenga sentido */
.fi-input,
.fi-select-input,
.fi-textarea,
.fi-input-wrp,
.fi-fo-text-input input,
.fi-fo-select select,
.fi-fo-textarea textarea {
  border-radius: var(--vg-radius);
}

/* ===============================
   SIDEBAR ITEMS
=============================== */

.fi-sidebar-item-button {
  border-radius: 10px;
}

.fi-sidebar-item-button:hover {
  background-color: #eaf0fd !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-button,
.fi-sidebar-item.fi-sidebar-item-active .fi-sidebar-item-button {
  background-color: #eaf0fd !important;
}

.fi-sidebar-item-button:hover .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-sidebar-item-active .fi-sidebar-item-label {
  color: rgb(var(--vg-primary)) !important;
}

.fi-sidebar-item-button:hover .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-sidebar-item-active .fi-sidebar-item-icon {
  color: rgb(var(--vg-primary)) !important;
}

/* ===============================
   SIDEBAR GROUPS
   Hover solo texto
=============================== */

.fi-sidebar-group-button {
  background: transparent !important;
  border-radius: 10px;
}

.fi-sidebar-group-button:hover {
  background: transparent !important;
}

.fi-sidebar-group-button:hover .fi-sidebar-group-label,
.fi-sidebar-group-button:hover .fi-sidebar-group-icon,
.fi-sidebar-group-button:hover .fi-sidebar-group-collapse-button,
.fi-sidebar-group-button:hover .fi-sidebar-group-collapse-button svg {
  color: rgb(var(--vg-primary)) !important;
}

.fi-sidebar-group.fi-active > .fi-sidebar-group-button,
.fi-sidebar-group.fi-sidebar-item-active > .fi-sidebar-group-button {
  background: transparent !important;
}

/* ===============================
   TABLAS
=============================== */

thead.bg-gray-50,
.fi-ta-header-toolbar,
.fi-ta-header {
  background-color: #fcfcfc !important;
}

/* Buscador de tablas: corregido */
.fi-ta-header-toolbar .fi-input-wrp,
.fi-ta-search-field .fi-input-wrp,
.fi-ta-search-field input,
.fi-ta-header-toolbar input {
  border-radius: 12px !important;
  background-color: #fcfcfc !important;
}

/* ===============================
   INPUTS
=============================== */

/* Nada de aplicar a todos los input globalmente */
.fi-input-wrp,
.fi-fo-text-input input,
.fi-fo-select select,
.fi-fo-textarea textarea,
.fi-modal-window input,
.fi-modal-window select,
.fi-modal-window textarea,
.fi-dropdown-panel input,
.fi-dropdown-panel select,
.fi-dropdown-panel textarea {
  background-color: #fcfcfc !important;
}

/* ===============================
   SCROLLBAR MODERNA
=============================== */

/* Chrome / Edge / Safari */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(71, 85, 105, 0.25);
  border-radius: 9999px;
  transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(71, 85, 105, 0.55);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(71, 85, 105, 0.3) transparent;
}