/* ============================================================
   NEOPAC Calculadora de Costos — VERSION PARA SHOPIFY
   Igual que css/estilos.css, pero con TODOS los estilos
   encerrados bajo #neopac-calc para que no choquen con los
   estilos del tema de la tienda (ni los del tema con estos).
   Identidad: Morado #820AD1 · Montserrat · verde solo positivo.

   OJO CON LAS MEDIDAS: aqui los font-size van en PX, no en rem.
   El tema de la tienda define html { font-size: 10px } (el truco
   del 62.5%), asi que cualquier "rem" se encoge al 62.5% del
   tamano previsto y la calculadora se ve chiquita. En la version
   local (css/estilos.css) si se usan rem porque ahi la raiz es
   de 16px. Si algun dia conviertes estos px a rem, se vuelve a
   romper. Equivalencia usada: 1rem = 16px.
   ============================================================ */

#neopac-calc {
  /* Paleta NEOPAC (seccion 9.6 de la especificacion) */
  --morado:        #820AD1;
  --morado-oscuro: #6a08ab;
  --morado-suave:  #efd6ff;
  --verde:         #00C853;
  --verde-suave:   rgba(0, 200, 83, 0.14);
  --negro:         #1A1A2E;
  --gris:          #555577;
  --lavanda:       #F4F0F9;
  --blanco:        #ffffff;
  --rojo:          #d32f2f;
  --rojo-suave:    #fdecea;
  --ambar:         #b26a00;
  --ambar-suave:   #fff4e0;
  --borde:         #d9d4ea;
  --radio:         10px;
  --radio-boton:   2px;

  /* Base (antes estaba en body; aqui vive en el contenedor) */
  font-family: "Montserrat", "Segoe UI", sans-serif;
  background: var(--lavanda);
  color: var(--negro);
  line-height: 1.55;
  font-size: 16px;
  border-radius: var(--radio);
  /* clip (y no hidden): hidden convierte al contenedor en referencia de
     scroll y mata el position:sticky del panel de resultados. */
  overflow: hidden;
  overflow: clip;
}

#neopac-calc, #neopac-calc * { box-sizing: border-box; margin: 0; padding: 0; }

/* Blindaje: si el tema define [hidden] con otro display, respetamos
   el atributo hidden dentro de la calculadora pase lo que pase. */
#neopac-calc [hidden] { display: none !important; }

#neopac-calc .contenedor { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

#neopac-calc a { color: var(--morado); }

#neopac-calc h1, #neopac-calc h2, #neopac-calc h3 { font-weight: 800; line-height: 1.2; }

/* ----- Encabezado de la herramienta ----- */
#neopac-calc .encabezado { background: var(--blanco); border-bottom: 1px solid var(--borde); }

#neopac-calc .hero { padding: 24px 16px 28px; }
#neopac-calc .hero h1 { font-size: 25.6px; margin-bottom: 10px; }
#neopac-calc .hero .sub { color: var(--gris); max-width: 640px; }
#neopac-calc .vigencia { margin-top: 12px; font-size: 13.6px; color: var(--gris); }

/* ----- Pestañas de modo ----- */
#neopac-calc .tabs {
  display: flex;
  gap: 6px;
  margin: 20px auto 4px;
  overflow-x: auto;
  padding-bottom: 4px;
}

/* Nota: los "!important" de los controles son a proposito — con la
   especificidad del #id ganan incluso si el tema de la tienda usa
   !important en clases con el mismo nombre (.tab, .pill, .vista). */
#neopac-calc .tab {
  font-family: inherit !important;
  font-weight: 700;
  font-size: 15.68px !important;
  padding: 10px 14px;
  border: 1px solid var(--borde) !important;
  border-radius: var(--radio-boton);
  background: var(--blanco) !important;
  color: var(--gris) !important;
  cursor: pointer;
  white-space: nowrap;
  text-transform: none !important;
  letter-spacing: normal !important;
}

#neopac-calc .tab.activo { background: var(--morado) !important; border-color: var(--morado) !important; color: var(--blanco) !important; }

/* ----- Nivel: Sencilla o Experta ----- */
#neopac-calc .nivel {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}
#neopac-calc .nivel .nota { margin-top: 0; }

#neopac-calc .nivel-switch {
  display: inline-flex;
  border: 1.5px solid var(--borde);
  border-radius: 999px;
  background: var(--blanco);
  padding: 3px;
}
#neopac-calc .nivel-btn {
  font-family: inherit !important;
  font-weight: 700;
  font-size: 12.8px !important;
  padding: 6px 14px;
  border: none !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--gris) !important;
  cursor: pointer;
  text-transform: none !important;
  transition: background 0.25s ease, color 0.25s ease;
}
#neopac-calc .nivel-btn.activo { background: var(--morado) !important; color: var(--blanco) !important; }

/* En modo sencillo se esconden los campos de experto */
#neopac-calc.modo-sencillo [data-experto] { display: none !important; }

/* ----- Botón de ayuda "No entiendo la calculadora" ----- */
#neopac-calc .btn-ayuda {
  font-family: inherit !important;
  font-weight: 700;
  font-size: 14.72px !important;
  padding: 8px 16px;
  border: 1.5px solid var(--morado) !important;
  border-radius: 999px !important;
  background: var(--blanco) !important;
  color: var(--morado) !important;
  cursor: pointer;
  text-transform: none !important;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
#neopac-calc .btn-ayuda:hover { background: var(--morado-suave) !important; transform: translateY(-1px); }
#neopac-calc .btn-ayuda:active { transform: scale(0.97); }

/* ----- Glosario (el dialog vive FUERA de #neopac-calc) ----- */
dialog.glosario {
  width: min(760px, 92vw);
  max-height: 86vh;
  border: none;
  border-radius: 18px;
  padding: 0;
  color: #1A1A2E;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(26, 26, 46, 0.35);
  overflow: hidden;
  font-family: "Montserrat", "Segoe UI", sans-serif;
}
dialog.glosario::backdrop { background: rgba(26, 26, 46, 0.55); }
dialog.glosario * { box-sizing: border-box; margin: 0; padding: 0; }

dialog.glosario .glosario-cabeza {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 12px;
  background: linear-gradient(135deg, #2a1745, #820AD1);
  color: #ffffff;
}
dialog.glosario .glosario-cabeza h2 { font-size: 21.6px; color: #ffffff; font-weight: 800; }
dialog.glosario .glosario-cerrar {
  font-family: inherit; font-size: 19.2px; font-weight: 700;
  width: 38px; height: 38px; flex: none;
  border: none; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  cursor: pointer;
}
dialog.glosario .glosario-cerrar:hover { background: rgba(255, 255, 255, 0.32); }

dialog.glosario .glosario-intro { padding: 14px 24px 0; color: #555577; font-size: 15.2px; }

dialog.glosario .glosario-buscar {
  width: calc(100% - 48px);
  margin: 12px 24px 4px;
  padding: 12px 14px;
  font-family: inherit; font-size: 16px;
  border: 1.5px solid #d9d4ea;
  border-radius: 999px;
  background: #F4F0F9;
  color: #1A1A2E;
}
dialog.glosario .glosario-buscar:focus { outline: 2px solid #820AD1; border-color: #820AD1; }

dialog.glosario #glosario-cuerpo { padding: 8px 24px 24px; overflow-y: auto; max-height: 56vh; }

dialog.glosario .glosario-grupo { margin-top: 20px; }
dialog.glosario .glosario-grupo h3 {
  font-size: 12.48px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.2px;
  color: #820AD1;
  padding-bottom: 6px;
  border-bottom: 2px solid #efd6ff;
}
dialog.glosario .glosario-item { padding: 14px 0; border-bottom: 1px solid #F4F0F9; }
dialog.glosario .glosario-item h4 { font-size: 16.32px; font-weight: 800; margin-bottom: 4px; }
dialog.glosario .glosario-item p { font-size: 15.2px; color: #555577; line-height: 1.5; }
dialog.glosario .glosario-ojo { margin-top: 6px; color: #1A1A2E !important; }
dialog.glosario .glosario-ojo strong { color: #820AD1; }
dialog.glosario .glosario-vacio { padding: 24px 0; color: #555577; }

/* ----- Aviso al entrar al modo Experta ----- */
#neopac-calc .aviso-experta {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translate(-50%, 140%);
  z-index: 60;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  max-width: min(560px, 92vw);
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #2a1745, var(--morado));
  color: var(--blanco);
  box-shadow: 0 18px 50px rgba(130, 10, 209, 0.45);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
  pointer-events: none;
}
#neopac-calc .aviso-experta.visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
#neopac-calc .aviso-experta strong { font-size: 16px; display: block; }
#neopac-calc .aviso-experta span { font-size: 14.08px; opacity: 0.85; flex: 1 1 200px; }
#neopac-calc .aviso-experta button {
  font-family: inherit !important; font-weight: 700; font-size: 14.4px !important;
  padding: 8px 14px; border: none !important; border-radius: 999px !important;
  background: var(--blanco) !important; color: var(--morado) !important;
  cursor: pointer; flex: none;
}

/* Resalte momentáneo de las secciones que acaban de aparecer */
#neopac-calc .avanzado.recien-abierto {
  border-radius: var(--radio);
  animation: neopac-latido-nuevo 1.3s ease-in-out 2;
}
@keyframes neopac-latido-nuevo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(130, 10, 209, 0); background: transparent; }
  50%      { box-shadow: 0 0 0 6px rgba(130, 10, 209, 0.14); background: rgba(130, 10, 209, 0.05); }
}

/* ----- Pills de plataforma ----- */
#neopac-calc .pills { display: flex; gap: 6px; margin: 16px 0; flex-wrap: wrap; }

#neopac-calc .pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: inherit !important;
  font-weight: 700;
  font-size: 14.72px !important;
  padding: 8px 12px;
  border: 1.5px solid var(--borde) !important;
  border-radius: 999px !important;
  background: var(--blanco) !important;
  color: var(--gris) !important;
  cursor: pointer;
  text-transform: none !important;
}

/* Puntito con el color de cada plataforma */
#neopac-calc .pill::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none; }
#neopac-calc .pill[data-plat="ml"]::before     { background: #ffe600; box-shadow: inset 0 0 0 1px #d6c200; }
#neopac-calc .pill[data-plat="amazon"]::before { background: #ff9900; }
#neopac-calc .pill[data-plat="tiktok"]::before { background: linear-gradient(135deg, #25f4ee 0%, #fe2c55 100%); }

/* Activa: tinte ligero del color de la marca */
#neopac-calc .pill.activo[data-plat="ml"]     { background: #fff9d6 !important; border-color: #d6c200 !important; color: #5c5200 !important; }
#neopac-calc .pill.activo[data-plat="amazon"] { background: #fff1dd !important; border-color: #ff9900 !important; color: #7a4a00 !important; }
#neopac-calc .pill.activo[data-plat="tiktok"] { background: #ffe9ee !important; border-color: #fe2c55 !important; color: #8c1030 !important; }

/* ----- Tarjetas ----- */
#neopac-calc .tarjeta {
  background: var(--blanco) !important;
  border-radius: var(--radio);
  border: 1px solid var(--borde) !important;
  padding: 22px 18px;
  margin-bottom: 16px;
  color: var(--negro) !important;
}

#neopac-calc .tarjeta h2 { font-size: 17.6px; margin-bottom: 14px; }

#neopac-calc .dos-columnas { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }

/* Los hijos de un grid NO se encogen por default (min-width:auto):
   la fila de burbujas (~1,130px sin envolver) inflaba la tarjeta a
   1,162px y el overflow:clip del contenedor CORTABA media
   calculadora en el celular. Con esto todo se encoge a su columna
   y lo ancho hace scroll propio. */
#neopac-calc .dos-columnas > * { min-width: 0; }
#neopac-calc .fila-campos > * { min-width: 0; }
#neopac-calc .chips-productos { max-width: 100%; }

/* ----- Campos ----- */
#neopac-calc .campo { margin-bottom: 14px; }

#neopac-calc .campo label, #neopac-calc .etiqueta-check {
  display: block;
  font-weight: 700;
  font-size: 15.2px;
  margin-bottom: 5px;
  color: var(--negro);
  text-transform: none;
  letter-spacing: normal;
}

#neopac-calc .campo input:not([type="range"]):not([type="checkbox"]), #neopac-calc .campo select {
  width: 100% !important;
  padding: 11px 12px;
  border: 1.5px solid var(--borde) !important;
  border-radius: var(--radio-boton) !important;
  font-family: inherit !important;
  font-weight: 500;
  font-size: 17.92px !important;
  color: var(--negro) !important;
  background: var(--blanco) !important;
  max-width: none !important;
}

#neopac-calc .campo input:not([type="range"]):focus, #neopac-calc .campo select:focus {
  outline: 2px solid var(--morado);
  outline-offset: 1px;
  border-color: var(--morado);
}

/* ----- Deslizadores (sliders) ----- */
#neopac-calc input[type="range"].deslizador {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 8px !important;
  border: none !important;
  border-radius: 999px !important;
  background: #e6e0f2;   /* el relleno de color lo pinta ui.js (style inline) */
  outline: none;
  padding: 0 !important;
  margin: 12px 0 4px;
  cursor: pointer;
}
#neopac-calc .deslizador::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blanco);
  border: 3px solid var(--morado);
  box-shadow: 0 2px 8px rgba(26, 26, 46, 0.25);
  cursor: grab;
  transition: transform 0.15s ease;
}
#neopac-calc .deslizador::-webkit-slider-thumb:hover { transform: scale(1.12); }
#neopac-calc .deslizador:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.18); }
#neopac-calc .deslizador::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blanco);
  border: 3px solid var(--morado);
  box-shadow: 0 2px 8px rgba(26, 26, 46, 0.25);
  cursor: grab;
}
#neopac-calc .deslizador:focus-visible { outline: 2px solid var(--morado); outline-offset: 3px; }

/* Chip con el valor actual del deslizador */
#neopac-calc .valor-desliz {
  float: right;
  font-size: 14.4px !important;
  font-weight: 700;
  color: var(--blanco) !important;
  background: var(--morado);
  padding: 2px 10px;
  border-radius: 999px;
  transition: background 0.25s ease;
}

#neopac-calc .con-prefijo { display: flex; align-items: stretch; }
#neopac-calc .con-prefijo span {
  display: flex; align-items: center;
  padding: 0 10px;
  border: 1.5px solid var(--borde);
  border-right: none;
  border-radius: var(--radio-boton) 0 0 var(--radio-boton);
  background: var(--lavanda);
  font-weight: 700;
  color: var(--gris);
}
#neopac-calc .con-prefijo input { border-radius: 0 var(--radio-boton) var(--radio-boton) 0; }

#neopac-calc .fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

#neopac-calc .etiqueta-check {
  display: flex; align-items: center; gap: 8px;
  font-weight: 500; cursor: pointer; margin: 10px 0;
}
/* !important: la regla de '.campo input' arriba lleva width:100% !important
   y sin esto el checkbox de envio gratis se estira a todo el ancho. */
#neopac-calc .etiqueta-check input { width: 18px !important; height: 18px !important; accent-color: var(--morado); }

#neopac-calc .nota { font-size: 13.76px !important; color: var(--gris) !important; margin-top: 5px; }

#neopac-calc .tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--morado-suave);
  color: var(--morado);
  font-size: 11.2px; font-weight: 800;
  cursor: help;
  position: relative;
}

/* Globito del "?": la explicacion sale al acercar el cursor o al
   enfocar con teclado (en celular el toque abre el diccionario).
   El texto viene de data-tip (ui.js lo toma del title y las notas). */
#neopac-calc .tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  /* Alineado a la izquierda del "?" (no centrado): crece hacia
     adentro y no se recorta con el overflow:clip del contenedor */
  left: -6px;
  transform: translateY(4px);
  width: max-content;
  max-width: min(280px, 74vw);
  background: var(--negro);
  color: var(--blanco);
  font-size: 12.48px;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  padding: 8px 11px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(26, 26, 46, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
  z-index: 40;
  text-transform: none;
  letter-spacing: normal;
}
#neopac-calc .tip::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 3px);
  left: 3px;
  border: 5px solid transparent;
  border-top-color: var(--negro);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  pointer-events: none;
  z-index: 40;
}
#neopac-calc .tip:hover::after, #neopac-calc .tip:focus-visible::after,
#neopac-calc .tip:hover::before, #neopac-calc .tip:focus-visible::before {
  opacity: 1;
  visibility: visible;
}
#neopac-calc .tip:hover::after, #neopac-calc .tip:focus-visible::after { transform: translateY(0); }
#neopac-calc .tip:not([data-tip])::after, #neopac-calc .tip:not([data-tip])::before { display: none; }

/* ----- Modo avanzado ----- */
#neopac-calc .avanzado {
  margin-top: 16px;
  border-top: 2px dashed var(--borde);
  padding-top: 12px;
}
#neopac-calc .avanzado summary {
  font-weight: 700; font-size: 14.4px;
  color: var(--morado);
  cursor: pointer;
  margin-bottom: 10px;
}

/* ----- Resultados: tarjeta oscura tipo "glass" con halo -----
   Los !important extra son porque la regla base de .tarjeta (y la
   de los temas de Shopify) tambien usa !important. */
#neopac-calc .tarjeta.resultados {
  position: sticky;
  top: 12px;
  z-index: 1;
  background: linear-gradient(165deg, #2a1745 0%, #1a1a2e 55%, #131322 100%) !important;
  border: 1px solid rgba(181, 102, 240, 0.35) !important;
  border-radius: 18px;
  color: #e6e1f5 !important;
  --halo: rgba(130, 10, 209, 0.3);
}

#neopac-calc .tarjeta.resultados::before {
  content: "";
  position: absolute;
  inset: -26px;
  z-index: -1;
  border-radius: 40px;
  background: radial-gradient(closest-side, var(--halo), transparent 72%);
  animation: neopac-respirar 4s ease-in-out infinite;
  pointer-events: none;
}

#neopac-calc .tarjeta.resultados.brillo-positivo { --halo: rgba(0, 200, 83, 0.26); border-color: rgba(0, 200, 83, 0.3) !important; }
#neopac-calc .tarjeta.resultados.brillo-negativo { --halo: rgba(211, 47, 47, 0.26); border-color: rgba(211, 47, 47, 0.32) !important; }

@keyframes neopac-respirar {
  0%, 100% { opacity: 0.55; transform: scale(0.97); }
  50%      { opacity: 0.9;  transform: scale(1.02); }
}

#neopac-calc .resultados .etiqueta-grande { color: #a79fce !important; }
#neopac-calc .resultados .numero-grande { color: var(--blanco) !important; text-shadow: 0 0 22px rgba(255, 255, 255, 0.18); }
#neopac-calc .resultados .numero-grande.negativo { color: #ff8a80 !important; text-shadow: 0 0 26px rgba(255, 60, 60, 0.3); }
#neopac-calc .resultados .linea-secundaria { color: #b9b2d8 !important; }
#neopac-calc .resultados .linea-secundaria strong { color: var(--blanco) !important; }
#neopac-calc .resultados .nota { color: #9b93c0 !important; }
#neopac-calc .resultados .separador { border-color: rgba(255, 255, 255, 0.12); }
#neopac-calc .resultados .tip { background: rgba(255, 255, 255, 0.12); color: #d9b3ff; }

#neopac-calc .resultados .vista {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #c9c2e6 !important;
}
#neopac-calc .resultados .vista.activo {
  background: rgba(130, 10, 209, 0.4) !important;
  border-color: #b566f0 !important;
  color: var(--blanco) !important;
}

#neopac-calc .resultados .chip-margen.verde    { background: rgba(0, 200, 83, 0.2);  color: #7cf2a8; }
#neopac-calc .resultados .chip-margen.amarillo { background: rgba(242, 169, 0, 0.2); color: #ffcf7a; }
#neopac-calc .resultados .chip-margen.rojo     { background: rgba(211, 47, 47, 0.24); color: #ff9d97; }

#neopac-calc .resultados .caja-incentivo {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
  color: #d9d3ee;
}

/* El desglose arranca doblado: el boton va en verde para que se
   note que ahi hay mas informacion esperando un clic */
#neopac-calc .resultados .cascada summary {
  display: inline-block;
  color: var(--verde);
  background: var(--verde-suave);
  border: 1.5px solid rgba(0, 200, 83, 0.5);
  border-radius: 999px;
  padding: 8px 16px;
}
#neopac-calc .resultados .cascada summary::after { content: "  ⌄"; }
#neopac-calc .resultados .cascada[open] summary::after { content: "  ⌃"; }
#neopac-calc .resultados #tabla-cascada td { border-bottom-color: rgba(255, 255, 255, 0.08); }
#neopac-calc .resultados #tabla-cascada tr.menos td:last-child { color: #9b93c0; }
#neopac-calc .resultados #tabla-cascada tr.subtotal td { border-top-color: rgba(255, 255, 255, 0.25); }
#neopac-calc .resultados #tabla-cascada tr.total td { border-top-color: rgba(255, 255, 255, 0.85); color: var(--blanco); }
#neopac-calc .resultados #tabla-cascada tr.ajuste td { color: #9b93c0; }

/* ----- Orbita de reparto: ¿a donde se va cada peso? ----- */
#neopac-calc .reparto { margin-top: 16px; }
#neopac-calc .reparto-titulo {
  font-size: 11.52px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: #a79fce; margin-bottom: 4px;
}
#neopac-calc .reparto-pista { text-transform: none; letter-spacing: 0; font-weight: 500; opacity: 0.7; }

#neopac-calc .orbita svg { width: 100%; height: auto; display: block; }

#neopac-calc .orbita .arco {
  fill: none;
  stroke-width: 26;
  cursor: pointer;
  transition: stroke-dasharray 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              stroke-dashoffset 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              stroke-width 0.2s ease, opacity 0.25s ease;
}
#neopac-calc .orbita .arco.resaltado { stroke-width: 33; }
#neopac-calc .orbita.atenuada .arco:not(.resaltado) { opacity: 0.35; }

/* Escala de morados para costos; verde SOLO en lo que te queda */
#neopac-calc .orbita .seg-plataforma { stroke: #c084f5; fill: none; }
#neopac-calc .orbita .seg-sat        { stroke: #9d6ae8; fill: none; }
#neopac-calc .orbita .seg-envio      { stroke: #7a56c2; fill: none; }
#neopac-calc .orbita .seg-otros      { stroke: #e879b0; fill: none; }
#neopac-calc .orbita .seg-producto   { stroke: #5b5378; fill: none; }
#neopac-calc .orbita .seg-utilidad   { stroke: var(--verde); fill: none; filter: drop-shadow(0 0 6px rgba(0, 200, 83, 0.45)); }
#neopac-calc .orbita .punto.seg-plataforma { fill: #c084f5; stroke: none; }
#neopac-calc .orbita .punto.seg-sat        { fill: #9d6ae8; stroke: none; }
#neopac-calc .orbita .punto.seg-envio      { fill: #7a56c2; stroke: none; }
#neopac-calc .orbita .punto.seg-otros      { fill: #e879b0; stroke: none; }
#neopac-calc .orbita .punto.seg-producto   { fill: #5b5378; stroke: none; }
#neopac-calc .orbita .punto.seg-utilidad   { fill: var(--verde); stroke: none; }

#neopac-calc .orbita .etiqueta-nombre { fill: #d9d3ee; font-size: 15.5px; font-weight: 700; }
#neopac-calc .orbita .etiqueta-pct    { fill: #9b93c0; font-size: 14px; font-weight: 500; }

/* Foco con teclado: mismo resalte que el hover */
#neopac-calc .orbita .arco:focus { outline: none; }
#neopac-calc .orbita .arco:focus-visible { stroke-width: 33; filter: brightness(1.25); }

/* Texto solo para lector de pantalla */
#neopac-calc .sr-solo {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

#neopac-calc .orbita .bolsa { fill: rgba(130, 10, 209, 0.18); stroke: #b566f0; stroke-width: 2; }
#neopac-calc .orbita .bolsa-solapa { stroke: #b566f0; stroke-width: 1.5; opacity: 0.6; }
#neopac-calc .orbita #orbita-monto { fill: var(--blanco); font-size: 22px; font-weight: 800; }
#neopac-calc .orbita #orbita-monto.negativo { fill: #ff8a80; }
#neopac-calc .orbita #orbita-etiqueta { fill: #a79fce; font-size: 11.5px; font-weight: 700; letter-spacing: 0.8px; }

#neopac-calc .vistas { display: flex; gap: 6px; margin-bottom: 16px; }
#neopac-calc .vista {
  flex: 1;
  font-family: inherit !important; font-weight: 700; font-size: 14.4px !important;
  padding: 9px 8px;
  border: 1.5px solid var(--borde) !important;
  border-radius: var(--radio-boton);
  background: var(--blanco) !important; color: var(--gris) !important;
  cursor: pointer;
  text-transform: none !important;
}
#neopac-calc .vista.activo { border-color: var(--morado) !important; background: var(--morado-suave) !important; color: var(--morado) !important; }

#neopac-calc .etiqueta-grande {
  font-size: 14.08px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--gris);
}

#neopac-calc .numero-grande {
  font-size: 49.6px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--negro);
  margin: 2px 0 6px;
}
#neopac-calc .numero-grande.negativo { color: var(--rojo); }

#neopac-calc .chip-margen {
  display: inline-block;
  font-size: 15.2px; font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}
#neopac-calc .chip-margen.verde    { background: var(--verde-suave); color: #00813a; }
#neopac-calc .chip-margen.amarillo { background: var(--ambar-suave); color: var(--ambar); }
#neopac-calc .chip-margen.rojo     { background: var(--rojo-suave);  color: var(--rojo); }

#neopac-calc .linea-secundaria { font-size: 16.8px; color: var(--gris); margin-bottom: 4px; }
#neopac-calc .linea-secundaria.chica { font-size: 14.4px; }

#neopac-calc .separador { border-top: 1px solid var(--borde); margin: 14px 0; }

/* ----- Alertas ----- */
#neopac-calc .alerta {
  font-size: 13.6px;
  font-weight: 500;
  padding: 10px 12px;
  border-radius: var(--radio-boton);
  margin: 8px 0;
  border-left: 4px solid;
}
#neopac-calc .alerta.rojo     { background: var(--rojo-suave);  border-color: var(--rojo);  color: #8c1d18; }
#neopac-calc .alerta.amarillo { background: var(--ambar-suave); border-color: var(--ambar); color: #7a4a00; }
#neopac-calc .alerta.info     { background: var(--lavanda);     border-color: var(--morado); color: var(--negro); }
#neopac-calc .alerta.verde    { background: var(--verde-suave); border-color: var(--verde); color: #00602b; }

#neopac-calc .caja-incentivo {
  font-size: 14.08px;
  background: var(--lavanda);
  border: 1px solid var(--borde);
  border-radius: var(--radio-boton);
  padding: 12px;
  margin: 10px 0;
}

/* ----- Recomendacion de empaque (buscador ¿Que vendes?) ----- */
#neopac-calc .reco-empaque {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 12px;
  border-radius: var(--radio);
  background: linear-gradient(135deg, var(--lavanda), var(--blanco) 70%);
  border: 1px solid var(--morado-suave);
  box-shadow: 0 6px 20px rgba(130, 10, 209, 0.12);
}
#neopac-calc .reco-empaque:not([hidden]) { animation: neopac-aparecer 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
#neopac-calc .reco-svg, #neopac-calc .reco-img { width: 84px !important; height: 84px; flex: none; filter: drop-shadow(0 4px 10px rgba(130, 10, 209, 0.25)); }
#neopac-calc .reco-img { border-radius: 10px; }
#neopac-calc .reco-img { object-fit: contain; }
#neopac-calc .reco-titulo { font-weight: 800; font-size: 15.2px; }
#neopac-calc .reco-detalle { font-size: 12.48px; color: var(--gris); margin-top: 2px; }
#neopac-calc .reco-detalle strong { color: var(--morado); }

/* ----- Grafica de ganancia proyectada (tarjeta CLARA minimalista) ----- */
#neopac-calc .tarjeta.grafica .reparto-titulo { color: var(--gris); }
#neopac-calc .tarjeta.grafica svg {
  width: 100%;
  max-width: 560px;
  height: auto;
  display: block;
  margin: 0 auto;
}

#neopac-calc .g-rejilla { stroke: #ece7f5; stroke-width: 1; }
/* 11px del viewBox ≈ 14px reales a 560px de ancho */
#neopac-calc .g-eje { fill: var(--gris); font-size: 11px; font-weight: 500; }
@media (max-width: 600px) {
  #neopac-calc .g-eje { font-size: 15px; }
}
#neopac-calc .g-area { opacity: 0.07; }
#neopac-calc .g-linea {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#neopac-calc .grafica-vacia { font-size: 14.4px; color: var(--ambar); padding: 18px 4px; }

#neopac-calc .leyenda-grafica {
  display: flex; flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 10px;
  font-size: 14.72px;
  color: var(--gris);
}
#neopac-calc .leyenda-grafica span { display: inline-flex; align-items: center; gap: 6px; }
#neopac-calc .leyenda-grafica strong { color: var(--negro); }
#neopac-calc .leyenda-grafica .g-pierde { opacity: 0.75; }
#neopac-calc .puntito-g { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* Aviso "pagas demasiado en embalaje" (promo NEOPAC) */
#neopac-calc .aviso-neopac {
  font-size: 13.12px !important;
  font-weight: 500;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: var(--radio-boton);
  background: linear-gradient(120deg, var(--morado-suave), var(--blanco));
  border-left: 4px solid var(--morado);
  color: var(--negro) !important;
}
#neopac-calc .aviso-neopac:not([hidden]) { animation: neopac-aparecer 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
#neopac-calc .aviso-neopac strong { color: var(--morado) !important; }

/* ----- Cascada ----- */
#neopac-calc .cascada { margin-top: 14px; }
#neopac-calc .cascada summary { font-weight: 700; font-size: 14.4px; color: var(--morado); cursor: pointer; }

#neopac-calc #tabla-cascada { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 15.36px; }
#neopac-calc #tabla-cascada td { padding: 6px 4px; border-bottom: 1px solid var(--lavanda); }
#neopac-calc #tabla-cascada td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
#neopac-calc #tabla-cascada tr.menos td:last-child { color: var(--gris); }
#neopac-calc #tabla-cascada tr.subtotal td { font-weight: 700; border-top: 1px solid var(--borde); }
#neopac-calc #tabla-cascada tr.total td {
  font-weight: 800; font-size: 16px;
  border-top: 2px solid var(--negro);
  color: var(--negro);
}
#neopac-calc #tabla-cascada tr.ajuste td { color: var(--gris); font-style: italic; }

/* ----- Comparador ----- */
#neopac-calc .tabla-scroll { overflow-x: auto; }

#neopac-calc .tabla-comparar { width: 100%; border-collapse: collapse; font-size: 16px; }
#neopac-calc .tabla-comparar th {
  text-align: left; font-size: 12.48px; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--gris);
  padding: 8px; border-bottom: 2px solid var(--borde);
}
#neopac-calc .tabla-comparar td { padding: 12px 8px; border-bottom: 1px solid var(--lavanda); font-variant-numeric: tabular-nums; }
#neopac-calc .tabla-comparar tr.mejor td { background: var(--verde-suave); font-weight: 700; }

#neopac-calc .punto-semaforo {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; margin-right: 6px;
}
#neopac-calc .punto-semaforo.verde    { background: var(--verde); }
#neopac-calc .punto-semaforo.amarillo { background: #f2a900; }
#neopac-calc .punto-semaforo.rojo     { background: var(--rojo); }

#neopac-calc .veredicto { margin-top: 14px; font-weight: 700; }

/* ----- Pie de la herramienta (aviso fiscal obligatorio) ----- */
#neopac-calc .pie {
  margin-top: 40px;
  background: var(--negro);
  color: #c9c4dd;
  padding: 28px 0 36px;
  font-size: 13.6px;
}
#neopac-calc .pie a { color: #d9b3ff; }
#neopac-calc .aviso-fiscal {
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radio-boton);
  padding: 14px;
  margin-bottom: 16px;
}
#neopac-calc .pie summary { cursor: pointer; font-weight: 700; margin-bottom: 8px; }
#neopac-calc .lista-fuentes { list-style: none; padding-left: 0; }
#neopac-calc .lista-fuentes li { margin: 5px 0; }
#neopac-calc .cta { margin-top: 18px; }
#neopac-calc .firma { margin-top: 14px; font-weight: 700; color: var(--blanco); }

/* ============================================================
   MOTION — micro-transiciones y animaciones de entrada
   ============================================================ */

#neopac-calc .tarjeta {
  box-shadow: 0 1px 2px rgba(26, 26, 46, 0.05), 0 8px 24px rgba(130, 10, 209, 0.07);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
#neopac-calc .tarjeta:hover {
  box-shadow: 0 2px 4px rgba(26, 26, 46, 0.06), 0 14px 34px rgba(130, 10, 209, 0.12);
}

#neopac-calc .tab, #neopac-calc .pill, #neopac-calc .vista {
  transition: background 0.25s ease, color 0.25s ease,
              border-color 0.25s ease, transform 0.15s ease,
              box-shadow 0.25s ease;
}
#neopac-calc .tab:hover, #neopac-calc .pill:hover, #neopac-calc .vista:hover { transform: translateY(-1px); }
#neopac-calc .tab:active, #neopac-calc .pill:active, #neopac-calc .vista:active { transform: scale(0.96); }
/* Acabado "glossy morado" (los !important le ganan a la base) */
#neopac-calc .tab.activo, #neopac-calc .nivel-btn.activo {
  background: linear-gradient(135deg, #9a2be0 0%, var(--morado) 55%, var(--morado-oscuro) 100%) !important;
  box-shadow: 0 6px 22px rgba(130, 10, 209, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
#neopac-calc .tab, #neopac-calc .nivel-btn { position: relative; overflow: hidden; }
#neopac-calc .tab::after, #neopac-calc .nivel-btn::after {
  content: "";
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
  pointer-events: none;
}
#neopac-calc .tab:hover::after, #neopac-calc .nivel-btn:hover::after { left: 125%; }

#neopac-calc .pill.activo { box-shadow: 0 4px 12px rgba(26, 26, 46, 0.14); }

#neopac-calc .campo input, #neopac-calc .campo select {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#neopac-calc .campo input:focus, #neopac-calc .campo select:focus {
  box-shadow: 0 0 0 4px rgba(130, 10, 209, 0.14);
}

#neopac-calc .zona-modos section:not([hidden]) {
  animation: neopac-aparecer 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes neopac-aparecer {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

#neopac-calc .tabla-comparar tr { transition: background 0.2s ease; }
#neopac-calc .tabla-comparar tbody tr:hover td { background: var(--lavanda); }
#neopac-calc .tabla-comparar tr.mejor td { box-shadow: inset 0 0 0 1px rgba(0, 200, 83, 0.35); }

/* Si la persona pidio menos movimiento, se respeta */
@media (prefers-reduced-motion: reduce) {
  #neopac-calc, #neopac-calc *, #neopac-calc *::before, #neopac-calc *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ----- Burbujas de producto (un toque elige, otro quita) ----- */
#neopac-calc .chips-productos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
#neopac-calc .chip-producto {
  font-family: inherit;
  font-size: 13.12px;
  font-weight: 700;
  color: var(--negro);
  background: var(--blanco);
  border: 1.5px solid var(--borde);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
#neopac-calc .chip-producto:hover { border-color: var(--morado); transform: translateY(-1px); }
/* En celular: una tira deslizable de un renglon, para no empujar
   los campos de precio media pantalla hacia abajo */
@media (max-width: 600px) {
  #neopac-calc .chips-productos {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
  #neopac-calc .chip-producto { flex: none; }
}
#neopac-calc .chip-producto.activo {
  background: var(--morado);
  border-color: var(--morado);
  color: var(--blanco);
}
#neopac-calc .chip-producto.activo::after { content: "  ✕"; opacity: 0.85; }

/* El ✕ de la tarjeta de recomendacion (quitar producto de un toque) */
#neopac-calc .reco-empaque { position: relative; }
#neopac-calc .reco-quitar {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--borde);
  border-radius: 50%;
  background: var(--blanco);
  color: var(--gris);
  font-family: inherit;
  font-size: 12.8px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
#neopac-calc .reco-quitar:hover { border-color: var(--rojo); color: var(--rojo); }

/* ----- Bloque NEOPAC en los resultados: tu ahorro real ----- */
#neopac-calc .bloque-neopac {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  padding: 16px;
  border-radius: var(--radio);
  background: linear-gradient(135deg, var(--morado-suave), var(--blanco) 75%);
  border: 1.5px solid rgba(130, 10, 209, 0.45);
  color: var(--negro);
}
#neopac-calc .bloque-neopac:empty { display: none; }
#neopac-calc .bn-img {
  width: 62px;
  height: 62px;
  flex: none;
  object-fit: contain;
  border-radius: 10px;
  filter: drop-shadow(0 4px 10px rgba(130, 10, 209, 0.3));
}
#neopac-calc .bn-textos { min-width: 0; }
#neopac-calc .bn-titulo { font-weight: 800; font-size: 15.2px; }
#neopac-calc .bn-grande { font-size: 16.8px; line-height: 1.4; margin-top: 4px; }
#neopac-calc .bn-grande strong { color: var(--morado); font-size: 21.6px; }
#neopac-calc .bn-grande.bn-parejo strong { font-size: 16.8px; }
#neopac-calc .bn-chico { font-size: 12.48px; color: var(--gris); font-weight: 500; }
#neopac-calc .bn-lista { margin: 6px 0 0 18px; font-size: 13.6px; color: var(--gris); }
#neopac-calc .bn-lista strong { color: var(--morado); }
#neopac-calc .bn-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#neopac-calc .bn-cta {
  display: inline-block;
  background: var(--morado);
  color: var(--blanco);
  font-weight: 800;
  font-size: 13.6px;
  text-decoration: none;
  border-radius: var(--radio-boton);
  padding: 8px 14px;
}
#neopac-calc .bn-cta:hover { background: var(--morado-oscuro); }
#neopac-calc .bn-cta.secundaria {
  background: var(--blanco);
  color: var(--morado);
  border: 1.5px solid var(--morado);
}

/* ----- Recorrido guiado ("No entiendo la calculadora") ----- */
#neopac-calc .tour-capa {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;   /* la pagina de atras sigue viva */
}
#neopac-calc .tour-capa[hidden] { display: none; }
/* La zona del paso se ilumina con un banito morado degradado y un
   marco; el resto de los bloques se atenua en gris. Son clases sobre
   los propios elementos (no un overlay fijo): el overlay se recortaba
   con el overflow:clip del contenedor y en la tienda no se veia. */
#neopac-calc .tour-resaltado {
  position: relative;
  z-index: 1;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(130, 10, 209, 0.16), rgba(130, 10, 209, 0.03) 70%);
  box-shadow: 0 0 0 3px var(--morado), 0 12px 34px rgba(130, 10, 209, 0.30);
  transition: box-shadow 0.25s ease, background 0.25s ease;
}
#neopac-calc .tour-atenuado {
  filter: grayscale(0.55) opacity(0.4);
  transition: filter 0.25s ease;
  pointer-events: none;
}
#neopac-calc .tour-tarjeta {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: min(480px, calc(100vw - 24px));
  background: var(--blanco);
  border: 2px solid var(--morado);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(26, 26, 46, 0.4);
  padding: 16px 18px 12px;
  pointer-events: auto;
}
#neopac-calc .tour-titulo { font-weight: 800; font-size: 17.6px; }
#neopac-calc .tour-texto { font-size: 15.2px; line-height: 1.5; color: var(--gris); margin-top: 4px; }
#neopac-calc .tour-botones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}
#neopac-calc .tour-contador { font-size: 12.8px; font-weight: 700; color: var(--gris); }
#neopac-calc .tour-btn {
  font-family: inherit;
  font-size: 14.4px;
  font-weight: 800;
  color: var(--negro);
  background: var(--blanco);
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-boton);
  padding: 8px 14px;
  cursor: pointer;
}
#neopac-calc .tour-btn.primario { background: var(--morado); border-color: var(--morado); color: var(--blanco); }
#neopac-calc .tour-btn.primario:hover { background: var(--morado-oscuro); }
#neopac-calc .tour-btn:disabled { opacity: 0.35; cursor: default; }
#neopac-calc .tour-pie {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  border-top: 1px solid var(--borde);
  padding-top: 8px;
}
#neopac-calc .tour-liga {
  font-family: inherit;
  font-size: 12.8px;
  font-weight: 700;
  color: var(--morado);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

/* ----- Casilla de seleccion SIEMPRE junto a su texto -----
   Flex a prueba de temas: el CSS de la tienda le metia display:block
   al input y la casilla quedaba volada en su renglon. Va como
   label.etiqueta-check para ganarle a ".campo label". */
#neopac-calc label.etiqueta-check {
  display: flex;
  align-items: center;
  gap: 8px;
}
#neopac-calc label.etiqueta-check input[type="checkbox"] {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: none;
  margin: 0;
  accent-color: var(--morado);
}

/* ----- Toggle dona/barras y la vista de barras ----- */
#neopac-calc .vistas-reparto { display: flex; gap: 6px; margin-bottom: 4px; }
#neopac-calc .vista-reparto {
  font-family: inherit;
  font-size: 12.48px;
  font-weight: 700;
  color: #c9c2e6;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
}
#neopac-calc .vista-reparto.activo {
  background: rgba(130, 10, 209, 0.4);
  border-color: #b566f0;
  color: var(--blanco);
}
#neopac-calc .barras-reparto { padding: 14px 4px 6px; }
#neopac-calc .fila-barra {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
#neopac-calc .barra-nombre { font-size: 12.48px; font-weight: 700; color: #c9c2e6; }
#neopac-calc .barra-pista {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  height: 12px;
  overflow: hidden;
  display: block;
}
#neopac-calc .barra { display: block; height: 100%; border-radius: 999px; }
#neopac-calc .barras-reparto .seg-plataforma { background: #c084f5; }
#neopac-calc .barras-reparto .seg-sat        { background: #9d6ae8; }
#neopac-calc .barras-reparto .seg-envio      { background: #7a56c2; }
#neopac-calc .barras-reparto .seg-otros      { background: #e879b0; }
#neopac-calc .barras-reparto .seg-producto   { background: #8d84ad; }
#neopac-calc .barras-reparto .seg-utilidad   { background: var(--verde); box-shadow: 0 0 8px rgba(0, 200, 83, 0.5); }
#neopac-calc .barra-monto { font-size: 13.12px; font-weight: 700; color: var(--blanco); white-space: nowrap; }
#neopac-calc .barra-monto em { font-style: normal; color: #c9c2e6; font-weight: 500; font-size: 11.52px; }

/* ----- Publicidad: pastillas de modo ($ fijo / ACOS / ROAS / ROI) ----- */
#neopac-calc .pub-modos { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
#neopac-calc .pub-modo {
  font-family: inherit;
  font-size: 12.48px;
  font-weight: 800;
  color: var(--gris);
  background: var(--blanco);
  border: 1.5px solid var(--borde);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  text-transform: none;
  letter-spacing: normal;
}
#neopac-calc .pub-modo:hover { border-color: var(--morado); }
#neopac-calc .pub-modo.activo {
  background: var(--morado);
  border-color: var(--morado);
  color: var(--blanco);
}
#neopac-calc .pub-equivalencias {
  font-size: 12.48px;
  color: var(--gris);
  margin-top: 6px;
  min-height: 1.2em;
}

/* Ligita sutil bajo la barrita de embalaje (zona verde): chiquita
   a proposito — informa sin gritar */
#neopac-calc .liga-micraje {
  display: inline-block;
  margin-top: 3px;
  font-size: 11.52px;
  font-weight: 600;
  color: var(--gris);
  text-decoration: underline dotted;
  opacity: 0.85;
}
#neopac-calc .liga-micraje::before { content: "⚠️ "; }
#neopac-calc .liga-micraje:hover { color: var(--morado); opacity: 1; }

/* ----- Archivero: hasta 5 productos guardados ----- */
#neopac-calc .btn-guardar {
  display: block;
  width: 100%;
  margin-top: 14px;
  font-family: inherit;
  font-size: 13.6px;
  font-weight: 700;
  color: #d9b3ff;
  background: none;
  border: 1.5px dashed rgba(255, 255, 255, 0.35);
  border-radius: var(--radio-boton);
  padding: 9px 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
  text-transform: none;
  letter-spacing: normal;
}
#neopac-calc .btn-guardar:hover { border-color: #b566f0; color: var(--blanco); }
#neopac-calc .btn-guardar:disabled { opacity: 0.55; cursor: default; }
#neopac-calc .lista-guardados { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
#neopac-calc .guardado-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.48px;
  font-weight: 700;
  color: var(--blanco);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 6px 12px;
}
#neopac-calc .guardado-chip em { font-style: normal; font-weight: 500; color: #c9c2e6; }
#neopac-calc .guardado-quitar {
  margin-left: auto;
  width: 22px;
  height: 22px;
  flex: none;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: var(--blanco);
  font-size: 11.2px;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
}
#neopac-calc .guardado-quitar:hover { background: var(--rojo); }
dialog.descarga .descarga-cuantos {
  font-size: 12.8px;
  font-weight: 700;
  color: var(--morado);
  background: var(--morado-suave);
  border-radius: var(--radio-boton);
  padding: 8px 10px;
  margin-bottom: 12px;
}

/* ----- Boton de descarga y su dialogo ----- */
#neopac-calc .btn-descarga {
  display: block;
  width: 100%;
  margin-top: 14px;
  font-family: inherit;
  font-size: 14.4px;
  font-weight: 800;
  color: var(--blanco);
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radio-boton);
  padding: 11px 14px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  text-transform: none;
  letter-spacing: normal;
}
#neopac-calc .btn-descarga:hover { background: rgba(130, 10, 209, 0.45); border-color: #b566f0; }

dialog.descarga {
  border: none;
  border-radius: var(--radio);
  padding: 20px 22px;
  width: min(430px, calc(100vw - 32px));
  box-shadow: 0 24px 70px rgba(26, 26, 46, 0.4);
  color: var(--negro);
}
dialog.descarga::backdrop { background: rgba(26, 26, 46, 0.55); }
dialog.descarga .descarga-intro { font-size: 14.4px; color: var(--gris); margin: 10px 0 12px; }
dialog.descarga .descarga-correo {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  padding: 11px 12px;
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-boton);
  margin-bottom: 10px;
  background: var(--blanco);
  color: var(--negro);
}
dialog.descarga .descarga-correo:focus { outline: none; border-color: var(--morado); }
dialog.descarga .descarga-acepto { font-size: 13.12px; font-weight: 500; color: var(--gris); align-items: flex-start; }
dialog.descarga .descarga-acepto input[type="checkbox"] { margin-top: 2px; }
dialog.descarga .descarga-error { margin-top: 10px; }
dialog.descarga .descarga-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  font-family: inherit;
  font-size: 15.2px;
  font-weight: 800;
  color: var(--blanco);
  background: var(--morado);
  border: none;
  border-radius: var(--radio-boton);
  padding: 12px 14px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
}
dialog.descarga .descarga-btn:hover { background: var(--morado-oscuro); }

dialog.descarga label.etiqueta-check { display: flex; gap: 8px; font-weight: 500; cursor: pointer; }
dialog.descarga label.etiqueta-check input[type="checkbox"] { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--morado); }

/* Estado ALERTA del bloque NEOPAC: margen apretado + bolsa cara */
#neopac-calc .bloque-neopac.urgente {
  background: linear-gradient(135deg, #fde4e1, var(--blanco) 75%);
  border-color: rgba(211, 47, 47, 0.6);
}
#neopac-calc .bloque-neopac.urgente .bn-titulo { color: var(--rojo); }

/* Estado SIMULANDO: ya trae los precios NEOPAC en las barritas */
#neopac-calc .bloque-neopac.simulando {
  background: linear-gradient(135deg, #e0f6e9, var(--blanco) 75%);
  border-color: rgba(0, 200, 83, 0.55);
}

/* El boton de simular/regresar comparte la pinta de los CTA */
#neopac-calc button.bn-cta {
  font-family: inherit;
  border: none;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
}
#neopac-calc button.bn-cta.secundaria { border: 1.5px solid var(--morado); }

/* El monto del ahorro NEOPAC va en verde: es dinero bueno */
#neopac-calc .bn-grande strong.bn-ahorro { color: #00a344; }

/* Las pestañas que NO estan activas van en rosa salmon: se notan
   como opciones sin competirle al morado. */
#neopac-calc .tab:not(.activo) {
  background: #fff4f0 !important;
  border-color: #ffc9b8 !important;
  color: #b3502e !important;
}
#neopac-calc .tab:not(.activo):hover { border-color: #ff8b6a !important; color: #93381c !important; }

/* "No entiendo la calculadora" en salmon y con dos latidos al cargar */
#neopac-calc .btn-ayuda {
  border: 2px solid #ff8b6a !important;
  background: linear-gradient(135deg, #fff1ec, #ffe1d5) !important;
  color: #b3502e !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(255, 122, 89, 0.3);
  animation: latido-ayuda 1.6s ease 0.8s 2;
}
#neopac-calc .btn-ayuda:hover { background: #ffd9c9 !important; }
@keyframes latido-ayuda {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}

/* Las pestañas ya no cortan palabras: se reparten el ancho y el
   texto envuelve en vez de recortarse */
#neopac-calc .tabs { overflow-x: visible; }
#neopac-calc .tab {
  white-space: normal !important;
  flex: 1 1 0;
  text-align: center;
  line-height: 1.25;
}

/* El dialogo de descarga vive FUERA de #neopac-calc: las variables
   del tema no llegan y salia oscuro con recuadros invisibles
   (feedback real de un amigo de Humbi). Se le da su propia paleta
   y fondo blanco explicito. */
dialog.descarga {
  --morado: #820AD1;
  --morado-oscuro: #6a08ab;
  --morado-suave: #efd6ff;
  --verde: #00C853;
  --negro: #1A1A2E;
  --gris: #555577;
  --lavanda: #F4F0F9;
  --blanco: #ffffff;
  --rojo: #d32f2f;
  --rojo-suave: #fdecea;
  --borde: #d9d4ea;
  --radio: 10px;
  --radio-boton: 2px;
  background: #ffffff;
  color: #1A1A2E;
  font-family: "Montserrat", "Segoe UI", sans-serif;
}
dialog.descarga .descarga-correo {
  background: #F4F0F9;
  border: 2px solid #d9d4ea;
}
dialog.descarga .descarga-correo:focus { background: #ffffff; }

/* ----- Aire: mas espacio y blancos entre secciones -----
   Pedido de Humbi: la informacion estaba muy compactada. */
#neopac-calc .tarjeta { padding: 26px 24px; }
#neopac-calc .campo { margin-bottom: 20px; }
#neopac-calc .campo label { margin-bottom: 7px; line-height: 1.35; }
#neopac-calc .fila-campos { gap: 14px 12px; }
#neopac-calc .dos-columnas { gap: 24px; }
#neopac-calc .tarjeta h2 { margin-bottom: 18px; }
#neopac-calc .campos-plataforma { margin: 18px 0; padding: 16px 14px; }
#neopac-calc .reparto { margin-top: 26px; }
#neopac-calc .bloque-neopac { margin-top: 24px; }
#neopac-calc .cascada { margin-top: 24px; }
#neopac-calc .btn-guardar { margin-top: 22px; }
#neopac-calc #res-alertas .alerta { margin-top: 10px; }

/* Publicidad: barrita + campo numerico para valores quirurgicos */
#neopac-calc .pub-ads { font-weight: 500; color: var(--gris); font-size: 13.12px; text-transform: none; }
#neopac-calc .pub-fila { display: flex; align-items: center; gap: 10px; }
#neopac-calc .pub-fila .deslizador { flex: 1 1 auto; min-width: 60px; }
/* Selector largo a proposito: empata a ".campo input:not(...)" que
   le metia width:100% y aplastaba el deslizador a 0 (bug del
   circulito huerfano) */
#neopac-calc .campo .pub-fila input.pub-num {
  width: 92px;
  flex: 0 0 92px;
  font-family: inherit;
  font-size: 15.2px;
  font-weight: 700;
  text-align: right;
  padding: 8px 10px;
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-boton);
  background: var(--blanco);
  color: var(--negro);
}
#neopac-calc .campo .pub-fila input.pub-num:focus { outline: none; border-color: var(--morado); }

/* ----- Barra fija en celular: tu resultado siempre a la vista ----- */
#neopac-calc .barra-movil {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  align-items: center;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(135deg, #241a3f, var(--negro));
  color: var(--blanco);
  box-shadow: 0 -8px 30px rgba(26, 26, 46, 0.4);
}
#neopac-calc .bm-etiqueta {
  font-size: 11.2px;
  font-weight: 700;
  color: #c9c2e6;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
#neopac-calc .barra-movil strong { font-size: 20.8px; font-weight: 800; }
#neopac-calc .barra-movil strong.negativo { color: #ff8a80; }
#neopac-calc #bm-ir {
  margin-left: auto;
  font-family: inherit;
  font-size: 12.8px;
  font-weight: 800;
  color: var(--blanco);
  background: var(--morado);
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
}

/* ----- Celular chico: campos en una sola columna ----- */
@media (max-width: 479px) {
  #neopac-calc .fila-campos { grid-template-columns: 1fr; }
  #neopac-calc .tarjeta { padding: 16px; }
}

@media (max-width: 759px) {
  #neopac-calc .barra-movil.visible { display: flex; }
}

/* Badge GRATIS en el menu de la tienda, como el de "Mas vendida".
   OJO: esta hoja solo carga en la pagina de la calculadora; para que
   el badge salga en TODO el sitio, pegar el contenido de
   SUBIR-A-SHOPIFY/6-badge-gratis/CSS-PARA-EL-MENU.txt en
   Personalizar -> Configuracion del tema -> CSS personalizado. */
.nh-nav a[href*="calculadora-de-costos"]::after {
  content: "GRATIS";
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #820AD1;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

/* ----- Pantallas medianas y grandes ----- */
@media (min-width: 760px) {
  #neopac-calc .hero h1 { font-size: 35.2px; }
  #neopac-calc .dos-columnas { grid-template-columns: 1fr 1fr; }
  #neopac-calc .fila-campos { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}