/* Corporate look of Publicador (Ayuntamiento de El Pedroso) on top of Filament.
   Plain CSS because Filament's compiled stylesheet only contains its own classes.
   Filament's styles live in cascade layers, so these unlayered rules win without !important. */
:root {
    --rp-blue: #0071bc; --rp-blue-700: #005a96; --rp-blue-900: #0b2c4d; --rp-blue-50: #e9f3fb; --rp-blue-100: #cfe5f5;
    --rp-red: #ed1c24; --rp-red-700: #c4121a; --rp-red-50: #fdeced;
    --rp-yellow: #eac102; --rp-yellow-600: #c9a500; --rp-yellow-50: #fdf7dc;
    --rp-green: #1f9d55; --rp-green-50: #e7f6ee;
    --rp-text: #17212b; --rp-muted: #5d6b7a; --rp-border: #dde3ea; --rp-bg: #f3f6f9; --rp-card: #fff;
    --rp-radius: 14px; --rp-shadow: 0 1px 2px rgba(16,24,40,.05), 0 4px 16px rgba(16,24,40,.06);
}

/* ---------- Shell ---------- */
.fi-body { background: var(--rp-bg); color: var(--rp-text); }
.rp-stripe { height: 5px; background: linear-gradient(90deg, var(--rp-blue) 0 33.3%, var(--rp-red) 33.3% 66.6%, var(--rp-yellow) 66.6%); }

.fi-topbar { background: var(--rp-blue); color: #fff; box-shadow: none; }
.fi-topbar .fi-icon-btn, .fi-topbar .fi-icon-btn .fi-icon { color: #fff; }
.fi-topbar .fi-icon-btn:hover { background: rgba(255,255,255,.12); }
.fi-topbar-item-btn { color: rgba(255,255,255,.88); }
.fi-topbar-item-btn .fi-icon, .fi-topbar-item-label { color: inherit; }
.fi-topbar-item-btn:hover, .fi-topbar-item-btn:focus-visible { background: rgba(255,255,255,.12); color: #fff; }
.fi-topbar-item.fi-active .fi-topbar-item-btn { background: #fff; }
.fi-topbar-item.fi-active .fi-topbar-item-btn > .fi-icon, .fi-topbar-item.fi-active .fi-topbar-item-label { color: var(--rp-blue); }
.fi-topbar-item-label { font-weight: 600; }
.fi-topbar .fi-user-menu-trigger .fi-avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.6); }

.rp-brand { display: flex; align-items: center; gap: .7rem; color: inherit; height: 100%; }
.rp-brand-logo { height: 2.75rem; width: auto; filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.rp-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.rp-brand-name { font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; color: #fff; }
.rp-brand-sub { font-size: .75rem; color: rgba(255,255,255,.85); }
.fi-simple-layout .rp-brand { flex-direction: column; text-align: center; gap: .5rem; }
.fi-simple-layout .rp-brand-logo { height: 5.5rem; filter: none; }
.fi-simple-layout .rp-brand-name { color: var(--rp-blue-900); font-size: 1.35rem; }
.fi-simple-layout .rp-brand-sub { color: var(--rp-muted); font-size: .85rem; }
.fi-simple-layout .fi-logo { height: auto !important; }


/* ---------- Publicador ---------- */
.fi-btn.fi-color-primary:not(.fi-outlined) { background: var(--rp-blue); color: #fff; }
.fi-btn.fi-color-primary:not(.fi-outlined):hover { background: var(--rp-blue-700); }
.pub-hint { color: var(--rp-muted); font-size: .85rem; }
.pub-note { color: var(--rp-muted); font-size: .82rem; margin-top: .5rem; }
.pub-result { display: flex; flex-direction: column; gap: 1rem; }
.pub-card { background: var(--rp-card); border: 1px solid var(--rp-border); border-radius: var(--rp-radius); padding: 1.1rem; }
.pub-card h2 { font-size: 1rem; font-weight: 700; margin-bottom: .75rem; }

.pub-pv { border: 1px solid var(--rp-border); border-radius: 10px; overflow: hidden; background: #fff; max-width: 440px; margin: 0 auto .75rem; }
.pub-pv img { display: block; width: 100%; }
.pub-pv-head { display: flex; gap: .55rem; align-items: center; padding: .6rem .75rem; font-weight: 600; font-size: .875rem; }
.pub-pv-head img { width: 28px; height: 28px; object-fit: contain; }
.pub-pv-body { padding: .6rem .75rem; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .875rem; }
.pub-pv-web h3 { font-size: 1.15rem; font-weight: 700; padding: .75rem .75rem 0; overflow-wrap: anywhere; color: var(--rp-blue-900); }
.pub-pv-url { background: var(--rp-bg); color: var(--rp-muted); font-size: .75rem; padding: .35rem .75rem; border-bottom: 1px solid var(--rp-border); }
.pub-pv-ig { aspect-ratio: 1; object-fit: contain; background: #fff; }
.pub-pv-noimg { aspect-ratio: 1; display: grid; place-items: center; background: var(--rp-bg); color: var(--rp-muted); font-size: .85rem; }
.pub-pv-wa { background: #e6ddd4; padding: .85rem; border: 0; }
.pub-bubble { background: #dcf8c6; border-radius: 9px; padding: .3rem; max-width: 92%; margin-left: auto; box-shadow: 0 1px 1px rgba(0,0,0,.12); }
.pub-bubble img { border-radius: 6px; }
.pub-bubble p { white-space: pre-wrap; overflow-wrap: anywhere; padding: .3rem .4rem .1rem; font-size: .85rem; }

.pub-status-row { display: flex; align-items: center; gap: .75rem; padding: .65rem 0; border-bottom: 1px solid var(--rp-border); flex-wrap: wrap; }
.pub-status-row:last-child { border-bottom: 0; padding-bottom: 0; }
.pub-status-row b { min-width: 88px; }
.pub-right { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.pub-error { flex-basis: 100%; color: var(--rp-red-700); font-size: .85rem; }
.pub-pill { display: inline-flex; align-items: center; font-size: .8rem; font-weight: 600; border-radius: 99px; padding: .1rem .6rem; white-space: nowrap; }
.pub-pill.ok { background: var(--rp-green-50); color: #167a41; }
.pub-pill.err { background: var(--rp-red-50); color: var(--rp-red-700); }
.pub-pill.busy { background: var(--rp-blue-50); color: var(--rp-blue-700); }
.pub-pill.wait { background: var(--rp-yellow-50); color: #7a6200; }
.pub-pill.none { background: var(--rp-bg); color: var(--rp-muted); }
.pub-chips { display: flex; flex-wrap: wrap; gap: .25rem; }

.pub-wa { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 640px) { .pub-wa { grid-template-columns: minmax(0, 1fr); } }
.pub-qr { background: #fff; border: 1px solid var(--rp-border); border-radius: 12px; padding: .5rem; width: 220px; }
.pub-qr svg { display: block; width: 100%; height: auto; }
.pub-steps { list-style: decimal; padding-left: 1.25rem; margin-bottom: .85rem; }
.pub-steps li { margin-bottom: .2rem; }
.pub-progress { height: 8px; background: var(--rp-bg); border-radius: 9px; overflow: hidden; margin: .35rem 0; }
.pub-progress i { display: block; height: 100%; background: var(--rp-green); transition: width .25s; }

.pub-emoji-toggle { background: #fff; border: 1px solid var(--rp-border); border-radius: 8px; padding: .25rem .6rem; font-size: .85rem; font-weight: 600; margin-right: .5rem; }
.pub-emoji-toggle:hover { background: var(--rp-bg); }
.pub-emoji-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.25rem, 1fr)); gap: .15rem; margin-top: .4rem; padding: .4rem; max-height: 11rem; overflow-y: auto; background: #fff; border: 1px solid var(--rp-border); border-radius: 10px; }
.pub-emoji-panel button { font-size: 1.25rem; line-height: 1; padding: .3rem 0; border-radius: 6px; }
.pub-emoji-panel button:hover, .pub-emoji-panel button:focus-visible { background: var(--rp-blue-50); }