/* Site chrome styles — shared by the soccer and base layouts.
   Extracted from the partials' inline <style> blocks (2026-07):
   consent-banner, dev-nutbar. Behavior lives in static/js/chrome.js. */

/* ───── consent-banner ───── */
.consent-banner {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 10001;
    max-width: 720px; margin: 0 auto;
    background: var(--color-white, #fff); color: var(--color-text, #1a1a2e);
    border: 1px solid var(--color-border, #e2e8f0); border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.18);
    padding: 18px 22px; display: none;
    flex-wrap: wrap; align-items: center; gap: 14px;
}
.consent-banner.show { display: flex; }
.consent-banner__text { flex: 1 1 280px; font-size: 13px; line-height: 1.5; }
.consent-banner__text a { color: var(--color-primary, #1892ed); }
.consent-banner__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.consent-banner__btn {
    padding: 9px 16px; border-radius: 8px; font-size: 13px; font-weight: 600;
    cursor: pointer; border: 1px solid var(--color-border, #e2e8f0); background: transparent; color: inherit;
}
.consent-banner__btn--accept { background: var(--color-primary, #1892ed); color: #fff; border-color: transparent; }

/* ───── dev-nutbar ───── */
/* TOGGLES — stay position:fixed in the corner. NEVER add a position rule that
   beats this fixed (regression source). One gold "+" (admin), one slate "B" (b2b). */
.dev-fab {
    position: fixed; bottom: 24px; z-index: 10000;
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.25);     /* light & transparent at rest; dark frost only on hover */
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    transition: transform 0.12s, background 0.1s;
    font-weight: 800; font-size: 20px; line-height: 1;
}
.dev-fab--admin { left: 12px; color: #f0c419; border-color: rgba(240,196,25,0.45); }
.dev-fab--b2b   { left: 64px; color: #334155; border-color: rgba(148,163,184,0.55);
                  font-size: 15px; font-weight: 600;   /* smaller, smoother "B" */
                  text-shadow: 0 0 2px rgba(255,255,255,0.6); }   /* dark B + light halo: legible on light bg */
.dev-fab iconify-icon { transition: transform 0.12s; }
.dev-fab.open iconify-icon { transform: rotate(45deg); }
.dev-fab:hover { transform: scale(1.08); background: rgba(255,255,255,0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* ITEMS container: fixed, anchored just above the toggle, grows UP. Only the
   open group's container is shown (display:none/flex), so the two stacks can
   never overlap (mutual exclusivity, enforced in JS too). column-reverse → the
   first source item (Incidencias) sits at the bottom (nearest the toggle), and a
   section header rendered just BEFORE its items lands visually ABOVE them. */
.dev-stack {
    position: fixed; bottom: 78px; z-index: 9999;
    display: none; flex-direction: column-reverse; align-items: flex-start; gap: 6px;
    max-height: calc(100vh - 110px); overflow: visible;
}
.dev-stack--admin { left: 12px; }
.dev-stack--b2b   { left: 64px; }
body.dev-admin-open .dev-stack--admin { display: flex; }
body.dev-b2b-open   .dev-stack--b2b   { display: flex; }

.dev-section {
    font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    color: #fff; background: rgba(0,0,0,0.55); padding: 2px 9px; border-radius: 8px;
    margin-top: 4px; align-self: flex-start; backdrop-filter: blur(3px);
}
.dev-btn {
    position: relative;                 /* anchor for the .has-badge unread globe */
    height: 38px; padding: 0 14px 0 9px; border-radius: 19px;
    border: 1px solid rgba(0,0,0,0.06);
    background: #ffffff;                 /* crisp opaque pill (no dim) */
    display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    box-shadow: 0 3px 12px rgba(0,0,0,0.22);
}
.dev-btn__label { font-size: 13px; font-weight: 600; color: #1f2937; }
.dev-btn:hover { transform: translateX(2px); background: #f8fafc; }