/* ============================================================
   TopoApp — Anuncios del panel (plan Gratis)
   Ubicaciones: dashboard, contenido, sidebar, topnav, toast, popup.
   Temas: marca, claro, oscuro. --ad-accent toma el color del anunciante.
   Lo usan el panel de negocios y la vista previa del admin.
   ============================================================ */

.topo-ad {
    --ad-accent: var(--brand-primary, #D96A2B);
    --ad-bg: linear-gradient(120deg, #ffffff 0%, #fffaf5 100%);
    --ad-border: rgba(217, 106, 43, .2);
    --ad-text: var(--text-primary, #1C1D22);
    --ad-text-2: var(--text-secondary, #5B6270);
    --ad-muted: var(--text-muted, #8A8F98);
    --ad-badge-bg: rgba(28, 29, 34, .06);
    --ad-logo-bg: #ffffff;
    margin: 0 0 1.25rem;
}
.topo-ad--tema-claro {
    --ad-bg: #ffffff;
    --ad-border: var(--border, #E3E3E6);
}
.topo-ad--tema-oscuro {
    --ad-bg: linear-gradient(120deg, #1C1D22 0%, #2A2B31 100%);
    --ad-border: rgba(255, 255, 255, .08);
    --ad-text: #ffffff;
    --ad-text-2: rgba(255, 255, 255, .72);
    --ad-muted: rgba(255, 255, 255, .55);
    --ad-badge-bg: rgba(255, 255, 255, .1);
    --ad-logo-bg: rgba(255, 255, 255, .95);
}

/* ── Piezas comunes ──────────────────────────────────────────── */
.topo-ad-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--ad-text);
    text-decoration: none;
    border-radius: 16px;
    transition: transform .18s ease, box-shadow .18s ease;
}
.topo-ad-link:hover,
.topo-ad-link:focus-visible {
    color: var(--ad-text);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(28, 29, 34, .14);
}
.topo-ad-link:focus-visible { outline: 3px solid rgba(217, 106, 43, .3); outline-offset: 2px; }

.topo-ad-badge {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    padding: .16rem .55rem;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 999px;
    color: var(--ad-muted);
    background: var(--ad-badge-bg);
    white-space: nowrap;
}

.topo-ad-logo {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    padding: 6px;
    background: var(--ad-logo-bg);
    border: 1px solid rgba(28, 29, 34, .08);
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(28, 29, 34, .06);
}
.topo-ad-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.topo-ad-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.topo-ad-body > span:first-child { display: block; min-width: 0; max-width: 100%; }
.topo-ad-title { font-size: .95rem; font-weight: 700; line-height: 1.3; }
.topo-ad-text {
    font-size: .82rem;
    color: var(--ad-text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topo-ad-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem .95rem;
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
    background: var(--ad-accent);
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(28, 29, 34, .18);
    white-space: nowrap;
}
.topo-ad-link:hover .topo-ad-cta { filter: brightness(.92); }

.topo-ad-foot { display: flex; justify-content: flex-end; margin-top: .35rem; }
.topo-ad-quitar {
    position: static;
    padding: 0;
    font-size: .72rem;
    color: var(--text-muted, #8A8F98);
    background: none;
    text-decoration: none;
}
.topo-ad-quitar:hover { color: var(--brand-primary, #D96A2B); text-decoration: underline; }

.topo-ad-close {
    position: absolute;
    top: .6rem;
    right: .6rem;
    z-index: 2;
    padding: .45rem;
    font-size: .6rem;
    background-color: rgba(255, 255, 255, .92);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(28, 29, 34, .18);
    opacity: 1;
}

/* ── Formato tarjeta ─────────────────────────────────────────── */
.topo-ad--tarjeta .topo-ad-link {
    padding: .85rem 1rem;
    background: var(--ad-bg);
    border: 1px solid var(--ad-border);
    box-shadow: 0 1px 2px rgba(15, 15, 15, .04);
    overflow: hidden;
}

/* ── Formato banner (imagen o GIF) ───────────────────────────── */
.topo-ad--banner .topo-ad-link {
    display: block;
    overflow: hidden;
    background: #f3f3f5;
    border: 1px solid rgba(28, 29, 34, .08);
}
.topo-ad--banner picture,
.topo-ad--banner picture img { display: block; width: 100%; }
/* La imagen se muestra completa y nítida en su proporción original, sin recortes */
.topo-ad--banner picture img { height: auto; }
.topo-ad--banner .topo-ad-link > .topo-ad-badge {
    position: absolute;
    top: .6rem;
    left: .6rem;
    z-index: 1;
    color: #fff;
    background: rgba(17, 17, 17, .55);
    backdrop-filter: blur(4px);
}

/* ── Ubicación: dashboard ────────────────────────────────────── */
.topo-ad--dashboard.topo-ad--tarjeta .topo-ad-link { padding: 1.25rem 1.4rem; }
.topo-ad--dashboard.topo-ad--tarjeta.topo-ad--tema-marca .topo-ad-link {
    background:
        radial-gradient(circle at 100% 0%, rgba(245, 160, 90, .22) 0, transparent 45%),
        linear-gradient(120deg, #fff 0%, var(--brand-warm, #FBEDE2) 100%);
}
.topo-ad--dashboard .topo-ad-logo { width: 84px; height: 84px; border-radius: 18px; padding: 8px; }
.topo-ad--dashboard .topo-ad-title { font-size: 1.1rem; }
.topo-ad--dashboard .topo-ad-text { white-space: normal; font-size: .88rem; }
.topo-ad--dashboard .topo-ad-cta { padding: .65rem 1.2rem; font-size: .85rem; }

/* ── Ubicación: arriba del contenido ─────────────────────────── */
.topo-ad--contenido { margin-bottom: 0; }

/* ── Ubicación: entre el contenido (nativo) ──────────────────── */
/* Se ve como una tarjeta más del panel y se adapta al ancho disponible */
.topo-ad--entre { margin: 0 0 1.5rem; }
.topo-ad--entre.topo-ad--tarjeta .topo-ad-link {
    padding: 1.1rem 1.25rem;
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 15, 15, .04));
}
.topo-ad--entre.topo-ad--tarjeta.topo-ad--tema-marca .topo-ad-link {
    background: linear-gradient(120deg, #fff 0%, #fff8f1 60%, var(--brand-warm, #FBEDE2) 100%);
}
.topo-ad--entre .topo-ad-logo { width: 72px; height: 72px; border-radius: 16px; padding: 8px; }
.topo-ad--entre .topo-ad-title { font-size: 1.02rem; }
.topo-ad--entre .topo-ad-text { white-space: normal; }
.topo-ad--entre .topo-ad-cta {
    color: var(--ad-accent);
    background: transparent;
    border: 1.5px solid var(--ad-accent);
    box-shadow: none;
}
.topo-ad--entre .topo-ad-link:hover .topo-ad-cta { color: #fff; background: var(--ad-accent); filter: none; }
.topo-ad--entre.topo-ad--tema-oscuro .topo-ad-cta { color: #fff; }
.topo-ad--entre.topo-ad--banner .topo-ad-link { border-radius: var(--radius-lg, 16px); }

/* ── Ubicación: menú lateral (fondo oscuro) ──────────────────── */
.topo-ad--sidebar { margin: .75rem 12px 1rem; }
.topo-ad--sidebar.topo-ad--tarjeta .topo-ad-link {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    padding: .8rem;
}
.topo-ad--sidebar .topo-ad-body { width: 100%; }
.topo-ad--sidebar .topo-ad-logo { width: 40px; height: 40px; border-radius: 10px; padding: 4px; }
.topo-ad--sidebar .topo-ad-title { font-size: .84rem; }
.topo-ad--sidebar .topo-ad-text { white-space: normal; font-size: .74rem; }
.topo-ad--sidebar .topo-ad-cta { width: 100%; justify-content: center; padding: .4rem .7rem; font-size: .74rem; }
.topo-ad--sidebar.topo-ad--banner .topo-ad-link { border-color: rgba(255, 255, 255, .1); }
.topo-ad--sidebar .topo-ad-quitar { color: rgba(255, 255, 255, .45); }
.topo-ad--sidebar .topo-ad-quitar:hover { color: #fff; }
.topo-ad--preview.topo-ad--sidebar .topo-ad-quitar { color: var(--text-muted, #8A8F98); }

/* ── Ubicación: barra superior ───────────────────────────────── */
.topo-ad--topnav {
    display: none;
    align-items: center;
    gap: .55rem;
    max-width: 380px;
    height: 38px;
    margin: 0 .75rem 0 0;
    padding: 0 .4rem 0 .45rem;
    color: var(--ad-text);
    text-decoration: none;
    background: var(--ad-bg);
    border: 1px solid var(--ad-border);
    border-radius: 999px;
    transition: box-shadow .18s ease;
    min-width: 0;
}
.topo-ad--topnav:hover { color: var(--ad-text); box-shadow: 0 6px 16px rgba(28, 29, 34, .12); }
@media (min-width: 992px) { .topo-ad--topnav { display: inline-flex; } }
.topo-ad--topnav .topo-ad-badge { flex-shrink: 0; max-width: none; padding: .1rem .45rem; font-size: .56rem; }
.topo-ad-topnav-logo { width: 24px; height: 24px; object-fit: contain; border-radius: 6px; background: var(--ad-logo-bg); flex-shrink: 0; }
.topo-ad-topnav-title {
    font-size: .8rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.topo-ad-topnav-cta {
    flex-shrink: 0;
    padding: .28rem .7rem;
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
    background: var(--ad-accent);
    border-radius: 999px;
    white-space: nowrap;
}

/* ── Ubicación: notificación flotante ────────────────────────── */
/* Abajo a la izquierda del contenido: la esquina derecha la usan las novedades y los avisos */
.topo-ad--toast {
    position: fixed;
    right: 16px;
    left: 16px;
    top: calc(var(--topbar-h, 64px) + 12px);
    z-index: 1080;
    margin: 0;
    padding: .9rem;
    background: var(--bg-card, #fff);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(28, 29, 34, .22);
    animation: topo-ad-in .3s ease both;
}
.topo-ad--toast[hidden] { display: none; }
.topo-ad--toast.topo-ad--tema-oscuro { background: #1C1D22; }
.topo-ad--toast .topo-ad-link { flex-wrap: wrap; box-shadow: none; }
.topo-ad--toast .topo-ad-link:hover { transform: none; box-shadow: none; }
.topo-ad--toast.topo-ad--tarjeta .topo-ad-link { border: 0; padding: .2rem 1.6rem .2rem .1rem; background: transparent; }
.topo-ad--toast .topo-ad-text { white-space: normal; }
.topo-ad--toast .topo-ad-body { flex-basis: calc(100% - 72px); }
.topo-ad--toast .topo-ad-cta { width: 100%; justify-content: center; }
.topo-ad--toast.topo-ad--banner { padding: .5rem; }
.topo-ad--toast.topo-ad--banner picture img { border-radius: 12px; }
@media (min-width: 992px) {
    .topo-ad--toast { top: auto; right: auto; left: calc(260px + 24px); bottom: 24px; width: 360px; }
}
@keyframes topo-ad-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Ubicación: ventana emergente ────────────────────────────── */
.topo-ad-modal .modal-dialog { max-width: 520px; }
.topo-ad-modal .modal-dialog.modal-lg { max-width: 760px; }
.topo-ad--popup.modal-content,
.topo-ad-modal-preview {
    position: relative;
    margin: 0;
    padding: 1.25rem;
    background: var(--ad-bg);
    border: 0;
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(28, 29, 34, .28);
    overflow: hidden;
}
.topo-ad--popup.topo-ad--tarjeta .topo-ad-link {
    flex-direction: column;
    text-align: center;
    gap: .75rem;
    padding: 1rem .5rem .25rem;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.topo-ad--popup.topo-ad--tarjeta .topo-ad-link:hover { transform: none; }
.topo-ad--popup .topo-ad-body { align-items: center; }
.topo-ad--popup .topo-ad-logo { width: 96px; height: 96px; border-radius: 22px; padding: 10px; }
.topo-ad--popup .topo-ad-title { font-size: 1.25rem; }
.topo-ad--popup .topo-ad-text { white-space: normal; font-size: .92rem; }
.topo-ad--popup .topo-ad-cta { padding: .75rem 1.6rem; font-size: .92rem; }
.topo-ad--popup.topo-ad--banner { padding: .6rem; background: var(--bg-card, #fff); }
.topo-ad--popup.topo-ad--banner picture img { max-height: 70vh; object-fit: contain; border-radius: 16px; }
.topo-ad--popup .topo-ad-foot { justify-content: center; }

/* ── Vista previa en el admin ────────────────────────────────── */
.topo-ad--preview.topo-ad--toast {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 360px;
    max-width: 100%;
    animation: none;
}

/* ── Celular ─────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .topo-ad--dashboard.topo-ad--tarjeta .topo-ad-link,
    .topo-ad--contenido.topo-ad--tarjeta .topo-ad-link,
    .topo-ad--entre.topo-ad--tarjeta .topo-ad-link { flex-wrap: wrap; }
    .topo-ad--dashboard .topo-ad-body,
    .topo-ad--contenido .topo-ad-body,
    .topo-ad--entre .topo-ad-body { flex-basis: calc(100% - 88px); }
    .topo-ad--dashboard .topo-ad-cta,
    .topo-ad--contenido .topo-ad-cta,
    .topo-ad--entre .topo-ad-cta { width: 100%; justify-content: center; }
    .topo-ad--entre .topo-ad-logo { width: 56px; height: 56px; }
    .topo-ad-text { white-space: normal; }
    .topo-ad--dashboard .topo-ad-logo { width: 64px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
    .topo-ad-link, .topo-ad--toast { transition: none; animation: none; }
    .topo-ad-link:hover { transform: none; }
}

/* Anuncio de aliado dentro de la Academia (blog público y app) */
.anuncio-academia { position: relative; margin: 22px 0 6px; }
.anuncio-academia-tag { position: absolute; top: -10px; left: 16px; z-index: 2; padding: 3px 10px; border-radius: 99px; background: #0EA5E9; color: #fff; font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.anuncio-academia .topo-ad-foot { display: none; }