/* ════════════════════════════════════════════════════
   Espacios de anuncio (Google Ads) por sección.
   Contenedor reutilizable: Clasificados y Salas privadas.
   (El del Inicio usa sus propias clases en home.css.)
════════════════════════════════════════════════════ */

/* ───── Panel "Administrar mi publicidad" (banners del usuario) ───── */
.my-banners-list { display: flex; flex-direction: column; gap: .7rem; }
.my-banner-card {
    display: flex; gap: .8rem; align-items: center;
    padding: .7rem;
    border: 1px solid var(--border, rgba(120,120,160,.25));
    border-radius: 14px;
    background: var(--bg-raised, rgba(127,127,160,.06));
}
.my-banner-thumb {
    width: 92px; height: 64px; flex-shrink: 0;
    border-radius: 10px; overflow: hidden;
    background: var(--bg-input, #141923);
    display: flex; align-items: center; justify-content: center;
}
.my-banner-thumb img { width: 100%; height: 100%; object-fit: cover; }
.my-banner-info { flex: 1; min-width: 0; }
.my-banner-title { font-weight: 700; font-size: .92rem; color: var(--text-primary, #e7e9ef); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-banner-status { font-size: .78rem; font-weight: 600; margin: .2rem 0; display: flex; align-items: center; gap: .35rem; }
.my-banner-stats { display: flex; gap: .9rem; font-size: .78rem; color: var(--text-secondary, #9aa2b1); flex-wrap: wrap; }
.my-banner-stats span { display: inline-flex; align-items: center; gap: .3rem; }
.my-banner-actions { display: flex; flex-direction: column; gap: .4rem; flex-shrink: 0; }
.my-banner-actions .banner-add-btn { margin: 0; white-space: nowrap; padding: .5rem .75rem; font-size: .8rem; }
.my-banner-del {
    border: none; cursor: pointer;
    background: rgba(239,68,68,.12); color: #ef4444;
    border-radius: 9px; padding: .45rem; font-size: .85rem;
    transition: background .15s;
}
.my-banner-del:hover { background: rgba(239,68,68,.22); }

/* Botón Editar publicidad (se resalta cuando está advertida) */
.banner-edit-btn {
    border: none; cursor: pointer;
    background: rgba(59,130,246,.12); color: #3b82f6;
    border-radius: 9px; padding: .45rem .7rem; font-size: .82rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: .35rem; transition: background .15s;
}
.banner-edit-btn:hover { background: rgba(59,130,246,.22); }
.banner-edit-btn.highlight { background: #f59e0b; color: #fff; animation: bannerEditPulse 1.6s infinite; }
@keyframes bannerEditPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,.5); } 50% { box-shadow: 0 0 0 6px rgba(245,158,11,0); } }

/* Modal de edición de publicidad */
.banner-edit-overlay { display: flex; align-items: center; justify-content: center; z-index: 4000; }
.banner-edit-card {
    background: var(--bg-raised, #fff); color: var(--text-primary, #111);
    width: min(440px, 92vw); max-height: 90vh; overflow-y: auto;
    border-radius: 16px; padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.banner-edit-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.banner-edit-head h3 { margin: 0; font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; }
.banner-edit-head h3 i { color: #3b82f6; }
.banner-edit-x { background: none; border: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--text-secondary, #888); }
.banner-edit-label { display: block; font-size: .8rem; font-weight: 600; margin: 12px 0 5px; color: var(--text-secondary, #666); }
.banner-edit-imgbox { position: relative; border-radius: 12px; overflow: hidden; cursor: pointer; border: 1px dashed var(--border, #ddd); }
.banner-edit-imgbox img { width: 100%; display: block; max-height: 180px; object-fit: cover; }
.banner-edit-imghint {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .4rem;
    background: rgba(0,0,0,.35); color: #fff; font-weight: 600; font-size: .85rem; opacity: 0; transition: opacity .15s;
}
.banner-edit-imgbox:hover .banner-edit-imghint { opacity: 1; }
.banner-edit-input {
    width: 100%; box-sizing: border-box; padding: .6rem .75rem;
    border: 1px solid var(--border, #ddd); border-radius: 10px; font-size: .9rem;
    background: var(--bg-base, #fff); color: var(--text-primary, #111);
}
.banner-edit-actions { display: flex; gap: 10px; margin-top: 18px; }
.banner-edit-cancel, .banner-edit-save {
    flex: 1; padding: .65rem; border-radius: 10px; cursor: pointer; font-weight: 700; font-size: .9rem; border: none;
}
.banner-edit-cancel { background: var(--bg-hover, #eee); color: var(--text-secondary, #555); }
.banner-edit-save { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.banner-edit-save:disabled { opacity: .7; cursor: default; }
/* El botón "Administrar mi publicidad" reusa .banner-add-btn */
.banner-manage-btn { margin-top: .4rem; }
/* Aviso de moderación en "Administrar mi publicidad" */
.my-banner-mod {
    font-size: .76rem; line-height: 1.4; margin-top: .3rem;
    padding: .35rem .55rem; border-radius: 8px;
    display: flex; gap: .4rem; align-items: flex-start;
}
.my-banner-mod.warned { background: rgba(245,158,11,.12); color: #b45309; border: 1px solid rgba(245,158,11,.3); }
.my-banner-mod.taken { background: rgba(239,68,68,.12); color: #b91c1c; border: 1px solid rgba(239,68,68,.3); }
[data-theme="dark"] .my-banner-mod.warned { color: #fbbf24; }
[data-theme="dark"] .my-banner-mod.taken { color: #fca5a5; }

/* ───── Cupones / Incentivos ───── */
.notif-coupon-btn {
    margin-top: .5rem;
    display: inline-flex; align-items: center; gap: .4rem;
    border: none; cursor: pointer;
    background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff;
    font-weight: 700; font-size: .78rem;
    padding: .4rem .8rem; border-radius: 8px;
    box-shadow: 0 4px 12px rgba(34,197,94,.3);
    transition: transform .12s, filter .15s;
}
.notif-coupon-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ── Solicitudes de ingreso a sala (aprobar/rechazar) en la campana ── */
.notif-joinreq-actions { display: flex; gap: .4rem; margin-top: .5rem; }
.notif-joinreq-btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    border: none; cursor: pointer; font-weight: 700; font-size: .76rem;
    padding: .4rem .6rem; border-radius: 8px; transition: filter .15s, transform .12s;
}
.notif-joinreq-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.notif-joinreq-btn.approve { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; }
.notif-joinreq-btn.deny { background: rgba(239,68,68,.14); color: #dc2626; }
[data-theme="dark"] .notif-joinreq-btn.deny { color: #f87171; }
.notif-joinreq-resolved {
    margin-top: .45rem; display: inline-flex; align-items: center; gap: .35rem;
    font-size: .74rem; font-weight: 700;
}
.notif-joinreq-resolved.ok { color: #16a34a; }
.notif-joinreq-resolved.no { color: #dc2626; }

.ad-coupon-btn {
    width: 100%; margin: .4rem 0;
    display: flex; align-items: center; justify-content: center; gap: .45rem;
    border: 1px solid rgba(34,197,94,.4); cursor: pointer;
    background: rgba(34,197,94,.12); color: #16a34a;
    font-weight: 700; font-size: .82rem;
    padding: .55rem; border-radius: 10px;
    transition: background .15s;
}
.ad-coupon-btn:hover { background: rgba(34,197,94,.2); }
[data-theme="dark"] .ad-coupon-btn { color: #4ade80; }

/* ───── Moderación de clasificados ───── */
.cls-mod-banner {
    display: flex; gap: .55rem; align-items: flex-start;
    margin: .5rem 0; padding: .6rem .7rem;
    border-radius: 10px; font-size: .8rem; line-height: 1.35;
}
.cls-mod-banner i { margin-top: .15rem; flex-shrink: 0; }
.cls-mod-banner.warned { background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.35); color: #b45309; }
.cls-mod-banner.takedown { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); color: #b91c1c; }
[data-theme="dark"] .cls-mod-banner.warned { color: #fbbf24; }
[data-theme="dark"] .cls-mod-banner.takedown { color: #fca5a5; }
.cls-staff-actions .cls-warn-btn { color: #b45309; }
.cls-staff-actions .cls-takedown-btn { color: #b91c1c; }

/* ───── Moderación de salas privadas (aviso en tarjeta) ───── */
.pvx-mod-banner {
    display: flex; gap: .5rem; align-items: flex-start;
    margin: .5rem .5rem 0; padding: .6rem .75rem;
    border-radius: 10px; font-size: .78rem; line-height: 1.35;
}
.pvx-mod-banner i { margin-top: .15rem; flex-shrink: 0; }
.pvx-mod-banner.warned { background: rgba(245,158,11,.13); border: 1px solid rgba(245,158,11,.38); color: #b45309; }
.pvx-mod-banner.takedown { background: rgba(239,68,68,.13); border: 1px solid rgba(239,68,68,.38); color: #b91c1c; }
[data-theme="dark"] .pvx-mod-banner.warned { color: #fbbf24; }
[data-theme="dark"] .pvx-mod-banner.takedown { color: #fca5a5; }
.pvx-mod-staff { display: flex; gap: .4rem; padding: .4rem .5rem 0; flex-wrap: wrap; }
.pvx-cbtn.warn { background: rgba(245,158,11,.14); color: #b45309; border-color: rgba(245,158,11,.3); font-size: .78rem; padding: .35rem .65rem; }
.pvx-cbtn.danger { background: rgba(239,68,68,.14); color: #b91c1c; border-color: rgba(239,68,68,.3); font-size: .78rem; padding: .35rem .65rem; }
[data-theme="dark"] .pvx-cbtn.warn { color: #fbbf24; }
[data-theme="dark"] .pvx-cbtn.danger { color: #fca5a5; }

/* ───── Panel admin: Moderación — 3 ventanas (Salas/Publicidad/Anuncios) ───── */
.mod-groups { display: flex; gap: .5rem; margin-bottom: .8rem; flex-wrap: wrap; }
.mod-group {
    flex: 1; min-width: 120px;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .8rem 1rem; cursor: pointer;
    border: 1px solid var(--border, rgba(120,120,160,.25));
    border-radius: 14px; background: var(--bg-raised);
    color: var(--text-secondary); font: inherit; font-weight: 700; font-size: .9rem;
    transition: all .15s;
}
.mod-group i { font-size: 1.05rem; }
.mod-group:hover { background: var(--bg-hover); }
.mod-group.active { background: var(--primary, #6e78c4); color: #fff; border-color: var(--primary, #6e78c4); box-shadow: 0 6px 16px var(--primary-glow, rgba(110,120,196,.3)); }

/* ───── Panel admin: Moderación de clasificados ───── */
.mod-ads-list { display: flex; flex-direction: column; gap: .7rem; }
.mod-ad-card {
    display: flex; gap: .9rem;
    padding: .8rem;
    border: 1px solid var(--border, rgba(120,120,160,.25));
    border-radius: 14px;
    background: var(--bg-card, #1d232d);
}
.mod-ad-thumb {
    width: 110px; height: 84px; flex-shrink: 0;
    border-radius: 10px; overflow: hidden;
    background: var(--bg-input, #141923);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted, #6b7280); font-size: 1.4rem;
}
.mod-ad-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mod-ad-main { flex: 1; min-width: 0; }
.mod-ad-top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.mod-ad-title { font-weight: 700; font-size: .95rem; color: var(--text-primary, #e7e9ef); }
.mod-muted { font-size: .76rem; color: var(--text-muted, #9aa2b1); margin-top: .15rem; }
.mod-ad-desc { font-size: .82rem; color: var(--text-secondary, #9aa2b1); margin-top: .35rem; }
.mod-ad-mod {
    margin-top: .5rem; padding: .5rem .65rem;
    border-radius: 9px; font-size: .8rem; line-height: 1.45;
    background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.28);
}
.mod-changed-flag { color: #16a34a; font-weight: 600; margin-top: .25rem; }
[data-theme="dark"] .mod-changed-flag { color: #4ade80; }
.mod-ad-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.mod-badge { font-size: .68rem; font-weight: 700; padding: .15rem .5rem; border-radius: 20px; }
.mod-badge.changed { background: rgba(34,197,94,.16); color: #16a34a; }
.mod-badge.warned { background: rgba(245,158,11,.16); color: #b45309; }
.mod-badge.taken { background: rgba(239,68,68,.16); color: #b91c1c; }
.mod-badge.active { background: rgba(34,197,94,.16); color: #16a34a; }
.mod-badge.hidden { background: rgba(120,120,160,.18); color: var(--text-muted, #6b7280); }
.admin-page-btn {
    border: 1px solid var(--border, rgba(120,120,160,.25)); cursor: pointer;
    background: var(--bg-card); color: var(--text-secondary);
    border-radius: 8px; padding: .35rem .7rem; margin: 0 .2rem; font: inherit; font-size: .82rem;
}
.admin-page-btn.active { background: var(--primary, #6e78c4); color: #fff; border-color: var(--primary, #6e78c4); }

/* ───── Panel del Bot IA ───── */
.bot-status-row { margin-bottom: 1rem; }
.bot-toggle { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 12px; }
.bot-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: .6rem; margin-bottom: .7rem; }
.bot-stat { text-align: center; padding: .7rem .5rem; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 12px; }
.bot-stat-n { font-size: 1.4rem; font-weight: 800; }
.bot-stat-l { font-size: .72rem; color: var(--text-muted); margin-top: .15rem; }
.bot-cat-row { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .8rem; color: var(--text-secondary); margin-bottom: 1rem; }
.bot-cat i { color: var(--primary); margin-right: .25rem; }
.bot-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 1rem 1.1rem; margin-bottom: .9rem; }
.bot-card h4 { font-size: .95rem; margin-bottom: .7rem; display: flex; align-items: center; gap: .45rem; }
.bot-card h4 i { color: var(--primary); }
.bot-actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .7rem; }
.bot-actions-grid label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .25rem; }
.bot-actions-grid label small { color: var(--text-muted); font-weight: 400; }
.bot-lists { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.bot-lists label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .3rem; }
.bot-lists textarea { resize: vertical; font-size: .82rem; }
.bot-log { display: flex; gap: .6rem; align-items: flex-start; padding: .65rem .8rem; border: 1px solid var(--border); border-radius: 11px; margin-bottom: .5rem; background: var(--bg-raised); font-size: .84rem; }
.bot-log.overturned { opacity: .6; }
.bot-log-msg { font-style: italic; color: var(--text-secondary); margin: .2rem 0; word-break: break-word; }
.bot-log-actions { display: flex; flex-direction: column; gap: .35rem; flex-shrink: 0; }
@media (max-width: 600px) { .bot-lists { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
    .my-banner-card { flex-wrap: wrap; }
    .my-banner-actions { flex-direction: row; width: 100%; }
    .my-banner-actions .banner-add-btn { flex: 1; }
}

.section-ad {
    width: 100%;
    max-width: 1100px;
    margin: 1.1rem auto;
    border-radius: 14px;
    overflow: hidden;
}
.section-ad-label {
    display: flex; align-items: center; gap: .4rem;
    font-size: .72rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-muted, #6b7280);
    margin-bottom: .4rem;
}
.section-ad-label .fa-google { color: #4285F4; }
.section-ad-box {
    width: 100%;
    min-height: 110px;
    display: flex; align-items: center; justify-content: center;
}
.section-ad-box .adsbygoogle { display: block; width: 100%; }
/* Placeholder mientras no hay anuncio configurado/aprobado */
.section-ad-box .ad-reserved {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .4rem; min-height: 110px; text-align: center;
    color: var(--text-muted, #8a93a8);
    border: 1px dashed var(--border, rgba(120,120,160,.25));
    border-radius: 12px;
    background: var(--bg-raised, rgba(127,127,160,.06));
}
.section-ad-box .ad-reserved i { font-size: 1.5rem; }
.section-ad-box .ad-reserved span { font-size: .78rem; }

/* ════════════════════════════════════════════════════
   Salas públicas (panel admin) — tarjetas de configuración
   ════════════════════════════════════════════════════ */
.pubrooms-grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.pubroom-card {
    border: 1px solid var(--border, rgba(120,120,160,.25));
    border-radius: 14px; overflow: hidden;
    background: var(--bg-secondary, #fff);
    display: flex; flex-direction: column;
}
.pubroom-banner {
    height: 70px; background-size: cover; background-position: center;
    background-color: var(--bg-hover, rgba(127,127,160,.12));
}
.pubroom-head { display: flex; gap: .6rem; padding: .6rem .8rem; margin-top: -28px; }
.pubroom-av {
    width: 52px; height: 52px; border-radius: 12px; object-fit: cover;
    border: 3px solid var(--bg-secondary, #fff); flex: 0 0 auto;
    background: var(--bg-hover, #e9e9f2);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted, #8a93a8); font-size: 1.1rem;
}
.pubroom-meta { min-width: 0; padding-top: 30px; }
.pubroom-name { font-weight: 700; font-size: .9rem; display: flex; align-items: center; gap: .4rem; }
.pubroom-main {
    font-size: .6rem; font-weight: 600; text-transform: uppercase;
    background: var(--primary, #6366f1); color: #fff;
    padding: .1rem .35rem; border-radius: 6px;
}
.pubroom-desc {
    font-size: .75rem; color: var(--text-secondary, #6b7280);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pubroom-chips { display: flex; flex-wrap: wrap; gap: .3rem; padding: 0 .8rem .6rem; }
.pubroom-chip {
    font-size: .65rem; padding: .15rem .45rem; border-radius: 999px;
    background: var(--bg-hover, rgba(127,127,160,.12));
    color: var(--text-secondary, #6b7280);
}
.pubroom-chip.warn { background: rgba(245,158,11,.15); color: #b45309; }
.pubroom-chip.ok { background: rgba(34,197,94,.15); color: #15803d; }
.pubroom-actions {
    display: flex; flex-wrap: wrap; gap: .4rem; padding: .6rem .8rem;
    border-top: 1px solid var(--border, rgba(120,120,160,.18)); margin-top: auto;
}
.pubroom-actions .btn-admin { font-size: .72rem; padding: .3rem .55rem; }

/* Salas publicas admin: barra de paises + secciones agrupadas */
.pubrooms-countries-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1rem;padding:.6rem .8rem;border:1px solid var(--border,rgba(120,120,160,.25));border-radius:12px;background:var(--bg-secondary,#fff);}
.pubrooms-cbar-label{font-size:.8rem;font-weight:700;color:var(--text-secondary,#6b7280);}
.pubrooms-country-chip{display:inline-flex;align-items:center;gap:.3rem;font-size:.78rem;padding:.25rem .55rem;border-radius:999px;background:var(--bg-hover,rgba(127,127,160,.12));}
.pubrooms-country-chip small{color:var(--text-muted,#8a93a8);}
.pubrooms-country-del{border:none;background:transparent;color:#ef4444;font-size:1rem;line-height:1;cursor:pointer;padding:0 .1rem;}
.pubrooms-country-section{margin-bottom:1.4rem;}
.pubrooms-country-h{margin:.2rem 0 .7rem;font-size:.95rem;display:flex;align-items:center;gap:.5rem;padding-bottom:.4rem;border-bottom:1px solid var(--border,rgba(120,120,160,.18));}
.pubrooms-country-h small{font-size:.7rem;color:#fff;background:var(--primary,#6366f1);border-radius:999px;padding:.05rem .45rem;}

/* Barra de tiempo transcurrido de la publicidad (Administrar mi publicidad) */
.my-banner-time{margin-top:.5rem;}
.my-banner-time-head{display:flex;justify-content:space-between;font-size:.68rem;color:var(--text-secondary,#9aa2b1);margin-bottom:4px;}
.my-banner-time-head i{margin-right:3px;opacity:.8;}
.my-banner-time-track{height:7px;border-radius:999px;background:var(--bg-input,rgba(127,127,160,.15));overflow:hidden;}
.my-banner-time-fill{height:100%;border-radius:999px;transition:width .5s ease;}
.my-banner-time-fill.ok{background:linear-gradient(90deg,#22c55e,#34d399);}
.my-banner-time-fill.warn{background:linear-gradient(90deg,#f59e0b,#fbbf24);}
.my-banner-time-fill.danger{background:linear-gradient(90deg,#ef4444,#f87171);}