:where(.app-copy) {
    margin: -3px -6px;
    padding: 3px 6px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: inherit;
}

.app-copy {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
    cursor: copy;
    transition: background-color .15s ease, color .15s ease;
}

.app-copy:hover,
.app-copy:focus-visible {
    background: #e6edf5;
    color: #13304a;
    outline: none;
}

.app-copy:focus-visible {
    box-shadow: 0 0 0 2px #1d6fb8;
}

.app-copy-icon,
.app-copy-check {
    flex: 0 0 auto;
    color: #5b6b7c;
    opacity: 0;
    transition: opacity .15s ease;
}

.app-copy-check {
    display: none;
    color: #1d6236;
}

.app-copy:hover .app-copy-icon,
.app-copy:focus-visible .app-copy-icon {
    opacity: 1;
}

.app-copy.is-copied {
    background: #dcf1e3;
    color: #1d6236;
}

.app-copy.is-copied .app-copy-icon {
    display: none;
}

.app-copy.is-copied .app-copy-check {
    display: inline-block;
    opacity: 1;
}

.app-copy::after {
    content: 'Copiado';
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    padding: 3px 8px;
    border-radius: 6px;
    background: #13304a;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transform: translate(-50%, 4px);
    transition: opacity .15s ease, transform .15s ease;
}

.app-copy.is-copied::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
    .app-copy,
    .app-copy::after,
    .app-copy-icon {
        transition: none;
    }
}