/* =========================================================
   HUB NAI · PROVEEDORES
   NEURO APRENDIZAJE INFANTIL

   UBICACIÓN:
   frontend/src/pages/proveedores/proveedores.css

   PARTE 1 DE 3

   DISEÑO:
   - Premium
   - Compacto
   - Responsive
   - Sin glow
   - Sin scroll horizontal
   - Divisiones claras
   - Modo claro y oscuro
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

.proveedores-page {
  --prov-bg:
    #f4f5f1;

  --prov-surface:
    #ffffff;

  --prov-surface-soft:
    #f8f8f5;

  --prov-surface-strong:
    #efefea;

  --prov-border:
    #d8d9d2;

  --prov-border-strong:
    #c5c7be;

  --prov-text:
    #12130f;

  --prov-text-soft:
    #4f5249;

  --prov-text-muted:
    #6f7368;

  --prov-black:
    #0a0b09;

  --prov-accent:
    #171a15;

  --prov-success:
    #1f6a43;

  --prov-success-bg:
    #eaf6ef;

  --prov-warning:
    #9b5a00;

  --prov-warning-bg:
    #fff4df;

  --prov-danger:
    #a22d2d;

  --prov-danger-bg:
    #fff0ef;

  --prov-info:
    #315f8a;

  --prov-info-bg:
    #edf4fb;

  --prov-radius:
    14px;

  --prov-radius-sm:
    10px;

  --prov-radius-xs:
    8px;

  --prov-shadow:
    0 12px 28px rgba(16, 18, 14, 0.06);

  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    18px;

  padding:
    20px;

  color:
    var(--prov-text);

  font-family:
    "DM Sans",
    sans-serif;

  overflow:
    visible;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"] .proveedores-page,
body[data-theme="dark"] .proveedores-page,
.dark .proveedores-page {
  --prov-bg:
    #000000;

  --prov-surface:
    #090a09;

  --prov-surface-soft:
    #0f100f;

  --prov-surface-strong:
    #151615;

  --prov-border:
    #262826;

  --prov-border-strong:
    #363936;

  --prov-text:
    #f6f7f4;

  --prov-text-soft:
    #c9cdc4;

  --prov-text-muted:
    #a6aba0;

  --prov-black:
    #ffffff;

  --prov-accent:
    #f2f4ef;

  --prov-success:
    #68d499;

  --prov-success-bg:
    #0c2115;

  --prov-warning:
    #e5b15b;

  --prov-warning-bg:
    #241a0c;

  --prov-danger:
    #ef7777;

  --prov-danger-bg:
    #271010;

  --prov-info:
    #8ab8e6;

  --prov-info-bg:
    #0c1824;

  --prov-shadow:
    none;
}


/* =========================================================
   RESET LOCAL
   ========================================================= */

.proveedores-page *,
.proveedores-page *::before,
.proveedores-page *::after {
  box-sizing:
    border-box;
}


.proveedores-page button,
.proveedores-page input,
.proveedores-page select,
.proveedores-page textarea {
  font:
    inherit;
}


.proveedores-page button {
  color:
    inherit;
}


.proveedores-page input,
.proveedores-page select,
.proveedores-page textarea {
  min-width:
    0;
}


/* =========================================================
   HEADER
   ========================================================= */

.proveedores-header {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    18px;

  padding:
    4px 0 2px;
}


.proveedores-header-copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


.proveedores-eyebrow {
  font-size:
    11px;

  line-height:
    1.2;

  font-weight:
    800;

  letter-spacing:
    0.11em;

  color:
    var(--prov-text-muted);
}


.proveedores-header h1 {
  margin:
    0;

  font-size:
    clamp(
      26px,
      2vw,
      34px
    );

  line-height:
    1.08;

  font-weight:
    800;

  letter-spacing:
    -0.035em;

  color:
    var(--prov-text);
}


.proveedores-header p {
  margin:
    2px 0 0;

  max-width:
    720px;

  font-size:
    14px;

  line-height:
    1.5;

  font-weight:
    600;

  color:
    var(--prov-text-soft);
}


.proveedores-header-actions {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  flex-wrap:
    wrap;
}


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

.proveedores-btn {
  min-height:
    38px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  border:
    1px solid transparent;

  border-radius:
    10px;

  padding:
    8px 13px;

  font-size:
    13px;

  line-height:
    1;

  font-weight:
    800;

  text-decoration:
    none;

  cursor:
    pointer;

  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background-color 140ms ease,
    color 140ms ease,
    opacity 140ms ease;
}


.proveedores-btn svg {
  width:
    16px;

  height:
    16px;

  stroke-width:
    2.1;
}


.proveedores-btn:hover:not(:disabled) {
  transform:
    translateY(-1px);
}


.proveedores-btn:active:not(:disabled) {
  transform:
    translateY(0);
}


.proveedores-btn:disabled {
  cursor:
    wait;

  opacity:
    0.62;
}


.proveedores-btn-primary {
  background:
    var(--prov-black);

  color:
    #ffffff;

  border-color:
    var(--prov-black);
}


html[data-theme="dark"] .proveedores-btn-primary,
body[data-theme="dark"] .proveedores-btn-primary,
.dark .proveedores-btn-primary {
  background:
    #f4f6f1;

  color:
    #060706;

  border-color:
    #f4f6f1;
}


.proveedores-btn-primary:hover:not(:disabled) {
  opacity:
    0.9;
}


.proveedores-btn-secondary {
  background:
    var(--prov-surface);

  color:
    var(--prov-text);

  border-color:
    var(--prov-border);
}


.proveedores-btn-secondary:hover:not(:disabled) {
  background:
    var(--prov-surface-soft);

  border-color:
    var(--prov-border-strong);
}


.proveedores-btn-danger {
  background:
    var(--prov-danger);

  color:
    #ffffff;

  border-color:
    var(--prov-danger);
}


.proveedores-btn-small {
  min-height:
    32px;

  padding:
    6px 10px;

  font-size:
    12px;
}


.proveedores-btn-chevron {
  width:
    14px !important;

  height:
    14px !important;

  margin-left:
    1px;

  opacity:
    0.7;
}


.proveedores-btn.is-open .proveedores-btn-chevron {
  transform:
    rotate(180deg);
}


/* =========================================================
   SPINNER
   ========================================================= */

.proveedores-btn-spinner {
  width:
    14px;

  height:
    14px;

  border:
    2px solid currentColor;

  border-right-color:
    transparent;

  border-radius:
    50%;

  animation:
    proveedoresSpin 700ms linear infinite;
}


@keyframes proveedoresSpin {
  to {
    transform:
      rotate(360deg);
  }
}


/* =========================================================
   EXPORT MENU
   ========================================================= */

.proveedores-export-wrap {
  position:
    relative;

  z-index:
    20;
}


.proveedores-export-menu {
  position:
    absolute;

  top:
    calc(100% + 8px);

  right:
    0;

  z-index:
    1000;

  width:
    260px;

  padding:
    6px;

  border:
    1px solid var(--prov-border);

  border-radius:
    12px;

  background:
    var(--prov-surface);

  box-shadow:
    var(--prov-shadow);
}


.proveedores-export-menu[hidden] {
  display:
    none !important;
}


.proveedores-export-menu button {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    34px minmax(0, 1fr);

  gap:
    9px;

  align-items:
    center;

  padding:
    9px;

  border:
    0;

  border-radius:
    8px;

  background:
    transparent;

  text-align:
    left;

  cursor:
    pointer;

  color:
    var(--prov-text);
}


.proveedores-export-menu button:hover {
  background:
    var(--prov-surface-soft);
}


.proveedores-export-menu-icon {
  width:
    34px;

  height:
    34px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid var(--prov-border);

  border-radius:
    8px;

  background:
    var(--prov-surface-soft);
}


.proveedores-export-menu-icon svg {
  width:
    15px;

  height:
    15px;
}


.proveedores-export-menu strong {
  display:
    block;

  margin-bottom:
    2px;

  font-size:
    12.5px;

  font-weight:
    800;

  color:
    var(--prov-text);
}


.proveedores-export-menu small {
  display:
    block;

  font-size:
    11px;

  line-height:
    1.35;

  font-weight:
    600;

  color:
    var(--prov-text-muted);
}


/* =========================================================
   MÉTRICAS
   ========================================================= */

.proveedores-metrics-mount {
  width:
    100%;

  min-width:
    0;
}


.proveedores-metrics-grid {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    );

  gap:
    10px;
}


.proveedores-metric-card {
  min-width:
    0;

  min-height:
    108px;

  display:
    grid;

  grid-template-columns:
    38px minmax(0, 1fr);

  gap:
    11px;

  align-items:
    flex-start;

  padding:
    14px;

  border:
    1px solid var(--prov-border);

  border-radius:
    var(--prov-radius);

  background:
    var(--prov-surface);

  box-shadow:
    var(--prov-shadow);
}


.proveedores-metric-icon {
  width:
    38px;

  height:
    38px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  border:
    1px solid var(--prov-border);

  border-radius:
    10px;

  background:
    var(--prov-surface-soft);

  color:
    var(--prov-text);
}


.proveedores-metric-icon svg {
  width:
    17px;

  height:
    17px;

  stroke-width:
    2.1;
}


.proveedores-metric-card.is-warning .proveedores-metric-icon {
  background:
    var(--prov-warning-bg);

  border-color:
    color-mix(
      in srgb,
      var(--prov-warning) 25%,
      var(--prov-border)
    );

  color:
    var(--prov-warning);
}


.proveedores-metric-card.is-danger .proveedores-metric-icon {
  background:
    var(--prov-danger-bg);

  border-color:
    color-mix(
      in srgb,
      var(--prov-danger) 25%,
      var(--prov-border)
    );

  color:
    var(--prov-danger);
}


.proveedores-metric-card.is-success .proveedores-metric-icon {
  background:
    var(--prov-success-bg);

  border-color:
    color-mix(
      in srgb,
      var(--prov-success) 25%,
      var(--prov-border)
    );

  color:
    var(--prov-success);
}


.proveedores-metric-body {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.proveedores-metric-label {
  font-size:
    11px;

  line-height:
    1.3;

  font-weight:
    800;

  color:
    var(--prov-text-muted);
}


.proveedores-metric-value {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    clamp(
      18px,
      1.45vw,
      24px
    );

  line-height:
    1.15;

  font-weight:
    800;

  letter-spacing:
    -0.035em;

  color:
    var(--prov-text);
}


.proveedores-metric-secondary {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    11px;

  line-height:
    1.3;

  font-weight:
    700;

  color:
    var(--prov-text-soft);
}


/* =========================================================
   VIEW SELECTOR
   ========================================================= */

.proveedores-views-mount {
  width:
    100%;
}


.proveedores-view-selector {
  width:
    fit-content;

  max-width:
    100%;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    3px;

  padding:
    4px;

  border:
    1px solid var(--prov-border);

  border-radius:
    11px;

  background:
    var(--prov-surface);
}


.proveedores-view-tab {
  min-height:
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    7px 12px;

  border:
    0;

  border-radius:
    8px;

  background:
    transparent;

  color:
    var(--prov-text-soft);

  font-size:
    12.5px;

  font-weight:
    800;

  cursor:
    pointer;
}


.proveedores-view-tab:hover {
  color:
    var(--prov-text);

  background:
    var(--prov-surface-soft);
}


.proveedores-view-tab.is-active {
  background:
    var(--prov-black);

  color:
    #ffffff;
}


html[data-theme="dark"] .proveedores-view-tab.is-active,
body[data-theme="dark"] .proveedores-view-tab.is-active,
.dark .proveedores-view-tab.is-active {
  background:
    #f4f6f1;

  color:
    #090a09;
}


.proveedores-view-tab svg {
  width:
    15px;

  height:
    15px;
}


/* =========================================================
   PANEL PRINCIPAL
   ========================================================= */

.proveedores-content-mount {
  width:
    100%;

  min-width:
    0;
}


.proveedores-panel {
  width:
    100%;

  min-width:
    0;

  border:
    1px solid var(--prov-border);

  border-radius:
    var(--prov-radius);

  background:
    var(--prov-surface);

  box-shadow:
    var(--prov-shadow);

  overflow:
    visible;
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.proveedores-toolbar {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;

  padding:
    12px 14px;

  border-bottom:
    1px solid var(--prov-border);
}


.proveedores-toolbar-main {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    minmax(220px, 1fr)
    auto;

  align-items:
    center;

  gap:
    10px;
}


.proveedores-toolbar-controls {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    7px;

  flex-wrap:
    wrap;
}


.proveedores-toolbar-secondary {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}


/* =========================================================
   SEARCH
   ========================================================= */

.proveedores-search {
  min-width:
    0;

  min-height:
    38px;

  display:
    grid;

  grid-template-columns:
    18px minmax(0, 1fr) auto;

  align-items:
    center;

  gap:
    8px;

  padding:
    0 10px;

  border:
    1px solid var(--prov-border);

  border-radius:
    10px;

  background:
    var(--prov-surface-soft);
}


.proveedores-search:focus-within {
  border-color:
    var(--prov-border-strong);

  background:
    var(--prov-surface);
}


.proveedores-search > svg {
  width:
    16px;

  height:
    16px;

  color:
    var(--prov-text-muted);
}


.proveedores-search input {
  width:
    100%;

  min-width:
    0;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    var(--prov-text);

  font-size:
    13px;

  font-weight:
    700;
}


.proveedores-search input::placeholder {
  color:
    var(--prov-text-muted);

  opacity:
    0.9;
}


.proveedores-search-clear {
  width:
    26px;

  height:
    26px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    0;

  border-radius:
    7px;

  background:
    transparent;

  color:
    var(--prov-text-muted);

  cursor:
    pointer;
}


.proveedores-search-clear:hover {
  background:
    var(--prov-surface-strong);

  color:
    var(--prov-text);
}


.proveedores-search-clear svg {
  width:
    14px;

  height:
    14px;
}


/* =========================================================
   SELECT CONTROL
   ========================================================= */

.proveedores-select-control {
  min-height:
    38px;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    0 8px 0 10px;

  border:
    1px solid var(--prov-border);

  border-radius:
    10px;

  background:
    var(--prov-surface);
}


.proveedores-select-control svg {
  width:
    15px;

  height:
    15px;

  color:
    var(--prov-text-muted);
}


.proveedores-select-control select {
  max-width:
    190px;

  min-height:
    34px;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    var(--prov-text);

  font-size:
    12.5px;

  font-weight:
    700;

  cursor:
    pointer;
}


/* =========================================================
   FILTER BUTTON
   ========================================================= */

.proveedores-filter-button {
  min-height:
    38px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    7px 11px;

  border:
    1px solid var(--prov-border);

  border-radius:
    10px;

  background:
    var(--prov-surface);

  color:
    var(--prov-text);

  font-size:
    12.5px;

  font-weight:
    800;

  cursor:
    pointer;
}


.proveedores-filter-button:hover {
  background:
    var(--prov-surface-soft);

  border-color:
    var(--prov-border-strong);
}


.proveedores-filter-button.has-filters {
  border-color:
    var(--prov-text-soft);
}


.proveedores-filter-button svg {
  width:
    15px;

  height:
    15px;
}


.proveedores-filter-count {
  min-width:
    19px;

  height:
    19px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 5px;

  border-radius:
    999px;

  background:
    var(--prov-black);

  color:
    #ffffff;

  font-size:
    10px;

  font-weight:
    800;
}


html[data-theme="dark"] .proveedores-filter-count,
body[data-theme="dark"] .proveedores-filter-count,
.dark .proveedores-filter-count {
  background:
    #f4f6f1;

  color:
    #080908;
}


/* =========================================================
   RESULT COUNT / LIMIT
   ========================================================= */

.proveedores-result-count {
  display:
    inline-flex;

  align-items:
    baseline;

  gap:
    5px;

  color:
    var(--prov-text-soft);
}


.proveedores-result-count strong {
  font-size:
    13px;

  font-weight:
    800;

  color:
    var(--prov-text);
}


.proveedores-result-count span {
  font-size:
    12px;

  font-weight:
    700;
}


.proveedores-limit-control {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  font-size:
    11.5px;

  font-weight:
    700;

  color:
    var(--prov-text-soft);
}


.proveedores-limit-control select {
  min-height:
    30px;

  padding:
    4px 7px;

  border:
    1px solid var(--prov-border);

  border-radius:
    8px;

  background:
    var(--prov-surface);

  color:
    var(--prov-text);

  font-size:
    11.5px;

  font-weight:
    800;

  outline:
    0;
}


/* =========================================================
   ADVANCED FILTERS
   ========================================================= */

.proveedores-advanced-filters {
  width:
    100%;
}


.proveedores-advanced-filters[hidden] {
  display:
    none !important;
}


.proveedores-filter-panel {
  width:
    100%;

  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;

  padding:
    14px;

  border-bottom:
    1px solid var(--prov-border);

  background:
    var(--prov-surface-soft);
}


.proveedores-filter-panel-header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    14px;
}


.proveedores-filter-panel-header > div:first-child {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.proveedores-filter-panel-header strong {
  font-size:
    13px;

  font-weight:
    800;

  color:
    var(--prov-text);
}


.proveedores-filter-panel-header span {
  font-size:
    11.5px;

  font-weight:
    600;

  color:
    var(--prov-text-soft);
}


.proveedores-filter-grid {
  width:
    100%;

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap:
    10px;
}


.proveedores-filter-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;
}


/* =========================================================
   FIELDS
   ========================================================= */

.proveedores-field {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;
}


.proveedores-field > span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  font-size:
    11px;

  line-height:
    1.2;

  font-weight:
    800;

  color:
    var(--prov-text-soft);
}


.proveedores-field > span b {
  color:
    var(--prov-danger);
}


.proveedores-field input,
.proveedores-field select,
.proveedores-field textarea {
  width:
    100%;

  min-width:
    0;

  min-height:
    38px;

  padding:
    8px 10px;

  border:
    1px solid var(--prov-border);

  border-radius:
    9px;

  outline:
    0;

  background:
    var(--prov-surface);

  color:
    var(--prov-text);

  font-size:
    12.5px;

  line-height:
    1.35;

  font-weight:
    700;

  transition:
    border-color 140ms ease,
    background-color 140ms ease;
}


.proveedores-field textarea {
  min-height:
    92px;

  resize:
    vertical;
}


.proveedores-field input:focus,
.proveedores-field select:focus,
.proveedores-field textarea:focus {
  border-color:
    var(--prov-border-strong);

  background:
    var(--prov-surface);
}


.proveedores-field input::placeholder,
.proveedores-field textarea::placeholder {
  color:
    var(--prov-text-muted);

  opacity:
    0.8;
}


.proveedores-field-span-2 {
  grid-column:
    span 2;
}


/* =========================================================
   TABLE
   ========================================================= */

.proveedores-table-mount {
  width:
    100%;

  min-width:
    0;

  overflow:
    visible;
}


.proveedores-table-shell {
  width:
    100%;

  min-width:
    0;

  overflow:
    visible;
}


.proveedores-table {
  width:
    100%;

  min-width:
    0;

  border-collapse:
    separate;

  border-spacing:
    0;

  table-layout:
    fixed;
}


.proveedores-table th,
.proveedores-table td {
  min-width:
    0;

  vertical-align:
    middle;

  border-bottom:
    1px solid var(--prov-border);
}


.proveedores-table th {
  padding:
    10px 10px;

  background:
    var(--prov-surface-soft);

  text-align:
    left;

  font-size:
    10.5px;

  line-height:
    1.2;

  font-weight:
    800;

  letter-spacing:
    0.025em;

  color:
    var(--prov-text-soft);

  white-space:
    nowrap;
}


.proveedores-table td {
  padding:
    11px 10px;

  background:
    var(--prov-surface);

  font-size:
    12.5px;

  line-height:
    1.35;

  font-weight:
    650;

  color:
    var(--prov-text);
}


.proveedores-table tbody tr:last-child td {
  border-bottom:
    0;
}


.proveedores-table tbody tr {
  transition:
    background-color 120ms ease;
}


.proveedores-table tbody tr:hover td {
  background:
    var(--prov-surface-soft);
}


.proveedores-table th.is-numeric,
.proveedores-table td.is-numeric {
  text-align:
    right;
}


/* =========================================================
   COLUMN WIDTHS
   ========================================================= */

.proveedores-table th:nth-child(1),
.proveedores-table td:nth-child(1) {
  width:
    20%;
}


.proveedores-table th:nth-child(2),
.proveedores-table td:nth-child(2) {
  width:
    12%;
}


.proveedores-table th:nth-child(3),
.proveedores-table td:nth-child(3) {
  width:
    17%;
}


.proveedores-table th:nth-child(4),
.proveedores-table td:nth-child(4) {
  width:
    14%;
}


.proveedores-table th:nth-child(5),
.proveedores-table td:nth-child(5) {
  width:
    12%;
}


.proveedores-table th:nth-child(6),
.proveedores-table td:nth-child(6) {
  width:
    12%;
}


.proveedores-table th:nth-child(7),
.proveedores-table td:nth-child(7) {
  width:
    9%;
}


.proveedores-table th:nth-child(8),
.proveedores-table td:nth-child(8) {
  width:
    44px;
}


/* =========================================================
   EXPENSE TABLE WIDTHS
   ========================================================= */

.proveedores-expenses-table th:nth-child(1),
.proveedores-expenses-table td:nth-child(1) {
  width:
    9%;
}


.proveedores-expenses-table th:nth-child(2),
.proveedores-expenses-table td:nth-child(2) {
  width:
    16%;
}


.proveedores-expenses-table th:nth-child(3),
.proveedores-expenses-table td:nth-child(3) {
  width:
    21%;
}


.proveedores-expenses-table th:nth-child(4),
.proveedores-expenses-table td:nth-child(4) {
  width:
    12%;
}


.proveedores-expenses-table th:nth-child(5),
.proveedores-expenses-table td:nth-child(5) {
  width:
    11%;
}


.proveedores-expenses-table th:nth-child(6),
.proveedores-expenses-table td:nth-child(6) {
  width:
    11%;
}


.proveedores-expenses-table th:nth-child(7),
.proveedores-expenses-table td:nth-child(7) {
  width:
    10%;
}


.proveedores-expenses-table th:nth-child(8),
.proveedores-expenses-table td:nth-child(8) {
  width:
    8%;
}


.proveedores-expenses-table th:nth-child(9),
.proveedores-expenses-table td:nth-child(9) {
  width:
    44px;
}


/* =========================================================
   PROVIDER CELL
   ========================================================= */

.proveedores-provider-cell {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    34px minmax(0, 1fr);

  gap:
    9px;

  align-items:
    center;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  text-align:
    left;

  cursor:
    pointer;
}


.proveedores-provider-avatar,
.proveedores-contact-avatar {
  width:
    34px;

  height:
    34px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  border:
    1px solid var(--prov-border);

  border-radius:
    10px;

  background:
    var(--prov-surface-strong);

  color:
    var(--prov-text);

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    -0.02em;
}


.proveedores-provider-copy,
.proveedores-cell-stack {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.proveedores-provider-copy strong,
.proveedores-cell-stack strong {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    12.5px;

  font-weight:
    800;

  color:
    var(--prov-text);
}


.proveedores-provider-copy small,
.proveedores-cell-stack small,
.proveedores-table-subline {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    10.5px;

  font-weight:
    650;

  color:
    var(--prov-text-muted);
}


.proveedores-cell-stack.is-right {
  align-items:
    flex-end;
}


/* =========================================================
   CHIPS / STATUS
   ========================================================= */

.proveedores-category-chip,
.proveedores-mini-badge {
  max-width:
    100%;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  padding:
    4px 7px;

  border:
    1px solid var(--prov-border);

  border-radius:
    999px;

  background:
    var(--prov-surface-soft);

  color:
    var(--prov-text);

  font-size:
    10.5px;

  line-height:
    1.2;

  font-weight:
    800;
}


.proveedores-status {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  max-width:
    100%;

  padding:
    4px 7px;

  border:
    1px solid var(--prov-border);

  border-radius:
    999px;

  background:
    var(--prov-surface-soft);

  font-size:
    10.5px;

  line-height:
    1;

  font-weight:
    800;

  white-space:
    nowrap;
}


.proveedores-status-dot {
  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    currentColor;
}


.proveedores-status.is-success {
  color:
    var(--prov-success);

  background:
    var(--prov-success-bg);

  border-color:
    color-mix(
      in srgb,
      var(--prov-success) 24%,
      var(--prov-border)
    );
}


.proveedores-status.is-warning {
  color:
    var(--prov-warning);

  background:
    var(--prov-warning-bg);

  border-color:
    color-mix(
      in srgb,
      var(--prov-warning) 24%,
      var(--prov-border)
    );
}


.proveedores-status.is-danger {
  color:
    var(--prov-danger);

  background:
    var(--prov-danger-bg);

  border-color:
    color-mix(
      in srgb,
      var(--prov-danger) 24%,
      var(--prov-border)
    );
}


.proveedores-status.is-info {
  color:
    var(--prov-info);

  background:
    var(--prov-info-bg);

  border-color:
    color-mix(
      in srgb,
      var(--prov-info) 24%,
      var(--prov-border)
    );
}


.proveedores-status.is-neutral {
  color:
    var(--prov-text-soft);
}


/* =========================================================
   TEXT HELPERS
   ========================================================= */

.proveedores-muted {
  color:
    var(--prov-text-muted);

  font-size:
    11.5px;

  font-weight:
    650;
}


.proveedores-amount-pending,
.is-warning-text {
  color:
    var(--prov-warning) !important;
}


.is-danger-text {
  color:
    var(--prov-danger) !important;
}


/* =========================================================
   INLINE LINKS
   ========================================================= */

.proveedores-inline-link {
  max-width:
    100%;

  display:
    inline-block;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    var(--prov-text);

  font-size:
    12.5px;

  font-weight:
    750;

  text-align:
    left;

  cursor:
    pointer;
}


.proveedores-inline-link:hover {
  text-decoration:
    underline;
}


.proveedores-inline-link.is-strong {
  font-weight:
    800;
}


/* =========================================================
   ROW ACTIONS
   ========================================================= */

.proveedores-actions-column {
  position:
    relative;

  overflow:
    visible !important;

  text-align:
    right !important;
}


.proveedores-row-actions {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  overflow:
    visible;
}


.proveedores-actions-trigger,
.proveedores-icon-btn {
  width:
    32px;

  height:
    32px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  padding:
    0;

  border:
    1px solid var(--prov-border);

  border-radius:
    9px;

  background:
    var(--prov-surface);

  color:
    var(--prov-text-soft);

  cursor:
    pointer;

  transition:
    border-color 120ms ease,
    background-color 120ms ease,
    color 120ms ease;
}


.proveedores-actions-trigger:hover,
.proveedores-actions-trigger.is-active,
.proveedores-icon-btn:hover {
  border-color:
    var(--prov-border-strong);

  background:
    var(--prov-surface-strong);

  color:
    var(--prov-text);
}


.proveedores-actions-trigger svg,
.proveedores-icon-btn svg {
  width:
    15px;

  height:
    15px;
}


.proveedores-icon-btn.is-danger {
  color:
    var(--prov-danger);
}


/* =========================================================
   ROW MENU
   ========================================================= */

.proveedores-row-menu {
  position:
    absolute;

  top:
    calc(100% + 6px);

  right:
    0;

  z-index:
    2000;

  width:
    205px;

  padding:
    5px;

  border:
    1px solid var(--prov-border);

  border-radius:
    11px;

  background:
    var(--prov-surface);

  box-shadow:
    var(--prov-shadow);
}


.proveedores-row-menu button {
  width:
    100%;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  min-height:
    34px;

  padding:
    7px 8px;

  border:
    0;

  border-radius:
    7px;

  background:
    transparent;

  color:
    var(--prov-text);

  font-size:
    11.5px;

  font-weight:
    750;

  text-align:
    left;

  cursor:
    pointer;
}


.proveedores-row-menu button:hover {
  background:
    var(--prov-surface-soft);
}


.proveedores-row-menu button.is-danger {
  color:
    var(--prov-danger);
}


.proveedores-row-menu svg {
  width:
    14px;

  height:
    14px;

  flex:
    0 0 auto;
}


.proveedores-row-menu-divider {
  height:
    1px;

  margin:
    4px 2px;

  background:
    var(--prov-border);
}


/* =========================================================
   PAGINATION
   ========================================================= */

.proveedores-pagination-mount {
  width:
    100%;
}


.proveedores-pagination {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    12px 14px;

  border-top:
    1px solid var(--prov-border);
}


.proveedores-pagination-pages {
  display:
    flex;

  align-items:
    center;

  gap:
    4px;
}


.proveedores-pagination-btn,
.proveedores-pagination-page {
  min-width:
    32px;

  height:
    32px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 8px;

  border:
    1px solid var(--prov-border);

  border-radius:
    8px;

  background:
    var(--prov-surface);

  color:
    var(--prov-text);

  font-size:
    11.5px;

  font-weight:
    800;

  cursor:
    pointer;
}


.proveedores-pagination-btn:hover:not(:disabled),
.proveedores-pagination-page:hover:not(.is-active) {
  background:
    var(--prov-surface-soft);
}


.proveedores-pagination-page.is-active {
  background:
    var(--prov-black);

  border-color:
    var(--prov-black);

  color:
    #ffffff;
}


html[data-theme="dark"] .proveedores-pagination-page.is-active,
body[data-theme="dark"] .proveedores-pagination-page.is-active,
.dark .proveedores-pagination-page.is-active {
  background:
    #f4f6f1;

  border-color:
    #f4f6f1;

  color:
    #090a09;
}


.proveedores-pagination-btn:disabled {
  cursor:
    default;

  opacity:
    0.4;
}


.proveedores-pagination-btn svg {
  width:
    14px;

  height:
    14px;
}


.proveedores-pagination-ellipsis {
  min-width:
    24px;

  text-align:
    center;

  color:
    var(--prov-text-muted);

  font-size:
    12px;

  font-weight:
    800;
}


/* =========================================================
   SKELETON
   ========================================================= */

.proveedores-skeleton {
  position:
    relative;

  display:
    block;

  overflow:
    hidden;

  border-radius:
    6px;

  background:
    var(--prov-surface-strong);
}


.proveedores-skeleton::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  transform:
    translateX(-100%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(127, 127, 127, 0.10),
      transparent
    );

  animation:
    proveedoresSkeleton 1.25s ease-in-out infinite;
}


@keyframes proveedoresSkeleton {
  to {
    transform:
      translateX(100%);
  }
}


.proveedores-skeleton-icon {
  width:
    38px;

  height:
    38px;
}


.proveedores-skeleton-label {
  width:
    60%;

  height:
    10px;
}


.proveedores-skeleton-value {
  width:
    82%;

  height:
    22px;

  margin-top:
    5px;
}


.proveedores-skeleton-small {
  width:
    68%;

  height:
    9px;

  margin-top:
    4px;
}


.proveedores-table-loading {
  padding:
    10px 14px;
}


.proveedores-table-loading-row {
  display:
    grid;

  grid-template-columns:
    repeat(
      var(--columns),
      minmax(0, 1fr)
    );

  gap:
    10px;

  padding:
    11px 0;

  border-bottom:
    1px solid var(--prov-border);
}


.proveedores-table-loading-row:last-child {
  border-bottom:
    0;
}


.proveedores-table-loading-row .proveedores-skeleton {
  height:
    18px;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.proveedores-empty-state {
  min-height:
    250px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  padding:
    34px 20px;

  text-align:
    center;
}


.proveedores-empty-icon {
  width:
    44px;

  height:
    44px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin-bottom:
    4px;

  border:
    1px solid var(--prov-border);

  border-radius:
    12px;

  background:
    var(--prov-surface-soft);

  color:
    var(--prov-text-soft);
}


.proveedores-empty-icon svg {
  width:
    19px;

  height:
    19px;
}


.proveedores-empty-state h3 {
  margin:
    0;

  font-size:
    15px;

  font-weight:
    800;

  color:
    var(--prov-text);
}


.proveedores-empty-state p {
  max-width:
    420px;

  margin:
    0;

  font-size:
    12px;

  line-height:
    1.5;

  font-weight:
    600;

  color:
    var(--prov-text-soft);
}


.proveedores-empty-action {
  margin-top:
    7px;
}


/* =========================================================
   RESPONSIVE · PARTE 1
   ========================================================= */

@media (
  max-width:
    1320px
) {

  .proveedores-metrics-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }


  .proveedores-filter-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

}


@media (
  max-width:
    1080px
) {

  .proveedores-page {
    padding:
      16px;
  }


  .proveedores-header {
    flex-direction:
      column;
  }


  .proveedores-header-actions {
    width:
      100%;

    justify-content:
      flex-start;
  }


  .proveedores-toolbar-main {
    grid-template-columns:
      1fr;
  }


  .proveedores-toolbar-controls {
    justify-content:
      flex-start;
  }


  .proveedores-table {
    table-layout:
      auto;
  }

}


@media (
  max-width:
    860px
) {

  .proveedores-metrics-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .proveedores-filter-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .proveedores-field-span-2 {
    grid-column:
      span 2;
  }

}


@media (
  max-width:
    680px
) {

  .proveedores-page {
    padding:
      12px;

    gap:
      14px;
  }


  .proveedores-header-actions {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .proveedores-header-actions .proveedores-btn {
    width:
      100%;
  }


  .proveedores-export-wrap {
    width:
      100%;
  }


  .proveedores-export-wrap > .proveedores-btn {
    width:
      100%;
  }


  .proveedores-export-menu {
    left:
      0;

    right:
      auto;

    width:
      min(
        290px,
        calc(100vw - 32px)
      );
  }


  .proveedores-metrics-grid {
    grid-template-columns:
      1fr;
  }


  .proveedores-toolbar-controls {
    width:
      100%;

    display:
      grid;

    grid-template-columns:
      1fr;
  }


  .proveedores-select-control,
  .proveedores-filter-button,
  .proveedores-toolbar-controls > .proveedores-btn {
    width:
      100%;
  }


  .proveedores-select-control select {
    flex:
      1;

    max-width:
      none;

    width:
      100%;
  }


  .proveedores-toolbar-secondary {
    align-items:
      flex-start;
  }


  .proveedores-filter-grid {
    grid-template-columns:
      1fr;
  }


  .proveedores-field-span-2 {
    grid-column:
      auto;
  }


  .proveedores-filter-actions {
    display:
      grid;

    grid-template-columns:
      1fr;
  }


  .proveedores-filter-actions .proveedores-btn {
    width:
      100%;
  }

}


/* =========================================================
   FIN PARTE 1 DE 3

   PARTE 2:
   - MODALES
   - DETALLE PROVEEDOR
   - TABS
   - FORMULARIOS
   - CONTACTOS
   - NOTAS
   - DOCUMENTOS
   - RECURRENTES

   PARTE 3:
   - DETALLE GASTO
   - PAGOS
   - CONFIRM
   - TOAST
   - RESPONSIVE TABLE MOBILE
   - DARK FINAL
   - AJUSTES PREMIUM
   ========================================================= *//* =========================================================
   MODAL OVERLAY
   ========================================================= */

.proveedores-modal-open {
  overflow:
    hidden !important;
}


.proveedores-modal-overlay {
  position:
    fixed;

  inset:
    0;

  z-index:
    9999;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    center;

  padding:
    78px 18px 18px;

  background:
    rgba(0, 0, 0, 0.42);

  opacity:
    0;

  transition:
    opacity 150ms ease;

  overflow-y:
    auto;

  overflow-x:
    hidden;
}


.proveedores-modal-overlay.is-visible {
  opacity:
    1;
}


/* =========================================================
   MODAL
   ========================================================= */

.proveedores-modal {
  width:
    min(
      100%,
      760px
    );

  max-height:
    calc(100vh - 98px);

  display:
    flex;

  flex-direction:
    column;

  border:
    1px solid var(--prov-border);

  border-radius:
    16px;

  background:
    var(--prov-surface);

  color:
    var(--prov-text);

  box-shadow:
    0 20px 70px rgba(0, 0, 0, 0.18);

  overflow:
    hidden;

  transform:
    translateY(10px);

  transition:
    transform 150ms ease;
}


.proveedores-modal-overlay.is-visible .proveedores-modal {
  transform:
    translateY(0);
}


.proveedores-modal-medium {
  width:
    min(
      100%,
      640px
    );
}


.proveedores-modal-large {
  width:
    min(
      100%,
      920px
    );
}


.proveedores-modal-xl {
  width:
    min(
      100%,
      1180px
    );
}


/* =========================================================
   MODAL HEADER
   ========================================================= */

.proveedores-modal-header {
  min-height:
    66px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    13px 16px;

  border-bottom:
    1px solid var(--prov-border);

  background:
    var(--prov-surface);
}


.proveedores-modal-title-wrap {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;
}


.proveedores-modal-title-icon {
  width:
    36px;

  height:
    36px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  border:
    1px solid var(--prov-border);

  border-radius:
    10px;

  background:
    var(--prov-surface-soft);

  color:
    var(--prov-text);
}


.proveedores-modal-title-icon svg {
  width:
    16px;

  height:
    16px;
}


.proveedores-modal-title-copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.proveedores-modal-title-copy h2 {
  margin:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    16px;

  line-height:
    1.2;

  font-weight:
    800;

  letter-spacing:
    -0.02em;

  color:
    var(--prov-text);
}


.proveedores-modal-title-copy p {
  margin:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    11.5px;

  line-height:
    1.35;

  font-weight:
    650;

  color:
    var(--prov-text-soft);
}


.proveedores-modal-close {
  width:
    34px;

  height:
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  padding:
    0;

  border:
    1px solid var(--prov-border);

  border-radius:
    9px;

  background:
    var(--prov-surface);

  color:
    var(--prov-text-soft);

  cursor:
    pointer;
}


.proveedores-modal-close:hover {
  background:
    var(--prov-surface-soft);

  border-color:
    var(--prov-border-strong);

  color:
    var(--prov-text);
}


.proveedores-modal-close svg {
  width:
    16px;

  height:
    16px;
}


/* =========================================================
   MODAL BODY
   ========================================================= */

.proveedores-modal-body {
  min-height:
    0;

  flex:
    1;

  padding:
    16px;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  overscroll-behavior:
    contain;
}


.proveedores-modal-body::-webkit-scrollbar {
  width:
    8px;
}


.proveedores-modal-body::-webkit-scrollbar-track {
  background:
    transparent;
}


.proveedores-modal-body::-webkit-scrollbar-thumb {
  border:
    2px solid var(--prov-surface);

  border-radius:
    999px;

  background:
    var(--prov-border-strong);
}


/* =========================================================
   MODAL FOOTER
   ========================================================= */

.proveedores-modal-footer {
  min-height:
    62px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  padding:
    11px 16px;

  border-top:
    1px solid var(--prov-border);

  background:
    var(--prov-surface);
}


/* =========================================================
   DETAIL HERO
   ========================================================= */

.proveedores-detail-hero {
  width:
    100%;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(420px, auto);

  gap:
    16px;

  align-items:
    stretch;

  padding:
    14px;

  border:
    1px solid var(--prov-border);

  border-radius:
    14px;

  background:
    var(--prov-surface-soft);
}


.proveedores-detail-main {
  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    50px minmax(0, 1fr);

  align-items:
    center;

  gap:
    12px;
}


.proveedores-detail-avatar {
  width:
    50px;

  height:
    50px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid var(--prov-border);

  border-radius:
    13px;

  background:
    var(--prov-surface);

  color:
    var(--prov-text);

  font-size:
    14px;

  font-weight:
    900;

  letter-spacing:
    -0.03em;
}


.proveedores-detail-copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;
}


.proveedores-detail-title-row {
  min-width:
    0;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    10px;
}


.proveedores-detail-title-row > div:first-child {
  min-width:
    0;
}


.proveedores-detail-title-row h3 {
  margin:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    18px;

  line-height:
    1.15;

  font-weight:
    850;

  letter-spacing:
    -0.025em;

  color:
    var(--prov-text);
}


.proveedores-detail-title-row p {
  margin:
    3px 0 0;

  font-size:
    11.5px;

  font-weight:
    650;

  color:
    var(--prov-text-soft);
}


.proveedores-detail-meta {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  flex-wrap:
    wrap;
}


.proveedores-detail-meta span {
  min-width:
    0;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  font-size:
    10.5px;

  line-height:
    1.2;

  font-weight:
    700;

  color:
    var(--prov-text-soft);
}


.proveedores-detail-meta svg {
  width:
    13px;

  height:
    13px;
}


/* =========================================================
   DETAIL KPIS
   ========================================================= */

.proveedores-detail-kpis {
  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(90px, 1fr)
    );

  gap:
    7px;
}


.proveedores-detail-kpis article {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    4px;

  padding:
    10px;

  border:
    1px solid var(--prov-border);

  border-radius:
    10px;

  background:
    var(--prov-surface);
}


.proveedores-detail-kpis span {
  font-size:
    9.5px;

  font-weight:
    800;

  color:
    var(--prov-text-muted);
}


.proveedores-detail-kpis strong {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    13px;

  font-weight:
    850;

  color:
    var(--prov-text);
}


/* =========================================================
   DETAIL TABS
   ========================================================= */

.proveedores-detail-tabs {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    3px;

  margin-top:
    14px;

  padding:
    4px;

  border:
    1px solid var(--prov-border);

  border-radius:
    11px;

  background:
    var(--prov-surface);

  overflow-x:
    auto;

  scrollbar-width:
    thin;
}


.proveedores-detail-tab {
  min-height:
    32px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  flex:
    0 0 auto;

  padding:
    6px 10px;

  border:
    0;

  border-radius:
    8px;

  background:
    transparent;

  color:
    var(--prov-text-soft);

  font-size:
    11px;

  font-weight:
    800;

  cursor:
    pointer;
}


.proveedores-detail-tab:hover {
  background:
    var(--prov-surface-soft);

  color:
    var(--prov-text);
}


.proveedores-detail-tab.is-active {
  background:
    var(--prov-black);

  color:
    #ffffff;
}


html[data-theme="dark"] .proveedores-detail-tab.is-active,
body[data-theme="dark"] .proveedores-detail-tab.is-active,
.dark .proveedores-detail-tab.is-active {
  background:
    #f4f6f1;

  color:
    #090a09;
}


.proveedores-detail-tab svg {
  width:
    14px;

  height:
    14px;
}


/* =========================================================
   DETAIL CONTENT
   ========================================================= */

.proveedores-detail-content {
  width:
    100%;

  min-width:
    0;

  margin-top:
    14px;
}


.proveedores-detail-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    12px;
}


.proveedores-detail-section {
  min-width:
    0;

  border:
    1px solid var(--prov-border);

  border-radius:
    12px;

  background:
    var(--prov-surface);
}


.proveedores-detail-section-header {
  min-height:
    42px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    9px 11px;

  border-bottom:
    1px solid var(--prov-border);

  background:
    var(--prov-surface-soft);
}


.proveedores-detail-section-icon {
  width:
    27px;

  height:
    27px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid var(--prov-border);

  border-radius:
    7px;

  background:
    var(--prov-surface);
}


.proveedores-detail-section-icon svg {
  width:
    13px;

  height:
    13px;
}


.proveedores-detail-section-header h3 {
  margin:
    0;

  font-size:
    12px;

  font-weight:
    850;

  color:
    var(--prov-text);
}


.proveedores-detail-section-body {
  padding:
    11px;
}


/* =========================================================
   INFO GRID
   ========================================================= */

.proveedores-info-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    10px 12px;
}


.proveedores-info-field {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  padding-bottom:
    8px;

  border-bottom:
    1px solid var(--prov-border);
}


.proveedores-info-field span {
  font-size:
    9.5px;

  font-weight:
    800;

  color:
    var(--prov-text-muted);
}


.proveedores-info-field strong {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  font-size:
    11.5px;

  line-height:
    1.35;

  font-weight:
    800;

  color:
    var(--prov-text);
}


.proveedores-info-field a {
  color:
    inherit;

  text-decoration:
    none;
}


.proveedores-info-field a:hover {
  text-decoration:
    underline;
}


.proveedores-detail-text {
  font-size:
    11.5px;

  line-height:
    1.55;

  font-weight:
    650;

  color:
    var(--prov-text-soft);

  white-space:
    pre-wrap;

  overflow-wrap:
    anywhere;
}


/* =========================================================
   TAB TOOLBAR
   ========================================================= */

.proveedores-tab-toolbar {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;

  margin-bottom:
    12px;
}


.proveedores-tab-toolbar > div:first-child {
  min-width:
    0;
}


.proveedores-tab-toolbar h3 {
  margin:
    0;

  font-size:
    14px;

  font-weight:
    850;

  color:
    var(--prov-text);
}


.proveedores-tab-toolbar p {
  margin:
    3px 0 0;

  font-size:
    11px;

  line-height:
    1.4;

  font-weight:
    650;

  color:
    var(--prov-text-soft);
}


/* =========================================================
   FORM
   ========================================================= */

.proveedores-form {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;
}


.proveedores-form-section {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    11px;

  padding:
    13px;

  border:
    1px solid var(--prov-border);

  border-radius:
    12px;

  background:
    var(--prov-surface);
}


.proveedores-form-section-header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    10px;
}


.proveedores-form-section-header h3 {
  margin:
    0;

  font-size:
    12.5px;

  font-weight:
    850;

  color:
    var(--prov-text);
}


.proveedores-form-section-header p {
  margin:
    3px 0 0;

  font-size:
    10.5px;

  line-height:
    1.4;

  font-weight:
    650;

  color:
    var(--prov-text-soft);
}


.proveedores-form-grid {
  width:
    100%;

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap:
    10px;
}


/* =========================================================
   MONEY FIELD
   ========================================================= */

.proveedores-money-field {
  width:
    100%;

  display:
    grid;

  grid-template-columns:
    86px minmax(0, 1fr);

  gap:
    7px;
}


.proveedores-money-field select,
.proveedores-money-field input {
  width:
    100%;

  min-width:
    0;
}


/* =========================================================
   SWITCH
   ========================================================= */

.proveedores-switch-row {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  padding:
    10px 11px;

  border:
    1px solid var(--prov-border);

  border-radius:
    10px;

  background:
    var(--prov-surface-soft);
}


.proveedores-switch-row > div:last-child {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.proveedores-switch-row strong {
  font-size:
    11.5px;

  font-weight:
    800;

  color:
    var(--prov-text);
}


.proveedores-switch-row small {
  font-size:
    10px;

  line-height:
    1.35;

  font-weight:
    650;

  color:
    var(--prov-text-soft);
}


.proveedores-switch {
  position:
    relative;

  width:
    38px;

  height:
    22px;

  flex:
    0 0 38px;

  cursor:
    pointer;
}


.proveedores-switch input {
  position:
    absolute;

  opacity:
    0;

  pointer-events:
    none;
}


.proveedores-switch span {
  position:
    absolute;

  inset:
    0;

  border:
    1px solid var(--prov-border-strong);

  border-radius:
    999px;

  background:
    var(--prov-surface-strong);

  transition:
    background-color 140ms ease,
    border-color 140ms ease;
}


.proveedores-switch span::after {
  content:
    "";

  position:
    absolute;

  top:
    3px;

  left:
    3px;

  width:
    14px;

  height:
    14px;

  border-radius:
    50%;

  background:
    var(--prov-text-muted);

  transition:
    transform 140ms ease,
    background-color 140ms ease;
}


.proveedores-switch input:checked + span {
  background:
    var(--prov-black);

  border-color:
    var(--prov-black);
}


.proveedores-switch input:checked + span::after {
  transform:
    translateX(16px);

  background:
    #ffffff;
}


html[data-theme="dark"] .proveedores-switch input:checked + span,
body[data-theme="dark"] .proveedores-switch input:checked + span,
.dark .proveedores-switch input:checked + span {
  background:
    #f4f6f1;

  border-color:
    #f4f6f1;
}


html[data-theme="dark"] .proveedores-switch input:checked + span::after,
body[data-theme="dark"] .proveedores-switch input:checked + span::after,
.dark .proveedores-switch input:checked + span::after {
  background:
    #090a09;
}


/* =========================================================
   CONTACT LIST
   ========================================================= */

.proveedores-contact-list {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    10px;
}


.proveedores-contact-card {
  min-width:
    0;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    10px;

  padding:
    11px;

  border:
    1px solid var(--prov-border);

  border-radius:
    11px;

  background:
    var(--prov-surface);
}


.proveedores-contact-main {
  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    38px minmax(0, 1fr);

  gap:
    9px;

  align-items:
    flex-start;
}


.proveedores-contact-avatar {
  width:
    38px;

  height:
    38px;
}


.proveedores-contact-copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


.proveedores-contact-title {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  flex-wrap:
    wrap;
}


.proveedores-contact-title strong {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    12px;

  font-weight:
    850;

  color:
    var(--prov-text);
}


.proveedores-contact-copy p {
  margin:
    0;

  font-size:
    10.5px;

  font-weight:
    650;

  color:
    var(--prov-text-soft);
}


.proveedores-contact-meta {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  flex-wrap:
    wrap;
}


.proveedores-contact-meta span {
  min-width:
    0;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  font-size:
    9.5px;

  font-weight:
    650;

  color:
    var(--prov-text-muted);
}


.proveedores-contact-meta svg {
  width:
    11px;

  height:
    11px;
}


.proveedores-contact-actions {
  display:
    flex;

  gap:
    5px;

  flex:
    0 0 auto;
}


/* =========================================================
   RECURRING
   ========================================================= */

.proveedores-recurring-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    10px;
}


.proveedores-recurring-card {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;

  padding:
    11px;

  border:
    1px solid var(--prov-border);

  border-radius:
    11px;

  background:
    var(--prov-surface);
}


.proveedores-recurring-card-header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;
}


.proveedores-recurring-icon {
  width:
    32px;

  height:
    32px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid var(--prov-border);

  border-radius:
    9px;

  background:
    var(--prov-surface-soft);
}


.proveedores-recurring-icon svg {
  width:
    14px;

  height:
    14px;
}


.proveedores-recurring-body {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


.proveedores-recurring-body > strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    12px;

  font-weight:
    850;

  color:
    var(--prov-text);
}


.proveedores-recurring-body > p {
  margin:
    0;

  font-size:
    10.5px;

  font-weight:
    650;

  color:
    var(--prov-text-soft);
}


.proveedores-recurring-amount {
  margin-top:
    3px;

  font-size:
    16px;

  font-weight:
    850;

  letter-spacing:
    -0.025em;

  color:
    var(--prov-text);
}


.proveedores-recurring-meta {
  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  margin-top:
    3px;
}


.proveedores-recurring-meta span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  font-size:
    9.5px;

  font-weight:
    650;

  color:
    var(--prov-text-muted);
}


.proveedores-recurring-meta svg {
  width:
    11px;

  height:
    11px;
}


.proveedores-recurring-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  margin-top:
    auto;

  padding-top:
    9px;

  border-top:
    1px solid var(--prov-border);
}


/* =========================================================
   DOCUMENTS
   ========================================================= */

.proveedores-document-list {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    9px;
}


.proveedores-document-card {
  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    36px minmax(0, 1fr) auto;

  gap:
    9px;

  align-items:
    center;

  padding:
    10px;

  border:
    1px solid var(--prov-border);

  border-radius:
    11px;

  background:
    var(--prov-surface);
}


.proveedores-document-icon {
  width:
    36px;

  height:
    36px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid var(--prov-border);

  border-radius:
    9px;

  background:
    var(--prov-surface-soft);
}


.proveedores-document-icon svg {
  width:
    15px;

  height:
    15px;
}


.proveedores-document-copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.proveedores-document-copy strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    11.5px;

  font-weight:
    850;

  color:
    var(--prov-text);
}


.proveedores-document-copy p {
  margin:
    0;

  font-size:
    9.5px;

  font-weight:
    750;

  color:
    var(--prov-text-soft);
}


.proveedores-document-meta {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  flex-wrap:
    wrap;

  margin-top:
    2px;
}


.proveedores-document-meta span {
  font-size:
    9px;

  font-weight:
    650;

  color:
    var(--prov-text-muted);
}


.proveedores-document-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    4px;
}


/* =========================================================
   NOTES
   ========================================================= */

.proveedores-notes-list {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    9px;
}


.proveedores-note-card {
  position:
    relative;

  min-width:
    0;

  padding:
    11px;

  border:
    1px solid var(--prov-border);

  border-radius:
    11px;

  background:
    var(--prov-surface);
}


.proveedores-note-card.is-featured {
  border-color:
    var(--prov-border-strong);

  background:
    var(--prov-surface-soft);
}


.proveedores-note-header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    8px;
}


.proveedores-note-header > div:first-child {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.proveedores-note-header strong {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    11.5px;

  font-weight:
    850;

  color:
    var(--prov-text);
}


.proveedores-note-header small {
  font-size:
    9px;

  font-weight:
    650;

  color:
    var(--prov-text-muted);
}


.proveedores-note-card > p {
  margin:
    9px 0 0;

  font-size:
    10.5px;

  line-height:
    1.5;

  font-weight:
    650;

  color:
    var(--prov-text-soft);

  white-space:
    pre-wrap;

  overflow-wrap:
    anywhere;
}


.proveedores-note-actions {
  display:
    flex;

  justify-content:
    flex-end;

  gap:
    4px;

  margin-top:
    10px;

  padding-top:
    8px;

  border-top:
    1px solid var(--prov-border);
}


/* =========================================================
   ACTIVITY
   ========================================================= */

.proveedores-activity-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    0;

  border:
    1px solid var(--prov-border);

  border-radius:
    11px;

  overflow:
    hidden;
}


.proveedores-activity-item {
  display:
    grid;

  grid-template-columns:
    32px minmax(0, 1fr);

  gap:
    10px;

  padding:
    10px 11px;

  border-bottom:
    1px solid var(--prov-border);

  background:
    var(--prov-surface);
}


.proveedores-activity-item:last-child {
  border-bottom:
    0;
}


.proveedores-activity-icon {
  width:
    32px;

  height:
    32px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid var(--prov-border);

  border-radius:
    9px;

  background:
    var(--prov-surface-soft);
}


.proveedores-activity-icon svg {
  width:
    14px;

  height:
    14px;
}


.proveedores-activity-copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.proveedores-activity-title {
  display:
    flex;

  align-items:
    baseline;

  justify-content:
    space-between;

  gap:
    10px;
}


.proveedores-activity-title strong {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    11px;

  font-weight:
    850;

  color:
    var(--prov-text);
}


.proveedores-activity-title span {
  flex:
    0 0 auto;

  font-size:
    9px;

  font-weight:
    650;

  color:
    var(--prov-text-muted);
}


.proveedores-activity-copy p {
  margin:
    0;

  font-size:
    10px;

  line-height:
    1.4;

  font-weight:
    650;

  color:
    var(--prov-text-soft);
}


/* =========================================================
   MINI TABLE
   ========================================================= */

.proveedores-mini-table-shell {
  width:
    100%;

  min-width:
    0;

  border:
    1px solid var(--prov-border);

  border-radius:
    11px;

  overflow:
    hidden;
}


.proveedores-mini-table {
  width:
    100%;

  border-collapse:
    collapse;

  table-layout:
    fixed;
}


.proveedores-mini-table th,
.proveedores-mini-table td {
  padding:
    9px;

  border-bottom:
    1px solid var(--prov-border);

  text-align:
    left;

  vertical-align:
    middle;
}


.proveedores-mini-table th {
  background:
    var(--prov-surface-soft);

  font-size:
    9.5px;

  font-weight:
    850;

  color:
    var(--prov-text-soft);
}


.proveedores-mini-table td {
  font-size:
    10.5px;

  font-weight:
    700;

  color:
    var(--prov-text);
}


.proveedores-mini-table tbody tr:last-child td {
  border-bottom:
    0;
}


.proveedores-mini-table td strong {
  display:
    block;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    10.5px;

  font-weight:
    850;
}


.proveedores-mini-table td small {
  display:
    block;

  margin-top:
    2px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    9px;

  font-weight:
    650;

  color:
    var(--prov-text-muted);
}


/* =========================================================
   PAYMENT LIST TAB
   ========================================================= */

.proveedores-payment-list {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    9px;
}


.proveedores-payment-card {
  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    34px minmax(0, 1fr);

  gap:
    9px;

  padding:
    10px;

  border:
    1px solid var(--prov-border);

  border-radius:
    11px;

  background:
    var(--prov-surface);
}


.proveedores-payment-icon {
  width:
    34px;

  height:
    34px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid var(--prov-border);

  border-radius:
    9px;

  background:
    var(--prov-surface-soft);
}


.proveedores-payment-icon svg {
  width:
    14px;

  height:
    14px;
}


.proveedores-payment-copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.proveedores-payment-title {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;
}


.proveedores-payment-title strong {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    12px;

  font-weight:
    850;

  color:
    var(--prov-text);
}


.proveedores-payment-copy > p {
  margin:
    0;

  font-size:
    10px;

  font-weight:
    650;

  color:
    var(--prov-text-soft);
}


.proveedores-payment-meta {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  flex-wrap:
    wrap;

  margin-top:
    3px;
}


.proveedores-payment-meta span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  font-size:
    9px;

  font-weight:
    650;

  color:
    var(--prov-text-muted);
}


.proveedores-payment-meta svg {
  width:
    10px;

  height:
    10px;
}


/* =========================================================
   DETAIL LOADING
   ========================================================= */

.proveedores-detail-loading {
  display:
    flex;

  flex-direction:
    column;

  gap:
    18px;
}


.proveedores-detail-loading-hero {
  display:
    grid;

  grid-template-columns:
    54px minmax(0, 1fr);

  gap:
    12px;

  align-items:
    center;
}


.proveedores-detail-loading-hero > div {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}


.proveedores-skeleton-avatar {
  width:
    54px;

  height:
    54px;

  border-radius:
    14px;
}


.proveedores-skeleton-title {
  width:
    40%;

  height:
    20px;
}


.proveedores-skeleton-text {
  width:
    65%;

  height:
    11px;
}


.proveedores-detail-loading-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap:
    10px;
}


.proveedores-skeleton-field {
  height:
    62px;

  border-radius:
    10px;
}


/* =========================================================
   RESPONSIVE MODALES
   ========================================================= */

@media (
  max-width:
    1100px
) {

  .proveedores-detail-hero {
    grid-template-columns:
      1fr;
  }


  .proveedores-detail-kpis {
    grid-template-columns:
      repeat(
        4,
        minmax(0, 1fr)
      );
  }


  .proveedores-recurring-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


@media (
  max-width:
    860px
) {

  .proveedores-modal-overlay {
    padding:
      66px 12px 12px;
  }


  .proveedores-modal {
    max-height:
      calc(100vh - 78px);

    border-radius:
      14px;
  }


  .proveedores-detail-grid {
    grid-template-columns:
      1fr;
  }


  .proveedores-form-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .proveedores-contact-list,
  .proveedores-document-list,
  .proveedores-notes-list,
  .proveedores-payment-list {
    grid-template-columns:
      1fr;
  }


  .proveedores-recurring-grid {
    grid-template-columns:
      1fr;
  }


  .proveedores-detail-loading-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


@media (
  max-width:
    620px
) {

  .proveedores-modal-overlay {
    align-items:
      stretch;

    padding:
      0;
  }


  .proveedores-modal,
  .proveedores-modal-medium,
  .proveedores-modal-large,
  .proveedores-modal-xl {
    width:
      100%;

    max-height:
      100vh;

    height:
      100vh;

    border:
      0;

    border-radius:
      0;
  }


  .proveedores-modal-header {
    min-height:
      58px;

    padding:
      10px 12px;
  }


  .proveedores-modal-body {
    padding:
      12px;
  }


  .proveedores-modal-footer {
    min-height:
      58px;

    padding:
      9px 12px;

    flex-wrap:
      wrap;
  }


  .proveedores-modal-footer .proveedores-btn {
    flex:
      1 1 auto;
  }


  .proveedores-detail-hero {
    padding:
      11px;
  }


  .proveedores-detail-main {
    grid-template-columns:
      42px minmax(0, 1fr);
  }


  .proveedores-detail-avatar {
    width:
      42px;

    height:
      42px;
  }


  .proveedores-detail-title-row {
    flex-direction:
      column;

    align-items:
      flex-start;
  }


  .proveedores-detail-kpis {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .proveedores-form-grid {
    grid-template-columns:
      1fr;
  }


  .proveedores-field-span-2 {
    grid-column:
      auto;
  }


  .proveedores-info-grid {
    grid-template-columns:
      1fr;
  }


  .proveedores-money-field {
    grid-template-columns:
      82px minmax(0, 1fr);
  }


  .proveedores-tab-toolbar {
    flex-direction:
      column;
  }


  .proveedores-tab-toolbar .proveedores-btn {
    width:
      100%;
  }


  .proveedores-contact-card {
    flex-direction:
      column;
  }


  .proveedores-contact-actions {
    width:
      100%;

    justify-content:
      flex-end;
  }


  .proveedores-document-card {
    grid-template-columns:
      34px minmax(0, 1fr);
  }


  .proveedores-document-actions {
    grid-column:
      1 / -1;

    justify-content:
      flex-end;

    padding-top:
      7px;

    border-top:
      1px solid var(--prov-border);
  }


  .proveedores-activity-title {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      2px;
  }


  .proveedores-mini-table-shell {
    overflow-x:
      auto;
  }


  .proveedores-mini-table {
    min-width:
      650px;
  }


  .proveedores-detail-loading-grid {
    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   FIN PARTE 2 DE 3

   PARTE 3:
   - DETALLE GASTO
   - HISTORIAL PAGOS
   - CONFIRMACIÓN
   - TOAST
   - RESPONSIVE TABLE MOBILE
   - MENÚ ACCIONES MOBILE
   - DARK MODE FINAL
   - AJUSTES DE VISIBILIDAD
   - REDUCE MOTION
   ========================================================= *//* =========================================================
   DETALLE GASTO
   ========================================================= */

.proveedores-expense-detail-hero {
  width:
    100%;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    16px;

  padding:
    14px;

  border:
    1px solid var(--prov-border);

  border-radius:
    14px;

  background:
    var(--prov-surface-soft);
}


.proveedores-expense-detail-hero > div:first-child {
  min-width:
    0;
}


.proveedores-detail-overline {
  display:
    block;

  margin-bottom:
    5px;

  font-size:
    9.5px;

  line-height:
    1.2;

  font-weight:
    850;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

  color:
    var(--prov-text-muted);
}


.proveedores-expense-detail-hero h3 {
  margin:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  font-size:
    19px;

  line-height:
    1.2;

  font-weight:
    850;

  letter-spacing:
    -0.025em;

  color:
    var(--prov-text);
}


.proveedores-expense-detail-hero p {
  margin:
    5px 0 0;

  font-size:
    11.5px;

  line-height:
    1.4;

  font-weight:
    700;

  color:
    var(--prov-text-soft);
}


.proveedores-expense-detail-status {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    8px;

  flex:
    0 0 auto;
}


.proveedores-expense-detail-status > strong {
  font-size:
    20px;

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    -0.035em;

  color:
    var(--prov-text);
}


/* =========================================================
   DETALLE GASTO · KPIS
   ========================================================= */

.proveedores-expense-detail-kpis {
  width:
    100%;

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap:
    8px;

  margin:
    12px 0;
}


.proveedores-expense-detail-kpis article {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  padding:
    10px 11px;

  border:
    1px solid var(--prov-border);

  border-radius:
    10px;

  background:
    var(--prov-surface);
}


.proveedores-expense-detail-kpis span {
  font-size:
    9.5px;

  line-height:
    1.2;

  font-weight:
    800;

  color:
    var(--prov-text-muted);
}


.proveedores-expense-detail-kpis strong {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    13px;

  line-height:
    1.2;

  font-weight:
    850;

  color:
    var(--prov-text);
}


/* =========================================================
   HISTORIAL DE PAGOS
   ========================================================= */

.proveedores-payment-summary {
  width:
    100%;

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    8px;

  margin-bottom:
    14px;
}


.proveedores-payment-summary article {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  padding:
    11px;

  border:
    1px solid var(--prov-border);

  border-radius:
    10px;

  background:
    var(--prov-surface-soft);
}


.proveedores-payment-summary span {
  font-size:
    9.5px;

  font-weight:
    800;

  color:
    var(--prov-text-muted);
}


.proveedores-payment-summary strong {
  min-width:
    0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    14px;

  line-height:
    1.2;

  font-weight:
    850;

  color:
    var(--prov-text);
}


.proveedores-payment-history-list {
  width:
    100%;

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;
}


.proveedores-payment-history-item {
  min-width:
    0;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    11px;

  border:
    1px solid var(--prov-border);

  border-radius:
    11px;

  background:
    var(--prov-surface);
}


.proveedores-payment-history-item.is-cancelled {
  opacity:
    0.72;

  background:
    var(--prov-surface-soft);
}


.proveedores-payment-history-main {
  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    36px minmax(0, 1fr);

  gap:
    9px;

  align-items:
    flex-start;
}


.proveedores-payment-history-icon {
  width:
    36px;

  height:
    36px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid var(--prov-border);

  border-radius:
    9px;

  background:
    var(--prov-surface-soft);

  color:
    var(--prov-text-soft);
}


.proveedores-payment-history-icon svg {
  width:
    15px;

  height:
    15px;
}


.proveedores-payment-history-main > div:last-child {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


.proveedores-payment-history-title {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  flex-wrap:
    wrap;
}


.proveedores-payment-history-title strong {
  font-size:
    13px;

  font-weight:
    850;

  color:
    var(--prov-text);
}


.proveedores-payment-history-meta {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  flex-wrap:
    wrap;
}


.proveedores-payment-history-meta span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  font-size:
    9.5px;

  line-height:
    1.25;

  font-weight:
    650;

  color:
    var(--prov-text-muted);
}


.proveedores-payment-history-meta svg {
  width:
    11px;

  height:
    11px;
}


.proveedores-payment-history-main p {
  margin:
    3px 0 0;

  font-size:
    10.5px;

  line-height:
    1.5;

  font-weight:
    650;

  color:
    var(--prov-text-soft);
}


.proveedores-payment-history-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  flex:
    0 0 auto;
}


/* =========================================================
   CONFIRM
   ========================================================= */

.proveedores-confirm-overlay {
  position:
    fixed;

  inset:
    0;

  z-index:
    12000;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    18px;

  background:
    rgba(0, 0, 0, 0.46);
}


.proveedores-confirm {
  width:
    min(
      100%,
      430px
    );

  padding:
    16px;

  border:
    1px solid var(--prov-border);

  border-radius:
    14px;

  background:
    var(--prov-surface);

  color:
    var(--prov-text);

  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.20);
}


.proveedores-confirm-icon {
  width:
    38px;

  height:
    38px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin-bottom:
    11px;

  border:
    1px solid var(--prov-border);

  border-radius:
    10px;

  background:
    var(--prov-surface-soft);

  color:
    var(--prov-text);
}


.proveedores-confirm-icon.is-danger {
  background:
    var(--prov-danger-bg);

  border-color:
    color-mix(
      in srgb,
      var(--prov-danger) 25%,
      var(--prov-border)
    );

  color:
    var(--prov-danger);
}


.proveedores-confirm-icon svg {
  width:
    17px;

  height:
    17px;
}


.proveedores-confirm-content h3 {
  margin:
    0;

  font-size:
    15px;

  line-height:
    1.25;

  font-weight:
    850;

  color:
    var(--prov-text);
}


.proveedores-confirm-content p {
  margin:
    6px 0 0;

  font-size:
    11.5px;

  line-height:
    1.5;

  font-weight:
    650;

  color:
    var(--prov-text-soft);
}


.proveedores-confirm-actions {
  display:
    flex;

  justify-content:
    flex-end;

  gap:
    8px;

  margin-top:
    16px;

  padding-top:
    12px;

  border-top:
    1px solid var(--prov-border);
}


/* =========================================================
   TOAST
   ========================================================= */

.proveedores-toast-stack {
  position:
    fixed;

  right:
    18px;

  bottom:
    18px;

  z-index:
    13000;

  width:
    min(
      360px,
      calc(100vw - 36px)
    );

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  pointer-events:
    none;
}


.proveedores-toast {
  width:
    100%;

  display:
    grid;

  grid-template-columns:
    30px minmax(0, 1fr) 28px;

  gap:
    8px;

  align-items:
    center;

  padding:
    9px;

  border:
    1px solid var(--prov-border);

  border-radius:
    11px;

  background:
    var(--prov-surface);

  color:
    var(--prov-text);

  box-shadow:
    var(--prov-shadow);

  pointer-events:
    auto;

  animation:
    proveedoresToastIn 160ms ease both;
}


.proveedores-toast.is-leaving {
  animation:
    proveedoresToastOut 160ms ease both;
}


@keyframes proveedoresToastIn {
  from {
    opacity:
      0;

    transform:
      translateY(8px);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0);
  }
}


@keyframes proveedoresToastOut {
  to {
    opacity:
      0;

    transform:
      translateY(8px);
  }
}


.proveedores-toast-icon {
  width:
    30px;

  height:
    30px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid var(--prov-border);

  border-radius:
    8px;

  background:
    var(--prov-surface-soft);
}


.proveedores-toast-icon svg {
  width:
    14px;

  height:
    14px;
}


.proveedores-toast-success .proveedores-toast-icon {
  color:
    var(--prov-success);

  background:
    var(--prov-success-bg);
}


.proveedores-toast-error .proveedores-toast-icon {
  color:
    var(--prov-danger);

  background:
    var(--prov-danger-bg);
}


.proveedores-toast-warning .proveedores-toast-icon {
  color:
    var(--prov-warning);

  background:
    var(--prov-warning-bg);
}


.proveedores-toast-message {
  min-width:
    0;

  font-size:
    11.5px;

  line-height:
    1.4;

  font-weight:
    750;

  color:
    var(--prov-text);
}


.proveedores-toast-close {
  width:
    28px;

  height:
    28px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

  border:
    0;

  border-radius:
    7px;

  background:
    transparent;

  color:
    var(--prov-text-muted);

  cursor:
    pointer;
}


.proveedores-toast-close:hover {
  background:
    var(--prov-surface-soft);

  color:
    var(--prov-text);
}


.proveedores-toast-close svg {
  width:
    13px;

  height:
    13px;
}


/* =========================================================
   MOBILE TABLE
   ========================================================= */

@media (
  max-width:
    820px
) {

  .proveedores-table-shell {
    padding:
      10px;
  }


  .proveedores-table,
  .proveedores-table thead,
  .proveedores-table tbody,
  .proveedores-table tr,
  .proveedores-table th,
  .proveedores-table td {
    display:
      block;
  }


  .proveedores-table thead {
    display:
      none;
  }


  .proveedores-table {
    table-layout:
      auto;
  }


  .proveedores-table tbody {
    display:
      grid;

    grid-template-columns:
      1fr;

    gap:
      9px;
  }


  .proveedores-table tbody tr {
    position:
      relative;

    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      0;

    border:
      1px solid var(--prov-border);

    border-radius:
      11px;

    background:
      var(--prov-surface);

    overflow:
      visible;
  }


  .proveedores-table tbody tr:hover td {
    background:
      transparent;
  }


  .proveedores-table td,
  .proveedores-table th,
  .proveedores-expenses-table td,
  .proveedores-expenses-table th {
    width:
      auto !important;
  }


  .proveedores-table td {
    position:
      relative;

    min-width:
      0;

    min-height:
      54px;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      flex-start;

    justify-content:
      center;

    gap:
      4px;

    padding:
      21px 10px 9px;

    border-bottom:
      1px solid var(--prov-border);

    border-right:
      1px solid var(--prov-border);

    background:
      transparent;
  }


  .proveedores-table td:nth-child(even) {
    border-right:
      0;
  }


  .proveedores-table td::before {
    content:
      attr(data-label);

    position:
      absolute;

    top:
      6px;

    left:
      10px;

    font-size:
      8.5px;

    line-height:
      1;

    font-weight:
      850;

    letter-spacing:
      0.04em;

    text-transform:
      uppercase;

    color:
      var(--prov-text-muted);
  }


  .proveedores-table td.is-numeric {
    text-align:
      left;
  }


  .proveedores-cell-stack.is-right {
    align-items:
      flex-start;
  }


  .proveedores-provider-cell {
    grid-template-columns:
      32px minmax(0, 1fr);
  }


  .proveedores-provider-avatar {
    width:
      32px;

    height:
      32px;
  }


  .proveedores-actions-column {
    position:
      absolute !important;

    top:
      7px;

    right:
      7px;

    z-index:
      20;

    width:
      auto !important;

    min-height:
      0 !important;

    padding:
      0 !important;

    border:
      0 !important;

    background:
      transparent !important;
  }


  .proveedores-actions-column::before {
    display:
      none;
  }


  .proveedores-row-menu {
    position:
      absolute;

    top:
      38px;

    right:
      0;

    width:
      210px;

    max-width:
      calc(100vw - 36px);
  }


  .proveedores-table td:last-child {
    border:
      0;
  }

}


/* =========================================================
   MOBILE TABLE · COLUMN SPANS
   ========================================================= */

@media (
  max-width:
    820px
) {

  .proveedores-table tbody tr td:first-child {
    grid-column:
      1 / -1;

    padding-top:
      10px;

    padding-right:
      52px;
  }


  .proveedores-table tbody tr td:first-child::before {
    display:
      none;
  }


  .proveedores-expenses-table tbody tr td:nth-child(2),
  .proveedores-expenses-table tbody tr td:nth-child(3) {
    grid-column:
      span 1;
  }

}


/* =========================================================
   MOBILE 560
   ========================================================= */

@media (
  max-width:
    560px
) {

  .proveedores-table-shell {
    padding:
      8px;
  }


  .proveedores-table tbody tr {
    grid-template-columns:
      1fr;
  }


  .proveedores-table td {
    border-right:
      0;

    min-height:
      52px;
  }


  .proveedores-table tbody tr td:first-child,
  .proveedores-expenses-table tbody tr td:nth-child(2),
  .proveedores-expenses-table tbody tr td:nth-child(3) {
    grid-column:
      auto;
  }


  .proveedores-table tbody tr td:first-child {
    padding-right:
      50px;
  }


  .proveedores-row-menu {
    position:
      fixed;

    top:
      auto;

    right:
      12px;

    bottom:
      12px;

    left:
      12px;

    width:
      auto;

    max-width:
      none;

    padding:
      7px;

    border-radius:
      13px;

    box-shadow:
      0 16px 50px rgba(0, 0, 0, 0.22);
  }


  .proveedores-row-menu button {
    min-height:
      38px;

    font-size:
      12px;
  }


  .proveedores-pagination {
    padding:
      10px 8px;

    gap:
      4px;
  }


  .proveedores-pagination-pages {
    gap:
      3px;
  }


  .proveedores-pagination-btn,
  .proveedores-pagination-page {
    min-width:
      30px;

    height:
      30px;

    padding:
      0 6px;
  }

}


/* =========================================================
   DETAIL / PAYMENT RESPONSIVE
   ========================================================= */

@media (
  max-width:
    760px
) {

  .proveedores-expense-detail-hero {
    flex-direction:
      column;
  }


  .proveedores-expense-detail-status {
    width:
      100%;

    align-items:
      flex-start;
  }


  .proveedores-expense-detail-kpis {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .proveedores-payment-summary {
    grid-template-columns:
      1fr;
  }


  .proveedores-payment-history-item {
    flex-direction:
      column;
  }


  .proveedores-payment-history-actions {
    width:
      100%;

    justify-content:
      flex-end;

    padding-top:
      8px;

    border-top:
      1px solid var(--prov-border);
  }

}


@media (
  max-width:
    480px
) {

  .proveedores-expense-detail-kpis {
    grid-template-columns:
      1fr;
  }


  .proveedores-payment-history-main {
    grid-template-columns:
      32px minmax(0, 1fr);
  }


  .proveedores-payment-history-icon {
    width:
      32px;

    height:
      32px;
  }


  .proveedores-confirm-actions {
    display:
      grid;

    grid-template-columns:
      1fr;

    width:
      100%;
  }


  .proveedores-confirm-actions .proveedores-btn {
    width:
      100%;
  }


  .proveedores-toast-stack {
    right:
      10px;

    bottom:
      10px;

    width:
      calc(100vw - 20px);
  }

}


/* =========================================================
   DARK MODE · BODY / MODALES EXTERNOS
   ========================================================= */

html[data-theme="dark"] .proveedores-modal-overlay,
body[data-theme="dark"] .proveedores-modal-overlay,
.dark .proveedores-modal-overlay {
  --prov-surface:
    #090a09;

  --prov-surface-soft:
    #0f100f;

  --prov-surface-strong:
    #151615;

  --prov-border:
    #262826;

  --prov-border-strong:
    #363936;

  --prov-text:
    #f6f7f4;

  --prov-text-soft:
    #c9cdc4;

  --prov-text-muted:
    #a6aba0;

  --prov-black:
    #ffffff;

  --prov-success:
    #68d499;

  --prov-success-bg:
    #0c2115;

  --prov-warning:
    #e5b15b;

  --prov-warning-bg:
    #241a0c;

  --prov-danger:
    #ef7777;

  --prov-danger-bg:
    #271010;

  --prov-info:
    #8ab8e6;

  --prov-info-bg:
    #0c1824;
}


html[data-theme="dark"] .proveedores-confirm-overlay,
body[data-theme="dark"] .proveedores-confirm-overlay,
.dark .proveedores-confirm-overlay,
html[data-theme="dark"] .proveedores-toast-stack,
body[data-theme="dark"] .proveedores-toast-stack,
.dark .proveedores-toast-stack {
  --prov-surface:
    #090a09;

  --prov-surface-soft:
    #0f100f;

  --prov-surface-strong:
    #151615;

  --prov-border:
    #262826;

  --prov-border-strong:
    #363936;

  --prov-text:
    #f6f7f4;

  --prov-text-soft:
    #c9cdc4;

  --prov-text-muted:
    #a6aba0;

  --prov-black:
    #ffffff;

  --prov-success:
    #68d499;

  --prov-success-bg:
    #0c2115;

  --prov-warning:
    #e5b15b;

  --prov-warning-bg:
    #241a0c;

  --prov-danger:
    #ef7777;

  --prov-danger-bg:
    #271010;

  --prov-info:
    #8ab8e6;

  --prov-info-bg:
    #0c1824;
}


/* =========================================================
   DARK MODE · INPUT OPTIONS
   ========================================================= */

html[data-theme="dark"] .proveedores-page select,
body[data-theme="dark"] .proveedores-page select,
.dark .proveedores-page select,
html[data-theme="dark"] .proveedores-modal select,
body[data-theme="dark"] .proveedores-modal select,
.dark .proveedores-modal select {
  color-scheme:
    dark;
}


html[data-theme="dark"] .proveedores-page option,
body[data-theme="dark"] .proveedores-page option,
.dark .proveedores-page option,
html[data-theme="dark"] .proveedores-modal option,
body[data-theme="dark"] .proveedores-modal option,
.dark .proveedores-modal option {
  background:
    #090a09;

  color:
    #f6f7f4;
}


/* =========================================================
   VISIBILIDAD DE TEXTO MODO CLARO
   ========================================================= */

.proveedores-page,
.proveedores-modal,
.proveedores-confirm,
.proveedores-toast {
  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;
}


.proveedores-page strong,
.proveedores-modal strong,
.proveedores-confirm strong {
  font-weight:
    800;
}


.proveedores-page input,
.proveedores-page select,
.proveedores-page textarea,
.proveedores-modal input,
.proveedores-modal select,
.proveedores-modal textarea {
  color:
    var(--prov-text);
}


.proveedores-page select option {
  color:
    var(--prov-text);
}


/* =========================================================
   FOCUS
   ========================================================= */

.proveedores-page button:focus-visible,
.proveedores-page input:focus-visible,
.proveedores-page select:focus-visible,
.proveedores-page textarea:focus-visible,
.proveedores-modal button:focus-visible,
.proveedores-modal input:focus-visible,
.proveedores-modal select:focus-visible,
.proveedores-modal textarea:focus-visible,
.proveedores-confirm button:focus-visible {
  outline:
    2px solid var(--prov-text);

  outline-offset:
    2px;
}


/* =========================================================
   Z-INDEX / OVERFLOW FIX ACCIONES
   ========================================================= */

.proveedores-panel,
.proveedores-content-mount,
.proveedores-table-mount,
.proveedores-table-shell,
.proveedores-table,
.proveedores-table tbody,
.proveedores-table tr,
.proveedores-table td,
.proveedores-actions-column,
.proveedores-row-actions {
  overflow:
    visible;
}


.proveedores-table tbody tr:has(.proveedores-row-menu) {
  position:
    relative;

  z-index:
    50;
}


.proveedores-table tbody tr:has(.proveedores-row-menu) td {
  position:
    relative;

  z-index:
    51;
}


.proveedores-table tbody tr:has(.proveedores-row-menu) .proveedores-row-menu {
  z-index:
    5000;
}


/* =========================================================
   ÚLTIMAS FILAS · MENÚ HACIA ARRIBA
   ========================================================= */

.proveedores-table tbody tr:nth-last-child(-n + 2)
.proveedores-row-menu {
  top:
    auto;

  bottom:
    calc(100% + 6px);
}


/* =========================================================
   MOBILE OVERRIDE MENU
   ========================================================= */

@media (
  max-width:
    560px
) {

  .proveedores-table tbody tr:nth-last-child(-n + 2)
  .proveedores-row-menu {
    top:
      auto;

    bottom:
      12px;
  }

}


/* =========================================================
   FOOTER / SCROLL PAGE
   ========================================================= */

.proveedores-page {
  padding-bottom:
    30px;
}


.proveedores-modal-body,
.proveedores-detail-tabs,
.proveedores-mini-table-shell {
  scrollbar-color:
    var(--prov-border-strong)
    transparent;
}


/* =========================================================
   REDUCE MOTION
   ========================================================= */

@media (
  prefers-reduced-motion:
    reduce
) {

  .proveedores-page *,
  .proveedores-page *::before,
  .proveedores-page *::after,
  .proveedores-modal-overlay,
  .proveedores-modal,
  .proveedores-toast,
  .proveedores-btn-spinner {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;

    scroll-behavior:
      auto !important;
  }

}


/* =========================================================
   PRINT
   ========================================================= */

@media print {

  .proveedores-page {
    padding:
      0;

    background:
      #ffffff;

    color:
      #000000;
  }


  .proveedores-header-actions,
  .proveedores-view-selector,
  .proveedores-toolbar,
  .proveedores-pagination-mount,
  .proveedores-actions-column,
  .proveedores-row-actions {
    display:
      none !important;
  }


  .proveedores-panel,
  .proveedores-metric-card {
    box-shadow:
      none;

    border-color:
      #cccccc;
  }

}


/* =========================================================
   FIN
   FRONTEND/SRC/PAGES/PROVEEDORES/PROVEEDORES.CSS
   PARTE 3 DE 3
   ========================================================= *//* =========================================================
   PROVEEDORES · AJUSTE FINAL
   FULL WIDTH + RESPONSIVE TOTAL + NEGRO REAL

   UBICACIÓN:
   frontend/src/pages/proveedores/proveedores.css

   AGREGAR AL FINAL
   ========================================================= */


/* =========================================================
   APP CONTENT · SOLO PROVEEDORES
   USAR TODO EL ANCHO DISPONIBLE
   ========================================================= */

.app-content:has(.proveedores-page) {
  width:
    100%;

  max-width:
    none;

  margin:
    0;

  padding:
    0;

  overflow-x:
    clip;
}


/* =========================================================
   MOUNT
   ========================================================= */

.proveedores-page-mount,
#proveedoresPageMount {
  width:
    100%;

  max-width:
    none;

  min-width:
    0;

  margin:
    0;

  padding:
    0;

  overflow-x:
    clip;
}


/* =========================================================
   PAGE
   ========================================================= */

.proveedores-page {
  width:
    100%;

  max-width:
    none;

  min-width:
    0;

  margin:
    0;

  padding:
    22px 24px 30px;

  overflow-x:
    clip;
}


/* =========================================================
   DARK MODE · NEGRO REAL
   SIN AZUL
   SIN VERDE
   ========================================================= */

html[data-theme="dark"] .proveedores-page,
body[data-theme="dark"] .proveedores-page,
.dark .proveedores-page {
  --prov-bg:
    #000000;

  --prov-surface:
    #050505;

  --prov-surface-soft:
    #0a0a0a;

  --prov-surface-strong:
    #111111;

  --prov-border:
    #202020;

  --prov-border-strong:
    #343434;

  --prov-text:
    #f7f7f7;

  --prov-text-soft:
    #d0d0d0;

  --prov-text-muted:
    #a0a0a0;

  --prov-black:
    #ffffff;

  --prov-accent:
    #f5f5f5;

  --prov-shadow:
    none;

  background:
    #000000;

  color:
    #f7f7f7;
}


/* =========================================================
   DARK · CONTENEDORES
   ========================================================= */

html[data-theme="dark"] .proveedores-panel,
html[data-theme="dark"] .proveedores-metric-card,
html[data-theme="dark"] .proveedores-toolbar,
html[data-theme="dark"] .proveedores-view-selector,
html[data-theme="dark"] .proveedores-filter-panel,
html[data-theme="dark"] .proveedores-table td,
html[data-theme="dark"] .proveedores-form-section,
html[data-theme="dark"] .proveedores-detail-section,
html[data-theme="dark"] .proveedores-contact-card,
html[data-theme="dark"] .proveedores-recurring-card,
html[data-theme="dark"] .proveedores-document-card,
html[data-theme="dark"] .proveedores-note-card,
html[data-theme="dark"] .proveedores-payment-card,
html[data-theme="dark"] .proveedores-payment-history-item {
  background:
    #050505;
}


/* =========================================================
   DARK · SUPERFICIES SECUNDARIAS
   ========================================================= */

html[data-theme="dark"] .proveedores-table th,
html[data-theme="dark"] .proveedores-search,
html[data-theme="dark"] .proveedores-detail-hero,
html[data-theme="dark"] .proveedores-detail-section-header,
html[data-theme="dark"] .proveedores-metric-icon,
html[data-theme="dark"] .proveedores-provider-avatar,
html[data-theme="dark"] .proveedores-contact-avatar,
html[data-theme="dark"] .proveedores-category-chip,
html[data-theme="dark"] .proveedores-mini-badge,
html[data-theme="dark"] .proveedores-status.is-neutral,
html[data-theme="dark"] .proveedores-switch-row,
html[data-theme="dark"] .proveedores-payment-summary article,
html[data-theme="dark"] .proveedores-expense-detail-hero {
  background:
    #0a0a0a;
}


/* =========================================================
   DARK · HOVER
   ========================================================= */

html[data-theme="dark"]
.proveedores-table
tbody
tr:hover
td {
  background:
    #0b0b0b;
}


html[data-theme="dark"]
.proveedores-btn-secondary:hover:not(:disabled),
html[data-theme="dark"]
.proveedores-filter-button:hover,
html[data-theme="dark"]
.proveedores-actions-trigger:hover,
html[data-theme="dark"]
.proveedores-actions-trigger.is-active,
html[data-theme="dark"]
.proveedores-icon-btn:hover,
html[data-theme="dark"]
.proveedores-row-menu button:hover,
html[data-theme="dark"]
.proveedores-export-menu button:hover {
  background:
    #111111;
}


/* =========================================================
   DARK · MODALES
   ========================================================= */

html[data-theme="dark"] .proveedores-modal-overlay,
body[data-theme="dark"] .proveedores-modal-overlay,
.dark .proveedores-modal-overlay {
  --prov-surface:
    #050505;

  --prov-surface-soft:
    #0a0a0a;

  --prov-surface-strong:
    #111111;

  --prov-border:
    #202020;

  --prov-border-strong:
    #343434;

  --prov-text:
    #f7f7f7;

  --prov-text-soft:
    #d0d0d0;

  --prov-text-muted:
    #a0a0a0;

  --prov-black:
    #ffffff;
}


html[data-theme="dark"] .proveedores-modal {
  background:
    #050505;

  border-color:
    #242424;
}


html[data-theme="dark"] .proveedores-modal-header,
html[data-theme="dark"] .proveedores-modal-footer {
  background:
    #050505;

  border-color:
    #242424;
}


html[data-theme="dark"] .proveedores-modal-body {
  background:
    #000000;
}


/* =========================================================
   DARK · CONFIRM / TOAST
   ========================================================= */

html[data-theme="dark"] .proveedores-confirm-overlay,
body[data-theme="dark"] .proveedores-confirm-overlay,
.dark .proveedores-confirm-overlay,
html[data-theme="dark"] .proveedores-toast-stack,
body[data-theme="dark"] .proveedores-toast-stack,
.dark .proveedores-toast-stack {
  --prov-surface:
    #050505;

  --prov-surface-soft:
    #0a0a0a;

  --prov-surface-strong:
    #111111;

  --prov-border:
    #202020;

  --prov-border-strong:
    #343434;

  --prov-text:
    #f7f7f7;

  --prov-text-soft:
    #d0d0d0;

  --prov-text-muted:
    #a0a0a0;

  --prov-black:
    #ffffff;
}


/* =========================================================
   DARK · INPUTS
   ========================================================= */

html[data-theme="dark"]
.proveedores-page
input,
html[data-theme="dark"]
.proveedores-page
select,
html[data-theme="dark"]
.proveedores-page
textarea,
html[data-theme="dark"]
.proveedores-modal
input,
html[data-theme="dark"]
.proveedores-modal
select,
html[data-theme="dark"]
.proveedores-modal
textarea {
  background:
    #050505;

  border-color:
    #262626;

  color:
    #f7f7f7;

  color-scheme:
    dark;
}


html[data-theme="dark"]
.proveedores-page
input:focus,
html[data-theme="dark"]
.proveedores-page
select:focus,
html[data-theme="dark"]
.proveedores-page
textarea:focus,
html[data-theme="dark"]
.proveedores-modal
input:focus,
html[data-theme="dark"]
.proveedores-modal
select:focus,
html[data-theme="dark"]
.proveedores-modal
textarea:focus {
  background:
    #080808;

  border-color:
    #484848;
}


html[data-theme="dark"]
.proveedores-page
option,
html[data-theme="dark"]
.proveedores-modal
option {
  background:
    #050505;

  color:
    #f7f7f7;
}


/* =========================================================
   HEADER · FULL WIDTH
   ========================================================= */

.proveedores-header {
  width:
    100%;

  max-width:
    none;
}


.proveedores-header-copy {
  flex:
    1 1 auto;
}


.proveedores-header-actions {
  flex:
    0 0 auto;
}


/* =========================================================
   MÉTRICAS · FULL WIDTH
   ========================================================= */

.proveedores-metrics-mount,
.proveedores-metrics-grid {
  width:
    100%;

  max-width:
    none;
}


.proveedores-metrics-grid {
  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    );
}


/* =========================================================
   PANEL · FULL WIDTH
   ========================================================= */

.proveedores-content-mount,
.proveedores-panel,
.proveedores-toolbar,
.proveedores-table-mount,
.proveedores-table-shell,
.proveedores-pagination-mount {
  width:
    100%;

  max-width:
    none;

  min-width:
    0;
}


/* =========================================================
   TOOLBAR · MEJOR DISTRIBUCIÓN
   ========================================================= */

.proveedores-toolbar-main {
  grid-template-columns:
    minmax(
      280px,
      1fr
    )
    auto;
}


.proveedores-search {
  width:
    100%;
}


.proveedores-toolbar-controls {
  flex:
    0 1 auto;
}


/* =========================================================
   TABLA · OCUPAR ANCHO COMPLETO
   ========================================================= */

.proveedores-table {
  width:
    100%;

  max-width:
    none;

  min-width:
    0;

  table-layout:
    fixed;
}


.proveedores-table th,
.proveedores-table td {
  overflow-wrap:
    anywhere;
}


/* =========================================================
   EVITAR DESBORDES DE TEXTO
   ========================================================= */

.proveedores-provider-copy,
.proveedores-cell-stack,
.proveedores-contact-copy,
.proveedores-document-copy,
.proveedores-payment-copy,
.proveedores-detail-copy,
.proveedores-modal-title-copy {
  min-width:
    0;

  max-width:
    100%;
}


/* =========================================================
   TABS DETALLE · SIN SCROLL HORIZONTAL
   ========================================================= */

.proveedores-detail-tabs {
  display:
    flex;

  flex-wrap:
    wrap;

  overflow-x:
    visible;
}


.proveedores-detail-tab {
  flex:
    1 1 auto;

  min-width:
    max-content;
}


/* =========================================================
   MODAL XL · MÁS ESPACIO
   ========================================================= */

.proveedores-modal-xl {
  width:
    min(
      calc(100vw - 44px),
      1380px
    );
}


.proveedores-modal-large {
  width:
    min(
      calc(100vw - 44px),
      1080px
    );
}


/* =========================================================
   DETALLE PROVEEDOR · APROVECHAR ANCHO
   ========================================================= */

.proveedores-detail-hero {
  grid-template-columns:
    minmax(
      280px,
      1.25fr
    )
    minmax(
      500px,
      1fr
    );
}


.proveedores-detail-grid {
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
}


/* =========================================================
   FORMULARIOS GRANDES
   ========================================================= */

.proveedores-form-grid {
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );
}


/* =========================================================
   MINI TABLE · SIN HORIZONTAL
   ========================================================= */

.proveedores-mini-table-shell {
  width:
    100%;

  max-width:
    100%;

  overflow:
    hidden;
}


.proveedores-mini-table {
  width:
    100%;

  min-width:
    0;

  table-layout:
    fixed;
}


/* =========================================================
   DESKTOP GRANDE
   ========================================================= */

@media (
  min-width:
    1700px
) {

  .proveedores-page {
    padding-left:
      30px;

    padding-right:
      30px;
  }


  .proveedores-metrics-grid {
    gap:
      12px;
  }


  .proveedores-metric-card {
    min-height:
      112px;
  }


  .proveedores-filter-grid {
    grid-template-columns:
      repeat(
        5,
        minmax(0, 1fr)
      );
  }


  .proveedores-form-grid {
    grid-template-columns:
      repeat(
        5,
        minmax(0, 1fr)
      );
  }

}


/* =========================================================
   DESKTOP / NOTEBOOK
   ========================================================= */

@media (
  max-width:
    1320px
) {

  .proveedores-page {
    padding:
      20px;
  }


  .proveedores-metrics-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }


  .proveedores-detail-hero {
    grid-template-columns:
      1fr;
  }


  .proveedores-filter-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }


  .proveedores-form-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }

}


/* =========================================================
   TABLET LANDSCAPE
   ========================================================= */

@media (
  max-width:
    1080px
) {

  .proveedores-page {
    padding:
      18px;
  }


  .proveedores-header {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .proveedores-header-actions {
    width:
      100%;

    justify-content:
      flex-start;
  }


  .proveedores-toolbar-main {
    grid-template-columns:
      1fr;
  }


  .proveedores-toolbar-controls {
    width:
      100%;

    justify-content:
      flex-start;
  }


  .proveedores-detail-grid {
    grid-template-columns:
      1fr;
  }


  .proveedores-form-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .proveedores-detail-kpis {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (
  max-width:
    860px
) {

  .proveedores-page {
    padding:
      16px;
  }


  .proveedores-metrics-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .proveedores-filter-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .proveedores-header-actions {
    display:
      grid;

    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }


  .proveedores-header-actions > *,
  .proveedores-header-actions .proveedores-btn,
  .proveedores-export-wrap {
    width:
      100%;
  }


  .proveedores-export-wrap > .proveedores-btn {
    width:
      100%;
  }


  .proveedores-toolbar-controls {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .proveedores-select-control,
  .proveedores-filter-button,
  .proveedores-toolbar-controls > .proveedores-btn {
    width:
      100%;
  }


  .proveedores-select-control select {
    flex:
      1;

    max-width:
      none;
  }

}


/* =========================================================
   MOBILE · TABLA EN CARDS
   ========================================================= */

@media (
  max-width:
    820px
) {

  .proveedores-table-shell {
    width:
      100%;

    padding:
      10px;

    overflow:
      visible;
  }


  .proveedores-table,
  .proveedores-table thead,
  .proveedores-table tbody,
  .proveedores-table tr,
  .proveedores-table th,
  .proveedores-table td {
    display:
      block;
  }


  .proveedores-table thead {
    display:
      none;
  }


  .proveedores-table {
    width:
      100%;

    min-width:
      0;

    table-layout:
      auto;
  }


  .proveedores-table tbody {
    width:
      100%;

    display:
      grid;

    grid-template-columns:
      1fr;

    gap:
      10px;
  }


  .proveedores-table tbody tr {
    position:
      relative;

    width:
      100%;

    min-width:
      0;

    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    border:
      1px solid var(--prov-border);

    border-radius:
      12px;

    background:
      var(--prov-surface);

    overflow:
      visible;
  }


  .proveedores-table td {
    width:
      auto !important;

    min-width:
      0;

    min-height:
      56px;

    position:
      relative;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      flex-start;

    justify-content:
      center;

    gap:
      4px;

    padding:
      22px 11px 10px;

    border-right:
      1px solid var(--prov-border);

    border-bottom:
      1px solid var(--prov-border);

    overflow:
      visible;
  }


  .proveedores-table td:nth-child(even) {
    border-right:
      0;
  }


  .proveedores-table td::before {
    content:
      attr(data-label);

    position:
      absolute;

    top:
      7px;

    left:
      11px;

    font-size:
      9px;

    line-height:
      1;

    font-weight:
      850;

    letter-spacing:
      .04em;

    text-transform:
      uppercase;

    color:
      var(--prov-text-muted);
  }


  .proveedores-table tbody tr td:first-child {
    grid-column:
      1 / -1;

    min-height:
      58px;

    padding:
      11px 54px 11px 11px;
  }


  .proveedores-table tbody tr td:first-child::before {
    display:
      none;
  }


  .proveedores-actions-column {
    position:
      absolute !important;

    top:
      9px;

    right:
      9px;

    z-index:
      30;

    width:
      auto !important;

    min-height:
      0 !important;

    padding:
      0 !important;

    border:
      0 !important;
  }


  .proveedores-actions-column::before {
    display:
      none;
  }


  .proveedores-cell-stack.is-right {
    align-items:
      flex-start;
  }

}


/* =========================================================
   MOBILE · MINI TABLES SIN SCROLL
   ========================================================= */

@media (
  max-width:
    760px
) {

  .proveedores-mini-table-shell {
    border:
      0;

    overflow:
      visible;
  }


  .proveedores-mini-table,
  .proveedores-mini-table thead,
  .proveedores-mini-table tbody,
  .proveedores-mini-table tr,
  .proveedores-mini-table th,
  .proveedores-mini-table td {
    display:
      block;

    width:
      100%;
  }


  .proveedores-mini-table thead {
    display:
      none;
  }


  .proveedores-mini-table tbody {
    display:
      flex;

    flex-direction:
      column;

    gap:
      8px;
  }


  .proveedores-mini-table tr {
    padding:
      10px;

    border:
      1px solid var(--prov-border);

    border-radius:
      10px;

    background:
      var(--prov-surface);
  }


  .proveedores-mini-table td {
    min-width:
      0;

    padding:
      7px 0;

    border-bottom:
      1px solid var(--prov-border);

    overflow-wrap:
      anywhere;
  }


  .proveedores-mini-table td:last-child {
    border-bottom:
      0;
  }


  .proveedores-mini-table td strong,
  .proveedores-mini-table td small {
    white-space:
      normal;

    overflow:
      visible;

    text-overflow:
      initial;
  }


  .proveedores-expense-detail-hero {
    flex-direction:
      column;
  }


  .proveedores-expense-detail-status {
    width:
      100%;

    align-items:
      flex-start;
  }


  .proveedores-expense-detail-kpis {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .proveedores-payment-summary {
    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (
  max-width:
    680px
) {

  .proveedores-page {
    padding:
      14px;

    gap:
      14px;
  }


  .proveedores-header {
    gap:
      14px;
  }


  .proveedores-header h1 {
    font-size:
      26px;
  }


  .proveedores-header p {
    font-size:
      13px;
  }


  .proveedores-header-actions {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .proveedores-metrics-grid {
    grid-template-columns:
      1fr;
  }


  .proveedores-toolbar {
    padding:
      11px;
  }


  .proveedores-toolbar-controls {
    grid-template-columns:
      1fr;
  }


  .proveedores-toolbar-secondary {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .proveedores-limit-control {
    width:
      100%;

    justify-content:
      space-between;
  }


  .proveedores-filter-grid {
    grid-template-columns:
      1fr;
  }


  .proveedores-field-span-2 {
    grid-column:
      auto;
  }


  .proveedores-form-grid {
    grid-template-columns:
      1fr;
  }


  .proveedores-detail-tabs {
    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    overflow:
      visible;
  }


  .proveedores-detail-tab {
    width:
      100%;

    min-width:
      0;
  }


  .proveedores-info-grid {
    grid-template-columns:
      1fr;
  }


  .proveedores-contact-list,
  .proveedores-document-list,
  .proveedores-notes-list,
  .proveedores-payment-list,
  .proveedores-recurring-grid {
    grid-template-columns:
      1fr;
  }


  .proveedores-export-menu {
    width:
      min(
        100%,
        300px
      );
  }

}


/* =========================================================
   MOBILE PEQUEÑO
   ========================================================= */

@media (
  max-width:
    520px
) {

  .proveedores-page {
    padding:
      12px;
  }


  .proveedores-header-actions {
    grid-template-columns:
      1fr;
  }


  .proveedores-view-selector {
    width:
      100%;

    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .proveedores-view-tab {
    width:
      100%;
  }


  .proveedores-filter-panel {
    padding:
      11px;
  }


  .proveedores-filter-panel-header {
    flex-direction:
      column;
  }


  .proveedores-filter-actions {
    width:
      100%;

    display:
      grid;

    grid-template-columns:
      1fr;
  }


  .proveedores-filter-actions .proveedores-btn {
    width:
      100%;
  }


  .proveedores-table-shell {
    padding:
      8px;
  }


  .proveedores-table tbody tr {
    grid-template-columns:
      1fr;
  }


  .proveedores-table td {
    border-right:
      0;
  }


  .proveedores-table tbody tr td:first-child {
    grid-column:
      auto;

    padding-right:
      52px;
  }


  .proveedores-expense-detail-kpis {
    grid-template-columns:
      1fr;
  }


  .proveedores-detail-kpis {
    grid-template-columns:
      1fr;
  }


  .proveedores-money-field {
    grid-template-columns:
      74px minmax(0, 1fr);
  }


  .proveedores-pagination {
    flex-wrap:
      wrap;
  }


  .proveedores-pagination-pages {
    max-width:
      100%;

    flex-wrap:
      wrap;

    justify-content:
      center;
  }


  .proveedores-row-menu {
    position:
      fixed;

    top:
      auto;

    right:
      10px;

    bottom:
      10px;

    left:
      10px;

    width:
      auto;

    max-width:
      none;

    z-index:
      15000;
  }

}


/* =========================================================
   ULTRA SMALL
   ========================================================= */

@media (
  max-width:
    380px
) {

  .proveedores-page {
    padding:
      10px;
  }


  .proveedores-detail-tabs {
    grid-template-columns:
      1fr;
  }


  .proveedores-money-field {
    grid-template-columns:
      1fr;
  }


  .proveedores-payment-history-main {
    grid-template-columns:
      1fr;
  }


  .proveedores-document-card {
    grid-template-columns:
      1fr;
  }


  .proveedores-document-icon {
    width:
      34px;

    height:
      34px;
  }


  .proveedores-document-actions {
    grid-column:
      auto;
  }

}


/* =========================================================
   BLOQUEO TOTAL DE SCROLL HORIZONTAL
   ========================================================= */

.proveedores-page,
.proveedores-page-mount,
#proveedoresPageMount,
.proveedores-content-mount,
.proveedores-panel,
.proveedores-toolbar,
.proveedores-table-mount,
.proveedores-table-shell,
.proveedores-filter-panel,
.proveedores-form,
.proveedores-form-section,
.proveedores-detail-content {
  max-width:
    100%;

  min-width:
    0;
}


.proveedores-page img,
.proveedores-page svg,
.proveedores-page canvas {
  max-width:
    100%;
}


/* =========================================================
   FIN AJUSTE FINAL PROVEEDORES
   ========================================================= *//* =========================================================
   FIX BOTONES PRIMARIOS · MODO CLARO
   NUEVO PROVEEDOR / APLICAR
   ========================================================= */

html[data-theme="light"]
.proveedores-page
.proveedores-btn-primary,
html:not([data-theme])
.proveedores-page
.proveedores-btn-primary {
  background:
    #0a0a0a !important;

  border-color:
    #0a0a0a !important;

  color:
    #ffffff !important;
}


html[data-theme="light"]
.proveedores-page
.proveedores-btn-primary *,
html:not([data-theme])
.proveedores-page
.proveedores-btn-primary * {
  color:
    #ffffff !important;
}


html[data-theme="light"]
.proveedores-page
.proveedores-btn-primary
svg,
html:not([data-theme])
.proveedores-page
.proveedores-btn-primary
svg {
  color:
    #ffffff !important;

  stroke:
    currentColor;
}


html[data-theme="light"]
.proveedores-page
.proveedores-btn-primary:hover:not(:disabled),
html:not([data-theme])
.proveedores-page
.proveedores-btn-primary:hover:not(:disabled) {
  background:
    #1a1a1a !important;

  border-color:
    #1a1a1a !important;

  color:
    #ffffff !important;

  opacity:
    1;
}


/* =========================================================
   BOTÓN APLICAR DE FILTROS
   ========================================================= */

html[data-theme="light"]
.proveedores-page
.proveedores-filter-actions
.proveedores-btn-primary,
html:not([data-theme])
.proveedores-page
.proveedores-filter-actions
.proveedores-btn-primary {
  background:
    #0a0a0a !important;

  border-color:
    #0a0a0a !important;

  color:
    #ffffff !important;
}


html[data-theme="light"]
.proveedores-page
.proveedores-filter-actions
.proveedores-btn-primary *,
html:not([data-theme])
.proveedores-page
.proveedores-filter-actions
.proveedores-btn-primary * {
  color:
    #ffffff !important;
}


/* =========================================================
   DISABLED · QUE SIGA SIENDO LEGIBLE
   ========================================================= */

html[data-theme="light"]
.proveedores-page
.proveedores-btn-primary:disabled,
html:not([data-theme])
.proveedores-page
.proveedores-btn-primary:disabled {
  background:
    #292929 !important;

  border-color:
    #292929 !important;

  color:
    #ffffff !important;

  opacity:
    0.62;
}


/* =========================================================
   DARK · MANTENER CONTRASTE INVERSO
   ========================================================= */

html[data-theme="dark"]
.proveedores-page
.proveedores-btn-primary {
  background:
    #f5f5f5 !important;

  border-color:
    #f5f5f5 !important;

  color:
    #050505 !important;
}


html[data-theme="dark"]
.proveedores-page
.proveedores-btn-primary * {
  color:
    #050505 !important;
}/* =========================================================
   FIX MODAL TRANSPARENTE
   ========================================================= */

.proveedores-modal-overlay {
  background:
    rgba(
      0,
      0,
      0,
      0.42
    ) !important;

  backdrop-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;
}


.proveedores-modal {
  opacity:
    1 !important;

  background:
    #ffffff !important;

  background-color:
    #ffffff !important;

  border:
    1px solid #d6d8d2 !important;

  box-shadow:
    0 24px 80px
    rgba(
      0,
      0,
      0,
      0.22
    ) !important;

  isolation:
    isolate;
}


.proveedores-modal-header,
.proveedores-modal-body,
.proveedores-modal-footer {
  opacity:
    1 !important;

  background:
    #ffffff !important;

  background-color:
    #ffffff !important;
}


.proveedores-modal-body {
  color:
    #111410 !important;
}


/* =========================================================
   FORM SECTIONS DENTRO DEL MODAL
   ========================================================= */

.proveedores-modal
.proveedores-form-section {
  background:
    #ffffff !important;

  background-color:
    #ffffff !important;

  border-color:
    #d8d9d2 !important;
}


.proveedores-modal
.proveedores-form-section-header {
  background:
    transparent !important;
}


.proveedores-modal
.proveedores-field input,
.proveedores-modal
.proveedores-field select,
.proveedores-modal
.proveedores-field textarea {
  background:
    #ffffff !important;

  background-color:
    #ffffff !important;

  color:
    #111410 !important;

  border-color:
    #d2d5cd !important;
}


.proveedores-modal
.proveedores-field input::placeholder,
.proveedores-modal
.proveedores-field textarea::placeholder {
  color:
    #777b73 !important;
}


/* =========================================================
   TEXTOS MODAL LIGHT
   ========================================================= */

html[data-theme="light"]
.proveedores-modal {
  --prov-surface:
    #ffffff;

  --prov-surface-soft:
    #f7f7f4;

  --prov-surface-strong:
    #eeeeea;

  --prov-border:
    #d8d9d2;

  --prov-border-strong:
    #c4c7bd;

  --prov-text:
    #111410;

  --prov-text-soft:
    #44483f;

  --prov-text-muted:
    #6f746a;
}


html[data-theme="light"]
.proveedores-modal,
html[data-theme="light"]
.proveedores-modal-header,
html[data-theme="light"]
.proveedores-modal-body,
html[data-theme="light"]
.proveedores-modal-footer {
  background:
    #ffffff !important;
}


/* =========================================================
   DARK MODE · NEGRO REAL
   ========================================================= */

html[data-theme="dark"]
.proveedores-modal {
  opacity:
    1 !important;

  background:
    #050505 !important;

  background-color:
    #050505 !important;

  border-color:
    #242424 !important;
}


html[data-theme="dark"]
.proveedores-modal-header,
html[data-theme="dark"]
.proveedores-modal-footer {
  background:
    #050505 !important;

  background-color:
    #050505 !important;
}


html[data-theme="dark"]
.proveedores-modal-body {
  background:
    #000000 !important;

  background-color:
    #000000 !important;

  color:
    #f7f7f7 !important;
}


html[data-theme="dark"]
.proveedores-modal
.proveedores-form-section {
  background:
    #050505 !important;

  border-color:
    #242424 !important;
}


html[data-theme="dark"]
.proveedores-modal
.proveedores-field input,
html[data-theme="dark"]
.proveedores-modal
.proveedores-field select,
html[data-theme="dark"]
.proveedores-modal
.proveedores-field textarea {
  background:
    #0a0a0a !important;

  color:
    #f7f7f7 !important;

  border-color:
    #292929 !important;
}