/* =========================
   jt_customcalculator.css (UNIFICADO)
   ========================= */

/* =========================
   VARIABLES DE TEMA
   ========================= */
:root{
  --jt-primary: #25214D;   /* azul oscuro (Primario) */
  --jt-primary-muted: #666382;
  --jt-light-secondary: #FF4F7D; /* rosado claro (hover primario) */
  --jt-secondary: #FF1552;       /* rosado (Secundario) */
  --jt-tertiary: #52DBB4;        /* Terciario (verde) */
  --jt-tertiary-dark: #07CB93;   /* terciario oscuro */
  --jt-success: var(--jt-tertiary);
  --jt-text: #0D112D;
  --jt-muted: #6D7185;
  --jt-muted-dark: #6D7185;
  --jt-border: #ECECF1;
  --jt-grey-100: #F7F8FD;
  --jt-grey-200: #EEEEF1;
  --jt-chip-bg: #F6F7FB;
  --jt-chip-dash: #E6E7EF;
  --jt-on-primary-muted: #E6E7EF;
  --body-font-size:10px;

  /* layout chips */
  --chip-gap: 10px;
  --jt-secondary-hover: #FF84A4;  /* hover del tag (fallback si no existe) */
  --jt-remove-tag-scale: 1.1;     /* 1 = 32x22px; ajusta tamaño global aquí */
  --jt-chip-remove-scale: 0.9;
}

/* ---------- Material Icons dentro del wizard ---------- */
.jt-wizard .material-icons,
.jt-wizard .material-icons-outlined,
.jt-wizard .material-symbols-outlined,
.jt-wizard .material-symbols-rounded,
.jt-wizard .material-symbols-sharp,
.jt-wizard .material-symbols-two-tone {
  display: inline-block !important;
  vertical-align: middle;
}

/* ---------- Fila de columnas (misma altura) ---------- */
.row.g-4 { display:flex; flex-wrap:wrap; align-items:stretch;
  margin-left: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
  margin-right: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
}
.row.g-4 > [class*="col-"]{
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}

/* ---------- Columnas como flex-column ---------- */
.col-12.col-lg-8, .col-12.col-lg-4, .col-12.col-lg-3 {
  display:flex; flex-direction:column;
}

/* =========================
   WIZARD (estructura)
   ========================= */
.jt-wizard.card{
  display:flex; flex-direction:column; width:100%; height:100%;
  /*border:2px solid var(--jt-grey-200);*/
  /*box-shadow:0 .125rem .25rem rgba(0,0,0,.075);*/
  border: none;
  border-radius:10px;
}

/* Header de pasos */
.jt-wizard-header{
  background: rgba(37,33,77,0.02);
  border-bottom:2px solid var(--jt-grey-200);
  border-radius:10px 10px 0 0; padding:0 1rem;
}
.jt-steps{ margin:0; padding:0; list-style:none; display:flex; }
.jt-steps .nav-item{ flex:1; position:relative; }
.jt-steps .jt-step{
  display:block; text-align:center; padding:.75rem .5rem; color:#BEBDCA;
  font-family:Lato, var(--default-font-family); font-size:15px; font-weight:700; line-height:1.2; white-space:nowrap;
}
.jt-steps .nav-item:not(:last-child)::after{
  content:""; position:absolute; top:50%; right:0; width:100%; height:2px;
  background:var(--jt-grey-200); transform:translateY(-50%); z-index:-1;
}
.jt-steps .jt-step.done{ color:#6D7185; }
.jt-steps .jt-step.active{ color:var(--jt-text); }

/* Body + Footer */
.jt-wizard.card > form{ display:flex; flex-direction:column; flex:1; }
.jt-wizard-body{ flex:1; overflow:auto; padding:1rem 2.5rem; }
.jt-wizard-footer{
  margin-top:auto; padding:.75rem 2rem; display:flex; justify-content:space-between; gap:1rem;margin-bottom:8px;
}
.jt-wizard-footer .jt-actions-left{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-right:auto;
}
.jt-wizard-footer .jt-btn-clear{
  background:var(--jt-danger, #dc3545) !important;
  border:2px solid var(--jt-danger, #dc3545) !important;
  color:#fff !important;
}
.jt-wizard-footer .jt-btn-clear .material-icons{
  color:#fff !important;
}
.jt-wizard-footer .jt-btn-clear:hover{
  background:var(--jt-danger-dark, #bb2d3b) !important;
  border-color:var(--jt-danger-dark, #bb2d3b) !important;
  color:#fff !important;
}

/* Botón gris reutilizable (retroceder base) */
.btn-gray{
  background:var(--jt-grey-200) !important;
  color:var(--jt-muted-dark) !important;
  border:2px solid var(--jt-grey-200) !important;
}
.btn-gray .material-icons{ color:var(--jt-muted-dark) !important; }
/* Hover: PRIMARIO + texto/ícono gris claro */
.jt-wizard-footer .btn-gray:hover{
  background:var(--jt-primary) !important;
  border-color:var(--jt-primary) !important;
  color:var(--jt-on-primary-muted) !important;
}
.jt-wizard-footer .btn-gray:hover .material-icons{
  color:var(--jt-on-primary-muted) !important;
}

/* Separadores del wizard */
.jt-wizard .normal-line{
  width:calc(100% - 68px); margin:0 34px;
  border-bottom:2px solid rgba(37,33,77,0.08);
}
.calculator-line{
  width:95%; border-bottom:2px solid rgba(37,33,77,0.08); margin:0.5rem auto;
}

/* =========================
   PASO 1: Colores y tallas
   ========================= */
.jt-contain-wrapper{ max-height:48vh; overflow-y:auto; margin-bottom:0.8rem; }

.jt-color-block{
  display:flex; align-items:flex-start; gap:1rem; padding:1rem 32px;
  border:2px solid var(--jt-grey-200); border-radius:10px;
}

.color-info{ width:90px; text-align:center; flex-shrink:0; }
.color-swatch{ width:58px; height:58px; border:2px solid var(--jt-grey-200); border-radius:50%; margin:0 auto; }
.color-name{ margin-top:.5rem; font-weight:700; font-size:14px; }

.jt-color-block .color-info{
  border-right:2px solid var(--jt-border); padding-right:20px; margin-right:20px;
}

.sizes-row{ flex:1; display:flex; flex-wrap:wrap; gap:14px; }
.size-item{ display:flex; flex-direction:column; width:80px; text-align:center; }
.size-item input{ width:100%; text-align:center; }
.size-item .size-label{ align-self:flex-start; text-align:left; margin-bottom:2px; }
.size-item input, .size-item .stock{ text-align:center; }

.size-label.disabled{ color:#BEBDCA; }
.stock.green{ color:var(--jt-success); }
.stock.red{ color:var(--jt-secondary); }
.stock-bold{ font-size:15px; font-weight:bold; }

@media (max-width: 1024px){
  .sizes-row{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap:10px;
  }
  .size-item{ width:auto; min-width:0; }
}

@media (max-width: 768px){
  .sizes-row{
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    gap:8px;
  }
  .size-item .size-label{ font-size:12px; }
  .size-item input{ font-size:12px; padding:4px 6px; }
  .size-item .stock{ font-size:12px; }
}

@media (max-width: 520px){
  .sizes-row{
    grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
    gap:6px;
  }
}

@media (max-width: 375px){
  .jt-color-block{
    flex-direction:column;
    align-items:stretch;
    padding:12px 14px;
  }
  .jt-color-block .color-info{
    width:100%;
    display:flex;
    align-items:center;
    gap:10px;
    border-right:0;
    padding-right:0;
    margin-right:0;
    border-bottom:2px solid var(--jt-border);
    padding-bottom:10px;
  }
  .jt-color-block .jt-remove-color{
    position: static;
    transform:none;
    margin-left:auto;
  }
  .color-swatch{
    width:46px;
    height:46px;
    margin:0;
  }
  .color-name{
    margin-top:0;
    text-align:left;
  }
  .sizes-row{ width:100%; }
}

/* Botón “Añadir otro color” (outlined) */
.jt-btn-outlined{
  background:transparent !important;
  color:var(--jt-primary) !important;
  border:2px solid var(--jt-primary) !important;
  padding:5px; border-radius:6px; display:inline-flex; align-items:center; gap:.5rem;
  transition:color .15s ease, border-color .15s ease;
}
.jt-btn-outlined:hover{
  background:transparent !important;
  color:var(--jt-secondary) !important;
  border-color:var(--jt-secondary) !important;
}
.jt-btn-outlined .material-icons-outlined{ font-size:1.25rem; line-height:1; vertical-align:middle; }

/* Selector visual de colores */
.color-grid{
  width:max-content; display:grid; grid-template-columns:repeat(4, 26px);
  gap:15px; padding:8px 6px; max-height:140px; overflow-y:auto;
  border:2px solid var(--jt-grey-200); border-radius:8px; margin-top:5px;
}
.color-swatch-btn{
  width:30px; height:30px; border:2px solid var(--jt-grey-200);
  border-radius:50%; cursor:pointer;
}
.color-swatch-btn:hover{ outline:2px solid var(--jt-text); }

/* =========================
   PASO 2: Posiciones / Métodos / Tintas
   ========================= */
.pos-nav{display:flex;gap:6px;justify-content:center;margin:18px 0}
.pos-nav .dot{width:10px;height:10px;border-radius:50%;border:none;cursor:pointer;background:#BEBECA}
.pos-nav .dot.active{background:var(--jt-primary)}

/* Tarjetas */
.pos-step-card{
  /* no forzamos display aquí; solo estilos base */
  background:#fff;
  border:2px solid var(--jt-border);
  border-radius:10px;
  overflow:hidden;
  /*margin-bottom:36px;*/
  margin-top:15px;
  overflow:visible;
}

/* Ocultar SOLO las no activas */
.pos-step-card:not(.active){ display:none; }

/* Principal (no .extra-grid) → flex cuando activa */
.pos-step-card:not(.extra-grid).active{ display:flex; }

/* Extra-grid (adjuntos) */
.pos-step-card.extra-grid{ border:none; }
.pos-step-card.extra-grid:not(.active){ display:none; }
.pos-step-card.extra-grid.active{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:38px;
}

/* Mantén este ajuste del label si ya lo tenías */
.extra-grid label.dropzone{ margin-bottom:0px; }

/* Chips y holders a ancho completo dentro de extra-grid (ocupan ambas columnas) */
.pos-step-card.extra-grid .jt-filechips,
.pos-step-card.extra-grid .jt-fileholders{
  grid-column:1 / -1;
}

.col-thumb{
  width:120px; flex-shrink:0; display:flex; flex-direction:column; align-items:center;
  padding:20px 12px; border-right:2px solid var(--jt-border)
}
.col-thumb img{ width:85px; border:1px solid var(--jt-border); border-radius:4px; }
.pos-name{ margin-top:8px; font-weight:700; color:var(--jt-text); text-align:center; }

.col-body{ flex:1; display:flex; flex-direction:column; gap:11px; padding:6px; padding-left: 15px; padding-right: 15px;}

/* Dropdown método (disparador) */
.dropdown{ position:relative; }
.jt-select{
  display:inline-flex; align-items:center; gap:6px; padding:8px 14px; background:#fff;
  border:2px solid var(--jt-border); border-radius:6px;
  font:700 15px/1 "Inter",sans-serif; color:var(--jt-text);
  cursor:pointer; transition:color .15s ease, border-color .15s ease, background-color .15s ease;
}
.jt-select:hover{
  color:var(--jt-secondary) !important;
  border-color:var(--jt-secondary) !important;
  background:#fff !important;
}
.jt-select.open,
.jt-select.active,
.jt-select[aria-expanded="true"]{
  color:var(--jt-primary) !important;
  border-color:var(--jt-primary) !important;
  background:#fff !important;
}
.jt-select.open:hover,
.jt-select.active:hover,
.jt-select[aria-expanded="true"]:hover{
  color:var(--jt-light-secondary) !important;
  border-color:var(--jt-light-secondary) !important;
  background:#fff !important;
}

/* Menú de opciones (fondo por defecto) */
.jt-menu{
  display:none; position:absolute; top:calc(100% + 4px); left:0; right:auto;
  max-height:260px; overflow-y:auto;
  background:#fff;
  border:2px solid var(--jt-border);
  border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,.15); z-index:50;
  padding:2px;
}
.jt-item{
  display:block; width:100%; padding:8px 12px; text-align:left;
  background:#fff; border:0; border-bottom:1px solid var(--jt-border);
  font:600 14px/1.3 "Inter",sans-serif; cursor:pointer; color:var(--jt-text);
}
.jt-item:last-child{ border-bottom:none; }
.jt-item:hover{
  background:var(--jt-tertiary) !important;
  color:var(--jt-primary) !important;
  border-radius:4px;
}

/* Descripción/ayuda fila método */
.method-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.method-desc{
  flex:1; display:flex; align-items:center; gap:6px; padding:8px 12px;
  background:#F5F5F8; border-radius:6px;
  font:600 13px "Inter",sans-serif; color:#6D6F7F;
}

/* Ink pickers (selección visible) */
.ink-pickers-wrapper{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
  align-items:flex-start;
}
.ink-picker-container{ display:flex; flex-direction:column; width:100%; min-width:0; position:relative; }
.ink-picker{
  display:grid; grid-template-columns: 18% 1fr max-content; align-items:center; gap:10px;
  min-width:0; width:100%; min-height:40px; padding:0;
  border:2px solid #BEBECA; border-radius:6px; background:#fff; overflow:hidden;
  cursor:pointer; font:600 14px "Inter",sans-serif; color:var(--jt-muted);
  transition: color .15s ease, border-color .15s ease;
}
.ink-picker .ink-swatch{
  display:block; width:100%; height:100%;
  align-self:stretch; justify-self:stretch;
  border-radius:6px 0 0 6px;
  border-right:2px solid var(--jt-primary);
}
.ink-picker .ink-name{ font-weight:700; color:var(--jt-primary); padding:0px; }
.ink-picker .ink-price{ justify-self:end; color:var(--jt-tertiary-dark); font-weight:600; font-size:13px; padding:8px 5px; }
.ink-picker:hover, .ink-picker.open{ border-color:var(--jt-light-secondary) !important; color:var(--jt-light-secondary) !important; }
.ink-picker.selected{ border-color:var(--jt-primary) !important; color:var(--jt-primary) !important; }
.ink-picker.selected:hover{ border-color:var(--jt-secondary) !important; color:var(--jt-primary) !important; }

@media (max-width: 1440px) {
  .ink-pickers-wrapper{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 1240px) {
  .ink-pickers-wrapper{
    grid-template-columns: 1fr;
  }
  .ink-picker{
    grid-template-columns: 16% 1fr max-content;
  }
}
@media (max-width: 768px) {
  .ink-picker{
    grid-template-columns: 18% 1fr max-content;
    font-size: 13px;
  }
  .ink-picker .ink-price{
    font-size:12px;
    padding:6px 4px;
  }
}

/* Selector de tamaños (chips) */
.size-row{ margin-top:6px; }
.size-picker{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; }
.size-chip{
  display:grid;
  grid-template-columns: 1fr;
  align-items:flex-start;
  gap:3px;
  min-width:180px;
  padding:10px 12px;
  border:2px solid #BEBECA;
  border-radius:8px;
  background:#fff;
  cursor:pointer;
  text-align:left;
  color:var(--jt-text);
  font:600 14px/1.2 "Inter",sans-serif;
  transition: border-color .15s ease, box-shadow .15s ease, color .15s ease, transform .15s ease;
  appearance:none;
}
.size-chip .size-label{ font-weight:700; color:var(--jt-primary); font-size:14px; }
.size-chip .size-meta{ color:var(--jt-muted); font-size:13px; display:none; }
.size-chip .size-price{ color:var(--jt-tertiary-dark); font-weight:700; font-size:13px; justify-self:end; }
.size-chip:hover{
  border-color:var(--jt-light-secondary);
  box-shadow:0 6px 18px rgba(37,33,77,0.12);
  transform:translateY(-1px);
}
.size-chip.active{
  border-color:var(--jt-primary);
  box-shadow:0 8px 20px rgba(37,33,77,0.15);
}
.size-chip:focus{ outline:none; }
.size-chip:focus-visible{
  box-shadow:0 0 0 3px rgba(37,33,77,.2);
}
.size-price-hint{
  display:inline-block;
  margin-left:8px;
  margin-top:0;
  color:#6D7185;
  font-size:13px;
  vertical-align:middle;
}

/* Additional info blocks (inks/sizes) */
.jt-ink-additional-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-start;
  margin-top:8px;
  width:100%;
}
.jt-size-additional{
  margin-top:8px;
  width:220px;
  max-width:100%;
}
.jt-ink-additional{
  width:32%;
  min-width:220px;
}
.jt-additional-block{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px 12px;
  border:1px dashed #BEBECA;
  border-radius:8px;
  background:#FBFBFE;
}
.jt-additional-info{
  font:700 13px/1.3 "Inter",sans-serif;
  color:#1F1F23;
}
.jt-additional-info a{
  color:var(--jt-secondary);
  text-decoration:underline;
  cursor:pointer;
}
.jt-additional-info a:hover{
  color:var(--jt-light-secondary);
}
.jt-additional-text{
  font:600 13px/1.4 "Inter",sans-serif;
  color:#6D6F7F;
}
.jt-additional-text a{
  color:var(--jt-primary);
  text-decoration:underline;
  cursor:pointer;
}
.jt-additional-input{
  width:100%;
}

/* Menú de tintas (contenedor) */
.ink-menu{
  display:none; position:absolute; top:calc(100% + 4px); left:0; width:110%;
  background:#fff; border:2px solid var(--jt-border); border-radius:6px;
  box-shadow:0 4px 12px rgba(0,0,0,.15); z-index:60; max-height:250px; overflow-y:auto;
}
/* Reglas base (para otros contextos no menú) */
.ink-item{ display:flex; align-items:center; gap:3px; padding:4px 12px; border-bottom:1px solid var(--jt-border); cursor:pointer; }
.ink-item:last-child{ border-bottom:none; }
.ink-item:hover{ border:2px solid var(--jt-secondary) !important; margin:-2px; }
.ink-swatch{ width:14px; height:14px; border:1px solid var(--jt-border); border-radius:3px; }
.ink-name{ color:var(--jt-primary); font-weight:600; }
.ink-price{ color:var(--jt-tertiary-dark); font-weight:600; font-size:13px; }

/* Adjuntos + notas */
.extra-grid{ display:grid; grid-template-columns:1fr 1fr; gap:38px; }
.dropzone{
  display:flex; flex-direction:column; align-items:center; gap:10px; padding:26px; text-align:center;
  border:2px dashed #BEBECA; border-radius:8px; color:#6D6F7F; background:#F9F9F9;
  min-height:120px; /* = note-area */
}
.dropzone input{ display:none; }
.btn-upload{
  display:inline-flex; align-items:center; gap:6px; padding:7px 16px; background:#6D7185;
  border:2px solid var(--jt-grey-100); border-radius:6px; font-weight:600; color:#fff; cursor:pointer;
}
.btn-upload:hover{ background:var(--jt-primary) !important; color:#fff !important; border-color:var(--jt-primary) !important; }
.note-area{ width:100%; min-height:120px; padding:12px 14px; border:2px solid var(--jt-border); border-radius:8px; resize:vertical; font-size:15px; }
@media (max-width: 1024px){
  .pos-step-card.extra-grid.active{ grid-template-columns:1fr; gap:24px; }
  .extra-grid{ grid-template-columns:1fr; gap:24px; }
  .dropzone, .note-area{ width:100%; }
}
@media(max-width:640px){
  .extra-grid{ grid-template-columns:1fr; }
  .jt-select, .ink-picker{ width:100%; }
  .jt-ink-additional, .jt-size-additional{ width:100%; min-width:0; }
}

/* =========================
   PASO 3: Servicios adicionales
   ========================= */
.svc-card{
  display:flex; align-items:flex-start; gap:24px;
  background:#fff; border:2px solid #EEEFF1; border-radius:10px;
  padding:24px; margin-bottom:18px;
}
.svc-thumb{ width:115px; height:115px; flex-shrink:0; border-radius:8px; object-fit:cover; border:1px solid #EEEFF1; }
.svc-body{ flex:1; display:flex; flex-direction:column; gap:8px; }
.svc-name{ font:700 16px/1.2 "Inter",sans-serif; color:var(--jt-text); }
.svc-desc{ font:600 14px/1.4 "Inter",sans-serif; color:#6D6F7F; }
.svc-footer{ display:flex; justify-content:space-between; align-items:center; margin-top:4px; }
.svc-price{ font:700 15px/1 "Inter",sans-serif; color:var(--jt-success); }

/* Toggle */
.svc-toggle{ position:relative; width:42px; height:22px; }
.svc-toggle input{ opacity:0; width:0; height:0; }
.svc-slider{ position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#BEBECA; border-radius:22px; transition:.2s; }
.svc-slider:before{ content:''; position:absolute; height:18px; width:18px; left:2px; bottom:2px; background:#fff; border-radius:50%; transition:.2s; }
.svc-toggle input:checked + .svc-slider{ background:var(--jt-success); }
.svc-toggle input:checked + .svc-slider:before{ transform:translateX(20px); }

@media(max-width:640px){
  .svc-card{ flex-direction:column; gap:16px; }
  .svc-footer{ flex-direction:column; gap:6px; align-items:center; }
}

/* =========================
   Social (wrapper)
   ========================= */
.jt-social-section{ display:flex; align-items:center; gap:1rem; margin:1.5rem; font-family:Inter,sans-serif; }
.jt-social-section .jt-share-label{ font-size:1rem; font-weight:700; color:var(--jt-text); white-space:nowrap; }
.jt-social-section .jt-social-buttons{ display:flex; gap:.75rem; }
.jt-social-section .jt-social-btn{
  width:22px; height:22px; display:block; background-repeat:no-repeat; background-position:center; background-size:cover; text-indent:-9999px;
}
.jt-social-btn.jt-facebook  { background-image:url('/modules/jt_customcalculator/views/img/social/faFacebookSquare.svg'); }
.jt-social-btn.jt-instagram { background-image:url('/modules/jt_customcalculator/views/img/social/faSquareInstagram.svg'); }
.jt-social-btn.jt-twitter   { background-image:url('/modules/jt_customcalculator/views/img/social/faSquareXTwitter.svg'); }
.jt-social-btn.jt-whatsapp  { background-image:url('/modules/jt_customcalculator/views/img/social/faSquareWhatsapp.svg'); }
.jt-social-btn.jt-share-nodes{ background-image:url('/modules/jt_customcalculator/views/img/social/faSquareShareNodes.svg'); }
.jt-social-btn:hover{ opacity:.8; }

/* =========================
   Discount table
   ========================= */
.jt-discount-table .jt-discount-qty th,
.jt-discount-table .jt-discount-qty td{
  font-weight:700;
}
.jt-discount-table .jt-discount-discount th,
.jt-discount-table .jt-discount-discount td{
  color: var(--jt-secondary);font-weight:700;
}

/* =========================
   Resumen lateral (“box”)
   ========================= */
.summary-wrapper{ flex:1; display:flex; flex-direction:column; width:100%; }
.summary-wrapper .box{
  width:361px; margin:0 auto; padding:16px; border:2px solid var(--jt-grey-200);
  border-radius:10px; font-family:Inter, Helvetica, sans-serif;
}
.summary-wrapper .box .main-title,
.summary-wrapper .box .final-total{ color:var(--jt-text); font-size:21px; font-weight:700; line-height:normal; text-align:left; margin-bottom:12px; }
.summary-wrapper .box .final-total{ font-size:18px; }
.summary-wrapper .box .section-title{ color:var(--jt-text); font-size:16px; font-weight:700; margin-bottom:10px; }
.summary-wrapper .box .total{ color:var(--jt-muted); font-size:14px; font-weight:600; margin-bottom:10px; }
.summary-wrapper .box .subtotal{ font-size:16px; }
.summary-wrapper .box .discount-text{ color:var(--jt-success); font-size:16px; font-weight:700; margin-bottom:10px; }
.summary-wrapper .box .normal-line{ width:100%; border-bottom:2px solid rgba(37,33,77,0.08); margin:6px 0; }
.summary-wrapper .box .dotted-line{ width:100%; border-bottom:2px dotted rgba(37,33,77,0.08); margin:6px 0; }
.summary-wrapper .box .details{ font-size:14px; font-weight:600; color:#6D6F7F; line-height:22px; margin-bottom:6px; }
.summary-wrapper .box .details p{ margin:5px 0; }
.summary-wrapper .box .details .span{ font-weight:600; color:var(--jt-text); }
.summary-wrapper .box .details .summary-price-row{
  display:flex; align-items:center; gap:8px;
}
.summary-wrapper .box .details .summary-price-row .summary-price-tooltip{
  display:inline-flex; align-items:center; gap:0;
  color:var(--jt-muted);
  font-size:14px;
}
.summary-wrapper .box .details .summary-price-row .summary-price-tooltip span[aria-hidden="true"]{
  line-height:1;
}
.summary-wrapper .box .details .summary-price-info-icon{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  border:1px solid var(--jt-muted); color:var(--jt-muted);
  font-size:11px; font-weight:700; line-height:1; cursor:help; background:#fff;
  transition: color .2s ease, border-color .2s ease;
}
.summary-wrapper .box .details .summary-price-info-icon:hover{
  color:var(--jt-primary); border-color:var(--jt-primary);
}
.summary-wrapper .box .details .summary-price-info-icon:focus{
  outline:none;
}
.summary-wrapper .box .details .summary-price-info-icon:focus-visible{
  box-shadow:0 0 0 2px rgba(37,33,77,0.2);
}
.summary-wrapper .box .details .summary-price-info-icon::after{
  content: attr(data-tooltip);
  position:absolute; bottom:calc(100% + 8px); left:50%;
  transform:translate(-50%, 4px);
  background:var(--jt-text); color:#fff; padding:6px 8px;
  border-radius:4px; font-size:12px; font-weight:500;
  white-space:nowrap; opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
  z-index:10;
}
.summary-wrapper .box .details .summary-price-info-icon::before{
  content:""; position:absolute; bottom:calc(100% + 2px); left:50%;
  transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--jt-text);
  opacity:0; visibility:hidden; transition: opacity .2s ease;
}
.summary-wrapper .box .details .summary-price-info-icon:hover::after,
.summary-wrapper .box .details .summary-price-info-icon:focus-visible::after{
  opacity:1; visibility:visible; transform:translate(-50%, 0);
}
.summary-wrapper .box .details .summary-price-info-icon:hover::before,
.summary-wrapper .box .details .summary-price-info-icon:focus-visible::before{
  opacity:1; visibility:visible;
}
.summary-wrapper .box .details .text-wrapper-3{ font-size:14px; font-weight:500; color:#6D6F7F; }
.summary-wrapper .box .section{ margin-bottom:16px; }

/* ---------- Responsivo wrapper-general ---------- */
@media (max-width: 1024px){
  .jt-wizard.card{ height:auto; }
}

/* ---------- SUMMARY (PASO 4) ---------- */
.summary-card{ display:flex; }
.summary-card .col-body{ display:flex; flex-direction:column; min-height:140px; }
.summary-card .svc-footer--summary{ margin-top:auto; display:flex; justify-content:space-between; align-items:flex-end; gap:16px; }
.summary-card .discount-text{ margin-left:auto; }
.method-desc--summary{
  width:100%; display:flex; align-items:center; gap:12px;
  background:var(--jt-chip-bg); border:2px dashed var(--jt-chip-dash); border-radius:8px;
  padding:10px 14px; color:#6D6F7F; font:600 14px/1.35 "Inter",sans-serif;
}
.method-desc--summary .summary-icon{ font-size:18px; color:#6D7185; background:#fff; border:2px solid var(--jt-chip-dash); border-radius:6px; padding:6px; }
.method-desc--summary strong{ font-weight:700 !important; color:var(--jt-text); }
.summary-card .total-strong{ color:var(--jt-text); font-weight:600; }
.summary-card .total-strong .price-strong{ font-weight:700; font-size:18px; line-height:1.15; }
.summary-card .summary-green, .summary-card .discount-text{ color:var(--jt-success); font-weight:700; }
.summary-card--shipping-only{ background:#E5FAFF; }
.summary-card--shipping-only .col-body{ width:100%; }
.jt-shipping-only{ width:100%; }
.jt-shipping-only__grid{
  display:grid;
  grid-template-columns:1.7fr 1fr;
  gap:16px;
  width:100%;
}
.jt-shipping-only__main{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px 16px;
  border-right:1px solid var(--jt-border);
}
.jt-shipping-only__title-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.jt-shipping-only__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#FF3900;
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:4px 10px;
  border-radius:8px 0 8px 0;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.jt-shipping-only__title{
  font-size:16px;
  font-weight:700;
  color:var(--jt-text);
}
.jt-shipping-only__subtitle{
  font-size:23px;
  font-weight:700;
  color:var(--jt-text);
  text-align:left;
  margin-top:0;
}
.jt-shipping-only__side{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:12px 0;
}
.jt-shipping-only__extra{
  font-size:16px;
  font-weight:700;
  color:var(--jt-text);
  line-height:1.35;
}
.jt-shipping-only__extra p{
  margin:0 0 6px;
}
.jt-shipping-only__options{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.jt-shipping-only__option{
  display:flex;
  gap:8px;
  align-items:flex-start;
  font-size:14px;
  color:var(--jt-muted-dark);
  font-weight:600;
}
.jt-shipping-only__option-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--jt-primary);
}
.jt-shipping-only__option-icon .material-icons{ font-size:18px; }
.jt-shipping-only__option-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  color:var(--jt-muted-dark);
  line-height:1.35;
}
.jt-shipping-only__option-line{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.jt-shipping-only__option-name{
  font-weight:700;
  color:var(--jt-text);
}
.jt-shipping-only__option-lead{
  font-weight:600;
  color:var(--jt-muted);
}
.jt-shipping-only__option-date strong{
  font-weight:700;
  color:var(--jt-text);
}

@media (max-width: 900px){
  .jt-shipping-only__grid{ grid-template-columns:1fr; }
  .jt-shipping-only__main{
    border-right:0;
    border-bottom:1px solid var(--jt-border);
  }
  .jt-shipping-only__side{ padding-top:0; }
}

/* =========================
   AJUSTES – NAVEGACIÓN Y BOTONES (SIGUIENTE)
   ========================= */
.jt-wizard-footer .btn-primary{
  background:var(--jt-primary) !important;
  border:2px solid var(--jt-primary) !important;
  color:#fff !important;
}
.jt-wizard-footer .btn-primary:hover{
  background:var(--jt-tertiary-dark) !important;
  border-color:var(--jt-tertiary-dark) !important;
  color:#fff !important;
}

/* =====================================================
   OVERRIDE FINAL – MENÚ DE TINTAS (opciones desplegables)
   ===================================================== */
.ink-menu > li.ink-item{
  display: grid !important;
  grid-template-columns: 20% 1fr max-content !important;
  align-items: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--jt-border) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  background: #fff !important;
}
.ink-menu > li.ink-item:last-child{ border-bottom:none !important; }

/* franja de color a todo el alto + separador derecho */
.ink-menu > li.ink-item > .ink-swatch{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  border: none !important;
  border-right: 2px solid var(--jt-border) !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  min-height: 40px !important;
}

/* nombre centrado */
.ink-menu > li.ink-item > .ink-name{
  display: flex !important;
  align-items: center !important;
  justify-content: left !important;
  padding: 0px !important;
  text-align: center !important;
  font-weight: 700 !important;
  color: var(--jt-primary) !important;
  line-height: 1.2 !important;

  /* base */
  font-size: 14px !important;
}

/* menos de 8 caracteres => 15px */
.ink-menu > li.ink-item > .ink-name.len-sm{
  font-size: 15px !important;
}

/* entre 8 y 13 => 14px (podrías omitirla porque es la base) */
.ink-menu > li.ink-item > .ink-name.len-md{
  font-size: 14px !important;
}

/* más de 13 => 13px */
.ink-menu > li.ink-item > .ink-name.len-lg{
  font-size: 13px !important;
}

/* precio pegado a la derecha */
.ink-menu > li.ink-item > .ink-price{
  display: block !important;
  align-self: center !important;
  justify-self: end !important;
  padding: 10px 12px !important;
  white-space: nowrap !important;
  color: var(--jt-tertiary-dark) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

/* hover consistente */
.ink-menu > li.ink-item:hover{
  background: var(--jt-tertiary) !important;
  border: 0 !important;
  margin: 0 !important;
}
.ink-menu > li.ink-item:hover > .ink-name{
  color: var(--jt-primary) !important;
}

/* “Ninguna”: segmento vacío coherente (solo si existe el item) */
.ink-menu > li.ink-item.ink-item--none > .ink-swatch{
  background: transparent !important;
}

/* ========== Upload chips ========== */

/* contenedor de chips */
.jt-filechips{
  width:100%;
  display:flex; flex-wrap:wrap;
  gap: var(--chip-gap);
  margin-top:12px;
}

/* cada chip ocupa exactamente ~32% (3 por fila),
   contando los gaps (2 por fila): */
.jt-filechip{
  display:flex; align-items:center;
  background:#fff; border:2px solid #1F1F23; border-radius:10px; overflow:hidden;
  box-shadow:0 2px 0 rgba(0,0,0,.04);
  box-sizing: border-box; /* importante para que el 32% incluya el borde */

  flex: 0 1 calc((100% - var(--chip-gap) * 2) / 3);
  max-width: calc((100% - var(--chip-gap) * 2) / 3);
  min-width: 220px;
}

/* responsivo: 2 por fila */
@media (max-width: 900px){
  .jt-filechip{
    flex-basis: calc((100% - var(--chip-gap)) / 2);
    max-width: calc((100% - var(--chip-gap)) / 2);
  }
}
/* responsivo: 1 por fila */
@media (max-width: 520px){
  .jt-filechip{
    flex-basis: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

/* cara izquierda con estrella y colores alternos */
.jt-filechip .chip-left{
  width:50px; height:40px; display:flex; align-items:center; justify-content:center;
  border-right:2px solid rgba(0,0,0,.08);
  padding:5px;
}
.jt-filechips .jt-filechip:nth-child(3n+1) .chip-left{ background:#AEB8EE; }
.jt-filechips .jt-filechip:nth-child(3n+2) .chip-left{ background:#FFFDC3; }
.jt-filechips .jt-filechip:nth-child(3n)   .chip-left{ background:#FFDCE5; }

.jt-filechip .chip-name{
  flex:1 1 auto; max-width:260px; padding:0 10px; font-size:14px; line-height:1; color:#1F1F23;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* nombre clicable pero SIN apariencia de enlace */
.jt-filechip .chip-name a,
.jt-filechip .chip-name .chip-open{
  color: inherit !important;
  text-decoration: none !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font: inherit !important;
  cursor: pointer;
}
.jt-filechip .chip-name a:hover,
.jt-filechip .chip-name .chip-open:hover{
  text-decoration: none !important;
}

/* botón eliminar */
.jt-filechip .chip-remove{
  margin-right:8px; margin-left:6px; width:22px; height:22px; border:0; border-radius:4px;
  background:#FF4D61; color:#fff; font-size:18px; line-height:18px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.jt-filechip .chip-remove:hover{ filter:brightness(.92); }

/* Dropzone feedback */
.dropzone{ transition:box-shadow .15s,border-color .15s; }
.dropzone.drag-over{
  box-shadow: inset 0 0 0 2px #AEB8EE, 0 0 0 2px #AEB8EE;
  border-color:#AEB8EE !important;
}

/* =========================
   MODAL DE IMAGEN (preview)
   ========================= */
#jt-img-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.72);
  display: none; align-items: center; justify-content: center; z-index: 99999;
}
#jt-img-modal.open { display: flex; }
#jt-img-modal .jt-img-wrap {
  position: relative; max-width: 92vw; max-height: 92vh; background: #111; padding: 8px;
  border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
#jt-img-modal img { max-width: 90vw; max-height: 80vh; display: block; background: #111; }
#jt-img-modal .jt-img-caption {
  color: #eee; font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  margin-top: 6px; text-align: center; word-break: break-word;
}
#jt-img-modal .jt-img-close {
  position: absolute; top: 4px; right: 6px; width: 36px; height: 36px;
  display: grid; place-items: center; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.08); color: #fff; cursor: pointer; font-size: 22px;
}
#jt-img-modal .jt-img-close:hover { background: rgba(255,255,255,.18); }

/* Footer: grupo derecho (descargar + siguiente) */
.jt-footer-right{
  display:flex;
  align-items:center;
  gap:.75rem;
}

.jt-actions-right{display:flex;gap:.75rem;align-items:center}
.jt-btn-download{
  background: var(--jt-primary-muted) !important;
  border: 2px solid var(--jt-primary-muted) !important;
  color: #fff !important;
}
.jt-btn-download:hover{
  background: var(--jt-light-secondary) !important;
  border-color: var(--jt-light-secondary) !important;
  color: #fff !important;
}

/* ===== HELLO block ===== */
.jtcalc-hello-wrap{
  width:100%;
  display:block;
  margin:24px 0;
  padding:28px 20px;
  background:#f6f8fb;
  border:1px solid #e5e8ef;
  border-radius:10px;
}
.jtcalc-hello-title{
  margin:0;
  font-size:32px;
  line-height:1.2;
  font-weight:800;
  text-align:center;
}

/* Oculta el botón de quitar en el PRIMER bloque */
#colors-container .jt-color-block:first-child .jt-remove-color { display:none !important; }

/* El bloque sirve de ancla y evita desbordes del botón */
.jt-color-block{
  position: relative;
  overflow: hidden;
}

/* Botón “tag” pegado a la derecha y centrado verticalmente */
.jt-color-block .jt-remove-color{
  --s: var(--jt-remove-tag-scale, 1.2);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: calc(32px * var(--s));
  height: calc(22px * var(--s));
  display: grid;
  place-items: center;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important; /* el color lo aporta el SVG */
  cursor: pointer;
  z-index: 3;
}

/* Neutraliza Bootstrap si el botón conserva .btn/.btn-link */
.jt-color-block .jt-remove-color.btn,
.jt-color-block .jt-remove-color.btn-link{
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: inherit !important;
  text-decoration: none !important;
}

/* El SVG ocupa todo el botón */
.jt-color-block .jt-remove-color svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* Colores del tag y de la “X” usando tu paleta */
.jt-color-block .jt-remove-color .tag-fill{ fill: var(--jt-secondary); }
.jt-color-block .jt-remove-color:hover .tag-fill{ fill: var(--jt-secondary-hover, #FF84A4); }
.jt-color-block .jt-remove-color .x-fill{ fill: #FFFFFF; }

.jt-color-block{
  margin-bottom:15px;
}

/* Base del botón: convertimos el cuadrado en la silueta “tag” */
.jt-filechip .chip-remove{
  --s: var(--jt-chip-remove-scale, 1);

  position: relative;
  display: inline-block;
  width: calc(32px * var(--s));
  height: calc(22px * var(--s));
  min-width: calc(32px * var(--s));
  flex: 0 0 auto;

  padding: 0 !important;
  border: 0 !important;
  margin-left: 6px;
  margin-right: 8px;
  cursor: pointer;

  /* color del tag (fondo) y del hover */
  background-color: var(--jt-secondary) !important;

  /* ocultar cualquier “×” textual previa */
  font-size: 0; line-height: 0;

  /* Silueta “tag” como máscara (compatible modernos) */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 22'><path fill='%23000' d='M32 3.55556C32 1.59444 30.4056 0 28.4444 0L11.4056 0C10.4611 0 9.55556 0.372222 8.88889 1.03889L0.522222 9.41111C0.188889 9.74444 0 10.1944 0 10.6667C0 11.1389 0.188889 11.5889 0.522222 11.9222L8.88889 20.2944C9.55556 20.9611 10.4611 21.3333 11.4056 21.3333L28.4444 21.3333C30.4056 21.3333 32 19.7389 32 17.7778V3.55556Z'/>\</svg>");
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: 100% 100%;
      -webkit-mask-position: center;
              mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 22'><path fill='%23000' d='M32 3.55556C32 1.59444 30.4056 0 28.4444 0L11.4056 0C10.4611 0 9.55556 0.372222 8.88889 1.03889L0.522222 9.41111C0.188889 9.74444 0 10.1944 0 10.6667C0 11.1389 0.188889 11.5889 0.522222 11.9222L8.88889 20.2944C9.55556 20.9611 10.4611 21.3333 11.4056 21.3333L28.4444 21.3333C30.4056 21.3333 32 19.7389 32 17.7778V3.55556Z'/>\</svg>");
          mask-repeat: no-repeat;
          mask-size: 100% 100%;
          mask-position: center;
}

/* La “X” blanca centrada, usando otra máscara encima */
.jt-filechip .chip-remove::after{
  content: "";
  position: absolute; inset: 0;
  background: #fff; /* color de la equis */

  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 22'><path fill='%23000' d='M15.0556 6.16667C15.5778 5.64444 16.4222 5.64444 16.9389 6.16667L19.55 8.77778L22.1611 6.16667C22.6833 5.64444 23.5278 5.64444 24.0444 6.16667C24.5611 6.68889 24.5667 7.53333 24.0444 8.05L21.4333 10.6611L24.0444 13.2722C24.5667 13.7944 24.5667 14.6389 24.0444 15.1556C23.5222 15.6722 22.6778 15.6778 22.1611 15.1556L19.55 12.5444L16.9389 15.1556C16.4167 15.6778 15.5722 15.6778 15.0556 15.1556C14.5389 14.6333 14.5333 13.7889 15.0556 13.2722L17.6667 10.6611L15.0556 8.05C14.5333 7.52778 14.5333 6.68333 15.0556 6.16667Z'/>\</svg>");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: center;
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 22'><path fill='%23000' d='M15.0556 6.16667C15.5778 5.64444 16.4222 5.64444 16.9389 6.16667L19.55 8.77778L22.1611 6.16667C22.6833 5.64444 23.5278 5.64444 24.0444 6.16667C24.5611 6.68889 24.5667 7.53333 24.0444 8.05L21.4333 10.6611L24.0444 13.2722C24.5667 13.7944 24.5667 14.6389 24.0444 15.1556C23.5222 15.6722 22.6778 15.6778 22.1611 15.1556L19.55 12.5444L16.9389 15.1556C16.4167 15.6778 15.5722 15.6778 15.0556 15.1556C14.5389 14.6333 14.5333 13.7889 15.0556 13.2722L17.6667 10.6611L15.0556 8.05C14.5333 7.52778 14.5333 6.68333 15.0556 6.16667Z'/>\</svg>");
          mask-repeat: no-repeat;
          mask-size: 100% 100%;
          mask-position: center;
}

/* Hover: solo cambia el color del tag, la X queda blanca */
.jt-filechip .chip-remove:hover{
  background-color: var(--jt-secondary-hover, var(--jt-light-secondary, #FF84A4)) !important;
}

/* Foco accesible (halo suave, no deforma el tag) */
.jt-filechip .chip-remove:focus{
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,21,82,.25);
  border-radius: 6px; /* halo, no afecta la máscara */
}

/* === Botón reset en tarjetas de posición (tag <| x |>) === */
.pos-step-card { position: relative; } /* ancla para el absoluto */

.pos-step-card .pos-reset-btn{
  --s: var(--jt-remove-tag-scale, 1.0); /* 1 = 32x22px */

  position: absolute;
  top: 50%;
  right: -12px;
  transform: translateY(-50%);
  width: calc(32px * var(--s));
  height: calc(22px * var(--s));
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important; /* color lo da el SVG */
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 5;
}

.pos-step-card .pos-reset-btn svg{ width:100%; height:100%; display:block; }
.pos-step-card .pos-reset-btn .tag-fill{ fill: var(--jt-secondary); }
.pos-step-card .pos-reset-btn:hover .tag-fill{ fill: var(--jt-secondary-hover, #FF84A4); }
.pos-step-card .pos-reset-btn .x-fill{ fill:#fff; }

#pos-subnav{
  display:none;
}

.jt_calc_wrapper .btn{
  text-transform: none !important;
}

#content-wrapper .nav-link, .product-tabcontent .product-tabs-list .nav-link, #columns_inner .product-tabcontent .nav-item .nav-link{
  margin-right: 0px !important;
  margin-inline-end: 0px !important;
}

.jt_calc_wrapper .product-tabcontent .product-tabs-list .nav-link,
.jt_calc_wrapper #columns_inner .product-tabcontent .nav-item .nav-link{
  margin-right: 0 !important;
  margin-inline-end: 0 !important;
}