/*
* clases globales invu
* Global class
******************************************************************************/

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: none;
  color: black!important; /*change the hover text color*/
  border: 0px solid;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
  background: none;
  color: black!important;
}
.disabled_forms{
  background:rgba(75, 70, 92, 0.08) !important;
}

.required_forms{
   /* border-color: red !important;
   background: #eb9d9d !important; */
}

.img_prod{
  border-radius: 7px;
  object-fit: cover;
}

.image{
    width: 250px !important;
    height: 250px !important;
    margin-top: 40px !important;
    border-radius: 20px;
    margin-bottom: 15px;
    /* padding-left: 40px !important; */
  }



  .fieldset_branches{
    border: 0.5px solid rgb(149, 145, 145);
    padding: 10px;
  }

  .fieldset_branches legend{
    float: inherit;
    width: 80%;
    font-size: 18px;
  }

  .hide_text{
    display:none;
  }

  .form-floating > label:not(.label_checkbox){
    padding: 7px 27px !important;
  }

  .label_checkbox{
    padding: 0px 40px !important;
  }

  #addProdProv .form-floating>label,
  #addWarehouseProd .form-floating>label {
      padding: 15px !important;
  }


  .red {
      color: red !important;
      font-weight: bold !important;
  }
  /* Keep row backgrounds neutral so .red/.green row coloring reads clearly.
     Scoped to DataTables only — the bare-element version of this rule was a
     global !important that nuked backgrounds on every other table on the page
     (e.g. Filament listing headers/stripes). */
  table.dataTable thead, table.dataTable tbody, table.dataTable tfoot,
  table.dataTable tr, table.dataTable td, table.dataTable th {
      background: transparent !important;
  }

  /* DataTable specific red styling for better specificity */
  table.dataTable tbody tr.red,
  table.dataTable tbody tr.red td {
      color: red !important;
      font-weight: bold !important;
  }

  .green {
      color: green !important;
      font-weight: bold !important;
  }
 table.dataTable tbody tr.green,
  table.dataTable tbody tr.green td {
      color: green !important;
      font-weight: bold !important;
  }
  .yellow {
      color: yellow !important;
      font-weight: bold !important;
  }
   table.dataTable tbody tr.yellow,
  table.dataTable tbody tr.yellow td {
      color: yellow !important;
      font-weight: bold !important;
  }
  .black {
      color: black !important;
  }
    table.dataTable tbody tr.black,
  table.dataTable tbody tr.black td {
      color: black !important;
      font-weight: bold !important;
  }
  .blue {
      color: blue !important;
      font-weight: bold !important;
  }
    table.dataTable tbody tr.blue,
  table.dataTable tbody tr.blue td {
      color: blue !important;
      font-weight: bold !important;
  }
  .purple {
      color: purple !important;
      font-weight: bold !important;
  }
     table.dataTable tbody tr.purple,
  table.dataTable tbody tr.purple td {
      color: purple !important;
      font-weight: bold !important;
  }
  .grey {
      color: grey !important;
  }
   table.dataTable tbody tr.grey,
  table.dataTable tbody tr.grey td {
      color: grey !important;
      font-weight: bold !important;
  }
  .orange {
      color: orange !important;
      font-weight: bold !important;
  }

  /* DataTable specific orange styling for better specificity */
  table.dataTable tbody tr.orange,
  table.dataTable tbody tr.orange td {
      color: orange !important;
      font-weight: bold !important;
  }

  table.dataTable tbody tr.alert-warning,
  table.dataTable tbody tr.alert-warning td {
      color: orange !important;
      font-weight: bold !important;
  }

  table.dataTable tbody tr.alert-info,
  table.dataTable tbody tr.alert-info td {
      color: #00cfe8 !important;
      font-weight: bold !important;
  }

  /* Dark mode DataTable colors - change to white text for better visibility */
  .dark-style table.dataTable,
  .dark-style table.dataTable  td {
      color: #ffffff !important;
      font-weight: bold !important;
  }

  .dark-style table.dataTable tbody,
  .dark-style table.dataTable tbody td {
      color: #ffffff !important;
      font-weight: bold !important;
  }

  .dataTables_info {
      display: block !important;
  }

  .dataTables_length,
  .dataTables_info {
      margin-left: 20px !important;
  }

  .dataTable td{
    font-size: 13px !important;
  }

  .input-table, .select-table {
    border-radius: 7px;
    padding: 4px;
    border: 1px solid #d4cdcdee !important;
  }

  .input_hidden{
    border: 0px !important;
    background-color: transparent !important;
  }

  .nav-item:not(.disabled) {
    cursor: pointer;
  }

  .form-group label {
      font-weight: 700;
  }

  .form-group .row {
      margin-bottom: 10px;
  }

  .select2-container--default .select2-selection--single{
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    padding: 27px;
  }

  .overflow-x{
    overflow-x: hidden;
    margin-bottom: 15px;
  }

  .display_inline {
    display: inline-block !important;
  }

/* ── Filament ↔ Bootstrap bridge ─────────────────────────────────────────
   Filament 5 ships its CSS inside Tailwind cascade layers (@layer components,
   @layer utilities). Bootstrap/Vuexy declare `a { color }` and `a:hover { color }`
   outside any layer, and unlayered declarations beat layered ones no matter the
   specificity. Every Filament control rendered as <a> (actions with ->url():
   buttons, icon buttons, links, badges) therefore lost its own text color and
   painted the theme link blue on top of the button fill ("Crear Ítem" unreadable).
   The same unlayered Bootstrap rule also forces `text-decoration: underline`
   on those controls.
   `revert-layer` hands both properties back to Filament's layered rules
   (`--text`, `--hover-text`, gray ramps, Tailwind's `a { text-decoration:
   inherit }`, `.fi-link:hover` underline) without re-declaring each
   component's palette.
   Only components whose <a> itself carries the color rule are listed; anything
   else would fall through to the UA link blue. Page skins that set an explicit
   `color` (invu-listing toolbar/modal buttons) still win by specificity. */
a.fi-btn,
a.fi-icon-btn,
a.fi-link,
a.fi-badge,
a.fi-btn:hover,
a.fi-icon-btn:hover,
a.fi-link:hover,
a.fi-badge:hover {
  color: revert-layer;
  text-decoration: revert-layer;
}