/* ========================================================
   GUÍA DE TALLAS — el popup del enlace "Guía de tallas" de la ficha.
   Ver inc/guia-tallas.php y js/guia-tallas.js.

   TODO el color, la fuente y los radios salen de los tokens de style.css
   (--mmc-*). No hay ni un hex suelto salvo los dos que ya eran excepción en el
   resto del tema (el negro del círculo numerado y el velo del overlay), para que
   cambiar un token siga cambiando también esta ventana.

   Dos formas para la misma ventana:
     · Escritorio — caja centrada, 33% del ancho y 80% del alto, como se pidió.
     · Móvil      — hoja que sube desde abajo ocupando el 80% del alto, el mismo
                    gesto que ya hace el bottom-sheet de las pestañas en la ficha
                    (.mmc-bottom-sheet-modal en css/single-producto.css). Se repite
                    ese lenguaje a propósito: en la misma página, dos paneles que
                    entran de forma distinta se leen como dos sistemas distintos.
   ======================================================== */

.mmc-gt-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 999999;              /* por encima del bottom-sheet de pestañas (999999) y del header */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: var(--mmc-fuente);
}
/* [hidden] no basta: el display:flex de arriba lo gana por especificidad y la ventana
   se quedaría visible al cargar la página. */
.mmc-gt-overlay[hidden] { display: none; }

.mmc-gt-caja {
    background: #fff;
    border-radius: var(--mmc-radio-grande);
    /* Ancho FIJO en px, no en %. Con el 33% la ventana se encogía al estrechar el navegador
       y el contenido se reacomodaba a cada paso; con una medida fija se ve igual en un
       portátil que en un monitor grande, y el único cambio de forma es el salto a móvil.
       Es seguro no poner tope: 600 + los 40 del padding del velo son 640px, por debajo de
       los 782px en los que ya ha entrado la vista de móvil. */
    width: 600px;
    height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,.18);
}

/* --- Cabecera: las dos solapas + la X --- */
.mmc-gt-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px 0;
    border-bottom: 1px solid var(--mmc-borde);
    flex-shrink: 0;
}
.mmc-gt-tabs { display: flex; gap: 22px; }

/* Solapa subrayada, no pastilla: es la forma que tienen las pestañas de la propia
   ficha de producto, y esta ventana se abre desde ahí. */
.mmc-gt-tab {
    background: none;
    border: none;
    padding: 0 0 12px;
    margin: 0;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: var(--mmc-lh-texto);
    color: var(--mmc-texto-suave);
    cursor: pointer;
    position: relative;
    transition: color .15s;
}
/* El celeste que salía al pulsar una solapa no era nuestro: lo pone Kadence sobre
   cualquier <button> al enfocarlo, y encima se sumaba el resaltado de selección de texto
   del doble clic. Se apaga fondo, sombra y borde en TODOS los estados —mismo remedio que
   ya se aplicó a .mmc-checkout-item-toggle en css/checkout-premium.css— y se marca
   user-select:none para que el texto de la solapa no se pueda seleccionar de pasada.
   La solapa activa se distingue por el subrayado y el color del texto, no por un fondo. */
.mmc-gt-tab,
.mmc-gt-tab:hover,
.mmc-gt-tab:focus,
.mmc-gt-tab:active,
.mmc-gt-tab.activa,
.mmc-gt-cerrar,
.mmc-gt-cerrar:hover,
.mmc-gt-cerrar:focus,
.mmc-gt-cerrar:active {
    background: none !important;
    /* El color va junto al fondo: Kadence pinta sus botones en blanco sobre color, así que
       apagando solo el fondo el texto se queda blanco sobre blanco y la solapa recién pulsada
       desaparece (el botón conserva el foco después del clic). */
    color: var(--mmc-texto-suave) !important;
    box-shadow: none !important;
    border: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;  /* el flash azul del toque en móvil */
    user-select: none;
    -webkit-user-select: none;
}

/* Quitar el outline a secas deja a quien navega con teclado sin saber dónde está. Se
   devuelve solo en :focus-visible, que el navegador enciende para el teclado y no para el
   clic — mismo criterio que .mmc-ben-ayuda en css/single-producto.css. */
.mmc-gt-tab:focus-visible,
.mmc-gt-cerrar:focus-visible {
    outline: 2px solid var(--mmc-enlace) !important;
    outline-offset: 2px;
}

.mmc-gt-tab:hover { color: var(--mmc-texto-fuerte) !important; }
.mmc-gt-tab.activa { color: var(--mmc-texto-fuerte) !important; }
/* El subrayado va en un ::after y no en border-bottom para que caiga SOBRE el borde
   de la cabecera en lugar de empujarlo y mover el texto 2px al activarse. */
.mmc-gt-tab.activa::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--mmc-texto-fuerte);
}

.mmc-gt-cerrar {
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    padding: 0 0 12px;
    cursor: pointer;
    color: var(--mmc-texto-tenue);
    transition: color .15s;
}
.mmc-gt-cerrar:hover { color: var(--mmc-texto-fuerte) !important; }

/* --- Cuerpo --- */
.mmc-gt-cuerpo {
    padding: 22px;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}
.mmc-gt-panel[hidden] { display: none; }

.mmc-gt-titulo {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 700;
    line-height: var(--mmc-lh-titulo);
    color: var(--mmc-texto-fuerte);
}
.mmc-gt-titulo-sep { margin-top: 32px; }

.mmc-gt-parrafo {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--mmc-texto);
}
.mmc-gt-parrafo-nota { color: var(--mmc-texto-suave); font-size: 13.5px; }

/* --- Los 3 pasos de "Cómo medir tu talla" --- */
/* Caja gris de fondo: la misma superficie que la caja de variaciones de la ficha, para
   que el bloque se lea como "material de apoyo" y no como contenido principal. */
.mmc-gt-pasos {
    background: var(--mmc-fondo-suave);
    border-radius: var(--mmc-radio);
    padding: 20px 18px;
}
/* 140px de columna y no los 96 de la referencia: las tres ilustraciones son apaisadas
   (Paso1.svg es de 394×133, casi 3:1) y a 96px el diagrama de la patilla bajaba a 32px de
   alto, con los números ya ilegibles. A 140 se leen y el texto sigue teniendo sitio de
   sobra dentro de una ventana del 33%. Son SVG, así que escalan sin perder filo. */
.mmc-gt-paso {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 16px;
    align-items: center;
}
.mmc-gt-paso + .mmc-gt-paso { margin-top: 24px; }

.mmc-gt-paso-titulo {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--mmc-texto-fuerte);
    /* El número no flota aparte: va dentro del párrafo para que, si el título ocupa
       tres líneas, el texto no se meta por debajo del círculo. */
    text-indent: -30px;
    padding-left: 30px;
}
.mmc-gt-paso-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--mmc-negro);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-indent: 0;
    vertical-align: -5px;
}
.mmc-gt-paso-detalle {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--mmc-texto-suave);
}

/* --- Figuras (las ilustraciones) --- */
.mmc-gt-figura img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}
/* Las figuras a todo el ancho se centran y se topan: el diagrama de la montura es
   apaisado y el de la tarjeta es casi cuadrado (1024×1024). Sin tope, ese segundo
   ocuparía él solo más de una pantalla de alto en móvil. */
.mmc-gt-figura-ancha { margin: 0 0 18px; }
.mmc-gt-figura-ancha img {
    border-radius: var(--mmc-radio);
    max-width: 420px;
    margin: 0 auto;
}
.mmc-gt-figura-tarjeta img { max-width: 300px; }

/* Hueco de una imagen que todavía no se ha subido: enseña el nombre de archivo que le
   toca. Ver mmc_gt_imagen() en inc/guia-tallas.php. */
.mmc-gt-figura-vacia {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    padding: 10px;
    border: 1px dashed var(--mmc-borde-medio);
    border-radius: var(--mmc-radio);
    background: #fff;
    text-align: center;
}
.mmc-gt-figura-vacia span {
    font-size: 11px;
    color: var(--mmc-texto-tenue);
    word-break: break-all;
}
.mmc-gt-figura-ancha.mmc-gt-figura-vacia { min-height: 180px; }

/* --- Bloque de la tarjeta de crédito --- */
/* La letra del método de la tarjeta, dentro de la celda de su talla. Pastilla y no texto
   suelto: así se lee como una etiqueta que remite a la imagen de arriba y no como parte
   del nombre de la talla. */
.mmc-gt-letra {
    display: inline-block;
    min-width: 20px;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: var(--mmc-radio-pildora);
    background: var(--mmc-seleccion-fondo);
    border: 1px solid var(--mmc-seleccion);
    color: var(--mmc-seleccion);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
}

.mmc-gt-lista-marco {
    margin: 0 0 16px;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--mmc-texto);
}
.mmc-gt-lista-marco li { margin-bottom: 4px; }

/* --- Tabla de tallas --- */
.mmc-gt-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.mmc-gt-tabla th,
.mmc-gt-tabla td {
    border: 1px solid var(--mmc-borde-fuerte);
    padding: 11px 14px;
    text-align: center;
}
.mmc-gt-tabla thead th {
    background: var(--mmc-fondo-gris);
    font-weight: 600;
    color: var(--mmc-texto-suave);
}
.mmc-gt-tabla td { color: var(--mmc-texto); }

/* --- Filas de medidas de la montura --- */
/* Zebra en vez de rejilla completa: con seis filas de tres columnas, las líneas
   verticales cortaban la lectura del texto descriptivo, que es lo más largo. */
.mmc-gt-medidas {
    border: 1px solid var(--mmc-borde-fuerte);
    border-radius: var(--mmc-radio);
    overflow: hidden;
}
.mmc-gt-medida {
    display: grid;
    grid-template-columns: 108px 1fr 76px;
    gap: 14px;
    align-items: center;
    padding: 16px 14px;
}
/* La clase la pone PHP contando solo las filas visibles — ver mmc_gt_panel_medidas().
   Con :nth-child, la fila oculta de "Ancho del marco" contaba igual y partía el ritmo. */
.mmc-gt-medida-rayada { background: var(--mmc-fondo-suave); }
.mmc-gt-medida + .mmc-gt-medida { border-top: 1px solid var(--mmc-borde); }
/* La fila "Ancho del marco" va oculta por pedido del usuario; el [hidden] del HTML ya
   la esconde, esto es el cinturón por si algún estilo heredado le devuelve un display. */
.mmc-gt-medida-oculta { display: none !important; }

.mmc-gt-medida-icono { text-align: center; }
.mmc-gt-figura-icono img { width: 100%; max-width: 76px; margin: 0 auto 6px; }
.mmc-gt-figura-icono.mmc-gt-figura-vacia { min-height: 44px; margin-bottom: 6px; }
.mmc-gt-medida-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mmc-texto-fuerte);
}
.mmc-gt-medida-texto {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--mmc-texto-suave);
}
.mmc-gt-medida-valor {
    text-align: right;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--mmc-texto-fuerte);
    white-space: nowrap;
}
.mmc-gt-asterisco { color: var(--mmc-texto-tenue); }

.mmc-gt-pie-nota {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--mmc-texto-tenue);
}

/* La rayita de arrastre solo existe en móvil. */
.mmc-gt-drag { display: none; }


/* ========================================================
   MÓVIL — hoja desde abajo, 80% del alto.
   El corte en 782px es el mismo que usa el bottom-sheet de las pestañas en
   css/single-producto.css; compartirlo evita el tramo en el que una pieza ya
   cambió de forma y la otra no.
   ======================================================== */
@media (max-width: 782px) {
    .mmc-gt-overlay {
        align-items: flex-end;
        justify-content: stretch;
        padding: 0;
    }

    .mmc-gt-caja {
        width: 100%;
        min-width: 0;
        max-width: none;
        height: 80vh;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -5px 25px rgba(0,0,0,.15);
        /* Entra desde abajo. Arranca fuera de pantalla y js/guia-tallas.js le pone
           .abierta en el frame siguiente, que es lo que dispara la transición. */
        transform: translateY(100%);
        transition: transform .35s cubic-bezier(.25,.8,.25,1);
    }
    .mmc-gt-caja.abierta { transform: translateY(0); }

    .mmc-gt-drag {
        display: block;
        width: 36px;
        height: 4px;
        margin: 10px auto 0;
        border-radius: 4px;
        background: var(--mmc-borde);
        flex-shrink: 0;
    }

    .mmc-gt-header { padding: 14px 18px 0; }
    .mmc-gt-tabs   { gap: 18px; }
    .mmc-gt-tab    { font-size: 14px; }
    .mmc-gt-cuerpo { padding: 18px; }

    /* Las ilustraciones de los pasos pasan a una banda arriba del texto: a 140px de
       columna, en una pantalla de teléfono el texto se quedaba sin sitio. */
    .mmc-gt-paso {
        grid-template-columns: 1fr;
        gap: 10px;
        align-items: start;
    }
    .mmc-gt-paso-figura img { max-width: 200px; }

    /* El valor baja bajo el texto en vez de pelear por una tercera columna. */
    .mmc-gt-medida {
        grid-template-columns: 84px 1fr;
        grid-template-areas:
            "icono texto"
            "icono valor";
        gap: 4px 12px;
        align-items: start;
    }
    .mmc-gt-medida-icono { grid-area: icono; align-self: center; }
    .mmc-gt-medida-texto { grid-area: texto; }
    .mmc-gt-medida-valor { grid-area: valor; text-align: left; }
}

/* Quien haya pedido menos movimiento en el sistema no tiene por qué ver la hoja
   deslizarse; la ventana sigue apareciendo, sin el viaje. */
@media (prefers-reduced-motion: reduce) {
    .mmc-gt-caja { transition: none; }
}