/* =========================================================



   97-desktop.css — Solo ESCRITORIO (PC)



   - No afecta a móvil/tablet táctil



   - Ajustes de layout y comodidad visual en pantallas grandes



   - No toca colores ni lógica de tema



   ========================================================= */

@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  /* 1) Centrar la app y dar ancho cómodo en escritorio */

  .container {
    display: grid;

    grid-template-columns: 1fr;

    gap: 1rem;

    align-items: start;

    padding: 1rem;

    max-width: 1600px;

    margin: auto;
  }

  .form-column {
    background: var(--surface);

    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);

    width: 100%;

    border: 1px solid rgba(255, 255, 255, 0.08);

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

  .home-actions-grid {
    display: flex;

    gap: 6px;
  }

  button#vaultBioBtn {
    background: linear-gradient(
      180deg,
      rgb(70 113 239),
      rgb(19 34 83)
    ) !important;

    color: #fff !important;

    font-weight: 600;

    /* border: 1px solid rgba(255, 255, 255, 0.1) !important; */

    border-radius: 14px !important;

    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important;
  }

  /* 2) Ocultar controles "solo móvil" en escritorio */

  .mobile-only-control,
  #mobile-calc-toggle {
    display: none !important;
  }

  input,
  select,
  textarea {
    font-size: 20px;
    font-weight: 600;
    padding-left: 19px;
    background: rgb(0 0 0 / 10%) !important;
    color: rgb(0, 0, 0) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: 1px !important;
  }
  #exportModal input,
  #exportModal select,
  #exportModal textarea {
    width: 95%;
    padding-left: 2px !important;
    gap: 5px;
    height: 35px;
    /* border-radius: 14px; */
    border: 1px solid rgb(68 49 49 / 88%);
    /* background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)); */
    /* color: rgba(255, 255, 255, 0.92); */
    /* padding: 0 12px; */
    outline: none;
  }
  .exp-split {
    display: flex;

    grid-template-columns: 700px 1fr;

    gap: 0.75rem;

    min-height: 0;

    justify-content: space-around;
  }
  #previewFullscreenBtn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
  }
  .exp-main {
    border: 1px solid var(--border-color, #d1d5db);

    border-radius: 12px;

    padding: 0.75rem;

    overflow: auto;

    min-height: 0;
    width: 98%;
  }

  .modalexportar {
    background: var(--surface);

    display: flex !important;

    height: calc(100dvh - 56px);

    height: calc(100vh - 56px);

    width: 100%;

    z-index: 2147484000 !important;

    flex-direction: column;

    position: fixed;

    top: 56px;

    left: 0;

    flex-wrap: wrap;

    align-content: space-around;

    align-items: stretch;
  }

  #exportModal .modal-body {
    flex: 1 !important;

    display: flex !important;

    flex-direction: column !important;

    min-height: 0 !important;

    /* ✅ Necesario para que haya scroll dentro del modal en escritorio */

    overflow-y: auto !important;

    overflow-x: hidden !important;

    width: 45%;
  }

  details summary {
    background: #798a7dc7;
    width: 98%;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    padding-left: 10px;
  }
  #exportModal
    .modal-left
    :is(
      input[type="text"],
      input[type="number"],
      input[type="email"],
      input[type="tel"],
      input[type="date"],
      textarea,
      select
    ) {
    font-size: 1.3rem !important;
    color: rgb(0, 0, 0);
    padding-left: 10px !important;
  }
  .modalclientes {
    background-color: var(--surface);

    position: fixed !important;

    top: calc(
      var(--appHeaderH, 50px) + env(safe-area-inset-top, 0px)
    ) !important;

    left: 0 !important;

    right: 0 !important;

    bottom: 0 !important;

    width: 100vw !important;

    height: calc(
      100dvh - var(--appHeaderH, 50px) - env(safe-area-inset-top, 0px)
    ) !important;

    max-height: calc(
      100dvh - var(--appHeaderH, 50px) - env(safe-area-inset-top, 0px)
    ) !important;

    margin: 0 !important;

    border-radius: 0 !important;

    display: flex;

    flex-direction: column !important;

    overflow: hidden !important;

    z-index: 2147484000 !important;
  }

  .stats-row {
    gap: 10px;

    color: #000000;

    padding-bottom: 12px;

    display: flex;

    flex-direction: row;
  }

  #summaryTable {
    width: 100%;

    border-collapse: collapse;
  }

  /* 3) Layout principal: formulario + resumen (2 columnas en escritorio)



        En index.html: #calc-body contiene #paintForm y .results-column



  */

  #calc-body {
    display: flex !important;

    align-items: flex-start;

    gap: 16px;

    max-width: 95%;
  }

  #paintForm {
    flex: 1 1 62%;

    min-width: 560px;
  }

  .results-column {
    flex: 0 0 38%;

    max-width: 520px;

    /* margin: 20px; */

    /* Fijar el resumen mientras haces scroll (muy útil en PC) */

    position: sticky;

    top: calc(var(--appHeaderH, 50px) + 12px);

    align-self: flex-start;
  }

  /* 5) Modales: un poco más “cómodos” en desktop (sin afectar móvil)



        (Esto NO cambia colores, solo medidas máximas)



  */

  .modal-content {
    width: min(1120px, 92vw);

    max-height: 88vh;
  }

  /* 6) Estadísticas: más columnas en pantallas grandes (si existen estas clases) */

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

  .stats-charts-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* 7) Biblioteca de precios: si el listado/editor están apilados, en PC mejor en fila */

  .price-lib-panels {
    flex-direction: row;

    align-items: flex-start;
  }

  .price-lib-listado {
    flex: 1 0 30%;

    max-height: fit-content;
  }

  .price-lib-editor {
    flex: 1 1 55%;
  }

  #expensesModal .exp-history-btn {
    border: 1px solid var(--border-color, #313131);

    background: var(--panel-bg, #fff);

    color: var(--text-color, #111827);

    padding: 0.45rem 0.75rem;

    border-radius: 999px;

    cursor: pointer;

    font-weight: 600;
  }

  #expensesModal .exp-history-btn:hover {
    background: #cef3d1;
  }

  /* =========================================================

   TRADEPRO LOOK — Desktop overrides (evita blancos)

   ========================================================= */

  @media (min-width: 981px) and (hover: hover) and (pointer: fine) {
    .form-column {
      background: #fff;

      box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);

      width: 100%;

      border: 1px solid rgba(255, 255, 255, 0.08);

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

    .modalexportar {
      background: var(--surface);
    }
  }

  #exportModal .exp-split,
  #exportModal .exp-main {
    min-height: 0 !important;
  }

  button#vaultBioBtn {
    background: linear-gradient(
      180deg,
      rgb(70 113 239),
      rgb(19 34 83)
    ) !important;

    color: #fff !important;

    font-weight: 600;

    height: 2rem;

    /* border: 1px solid rgba(255, 255, 255, 0.1) !important; */

    border-radius: 14px !important;

    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important;
  }
  .input-group {
    display: flex;
    gap: 5px;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .modal-backdrop .modal {
    left: 60px !important;
    /* right: 0px !important; */
    /* bottom: 0 !important; */
    width: 86vw !important;
  }
  .home-grid {
    display: flex;
    gap: 12px;
    flex-direction: row;
    align-content: space-between;
    flex-wrap: nowrap;
  }
  .tpl-modal .tpl-modal__content {
    width: min(100%, calc(100vw - 16px));
  }
  .tutorial-modal__content {
    width: 100%;
    max-width: 980px;
    height: min(92vh, 900px);
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
  }

  /* =========================================================
     ESCRITORIO: Mostrar iframe (visor nativo) y ocultar pdfCanvas
     Solo afecta a escritorio (PC con ratón). Móvil NO cambia.
     ========================================================= */

  /* 1) Ocultar el canvas y sus wrappers de zoom en escritorio */
  #pdfCanvas,
  .zoom-viewport,
  .zoom-content {
    display: none !important;
  }

  /* 2) El previewModal ocupa todo el viewport disponible */
  #previewModal {
    display: flex;
    flex-direction: column;
  }

  /* 3) El stage se expande para dar espacio al iframe */
  #previewModal .preview-stage {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: calc(100dvh - 120px) !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #e8e8e8 !important;
    box-sizing: border-box !important;
  }

  /* 4) El iframe ocupa todo el stage */
  #previewModal .preview-stage .preview-iframe {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: calc(100dvh - 138px) !important;
    border: 0 !important;
    flex: 1 1 auto !important;
    background: white !important;
  }
  .zoom-controls {
    display: none !important;
  }
  /* Estados de validación (no interferir con errores) */
  input[data-folder-ac][aria-invalid="true"] {
    background-image: none !important;
    border: 4px solid #ff0000 !important;
  }
}

/* === Factura: validación visual robusta === */
#exportModal input[aria-invalid="true"],
#exportModal select[aria-invalid="true"],
#exportModal textarea[aria-invalid="true"],
#appMenu input[aria-invalid="true"],
#appMenu select[aria-invalid="true"],
#appMenu textarea[aria-invalid="true"] {
  background: rgba(255, 0, 0, 0.1) !important;
  border: 3px solid #d90429 !important;
  box-shadow: 0 0 0 2px rgba(217, 4, 41, 0.1) !important;
}

#exportModal details.has-error > summary,
#appMenu details.has-error > summary {
  color: #b00020 !important;
  font-weight: 700 !important;
}
.exp-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  min-height: 0;
}
#previewModal .modal {
  width: 92vw !important;
  margin: 0px !important;
  border-radius: 0 !important;
  max-height: calc(100dvh - var(--appHeaderH, 50px)) !important;
  height: calc(100dvh - var(--appHeaderH, 50px)) !important;
  top: 0 !important;
  bottom: 0 !important;
}
/* =========================================================
   DESKTOP · Refuerzo invoiceModeBar estilo Multiempresa
   Debe ir al FINAL de 97-desktop.css
   ========================================================= */

@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  #exportModal #invoiceModeBar.invoice-mode-bar {
    max-width: min(520px, 100%);
    align-self: stretch;
  }

  #exportModal #invoiceModeBar input.form-input,
  #exportModal #invoiceModeBar input#inv_number,
  #exportModal #invoiceModeBar input#inv_date {
    width: 100% !important;
    height: auto !important;
    min-height: 40px !important;

    padding: 10px 12px !important;

    border-radius: 8px !important;
    border: 1px solid var(--me-border-strong, #444) !important;

    background: #c2c2c2 !important;
    color: #5505ad !important;

    font-size: 0.95rem !important;
    font-weight: 700 !important;

    box-shadow: none !important;
    outline: none !important;
  }

  #exportModal #invoiceModeBar .invoice-toggle-input {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
    border-radius: 4px !important;
  }

  #exportModal #invoiceModeBar .btn-auto,
  #exportModal #invoiceModeBar #previewFullscreenBtn,
  #exportModal #invoiceModeBar #exportPdfBtn,
  #exportModal #invoiceModeBar #saveDocBtn,
  #exportModal #invoiceModeBar #shareWhatsappBtn,
  #exportModal #invoiceModeBar #shareEmailBtn {
    height: auto !important;
  }

  #exportModal #invoiceModeBar .form-label {
    background: transparent !important;
    color: var(--me-primary, var(--primary, #15843f)) !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* Vault: forzar tamaño panel (evita que la regla .modal-content genérica lo ensanche) */
  #vaultModal .modal-content {
    width: min(520px, 92vw) !important;
    max-height: 90vh !important;
    height: auto !important;
  }

  /* Vault: evitar que la regla global de inputs rompa el estilo */
  #vaultModal input[type="password"],
  #vaultModal input[type="text"]:not(.sr-only) {
    font-size: 0.95rem !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    background: #c2c2c2 !important;
    color: #5505ad !important;
  }
  @media (min-width: 981px) and (hover: hover) and (pointer: fine) {
    /* Contenedor general del bloque calculadora */
    #calc-body {
      padding: 0.5rem !important;
      background: var(--surface2, #0f1622);
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.05);
      max-width: 100% !important;
      margin: 0 auto;
    }

    /* Forzamos el comportamiento Grid de 2 Columnas Maestras */
    .calc-desktop-layout.row-inline-calculadora {
      display: grid !important;
      grid-template-columns: 1.15fr 0.85fr !important;
      gap: 1.25rem !important;
      align-items: stretch !important;
    }

    /* Columna del formulario (Izquierda) */
    .calc-form-side {
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
      justify-content: space-between;
    }

    .calc-results-side.results-column {
      display: flex !important;
      flex-direction: column !important;
      justify-content: space-between !important;
      background: rgba(0, 0, 0, 0.2) !important;
      border-radius: 6px !important;
      padding: 0.75rem !important;
      border: 1px solid var(--border, rgba(255, 255, 255, 0.1)) !important;
      width: auto !important; /* Desactiva anchos antiguos de móvil */
    }

    /* Anulamos comportamiento flex antiguo en las filas internas en favor de Grids limpios */
    .calc-row-triple.row-inline,
    .calc-row-double.row-inline {
      display: grid !important;
      gap: 0.6rem !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    .calc-row-triple.row-inline {
      grid-template-columns: 1.8fr 1.1fr 1.3fr !important;
      align-items: flex-end !important;
    }
    .calc-row-double.row-inline {
      grid-template-columns: 1fr 1fr !important;
    }

    .calc-row-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(255, 255, 255, 0.02);
      padding: 0.5rem;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.04);
      margin-top: 0.25rem;
    }
    /* Estilizado de inputs individuales */
    .calculadora,
    .calculadora1,
    .input-group {
      display: flex;
      flex-direction: column;
      gap: 3px;
      width: 100% !important;
    }

    .calculadora label,
    .calculadora1 label,
    .input-group label {
      font-size: 0.8rem !important;
      font-weight: 600;
      color: var(--text-muted, rgba(255, 255, 255, 0.7));
      margin: 0 !important;
      white-space: nowrap;
    }

    .calculadora label .hint,
    .calculadora1 label .hint {
      font-size: 0.7rem;
      opacity: 0.5;
      font-weight: 400;
    }
    /* Campos de texto y etiquetas */
    .calc-field {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .calc-field label {
      font-size: 0.8rem !important;
      font-weight: 600;
      color: var(--text-muted, rgba(255, 255, 255, 0.7));
      margin: 0 !important;
      white-space: nowrap;
    }

    .calc-field label .hint {
      font-size: 0.7rem;
      opacity: 0.5;
      font-weight: 400;
    }

    /* Inputs estilizados elegantes (Look Premium) */
    .calc-field input[type="text"],
    .calc-field select {
      height: 34px !important;
      background: #111827 !important; /* Fondo oscuro integrado */
      border: 1px solid rgba(255, 255, 255, 0.15) !important;
      color: #fff !important;
      border-radius: 5px !important;
      padding: 0 0.5rem !important;
      font-size: 0.85rem !important;
      transition:
        border-color 0.2s,
        box-shadow 0.2s;
      width: 100% !important;
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    }

    .calc-field input[type="text"]:focus,
    .calc-field select:focus {
      border-color: var(--primary, #15843f) !important;
      outline: none !important;
      box-shadow: 0 0 0 2px rgba(21, 132, 63, 0.2) !important;
    }

    /* Fusión limpia de Input de texto + Selector Preset en una línea */
    .input-with-select {
      display: flex;
      gap: 2px;
    }

    .input-with-select input {
      border-radius: 5px 0 0 5px !important;
    }
    .input-with-select select {
      width: 95px !important;
      min-width: 95px !important;
      border-radius: 0 5px 5px 0 !important;
      background: #1f2937 !important;
      font-size: 0.75rem !important;
      border-left: none !important;
      margin: 0 !important;
    }

    /* Inputs destacados (Ancho y Largo con labels más notorios pero compactos) */
    .highlighted-input-group label {
      font-size: 0.85rem !important;
      color: #fff !important;
    }

    .highlighted-input-group input {
      font-size: 0.95rem !important;
      font-weight: 600;
      letter-spacing: 0.5px;
      border-color: rgba(255, 255, 255, 0.25) !important;
    }

    /* Checkboxes */
    .checkbox-group {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.8rem !important;
      color: #fff;
      cursor: pointer;
    }
    .checkbox-group input[type="checkbox"] {
      width: 14px;
      height: 14px;
      accent-color: var(--primary, #15843f);
    }

    .highlight-checkbox {
      background: rgba(21, 132, 63, 0.1);
      padding: 4px 8px;
      border-radius: 4px;
      border: 1px solid rgba(21, 132, 63, 0.2);
      height: 34px;
      box-sizing: border-box;
    }

    .compact-checkbox-field {
      justify-content: flex-end;
      padding-bottom: 2px;
    }

    .checkbox-container-compact {
      display: flex;
      gap: 12px;
    }
    .compact-checkbox-field {
      justify-content: flex-end;
    }
    .checkbox-container-compact {
      display: flex;
      gap: 12px;
    }
    /* Hints y Errores pequeños */
    .input-hint {
      font-size: 0.7rem !important;
      margin-top: 1px;
      opacity: 0.6;
    }

    .input-hint.err {
      color: var(--danger, #f87171);
      font-weight: 600;
      position: absolute;
      transform: translateY(34px);
    }

    /* Botones de acción compactos */
    .button-group-compact {
      display: flex;
      gap: 6px;
    }
    .button-group-compact button {
      height: 32px !important;
      padding: 0 0.75rem !important;
      font-size: 0.8rem !important;
      font-weight: 600 !important;
      border-radius: 4px !important;
      cursor: pointer;
    }
    .button-group-compact .añadir-btn {
      background: var(--primary, #15843f) !important;
      color: #fff !important;
      border: none !important;
    }
    .button-group-compact .buttonclear {
      background: rgba(255, 255, 255, 0.05) !important;
      color: #f87171 !important;
      border: 1px solid rgba(248, 113, 113, 0.2) !important;
    }
    /* --- CONTROL DE LA TABLA Y SCROLL INTERNO --- */
    .table-wrapper-scroll {
      max-height: 145px; /* Altura perfecta calculada para evitar scroll vertical */
      overflow-y: auto;
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 4px;
      background: rgba(0, 0, 0, 0.1);
    }

    #summaryTable {
      width: 100% !important;
      border-collapse: collapse !important;
      font-size: 0.8rem !important;
    }
    #summaryTable th,
    #summaryTable td {
      padding: 5px 8px !important;
      text-align: right !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }
    #summaryTable th:first-child,
    #summaryTable td:first-child {
      text-align: left !important;
    }
    #summaryTable th {
      background: #1f2937 !important;
      position: sticky;
      top: 0;
      z-index: 2;
    }
    #totalCost {
      color: #4ade80 !important;
      font-size: 0.95rem !important;
    }
    .summary-pills {
      display: flex;
      justify-content: space-around;
      gap: 8px;
      font-size: 0.75rem !important;
    }

    /* Botón de Factura Principal Inferior */
    .btn-action-primary {
      width: 100% !important;
      background: linear-gradient(180deg, #9346ef, #132253) !important;
      color: #fff !important;
      font-weight: 600 !important;
      font-size: 0.85rem !important;
      padding: 0.5rem 1rem !important;
      border-radius: 6px !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      cursor: pointer;
    }
    /* Totales del tfoot */
    #summaryTable tfoot tr:first-child th {
      background: rgba(255, 255, 255, 0.03) !important;
      font-size: 0.85rem !important;
      border-top: 2px solid rgba(255, 255, 255, 0.1) !important;
    }

    #totalCost {
      color: #4ade80 !important; /* Verde brillante para destacar el precio total */
      font-size: 0.95rem !important;
    }

    .summary-pills {
      display: flex;
      justify-content: space-around;
      gap: 8px;
      padding: 2px 0;
      font-size: 0.75rem !important;
      color: rgba(255, 255, 255, 0.6);
    }

    .summary-pills strong {
      color: #fff;
    }

    /* Botón de acción principal inferior */
    .summary-actions-compact {
      margin-top: 0.5rem;
    }

    .btn-action-primary {
      width: 100% !important;
      background: linear-gradient(180deg, #9346ef, #132253) !important;
      color: #fff !important;
      font-weight: 600 !important;
      font-size: 0.85rem !important;
      padding: 0.5rem 1rem !important;
      border-radius: 6px !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
      cursor: pointer;
      transition:
        transform 0.1s,
        filter 0.2s;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    }

    .btn-action-primary:hover {
      filter: brightness(1.15);
    }

    .btn-action-primary:active {
      transform: scale(0.99);
    }
  }
  /* --- CONTROL DE APERTURA Y CIERRE EN ESCRITORIO --- */

  /* Si el botón original indica que está cerrado, ocultamos la estructura compacta */
  #mobile-calc-toggle[data-state="closed"] ~ #calc-body,
  #mobile-calc-toggle[data-state="closed"] + #calc-body,
  #paintForm:not(.calc-desktop-layout) {
    /* Si tienes una estructura donde compartan padre o si el script altera el style directamente: */
  }

  /* Forzamos que si el elemento padre o style original dice display: none, se respete */
  #calc-body[style*="display: none"] {
    display: none !important;
  }

  /* Cuando esté visible (display: block), forzamos nuestro sistema Grid compacto de escritorio */
  #calc-body[style*="display: block"] {
    display: block !important;
  }

  #calc-body[style*="display: block"] .calc-desktop-layout {
    display: grid !important;
  }
  /* Inputs de texto elegantes (Fondo oscuro premium) */
  #calc-body input[type="text"],
  #calc-body select {
    height: 34px !important;
    background: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    border-radius: 5px !important;
    padding: 0 0.5rem !important;
    font-size: 0.85rem !important;
    width: 100% !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    box-sizing: border-box;
  }
}

/* ==========================================================
   Calculadora escritorio: altura útil hasta el borde inferior
   + contraste de textos sobre el fondo oscuro
   2026-05-19-calc-desktop-fullheight2
   ========================================================== */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  #calc-body[data-pcp-desktop-fit="1"] {
    height: max(
      360px,
      calc(100vh - var(--pcp-calc-body-top, 0px) - 10px)
    ) !important;
    height: max(
      360px,
      calc(100dvh - var(--pcp-calc-body-top, 0px) - 10px)
    ) !important;
    min-height: max(
      360px,
      calc(100vh - var(--pcp-calc-body-top, 0px) - 10px)
    ) !important;
    min-height: max(
      360px,
      calc(100dvh - var(--pcp-calc-body-top, 0px) - 10px)
    ) !important;
    box-sizing: border-box !important;
  }

  #calc-body[data-pcp-desktop-fit="1"]
    .calc-desktop-layout.row-inline-calculadora {
    height: 100% !important;
    min-height: 100% !important;
  }

  #calc-body[data-pcp-desktop-fit="1"] .calc-form-side {
    justify-content: flex-start !important;
    min-height: 0 !important;
  }

  #calc-body[data-pcp-desktop-fit="1"] .calc-row-actions {
    margin-top: auto !important;
  }

  #calc-body[data-pcp-desktop-fit="1"] .calc-results-side.results-column {
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    justify-content: flex-start !important;
    gap: 0.75rem !important;
  }

  #calc-body[data-pcp-desktop-fit="1"] .table-wrapper-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  #calc-body[data-pcp-desktop-fit="1"] .summary-actions-compact {
    flex: 0 0 auto !important;
    margin-top: 0 !important;
  }

  #calc-body[data-pcp-desktop-fit="1"] #generateFromTableBtn {
    margin-top: 0 !important;
  }

  #calc-body {
    color: #e8eef8 !important;
  }

  #calc-body .calculadora label,
  #calc-body .calculadora1 label,
  #calc-body .input-group label,
  #calc-body .calc-field label,
  #calc-body .checkbox-group {
    color: #edf3fb !important;
  }

  #calc-body .hint,
  #calc-body .input-hint,
  #calc-body #manualHint {
    color: rgba(203, 213, 225, 0.98) !important;
    opacity: 1 !important;
  }

  #calc-body input[type="text"]::placeholder,
  #calc-body select::placeholder {
    color: rgba(148, 163, 184, 0.98) !important;
    opacity: 1 !important;
  }

  #summaryTable thead th {
    color: #f8fafc !important;
  }

  #summaryTable tfoot th {
    color: #e2e8f0 !important;
  }

  #summaryTable tfoot .summary-pills {
    color: #cbd5e1 !important;
  }

  #summaryTable tfoot .summary-pills span span {
    color: #f8fafc !important;
  }
}

/* ==========================================================
   DESKTOP · Historial de clientes y documentos
   2026-05-19-history-desktop-pro1
   SOLO PC: >= 981px + ratón fino.
   No toca ni reordena la versión móvil.
   ========================================================== */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  #fullHistoryModal {
    --pcp-hist-desk-bg: #0f1724;
    --pcp-hist-desk-panel: rgba(18, 28, 43, 0.92);
    --pcp-hist-desk-panel-strong: rgba(10, 16, 27, 0.97);
    --pcp-hist-desk-panel-soft: rgba(15, 23, 36, 0.88);
    --pcp-hist-desk-border: rgba(148, 163, 184, 0.24);
    --pcp-hist-desk-border-strong: rgba(148, 163, 184, 0.42);
    --pcp-hist-desk-text: #e8eef8;
    --pcp-hist-desk-title: #f8fafc;
    --pcp-hist-desk-muted: #cbd5e1;
    --pcp-hist-desk-placeholder: #94a3b8;
    --pcp-hist-desk-blue: #60a5fa;
    --pcp-hist-desk-purple: #c4b5fd;
    --pcp-hist-desk-green: #4ade80;
    --pcp-hist-desk-danger: #fda4af;
  }

  #fullHistoryModal.modal-backdrop {
    padding: 18px !important;
    box-sizing: border-box !important;
  }

  #fullHistoryModal .modal {
    width: min(1480px, calc(100vw - 36px)) !important;
    height: min(92vh, calc(100dvh - var(--appHeaderH, 50px) - 24px)) !important;
    max-height: min(
      92vh,
      calc(100dvh - var(--appHeaderH, 50px) - 24px)
    ) !important;
    margin: 0 auto !important;
    border-radius: 24px !important;
    border: 1px solid var(--pcp-hist-desk-border-strong) !important;
    background:
      radial-gradient(
        circle at 8% 0%,
        rgba(59, 130, 246, 0.16),
        transparent 28%
      ),
      radial-gradient(
        circle at 96% 8%,
        rgba(147, 51, 234, 0.16),
        transparent 30%
      ),
      linear-gradient(180deg, #111c2c 0%, var(--pcp-hist-desk-bg) 100%) !important;
    color: var(--pcp-hist-desk-text) !important;
    box-shadow: 0 28px 90px rgba(2, 6, 23, 0.58) !important;
    overflow: hidden !important;
  }

  #fullHistoryModal .modal-header {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 18px 20px 16px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    background: var(--pcp-hist-desk-panel-strong) !important;
    border-bottom: 1px solid var(--pcp-hist-desk-border-strong) !important;
    box-shadow: 0 18px 36px rgba(2, 6, 23, 0.24) !important;
  }

  #fullHistoryModal .cabecera {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 48px !important;
    align-items: center !important;
    gap: 16px !important;
  }

  #fullHistoryModalTitle {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--pcp-hist-desk-title) !important;
    font-size: clamp(1.34rem, 1.08rem + 0.42vw, 1.72rem) !important;
    font-weight: 860 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.018em !important;
  }

  #fullHistoryModal #closeFullHistoryBtn.buttonclear {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 14px !important;
    border: 1px solid rgba(248, 113, 113, 0.64) !important;
    background: linear-gradient(
      180deg,
      rgba(153, 27, 27, 0.96),
      rgba(127, 29, 29, 0.98)
    ) !important;
    color: #fff1f2 !important;
    display: grid !important;
    place-items: center !important;
    box-shadow: 0 14px 28px rgba(2, 6, 23, 0.26) !important;
  }

  #fullHistoryModal #closeFullHistoryBtn.buttonclear:hover {
    filter: brightness(1.08) !important;
    transform: translateY(-1px) !important;
  }

  #fullHistoryModal #closeFullHistoryBtn .btn-icon {
    font-size: 1.15rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: inherit !important;
  }

  #fullHistoryModal .history-header-actions {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    display: grid !important;
    grid-template-columns: minmax(420px, 1.2fr) minmax(300px, 0.8fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    border: 1px solid var(--pcp-hist-desk-border) !important;
    border-radius: 18px !important;
    background: var(--pcp-hist-desk-panel) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.035),
      0 18px 38px rgba(2, 6, 23, 0.18) !important;
  }

  #fullHistoryModal .history-header-actions-row {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    gap: 10px !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  #fullHistoryModal .history-header-actions-row-top {
    grid-template-columns: 60px 60px minmax(220px, 1fr) !important;
  }

  #fullHistoryModal .history-header-actions-row-bottom {
    grid-template-columns: 60px minmax(220px, 1fr) !important;
  }

  #fullHistoryModal #openPriceLibraryBtn.hib,
  #fullHistoryModal #openStatsHistoryBtn.hib,
  #fullHistoryModal #history-refresh-btn.hib,
  #fullHistoryModal #toggleHistoryFiltersBtn.hib {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    height: 52px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    color: var(--pcp-hist-desk-title) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 12px 28px rgba(2, 6, 23, 0.16) !important;
  }

  #fullHistoryModal #openPriceLibraryBtn.hib,
  #fullHistoryModal #openStatsHistoryBtn.hib,
  #fullHistoryModal #history-refresh-btn.hib {
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
  }

  #fullHistoryModal #openPriceLibraryBtn.hib {
    border: 1px solid rgba(96, 165, 250, 0.52) !important;
    background: linear-gradient(
      180deg,
      rgba(37, 99, 235, 0.98),
      rgba(29, 78, 216, 0.98)
    ) !important;
  }

  #fullHistoryModal #openStatsHistoryBtn.hib {
    border: 1px solid rgba(196, 181, 253, 0.52) !important;
    background: linear-gradient(
      180deg,
      rgba(124, 58, 237, 0.98),
      rgba(67, 56, 202, 0.98)
    ) !important;
  }

  #fullHistoryModal #history-refresh-btn.hib {
    border: 1px solid rgba(96, 165, 250, 0.42) !important;
    background: rgba(30, 41, 59, 0.96) !important;
  }

  #fullHistoryModal #toggleHistoryFiltersBtn.hib {
    display: inline-flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 16px !important;
    border: 1px solid rgba(96, 165, 250, 0.4) !important;
    background: linear-gradient(
      180deg,
      rgba(15, 23, 42, 0.98),
      rgba(30, 41, 59, 0.98)
    ) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  #fullHistoryModal #toggleHistoryFiltersBtn.hib::after {
    content: "Buscar / filtrar";
    color: var(--pcp-hist-desk-title);
    font-size: 0.96rem;
    font-weight: 820;
    letter-spacing: 0.01em;
  }

  #fullHistoryModal .hib-img {
    width: 28px !important;
    height: 28px !important;
    display: block !important;
    filter: brightness(0) invert(1) !important;
  }

  #fullHistoryModal .history-sort-date-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(74, 222, 128, 0.4) !important;
    background: linear-gradient(
      180deg,
      rgba(22, 101, 52, 0.96),
      rgba(20, 83, 45, 0.98)
    ) !important;
    color: #ecfdf5 !important;
    font-size: 1rem !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      0 12px 28px rgba(2, 6, 23, 0.16) !important;
  }

  #fullHistoryModal .history-sort-date-btn:hover,
  #fullHistoryModal #openPriceLibraryBtn.hib:hover,
  #fullHistoryModal #openStatsHistoryBtn.hib:hover,
  #fullHistoryModal #history-refresh-btn.hib:hover,
  #fullHistoryModal #toggleHistoryFiltersBtn.hib:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.06) !important;
  }

  #fullHistoryModal .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 18px 20px 16px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    overflow: hidden !important;
  }

  #fullHistoryModal .history-search-bar {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(320px, 0.78fr) minmax(640px, 1.22fr) !important;
    gap: 16px !important;
    align-items: start !important;
    border: 1px solid var(--pcp-hist-desk-border) !important;
    border-radius: 20px !important;
    background: var(--pcp-hist-desk-panel) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.035),
      0 18px 40px rgba(2, 6, 23, 0.18) !important;
  }

  #fullHistoryModal .history-search-bar .input-group {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    align-items: stretch !important;
  }

  #fullHistoryModal .history-search-bar .input-group label {
    margin: 0 !important;
    color: var(--pcp-hist-desk-title) !important;
    font-size: 0.94rem !important;
    font-weight: 780 !important;
    line-height: 1.25 !important;
  }

  #fullHistoryModal #historySearchInput {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(148, 163, 184, 0.36) !important;
    border-radius: 15px !important;
    background: rgba(7, 18, 34, 0.96) !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 720 !important;
    box-shadow: inset 0 1px 3px rgba(2, 6, 23, 0.42) !important;
  }

  #fullHistoryModal #historySearchInput::placeholder {
    color: var(--pcp-hist-desk-placeholder) !important;
    opacity: 1 !important;
  }

  #fullHistoryModal #historySearchInput:focus {
    outline: none !important;
    border-color: rgba(96, 165, 250, 0.72) !important;
    box-shadow:
      0 0 0 3px rgba(96, 165, 250, 0.16),
      inset 0 1px 3px rgba(2, 6, 23, 0.42) !important;
  }

  #fullHistoryModal .history-filters {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns:
      minmax(180px, 1.18fr)
      minmax(145px, 0.88fr)
      minmax(145px, 0.88fr)
      minmax(130px, 0.72fr)
      minmax(160px, 0.92fr)
      minmax(220px, 1.18fr) !important;
    gap: 12px !important;
    align-items: end !important;
  }

  #fullHistoryModal .history-filters > label {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 11px 11px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    border: 1px solid rgba(148, 163, 184, 0.26) !important;
    border-radius: 16px !important;
    background: rgba(10, 22, 40, 0.86) !important;
    color: var(--pcp-hist-desk-muted) !important;
    font-size: 0.82rem !important;
    font-weight: 820 !important;
    line-height: 1.18 !important;
    letter-spacing: 0.01em !important;
  }

  #fullHistoryModal .history-filters > label[for="filtroTipo"] {
    border: 2px solid rgba(122, 174, 255, 0.62) !important;
    background: linear-gradient(
      180deg,
      rgba(25, 49, 84, 0.98) 0%,
      rgba(15, 32, 60, 0.98) 100%
    ) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 0 1px rgba(20, 28, 42, 0.28) !important;
  }

  #fullHistoryModal .history-filters > label[for="filtroTipo"]::before {
    content: "FILTRO PRINCIPAL";
    display: block;
    margin-bottom: 1px;
    color: #9ec2ff;
    font-size: 0.65rem;
    font-weight: 920;
    letter-spacing: 0.14em;
  }

  #fullHistoryModal .history-filters > label :is(select, input),
  #fullHistoryModal #fullHistoryStatusFilter {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(148, 163, 184, 0.36) !important;
    border-radius: 13px !important;
    background: #f8fbff !important;
    color: #0f172a !important;
    font-size: 0.95rem !important;
    font-weight: 760 !important;
  }

  #fullHistoryModal .history-filters > label[for="filtroTipo"] select {
    font-size: 1rem !important;
    font-weight: 900 !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 3px rgba(122, 174, 255, 0.2) !important;
  }

  #fullHistoryModal #fullHistoryStatusFilter {
    align-self: end !important;
    border-radius: 16px !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 13px !important;
    appearance: auto !important;
  }

  #fullHistoryModal #resumenFiltro {
    grid-column: 1 / span 3 !important;
    align-self: center !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: var(--pcp-hist-desk-muted) !important;
    font-size: 0.92rem !important;
    font-weight: 720 !important;
    line-height: 1.35 !important;
  }

  #fullHistoryModal .history-botones {
    grid-column: 4 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
  }

  #fullHistoryModal .history-botones > button {
    min-height: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border-radius: 14px !important;
    font-size: 0.94rem !important;
    font-weight: 840 !important;
    white-space: nowrap !important;
  }

  #fullHistoryModal #btnLimpiarFiltros.btn-soft {
    border: 1px solid rgba(148, 163, 184, 0.34) !important;
    background: rgba(30, 41, 59, 0.98) !important;
    color: #e2e8f0 !important;
  }

  #fullHistoryModal #btnDescargarTrimestreCSV.btn,
  #fullHistoryModal #btnDescargarTrimestreExcel.btn {
    border: 1px solid rgba(74, 222, 128, 0.4) !important;
    background: linear-gradient(
      180deg,
      rgba(22, 101, 52, 0.98),
      rgba(20, 83, 45, 0.98)
    ) !important;
    color: #ecfdf5 !important;
  }

  #fullHistoryModal .history-content-area {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 4px 0 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable !important;
  }

  #fullHistoryModal .history-content-area::-webkit-scrollbar {
    width: 10px;
  }

  #fullHistoryModal .history-content-area::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.32);
    border-radius: 999px;
  }

  #fullHistoryModal .history-content-area::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.28);
    border-radius: 999px;
  }

  #fullHistoryModal .empty-msg {
    min-height: 180px !important;
    margin: 0 !important;
    padding: 28px !important;
    border: 1px dashed rgba(148, 163, 184, 0.36) !important;
    border-radius: 20px !important;
    background: rgba(15, 23, 42, 0.68) !important;
    color: var(--pcp-hist-desk-muted) !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
    font-size: 1.02rem !important;
    font-weight: 720 !important;
  }

  #fullHistoryModal .client-history-card {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
    border-radius: 22px !important;
    background: rgba(15, 23, 42, 0.9) !important;
    box-shadow: 0 18px 42px rgba(2, 6, 23, 0.18) !important;
    overflow: hidden !important;
  }

  #fullHistoryModal .history-client-toggle.client-header {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 16px 18px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    background: linear-gradient(
      180deg,
      rgba(30, 41, 59, 0.98),
      rgba(15, 23, 42, 0.98)
    ) !important;
    color: var(--pcp-hist-desk-title) !important;
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) auto !important;
    gap: 14px !important;
    align-items: center !important;
    text-align: left !important;
  }

  #fullHistoryModal .history-client-toggle.client-header:hover {
    filter: brightness(1.05) !important;
  }

  #fullHistoryModal .history-client-arrow {
    color: var(--pcp-hist-desk-blue) !important;
    font-size: 1.18rem !important;
    font-weight: 900 !important;
    transition: transform 0.18s ease !important;
  }

  #fullHistoryModal .client-history-card.is-open .history-client-arrow {
    transform: rotate(90deg) !important;
  }

  #fullHistoryModal .history-client-main {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    color: var(--pcp-hist-desk-text) !important;
  }

  #fullHistoryModal .history-client-main strong {
    color: var(--pcp-hist-desk-title) !important;
    font-size: 1.1rem !important;
    font-weight: 880 !important;
  }

  #fullHistoryModal .history-client-main .client-id {
    margin: 0 !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    background: rgba(96, 165, 250, 0.18) !important;
    color: #dbeafe !important;
    font-size: 0.82rem !important;
    font-weight: 840 !important;
  }

  #fullHistoryModal .history-client-main .muted {
    color: var(--pcp-hist-desk-muted) !important;
    font-size: 0.9rem !important;
    font-weight: 650 !important;
  }

  #fullHistoryModal .history-client-summary {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  #fullHistoryModal .history-client-pill,
  #fullHistoryModal .history-doc-chip {
    min-height: 32px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.82rem !important;
    font-weight: 880 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #fullHistoryModal .history-client-pill {
    border: 1px solid rgba(148, 163, 184, 0.32) !important;
    background: rgba(30, 41, 59, 0.98) !important;
    color: #f8fafc !important;
  }

  #fullHistoryModal .history-doc-chip.chip-budget {
    border: 1px solid rgba(196, 181, 253, 0.42) !important;
    background: rgba(124, 58, 237, 0.18) !important;
    color: #ede9fe !important;
  }

  #fullHistoryModal .history-doc-chip.chip-invoice {
    border: 1px solid rgba(74, 222, 128, 0.42) !important;
    background: rgba(22, 101, 52, 0.22) !important;
    color: #dcfce7 !important;
  }

  #fullHistoryModal .history-doc-chip.chip-rectification {
    border: 1px solid rgba(251, 191, 36, 0.42) !important;
    background: rgba(180, 83, 9, 0.22) !important;
    color: #fef3c7 !important;
  }

  #fullHistoryModal .history-client-body {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 16px 18px 18px !important;
    box-sizing: border-box !important;
    background: rgba(8, 15, 28, 0.82) !important;
    border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
  }

  #fullHistoryModal .client-docs,
  #fullHistoryModal .history-flat-list {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    list-style: none !important;
  }

  #fullHistoryModal .li-doc-item {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 13px 14px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(148, 163, 184, 0.26) !important;
    border-radius: 18px !important;
    background: rgba(15, 23, 42, 0.94) !important;
    display: grid !important;
    grid-template-columns: 82px minmax(240px, 1fr) minmax(210px, 250px) minmax(
        230px,
        285px
      ) !important;
    gap: 14px !important;
    align-items: center !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
  }

  #fullHistoryModal .history-date-badge {
    width: 82px !important;
    min-width: 82px !important;
    min-height: 82px !important;
    margin: 0 !important;
    padding: 8px 6px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(96, 165, 250, 0.36) !important;
    background: linear-gradient(
      180deg,
      rgba(30, 64, 175, 0.9),
      rgba(15, 23, 42, 0.96)
    ) !important;
    color: #eff6ff !important;
    display: grid !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 1px !important;
    box-sizing: border-box !important;
  }

  #fullHistoryModal .history-date-day {
    font-size: 1.34rem !important;
    line-height: 1 !important;
    font-weight: 920 !important;
  }

  #fullHistoryModal .history-date-month {
    font-size: 0.78rem !important;
    line-height: 1.1 !important;
    font-weight: 850 !important;
    letter-spacing: 0.08em !important;
  }

  #fullHistoryModal .history-date-year {
    font-size: 0.76rem !important;
    line-height: 1.1 !important;
    font-weight: 780 !important;
    color: #bfdbfe !important;
  }

  #fullHistoryModal .doc-title {
    min-width: 0 !important;
    color: var(--pcp-hist-desk-title) !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    line-height: 1.38 !important;
  }

  #fullHistoryModal .doc-title .muted,
  #fullHistoryModal .doc-title .history-flat-client {
    color: var(--pcp-hist-desk-muted) !important;
    font-weight: 650 !important;
  }

  #fullHistoryModal .notainterna {
    margin-left: 4px !important;
  }

  #fullHistoryModal .status-select {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-radius: 15px !important;
    border: 1px solid rgba(148, 163, 184, 0.36) !important;
    background: #f8fbff !important;
    color: #0f172a !important;
    font-size: 0.96rem !important;
    font-weight: 800 !important;
  }

  #fullHistoryModal .status-select.status-esperando {
    border-color: rgba(251, 191, 36, 0.58) !important;
    background: #fffbeb !important;
  }

  #fullHistoryModal .status-select.status-aprobado,
  #fullHistoryModal .status-select.status-cobrado {
    border-color: rgba(74, 222, 128, 0.58) !important;
    background: #f0fdf4 !important;
  }

  #fullHistoryModal .status-select.status-pendiente {
    border-color: rgba(248, 113, 113, 0.58) !important;
    background: #fff1f2 !important;
  }

  #fullHistoryModal .acciones-factura {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
  }

  #fullHistoryModal .acciones-factura > button {
    min-height: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    border-radius: 14px !important;
    font-size: 0.92rem !important;
    font-weight: 840 !important;
  }

  #fullHistoryModal .acciones-factura .btn-mini {
    width: 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(96, 165, 250, 0.42) !important;
    background: rgba(30, 41, 59, 0.98) !important;
  }

  #fullHistoryModal .acciones-factura .btn-mini svg {
    width: 25px !important;
    height: 25px !important;
    stroke: #dbeafe !important;
  }

  #fullHistoryModal .acciones-factura .btn-minihist {
    padding: 0 16px !important;
    border: 1px solid rgba(196, 181, 253, 0.42) !important;
    background: rgba(124, 58, 237, 0.18) !important;
    color: #ede9fe !important;
  }

  #fullHistoryModal .acciones-factura .buttonclearhist {
    padding: 0 16px !important;
    border: 1px solid rgba(248, 113, 113, 0.48) !important;
    background: rgba(127, 29, 29, 0.84) !important;
    color: #fff1f2 !important;
  }

  #fullHistoryModal .client-actions {
    margin-top: 14px !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  #fullHistoryModal .client-actions .new {
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(96, 165, 250, 0.42) !important;
    background: rgba(30, 64, 175, 0.88) !important;
    color: #eff6ff !important;
    font-size: 0.94rem !important;
    font-weight: 840 !important;
  }

  #fullHistoryModal .modal-footer {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 12px 20px 14px !important;
    border-top: 1px solid var(--pcp-hist-desk-border-strong) !important;
    background: rgba(10, 16, 27, 0.98) !important;
    color: var(--pcp-hist-desk-muted) !important;
    font-size: 0.94rem !important;
    font-weight: 760 !important;
  }

  #fullHistoryModal #fullHistoryCount {
    min-height: 22px !important;
    display: flex !important;
    align-items: center !important;
  }

  @media (max-width: 1240px) {
    #fullHistoryModal .history-header-actions {
      grid-template-columns: 1fr !important;
    }

    #fullHistoryModal .history-search-bar {
      grid-template-columns: 1fr !important;
    }

    #fullHistoryModal .history-filters {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    #fullHistoryModal #fullHistoryStatusFilter {
      min-height: 46px !important;
      height: 46px !important;
      padding: 0 13px !important;
    }

    #fullHistoryModal #resumenFiltro {
      grid-column: 1 / span 2 !important;
    }

    #fullHistoryModal .history-botones {
      grid-column: 3 !important;
    }

    #fullHistoryModal .li-doc-item {
      grid-template-columns: 82px minmax(220px, 1fr) minmax(200px, 230px) !important;
    }

    #fullHistoryModal .acciones-factura {
      grid-column: 2 / -1 !important;
      justify-content: flex-start !important;
    }
  }
}

/* ==========================================================
   DESKTOP · Historial · ajuste compacto y centrado
   2026-05-19-history-desktop-pro11
   - Corrige desplazamiento heredado por .modal-backdrop .modal { left:115px }
   - Evita corte de filtros/botones en el lateral derecho
   - Compacta cabecera y panel de búsqueda SIN tocar móvil
   ========================================================== */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  #fullHistoryModal.modal-backdrop {
    padding: 14px 24px 18px !important;
  }

  #fullHistoryModal .modal {
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    width: min(1420px, calc(100vw - 64px)) !important;
    max-width: calc(100vw - 64px) !important;
    height: min(88vh, calc(100dvh - var(--appHeaderH, 50px) - 34px)) !important;
    max-height: min(
      88vh,
      calc(100dvh - var(--appHeaderH, 50px) - 34px)
    ) !important;
  }

  #fullHistoryModal .modal-header {
    padding: 14px 18px 13px !important;
    gap: 10px !important;
  }

  #fullHistoryModal .cabecera {
    grid-template-columns: minmax(0, 1fr) 42px !important;
    gap: 12px !important;
  }

  #fullHistoryModalTitle {
    font-size: clamp(1.14rem, 1.04rem + 0.22vw, 1.34rem) !important;
    line-height: 1.08 !important;
  }

  #fullHistoryModal #closeFullHistoryBtn.buttonclear {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 12px !important;
  }

  #fullHistoryModal #closeFullHistoryBtn .btn-icon {
    font-size: 1.04rem !important;
  }

  #fullHistoryModal .history-header-actions {
    padding: 10px !important;
    gap: 10px !important;
    grid-template-columns: minmax(360px, 0.95fr) minmax(280px, 0.72fr) !important;
    border-radius: 16px !important;
  }

  #fullHistoryModal .history-header-actions-row {
    gap: 8px !important;
  }

  #fullHistoryModal .history-header-actions-row-top {
    grid-template-columns: 48px 48px minmax(210px, 1fr) !important;
  }

  #fullHistoryModal .history-header-actions-row-bottom {
    grid-template-columns: 48px minmax(220px, 1fr) !important;
  }

  #fullHistoryModal #openPriceLibraryBtn.hib,
  #fullHistoryModal #openStatsHistoryBtn.hib,
  #fullHistoryModal #history-refresh-btn.hib,
  #fullHistoryModal #toggleHistoryFiltersBtn.hib,
  #fullHistoryModal .history-sort-date-btn {
    min-height: 46px !important;
    height: 46px !important;
    border-radius: 12px !important;
  }

  #fullHistoryModal #toggleHistoryFiltersBtn.hib {
    gap: 9px !important;
    padding: 0 12px !important;
  }

  #fullHistoryModal #toggleHistoryFiltersBtn.hib::after {
    font-size: 0.88rem !important;
  }

  #fullHistoryModal .hib-img {
    width: 24px !important;
    height: 24px !important;
  }

  #fullHistoryModal .filter-badge {
    font-size: 0.84rem !important;
    padding: 4px 9px !important;
  }

  #fullHistoryModal .history-sort-date-btn {
    padding: 0 14px !important;
    font-size: 0.92rem !important;
  }

  #fullHistoryModal .modal-body {
    padding: 14px 18px 14px !important;
    gap: 12px !important;
  }

  #fullHistoryModal .history-search-bar {
    padding: 12px !important;
    gap: 12px !important;
    grid-template-columns: minmax(286px, 0.68fr) minmax(0, 1.32fr) !important;
    border-radius: 18px !important;
  }

  #fullHistoryModal .history-search-bar .input-group {
    gap: 7px !important;
  }

  #fullHistoryModal .history-search-bar .input-group label {
    font-size: 0.86rem !important;
  }

  #fullHistoryModal #historySearchInput {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 13px !important;
    border-radius: 13px !important;
    font-size: 0.94rem !important;
  }

  #fullHistoryModal .history-filters {
    grid-template-columns:
      minmax(156px, 1.04fr)
      minmax(118px, 0.82fr)
      minmax(118px, 0.82fr)
      minmax(102px, 0.68fr)
      minmax(132px, 0.86fr) !important;
    gap: 9px !important;
    align-items: stretch !important;
  }

  #fullHistoryModal .history-filters > label {
    padding: 8px 9px 9px !important;
    gap: 5px !important;
    border-radius: 14px !important;
    font-size: 0.75rem !important;
  }

  #fullHistoryModal .history-filters > label[for="filtroTipo"]::before {
    font-size: 0.58rem !important;
    letter-spacing: 0.12em !important;
  }

  #fullHistoryModal .history-filters > label :is(select, input),
  #fullHistoryModal #fullHistoryStatusFilter {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 11px !important;
    border-radius: 11px !important;
    font-size: 0.88rem !important;
  }

  #fullHistoryModal .history-filters > label[for="filtroTipo"] select {
    font-size: 0.94rem !important;
  }

  #fullHistoryModal #fullHistoryStatusFilter {
    grid-column: 1 / span 2 !important;
    align-self: stretch !important;
  }

  #fullHistoryModal #resumenFiltro {
    grid-column: 3 !important;
    align-self: center !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 0.82rem !important;
    line-height: 1.25 !important;
  }

  #fullHistoryModal .history-botones {
    grid-column: 4 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    justify-content: stretch !important;
  }

  #fullHistoryModal .history-botones > button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    font-size: 0.82rem !important;
  }

  #fullHistoryModal .history-content-area {
    gap: 12px !important;
  }

  #fullHistoryModal .modal-footer {
    padding: 10px 18px 12px !important;
    font-size: 0.86rem !important;
  }
}

@media (min-width: 981px) and (max-width: 1280px) and (hover: hover) and (pointer: fine) {
  #fullHistoryModal.modal-backdrop {
    padding-inline: 16px !important;
  }

  #fullHistoryModal .modal {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
  }

  #fullHistoryModal .history-header-actions {
    grid-template-columns: 1fr !important;
  }

  #fullHistoryModal .history-search-bar {
    grid-template-columns: 1fr !important;
  }

  #fullHistoryModal .history-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #fullHistoryModal #fullHistoryStatusFilter {
    grid-column: 1 / span 2 !important;
  }

  #fullHistoryModal #resumenFiltro {
    grid-column: 3 !important;
  }

  #fullHistoryModal .history-botones {
    grid-column: 1 / -1 !important;
    max-width: 520px !important;
    justify-self: end !important;
  }
}

/* ==========================================================
   DESKTOP · Historial · compactación operativa y filtros fijos
   2026-05-19-history-desktop-pro12
   - Oculta el botón Buscar/Filtros en PC: los filtros ya son permanentes
   - Centra la botonera superior con más aire útil
   - Reduce altura del buscador/filtros para ganar área de documentos
   - Compacta tarjetas de documentos y controles sin tocar móvil
   ========================================================== */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  /* El buscador ya está siempre visible en escritorio: el toggle sobra. */
  #fullHistoryModal #toggleHistoryFiltersBtn.hib {
    display: none !important;
  }

  /* Cabecera algo más contenida para priorizar documentos. */
  #fullHistoryModal .modal {
    height: min(90vh, calc(100dvh - var(--appHeaderH, 50px) - 24px)) !important;
    max-height: min(
      90vh,
      calc(100dvh - var(--appHeaderH, 50px) - 24px)
    ) !important;
  }

  #fullHistoryModal .modal-header {
    padding: 10px 16px 10px !important;
    gap: 8px !important;
  }

  #fullHistoryModal .cabecera {
    grid-template-columns: minmax(0, 1fr) 38px !important;
    gap: 10px !important;
  }

  #fullHistoryModalTitle {
    font-size: clamp(1.05rem, 0.99rem + 0.18vw, 1.18rem) !important;
    line-height: 1.08 !important;
  }

  #fullHistoryModal #closeFullHistoryBtn.buttonclear {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 11px !important;
  }

  #fullHistoryModal #closeFullHistoryBtn .btn-icon {
    font-size: 0.96rem !important;
  }

  /* La botonera deja de ocupar todo el ancho; se centra y gana limpieza. */
  #fullHistoryModal .history-header-actions {
    width: fit-content !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding: 7px 9px !important;
    gap: 9px !important;
    /*display: flex !important;*/
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    border-radius: 15px !important;
  }

  #fullHistoryModal .history-header-actions-row {
    width: auto !important;
    gap: 8px !important;
  }

  #fullHistoryModal .history-header-actions-row-top {
    display: grid !important;
    grid-template-columns: 42px 42px !important;
  }

  #fullHistoryModal .history-header-actions-row-bottom {
    display: grid !important;
    grid-template-columns: 42px minmax(240px, 330px) !important;
  }

  #fullHistoryModal #openPriceLibraryBtn.hib,
  #fullHistoryModal #openStatsHistoryBtn.hib,
  #fullHistoryModal #history-refresh-btn.hib,
  #fullHistoryModal .history-sort-date-btn {
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
  }

  #fullHistoryModal .history-sort-date-btn {
    padding: 0 14px !important;
    font-size: 0.86rem !important;
    font-weight: 850 !important;
  }

  #fullHistoryModal .hib-img {
    width: 22px !important;
    height: 22px !important;
  }

  /* Cuerpo: menos aire vertical superfluo. */
  #fullHistoryModal .modal-body {
    padding: 10px 14px 10px !important;
    gap: 8px !important;
  }

  /* Search bar más bajo y más funcional. */
  #fullHistoryModal .history-search-bar {
    padding: 8px 10px !important;
    gap: 10px !important;
    grid-template-columns: minmax(250px, 0.52fr) minmax(0, 1.48fr) !important;
    align-items: end !important;
    border-radius: 16px !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.03),
      0 10px 24px rgba(2, 6, 23, 0.15) !important;
  }

  #fullHistoryModal .history-search-bar .input-group {
    gap: 5px !important;
  }

  #fullHistoryModal .history-search-bar .input-group label {
    font-size: 0.78rem !important;
    line-height: 1.18 !important;
    font-weight: 760 !important;
  }

  #fullHistoryModal #historySearchInput {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 12px !important;
    border-radius: 11px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
  }

  /* Filtros: una línea compacta en escritorios amplios. */
  #fullHistoryModal .history-filters {
    display: grid !important;
    grid-template-columns:
      minmax(130px, 0.9fr)
      106px
      106px
      92px
      120px
      minmax(185px, 1.15fr)
      minmax(244px, 0.92fr) !important;
    gap: 7px !important;
    align-items: end !important;
  }

  #fullHistoryModal .history-filters > label {
    min-height: 0 !important;
    padding: 5px 7px 6px !important;
    gap: 4px !important;
    border-radius: 12px !important;
    font-size: 0.69rem !important;
    line-height: 1.12 !important;
  }

  #fullHistoryModal .history-filters > label[for="filtroTipo"]::before {
    margin-bottom: 0 !important;
    font-size: 0.52rem !important;
    letter-spacing: 0.1em !important;
  }

  #fullHistoryModal .history-filters > label :is(select, input),
  #fullHistoryModal #fullHistoryStatusFilter {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 9px !important;
    border-radius: 10px !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
  }

  #fullHistoryModal .history-filters > label[for="filtroTipo"] select {
    font-size: 0.84rem !important;
  }

  #fullHistoryModal #fullHistoryStatusFilter {
    grid-column: auto !important;
    align-self: end !important;
    width: 100% !important;
  }

  /* El resumen pierde protagonismo y no consume una fila entera. */
  #fullHistoryModal #resumenFiltro {
    display: none !important;
  }

  #fullHistoryModal .history-botones {
    grid-column: auto !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(72px, 0.9fr) minmax(72px, 0.9fr) minmax(
        82px,
        1fr
      ) !important;
    gap: 6px !important;
    justify-content: stretch !important;
    align-self: end !important;
  }

  #fullHistoryModal .history-botones > button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 8px !important;
    border-radius: 10px !important;
    font-size: 0.75rem !important;
    font-weight: 820 !important;
  }

  /* Área de resultados: más altura útil. */
  #fullHistoryModal .history-content-area {
    gap: 8px !important;
  }

  #fullHistoryModal .empty-msg {
    min-height: 110px !important;
    padding: 18px !important;
    border-radius: 16px !important;
    font-size: 0.94rem !important;
  }

  /* Tarjetas de cliente más compactas. */
  #fullHistoryModal .client-history-card {
    border-radius: 17px !important;
  }

  #fullHistoryModal .history-client-toggle.client-header {
    padding: 11px 13px !important;
    grid-template-columns: 18px minmax(0, 1fr) auto !important;
    gap: 10px !important;
  }

  #fullHistoryModal .history-client-arrow {
    font-size: 1rem !important;
  }

  #fullHistoryModal .history-client-main {
    gap: 5px 9px !important;
  }

  #fullHistoryModal .history-client-main strong {
    font-size: 0.98rem !important;
  }

  #fullHistoryModal .history-client-main .client-id {
    padding: 4px 8px !important;
    font-size: 0.74rem !important;
  }

  #fullHistoryModal .history-client-main .muted {
    font-size: 0.8rem !important;
  }

  #fullHistoryModal .history-client-summary {
    gap: 6px !important;
  }

  #fullHistoryModal .history-client-pill,
  #fullHistoryModal .history-doc-chip {
    min-height: 27px !important;
    padding: 0 9px !important;
    font-size: 0.73rem !important;
  }

  #fullHistoryModal .history-client-body {
    padding: 10px 12px 12px !important;
  }

  #fullHistoryModal .client-docs,
  #fullHistoryModal .history-flat-list {
    gap: 8px !important;
  }

  /* Documentos: filas bastante más compactas. */
  #fullHistoryModal .li-doc-item {
    padding: 9px 10px !important;
    grid-template-columns: 68px minmax(220px, 1fr) minmax(180px, 210px) minmax(
        214px,
        255px
      ) !important;
    gap: 10px !important;
    border-radius: 14px !important;
  }

  #fullHistoryModal .history-date-badge {
    width: 68px !important;
    min-width: 68px !important;
    min-height: 68px !important;
    padding: 6px 5px !important;
    border-radius: 14px !important;
  }

  #fullHistoryModal .history-date-day {
    font-size: 1.12rem !important;
  }

  #fullHistoryModal .history-date-month,
  #fullHistoryModal .history-date-year {
    font-size: 0.68rem !important;
  }

  #fullHistoryModal .doc-title {
    font-size: 0.9rem !important;
    line-height: 1.28 !important;
  }

  #fullHistoryModal .status-select {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 11px !important;
    border-radius: 12px !important;
    font-size: 0.84rem !important;
  }

  #fullHistoryModal .acciones-factura {
    gap: 7px !important;
  }

  #fullHistoryModal .acciones-factura > button {
    min-height: 36px !important;
    height: 36px !important;
    border-radius: 11px !important;
    font-size: 0.8rem !important;
  }

  #fullHistoryModal .acciones-factura .btn-mini {
    width: 40px !important;
    min-width: 40px !important;
  }

  #fullHistoryModal .acciones-factura .btn-mini svg {
    width: 22px !important;
    height: 22px !important;
  }

  #fullHistoryModal .acciones-factura .btn-minihist,
  #fullHistoryModal .acciones-factura .buttonclearhist {
    padding: 0 12px !important;
  }

  #fullHistoryModal .client-actions {
    margin-top: 10px !important;
  }

  #fullHistoryModal .client-actions .new {
    min-height: 38px !important;
    padding: 0 14px !important;
    border-radius: 11px !important;
    font-size: 0.82rem !important;
  }

  #fullHistoryModal .modal-footer {
    padding: 8px 14px 9px !important;
    font-size: 0.8rem !important;
  }
}

/* Escritorio intermedio: mantenemos compactación sin forzar cortes laterales. */
@media (min-width: 981px) and (max-width: 1440px) and (hover: hover) and (pointer: fine) {
  #fullHistoryModal .history-search-bar {
    grid-template-columns: 1fr !important;
  }

  #fullHistoryModal .history-filters {
    grid-template-columns:
      minmax(130px, 1fr)
      108px
      108px
      96px
      124px !important;
  }

  #fullHistoryModal #fullHistoryStatusFilter {
    grid-column: 1 / span 2 !important;
  }

  #fullHistoryModal .history-botones {
    grid-column: 3 / -1 !important;
  }

  #fullHistoryModal .li-doc-item {
    grid-template-columns: 68px minmax(220px, 1fr) minmax(180px, 205px) !important;
  }

  #fullHistoryModal .acciones-factura {
    grid-column: 2 / -1 !important;
    justify-content: flex-start !important;
  }
}

/* ==========================================================
   DESKTOP · Historial · buscador/filtros en una sola línea útil
   2026-05-19-history-desktop-pro13
   - Ensancha el modal para ganar ancho real de trabajo
   - Compacta la search-bar a una sola línea funcional en PC amplio
   - Reduce el bloque de búsqueda a ancho contenido
   - Da anchura suficiente a "Presupuestos"
   - Mantiene CSV / Excel dentro del panel sin cortes
   - Móvil intacto
   ========================================================== */
@media (min-width: 1450px) and (hover: hover) and (pointer: fine) {
  #fullHistoryModal.modal-backdrop {
    padding-inline: 14px !important;
  }

  #fullHistoryModal .modal {
    width: min(1640px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
  }

  /* Search bar: una sola franja horizontal, menos alta. */
  #fullHistoryModal .history-search-bar {
    grid-template-columns: minmax(372px, 372px) minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: 7px 10px !important;
    gap: 10px !important;
  }

  /* Buscar: texto + input en la misma línea. */
  #fullHistoryModal .history-search-bar .input-group {
    /*display: grid !important;*/
    grid-template-columns: auto minmax(185px, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  #fullHistoryModal .history-search-bar .input-group label {
    margin: 0 !important;
    white-space: nowrap !important;
    font-size: 0.74rem !important;
    line-height: 1 !important;
  }

  #fullHistoryModal #historySearchInput {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    height: 34px !important;
    padding-inline: 10px !important;
    font-size: 0.82rem !important;
  }

  /* Filtros y acciones: todos dentro, sin cortes laterales. */
  #fullHistoryModal .history-filters {
    grid-template-columns:
      minmax(177px, 177px) 130px 130px 99px 112px minmax(211px, 205px)
      minmax(262px, 231px) !important;
    gap: 4px !important;
    align-items: center !important;
    background: #9fe48a52;
    border-radius: 10px;
  }

  #fullHistoryModal .history-filters > label {
    padding: 4px 7px 5px !important;
  }

  #fullHistoryModal .history-filters > label[for="filtroTipo"] select {
    font-size: 0.82rem !important;
    padding-inline: 10px 28px !important;
  }

  #fullHistoryModal .history-filters > label :is(select, input),
  #fullHistoryModal #fullHistoryStatusFilter,
  #fullHistoryModal .history-botones > button {
    min-height: 32px !important;
    height: 32px !important;
  }

  #fullHistoryModal .history-botones {
    grid-template-columns: 82px 84px 92px !important;
    gap: 6px !important;
  }

  #fullHistoryModal .history-botones > button {
    padding-inline: 8px !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
  }
}

/* ==========================================================
   DESKTOP · Historial · cabecera una línea + fechas completas + scroll documentos
   2026-05-19-history-desktop-header-scroll-calendar2
   - Respeta los ajustes previos del Historial desktop
   - Coloca título, acciones y cerrar en una sola fila
   - Ensancha Desde/Hasta y fija el icono calendario al extremo derecho
   - Refuerza el scroll vertical interno del listado de documentos
   - No toca móvil
   ========================================================== */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  /* Estructura robusta del modal para que el listado pueda hacer scroll. */
  #fullHistoryModal .modal {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }

  #fullHistoryModal .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #fullHistoryModal .history-content-area {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
  }

  /* Cabecera completa en una sola línea: título · acciones · cerrar. */
  #fullHistoryModal .modal-header {
    display: grid !important;
    grid-template-columns: minmax(320px, 1fr) auto 38px !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 14px !important;
  }

  #fullHistoryModal .cabecera {
    display: contents !important;
  }

  #fullHistoryModalTitle {
    grid-column: 1 !important;
    min-width: 0 !important;
    align-self: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #fullHistoryModal .history-header-actions {
    grid-column: 2 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  #fullHistoryModal .history-header-actions-row {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    gap: 8px !important;
    align-items: center !important;
  }

  #fullHistoryModal .history-header-actions-row-top {
    display: grid !important;
    grid-template-columns: 42px 42px !important;
  }

  #fullHistoryModal .history-header-actions-row-bottom {
    display: grid !important;
    grid-template-columns: 42px minmax(240px, 330px) !important;
  }

  #fullHistoryModal #closeFullHistoryBtn.buttonclear {
    grid-column: 3 !important;
    justify-self: end !important;
    align-self: center !important;
  }

  /* Date inputs: texto completo + icono calendario claramente a la derecha. */
  #fullHistoryModal .history-filters input[type="date"] {
    position: relative !important;
    color-scheme: light !important;
    -webkit-appearance: auto !important;
    appearance: auto !important;
    padding-left: 10px !important;
    padding-right: 40px !important;
    cursor: pointer !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  #fullHistoryModal
    .history-filters
    input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute !important;
    top: 50% !important;
    right: 10px !important;
    transform: translateY(-50%) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    filter: none !important;
  }

  #fullHistoryModal
    .history-filters
    input[type="date"]::-webkit-date-and-time-value {
    text-align: left !important;
  }
}

/* Escritorio amplio: ensanchamos Desde/Hasta para que dd/mm/aaaa se vea entero. */
@media (min-width: 1450px) and (hover: hover) and (pointer: fine) {
  #fullHistoryModal .history-filters {
    grid-template-columns:
      minmax(177px, 177px)
      154px
      154px
      99px
      112px
      minmax(211px, 205px)
      minmax(262px, 231px) !important;
  }
}

/* ==========================================================
   DESKTOP · Historial · corrección definitiva cabecera inline + scroll real
   2026-05-19-history-desktop-inline-scroll-calendar3
   - Fuerza cabecera en UNA sola fila real
   - Corrige la herencia flex-direction: column del CSS base
   - Refuerza el scroll del listado venciendo la regla #fullHistoryContent del CSS base
   - Ensancha Desde/Hasta para que se vea dd/mm/aaaa completo y el calendario quede al extremo derecho
   - No toca móvil
   ========================================================== */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  /* 1) Cabecera: título · acciones · cerrar en la misma fila. */
  #fullHistoryModal .modal-header {
    display: grid !important;
    grid-template-columns: minmax(360px, 1fr) auto 38px !important;
    grid-template-rows: auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 7px 14px !important;
  }

  #fullHistoryModal .cabecera {
    display: contents !important;
  }

  #fullHistoryModalTitle {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #fullHistoryModal .history-header-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  #fullHistoryModal .history-header-actions-row {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  #fullHistoryModal .history-header-actions-row-top {
    display: grid !important;
    grid-template-columns: 42px 42px !important;
  }

  #fullHistoryModal .history-header-actions-row-bottom {
    display: grid !important;
    grid-template-columns: 42px minmax(240px, 330px) !important;
  }

  #fullHistoryModal #closeFullHistoryBtn.buttonclear {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
  }

  /* 2) Scroll real del listado: vence la regla base con dos IDs. */
  #fullHistoryModal .modal {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #fullHistoryModal .modal-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #0b111c !important;
  }

  #fullHistoryModal #fullHistoryContent.history-content-area {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
  }

  /* 3) Fechas: más espacio + icono nativo visible y clicable. */
  #fullHistoryModal .history-filters > label[for="filtroDesde"],
  #fullHistoryModal .history-filters > label[for="filtroHasta"] {
    min-width: 0 !important;
  }

  #fullHistoryModal .history-filters input[type="date"] {
    color-scheme: light !important;
    -webkit-appearance: auto !important;
    appearance: auto !important;
    padding-left: 10px !important;
    padding-right: 38px !important;
    text-align: left !important;
    cursor: pointer !important;
  }

  #fullHistoryModal
    .history-filters
    input[type="date"]::-webkit-calendar-picker-indicator {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 18px !important;
    height: 18px !important;
    margin-left: auto !important;
    margin-right: 2px !important;
    padding: 0 !important;
    cursor: pointer !important;
    filter: none !important;
  }

  #fullHistoryModal
    .history-filters
    input[type="date"]::-webkit-date-and-time-value {
    text-align: left !important;
  }
}

/* Escritorio amplio: Desde/Hasta con anchura suficiente para dd/mm/aaaa + icono. */
@media (min-width: 1450px) and (hover: hover) and (pointer: fine) {
  #fullHistoryModal .history-filters {
    grid-template-columns:
      minmax(177px, 177px)
      170px
      170px
      99px
      112px
      minmax(211px, 205px)
      minmax(262px, 231px) !important;
  }
}

/* ==========================================================
   DESKTOP · Historial · ajuste final anchos acciones exportación
   2026-05-19-history-desktop-inline-scroll-calendar4
   - Reduce Desde/Hasta sin perder dd/mm/aaaa + icono
   - Reduce el selector de estado "Todos"
   - Amplía la columna de acciones para que Excel entre completo
   - No toca móvil ni lógica
   ========================================================== */
@media (min-width: 1450px) and (hover: hover) and (pointer: fine) {
  #fullHistoryModal .history-filters {
    grid-template-columns:
      minmax(177px, 177px)
      150px
      150px
      99px
      112px
      180px
      282px !important;
  }
}

/* ==========================================================
   DESKTOP · Historial · estado en línea con el título del documento
   2026-05-19-history-desktop-docstatus-inline1
   - Solo afecta al listado plano por fecha estricta
   - Sube Esperando/Aprobado/Pendiente/Cobrado a la línea del título
   - Mantiene las acciones visuales en su zona derecha inferior
   - No toca cabecera, filtros, scroll, calendario ni móvil
   ========================================================== */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  #fullHistoryModal .history-flat-list > li.li-doc-item.history-flat-doc-item {
    grid-template-columns:
      68px
      minmax(320px, 1fr)
      minmax(240px, 420px)
      minmax(150px, 190px) !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
    background: #b4b4b5 !important;
  }

  #fullHistoryModal
    .history-flat-list
    > li.li-doc-item.history-flat-doc-item
    .history-date-badge {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    align-self: stretch !important;
  }

  #fullHistoryModal
    .history-flat-list
    > li.li-doc-item.history-flat-doc-item
    span.doc-title {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    min-width: 0 !important;
  }

  #fullHistoryModal
    .history-flat-list
    > li.li-doc-item.history-flat-doc-item
    .status-select {
    grid-column: 3 !important;
    grid-row: 1 !important;
    align-self: start !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #fullHistoryModal
    .history-flat-list
    > li.li-doc-item.history-flat-doc-item
    .acciones-factura {
    grid-column: 4 !important;
    grid-row: 2 !important;
    align-self: end !important;
    justify-self: end !important;
    justify-content: flex-end !important;
    width: auto !important;
    margin: 0 !important;
  }
}

@media (min-width: 981px) and (max-width: 1440px) and (hover: hover) and (pointer: fine) {
  #fullHistoryModal .history-flat-list > li.li-doc-item.history-flat-doc-item {
    grid-template-columns:
      68px
      minmax(260px, 1fr)
      minmax(220px, 320px) !important;
  }

  #fullHistoryModal
    .history-flat-list
    > li.li-doc-item.history-flat-doc-item
    .acciones-factura {
    grid-column: 2 / -1 !important;
    grid-row: 2 !important;
    justify-self: end !important;
  }
}

/* ==========================================================
   DESKTOP · Historial · restauración robusta agrupado por cliente
   2026-05-19-history-desktop-clientcards-restore1
   - Corrige la cabecera de las tarjetas en "Orden: cliente"
   - Evita que el botón de cabecera quede colapsado en una franja mínima
   - Mantiene intacto el ajuste del estado en línea del listado por fecha
   - No toca móvil ni lógica
   ========================================================== */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  #fullHistoryModal
    #fullHistoryContent.history-content-area
    > .client-history-card.history-client-collapsible {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    transform: none !important;
  }

  #fullHistoryModal
    #fullHistoryContent.history-content-area
    > .client-history-card.history-client-collapsible
    > button.client-header.history-client-toggle {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;

    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 52px !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 11px 13px !important;
    box-sizing: border-box !important;
    overflow: visible !important;

    line-height: normal !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  #fullHistoryModal
    #fullHistoryContent.history-content-area
    > .client-history-card.history-client-collapsible
    > button.client-header.history-client-toggle
    .history-client-arrow,
  #fullHistoryModal
    #fullHistoryContent.history-content-area
    > .client-history-card.history-client-collapsible
    > button.client-header.history-client-toggle
    .history-client-main,
  #fullHistoryModal
    #fullHistoryContent.history-content-area
    > .client-history-card.history-client-collapsible
    > button.client-header.history-client-toggle
    .history-client-summary {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  #fullHistoryModal
    #fullHistoryContent.history-content-area
    > .client-history-card.history-client-collapsible
    > button.client-header.history-client-toggle
    .history-client-main {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }

  #fullHistoryModal
    #fullHistoryContent.history-content-area
    > .client-history-card.history-client-collapsible
    > button.client-header.history-client-toggle
    .history-client-summary {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
  }

  #fullHistoryModal
    #fullHistoryContent.history-content-area
    > .client-history-card.history-client-collapsible.is-collapsed
    > .history-client-body[hidden] {
    display: none !important;
  }
}

/* ==========================================================
   DESKTOP · Historial · scroll real en Orden: cliente
   2026-05-19-history-desktop-clientcards-scroll2
   - Evita que muchas tarjetas de cliente se compriman para caber
   - Mantiene su altura natural y fuerza scroll vertical del listado
   - Corrige especialmente el caso Fuente: Local con muchos documentos
   - No toca móvil, lógica, cabecera, filtros ni fecha estricta
   ========================================================== */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  #fullHistoryModal
    #fullHistoryContent.history-content-area
    > .client-history-card.history-client-collapsible,
  #fullHistoryModal
    #fullHistoryContent.history-content-area
    > .history-flat-list,
  #fullHistoryModal #fullHistoryContent.history-content-area > .empty-msg {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
  }

  #fullHistoryModal
    #fullHistoryContent.history-content-area
    > .client-history-card.history-client-collapsible {
    min-height: max-content !important;
  }

  #fullHistoryModal
    #fullHistoryContent.history-content-area
    > .client-history-card.history-client-collapsible
    > .history-client-body:not([hidden]),
  #fullHistoryModal
    #fullHistoryContent.history-content-area
    > .client-history-card.history-client-collapsible
    > .history-client-body:not([hidden])
    > .client-docs,
  #fullHistoryModal
    #fullHistoryContent.history-content-area
    > .client-history-card.history-client-collapsible
    > .history-client-body:not([hidden])
    > .client-docs
    > .li-doc-item {
    flex-shrink: 0 !important;
  }
}

/* ==========================================================
   DESKTOP · Biblioteca de precios · rediseño visual completo
   2026-05-20-price-library-desktop-pro1
   - Mantiene móvil intacto: solo PC con ratón
   - Ordena toolbar, resumen, listado y editor en layout desktop real
   - Compacta filtros y acciones sin tocar lógica
   - Refuerza legibilidad, scroll del modal y jerarquía visual
   ========================================================== */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  #priceLibraryModal {
    --pcp-price-desktop-shell: #0b111a;
    --pcp-price-desktop-panel: #141f2f;
    --pcp-price-desktop-panel-2: #101a29;
    --pcp-price-desktop-border: rgba(129, 153, 191, 0.3);
    --pcp-price-desktop-border-strong: rgba(129, 153, 191, 0.48);
    --pcp-price-desktop-title: #f8fafc;
    --pcp-price-desktop-text: #dbe5f2;
    --pcp-price-desktop-muted: #aebbd0;
    --pcp-price-desktop-soft: #0f172a;
    --pcp-price-desktop-field: #f8fbff;
    --pcp-price-desktop-field-text: #0f172a;
  }

  #priceLibraryModal.modal-backdrop {
    padding: 14px !important;
    box-sizing: border-box !important;
  }

  #priceLibraryModal .modal.modal--wide {
    width: min(1660px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    max-height: calc(100vh - 28px) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border: 1px solid rgba(148, 163, 184, 0.34) !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, #0c1320 0%, #0a111d 100%) !important;
    box-shadow: 0 28px 70px rgba(2, 6, 23, 0.48) !important;
    left: 0px !important;
  }

  #priceLibraryModal .modal-header {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px 18px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 18px !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important;
    background: var(--pcp-price-desktop-shell) !important;
  }

  #priceLibraryModal .modal-header > div {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  #priceLibraryModal .modal-title {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--pcp-price-desktop-title) !important;
    font-size: 1.18rem !important;
    line-height: 1.16 !important;
    letter-spacing: -0.01em !important;
    font-weight: 900 !important;
  }

  #priceLibraryModal .modal-subtitle {
    max-width: 900px !important;
    margin: 0 !important;
    color: var(--pcp-price-desktop-muted) !important;
    font-size: 0.84rem !important;
    line-height: 1.34 !important;
    font-weight: 650 !important;
  }

  #priceLibraryModal #closePriceLibraryModalBtn.buttonclear {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(248, 113, 113, 0.54) !important;
    border-radius: 15px !important;
    background: linear-gradient(
      180deg,
      rgba(153, 27, 27, 0.98),
      rgba(127, 29, 29, 0.98)
    ) !important;
    color: #fff1f2 !important;
    font-size: 1.22rem !important;
    line-height: 1 !important;
    box-shadow: 0 14px 24px rgba(127, 29, 29, 0.24) !important;
  }

  #priceLibraryModal .modal-body.price-lib-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px 16px 16px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(430px, 0.92fr) minmax(560px, 1.08fr) !important;
    grid-template-areas:
      "toolbar toolbar"
      "summary summary"
      "list editor" !important;
    align-content: start !important;
    align-items: start !important;
    gap: 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: linear-gradient(180deg, #192331 0%, #9ca2ab 100%) !important;
  }

  #priceLibraryModal .price-lib-toolbar,
  #priceLibraryModal .price-lib-resumen,
  #priceLibraryModal .price-lib-listado,
  #priceLibraryModal .price-lib-editor {
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid var(--pcp-price-desktop-border) !important;
    border-radius: 20px !important;
    background: linear-gradient(
      180deg,
      rgba(20, 31, 47, 0.98),
      rgba(15, 24, 38, 0.98)
    ) !important;
    color: var(--pcp-price-desktop-text) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 16px 32px rgba(15, 23, 42, 0.12) !important;
  }

  #priceLibraryModal .price-lib-toolbar {
    grid-area: toolbar !important;
    padding: 11px 12px !important;
    display: grid !important;
    grid-template-columns: minmax(520px, 1.18fr) minmax(480px, 0.82fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  #priceLibraryModal .price-lib-filtros {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(250px, 1.4fr) 170px 190px !important;
    align-items: stretch !important;
    gap: 9px !important;
  }

  #priceLibraryModal .price-lib-filtro-item,
  #priceLibraryModal .price-lib-field {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 7px 8px 8px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    border: 1px solid rgba(148, 163, 184, 0.24) !important;
    border-radius: 14px !important;
    background: rgba(8, 18, 32, 0.72) !important;
    color: var(--pcp-price-desktop-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  }

  #priceLibraryModal .price-lib-filtro-label,
  #priceLibraryModal .price-lib-field > span {
    margin: 0 !important;
    color: #dbeafe !important;
    font-size: 0.75rem !important;
    font-weight: 830 !important;
    line-height: 1.14 !important;
    letter-spacing: 0.01em !important;
  }

  #priceLibraryModal .price-lib-input,
  #priceLibraryModal textarea.price-lib-input {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(129, 153, 191, 0.42) !important;
    border-radius: 12px !important;
    background: var(--pcp-price-desktop-field) !important;
    color: var(--pcp-price-desktop-field-text) !important;
    font-size: 0.86rem !important;
    font-weight: 720 !important;
    line-height: 1.2 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  }

  #priceLibraryModal textarea.price-lib-input {
    min-height: 96px !important;
    height: auto !important;
    padding: 10px 11px !important;
    line-height: 1.4 !important;
    resize: vertical !important;
  }

  #priceLibraryModal .price-lib-input--select {
    padding-right: 34px !important;
  }

  #priceLibraryModal input.price-lib-input::placeholder,
  #priceLibraryModal textarea.price-lib-input::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
    font-weight: 620 !important;
  }

  #priceLibraryModal .price-lib-input:focus,
  #priceLibraryModal textarea.price-lib-input:focus {
    outline: none !important;
    border-color: rgba(96, 165, 250, 0.88) !important;
    box-shadow:
      0 0 0 3px rgba(59, 130, 246, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  }

  #priceLibraryModal .price-lib-acciones {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    align-content: stretch !important;
  }

  #priceLibraryModal .price-lib-acciones button,
  #priceLibraryModal .price-lib-toggle-btn,
  #priceLibraryModal .price-lib-form-actions button,
  #priceLibraryModal .price-lib-item-btn {
    min-width: 0 !important;
    min-height: 42px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.42rem !important;
    border-radius: 13px !important;
    font-size: 0.82rem !important;
    font-weight: 830 !important;
    line-height: 1.18 !important;
    white-space: nowrap !important;
    text-align: center !important;
    box-shadow: 0 12px 24px rgba(2, 6, 23, 0.18) !important;
  }

  #priceLibraryModal .price-lib-acciones .price-lib-btn,
  #priceLibraryModal .price-lib-toggle-btn,
  #priceLibraryModal .price-lib-form-actions .btn-soft,
  #priceLibraryModal .price-lib-item-btn {
    border: 1px solid rgba(148, 163, 184, 0.34) !important;
    background: rgba(22, 31, 46, 0.96) !important;
    color: var(--pcp-price-desktop-title) !important;
  }

  #priceLibraryModal #priceLibLoadDemoBtn {
    border-color: rgba(96, 165, 250, 0.54) !important;
    background: linear-gradient(
      180deg,
      rgba(37, 99, 235, 0.98),
      rgba(29, 78, 216, 0.98)
    ) !important;
    color: #eff6ff !important;
  }

  #priceLibraryModal #priceLibExportBtn,
  #priceLibraryModal #priceLibImportBtn {
    border-color: rgba(167, 139, 250, 0.52) !important;
    background: linear-gradient(
      180deg,
      rgba(124, 58, 237, 0.98),
      rgba(67, 56, 202, 0.98)
    ) !important;
    color: #f5f3ff !important;
  }

  #priceLibraryModal #priceLibAddItemBtn,
  #priceLibraryModal .price-lib-form-actions .btn-primary {
    border: 1px solid rgba(74, 222, 128, 0.56) !important;
    background: linear-gradient(
      180deg,
      rgba(22, 163, 74, 0.98),
      rgba(21, 128, 61, 0.98)
    ) !important;
    color: #f0fdf4 !important;
  }

  #priceLibraryModal .price-lib-resumen {
    grid-area: summary !important;
    min-height: 0 !important;
    padding: 10px 12px !important;
    color: var(--pcp-price-desktop-muted) !important;
    font-size: 0.84rem !important;
    line-height: 1.36 !important;
    font-weight: 720 !important;
    border-color: rgba(96, 165, 250, 0.34) !important;
    background: linear-gradient(
      180deg,
      rgba(12, 22, 36, 0.98),
      rgba(10, 18, 30, 0.98)
    ) !important;
  }

  #priceLibraryModal .price-lib-listado {
    grid-area: list !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #priceLibraryModal .price-lib-listado-header {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
  }

  #priceLibraryModal .price-lib-listado-titulo,
  #priceLibraryModal #priceLibEditorTitulo {
    margin: 0 !important;
    color: var(--pcp-price-desktop-title) !important;
    font-size: 0.98rem !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em !important;
  }

  #priceLibraryModal .price-lib-toggle-btn {
    min-width: 162px !important;
    border-color: rgba(96, 165, 250, 0.48) !important;
    background: rgba(30, 41, 59, 0.96) !important;
    color: #dbeafe !important;
    box-shadow: none !important;
  }

  #priceLibraryModal .price-lib-list {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    list-style: none !important;
    background: transparent !important;
  }

  #priceLibraryModal .price-lib-item {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 11px 12px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    border: 1px solid rgba(129, 153, 191, 0.26) !important;
    border-radius: 16px !important;
    background: rgba(9, 18, 31, 0.82) !important;
    color: var(--pcp-price-desktop-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  }

  #priceLibraryModal .price-lib-item-header,
  #priceLibraryModal .price-lib-item-footer {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
  }

  #priceLibraryModal .price-lib-item-nombre {
    min-width: 0 !important;
    color: var(--pcp-price-desktop-title) !important;
    font-size: 0.94rem !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    overflow-wrap: anywhere !important;
  }

  #priceLibraryModal .price-lib-item-etiquetas {
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 5px !important;
  }

  #priceLibraryModal .price-lib-chip {
    max-width: 100% !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    line-height: 1.12 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #priceLibraryModal
    .price-lib-chip:not(.price-lib-chip--tipo-servicio):not(
      .price-lib-chip--tipo-material
    ):not(.price-lib-chip--archivado) {
    border-color: rgba(148, 163, 184, 0.32) !important;
    background: rgba(30, 41, 59, 0.98) !important;
    color: #d6e0ec !important;
  }

  #priceLibraryModal .price-lib-chip--tipo-servicio {
    border-color: rgba(96, 165, 250, 0.54) !important;
    background: rgba(30, 64, 175, 0.34) !important;
    color: #dbeafe !important;
  }

  #priceLibraryModal .price-lib-chip--tipo-material {
    border-color: rgba(74, 222, 128, 0.54) !important;
    background: rgba(22, 101, 52, 0.4) !important;
    color: #dcfce7 !important;
  }

  #priceLibraryModal .price-lib-chip--archivado {
    border-color: rgba(192, 132, 252, 0.54) !important;
    background: rgba(107, 33, 168, 0.4) !important;
    color: #f3e8ff !important;
  }

  #priceLibraryModal .price-lib-item-body {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(200px, 0.9fr) !important;
    gap: 10px !important;
    color: var(--pcp-price-desktop-muted) !important;
    font-size: 0.82rem !important;
    line-height: 1.4 !important;
  }

  #priceLibraryModal .price-lib-item-body-col,
  #priceLibraryModal .price-lib-item-precios,
  #priceLibraryModal .price-lib-item-notas {
    min-width: 0 !important;
    margin: 0 !important;
    color: var(--pcp-price-desktop-muted) !important;
  }

  #priceLibraryModal .price-lib-item-precios {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }

  #priceLibraryModal .price-lib-item-notas {
    padding: 8px 9px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    border-radius: 12px !important;
    background: rgba(15, 23, 36, 0.84) !important;
    line-height: 1.4 !important;
  }

  #priceLibraryModal .price-lib-item-fechas {
    min-width: 0 !important;
    color: rgba(203, 213, 225, 0.76) !important;
    font-size: 0.74rem !important;
    line-height: 1.28 !important;
    font-weight: 700 !important;
  }

  #priceLibraryModal .price-lib-item-acciones {
    min-width: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 7px !important;
  }

  #priceLibraryModal .price-lib-item-btn {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 11px !important;
    font-size: 0.77rem !important;
    font-weight: 820 !important;
    border-radius: 11px !important;
    box-shadow: none !important;
  }

  #priceLibraryModal .price-lib-item-btn--peligro {
    border-color: rgba(248, 113, 113, 0.56) !important;
    background: rgba(127, 29, 29, 0.44) !important;
    color: #fecaca !important;
  }

  #priceLibraryModal .price-lib-editor {
    grid-area: editor !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  #priceLibraryModal #priceLibForm {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  #priceLibraryModal .price-lib-form-grid {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #priceLibraryModal .price-lib-field--full {
    grid-column: 1 / -1 !important;
  }

  #priceLibraryModal .price-lib-form-actions {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 9px !important;
  }

  #priceLibraryModal .price-lib-form-actions button {
    min-width: 172px !important;
    height: 42px !important;
  }

  #priceLibraryModal .price-lib-form-actions #priceLibCancelarEdicionBtn {
    border-color: rgba(148, 163, 184, 0.38) !important;
    background: rgba(30, 41, 59, 0.98) !important;
    color: var(--pcp-price-desktop-title) !important;
  }

  #priceLibraryModal .price-lib-listado--collapsed {
    padding-bottom: 12px !important;
  }

  #priceLibraryModal .price-lib-listado--collapsed .price-lib-list {
    display: none !important;
  }
}

@media (min-width: 981px) and (max-width: 1320px) and (hover: hover) and (pointer: fine) {
  #priceLibraryModal .modal-body.price-lib-body {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "toolbar"
      "summary"
      "list"
      "editor" !important;
  }

  #priceLibraryModal .price-lib-toolbar {
    grid-template-columns: 1fr !important;
  }

  #priceLibraryModal .price-lib-filtros {
    grid-template-columns: minmax(250px, 1fr) 170px 190px !important;
  }
}

@media (min-width: 1450px) and (hover: hover) and (pointer: fine) {
  #priceLibraryModal .price-lib-acciones {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* =========================================================
   DESKTOP · Biblioteca de precios · ajuste correctivo PRO 1.1
   - Evita desbordes de texto en la botonera superior.
   - Mantiene el resumen separado del listado/editor.
   ========================================================= */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  #priceLibraryModal .modal-body.price-lib-body {
    row-gap: 16px !important;
  }

  #priceLibraryModal .price-lib-resumen {
    display: block !important;
    min-height: 44px !important;
    margin-bottom: 2px !important;
    padding-block: 11px !important;
    position: relative !important;
    z-index: 1 !important;
  }

  #priceLibraryModal .price-lib-listado,
  #priceLibraryModal .price-lib-editor {
    margin-top: 0 !important;
    position: relative !important;
    z-index: 0 !important;
  }

  #priceLibraryModal .price-lib-acciones {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #priceLibraryModal .price-lib-acciones button {
    min-height: 46px !important;
    padding: 8px 12px !important;
    line-height: 1.22 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
}

/* ==========================================================
   Gastos / Compras · Historial escritorio PRO 1
   2026-05-20-expenses-history-desktop-pro1
   - Rediseño del modal #expensesHistoryModal.
   - Mantiene estructura lista + vista previa con scroll real.
   - Anula el desplazamiento heredado de modales desktop.
   ========================================================== */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  #expensesHistoryModal {
    --pcp-eh-desktop-bg: #08111d;
    --pcp-eh-desktop-surface: rgba(10, 18, 31, 0.98);
    --pcp-eh-desktop-panel: rgba(15, 27, 44, 0.98);
    --pcp-eh-desktop-panel-soft: rgba(18, 32, 51, 0.98);
    --pcp-eh-desktop-border: rgba(129, 153, 191, 0.34);
    --pcp-eh-desktop-border-soft: rgba(148, 163, 184, 0.22);
    --pcp-eh-desktop-title: #f8fafc;
    --pcp-eh-desktop-text: #e2e8f0;
    --pcp-eh-desktop-muted: #bdcadb;
    background: rgba(2, 6, 23, 0.7) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  #expensesHistoryModal .modal.exp-hist-modal {
    position: relative !important;
    inset: auto !important;
    top: 25px !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: min(1320px, calc(100vw - 72px)) !important;
    max-width: min(1320px, calc(100vw - 72px)) !important;
    height: min(88vh, 920px) !important;
    max-height: min(88vh, 920px) !important;
    margin: 4vh auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border: 1px solid var(--pcp-eh-desktop-border) !important;
    border-radius: 26px !important;
    background:
      radial-gradient(
        circle at 14% 0%,
        rgba(37, 99, 235, 0.11),
        transparent 28%
      ),
      linear-gradient(180deg, #0a1422 0%, #08111d 100%) !important;
    color: var(--pcp-eh-desktop-text) !important;
    overflow: hidden !important;
    box-shadow: 0 28px 74px rgba(2, 6, 23, 0.5) !important;
  }

  #expensesHistoryModal .exp-hist-head {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 15px 18px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 18px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--pcp-eh-desktop-border-soft) !important;
    background: rgba(7, 13, 23, 0.98) !important;
  }

  #expensesHistoryModal .exp-hist-title {
    min-width: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    color: var(--pcp-eh-desktop-title) !important;
    font-size: 1.16rem !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
  }

  #expensesHistoryModal .exp-hist-title strong {
    color: var(--pcp-eh-desktop-title) !important;
    font-size: 1.16rem !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
  }

  #expensesHistoryModal .exp-hist-title .muted {
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(96, 165, 250, 0.34) !important;
    border-radius: 999px !important;
    background: rgba(30, 64, 175, 0.28) !important;
    color: #dbeafe !important;
    font-size: 0.82rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    opacity: 1 !important;
  }

  #expensesHistoryModal .exp-hist-head-actions {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }

  #expensesHistoryModal #ehRefreshBtn,
  #expensesHistoryModal #closeExpensesHistoryBtn {
    width: auto !important;
    min-width: 132px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    font-size: 0.88rem !important;
    font-weight: 860 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  #expensesHistoryModal #ehRefreshBtn {
    border: 1px solid rgba(96, 165, 250, 0.56) !important;
    background: linear-gradient(
      180deg,
      rgba(37, 99, 235, 0.98),
      rgba(30, 64, 175, 0.96)
    ) !important;
    color: #eff6ff !important;
  }

  #expensesHistoryModal #closeExpensesHistoryBtn {
    min-width: 116px !important;
    border: 1px solid rgba(248, 113, 113, 0.62) !important;
    background: linear-gradient(
      180deg,
      rgba(159, 36, 41, 0.98),
      rgba(127, 29, 29, 0.98)
    ) !important;
    color: #fff1f2 !important;
  }

  #expensesHistoryModal .exp-hist-toolbar {
    width: calc(100% - 36px) !important;
    min-width: 0 !important;
    margin: 14px auto 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(360px, 1fr) 230px !important;
    gap: 12px !important;
    border: 1px solid var(--pcp-eh-desktop-border) !important;
    border-radius: 18px !important;
    background: linear-gradient(
      180deg,
      rgba(23, 38, 58, 0.98),
      rgba(15, 27, 44, 0.98)
    ) !important;
    box-shadow: 0 16px 32px rgba(2, 6, 23, 0.18) !important;
  }

  #expensesHistoryModal .exp-hist-toolbar #ehSearch,
  #expensesHistoryModal .exp-hist-toolbar #ehStatusFilter {
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
    border-radius: 14px !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 0.98rem !important;
    font-weight: 720 !important;
    line-height: 1 !important;
    opacity: 1 !important;
  }

  #expensesHistoryModal .exp-hist-toolbar #ehSearch::placeholder {
    color: #64748b !important;
    font-weight: 650 !important;
    opacity: 1 !important;
  }

  #expensesHistoryModal .exp-hist-body {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 14px 18px 18px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(360px, 410px) minmax(0, 1fr) !important;
    gap: 14px !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  #expensesHistoryModal .exp-hist-list {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--pcp-eh-desktop-border-soft) !important;
    border-radius: 20px !important;
    background: rgba(12, 21, 35, 0.94) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  #expensesHistoryModal #ehList.eh-list {
    width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 11px !important;
    list-style: none !important;
    overflow: visible !important;
    background: transparent !important;
  }

  #expensesHistoryModal .eh-group {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  #expensesHistoryModal .eh-group-details {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(129, 153, 191, 0.28) !important;
    border-radius: 17px !important;
    background: linear-gradient(
      180deg,
      rgba(17, 30, 49, 0.98),
      rgba(13, 24, 40, 0.98)
    ) !important;
    color: var(--pcp-eh-desktop-text) !important;
    overflow: hidden !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  }

  #expensesHistoryModal .eh-group-summary {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px 13px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    border: 0 !important;
    background: rgba(15, 27, 44, 0.98) !important;
    color: var(--pcp-eh-desktop-title) !important;
    font-size: 0.92rem !important;
    font-weight: 880 !important;
    line-height: 1.24 !important;
    list-style: none !important;
  }

  #expensesHistoryModal .eh-group-summary::before {
    content: "▸" !important;
    width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(96, 165, 250, 0.34) !important;
    border-radius: 999px !important;
    background: rgba(30, 64, 175, 0.28) !important;
    color: #dbeafe !important;
    font-size: 0.76rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  #expensesHistoryModal .eh-group-details[open] .eh-group-summary::before {
    content: "▾" !important;
  }

  #expensesHistoryModal .eh-group-details[open] .eh-group-summary {
    border-bottom: 1px solid rgba(134, 239, 172, 0.22) !important;
    background: linear-gradient(
      180deg,
      rgba(22, 101, 52, 0.72),
      rgba(20, 83, 45, 0.92)
    ) !important;
    color: #ecfdf5 !important;
  }

  #expensesHistoryModal .eh-group-name {
    min-width: 0 !important;
    color: inherit !important;
    font-size: 0.93rem !important;
    font-weight: 900 !important;
    line-height: 1.22 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #expensesHistoryModal .eh-group-meta {
    min-height: 29px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    border-radius: 999px !important;
    background: rgba(15, 23, 36, 0.74) !important;
    color: #dbe7f4 !important;
    font-size: 0.78rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #expensesHistoryModal .eh-group-details[open] .eh-group-meta {
    border-color: rgba(220, 252, 231, 0.28) !important;
    background: rgba(6, 37, 23, 0.34) !important;
    color: #dcfce7 !important;
  }

  #expensesHistoryModal .eh-group-list {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 11px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    list-style: none !important;
    background: rgba(7, 14, 24, 0.72) !important;
  }

  #expensesHistoryModal .eh-item {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 11px 12px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(148, 163, 184, 0.24) !important;
    border-radius: 15px !important;
    background: rgba(18, 31, 49, 0.98) !important;
    color: var(--pcp-eh-desktop-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.028) !important;
  }

  #expensesHistoryModal .eh-item[data-active="true"] {
    border: 2px solid rgba(96, 165, 250, 0.92) !important;
    background: linear-gradient(
      180deg,
      rgba(30, 64, 175, 0.34),
      rgba(18, 31, 49, 0.98)
    ) !important;
    box-shadow:
      0 0 0 2px rgba(96, 165, 250, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  }

  #expensesHistoryModal .eh-item-top {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
  }

  #expensesHistoryModal .eh-item-title {
    min-width: 0 !important;
    color: var(--pcp-eh-desktop-title) !important;
    font-size: 0.94rem !important;
    font-weight: 900 !important;
    line-height: 1.22 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #expensesHistoryModal .eh-badge {
    min-height: 28px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-size: 0.77rem !important;
    font-weight: 860 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #expensesHistoryModal .eh-badge--pendiente {
    border: 1px solid rgba(251, 191, 36, 0.5) !important;
    background: rgba(120, 53, 15, 0.42) !important;
    color: #fde68a !important;
  }

  #expensesHistoryModal .eh-badge--pagada {
    border: 1px solid rgba(74, 222, 128, 0.5) !important;
    background: rgba(22, 101, 52, 0.46) !important;
    color: #dcfce7 !important;
  }

  #expensesHistoryModal .eh-item-meta {
    width: 100% !important;
    min-width: 0 !important;
    margin: 8px 0 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 7px !important;
    color: var(--pcp-eh-desktop-muted) !important;
    font-size: 0.82rem !important;
    font-weight: 730 !important;
    line-height: 1.28 !important;
  }

  #expensesHistoryModal .eh-item-meta > div:last-child {
    color: var(--pcp-eh-desktop-title) !important;
    font-size: 0.92rem !important;
    font-weight: 900 !important;
    font-variant-numeric: tabular-nums !important;
  }

  #expensesHistoryModal .exp-hist-view {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid var(--pcp-eh-desktop-border) !important;
    border-radius: 20px !important;
    background: linear-gradient(
      180deg,
      rgba(20, 34, 54, 0.98),
      rgba(12, 22, 37, 0.98)
    ) !important;
    overflow: hidden !important;
  }

  #expensesHistoryModal .exp-hist-viewbar {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px 13px !important;
    box-sizing: border-box !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--pcp-eh-desktop-border-soft) !important;
    background: rgba(11, 20, 34, 0.98) !important;
  }

  #expensesHistoryModal .eh-meta {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(96, 165, 250, 0.3) !important;
    border-radius: 13px !important;
    background: rgba(30, 64, 175, 0.18) !important;
    color: #dbeafe !important;
    font-size: 0.88rem !important;
    font-weight: 820 !important;
    line-height: 1.32 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #expensesHistoryModal .eh-actions {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  #expensesHistoryModal .eh-status {
    min-height: 42px !important;
    margin: 0 !important;
    padding: 5px 7px !important;
    display: inline-grid !important;
    grid-template-columns: auto 138px !important;
    align-items: center !important;
    gap: 7px !important;
    border: 1px solid rgba(134, 239, 172, 0.42) !important;
    border-radius: 13px !important;
    background: rgba(20, 83, 45, 0.34) !important;
  }

  #expensesHistoryModal .eh-status .muted {
    margin: 0 !important;
    color: #dcfce7 !important;
    font-size: 0.78rem !important;
    font-weight: 850 !important;
    opacity: 1 !important;
  }

  #expensesHistoryModal .eh-status select {
    width: 138px !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(134, 239, 172, 0.34) !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-size: 0.84rem !important;
    font-weight: 820 !important;
  }

  #expensesHistoryModal .eh-actions button {
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    border-radius: 12px !important;
    font-size: 0.82rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  #expensesHistoryModal #ehEditBtn,
  #expensesHistoryModal #ehPrintBtn,
  #expensesHistoryModal #ehFullscreenBtn {
    border: 1px solid rgba(96, 165, 250, 0.44) !important;
    background: linear-gradient(
      180deg,
      rgba(30, 64, 175, 0.6),
      rgba(30, 58, 138, 0.92)
    ) !important;
    color: #dbeafe !important;
  }

  #expensesHistoryModal #ehDeleteBtn {
    border: 1px solid rgba(248, 113, 113, 0.54) !important;
    background: linear-gradient(
      180deg,
      rgba(153, 27, 27, 0.72),
      rgba(127, 29, 29, 0.96)
    ) !important;
    color: #fecaca !important;
  }

  #expensesHistoryModal #ehPreview,
  #expensesHistoryModal .eh-preview {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--pcp-eh-desktop-border-soft) !important;
    background: #fff !important;
  }
}

@media (min-width: 981px) and (max-width: 1220px) and (hover: hover) and (pointer: fine) {
  #expensesHistoryModal .modal.exp-hist-modal {
    width: min(1180px, calc(100vw - 36px)) !important;
    max-width: min(1180px, calc(100vw - 36px)) !important;
  }

  #expensesHistoryModal .exp-hist-body {
    grid-template-columns: minmax(320px, 370px) minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  #expensesHistoryModal .exp-hist-viewbar {
    grid-template-columns: 1fr !important;
  }

  #expensesHistoryModal .eh-actions {
    justify-content: flex-start !important;
  }
}

/* ==========================================================
   DESKTOP · Modal exportar presupuesto / factura · Pro 1
   2026-05-20-export-modal-desktop-pro1
   - Reordena el modal en escritorio sin tocar móvil
   - Elimina el ancho antiguo al 45%
   - Mejora cabecera, acordeones, formularios y bloque de guardado
   ========================================================== */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  #exportModal {
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 10px 14px 14px !important;
    box-sizing: border-box !important;
  }

  #exportModal .modalexportar {
    position: fixed !important;
    top: calc(var(--appHeaderH, 50px) + 10px) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    width: min(1480px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    height: calc(100dvh - var(--appHeaderH, 50px) - 24px) !important;
    max-height: calc(100dvh - var(--appHeaderH, 50px) - 24px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-content: normal !important;
    align-items: stretch !important;
    overflow: hidden !important;
    border: 1px solid rgba(148, 163, 184, 0.34) !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, #0b111a 0%, #0a111d 100%) !important;
    box-shadow: 0 28px 72px rgba(2, 6, 23, 0.52) !important;
  }

  #exportModal .modalexportar > .modal-header {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
    gap: 10px !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important;
    background: #0b111a !important;
  }

  #exportModal .modalexportar > .modal-header button {
    min-width: 0 !important;
    min-height: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border-radius: 14px !important;
    white-space: nowrap !important;
    font-size: 0.9rem !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.2) !important;
  }

  #exportModal #renderPreviewBtn {
    border: 1px solid rgba(96, 165, 250, 0.55) !important;
    background: linear-gradient(180deg, #2563eb, #1d4ed8) !important;
    color: #eff6ff !important;
  }

  #exportModal #toggleAccordionBtn {
    border: 1px solid rgba(167, 139, 250, 0.58) !important;
    background: linear-gradient(180deg, #6d46d8, #5536c7) !important;
    color: #f5f3ff !important;
    display: none !important;
  }

  #exportModal #closeExportBtn.buttonclear {
    width: 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
    border: 1px solid rgba(248, 113, 113, 0.58) !important;
    background: linear-gradient(
      180deg,
      rgba(153, 27, 27, 0.98),
      rgba(127, 29, 29, 0.98)
    ) !important;
    color: #fff1f2 !important;
    font-size: 1.15rem !important;
  }

  #exportModal .modalexportar > .modal-body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 14px 16px 16px !important;
    box-sizing: border-box !important;
    display: block !important;
    overflow: hidden !important;
    background: linear-gradient(356deg, #192331 0%, #9ca2ab 100%) !important;
  }

  #exportModal .grid-2 {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }

  #exportModal .modal-left {
    width: min(1320px, 100%) !important;
    max-width: 1320px !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 4px 16px 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
  }

  #exportModal .modal-right,
  #exportModal .modal-right[aria-hidden="true"] {
    display: none !important;
  }

  #exportModal .accordion-container {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    align-content: start !important;
    gap: 12px !important;
  }

  #exportModal .accordion-container > details,
  #exportModal #invoiceModeBar.invoice-mode-bar {
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(129, 153, 191, 0.32) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: linear-gradient(
      180deg,
      rgb(48 67 96 / 98%),
      rgba(15, 24, 38, 0.98)
    ) !important;
    color: #dbe5f2 !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 16px 32px rgba(15, 23, 42, 0.12) !important;
  }

  #exportModal .accordion-container > details > summary {
    width: 65% !important;
    min-height: 28px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    border: 0 !important;
    border-bottom: 1px solid transparent !important;
    background: linear-gradient(
      180deg,
      rgba(19, 31, 48, 0.98),
      rgba(13, 24, 39, 0.98)
    ) !important;
    color: #f8fafc !important;
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.005em !important;
    cursor: pointer !important;
    list-style: none !important;
    border-radius: 16px;
  }

  #exportModal
    .accordion-container
    > details
    > summary::-webkit-details-marker {
    display: none !important;
  }

  #exportModal .accordion-container > details > summary .chev {
    flex: 0 0 auto !important;
    width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(96, 165, 250, 0.35) !important;
    border-radius: 999px !important;
    background: rgba(37, 99, 235, 0.22) !important;
    color: #bfdbfe !important;
  }

  #exportModal .accordion-container > details[open] > summary {
    border-bottom-color: rgba(96, 165, 250, 0.24) !important;
    background: linear-gradient(
      180deg,
      rgba(21, 56, 107, 0.98),
      rgba(14, 37, 75, 0.98)
    ) !important;
  }

  #exportModal .accordion-container > details[open] > summary .chev {
    border-color: rgba(74, 222, 128, 0.45) !important;
    background: rgba(22, 163, 74, 0.22) !important;
    color: #bbf7d0 !important;
  }

  #exportModal .accordion-container > details > .acc-body {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    display: block !important;
    color: #dbe5f2 !important;
    background: rgba(7, 15, 26, 0.6) !important;
  }

  #exportModal .modal-left .input-group,
  #exportModal .modal-left .input-group-1,
  #exportModal .modal-left .form-field,
  #exportModal .modal-left .payment-notes-select-group {
    min-width: 0 !important;
    gap: 5px !important;
  }

  #exportModal .modal-left label,
  #exportModal .modal-left .mini-label,
  #exportModal .modal-left .form-label,
  #exportModal .modal-left .payment-notes-label,
  #exportModal .modal-left .section-title {
    color: #dbeafe !important;
    font-size: 0.76rem !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em !important;
  }

  #exportModal
    .modal-left
    :is(
      input[type="text"],
      input[type="number"],
      input[type="email"],
      input[type="tel"],
      input[type="date"],
      textarea,
      select
    ) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(129, 153, 191, 0.42) !important;
    border-radius: 12px !important;
    background: #f8fbff !important;
    color: #0f172a !important;
    font-size: 0.88rem !important;
    font-weight: 720 !important;
    line-height: 1.2 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  }

  #exportModal .modal-left textarea,
  #exportModal .modal-left textarea.rgpd-textarea {
    min-height: 96px !important;
    height: auto !important;
    padding: 10px 11px !important;
    line-height: 1.42 !important;
    resize: vertical !important;
  }

  #exportModal .modal-left :is(input, textarea)::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
    font-weight: 620 !important;
  }

  #exportModal
    .modal-left
    :is(
      input[type="text"],
      input[type="number"],
      input[type="email"],
      input[type="tel"],
      input[type="date"],
      textarea,
      select
    ):focus {
    outline: none !important;
    border-color: rgba(96, 165, 250, 0.88) !important;
    box-shadow:
      0 0 0 3px rgba(59, 130, 246, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  }

  #exportModal .modal-left .row-inline,
  #exportModal .modal-left .row-inline-3,
  #exportModal .modal-left .row-inline-4 {
    min-width: 0 !important;
    gap: 9px !important;
    align-items: start !important;
  }

  #exportModal .modal-left .row-inline-4 {
    flex-wrap: wrap !important;
  }

  #exportModal .client-actions,
  #exportModal .payment-notes-buttons,
  #exportModal .signature-actions {
    gap: 8px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  #exportModal
    .modal-left
    :is(
      #saveClientBtn,
      #newClientBtn,
      #openClientManagerBtn,
      #addServiceBtn,
      #addServiceFromLibBtn,
      #paymentNoteInsertBtn,
      #paymentNoteSaveCurrentBtn,
      #paymentNoteDeleteBtn,
      #signatureClearBtn
    ) {
    min-height: 40px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 13px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(96, 165, 250, 0.35) !important;
    background: rgba(30, 64, 175, 0.18) !important;
    color: #eff6ff !important;
    font-size: 0.83rem !important;
    font-weight: 820 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  #exportModal .modal-left #saveClientBtn,
  #exportModal .modal-left #addServiceBtn {
    border-color: rgba(74, 222, 128, 0.42) !important;
    background: linear-gradient(
      180deg,
      rgba(22, 163, 74, 0.98),
      rgba(21, 128, 61, 0.98)
    ) !important;
    color: #f0fdf4 !important;
  }

  #exportModal .modal-left #paymentNoteDeleteBtn {
    border-color: rgba(248, 113, 113, 0.45) !important;
    background: rgba(127, 29, 29, 0.72) !important;
    color: #fff1f2 !important;
  }

  #exportModal .modal-left .subtitle,
  #exportModal .modal-left .payment-notes-help,
  #exportModal .modal-left .signature-help-text,
  #exportModal .modal-left .input-hint,
  #exportModal .modal-left small {
    color: rgba(203, 213, 225, 0.98) !important;
    font-size: 0.79rem !important;
    line-height: 1.38 !important;
  }

  #exportModal .service-lib-picker,
  #exportModal .payment-notes-toolbar,
  #exportModal .signature-box,
  #exportModal #columnsConfig,
  #exportModal #internalNotesDetails .acc-body p,
  #exportModal #rgpdDetails .input-hint {
    border-radius: 14px !important;
  }

  #exportModal .service-lib-picker,
  #exportModal .payment-notes-toolbar,
  #exportModal .signature-box {
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    background: rgba(15, 23, 42, 0.72) !important;
  }

  #exportModal .service-lib-picker,
  #exportModal .payment-notes-toolbar,
  #exportModal .signature-box {
    padding: 10px !important;
  }

  #exportModal .service-lib-picker-header,
  #exportModal .service-lib-picker-filtros,
  #exportModal .payment-notes-toolbar {
    gap: 8px !important;
  }

  #exportModal .col-chooser {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #exportModal .columnas,
  #exportModal .ivas,
  #exportModal .signature-include {
    min-height: 38px !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(148, 163, 184, 0.24) !important;
    border-radius: 12px !important;
    background: rgba(15, 23, 42, 0.72) !important;
    color: #e2e8f0 !important;
  }

  #exportModal [data-pcp-vat-group="1"] {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    justify-content: stretch !important;
  }

  #exportModal #invoiceModeBar.invoice-mode-bar {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 14px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, auto)) minmax(280px, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
  }

  #exportModal #invoiceModeBar .invoice-toggle-label {
    grid-column: 1 / -1 !important;
    width: fit-content !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(74, 222, 128, 0.36) !important;
    border-radius: 14px !important;
    background: rgba(22, 163, 74, 0.16) !important;
    color: #dcfce7 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  #exportModal
    #invoiceModeBar
    :is(#saveDocBtn, #shareWhatsappBtn, #shareEmailBtn) {
    min-height: 42px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-radius: 13px !important;
    white-space: nowrap !important;
    font-size: 0.86rem !important;
    font-weight: 850 !important;
  }

  #exportModal #invoiceFields.invoice-fields-container.active {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(300px, 1fr) minmax(260px, 0.72fr) !important;
    gap: 12px !important;
    align-items: start !important;
    border: 1px solid rgba(148, 163, 184, 0.24) !important;
    border-radius: 16px !important;
    background: rgba(8, 18, 32, 0.72) !important;
  }

  #exportModal #invoiceFields .modal-footer {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 9px !important;
  }

  #exportModal #invoiceFields .form-input-group {
    gap: 8px !important;
    align-items: stretch !important;
  }

  #exportModal #invoiceFields .btn-auto,
  #exportModal #invoiceFields #previewFullscreenBtn,
  #exportModal #invoiceFields #exportPdfBtn {
    min-height: 40px !important;
    height: auto !important;
    border-radius: 12px !important;
    font-weight: 850 !important;
  }

  #exportModal #invoiceFields .form-hint {
    color: rgba(203, 213, 225, 0.98) !important;
    font-size: 0.78rem !important;
    line-height: 1.38 !important;
  }

  #exportModal #signatureCanvas.signature-canvas {
    width: 100% !important;
    max-width: 100% !important;
    height: 170px !important;
    border-radius: 14px !important;
    background: #f8fbff !important;
  }
}

@media (min-width: 981px) and (max-width: 1279px) and (hover: hover) and (pointer: fine) {
  #exportModal .accordion-container {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #exportModal [data-pcp-vat-group="1"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #exportModal #invoiceModeBar.invoice-mode-bar {
    grid-template-columns: repeat(2, minmax(0, auto)) minmax(240px, 1fr) !important;
  }

  #exportModal #invoiceFields.invoice-fields-container.active {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ==========================================================
   DESKTOP · Gastos / Compras (facturas recibidas) · PRO 1
   2026-05-20-expenses-modal-desktop-pro1
   - Trabaja SOLO sobre escritorio: móvil/tablet táctil intactos.
   - Reordena cabecera, tabs, formulario, tickets, líneas, totales y paneles admin.
   - Neutraliza el desplazamiento heredado de .modal-backdrop .modal.
   - Evita desbordamientos, compresiones y superposiciones en resoluciones desktop.
   ========================================================== */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  #expensesModal {
    --pcp-expdesk-shell: #0b111b;
    --pcp-expdesk-shell-2: #101a29;
    --pcp-expdesk-panel: rgba(17, 29, 47, 0.98);
    --pcp-expdesk-panel-soft: rgba(15, 24, 39, 0.96);
    --pcp-expdesk-card: rgba(11, 20, 34, 0.92);
    --pcp-expdesk-border: rgba(129, 153, 191, 0.32);
    --pcp-expdesk-border-strong: rgba(129, 153, 191, 0.48);
    --pcp-expdesk-title: #f8fafc;
    --pcp-expdesk-text: #e2e8f0;
    --pcp-expdesk-muted: #cbd5e1;
    --pcp-expdesk-soft-text: #aebbd0;
    --pcp-expdesk-field: #f8fbff;
    --pcp-expdesk-field-text: #0f172a;
    --pcp-expdesk-blue: #60a5fa;
    --pcp-expdesk-purple: #c4b5fd;
    --pcp-expdesk-green: #4ade80;
    --pcp-expdesk-amber: #fbbf24;
    --pcp-expdesk-red: #fda4af;

    align-items: flex-start !important;
    justify-content: center !important;
    padding: 12px 14px 16px !important;
    box-sizing: border-box !important;
    background: rgba(2, 6, 23, 0.72) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  #expensesModal > .modal {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;

    width: min(1700px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    height: min(92vh, calc(100dvh - var(--appHeaderH, 50px) - 24px)) !important;
    max-height: min(
      92vh,
      calc(100dvh - var(--appHeaderH, 50px) - 24px)
    ) !important;
    min-height: 0 !important;

    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    overflow: hidden !important;

    border: 1px solid var(--pcp-expdesk-border-strong) !important;
    border-radius: 24px !important;
    background:
      radial-gradient(
        circle at 8% 0%,
        rgba(37, 99, 235, 0.13),
        transparent 24%
      ),
      radial-gradient(
        circle at 96% 6%,
        rgba(124, 58, 237, 0.12),
        transparent 28%
      ),
      linear-gradient(180deg, #0b111b 0%, #09111c 100%) !important;
    color: var(--pcp-expdesk-text) !important;
    box-shadow: 0 30px 84px rgba(2, 6, 23, 0.56) !important;
  }

  /* ----------------------------------------------------------
     Cabecera
     ---------------------------------------------------------- */
  #expensesModal > .modal > .modal-header {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;

    display: grid !important;
    grid-template-columns: minmax(360px, 1fr) auto 54px auto auto !important;
    align-items: center !important;
    gap: 10px !important;

    border: 0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important;
    background: rgba(8, 14, 24, 0.98) !important;
  }

  #expensesModal #expensesModalTitle {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--pcp-expdesk-title) !important;
    font-size: clamp(1.08rem, 0.98rem + 0.25vw, 1.28rem) !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #expensesModal #expSourceStatus.exp-source-status {
    justify-self: end !important;
    min-width: 0 !important;
    max-width: 330px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    box-sizing: border-box !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* 👇 CAMBIO CLAVE: Separamos el borde para no congelar el color */
    border-width: 4px !important;
    border-style: solid !important;
    /* Dejamos un color base inicial */
    border-color: rgba(96, 165, 250, 0.4);
    border-radius: 999px !important;
    background: rgba(30, 64, 175, 0.22) !important;
    color: #dbeafe !important;
    font-size: 0.82rem !important;
    font-weight: 820 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    /* 2. Aplicamos la animación al borde */
    animation: parpadeoLentoBorde 2.5s ease-in-out infinite !important;
  }
  /* 1. Definimos la animación cambiando el color del borde */
  @keyframes parpadeoLentoBorde {
    0%,
    100% {
      border-color: rgba(96, 165, 250, 0.4);
    }
    50% {
      border-color: rgba(96, 165, 250, 0.05);
    } /* Casi invisible en el medio */
  }
  #expensesModal #openExpensesStatsBtn.hib {
    width: 54px !important;
    min-width: 54px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    display: inline-grid !important;
    place-items: center !important;

    border: 1px solid rgba(196, 181, 253, 0.52) !important;
    border-radius: 14px !important;
    background: linear-gradient(
      180deg,
      rgba(124, 58, 237, 0.98),
      rgba(67, 56, 202, 0.98)
    ) !important;
    color: #f5f3ff !important;
    box-shadow: 0 12px 24px rgba(2, 6, 23, 0.18) !important;
  }

  #expensesModal #openExpensesStatsBtn .hib-img {
    width: 25px !important;
    height: 25px !important;
    display: block !important;
    filter: brightness(0) invert(1) !important;
  }

  #expensesModal #expExportBtn.btn {
    min-width: 176px !important;
    width: auto !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    border: 1px solid rgba(74, 222, 128, 0.46) !important;
    border-radius: 14px !important;
    background: linear-gradient(
      180deg,
      rgba(22, 163, 74, 0.98),
      rgba(21, 128, 61, 0.98)
    ) !important;
    color: #f0fdf4 !important;
    font-size: 0.88rem !important;
    font-weight: 860 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: 0 12px 24px rgba(2, 6, 23, 0.18) !important;
  }

  #expensesModal #closeExpensesModalBtn.buttonclear {
    min-width: 118px !important;
    width: auto !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid rgba(248, 113, 113, 0.56) !important;
    border-radius: 14px !important;
    background: linear-gradient(
      180deg,
      rgba(153, 27, 27, 0.98),
      rgba(127, 29, 29, 0.98)
    ) !important;
    color: #fff1f2 !important;
    font-size: 0.88rem !important;
    font-weight: 860 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: 0 12px 24px rgba(2, 6, 23, 0.18) !important;
  }

  #expensesModal
    :is(
      #openExpensesStatsBtn.hib,
      #expExportBtn.btn,
      #closeExpensesModalBtn.buttonclear
    ):hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.05) !important;
  }

  /* ----------------------------------------------------------
     Cuerpo del modal + pestañas
     ---------------------------------------------------------- */
  #expensesModal > .modal > .modal-body.exp-modal-body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 14px 14px !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow: hidden !important;

    background: linear-gradient(180deg, #121e30 0%, #edf2f8 100%) !important;
  }

  #expensesModal .exp-tabs {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px !important;
    box-sizing: border-box !important;

    display: grid !important;
    grid-template-columns: 1fr 1fr 1.24fr 1.08fr 0.9fr !important;
    gap: 8px !important;
    align-items: stretch !important;

    border: 1px solid var(--pcp-expdesk-border) !important;
    border-radius: 18px !important;
    background: linear-gradient(
      180deg,
      rgba(17, 29, 47, 0.98),
      rgba(12, 22, 37, 0.98)
    ) !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12) !important;
  }

  #expensesModal .exp-tabs > button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 7px 12px !important;
    box-sizing: border-box !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 13px !important;
    border: 1px solid rgba(148, 163, 184, 0.32) !important;
    background: rgba(30, 41, 59, 0.98) !important;
    color: #e2e8f0 !important;
    font-size: 0.84rem !important;
    font-weight: 850 !important;
    line-height: 1.16 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    box-shadow: none !important;
  }

  #expensesModal .exp-tabs > button[data-active="true"] {
    border-color: rgba(74, 222, 128, 0.56) !important;
    background: linear-gradient(
      180deg,
      rgba(22, 163, 74, 0.98),
      rgba(21, 128, 61, 0.98)
    ) !important;
    color: #f0fdf4 !important;
    box-shadow: 0 10px 22px rgba(21, 128, 61, 0.18) !important;
  }

  #expensesModal .exp-tabs #openExpensesHistoryBtn.exp-history-btn {
    border-color: rgba(96, 165, 250, 0.48) !important;
    background: linear-gradient(
      180deg,
      rgba(37, 99, 235, 0.98),
      rgba(29, 78, 216, 0.98)
    ) !important;
    color: #eff6ff !important;
  }

  #expensesModal .exp-tabs > button:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.05) !important;
  }

  #expensesModal .exp-tab {
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  #expensesModal .exp-tab:not([hidden]) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  #expensesModal .exp-tab[hidden] {
    display: none !important;
  }

  /* ----------------------------------------------------------
     TAB Facturas · estructura general
     ---------------------------------------------------------- */
  #expensesModal .exp-split {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  #expensesModal .exp-main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px !important;
    box-sizing: border-box !important;

    border: 1px solid var(--pcp-expdesk-border) !important;
    border-radius: 22px !important;
    background: linear-gradient(
      180deg,
      rgba(17, 29, 47, 0.98),
      rgba(12, 22, 37, 0.98)
    ) !important;
    color: var(--pcp-expdesk-text) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.035),
      0 16px 34px rgba(15, 23, 42, 0.12) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
  }

  #expensesModal #expForm {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  #expensesModal .exp-form-grid {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: start !important;
  }

  #expensesModal .exp-form-grid > .input-group,
  #expensesModal .exp-form-grid > .exp-checkline {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px 9px 9px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    align-items: stretch !important;

    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    border-radius: 15px !important;
    background: rgba(8, 18, 32, 0.74) !important;
    color: var(--pcp-expdesk-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.028) !important;
  }

  #expensesModal .exp-form-grid > .input-group[style*="grid-column"] {
    grid-column: 1 / -1 !important;
  }

  #expensesModal .exp-form-grid :is(label, .label) {
    margin: 0 !important;
    color: #dbeafe !important;
    font-size: 0.74rem !important;
    font-weight: 850 !important;
    line-height: 1.18 !important;
    letter-spacing: 0.01em !important;
    background: none !important;
  }

  #expensesModal .exp-form-grid :is(input, select, textarea),
  #expensesModal .exp-receipts :is(select, input),
  #expensesModal .exp-lines-actions select,
  #expensesModal .exp-table :is(input, select),
  #expensesModal .exp-admin :is(input, select, textarea) {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(129, 153, 191, 0.42) !important;
    border-radius: 12px !important;
    background: var(--pcp-expdesk-field) !important;
    color: var(--pcp-expdesk-field-text) !important;
    font-weight: 720 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  }

  #expensesModal .exp-form-grid :is(input, select),
  #expensesModal .exp-receipts :is(select, input),
  #expensesModal .exp-lines-actions select,
  #expensesModal .exp-admin :is(input, select) {
    min-height: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    font-size: 0.86rem !important;
    line-height: 1 !important;
  }

  #expensesModal .exp-form-grid textarea,
  #expensesModal .exp-admin textarea {
    min-height: 94px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 11px !important;
    font-size: 0.86rem !important;
    line-height: 1.4 !important;
    resize: vertical !important;
  }

  #expensesModal .exp-form-grid :is(input, textarea)::placeholder,
  #expensesModal .exp-admin :is(input, textarea)::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
    font-weight: 620 !important;
  }

  #expensesModal .exp-form-grid :is(input[type="date"]),
  #expensesModal .exp-admin :is(input[type="date"]) {
    color-scheme: light !important;
    padding-right: 38px !important;
  }

  #expensesModal .exp-form-grid :is(input, select, textarea):focus,
  #expensesModal .exp-receipts :is(select, input):focus,
  #expensesModal .exp-lines-actions select:focus,
  #expensesModal .exp-table :is(input, select):focus,
  #expensesModal .exp-admin :is(input, select, textarea):focus {
    outline: none !important;
    border-color: rgba(96, 165, 250, 0.88) !important;
    box-shadow:
      0 0 0 3px rgba(59, 130, 246, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  }

  #expensesModal .exp-help,
  #expensesModal .muted,
  #expensesModal .exp-footnote,
  #expensesModal .exp-receipts-hint {
    color: var(--pcp-expdesk-soft-text) !important;
    font-size: 0.76rem !important;
    line-height: 1.36 !important;
    font-weight: 670 !important;
    opacity: 1 !important;
  }

  #expensesModal .exp-checkline {
    justify-content: center !important;
  }

  #expensesModal .exp-checkline .exp-check {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    gap: 8px !important;

    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    border-radius: 12px !important;
    background: rgba(15, 23, 42, 0.7) !important;
    color: #e2e8f0 !important;
    font-size: 0.82rem !important;
    font-weight: 790 !important;
    line-height: 1.24 !important;
  }

  #expensesModal .exp-checkline .exp-check input[type="checkbox"] {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    accent-color: #22c55e !important;
  }

  #expensesModal #expIrpfRateWrap,
  #expensesModal #expRecargoRateWrap {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  #expensesModal #expIvaRate {
    margin-top: 0 !important;
  }

  /* ----------------------------------------------------------
     Tickets / recibos
     ---------------------------------------------------------- */
  #expensesModal .exp-receipts {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 11px !important;

    border: 1px solid var(--pcp-expdesk-border) !important;
    border-radius: 18px !important;
    background: rgba(8, 18, 32, 0.72) !important;
  }

  #expensesModal .exp-receipts-head {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
  }

  #expensesModal .exp-receipts-actions {
    min-width: 0 !important;
    margin: 0 !important;
  }

  #expensesModal .exp-receipts-month {
    min-width: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: auto 160px auto auto !important;
    align-items: center !important;
    justify-content: end !important;
    gap: 8px !important;
  }

  #expensesModal .exp-receipts-month label {
    color: #dbeafe !important;
    font-size: 0.75rem !important;
    font-weight: 850 !important;
  }

  #expensesModal #expAddReceiptBtn.new,
  #expensesModal #expShareReceiptsMonthBtn.btn-soft,
  #expensesModal #expDownloadReceiptsMonthBtn.btn-soft {
    min-width: 0 !important;
    min-height: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    box-sizing: border-box !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    border-radius: 12px !important;
    font-size: 0.82rem !important;
    font-weight: 840 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #expensesModal #expAddReceiptBtn.new {
    border: 1px solid rgba(74, 222, 128, 0.48) !important;
    background: linear-gradient(
      180deg,
      rgba(22, 163, 74, 0.98),
      rgba(21, 128, 61, 0.98)
    ) !important;
    color: #f0fdf4 !important;
  }

  #expensesModal #expShareReceiptsMonthBtn.btn-soft,
  #expensesModal #expDownloadReceiptsMonthBtn.btn-soft {
    border: 1px solid rgba(96, 165, 250, 0.42) !important;
    background: rgba(30, 64, 175, 0.24) !important;
    color: #dbeafe !important;
  }

  #expensesModal .exp-receipts-list {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;

    border: 1px dashed rgba(148, 163, 184, 0.28) !important;
    border-radius: 14px !important;
    background: rgba(15, 23, 42, 0.54) !important;
    color: var(--pcp-expdesk-muted) !important;
    overflow-x: auto !important;
  }

  /* ----------------------------------------------------------
     Líneas de compra
     ---------------------------------------------------------- */
  #expensesModal .exp-lines {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 11px !important;

    border: 1px solid var(--pcp-expdesk-border) !important;
    border-radius: 18px !important;
    background: rgba(8, 18, 32, 0.72) !important;
  }

  #expensesModal .exp-lines-head {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
  }

  #expensesModal .exp-lines-title {
    margin: 0 !important;
    color: var(--pcp-expdesk-title) !important;
    font-size: 0.98rem !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
  }

  #expensesModal .exp-lines-actions {
    min-width: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(250px, 320px) auto auto !important;
    align-items: center !important;
    justify-content: end !important;
    gap: 8px !important;
  }

  #expensesModal #expClearLinesBtn.buttonclear,
  #expensesModal #expAddLineBtn.btn-soft {
    min-height: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    border-radius: 12px !important;
    font-size: 0.82rem !important;
    font-weight: 840 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #expensesModal #expClearLinesBtn.buttonclear {
    border: 1px solid rgba(248, 113, 113, 0.48) !important;
    background: rgba(127, 29, 29, 0.74) !important;
    color: #fff1f2 !important;
  }

  #expensesModal #expAddLineBtn.btn-soft {
    border: 1px solid rgba(74, 222, 128, 0.46) !important;
    background: rgba(22, 101, 52, 0.42) !important;
    color: #dcfce7 !important;
  }

  #expensesModal .exp-lines-table-wrap {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    border: 1px solid rgba(148, 163, 184, 0.24) !important;
    border-radius: 16px !important;
    background: #f8fbff !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  #expensesModal .exp-table {
    width: 100% !important;
    min-width: 1040px !important;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #f8fbff !important;
    color: #0f172a !important;
    font-size: 0.84rem !important;
  }

  #expensesModal .exp-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
    margin: 0 !important;
    padding: 10px 10px !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.32) !important;
    background: #e8eef7 !important;
    color: #0f172a !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  #expensesModal .exp-table tbody td {
    min-width: 0 !important;
    /* padding: 9px 10px !important; */
    border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
    background: #ffffff !important;
    color: #0f172a !important;
    vertical-align: middle !important;
  }

  #expensesModal .exp-table tbody tr:last-child td {
    border-bottom: 0 !important;
  }

  #expensesModal .exp-table tbody td :is(input, select) {
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 9px !important;
    border-radius: 10px !important;
    font-size: 0.82rem !important;
  }

  #expensesModal .exp-table [data-out="base"],
  #expensesModal .exp-table [data-out="total"] {
    color: #0f172a !important;
    font-weight: 900 !important;
    font-variant-numeric: tabular-nums !important;
  }

  #expensesModal .exp-line-del .btn-mini.btn-danger-soft {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 11px !important;
    border: 1px solid rgba(248, 113, 113, 0.48) !important;
    background: rgba(127, 29, 29, 0.82) !important;
    color: #fff1f2 !important;
    font-size: 0.9rem !important;
    font-weight: 900 !important;
    justify-content: center;
  }

  /* ----------------------------------------------------------
     Totales + acciones finales
     ---------------------------------------------------------- */
  #expensesModal .exp-totals {
    width: min(460px, 100%) !important;
    min-width: 0 !important;
    margin: 0 0 0 auto !important;
    padding: 11px 12px !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;

    border: 1px solid rgba(74, 222, 128, 0.32) !important;
    border-radius: 18px !important;
    background: linear-gradient(
      180deg,
      rgba(20, 83, 45, 0.42),
      rgba(8, 18, 32, 0.76)
    ) !important;
  }

  #expensesModal .exp-total-row {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16) !important;
    color: var(--pcp-expdesk-muted) !important;
    font-size: 0.84rem !important;
    font-weight: 760 !important;
  }

  #expensesModal .exp-total-row strong {
    color: var(--pcp-expdesk-title) !important;
    font-size: 0.92rem !important;
    font-weight: 900 !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
  }

  #expensesModal .exp-total-row--grand {
    min-height: 40px !important;
    border-bottom: 0 !important;
    border-top: 1px solid rgba(74, 222, 128, 0.28) !important;
    color: #dcfce7 !important;
    font-size: 0.94rem !important;
    font-weight: 900 !important;
  }

  #expensesModal .exp-total-row--grand strong {
    color: #86efac !important;
    font-size: 1.12rem !important;
    letter-spacing: 0.01em !important;
  }

  #expensesModal .exp-form-actions {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  #expensesModal .exp-form-actions > button {
    min-width: 132px !important;
    min-height: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-radius: 13px !important;
    font-size: 0.84rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #expensesModal #expSaveBtn.btn {
    border: 1px solid rgba(74, 222, 128, 0.52) !important;
    background: linear-gradient(
      180deg,
      rgba(22, 163, 74, 0.98),
      rgba(21, 128, 61, 0.98)
    ) !important;
    color: #f0fdf4 !important;
  }

  #expensesModal :is(#expDuplicateBtn, #expPrintBtn, #expPdfBtn).btn-soft {
    border: 1px solid rgba(96, 165, 250, 0.42) !important;
    background: rgba(30, 64, 175, 0.22) !important;
    color: #dbeafe !important;
  }

  #expensesModal #expDeleteBtn.buttonclear {
    border: 1px solid rgba(248, 113, 113, 0.54) !important;
    background: rgba(127, 29, 29, 0.82) !important;
    color: #fff1f2 !important;
  }

  #expensesModal .exp-footnote {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    border: 1px dashed rgba(148, 163, 184, 0.28) !important;
    border-radius: 14px !important;
    background: rgba(8, 18, 32, 0.54) !important;
  }

  /* ----------------------------------------------------------
     Tabs administración: Proveedores / Presets / Centros de coste
     ---------------------------------------------------------- */
  #expensesModal .exp-admin {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;

    border: 1px solid var(--pcp-expdesk-border) !important;
    border-radius: 22px !important;
    background: linear-gradient(
      180deg,
      rgba(17, 29, 47, 0.98),
      rgba(12, 22, 37, 0.98)
    ) !important;
    color: var(--pcp-expdesk-text) !important;
    overflow: hidden !important;
  }

  #expensesModal .exp-admin-head {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }

  #expensesModal .exp-admin-head h3 {
    margin: 0 !important;
    color: var(--pcp-expdesk-title) !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
  }

  #expensesModal .exp-admin-head :is(button.new, button.btn) {
    min-height: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(96, 165, 250, 0.44) !important;
    background: rgba(30, 64, 175, 0.24) !important;
    color: #dbeafe !important;
    font-size: 0.82rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #expensesModal #expSupplierNewBtn.new {
    border-color: rgba(74, 222, 128, 0.52) !important;
    background: linear-gradient(
      180deg,
      rgba(22, 163, 74, 0.98),
      rgba(21, 128, 61, 0.98)
    ) !important;
    color: #f0fdf4 !important;
  }

  #expensesModal .exp-admin-grid {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    display: grid !important;
    grid-template-columns: minmax(340px, 0.82fr) minmax(560px, 1.18fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  #expensesModal .exp-admin-list,
  #expensesModal .exp-admin-form {
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;

    border: 1px solid rgba(148, 163, 184, 0.24) !important;
    border-radius: 18px !important;
    background: rgba(8, 18, 32, 0.72) !important;
    color: var(--pcp-expdesk-text) !important;
  }

  #expensesModal .exp-admin-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  #expensesModal .exp-admin-form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-content: start !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
  }

  #expensesModal .exp-admin-form > .input-group,
  #expensesModal .exp-admin-form > div.input-group {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px 9px 9px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    border-radius: 15px !important;
    background: rgba(15, 23, 42, 0.62) !important;
  }

  #expensesModal .exp-admin-form > .input-group:has(textarea),
  #expensesModal .exp-admin-form > .exp-admin-actions {
    grid-column: 1 / -1 !important;
  }

  #expensesModal .exp-admin-form label {
    margin: 0 !important;
    color: #dbeafe !important;
    font-size: 0.74rem !important;
    font-weight: 850 !important;
    line-height: 1.18 !important;
  }

  #expensesModal .exp-admin-search {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  #expensesModal .exp-admin-ul {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
  }

  #expensesModal .exp-admin-li {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 10px 11px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(148, 163, 184, 0.24) !important;
    border-radius: 14px !important;
    background: rgba(15, 23, 42, 0.72) !important;
    color: var(--pcp-expdesk-text) !important;
    font-size: 0.84rem !important;
    line-height: 1.32 !important;
    overflow: hidden !important;
  }

  #expensesModal .exp-admin-li[data-active="true"] {
    border-color: rgba(96, 165, 250, 0.68) !important;
    background: rgba(30, 64, 175, 0.3) !important;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.14) !important;
  }

  #expensesModal .exp-admin-li strong {
    color: var(--pcp-expdesk-title) !important;
    font-weight: 900 !important;
  }

  #expensesModal .exp-admin-actions {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
  }

  #expensesModal .exp-admin-actions > button {
    min-width: 150px !important;
    min-height: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-radius: 13px !important;
    font-size: 0.84rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #expensesModal .exp-admin-actions .btn {
    border: 1px solid rgba(74, 222, 128, 0.52) !important;
    background: linear-gradient(
      180deg,
      rgba(22, 163, 74, 0.98),
      rgba(21, 128, 61, 0.98)
    ) !important;
    color: #f0fdf4 !important;
  }

  #expensesModal .exp-admin-actions .btn-soft {
    border: 1px solid rgba(96, 165, 250, 0.42) !important;
    background: rgba(30, 64, 175, 0.22) !important;
    color: #dbeafe !important;
  }

  #expensesModal .exp-admin-actions .buttonclear {
    border: 1px solid rgba(248, 113, 113, 0.54) !important;
    background: rgba(127, 29, 29, 0.82) !important;
    color: #fff1f2 !important;
  }

  #expensesModal .exp-admin-search-details,
  #expensesModal .exp-admin-list-details {
    margin: 0 !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    border-radius: 15px !important;
    background: rgba(15, 23, 42, 0.66) !important;
    color: var(--pcp-expdesk-text) !important;
    overflow: hidden !important;
  }

  #expensesModal .exp-admin-search-summary {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 11px 12px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    border: 0 !important;
    background: rgba(18, 32, 51, 0.98) !important;
    color: var(--pcp-expdesk-title) !important;
    font-size: 0.84rem !important;
    font-weight: 860 !important;
    line-height: 1.22 !important;
  }

  #expensesModal .exp-admin-search-body,
  #expensesModal .exp-admin-list-body {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    background: rgba(8, 18, 32, 0.64) !important;
  }

  #expensesModal .exp-admin-search-row {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    gap: 8px !important;
    align-items: center !important;
  }

  #expensesModal .exp-admin-clear-btn {
    width: 44px !important;
    min-width: 44px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(248, 113, 113, 0.44) !important;
    background: rgba(127, 29, 29, 0.72) !important;
    color: #fff1f2 !important;
  }

  #expensesModal #expCcFormColor[type="color"] {
    min-height: 40px !important;
    height: 40px !important;
    padding: 4px !important;
    cursor: pointer !important;
  }

  /* Scrollbars discretos dentro del modal */
  #expensesModal
    :is(.exp-main, .exp-admin-ul, .exp-admin-form)::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  #expensesModal
    :is(.exp-main, .exp-admin-ul, .exp-admin-form)::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.34);
  }

  #expensesModal
    :is(.exp-main, .exp-admin-ul, .exp-admin-form)::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.2);
  }
}

/* Escritorio intermedio: evita desbordes en portátiles y monitores más estrechos. */
@media (min-width: 981px) and (max-width: 1420px) and (hover: hover) and (pointer: fine) {
  #expensesModal > .modal {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }

  #expensesModal > .modal > .modal-header {
    grid-template-columns: minmax(300px, 1fr) auto 50px auto auto !important;
    gap: 8px !important;
  }

  #expensesModal #expSourceStatus.exp-source-status {
    max-width: 250px !important;
  }

  #expensesModal .exp-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #expensesModal .exp-receipts-head {
    grid-template-columns: 1fr !important;
  }

  #expensesModal .exp-receipts-month {
    justify-content: start !important;
    grid-template-columns: auto 160px auto auto !important;
  }

  #expensesModal .exp-lines-head {
    grid-template-columns: 1fr !important;
  }

  #expensesModal .exp-lines-actions {
    justify-content: start !important;
  }

  #expensesModal .exp-admin-grid {
    grid-template-columns: minmax(310px, 0.78fr) minmax(440px, 1.22fr) !important;
  }
}

@media (min-width: 981px) and (max-width: 1210px) and (hover: hover) and (pointer: fine) {
  #expensesModal > .modal > .modal-header {
    grid-template-columns: minmax(280px, 1fr) 54px auto auto !important;
  }

  #expensesModal #expSourceStatus.exp-source-status {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    max-width: none !important;
  }

  #expensesModal .exp-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #expensesModal .exp-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #expensesModal .exp-receipts-month {
    grid-template-columns: 1fr 1fr !important;
    justify-content: stretch !important;
  }

  #expensesModal .exp-receipts-month label {
    grid-column: 1 / -1 !important;
  }

  #expensesModal .exp-lines-actions {
    grid-template-columns: 1fr 1fr !important;
    justify-content: stretch !important;
  }

  #expensesModal .exp-lines-actions #expPresetPick {
    grid-column: 1 / -1 !important;
  }

  #expensesModal .exp-admin-grid {
    grid-template-columns: 1fr !important;
    overflow-y: auto !important;
  }

  #expensesModal .exp-admin-list {
    min-height: 280px !important;
  }

  #expensesModal .exp-admin-form {
    min-height: 0 !important;
  }
}

/* ==========================================================
   DESKTOP · Gastos / Compras · PRO 2
   2026-05-20-expenses-modal-desktop-pro2
   - Corrige el encaje vertical bajo la cabecera principal de Prestax.
   - En Facturas muestra un escritorio de 2 columnas:
     izquierda = factura / gasto, derecha = proveedores.
   - Mantiene la navegación por pestañas y no toca móvil ni lógica JS.
   - Evita cortes, solapes y compresiones en escritorio amplio.
   ========================================================== */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  /* El modal debe arrancar por debajo de la cabecera principal de la app. */
  #expensesModal {
    align-items: flex-start !important;
    justify-content: center !important;
    /* padding: calc(var(--appHeaderH, 50px) + 12px) 14px 16px !important; */
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #expensesModal > .modal {
    width: min(1740px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    height: calc(100dvh - var(--appHeaderH, 50px) - 28px) !important;
    max-height: calc(100dvh - var(--appHeaderH, 50px) - 28px) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    margin-top: 50px !important;
  }

  /* Cabecera: se mantiene limpia y siempre visible. */
  #expensesModal > .modal > .modal-header {
    position: relative !important;
    z-index: 2 !important;
  }

  /* Escritorio 2 columnas SOLO cuando la pestaña activa es Facturas. */
  #expensesModal:has(.exp-tabs [data-exp-tab="invoices"][data-active="true"])
    > .modal
    > .modal-body.exp-modal-body {
    display: grid !important;
    grid-template-columns: minmax(860px, 1.28fr) minmax(460px, 0.72fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    grid-template-areas:
      "expenses-tabs expenses-tabs"
      "expenses-invoices expenses-suppliers" !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  #expensesModal:has(.exp-tabs [data-exp-tab="invoices"][data-active="true"])
    .exp-tabs {
    grid-area: expenses-tabs !important;
  }

  #expensesModal:has(.exp-tabs [data-exp-tab="invoices"][data-active="true"])
    .exp-tab[data-exp-tab-panel="invoices"] {
    grid-area: expenses-invoices !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  #expensesModal:has(.exp-tabs [data-exp-tab="invoices"][data-active="true"])
    .exp-tab[data-exp-tab-panel="suppliers"],
  #expensesModal:has(.exp-tabs [data-exp-tab="invoices"][data-active="true"])
    .exp-tab[data-exp-tab-panel="suppliers"][hidden] {
    grid-area: expenses-suppliers !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  /* Los otros paneles siguen ocultos mientras Facturas está activa. */
  #expensesModal:has(.exp-tabs [data-exp-tab="invoices"][data-active="true"])
    .exp-tab[data-exp-tab-panel="presets"],
  #expensesModal:has(.exp-tabs [data-exp-tab="invoices"][data-active="true"])
    .exp-tab[data-exp-tab-panel="costcenters"] {
    display: none !important;
  }

  /* Columna izquierda: la factura mantiene scroll interno real. */
  #expensesModal:has(.exp-tabs [data-exp-tab="invoices"][data-active="true"])
    .exp-tab[data-exp-tab-panel="invoices"]
    .exp-split,
  #expensesModal:has(.exp-tabs [data-exp-tab="invoices"][data-active="true"])
    .exp-tab[data-exp-tab-panel="invoices"]
    .exp-main {
    height: 100% !important;
    min-height: 0 !important;
  }

  /* Columna derecha: Proveedores como panel lateral funcional. */
  #expensesModal:has(.exp-tabs [data-exp-tab="invoices"][data-active="true"])
    .exp-tab[data-exp-tab-panel="suppliers"]
    .exp-admin {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    border: 1px solid var(--pcp-expdesk-border) !important;
    border-radius: 22px !important;
    background: linear-gradient(
      180deg,
      rgba(17, 29, 47, 0.98),
      rgba(12, 22, 37, 0.98)
    ) !important;
    color: var(--pcp-expdesk-text) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.035),
      0 16px 34px rgba(15, 23, 42, 0.12) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
  }

  #expensesModal:has(.exp-tabs [data-exp-tab="invoices"][data-active="true"])
    .exp-tab[data-exp-tab-panel="suppliers"]
    .exp-admin-head {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #expensesModal:has(.exp-tabs [data-exp-tab="invoices"][data-active="true"])
    .exp-tab[data-exp-tab-panel="suppliers"]
    .exp-admin-grid {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    align-content: start !important;
    overflow: visible !important;
  }

  #expensesModal:has(.exp-tabs [data-exp-tab="invoices"][data-active="true"])
    .exp-tab[data-exp-tab-panel="suppliers"]
    .exp-admin-list,
  #expensesModal:has(.exp-tabs [data-exp-tab="invoices"][data-active="true"])
    .exp-tab[data-exp-tab-panel="suppliers"]
    .exp-admin-form {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  #expensesModal:has(.exp-tabs [data-exp-tab="invoices"][data-active="true"])
    .exp-tab[data-exp-tab-panel="suppliers"]
    .exp-admin-list {
    min-height: 190px !important;
    max-height: 280px !important;
  }

  #expensesModal:has(.exp-tabs [data-exp-tab="invoices"][data-active="true"])
    .exp-tab[data-exp-tab-panel="suppliers"]
    .exp-admin-form {
    min-height: 0 !important;
    height: auto !important;
  }

  #expensesModal:has(.exp-tabs [data-exp-tab="invoices"][data-active="true"])
    .exp-tab[data-exp-tab-panel="suppliers"]
    .exp-admin-form
    > .input-group {
    min-height: 0 !important;
  }
}

/* En escritorios más estrechos, mantenemos la mejora visual pero evitamos columnas forzadas. */
@media (min-width: 981px) and (max-width: 1499px) and (hover: hover) and (pointer: fine) {
  #expensesModal:has(.exp-tabs [data-exp-tab="invoices"][data-active="true"])
    > .modal
    > .modal-body.exp-modal-body {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(480px, 1fr) minmax(420px, auto) !important;
    grid-template-areas:
      "expenses-tabs"
      "expenses-invoices"
      "expenses-suppliers" !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  #expensesModal:has(.exp-tabs [data-exp-tab="invoices"][data-active="true"])
    .exp-tab[data-exp-tab-panel="suppliers"]
    .exp-admin {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #expensesModal:has(.exp-tabs [data-exp-tab="invoices"][data-active="true"])
    .exp-tab[data-exp-tab-panel="suppliers"]
    .exp-admin-grid {
    grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr) !important;
  }
}

/* ==========================================================
   DESKTOP · Gastos / Compras · guard de visibilidad del modal
   2026-05-20-expenses-modal-visibility-fix1
   - Evita que el CSS fuerce visible #expensesModal cuando JS lo mantiene cerrado.
   - Mantiene intacto el diseño desktop cuando el modal se abre de forma normal.
   ========================================================== */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  #expensesModal[aria-hidden="true"],
  #expensesModal[style*="display: none"] {
    display: none !important;
  }
}

/* ==========================================================
   DESKTOP · Gastos / Compras · líneas de compra sin scroll horizontal
   2026-05-20-expenses-lines-fit1
   - Reduce el ancho interno de la tabla de líneas.
   - Elimina el min-width rígido de 1040px que forzaba scroll en la columna izquierda.
   - Mantiene concepto amplio y compacta columnas numéricas.
   - Solo escritorio. Móvil intacto.
   ========================================================== */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  #expensesModal .exp-lines-table-wrap {
    overflow-x: hidden !important;
  }

  #expensesModal #expLinesTable.exp-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  #expensesModal #expLinesTable.exp-table thead th {
    min-width: 0 !important;
    padding-inline: 8px !important;
  }

  /* Concepto absorbe el ancho sobrante. */
  #expensesModal #expLinesTable.exp-table thead th:nth-child(1) {
    width: auto !important;
    min-width: 0 !important;
  }

  /* Columnas compactas, suficientes para sus valores sin desbordar. */
  #expensesModal #expLinesTable.exp-table thead th:nth-child(2) {
    width: 84px !important;
  }

  #expensesModal #expLinesTable.exp-table thead th:nth-child(3) {
    width: 112px !important;
  }

  #expensesModal #expLinesTable.exp-table thead th:nth-child(4) {
    width: 92px !important;
  }

  #expensesModal #expLinesTable.exp-table thead th:nth-child(5) {
    width: 88px !important;
  }

  #expensesModal #expLinesTable.exp-table thead th:nth-child(6) {
    width: 74px !important;
  }

  #expensesModal #expLinesTable.exp-table thead th:nth-child(7) {
    width: 96px !important;
  }

  #expensesModal #expLinesTable.exp-table thead th:nth-child(8) {
    width: 42px !important;
  }

  #expensesModal #expLinesTable.exp-table tbody td {
    min-width: 0 !important;
    padding-inline: 8px !important;
  }

  #expensesModal
    #expLinesTable.exp-table
    tbody
    td:nth-child(1)
    input[data-f="concept"] {
    width: 100% !important;
    min-width: 0 !important;
  }

  #expensesModal
    #expLinesTable.exp-table
    tbody
    td:nth-child(2)
    input[data-f="qty"],
  #expensesModal
    #expLinesTable.exp-table
    tbody
    td:nth-child(3)
    input[data-f="price"],
  #expensesModal
    #expLinesTable.exp-table
    tbody
    td:nth-child(5)
    select[data-f="iva"],
  #expensesModal
    #expLinesTable.exp-table
    tbody
    td:nth-child(6)
    select[data-f="re"] {
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 8px !important;
  }

  #expensesModal #expLinesTable.exp-table tbody td:nth-child(4),
  #expensesModal #expLinesTable.exp-table tbody td:nth-child(7) {
    white-space: nowrap !important;
  }
}

/* ==========================================================
   DESKTOP · Informes de gastos / compras · PRO 1
   2026-05-20-expenses-stats-desktop-pro1
   - Solo escritorio: móvil/tablet táctil intactos.
   - El modal arranca bajo la cabecera principal de Prestax.
   - Cabecera, filtros, KPIs, gráficos y ranking más compactos.
   - Scroll vertical real dentro del cuerpo del modal.
   - Evita desbordamientos de canvas y tabla.
   ========================================================== */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  #expensesStatsModal {
    --pcp-expstats-shell: #0b111b;
    --pcp-expstats-shell-2: #101a29;
    --pcp-expstats-panel: rgba(17, 29, 47, 0.98);
    --pcp-expstats-panel-soft: rgba(12, 22, 37, 0.98);
    --pcp-expstats-border: rgba(129, 153, 191, 0.32);
    --pcp-expstats-border-strong: rgba(129, 153, 191, 0.48);
    --pcp-expstats-title: #f8fafc;
    --pcp-expstats-text: #e2e8f0;
    --pcp-expstats-muted: #cbd5e1;
    --pcp-expstats-field: #f8fbff;
    --pcp-expstats-field-text: #0f172a;

    padding: calc(var(--appHeaderH, 50px) + 12px) 14px 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: rgba(2, 6, 23, 0.72) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  /* Guard defensivo: el CSS jamás vuelve a dejar este modal fijo al iniciar la app. */
  #expensesStatsModal[aria-hidden="true"],
  #expensesStatsModal[style*="display: none"] {
    display: none !important;
  }

  #expensesStatsModal > .modal {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;

    width: min(1560px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    height: calc(100dvh - var(--appHeaderH, 50px) - 28px) !important;
    max-height: calc(100dvh - var(--appHeaderH, 50px) - 28px) !important;
    min-height: 0 !important;

    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    overflow: hidden !important;

    border: 1px solid var(--pcp-expstats-border-strong) !important;
    border-radius: 24px !important;
    background:
      radial-gradient(
        circle at 8% 0%,
        rgba(37, 99, 235, 0.13),
        transparent 25%
      ),
      radial-gradient(
        circle at 95% 4%,
        rgba(124, 58, 237, 0.13),
        transparent 28%
      ),
      linear-gradient(180deg, #0b111b 0%, #09111c 100%) !important;
    color: var(--pcp-expstats-text) !important;
    box-shadow: 0 30px 84px rgba(2, 6, 23, 0.56) !important;
  }

  #expensesStatsModal > .modal > .modal-header {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 11px 15px !important;
    box-sizing: border-box !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;

    border: 0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important;
    background: rgba(8, 14, 24, 0.98) !important;
  }

  #expensesStatsModalTitle {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--pcp-expstats-title) !important;
    font-size: clamp(1.06rem, 0.98rem + 0.22vw, 1.24rem) !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #expensesStatsModal #closeExpensesStatsModalBtn.buttonclear {
    width: auto !important;
    min-width: 118px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    border: 1px solid rgba(248, 113, 113, 0.56) !important;
    border-radius: 14px !important;
    background: linear-gradient(
      180deg,
      rgba(153, 27, 27, 0.98),
      rgba(127, 29, 29, 0.98)
    ) !important;
    color: #fff1f2 !important;
    font-size: 0.86rem !important;
    font-weight: 860 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: 0 12px 24px rgba(2, 6, 23, 0.18) !important;
  }

  #expensesStatsModal #closeExpensesStatsModalBtn.buttonclear:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.05) !important;
  }

  #expensesStatsModal > .modal > .modal-body.exp-stats-body {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 12px 14px 16px !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    -webkit-overflow-scrolling: touch !important;

    background: linear-gradient(180deg, #121e30 0%, #edf2f8 100%) !important;
  }

  #expensesStatsModal .exp-stats-filters,
  #expensesStatsModal .exp-stats-kpis,
  #expensesStatsModal .exp-stats-charts,
  #expensesStatsModal .exp-stats-table {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Filtros compactos en una franja superior. */
  #expensesStatsModal .exp-stats-filters {
    width: 100% !important;
    padding: 10px !important;
    display: grid !important;
    grid-template-columns: 170px 220px 190px minmax(190px, 230px) !important;
    gap: 9px !important;
    align-items: end !important;
    justify-content: start !important;

    border: 1px solid var(--pcp-expstats-border) !important;
    border-radius: 18px !important;
    background: linear-gradient(
      180deg,
      rgba(17, 29, 47, 0.98),
      rgba(12, 22, 37, 0.98)
    ) !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12) !important;
  }

  #expensesStatsModal .exp-stats-filters > label {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 6px 8px 8px !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;

    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    border-radius: 14px !important;
    background: rgba(8, 18, 32, 0.74) !important;
    color: #dbeafe !important;
    font-size: 0.74rem !important;
    font-weight: 850 !important;
    line-height: 1.12 !important;
  }

  #expensesStatsModal .exp-stats-filters select {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    box-sizing: border-box !important;

    border: 1px solid rgba(129, 153, 191, 0.42) !important;
    border-radius: 11px !important;
    background: var(--pcp-expstats-field) !important;
    color: var(--pcp-expstats-field-text) !important;
    font-size: 0.84rem !important;
    font-weight: 780 !important;
    line-height: 1 !important;
  }

  #expensesStatsModal .exp-stats-filters select:focus {
    outline: none !important;
    border-color: rgba(96, 165, 250, 0.88) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18) !important;
  }

  #expensesStatsModal #expStatsExportBtn.btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    border: 1px solid rgba(74, 222, 128, 0.48) !important;
    border-radius: 14px !important;
    background: linear-gradient(
      180deg,
      rgba(22, 163, 74, 0.98),
      rgba(21, 128, 61, 0.98)
    ) !important;
    color: #f0fdf4 !important;
    font-size: 0.86rem !important;
    font-weight: 860 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: 0 12px 24px rgba(2, 6, 23, 0.18) !important;
  }

  #expensesStatsModal #expStatsExportBtn.btn:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.05) !important;
  }

  /* KPIs más bajos y más limpios. */
  #expensesStatsModal .exp-stats-kpis {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #expensesStatsModal .exp-kpi {
    min-width: 0 !important;
    min-height: 82px !important;
    margin: 0 !important;
    padding: 12px 13px !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 6px !important;

    border: 1px solid rgba(74, 222, 128, 0.34) !important;
    border-radius: 18px !important;
    background: linear-gradient(
      180deg,
      rgba(22, 101, 52, 0.92),
      rgba(20, 83, 45, 0.98)
    ) !important;
    color: #f0fdf4 !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.045),
      0 14px 30px rgba(15, 23, 42, 0.12) !important;
  }

  #expensesStatsModal .exp-kpi-label {
    margin: 0 !important;
    color: #dcfce7 !important;
    font-size: 0.76rem !important;
    font-weight: 820 !important;
    line-height: 1.18 !important;
  }

  #expensesStatsModal .exp-kpi-value {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: clamp(1.05rem, 0.98rem + 0.18vw, 1.22rem) !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    font-variant-numeric: tabular-nums !important;
  }

  /* Gráficos: 2 + 1 completo, pero con alturas contenidas para no devorar el modal. */
  #expensesStatsModal .exp-stats-charts {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  #expensesStatsModal .exp-chart-card {
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 11px 12px 12px !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;

    border: 1px solid rgba(129, 153, 191, 0.34) !important;
    border-radius: 18px !important;
    background: #f8fbff !important;
    color: #0f172a !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12) !important;
    overflow: hidden !important;
  }

  #expensesStatsModal .exp-chart-card--full {
    grid-column: 1 / -1 !important;
  }

  #expensesStatsModal .exp-chart-card h3,
  #expensesStatsModal .exp-stats-table > h3 {
    margin: 0 !important;
    color: #0f172a !important;
    font-size: 0.94rem !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
  }

  #expensesStatsModal .exp-chart-card canvas {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 220px !important;
    max-height: 220px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #expensesStatsModal .exp-chart-card--full canvas {
    height: 250px !important;
    max-height: 250px !important;
  }

  /* Ranking compacto, con tabla contenida y sin romper el ancho del modal. */
  #expensesStatsModal .exp-stats-table {
    width: 100% !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;

    border: 1px solid var(--pcp-expstats-border) !important;
    border-radius: 20px !important;
    background: linear-gradient(
      180deg,
      rgba(17, 29, 47, 0.98),
      rgba(12, 22, 37, 0.98)
    ) !important;
    color: var(--pcp-expstats-text) !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12) !important;
  }

  #expensesStatsModal .exp-stats-table > h3 {
    color: var(--pcp-expstats-title) !important;
  }

  #expensesStatsModal .exp-stats-table-wrap {
    width: 100% !important;
    min-width: 0 !important;
    max-height: 280px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    overflow-x: auto !important;
    overflow-y: auto !important;
    border: 1px solid rgba(129, 153, 191, 0.28) !important;
    border-radius: 14px !important;
    background: #f8fbff !important;
    scrollbar-gutter: stable !important;
  }

  #expensesStatsModal #expStatsTable.exp-table {
    width: 100% !important;
    min-width: 720px !important;
    margin: 0 !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
    background: #f8fbff !important;
    color: #0f172a !important;
  }

  #expensesStatsModal #expStatsTable.exp-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 10px 11px !important;
    border-bottom: 1px solid rgba(129, 153, 191, 0.34) !important;
    background: #e8eef7 !important;
    color: #0f172a !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    line-height: 1.14 !important;
    white-space: nowrap !important;
  }

  #expensesStatsModal #expStatsTable.exp-table tbody td {
    margin: 0 !important;
    padding: 9px 11px !important;
    border-bottom: 1px solid rgba(203, 213, 225, 0.7) !important;
    color: #0f172a !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    line-height: 1.24 !important;
    white-space: nowrap !important;
  }

  #expensesStatsModal #expStatsTable.exp-table tbody tr:last-child td {
    border-bottom: 0 !important;
  }

  #expensesStatsModal #expStatsTable.exp-table tbody td:first-child {
    white-space: normal !important;
    min-width: 220px !important;
    font-weight: 820 !important;
  }

  #expensesStatsModal #expStatsTable.exp-table tbody td strong {
    color: #065f46 !important;
    font-weight: 900 !important;
  }
}

/* Escritorio intermedio: apila filtros y KPIs sin perder scroll ni encaje. */
@media (min-width: 981px) and (max-width: 1260px) and (hover: hover) and (pointer: fine) {
  #expensesStatsModal > .modal {
    width: min(1220px, calc(100vw - 28px)) !important;
  }

  #expensesStatsModal .exp-stats-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #expensesStatsModal #expStatsExportBtn.btn {
    grid-column: 1 / -1 !important;
  }

  #expensesStatsModal .exp-stats-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #expensesStatsModal .exp-stats-charts {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #expensesStatsModal .exp-chart-card--full {
    grid-column: auto !important;
  }
}

/* ==========================================================
   DESKTOP · Informes gastos / compras · compactación PRO 1.1
   2026-05-20-expenses-stats-desktop-pro11-compact
   - Reduce de forma clara cabecera, filtros y KPIs.
   - Mantiene scroll vertical, encaje bajo la cabecera y layout previo.
   - No toca móvil ni lógica.
   ========================================================== */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  #expensesStatsModal > .modal > .modal-header {
    padding: 7px 12px !important;
    gap: 10px !important;
  }

  #expensesStatsModalTitle {
    font-size: clamp(0.98rem, 0.94rem + 0.12vw, 1.08rem) !important;
    line-height: 1.08 !important;
  }

  #expensesStatsModal #closeExpensesStatsModalBtn.buttonclear {
    min-width: 88px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    font-size: 0.8rem !important;
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.16) !important;
  }

  #expensesStatsModal > .modal > .modal-body.exp-stats-body {
    padding: 8px 10px 12px !important;
    gap: 8px !important;
  }

  #expensesStatsModal .exp-stats-filters {
    padding: 7px !important;
    grid-template-columns: 158px 214px 182px minmax(176px, 206px) !important;
    gap: 7px !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.1) !important;
  }

  #expensesStatsModal .exp-stats-filters > label {
    padding: 4px 6px 6px !important;
    gap: 3px !important;
    border-radius: 11px !important;
    font-size: 0.67rem !important;
    line-height: 1.08 !important;
  }

  #expensesStatsModal .exp-stats-filters select {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 9px !important;
    border-radius: 9px !important;
    font-size: 0.77rem !important;
  }

  #expensesStatsModal #expStatsExportBtn.btn {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
    font-size: 0.79rem !important;
    gap: 6px !important;
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.14) !important;
  }

  #expensesStatsModal .exp-stats-kpis {
    gap: 8px !important;
  }

  #expensesStatsModal .exp-kpi {
    min-height: 58px !important;
    padding: 8px 10px !important;
    gap: 3px !important;
    border-radius: 15px !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 10px 22px rgba(15, 23, 42, 0.1) !important;
  }

  #expensesStatsModal .exp-kpi-label {
    font-size: 0.66rem !important;
    line-height: 1.08 !important;
  }

  #expensesStatsModal .exp-kpi-value {
    font-size: clamp(0.92rem, 0.88rem + 0.12vw, 1.04rem) !important;
    line-height: 1.04 !important;
  }

  #expensesStatsModal .exp-stats-charts {
    gap: 8px !important;
  }

  #expensesStatsModal .exp-chart-card {
    padding: 8px 10px 10px !important;
    gap: 6px !important;
    border-radius: 16px !important;
  }

  #expensesStatsModal .exp-chart-card h3,
  #expensesStatsModal .exp-stats-table > h3 {
    font-size: 0.86rem !important;
  }

  #expensesStatsModal .exp-chart-card canvas {
    height: 200px !important;
    max-height: 200px !important;
  }

  #expensesStatsModal .exp-chart-card--full canvas {
    height: 220px !important;
    max-height: 220px !important;
  }

  #expensesStatsModal .exp-stats-table {
    padding: 9px !important;
    gap: 7px !important;
    border-radius: 17px !important;
  }

  #expensesStatsModal .exp-stats-table-wrap {
    max-height: 250px !important;
    border-radius: 12px !important;
  }
}

@media (min-width: 981px) and (max-width: 1260px) and (hover: hover) and (pointer: fine) {
  #expensesStatsModal .exp-stats-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #expensesStatsModal #expStatsExportBtn.btn {
    grid-column: 1 / -1 !important;
  }
}

/* ==========================================================
   DESKTOP · Estadísticas e informe · compacto PRO 1
   2026-05-20-stats-history-desktop-pro1-compact
   - Solo escritorio: móvil/tablet táctil intactos.
   - Arranca por debajo de la cabecera principal.
   - Scroll vertical real en el cuerpo del modal.
   - Medidas contenidas: filtros, KPIs, tarjetas, clientes y gráficos compactos.
   - Evita desbordamientos y no fuerza el modal visible al iniciar la app.
   ========================================================== */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  #statsHistoryModal {
    --pcp-statsdesk-shell: #0b111b;
    --pcp-statsdesk-panel: rgba(17, 29, 47, 0.98);
    --pcp-statsdesk-panel-soft: rgba(12, 22, 37, 0.98);
    --pcp-statsdesk-card: rgba(10, 20, 34, 0.92);
    --pcp-statsdesk-border: rgba(129, 153, 191, 0.32);
    --pcp-statsdesk-border-strong: rgba(129, 153, 191, 0.48);
    --pcp-statsdesk-title: #f8fafc;
    --pcp-statsdesk-text: #e2e8f0;
    --pcp-statsdesk-muted: #cbd5e1;
    --pcp-statsdesk-field: #f8fbff;
    --pcp-statsdesk-field-text: #0f172a;

    padding: calc(var(--appHeaderH, 50px) + 10px) 12px 14px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: rgba(2, 6, 23, 0.72) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  #statsHistoryModal[aria-hidden="true"],
  #statsHistoryModal[style*="display: none"] {
    display: none !important;
  }

  #statsHistoryModal > .modal {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;

    width: min(1560px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    height: calc(100dvh - var(--appHeaderH, 50px) - 24px) !important;
    max-height: calc(100dvh - var(--appHeaderH, 50px) - 24px) !important;
    min-height: 0 !important;

    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    overflow: hidden !important;

    border: 1px solid var(--pcp-statsdesk-border-strong) !important;
    border-radius: 22px !important;
    background:
      radial-gradient(
        circle at 8% 0%,
        rgba(37, 99, 235, 0.12),
        transparent 24%
      ),
      radial-gradient(
        circle at 96% 4%,
        rgba(124, 58, 237, 0.12),
        transparent 28%
      ),
      linear-gradient(180deg, #0b111b 0%, #09111c 100%) !important;
    color: var(--pcp-statsdesk-text) !important;
    box-shadow: 0 28px 78px rgba(2, 6, 23, 0.54) !important;
  }

  #statsHistoryModal > .modal > .modal-header {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 9px 13px !important;
    box-sizing: border-box !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 10px !important;

    border: 0 !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important;
    background: rgba(8, 14, 24, 0.98) !important;
  }

  #statsHistoryModalTitle {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--pcp-statsdesk-title) !important;
    font-size: clamp(1rem, 0.94rem + 0.18vw, 1.14rem) !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #statsHistoryModal #closeStatsHistoryModalBtn.buttonclear {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;

    display: inline-grid !important;
    place-items: center !important;

    border: 1px solid rgba(248, 113, 113, 0.56) !important;
    border-radius: 13px !important;
    background: linear-gradient(
      180deg,
      rgba(153, 27, 27, 0.98),
      rgba(127, 29, 29, 0.98)
    ) !important;
    color: #fff1f2 !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 10px 20px rgba(2, 6, 23, 0.18) !important;
  }

  #statsHistoryModal #closeStatsHistoryModalBtn.buttonclear:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.05) !important;
  }

  #statsHistoryModal > .modal > .modal-body.stats-modal-body {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 10px 12px 12px !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    -webkit-overflow-scrolling: touch !important;

    background: linear-gradient(180deg, #121e30 0%, #edf2f8 100%) !important;
  }

  #statsHistoryModal
    :is(
      .stats-filtros,
      .stats-kpi-chips,
      .stats-salud-negocio,
      .stats-grid,
      .stats-comparativa,
      .stats-clientes,
      .stats-charts
    ) {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Filtros: compactos, claros y sin consumir media pantalla. */
  #statsHistoryModal .stats-filtros {
    width: 100% !important;
    padding: 9px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px 10px !important;
    align-items: center !important;

    border: 1px solid var(--pcp-statsdesk-border) !important;
    border-radius: 17px !important;
    background: linear-gradient(
      180deg,
      rgba(17, 29, 47, 0.98),
      rgba(12, 22, 37, 0.98)
    ) !important;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12) !important;
  }

  #statsHistoryModal .stats-filtros-header,
  #statsHistoryModal .stats-filtros-grid {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
  }

  #statsHistoryModal .stats-filtros-header {
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  #statsHistoryModal .stats-filtros-titulo,
  #statsHistoryModal .stats-filtros-resumen {
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  #statsHistoryModal .stats-filtros-titulo {
    color: var(--pcp-statsdesk-title) !important;
    font-size: 0.84rem !important;
    font-weight: 900 !important;
  }

  #statsHistoryModal .stats-filtros-resumen {
    min-height: 28px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border: 1px solid rgba(96, 165, 250, 0.34) !important;
    border-radius: 999px !important;
    background: rgba(30, 64, 175, 0.22) !important;
    color: #dbeafe !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  #statsHistoryModal .stats-filtros-resumen strong {
    color: #eff6ff !important;
    font-weight: 900 !important;
  }

  #statsHistoryModal .stats-filtros-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns:
      minmax(155px, 1.02fr)
      112px
      154px
      minmax(220px, 1.18fr)
      minmax(188px, 0.98fr) !important;
    gap: 7px !important;
    align-items: end !important;
  }

  #statsHistoryModal .stats-filtro-item {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 5px 7px 7px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    border-radius: 12px !important;
    background: rgba(8, 18, 32, 0.74) !important;
    color: #dbeafe !important;
  }

  #statsHistoryModal .stats-filtro-label {
    margin: 0 !important;
    color: #dbeafe !important;
    font-size: 0.68rem !important;
    font-weight: 850 !important;
    line-height: 1.12 !important;
  }

  #statsHistoryModal .stats-filtro-select {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 33px !important;
    height: 33px !important;
    margin: 0 !important;
    padding: 0 9px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(129, 153, 191, 0.42) !important;
    border-radius: 10px !important;
    background: var(--pcp-statsdesk-field) !important;
    color: var(--pcp-statsdesk-field-text) !important;
    font-size: 0.8rem !important;
    font-weight: 780 !important;
    line-height: 1 !important;
  }

  #statsHistoryModal .stats-filtro-select:focus {
    outline: none !important;
    border-color: rgba(96, 165, 250, 0.88) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18) !important;
  }

  #statsHistoryModal #statsTotalDocumentos.stats-resumen-linea {
    min-width: 0 !important;
    margin: 0 !important;
    color: var(--pcp-statsdesk-muted) !important;
    font-size: 0.77rem !important;
    line-height: 1.28 !important;
    font-weight: 720 !important;
  }

  #statsHistoryModal .stats-acciones {
    min-width: 0 !important;
    margin: 0 !important;
    display: inline-grid !important;
    grid-template-columns: repeat(2, minmax(132px, 1fr)) !important;
    gap: 7px !important;
    justify-self: end !important;
  }

  #statsHistoryModal .stats-acciones .stats-btn {
    min-width: 0 !important;
    min-height: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border: 1px solid rgba(96, 165, 250, 0.4) !important;
    border-radius: 11px !important;
    background: rgba(30, 64, 175, 0.72) !important;
    color: #eff6ff !important;
    font-size: 0.78rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #statsHistoryModal #statsImprimirBtn.stats-btn {
    border-color: rgba(167, 139, 250, 0.42) !important;
    background: rgba(91, 33, 182, 0.7) !important;
  }

  /* KPIs: una franja útil, no cuatro bloques gigantes. */
  #statsHistoryModal .stats-kpi-chips {
    width: 100% !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #statsHistoryModal .stats-kpi-chip {
    min-width: 0 !important;
    min-height: 62px !important;
    margin: 0 !important;
    padding: 8px 11px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 3px !important;
    border: 1px solid rgba(129, 153, 191, 0.3) !important;
    border-radius: 15px !important;
    background: linear-gradient(
      180deg,
      rgba(18, 31, 49, 0.98),
      rgba(12, 22, 37, 0.98)
    ) !important;
    color: var(--pcp-statsdesk-text) !important;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12) !important;
  }

  #statsHistoryModal .stats-kpi-chip--bad {
    border-color: rgba(248, 113, 113, 0.4) !important;
    background: linear-gradient(
      180deg,
      rgba(127, 29, 29, 0.88),
      rgba(69, 10, 10, 0.92)
    ) !important;
  }

  #statsHistoryModal .stats-kpi-chip--neutral {
    border-color: rgba(96, 165, 250, 0.38) !important;
    background: linear-gradient(
      180deg,
      rgba(30, 64, 175, 0.42),
      rgba(15, 27, 44, 0.98)
    ) !important;
  }

  #statsHistoryModal .stats-kpi-label,
  #statsHistoryModal .stats-kpi-value {
    margin: 0 !important;
    line-height: 1.16 !important;
  }

  #statsHistoryModal .stats-kpi-label {
    color: #dbeafe !important;
    font-size: 0.72rem !important;
    font-weight: 820 !important;
  }

  #statsHistoryModal .stats-kpi-value {
    color: #f8fafc !important;
    font-size: 1.03rem !important;
    font-weight: 920 !important;
    letter-spacing: -0.01em !important;
    font-variant-numeric: tabular-nums !important;
  }

  #statsHistoryModal .stats-salud-negocio {
    width: 100% !important;
    min-height: 0 !important;
    padding: 8px 11px !important;
    border: 1px solid rgba(251, 191, 36, 0.4) !important;
    border-radius: 14px !important;
    background: rgba(120, 53, 15, 0.24) !important;
    color: #fef3c7 !important;
    font-size: 0.8rem !important;
    font-weight: 760 !important;
    line-height: 1.34 !important;
  }

  /* Resúmenes numéricos y comparativa compactos. */
  #statsHistoryModal .stats-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #statsHistoryModal .stats-card,
  #statsHistoryModal .stats-comparativa,
  #statsHistoryModal .stats-clientes,
  #statsHistoryModal .stats-charts {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 11px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--pcp-statsdesk-border) !important;
    border-radius: 16px !important;
    background: linear-gradient(
      180deg,
      rgba(17, 29, 47, 0.98),
      rgba(12, 22, 37, 0.98)
    ) !important;
    color: var(--pcp-statsdesk-text) !important;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12) !important;
  }

  #statsHistoryModal .stats-card--highlight {
    border-color: rgba(74, 222, 128, 0.42) !important;
    background: linear-gradient(
      180deg,
      rgba(22, 101, 52, 0.54),
      rgba(12, 22, 37, 0.98)
    ) !important;
  }

  #statsHistoryModal
    :is(.stats-card, .stats-comparativa, .stats-clientes, .stats-charts)
    h3 {
    margin: 0 0 7px !important;
    color: var(--pcp-statsdesk-title) !important;
    font-size: 0.86rem !important;
    font-weight: 900 !important;
    line-height: 1.18 !important;
  }

  #statsHistoryModal .stats-card dl,
  #statsHistoryModal .stats-comparativa-grid {
    min-width: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
  }

  #statsHistoryModal .stats-row {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 6px 7px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 7px !important;
    align-items: center !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-radius: 11px !important;
    background: rgba(8, 18, 32, 0.72) !important;
    color: var(--pcp-statsdesk-text) !important;
  }

  #statsHistoryModal .stats-row dt,
  #statsHistoryModal .stats-row dd {
    min-width: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    font-size: 0.76rem !important;
    font-weight: 760 !important;
    line-height: 1.2 !important;
  }

  #statsHistoryModal .stats-row dd {
    text-align: right !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
  }

  #statsHistoryModal .stats-row .stats-num {
    color: #bfdbfe !important;
    font-weight: 900 !important;
  }

  #statsHistoryModal .stats-row .stats-importe {
    color: #f8fafc !important;
    font-weight: 900 !important;
  }

  #statsHistoryModal .stats-filtros-descripcion {
    min-width: 0 !important;
    margin: 0 0 7px !important;
    color: var(--pcp-statsdesk-muted) !important;
    font-size: 0.77rem !important;
    font-weight: 700 !important;
    line-height: 1.34 !important;
  }

  #statsHistoryModal .stats-clientes {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  #statsHistoryModal .stats-clientes-col {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 9px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-radius: 13px !important;
    background: rgba(8, 18, 32, 0.72) !important;
  }

  #statsHistoryModal .stats-clientes-list {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    list-style: none !important;
  }

  #statsHistoryModal .stats-clientes-list li {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 6px 7px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    border: 1px solid rgba(148, 163, 184, 0.16) !important;
    border-radius: 10px !important;
    background: rgba(15, 23, 42, 0.68) !important;
    color: var(--pcp-statsdesk-text) !important;
    font-size: 0.75rem !important;
    line-height: 1.24 !important;
    font-weight: 760 !important;
  }

  #statsHistoryModal .stats-clientes-nombre {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #statsHistoryModal .stats-clientes-importe {
    flex: 0 0 auto !important;
    color: #f8fafc !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
  }

  #statsHistoryModal .stats-clientes-empty {
    color: var(--pcp-statsdesk-muted) !important;
  }

  /* Gráficos: tres columnas útiles, compactas y sin desbordes. */
  #statsHistoryModal .stats-charts {
    width: 100% !important;
    padding: 10px 11px !important;
  }

  #statsHistoryModal .stats-charts-container {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 7px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #statsHistoryModal .stats-chart {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-radius: 13px !important;
    background: rgba(248, 250, 252, 0.98) !important;
    overflow: hidden !important;
  }

  #statsHistoryModal .stats-chart-full {
    grid-column: auto !important;
  }

  #statsHistoryModal .stats-chart canvas {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 164px !important;
    max-height: 164px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #statsHistoryModal .stats-chart-full canvas {
    height: 176px !important;
    max-height: 176px !important;
  }
}

@media (min-width: 981px) and (max-width: 1320px) and (hover: hover) and (pointer: fine) {
  #statsHistoryModal .stats-filtros-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #statsHistoryModal .stats-filtro-item--mes {
    grid-column: span 2 !important;
  }

  #statsHistoryModal .stats-kpi-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #statsHistoryModal .stats-grid {
    grid-template-columns: 1fr !important;
  }

  #statsHistoryModal .stats-clientes {
    grid-template-columns: 1fr !important;
  }

  #statsHistoryModal .stats-charts-container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #statsHistoryModal .stats-chart-full {
    grid-column: 1 / -1 !important;
  }
}