:root{
  --hex-blue:#1869a7;
  --hex-green:#a2bd30;
  --hex-dark:#1f2937;
  --hex-muted:#6b7280;
  --hex-bg:#f7fafc;
  --hex-white:#ffffff;
  --hex-radius:16px;
  --hex-shadow:0 10px 25px rgba(0,0,0,.08);
  --z-modal: 100000; /* por encima de sticky headers */
}
/* Filters */
.hex-filters{ display:flex; flex-wrap:wrap; gap:12px; margin:16px 0 20px; align-items:center; }
.hex-filters select,
.hex-filters input[type="search"]{
  padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px;
  font-size:14px; min-width:180px; background:#fff;
}
.hex-filters button{
  padding:10px 16px; border:none; border-radius:10px; background:var(--hex-green);
  color:#fff; font-weight:600; cursor:pointer;
}
.hex-search-wrap{ position:relative; }
.hex-suggest{
  position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid #e5e7eb; border-radius:10px; margin-top:6px; box-shadow:var(--hex-shadow);
  max-height:260px; overflow:auto; z-index:var(--z-modal);
}
.hex-suggest div{ padding:8px 12px; cursor:pointer; }
.hex-suggest div:hover{ background:#f3f4f6; }

/* Cards */
.hex-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.hex-card{ background:var(--hex-white); border:1px solid #e5e7eb; border-radius:var(--hex-radius); box-shadow:var(--hex-shadow); overflow:hidden; display:flex; flex-direction:column; }
.hex-card-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 16px 0 16px; }
.hex-title{ font-size:16px; line-height:1.3; margin:0; color:var(--hex-dark); }
.hex-price{ background:var(--hex-green); color:#fff; padding:6px 10px; border-radius:12px; font-weight:700; white-space:nowrap; }
.hex-body{ padding:12px 16px 16px 16px; color:var(--hex-dark); }
.hex-meta{ font-size:13px; color:var(--hex-muted); margin-bottom:8px; }
.hex-note{ font-size:13px; color:var(--hex-muted); margin-bottom:8px; }
.hex-toggle{ background:transparent; border:1px solid var(--hex-blue); color:var(--hex-blue); padding:8px 10px; border-radius:10px; font-weight:600; cursor:pointer; }
.hex-add-quote{ background:var(--hex-blue); color:#fff; padding:10px 12px; border:none; border-radius:12px; font-weight:700; margin-top:10px; }

/* Pagination */
.hex-pagination{ margin-top:14px; display:flex; gap:8px; flex-wrap:wrap; }
.hex-pagination button{
  padding:8px 12px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; cursor:pointer;
}
.hex-pagination button[disabled], .hex-pagination .active{ background:var(--hex-blue); color:#fff; border-color:var(--hex-blue); }

/* Modal */
.hex-modal[aria-hidden="false"]{ display:block; }
.hex-modal[aria-hidden="true"]{ display:none; }
.hex-modal{ position:fixed; inset:0; z-index:var(--z-modal); }
.hex-modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.hex-modal-dialog{
  position:relative; background:#fff; width:min(720px, calc(100% - 24px)); margin:8vh auto; border-radius:20px;
  box-shadow:var(--hex-shadow); border:1px solid #e5e7eb;
}
.hex-modal-header{ display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid #f0f2f5; }
.hex-modal-header h3{ margin:0; font-size:28px; }
.hex-modal-close{ background:transparent; border:none; font-size:28px; cursor:pointer; line-height:1; }
.hex-modal-body{ max-height:50vh; overflow:auto; padding:14px 20px; }
.hex-quote-item{ display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding:10px 0; border-bottom:1px dashed #eef2f7; }
.hex-quote-item .title{ font-size:15px; }
.hex-quote-item .price{ font-weight:700; white-space:nowrap; }
.hex-quote-item button{ background:transparent; border:none; color:#ef4444; cursor:pointer; }
.hex-quote-empty{ text-align:center; color:var(--hex-muted); padding:16px 0; display:none; }
.hex-modal-footer{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 20px 18px; border-top:1px solid #f0f2f5; }
.hex-quote-total span{ font-weight:800; }
.hex-quote-actions{ display:flex; gap:8px; }
.hex-quote-clear{ background:#f3f4f6; border:none; padding:10px 12px; border-radius:10px; }
.hex-quote-whats{ background:var(--hex-green); color:#fff; padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:700; }

/* Mobile */
@media (max-width:480px){
  .hex-title{font-size:15px}
  .hex-filters select, .hex-filters input[type="search"]{min-width:140px}
  .hex-modal-header h3{font-size:22px}
}