/* ============================================================
   VALEX - Premium Bootstrap 5 Admin Template
   assets/css/style.css  — Estilos principales
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --valex-primary:        #6259ca;
  --valex-primary-dark:   #4e46b4;
  --valex-secondary:      #eb6f33;
  --valex-success:        #19b159;
  --valex-info:           #45aaf2;
  --valex-warning:        #ecb403;
  --valex-danger:         #ee335e;
  --valex-light:          #f0f0ff;
  --valex-dark:           #000;
  --valex-body-bg:        #f0f0ff;
  --valex-sidebar-bg:     #2c2c54;
  --valex-sidebar-width:  240px;
  --valex-navbar-height:  60px;
  --valex-card-border:    0 0 0.3rem 0.3rem rgba(33,37,41,.1);
  --valex-font:           'Roboto', sans-serif;
  --valex-border:         1px solid #e6e6f1;
  --valex-radius:         0.35rem;
  --valex-text-muted:     #74829c;
}

/* ── Reset & Base ───────────────────────────────────────────── */
*,
*::before,
*::after { box-sizing: border-box; }

html { font-size: 14px; }

body {
  font-family:      var(--valex-font);
  background-color: var(--valex-body-bg);
  color:            #495057;
  margin:           0;
  overflow-x:       hidden;
}

a { text-decoration: none; color: var(--valex-primary); }
a:hover { color: var(--valex-primary-dark); }

/* ── Layout wrapper ─────────────────────────────────────────── */
.app-wrapper {
  display:   flex;
  min-height: 100vh;
}

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar {
  width:            var(--valex-sidebar-width);
  min-height:       100vh;
  background:       var(--valex-sidebar-bg);
  position:         fixed;
  left:             0;
  top:              0;
  z-index:          1040;
  transition:       width 0.3s ease;
  overflow-y:       auto;
  overflow-x:       hidden;
}

.sidebar-brand {
  display:          flex;
  align-items:      center;
  padding:          0 1.25rem;
  height:           var(--valex-navbar-height);
  border-bottom:    1px solid rgba(255,255,255,.08);
}

.sidebar-brand .brand-logo {
  display:          flex;
  align-items:      center;
  color:            #fff;
  font-size:        1.35rem;
  font-weight:      700;
  gap:              .5rem;
}

.sidebar-brand .brand-logo span { color: var(--valex-secondary); }

/* Nav menu */
.sidebar-menu {
  list-style:   none;
  margin:       0;
  padding:      .75rem 0;
}

.sidebar-menu .menu-label {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          rgba(255,255,255,.35);
  padding:        1rem 1.25rem .4rem;
  margin:         0;
}

.sidebar-menu .nav-item { list-style: none; }

.sidebar-menu .nav-link {
  display:        flex;
  align-items:    center;
  gap:            .65rem;
  padding:        .6rem 1.25rem;
  color:          rgba(255,255,255,.65);
  font-size:      .8775rem;
  font-weight:    400;
  border-radius:  0;
  transition:     background .2s, color .2s;
}

.sidebar-menu .nav-link i {
  font-size:   1rem;
  width:        1.25rem;
  text-align:   center;
  flex-shrink:  0;
}

.sidebar-menu .nav-link:hover,
.sidebar-menu .nav-link.active {
  background: rgba(255,255,255,.07);
  color:      #fff;
}

.sidebar-menu .nav-link.active { border-left: 3px solid var(--valex-primary); }

/* Submenu */
.sidebar-menu .nav-link[data-bs-toggle="collapse"] {
  position: relative;
}
.sidebar-menu .nav-link[data-bs-toggle="collapse"]::after {
  content:     "\F282";
  font-family: "bootstrap-icons";
  margin-left:  auto;
  transition:   transform .25s;
  font-size:    .75rem;
}
.sidebar-menu .nav-link[data-bs-toggle="collapse"][aria-expanded="true"]::after {
  transform: rotate(90deg);
}

.sidebar-submenu {
  list-style:  none;
  padding:     .25rem 0;
  margin:      0;
  background:  rgba(0,0,0,.15);
}

.sidebar-submenu .nav-link {
  padding-left: 3rem;
  font-size:    .835rem;
  color:        rgba(255,255,255,.5);
}

.sidebar-submenu .nav-link:hover,
.sidebar-submenu .nav-link.active { color: #fff; background: transparent; }

/* ── Main content ───────────────────────────────────────────── */
.main-content {
  flex:        1;
  margin-left: var(--valex-sidebar-width);
  min-height:  100vh;
  display:     flex;
  flex-direction: column;
  transition:  margin-left .3s ease;
}

/* ── Top Navbar ─────────────────────────────────────────────── */
.app-navbar {
  height:          var(--valex-navbar-height);
  background:      #fff;
  border-bottom:   var(--valex-border);
  display:         flex;
  align-items:     center;
  padding:         0 1.5rem;
  position:        sticky;
  top:             0;
  z-index:         1030;
  gap:             1rem;
}

.navbar-toggle {
  background:  none;
  border:      none;
  font-size:   1.4rem;
  color:       #495057;
  cursor:      pointer;
  padding:     .25rem .5rem;
  border-radius: var(--valex-radius);
}
.navbar-toggle:hover { background: var(--valex-body-bg); }

.navbar-search {
  flex: 1;
  max-width: 350px;
}

.navbar-search .form-control {
  border-radius: 2rem;
  border-color:  #e6e6f1;
  font-size:     .8335rem;
  background:    var(--valex-body-bg);
  padding-left:  2.25rem;
}

.navbar-search-icon {
  position:  absolute;
  left:       .75rem;
  top:        50%;
  transform:  translateY(-50%);
  color:      var(--valex-text-muted);
}

.navbar-right {
  display:     flex;
  align-items: center;
  gap:         .25rem;
  margin-left: auto;
}

.nav-icon-btn {
  background:    none;
  border:        none;
  width:         38px;
  height:        38px;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         #495057;
  font-size:     1.1rem;
  cursor:        pointer;
  position:      relative;
  transition:    background .2s;
}
.nav-icon-btn:hover { background: var(--valex-body-bg); }

.nav-badge {
  position:    absolute;
  top:         2px;
  right:       2px;
  background:  var(--valex-danger);
  color:       #fff;
  font-size:   9px;
  font-weight: 700;
  line-height: 1;
  padding:     2px 4px;
  border-radius: 10px;
  min-width:   14px;
  text-align:  center;
}

.nav-avatar {
  width:         34px;
  height:        34px;
  border-radius: 50%;
  object-fit:    cover;
  cursor:        pointer;
  border:        2px solid var(--valex-body-bg);
}

/* ── Page wrapper ───────────────────────────────────────────── */
.page-content {
  flex:    1;
  padding: 1.5rem;
}

/* ── Breadcrumb + page header ───────────────────────────────── */
.page-header {
  margin-bottom: 1.5rem;
}

.page-header h4 {
  font-size:   1.15rem;
  font-weight: 600;
  color:       #1a1a3e;
  margin:      0;
}

.breadcrumb {
  background:   transparent;
  padding:      0;
  margin:       .25rem 0 0;
  font-size:    .8rem;
}

.breadcrumb-item + .breadcrumb-item::before { color: var(--valex-text-muted); }
.breadcrumb-item.active { color: var(--valex-text-muted); }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  border:        var(--valex-border);
  border-radius: 0.5rem;
  box-shadow:    0 0 0.3rem 0.3rem rgba(33,37,41,.05);
  margin-bottom: 1.5rem;
}

.card-header {
  background:    #fff;
  border-bottom: var(--valex-border);
  padding:       1rem 1.25rem;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
}

.card-header h5 {
  font-size:   .95rem;
  font-weight: 600;
  color:       #1a1a3e;
  margin:      0;
}

.card-body { padding: 1.5rem; }

/* ── Form Elements ──────────────────────────────────────────── */

/* Labels */
.form-label {
  font-size:   .8335rem;
  font-weight: 500;
  color:       #495057;
  margin-bottom: .4rem;
}

/* Inputs */
.form-control,
.form-select {
  font-size:     .875rem;
  border:        1px solid #e6e6f1;
  border-radius: var(--valex-radius);
  color:         #495057;
  background:    #fff;
  padding:       .475rem .875rem;
  transition:    border-color .2s, box-shadow .2s;
  height:        auto;
}

.form-control:focus,
.form-select:focus {
  border-color:  var(--valex-primary);
  box-shadow:    0 0 0 0.2rem rgba(98,89,202,.18);
  outline:       none;
}

.form-control::placeholder { color: #b0bac9; }

/* Sizes */
.form-control-sm { font-size: .8rem; padding: .3rem .65rem; }
.form-control-lg { font-size: 1rem; padding: .6rem 1rem; }

/* States */
.form-control.is-valid  { border-color: var(--valex-success); }
.form-control.is-valid:focus { box-shadow: 0 0 0 .2rem rgba(25,177,89,.18); }
.form-control.is-invalid { border-color: var(--valex-danger); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 .2rem rgba(238,51,94,.18); }

.valid-feedback   { font-size: .8rem; color: var(--valex-success); }
.invalid-feedback { font-size: .8rem; color: var(--valex-danger); }

/* Floating labels */
.form-floating > .form-control,
.form-floating > .form-select { padding: 1rem .75rem .3rem; }
.form-floating > label { font-size: .875rem; color: #b0bac9; }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  font-size: .75rem;
  color:     var(--valex-primary);
  transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}

/* Input groups */
.input-group-text {
  background:   var(--valex-body-bg);
  border:       1px solid #e6e6f1;
  color:        var(--valex-text-muted);
  font-size:    .875rem;
}

/* Checkboxes & Radios */
.form-check-input {
  width:         1rem;
  height:        1rem;
  border:        1.5px solid #ced4da;
  border-radius: 3px;
  cursor:        pointer;
  transition:    background .15s, border-color .15s, box-shadow .15s;
}

.form-check-input:checked {
  background-color: var(--valex-primary);
  border-color:     var(--valex-primary);
}

.form-check-input[type="radio"] { border-radius: 50%; }

.form-check-input:focus {
  box-shadow: 0 0 0 .2rem rgba(98,89,202,.2);
  border-color: var(--valex-primary);
}

.form-check-label { font-size: .875rem; cursor: pointer; }

/* Switches */
.form-switch .form-check-input {
  width:         2.25rem;
  border-radius: 2rem;
  background-color: #ced4da;
  border: none;
}

.form-switch .form-check-input:checked {
  background-color: var(--valex-primary);
}

/* Textarea */
textarea.form-control { min-height: 100px; resize: vertical; }

/* Ranges */
.form-range::-webkit-slider-thumb {
  background: var(--valex-primary);
}
.form-range::-moz-range-thumb {
  background: var(--valex-primary);
}

/* File input */
.form-control[type="file"] { padding: .35rem .75rem; }
.form-control[type="file"]::file-selector-button {
  background:    var(--valex-primary);
  color:         #fff;
  border:        none;
  border-radius: var(--valex-radius);
  padding:       .3rem .75rem;
  margin-right:  .75rem;
  font-size:     .8335rem;
  cursor:        pointer;
}

/* Color input */
.form-control[type="color"] {
  height:  38px;
  padding: .25rem .35rem;
  width:   60px;
}

/* ── Valex Color variants for Checkboxes & Radios ───────────── */
.form-check-input.check-primary:checked  { background-color: var(--valex-primary); border-color: var(--valex-primary); }
.form-check-input.check-success:checked  { background-color: var(--valex-success); border-color: var(--valex-success); }
.form-check-input.check-warning:checked  { background-color: var(--valex-warning); border-color: var(--valex-warning); }
.form-check-input.check-danger:checked   { background-color: var(--valex-danger);  border-color: var(--valex-danger);  }
.form-check-input.check-info:checked     { background-color: var(--valex-info);    border-color: var(--valex-info);    }
.form-check-input.check-secondary:checked{ background-color: var(--valex-secondary);border-color: var(--valex-secondary);}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  font-size:     .875rem;
  font-weight:   500;
  border-radius: var(--valex-radius);
  padding:       .45rem 1.1rem;
  transition:    all .2s;
  letter-spacing: .01em;
}

.btn-primary  { background: var(--valex-primary);   border-color: var(--valex-primary); color: #fff; }
.btn-primary:hover  { background: var(--valex-primary-dark); border-color: var(--valex-primary-dark); }
.btn-secondary{ background: var(--valex-secondary); border-color: var(--valex-secondary); color: #fff; }
.btn-success  { background: var(--valex-success);   border-color: var(--valex-success); color: #fff; }
.btn-info     { background: var(--valex-info);      border-color: var(--valex-info); color: #fff; }
.btn-warning  { background: var(--valex-warning);   border-color: var(--valex-warning); color: #fff; }
.btn-danger   { background: var(--valex-danger);    border-color: var(--valex-danger); color: #fff; }
.btn-light    { background: var(--valex-light);     border-color: #e6e6f1; color: #495057; }
.btn-dark     { background: var(--valex-dark);      border-color: var(--valex-dark); color: #fff; }

.btn-outline-primary { border-color: var(--valex-primary); color: var(--valex-primary); }
.btn-outline-primary:hover { background: var(--valex-primary); color: #fff; }

/* ── Select2 overrides ──────────────────────────────────────── */
.select2-container--default .select2-selection--single {
  border:        1px solid #e6e6f1;
  border-radius: var(--valex-radius);
  height:        38px;
  display:       flex;
  align-items:   center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height:  38px;
  padding-left: .875rem;
  color:        #495057;
  font-size:    .875rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px;
}

.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--valex-primary);
  box-shadow:   0 0 0 .2rem rgba(98,89,202,.18);
  outline:      none;
}

.select2-dropdown {
  border-color:  var(--valex-primary);
  border-radius: var(--valex-radius);
  font-size:     .875rem;
}

.select2-results__option--highlighted[aria-selected] {
  background-color: var(--valex-primary);
}

/* Select2 multiple */
.select2-container--default .select2-selection--multiple {
  border:        1px solid #e6e6f1;
  border-radius: var(--valex-radius);
  min-height:    38px;
  padding:       2px 6px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background:    var(--valex-primary);
  border:        none;
  color:         #fff;
  border-radius: 3px;
  padding:       2px 8px;
  font-size:     .785rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color:      rgba(255,255,255,.7);
  margin-right: 4px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #fff;
  background: transparent;
}

/* ── Flatpickr overrides ────────────────────────────────────── */
.flatpickr-calendar {
  border:        var(--valex-border);
  border-radius: .5rem;
  box-shadow:    0 .5rem 1rem rgba(0,0,0,.1);
  font-family:   var(--valex-font);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background:   var(--valex-primary);
  border-color: var(--valex-primary);
}

.flatpickr-day.today { border-color: var(--valex-primary); }

/* ── Ion Range Slider overrides ─────────────────────────────── */
.irs--flat .irs-bar,
.irs--flat .irs-from,
.irs--flat .irs-to,
.irs--flat .irs-single { background: var(--valex-primary); }
.irs--flat .irs-handle > i:first-child { background: var(--valex-primary); }

/* ── Notyf overrides ────────────────────────────────────────── */
.notyf__toast--success { background: var(--valex-success); }
.notyf__toast--error   { background: var(--valex-danger); }

/* ── Divider ─────────────────────────────────────────────────── */
.divider {
  display:      flex;
  align-items:  center;
  color:        var(--valex-text-muted);
  font-size:    .8rem;
  margin:       1rem 0;
  gap:          .75rem;
}
.divider::before,
.divider::after {
  content:    "";
  flex:       1;
  border-top: 1px solid #e6e6f1;
}

/* ── Badge ───────────────────────────────────────────────────── */
.badge {
  font-size:     .73rem;
  font-weight:   600;
  padding:       .35em .6em;
  border-radius: .25rem;
}

/* ── Utility ─────────────────────────────────────────────────── */
.text-muted { color: var(--valex-text-muted) !important; }
.fs-12      { font-size: .75rem !important; }
.fs-13      { font-size: .8125rem !important; }
.fs-14      { font-size: .875rem !important; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .sidebar {
    transform: translateX(calc(-1 * var(--valex-sidebar-width)));
  }
  .sidebar.show { transform: translateX(0); }
  .main-content { margin-left: 0; }

  .sidebar-overlay {
    position: fixed;
    inset:    0;
    background: rgba(0,0,0,.45);
    z-index:  1039;
    display:  none;
  }
  .sidebar-overlay.show { display: block; }
}

@media (min-width: 992px) {
  body.sidebar-collapsed .sidebar { width: 65px; }
  body.sidebar-collapsed .sidebar .nav-link span,
  body.sidebar-collapsed .sidebar .menu-label,
  body.sidebar-collapsed .sidebar .brand-logo span { display: none; }
  body.sidebar-collapsed .main-content { margin-left: 65px; }
}

/* ── Custom form section headers ────────────────────────────── */
.form-section-title {
  font-size:      .72rem;
  font-weight:    600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          var(--valex-primary);
  margin-bottom:  1rem;
  padding-bottom: .5rem;
  border-bottom:  2px solid rgba(98,89,202,.15);
}

/* ── Color Swatches ──────────────────────────────────────────── */
.color-swatch-group { display: flex; flex-wrap: wrap; gap: .5rem; }
.color-swatch {
  width:         28px;
  height:        28px;
  border-radius: 50%;
  cursor:        pointer;
  border:        2px solid transparent;
  transition:    transform .15s, border-color .15s;
}
.color-swatch:hover,
.color-swatch.active { transform: scale(1.15); border-color: rgba(0,0,0,.25); }

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d4d4e9; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--valex-primary); }