/* ============================================================
   PayPlex Gestão de Frotas
   Comparativo de Preços - 100% HTML/Web
   ============================================================ */

.pp-web-app {
   --pp-bg: #f4f7fb;
   --pp-panel: #ffffff;
   --pp-line: #e3e9f0;
   --pp-text: #172033;
   --pp-muted: #6b778c;
   --pp-blue: #2367d1;
   --pp-green: #14804a;
   --pp-orange: #b56205;
   --pp-red: #c43b3b;

   width: 100%;
   min-height: 100%;
   padding: 18px;
   box-sizing: border-box;
   background:
      radial-gradient(circle at right top, rgba(35,103,209,.06), transparent 28%),
      var(--pp-bg);
   color: var(--pp-text);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.pp-web-app * {
   box-sizing: border-box;
}

.pp-web-header {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 20px;
   margin-bottom: 14px;
}

.pp-web-header-main {
   display: flex;
   align-items: center;
   gap: 12px;
   min-width: 0;
}

.pp-web-header-icon {
   display: flex;
   width: 46px;
   height: 46px;
   flex: 0 0 46px;
   align-items: center;
   justify-content: center;
   border-radius: 13px;
   color: var(--pp-blue);
   background: #eaf2ff;
   font-size: 21px;
}

.pp-web-header h1 {
   margin: 0;
   color: var(--pp-text);
   font-size: 21px;
   line-height: 26px;
   font-weight: 800;
}

.pp-web-header p {
   margin: 4px 0 0;
   color: var(--pp-muted);
   font-size: 11px;
   line-height: 16px;
}

.pp-web-header-actions {
   display: flex;
   gap: 8px;
   flex: 0 0 auto;
}

.pp-web-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 7px;
   min-height: 36px;
   padding: 0 12px;
   border: 1px solid var(--pp-line);
   border-radius: 9px;
   background: #ffffff;
   color: #334155;
   font-size: 11px;
   font-weight: 700;
   cursor: pointer;
   transition: .15s ease;
}

.pp-web-button:hover {
   transform: translateY(-1px);
   box-shadow: 0 6px 15px rgba(23,32,51,.08);
}

.pp-web-button-primary {
   color: #ffffff;
   border-color: var(--pp-blue);
   background: var(--pp-blue);
}

.pp-web-button-close {
   color: #ffffff;
   border-color: #315f7d;
   background: #315f7d;
}

/* RESUMO */

.pp-web-summary {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 11px;
   margin-bottom: 11px;
}

.pp-web-metric {
   display: flex;
   align-items: center;
   gap: 11px;
   min-width: 0;
   padding: 13px 14px;
   border: 1px solid var(--pp-line);
   border-radius: 12px;
   background: #ffffff;
   box-shadow: 0 5px 16px rgba(23,32,51,.06);
}

.pp-web-metric-icon {
   display: flex;
   width: 39px;
   height: 39px;
   flex: 0 0 39px;
   align-items: center;
   justify-content: center;
   border-radius: 10px;
   font-size: 16px;
}

.pp-web-blue { color:#2367d1; background:#edf4ff; }
.pp-web-green { color:#14804a; background:#eaf8f0; }
.pp-web-orange { color:#b56205; background:#fff4e5; }
.pp-web-red { color:#c43b3b; background:#fff0f0; }

.pp-web-metric-label {
   color: var(--pp-muted);
   font-size: 9px;
   line-height: 12px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .045em;
}

.pp-web-metric-value {
   margin-top: 2px;
   color: var(--pp-text);
   font-size: 18px;
   line-height: 23px;
   font-weight: 800;
   font-variant-numeric: tabular-nums;
}

.pp-web-text-green {
   color: var(--pp-green);
}

.pp-web-metric-meta {
   margin-top: 1px;
   overflow: hidden;
   color: #8a95a7;
   font-size: 9px;
   line-height: 12px;
   white-space: nowrap;
   text-overflow: ellipsis;
}

/* DECISÃO */

.pp-web-decision {
   display: flex;
   align-items: center;
   gap: 12px;
   min-height: 64px;
   margin-bottom: 11px;
   padding: 10px 13px;
   border: 1px solid var(--pp-line);
   border-radius: 11px;
}

.pp-web-decision-good { background:#f3faf6; border-color:#d8eee2; }
.pp-web-decision-warn { background:#fff9ef; border-color:#f3dfb5; }
.pp-web-decision-risk { background:#fff5f4; border-color:#f0d3cf; }
.pp-web-decision-neutral { background:#f7f8fa; border-color:#e3e7ed; }

.pp-web-decision-icon {
   display: flex;
   width: 36px;
   height: 36px;
   flex: 0 0 36px;
   align-items: center;
   justify-content: center;
   border-radius: 9px;
   background: rgba(255,255,255,.85);
   color: var(--pp-blue);
   font-size: 16px;
}

.pp-web-decision-main {
   min-width: 0;
   flex: 1 1 auto;
}

.pp-web-eyebrow {
   color: var(--pp-muted);
   font-size: 8px;
   line-height: 11px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .055em;
}

.pp-web-decision-title {
   margin-top: 1px;
   color: var(--pp-text);
   font-size: 12px;
   line-height: 16px;
   font-weight: 800;
}

.pp-web-decision-text {
   margin-top: 1px;
   color: var(--pp-muted);
   font-size: 10px;
   line-height: 14px;
}

.pp-web-decision-side {
   min-width: 170px;
   text-align: right;
}

.pp-web-badge {
   display: inline-flex;
   padding: 3px 9px;
   border: 1px solid rgba(90,105,125,.16);
   border-radius: 20px;
   background: rgba(255,255,255,.84);
   color: #344154;
   font-size: 9px;
   line-height: 14px;
   font-weight: 800;
}

.pp-web-saving {
   margin-top: 3px;
   color: var(--pp-muted);
   font-size: 9px;
}

.pp-web-saving strong {
   color: var(--pp-text);
}

/* TOOLBAR */

.pp-web-toolbar {
   display: grid;
   grid-template-columns: minmax(300px, 1fr) 190px 190px;
   gap: 8px;
   margin-bottom: 9px;
   padding: 9px;
   border: 1px solid var(--pp-line);
   border-radius: 11px;
   background: #ffffff;
   box-shadow: 0 4px 14px rgba(23,32,51,.05);
}

.pp-web-search {
   position: relative;
}

.pp-web-search > i {
   position: absolute;
   top: 50%;
   left: 11px;
   z-index: 2;
   color: #8a95a7;
   transform: translateY(-50%);
}

.pp-web-toolbar input,
.pp-web-toolbar select {
   width: 100%;
   height: 35px;
   border: 1px solid #dfe5ed;
   border-radius: 8px;
   outline: none;
   background: #f8fafc;
   color: #334155;
   font-size: 10px;
}

.pp-web-toolbar input {
   padding: 0 10px 0 31px;
}

.pp-web-toolbar select {
   padding: 0 9px;
}

.pp-web-toolbar input:focus,
.pp-web-toolbar select:focus {
   border-color: #8ab3ec;
   box-shadow: 0 0 0 3px rgba(35,103,209,.08);
}

/* TABELA */

.pp-web-table-card {
   overflow: hidden;
   border: 1px solid var(--pp-line);
   border-radius: 13px;
   background: #ffffff;
   box-shadow: 0 7px 20px rgba(23,32,51,.06);
}

.pp-web-table-scroll {
   overflow: auto;
   max-height: calc(100vh - 370px);
   min-height: 260px;
}

.pp-web-table {
   width: 100%;
   min-width: 1210px;
   border-collapse: collapse;
   table-layout: auto;
}

.pp-web-table thead th {
   position: sticky;
   top: 0;
   z-index: 3;
   padding: 10px 9px;
   border-bottom: 1px solid #dfe5ed;
   background: #f7f9fc;
   color: #566176;
   text-align: left;
   font-size: 8px;
   line-height: 12px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: .04em;
   white-space: nowrap;
}

.pp-web-table tbody td {
   padding: 10px 9px;
   border-bottom: 1px solid #ebeff4;
   color: #334155;
   vertical-align: middle;
   font-size: 10px;
}

.pp-web-row {
   transition: background .13s ease;
}

.pp-web-row:hover {
   background: #f8faff;
}

.pp-web-product-cell {
   min-width: 245px;
   max-width: 330px;
}

.pp-web-product {
   overflow: hidden;
   color: #172033;
   font-size: 11px;
   line-height: 15px;
   font-weight: 800;
   white-space: nowrap;
   text-overflow: ellipsis;
}

.pp-web-product-meta,
.pp-web-product-vehicle {
   margin-top: 2px;
   overflow: hidden;
   color: #7b8798;
   font-size: 8px;
   line-height: 11px;
   white-space: nowrap;
   text-overflow: ellipsis;
}

.pp-web-money-cell,
.pp-web-best-cell {
   min-width: 108px;
   white-space: nowrap;
   font-variant-numeric: tabular-nums;
}

.pp-web-money-cell strong,
.pp-web-best-cell strong {
   display: block;
   color: #273447;
   font-size: 10px;
   line-height: 14px;
   font-weight: 800;
}

.pp-web-money-cell span {
   display: block;
   margin-top: 2px;
   color: #8a95a7;
   font-size: 8px;
}

.pp-web-best-cell strong {
   color: var(--pp-green);
}

.pp-web-source-chip {
   display: inline-flex;
   max-width: 155px;
   margin-top: 3px;
   overflow: hidden;
   padding: 2px 6px;
   border-radius: 20px;
   background: #edf4ff;
   color: var(--pp-blue);
   font-size: 8px;
   font-weight: 700;
   white-space: nowrap;
   text-overflow: ellipsis;
}

.pp-web-delta-cell {
   min-width: 70px;
   font-variant-numeric: tabular-nums;
}

.pp-web-delta-up {
   color: var(--pp-red);
}

.pp-web-delta-ok {
   color: var(--pp-green);
}

.pp-web-status {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   padding: 3px 7px;
   border-radius: 20px;
   font-size: 8px;
   line-height: 13px;
   font-weight: 800;
   white-space: nowrap;
}

.pp-web-status-good { color:#0f6b3e; background:#eaf8f0; }
.pp-web-status-warn { color:#986000; background:#fff7e6; }
.pp-web-status-risk { color:#ad2e24; background:#fff0ee; }
.pp-web-status-neutral { color:#566176; background:#f2f4f7; }

.pp-web-action-cell {
   width: 38px;
   text-align: center;
}

.pp-web-detail-button {
   width: 27px;
   height: 27px;
   border: 0;
   border-radius: 7px;
   background: #edf4ff;
   color: var(--pp-blue);
   cursor: pointer;
}

.pp-web-detail-button:hover {
   background: #dfeafe;
}

/* DETALHE EXPANDIDO */

.pp-web-detail-row {
   display: none;
   background: #f8fafc;
}

.pp-web-detail-row.pp-web-detail-open {
   display: table-row !important;
}

.pp-web-detail-row > td {
   padding: 0 !important;
}

.pp-web-detail {
   padding: 11px 13px;
}

.pp-web-detail-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 8px;
}

.pp-web-detail-card {
   padding: 9px 10px;
   border: 1px solid #e2e7ee;
   border-radius: 8px;
   background: #ffffff;
}

.pp-web-detail-card span {
   display: block;
   color: var(--pp-muted);
   font-size: 8px;
   line-height: 11px;
   font-weight: 800;
   text-transform: uppercase;
}

.pp-web-detail-card strong {
   display: block;
   margin-top: 3px;
   color: var(--pp-text);
   font-size: 14px;
   line-height: 18px;
   font-weight: 800;
}

.pp-web-detail-card small {
   display: block;
   margin-top: 2px;
   color: #8a95a7;
   font-size: 8px;
}

.pp-web-detail-footer {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 20px;
   margin-top: 7px;
   padding: 6px 8px;
   border-radius: 7px;
   background: #ffffff;
   color: var(--pp-muted);
   font-size: 8px;
}

.pp-web-detail-footer strong {
   color: var(--pp-text);
}

.pp-web-table-footer {
   display: flex;
   align-items: center;
   gap: 7px;
   padding: 8px 11px;
   border-top: 1px solid var(--pp-line);
   background: #fbfcfe;
   color: #7b8798;
   font-size: 8px;
   line-height: 12px;
}

.pp-web-empty-filter,
.pp-web-empty-state {
   display: none;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   gap: 5px;
   min-height: 180px;
   color: #7b8798;
   font-size: 10px;
}

.pp-web-empty-state {
   display: flex;
}

.pp-web-empty-state i {
   margin-bottom: 5px;
   color: #9aabc0;
   font-size: 24px;
}

.pp-web-empty-state strong {
   color: #445166;
   font-size: 12px;
}

.pp-web-loading {
   display: flex;
   width: 100%;
   height: 100%;
   align-items: center;
   justify-content: center;
   gap: 8px;
   color: #65748a;
   background: #f4f7fb;
}

/* RESPONSIVO */

@media (max-width: 1100px) {
   .pp-web-summary {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .pp-web-toolbar {
      grid-template-columns: 1fr 170px 170px;
   }
}

@media (max-width: 760px) {
   .pp-web-app {
      padding: 10px;
   }

   .pp-web-header {
      flex-direction: column;
   }

   .pp-web-header-actions {
      width: 100%;
      flex-wrap: wrap;
   }

   .pp-web-summary {
      grid-template-columns: 1fr;
   }

   .pp-web-decision {
      align-items: flex-start;
      flex-direction: column;
   }

   .pp-web-decision-side {
      width: 100%;
      text-align: left;
   }

   .pp-web-toolbar {
      grid-template-columns: 1fr;
   }

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

/* IMPRESSÃO */

@media print {
   .pp-web-app {
      padding: 0;
      background: #ffffff;
   }

   .pp-web-header-actions,
   .pp-web-toolbar,
   .pp-web-action-cell,
   .pp-web-table-footer {
      display: none !important;
   }

   .pp-web-table-scroll {
      overflow: visible;
      max-height: none;
   }

   .pp-web-table {
      min-width: 100%;
   }

   .pp-web-metric,
   .pp-web-table-card {
      box-shadow: none;
   }
}