/* Info-tooltip en Estilo */
.option.option-estilo { position: relative; }
.option.option-estilo > label{
  display: inline-flex; align-items: center; gap: 8px;
}

/* Contenedor del info */
.cj-info{ position: relative; display: inline-block; margin-left: 4px; z-index: 99999999999999999999999999999999999999999999999999999999999999999999999999 !important;}

/* Botón */
.cj-info__btn{
    border: 0;
    background: #ff151500;
    cursor: pointer;
    color: #dfe4ea;
    width: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: start;
    padding: 0;
}
.cj-info__btn i{ font-size: 16px; line-height: 1; }

/* Tarjeta */
.cj-info__card{
  position: absolute; top: 100%; right: 0; margin-top: 10px;
  width: min(460px, 90vw);
  background: #fff; color: #111;
  border: 1px solid #e5e7eb; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(2, 6, 23, .18);
  padding: 14px 14px 12px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 99999999999999999999999999999999999999999999999999999999999999999999999999 !important;
}

/* Mostrar por hover (desktop) o cuando tenga .is-open (móvil) */
.cj-info:hover .cj-info__card,
.cj-info.is-open .cj-info__card{
  opacity: 1; visibility: visible; transform: translateY(0);
  z-index: 99999999999999999999999999999999999999999999999999999999999999999999999999 !important;
}

/* Piquito */
.cj-info__card::before{
  content: ""; position: absolute; top: -8px; right: 14px;
  width: 14px; height: 14px; background: #fff;
  border-left: 1px solid #e5e7eb; border-top: 1px solid #e5e7eb;
  transform: rotate(45deg);
}

/* Tipografía interna */
.cj-info__card h4{
  margin: 2px 0 8px; font-weight: 800; color: #0f2d4c; font-size: 14px;
}
.cj-info__grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.cj-info__col strong{ display:block; margin-bottom:4px; font-weight:800; color:#0f2d4c; font-size:13px; }
.cj-info__col ul{
    margin: 0;
    padding-left: 16px;
    font-size: 12px;
    color: #0f2d4c;
    line-height: 1.35;
    font-weight: 600;
}

/* === Info-tooltip en Estilo (versión “a la derecha del icono”) === */

/* 1) Acerca el icono al label */
.option.option-estilo > label{
  display: inline-flex;
  align-items: center;
  gap: 4px;              /* antes 8px */
}
.cj-info{
  position: relative;
  display: inline-block;
  margin-left: 0;        /* antes 4px */
  z-index: 99999999999999999999999999999999999999999999999999999999999999999999999999 !important;
}

/* 2) Icono: sin cambios visuales en hover/focus */
.cj-info__btn{
    border: 0;
    background: #ff151500;
    cursor: pointer;
    color: #d3d3d3;
    font-size: 11px;
    margin-left: 5px;
    width: auto;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: start;
    padding: 0;
}
.cj-info__ico{
    fill: #c2c2c2 !important;
    width: 17px;
    height: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Mantén el mismo aspecto en hover/focus/active */
.cj-info__btn:hover,
.cj-info__btn:focus,
.cj-info__btn:active{
  color: #dfe4ea;
  background: transparent;
  outline: none;
  box-shadow: none;
  font-size: 11px;
}

/* 3) Tarjeta: a la DERECHA del icono, centrada verticalmente */
.cj-info__card{
  position: absolute;
  left: calc(100% + 10px);   /* a la derecha del icono */
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  width: min(460px, 90vw);

  background: #fff;
  color: #111;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(2, 6, 23, .18);
  padding: 14px 14px 12px;

  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 99999999999999999999999999999999999999999999999999999999999999999999999999 !important;
}

/* Mostrar por hover (desktop) o cuando tenga .is-open (móvil/clic) */
.cj-info:hover .cj-info__card,
.cj-info.is-open .cj-info__card{
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* 4) Piquito para el lateral izquierdo de la tarjeta (apuntando al icono) */
.cj-info__card::before{
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 14px; height: 14px;
  background: #fff;
  border-left: 1px solid #e5e7eb;
  border-top: 1px solid #e5e7eb;
}

/* 5) Tipografía interna (igual que antes) */
.cj-info__card h4{
  margin: 2px 0 8px;
  font-weight: 800;
  color: #0f2d4c;
  font-size: 14px;
}
.cj-info__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cj-info__col strong{
  display:block; margin-bottom:4px; font-weight:800; color:#0f2d4c; font-size:13px;
}
.cj-info__col ul{
  margin:0; padding-left:16px; font-size:12px; color:#334155; line-height:1.35;
}



.custom-options [aria-disabled="true"],
.custom-options .is-disabled { opacity:.45; pointer-events:none; }
.custom-options .opc-btn[disabled]{ opacity:.45; cursor:not-allowed; }
.custom-options .opc-note{ font-size:12px; color:#9aa3af; margin-left:6px; }






/* 6) Fallback responsive: en pantallas estrechas, colócala debajo del icono */
@media (max-width: 640px){
  .cj-info__card{
    left: 0;
    top: 100%;
    transform: translateY(6px);      /* aparece por debajo */
    width: min(420px, 92vw);
  }
  .cj-info__card::before{
    left: 18px;
    top: -8px;
    transform: rotate(45deg);        /* piquito arriba-izq */
  }
  .cj-info__grid{ grid-template-columns: 1fr; }
}


@media (max-width: 640px){
  .cj-info__grid{ grid-template-columns: 1fr; }
  .cj-info__card{ right:auto; left:0; }
  .cj-info__card::before{ right:auto; left:18px; }
}



/* =========================================================
   Guía de Tallas — estilo inspirado en email (card moderna)
   ========================================================= */

/* Asegura que el label de Talla esté visible y podamos añadir el botón */
.custom-options .option.option-talla > label{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Botón (Guía de tallas): fino y pequeño */
.option.option-talla .cj-size-guide .cj-info__btn{
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    color: #6b7280;
    text-decoration: underline;
    line-height: 1;
    letter-spacing: .01em;
}
.option.option-talla .cj-size-guide .cj-info__btn:hover{ color:#0b1b2f; }

/* ---------- CARD base ---------- */
.option.option-talla .cj-size-guide .cj-info__card{
  width: 520px;
  max-width: min(92vw, 520px);
  background: #ffffff;
  border: 1px solid #e6e6e6;             /* borde suave */
  border-radius: 10px;
  padding: 16px 16px 14px;
  overflow: hidden; /* respeta el redondeo en tabla */
}

/* “pico” que apunta al texto */
.option.option-talla .cj-size-guide .cj-info__card::before{
  content:"";
  position:absolute;
  width:12px; height:12px;
  background:#fff;
  transform: rotate(45deg);
  top:-6px;
  right: 24px; /* apunta al texto, ajustable */
  z-index: -1;
}

/* ---------- Cabecera de la card ---------- */
.cj-sg-head{
  text-align: left;
  margin-bottom: 10px;
}
.cj-sg-title{
  font-size: 16px;
  line-height: 1.3;
  font-weight: 800;
  color: #002041;
  margin: 0 0 4px 0;
}
.cj-sg-subtitle{
  font-size: 12px;
  line-height: 1.6;
  color: #555555;
}

/* ---------- Tabla tipo “email” ---------- */
.cj-sg-tablewrap{
  border: 1px solid #eeeeee;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

table.cj-sg-table{
  width: 100%;
  border-spacing: 0;
}

/* Encabezado */
.cj-sg-table thead th{
  background: #f3f4f6;                   /* gris claro como en el email */
  color: #002041;
  font-weight: 600;
  font-size: 12px;
  padding: 5px 10px;
  text-align: left;
}
/* Cuerpo */
.cj-sg-table tbody td{
  font-size: 12px;
  color: #002041;
  font-weight: 400;
  padding: 5px 10px;
}
/* Zebra */
.cj-sg-table tbody tr:nth-child(even){ background:#fafafa; }
.cj-sg-table tbody tr:last-child td{ border-bottom: none; }






/* ——— FIX: que todo el texto "(Guía de tallas)" sea clicable y esté encima ——— */
.option.option-talla .cj-size-guide{
  position: relative !important;
  z-index: 6 !important;
  margin-left: 5px;
}
.option.option-talla .cj-size-guide .cj-info__btn{
  width: auto !important;
  height: auto !important;
  display: inline !important;
  padding: 0 !important;
  line-height: 1.1 !important;
  vertical-align: baseline !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 7 !important; /* por encima de contiguos */
}

/* Evita que elementos adyacentes recorten o tapen el botón en móvil */
@media (max-width: 768px){
    
    /* Evita que padres con overflow: hidden recorten sombras o bordes */
  .custom-single-product,
  .variations.custom-options,
  .option.option-talla,
  .option.option-estilo,
  .option.option-manga{
    overflow: visible !important;
  }
  
  
  .option.option-talla,
  .variations.custom-options,
  .custom-single-product{
    overflow: visible !important;
  }
  
  .cj-info .cj-info__card{
    position: fixed !important;              /* anclada al viewport */
    left: var(--cj-left, 50%) !important;    /* lo calcula JS */
    top:  var(--cj-top, 0px) !important;     /* lo calcula JS */
    transform: translate(-50%, 0) !important;
    width: var(--cj-width, 90vw) !important; /* lo calcula JS (90vw por defecto) */
    max-width: var(--cj-width, 90vw) !important;
    max-height: var(--cj-maxh, 80vh) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 99999 !important;
  }
  .cj-info .cj-info__card::before{
    /* piquito apuntando al botón, JS pone --arrow-x en px desde el borde izq de la card */
    display: block !important;
    left: calc(var(--arrow-x, 50%) - 7px) !important; /* 7px = mitad del rombo 14px */
    top: -7px !important;
    transform: rotate(45deg) !important;
  }
}




/* ===== CJ FLOAT (CSS-only) — cj-wrap relativo + cj-label absoluto ===== */

/* ancla el posicionamiento */
.variations.custom-options .wapf-field-input .cj-wrap{
  position: relative !important;
  background: red !important;
}

/* coloca la etiqueta ENCIMA del input */
.variations.custom-options .wapf-field-input .cj-wrap > .cj-label{
    position: absolute !important;
    left: 12px;
    top: 9px;
    z-index: 2;
    font-size: 20px;
    font-weight: 400;
    color: #969ea9;
    background: #fff;
    padding: 0 6px;
    border-radius: 4px;
    line-height: 1;
    pointer-events: none;
    transition: top .18s ease, transform .18s ease, font-size .18s ease, color .18s ease;
}

/* deja aire para que el texto no choque con la etiqueta */
.variations.custom-options .wapf-field-input .cj-wrap > input,
.variations.custom-options .wapf-field-input .cj-wrap > textarea{
  padding-top: 1.9rem !important;
}

/* estado flotante:
   - cuando el wrapper tiene foco (focus-within)
   - o cuando el campo ya tiene valor (no está mostrando placeholder) */
.variations.custom-options .wapf-field-input .cj-wrap:focus-within > .cj-label,
.variations.custom-options .wapf-field-input .cj-wrap > input:not(:placeholder-shown) + .cj-label,
.variations.custom-options .wapf-field-input .cj-wrap > textarea:not(:placeholder-shown) + .cj-label{
  top: 6px;
  transform: translateY(-60%);
  font-size: 11px;
  color: #94a3b8;
}

/* nunca mostrar la label nativa de WAPF */
.wapf-field-label{ display:none !important; }




/* === Tooltips CJ - robustez de visibilidad y stacking === */
.cj-info {
    position: relative;
    display: inline-block;
    overflow: visible;
    z-index: 0;
    /* width: 100px; */
    height: 15px;
}

.cj-info__card {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 260px;
  max-width: 360px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;         /* evita “capturar” el hover mientras está oculta */
  z-index: 10000;               /* por encima de casi todo */
  will-change: opacity, transform;
}

/* Mostrar por hover, focus (teclado) o apertura por JS (.is-open) */
.cj-info:hover .cj-info__card,
.cj-info:focus-within .cj-info__card,
.cj-info.is-open .cj-info__card {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Evitar recortes por contenedores padres habituales */
.variations,
.variations .wapf-field-row,
.summary, .entry-summary,
.product, .product .summary {
  overflow: visible !important;
}

/* Asegura que nada tape la tarjeta */
.woocommerce div.product .summary * {
  position: relative;
  z-index: auto;
}