/* Selector visual de presentaciones */

.ga-format-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 16px;
}

.ga-format-option {
    appearance: none;
    min-width: 76px;
    min-height: 46px;
    padding: 10px 15px;
    border: 1px solid #ccd5cf;
    border-radius: 8px;
    background: #fff;
    color: #24372d;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.ga-format-option:hover:not(:disabled) {
    border-color: #39734e;
    background: #f2f8f3;
}

.ga-format-option.is-selected {
    border: 2px solid #39734e;
    background: #edf7ef;
}

.ga-format-option:focus-visible {
    outline: 3px solid #39734e;
    outline-offset: 3px;
}

.ga-format-option:disabled {
    opacity: .4;
    cursor: not-allowed;
    text-decoration: line-through;
}

select.ga-original-format-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
}

@media (max-width: 600px) {
    .ga-format-options {
        gap: 8px;
    }

    .ga-format-option {
        min-width: 66px;
        min-height: 44px;
    }
}

/* Mantener visible el selector nativo como respaldo accesible. */
select.ga-original-format-select {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
    margin: 0 0 10px !important;
    padding: 8px 12px !important;
}

/* Botones como alternativa visual al desplegable original. */
.ga-format-options {
    margin-top: 4px;
}

/*
 * Presentaciones: interfaz principal con botones.
 * El select solo se oculta cuando JS confirma
 * que los botones se generaron correctamente.
 */
select.ga-original-format-select.ga-enhanced-ready:not(:focus) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
}

/* Alternativa accesible al navegar con teclado. */
select.ga-original-format-select.ga-enhanced-ready:focus {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
    clip-path: none !important;
    margin-bottom: 10px !important;
}