/* avisos.css — "Avisarme cuando vuelva" (fichas de carta y de producto agotados) */
.avs {
    --avs-ink: var(--ink, var(--tcg-text, #16151A));
    --avs-mute: var(--mute, var(--tcg-text-muted, #6B7280));
    --avs-line: var(--line, var(--tcg-border, #E5E7EB));
    --avs-accent: var(--accent, var(--tcg-primary, #C90101));
    --avs-accent-dk: var(--accent-dk, #9E0000);
    --avs-ok: var(--ok, #0F7B5A);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin: 12px 0 0; padding: 16px 18px; border: 1px solid var(--avs-line); border-radius: 14px; background: var(--white, var(--tcg-bg-card, #fff));
}
.avs__txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: .86rem; color: var(--avs-mute); line-height: 1.4; }
.avs__txt strong { color: var(--avs-ink); font-size: .98rem; font-weight: 600; font-family: var(--f-display, inherit); }
.avs__btn {
    flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px;
    border: 0; border-radius: 12px; background: var(--avs-accent); color: #fff; font: 600 .92rem var(--f-body, inherit);
    cursor: pointer; transition: background .15s; white-space: nowrap;
}
.avs__btn:hover:not(:disabled) { background: var(--avs-accent-dk); }
.avs__btn:disabled { opacity: .6; cursor: default; }
.avs__btn:focus-visible { outline: 2px solid var(--avs-accent); outline-offset: 2px; }
.avs.is-on { border-color: var(--avs-ok); background: #F0FAF6; }
.avs.is-on .avs__btn { background: transparent; color: var(--avs-ink); box-shadow: inset 0 0 0 1px var(--avs-line); opacity: 1; }
.avs.is-on .avs__btn:hover:not(:disabled) { background: rgba(0,0,0,.05); }
.avs-msg { margin: 0; font-size: .88rem; line-height: 1.45; }
.avs-msg:not(:empty) { margin-top: 12px; }
.avs-msg--ok { color: var(--ok, #0F7B5A); }
.avs-msg--err { color: #B91C1C; }
.avs-msg a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) { .avs { flex-direction: column; align-items: stretch; } }