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

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

   RESPONSABILIDAD:
   - Página independiente de Presupuestos.
   - Métricas.
   - Listado.
   - Nuevo presupuesto.
   - Selector de cliente.
   - Libros.
   - Descuentos.
   - Totales.
   - Historial.
   - Detalle.
   - Drawer.
   - Modal.
   - Responsive.
   - Light / Dark.
   - Sin scroll horizontal global.
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

#ventasPresupuestosPage,
#ventasPresupuestosPage *,
#ventasPresupuestosPage *::before,
#ventasPresupuestosPage *::after {
  box-sizing:
    border-box;
}


#ventasPresupuestosPage {
  --pr-bg:
    #f7f8fa;

  --pr-surface:
    #ffffff;

  --pr-surface-2:
    #f9fafb;

  --pr-surface-3:
    #f3f4f6;

  --pr-border:
    #dde1e7;

  --pr-border-strong:
    #c9ced6;

  --pr-text:
    #111111;

  --pr-text-strong:
    #000000;

  --pr-muted:
    #5f6570;

  --pr-muted-2:
    #808793;

  --pr-primary:
    #111827;

  --pr-primary-hover:
    #000000;

  --pr-primary-text:
    #ffffff;

  --pr-danger:
    #b42318;

  --pr-danger-bg:
    #fff2f0;

  --pr-success:
    #067647;

  --pr-success-bg:
    #ecfdf3;

  --pr-warning:
    #b54708;

  --pr-warning-bg:
    #fffaeb;

  --pr-info:
    #175cd3;

  --pr-info-bg:
    #eff8ff;

  --pr-radius-xs:
    6px;

  --pr-radius-sm:
    9px;

  --pr-radius-md:
    12px;

  --pr-radius-lg:
    16px;

  --pr-radius-xl:
    20px;

  --pr-shadow-sm:
    0 1px 2px rgba(0, 0, 0, .04);

  --pr-shadow-md:
    0 10px 30px rgba(0, 0, 0, .08);

  width:
    100%;

  min-width:
    0;

  max-width:
    none;

  padding:
    0;

  margin:
    0;

  color:
    var(--pr-text);

  background:
    transparent;

  overflow-x:
    clip;

  font-family:
    inherit;
}


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

html[data-theme="dark"] #ventasPresupuestosPage,
body[data-theme="dark"] #ventasPresupuestosPage {
  --pr-bg:
    #000000;

  --pr-surface:
    #080808;

  --pr-surface-2:
    #0c0c0c;

  --pr-surface-3:
    #111111;

  --pr-border:
    #252525;

  --pr-border-strong:
    #383838;

  --pr-text:
    #f4f4f4;

  --pr-text-strong:
    #ffffff;

  --pr-muted:
    #b5b5b5;

  --pr-muted-2:
    #898989;

  --pr-primary:
    #ffffff;

  --pr-primary-hover:
    #e8e8e8;

  --pr-primary-text:
    #000000;

  --pr-danger:
    #ff7b72;

  --pr-danger-bg:
    #170707;

  --pr-success:
    #6ce9a6;

  --pr-success-bg:
    #06140e;

  --pr-warning:
    #fec84b;

  --pr-warning-bg:
    #181105;

  --pr-info:
    #84adff;

  --pr-info-bg:
    #07101f;

  --pr-shadow-sm:
    none;

  --pr-shadow-md:
    0 18px 50px rgba(0, 0, 0, .65);
}


/* =========================================================
   PAGE MOUNT
   ========================================================= */

.ventas-presupuestos-page-mount,
.ventas-page-mount {
  width:
    100%;

  min-width:
    0;

  max-width:
    none;
}


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

#ventasPresupuestosPage .ventas-header {
  width:
    100%;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    24px;

  margin-bottom:
    22px;
}


#ventasPresupuestosPage .ventas-header-copy {
  min-width:
    0;

  flex:
    1 1 auto;
}


#ventasPresupuestosPage .ventas-eyebrow {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    24px;

  margin-bottom:
    7px;

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;

  color:
    var(--pr-muted);
}


#ventasPresupuestosPage .ventas-title {
  margin:
    0;

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

  font-size:
    clamp(
      25px,
      2vw,
      32px
    );

  font-weight:
    800;

  line-height:
    1.12;

  letter-spacing:
    -.035em;
}


#ventasPresupuestosPage .ventas-description {
  max-width:
    720px;

  margin:
    8px 0 0;

  color:
    var(--pr-muted);

  font-size:
    14px;

  font-weight:
    600;

  line-height:
    1.55;
}


#ventasPresupuestosPage .ventas-header-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    10px;

  flex:
    0 0 auto;
}


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

#ventasPresupuestosPage .ventas-content {
  width:
    100%;

  min-width:
    0;

  max-width:
    none;

  padding:
    0;
}


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

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    18px;
}


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

#ventasPresupuestosPage .ventas-btn {
  min-height:
    40px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  padding:
    9px 14px;

  border:
    1px solid transparent;

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

  font-family:
    inherit;

  font-size:
    13px;

  font-weight:
    800;

  line-height:
    1;

  white-space:
    nowrap;

  cursor:
    pointer;

  transition:
    background-color .16s ease,
    border-color .16s ease,
    color .16s ease,
    transform .16s ease;
}


#ventasPresupuestosPage .ventas-btn:hover {
  transform:
    translateY(-1px);
}


#ventasPresupuestosPage .ventas-btn:active {
  transform:
    translateY(0);
}


#ventasPresupuestosPage .ventas-btn:disabled {
  opacity:
    .45;

  cursor:
    not-allowed;

  transform:
    none;
}


#ventasPresupuestosPage .ventas-btn-primary {
  color:
    var(--pr-primary-text);

  background:
    var(--pr-primary);

  border-color:
    var(--pr-primary);
}


#ventasPresupuestosPage .ventas-btn-primary:hover:not(:disabled) {
  background:
    var(--pr-primary-hover);

  border-color:
    var(--pr-primary-hover);
}


#ventasPresupuestosPage .ventas-btn-secondary {
  color:
    var(--pr-text-strong);

  background:
    var(--pr-surface);

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


#ventasPresupuestosPage .ventas-btn-secondary:hover:not(:disabled) {
  background:
    var(--pr-surface-3);

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


#ventasPresupuestosPage .ventas-btn-danger {
  color:
    var(--pr-danger);

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

  border-color:
    color-mix(
      in srgb,
      var(--pr-danger) 25%,
      transparent
    );
}


#ventasPresupuestosPage .ventas-btn-sm {
  min-height:
    34px;

  padding:
    7px 10px;

  font-size:
    12px;
}


/* =========================================================
   ICON BUTTON
   ========================================================= */

#ventasPresupuestosPage .ventas-icon-btn {
  width:
    34px;

  height:
    34px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

  padding:
    0;

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

  border-radius:
    8px;

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

  background:
    var(--pr-surface);

  cursor:
    pointer;

  transition:
    background-color .15s ease,
    border-color .15s ease;
}


#ventasPresupuestosPage .ventas-icon-btn:hover {
  background:
    var(--pr-surface-3);

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


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

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

  display:
    grid;

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

  gap:
    12px;
}


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

  min-height:
    104px;

  padding:
    16px;

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

  border-radius:
    var(--pr-radius-md);

  background:
    var(--pr-surface);

  box-shadow:
    var(--pr-shadow-sm);
}


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

#ventasPresupuestosPage .ventas-panel {
  width:
    100%;

  min-width:
    0;

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

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

  background:
    var(--pr-surface);

  box-shadow:
    var(--pr-shadow-sm);

  overflow:
    hidden;
}


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

#ventasPresupuestosPage .ventas-section-toolbar {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    14px;

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

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


#ventasPresupuestosPage .ventas-section-toolbar-search {
  flex:
    1 1 420px;

  min-width:
    180px;
}


#ventasPresupuestosPage .ventas-section-toolbar-filters {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  flex:
    0 1 auto;
}


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

#ventasPresupuestosPage .ventas-field {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;
}


#ventasPresupuestosPage .ventas-field > label {
  color:
    var(--pr-text);

  font-size:
    12px;

  font-weight:
    800;

  line-height:
    1.2;
}


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

  min-width:
    0;

  min-height:
    40px;

  padding:
    9px 11px;

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

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

  outline:
    0;

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

  background:
    var(--pr-surface);

  font-family:
    inherit;

  font-size:
    13px;

  font-weight:
    650;

  transition:
    border-color .15s ease,
    background-color .15s ease;
}


#ventasPresupuestosPage .ventas-textarea {
  min-height:
    88px;

  resize:
    vertical;

  line-height:
    1.5;
}


#ventasPresupuestosPage .ventas-input:focus,
#ventasPresupuestosPage .ventas-select:focus,
#ventasPresupuestosPage .ventas-textarea:focus {
  border-color:
    var(--pr-border-strong);

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


#ventasPresupuestosPage .ventas-input:disabled,
#ventasPresupuestosPage .ventas-select:disabled,
#ventasPresupuestosPage .ventas-textarea:disabled {
  color:
    var(--pr-muted-2);

  background:
    var(--pr-surface-3);

  cursor:
    not-allowed;
}


#ventasPresupuestosPage .ventas-input::placeholder,
#ventasPresupuestosPage .ventas-textarea::placeholder {
  color:
    var(--pr-muted-2);

  opacity:
    1;
}


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

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

  display:
    grid;

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

  gap:
    16px;
}


#ventasPresupuestosPage .ventas-field-full {
  grid-column:
    1 / -1;
}


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

#ventasPresupuestosPage .ventas-search-box {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    0 11px;

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

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

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


#ventasPresupuestosPage .ventas-search-box > svg,
#ventasPresupuestosPage .ventas-search-box > i {
  flex:
    0 0 auto;

  color:
    var(--pr-muted);
}


#ventasPresupuestosPage .ventas-search-box .ventas-input {
  min-height:
    40px;

  padding-left:
    0;

  padding-right:
    0;

  border:
    0;

  border-radius:
    0;

  background:
    transparent;
}


#ventasPresupuestosPage .ventas-search-box .ventas-input:focus {
  border:
    0;

  background:
    transparent;
}


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

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

  max-height:
    320px;

  margin-top:
    7px;

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

  border-radius:
    var(--pr-radius-md);

  background:
    var(--pr-surface);

  overflow-y:
    auto;

  overflow-x:
    hidden;
}


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

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    11px 12px;

  border:
    0;

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

  color:
    var(--pr-text);

  background:
    transparent;

  text-align:
    left;

  font-family:
    inherit;

  cursor:
    pointer;
}


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


#ventasPresupuestosPage .ventas-search-result:hover {
  background:
    var(--pr-surface-3);
}


#ventasPresupuestosPage .ventas-search-result-main {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


#ventasPresupuestosPage .ventas-search-result-main strong {
  color:
    var(--pr-text-strong);

  font-size:
    13px;

  font-weight:
    800;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


#ventasPresupuestosPage .ventas-search-result-main small {
  color:
    var(--pr-muted);

  font-size:
    11px;

  font-weight:
    600;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


#ventasPresupuestosPage .ventas-search-empty,
#ventasPresupuestosPage .ventas-search-loading {
  padding:
    16px;

  color:
    var(--pr-muted);

  font-size:
    13px;

  font-weight:
    650;
}


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

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

  min-width:
    0;

  max-width:
    100%;

  overflow-x:
    auto;

  overscroll-behavior-inline:
    contain;
}


#ventasPresupuestosPage .ventas-table {
  width:
    100%;

  border-collapse:
    collapse;

  table-layout:
    auto;

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


#ventasPresupuestosPage .ventas-table th {
  padding:
    11px 13px;

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

  color:
    var(--pr-muted);

  background:
    var(--pr-surface-2);

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    .055em;

  text-align:
    left;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


#ventasPresupuestosPage .ventas-table td {
  padding:
    12px 13px;

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

  color:
    var(--pr-text);

  font-size:
    12.5px;

  font-weight:
    600;

  line-height:
    1.4;

  vertical-align:
    middle;
}


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


#ventasPresupuestosPage .ventas-table tbody tr:hover {
  background:
    var(--pr-surface-2);
}


#ventasPresupuestosPage .ventas-table td strong {
  color:
    var(--pr-text-strong);

  font-weight:
    800;
}


#ventasPresupuestosPage .ventas-table td small {
  display:
    block;

  margin-top:
    3px;

  color:
    var(--pr-muted);

  font-size:
    10.5px;

  font-weight:
    600;
}


#ventasPresupuestosPage .ventas-table .is-number {
  text-align:
    right;

  font-variant-numeric:
    tabular-nums;
}


#ventasPresupuestosPage .ventas-table-actions {
  width:
    46px;

  text-align:
    right;
}


#ventasPresupuestosPage .ventas-table-link {
  padding:
    0;

  border:
    0;

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

  background:
    transparent;

  font-family:
    inherit;

  font-size:
    12.5px;

  font-weight:
    800;

  cursor:
    pointer;
}


#ventasPresupuestosPage .ventas-table-link:hover {
  text-decoration:
    underline;
}


/* =========================================================
   BADGES
   ========================================================= */

#ventasPresupuestosPage .ventas-badge {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    24px;

  padding:
    4px 8px;

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

  border-radius:
    999px;

  color:
    var(--pr-text);

  background:
    var(--pr-surface-2);

  font-size:
    10px;

  font-weight:
    800;

  line-height:
    1;
}


#ventasPresupuestosPage [data-discount-origin="EDITORIAL"] {
  color:
    var(--pr-info);

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

  border-color:
    color-mix(
      in srgb,
      var(--pr-info) 25%,
      transparent
    );
}


#ventasPresupuestosPage [data-discount-origin="GENERAL"] {
  color:
    var(--pr-success);

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

  border-color:
    color-mix(
      in srgb,
      var(--pr-success) 25%,
      transparent
    );
}


#ventasPresupuestosPage [data-discount-origin="MANUAL"] {
  color:
    var(--pr-warning);

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

  border-color:
    color-mix(
      in srgb,
      var(--pr-warning) 25%,
      transparent
    );
}


/* =========================================================
   CREATE LAYOUT
   ========================================================= */

#ventasPresupuestosPage .presupuesto-create-layout {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    18px;
}


#ventasPresupuestosPage .presupuesto-create-block {
  width:
    100%;

  min-width:
    0;

  padding:
    17px;

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

  border-radius:
    var(--pr-radius-md);

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


#ventasPresupuestosPage .presupuesto-create-block-header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  margin-bottom:
    15px;
}


#ventasPresupuestosPage .presupuesto-create-block-header > div {
  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  min-width:
    0;
}


#ventasPresupuestosPage .presupuesto-create-block-header strong {
  color:
    var(--pr-text-strong);

  font-size:
    14px;

  font-weight:
    800;
}


#ventasPresupuestosPage .presupuesto-create-step {
  width:
    26px;

  height:
    26px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

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

  border-radius:
    7px;

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

  background:
    var(--pr-surface-3);

  font-size:
    11px;

  font-weight:
    900;
}


/* =========================================================
   SELECTED CLIENT
   ========================================================= */

#ventasPresupuestosPage .ventas-selected-card {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  padding:
    12px;

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

  border-radius:
    var(--pr-radius-md);

  background:
    var(--pr-surface-2);
}


#ventasPresupuestosPage .ventas-selected-card-icon {
  width:
    38px;

  height:
    38px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    0 0 auto;

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

  border-radius:
    10px;

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

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


#ventasPresupuestosPage .ventas-selected-card-content {
  min-width:
    0;

  flex:
    1 1 auto;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


#ventasPresupuestosPage .ventas-selected-card-content strong {
  color:
    var(--pr-text-strong);

  font-size:
    13px;

  font-weight:
    800;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


#ventasPresupuestosPage .ventas-selected-card-content span {
  color:
    var(--pr-muted);

  font-size:
    11px;

  font-weight:
    600;
}


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

#ventasPresupuestosPage .presupuesto-books-toolbar {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  margin-bottom:
    12px;
}


#ventasPresupuestosPage .presupuesto-books-toolbar .ventas-search-box {
  flex:
    1 1 auto;

  max-width:
    480px;
}


#ventasPresupuestosPage .presupuesto-books-selection-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  flex:
    0 0 auto;
}


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

#ventasPresupuestosPage .presupuesto-books-table-wrap {
  width:
    100%;

  min-width:
    0;

  overflow-x:
    auto;

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

  border-radius:
    var(--pr-radius-md);

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


#ventasPresupuestosPage .presupuesto-books-table {
  min-width:
    920px;
}


#ventasPresupuestosPage .presupuesto-books-table tbody tr {
  transition:
    background-color .15s ease;
}


#ventasPresupuestosPage .presupuesto-books-table tbody tr.is-selected {
  background:
    var(--pr-surface-2);
}


#ventasPresupuestosPage .presupuesto-book-check {
  width:
    42px;

  text-align:
    center !important;
}


#ventasPresupuestosPage .presupuesto-book-check input {
  width:
    16px;

  height:
    16px;

  accent-color:
    var(--pr-text-strong);

  cursor:
    pointer;
}


#ventasPresupuestosPage .presupuesto-book-name {
  min-width:
    180px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


#ventasPresupuestosPage .presupuesto-book-name strong {
  color:
    var(--pr-text-strong);

  font-size:
    12px;

  font-weight:
    800;
}


#ventasPresupuestosPage .presupuesto-book-name span {
  color:
    var(--pr-muted);

  font-size:
    10px;

  font-weight:
    650;
}


/* =========================================================
   INLINE INPUTS
   ========================================================= */

#ventasPresupuestosPage .presupuesto-inline-input {
  min-width:
    76px;

  max-width:
    110px;

  min-height:
    34px;

  margin-left:
    auto;

  padding:
    6px 8px;

  text-align:
    right;

  font-size:
    12px;

  font-variant-numeric:
    tabular-nums;
}


#ventasPresupuestosPage .presupuesto-discount-input {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    5px;
}


#ventasPresupuestosPage .presupuesto-discount-input > span {
  color:
    var(--pr-muted);

  font-size:
    11px;

  font-weight:
    800;
}


/* =========================================================
   PREVIOUS BUDGETS
   ========================================================= */

#ventasPresupuestosPage .presupuesto-history-list {
  display:
    grid;

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

  gap:
    9px;
}


#ventasPresupuestosPage .presupuesto-history-item {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    11px 12px;

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

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

  color:
    var(--pr-text);

  background:
    var(--pr-surface-2);

  font-family:
    inherit;

  text-align:
    left;

  cursor:
    pointer;

  transition:
    border-color .15s ease,
    background-color .15s ease;
}


#ventasPresupuestosPage .presupuesto-history-item:hover {
  border-color:
    var(--pr-border-strong);

  background:
    var(--pr-surface-3);
}


#ventasPresupuestosPage .presupuesto-history-item > span {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


#ventasPresupuestosPage .presupuesto-history-item > span:last-child {
  align-items:
    flex-end;
}


#ventasPresupuestosPage .presupuesto-history-item strong {
  color:
    var(--pr-text-strong);

  font-size:
    12px;

  font-weight:
    800;
}


#ventasPresupuestosPage .presupuesto-history-item small {
  color:
    var(--pr-muted);

  font-size:
    10px;

  font-weight:
    600;
}


/* =========================================================
   SUMMARY
   ========================================================= */

#ventasPresupuestosPage .presupuesto-create-summary {
  background:
    var(--pr-surface-2);
}


#ventasPresupuestosPage .presupuesto-summary-grid {
  width:
    100%;

  display:
    grid;

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

  gap:
    10px;
}


#ventasPresupuestosPage .presupuesto-summary-grid > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

  padding:
    12px;

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

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

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


#ventasPresupuestosPage .presupuesto-summary-grid span {
  color:
    var(--pr-muted);

  font-size:
    10px;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    .045em;
}


#ventasPresupuestosPage .presupuesto-summary-grid strong {
  color:
    var(--pr-text-strong);

  font-size:
    15px;

  font-weight:
    900;

  font-variant-numeric:
    tabular-nums;
}


#ventasPresupuestosPage .presupuesto-summary-total {
  border-color:
    var(--pr-border-strong) !important;

  background:
    var(--pr-surface-3) !important;
}


#ventasPresupuestosPage .presupuesto-summary-total strong {
  font-size:
    18px;
}


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

#ventasPresupuestosPage .ventas-empty-state {
  width:
    100%;

  min-height:
    150px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  padding:
    24px;

  color:
    var(--pr-muted);

  text-align:
    center;
}


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

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

  font-size:
    14px;

  font-weight:
    800;
}


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

  margin:
    0;

  font-size:
    12px;

  font-weight:
    600;

  line-height:
    1.5;
}


#ventasPresupuestosPage .ventas-empty-icon {
  width:
    42px;

  height:
    42px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    12px;

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

  background:
    var(--pr-surface-3);
}


#ventasPresupuestosPage .ventas-empty-inline {
  padding:
    14px;

  border:
    1px dashed var(--pr-border-strong);

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

  color:
    var(--pr-muted);

  background:
    var(--pr-surface-2);

  font-size:
    12px;

  font-weight:
    650;
}


/* =========================================================
   MODAL / DRAWER OVERLAY
   ========================================================= */

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


#ventasPresupuestosPage .presupuestos-local-overlay-root {
  position:
    relative;

  z-index:
    1000;
}


#ventasPresupuestosPage .ventas-modal-backdrop,
#ventasPresupuestosPage .ventas-drawer-backdrop {
  position:
    fixed;

  inset:
    0;

  z-index:
    1000;

  background:
    rgba(0, 0, 0, .54);

  backdrop-filter:
    blur(2px);
}


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

#ventasPresupuestosPage .ventas-modal {
  position:
    fixed;

  top:
    50%;

  left:
    50%;

  z-index:
    1001;

  width:
    calc(100vw - 32px);

  max-height:
    calc(100dvh - 32px);

  display:
    flex;

  flex-direction:
    column;

  transform:
    translate(-50%, -50%);

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

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

  background:
    var(--pr-surface);

  box-shadow:
    var(--pr-shadow-md);

  overflow:
    hidden;
}


#ventasPresupuestosPage .ventas-modal-sm {
  max-width:
    480px;
}


#ventasPresupuestosPage .ventas-modal-md {
  max-width:
    620px;
}


#ventasPresupuestosPage .ventas-modal-lg {
  max-width:
    820px;
}


#ventasPresupuestosPage .ventas-modal-xl {
  max-width:
    1280px;
}


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

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    16px;

  padding:
    17px 18px;

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

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


#ventasPresupuestosPage .ventas-modal-header h2 {
  margin:
    0;

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

  font-size:
    17px;

  font-weight:
    850;

  letter-spacing:
    -.02em;
}


#ventasPresupuestosPage .ventas-modal-header p {
  margin:
    5px 0 0;

  color:
    var(--pr-muted);

  font-size:
    12px;

  font-weight:
    600;
}


#ventasPresupuestosPage .ventas-modal-body {
  min-width:
    0;

  flex:
    1 1 auto;

  padding:
    18px;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  overscroll-behavior:
    contain;
}


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

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    10px;

  padding:
    13px 18px;

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

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


#ventasPresupuestosPage .ventas-modal-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    9px;

  margin-top:
    18px;
}


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

#ventasPresupuestosPage .ventas-drawer {
  position:
    fixed;

  top:
    0;

  right:
    0;

  bottom:
    0;

  z-index:
    1001;

  width:
    min(
      760px,
      calc(100vw - 24px)
    );

  display:
    flex;

  flex-direction:
    column;

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

  background:
    var(--pr-surface);

  box-shadow:
    -18px 0 50px rgba(0, 0, 0, .18);

  overflow:
    hidden;
}


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

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    17px 18px;

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


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

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

  font-size:
    17px;

  font-weight:
    850;
}


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

  color:
    var(--pr-muted);

  font-size:
    11px;

  font-weight:
    650;
}


#ventasPresupuestosPage .ventas-drawer-body {
  min-width:
    0;

  flex:
    1 1 auto;

  padding:
    18px;

  overflow-y:
    auto;

  overflow-x:
    hidden;
}


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

#ventasPresupuestosPage .presupuesto-detail {
  display:
    flex;

  flex-direction:
    column;

  gap:
    16px;
}


#ventasPresupuestosPage .ventas-detail-hero {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    17px;

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

  border-radius:
    var(--pr-radius-md);

  background:
    var(--pr-surface-2);
}


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


#ventasPresupuestosPage .ventas-detail-hero > div > span {
  color:
    var(--pr-muted);

  font-size:
    11px;

  font-weight:
    800;
}


#ventasPresupuestosPage .ventas-detail-hero h3 {
  margin:
    4px 0 0;

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

  font-size:
    20px;

  font-weight:
    850;

  line-height:
    1.2;
}


#ventasPresupuestosPage .ventas-detail-meta {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    8px 12px;

  margin-top:
    10px;

  color:
    var(--pr-muted);

  font-size:
    11px;

  font-weight:
    650;
}


#ventasPresupuestosPage .ventas-detail-total {
  flex:
    0 0 auto;

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

  font-size:
    23px;

  font-weight:
    900;

  font-variant-numeric:
    tabular-nums;
}


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

#ventasPresupuestosPage .ventas-detail-actions {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;
}


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

#ventasPresupuestosPage .ventas-detail-section {
  padding:
    16px;

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

  border-radius:
    var(--pr-radius-md);

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


#ventasPresupuestosPage .ventas-detail-section > h4,
#ventasPresupuestosPage .ventas-detail-section-header h4 {
  margin:
    0;

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

  font-size:
    13px;

  font-weight:
    850;
}


#ventasPresupuestosPage .ventas-detail-section > h4 {
  margin-bottom:
    13px;
}


#ventasPresupuestosPage .ventas-detail-section-header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  margin-bottom:
    13px;
}


#ventasPresupuestosPage .ventas-detail-grid {
  display:
    grid;

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

  gap:
    10px;
}


#ventasPresupuestosPage .ventas-detail-grid > div {
  padding:
    11px;

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

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

  background:
    var(--pr-surface-2);
}


#ventasPresupuestosPage .ventas-detail-grid span {
  display:
    block;

  margin-bottom:
    4px;

  color:
    var(--pr-muted);

  font-size:
    10px;

  font-weight:
    750;

  text-transform:
    uppercase;
}


#ventasPresupuestosPage .ventas-detail-grid strong {
  color:
    var(--pr-text-strong);

  font-size:
    12px;

  font-weight:
    800;
}


#ventasPresupuestosPage .ventas-detail-note {
  margin-top:
    12px;

  padding:
    12px;

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

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

  color:
    var(--pr-text);

  background:
    var(--pr-surface-2);

  font-size:
    12px;

  font-weight:
    600;

  line-height:
    1.5;
}


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

#ventasPresupuestosPage .ventas-detail-list-item {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    10px 0;

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


#ventasPresupuestosPage .ventas-detail-list-item:last-child {
  border-bottom:
    0;
}


#ventasPresupuestosPage .ventas-detail-list-item > div {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


#ventasPresupuestosPage .ventas-detail-list-item strong {
  color:
    var(--pr-text-strong);

  font-size:
    12px;

  font-weight:
    800;
}


#ventasPresupuestosPage .ventas-detail-list-item span {
  color:
    var(--pr-muted);

  font-size:
    10px;

  font-weight:
    650;
}


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

#ventasPresupuestosPage .ventas-timeline {
  display:
    flex;

  flex-direction:
    column;
}


#ventasPresupuestosPage .ventas-timeline-item {
  position:
    relative;

  display:
    grid;

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

  gap:
    9px;

  padding:
    0 0 15px;
}


#ventasPresupuestosPage .ventas-timeline-item:last-child {
  padding-bottom:
    0;
}


#ventasPresupuestosPage .ventas-timeline-item::before {
  content:
    "";

  position:
    absolute;

  top:
    12px;

  bottom:
    -1px;

  left:
    5px;

  width:
    1px;

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


#ventasPresupuestosPage .ventas-timeline-item:last-child::before {
  display:
    none;
}


#ventasPresupuestosPage .ventas-timeline-dot {
  position:
    relative;

  z-index:
    1;

  width:
    11px;

  height:
    11px;

  margin-top:
    3px;

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

  border-radius:
    50%;

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

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


#ventasPresupuestosPage .ventas-timeline-item strong {
  display:
    block;

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

  font-size:
    12px;

  font-weight:
    800;
}


#ventasPresupuestosPage .ventas-timeline-item span {
  display:
    block;

  margin-top:
    2px;

  color:
    var(--pr-muted);

  font-size:
    10px;

  font-weight:
    600;
}


#ventasPresupuestosPage .ventas-timeline-item p {
  margin:
    5px 0 0;

  color:
    var(--pr-text);

  font-size:
    11px;

  line-height:
    1.5;
}


/* =========================================================
   DANGER SECTION
   ========================================================= */

#ventasPresupuestosPage .ventas-detail-danger {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    8px;

  padding:
    14px;

  border:
    1px solid color-mix(
      in srgb,
      var(--pr-danger) 22%,
      var(--pr-border)
    );

  border-radius:
    var(--pr-radius-md);

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


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

#ventasPresupuestosPage .ventas-spinner {
  width:
    24px;

  height:
    24px;

  border:
    2px solid var(--pr-border);

  border-top-color:
    var(--pr-text-strong);

  border-radius:
    50%;

  animation:
    presupuesto-spin .7s linear infinite;
}


@keyframes presupuesto-spin {

  to {
    transform:
      rotate(360deg);
  }

}


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

#ventasPresupuestosPage .ventas-section-skeleton {
  display:
    flex;

  flex-direction:
    column;

  gap:
    14px;
}


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

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

  gap:
    12px;
}


#ventasPresupuestosPage .ventas-skeleton-card,
#ventasPresupuestosPage .ventas-skeleton-line {
  position:
    relative;

  overflow:
    hidden;

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

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

  background:
    var(--pr-surface-3);
}


#ventasPresupuestosPage .ventas-skeleton-card {
  height:
    104px;
}


#ventasPresupuestosPage .ventas-skeleton-table {
  display:
    flex;

  flex-direction:
    column;

  gap:
    8px;

  padding:
    14px;

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

  border-radius:
    var(--pr-radius-md);

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


#ventasPresupuestosPage .ventas-skeleton-line {
  height:
    38px;
}


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

#ventasPresupuestosPage .ventas-pagination {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    13px 14px;

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


#ventasPresupuestosPage .ventas-pagination-info {
  color:
    var(--pr-muted);

  font-size:
    11px;

  font-weight:
    650;
}


#ventasPresupuestosPage .ventas-pagination-actions {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;
}


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

#ventasPresupuestosPage .ventas-modal-body,
#ventasPresupuestosPage .ventas-drawer-body,
#ventasPresupuestosPage .ventas-search-results,
#ventasPresupuestosPage .ventas-table-wrap,
#ventasPresupuestosPage .presupuesto-books-table-wrap {
  scrollbar-width:
    thin;

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


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

html[data-theme="dark"]
#ventasPresupuestosPage
.ventas-panel,

html[data-theme="dark"]
#ventasPresupuestosPage
.ventas-modal,

html[data-theme="dark"]
#ventasPresupuestosPage
.ventas-drawer,

html[data-theme="dark"]
#ventasPresupuestosPage
.presupuesto-create-block,

html[data-theme="dark"]
#ventasPresupuestosPage
.presupuesto-books-table-wrap {
  background:
    #080808;
}


html[data-theme="dark"]
#ventasPresupuestosPage
.ventas-table th {
  color:
    #c7c7c7;

  background:
    #0d0d0d;
}


html[data-theme="dark"]
#ventasPresupuestosPage
.ventas-table td {
  color:
    #e8e8e8;

  border-color:
    #242424;
}


html[data-theme="dark"]
#ventasPresupuestosPage
.ventas-table td strong,
html[data-theme="dark"]
#ventasPresupuestosPage
.ventas-title,
html[data-theme="dark"]
#ventasPresupuestosPage
.ventas-modal-header h2,
html[data-theme="dark"]
#ventasPresupuestosPage
.ventas-drawer-header h2 {
  color:
    #ffffff;
}


html[data-theme="dark"]
#ventasPresupuestosPage
.ventas-input,
html[data-theme="dark"]
#ventasPresupuestosPage
.ventas-select,
html[data-theme="dark"]
#ventasPresupuestosPage
.ventas-textarea,
html[data-theme="dark"]
#ventasPresupuestosPage
.ventas-search-box {
  color:
    #ffffff;

  background:
    #090909;

  border-color:
    #303030;
}


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

@media (
  max-width:
  1180px
) {

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


  #ventasPresupuestosPage .presupuesto-summary-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  #ventasPresupuestosPage .presupuesto-summary-total {
    grid-column:
      span 1;
  }

}


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

@media (
  max-width:
  860px
) {

  #ventasPresupuestosPage .ventas-header {
    flex-direction:
      column;
  }


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

    justify-content:
      flex-start;
  }


  #ventasPresupuestosPage .ventas-section-toolbar {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  #ventasPresupuestosPage .ventas-section-toolbar-search {
    flex:
      1 1 auto;

    width:
      100%;
  }


  #ventasPresupuestosPage .ventas-section-toolbar-filters {
    width:
      100%;
  }


  #ventasPresupuestosPage .ventas-section-toolbar-filters > * {
    flex:
      1 1 0;
  }


  #ventasPresupuestosPage .presupuesto-books-toolbar {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  #ventasPresupuestosPage .presupuesto-books-toolbar .ventas-search-box {
    max-width:
      none;
  }


  #ventasPresupuestosPage .presupuesto-history-list {
    grid-template-columns:
      1fr;
  }


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


  #ventasPresupuestosPage .presupuesto-summary-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

}


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

@media (
  max-width:
  620px
) {

  #ventasPresupuestosPage .ventas-header {
    gap:
      16px;

    margin-bottom:
      16px;
  }


  #ventasPresupuestosPage .ventas-header-actions {
    display:
      grid;

    grid-template-columns:
      1fr 1fr;
  }


  #ventasPresupuestosPage .ventas-header-actions .ventas-btn {
    width:
      100%;
  }


  #ventasPresupuestosPage .ventas-metrics-grid {
    grid-template-columns:
      1fr;
  }


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


  #ventasPresupuestosPage .ventas-field-full {
    grid-column:
      auto;
  }


  #ventasPresupuestosPage .presupuesto-create-block {
    padding:
      13px;
  }


  #ventasPresupuestosPage .presupuesto-create-block-header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


  #ventasPresupuestosPage .presupuesto-create-block-header > button {
    width:
      100%;
  }


  #ventasPresupuestosPage .presupuesto-books-selection-actions {
    display:
      grid;

    grid-template-columns:
      1fr 1fr;

    width:
      100%;
  }


  #ventasPresupuestosPage .presupuesto-books-selection-actions .ventas-btn {
    width:
      100%;
  }


  #ventasPresupuestosPage .presupuesto-summary-grid {
    grid-template-columns:
      1fr 1fr;
  }


  #ventasPresupuestosPage .presupuesto-summary-total {
    grid-column:
      1 / -1;
  }


  #ventasPresupuestosPage .ventas-detail-hero {
    flex-direction:
      column;
  }


  #ventasPresupuestosPage .ventas-detail-total {
    width:
      100%;

    padding-top:
      10px;

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


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


  #ventasPresupuestosPage .ventas-detail-actions {
    display:
      grid;

    grid-template-columns:
      1fr;
  }


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


  #ventasPresupuestosPage .ventas-detail-danger {
    display:
      grid;

    grid-template-columns:
      1fr;
  }


  #ventasPresupuestosPage .ventas-detail-danger .ventas-btn {
    width:
      100%;
  }


  #ventasPresupuestosPage .ventas-modal {
    width:
      calc(100vw - 16px);

    max-height:
      calc(100dvh - 16px);

    border-radius:
      12px;
  }


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


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


  #ventasPresupuestosPage .ventas-modal-footer {
    display:
      grid;

    grid-template-columns:
      1fr 1fr;

    padding:
      12px 14px;
  }


  #ventasPresupuestosPage .ventas-modal-footer .ventas-btn {
    width:
      100%;
  }


  #ventasPresupuestosPage .ventas-drawer {
    width:
      100vw;

    border-left:
      0;
  }


  #ventasPresupuestosPage .ventas-drawer-body {
    padding:
      14px;
  }


  #ventasPresupuestosPage .ventas-pagination {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  #ventasPresupuestosPage .ventas-pagination-actions {
    justify-content:
      space-between;
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (
  max-width:
  420px
) {

  #ventasPresupuestosPage .ventas-header-actions {
    grid-template-columns:
      1fr;
  }


  #ventasPresupuestosPage .presupuesto-summary-grid {
    grid-template-columns:
      1fr;
  }


  #ventasPresupuestosPage .presupuesto-summary-total {
    grid-column:
      auto;
  }


  #ventasPresupuestosPage .ventas-modal-footer {
    grid-template-columns:
      1fr;
  }


  #ventasPresupuestosPage .presupuesto-books-selection-actions {
    grid-template-columns:
      1fr;
  }

}


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

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

  #ventasPresupuestosPage *,
  #ventasPresupuestosPage *::before,
  #ventasPresupuestosPage *::after {
    scroll-behavior:
      auto !important;

    transition-duration:
      .01ms !important;

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;
  }

}


/* =========================================================
   FIN
   frontend/src/pages/ventas/presupuestos/presupuestos.css
   ========================================================= *//* =========================================================
   FIX · MODAL PRESUPUESTOS DEBAJO DEL TOPBAR
   ========================================================= */

#ventasPresupuestosPage .ventas-modal {
  top:
    calc(50% + 34px);

  max-height:
    calc(100dvh - 96px);
}


/* =========================================================
   FIX · DRAWER PRESUPUESTOS DEBAJO DEL TOPBAR
   ========================================================= */

#ventasPresupuestosPage .ventas-drawer {
  top:
    68px;

  height:
    calc(100dvh - 68px);
}


/* =========================================================
   FIX · BACKDROP DESDE DEBAJO DEL TOPBAR
   ========================================================= */

#ventasPresupuestosPage .ventas-modal-backdrop,
#ventasPresupuestosPage .ventas-drawer-backdrop {
  top:
    68px;
}


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

@media (
  max-width:
  620px
) {

  #ventasPresupuestosPage .ventas-modal {
    top:
      calc(50% + 30px);

    max-height:
      calc(100dvh - 82px);
  }


  #ventasPresupuestosPage .ventas-drawer {
    top:
      60px;

    height:
      calc(100dvh - 60px);
  }


  #ventasPresupuestosPage .ventas-modal-backdrop,
  #ventasPresupuestosPage .ventas-drawer-backdrop {
    top:
      60px;
  }

}