/* App del comparador: «Avísame si baja», «Mis alertas» y aviso de instalar (js/app-comparador.js). */
:root { --cmp-brand: #0f59d4; --cmp-ink: #0f172a; --cmp-muted: #64748b; --cmp-line: #e2e8f0; }

/* Botón de la ficha */
.cmp-alert-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .625rem 1.25rem; border-radius: .75rem;
    border: 1px solid #cbd5e1; background: #fff; color: #334155; font-weight: 600; font-size: 1rem; line-height: 1.5; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s; }
.cmp-alert-btn:hover { background: #f8fafc; border-color: var(--cmp-brand); color: var(--cmp-brand); }
.cmp-alert-btn:focus-visible { outline: 2px solid var(--cmp-brand); outline-offset: 2px; }
.cmp-alert-btn svg { width: 18px; height: 18px; flex: none; }
.cmp-alert-btn.is-on { border-color: var(--cmp-brand); color: var(--cmp-brand); background: color-mix(in srgb, var(--cmp-brand) 7%, #fff); }

/* Botones genéricos */
.cmp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .6rem 1.1rem; border-radius: .7rem;
    border: 1px solid transparent; font-weight: 700; font-size: .95rem; line-height: 1.2; cursor: pointer; transition: filter .15s, background .15s; }
.cmp-btn:disabled { opacity: .6; cursor: default; }
.cmp-btn--primary { background: var(--cmp-brand); color: #fff; }
.cmp-btn--primary:hover:not(:disabled) { filter: brightness(1.08); }
.cmp-btn--ghost { background: transparent; color: var(--cmp-muted); }
.cmp-btn--ghost:hover { color: var(--cmp-ink); background: #f1f5f9; }
.cmp-btn--small { padding: .35rem .75rem; font-size: .85rem; margin-left: .35rem; background: var(--cmp-brand); color: #fff; }
.cmp-btn:focus-visible, .cmp-link:focus-visible { outline: 2px solid var(--cmp-brand); outline-offset: 2px; }
.cmp-link { background: none; border: 0; padding: 0; color: var(--cmp-brand); font-weight: 600; font-size: .9rem; text-decoration: underline; cursor: pointer; }

/* Diálogo de la alerta */
.cmp-dlg { border: 0; padding: 0; border-radius: 1.1rem; width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .3); color: var(--cmp-ink); }
.cmp-dlg::backdrop { background: rgba(15, 23, 42, .5); }
.cmp-dlg__box { position: relative; padding: 1.4rem 1.4rem 1.2rem; margin: 0; }
.cmp-dlg__x { position: absolute; top: .55rem; right: .6rem; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: transparent;
    font-size: 1.5rem; line-height: 1; color: var(--cmp-muted); cursor: pointer; }
.cmp-dlg__x:hover { background: #f1f5f9; color: var(--cmp-ink); }
.cmp-dlg__kicker { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cmp-brand); }
.cmp-dlg__title { margin: .2rem 0 .3rem; font-size: 1.3rem; font-weight: 800; line-height: 1.25; }
.cmp-dlg__product { margin: 0 0 1rem; font-size: .9rem; color: var(--cmp-muted); }
.cmp-dlg__product b { color: var(--cmp-ink); }
.cmp-dlg__group { border: 0; padding: 0; margin: 0 0 1rem; }
.cmp-dlg__group legend { padding: 0; margin-bottom: .4rem; font-size: .85rem; font-weight: 700; }
.cmp-opt { display: flex; align-items: flex-start; gap: .55rem; padding: .55rem .7rem; margin-bottom: .35rem; border: 1px solid var(--cmp-line);
    border-radius: .7rem; font-size: .92rem; cursor: pointer; }
.cmp-opt:has(input:checked) { border-color: var(--cmp-brand); background: color-mix(in srgb, var(--cmp-brand) 5%, #fff); }
.cmp-opt input[type=radio], .cmp-opt input[type=checkbox] { margin-top: .2rem; accent-color: var(--cmp-brand); flex: none; }
.cmp-opt small { color: var(--cmp-muted); }
.cmp-input { width: 100%; box-sizing: border-box; padding: .55rem .7rem; border: 1px solid #cbd5e1; border-radius: .6rem; font-size: 1rem; color: var(--cmp-ink); background: #fff; }
.cmp-input:focus { outline: 2px solid color-mix(in srgb, var(--cmp-brand) 40%, transparent); border-color: var(--cmp-brand); }
.cmp-input--price { display: inline-block; width: 6.5rem; padding: .25rem .5rem; margin: -.2rem .15rem; }
.cmp-email { margin: .2rem 0 0 .2rem; }
.cmp-email[hidden] { display: none; }
.cmp-consent { display: flex; gap: .45rem; align-items: flex-start; margin-top: .45rem; font-size: .78rem; color: var(--cmp-muted); }
.cmp-consent input { margin-top: .15rem; accent-color: var(--cmp-brand); }
.cmp-note { margin: .2rem 0 .5rem; font-size: .82rem; color: var(--cmp-muted); }
ol.cmp-note { padding-left: 1.2rem; }
.cmp-err { margin: 0 0 .7rem; padding: .5rem .7rem; border-radius: .6rem; background: #fff1f2; color: #be123c; font-size: .85rem; font-weight: 600; }
.cmp-err[hidden] { display: none; }
.cmp-dlg__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cmp-done { text-align: center; padding: .6rem 0 .2rem; }
.cmp-done p { margin: 0 0 1.1rem; color: #334155; }
.cmp-done .cmp-dlg__actions { justify-content: center; }
.cmp-done__icon { width: 3rem; height: 3rem; margin: 0 auto .5rem; border-radius: 50%; display: grid; place-items: center;
    background: #dcfce7; color: #15803d; font-size: 1.6rem; font-weight: 800; }

/* Aviso de instalar */
.cmp-install { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    max-width: 460px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: .4rem .8rem; align-items: start;
    padding: .9rem 1rem; border-radius: 1rem; background: #fff; border: 1px solid var(--cmp-line); box-shadow: 0 12px 40px rgba(15, 23, 42, .22);
    color: var(--cmp-ink); opacity: 0; transform: translateY(16px); transition: opacity .25s ease, transform .25s ease; }
.cmp-install.is-visible { opacity: 1; transform: none; }
.cmp-install__icon { border-radius: 11px; }
.cmp-install__txt strong { display: block; font-size: .98rem; }
.cmp-install__txt span { display: block; font-size: .85rem; color: var(--cmp-muted); line-height: 1.4; }
.cmp-install__ios { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .85rem; line-height: 1.5; }
.cmp-install__ios svg { vertical-align: -3px; }
.cmp-install__ios[hidden] { display: none; }
.cmp-install__btns { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: .4rem; }
@media (min-width: 768px) { .cmp-install { left: auto; right: 20px; bottom: 20px; } }

/* Mis alertas */
.cmp-alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.cmp-alert { display: flex; align-items: center; gap: .8rem; padding: .75rem .9rem; background: #fff; border: 1px solid var(--cmp-line); border-radius: .9rem; }
.cmp-alert.is-down { border-color: #86efac; background: #f0fdf4; }
.cmp-alert img { width: 56px; height: 56px; object-fit: contain; border-radius: .5rem; background: #fff; flex: none; }
.cmp-alert__ph { width: 56px; height: 56px; display: grid; place-items: center; border-radius: .5rem; background: #f1f5f9; flex: none; }
.cmp-alert__body { min-width: 0; flex: 1; }
.cmp-alert__name { display: block; font-weight: 700; color: var(--cmp-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-alert__name:hover { color: var(--cmp-brand); }
.cmp-alert__meta { font-size: .82rem; color: var(--cmp-muted); }
.cmp-alert__meta b { color: var(--cmp-ink); }
.cmp-down { color: #15803d; font-weight: 600; }
.cmp-alert__del { flex: none; border: 1px solid var(--cmp-line); background: #fff; color: var(--cmp-muted); border-radius: .6rem; padding: .35rem .7rem; font-size: .82rem; cursor: pointer; }
.cmp-alert__del:hover { color: #be123c; border-color: #fecdd3; }
.cmp-empty { text-align: center; padding: 2rem 1rem; color: var(--cmp-muted); background: #fff; border: 1px dashed #cbd5e1; border-radius: 1rem; }
.cmp-empty b { color: var(--cmp-ink); }
.cmp-empty__icon { font-size: 2rem; }

@media (prefers-reduced-motion: reduce) { .cmp-install, .cmp-btn, .cmp-alert-btn { transition: none; } }
@media print { .cmp-install, .cmp-dlg { display: none !important; } }