/* =============================================
  Fuente global
  ============================================= */

@font-face {
  font-family: 'RobotoCondensed';
  src: url('../fonts/RobotoCondensed-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after {
  font-family: 'RobotoCondensed', sans-serif !important;
}

/* =============================================
  Botones de opciones — cursor pointer
  ============================================= */

.btn-ghost-primary,
.btn-ghost-danger,
.btn-ghost-secondary {
  cursor: pointer;
}

/* =============================================
  Input group — borde completo al activarse
  ============================================= */

.input-group:focus-within {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(1, 37, 120, 0.25);
  border-radius: var(--bs-border-radius, 0.375rem);
}

.input-group:focus-within .input-group-text,
.input-group:focus-within .form-control,
.input-group:focus-within .form-select {
  border-color: #012578;
  box-shadow: none;
}

i.bi.bi-pencil.fs-2 {
color: blue;
}

.btn-ghost-images {
color: darkorchid;
}

.btn-ghost-primary {
color: green;
}

.btn-ghost-cart {
color: orange;
}

i.bi.bi-trash.fs-2 {
color: red;
}

@media (min-width: 992px) {
  .app-header {
      height: 90px;
  }
}

/* =============================================
  vue-good-table — thead
  ============================================= */

.vgt-table thead th {
  background: #012578 !important;
  color: #fff !important;
  border-color: #011a56 !important;
}

.vgt-global-search {
  background: #012578 !important;
  color: #fff !important;
  border-color: #011a56 !important;
}

.vgt-global-search__input .input-group-addon,
.vgt-global-search .vgt-input-group-addon,
.vgt-global-search span[class*="icon"],
.vgt-global-search .magnifying-glass {
  color: #fff !important;
  fill: #fff !important;
}

.vgt-global-search__input .input__icon .magnifying-glass {
  border-color: #fff !important;
}

.vgt-global-search__input .input__icon .magnifying-glass:before {
  background: #fff !important;
}

.vgt-table thead th .vgt-sort-btn,
.vgt-table thead th button {
  color: #fff !important;
}

/* =============================================
  vue-good-table — filas striped
  ============================================= */

.vgt-table.striped tbody tr:nth-child(even) td {
  background-color: #f5f8ff !important;
}

.vgt-table.striped tbody tr:nth-child(odd) td {
  background-color: #ffffff !important;
}

.vgt-table.striped tbody tr:hover td {
  background-color: #e8eeff !important;
}

table.vgt-table {
  font-size: 13px !important;
}

.card .card-header .card-title, .card .card-header .card-title .card-label {
  font-weight: 900;
}

/* =============================================
   Modal header — estilo btn-primary
   ============================================= */

.modal-header {
  background-color: blue !important;
  border-bottom-color: #011a56 !important;
}

.modal-header .modal-title {
  color: #fff !important;
}

.modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%) !important;
}

/* =============================================
   form-label-group — floating labels
   ============================================= */

.form-label-group {
  position: relative;
  margin-bottom: 0;
}

.form-label-group > .form-control,
.form-label-group > .form-select {
  height: calc(3.5rem + 2px);
  padding: 1.125rem 0.75rem 0.25rem;
  line-height: 1.25;
}

.form-label-group > textarea.form-control {
  height: auto;
  padding-top: 1.75rem;
  padding-bottom: 0.5rem;
}

.form-label-group > .form-control-sm,
.form-label-group > .form-select-sm {
  height: calc(2.75rem + 2px);
  padding: 0.875rem 0.6rem 0.2rem;
  font-size: 0.875rem;
}

.form-label-group > label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 1rem 0.75rem;
  pointer-events: none;
  border: 1px solid transparent;
  transform-origin: 0 0;
  transition: opacity .1s ease-in-out, transform .1s ease-in-out;
  color: #8899aa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: 1rem;
}

/* Label flota: input con valor, con foco, o select/number/date */
.form-label-group > .form-control:focus ~ label,
.form-label-group > .form-control:not(:placeholder-shown) ~ label,
.form-label-group > .form-select ~ label,
.form-label-group > input[type="number"] ~ label,
.form-label-group > input[type="date"] ~ label,
.form-label-group > input[type="password"] ~ label,
.form-label-group > textarea.form-control:focus ~ label,
.form-label-group > textarea.form-control:not(:placeholder-shown) ~ label {
  transform: scale(0.78) translateY(-0.6rem) translateX(0.1rem);
  color: #012578;
  opacity: 0.9;
}

/* Autofill */
.form-label-group > .form-control:-webkit-autofill ~ label {
  transform: scale(0.78) translateY(-0.6rem) translateX(0.1rem);
  color: #012578;
  opacity: 0.9;
}

/* Asterisco en campos requeridos */
.form-label-group label.required::after {
  content: " *";
  color: #dc3545;
}