/* ═══════════════════════════════════════════════════════════
   Bloom Cookie Manager v1.6.0 — Banner CSS
   Layout: 2 filas limpias, diseño oscuro, tema BloomScans
   ═══════════════════════════════════════════════════════════ */

/* ── Banner container ── */
#bcm-banner {
    position: fixed;
    z-index: 999999;
    left: 0; right: 0;
    background: var(--bcm-bg, #111111);
    color: var(--bcm-fg, #e0e0e0);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .35s ease;
    border-top: 2px solid var(--bcm-primary, #e91e8c);
    box-shadow: 0 -4px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
}
#bcm-banner.bcm-pos-bottom { bottom: 0; }
#bcm-banner.bcm-pos-top {
    top: 0; border-top: none;
    border-bottom: 2px solid var(--bcm-primary, #e91e8c);
    box-shadow: 0 4px 32px rgba(0,0,0,.5);
}
#bcm-banner.bcm-pos-popup {
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 540px; max-width: 95vw;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    border-top: 2px solid var(--bcm-primary, #e91e8c);
    box-shadow: 0 32px 80px rgba(0,0,0,.85), 0 0 60px rgba(233,30,140,.08);
}
#bcm-banner.bcm-hidden              { transform: translateY(110%); opacity: 0; pointer-events: none; }
#bcm-banner.bcm-pos-top.bcm-hidden  { transform: translateY(-110%); }
#bcm-banner.bcm-pos-popup.bcm-hidden{ transform: translate(-50%,-58%); opacity: 0; }

/* ── Inner wrapper ── */
.bcm-banner-inner-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 16px 24px 12px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Row 1: texto + botones ── */
.bcm-row-main {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.bcm-banner-text {
    flex: 1;
    min-width: 220px;
}
.bcm-banner-title {
    display: block;
    font-size: .92rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
    letter-spacing: .01em;
}
.bcm-banner-desc {
    margin: 0;
    font-size: .76rem;
    color: rgba(255,255,255,.6);
    line-height: 1.55;
}
.bcm-privacy-link {
    color: var(--bcm-primary, #e91e8c);
    text-decoration: none;
    opacity: .85;
    white-space: nowrap;
    transition: opacity .15s;
}
.bcm-privacy-link:hover { opacity: 1; text-decoration: underline; }

/* Botones */
.bcm-banner-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.bcm-btn-accept,
.bcm-btn-reject,
.bcm-btn-customize {
    padding: 9px 20px;
    border-radius: 7px;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: opacity .15s, transform .12s, box-shadow .15s;
    white-space: nowrap;
    letter-spacing: .025em;
    line-height: 1;
}
.bcm-btn-accept {
    background: var(--bcm-accept-bg, #e91e8c);
    color: #fff;
    box-shadow: 0 2px 12px rgba(233,30,140,.4);
    order: 3;
}
.bcm-btn-accept:hover {
    opacity: .92;
    transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(233,30,140,.55);
}
.bcm-btn-reject {
    background: var(--bcm-reject-bg, #1c1c1c);
    color: var(--bcm-reject-fg, #999);
    border: 1px solid rgba(255,255,255,.1);
    order: 2;
}
.bcm-btn-reject:hover { background: #222; color: #bbb; border-color: rgba(255,255,255,.2); }
.bcm-btn-customize {
    background: transparent;
    color: rgba(255,255,255,.55);
    border: 1px solid rgba(255,255,255,.15);
    order: 1;
}
.bcm-btn-customize:hover {
    color: var(--bcm-primary, #e91e8c);
    border-color: rgba(233,30,140,.4);
    background: rgba(233,30,140,.05);
}

/* ── Row 2: T&C checkbox ── */
.bcm-row-tos {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0 4px;
    margin-top: 10px;
    border-top: 1px solid rgba(255,255,255,.07);
}
.bcm-tos-label {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    user-select: none;
}
.bcm-tos-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--bcm-primary, #e91e8c);
    cursor: pointer;
    border-radius: 3px;
}
.bcm-tos-text {
    font-size: .76rem;
    color: rgba(255,255,255,.55);
    line-height: 1.5;
}
.bcm-tos-nolink {
    color: rgba(255,255,255,.7);
    font-weight: 600;
}
.bcm-tos-link {
    color: var(--bcm-primary, #e91e8c);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
    transition: opacity .15s;
}
.bcm-tos-link:hover { opacity: .8; }
.bcm-tos-cookie-note {
    color: rgba(255,255,255,.35);
    font-size: .72rem;
    margin-left: 2px;
}
.bcm-tos-error {
    font-size: .74rem;
    color: #ff6b6b;
    font-weight: 500;
    animation: none;
}
@keyframes bcm-shake {
    0%,100% { transform: translateX(0); }
    20%      { transform: translateX(-5px); }
    40%      { transform: translateX(5px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(4px); }
}
.bcm-shake { animation: bcm-shake .35s ease; }

/* ── Powered by ── */
.bcm-powered {
    text-align: center;
    font-size: .6rem;
    color: rgba(255,255,255,.18);
    letter-spacing: .06em;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.05);
}

/* ══════════════════════════════════════════
   Panel de Preferencias
   ══════════════════════════════════════════ */
.bcm-preferences { position: fixed; inset: 0; z-index: 9999999; }
.bcm-pref-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.bcm-pref-panel {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    background: #141414;
    color: #e0e0e0;
    width: 560px;
    max-width: 95vw;
    max-height: 90vh;
    border-radius: 14px;
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,.07);
    border-top: 2px solid var(--bcm-primary, #e91e8c);
    box-shadow: 0 32px 80px rgba(0,0,0,.9), 0 0 60px rgba(233,30,140,.06);
    animation: bcmSlideUp .22s cubic-bezier(.4,0,.2,1);
}
@keyframes bcmSlideUp {
    from { transform: translate(-50%,-46%); opacity: 0; }
    to   { transform: translate(-50%,-50%); opacity: 1; }
}

.bcm-pref-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px 16px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.bcm-pref-header h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: .01em;
}
.bcm-pref-close {
    background: none; border: none;
    font-size: .85rem; cursor: pointer;
    color: rgba(255,255,255,.35); padding: 5px 9px;
    border-radius: 6px;
    transition: color .15s, background .15s;
    line-height: 1;
}
.bcm-pref-close:hover { color: #e91e8c; background: rgba(233,30,140,.1); }

.bcm-pref-body { padding: 16px 22px 8px; }
.bcm-pref-body > p {
    font-size: .78rem;
    color: rgba(255,255,255,.4);
    margin: 0 0 16px;
}
.bcm-pref-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.bcm-pref-row:last-child { border-bottom: none; }
.bcm-pref-info { flex: 1; padding-right: 18px; }
.bcm-pref-info strong { display: block; font-size: .85rem; margin-bottom: 2px; color: #ddd; }
.bcm-pref-desc { font-size: .73rem; color: rgba(255,255,255,.35); }

/* Toggle */
.bcm-pref-toggle { position: relative; width: 46px; height: 25px; flex-shrink: 0; }
.bcm-pref-toggle input { opacity: 0; width: 0; height: 0; }
.bcm-pref-slider {
    position: absolute; inset: 0;
    background: rgba(255,255,255,.1);
    border-radius: 25px;
    cursor: pointer;
    transition: .22s;
    border: 1px solid rgba(255,255,255,.1);
}
.bcm-pref-slider::before {
    content: ''; position: absolute;
    width: 19px; height: 19px;
    left: 2px; top: 2px;
    background: rgba(255,255,255,.4);
    border-radius: 50%;
    transition: .22s;
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.bcm-pref-toggle input:checked + .bcm-pref-slider {
    background: var(--bcm-primary, #e91e8c);
    border-color: var(--bcm-primary, #e91e8c);
    box-shadow: 0 0 10px rgba(233,30,140,.35);
}
.bcm-pref-toggle input:checked + .bcm-pref-slider::before {
    transform: translateX(21px);
    background: #fff;
}
.bcm-pref-slider.locked { opacity: .35; cursor: not-allowed; }

.bcm-pref-footer {
    padding: 14px 22px 18px;
    border-top: 1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,.25);
    border-radius: 0 0 14px 14px;
}
/* T&C dentro del panel */
.bcm-tos-row--pref {
    padding: 0 0 14px;
    border: none;
    margin: 0 0 12px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.bcm-tos-row--pref .bcm-tos-text {
    color: rgba(255,255,255,.5);
}
.bcm-pref-footer-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.bcm-pref-btn {
    padding: 9px 18px;
    border-radius: 7px;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: opacity .15s, transform .12s, box-shadow .15s;
    letter-spacing: .02em;
}
.bcm-pref-btn-primary {
    background: var(--bcm-primary, #e91e8c);
    color: #fff;
    box-shadow: 0 2px 10px rgba(233,30,140,.35);
}
.bcm-pref-btn-primary:hover { opacity: .9; transform: translateY(-1px); }
.bcm-pref-btn-secondary {
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.7);
    border: 1px solid rgba(255,255,255,.12);
}
.bcm-pref-btn-secondary:hover { background: rgba(255,255,255,.12); color: #fff; }
.bcm-pref-btn-outline {
    background: transparent;
    color: rgba(255,255,255,.35);
    border: 1px solid rgba(255,255,255,.1);
}
.bcm-pref-btn-outline:hover { color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.2); }

/* ══════════════════════════════════════════
   Botón reabrir 🍪
   ══════════════════════════════════════════ */
#bcm-reopen {
    position: fixed;
    bottom: 22px; left: 22px;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--bcm-primary, #e91e8c);
    color: #fff;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 999998;
    box-shadow: 0 4px 16px rgba(233,30,140,.5);
    transition: transform .15s, box-shadow .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
#bcm-reopen:hover {
    transform: scale(1.12);
    box-shadow: 0 6px 24px rgba(233,30,140,.65);
}

/* ══════════════════════════════════════════
   Placeholder contenido bloqueado
   ══════════════════════════════════════════ */
.bcm-blocked-placeholder {
    background: rgba(255,255,255,.03);
    border: 1px dashed rgba(255,255,255,.12);
    border-radius: 10px;
    padding: 28px;
    text-align: center;
    font-size: .82rem;
    color: rgba(255,255,255,.35);
}
.bcm-blocked-placeholder a {
    color: var(--bcm-primary, #e91e8c);
    text-decoration: none;
    font-weight: 600;
}
.bcm-blocked-placeholder a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════ */
@media (max-width: 700px) {
    .bcm-banner-inner-wrap { padding: 14px 16px 10px; }

    .bcm-row-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .bcm-banner-actions {
        width: 100%;
        justify-content: stretch;
    }
    .bcm-btn-accept,
    .bcm-btn-reject,
    .bcm-btn-customize {
        flex: 1;
        text-align: center;
        padding: 10px 8px;
    }
    .bcm-row-tos { flex-direction: column; align-items: flex-start; }
}