/* =====================================================================
   ux-moderna.css  -  Capa de modernizacion UX (overlay)
   Control PHP (logystix_fulfillment) - Velocity / Logystix

   Se carga DE ULTIMO. No modifica el HTML de las vistas.
   Reestiliza el shell (NobleUI), tablas (Kartik GridView + custom),
   formularios, botones, cards, modales, tabs, badges y el login,
   atacando las clases compartidas de NobleUI + Bootstrap 4 + Kartik.

   Paleta y forma actuales preservadas: naranja Velocity como primario,
   radios moderados, neutros suaves. Tipografia: Inter.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------------------- */
:root {
  /* Marca - naranja Velocity (preservado) */
  --vel-primary:       #f68d1e;
  --vel-primary-600:   #ec7f12;
  --vel-primary-700:   #f68d1e;
  --vel-primary-strong:#ef8000;
  --vel-primary-050:   #fef4e9;
  --vel-primary-100:   #fde7cf;
  --vel-primary-200:   #fbd0a2;

  /* Neutros */
  --vel-ink-900: #111827;  /* titulos */
  --vel-ink-800: #1f2937;
  --vel-ink-700: #374151;  /* texto base */
  --vel-ink-600: #4b5563;
  --vel-ink-500: #6b7280;  /* texto secundario */
  --vel-ink-400: #9ca3af;  /* placeholder */
  --vel-line:      #e5e7eb;  /* bordes */
  --vel-line-soft: #eef1f4;  /* separadores suaves */

  /* Superficies */
  --vel-bg:        #f4f5f7;  /* fondo de pagina */
  --vel-surface:   #ffffff;  /* cards, tablas */
  --vel-surface-2: #f9fafb;  /* headers de tabla, zebras */

  /* Estados semanticos (suaves) */
  --vel-success: #16a34a;  --vel-success-bg: #ecfdf3;
  --vel-danger:  #dc2626;  --vel-danger-bg:  #fef2f2;
  --vel-warning: #d97706;  --vel-warning-bg: #fffbeb;
  --vel-info:    #2563eb;  --vel-info-bg:    #eff6ff;

  /* Forma */
  --vel-radius-xs: 6px;
  --vel-radius-sm: 8px;
  --vel-radius:    10px;
  --vel-radius-lg: 14px;
  --vel-radius-xl: 18px;
  --vel-radius-pill: 999px;

  /* Sombras */
  --vel-shadow-xs: 0 1px 2px rgba(16,24,40,.05);
  --vel-shadow-sm: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
  --vel-shadow:    0 4px 12px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.04);
  --vel-shadow-lg: 0 12px 32px rgba(16,24,40,.14), 0 4px 12px rgba(16,24,40,.06);

  /* Tipografia */
  --vel-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
              Helvetica, Arial, sans-serif;

  /* Anillo de foco */
  --vel-ring: 0 0 0 3px rgba(246,141,30,.25);

  --vel-transition: .18s cubic-bezier(.4,0,.2,1);
}

/* ---------------------------------------------------------------------
   2. Base / tipografia
   --------------------------------------------------------------------- */
body {
  font-family: var(--vel-font) !important;
  background-color: var(--vel-bg) !important;
  color: var(--vel-ink-700);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
  letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--vel-font);
  color: var(--vel-ink-900);
  font-weight: 700;
  letter-spacing: -0.02em;
}

a { color: var(--vel-primary-700); }
a:hover { color: var(--vel-primary-600); }

.text-muted { color: var(--vel-ink-500) !important; }

/* Scrollbars modernas (reemplaza ::-webkit-escroll roto de app.css) */
* { scrollbar-width: thin; scrollbar-color: #cbd2db transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: #cbd2db;
  border-radius: var(--vel-radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: #aab3bf; }

::selection { background: var(--vel-primary-200); color: var(--vel-ink-900); }

/* Foco accesible y consistente */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: none;
  box-shadow: var(--vel-ring);
}

/* ---------------------------------------------------------------------
   3. Shell - Sidebar (solo visual; NobleUI maneja folded/open)
   --------------------------------------------------------------------- */
.sidebar {
  background: var(--vel-surface);
  border-right: 1px solid var(--vel-line);
  box-shadow: var(--vel-shadow-xs);
}

.sidebar .sidebar-header {
  border-bottom: 1px solid var(--vel-line-soft);
  background: var(--vel-surface);
}

/* Logo por defecto (sin logo propio del business): version clara en modo
   claro, version blanca reservada para modo oscuro (ux-moderna-dark.css). */
.sidebar .sidebar-header .logo-fallback-dark { display: none; }

.sidebar .sidebar-body { padding: 14px 12px; }

/* El tema base (demo_1/style.css) deja padding-left/right: 25px en este <ul>,
   heredado del layout original con iconos position:absolute. Se anula aca
   porque .sidebar-body y .nav-link ya aportan su propio padding horizontal;
   sin este reset, los tres se suman y el menu queda con un margen izquierdo
   excesivo. */
.sidebar .sidebar-body .nav { padding-left: 0; padding-right: 0; }

/* Etiquetas de categoria */
.sidebar .nav .nav-item.nav-category,
.sidebar .sidebar-body .nav .nav-item.nav-category {
  color: #000 !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 18px 12px 8px;
  margin: 0;
  height: auto !important;
  white-space: normal;
  line-height: 1.4;
}

/* Items */
.sidebar .nav .nav-item { margin: 2px 0; }

.sidebar .nav .nav-item .nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: var(--vel-radius);
  padding: 10px 12px;
  color: var(--vel-ink-600);
  font-weight: 500;
  font-size: 14px;
  transition: background var(--vel-transition), color var(--vel-transition);
  position: relative;
}

.sidebar .sidebar-body .nav .nav-item .nav-link {
  white-space: normal !important;
  height: auto !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  line-height: 1.4 !important;
}

.sidebar .nav .nav-item .nav-link .link-icon,
.sidebar .nav .nav-item .nav-link i,
.sidebar .nav .nav-item .nav-link svg {
  color: var(--vel-ink-400);
  width: 18px; height: 18px;
  transition: color var(--vel-transition);
}

.sidebar .nav .nav-item .nav-link:hover {
  background: var(--vel-primary-050);
  color: var(--vel-primary-700);
}
.sidebar .nav .nav-item .nav-link:hover .link-icon,
.sidebar .nav .nav-item .nav-link:hover i,
.sidebar .nav .nav-item .nav-link:hover svg {
  color: var(--vel-primary-600);
}

/* Estado actual: tratamiento sutil a proposito.
   El menu de Control marca VARIOS nav-item como .active a la vez,
   asi que un resalte fuerte (fondo + barra) ensucia todo el menu y no
   indica la pagina real. El feedback fuerte vive en :hover y la
   ubicacion la da el breadcrumb del header. */
.sidebar .sidebar-body .nav .nav-item.active > .nav-link,
.sidebar .nav .nav-item.active > .nav-link {
  background: transparent;
  color: var(--vel-ink-800) !important;
  font-weight: 600;
}
/* Iconos feather (SVG con stroke) en tono neutro; naranja al hover.
   Se controla stroke y color porque feather usa stroke directo. */
.sidebar .sidebar-body .nav .nav-item .nav-link .link-icon,
.sidebar .sidebar-body .nav .nav-item .nav-link i,
.sidebar .sidebar-body .nav .nav-item .nav-link svg {
  color: var(--vel-ink-500);
  stroke: var(--vel-ink-500) !important;
}
.sidebar .sidebar-body .nav .nav-item .nav-link:hover .link-icon,
.sidebar .sidebar-body .nav .nav-item .nav-link:hover i,
.sidebar .sidebar-body .nav .nav-item .nav-link:hover svg {
  color: var(--vel-primary-600);
  stroke: var(--vel-primary-600) !important;
}

/* Submenus */
.sidebar .nav .nav-item .submenu .nav-link { font-size: 13px; padding: 8px 12px; }

/* ---------------------------------------------------------------------
   4. Shell - Navbar (topbar)
   --------------------------------------------------------------------- */
.navbar {
  background: var(--vel-surface) !important;
  border-bottom: 1px solid var(--vel-line);
  box-shadow: var(--vel-shadow-xs);
}

.navbar .search-form .input-group,
.navbar .search-form .form-control {
  border-radius: var(--vel-radius-pill);
}
.navbar .search-form .form-control {
  background: var(--vel-surface-2);
  border-color: var(--vel-line);
}

.navbar .navbar-nav .nav-link { color: var(--vel-ink-600); }
.navbar .navbar-nav .nav-link:hover { color: var(--vel-primary-700); }

/* ---------------------------------------------------------------------
   5. Shell - Page content
   --------------------------------------------------------------------- */
.page-content { padding: 24px 28px; }

/* Ancho completo en cualquier estado del sidebar.
   .main-wrapper es display:flex y .sidebar es position:fixed (fuera del flujo).
   Con flex-grow:1, page-wrapper siempre ocupa el espacio restante sin importar
   el ancho del contenido ni el estado del sidebar (240px expandido / 70px folded). */
.main-wrapper .page-wrapper {
  flex-grow: 1;
  min-width: 0;
  width: auto !important;
  max-width: none !important;
}
.main-wrapper .page-wrapper .navbar {
  width: auto !important;
  right: 0 !important;
  max-width: none !important;
}

.page-content .page-header h4,
.page-content .page-title { color: var(--vel-ink-900); font-weight: 700; }

.footer {
  background: transparent;
  color: var(--vel-ink-500);
  font-size: 13px;
  border-top: 1px solid var(--vel-line-soft);
}

/* ---------------------------------------------------------------------
   6. Cards / paneles / sect
   --------------------------------------------------------------------- */
.card {
  border: 1px solid var(--vel-line);
  border-radius: var(--vel-radius-lg);
  background: var(--vel-surface);
  box-shadow: var(--vel-shadow-sm);
}
.card .card-header,
.card-header {
  background: var(--vel-surface);
  border-bottom: 1px solid var(--vel-line-soft);
  border-top-left-radius: var(--vel-radius-lg) !important;
  border-top-right-radius: var(--vel-radius-lg) !important;
  padding: 18px 22px;
  font-weight: 600;
  color: var(--vel-ink-900);
}
.card .card-body { padding: 22px; }
.card-title { font-weight: 700; color: var(--vel-ink-900); }

/* ---------------------------------------------------------------------
   7. Botones
   --------------------------------------------------------------------- */
.btn {
  font-family: var(--vel-font);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--vel-radius-sm);
  padding: 9px 16px;
  letter-spacing: -0.01em;
  transition: background var(--vel-transition), border-color var(--vel-transition),
              color var(--vel-transition), box-shadow var(--vel-transition),
              transform var(--vel-transition);
  text-transform: none;
}
.btn:active { transform: translateY(1px); }

/* Primario naranja (cubre .btn-primary, .btn-orange, .btn-primary-bg, .btn-success) */
.btn-primary,
.btn-orange,
.btn-primary-bg,
.btn-velocity,
.btn-success {
  background-color: var(--vel-primary) !important;
  border-color: var(--vel-primary) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(246,141,30,.25);
}
.btn-primary:hover,
.btn-orange:hover,
.btn-primary-bg:hover,
.btn-velocity:hover,
.btn-success:hover {
  background-color: var(--vel-primary-600) !important;
  border-color: var(--vel-primary-600) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(246,141,30,.3);
}
.btn-primary:focus-visible,
.btn-orange:focus-visible,
.btn-success:focus-visible {
  box-shadow: var(--vel-ring);
}
.btn-primary:active,
.btn-orange:active,
.btn-success:active { background-color: var(--vel-primary-700) !important; }

/* Outline naranja (cubre .btn-outline-velocity, .btn-outline-primary, .btn-cancelar) */
.btn-outline-primary,
.btn-outline-velocity,
.btn-outline-velocity-grey,
.btn-cancelar {
  background-color: var(--vel-surface) !important;
  border-color: var(--vel-primary) !important;
  color: var(--vel-primary-700) !important;
}
.btn-outline-velocity-grey { border-color: var(--vel-line) !important; }
.btn-outline-primary:hover,
.btn-outline-velocity:hover,
.btn-outline-velocity-grey:hover,
.btn-cancelar:hover {
  background-color: var(--vel-primary-050) !important;
  border-color: var(--vel-primary) !important;
  color: var(--vel-primary-700) !important;
}

/* Secundario / neutro */
.btn-secondary,
.btn-light,
.btn-default {
  background-color: var(--vel-surface) !important;
  border-color: var(--vel-line) !important;
  color: var(--vel-ink-700) !important;
}
.btn-secondary:hover,
.btn-light:hover,
.btn-default:hover {
  background-color: var(--vel-surface-2) !important;
  border-color: #d6dbe1 !important;
  color: var(--vel-ink-900) !important;
}

/* .btn-success se unifico con el primario naranja (.btn-orange) mas arriba */
.btn-danger  { background-color: var(--vel-danger)  !important; border-color: var(--vel-danger)  !important; }
.btn-info    { background-color: var(--vel-info)    !important; border-color: var(--vel-info)    !important; }

.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: var(--vel-radius-xs); }
.btn-lg { padding: 12px 22px; font-size: 15px; border-radius: var(--vel-radius); }

/* Botones icono (acciones de tabla) */
.btn-icon, .btn.btn-icon { display: inline-flex; align-items: center; justify-content: center; }

/* ---------------------------------------------------------------------
   8. Formularios / inputs / selects
   --------------------------------------------------------------------- */
.form-control,
.form-select,
.custom-select,
textarea.form-control,
input[type="text"].form-control,
input[type="search"],
input[type="email"],
input[type="number"],
input[type="password"] {
  border: 1px solid var(--vel-line);
  border-radius: var(--vel-radius-sm);
  color: var(--vel-ink-800);
  background-color: var(--vel-surface);
  transition: border-color var(--vel-transition), box-shadow var(--vel-transition);
  font-size: 14px;
}
.form-control { min-height: 40px; padding: 8px 13px; }
textarea.form-control { min-height: 88px; }

.form-control:focus,
.form-select:focus,
.custom-select:focus {
  border-color: var(--vel-primary);
  box-shadow: var(--vel-ring);
  background-color: var(--vel-surface);
}
.form-control::placeholder { color: var(--vel-ink-400); }

label, .control-label, .form-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--vel-ink-700);
  margin-bottom: 6px;
}

.input-group-text {
  background: var(--vel-surface-2);
  border-color: var(--vel-line);
  color: var(--vel-ink-500);
  border-radius: var(--vel-radius-sm);
}

/* Checkbox / radio en naranja */
input[type="checkbox"], input[type="radio"] { accent-color: var(--vel-primary); }
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--vel-primary) !important;
  border-color: var(--vel-primary) !important;
}

.invalid-feedback, .help-block.text-danger { color: var(--vel-danger); }
.is-invalid, .has-error .form-control { border-color: var(--vel-danger) !important; }

/* Select2 (krajee bs4) - usado por los filtros de 82 GridViews */
.select2-container--krajee-bs4 .select2-selection {
  border: 1px solid var(--vel-line) !important;
  border-radius: var(--vel-radius-sm) !important;
  min-height: 40px;
  color: var(--vel-ink-800);
}
.select2-container--krajee-bs4 .select2-selection--single {
  min-height: 40px;
  height: auto;
  padding: 4px 1.5rem 4px 8px;
  display: flex;
  align-items: center;
}
/* Nombres largos (ej. razon social de un seller) desbordaban el ancho fijo del
   select2 y se comian el espacio del boton "x" y la flecha en vez de bajar de
   linea. Se envuelve el texto (el alto, arriba con height:auto, crece con el).
   overflow-wrap (no word-break: break-word) para que solo parta una palabra si
   de verdad no entra: con word-break: break-word el item flex de
   .select2-selection--single colapsaba su min-width y placeholders cortos como
   "Estado de conteo" (columnas angostas) quedaban partidos letra por letra. */
.select2-container--krajee-bs4 .select2-selection--single .select2-selection__rendered {
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 1.3;
}
.select2-container--krajee-bs4.select2-container--focus .select2-selection,
.select2-container--krajee-bs4.select2-container--open .select2-selection {
  border-color: var(--vel-primary) !important;
  box-shadow: var(--vel-ring) !important;
}
.select2-container--krajee-bs4 .select2-dropdown {
  border: 1px solid var(--vel-line);
  border-radius: var(--vel-radius-sm);
  box-shadow: var(--vel-shadow);
  overflow: hidden;
}
.select2-container--krajee-bs4 .select2-results__option--highlighted[aria-selected] {
  background-color: var(--vel-primary) !important;
}
.select2-container--krajee-bs4 .select2-results__option[aria-selected="true"] {
  background-color: var(--vel-primary-050) !important;
  color: var(--vel-primary-700) !important;
}
.select2-container--krajee-bs4 .select2-selection__choice {
  background-color: var(--vel-primary-050) !important;
  border-color: var(--vel-primary-200) !important;
  color: var(--vel-primary-700) !important;
  border-radius: var(--vel-radius-xs) !important;
}

/* El boton "limpiar" (select2-krajee-bs4.css) se inserta con prepend() DENTRO de
   .select2-selection__rendered y usa float:right para quedar pegado al borde derecho
   de ese contenedor. El padding-right de arriba, reducido a 8px por esta misma hoja,
   dejaba solo 8px de hueco para la flecha (1.25rem = 20px, position:absolute), asi
   que el "x" quedaba tapado debajo de ella. Se restaura el padding-right nativo de
   krajee-bs4 (1.5rem) para que el "x" vuelva a verse, con el pequeno margen justo
   antes de la flecha que trae el tema por defecto.
   El contenedor .select2-selection__rendered no tiene ancho fijo (se ajusta al
   contenido), asi que el texto queda pegado al borde del "x" flotado sin aire entre
   ambos; se le da margin-left para separarlo del texto que fluye a su izquierda. */
.select2-container--krajee-bs4 .select2-selection--single .select2-selection__clear {
  margin-left: 6px;
}

/* Date range picker */
.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: var(--vel-primary) !important;
}
.daterangepicker .ranges li.active { background-color: var(--vel-primary) !important; }

/* ---------------------------------------------------------------------
   9. Tablas / GridView (Kartik + custom)
   --------------------------------------------------------------------- */
/* Contenedor: redondeado, borde, scroll horizontal en pantallas chicas */
/* Solo el wrapper interno de Kartik (.kv-grid-container / .table-responsive,
   el que envuelve directamente la <table>) lleva borde/sombra propios.
   .grid-view es el <div> MAS EXTERNO del widget entero (tabla + fila de
   resumen/paginador/"registros por pagina") y tambien matcheaba esta regla,
   asi que se dibujaban dos cajas anidadas -- la exterior quedaba con una
   franja vacia a la derecha del ancho real de la tabla. */
.kv-grid-container,
.table-responsive {
  background: var(--vel-surface);
  border: 1px solid var(--vel-line);
  border-radius: var(--vel-radius-lg);
  box-shadow: var(--vel-shadow-sm);
  overflow-x: auto;
}

.table {
  width: 100%;
  min-width: 100%;
  margin-bottom: 0;
  color: var(--vel-ink-700);
  border-collapse: separate;
  border-spacing: 0;
}

.table thead th,
.kv-grid-table thead th {
  background: var(--vel-surface-2);
  color: var(--vel-ink-500);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-top: none;
  border-bottom: 1px solid var(--vel-line);
  padding: 13px 16px;
  vertical-align: middle;
  white-space: nowrap;
}
/* Ordenes (order/index.php, order/programadas.php, ...): muchas columnas ya
   forzaban 'color: black' inline en su headerOptions, pero no todas, asi que
   dentro del mismo grid quedaban headers negros y headers en el gris/uppercase
   por defecto de arriba. Se centraliza aca para que TODAS las columnas de esta
   familia de vistas queden iguales, sin tocar cada definicion de columna. */
.order-index .table thead th,
.order-index .kv-grid-table thead th {
  color: var(--vel-ink-900);
}

.table tbody td,
.kv-grid-table tbody td {
  padding: 13px 16px;
  border-top: none;
  border-bottom: 1px solid var(--vel-line-soft);
  vertical-align: middle;
  font-size: 13.5px;
  color: var(--vel-ink-700);
}
.table tbody tr:last-child td { border-bottom: none; }

.table tbody tr,
.kv-grid-table tbody tr { transition: background var(--vel-transition); }
.table tbody tr:hover,
.kv-grid-table tbody tr:hover,
.table-hover tbody tr:hover { background-color: var(--vel-primary-050); }

/* Zebra suave si la vista usa table-striped */
.table-striped tbody tr:nth-of-type(odd) { background-color: #fcfcfd; }
.table-striped tbody tr:hover { background-color: var(--vel-primary-050); }

/* Fila de filtros del GridView */
.table thead tr.filters th,
.kv-grid-table thead tr.filters th { background: var(--vel-surface); padding: 8px 12px; }
.table thead tr.filters .form-control { min-height: 36px; font-size: 13px; }

/* Resumen y paginacion de Kartik */
.summary { color: var(--vel-ink-500); font-size: 13px; padding: 12px 16px; }

.pagination { gap: 4px; margin: 14px 16px; }
.pagination .page-link {
  border: 1px solid var(--vel-line);
  border-radius: var(--vel-radius-sm) !important;
  color: var(--vel-ink-600);
  min-width: 36px;
  text-align: center;
  padding: 7px 11px;
  transition: all var(--vel-transition);
}
.pagination .page-link:hover {
  background: var(--vel-primary-050);
  border-color: var(--vel-primary-200);
  color: var(--vel-primary-700);
}
.pagination .page-item.active .page-link {
  background: var(--vel-primary) !important;
  border-color: var(--vel-primary) !important;
  color: #fff !important;
}
.pagination .page-item.disabled .page-link { color: var(--vel-ink-400); }

/* Panel header de Kartik (titulo + toolbar de export) */
.kv-grid-container .panel-heading,
.kv-panel-before, .kv-panel-after {
  background: var(--vel-surface);
  border-color: var(--vel-line-soft);
  padding: 14px 16px;
}

/* Botones de accion dentro de celdas */
.table td .btn-sm, .table td .btn-group .btn { margin: 0 1px; }

/* ---------------------------------------------------------------------
   10. Modales
   --------------------------------------------------------------------- */
.modal-content {
  border: none;
  border-radius: var(--vel-radius-xl);
  box-shadow: var(--vel-shadow-lg);
  overflow: hidden;
}
.modal-header {
  border-bottom: 1px solid var(--vel-line-soft);
  padding: 20px 24px;
}
.modal-header .modal-title { font-weight: 700; color: var(--vel-ink-900); }
.modal-body { padding: 24px; }
.modal-footer { border-top: 1px solid var(--vel-line-soft); padding: 16px 24px; }
.modal-backdrop.show { opacity: .45; }
.close, .btn-close { color: var(--vel-ink-500); opacity: .7; transition: opacity var(--vel-transition); }
.close:hover, .btn-close:hover { opacity: 1; }

/* ---------------------------------------------------------------------
   11. Tabs / pills / nav
   --------------------------------------------------------------------- */
.nav-tabs { border-bottom: 1px solid var(--vel-line); }
.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--vel-ink-500);
  font-weight: 600;
  padding: 11px 16px;
  border-radius: 0;
  transition: color var(--vel-transition), border-color var(--vel-transition);
}
.nav-tabs .nav-link:hover { color: var(--vel-primary-700); border-bottom-color: var(--vel-primary-200); }
.nav-tabs .nav-link.active {
  color: var(--vel-primary-700);
  background: transparent;
  border-bottom-color: var(--vel-primary);
}
.nav-pills .nav-link { border-radius: var(--vel-radius-sm); color: var(--vel-ink-600); font-weight: 600; }
.nav-pills .nav-link.active { background-color: var(--vel-primary) !important; color: #fff !important; }

/* ---------------------------------------------------------------------
   12. Badges / alerts
   --------------------------------------------------------------------- */
.badge {
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .01em;
  padding: 5px 10px;
  border-radius: var(--vel-radius-pill);
}
.badge-primary, .badge.bg-primary { background-color: var(--vel-primary) !important; color: #fff; }
.badge-success, .badge.bg-success { background-color: var(--vel-success-bg) !important; color: var(--vel-success) !important; }
.badge-danger,  .badge.bg-danger  { background-color: var(--vel-danger-bg)  !important; color: var(--vel-danger)  !important; }
.badge-warning, .badge.bg-warning { background-color: var(--vel-warning-bg) !important; color: var(--vel-warning) !important; }
.badge-info,    .badge.bg-info    { background-color: var(--vel-info-bg)    !important; color: var(--vel-info)    !important; }
.badge-secondary { background-color: #eef1f4 !important; color: var(--vel-ink-600) !important; }

.alert {
  border: 1px solid transparent;
  border-radius: var(--vel-radius);
  border-left-width: 4px;
  padding: 14px 18px;
  font-size: 14px;
}
.alert-success { background: var(--vel-success-bg); border-color: #bbf7d0; border-left-color: var(--vel-success); color: #166534; }
.alert-danger  { background: var(--vel-danger-bg);  border-color: #fecaca; border-left-color: var(--vel-danger);  color: #991b1b; }
.alert-warning { background: var(--vel-warning-bg); border-color: #fde68a; border-left-color: var(--vel-warning); color: #92400e; }
.alert-info    { background: var(--vel-info-bg);    border-color: #bfdbfe; border-left-color: var(--vel-info);    color: #1e40af; }

/* ---------------------------------------------------------------------
   13. Dropdowns
   --------------------------------------------------------------------- */
.dropdown-menu {
  border: 1px solid var(--vel-line);
  border-radius: var(--vel-radius);
  box-shadow: var(--vel-shadow);
  padding: 6px;
}
.dropdown-item {
  border-radius: var(--vel-radius-xs);
  padding: 9px 12px;
  font-size: 14px;
  color: var(--vel-ink-700);
  transition: background var(--vel-transition), color var(--vel-transition);
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--vel-primary-050);
  color: var(--vel-primary-700);
}
.dropdown-item.active, .dropdown-item:active {
  background: var(--vel-primary) !important;
  color: #fff !important;
}
.dropdown-divider { border-color: var(--vel-line-soft); }

/* ---------------------------------------------------------------------
   14. Breadcrumb / misc
   --------------------------------------------------------------------- */
.breadcrumb { background: transparent; padding: 0; font-size: 13px; }
.breadcrumb-item.active { color: var(--vel-ink-500); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--vel-ink-400); }

hr { border-color: var(--vel-line-soft); }
.progress { border-radius: var(--vel-radius-pill); background: var(--vel-line-soft); height: 8px; }
.progress-bar { background-color: var(--vel-primary); }

.text-primary { color: var(--vel-primary-700) !important; }
.bg-primary { background-color: var(--vel-primary) !important; }

/* ---------------------------------------------------------------------
   15. Login
   --------------------------------------------------------------------- */
body.login-page, .login-page { background: var(--vel-bg); }
.login-page input.form-control,
.login-page .form-control {
  border-radius: var(--vel-radius);
  min-height: 46px;
}
.login-page .btn,
.login-page button[type="submit"] {
  border-radius: var(--vel-radius);
  min-height: 48px;
  font-size: 15px;
  font-weight: 700;
}

/* ---------------------------------------------------------------------
   16. Responsive
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .page-content { padding: 18px 16px; }
  .card .card-body { padding: 18px; }
  .card .card-header, .card-header { padding: 16px 18px; }
  /* Las tablas hacen scroll horizontal dentro de su contenedor */
  .grid-view, .kv-grid-container, .table-responsive { border-radius: var(--vel-radius); }
  .table thead th, .table tbody td { padding: 11px 12px; }
}

@media (max-width: 767.98px) {
  .page-content { padding: 14px 12px; }
  h1, .h1 { font-size: 1.5rem; }
  h2, .h2 { font-size: 1.3rem; }
  .modal-body { padding: 18px; }
  .modal-header, .modal-footer { padding: 14px 18px; }
  .btn { padding: 9px 14px; }
  /* Toolbars de filtros/acciones apilan en vez de desbordar */
  .navbar .navbar-content { flex-wrap: wrap; }
}

/* Targets tactiles minimos */
@media (hover: none) and (pointer: coarse) {
  .btn, .form-control, .nav-link, .page-link { min-height: 42px; }
}