/*
 * SIAF shared UI styles.
 * Extracted from root PHP screens modified in the last 3 days.
 * Do not add inline CSS in PHP screens; add shared or scoped rules here.
 */

/* ===== Ajustes.php ===== */
.adjustments-page .adjustment-hero {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-left: 4px solid #1f7a5c;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
      margin-bottom: 18px;
      padding: 18px 20px;
    }

    .adjustments-page .adjustment-hero h1 {
      color: #17212b;
      font-size: 1.45rem;
      font-weight: 700;
      margin: 0;
    }

    .adjustments-page .adjustment-hero .subtitle {
      color: #687789;
      margin: 5px 0 0;
    }

    .adjustments-page .adjustment-stat {
      align-items: center;
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
      display: flex;
      justify-content: space-between;
      min-height: 108px;
      padding: 16px;
    }

    .adjustments-page .adjustment-stat .label {
      color: #6c7a89;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .02em;
      margin-bottom: 6px;
      text-transform: uppercase;
    }

    .adjustments-page .adjustment-stat .value {
      color: #17212b;
      font-size: 1.55rem;
      font-weight: 700;
      line-height: 1.1;
    }

    .adjustments-page .adjustment-stat .hint {
      color: #8a97a6;
      font-size: .82rem;
      margin-top: 4px;
    }

    .adjustments-page .adjustment-stat .icon {
      align-items: center;
      border-radius: 8px;
      color: #ffffff;
      display: flex;
      flex: 0 0 46px;
      font-size: 1.15rem;
      height: 46px;
      justify-content: center;
      width: 46px;
    }

    .adjustments-page .icon-total { background: #1f7a5c; }
    .adjustments-page .icon-products { background: #2f6f9f; }
    .adjustments-page .icon-warehouses { background: #8a6f2a; }
    .adjustments-page .icon-quantity { background: #6b5b95; }

    .adjustments-page .adjustment-panel {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
      margin-bottom: 18px;
    }

    .adjustments-page .adjustment-panel-header {
      align-items: center;
      border-bottom: 1px solid #e9edf2;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      padding: 16px 18px;
    }

    .adjustments-page .adjustment-panel-title {
      color: #17212b;
      font-size: 1.05rem;
      font-weight: 700;
      margin: 0;
    }

    .adjustments-page .adjustment-panel-subtitle {
      color: #8a97a6;
      font-size: .86rem;
      margin-top: 4px;
    }

    .adjustments-page .adjustment-panel-body {
      padding: 18px;
    }

    .adjustments-page .table-adjustments thead th {
      background: #f7f9fb;
      border-bottom: 1px solid #dfe5ec;
      color: #445161;
      font-size: .78rem;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    .adjustments-page .table-adjustments td {
      vertical-align: middle;
    }

    .adjustments-page .adjustment-product {
      color: #17212b;
      font-weight: 700;
    }

    .adjustments-page .adjustment-subtle {
      color: #6c7a89;
      font-size: .86rem;
    }

    .adjustments-page .adjustment-qty {
      color: #1f7a5c;
      font-weight: 700;
      white-space: nowrap;
    }

    .adjustments-page .adjustment-actions {
      display: flex;
      gap: 6px;
      justify-content: center;
      white-space: nowrap;
    }

    .adjustments-page .adjustment-empty {
      background: #fbfcfd;
      border: 1px dashed #cfd8e3;
      border-radius: 8px;
      color: #6c7a89;
      padding: 28px;
      text-align: center;
    }

    .adjustments-page .adjustment-modal .modal-content {
      border: 0;
      border-radius: 8px;
      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
    }

    .adjustments-page .adjustment-modal .modal-header {
      background: #ffffff;
      border-bottom: 1px solid #e9edf2;
      border-left: 4px solid #1f7a5c;
      border-radius: 8px 8px 0 0;
    }

    .adjustments-page .adjustment-modal .modal-title {
      color: #17212b;
      font-size: 1.1rem;
      font-weight: 700;
    }

    .adjustments-page .adjustment-modal .modal-body {
      padding: 18px;
    }

    .adjustments-page .adjustment-modal label {
      color: #445161;
      font-size: .86rem;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .adjustments-page .adjustment-modal .modal-footer {
      background: #fbfcfd;
      border-top: 1px solid #e9edf2;
    }

    .adjustments-page .select2-container--default .select2-selection--single {
      border-color: #ced4da;
      min-height: 38px;
    }

    @media (max-width: 767.98px) {
      .adjustments-page .adjustment-hero .btn {
        width: 100%;
      }
    }

/* ===== BajoStock.php ===== */
body.bajostock-page,
    .bajostock-page .content-wrapper {
      background: #f4f6f8;
    }

    .bajostock-hero,
    .bajostock-panel,
    .bajostock-stat {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
    }

    .bajostock-hero {
      align-items: center;
      border-left: 4px solid #1f7a5c;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      margin-bottom: 18px;
      padding: 18px 20px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    }

    .bajostock-hero h1 {
      color: #17212b;
      font-size: 1.45rem;
      font-weight: 700;
      margin: 0;
    }

    .bajostock-hero .subtitle,
    .bajostock-panel-subtitle,
    .bajostock-subtle {
      color: #687789;
      font-size: .92rem;
      margin: 4px 0 0;
    }

    .bajostock-stat {
      align-items: center;
      display: flex;
      justify-content: space-between;
      min-height: 108px;
      padding: 16px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
    }

    .bajostock-stat-icon {
      align-items: center;
      border-radius: 8px;
      color: #ffffff;
      display: flex;
      flex: 0 0 46px;
      height: 46px;
      justify-content: center;
      margin-left: 14px;
      width: 46px;
      font-size: 1.15rem;
    }

    .bajostock-stat-label {
      color: #6c7a89;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .02em;
      margin: 0;
      text-transform: uppercase;
    }

    .bajostock-stat-value {
      color: #17212b;
      font-size: 1.55rem;
      font-weight: 700;
      line-height: 1.1;
    }

    .bajostock-stat-hint {
      color: #8a97a6;
      font-size: .82rem;
      margin: 4px 0 0;
    }

    .bajostock-stat-total { background: #24745c; }
    .bajostock-stat-risk { background: #b54747; }
    .bajostock-stat-blue { background: #2f6f9f; }
    .bajostock-stat-gold { background: #8a6f2a; }

    .bajostock-panel {
      margin-bottom: 18px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    }

    .bajostock-panel-header {
      align-items: center;
      border-bottom: 1px solid #e9edf2;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      padding: 16px 18px;
    }

    .bajostock-panel-title {
      color: #17212b;
      font-size: 1.05rem;
      font-weight: 700;
      margin: 0;
    }

    .bajostock-panel-body {
      padding: 18px;
    }

    .bajostock-filter {
      align-items: flex-end;
    }

    .bajostock-page label {
      color: #445161;
      font-size: .86rem;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .bajostock-page .form-control,
    .bajostock-page .btn,
    .bajostock-page .badge {
      border-radius: 6px;
    }

    .bajostock-actions {
      align-items: flex-end;
      display: flex;
      gap: 8px;
      height: 100%;
      justify-content: flex-end;
    }

    .bajostock-table-wrap {
      border-top: 1px solid #e9edf2;
      margin-top: 18px;
      padding-top: 18px;
    }

    .bajostock-empty {
      align-items: center;
      background: #fbfcfd;
      border: 1px dashed #cfd8e3;
      border-radius: 8px;
      color: #687789;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 108px;
      padding: 28px;
      text-align: center;
    }

    .bajostock-empty i {
      color: #8a6f2a;
      display: block;
      font-size: 1.45rem;
      margin-bottom: .5rem;
    }

    #div_tabla table thead th {
      background: #f7f9fb;
      border-bottom: 1px solid #dfe5ec;
      color: #445161;
      font-size: .78rem;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    #tabla_registros {
      color: #17212b;
      width: 100%;
    }

    #tabla_registros.table-bordered td,
    #tabla_registros.table-bordered th {
      border-color: #e9edf2;
    }

    #tabla_registros td {
      vertical-align: middle;
    }

    .bajostock-product,
    .bajostock-code {
      color: #17212b;
      font-weight: 700;
      white-space: nowrap;
    }

    .bajostock-qty {
      display: block;
      font-weight: 700;
      text-align: right;
      white-space: nowrap;
    }

    .bajostock-qty-positive {
      color: #1f7a5c;
    }

    .bajostock-qty-negative,
    .bajostock-qty-risk {
      color: #b54747;
    }

    .bajostock-qty-neutral {
      color: #687789;
    }

    #div_tabla .dt-buttons .btn {
      border-radius: 6px;
    }

    @media (max-width: 767.98px) {
      .bajostock-hero,
      .bajostock-panel-header {
        align-items: stretch;
        flex-direction: column;
      }

      .bajostock-actions,
      .bajostock-actions .btn {
        width: 100%;
      }
    }

/* ===== CalendarioPagos.php ===== */
.payment-calendar-page .payment-hero {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-left: 4px solid #2f6f9f;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
      margin-bottom: 18px;
      padding: 18px 20px;
    }

    .payment-calendar-page .payment-hero h1 {
      color: #17212b;
      font-size: 1.45rem;
      font-weight: 700;
      margin: 0;
    }

    .payment-calendar-page .payment-hero .subtitle {
      color: #687789;
      margin: 5px 0 0;
    }

    .payment-calendar-page .payment-stat {
      align-items: center;
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
      display: flex;
      justify-content: space-between;
      min-height: 108px;
      padding: 16px;
    }

    .payment-calendar-page .payment-stat .label {
      color: #6c7a89;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .02em;
      margin-bottom: 6px;
      text-transform: uppercase;
    }

    .payment-calendar-page .payment-stat .value {
      color: #17212b;
      font-size: 1.55rem;
      font-weight: 700;
      line-height: 1.1;
    }

    .payment-calendar-page .payment-stat .hint {
      color: #8a97a6;
      font-size: .82rem;
      margin-top: 4px;
    }

    .payment-calendar-page .payment-stat .icon {
      align-items: center;
      border-radius: 8px;
      color: #ffffff;
      display: flex;
      flex: 0 0 46px;
      font-size: 1.15rem;
      height: 46px;
      justify-content: center;
      width: 46px;
    }

    .payment-calendar-page .icon-total { background: #2f6f9f; }
    .payment-calendar-page .icon-month { background: #24745c; }
    .payment-calendar-page .icon-overdue { background: #b54747; }
    .payment-calendar-page .icon-amount { background: #8a6f2a; }

    .payment-calendar-page .payment-panel {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
      margin-bottom: 18px;
    }

    .payment-calendar-page .payment-panel-header {
      align-items: center;
      border-bottom: 1px solid #e9edf2;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      padding: 16px 18px;
    }

    .payment-calendar-page .payment-panel-title {
      color: #17212b;
      font-size: 1.05rem;
      font-weight: 700;
      margin: 0;
    }

    .payment-calendar-page .payment-panel-subtitle {
      color: #8a97a6;
      font-size: .86rem;
      margin-top: 4px;
    }

    .payment-calendar-page .payment-panel-body {
      padding: 18px;
    }

    .payment-calendar-page .payment-legend {
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: flex-end;
    }

    .payment-calendar-page .payment-legend-item {
      align-items: center;
      color: #687789;
      display: inline-flex;
      font-size: .86rem;
      font-weight: 700;
      gap: 6px;
    }

    .payment-calendar-page .payment-legend-dot {
      border-radius: 50%;
      display: inline-block;
      height: 10px;
      width: 10px;
    }

    .payment-calendar-page #calendar {
      min-height: 680px;
    }

    .payment-calendar-page .fc-toolbar {
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
    }

    .payment-calendar-page .fc-toolbar h2 {
      color: #17212b;
      font-size: 1.25rem;
      font-weight: 700;
    }

    .payment-calendar-page .fc-button {
      background: #eef3f7 !important;
      border-color: #d8e0e8 !important;
      border-radius: 6px !important;
      color: #334155 !important;
      font-weight: 700 !important;
      text-transform: none !important;
    }

    .payment-calendar-page .fc-button-primary:not(:disabled).fc-button-active,
    .payment-calendar-page .fc-button-primary:not(:disabled):active {
      background: #1f7a5c !important;
      border-color: #1f7a5c !important;
      color: #ffffff !important;
    }

    .payment-calendar-page .fc-event {
      border-radius: 6px;
      border-width: 0;
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
      cursor: pointer;
      font-weight: 700;
      padding: 3px 5px;
    }

    .payment-calendar-page .payment-empty {
      background: #fbfcfd;
      border: 1px dashed #cfd8e3;
      border-radius: 8px;
      color: #6c7a89;
      padding: 28px;
      text-align: center;
    }

    @media (max-width: 767.98px) {
      .payment-calendar-page .payment-legend {
        justify-content: flex-start;
      }

      .payment-calendar-page #calendar {
        min-height: 560px;
      }
    }

/* ===== Consumos.php ===== */
body.consumos-page,
    .consumos-page .content-wrapper {
      background: #f4f6f8;
    }

    .consumos-hero,
    .consumos-panel,
    .consumos-stat {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
    }

    .consumos-hero {
      align-items: center;
      border-left: 4px solid #1f7a5c;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      margin-bottom: 18px;
      padding: 18px 20px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    }

    .consumos-hero h1 {
      color: #17212b;
      font-size: 1.45rem;
      font-weight: 700;
      margin: 0;
    }

    .consumos-hero .subtitle,
    .consumos-panel-subtitle,
    .consumos-subtle {
      color: #687789;
      font-size: .92rem;
      margin: 4px 0 0;
    }

    .consumos-stat {
      align-items: center;
      display: flex;
      justify-content: space-between;
      min-height: 108px;
      padding: 16px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
    }

    .consumos-stat-icon {
      align-items: center;
      border-radius: 8px;
      color: #ffffff;
      display: flex;
      flex: 0 0 46px;
      height: 46px;
      justify-content: center;
      margin-left: 14px;
      width: 46px;
      font-size: 1.15rem;
    }

    .consumos-stat-label {
      color: #6c7a89;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .02em;
      margin: 0;
      text-transform: uppercase;
    }

    .consumos-stat-value {
      color: #17212b;
      font-size: 1.55rem;
      font-weight: 700;
      line-height: 1.1;
    }

    .consumos-stat-hint {
      color: #8a97a6;
      font-size: .82rem;
      margin: 4px 0 0;
    }

    .consumos-stat-total { background: #24745c; }
    .consumos-stat-blue { background: #2f6f9f; }
    .consumos-stat-purple { background: #6b5b95; }
    .consumos-stat-gold { background: #8a6f2a; }

    .consumos-panel {
      margin-bottom: 18px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    }

    .consumos-panel-header {
      align-items: center;
      border-bottom: 1px solid #e9edf2;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      padding: 16px 18px;
    }

    .consumos-panel-title {
      color: #17212b;
      font-size: 1.05rem;
      font-weight: 700;
      margin: 0;
    }

    .consumos-panel-body {
      padding: 18px;
    }

    .consumos-filter {
      align-items: flex-end;
    }

    .consumos-page label {
      color: #445161;
      font-size: .86rem;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .consumos-page .form-control,
    .consumos-page .btn,
    .consumos-page .badge {
      border-radius: 6px;
    }

    .consumos-actions {
      align-items: flex-end;
      display: flex;
      gap: 8px;
      height: 100%;
      justify-content: flex-end;
    }

    .consumos-table-wrap {
      border-top: 1px solid #e9edf2;
      margin-top: 18px;
      padding-top: 18px;
    }

    .consumos-empty {
      align-items: center;
      background: #fbfcfd;
      border: 1px dashed #cfd8e3;
      border-radius: 8px;
      color: #687789;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 108px;
      padding: 28px;
      text-align: center;
    }

    .consumos-empty i {
      color: #8a6f2a;
      display: block;
      font-size: 1.45rem;
      margin-bottom: .5rem;
    }

    #div_tabla table thead th {
      background: #f7f9fb;
      border-bottom: 1px solid #dfe5ec;
      color: #445161;
      font-size: .78rem;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    #tabla_registros {
      color: #17212b;
      width: 100%;
    }

    #tabla_registros.table-bordered td,
    #tabla_registros.table-bordered th {
      border-color: #e9edf2;
    }

    #tabla_registros td {
      vertical-align: middle;
    }

    .consumos-folio,
    .consumos-product {
      color: #17212b;
      font-weight: 700;
      white-space: nowrap;
    }

    .consumos-qty {
      display: block;
      font-weight: 700;
      text-align: right;
      white-space: nowrap;
    }

    .consumos-qty-positive {
      color: #1f7a5c;
    }

    .consumos-qty-negative {
      color: #b54747;
    }

    .consumos-qty-neutral {
      color: #687789;
    }

    @media (max-width: 767.98px) {
      .consumos-hero,
      .consumos-panel-header {
        align-items: stretch;
        flex-direction: column;
      }

      .consumos-actions,
      .consumos-actions .btn {
        width: 100%;
      }
    }

/* ===== Entregas.php ===== */
body.entregas-page,
    .entregas-page .content-wrapper {
      background: #f4f6f8;
    }

    .entregas-hero,
    .entregas-panel,
    .entregas-stat {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
    }

    .entregas-hero {
      align-items: center;
      border-left: 4px solid #1f7a5c;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      margin-bottom: 18px;
      padding: 18px 20px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    }

    .entregas-hero h1 {
      color: #17212b;
      font-size: 1.45rem;
      font-weight: 700;
      margin: 0;
    }

    .entregas-hero .subtitle,
    .entregas-panel-subtitle,
    .entregas-subtle {
      color: #687789;
      font-size: .92rem;
      margin: 4px 0 0;
    }

    .entregas-stat {
      align-items: center;
      display: flex;
      justify-content: space-between;
      min-height: 108px;
      padding: 16px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
    }

    .entregas-stat-icon {
      align-items: center;
      border-radius: 8px;
      color: #ffffff;
      display: flex;
      flex: 0 0 46px;
      height: 46px;
      justify-content: center;
      margin-left: 14px;
      width: 46px;
      font-size: 1.15rem;
    }

    .entregas-stat-label {
      color: #6c7a89;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .02em;
      margin: 0;
      text-transform: uppercase;
    }

    .entregas-stat-value {
      color: #17212b;
      font-size: 1.55rem;
      font-weight: 700;
      line-height: 1.1;
    }

    .entregas-stat-hint {
      color: #8a97a6;
      font-size: .82rem;
      margin: 4px 0 0;
    }

    .entregas-stat-total { background: #24745c; }
    .entregas-stat-blue { background: #2f6f9f; }
    .entregas-stat-gold { background: #8a6f2a; }
    .entregas-stat-purple { background: #6b5b95; }

    .entregas-panel {
      margin-bottom: 18px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    }

    .entregas-panel-header {
      align-items: center;
      border-bottom: 1px solid #e9edf2;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      padding: 16px 18px;
    }

    .entregas-panel-title {
      color: #17212b;
      font-size: 1.05rem;
      font-weight: 700;
      margin: 0;
    }

    .entregas-panel-body {
      padding: 18px;
    }

    .entregas-filter {
      align-items: flex-end;
    }

    .entregas-page label {
      color: #445161;
      font-size: .86rem;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .entregas-page .form-control,
    .entregas-page .btn,
    .entregas-page .badge {
      border-radius: 6px;
    }

    .entregas-actions {
      align-items: flex-end;
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      height: 100%;
    }

    .entregas-table-wrap {
      border-top: 1px solid #e9edf2;
      margin-top: 18px;
      padding-top: 18px;
    }

    .entregas-empty {
      align-items: center;
      background: #fbfcfd;
      border: 1px dashed #cfd8e3;
      border-radius: 8px;
      color: #687789;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 108px;
      padding: 28px;
      text-align: center;
    }

    .entregas-empty i {
      color: #8a6f2a;
      display: block;
      font-size: 1.45rem;
      margin-bottom: .5rem;
    }

    #div_tabla table thead th {
      background: #f7f9fb;
      border-bottom: 1px solid #dfe5ec;
      color: #445161;
      font-size: .78rem;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    #tabla_registros {
      color: #17212b;
      width: 100%;
    }

    #tabla_registros.table-bordered td,
    #tabla_registros.table-bordered th {
      border-color: #e9edf2;
    }

    #tabla_registros td {
      vertical-align: middle;
    }

    .entregas-folio,
    .entregas-code,
    .entregas-product {
      color: #17212b;
      font-weight: 700;
    }

    .entregas-folio {
      white-space: nowrap;
    }

    .entregas-qty {
      display: block;
      font-weight: 700;
      text-align: right;
      white-space: nowrap;
    }

    .entregas-qty-positive {
      color: #1f7a5c;
    }

    .entregas-qty-negative {
      color: #b54747;
    }

    .entregas-qty-neutral {
      color: #687789;
    }

    #div_tabla .dt-buttons .btn {
      border-radius: 6px;
    }

    @media (max-width: 767.98px) {
      .entregas-hero,
      .entregas-panel-header {
        align-items: stretch;
        flex-direction: column;
      }

      .entregas-actions,
      .entregas-actions .btn {
        width: 100%;
      }
    }

/* ===== FacturasProveedores.php ===== */
.supplier-invoice-page .invoice-hero {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-left: 4px solid #2f6f9f;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
      margin-bottom: 18px;
      padding: 18px 20px;
    }

    .supplier-invoice-page .invoice-hero h1 {
      color: #17212b;
      font-size: 1.45rem;
      font-weight: 700;
      margin: 0;
    }

    .supplier-invoice-page .invoice-hero .subtitle {
      color: #687789;
      margin: 5px 0 0;
    }

    .supplier-invoice-page .invoice-stat {
      align-items: center;
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
      display: flex;
      justify-content: space-between;
      min-height: 108px;
      padding: 16px;
    }

    .supplier-invoice-page .invoice-stat .label {
      color: #6c7a89;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .02em;
      margin-bottom: 6px;
      text-transform: uppercase;
    }

    .supplier-invoice-page .invoice-stat .value {
      color: #17212b;
      font-size: 1.55rem;
      font-weight: 700;
      line-height: 1.1;
    }

    .supplier-invoice-page .invoice-stat .hint {
      color: #8a97a6;
      font-size: .82rem;
      margin-top: 4px;
    }

    .supplier-invoice-page .invoice-stat .icon {
      align-items: center;
      border-radius: 8px;
      color: #ffffff;
      display: flex;
      flex: 0 0 46px;
      font-size: 1.15rem;
      height: 46px;
      justify-content: center;
      width: 46px;
    }

    .supplier-invoice-page .icon-total { background: #2f6f9f; }
    .supplier-invoice-page .icon-amount { background: #24745c; }
    .supplier-invoice-page .icon-credit { background: #8a6f2a; }
    .supplier-invoice-page .icon-providers { background: #6b5b95; }

    .supplier-invoice-page .invoice-panel {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
      margin-bottom: 18px;
    }

    .supplier-invoice-page .invoice-panel-header {
      align-items: center;
      border-bottom: 1px solid #e9edf2;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      padding: 16px 18px;
    }

    .supplier-invoice-page .invoice-panel-title {
      color: #17212b;
      font-size: 1.05rem;
      font-weight: 700;
      margin: 0;
    }

    .supplier-invoice-page .invoice-panel-subtitle {
      color: #8a97a6;
      font-size: .86rem;
      margin-top: 4px;
    }

    .supplier-invoice-page .invoice-panel-body {
      padding: 18px;
    }

    .supplier-invoice-page .invoice-filter label {
      color: #445161;
      font-size: .86rem;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .supplier-invoice-page .invoice-actions {
      align-items: flex-end;
      display: flex;
      gap: 8px;
      height: 100%;
      justify-content: flex-end;
    }

    .supplier-invoice-page .invoice-actions .btn {
      min-width: 42px;
    }

    .supplier-invoice-page .table-invoice-provider thead th {
      background: #f7f9fb;
      border-bottom: 1px solid #dfe5ec;
      color: #445161;
      font-size: .78rem;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    .supplier-invoice-page .table-invoice-provider td {
      vertical-align: middle;
    }

    .supplier-invoice-page .invoice-provider {
      color: #17212b;
      font-weight: 700;
    }

    .supplier-invoice-page .invoice-subtle {
      color: #6c7a89;
      font-size: .86rem;
    }

    .supplier-invoice-page .invoice-amount {
      color: #24745c;
      font-weight: 700;
      white-space: nowrap;
    }

    .supplier-invoice-page .invoice-empty {
      background: #fbfcfd;
      border: 1px dashed #cfd8e3;
      border-radius: 8px;
      color: #6c7a89;
      padding: 28px;
      text-align: center;
    }

    @media (max-width: 767.98px) {
      .supplier-invoice-page .invoice-actions {
        align-items: stretch;
        justify-content: flex-start;
      }

      .supplier-invoice-page .invoice-actions .btn {
        flex: 1;
      }
    }

/* ===== Formulas.php ===== */
.formula-page .formula-hero {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-left: 4px solid #1f7a5c;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
      margin-bottom: 18px;
      padding: 18px 20px;
    }

    .formula-page .formula-hero h1 {
      color: #17212b;
      font-size: 1.45rem;
      font-weight: 700;
      margin: 0;
    }

    .formula-page .formula-hero .subtitle {
      color: #687789;
      margin: 5px 0 0;
    }

    .formula-page .formula-stat {
      align-items: center;
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
      display: flex;
      justify-content: space-between;
      min-height: 108px;
      padding: 16px;
    }

    .formula-page .formula-stat .label {
      color: #6c7a89;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .02em;
      margin-bottom: 6px;
      text-transform: uppercase;
    }

    .formula-page .formula-stat .value {
      color: #17212b;
      font-size: 1.55rem;
      font-weight: 700;
      line-height: 1.1;
    }

    .formula-page .formula-stat .hint {
      color: #8a97a6;
      font-size: .82rem;
      margin-top: 4px;
    }

    .formula-page .formula-stat .icon {
      align-items: center;
      border-radius: 8px;
      color: #ffffff;
      display: flex;
      flex: 0 0 46px;
      font-size: 1.15rem;
      height: 46px;
      justify-content: center;
      width: 46px;
    }

    .formula-page .icon-total { background: #24745c; }
    .formula-page .icon-approved { background: #2f6f9f; }
    .formula-page .icon-active { background: #8a6f2a; }
    .formula-page .icon-products { background: #6b5b95; }

    .formula-page .formula-panel {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    }

    .formula-page .formula-panel-header {
      align-items: center;
      border-bottom: 1px solid #e9edf2;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      padding: 16px 18px;
    }

    .formula-page .formula-panel-title {
      color: #17212b;
      font-size: 1.05rem;
      font-weight: 700;
      margin: 0;
    }

    .formula-page .formula-panel-subtitle {
      color: #8a97a6;
      font-size: .86rem;
      margin-top: 4px;
    }

    .formula-page .formula-panel-body {
      padding: 18px;
    }

    .formula-page .formula-filter label {
      color: #445161;
      font-size: .86rem;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .formula-page .formula-actions {
      align-items: flex-end;
      display: flex;
      gap: 8px;
      height: 100%;
    }

    .formula-page .formula-actions .btn {
      min-width: 42px;
    }

    .formula-page .formula-table-wrap {
      border-top: 1px solid #e9edf2;
      margin-top: 18px;
      padding-top: 18px;
    }

    .formula-page .table-formula thead th,
    .formula-page .table-formula-detail thead th {
      background: #f7f9fb;
      border-bottom: 1px solid #dfe5ec;
      color: #445161;
      font-size: .78rem;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    .formula-page .table-formula td,
    .formula-page .table-formula-detail td {
      vertical-align: middle;
    }

    .formula-page .formula-product {
      color: #17212b;
      font-weight: 700;
    }

    .formula-page .formula-qty {
      color: #1f7a5c;
      font-weight: 700;
      white-space: nowrap;
    }

    .formula-page .formula-subtle {
      color: #6c7a89;
      font-size: .86rem;
    }

    .formula-page .formula-empty {
      background: #fbfcfd;
      border: 1px dashed #cfd8e3;
      border-radius: 8px;
      color: #6c7a89;
      padding: 28px;
      text-align: center;
    }

    @media (max-width: 767.98px) {
      .formula-page .formula-actions {
        align-items: stretch;
      }

      .formula-page .formula-actions .btn {
        flex: 1;
      }
    }

/* ===== index.php ===== */
.wrap {
    position: relative;
    width: 100%;
    min-height: 100svh;
    overflow: hidden;
  }
  .wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* misma idea que background-size: cover */
  }

/* ===== Inventario.php ===== */
.inventory-page {
      background: #f4f6f8;
    }

    .inventory-hero {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-left: 4px solid #1f7a5c;
      border-radius: 8px;
      padding: 18px 20px;
      margin-bottom: 18px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    }

    .inventory-hero h1 {
      font-size: 1.45rem;
      font-weight: 700;
      color: #17212b;
      margin: 0;
    }

    .inventory-hero .subtitle {
      color: #687789;
      margin: 5px 0 0;
    }

    .inventory-stat {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      padding: 16px;
      min-height: 108px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    }

    .inventory-stat .label {
      color: #6c7a89;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .02em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    .inventory-stat .value {
      color: #17212b;
      font-size: 1.55rem;
      font-weight: 700;
      line-height: 1.1;
    }

    .inventory-stat .hint {
      color: #8a97a6;
      font-size: .82rem;
      margin-top: 4px;
    }

    .inventory-stat .icon {
      width: 46px;
      height: 46px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 1.15rem;
      flex: 0 0 46px;
    }

    .icon-products { background: #24745c; }
    .icon-warehouses { background: #2f6f9f; }
    .icon-inventory { background: #8a6f2a; }
    .icon-conversion { background: #6b5b95; }

    .inventory-panel {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    }

    .inventory-panel-header {
      padding: 16px 18px;
      border-bottom: 1px solid #e9edf2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .inventory-panel-title {
      margin: 0;
      color: #17212b;
      font-size: 1.05rem;
      font-weight: 700;
    }

    .inventory-panel-body {
      padding: 18px;
    }

    .inventory-filter label {
      color: #445161;
      font-size: .86rem;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .inventory-actions {
      display: flex;
      align-items: flex-end;
      gap: 8px;
      height: 100%;
    }

    .inventory-table-wrap {
      border-top: 1px solid #e9edf2;
      margin-top: 18px;
      padding-top: 18px;
    }

    .table-inventory thead th {
      background: #f7f9fb;
      color: #445161;
      border-bottom: 1px solid #dfe5ec;
      font-size: .78rem;
      text-transform: uppercase;
      letter-spacing: .02em;
    }

    .table-inventory td {
      vertical-align: middle;
    }

    .inventory-product {
      color: #17212b;
      font-weight: 700;
    }

    .inventory-subtle {
      color: #6c7a89;
      font-size: .86rem;
    }

    .inventory-qty {
      font-weight: 700;
      color: #1f7a5c;
      white-space: nowrap;
    }

    .inventory-empty {
      border: 1px dashed #cfd8e3;
      border-radius: 8px;
      color: #6c7a89;
      padding: 28px;
      text-align: center;
      background: #fbfcfd;
    }

    @media (max-width: 767.98px) {
      .inventory-actions {
        align-items: stretch;
      }

      .inventory-actions .btn {
        flex: 1;
      }
    }

/* ===== Login.php ===== */
body {
      background-image: url("../../dist/img/portada.png") !important;
      background-repeat: no-repeat !important;   /* evita que se repita */
      background-size: cover !important;         /* cubre toda la pantalla */
      background-position: center !important;    /* centra la imagen */
    }

/* ===== MinMax.php ===== */
.minmax-page .minmax-hero {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-left: 4px solid #8a6f2a;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
      margin-bottom: 18px;
      padding: 18px 20px;
    }

    .minmax-page .minmax-hero h1 {
      color: #17212b;
      font-size: 1.45rem;
      font-weight: 700;
      margin: 0;
    }

    .minmax-page .minmax-hero .subtitle {
      color: #687789;
      margin: 5px 0 0;
    }

    .minmax-page .minmax-stat {
      align-items: center;
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
      display: flex;
      justify-content: space-between;
      min-height: 108px;
      padding: 16px;
    }

    .minmax-page .minmax-stat .label {
      color: #6c7a89;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .02em;
      margin-bottom: 6px;
      text-transform: uppercase;
    }

    .minmax-page .minmax-stat .value {
      color: #17212b;
      font-size: 1.55rem;
      font-weight: 700;
      line-height: 1.1;
    }

    .minmax-page .minmax-stat .hint {
      color: #8a97a6;
      font-size: .82rem;
      margin-top: 4px;
    }

    .minmax-page .minmax-stat .icon {
      align-items: center;
      border-radius: 8px;
      color: #ffffff;
      display: flex;
      flex: 0 0 46px;
      font-size: 1.15rem;
      height: 46px;
      justify-content: center;
      width: 46px;
    }

    .minmax-page .icon-total { background: #8a6f2a; }
    .minmax-page .icon-configured { background: #24745c; }
    .minmax-page .icon-pending { background: #b54747; }
    .minmax-page .icon-warehouses { background: #2f6f9f; }

    .minmax-page .minmax-panel {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
      margin-bottom: 18px;
    }

    .minmax-page .minmax-panel-header {
      align-items: center;
      border-bottom: 1px solid #e9edf2;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      padding: 16px 18px;
    }

    .minmax-page .minmax-panel-title {
      color: #17212b;
      font-size: 1.05rem;
      font-weight: 700;
      margin: 0;
    }

    .minmax-page .minmax-panel-subtitle {
      color: #8a97a6;
      font-size: .86rem;
      margin-top: 4px;
    }

    .minmax-page .minmax-panel-body {
      padding: 18px;
    }

    .minmax-page .table-minmax thead th {
      background: #f7f9fb;
      border-bottom: 1px solid #dfe5ec;
      color: #445161;
      font-size: .78rem;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    .minmax-page .table-minmax td {
      vertical-align: middle;
    }

    .minmax-page .minmax-product {
      color: #17212b;
      font-weight: 700;
    }

    .minmax-page .minmax-subtle {
      color: #6c7a89;
      font-size: .86rem;
    }

    .minmax-page .minmax-qty {
      color: #24745c;
      font-weight: 700;
      white-space: nowrap;
    }

    .minmax-page .minmax-actions {
      display: flex;
      gap: 6px;
      justify-content: center;
      white-space: nowrap;
    }

    .minmax-page .minmax-empty {
      background: #fbfcfd;
      border: 1px dashed #cfd8e3;
      border-radius: 8px;
      color: #6c7a89;
      padding: 28px;
      text-align: center;
    }

    .minmax-page .minmax-modal .modal-content {
      border: 0;
      border-radius: 8px;
      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
    }

    .minmax-page .minmax-modal .modal-header {
      background: #ffffff;
      border-bottom: 1px solid #e9edf2;
      border-left: 4px solid #8a6f2a;
      border-radius: 8px 8px 0 0;
    }

    .minmax-page .minmax-modal .modal-title {
      color: #17212b;
      font-size: 1.1rem;
      font-weight: 700;
    }

    .minmax-page .minmax-modal .modal-body {
      padding: 18px;
    }

    .minmax-page .minmax-modal label {
      color: #445161;
      font-size: .86rem;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .minmax-page .minmax-modal .modal-footer {
      background: #fbfcfd;
      border-top: 1px solid #e9edf2;
    }

/* ===== Notificaciones.php ===== */
body.notificaciones-page,
    .notificaciones-page .content-wrapper {
      background: #f4f6f8;
    }

    .notificaciones-hero,
    .notificaciones-panel,
    .notificaciones-stat {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
    }

    .notificaciones-hero {
      align-items: center;
      border-left: 4px solid #1f7a5c;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      margin-bottom: 18px;
      padding: 18px 20px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    }

    .notificaciones-hero h1 {
      color: #17212b;
      font-size: 1.45rem;
      font-weight: 700;
      margin: 0;
    }

    .notificaciones-hero .subtitle,
    .notificaciones-panel-subtitle,
    .notificaciones-subtle {
      color: #687789;
      font-size: .92rem;
      margin: 4px 0 0;
    }

    .notificaciones-stat {
      align-items: center;
      display: flex;
      justify-content: space-between;
      min-height: 108px;
      padding: 16px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
    }

    .notificaciones-stat-icon {
      align-items: center;
      border-radius: 8px;
      color: #ffffff;
      display: flex;
      flex: 0 0 46px;
      height: 46px;
      justify-content: center;
      margin-left: 14px;
      width: 46px;
      font-size: 1.15rem;
    }

    .notificaciones-stat-label {
      color: #6c7a89;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .02em;
      margin: 0;
      text-transform: uppercase;
    }

    .notificaciones-stat-value {
      color: #17212b;
      font-size: 1.55rem;
      font-weight: 700;
      line-height: 1.1;
    }

    .notificaciones-stat-hint {
      color: #8a97a6;
      font-size: .82rem;
      margin: 4px 0 0;
    }

    .notificaciones-stat-total { background: #24745c; }
    .notificaciones-stat-blue { background: #2f6f9f; }
    .notificaciones-stat-purple { background: #6b5b95; }
    .notificaciones-stat-gold { background: #8a6f2a; }

    .notificaciones-panel {
      margin-bottom: 18px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    }

    .notificaciones-panel-header {
      align-items: center;
      border-bottom: 1px solid #e9edf2;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      padding: 16px 18px;
    }

    .notificaciones-panel-title {
      color: #17212b;
      font-size: 1.05rem;
      font-weight: 700;
      margin: 0;
    }

    .notificaciones-panel-body {
      padding: 18px;
    }

    .notificaciones-filter {
      align-items: flex-end;
    }

    .notificaciones-page label {
      color: #445161;
      font-size: .86rem;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .notificaciones-page .form-control,
    .notificaciones-page .btn,
    .notificaciones-page .badge {
      border-radius: 6px;
    }

    .notificaciones-actions {
      align-items: flex-end;
      display: flex;
      gap: 8px;
      height: 100%;
      justify-content: flex-end;
    }

    .notificaciones-table-wrap {
      border-top: 1px solid #e9edf2;
      margin-top: 18px;
      padding-top: 18px;
    }

    .notificaciones-empty {
      align-items: center;
      background: #fbfcfd;
      border: 1px dashed #cfd8e3;
      border-radius: 8px;
      color: #687789;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 108px;
      padding: 28px;
      text-align: center;
    }

    .notificaciones-empty i {
      color: #8a6f2a;
      display: block;
      font-size: 1.45rem;
      margin-bottom: .5rem;
    }

    #div_tabla table thead th {
      background: #f7f9fb;
      border-bottom: 1px solid #dfe5ec;
      color: #445161;
      font-size: .78rem;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    #tabla_registros {
      color: #17212b;
      width: 100%;
    }

    #tabla_registros.table-bordered td,
    #tabla_registros.table-bordered th {
      border-color: #e9edf2;
    }

    #tabla_registros td {
      vertical-align: middle;
    }

    .notificaciones-folio,
    .notificaciones-product {
      color: #17212b;
      font-weight: 700;
      white-space: nowrap;
    }

    .notificaciones-qty {
      display: block;
      font-weight: 700;
      text-align: right;
      white-space: nowrap;
    }

    .notificaciones-qty-positive {
      color: #1f7a5c;
    }

    .notificaciones-qty-negative {
      color: #b54747;
    }

    .notificaciones-qty-neutral {
      color: #687789;
    }

    @media (max-width: 767.98px) {
      .notificaciones-hero,
      .notificaciones-panel-header {
        align-items: stretch;
        flex-direction: column;
      }

      .notificaciones-actions,
      .notificaciones-actions .btn {
        width: 100%;
      }
    }

/* ===== OrdenesCompra.php ===== */
.purchase-page {
      background: #f4f6f8;
    }

    .purchase-hero {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-left: 4px solid #1f7a5c;
      border-radius: 8px;
      padding: 18px 20px;
      margin-bottom: 18px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    }

    .purchase-hero h1 {
      font-size: 1.45rem;
      font-weight: 700;
      color: #17212b;
      margin: 0;
    }

    .purchase-hero .subtitle {
      color: #687789;
      margin: 5px 0 0;
    }

    .purchase-stat {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      padding: 16px;
      min-height: 108px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    }

    .purchase-stat .label {
      color: #6c7a89;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .02em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    .purchase-stat .value {
      color: #17212b;
      font-size: 1.55rem;
      font-weight: 700;
      line-height: 1.1;
    }

    .purchase-stat .hint {
      color: #8a97a6;
      font-size: .82rem;
      margin-top: 4px;
    }

    .purchase-stat .icon {
      width: 46px;
      height: 46px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 1.15rem;
      flex: 0 0 46px;
    }

    .icon-total { background: #24745c; }
    .icon-draft { background: #8a6f2a; }
    .icon-confirmed { background: #2f6f9f; }
    .icon-delivered { background: #6b5b95; }

    .purchase-panel {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    }

    .purchase-panel-header {
      padding: 16px 18px;
      border-bottom: 1px solid #e9edf2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .purchase-panel-title {
      margin: 0;
      color: #17212b;
      font-size: 1.05rem;
      font-weight: 700;
    }

    .purchase-panel-body {
      padding: 18px;
    }

    .purchase-filter label {
      color: #445161;
      font-size: .86rem;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .purchase-actions {
      display: flex;
      align-items: flex-end;
      gap: 8px;
      height: 100%;
    }

    .purchase-table-wrap {
      border-top: 1px solid #e9edf2;
      margin-top: 18px;
      padding-top: 18px;
    }

    .table-purchase thead th {
      background: #f7f9fb;
      color: #445161;
      border-bottom: 1px solid #dfe5ec;
      font-size: .78rem;
      text-transform: uppercase;
      letter-spacing: .02em;
    }

    .table-purchase td {
      vertical-align: middle;
    }

    .purchase-folio {
      color: #17212b;
      font-weight: 700;
      white-space: nowrap;
    }

    .purchase-provider {
      color: #17212b;
      font-weight: 700;
    }

    .purchase-subtle {
      color: #6c7a89;
      font-size: .86rem;
    }

    .purchase-empty {
      border: 1px dashed #cfd8e3;
      border-radius: 8px;
      color: #6c7a89;
      padding: 28px;
      text-align: center;
      background: #fbfcfd;
    }

    @media (max-width: 767.98px) {
      .purchase-actions {
        align-items: stretch;
      }

      .purchase-actions .btn {
        flex: 1;
      }
    }

/* ===== Packs.php ===== */
body.packs-page,
    .packs-page .content-wrapper {
      background: #f4f6f8;
    }

    .packs-hero,
    .packs-panel,
    .packs-stat {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
    }

    .packs-hero {
      align-items: center;
      border-left: 4px solid #1f7a5c;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      margin-bottom: 18px;
      padding: 18px 20px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    }

    .packs-hero h1 {
      color: #17212b;
      font-size: 1.45rem;
      font-weight: 700;
      margin: 0;
    }

    .packs-hero .subtitle,
    .packs-panel-subtitle,
    .packs-subtle {
      color: #687789;
      font-size: .92rem;
      margin: 4px 0 0;
    }

    .packs-panel {
      margin-bottom: 18px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    }

    .packs-panel-header {
      align-items: center;
      border-bottom: 1px solid #e9edf2;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      padding: 16px 18px;
    }

    .packs-panel-title {
      color: #17212b;
      font-size: 1.05rem;
      font-weight: 700;
      margin: 0;
    }

    .packs-panel-body {
      padding: 18px;
    }

    .packs-stat {
      align-items: center;
      display: flex;
      justify-content: space-between;
      min-height: 108px;
      padding: 16px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
    }

    .packs-stat-icon {
      align-items: center;
      border-radius: 8px;
      color: #ffffff;
      display: flex;
      flex: 0 0 46px;
      height: 46px;
      justify-content: center;
      margin-left: 14px;
      width: 46px;
      font-size: 1.15rem;
    }

    .packs-stat-label {
      color: #6c7a89;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .02em;
      margin: 0;
      text-transform: uppercase;
    }

    .packs-stat-value {
      color: #17212b;
      font-size: 1.55rem;
      font-weight: 700;
      line-height: 1.1;
    }

    .packs-stat-hint {
      color: #8a97a6;
      font-size: .82rem;
      margin: 4px 0 0;
    }

    .packs-stat-total { background: #24745c; }
    .packs-stat-blue { background: #2f6f9f; }
    .packs-stat-purple { background: #6b5b95; }
    .packs-stat-gold { background: #8a6f2a; }

    .packs-filter {
      align-items: flex-end;
    }

    .packs-page label {
      color: #445161;
      font-size: .86rem;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .packs-page .form-control,
    .packs-page .btn,
    .packs-page .badge,
    .packs-page .modal-content {
      border-radius: 6px;
    }

    .packs-actions {
      align-items: flex-end;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      height: 100%;
      justify-content: flex-end;
    }

    .packs-page .packs-modal-dialog {
      max-width: 1140px;
    }

    .packs-page .modal-body {
      padding: 18px;
    }

    .packs-page .modal-footer {
      border-top: 1px solid #e9edf2;
      padding: 16px 18px;
    }

    .packs-modal-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 100%;
    }

    .packs-table-wrap {
      border-top: 1px solid #e9edf2;
      margin-top: 18px;
      padding-top: 18px;
    }

    .packs-empty {
      align-items: center;
      background: #fbfcfd;
      border: 1px dashed #cfd8e3;
      border-radius: 8px;
      color: #687789;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 108px;
      padding: 28px;
      text-align: center;
    }

    .packs-empty i {
      color: #8a6f2a;
      display: block;
      font-size: 1.45rem;
      margin-bottom: .5rem;
    }

    #div_tabla table thead th,
    #listado_productos table thead th {
      background: #f7f9fb;
      border-bottom: 1px solid #dfe5ec;
      color: #445161;
      font-size: .78rem;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    #tabla_registros,
    #lista_productos {
      color: #17212b;
      width: 100%;
    }

    #tabla_registros.table-bordered td,
    #tabla_registros.table-bordered th,
    #lista_productos.table-bordered td,
    #lista_productos.table-bordered th {
      border-color: #e9edf2;
    }

    #tabla_registros td,
    #lista_productos td {
      vertical-align: middle;
    }

    .packs-product,
    .packs-folio {
      color: #17212b;
      font-weight: 700;
      white-space: nowrap;
    }

    .packs-qty {
      display: block;
      font-weight: 700;
      text-align: right;
      white-space: nowrap;
    }

    .packs-qty-positive {
      color: #1f7a5c;
    }

    .packs-qty-negative {
      color: #b54747;
    }

    .packs-qty-neutral {
      color: #687789;
    }

    .btnEditar,
    .btnEliminar {
      border-radius: 6px;
      padding: .25rem .5rem;
    }

    @media (max-width: 767.98px) {
      .packs-hero,
      .packs-panel-header {
        align-items: stretch;
        flex-direction: column;
      }

      .packs-actions,
      .packs-actions .btn,
      .packs-modal-actions .btn {
        width: 100%;
      }

      .packs-modal-actions {
        gap: 10px;
      }
    }

/* ===== PagosProveedores.php ===== */
.supplier-payment-page .payment-hero {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-left: 4px solid #2f6f9f;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
      margin-bottom: 18px;
      padding: 18px 20px;
    }

    .supplier-payment-page .payment-hero h1 {
      color: #17212b;
      font-size: 1.45rem;
      font-weight: 700;
      margin: 0;
    }

    .supplier-payment-page .payment-hero .subtitle {
      color: #687789;
      margin: 5px 0 0;
    }

    .supplier-payment-page .payment-stat {
      align-items: center;
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
      display: flex;
      justify-content: space-between;
      min-height: 108px;
      padding: 16px;
    }

    .supplier-payment-page .payment-stat .label {
      color: #6c7a89;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .02em;
      margin-bottom: 6px;
      text-transform: uppercase;
    }

    .supplier-payment-page .payment-stat .value {
      color: #17212b;
      font-size: 1.55rem;
      font-weight: 700;
      line-height: 1.1;
    }

    .supplier-payment-page .payment-stat .hint {
      color: #8a97a6;
      font-size: .82rem;
      margin-top: 4px;
    }

    .supplier-payment-page .payment-stat .icon {
      align-items: center;
      border-radius: 8px;
      color: #ffffff;
      display: flex;
      flex: 0 0 46px;
      font-size: 1.15rem;
      height: 46px;
      justify-content: center;
      width: 46px;
    }

    .supplier-payment-page .icon-total { background: #2f6f9f; }
    .supplier-payment-page .icon-amount { background: #24745c; }
    .supplier-payment-page .icon-month { background: #8a6f2a; }
    .supplier-payment-page .icon-providers { background: #6b5b95; }

    .supplier-payment-page .payment-panel {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
      margin-bottom: 18px;
    }

    .supplier-payment-page .payment-panel-header {
      align-items: center;
      border-bottom: 1px solid #e9edf2;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      padding: 16px 18px;
    }

    .supplier-payment-page .payment-panel-title {
      color: #17212b;
      font-size: 1.05rem;
      font-weight: 700;
      margin: 0;
    }

    .supplier-payment-page .payment-panel-subtitle {
      color: #8a97a6;
      font-size: .86rem;
      margin-top: 4px;
    }

    .supplier-payment-page .payment-panel-body {
      padding: 18px;
    }

    .supplier-payment-page .payment-filter label,
    .supplier-payment-page .payment-form label {
      color: #445161;
      font-size: .86rem;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .supplier-payment-page .payment-actions {
      align-items: flex-end;
      display: flex;
      gap: 8px;
      height: 100%;
      justify-content: flex-end;
    }

    .supplier-payment-page .payment-actions .btn {
      min-width: 42px;
    }

    .supplier-payment-page .table-supplier-payment thead th,
    .supplier-payment-page #tabla_lineas thead td {
      background: #f7f9fb;
      border-bottom: 1px solid #dfe5ec;
      color: #445161;
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    .supplier-payment-page .table-supplier-payment td,
    .supplier-payment-page #tabla_lineas td {
      vertical-align: middle;
    }

    .supplier-payment-page .payment-provider {
      color: #17212b;
      font-weight: 700;
    }

    .supplier-payment-page .payment-subtle {
      color: #6c7a89;
      font-size: .86rem;
    }

    .supplier-payment-page .payment-amount {
      color: #24745c;
      font-weight: 700;
      white-space: nowrap;
    }

    .supplier-payment-page .payment-empty {
      background: #fbfcfd;
      border: 1px dashed #cfd8e3;
      border-radius: 8px;
      color: #6c7a89;
      padding: 28px;
      text-align: center;
    }

    .supplier-payment-page .payment-form-section {
      background: #fbfcfd;
      border: 1px solid #e9edf2;
      border-radius: 8px;
      margin-bottom: 18px;
      padding: 16px;
    }

    .supplier-payment-page .payment-form-section-title {
      color: #17212b;
      font-size: .95rem;
      font-weight: 700;
      margin: 0 0 14px;
    }

    @media (max-width: 767.98px) {
      .supplier-payment-page .payment-actions {
        align-items: stretch;
        justify-content: flex-start;
      }

      .supplier-payment-page .payment-actions .btn {
        flex: 1;
      }
    }

/* ===== Pedidos.php ===== */
body.pedidos-page,
    .pedidos-page .content-wrapper {
      background: #f4f6f8;
    }

    .pedidos-hero,
    .pedidos-panel,
    .pedidos-stat {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
    }

    .pedidos-hero {
      align-items: center;
      border-left: 4px solid #1f7a5c;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      margin-bottom: 18px;
      padding: 18px 20px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    }

    .pedidos-hero h1 {
      color: #17212b;
      font-size: 1.45rem;
      font-weight: 700;
      margin: 0;
    }

    .pedidos-hero .subtitle,
    .pedidos-panel-subtitle,
    .pedidos-subtle {
      color: #687789;
      font-size: .92rem;
      margin: 4px 0 0;
    }

    .pedidos-stat {
      align-items: center;
      display: flex;
      justify-content: space-between;
      min-height: 108px;
      padding: 16px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
    }

    .pedidos-stat-icon {
      align-items: center;
      border-radius: 8px;
      color: #ffffff;
      display: flex;
      flex: 0 0 46px;
      height: 46px;
      justify-content: center;
      margin-left: 14px;
      width: 46px;
      font-size: 1.15rem;
    }

    .pedidos-stat-label {
      color: #6c7a89;
      font-size: .82rem;
      font-weight: 700;
      margin: 0;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    .pedidos-stat-value {
      color: #17212b;
      font-size: 1.55rem;
      font-weight: 700;
      line-height: 1.1;
    }

    .pedidos-stat-hint {
      color: #8a97a6;
      font-size: .82rem;
      margin: 4px 0 0;
    }

    .pedidos-stat-total { background: #24745c; }
    .pedidos-stat-blue { background: #2f6f9f; }
    .pedidos-stat-gold { background: #8a6f2a; }
    .pedidos-stat-green { background: #1f7a5c; }
    .pedidos-stat-red { background: #b54747; }

    .pedidos-panel {
      margin-bottom: 18px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    }

    .pedidos-panel-header {
      align-items: center;
      border-bottom: 1px solid #e9edf2;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      padding: 16px 18px;
    }

    .pedidos-panel-title {
      color: #17212b;
      font-size: 1.05rem;
      font-weight: 700;
      margin: 0;
    }

    .pedidos-panel-body {
      padding: 18px;
    }

    .pedidos-panel-footer {
      border-top: 1px solid #e9edf2;
      padding: 16px 18px;
    }

    .pedidos-page label {
      color: #445161;
      font-size: .86rem;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .pedidos-page .form-control,
    .pedidos-page .btn,
    .pedidos-page .badge {
      border-radius: 6px;
    }

    .pedidos-page input[readonly],
    .pedidos-page textarea[disabled] {
      background: #f7f9fb;
    }

    .pedidos-actions {
      align-items: flex-end;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
      height: 100%;
    }

    .pedidos-filter {
      align-items: flex-end;
    }

    .pedidos-table-wrap {
      border-top: 1px solid #e9edf2;
      margin-top: 18px;
      padding-top: 18px;
    }

    .pedidos-empty {
      align-items: center;
      background: #fbfcfd;
      border: 1px dashed #cfd8e3;
      border-radius: 8px;
      color: #687789;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 108px;
      padding: 28px;
      text-align: center;
    }

    .pedidos-empty i {
      color: #8a6f2a;
      display: block;
      font-size: 1.45rem;
      margin-bottom: .5rem;
    }

    #div_tabla table thead th,
    #div_detalle_ped table thead th,
    #listado_entrega table thead th {
      background: #f7f9fb;
      border-bottom: 1px solid #dfe5ec;
      color: #445161;
      font-size: .78rem;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    #tabla_registros,
    #tabla_detalles,
    #lista_entrega {
      color: #17212b;
    }

    #div_tabla table td,
    #div_detalle_ped table td,
    #listado_entrega table td {
      vertical-align: middle;
    }

    #tabla_registros.table-bordered td,
    #tabla_registros.table-bordered th,
    #tabla_detalles.table-bordered td,
    #tabla_detalles.table-bordered th,
    #lista_entrega.table-bordered td,
    #lista_entrega.table-bordered th {
      border-color: #e9edf2;
    }

    .pedidos-folio,
    .pedidos-name,
    .pedidos-product {
      color: #17212b;
      font-weight: 700;
    }

    .pedidos-folio {
      white-space: nowrap;
    }

    .pedidos-qty,
    .pedidos-amount {
      display: block;
      font-weight: 700;
      text-align: right;
      white-space: nowrap;
    }

    .pedidos-amount {
      color: #17212b;
    }

    .pedidos-qty-positive {
      color: #1f7a5c;
    }

    .pedidos-qty-negative,
    .pedidos-qty-risk {
      color: #b54747;
    }

    .pedidos-qty-neutral {
      color: #687789;
    }

    .btnEditar,
    .btnEliminar,
    .btnEditarDet,
    .btnEliminarDet {
      border-radius: 6px;
      padding: .25rem .5rem;
    }

    @media (max-width: 767.98px) {
      .pedidos-hero {
        align-items: stretch;
        flex-direction: column;
      }

      .pedidos-panel-header {
        align-items: stretch;
        flex-direction: column;
      }

      .pedidos-actions,
      #btnAgregarProducto {
        width: 100%;
      }

      .pedidos-filter .pedidos-actions .btn {
        flex: 1;
      }
    }

/* ===== Planeacion.php ===== */
body.planeacion-page,
    .planeacion-page .content-wrapper {
      background: #f4f6f8;
    }

    .planeacion-hero,
    .planeacion-panel,
    .planeacion-stat {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
    }

    .planeacion-hero,
    .planeacion-panel {
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    }

    .planeacion-hero {
      border-left: 4px solid #1f7a5c;
      margin-bottom: 18px;
      padding: 18px 20px;
    }

    .planeacion-hero-inner {
      align-items: flex-start;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
    }

    .planeacion-hero h1 {
      color: #17212b;
      font-size: 1.45rem;
      font-weight: 700;
      margin: 0;
    }

    .planeacion-hero .subtitle,
    .planeacion-panel-subtitle {
      color: #687789;
      font-size: .92rem;
      margin: 5px 0 0;
    }

    .planeacion-subtle {
      color: #6c7a89;
      font-size: .86rem;
      margin: 0;
    }

    .planeacion-stat {
      align-items: center;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
      display: flex;
      justify-content: space-between;
      min-height: 108px;
      padding: 16px;
    }

    .planeacion-stat-content {
      min-width: 0;
    }

    .planeacion-stat-icon {
      align-items: center;
      border-radius: 8px;
      color: #ffffff;
      display: flex;
      flex: 0 0 46px;
      font-size: 1.15rem;
      height: 46px;
      justify-content: center;
      margin-left: 14px;
      width: 46px;
    }

    .planeacion-stat-label {
      color: #6c7a89;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .02em;
      margin: 0 0 8px;
      text-transform: uppercase;
    }

    .planeacion-stat-value {
      color: #17212b;
      font-size: 1.55rem;
      font-weight: 700;
      line-height: 1.1;
    }

    .planeacion-stat-hint {
      color: #8a97a6;
      font-size: .82rem;
      margin-top: 4px;
    }

    .planeacion-stat-total { background: #24745c; }
    .planeacion-stat-pending { background: #8a6f2a; }
    .planeacion-stat-blue { background: #2f6f9f; }
    .planeacion-stat-risk { background: #b54747; }

    .planeacion-panel {
      margin-bottom: 18px;
    }

    .planeacion-panel-header {
      align-items: flex-start;
      border-bottom: 1px solid #e9edf2;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      padding: 16px 18px;
    }

    .planeacion-panel-title {
      color: #17212b;
      font-size: 1.05rem;
      font-weight: 700;
      margin: 0;
    }

    .planeacion-panel-body {
      padding: 18px;
    }

    .planeacion-page label {
      color: #445161;
      font-size: .86rem;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .planeacion-page .form-control,
    .planeacion-page .btn,
    .planeacion-page .badge {
      border-radius: 6px;
    }

    .planeacion-actions {
      align-items: flex-end;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      height: 100%;
      justify-content: flex-end;
    }

    .planeacion-filter {
      align-items: flex-end;
    }

    .planeacion-empty {
      background: #fbfcfd;
      border: 1px dashed #cfd8e3;
      border-radius: 8px;
      color: #6c7a89;
      min-height: 108px;
      padding: 28px;
      text-align: center;
    }

    .planeacion-empty i {
      color: #8a6f2a;
      display: block;
      font-size: 1.45rem;
      margin-bottom: 8px;
    }

    .planeacion-table-wrap {
      border-top: 1px solid #e9edf2;
      margin-top: 18px;
      padding-top: 18px;
    }

    .planeacion-page #div_tabla table thead th,
    .planeacion-page #div_tablamp table thead th {
      background: #f7f9fb;
      border-bottom: 1px solid #dfe5ec;
      color: #445161;
      font-size: .78rem;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    .planeacion-page #tabla_registros,
    .planeacion-page #tabla_mp {
      color: #17212b;
      width: 100%;
    }

    .planeacion-page #tabla_registros.table-bordered td,
    .planeacion-page #tabla_registros.table-bordered th,
    .planeacion-page #tabla_mp.table-bordered td,
    .planeacion-page #tabla_mp.table-bordered th {
      border-color: #e9edf2;
    }

    .planeacion-page #tabla_registros td,
    .planeacion-page #tabla_mp td {
      vertical-align: middle;
    }

    .planeacion-folio,
    .planeacion-product,
    .planeacion-name {
      color: #17212b;
      font-weight: 700;
    }

    .planeacion-qty {
      display: block;
      font-weight: 700;
      text-align: right;
      white-space: nowrap;
    }

    .planeacion-qty-positive {
      color: #1f7a5c;
    }

    .planeacion-qty-negative,
    .planeacion-qty-risk {
      color: #b54747;
    }

    .planeacion-qty-neutral {
      color: #687789;
    }

    @media (max-width: 767.98px) {
      .planeacion-panel-header {
        align-items: stretch;
        flex-direction: column;
      }

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

/* ===== Produccion.php ===== */
body.produccion-page,
    .produccion-page .content-wrapper {
      background: #f4f6f8;
    }

    .produccion-hero,
    .produccion-panel,
    .produccion-stat {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
    }

    .produccion-hero,
    .produccion-panel {
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    }

    .produccion-hero {
      border-left: 4px solid #1f7a5c;
      margin-bottom: 18px;
      padding: 18px 20px;
    }

    .produccion-hero-inner {
      align-items: flex-start;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
    }

    .produccion-hero h1 {
      color: #17212b;
      font-size: 1.45rem;
      font-weight: 700;
      margin: 0;
    }

    .produccion-hero .subtitle,
    .produccion-panel-subtitle {
      color: #687789;
      font-size: .92rem;
      margin: 5px 0 0;
    }

    .produccion-hero .btn {
      white-space: nowrap;
    }

    .produccion-subtle {
      color: #6c7a89;
      font-size: .86rem;
      margin: 0;
    }

    .produccion-stat {
      align-items: center;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
      display: flex;
      justify-content: space-between;
      min-height: 108px;
      padding: 16px;
    }

    .produccion-stat-content {
      min-width: 0;
    }

    .produccion-stat-icon {
      align-items: center;
      border-radius: 8px;
      color: #ffffff;
      display: flex;
      flex: 0 0 46px;
      height: 46px;
      justify-content: center;
      margin-left: 14px;
      width: 46px;
      font-size: 1.15rem;
    }

    .produccion-stat-label {
      color: #6c7a89;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .02em;
      margin: 0 0 8px;
      text-transform: uppercase;
    }

    .produccion-stat-value {
      color: #17212b;
      font-size: 1.55rem;
      font-weight: 700;
      line-height: 1.1;
    }

    .produccion-stat-hint {
      color: #8a97a6;
      font-size: .82rem;
      margin-top: 4px;
    }

    .produccion-stat-total { background: #24745c; }
    .produccion-stat-pending { background: #8a6f2a; }
    .produccion-stat-completed { background: #6b5b95; }
    .produccion-stat-risk { background: #b54747; }

    .produccion-panel {
      margin-bottom: 18px;
    }

    .produccion-panel-header {
      align-items: flex-start;
      border-bottom: 1px solid #e9edf2;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      padding: 16px 18px;
    }

    .produccion-panel-title {
      color: #17212b;
      font-size: 1.05rem;
      font-weight: 700;
      margin: 0;
    }

    .produccion-panel-summary {
      align-self: center;
      text-align: right;
    }

    .produccion-panel-body {
      padding: 18px;
    }

    .produccion-panel-footer {
      border-top: 1px solid #e9edf2;
      padding: 16px 18px;
    }

    .produccion-panel-tools {
      align-items: flex-end;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
    }

    .produccion-page label {
      color: #445161;
      font-size: .86rem;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .produccion-page .form-control,
    .produccion-page .btn,
    .produccion-page .badge {
      border-radius: 6px;
    }

    .produccion-page input[readonly],
    .produccion-page input[disabled] {
      background: #f7f9fb;
    }

    .produccion-actions {
      align-items: flex-end;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      height: 100%;
      justify-content: flex-end;
    }

    .produccion-filter {
      align-items: flex-end;
    }

    .produccion-empty {
      background: #fbfcfd;
      border: 1px dashed #cfd8e3;
      border-radius: 8px;
      color: #6c7a89;
      min-height: 108px;
      padding: 28px;
      text-align: center;
    }

    .produccion-empty i {
      color: #8a6f2a;
      display: block;
      font-size: 1.45rem;
      margin-bottom: 8px;
    }

    .produccion-table-wrap {
      border-top: 1px solid #e9edf2;
      margin-top: 18px;
      padding-top: 18px;
    }

    #div_tabla table thead th,
    #div_detalle_for table thead th,
    #div_detalle_ruta table thead th {
      background: #f7f9fb;
      border-bottom: 1px solid #dfe5ec;
      color: #445161;
      font-size: .78rem;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    #tabla_registros,
    #tabla_detalles,
    #tabla_ruta {
      color: #17212b;
      width: 100%;
    }

    #tabla_registros.table-bordered td,
    #tabla_registros.table-bordered th,
    #tabla_detalles.table-bordered td,
    #tabla_detalles.table-bordered th,
    #tabla_ruta.table-bordered td,
    #tabla_ruta.table-bordered th {
      border-color: #e9edf2;
    }

    #tabla_registros td,
    #tabla_detalles td,
    #tabla_ruta td {
      vertical-align: middle;
    }

    .produccion-folio,
    .produccion-product,
    .produccion-name {
      color: #17212b;
      font-weight: 700;
    }

    .produccion-folio {
      white-space: nowrap;
    }

    .produccion-qty,
    .produccion-amount {
      display: block;
      font-weight: 700;
      text-align: right;
      white-space: nowrap;
    }

    .produccion-amount {
      color: #17212b;
    }

    .produccion-qty-positive {
      color: #1f7a5c;
    }

    .produccion-qty-negative,
    .produccion-qty-risk {
      color: #b54747;
    }

    .produccion-qty-neutral {
      color: #687789;
    }

    .btnEditar,
    .btnEliminar {
      border-radius: 6px;
      padding: .25rem .5rem;
    }

    @media (max-width: 767.98px) {
      .produccion-hero .btn {
        width: 100%;
      }

      .produccion-panel-header {
        align-items: stretch;
        flex-direction: column;
      }

      .produccion-actions,
      .produccion-filter .produccion-actions .btn,
      .produccion-actions .btn,
      #btnNuevo {
        width: 100%;
      }
    }

/* ===== Proveedores.php ===== */
.provider-page .provider-hero {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-left: 4px solid #24745c;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
      margin-bottom: 18px;
      padding: 18px 20px;
    }

    .provider-page .provider-hero h1 {
      color: #17212b;
      font-size: 1.45rem;
      font-weight: 700;
      margin: 0;
    }

    .provider-page .provider-hero .subtitle {
      color: #687789;
      margin: 5px 0 0;
    }

    .provider-page .provider-stat {
      align-items: center;
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
      display: flex;
      justify-content: space-between;
      min-height: 108px;
      padding: 16px;
    }

    .provider-page .provider-stat .label {
      color: #6c7a89;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .02em;
      margin-bottom: 6px;
      text-transform: uppercase;
    }

    .provider-page .provider-stat .value {
      color: #17212b;
      font-size: 1.55rem;
      font-weight: 700;
      line-height: 1.1;
    }

    .provider-page .provider-stat .hint {
      color: #8a97a6;
      font-size: .82rem;
      margin-top: 4px;
    }

    .provider-page .provider-stat .icon {
      align-items: center;
      border-radius: 8px;
      color: #ffffff;
      display: flex;
      flex: 0 0 46px;
      font-size: 1.15rem;
      height: 46px;
      justify-content: center;
      width: 46px;
    }

    .provider-page .icon-total { background: #24745c; }
    .provider-page .icon-active { background: #2f6f9f; }
    .provider-page .icon-credit { background: #8a6f2a; }
    .provider-page .icon-types { background: #6b5b95; }

    .provider-page .provider-panel {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    }

    .provider-page .provider-panel-header {
      align-items: center;
      border-bottom: 1px solid #e9edf2;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      padding: 16px 18px;
    }

    .provider-page .provider-panel-title {
      color: #17212b;
      font-size: 1.05rem;
      font-weight: 700;
      margin: 0;
    }

    .provider-page .provider-panel-subtitle {
      color: #8a97a6;
      font-size: .86rem;
      margin-top: 4px;
    }

    .provider-page .provider-panel-body {
      padding: 18px;
    }

    .provider-page .provider-table-wrap {
      min-height: 120px;
    }

    .provider-page .table-provider thead th,
    .provider-page .table-provider-detail thead th {
      background: #f7f9fb;
      border-bottom: 1px solid #dfe5ec;
      color: #445161;
      font-size: .78rem;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    .provider-page .table-provider td,
    .provider-page .table-provider-detail td {
      vertical-align: middle;
    }

    .provider-page .provider-name {
      color: #17212b;
      font-weight: 700;
    }

    .provider-page .provider-subtle {
      color: #6c7a89;
      font-size: .86rem;
    }

    .provider-page .provider-actions {
      white-space: nowrap;
    }

    .provider-page .provider-empty {
      background: #fbfcfd;
      border: 1px dashed #cfd8e3;
      border-radius: 8px;
      color: #6c7a89;
      padding: 28px;
      text-align: center;
      width: 100%;
    }

    @media (max-width: 767.98px) {
      .provider-page .provider-panel-header {
        align-items: stretch;
      }

      .provider-page .provider-panel-header .btn {
        width: 100%;
      }
    }

/* ===== Recepciones.php ===== */
.reception-page .reception-hero {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-left: 4px solid #1f7a5c;
      border-radius: 8px;
      padding: 18px 20px;
      margin-bottom: 18px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    }

    .reception-page .reception-hero h1 {
      color: #17212b;
      font-size: 1.45rem;
      font-weight: 700;
      margin: 0;
    }

    .reception-page .reception-hero .subtitle {
      color: #687789;
      margin: 5px 0 0;
    }

    .reception-page .reception-stat {
      align-items: center;
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
      display: flex;
      justify-content: space-between;
      min-height: 108px;
      padding: 16px;
    }

    .reception-page .reception-stat .label {
      color: #6c7a89;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .02em;
      margin-bottom: 6px;
      text-transform: uppercase;
    }

    .reception-page .reception-stat .value {
      color: #17212b;
      font-size: 1.55rem;
      font-weight: 700;
      line-height: 1.1;
    }

    .reception-page .reception-stat .hint {
      color: #8a97a6;
      font-size: .82rem;
      margin-top: 4px;
    }

    .reception-page .reception-stat .icon {
      align-items: center;
      border-radius: 8px;
      color: #ffffff;
      display: flex;
      flex: 0 0 46px;
      font-size: 1.15rem;
      height: 46px;
      justify-content: center;
      width: 46px;
    }

    .reception-page .icon-total { background: #24745c; }
    .reception-page .icon-today { background: #2f6f9f; }
    .reception-page .icon-products { background: #8a6f2a; }
    .reception-page .icon-warehouses { background: #6b5b95; }

    .reception-page .reception-panel {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    }

    .reception-page .reception-panel-header {
      align-items: center;
      border-bottom: 1px solid #e9edf2;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      padding: 16px 18px;
    }

    .reception-page .reception-panel-title {
      color: #17212b;
      font-size: 1.05rem;
      font-weight: 700;
      margin: 0;
    }

    .reception-page .reception-panel-subtitle {
      color: #8a97a6;
      font-size: .86rem;
      margin-top: 4px;
    }

    .reception-page .reception-panel-body {
      padding: 18px;
    }

    .reception-page .reception-filter label {
      color: #445161;
      font-size: .86rem;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .reception-page .reception-actions {
      align-items: flex-end;
      display: flex;
      gap: 8px;
      height: 100%;
    }

    .reception-page .reception-actions .btn {
      min-width: 42px;
    }

    .reception-page .reception-table-wrap {
      border-top: 1px solid #e9edf2;
      margin-top: 18px;
      padding-top: 18px;
    }

    .reception-page .table-reception thead th {
      background: #f7f9fb;
      border-bottom: 1px solid #dfe5ec;
      color: #445161;
      font-size: .78rem;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    .reception-page .table-reception td {
      vertical-align: middle;
    }

    .reception-page .reception-product {
      color: #17212b;
      font-weight: 700;
    }

    .reception-page .reception-qty {
      color: #1f7a5c;
      font-weight: 700;
      white-space: nowrap;
    }

    .reception-page .reception-money {
      color: #17212b;
      font-weight: 700;
      white-space: nowrap;
    }

    .reception-page .reception-subtle {
      color: #6c7a89;
      font-size: .86rem;
    }

    .reception-page .reception-empty {
      background: #fbfcfd;
      border: 1px dashed #cfd8e3;
      border-radius: 8px;
      color: #6c7a89;
      padding: 28px;
      text-align: center;
    }

    @media (max-width: 767.98px) {
      .reception-page .reception-actions {
        align-items: stretch;
      }

      .reception-page .reception-actions .btn {
        flex: 1;
      }
    }

/* ===== ReporteCXP.php ===== */
.cxp-report-page .report-hero {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-left: 4px solid #2f6f9f;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
      margin-bottom: 18px;
      padding: 18px 20px;
    }

    .cxp-report-page .report-hero h1 {
      color: #17212b;
      font-size: 1.45rem;
      font-weight: 700;
      margin: 0;
    }

    .cxp-report-page .report-hero .subtitle {
      color: #687789;
      margin: 5px 0 0;
    }

    .cxp-report-page .report-stat {
      align-items: center;
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
      display: flex;
      justify-content: space-between;
      min-height: 108px;
      padding: 16px;
    }

    .cxp-report-page .report-stat .label {
      color: #6c7a89;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .02em;
      margin-bottom: 6px;
      text-transform: uppercase;
    }

    .cxp-report-page .report-stat .value {
      color: #17212b;
      font-size: 1.55rem;
      font-weight: 700;
      line-height: 1.1;
    }

    .cxp-report-page .report-stat .hint {
      color: #8a97a6;
      font-size: .82rem;
      margin-top: 4px;
    }

    .cxp-report-page .report-stat .icon {
      align-items: center;
      border-radius: 8px;
      color: #ffffff;
      display: flex;
      flex: 0 0 46px;
      font-size: 1.15rem;
      height: 46px;
      justify-content: center;
      width: 46px;
    }

    .cxp-report-page .icon-total { background: #2f6f9f; }
    .cxp-report-page .icon-balance { background: #b54747; }
    .cxp-report-page .icon-paid { background: #24745c; }
    .cxp-report-page .icon-providers { background: #8a6f2a; }

    .cxp-report-page .report-panel {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
      margin-bottom: 18px;
    }

    .cxp-report-page .report-panel-header {
      align-items: center;
      border-bottom: 1px solid #e9edf2;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      padding: 16px 18px;
    }

    .cxp-report-page .report-panel-title {
      color: #17212b;
      font-size: 1.05rem;
      font-weight: 700;
      margin: 0;
    }

    .cxp-report-page .report-panel-subtitle {
      color: #8a97a6;
      font-size: .86rem;
      margin-top: 4px;
    }

    .cxp-report-page .report-panel-body {
      padding: 18px;
    }

    .cxp-report-page .report-filter label {
      color: #445161;
      font-size: .86rem;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .cxp-report-page .report-actions {
      align-items: flex-end;
      display: flex;
      gap: 8px;
      height: 100%;
      justify-content: flex-end;
    }

    .cxp-report-page .report-actions .btn {
      min-width: 42px;
    }

    .cxp-report-page .table-cxp-report thead th {
      background: #f7f9fb;
      border-bottom: 1px solid #dfe5ec;
      color: #445161;
      font-size: .78rem;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    .cxp-report-page .table-cxp-report td {
      vertical-align: middle;
    }

    .cxp-report-page .report-provider {
      color: #17212b;
      font-weight: 700;
    }

    .cxp-report-page .report-subtle {
      color: #6c7a89;
      font-size: .86rem;
    }

    .cxp-report-page .report-amount {
      color: #b54747;
      font-weight: 700;
      white-space: nowrap;
    }

    .cxp-report-page .report-paid {
      color: #24745c;
      font-weight: 700;
      white-space: nowrap;
    }

    .cxp-report-page .report-empty {
      background: #fbfcfd;
      border: 1px dashed #cfd8e3;
      border-radius: 8px;
      color: #6c7a89;
      padding: 28px;
      text-align: center;
    }

    .cxp-report-page .select2-container--default .select2-selection--single {
      border-color: #ced4da;
      min-height: 38px;
    }

    @media (max-width: 767.98px) {
      .cxp-report-page .report-actions {
        align-items: stretch;
        justify-content: flex-start;
      }

      .cxp-report-page .report-actions .btn {
        flex: 1;
      }
    }

/* ===== ReporteCXPT.php ===== */
.cxpt-report-page .report-hero {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-left: 4px solid #2f6f9f;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
      margin-bottom: 18px;
      padding: 18px 20px;
    }

    .cxpt-report-page .report-hero h1 {
      color: #17212b;
      font-size: 1.45rem;
      font-weight: 700;
      margin: 0;
    }

    .cxpt-report-page .report-hero .subtitle {
      color: #687789;
      margin: 5px 0 0;
    }

    .cxpt-report-page .report-stat {
      align-items: center;
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
      display: flex;
      justify-content: space-between;
      min-height: 108px;
      padding: 16px;
    }

    .cxpt-report-page .report-stat .label {
      color: #6c7a89;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .02em;
      margin-bottom: 6px;
      text-transform: uppercase;
    }

    .cxpt-report-page .report-stat .value {
      color: #17212b;
      font-size: 1.55rem;
      font-weight: 700;
      line-height: 1.1;
    }

    .cxpt-report-page .report-stat .hint {
      color: #8a97a6;
      font-size: .82rem;
      margin-top: 4px;
    }

    .cxpt-report-page .report-stat .icon {
      align-items: center;
      border-radius: 8px;
      color: #ffffff;
      display: flex;
      flex: 0 0 46px;
      font-size: 1.15rem;
      height: 46px;
      justify-content: center;
      width: 46px;
    }

    .cxpt-report-page .icon-total { background: #2f6f9f; }
    .cxpt-report-page .icon-balance { background: #8a6f2a; }
    .cxpt-report-page .icon-paid { background: #24745c; }
    .cxpt-report-page .icon-providers { background: #6b5b95; }

    .cxpt-report-page .report-panel {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
      margin-bottom: 18px;
    }

    .cxpt-report-page .report-panel-header {
      align-items: center;
      border-bottom: 1px solid #e9edf2;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      padding: 16px 18px;
    }

    .cxpt-report-page .report-panel-title {
      color: #17212b;
      font-size: 1.05rem;
      font-weight: 700;
      margin: 0;
    }

    .cxpt-report-page .report-panel-subtitle {
      color: #8a97a6;
      font-size: .86rem;
      margin-top: 4px;
    }

    .cxpt-report-page .report-panel-body {
      padding: 18px;
    }

    .cxpt-report-page .report-filter label {
      color: #445161;
      font-size: .86rem;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .cxpt-report-page .report-actions {
      align-items: flex-end;
      display: flex;
      gap: 8px;
      height: 100%;
      justify-content: flex-end;
    }

    .cxpt-report-page .report-actions .btn {
      min-width: 42px;
    }

    .cxpt-report-page .table-cxpt-report thead th {
      background: #f7f9fb;
      border-bottom: 1px solid #dfe5ec;
      color: #445161;
      font-size: .78rem;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    .cxpt-report-page .table-cxpt-report td {
      vertical-align: middle;
    }

    .cxpt-report-page .report-provider {
      color: #17212b;
      font-weight: 700;
    }

    .cxpt-report-page .report-subtle {
      color: #6c7a89;
      font-size: .86rem;
    }

    .cxpt-report-page .report-amount {
      color: #8a6f2a;
      font-weight: 700;
      white-space: nowrap;
    }

    .cxpt-report-page .report-paid {
      color: #24745c;
      font-weight: 700;
      white-space: nowrap;
    }

    .cxpt-report-page .report-empty {
      background: #fbfcfd;
      border: 1px dashed #cfd8e3;
      border-radius: 8px;
      color: #6c7a89;
      padding: 28px;
      text-align: center;
    }

    .cxpt-report-page .select2-container--default .select2-selection--single {
      border-color: #ced4da;
      min-height: 38px;
    }

    @media (max-width: 767.98px) {
      .cxpt-report-page .report-actions {
        align-items: stretch;
        justify-content: flex-start;
      }

      .cxpt-report-page .report-actions .btn {
        flex: 1;
      }
    }

/* ===== ReportePagos.php ===== */
.payments-report-page .report-hero {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-left: 4px solid #2f6f9f;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
      margin-bottom: 18px;
      padding: 18px 20px;
    }

    .payments-report-page .report-hero h1 {
      color: #17212b;
      font-size: 1.45rem;
      font-weight: 700;
      margin: 0;
    }

    .payments-report-page .report-hero .subtitle {
      color: #687789;
      margin: 5px 0 0;
    }

    .payments-report-page .report-stat {
      align-items: center;
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
      display: flex;
      justify-content: space-between;
      min-height: 108px;
      padding: 16px;
    }

    .payments-report-page .report-stat .label {
      color: #6c7a89;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .02em;
      margin-bottom: 6px;
      text-transform: uppercase;
    }

    .payments-report-page .report-stat .value {
      color: #17212b;
      font-size: 1.55rem;
      font-weight: 700;
      line-height: 1.1;
    }

    .payments-report-page .report-stat .hint {
      color: #8a97a6;
      font-size: .82rem;
      margin-top: 4px;
    }

    .payments-report-page .report-stat .icon {
      align-items: center;
      border-radius: 8px;
      color: #ffffff;
      display: flex;
      flex: 0 0 46px;
      font-size: 1.15rem;
      height: 46px;
      justify-content: center;
      width: 46px;
    }

    .payments-report-page .icon-total { background: #2f6f9f; }
    .payments-report-page .icon-amount { background: #24745c; }
    .payments-report-page .icon-invoices { background: #8a6f2a; }
    .payments-report-page .icon-providers { background: #6b5b95; }

    .payments-report-page .report-panel {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
      margin-bottom: 18px;
    }

    .payments-report-page .report-panel-header {
      align-items: center;
      border-bottom: 1px solid #e9edf2;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      padding: 16px 18px;
    }

    .payments-report-page .report-panel-title {
      color: #17212b;
      font-size: 1.05rem;
      font-weight: 700;
      margin: 0;
    }

    .payments-report-page .report-panel-subtitle {
      color: #8a97a6;
      font-size: .86rem;
      margin-top: 4px;
    }

    .payments-report-page .report-panel-body {
      padding: 18px;
    }

    .payments-report-page .report-filter label {
      color: #445161;
      font-size: .86rem;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .payments-report-page .report-actions {
      align-items: flex-end;
      display: flex;
      gap: 8px;
      height: 100%;
      justify-content: flex-end;
    }

    .payments-report-page .report-actions .btn {
      min-width: 42px;
    }

    .payments-report-page .table-payments-report thead th {
      background: #f7f9fb;
      border-bottom: 1px solid #dfe5ec;
      color: #445161;
      font-size: .78rem;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    .payments-report-page .table-payments-report td {
      vertical-align: middle;
    }

    .payments-report-page .report-provider {
      color: #17212b;
      font-weight: 700;
    }

    .payments-report-page .report-subtle {
      color: #6c7a89;
      font-size: .86rem;
    }

    .payments-report-page .report-amount {
      color: #24745c;
      font-weight: 700;
      white-space: nowrap;
    }

    .payments-report-page .report-invoice-amount {
      color: #8a6f2a;
      font-weight: 700;
      white-space: nowrap;
    }

    .payments-report-page .report-empty {
      background: #fbfcfd;
      border: 1px dashed #cfd8e3;
      border-radius: 8px;
      color: #6c7a89;
      padding: 28px;
      text-align: center;
    }

    .payments-report-page .select2-container--default .select2-selection--single {
      border-color: #ced4da;
      min-height: 38px;
    }

    @media (max-width: 767.98px) {
      .payments-report-page .report-actions {
        align-items: stretch;
        justify-content: flex-start;
      }

      .payments-report-page .report-actions .btn {
        flex: 1;
      }
    }

/* ===== Rutas.php ===== */
.route-page .route-hero {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-left: 4px solid #2f6f9f;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
      margin-bottom: 18px;
      padding: 18px 20px;
    }

    .route-page .route-hero h1 {
      color: #17212b;
      font-size: 1.45rem;
      font-weight: 700;
      margin: 0;
    }

    .route-page .route-hero .subtitle {
      color: #687789;
      margin: 5px 0 0;
    }

    .route-page .route-stat {
      align-items: center;
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
      display: flex;
      justify-content: space-between;
      min-height: 108px;
      padding: 16px;
    }

    .route-page .route-stat .label {
      color: #6c7a89;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .02em;
      margin-bottom: 6px;
      text-transform: uppercase;
    }

    .route-page .route-stat .value {
      color: #17212b;
      font-size: 1.55rem;
      font-weight: 700;
      line-height: 1.1;
    }

    .route-page .route-stat .hint {
      color: #8a97a6;
      font-size: .82rem;
      margin-top: 4px;
    }

    .route-page .route-stat .icon {
      align-items: center;
      border-radius: 8px;
      color: #ffffff;
      display: flex;
      flex: 0 0 46px;
      font-size: 1.15rem;
      height: 46px;
      justify-content: center;
      width: 46px;
    }

    .route-page .icon-total { background: #2f6f9f; }
    .route-page .icon-approved { background: #24745c; }
    .route-page .icon-active { background: #8a6f2a; }
    .route-page .icon-products { background: #6b5b95; }

    .route-page .route-panel {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    }

    .route-page .route-panel-header {
      align-items: center;
      border-bottom: 1px solid #e9edf2;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      padding: 16px 18px;
    }

    .route-page .route-panel-title {
      color: #17212b;
      font-size: 1.05rem;
      font-weight: 700;
      margin: 0;
    }

    .route-page .route-panel-subtitle {
      color: #8a97a6;
      font-size: .86rem;
      margin-top: 4px;
    }

    .route-page .route-panel-body {
      padding: 18px;
    }

    .route-page .route-filter label {
      color: #445161;
      font-size: .86rem;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .route-page .route-actions {
      align-items: flex-end;
      display: flex;
      gap: 8px;
      height: 100%;
    }

    .route-page .route-actions .btn {
      min-width: 42px;
    }

    .route-page .route-table-wrap {
      border-top: 1px solid #e9edf2;
      margin-top: 18px;
      padding-top: 18px;
    }

    .route-page .table-route thead th,
    .route-page .table-route-detail thead th {
      background: #f7f9fb;
      border-bottom: 1px solid #dfe5ec;
      color: #445161;
      font-size: .78rem;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    .route-page .table-route td,
    .route-page .table-route-detail td {
      vertical-align: middle;
    }

    .route-page .route-product {
      color: #17212b;
      font-weight: 700;
    }

    .route-page .route-qty {
      color: #2f6f9f;
      font-weight: 700;
      white-space: nowrap;
    }

    .route-page .route-subtle {
      color: #6c7a89;
      font-size: .86rem;
    }

    .route-page .route-empty {
      background: #fbfcfd;
      border: 1px dashed #cfd8e3;
      border-radius: 8px;
      color: #6c7a89;
      padding: 28px;
      text-align: center;
    }

    @media (max-width: 767.98px) {
      .route-page .route-actions {
        align-items: stretch;
      }

      .route-page .route-actions .btn {
        flex: 1;
      }
    }

/* ===== TiemposEntrega.php ===== */
.delivery-page .delivery-hero {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-left: 4px solid #1f7a5c;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
      margin-bottom: 18px;
      padding: 18px 20px;
    }

    .delivery-page .delivery-hero h1 {
      color: #17212b;
      font-size: 1.45rem;
      font-weight: 700;
      margin: 0;
    }

    .delivery-page .delivery-hero .subtitle {
      color: #687789;
      margin: 5px 0 0;
    }

    .delivery-page .delivery-stat {
      align-items: center;
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
      display: flex;
      justify-content: space-between;
      min-height: 108px;
      padding: 16px;
    }

    .delivery-page .delivery-stat .label {
      color: #6c7a89;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .02em;
      margin-bottom: 6px;
      text-transform: uppercase;
    }

    .delivery-page .delivery-stat .value {
      color: #17212b;
      font-size: 1.55rem;
      font-weight: 700;
      line-height: 1.1;
    }

    .delivery-page .delivery-stat .hint {
      color: #8a97a6;
      font-size: .82rem;
      margin-top: 4px;
    }

    .delivery-page .delivery-stat .icon {
      align-items: center;
      border-radius: 8px;
      color: #ffffff;
      display: flex;
      flex: 0 0 46px;
      font-size: 1.15rem;
      height: 46px;
      justify-content: center;
      width: 46px;
    }

    .delivery-page .icon-total { background: #24745c; }
    .delivery-page .icon-providers { background: #2f6f9f; }
    .delivery-page .icon-products { background: #8a6f2a; }
    .delivery-page .icon-days { background: #6b5b95; }

    .delivery-page .delivery-panel {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    }

    .delivery-page .delivery-panel-header {
      align-items: center;
      border-bottom: 1px solid #e9edf2;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      padding: 16px 18px;
    }

    .delivery-page .delivery-panel-title {
      color: #17212b;
      font-size: 1.05rem;
      font-weight: 700;
      margin: 0;
    }

    .delivery-page .delivery-panel-subtitle {
      color: #8a97a6;
      font-size: .86rem;
      margin-top: 4px;
    }

    .delivery-page .delivery-panel-body {
      padding: 18px;
    }

    .delivery-page .table-delivery thead th {
      background: #f7f9fb;
      border-bottom: 1px solid #dfe5ec;
      color: #445161;
      font-size: .78rem;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    .delivery-page .table-delivery td {
      vertical-align: middle;
    }

    .delivery-page .delivery-provider,
    .delivery-page .delivery-product {
      color: #17212b;
      font-weight: 700;
    }

    .delivery-page .delivery-days {
      color: #1f7a5c;
      font-weight: 700;
      white-space: nowrap;
    }

    .delivery-page .delivery-empty {
      background: #fbfcfd;
      border: 1px dashed #cfd8e3;
      border-radius: 8px;
      color: #6c7a89;
      padding: 28px;
      text-align: center;
    }

/* ===== TipoProveedor.php ===== */
.supplier-type-page .type-hero {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-left: 4px solid #6b5b95;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
      margin-bottom: 18px;
      padding: 18px 20px;
    }

    .supplier-type-page .type-hero h1 {
      color: #17212b;
      font-size: 1.45rem;
      font-weight: 700;
      margin: 0;
    }

    .supplier-type-page .type-hero .subtitle {
      color: #687789;
      margin: 5px 0 0;
    }

    .supplier-type-page .type-stat {
      align-items: center;
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
      display: flex;
      justify-content: space-between;
      min-height: 108px;
      padding: 16px;
    }

    .supplier-type-page .type-stat .label {
      color: #6c7a89;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .02em;
      margin-bottom: 6px;
      text-transform: uppercase;
    }

    .supplier-type-page .type-stat .value {
      color: #17212b;
      font-size: 1.55rem;
      font-weight: 700;
      line-height: 1.1;
    }

    .supplier-type-page .type-stat .hint {
      color: #8a97a6;
      font-size: .82rem;
      margin-top: 4px;
    }

    .supplier-type-page .type-stat .icon {
      align-items: center;
      border-radius: 8px;
      color: #ffffff;
      display: flex;
      flex: 0 0 46px;
      font-size: 1.15rem;
      height: 46px;
      justify-content: center;
      width: 46px;
    }

    .supplier-type-page .icon-total { background: #6b5b95; }
    .supplier-type-page .icon-active { background: #24745c; }
    .supplier-type-page .icon-inactive { background: #8a6f2a; }

    .supplier-type-page .type-panel {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    }

    .supplier-type-page .type-panel-header {
      align-items: center;
      border-bottom: 1px solid #e9edf2;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      padding: 16px 18px;
    }

    .supplier-type-page .type-panel-title {
      color: #17212b;
      font-size: 1.05rem;
      font-weight: 700;
      margin: 0;
    }

    .supplier-type-page .type-panel-subtitle {
      color: #8a97a6;
      font-size: .86rem;
      margin-top: 4px;
    }

    .supplier-type-page .type-panel-body {
      padding: 18px;
    }

    .supplier-type-page .table-supplier-type thead th {
      background: #f7f9fb;
      border-bottom: 1px solid #dfe5ec;
      color: #445161;
      font-size: .78rem;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    .supplier-type-page .table-supplier-type td {
      vertical-align: middle;
    }

    .supplier-type-page .type-name {
      color: #17212b;
      font-weight: 700;
    }

    .supplier-type-page .type-empty {
      background: #fbfcfd;
      border: 1px dashed #cfd8e3;
      border-radius: 8px;
      color: #6c7a89;
      padding: 28px;
      text-align: center;
    }

    @media (max-width: 767.98px) {
      .supplier-type-page .type-panel-header {
        align-items: stretch;
      }

      .supplier-type-page .type-panel-header .btn {
        width: 100%;
      }
    }

/* ===== Transacciones.php ===== */
.transactions-page .transaction-hero {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-left: 4px solid #2f6f9f;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
      margin-bottom: 18px;
      padding: 18px 20px;
    }

    .transactions-page .transaction-hero h1 {
      color: #17212b;
      font-size: 1.45rem;
      font-weight: 700;
      margin: 0;
    }

    .transactions-page .transaction-hero .subtitle {
      color: #687789;
      margin: 5px 0 0;
    }

    .transactions-page .transaction-stat {
      align-items: center;
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
      display: flex;
      justify-content: space-between;
      min-height: 108px;
      padding: 16px;
    }

    .transactions-page .transaction-stat .label {
      color: #6c7a89;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .02em;
      margin-bottom: 6px;
      text-transform: uppercase;
    }

    .transactions-page .transaction-stat .value {
      color: #17212b;
      font-size: 1.55rem;
      font-weight: 700;
      line-height: 1.1;
    }

    .transactions-page .transaction-stat .hint {
      color: #8a97a6;
      font-size: .82rem;
      margin-top: 4px;
    }

    .transactions-page .transaction-stat .icon {
      align-items: center;
      border-radius: 8px;
      color: #ffffff;
      display: flex;
      flex: 0 0 46px;
      font-size: 1.15rem;
      height: 46px;
      justify-content: center;
      width: 46px;
    }

    .transactions-page .icon-total { background: #2f6f9f; }
    .transactions-page .icon-inventory { background: #24745c; }
    .transactions-page .icon-sales { background: #8a6f2a; }

    .transactions-page .transaction-panel {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
      margin-bottom: 18px;
    }

    .transactions-page .transaction-panel-header {
      align-items: center;
      border-bottom: 1px solid #e9edf2;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      padding: 16px 18px;
    }

    .transactions-page .transaction-panel-title {
      color: #17212b;
      font-size: 1.05rem;
      font-weight: 700;
      margin: 0;
    }

    .transactions-page .transaction-panel-subtitle {
      color: #8a97a6;
      font-size: .86rem;
      margin-top: 4px;
    }

    .transactions-page .transaction-panel-body {
      padding: 18px;
    }

    .transactions-page .transaction-filter label {
      color: #445161;
      font-size: .86rem;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .transactions-page .transaction-actions {
      align-items: flex-end;
      display: flex;
      gap: 8px;
      height: 100%;
      justify-content: flex-end;
    }

    .transactions-page .transaction-actions .btn {
      min-width: 42px;
    }

    .transactions-page .table-transactions thead th {
      background: #f7f9fb;
      border-bottom: 1px solid #dfe5ec;
      color: #445161;
      font-size: .78rem;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    .transactions-page .table-transactions td {
      vertical-align: middle;
    }

    .transactions-page .transaction-type {
      font-weight: 700;
      white-space: nowrap;
    }

    .transactions-page .transaction-subtle {
      color: #6c7a89;
      font-size: .86rem;
    }

    .transactions-page .transaction-amount {
      color: #24745c;
      font-weight: 700;
      white-space: nowrap;
    }

    .transactions-page .transaction-sales-amount {
      color: #8a6f2a;
      font-weight: 700;
      white-space: nowrap;
    }

    .transactions-page .transaction-empty {
      background: #fbfcfd;
      border: 1px dashed #cfd8e3;
      border-radius: 8px;
      color: #6c7a89;
      padding: 28px;
      text-align: center;
    }

    .transactions-page .select2-container--default .select2-selection--single {
      border-color: #ced4da;
      min-height: 38px;
    }

    @media (max-width: 767.98px) {
      .transactions-page .transaction-actions {
        align-items: stretch;
        justify-content: flex-start;
      }

      .transactions-page .transaction-actions .btn {
        flex: 1;
      }
    }

/* ===== Transferencias.php ===== */
.transfers-page .transfer-hero {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-left: 4px solid #2f6f9f;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
      margin-bottom: 18px;
      padding: 18px 20px;
    }

    .transfers-page .transfer-hero h1 {
      color: #17212b;
      font-size: 1.45rem;
      font-weight: 700;
      margin: 0;
    }

    .transfers-page .transfer-hero .subtitle {
      color: #687789;
      margin: 5px 0 0;
    }

    .transfers-page .transfer-stat {
      align-items: center;
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
      display: flex;
      justify-content: space-between;
      min-height: 108px;
      padding: 16px;
    }

    .transfers-page .transfer-stat .label {
      color: #6c7a89;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: .02em;
      margin-bottom: 6px;
      text-transform: uppercase;
    }

    .transfers-page .transfer-stat .value {
      color: #17212b;
      font-size: 1.55rem;
      font-weight: 700;
      line-height: 1.1;
    }

    .transfers-page .transfer-stat .hint {
      color: #8a97a6;
      font-size: .82rem;
      margin-top: 4px;
    }

    .transfers-page .transfer-stat .icon {
      align-items: center;
      border-radius: 8px;
      color: #ffffff;
      display: flex;
      flex: 0 0 46px;
      font-size: 1.15rem;
      height: 46px;
      justify-content: center;
      width: 46px;
    }

    .transfers-page .icon-total { background: #2f6f9f; }
    .transfers-page .icon-products { background: #24745c; }
    .transfers-page .icon-warehouses { background: #8a6f2a; }
    .transfers-page .icon-quantity { background: #6b5b95; }

    .transfers-page .transfer-panel {
      background: #ffffff;
      border: 1px solid #e6ebf1;
      border-radius: 8px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
      margin-bottom: 18px;
    }

    .transfers-page .transfer-panel-header {
      align-items: center;
      border-bottom: 1px solid #e9edf2;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: space-between;
      padding: 16px 18px;
    }

    .transfers-page .transfer-panel-title {
      color: #17212b;
      font-size: 1.05rem;
      font-weight: 700;
      margin: 0;
    }

    .transfers-page .transfer-panel-subtitle {
      color: #8a97a6;
      font-size: .86rem;
      margin-top: 4px;
    }

    .transfers-page .transfer-panel-body {
      padding: 18px;
    }

    .transfers-page .table-transfers thead th {
      background: #f7f9fb;
      border-bottom: 1px solid #dfe5ec;
      color: #445161;
      font-size: .78rem;
      letter-spacing: .02em;
      text-transform: uppercase;
    }

    .transfers-page .table-transfers td {
      vertical-align: middle;
    }

    .transfers-page .transfer-product {
      color: #17212b;
      font-weight: 700;
    }

    .transfers-page .transfer-subtle {
      color: #6c7a89;
      font-size: .86rem;
    }

    .transfers-page .transfer-qty {
      color: #24745c;
      font-weight: 700;
      white-space: nowrap;
    }

    .transfers-page .transfer-route {
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .transfers-page .transfer-actions {
      display: flex;
      gap: 6px;
      justify-content: center;
      white-space: nowrap;
    }

    .transfers-page .transfer-empty {
      background: #fbfcfd;
      border: 1px dashed #cfd8e3;
      border-radius: 8px;
      color: #6c7a89;
      padding: 28px;
      text-align: center;
    }

    .transfers-page .transfer-modal .modal-content {
      border: 0;
      border-radius: 8px;
      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
    }

    .transfers-page .transfer-modal .modal-header {
      background: #ffffff;
      border-bottom: 1px solid #e9edf2;
      border-left: 4px solid #2f6f9f;
      border-radius: 8px 8px 0 0;
    }

    .transfers-page .transfer-modal .modal-title {
      color: #17212b;
      font-size: 1.1rem;
      font-weight: 700;
    }

    .transfers-page .transfer-modal .modal-body {
      padding: 18px;
    }

    .transfers-page .transfer-modal label {
      color: #445161;
      font-size: .86rem;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .transfers-page .transfer-modal .modal-footer {
      background: #fbfcfd;
      border-top: 1px solid #e9edf2;
    }

    .transfers-page .select2-container--default .select2-selection--single {
      border-color: #ced4da;
      min-height: 38px;
    }

    @media (max-width: 767.98px) {
      .transfers-page .transfer-hero .btn {
        width: 100%;
      }
    }

/* ===== POS Admin shared screens ===== */
body.posadmin-page,
.posadmin-page .content-wrapper {
  background: #f4f6f8;
}

.posadmin-page .posadmin-hero {
  background: #ffffff;
  border: 1px solid #e6ebf1;
  border-left: 4px solid #1f7a5c;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
  margin-bottom: 18px;
  padding: 18px 20px;
}

.posadmin-page .posadmin-hero h1 {
  color: #17212b;
  font-size: 1.45rem;
  font-weight: 700;
  margin: 0;
}

.posadmin-page .posadmin-hero .subtitle {
  color: #687789;
  margin: 5px 0 0;
}

.posadmin-page .posadmin-stat {
  align-items: center;
  background: #ffffff;
  border: 1px solid #e6ebf1;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
  display: flex;
  justify-content: space-between;
  min-height: 108px;
  padding: 16px;
}

.posadmin-page .posadmin-stat .label {
  color: #6c7a89;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.posadmin-page .posadmin-stat .value {
  color: #17212b;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.1;
}

.posadmin-page .posadmin-stat .hint {
  color: #8a97a6;
  font-size: .82rem;
  margin-top: 4px;
}

.posadmin-page .posadmin-stat .icon {
  align-items: center;
  border-radius: 8px;
  color: #ffffff;
  display: flex;
  flex: 0 0 46px;
  font-size: 1.15rem;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.posadmin-page .icon-total { background: #24745c; }
.posadmin-page .icon-active { background: #2f6f9f; }
.posadmin-page .icon-pending { background: #8a6f2a; }
.posadmin-page .icon-amount { background: #6b5b95; }

.posadmin-page .posadmin-panel {
  background: #ffffff;
  border: 1px solid #e6ebf1;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
  margin-bottom: 18px;
}

.posadmin-page .posadmin-panel-header {
  align-items: center;
  border-bottom: 1px solid #e9edf2;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 16px 18px;
}

.posadmin-page .posadmin-panel-title {
  color: #17212b;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}

.posadmin-page .posadmin-panel-subtitle {
  color: #8a97a6;
  font-size: .86rem;
  margin-top: 4px;
}

.posadmin-page .posadmin-panel-body {
  padding: 18px;
}

.posadmin-page .posadmin-filter label,
.posadmin-page .posadmin-modal label {
  color: #445161;
  font-size: .86rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.posadmin-page .posadmin-actions {
  align-items: flex-end;
  display: flex;
  gap: 8px;
  height: 100%;
}

.posadmin-page .posadmin-table-wrap {
  border-top: 1px solid #e9edf2;
  margin-top: 18px;
  padding-top: 18px;
}

.posadmin-page .table-posadmin thead th {
  background: #f7f9fb;
  border-bottom: 1px solid #dfe5ec;
  color: #445161;
  font-size: .78rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.posadmin-page .table-posadmin td {
  vertical-align: middle;
}

.posadmin-page .posadmin-main-text {
  color: #17212b;
  font-weight: 700;
}

.posadmin-page .posadmin-subtle {
  color: #6c7a89;
  font-size: .86rem;
}

.posadmin-page .posadmin-amount {
  font-weight: 700;
  white-space: nowrap;
}

.posadmin-page .posadmin-positive { color: #1f7a5c; }
.posadmin-page .posadmin-negative { color: #b54747; }
.posadmin-page .posadmin-neutral { color: #687789; }

.posadmin-page .posadmin-row-actions {
  display: flex;
  gap: 6px;
  justify-content: center;
  white-space: nowrap;
}

.posadmin-page .posadmin-empty {
  background: #fbfcfd;
  border: 1px dashed #cfd8e3;
  border-radius: 8px;
  color: #6c7a89;
  padding: 28px;
  text-align: center;
}

.posadmin-page .posadmin-modal .modal-content {
  border: 0;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

.posadmin-page .posadmin-modal .modal-header {
  background: #ffffff;
  border-bottom: 1px solid #e9edf2;
  border-left: 4px solid #1f7a5c;
  border-radius: 8px 8px 0 0;
}

.posadmin-page .posadmin-modal .modal-title {
  color: #17212b;
  font-size: 1.1rem;
  font-weight: 700;
}

.posadmin-page .posadmin-modal .modal-body {
  padding: 18px;
}

.posadmin-page .posadmin-modal .modal-footer {
  background: #fbfcfd;
  border-top: 1px solid #e9edf2;
}

@media (max-width: 767.98px) {
  .posadmin-page .posadmin-hero .btn {
    width: 100%;
  }

  .posadmin-page .posadmin-actions {
    align-items: stretch;
  }

  .posadmin-page .posadmin-actions .btn {
    flex: 1;
  }
}