/* =====================================================
   TEMA GLOBAL A-BOX · LIQUID GLASS
   ===================================================== */

:root{
  --abox-primary:#075985;
  --abox-primary-light:#0284c7;
  --abox-accent:#38bdf8;
  --abox-text:#0f172a;
  --abox-muted:#64748b;
  --abox-glass:rgba(255,255,255,.68);
  --abox-border:rgba(255,255,255,.78);
  --abox-shadow:0 18px 45px rgba(15,23,42,.12);
}

html{
  min-height:100%;
  background:
    radial-gradient(
      circle at 8% 8%,
      rgba(56,189,248,.28),
      transparent 30%
    ),
    radial-gradient(
      circle at 92% 16%,
      rgba(129,140,248,.22),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #e0f2fe 0%,
      #eef6ff 48%,
      #e0e7ff 100%
    );
}

body{
  min-height:100vh;
  overflow-x:hidden;
  background:transparent;
  color:var(--abox-text);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

body::before,
body::after{
  content:"";
  position:fixed;
  z-index:-1;
  width:360px;
  height:360px;
  border-radius:50%;
  filter:blur(8px);
  pointer-events:none;
}

body::before{
  top:140px;
  left:-170px;
  background:rgba(14,165,233,.18);
}

body::after{
  right:-170px;
  bottom:80px;
  background:rgba(99,102,241,.16);
}

/* Encabezado */
header{
  position:sticky;
  top:0;
  z-index:1000;
  min-height:76px;
  padding:14px 28px;
  background:rgba(255,255,255,.72);
  border-bottom:1px solid rgba(255,255,255,.82);
  box-shadow:0 8px 30px rgba(15,23,42,.08);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
}

.brand-header{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:70px;
}

.brand-header .brand-logo{
  display:block;
  flex:0 0 auto;
  width:145px;
  height:auto;
  max-width:none;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(
    0 5px 9px rgba(15,23,42,.14)
  );
}

.brand-header small{
  display:block;
  color:#64748b;
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
}

/* Menú superior */
.main-menu{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:wrap;
}

.main-menu #userInfo{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  margin-right:4px;
  padding:7px 11px;
  border:1px solid rgba(14,165,233,.18);
  border-radius:999px;
  background:rgba(255,255,255,.58);
  color:#334155;
  font-size:12px;
  font-weight:700;
}

.main-menu button{
  min-height:34px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:999px;
  background:rgba(255,255,255,.62);
  color:#164e63;
  font-size:11px;
  font-weight:700;
  box-shadow:0 5px 15px rgba(15,23,42,.06);
  backdrop-filter:blur(10px);
  transition:
    transform .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.main-menu button:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.92);
  color:var(--abox-primary);
  box-shadow:0 9px 20px rgba(15,23,42,.12);
}

.main-menu button:last-child{
  background:#0f172a;
  color:white;
}

/* Contenido y tarjetas */
main{
  max-width:1440px;
  padding:34px 28px 60px;
}

.card{
  position:relative;
  margin-bottom:22px;
  padding:24px;
  overflow:hidden;
  border:1px solid var(--abox-border);
  border-radius:22px;
  background:var(--abox-glass);
  box-shadow:var(--abox-shadow);
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
}

.card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.95),
    transparent
  );
}

.card h2,
.card h3{
  color:#0c4a6e;
}

/* Botones generales */
button{
  border:1px solid rgba(255,255,255,.4);
  border-radius:10px;
  background:linear-gradient(
    135deg,
    #075985,
    #0284c7
  );
  box-shadow:0 8px 18px rgba(7,89,133,.2);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    filter .2s ease;
}

button:hover{
  background:linear-gradient(
    135deg,
    #0369a1,
    #0ea5e9
  );
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(7,89,133,.26);
  filter:saturate(1.08);
}

button.light{
  border-color:rgba(148,163,184,.3);
  background:rgba(255,255,255,.62);
  color:#1e293b;
  box-shadow:0 5px 13px rgba(15,23,42,.06);
}

button.success{
  background:linear-gradient(
    135deg,
    #15803d,
    #22c55e
  );
}

button.danger{
  background:linear-gradient(
    135deg,
    #b91c1c,
    #ef4444
  );
}

/* Campos */
input,
select,
textarea{
  border:1px solid rgba(148,163,184,.48);
  border-radius:10px;
  background:rgba(255,255,255,.7);
  color:#1e293b;
}

input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:#38bdf8;
  background:rgba(255,255,255,.94);
  box-shadow:
    0 0 0 3px rgba(56,189,248,.18),
    0 5px 14px rgba(15,23,42,.06);
}

/* Tarjetas de solicitudes */
.request-card{
  border:1px solid rgba(255,255,255,.78);
  border-radius:17px;
  background:rgba(255,255,255,.57);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    0 8px 22px rgba(15,23,42,.07);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.request-card:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.78);
  box-shadow:
    0 15px 30px rgba(15,23,42,.12),
    inset 0 1px 0 rgba(255,255,255,.92);
}

.request-filters{
  padding:15px;
  border:1px solid rgba(255,255,255,.65);
  border-radius:15px;
  background:rgba(255,255,255,.43);
}

/* Modales */
.client-modal,
.competitor-overlay{
  background:rgba(15,23,42,.38);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

.client-modal-content,
.decision-panel,
.competitor-panel{
  border:1px solid rgba(255,255,255,.82);
  border-radius:20px;
  background:rgba(255,255,255,.86);
  box-shadow:0 24px 70px rgba(15,23,42,.28);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
}

/* Responsive */
@media(max-width:900px){
  header{
    align-items:flex-start;
    flex-direction:column;
  }

  .main-menu{
    justify-content:flex-start;
    width:100%;
  }

  .brand-header .brand-logo{
    width:155px;
  }

  main{
    padding:24px 18px 45px;
  }
}

@media(max-width:650px){
  .brand-header .brand-logo{
    width:145px;
  }

  .brand-header{
    min-height:52px;
  }

  .brand-header small{
    font-size:10px;
  }

  main{
    padding:20px 12px 40px;
  }

  .card{
    padding:17px;
    border-radius:17px;
  }

  .main-menu button{
    flex:1 1 auto;
  }
}

/* Encabezados de sección */
.section-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}

.section-heading h2{
  margin:0 0 6px;
}

.section-heading p{
  margin:0;
  color:#64748b;
  font-size:13px;
  line-height:1.5;
}

.section-eyebrow{
  display:block;
  margin-bottom:7px;
  color:#0284c7;
  font-size:10px;
  font-weight:800;
  letter-spacing:.15em;
}

@media(max-width:650px){
  .section-heading{
    align-items:stretch;
    flex-direction:column;
  }
}

.approval-badge{
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 3px 8px rgba(15,23,42,.06);
}

.approval-pending{
  background:rgba(254,243,199,.86);
}

.approval-approved{
  background:rgba(220,252,231,.86);
}

.approval-rejected{
  background:rgba(254,226,226,.86);
}

.approval-none{
  background:rgba(226,232,240,.78);
}

.help{
  color:#64748b;
  font-size:11px;
  line-height:1.4;
}

/* =====================================================
   COTIZACIONES
   ===================================================== */

.quotes-table{
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.25);
  border-radius:15px;
  background:rgba(255,255,255,.42);
}

.quotes-table th{
  background:rgba(224,242,254,.82);
  border-bottom:1px solid rgba(148,163,184,.3);
  color:#075985;
}

.quotes-table td{
  border-bottom:1px solid rgba(148,163,184,.2);
}

.quotes-table tbody tr{
  transition:
    background .2s ease,
    transform .2s ease;
}

.quotes-table tbody tr:hover{
  background:rgba(255,255,255,.62);
}

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

.quotes-actions{
  padding:3px;
  border:1px solid rgba(255,255,255,.7);
  border-radius:12px;
  background:rgba(255,255,255,.45);
}

.quotes-summary{
  margin:14px 0;
  padding:10px 13px;
  border:1px solid rgba(255,255,255,.7);
  border-radius:12px;
  background:rgba(255,255,255,.45);
  color:#64748b;
}

.quotes-pagination{
  padding-top:12px;
}

.quotes-page-info{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:7px 13px;
  border:1px solid rgba(255,255,255,.7);
  border-radius:999px;
  background:rgba(255,255,255,.55);
  color:#475569;
}

.filters{
  padding:15px;
  border:1px solid rgba(255,255,255,.65);
  border-radius:15px;
  background:rgba(255,255,255,.43);
}

.filters input,
.filters select{
  background:rgba(255,255,255,.72);
}

/* =====================================================
   EDITOR DE COTIZACIÓN
   ===================================================== */

.quote-editor-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
  color:#64748b;
}

.quote-editor-toolbar small{
  font-size:12px;
}

.quote-editor-toolbar .badge{
  min-width:110px;
  text-align:center;
}

.table-wrap,
.materials-table-wrap{
  overflow-x:auto;
  border:1px solid rgba(148,163,184,.24);
  border-radius:15px;
  background:rgba(255,255,255,.34);
}

.table-wrap table,
.materials-table-wrap table{
  background:rgba(255,255,255,.26);
}

.table-wrap th,
.materials-table-wrap th{
  background:rgba(224,242,254,.82);
  border-color:rgba(148,163,184,.28);
}

.table-wrap td,
.materials-table-wrap td{
  border-color:rgba(148,163,184,.2);
}

.metric{
  border:1px solid rgba(255,255,255,.76);
  border-radius:15px;
  background:rgba(255,255,255,.58);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    0 8px 20px rgba(15,23,42,.06);
}

.materials-save-bar{
  border:1px solid rgba(255,255,255,.78);
  border-radius:15px;
  background:rgba(224,242,254,.74);
  box-shadow:0 10px 25px rgba(15,23,42,.1);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/* =====================================================
   RESUMEN FINANCIERO
   ===================================================== */

.financial-info-metric{
  grid-column:span 3;
  min-height:92px;
  padding:15px;
}

.financial-info-metric small{
  display:block;
  margin-bottom:8px;
  color:#64748b;
  font-size:12px;
  line-height:1.35;
}

.financial-info-metric strong{
  display:block;
  color:#075985;
  font-size:20px;
  line-height:1.25;
  overflow-wrap:anywhere;
}

/*
  Evita que la forma de pago se parta
  en demasiadas líneas.
*/
#financialPaymentTerm{
  white-space:normal;
}

/*
  El tipo de cambio debe mantenerse
  en una sola línea.
*/
#financialExchangeRate{
  white-space:nowrap;
}

/* Pantallas medianas */
@media(max-width:900px){
  .financial-info-metric{
    grid-column:span 6;
  }
}

/* Celulares */
@media(max-width:550px){
  .financial-info-metric{
    grid-column:span 12;
  }
}

/*
  El editor necesita que los paneles flotantes
  no sean recortados por las tarjetas.
*/
.card:has(.supplier-panel){
  overflow:visible;
}

.card:has(.supplier-panel) .table-wrap,
.card:has(.supplier-panel) .materials-table-wrap{
  overflow-x:auto;
  overflow-y:visible;
}

/* =====================================================
   VISTAS DE COTIZACIÓN PARA PREVENTA Y VENTAS
   ===================================================== */

.quote-items-table,
.sales-items-table,
.quote-detail-table{
  width:100%;
  min-width:820px;
  table-layout:fixed;
  border-collapse:collapse;
}

.quote-items-table th,
.quote-items-table td,
.sales-items-table th,
.sales-items-table td,
.quote-detail-table th,
.quote-detail-table td{
  vertical-align:top;
  padding:10px 9px;
  border-bottom:1px solid #e2e8f0;
  line-height:1.35;
  overflow-wrap:anywhere;
  word-break:normal;
}

/*
  Evita que las celdas obliguen
  a toda la tabla a crecer.
*/
.quote-items-table td,
.sales-items-table td,
.quote-detail-table td{
  max-width:0;
}

/*
  Descripción:
  puede ocupar varias líneas.
*/
.quote-items-table td.description,
.sales-items-table td.description,
.quote-detail-table td.description,
.quote-description-cell{
  width:42%;
  max-width:42%;
  white-space:normal !important;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.4;
}

/*
  Código / SKU.
*/
.quote-items-table th:nth-child(1),
.quote-items-table td:nth-child(1),
.sales-items-table th:nth-child(1),
.sales-items-table td:nth-child(1),
.quote-detail-table th:nth-child(1),
.quote-detail-table td:nth-child(1){
  width:16%;
  min-width:110px;
}

/*
  Marca.
*/
.quote-items-table th:nth-child(2),
.quote-items-table td:nth-child(2),
.sales-items-table th:nth-child(2),
.sales-items-table td:nth-child(2),
.quote-detail-table th:nth-child(2),
.quote-detail-table td:nth-child(2){
  width:14%;
  min-width:95px;
}

/*
  Descripción cuando es la tercera columna.
*/
.quote-items-table th:nth-child(3),
.quote-items-table td:nth-child(3),
.sales-items-table th:nth-child(3),
.sales-items-table td:nth-child(3),
.quote-detail-table th:nth-child(3),
.quote-detail-table td:nth-child(3){
  width:42%;
}

/*
  Unidad.
*/
.quote-items-table th:nth-child(4),
.quote-items-table td:nth-child(4),
.sales-items-table th:nth-child(4),
.sales-items-table td:nth-child(4),
.quote-detail-table th:nth-child(4),
.quote-detail-table td:nth-child(4){
  width:8%;
  min-width:65px;
  text-align:center;
}

/*
  Cantidad.
*/
.quote-items-table th:nth-child(5),
.quote-items-table td:nth-child(5),
.sales-items-table th:nth-child(5),
.sales-items-table td:nth-child(5),
.quote-detail-table th:nth-child(5),
.quote-detail-table td:nth-child(5){
  width:9%;
  min-width:75px;
  text-align:right;
}

/*
  Precios o totales.
*/
.quote-items-table th:nth-child(n+6),
.quote-items-table td:nth-child(n+6),
.sales-items-table th:nth-child(n+6),
.sales-items-table td:nth-child(n+6),
.quote-detail-table th:nth-child(n+6),
.quote-detail-table td:nth-child(n+6){
  width:11%;
  min-width:95px;
  text-align:right;
}

/*
  Si alguna vista usa un bloque interno
  para la descripción.
*/
.description-text,
.item-description,
.material-description,
.quote-description{
  display:block;
  max-width:100%;
  white-space:normal !important;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.4;
}

/*
  Evita que los encabezados sean demasiado altos
  o que se desborden.
*/
.quote-items-table th,
.sales-items-table th,
.quote-detail-table th{
  white-space:normal;
  overflow-wrap:break-word;
}

/*
  Contenedor horizontal.
*/
.quote-items-wrap,
.sales-items-wrap,
.quote-detail-wrap,
.items-table-wrap{
  width:100%;
  overflow-x:auto;
  overflow-y:visible;
  border-radius:14px;
}

/*
  Filas alternadas para facilitar lectura.
*/
.quote-items-table tbody tr:nth-child(even),
.sales-items-table tbody tr:nth-child(even),
.quote-detail-table tbody tr:nth-child(even){
  background:rgba(248,250,252,.58);
}

/*
  Móvil.
*/
@media(max-width:800px){
  .quote-items-table,
  .sales-items-table,
  .quote-detail-table{
    min-width:820px;
  }

  .quote-items-table td.description,
  .sales-items-table td.description,
  .quote-detail-table td.description,
  .quote-description-cell{
    width:42%;
  }
}

/* =====================================================
   VISTA DE COTIZACIÓN · MATERIALES
   ===================================================== */

.quote-items-wrap{
  width:100%;
  overflow-x:auto;
  overflow-y:visible;
  border:1px solid rgba(148,163,184,.25);
  border-radius:15px;
  background:rgba(255,255,255,.38);
}

.quote-items-table{
  width:100%;
  min-width:1120px;
  table-layout:fixed;
  border-collapse:collapse;
}

.quote-items-table th,
.quote-items-table td{
  padding:9px 8px;
  vertical-align:top;
  border-bottom:1px solid rgba(148,163,184,.22);
  line-height:1.35;
  overflow-wrap:anywhere;
}

.quote-items-table th{
  background:rgba(224,242,254,.82);
  color:#075985;
  white-space:normal;
}

/*
  Partida, código y marca.
*/
.quote-items-table th:nth-child(1),
.quote-items-table td:nth-child(1){
  width:19%;
  min-width:180px;
}

/*
  Descripción.
*/
.quote-items-table th:nth-child(2),
.quote-items-table td:nth-child(2){
  width:31%;
  min-width:250px;
}

/*
  Unidad.
*/
.quote-items-table th:nth-child(3),
.quote-items-table td:nth-child(3){
  width:8%;
  min-width:70px;
  text-align:center;
}

/*
  Cantidad.
*/
.quote-items-table th:nth-child(4),
.quote-items-table td:nth-child(4){
  width:8%;
  min-width:75px;
  text-align:right;
}

/*
  Costo unitario.
*/
.quote-items-table th:nth-child(5),
.quote-items-table td:nth-child(5){
  width:11%;
  min-width:105px;
  text-align:right;
}

/*
  Costo total.
*/
.quote-items-table th:nth-child(6),
.quote-items-table td:nth-child(6){
  width:11%;
  min-width:105px;
  text-align:right;
}

/*
  Venta unitaria.
*/
.quote-items-table th:nth-child(7),
.quote-items-table td:nth-child(7){
  width:11%;
  min-width:105px;
  text-align:right;
}

/*
  Venta total.
*/
.quote-items-table th:nth-child(8),
.quote-items-table td:nth-child(8){
  width:11%;
  min-width:105px;
  text-align:right;
}

/*
  La descripción siempre puede ocupar
  varias líneas.
*/
.quote-items-table td:nth-child(2),
.quote-items-table td:nth-child(2) .copy-field,
.quote-items-table td:nth-child(2) .copy-value{
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word;
}

/*
  Evita que las celdas numéricas
  aumenten la tabla innecesariamente.
*/
.quote-items-table td:nth-child(n+3){
  white-space:normal;
  overflow-wrap:anywhere;
}

/*
  Filas alternadas.
*/
.quote-items-table tbody tr:nth-child(even){
  background:rgba(248,250,252,.58);
}

.quote-items-table tbody tr:hover{
  background:rgba(224,242,254,.42);
}

@media(max-width:800px){
  .quote-items-table{
    min-width:1120px;
  }
}

/* =====================================================
   SALES-QUOTE · TABLA DE MATERIALES
   ===================================================== */

.sales-items-wrap{
  width:100%;
  overflow-x:auto;
  overflow-y:visible;
  border:1px solid rgba(148,163,184,.25);
  border-radius:15px;
  background:rgba(255,255,255,.38);
}

.sales-items-table{
  width:100%;
  min-width:1120px;
  table-layout:fixed;
  border-collapse:collapse;
}

.sales-items-table th,
.sales-items-table td{
  padding:9px 8px;
  vertical-align:top;
  border-bottom:1px solid rgba(148,163,184,.22);
  line-height:1.35;
  overflow-wrap:anywhere;
}

.sales-items-table th{
  background:rgba(224,242,254,.82);
  color:#075985;
  white-space:normal;
}

/* Partida, código y marca */
.sales-items-table th:nth-child(1),
.sales-items-table td:nth-child(1){
  width:19%;
  min-width:180px;
}

/* Descripción */
.sales-items-table th:nth-child(2),
.sales-items-table td:nth-child(2){
  width:31%;
  min-width:250px;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word;
}

/* Unidad */
.sales-items-table th:nth-child(3),
.sales-items-table td:nth-child(3){
  width:8%;
  min-width:70px;
  text-align:center;
}

/* Cantidad */
.sales-items-table th:nth-child(4),
.sales-items-table td:nth-child(4){
  width:8%;
  min-width:75px;
  text-align:right;
}

/* Costos y precios */
.sales-items-table th:nth-child(n+5),
.sales-items-table td:nth-child(n+5){
  width:11%;
  min-width:105px;
  text-align:right;
}

/* Evita que copyField fuerce una sola línea */
.sales-items-table td:nth-child(2) .copy-field,
.sales-items-table td:nth-child(2) .copy-value,
.sales-items-table .quote-description-cell,
.sales-items-table .description-text{
  display:block;
  max-width:100%;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word;
  line-height:1.4;
}

.sales-items-table tbody tr:nth-child(even){
  background:rgba(248,250,252,.58);
}

.sales-items-table tbody tr:hover{
  background:rgba(224,242,254,.42);
}

/* =====================================================
   CORRECCIÓN DEFINITIVA DE DESCRIPCIONES
   ===================================================== */

.sales-items-table td:nth-child(2),
.quote-items-table td:nth-child(2),
.quote-description-cell{
  min-width:250px;
  max-width:360px;
  white-space:normal !important;
  overflow:visible !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  line-height:1.4;
}

.sales-items-table td:nth-child(2) .copy-field,
.quote-items-table td:nth-child(2) .copy-field,
.quote-description-cell .copy-field{
  display:flex !important;
  align-items:flex-start;
  width:100%;
  min-width:0;
  margin:3px 0;
  white-space:normal !important;
}

.sales-items-table td:nth-child(2) .copy-value,
.quote-items-table td:nth-child(2) .copy-value,
.quote-description-cell .copy-value,
.sales-items-table .description-text,
.quote-items-table .description-text{
  display:block !important;
  flex:1 1 auto;
  min-width:0;
  max-width:100%;
  white-space:normal !important;
  overflow:visible !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  line-height:1.4;
}

.sales-items-table td:nth-child(2) .copy-button,
.quote-items-table td:nth-child(2) .copy-button,
.quote-description-cell .copy-button{
  flex:0 0 18px;
  margin-left:5px;
}

/* =====================================================
   TOTALES POR SECCIÓN EN VISTAS DE COTIZACIÓN
   ===================================================== */

.quote-section-total{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
  padding:14px 16px;
  border:1px solid rgba(125,211,252,.55);
  border-radius:14px;
  background:rgba(224,242,254,.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 8px 20px rgba(15,23,42,.06);
}

.quote-total-item{
  min-width:175px;
  padding:8px 12px;
  border-left:1px solid rgba(14,116,144,.18);
}

.quote-total-item:first-child{
  border-left:0;
}

.quote-total-item small{
  display:block;
  margin-bottom:4px;
  color:#64748b;
  font-size:11px;
  font-weight:700;
}

.quote-total-item strong{
  display:block;
  color:#075985;
  font-size:16px;
  white-space:nowrap;
}

.quote-total-item.sale-total strong{
  color:#15803d;
}

@media(max-width:650px){
  .quote-section-total{
    flex-direction:column;
  }

  .quote-total-item{
    border-left:0;
    border-top:1px solid rgba(14,116,144,.18);
  }

  .quote-total-item:first-child{
    border-top:0;
  }
}