/* =========================================================
   HUB NEURO APRENDIZAJE INFANTIL
   VENTAS
   CSS

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

   PARTE 1 DE 2

   DISEÑO:
   - Premium.
   - Compacto.
   - Responsive.
   - Sin glow.
   - Sin scroll horizontal de página.
   - Letras legibles.
   - Divisiones claras.
   - Compatible con modo claro y oscuro.
   ========================================================= */


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

:root {
  --ventas-bg:
    #f2f3f0;

  --ventas-surface:
    #ffffff;

  --ventas-surface-soft:
    #f8f9f7;

  --ventas-surface-muted:
    #f1f2ef;

  --ventas-surface-strong:
    #e9ebe6;

  --ventas-text:
    #11130f;

  --ventas-text-strong:
    #080a07;

  --ventas-text-soft:
    #4b5047;

  --ventas-text-muted:
    #686e64;

  --ventas-border:
    #d9ddd5;

  --ventas-border-strong:
    #c8cdc3;

  --ventas-border-dark:
    #b8beb3;

  --ventas-accent:
    #171b15;

  --ventas-accent-hover:
    #252b22;

  --ventas-accent-text:
    #ffffff;

  --ventas-success:
    #1f6f43;

  --ventas-success-soft:
    #e8f4ec;

  --ventas-success-border:
    #b9dcc6;

  --ventas-warning:
    #8a5c08;

  --ventas-warning-soft:
    #fff6df;

  --ventas-warning-border:
    #ead59c;

  --ventas-danger:
    #a12c2c;

  --ventas-danger-soft:
    #fff0ef;

  --ventas-danger-border:
    #edc3bf;

  --ventas-info:
    #315f8a;

  --ventas-info-soft:
    #edf5fc;

  --ventas-info-border:
    #c6dced;

  --ventas-neutral-soft:
    #eff1ed;

  --ventas-radius-xs:
    7px;

  --ventas-radius-sm:
    9px;

  --ventas-radius:
    12px;

  --ventas-radius-lg:
    16px;

  --ventas-shadow:
    0 1px 2px rgba(16, 20, 14, 0.04),
    0 8px 24px rgba(16, 20, 14, 0.035);

  --ventas-shadow-modal:
    0 24px 70px rgba(10, 12, 9, 0.18);

  --ventas-transition:
    160ms ease;
}


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

html[data-theme="dark"],
body[data-theme="dark"],
body.dark,
body.dark-mode,
[data-theme="dark"] {
  --ventas-bg:
    #080908;

  --ventas-surface:
    #0f110f;

  --ventas-surface-soft:
    #131613;

  --ventas-surface-muted:
    #171a17;

  --ventas-surface-strong:
    #1c201c;

  --ventas-text:
    #f4f6f1;

  --ventas-text-strong:
    #ffffff;

  --ventas-text-soft:
    #c8cdc5;

  --ventas-text-muted:
    #a8aea4;

  --ventas-border:
    #292e28;

  --ventas-border-strong:
    #363d35;

  --ventas-border-dark:
    #454d43;

  --ventas-accent:
    #f3f5f0;

  --ventas-accent-hover:
    #ffffff;

  --ventas-accent-text:
    #0c0e0c;

  --ventas-success:
    #72c894;

  --ventas-success-soft:
    #13251a;

  --ventas-success-border:
    #28583a;

  --ventas-warning:
    #e6b95c;

  --ventas-warning-soft:
    #2b2313;

  --ventas-warning-border:
    #5c4721;

  --ventas-danger:
    #ed8181;

  --ventas-danger-soft:
    #2b1717;

  --ventas-danger-border:
    #603030;

  --ventas-info:
    #8ab9e0;

  --ventas-info-soft:
    #13212d;

  --ventas-info-border:
    #29475e;

  --ventas-neutral-soft:
    #181b18;

  --ventas-shadow:
    0 1px 2px rgba(0, 0, 0, 0.32),
    0 10px 30px rgba(0, 0, 0, 0.22);

  --ventas-shadow-modal:
    0 28px 80px rgba(0, 0, 0, 0.56);
}


/* =========================================================
   BASE
   ========================================================= */

.ventas-page,
.ventas-page *,
.ventas-modal-backdrop *,
.ventas-drawer-backdrop *,
.ventas-toast-region * {
  box-sizing:
    border-box;
}


.ventas-page {
  width:
    100%;

  min-width:
    0;

  min-height:
    100%;

  color:
    var(--ventas-text);

  font-family:
    "DM Sans",
    "Plus Jakarta Sans",
    system-ui,
    sans-serif;

  font-size:
    14px;

  line-height:
    1.45;

  overflow-x:
    hidden;
}


.ventas-page button,
.ventas-page input,
.ventas-page select,
.ventas-page textarea,
.ventas-modal-backdrop button,
.ventas-modal-backdrop input,
.ventas-modal-backdrop select,
.ventas-modal-backdrop textarea,
.ventas-drawer-backdrop button,
.ventas-drawer-backdrop input,
.ventas-drawer-backdrop select,
.ventas-drawer-backdrop textarea {
  font:
    inherit;
}


.ventas-page button,
.ventas-modal-backdrop button,
.ventas-drawer-backdrop button {
  -webkit-tap-highlight-color:
    transparent;
}


.ventas-page button:focus-visible,
.ventas-page input:focus-visible,
.ventas-page select:focus-visible,
.ventas-page textarea:focus-visible,
.ventas-modal-backdrop button:focus-visible,
.ventas-modal-backdrop input:focus-visible,
.ventas-modal-backdrop select:focus-visible,
.ventas-modal-backdrop textarea:focus-visible,
.ventas-drawer-backdrop button:focus-visible,
.ventas-drawer-backdrop input:focus-visible,
.ventas-drawer-backdrop select:focus-visible,
.ventas-drawer-backdrop textarea:focus-visible {
  outline:
    2px solid var(--ventas-text);

  outline-offset:
    2px;
}


/* =========================================================
   SHELL
   ========================================================= */

.ventas-shell {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    16px;

  padding:
    18px;

  background:
    transparent;
}


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

.ventas-header {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    24px;

  padding:
    2px 1px 0;
}


.ventas-header-copy {
  min-width:
    0;
}


.ventas-eyebrow {
  margin-bottom:
    4px;

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

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;
}


.ventas-title {
  margin:
    0;

  color:
    var(--ventas-text-strong);

  font-size:
    clamp(
      24px,
      2vw,
      30px
    );

  font-weight:
    800;

  line-height:
    1.08;

  letter-spacing:
    -0.035em;
}


.ventas-description {
  max-width:
    760px;

  margin:
    7px 0 0;

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

  font-size:
    14px;

  font-weight:
    550;

  line-height:
    1.5;
}


.ventas-header-actions {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;
}


.ventas-primary-action {
  display:
    flex;

  align-items:
    center;
}


/* =========================================================
   BUTTONS
   ========================================================= */

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

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  border:
    1px solid transparent;

  border-radius:
    var(--ventas-radius-sm);

  padding:
    8px 13px;

  font-size:
    13px;

  font-weight:
    750;

  line-height:
    1;

  white-space:
    nowrap;

  cursor:
    pointer;

  transition:
    background var(--ventas-transition),
    border-color var(--ventas-transition),
    color var(--ventas-transition),
    transform var(--ventas-transition);
}


.ventas-btn svg {
  flex:
    0 0 auto;
}


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


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


.ventas-btn:disabled {
  cursor:
    not-allowed;

  opacity:
    0.52;
}


.ventas-btn-primary {
  background:
    var(--ventas-accent);

  border-color:
    var(--ventas-accent);

  color:
    var(--ventas-accent-text);
}


.ventas-btn-primary:hover:not(:disabled) {
  background:
    var(--ventas-accent-hover);

  border-color:
    var(--ventas-accent-hover);
}


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

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

  color:
    var(--ventas-text-strong);
}


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

  border-color:
    var(--ventas-border-dark);
}


.ventas-btn-text {
  min-height:
    32px;

  padding:
    5px 8px;

  background:
    transparent;

  color:
    var(--ventas-text);

  border-color:
    transparent;
}


.ventas-btn-text:hover:not(:disabled) {
  background:
    var(--ventas-surface-muted);
}


.ventas-btn-danger {
  background:
    var(--ventas-danger);

  border-color:
    var(--ventas-danger);

  color:
    #ffffff;
}


.ventas-btn-danger-soft {
  background:
    var(--ventas-danger-soft);

  border-color:
    var(--ventas-danger-border);

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


.ventas-btn-danger-soft:hover:not(:disabled) {
  border-color:
    var(--ventas-danger);

  background:
    var(--ventas-danger-soft);
}


.ventas-icon-btn {
  width:
    33px;

  height:
    33px;

  flex:
    0 0 33px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

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

  border-radius:
    8px;

  background:
    var(--ventas-surface);

  color:
    var(--ventas-text);

  cursor:
    pointer;

  transition:
    background var(--ventas-transition),
    border-color var(--ventas-transition),
    color var(--ventas-transition);
}


.ventas-icon-btn:hover:not(:disabled) {
  background:
    var(--ventas-surface-muted);

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


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


.ventas-icon-btn:disabled {
  opacity:
    0.4;

  cursor:
    not-allowed;
}


/* =========================================================
   GLOBAL METRICS
   ========================================================= */

.ventas-global-metrics {
  width:
    100%;

  display:
    grid;

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

  gap:
    9px;
}


.ventas-global-metric {
  min-width:
    0;

  min-height:
    66px;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  padding:
    10px 12px;

  background:
    var(--ventas-surface);

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

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

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


.ventas-global-metric-icon {
  width:
    35px;

  height:
    35px;

  flex:
    0 0 35px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    9px;

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

  color:
    var(--ventas-text-strong);
}


.ventas-global-metric-copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    1px;
}


.ventas-global-metric-copy span {
  color:
    var(--ventas-text-muted);

  font-size:
    11.5px;

  font-weight:
    700;
}


.ventas-global-metric-copy strong {
  color:
    var(--ventas-text-strong);

  font-size:
    20px;

  font-weight:
    800;

  line-height:
    1.1;

  letter-spacing:
    -0.025em;
}


/* =========================================================
   NAV
   ========================================================= */

.ventas-nav {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    4px;

  padding:
    4px;

  overflow-x:
    auto;

  scrollbar-width:
    none;

  background:
    var(--ventas-surface);

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

  border-radius:
    11px;

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


.ventas-nav::-webkit-scrollbar {
  display:
    none;
}


.ventas-nav-item {
  min-height:
    36px;

  flex:
    0 0 auto;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    7px 11px;

  border:
    1px solid transparent;

  border-radius:
    8px;

  background:
    transparent;

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

  font-size:
    12.5px;

  font-weight:
    750;

  white-space:
    nowrap;

  cursor:
    pointer;

  transition:
    background var(--ventas-transition),
    color var(--ventas-transition),
    border-color var(--ventas-transition);
}


.ventas-nav-item:hover {
  background:
    var(--ventas-surface-muted);

  color:
    var(--ventas-text-strong);
}


.ventas-nav-item.is-active {
  background:
    var(--ventas-surface-strong);

  border-color:
    var(--ventas-border);

  color:
    var(--ventas-text-strong);
}


.ventas-nav-item[data-disabled="true"] {
  opacity:
    0.58;
}


.ventas-nav-icon {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;
}


.ventas-nav-label {
  line-height:
    1;
}


.ventas-nav-soon {
  padding:
    2px 5px;

  border-radius:
    5px;

  background:
    var(--ventas-surface-muted);

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

  font-size:
    9px;

  font-weight:
    800;

  text-transform:
    uppercase;
}


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

.ventas-content {
  position:
    relative;

  width:
    100%;

  min-width:
    0;
}


.ventas-section {
  width:
    100%;

  min-width:
    0;
}


.ventas-section-layout {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;
}


/* =========================================================
   LOADING BAR
   ========================================================= */

.ventas-loading-bar {
  position:
    absolute;

  z-index:
    15;

  top:
    -2px;

  left:
    0;

  width:
    100%;

  height:
    2px;

  overflow:
    hidden;

  border-radius:
    2px;

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


.ventas-loading-bar span {
  display:
    block;

  width:
    35%;

  height:
    100%;

  background:
    var(--ventas-text-strong);

  animation:
    ventas-loading-bar 1s linear infinite;
}


@keyframes ventas-loading-bar {
  from {
    transform:
      translateX(-120%);
  }

  to {
    transform:
      translateX(360%);
  }
}


/* =========================================================
   METRICS GRID
   ========================================================= */

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

  display:
    grid;

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

  gap:
    9px;
}


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

  min-height:
    92px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  gap:
    6px;

  padding:
    12px 13px;

  background:
    var(--ventas-surface);

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

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

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


.ventas-metric-card-top {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}


.ventas-metric-card-label {
  color:
    var(--ventas-text-muted);

  font-size:
    11.5px;

  font-weight:
    750;
}


.ventas-metric-card-icon {
  width:
    29px;

  height:
    29px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    8px;

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

  color:
    var(--ventas-text-strong);
}


.ventas-metric-card-value {
  color:
    var(--ventas-text-strong);

  font-size:
    clamp(
      19px,
      1.6vw,
      24px
    );

  font-weight:
    800;

  line-height:
    1.05;

  letter-spacing:
    -0.03em;
}


.ventas-metric-card-help {
  color:
    var(--ventas-text-muted);

  font-size:
    10.5px;

  font-weight:
    600;
}


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

.ventas-panel {
  width:
    100%;

  min-width:
    0;

  background:
    var(--ventas-surface);

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

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

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

  overflow:
    hidden;
}


.ventas-panel-header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  padding:
    13px 14px;

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


.ventas-panel-header > div {
  min-width:
    0;
}


.ventas-panel-header h3 {
  margin:
    2px 0 0;

  color:
    var(--ventas-text-strong);

  font-size:
    15px;

  font-weight:
    800;

  line-height:
    1.2;
}


.ventas-panel-eyebrow {
  color:
    var(--ventas-text-muted);

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


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

.ventas-toolbar {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  padding:
    10px;

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

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


.ventas-toolbar-search {
  min-width:
    0;

  height:
    38px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    0 11px;

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

  border-radius:
    9px;

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

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


.ventas-toolbar-search:focus-within {
  border-color:
    var(--ventas-text-muted);

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


.ventas-toolbar-search input {
  width:
    100%;

  min-width:
    0;

  height:
    100%;

  padding:
    0;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    var(--ventas-text-strong);

  font-size:
    13px;

  font-weight:
    600;
}


.ventas-toolbar-search input::placeholder {
  color:
    var(--ventas-text-muted);

  opacity:
    0.86;
}


.ventas-toolbar-filters,
.ventas-toolbar-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}


/* =========================================================
   INPUT / SELECT
   ========================================================= */

.ventas-input,
.ventas-select {
  height:
    38px;

  min-width:
    0;

  padding:
    0 10px;

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

  border-radius:
    9px;

  outline:
    0;

  background:
    var(--ventas-surface);

  color:
    var(--ventas-text-strong);

  font-size:
    12.5px;

  font-weight:
    650;
}


.ventas-select {
  min-width:
    145px;

  cursor:
    pointer;
}


.ventas-input-date {
  width:
    138px;
}


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

.ventas-table-wrap {
  width:
    100%;

  min-width:
    0;

  overflow-x:
    auto;

  overflow-y:
    visible;

  scrollbar-width:
    thin;

  scrollbar-color:
    var(--ventas-border-strong)
    transparent;
}


.ventas-table {
  width:
    100%;

  min-width:
    760px;

  border-collapse:
    collapse;

  border-spacing:
    0;

  table-layout:
    auto;
}


.ventas-table thead {
  background:
    var(--ventas-surface-soft);
}


.ventas-table th {
  height:
    40px;

  padding:
    8px 12px;

  border-bottom:
    1px solid var(--ventas-border-strong);

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

  font-size:
    10.5px;

  font-weight:
    800;

  line-height:
    1.15;

  letter-spacing:
    0.045em;

  text-align:
    left;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


.ventas-table td {
  height:
    53px;

  padding:
    8px 12px;

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

  color:
    var(--ventas-text);

  font-size:
    12.5px;

  font-weight:
    600;

  vertical-align:
    middle;
}


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


.ventas-table tbody tr {
  transition:
    background var(--ventas-transition);
}


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


.ventas-table th.is-number,
.ventas-table td.is-number {
  text-align:
    right;
}


.ventas-table td.is-number {
  font-variant-numeric:
    tabular-nums;

  white-space:
    nowrap;
}


.ventas-table-actions {
  width:
    50px;

  text-align:
    right !important;

  white-space:
    nowrap;
}


.ventas-table-compact {
  min-width:
    640px;
}


.ventas-table-compact th {
  height:
    37px;
}


.ventas-table-compact td {
  height:
    48px;

  padding-top:
    7px;

  padding-bottom:
    7px;
}


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

.ventas-table-link {
  max-width:
    100%;

  display:
    inline-flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    2px;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    var(--ventas-text-strong);

  text-align:
    left;

  cursor:
    pointer;
}


.ventas-table-link:hover strong {
  text-decoration:
    underline;

  text-underline-offset:
    3px;
}


.ventas-table-link strong,
.ventas-cell-main strong {
  max-width:
    320px;

  overflow:
    hidden;

  color:
    var(--ventas-text-strong);

  font-size:
    12.8px;

  font-weight:
    800;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ventas-table-link small,
.ventas-cell-main span {
  max-width:
    320px;

  overflow:
    hidden;

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

  font-size:
    10.5px;

  font-weight:
    650;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ventas-cell-main {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.ventas-reference {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

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

  font-size:
    11.5px;

  font-weight:
    700;
}


.ventas-muted {
  color:
    var(--ventas-text-muted);

  font-size:
    11.5px;

  font-weight:
    650;
}


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

.ventas-status {
  width:
    fit-content;

  max-width:
    100%;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  padding:
    4px 7px;

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

  border-radius:
    999px;

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

  background:
    var(--ventas-neutral-soft);

  font-size:
    10.5px;

  font-weight:
    800;

  line-height:
    1;

  white-space:
    nowrap;
}


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

  height:
    6px;

  flex:
    0 0 6px;

  border-radius:
    50%;

  background:
    currentColor;
}


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

  background:
    var(--ventas-success-soft);

  border-color:
    var(--ventas-success-border);
}


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

  background:
    var(--ventas-warning-soft);

  border-color:
    var(--ventas-warning-border);
}


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

  background:
    var(--ventas-danger-soft);

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


.ventas-status.is-neutral {
  color:
    var(--ventas-text-soft);

  background:
    var(--ventas-neutral-soft);
}


/* =========================================================
   DOCUMENT FLAG
   ========================================================= */

.ventas-document-flag {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

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

  font-size:
    11px;

  font-weight:
    700;
}


.ventas-document-flag.is-ready {
  color:
    var(--ventas-success);
}


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

.ventas-pagination {
  min-height:
    48px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    7px 10px;

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


.ventas-pagination-info {
  color:
    var(--ventas-text-muted);

  font-size:
    11px;

  font-weight:
    700;
}


.ventas-pagination-controls {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}


.ventas-pagination-page {
  min-width:
    54px;

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

  font-size:
    11.5px;

  font-weight:
    750;

  text-align:
    center;
}


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

.ventas-table-empty {
  min-height:
    112px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    4px;

  padding:
    20px;

  text-align:
    center;
}


.ventas-table-empty strong {
  color:
    var(--ventas-text-strong);

  font-size:
    13px;

  font-weight:
    800;
}


.ventas-table-empty span {
  max-width:
    380px;

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

  font-size:
    11.5px;

  font-weight:
    600;
}


/* =========================================================
   IMPORTACIONES
   ========================================================= */

.ventas-import-panel {
  overflow:
    hidden;
}


.ventas-import-list {
  display:
    flex;

  flex-direction:
    column;
}


.ventas-import-item {
  width:
    100%;

  min-width:
    0;

  min-height:
    54px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  padding:
    8px 13px;

  border:
    0;

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

  background:
    transparent;

  color:
    var(--ventas-text);

  text-align:
    left;

  cursor:
    pointer;
}


.ventas-import-item:last-child {
  border-bottom:
    0;
}


.ventas-import-item:hover {
  background:
    var(--ventas-surface-soft);
}


.ventas-import-item-icon {
  width:
    32px;

  height:
    32px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    8px;

  background:
    var(--ventas-surface-muted);
}


.ventas-import-item-main {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.ventas-import-item-main strong {
  overflow:
    hidden;

  color:
    var(--ventas-text-strong);

  font-size:
    12px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ventas-import-item-main small,
.ventas-import-item-count {
  color:
    var(--ventas-text-muted);

  font-size:
    10.5px;

  font-weight:
    650;
}


.ventas-import-item-count {
  white-space:
    nowrap;
}


/* =========================================================
   CLIENT HINT
   ========================================================= */

.ventas-client-search-hint {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    8px 11px;

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

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

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

  font-size:
    11px;

  font-weight:
    650;
}


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

.ventas-empty-state {
  min-height:
    300px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  padding:
    28px;

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

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

  background:
    var(--ventas-surface);

  text-align:
    center;
}


.ventas-empty-icon {
  width:
    46px;

  height:
    46px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin-bottom:
    3px;

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

  border-radius:
    12px;

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

  color:
    var(--ventas-text-strong);
}


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

  color:
    var(--ventas-text-strong);

  font-size:
    16px;

  font-weight:
    800;
}


.ventas-empty-state p {
  max-width:
    480px;

  margin:
    0;

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

  font-size:
    12px;

  font-weight:
    600;
}


.ventas-empty-state-error
.ventas-empty-icon {
  color:
    var(--ventas-danger);

  border-color:
    var(--ventas-danger-border);

  background:
    var(--ventas-danger-soft);
}


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

.ventas-section-skeleton {
  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;
}


.ventas-section-skeleton-top {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;
}


.ventas-section-skeleton-cards {
  display:
    grid;

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

  gap:
    9px;
}


.ventas-skeleton-card,
.ventas-skeleton-table,
.ventas-skeleton-line {
  overflow:
    hidden;

  position:
    relative;

  background:
    var(--ventas-surface-muted);
}


.ventas-skeleton-card::after,
.ventas-skeleton-table::after,
.ventas-skeleton-line::after,
.ventas-global-metric.is-skeleton::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  transform:
    translateX(-100%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.23),
      transparent
    );

  animation:
    ventas-skeleton 1.35s infinite;
}


html[data-theme="dark"]
.ventas-skeleton-card::after,
html[data-theme="dark"]
.ventas-skeleton-table::after,
html[data-theme="dark"]
.ventas-skeleton-line::after,
html[data-theme="dark"]
.ventas-global-metric.is-skeleton::after,
body.dark
.ventas-skeleton-card::after,
body.dark-mode
.ventas-skeleton-card::after {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.045),
      transparent
    );
}


@keyframes ventas-skeleton {
  to {
    transform:
      translateX(100%);
  }
}


.ventas-skeleton-card {
  height:
    92px;

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

  border-radius:
    var(--ventas-radius);
}


.ventas-skeleton-table {
  height:
    300px;

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

  border-radius:
    var(--ventas-radius);
}


.ventas-skeleton-line {
  height:
    14px;

  border-radius:
    5px;
}


.ventas-skeleton-line.is-title {
  width:
    210px;

  height:
    24px;
}


.ventas-skeleton-line.is-button {
  width:
    120px;

  height:
    36px;
}


.ventas-skeleton-line.is-short {
  width:
    64px;
}


.ventas-skeleton-line.is-value {
  width:
    44px;

  height:
    20px;
}


.ventas-global-metric.is-skeleton {
  position:
    relative;

  overflow:
    hidden;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  justify-content:
    center;
}


/* =========================================================
   PARTE 1 DE 2
   CONTINÚA EN LA PARTE 2
   ========================================================= *//* =========================================================
   OVERLAY
   ========================================================= */

.ventas-overlay-root {
  position:
    relative;

  z-index:
    9998;
}


body.ventas-overlay-open {
  overflow:
    hidden;
}


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

.ventas-modal-backdrop {
  position:
    fixed;

  z-index:
    10020;

  inset:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    20px;

  background:
    rgba(8, 10, 8, 0.46);

  opacity:
    0;

  pointer-events:
    none;

  transition:
    opacity var(--ventas-transition);
}


.ventas-modal-backdrop.is-open {
  opacity:
    1;

  pointer-events:
    auto;
}


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

.ventas-modal {
  width:
    min(
      100%,
      620px
    );

  max-height:
    min(
      90vh,
      860px
    );

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

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

  border-radius:
    var(--ventas-radius-lg);

  background:
    var(--ventas-surface);

  color:
    var(--ventas-text);

  box-shadow:
    var(--ventas-shadow-modal);

  transform:
    translateY(8px)
    scale(0.992);

  transition:
    transform var(--ventas-transition);
}


.ventas-modal-backdrop.is-open
.ventas-modal {
  transform:
    translateY(0)
    scale(1);
}


.ventas-modal-sm {
  width:
    min(
      100%,
      430px
    );
}


.ventas-modal-md {
  width:
    min(
      100%,
      620px
    );
}


.ventas-modal-lg {
  width:
    min(
      100%,
      820px
    );
}


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


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

.ventas-modal-header {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    16px;

  padding:
    16px 17px;

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

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


.ventas-modal-heading {
  min-width:
    0;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    10px;
}


.ventas-modal-heading-icon {
  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    9px;

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

  color:
    var(--ventas-text-strong);
}


.ventas-modal-heading h2 {
  margin:
    0;

  color:
    var(--ventas-text-strong);

  font-size:
    17px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    -0.02em;
}


.ventas-modal-heading p {
  margin:
    3px 0 0;

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

  font-size:
    11.5px;

  font-weight:
    600;

  line-height:
    1.4;
}


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

.ventas-modal-body {
  flex:
    1 1 auto;

  min-height:
    0;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  padding:
    16px 17px;

  scrollbar-width:
    thin;

  scrollbar-color:
    var(--ventas-border-strong)
    transparent;
}


.ventas-modal-footer {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  padding:
    12px 17px;

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

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


/* =========================================================
   DRAWER BACKDROP
   ========================================================= */

.ventas-drawer-backdrop {
  position:
    fixed;

  z-index:
    10010;

  inset:
    0;

  display:
    flex;

  justify-content:
    flex-end;

  background:
    rgba(8, 10, 8, 0.42);

  opacity:
    0;

  pointer-events:
    none;

  transition:
    opacity var(--ventas-transition);
}


.ventas-drawer-backdrop.is-open {
  opacity:
    1;

  pointer-events:
    auto;
}


/* =========================================================
   DRAWER
   ========================================================= */

.ventas-drawer {
  width:
    min(
      100%,
      720px
    );

  height:
    100%;

  min-height:
    0;

  display:
    flex;

  flex-direction:
    column;

  border-left:
    1px solid var(--ventas-border-strong);

  background:
    var(--ventas-surface);

  color:
    var(--ventas-text);

  box-shadow:
    var(--ventas-shadow-modal);

  transform:
    translateX(24px);

  transition:
    transform 190ms ease;
}


.ventas-drawer-backdrop.is-open
.ventas-drawer {
  transform:
    translateX(0);
}


.ventas-drawer-lg {
  width:
    min(
      100%,
      760px
    );
}


.ventas-drawer-xl {
  width:
    min(
      100%,
      1020px
    );
}


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

.ventas-drawer-header {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    18px;

  padding:
    15px 17px;

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

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


.ventas-drawer-header > div {
  min-width:
    0;
}


.ventas-drawer-eyebrow {
  display:
    block;

  margin-bottom:
    3px;

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

  font-size:
    9.5px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;
}


.ventas-drawer-header h2 {
  margin:
    0;

  color:
    var(--ventas-text-strong);

  font-size:
    18px;

  font-weight:
    800;

  line-height:
    1.15;

  letter-spacing:
    -0.025em;
}


.ventas-drawer-header p {
  margin:
    4px 0 0;

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

  font-size:
    11.5px;

  font-weight:
    650;
}


/* =========================================================
   DRAWER BODY
   ========================================================= */

.ventas-drawer-body {
  flex:
    1 1 auto;

  min-height:
    0;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  padding:
    16px;

  scrollbar-width:
    thin;

  scrollbar-color:
    var(--ventas-border-strong)
    transparent;
}


.ventas-drawer-loading {
  min-height:
    260px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

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


.ventas-drawer-loading strong {
  color:
    var(--ventas-text-soft);

  font-size:
    12px;

  font-weight:
    700;
}


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

.ventas-loading-spinner,
.ventas-btn-spinner {
  border:
    2px solid currentColor;

  border-right-color:
    transparent;

  border-radius:
    50%;

  animation:
    ventas-spin 700ms linear infinite;
}


.ventas-loading-spinner {
  width:
    28px;

  height:
    28px;
}


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

  height:
    14px;
}


@keyframes ventas-spin {
  to {
    transform:
      rotate(360deg);
  }
}


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

.ventas-form {
  width:
    100%;

  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;
}


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

  display:
    grid;

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

  gap:
    11px;
}


.ventas-field {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;
}


.ventas-field-label {
  color:
    var(--ventas-text-strong);

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.2;
}


.ventas-field-label b {
  color:
    var(--ventas-danger);

  font-weight:
    800;
}


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

  min-width:
    0;

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

  border-radius:
    9px;

  outline:
    0;

  background:
    var(--ventas-surface);

  color:
    var(--ventas-text-strong);

  font-size:
    12.5px;

  font-weight:
    650;

  transition:
    border-color var(--ventas-transition),
    background var(--ventas-transition);
}


.ventas-field input,
.ventas-field select {
  height:
    39px;

  padding:
    0 10px;
}


.ventas-field textarea {
  min-height:
    88px;

  resize:
    vertical;

  padding:
    9px 10px;

  line-height:
    1.45;
}


.ventas-field input:focus,
.ventas-field select:focus,
.ventas-field textarea:focus {
  border-color:
    var(--ventas-text-muted);

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


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

  opacity:
    0.78;
}


.ventas-field-help {
  color:
    var(--ventas-text-muted);

  font-size:
    10px;

  font-weight:
    600;

  line-height:
    1.4;
}


.ventas-form-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  padding-top:
    2px;
}


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

.ventas-switch-field {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    11px 12px;

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

  border-radius:
    10px;

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

  cursor:
    pointer;
}


.ventas-switch-field > span:first-child {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.ventas-switch-field strong {
  color:
    var(--ventas-text-strong);

  font-size:
    11.5px;

  font-weight:
    800;
}


.ventas-switch-field small {
  color:
    var(--ventas-text-muted);

  font-size:
    10px;

  font-weight:
    600;

  line-height:
    1.4;
}


.ventas-switch {
  position:
    relative;

  width:
    37px;

  height:
    21px;

  flex:
    0 0 37px;
}


.ventas-switch input {
  position:
    absolute;

  opacity:
    0;

  pointer-events:
    none;
}


.ventas-switch > span {
  position:
    absolute;

  inset:
    0;

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

  border-radius:
    999px;

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

  transition:
    background var(--ventas-transition),
    border-color var(--ventas-transition);
}


.ventas-switch > span::after {
  content:
    "";

  position:
    absolute;

  top:
    2px;

  left:
    2px;

  width:
    15px;

  height:
    15px;

  border-radius:
    50%;

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

  transition:
    transform var(--ventas-transition),
    background var(--ventas-transition);
}


.ventas-switch input:checked + span {
  background:
    var(--ventas-accent);

  border-color:
    var(--ventas-accent);
}


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

  background:
    var(--ventas-accent-text);
}


/* =========================================================
   FILE INPUT
   ========================================================= */

.ventas-file-field {
  min-height:
    100px;

  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  padding:
    14px;

  border:
    1px dashed var(--ventas-border-dark);

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

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

  cursor:
    pointer;

  transition:
    border-color var(--ventas-transition),
    background var(--ventas-transition);
}


.ventas-file-field:hover {
  border-color:
    var(--ventas-text-muted);

  background:
    var(--ventas-surface-muted);
}


.ventas-file-field input {
  position:
    absolute;

  width:
    1px;

  height:
    1px;

  opacity:
    0;

  pointer-events:
    none;
}


.ventas-file-field-icon {
  width:
    42px;

  height:
    42px;

  flex:
    0 0 42px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    10px;

  background:
    var(--ventas-surface);

  color:
    var(--ventas-text-strong);
}


.ventas-file-field-copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.ventas-file-field-copy strong {
  color:
    var(--ventas-text-strong);

  font-size:
    12.5px;

  font-weight:
    800;
}


.ventas-file-field-copy small {
  overflow:
    hidden;

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

  font-size:
    10.5px;

  font-weight:
    650;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


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

.ventas-detail {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;
}


.ventas-detail-hero {
  min-width:
    0;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    16px;

  padding:
    14px;

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

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

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


.ventas-detail-hero > div {
  min-width:
    0;
}


.ventas-detail-code {
  display:
    block;

  margin-bottom:
    3px;

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

  font-family:
    "JetBrains Mono",
    monospace;

  font-size:
    10.5px;

  font-weight:
    700;
}


.ventas-detail-hero h3 {
  margin:
    0;

  overflow:
    hidden;

  color:
    var(--ventas-text-strong);

  font-size:
    19px;

  font-weight:
    800;

  line-height:
    1.18;

  letter-spacing:
    -0.025em;

  text-overflow:
    ellipsis;
}


.ventas-detail-meta {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    9px 14px;

  margin-top:
    8px;
}


.ventas-detail-meta span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

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

  font-size:
    10.5px;

  font-weight:
    650;
}


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

.ventas-detail-kpis {
  display:
    grid;

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

  gap:
    8px;
}


.ventas-detail-kpis
.ventas-metric-card {
  min-height:
    84px;

  box-shadow:
    none;
}


/* =========================================================
   DETAIL ACTIONS
   ========================================================= */

.ventas-detail-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    7px;

  padding:
    10px;

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

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

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


/* =========================================================
   DETAIL SECTION
   ========================================================= */

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

  overflow:
    hidden;

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

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

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


.ventas-detail-section-header {
  min-height:
    45px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    9px 12px;

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

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


.ventas-detail-section-header > div {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}


.ventas-detail-section-header span {
  color:
    var(--ventas-text-strong);

  font-size:
    11.5px;

  font-weight:
    800;
}


.ventas-detail-section-header strong {
  min-width:
    22px;

  height:
    22px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 6px;

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

  border-radius:
    999px;

  background:
    var(--ventas-surface);

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

  font-size:
    10px;

  font-weight:
    800;
}


/* =========================================================
   DETAIL COLUMNS
   ========================================================= */

.ventas-detail-columns {
  display:
    grid;

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

  gap:
    10px;

  align-items:
    start;
}


/* =========================================================
   SIMPLE LIST
   ========================================================= */

.ventas-simple-list {
  display:
    flex;

  flex-direction:
    column;
}


.ventas-simple-item {
  min-height:
    52px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    9px 11px;

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


.ventas-simple-item:last-child {
  border-bottom:
    0;
}


.ventas-simple-item > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.ventas-simple-item strong {
  overflow:
    hidden;

  color:
    var(--ventas-text-strong);

  font-size:
    11.5px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ventas-simple-item span {
  overflow:
    hidden;

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

  font-size:
    10px;

  font-weight:
    650;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ventas-simple-item-button {
  width:
    100%;

  border-top:
    0;

  border-right:
    0;

  border-left:
    0;

  background:
    transparent;

  color:
    inherit;

  text-align:
    left;

  cursor:
    pointer;
}


.ventas-simple-item-button:hover {
  background:
    var(--ventas-surface-soft);
}


/* =========================================================
   MINI EMPTY
   ========================================================= */

.ventas-mini-empty {
  min-height:
    66px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    14px;

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

  font-size:
    10.5px;

  font-weight:
    650;

  text-align:
    center;
}


/* =========================================================
   TIMELINE
   ========================================================= */

.ventas-timeline {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  padding:
    4px 0;
}


.ventas-timeline-item {
  position:
    relative;

  min-height:
    49px;

  display:
    grid;

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

  gap:
    7px;

  padding:
    8px 11px;
}


.ventas-timeline-item:not(:last-child)::after {
  content:
    "";

  position:
    absolute;

  top:
    24px;

  bottom:
    -10px;

  left:
    19px;

  width:
    1px;

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


.ventas-timeline-dot {
  position:
    relative;

  z-index:
    1;

  width:
    8px;

  height:
    8px;

  margin:
    5px auto 0;

  border:
    2px solid var(--ventas-surface);

  border-radius:
    50%;

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

  box-shadow:
    0 0 0 1px
    var(--ventas-border-strong);
}


.ventas-timeline-item > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.ventas-timeline-item strong {
  color:
    var(--ventas-text-strong);

  font-size:
    10.8px;

  font-weight:
    750;
}


.ventas-timeline-item small {
  color:
    var(--ventas-text-muted);

  font-size:
    9.5px;

  font-weight:
    600;
}


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

.ventas-info-grid {
  display:
    grid;

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

  gap:
    1px;

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


.ventas-info-grid > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  padding:
    11px 12px;

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


.ventas-info-grid span {
  color:
    var(--ventas-text-muted);

  font-size:
    9.5px;

  font-weight:
    750;

  text-transform:
    uppercase;

  letter-spacing:
    0.045em;
}


.ventas-info-grid strong {
  overflow:
    hidden;

  color:
    var(--ventas-text-strong);

  font-size:
    11.5px;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   ALERT PANEL
   ========================================================= */

.ventas-alert-panel {
  padding:
    11px 12px;

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

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

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

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

  font-size:
    11px;

  font-weight:
    650;
}


.ventas-alert-panel > div,
.ventas-alert-panel:not(:has(ul)) {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;
}


.ventas-alert-panel strong {
  font-weight:
    800;
}


.ventas-alert-panel ul {
  margin:
    8px 0 0;

  padding-left:
    20px;
}


.ventas-alert-panel li {
  margin:
    3px 0;
}


.ventas-alert-panel.is-danger {
  color:
    var(--ventas-danger);

  border-color:
    var(--ventas-danger-border);

  background:
    var(--ventas-danger-soft);
}


.ventas-alert-panel.is-success {
  color:
    var(--ventas-success);

  border-color:
    var(--ventas-success-border);

  background:
    var(--ventas-success-soft);
}


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

.ventas-confirm-copy {
  color:
    var(--ventas-text-soft);

  font-size:
    12px;

  font-weight:
    650;

  line-height:
    1.55;
}


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

.ventas-search-results {
  width:
    100%;

  display:
    flex;

  flex-direction:
    column;

  margin-top:
    5px;

  overflow:
    hidden;

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

  border-radius:
    9px;

  background:
    var(--ventas-surface);

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


.ventas-search-result {
  width:
    100%;

  min-height:
    46px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  padding:
    8px 10px;

  border:
    0;

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

  background:
    transparent;

  color:
    var(--ventas-text);

  text-align:
    left;

  cursor:
    pointer;
}


.ventas-search-result:last-child {
  border-bottom:
    0;
}


.ventas-search-result:hover {
  background:
    var(--ventas-surface-soft);
}


.ventas-search-result > span {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.ventas-search-result strong {
  overflow:
    hidden;

  color:
    var(--ventas-text-strong);

  font-size:
    11.5px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ventas-search-result small {
  overflow:
    hidden;

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

  font-size:
    10px;

  font-weight:
    650;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ventas-search-result-empty {
  padding:
    11px;

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

  font-size:
    10.5px;

  font-weight:
    650;

  text-align:
    center;
}


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

.ventas-toast-region {
  position:
    fixed;

  z-index:
    10100;

  right:
    18px;

  bottom:
    18px;

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

  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  pointer-events:
    none;
}


.ventas-toast {
  width:
    100%;

  display:
    grid;

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

  align-items:
    center;

  gap:
    9px;

  padding:
    10px;

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

  border-radius:
    11px;

  background:
    var(--ventas-surface);

  color:
    var(--ventas-text);

  box-shadow:
    var(--ventas-shadow-modal);

  opacity:
    0;

  transform:
    translateY(8px);

  pointer-events:
    auto;

  transition:
    opacity var(--ventas-transition),
    transform var(--ventas-transition);
}


.ventas-toast.is-visible {
  opacity:
    1;

  transform:
    translateY(0);
}


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

  height:
    30px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    8px;

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


.ventas-toast-copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.ventas-toast-copy strong {
  color:
    var(--ventas-text-strong);

  font-size:
    11.5px;

  font-weight:
    800;
}


.ventas-toast-copy span {
  color:
    var(--ventas-text-soft);

  font-size:
    10.5px;

  font-weight:
    600;

  line-height:
    1.4;
}


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

  height:
    28px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    0;

  border-radius:
    7px;

  background:
    transparent;

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

  cursor:
    pointer;
}


.ventas-toast-close:hover {
  background:
    var(--ventas-surface-muted);

  color:
    var(--ventas-text-strong);
}


.ventas-toast.is-success
.ventas-toast-icon {
  color:
    var(--ventas-success);

  border-color:
    var(--ventas-success-border);

  background:
    var(--ventas-success-soft);
}


.ventas-toast.is-error
.ventas-toast-icon {
  color:
    var(--ventas-danger);

  border-color:
    var(--ventas-danger-border);

  background:
    var(--ventas-danger-soft);
}


.ventas-toast.is-warning
.ventas-toast-icon {
  color:
    var(--ventas-warning);

  border-color:
    var(--ventas-warning-border);

  background:
    var(--ventas-warning-soft);
}


.ventas-toast.is-info
.ventas-toast-icon {
  color:
    var(--ventas-info);

  border-color:
    var(--ventas-info-border);

  background:
    var(--ventas-info-soft);
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

.ventas-table-wrap::-webkit-scrollbar,
.ventas-modal-body::-webkit-scrollbar,
.ventas-drawer-body::-webkit-scrollbar {
  width:
    8px;

  height:
    8px;
}


.ventas-table-wrap::-webkit-scrollbar-track,
.ventas-modal-body::-webkit-scrollbar-track,
.ventas-drawer-body::-webkit-scrollbar-track {
  background:
    transparent;
}


.ventas-table-wrap::-webkit-scrollbar-thumb,
.ventas-modal-body::-webkit-scrollbar-thumb,
.ventas-drawer-body::-webkit-scrollbar-thumb {
  border:
    2px solid transparent;

  border-radius:
    999px;

  background:
    var(--ventas-border-strong);

  background-clip:
    padding-box;
}


/* =========================================================
   RESPONSIVE 1280
   ========================================================= */

@media (
  max-width:
    1280px
) {

  .ventas-shell {
    padding:
      16px;
  }


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


  .ventas-toolbar {
    grid-template-columns:
      minmax(
        220px,
        1fr
      )
      auto;
  }


  .ventas-toolbar-actions {
    grid-column:
      1 / -1;

    justify-content:
      flex-end;
  }

}


/* =========================================================
   RESPONSIVE TABLET
   ========================================================= */

@media (
  max-width:
    900px
) {

  .ventas-shell {
    gap:
      13px;

    padding:
      13px;
  }


  .ventas-header {
    flex-direction:
      column;

    gap:
      12px;
  }


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

    justify-content:
      flex-start;

    flex-wrap:
      wrap;
  }


  .ventas-description {
    max-width:
      100%;
  }


  .ventas-toolbar {
    display:
      flex;

    flex-wrap:
      wrap;

    align-items:
      stretch;
  }


  .ventas-toolbar-search {
    width:
      100%;
  }


  .ventas-toolbar-filters {
    flex:
      1 1 auto;

    flex-wrap:
      wrap;
  }


  .ventas-toolbar-actions {
    flex:
      0 0 auto;

    margin-left:
      auto;
  }


  .ventas-select,
  .ventas-input-date {
    flex:
      1 1 150px;

    width:
      auto;
  }


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


  .ventas-drawer-xl,
  .ventas-drawer-lg {
    width:
      min(
        100%,
        800px
      );
  }

}


/* =========================================================
   RESPONSIVE MOBILE
   ========================================================= */

@media (
  max-width:
    640px
) {

  .ventas-page {
    font-size:
      13px;
  }


  .ventas-shell {
    gap:
      11px;

    padding:
      10px;
  }


  .ventas-title {
    font-size:
      23px;
  }


  .ventas-description {
    margin-top:
      5px;

    font-size:
      12.5px;
  }


  .ventas-header-actions {
    display:
      grid;

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

    gap:
      7px;
  }


  .ventas-header-actions
  .ventas-btn,
  .ventas-primary-action,
  .ventas-primary-action
  .ventas-btn {
    width:
      100%;
  }


  .ventas-global-metrics,
  .ventas-metrics-grid,
  .ventas-detail-kpis {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    gap:
      7px;
  }


  .ventas-global-metric {
    min-height:
      62px;

    gap:
      8px;

    padding:
      9px;
  }


  .ventas-global-metric-icon {
    width:
      31px;

    height:
      31px;

    flex-basis:
      31px;
  }


  .ventas-global-metric-copy span {
    font-size:
      10px;
  }


  .ventas-global-metric-copy strong {
    font-size:
      18px;
  }


  .ventas-metric-card {
    min-height:
      82px;

    padding:
      10px;
  }


  .ventas-metric-card-label {
    font-size:
      10px;
  }


  .ventas-metric-card-value {
    font-size:
      18px;
  }


  .ventas-nav {
    border-radius:
      9px;

    padding:
      3px;
  }


  .ventas-nav-item {
    min-height:
      34px;

    padding:
      6px 9px;

    font-size:
      11.5px;
  }


  .ventas-nav-icon {
    display:
      none;
  }


  .ventas-toolbar {
    padding:
      8px;
  }


  .ventas-toolbar-filters,
  .ventas-toolbar-actions {
    width:
      100%;

    margin:
      0;
  }


  .ventas-toolbar-actions
  .ventas-btn {
    flex:
      1 1 0;
  }


  .ventas-select,
  .ventas-input-date {
    width:
      100%;

    flex:
      1 1 100%;
  }


  .ventas-panel {
    border-radius:
      10px;
  }


  .ventas-table {
    min-width:
      680px;
  }


  .ventas-table-compact {
    min-width:
      620px;
  }


  .ventas-table th {
    padding:
      7px 10px;

    font-size:
      9.5px;
  }


  .ventas-table td {
    height:
      49px;

    padding:
      7px 10px;

    font-size:
      11.5px;
  }


  .ventas-table-link strong,
  .ventas-cell-main strong {
    font-size:
      11.8px;
  }


  .ventas-import-item {
    grid-template-columns:
      31px
      minmax(
        0,
        1fr
      )
      auto;
  }


  .ventas-import-item-count {
    display:
      none;
  }


  .ventas-pagination {
    min-height:
      44px;
  }


  .ventas-modal-backdrop {
    align-items:
      flex-end;

    padding:
      0;
  }


  .ventas-modal {
    width:
      100%;

    max-width:
      none;

    max-height:
      92dvh;

    border-right:
      0;

    border-bottom:
      0;

    border-left:
      0;

    border-radius:
      15px
      15px
      0
      0;

    transform:
      translateY(22px);
  }


  .ventas-modal-backdrop.is-open
  .ventas-modal {
    transform:
      translateY(0);
  }


  .ventas-modal-header {
    padding:
      14px;
  }


  .ventas-modal-body {
    padding:
      14px;
  }


  .ventas-modal-footer {
    padding:
      10px 14px;

    padding-bottom:
      max(
        10px,
        env(
          safe-area-inset-bottom
        )
      );
  }


  .ventas-drawer {
    width:
      100%;

    max-width:
      none;

    border-left:
      0;

    transform:
      translateX(100%);
  }


  .ventas-drawer-header {
    padding:
      13px 14px;
  }


  .ventas-drawer-body {
    padding:
      11px;

    padding-bottom:
      max(
        16px,
        env(
          safe-area-inset-bottom
        )
      );
  }


  .ventas-form-grid {
    grid-template-columns:
      1fr;

    gap:
      10px;
  }


  .ventas-form-actions {
    display:
      grid;

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


  .ventas-form-actions
  .ventas-btn {
    width:
      100%;
  }


  .ventas-detail-hero {
    flex-direction:
      column;

    gap:
      10px;
  }


  .ventas-detail-hero h3 {
    font-size:
      17px;
  }


  .ventas-detail-actions {
    display:
      grid;

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


  .ventas-detail-actions
  .ventas-btn {
    width:
      100%;

    min-width:
      0;

    white-space:
      normal;

    text-align:
      center;
  }


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


  .ventas-file-field {
    min-height:
      88px;

    padding:
      12px;
  }


  .ventas-toast-region {
    right:
      10px;

    bottom:
      10px;

    left:
      10px;

    width:
      auto;
  }

}


/* =========================================================
   RESPONSIVE VERY SMALL
   ========================================================= */

@media (
  max-width:
    420px
) {

  .ventas-global-metrics,
  .ventas-metrics-grid,
  .ventas-detail-kpis {
    grid-template-columns:
      1fr;
  }


  .ventas-header-actions,
  .ventas-form-actions,
  .ventas-detail-actions {
    grid-template-columns:
      1fr;
  }


  .ventas-nav-item {
    padding-right:
      8px;

    padding-left:
      8px;
  }


  .ventas-import-item {
    grid-template-columns:
      30px
      minmax(
        0,
        1fr
      );
  }


  .ventas-import-item
  .ventas-status {
    display:
      none;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion:
    reduce
) {

  .ventas-page *,
  .ventas-modal-backdrop *,
  .ventas-drawer-backdrop *,
  .ventas-toast-region * {
    scroll-behavior:
      auto !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }

}


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

html[data-theme="dark"]
.ventas-page input[type="date"],
html[data-theme="dark"]
.ventas-page select,
html[data-theme="dark"]
.ventas-modal input[type="date"],
html[data-theme="dark"]
.ventas-modal select,
html[data-theme="dark"]
.ventas-drawer input[type="date"],
html[data-theme="dark"]
.ventas-drawer select,
body.dark
.ventas-page input[type="date"],
body.dark
.ventas-page select,
body.dark-mode
.ventas-page input[type="date"],
body.dark-mode
.ventas-page select {
  color-scheme:
    dark;
}


html[data-theme="dark"]
.ventas-btn-primary,
body.dark
.ventas-btn-primary,
body.dark-mode
.ventas-btn-primary {
  color:
    #090b09;
}


html[data-theme="dark"]
.ventas-btn-secondary,
body.dark
.ventas-btn-secondary,
body.dark-mode
.ventas-btn-secondary {
  color:
    #f5f7f2;
}


/* =========================================================
   LIGHT MODE READABILITY
   ========================================================= */

html:not([data-theme="dark"])
.ventas-table td,
body:not(.dark):not(.dark-mode)
.ventas-table td {
  color:
    #20241e;
}


html:not([data-theme="dark"])
.ventas-table-link strong,
html:not([data-theme="dark"])
.ventas-cell-main strong,
html:not([data-theme="dark"])
.ventas-detail-section-header span,
body:not(.dark):not(.dark-mode)
.ventas-table-link strong,
body:not(.dark):not(.dark-mode)
.ventas-cell-main strong {
  color:
    #0b0d09;
}


/* =========================================================
   BUTTON TEXT VISIBILITY
   ========================================================= */

.ventas-btn,
.ventas-btn span {
  text-decoration:
    none;
}


.ventas-btn-primary,
.ventas-btn-primary span {
  color:
    var(--ventas-accent-text);
}


.ventas-btn-secondary,
.ventas-btn-secondary span {
  color:
    var(--ventas-text-strong);
}


.ventas-btn-danger-soft,
.ventas-btn-danger-soft span {
  color:
    var(--ventas-danger);
}


/* =========================================================
   PREVENT PAGE HORIZONTAL SCROLL
   ========================================================= */

.ventas-page,
.ventas-shell,
.ventas-content,
.ventas-section,
.ventas-section-layout,
.ventas-panel,
.ventas-detail,
.ventas-detail-section,
.ventas-toolbar {
  max-width:
    100%;
}


/* =========================================================
   FIN
   frontend/src/pages/ventas/ventas.css
   ========================================================= *//* =========================================================
   VENTAS
   AJUSTE FINAL FULL WIDTH + DARK TRUE BLACK
   AGREGAR AL FINAL DE:
   frontend/src/pages/ventas/ventas.css
   ========================================================= */


/* =========================================================
   FULL WIDTH REAL
   ========================================================= */

#ventasPageMount,
.ventas-page,
.ventas-shell,
.ventas-content,
.ventas-section,
.ventas-section-layout {
  width:
    100%;

  max-width:
    none;

  min-width:
    0;
}


.ventas-shell {
  padding:
    18px 0 24px;

  margin:
    0;
}


.app-content:has(.ventas-page) {
  width:
    100%;

  max-width:
    none;

  margin:
    0;

  padding-left:
    24px;

  padding-right:
    24px;
}


/* =========================================================
   HEADER FULL WIDTH
   ========================================================= */

.ventas-header {
  width:
    100%;
}


.ventas-header-copy {
  flex:
    1 1 auto;
}


.ventas-header-actions {
  margin-left:
    auto;
}


/* =========================================================
   FULL WIDTH GRIDS
   ========================================================= */

.ventas-global-metrics,
.ventas-metrics-grid,
.ventas-detail-kpis {
  width:
    100%;

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


/* =========================================================
   FULL WIDTH PANELS
   ========================================================= */

.ventas-panel,
.ventas-import-panel,
.ventas-detail-section,
.ventas-detail-actions,
.ventas-detail-hero {
  width:
    100%;

  max-width:
    none;
}


/* =========================================================
   TOOLBAR FULL WIDTH
   ========================================================= */

.ventas-toolbar {
  width:
    100%;

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


.ventas-toolbar-search {
  width:
    100%;
}


/* =========================================================
   NAV FULL WIDTH
   ========================================================= */

.ventas-nav {
  width:
    100%;
}


.ventas-nav-item {
  flex:
    0 0 auto;
}


/* =========================================================
   TABLE FULL WIDTH
   ========================================================= */

.ventas-table-wrap {
  width:
    100%;

  max-width:
    none;
}


.ventas-table {
  width:
    100%;

  min-width:
    100%;
}


/* =========================================================
   TRUE BLACK DARK MODE
   SIN VERDE
   SIN AZUL
   ========================================================= */

html[data-theme="dark"],
body[data-theme="dark"],
body.dark,
body.dark-mode,
[data-theme="dark"] {
  --ventas-bg:
    #000000;

  --ventas-surface:
    #050505;

  --ventas-surface-soft:
    #090909;

  --ventas-surface-muted:
    #0d0d0d;

  --ventas-surface-strong:
    #121212;

  --ventas-text:
    #f4f4f4;

  --ventas-text-strong:
    #ffffff;

  --ventas-text-soft:
    #d0d0d0;

  --ventas-text-muted:
    #a0a0a0;

  --ventas-border:
    #1c1c1c;

  --ventas-border-strong:
    #2b2b2b;

  --ventas-border-dark:
    #3a3a3a;

  --ventas-accent:
    #ffffff;

  --ventas-accent-hover:
    #e8e8e8;

  --ventas-accent-text:
    #000000;

  --ventas-neutral-soft:
    #101010;

  --ventas-success:
    #d8d8d8;

  --ventas-success-soft:
    #0d0d0d;

  --ventas-success-border:
    #2a2a2a;

  --ventas-warning:
    #cfcfcf;

  --ventas-warning-soft:
    #0d0d0d;

  --ventas-warning-border:
    #2a2a2a;

  --ventas-danger:
    #ff7f7f;

  --ventas-danger-soft:
    #160909;

  --ventas-danger-border:
    #4a1f1f;

  --ventas-info:
    #d0d0d0;

  --ventas-info-soft:
    #0d0d0d;

  --ventas-info-border:
    #2a2a2a;

  --ventas-shadow:
    0 1px 2px rgba(0, 0, 0, 0.72),
    0 10px 28px rgba(0, 0, 0, 0.58);

  --ventas-shadow-modal:
    0 30px 90px rgba(0, 0, 0, 0.82);
}


/* =========================================================
   TRUE BLACK GLOBAL BACKGROUND
   ========================================================= */

html[data-theme="dark"] body,
html[data-theme="dark"] #app,
html[data-theme="dark"] .app-shell,
html[data-theme="dark"] .app-main,
html[data-theme="dark"] .app-content {
  background:
    #000000 !important;
}


/* =========================================================
   TRUE BLACK VENTAS BACKGROUND
   ========================================================= */

html[data-theme="dark"] .ventas-page,
html[data-theme="dark"] .ventas-shell,
html[data-theme="dark"] .ventas-content,
html[data-theme="dark"] .ventas-section,
html[data-theme="dark"] .ventas-section-layout {
  background:
    #000000;
}


/* =========================================================
   SUPERFICIES NEUTRAS
   ========================================================= */

html[data-theme="dark"] .ventas-global-metric,
html[data-theme="dark"] .ventas-metric-card,
html[data-theme="dark"] .ventas-nav,
html[data-theme="dark"] .ventas-panel,
html[data-theme="dark"] .ventas-import-panel,
html[data-theme="dark"] .ventas-detail-hero,
html[data-theme="dark"] .ventas-detail-actions,
html[data-theme="dark"] .ventas-detail-section,
html[data-theme="dark"] .ventas-modal,
html[data-theme="dark"] .ventas-drawer,
html[data-theme="dark"] .ventas-search-results,
html[data-theme="dark"] .ventas-toast {
  background:
    #050505;

  border-color:
    #1d1d1d;
}


/* =========================================================
   SUPERFICIES SECUNDARIAS
   ========================================================= */

html[data-theme="dark"] .ventas-global-metric-icon,
html[data-theme="dark"] .ventas-metric-card-icon,
html[data-theme="dark"] .ventas-nav-item.is-active,
html[data-theme="dark"] .ventas-toolbar-search,
html[data-theme="dark"] .ventas-table thead,
html[data-theme="dark"] .ventas-detail-section-header,
html[data-theme="dark"] .ventas-file-field,
html[data-theme="dark"] .ventas-switch-field,
html[data-theme="dark"] .ventas-toast-icon,
html[data-theme="dark"] .ventas-modal-footer {
  background:
    #0a0a0a;

  border-color:
    #242424;
}


/* =========================================================
   HOVERS NEUTROS
   ========================================================= */

html[data-theme="dark"] .ventas-nav-item:hover,
html[data-theme="dark"] .ventas-table tbody tr:hover,
html[data-theme="dark"] .ventas-import-item:hover,
html[data-theme="dark"] .ventas-simple-item-button:hover,
html[data-theme="dark"] .ventas-search-result:hover,
html[data-theme="dark"] .ventas-btn-text:hover:not(:disabled),
html[data-theme="dark"] .ventas-icon-btn:hover:not(:disabled) {
  background:
    #101010;
}


/* =========================================================
   INPUTS TRUE BLACK
   ========================================================= */

html[data-theme="dark"] .ventas-input,
html[data-theme="dark"] .ventas-select,
html[data-theme="dark"] .ventas-field input,
html[data-theme="dark"] .ventas-field select,
html[data-theme="dark"] .ventas-field textarea {
  background:
    #050505;

  border-color:
    #2a2a2a;

  color:
    #ffffff;
}


html[data-theme="dark"] .ventas-input:focus,
html[data-theme="dark"] .ventas-select:focus,
html[data-theme="dark"] .ventas-field input:focus,
html[data-theme="dark"] .ventas-field select:focus,
html[data-theme="dark"] .ventas-field textarea:focus,
html[data-theme="dark"] .ventas-toolbar-search:focus-within {
  background:
    #080808;

  border-color:
    #4a4a4a;
}


/* =========================================================
   BUTTONS
   ========================================================= */

html[data-theme="dark"] .ventas-btn-primary {
  background:
    #ffffff;

  border-color:
    #ffffff;

  color:
    #000000;
}


html[data-theme="dark"] .ventas-btn-primary:hover:not(:disabled) {
  background:
    #e5e5e5;

  border-color:
    #e5e5e5;

  color:
    #000000;
}


html[data-theme="dark"] .ventas-btn-secondary {
  background:
    #050505;

  border-color:
    #2a2a2a;

  color:
    #ffffff;
}


html[data-theme="dark"] .ventas-btn-secondary:hover:not(:disabled) {
  background:
    #101010;

  border-color:
    #3a3a3a;
}


/* =========================================================
   STATUS SIN VERDE / AZUL
   ========================================================= */

html[data-theme="dark"] .ventas-status.is-success,
html[data-theme="dark"] .ventas-status.is-warning,
html[data-theme="dark"] .ventas-status.is-neutral,
html[data-theme="dark"] .ventas-document-flag.is-ready {
  color:
    #d2d2d2;

  background:
    #0d0d0d;

  border-color:
    #2a2a2a;
}


/* =========================================================
   TOAST SUCCESS NEUTRO
   ========================================================= */

html[data-theme="dark"] .ventas-toast.is-success
.ventas-toast-icon {
  color:
    #d5d5d5;

  background:
    #0d0d0d;

  border-color:
    #2a2a2a;
}


html[data-theme="dark"] .ventas-toast.is-info
.ventas-toast-icon {
  color:
    #d5d5d5;

  background:
    #0d0d0d;

  border-color:
    #2a2a2a;
}


/* =========================================================
   SCROLLBAR DARK
   ========================================================= */

html[data-theme="dark"]
.ventas-table-wrap::-webkit-scrollbar-thumb,
html[data-theme="dark"]
.ventas-modal-body::-webkit-scrollbar-thumb,
html[data-theme="dark"]
.ventas-drawer-body::-webkit-scrollbar-thumb {
  background:
    #333333;

  background-clip:
    padding-box;
}


/* =========================================================
   RESPONSIVE LARGE
   ========================================================= */

@media (
  min-width:
    1600px
) {

  .app-content:has(.ventas-page) {
    padding-left:
      32px;

    padding-right:
      32px;
  }


  .ventas-shell {
    padding-top:
      22px;
  }

}


/* =========================================================
   RESPONSIVE 1280
   ========================================================= */

@media (
  max-width:
    1280px
) {

  .app-content:has(.ventas-page) {
    padding-left:
      18px;

    padding-right:
      18px;
  }


  .ventas-shell {
    padding:
      16px 0 22px;
  }


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


  .ventas-toolbar {
    grid-template-columns:
      minmax(
        220px,
        1fr
      )
      auto;
  }


  .ventas-toolbar-actions {
    grid-column:
      1 / -1;

    justify-content:
      flex-end;
  }

}


/* =========================================================
   RESPONSIVE TABLET
   ========================================================= */

@media (
  max-width:
    900px
) {

  .app-content:has(.ventas-page) {
    padding-left:
      12px;

    padding-right:
      12px;
  }


  .ventas-shell {
    padding:
      12px 0 18px;
  }


  .ventas-toolbar {
    display:
      flex;

    flex-wrap:
      wrap;
  }


  .ventas-toolbar-search {
    flex:
      1 1 100%;
  }


  .ventas-toolbar-filters {
    flex:
      1 1 100%;
  }


  .ventas-toolbar-actions {
    flex:
      1 1 100%;

    justify-content:
      flex-end;
  }

}


/* =========================================================
   RESPONSIVE MOBILE
   ========================================================= */

@media (
  max-width:
    640px
) {

  .app-content:has(.ventas-page) {
    padding-left:
      8px;

    padding-right:
      8px;
  }


  .ventas-shell {
    padding:
      9px 0 14px;
  }


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


  .ventas-toolbar-filters,
  .ventas-toolbar-actions {
    width:
      100%;
  }


  .ventas-toolbar-actions {
    display:
      grid;

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


  .ventas-toolbar-actions .ventas-btn {
    width:
      100%;
  }


  .ventas-table {
    min-width:
      640px;
  }

}


/* =========================================================
   RESPONSIVE MUY CHICO
   ========================================================= */

@media (
  max-width:
    420px
) {

  .ventas-global-metrics,
  .ventas-metrics-grid,
  .ventas-detail-kpis {
    grid-template-columns:
      1fr;
  }


  .ventas-toolbar-actions {
    grid-template-columns:
      1fr;
  }

}
/* =========================================================
   RENDICIONES · PLANTILLA / IMPORTACIÓN
   ========================================================= */

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

  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;

  padding:
    16px;

  border:
    1px solid
    var(
      --ventas-border,
      rgba(
        0,
        0,
        0,
        0.12
      )
    );

  border-radius:
    14px;

  background:
    var(
      --ventas-surface,
      #ffffff
    );
}


.ventas-form-section-header {
  width:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  flex-wrap:
    wrap;
}


.ventas-form-section-header > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.ventas-form-section-header > div > span {
  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

  color:
    var(
      --ventas-text-muted,
      #555b65
    );
}


.ventas-form-section-header > div > strong {
  font-size:
    14px;

  line-height:
    1.35;

  font-weight:
    800;

  color:
    var(
      --ventas-text,
      #111318
    );
}


.ventas-form-section-header > div > small {
  margin-top:
    1px;

  font-size:
    12px;

  line-height:
    1.45;

  font-weight:
    600;

  color:
    var(
      --ventas-text-muted,
      #5d626b
    );
}


.ventas-form-section-header .ventas-btn {
  flex:
    0 0 auto;

  min-height:
    38px;

  padding:
    0 13px;

  white-space:
    nowrap;
}


/* =========================================================
   FILE FIELD
   ========================================================= */

.ventas-file-field {
  width:
    100%;

  min-height:
    86px;

  position:
    relative;

  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  padding:
    16px;

  border:
    1px dashed
    var(
      --ventas-border-strong,
      rgba(
        0,
        0,
        0,
        0.22
      )
    );

  border-radius:
    12px;

  background:
    var(
      --ventas-surface-soft,
      #f7f7f6
    );

  cursor:
    pointer;

  overflow:
    hidden;

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


.ventas-file-field:hover {
  border-color:
    var(
      --ventas-text,
      #111318
    );

  background:
    var(
      --ventas-surface-hover,
      #f1f1ef
    );
}


.ventas-file-field:active {
  transform:
    scale(
      0.995
    );
}


.ventas-file-field input[type="file"] {
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  opacity:
    0;

  cursor:
    pointer;
}


.ventas-file-field-icon {
  width:
    42px;

  height:
    42px;

  flex:
    0 0 42px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(
      --ventas-border,
      rgba(
        0,
        0,
        0,
        0.12
      )
    );

  border-radius:
    10px;

  background:
    var(
      --ventas-surface,
      #ffffff
    );

  color:
    var(
      --ventas-text,
      #111318
    );
}


.ventas-file-field-copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


.ventas-file-field-copy strong {
  font-size:
    13px;

  line-height:
    1.35;

  font-weight:
    800;

  color:
    var(
      --ventas-text,
      #111318
    );
}


.ventas-file-field-copy small {
  max-width:
    100%;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    12px;

  line-height:
    1.4;

  font-weight:
    600;

  color:
    var(
      --ventas-text-muted,
      #5d626b
    );
}


/* =========================================================
   ARCHIVO SELECCIONADO
   ========================================================= */

[data-selected-file][hidden] {
  display:
    none !important;
}


.ventas-file-selected {
  width:
    100%;

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  padding:
    11px 13px;

  border:
    1px solid
    var(
      --ventas-border,
      rgba(
        0,
        0,
        0,
        0.12
      )
    );

  border-radius:
    10px;

  background:
    var(
      --ventas-surface-soft,
      #f7f7f6
    );
}


.ventas-file-selected-icon {
  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    8px;

  background:
    var(
      --ventas-surface,
      #ffffff
    );

  color:
    var(
      --ventas-text,
      #111318
    );
}


.ventas-file-selected > span:last-child {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.ventas-file-selected strong {
  max-width:
    100%;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    12.5px;

  font-weight:
    800;

  color:
    var(
      --ventas-text,
      #111318
    );
}


.ventas-file-selected small {
  font-size:
    11.5px;

  font-weight:
    600;

  color:
    var(
      --ventas-text-muted,
      #5d626b
    );
}


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

html[data-theme="dark"] .ventas-form-section,
body[data-theme="dark"] .ventas-form-section,
.dark .ventas-form-section {
  border-color:
    #272727;

  background:
    #0b0b0b;
}


html[data-theme="dark"] .ventas-form-section-header > div > strong,
body[data-theme="dark"] .ventas-form-section-header > div > strong,
.dark .ventas-form-section-header > div > strong {
  color:
    #f5f5f5;
}


html[data-theme="dark"] .ventas-form-section-header > div > span,
html[data-theme="dark"] .ventas-form-section-header > div > small,
body[data-theme="dark"] .ventas-form-section-header > div > span,
body[data-theme="dark"] .ventas-form-section-header > div > small,
.dark .ventas-form-section-header > div > span,
.dark .ventas-form-section-header > div > small {
  color:
    #b8b8b8;
}


html[data-theme="dark"] .ventas-file-field,
body[data-theme="dark"] .ventas-file-field,
.dark .ventas-file-field {
  border-color:
    #3b3b3b;

  background:
    #111111;
}


html[data-theme="dark"] .ventas-file-field:hover,
body[data-theme="dark"] .ventas-file-field:hover,
.dark .ventas-file-field:hover {
  border-color:
    #707070;

  background:
    #151515;
}


html[data-theme="dark"] .ventas-file-field-icon,
html[data-theme="dark"] .ventas-file-selected-icon,
body[data-theme="dark"] .ventas-file-field-icon,
body[data-theme="dark"] .ventas-file-selected-icon,
.dark .ventas-file-field-icon,
.dark .ventas-file-selected-icon {
  border-color:
    #2d2d2d;

  background:
    #050505;

  color:
    #f5f5f5;
}


html[data-theme="dark"] .ventas-file-field-copy strong,
html[data-theme="dark"] .ventas-file-selected strong,
body[data-theme="dark"] .ventas-file-field-copy strong,
body[data-theme="dark"] .ventas-file-selected strong,
.dark .ventas-file-field-copy strong,
.dark .ventas-file-selected strong {
  color:
    #f5f5f5;
}


html[data-theme="dark"] .ventas-file-field-copy small,
html[data-theme="dark"] .ventas-file-selected small,
body[data-theme="dark"] .ventas-file-field-copy small,
body[data-theme="dark"] .ventas-file-selected small,
.dark .ventas-file-field-copy small,
.dark .ventas-file-selected small {
  color:
    #b8b8b8;
}


html[data-theme="dark"] .ventas-file-selected,
body[data-theme="dark"] .ventas-file-selected,
.dark .ventas-file-selected {
  border-color:
    #2d2d2d;

  background:
    #111111;
}


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

@media (
  max-width:
    720px
) {

  .ventas-form-section {
    padding:
      13px;

    border-radius:
      12px;
  }


  .ventas-form-section-header {
    align-items:
      stretch;

    gap:
      12px;
  }


  .ventas-form-section-header .ventas-btn {
    width:
      100%;

    justify-content:
      center;
  }


  .ventas-file-field {
    min-height:
      78px;

    padding:
      13px;

    gap:
      11px;
  }


  .ventas-file-field-icon {
    width:
      38px;

    height:
      38px;

    flex-basis:
      38px;
  }

}


@media (
  max-width:
    480px
) {

  .ventas-file-field-copy strong {
    font-size:
      12.5px;
  }


  .ventas-file-field-copy small {
    font-size:
      11.5px;
  }


  .ventas-form-section-header > div > strong {
    font-size:
      13.5px;
  }

}