/* ─────────────────────────────────────────────────────────────────────────────
   Neon Products + Comparator + Budget Builder — Estilos base
   Se pueden sobreescribir desde el tema con mayor especificidad.
───────────────────────────────────────────────────────────────────────────── */

/* ── Variables ────────────────────────────────────────────────────────────── */
:root {
  --nc-primary:     #6366f1;
  --nc-primary-dk:  var(--nc-primary-dk);
  --nc-text:        #1e293b;
  --nc-text-muted:  #64748b;
  --nc-border:      #e2e8f0;
  --nc-bg:          #f8fafc;
  --nc-radius:      8px;
  --nc-shadow:      0 1px 4px rgba(0,0,0,.08);
}

/* ── Botones ──────────────────────────────────────────────────────────────── */
.neon-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem 1rem;
  background: var(--nc-primary);
  color: #fff;
  border: none;
  border-radius: var(--nc-radius);
  cursor: pointer;
  font-size: .9rem;
  text-decoration: none;
  transition: background .2s;
}
.neon-btn:hover               { background: var(--nc-primary-dk); color: #fff; text-decoration: none; }
.neon-btn-primary             { background: var(--nc-primary); }
.neon-btn-secondary           { background: #e2e8f0; color: var(--nc-text); }
.neon-btn-secondary:hover     { background: #cbd5e1; color: var(--nc-text); }
.neon-btn-outline             { background: transparent; color: var(--nc-primary, #2563eb); border: 1px solid var(--nc-primary, #2563eb); }
.neon-btn-outline:hover       { background: var(--nc-primary, #2563eb); color: #fff; }
.neon-btn-sm                  { padding: .3rem .7rem; font-size: .8rem; }
.neon-btn-icon                { background: none; border: none; cursor: pointer; color: var(--nc-text-muted); font-size: 1rem; padding: .2rem .4rem; }
.neon-btn-icon:hover          { color: #dc2626; }

/* ── Grid de productos ────────────────────────────────────────────────────── */
.neon-products-wrap           { margin: 1.5rem 0; }
.neon-products.neon-grid      { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; }
.neon-products.neon-list      { display: flex; flex-direction: column; gap: .75rem; }

.neon-product-card {
  background: #fff;
  border: 1px solid var(--nc-border);
  border-radius: var(--nc-radius);
  box-shadow: var(--nc-shadow);
  overflow: hidden;
  position: relative;
  transition: box-shadow .2s;
}
.neon-product-card:hover        { box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.neon-product-img-wrap          { display: block; }
.neon-product-img               { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.neon-product-body              { padding: .85rem; }
.neon-product-title             { font-size: .95rem; font-weight: 600; margin: 0 0 .35rem; line-height: 1.3; }
.neon-product-title a           { color: var(--nc-text); text-decoration: none; }
.neon-product-title a:hover     { color: var(--nc-primary); }
.neon-product-desc              { font-size: .82rem; color: var(--nc-text-muted); margin: 0 0 .5rem; }
.neon-product-price             { margin: .5rem 0; }
.neon-price                     { font-size: 1.05rem; font-weight: 700; color: var(--nc-primary); }
.neon-price-original            { color: var(--nc-text-muted); text-decoration: line-through; font-size: .9rem; margin-right: .3rem; }
.neon-price-sale                { font-size: 1.05rem; font-weight: 700; color: #dc2626; text-decoration: none; font-style: normal; }
.neon-price-consult             { font-size: .88rem; color: var(--nc-text-muted); font-style: italic; }
.neon-price-badge               { display: inline-block; font-size: .68rem; font-weight: 700; padding: .15em .55em; border-radius: 20px; vertical-align: middle; margin-left: .35rem; background: #dc2626; color: #fff; letter-spacing: .02em; text-transform: uppercase; }
.neon-price-large .neon-price,
.neon-price-large .neon-price-sale { font-size: 1.4rem; }
.neon-badge-featured            { position: absolute; top: .5rem; left: .5rem; background: #f59e0b; color: #fff; padding: .2rem .55rem; border-radius: 20px; font-size: .72rem; font-weight: 700; }

/* ── Búsqueda ─────────────────────────────────────────────────────────────── */
.neon-search-form               { margin-bottom: 1rem; }
.neon-search-row                { display: flex; gap: .5rem; flex-wrap: wrap; }
.neon-search-input              { flex: 1; min-width: 180px; padding: .45rem .8rem; border: 1px solid var(--nc-border); border-radius: var(--nc-radius); font-size: .9rem; }

/* ── Barra de comparación ─────────────────────────────────────────────────── */

/* Versión inline (dentro de [neon_products]) — backwards compat */
.neon-compare-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .65rem 1rem;
  background: #ede9fe;
  border: 1px solid #c4b5fd;
  border-radius: var(--nc-radius);
  margin-bottom: 1rem;
  font-size: .9rem;
}

/* Versión flotante (WC loop) */
.neon-compare-bar-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1.5rem;
  background: var(--nc-primary-dk);
  color: #fff;
  font-size: .9rem;
  box-shadow: 0 -2px 12px rgba(0,0,0,.18);
}
.neon-compare-bar-fixed .neon-compare-bar-label { flex: 1; }
.neon-compare-bar-btn {
  background: #fff;
  color: var(--nc-primary-dk);
  border: none;
  border-radius: var(--nc-radius);
  padding: .4rem 1rem;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.neon-compare-bar-btn:hover { background: #e0e7ff; }
.neon-compare-bar-clear {
  background: none;
  border: 1px solid rgba(255,255,255,.5);
  color: #fff;
  border-radius: var(--nc-radius);
  padding: .4rem .75rem;
  font-size: .88rem;
  cursor: pointer;
  transition: background .15s;
}
.neon-compare-bar-clear:hover { background: rgba(255,255,255,.15); }

.neon-compare-check             { display: flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--nc-text-muted); position: absolute; top: .5rem; right: .5rem; background: rgba(255,255,255,.9); padding: .15rem .4rem; border-radius: 4px; }

/* ── Checkbox de comparación (WC loop) ───────────────────────────────────── */
.neon-compare-wrap {
  padding: .4rem .75rem .6rem;
}
.neon-compare-label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  color: var(--nc-text-muted);
  cursor: pointer;
  user-select: none;
  transition: color .15s;
}
.neon-compare-label:hover           { color: var(--nc-primary); }
.neon-compare-label.neon-in-compare { color: var(--nc-primary-dk); font-weight: 600; }
.neon-compare-label input[type=checkbox] {
  width: 15px;
  height: 15px;
  accent-color: var(--nc-primary);
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Modal de comparación ─────────────────────────────────────────────────── */
.neon-compare-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1rem;
  overflow-y: auto;
}
.neon-compare-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}
.neon-compare-modal-inner {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: calc(var(--nc-radius) * 1.5);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  width: 100%;
  max-width: 960px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 4rem);
}
.neon-compare-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--nc-border);
  flex-shrink: 0;
}
.neon-compare-modal-title {
  margin: 0;
  font-size: 1.15rem;
}
.neon-compare-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--nc-text-muted);
  padding: .1rem .4rem;
  border-radius: 4px;
  transition: background .15s;
}
.neon-compare-modal-close:hover { background: #f1f5f9; color: var(--nc-text); }
.neon-compare-modal-body {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  flex: 1;
}

/* Bloquear scroll del body cuando el modal está abierto */
body.neon-modal-open { overflow: hidden; }

/* Imagen en la tabla comparativa del modal */
.neon-compare-table img { max-width: 120px; max-height: 80px; object-fit: contain; display: block; margin: 0 auto; }

@media (max-width: 600px) {
  .neon-compare-modal       { padding: .5rem; }
  .neon-compare-modal-inner { max-height: calc(100vh - 1rem); border-radius: var(--nc-radius); }
  .neon-compare-bar-fixed   { flex-wrap: wrap; gap: .4rem; }
}

/* ── Tabla comparativa ────────────────────────────────────────────────────── */
.neon-comparator                { margin: 1.5rem 0; }
.neon-comparator-empty          { padding: 2rem; text-align: center; color: var(--nc-text-muted); background: var(--nc-bg); border: 1px dashed var(--nc-border); border-radius: var(--nc-radius); }
.neon-compare-table             { width: 100%; border-collapse: collapse; min-width: 500px; }
.neon-compare-table th,
.neon-compare-table td          { padding: .6rem .85rem; border: 1px solid var(--nc-border); font-size: .88rem; vertical-align: top; text-align: left; }
.neon-compare-table thead th    { background: var(--nc-primary); color: #fff; text-align: center; }
.neon-compare-table thead th.neon-th-label { background: #f1f5f9; color: var(--nc-text); }
.neon-compare-table tr:hover td { background: #f8fafc; }
.neon-cmp-img                   { max-width: 130px; max-height: 110px; object-fit: contain; display: block; margin: 0 auto .5rem; border-radius: 4px; background: #fff; }
.neon-cmp-no-img                { width: 130px; height: 80px; background: #f1f5f9; border-radius: 4px; margin: 0 auto .5rem; }
.neon-cmp-name                  { display: block; font-size: .85rem; font-weight: 600; line-height: 1.3; }
.neon-row-price td              { font-weight: 700; }
.neon-row-sale td               { }
.neon-price                     { font-size: .95rem; }
.neon-price-sale                { color: #dc2626; font-size: .95rem; }
.neon-sku                       { font-family: monospace; font-size: .82rem; color: var(--nc-text-muted); background: #f1f5f9; padding: .1rem .3rem; border-radius: 3px; }
.neon-row-action td             { text-align: center; padding: .75rem .85rem; }
.neon-btn-detail                { display: inline-block; padding: .4rem 1.1rem; background: var(--nc-primary); color: #fff; border-radius: var(--nc-radius); text-decoration: none; font-size: .84rem; font-weight: 600; transition: background .15s; }
.neon-btn-detail:hover          { background: var(--nc-primary-dk, #1d4ed8); color: #fff; }
.neon-na                        { color: #cbd5e1; }

/* ── Detalle de producto ──────────────────────────────────────────────────── */
.neon-product-detail            { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 1.5rem 0; }
@media (max-width: 680px) { .neon-product-detail { grid-template-columns: 1fr; } }
.neon-detail-img                { width: 100%; border-radius: var(--nc-radius); object-fit: cover; }
.neon-detail-title              { font-size: 1.6rem; margin: 0 0 .5rem; }
.neon-sku                       { font-size: .85rem; color: var(--nc-text-muted); margin: 0 0 .75rem; }
.neon-thumbs                    { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.neon-thumb                     { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; cursor: pointer; border: 2px solid transparent; transition: border-color .2s; }
.neon-thumb:hover               { border-color: var(--nc-primary); }
.neon-attributes,
.neon-location-prices           { width: 100%; border-collapse: collapse; margin: .75rem 0; font-size: .88rem; }
.neon-attributes th,
.neon-attributes td,
.neon-location-prices th,
.neon-location-prices td        { padding: .4rem .7rem; border: 1px solid var(--nc-border); }
.neon-attributes th,
.neon-location-prices th        { background: var(--nc-bg); font-weight: 600; width: 35%; }
.neon-product-description       { margin-top: 1rem; font-size: .95rem; line-height: 1.6; }
.neon-dimensions                { margin: .5rem 0; font-size: .83rem; color: var(--nc-text-muted); }
.neon-dimensions span           { margin-right: 1rem; }

/* ── Paginación ───────────────────────────────────────────────────────────── */
.neon-pagination                { display: flex; gap: .35rem; flex-wrap: wrap; margin: 1.25rem 0; }
.neon-page-link                 { padding: .35rem .65rem; border: 1px solid var(--nc-border); border-radius: 4px; color: var(--nc-text); text-decoration: none; font-size: .88rem; }
.neon-page-link:hover           { background: var(--nc-primary); color: #fff; border-color: var(--nc-primary); }
.neon-page-link.active          { background: var(--nc-primary); color: #fff; border-color: var(--nc-primary); pointer-events: none; }

/* ── Empty / error states ─────────────────────────────────────────────────── */
.neon-empty, .neon-error        { padding: 1.5rem; text-align: center; color: var(--nc-text-muted); font-size: .9rem; }
.neon-error                     { color: #b91c1c; background: #fef2f2; border-radius: var(--nc-radius); border: 1px solid #fecaca; }
.neon-loading                   { color: var(--nc-text-muted); font-style: italic; }

/* ── Budget Builder ───────────────────────────────────────────────────────── */
.neon-budget-builder            { margin: 1.5rem 0; }
.neon-budget-section            { margin-bottom: 1.5rem; }
.neon-budget-section h3         { font-size: 1rem; font-weight: 600; margin: 0 0 .75rem; padding-bottom: .4rem; border-bottom: 1px solid var(--nc-border); }
.neon-input                     { padding: .45rem .75rem; border: 1px solid var(--nc-border); border-radius: var(--nc-radius); font-size: .9rem; width: 100%; box-sizing: border-box; }
.neon-input-sm                  { width: 140px; }
.neon-textarea                  { padding: .5rem .75rem; border: 1px solid var(--nc-border); border-radius: var(--nc-radius); font-size: .9rem; width: 100%; box-sizing: border-box; resize: vertical; }

.neon-budget-search-row,
.neon-budget-service-row        { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-start; position: relative; }
.neon-budget-search-row         { flex-direction: column; }

.neon-suggestions               { position: absolute; top: calc(100% + 2px); left: 0; right: 0; background: #fff; border: 1px solid var(--nc-border); border-radius: var(--nc-radius); box-shadow: 0 4px 12px rgba(0,0,0,.1); z-index: 999; max-height: 240px; overflow-y: auto; }
.neon-suggestion-item           { display: flex; align-items: center; padding: .5rem .75rem; cursor: pointer; font-size: .88rem; }
.neon-suggestion-item:hover     { background: var(--nc-bg); }
.neon-suggestion-empty          { padding: .5rem .75rem; color: var(--nc-text-muted); font-size: .85rem; }

.neon-budget-table              { width: 100%; border-collapse: collapse; font-size: .9rem; }
.neon-budget-table th,
.neon-budget-table td           { padding: .5rem .75rem; border: 1px solid var(--nc-border); }
.neon-budget-table thead th     { background: var(--nc-bg); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--nc-text-muted); }
.neon-budget-table tfoot td     { background: var(--nc-bg); }

.neon-type-badge                { display: inline-block; padding: .1rem .45rem; border-radius: 20px; font-size: .72rem; font-weight: 600; }
.neon-type-product              { background: #dbeafe; color: #1d4ed8; }
.neon-type-service              { background: #dcfce7; color: #15803d; }

.neon-budget-status             { font-size: .88rem; margin-left: .75rem; }
.neon-status-ok                 { color: #15803d; font-weight: 600; }
.neon-status-error              { color: #b91c1c; font-weight: 600; }

.neon-budget-login-required     { padding: 1.5rem; background: var(--nc-bg); border: 1px solid var(--nc-border); border-radius: var(--nc-radius); }

/* ── WooCommerce cart: thumbnail reducido ───────────────────────────────── */
.woocommerce-cart .woocommerce-cart-form .product-thumbnail img,
.woocommerce table.cart td.product-thumbnail img {
  width: 64px !important;
  height: 64px !important;
  object-fit: cover;
  border-radius: 4px;
}