/* ==========================================================================
   sizeguide.css — Ventana "Tabla de talles" (tamaño intermedio, por encima de la página)
   ========================================================================== */

.size-guide-link { margin-top: .6rem; font-size: var(--fs-body); }
.size-guide-link[hidden] { display: none; }

.size-dialog {
  width: min(980px, calc(100% - 2rem));
  max-height: min(92vh, 860px);
  max-height: min(92svh, 860px);
  margin: auto;
  border-radius: var(--r-l);
  overflow: auto;
}

.size-dialog__body { padding: clamp(1.4rem, 3vw, 2.4rem); display: grid; gap: .5rem; }
.size-dialog h2 { font-size: var(--fs-h3); padding-right: 3.5rem; }
.size-dialog__model { color: var(--c-ink-soft); margin-bottom: .8rem; }

.size-dialog__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start; }

/* Foto con las medidas marcadas */
.size-dialog__figure { margin: 0; border-radius: var(--r-m); overflow: hidden; background: var(--c-cream); }
.size-dialog__figure svg { display: block; width: 100%; height: auto; }
.sg-halo { fill: none; stroke: var(--c-cream); stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.sg-line { fill: none; stroke: var(--c-olive-deep); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22 16; }
.sg-badge circle { fill: var(--c-olive-deep); stroke: var(--c-cream); stroke-width: 5; }
.sg-badge text { fill: var(--c-cream); font-family: var(--f-body); font-weight: 700; font-size: 40px; }

/* Leyenda */
.size-legend { display: grid; gap: .55rem; margin-bottom: 1.2rem; }
.size-legend li { display: flex; align-items: center; gap: .8rem; font-weight: 600; line-height: 1.3; }
.size-legend small { font-weight: 400; color: var(--c-ink-soft); font-size: var(--fs-small); }
.sg-letter {
  flex: none; display: inline-grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--c-olive-deep); color: var(--c-cream); font-weight: 700; font-size: var(--fs-small); line-height: 1;
}

/* Tabla */
.size-table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--r-s); }
.size-table { width: 100%; border-collapse: collapse; text-align: center; font-size: var(--fs-body); }
.size-table th, .size-table td { padding: .75rem .55rem; border-bottom: 1px solid var(--c-line); }
.size-table tbody tr:last-child th, .size-table tbody tr:last-child td { border-bottom: 0; }
.size-table thead th { background: var(--c-cream); }
.size-table thead th .sg-letter { vertical-align: middle; }
.size-table tbody th { font-weight: 700; background: var(--c-cream); }
.size-table td { font-variant-numeric: tabular-nums; }
.size-table .size-consult { text-align: left; font-size: var(--fs-small); color: var(--c-ink-soft); }
.size-table .size-consult a { font-weight: 600; color: var(--c-ink); }
.size-table tr.is-selected th, .size-table tr.is-selected td { background: var(--c-rose); font-weight: 700; }

.size-notes { margin-top: 1rem; display: grid; gap: .3rem; font-size: var(--fs-small); color: var(--c-ink-soft); }

@media (max-width: 760px) {
  .size-dialog { width: calc(100% - 1rem); max-height: calc(100vh - 1rem); max-height: calc(100svh - 1rem); }
  .size-dialog__grid { grid-template-columns: 1fr; }
  .size-dialog__figure { max-width: 420px; justify-self: center; width: 100%; }
}