/* ANHELO SIZE ASSISTANT - CSS v5
   Ajuste final: más aire interno, mejor legibilidad y estética integrada
*/

/* Oculta el marcador que se pega en la descripción */
.anhelo-size-config {
  display: none !important;
}

/* Contenedor general */
.anhelo-size-advisor {
  width: 100% !important;
  margin: 18px 0 22px !important;
  padding: 0 !important;
  background: transparent !important;
  color: #3f3f3f !important;
  font-family: inherit !important;
  border: 0 !important;
}

.anhelo-size-advisor * {
  box-sizing: border-box;
  font-family: inherit;
}

/* Caja interna: borde sutil, no borde negro pesado */
.anhelo-size-advisor__inner {
  width: 100% !important;
  padding: 22px 22px 18px !important;
  border: 1px solid #d6d6d6 !important;
  border-radius: 4px !important;
  background: transparent !important;
}

/* Header */
.asa-header {
  margin: 0 0 17px !important;
}

.asa-eyebrow {
  margin: 0 0 8px !important;
  color: #777 !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}

.asa-header h3 {
  margin: 0 0 8px !important;
  color: #222 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.asa-header p {
  margin: 0 !important;
  max-width: 560px !important;
  color: #555 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  opacity: 1 !important;
}

/* Grilla de campos */
.asa-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 13px 14px !important;
  margin-top: 16px !important;
}

.asa-grid label {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
  color: #333 !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}

/* Inputs */
.asa-input-wrapper {
  display: flex !important;
  align-items: center !important;
  height: 38px !important;
  min-height: 38px !important;
  border: 1px solid #d4d4d4 !important;
  border-radius: 4px !important;
  background: #fff !important;
  overflow: hidden !important;
  transition: border-color .15s ease !important;
}

.asa-input-wrapper:focus-within {
  border-color: #969696 !important;
}

.asa-input-wrapper input {
  width: 100% !important;
  height: 36px !important;
  padding: 0 12px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #333 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 36px !important;
}

.asa-input-wrapper input::placeholder {
  color: #9a9a9a !important;
  opacity: 1 !important;
}

.asa-input-wrapper span {
  flex: 0 0 auto !important;
  padding-right: 12px !important;
  color: #777 !important;
  font-size: 9px !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  opacity: 1 !important;
}

/* Selects */
.asa-grid select {
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 32px 0 12px !important;
  border: 1px solid #d4d4d4 !important;
  border-radius: 4px !important;
  outline: 0 !important;
  background-color: #fff !important;
  color: #333 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 38px !important;
  cursor: pointer !important;
  transition: border-color .15s ease !important;
}

.asa-grid select:focus {
  border-color: #969696 !important;
}

/* Botón */
.asa-button {
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  margin-top: 14px !important;
  padding: 0 16px !important;
  border: 1px solid #0f0f0f !important;
  border-radius: 4px !important;
  background: #0f0f0f !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 40px !important;
  letter-spacing: 0.18em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: opacity .15s ease !important;
}

.asa-button:hover {
  opacity: 0.88 !important;
}

/* Resultado */
.asa-result {
  margin-top: 14px !important;
  padding: 14px 15px !important;
  border: 1px solid #d4d4d4 !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #444 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

.asa-result p {
  margin: 0 0 8px !important;
}

.asa-result p:last-child {
  margin-bottom: 0 !important;
}

.asa-result strong {
  color: #222 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.asa-result small {
  color: #777 !important;
  font-size: 10px !important;
  opacity: 1 !important;
}

/* Aviso */
.asa-warning {
  margin: 10px 0 !important;
  padding: 10px 12px !important;
  border: 1px dashed #cfcfcf !important;
  border-radius: 4px !important;
  background: rgba(0, 0, 0, 0.025) !important;
  color: #555 !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
  opacity: 1 !important;
}

/* Disclaimer */
.asa-disclaimer {
  margin: 12px 0 0 !important;
  max-width: 590px !important;
  color: #686868 !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  opacity: 1 !important;
}

/* Mobile */
@media (max-width: 600px) {
  .anhelo-size-advisor {
    margin: 16px 0 20px !important;
  }

  .anhelo-size-advisor__inner {
    padding: 18px 16px 16px !important;
  }

  .asa-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .asa-header h3 {
    font-size: 15px !important;
  }
}

/* ANHELO SIZE SYSTEM - TABLA + ACCORDIONS */

.asa-fit-description {
  margin: 0 0 14px !important;
  color: #555 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

.asa-panel {
  border-top: 1px solid #e1e1e1 !important;
  padding: 0 !important;
}

.asa-panel:last-of-type {
  border-bottom: 1px solid #e1e1e1 !important;
}

.asa-panel summary {
  list-style: none !important;
  cursor: pointer !important;
  padding: 14px 0 !important;
  color: #333 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  position: relative !important;
}

.asa-panel summary::-webkit-details-marker {
  display: none !important;
}

.asa-panel summary::after {
  content: "+" !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #555 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

.asa-panel[open] summary::after {
  content: "–" !important;
}

.asa-panel-content {
  padding: 0 0 16px !important;
}

.asa-chart-wrap {
  width: 100% !important;
  overflow-x: auto !important;
  padding-bottom: 2px !important;
}

.asa-size-chart {
  width: 100% !important;
  border-collapse: collapse !important;
  background: #fff !important;
  color: #333 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.asa-size-chart th,
.asa-size-chart td {
  padding: 11px 10px !important;
  border-bottom: 1px solid #e1e1e1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-weight: 400 !important;
}

.asa-size-chart th:first-child,
.asa-size-chart td:first-child {
  text-align: left !important;
}

.asa-size-chart thead th {
  background: #9b9b9b !important;
  color: #111 !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.asa-size-chart tbody td:first-child {
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.asa-chart-note {
  margin: 12px 0 0 !important;
  padding: 11px 12px !important;
  border-radius: 4px !important;
  background: rgba(0, 0, 0, 0.025) !important;
  color: #686868 !important;
  font-size: 10px !important;
  line-height: 1.55 !important;
}

@media (max-width: 600px) {
  .asa-size-chart {
    min-width: 440px !important;
  }
}

/* ANHELO SIZE SYSTEM v2 - ajustes */
.anhelo-size-config,
.anhelo-size-config * {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.asa-panel + .asa-panel {
  margin-top: 0 !important;
}

.asa-panel:first-of-type .asa-panel-content {
  padding-bottom: 18px !important;
}

.asa-panel:last-of-type .asa-panel-content {
  padding-bottom: 16px !important;
}

/* ANHELO SIZE SYSTEM v3 - Mobile table fit
   Hace que la tabla entre completa en pantalla sin scroll horizontal.
*/

@media (max-width: 600px) {
  .asa-chart-wrap {
    width: 100% !important;
    overflow-x: visible !important;
    padding-bottom: 0 !important;
  }

  .asa-size-chart {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    font-size: 8px !important;
    line-height: 1.18 !important;
  }

  .asa-size-chart th,
  .asa-size-chart td {
    padding: 8px 2px !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    text-align: center !important;
  }

  .asa-size-chart th:first-child,
  .asa-size-chart td:first-child {
    width: 23% !important;
    text-align: left !important;
    padding-left: 4px !important;
    padding-right: 3px !important;
  }

  .asa-size-chart th:not(:first-child),
  .asa-size-chart td:not(:first-child) {
    width: auto !important;
  }

  .asa-size-chart thead th {
    font-size: 7px !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
  }

  .asa-size-chart tbody td:first-child {
    font-size: 7px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.02em !important;
  }

  .asa-chart-note {
    margin-top: 10px !important;
    font-size: 9px !important;
    line-height: 1.45 !important;
  }
}

@media (max-width: 380px) {
  .asa-size-chart {
    font-size: 7px !important;
  }

  .asa-size-chart th,
  .asa-size-chart td {
    padding: 7px 1px !important;
  }

  .asa-size-chart th:first-child,
  .asa-size-chart td:first-child {
    width: 21% !important;
    padding-left: 3px !important;
  }

  .asa-size-chart thead th,
  .asa-size-chart tbody td:first-child {
    font-size: 6.5px !important;
  }
}

/* ANHELO SIZE SYSTEM v4 - Mobile readable table
   En mobile convierte la tabla en lista vertical por talle.
   Esto permite ver todos los talles sin scroll horizontal y con texto legible.
*/

.asa-size-list-mobile {
  display: none !important;
}

@media (max-width: 600px) {
  .asa-chart-wrap {
    display: none !important;
  }

  .asa-size-list-mobile {
    display: block !important;
    width: 100% !important;
  }

  .asa-size-list-row {
    display: grid !important;
    grid-template-columns: 72px 1fr !important;
    gap: 10px !important;
    align-items: start !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #e1e1e1 !important;
  }

  .asa-size-list-row:first-child {
    border-top: 1px solid #e1e1e1 !important;
  }

  .asa-size-list-size {
    color: #222 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
  }

  .asa-size-list-measures {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px 10px !important;
    color: #333 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .asa-size-list-measures span {
    display: flex !important;
    justify-content: space-between !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  .asa-size-list-measures strong {
    color: #666 !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
  }

  .asa-chart-note {
    margin-top: 12px !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 380px) {
  .asa-size-list-row {
    grid-template-columns: 66px 1fr !important;
    gap: 8px !important;
  }

  .asa-size-list-size,
  .asa-size-list-measures {
    font-size: 11px !important;
  }

  .asa-size-list-measures strong {
    font-size: 9px !important;
  }
}

/* ANHELO SIZE SYSTEM v5 - Mobile table readable
   Mantiene la tabla horizontal en mobile, sin versión vertical,
   con tipografía más grande y legible.
*/

@media (max-width: 600px) {
  /* Volvemos a mostrar la tabla normal */
  .asa-chart-wrap {
    display: block !important;
    width: 100% !important;
    overflow-x: visible !important;
    padding-bottom: 0 !important;
  }

  /* Ocultamos la versión vertical/lista si existe */
  .asa-size-list-mobile {
    display: none !important;
  }

  .asa-size-chart {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  .asa-size-chart th,
  .asa-size-chart td {
    padding: 11px 4px !important;
    white-space: normal !important;
    text-align: center !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  .asa-size-chart th:first-child,
  .asa-size-chart td:first-child {
    width: 24% !important;
    text-align: left !important;
    padding-left: 7px !important;
    padding-right: 4px !important;
  }

  .asa-size-chart th:not(:first-child),
  .asa-size-chart td:not(:first-child) {
    width: 19% !important;
  }

  .asa-size-chart thead th {
    font-size: 10px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.02em !important;
    font-weight: 500 !important;
  }

  .asa-size-chart tbody td:first-child {
    font-size: 10px !important;
    line-height: 1.25 !important;
    letter-spacing: 0.04em !important;
    font-weight: 500 !important;
  }

  .asa-chart-note {
    margin-top: 12px !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 380px) {
  .asa-size-chart {
    font-size: 11px !important;
  }

  .asa-size-chart th,
  .asa-size-chart td {
    padding: 10px 3px !important;
    font-size: 11px !important;
  }

  .asa-size-chart th:first-child,
  .asa-size-chart td:first-child {
    width: 23% !important;
    padding-left: 6px !important;
  }

  .asa-size-chart th:not(:first-child),
  .asa-size-chart td:not(:first-child) {
    width: 19.25% !important;
  }

  .asa-size-chart thead th,
  .asa-size-chart tbody td:first-child {
    font-size: 9px !important;
  }
}

/* Para tablas con 5 o 6 talles, bajamos un poco sin hacer ilegible */
@media (max-width: 600px) {
  .asa-size-chart:has(th:nth-child(6)) th,
  .asa-size-chart:has(th:nth-child(6)) td {
    font-size: 10.5px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  .asa-size-chart:has(th:nth-child(6)) thead th,
  .asa-size-chart:has(th:nth-child(6)) tbody td:first-child {
    font-size: 8.5px !important;
  }
}