/* ------------- StartEnd Media — UI ------------- */
:root {
--bg: #f8fafc;
--bg-2: #ffffff;
--panel: #ffffff;
--panel-2: #f1f5f9;
--border: #cbd5e1;
--text: #0f172a;
--muted: #475569;
--muted-2: #64748b;
--primary: #9CC73F;
--primary-2: #B7DA63;
--accent: #6CA635;
--success: #22c55e;
--danger: #ef4444;
--shadow: 0 6px 20px rgba(15,23,42,.08);
--radius: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text);
font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 14px; }
a { color: inherit; text-decoration: none; }
em { font-style: normal; color: var(--accent); font-weight: 700; }
/* ---------- Top bar ---------- */
.topbar {
display: grid;
grid-template-columns: 220px 1fr auto;
align-items: center;
gap: 16px;
padding: 12px 20px;
background: var(--bg-2);
border-bottom: 1px solid var(--border);
position: sticky; top: 0; z-index: 50;
backdrop-filter: blur(6px);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; }
.brand-mark { width: 32px; height: 32px; display: grid; place-items: center;
background: linear-gradient(135deg, var(--primary), var(--accent));
border-radius: 8px; color: #fff; font-weight: 800; letter-spacing: .5px; }
.brand-mark.big { width: 56px; height: 56px; font-size: 22px; border-radius: 14px; }
/* The mark is now an ![]()
(logo.svg brings its own black background). */
img.brand-mark { background: none; object-fit: contain; }
.search { display: flex; align-items: center; gap: 8px; background: var(--panel);
border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; max-width: 720px; }
.search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(99,102,241,.15); }
.search .material-symbols-rounded { color: var(--muted); font-size: 20px; }
.search input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--text); font-size: 14px; }
.search-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid transparent; opacity: 0; transition: opacity .15s; }
.search-spinner.on { opacity: 1; border-color: rgba(99,102,241,.25); border-top-color: var(--primary); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.nav { display: flex; align-items: center; gap: 18px; font-weight: 500; }
.nav a { color: var(--muted); }
.nav a:hover { color: var(--text); }
.nav .muted { opacity: .6; pointer-events: none; }
.me { display: flex; align-items: center; gap: 10px; padding-left: 14px; border-left: 1px solid var(--border); }
.me img { width: 28px; height: 28px; border-radius: 50%; background: var(--panel-2); object-fit: cover; }
.logout { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
background: var(--panel); }
.logout:hover { background: var(--panel-2); color: #fff; }
/* ---------- Auth ---------- */
.auth-page main { min-height: 100vh; }
.auth-shell { min-height: 100vh; display: grid; place-items: center; background: var(--bg); }
.auth-card { padding: 48px 40px; max-width: 460px; width: 100%; text-align: center; }
.auth-card .auth-brand { display: flex; flex-direction: column; align-items: center; }
.auth-card .auth-form { text-align: left; }
.auth-brand h1 { margin: 18px 0 6px; font-size: 28px; }
.auth-brand p { color: var(--muted); margin: 0 0 28px; }
.auth-form { display: grid; gap: 14px; }
.auth-form label { display: grid; gap: 6px; }
.auth-form label span { color: var(--muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.auth-form input { background: var(--panel); border: 1px solid var(--border);
color: var(--text); padding: 12px 14px; border-radius: 10px; font-size: 15px; }
.auth-form input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(99,102,241,.18); }
.auth-form button { margin-top: 6px; padding: 12px 16px; border-radius: 10px;
border: 0; background: linear-gradient(135deg, var(--primary), var(--accent));
color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; }
.auth-form button:hover { filter: brightness(1.05); }
.auth-form .hint { color: var(--muted); font-size: 12px; margin-top: 10px; }
.auth-error { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); color: #fecaca;
padding: 10px 12px; border-radius: 10px; }
.auth-aside { background: radial-gradient(ellipse at top left, rgba(99,102,241,.25), transparent 60%),
linear-gradient(180deg, #0a1226, #050912); display: grid; place-items: center; padding: 48px; }
.auth-aside-inner { max-width: 460px; }
.kicker { color: var(--accent); font-weight: 700; letter-spacing: .18em; font-size: 12px; }
.auth-aside h2 { font-size: 36px; line-height: 1.15; margin: 12px 0 28px; }
.bullets { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.bullets li { display: flex; gap: 12px; align-items: center; color: #cbd5e1; }
.bullets .material-symbols-rounded { color: var(--accent); }
/* ---------- Flash ---------- */
.flash { padding: 10px 20px; background: rgba(34,197,94,.12); color: #bbf7d0;
border-bottom: 1px solid rgba(34,197,94,.3); }
/* ---------- Catalog ---------- */
/* Global 2-col page shell — sidebar lives in base.html and is visible on
EVERY route except those that opt out via .page-shell--solo. */
.page-shell { display: grid; grid-template-columns: 340px 1fr;
gap: 24px; padding: 24px; align-items: start; }
.page-shell--solo { display: block; padding: 0; }
.page-shell--solo .sidebar { display: none; }
@media (max-width: 1024px) {
.page-shell { grid-template-columns: 1fr; }
}
/* Legacy .catalog wrapper (now empty container — sidebar moved out). */
.catalog { display: contents; }
.catalog-results-only { display: block; }
.sidebar { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius);
padding: 16px; height: fit-content; position: sticky; top: 72px; max-height: calc(100vh - 96px);
overflow-y: auto; }
.facet { border-bottom: 1px solid var(--border); padding: 14px 4px; }
.facet:last-of-type { border-bottom: 0; }
.facet h3 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase;
letter-spacing: .08em; color: var(--muted); }
.type-pills { display: grid; gap: 6px; }
.pill { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 8px;
padding: 8px 10px; border-radius: 10px; background: var(--panel); cursor: pointer;
border: 1px solid var(--border); }
.pill:hover { border-color: var(--primary); }
.pill .material-symbols-rounded { font-size: 18px; color: var(--accent); }
.pill em { color: var(--muted); font-size: 12px; }
.pill input { accent-color: var(--primary); }
.pill.disabled { opacity: .45; cursor: not-allowed; }
.scroll-list { display: grid; gap: 4px; max-height: 240px; overflow-y: auto; padding-right: 4px; }
.scroll-list.short { max-height: 170px; }
.row { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 8px;
padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.row:hover { background: var(--panel); }
.row input { accent-color: var(--primary); }
.row .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
/* min-width:0 lets the 1fr grid track shrink below the text's natural
width — without it the ellipsis never kicks in and long campaign names
overflow the floating popup. */
min-width: 0; }
.row em { color: var(--muted); font-size: 11px; }
.row .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.rating-row { display: flex; gap: 4px; flex-wrap: wrap; }
.rpill { background: var(--panel); border: 1px solid var(--border); padding: 6px 10px;
border-radius: 999px; font-size: 12px; cursor: pointer; }
.rpill input { display: none; }
.rpill:has(input:checked) { background: var(--primary); border-color: var(--primary); }
.switch { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.switch input { accent-color: var(--primary); }
/* Pinned to the top of the sidebar's own scroll (the sidebar is the scroll
container), so "Limpiar filtros" is always reachable without scrolling.
Negative margins make it span edge-to-edge over the sidebar padding;
z-index stays below the facet popups (50). */
.sidebar-actions { display: grid; grid-template-columns: 1fr; gap: 8px;
position: sticky; top: -16px; z-index: 10;
margin: -16px -16px 10px; padding: 12px 16px;
background: var(--bg-2); border-bottom: 1px solid var(--border); }
/* ---------- Multi-select facet dropdowns (floating combobox style) ---------- */
.facet-dd { position: relative; padding: 0; list-style: none;
border-bottom: 1px solid var(--border); }
.facet-dd > summary { list-style: none; cursor: pointer;
display: flex; align-items: center; gap: 8px;
padding: 10px 12px; font-size: 12.5px;
color: var(--text); font-weight: 600;
user-select: none; background: var(--panel);
border: 1px solid var(--border); border-radius: 10px;
margin: 8px 0; transition: border-color .12s; }
.facet-dd > summary::-webkit-details-marker { display: none; }
.facet-dd > summary:hover { border-color: var(--primary); }
.facet-dd[open] > summary { border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(156,199,63,.18); }
.facet-dd .facet-name { flex: 1; text-transform: uppercase;
letter-spacing: .04em; font-size: 11px; color: var(--muted);
font-weight: 700; }
.facet-dd[open] .facet-name { color: var(--primary); }
.facet-dd .facet-count { background: var(--primary); color: #1a1a1a;
font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
min-width: 18px; text-align: center;
font-variant-numeric: tabular-nums; letter-spacing: 0; }
.facet-dd .facet-count:empty { display: none; }
.facet-dd .facet-chev { color: var(--muted); transition: transform .15s ease;
font-size: 20px; }
.facet-dd[open] > summary .facet-chev { transform: rotate(180deg); color: var(--primary); }
/* Floating popup (overlays content below instead of pushing it down).
Search input + scroll-list are visually merged into a single popup with
no gap between them — so the underlying facet header (e.g. "VERTICAL")
never bleeds through. Background is fully opaque (--bg-2 is solid). */
.facet-dd > .facet-search,
.facet-dd > .scroll-list { display: none; }
.facet-dd[open] > .facet-search,
.facet-dd[open] > .scroll-list { display: block; }
.facet-dd > .facet-search {
position: absolute; top: 100%; left: 0; right: 0;
z-index: 50; box-sizing: border-box; height: 42px;
background: var(--bg-2); color: var(--text);
border: 2px solid var(--primary); border-bottom: 0;
border-radius: 10px 10px 0 0;
padding: 10px 12px; margin: 0; font-size: 13px;
outline: none; }
.facet-dd > .facet-search:focus { background: var(--bg-2); }
.facet-dd > .facet-search::placeholder { color: var(--muted); }
.facet-dd > .scroll-list {
position: absolute; top: calc(100% + 42px); left: 0; right: 0;
z-index: 50;
/* No internal scroll — show every option. If the list is taller than the
viewport the user scrolls the PAGE to see the bottom items. This is the
"classic native dropdown" behaviour the user explicitly requested. */
max-height: none; overflow: visible;
background: var(--bg-2); border: 2px solid var(--primary); border-top: 0;
border-radius: 0 0 10px 10px; padding: 6px;
box-shadow: 0 16px 32px -12px rgba(0,0,0,.45),
0 0 0 9999px transparent; }
.facet-dd > .scroll-list .row { white-space: normal; }
/* Inside the floating dropdown, let names wrap so they don't get cut off.
overflow-wrap:anywhere is required: campaign names are single unbreakable
"words" (Adeslas_Startend_CPL_ES) that otherwise can't wrap and bleed
outside the popup. */
.facet-dd > .scroll-list .row .name { white-space: normal; overflow: hidden;
text-overflow: clip; line-height: 1.3; overflow-wrap: anywhere; min-width: 0; }
/* Campaign names are long codes — smaller type so they fit comfortably. */
.facet-dd[data-key="campaign"] > .scroll-list .row .name { font-size: 10px; }
/* Make sure the parent details wrapper provides a stacking context so the
popup floats correctly above siblings even when the sidebar is sticky */
.facet-dd[open] { z-index: 60; isolation: isolate; }
/* Hidden rows when search filter doesn't match */
.facet-dd .row.hidden { display: none; }
/* Chip strip showing currently-selected items below the closed dropdown */
.facet-dd .facet-chips { display: flex; flex-wrap: wrap; gap: 4px;
padding: 0 2px 6px; margin: -2px 0 0; }
.facet-dd .facet-chips:empty { display: none; }
.facet-dd .facet-chip { display: inline-flex; align-items: center; gap: 4px;
background: rgba(156,199,63,.18); color: var(--text);
border: 1px solid rgba(156,199,63,.45); border-radius: 999px;
padding: 2px 8px 2px 10px; font-size: 11.5px; font-weight: 600;
max-width: 100%; }
.facet-dd .facet-chip-x { display: inline-grid; place-items: center;
width: 14px; height: 14px; border-radius: 50%;
background: rgba(0,0,0,.08); color: var(--muted); cursor: pointer;
font-size: 11px; line-height: 1; }
.facet-dd .facet-chip-x:hover { background: var(--danger); color: #fff; }
.facet-dd .facet-chip-name { white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; max-width: 160px; }
/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px;
background: var(--panel); color: var(--text); border: 1px solid var(--border);
border-radius: 10px; font-weight: 600; cursor: pointer; font-size: 14px; }
.btn:hover { background: var(--panel-2); }
.btn .material-symbols-rounded { font-size: 18px; }
.btn.primary { background: linear-gradient(135deg, var(--primary), var(--accent)); border: 0; color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
/* ---------- Results ---------- */
.results { min-width: 0; }
.results-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.results-head h1 { font-size: 22px; margin: 0; }
.muted-text { color: var(--muted); margin: 4px 0 0; }
.select { display: flex; align-items: center; gap: 8px; background: var(--panel);
border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.select span { color: var(--muted); font-size: 12px; }
.select select { background: transparent; border: 0; color: var(--text); outline: 0; font-size: 14px; }
.active-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip { background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
padding: 4px 10px; font-size: 12px; color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px; }
.grid.sm { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.card { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius);
overflow: hidden; display: flex; flex-direction: column; transition: transform .15s, border-color .15s, box-shadow .15s;
position: relative; }
.card:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow); }
.card-link { display: flex; flex-direction: column; color: inherit; text-decoration: none; flex: 1; min-height: 0; }
.card-link:hover { color: inherit; }
/* Card selection checkbox (top-left) */
.card-select { position: absolute; top: 8px; left: 8px; z-index: 4;
width: 28px; height: 28px; cursor: pointer; opacity: 0;
transition: opacity .15s ease; }
.card-select input { position: absolute; opacity: 0; pointer-events: none; }
.card-select .cb-box { display: grid; place-items: center;
width: 100%; height: 100%; border-radius: 50%;
background: rgba(2,6,23,.75); border: 2px solid rgba(255,255,255,.4);
backdrop-filter: blur(6px); }
.card-select .cb-box .material-symbols-rounded { font-size: 16px; color: transparent; transition: color .1s; }
.card:hover .card-select,
.card.selected .card-select { opacity: 1; }
.card.selected .cb-box { background: var(--primary); border-color: var(--primary); }
.card.selected .cb-box .material-symbols-rounded { color: #fff; }
.card.selected { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(99,102,241,.35); }
/* Floating selection bar */
#selection-bar { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
background: var(--bg-2); border: 1px solid var(--primary); border-radius: 999px;
padding: 8px 12px 8px 18px; display: inline-flex; align-items: center; gap: 12px;
box-shadow: 0 12px 36px rgba(0,0,0,.5); z-index: 200; }
#selection-bar[hidden] { display: none; }
#selection-bar .sel-count { color: var(--text); font-size: 13px; padding-right: 4px; }
#selection-bar .sel-count strong { color: var(--accent); margin-right: 4px; }
/* Siblings grid on detail page: highlight current */
.card.is-current { outline: 3px solid var(--primary); outline-offset: 2px; }
/* Quick download button on the thumbnail itself */
.quick-dl { position: absolute; top: 8px; right: 8px;
width: 32px; height: 32px; border-radius: 50%;
background: rgba(2,6,23,.75); color: #fff;
display: grid; place-items: center; z-index: 3;
border: 1px solid rgba(255,255,255,.15);
backdrop-filter: blur(6px);
opacity: 0; transform: translateY(-4px);
transition: opacity .15s ease, transform .15s ease, background .15s ease;
text-decoration: none; }
.quick-dl .material-symbols-rounded { font-size: 18px; }
.card:hover .quick-dl { opacity: 1; transform: translateY(0); }
.quick-dl:hover { background: var(--primary); color: #fff; transform: scale(1.08); }
.quick-dl:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 2px; }
/* When two action buttons coexist (download + delete), stack them */
.quick-dl.danger { top: 46px; background: rgba(127,17,17,.85); border: 0; cursor: pointer; padding: 0; }
.quick-dl.danger:hover { background: var(--danger); }
.card:has(.badge.campaign) .quick-dl { top: 40px; }
.card:has(.badge.campaign) .quick-dl.danger { top: 78px; }
.thumb { position: relative; aspect-ratio: 4/3; background: var(--panel); overflow: hidden; }
.thumb img,
.thumb video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.thumb video { pointer-events: none; background: linear-gradient(135deg, #0b1220, #1f2937); }
.thumb video:not([src]) { /* dormant lazy video — show a soft gradient instead of a white frame */
background: linear-gradient(135deg, #111a2e, #0b1220);
}
.play-overlay { position: absolute; inset: 0; display: grid; place-items: center;
pointer-events: none; opacity: .85; transition: opacity .15s; }
.play-overlay .material-symbols-rounded { font-size: 56px; color: #fff;
background: rgba(0,0,0,.55); border-radius: 50%; padding: 8px; backdrop-filter: blur(4px); }
.play-overlay.landing .material-symbols-rounded { font-size: 36px; padding: 12px; }
.card:hover .play-overlay { opacity: 0; }
/* Stacked "deck" effect on carousel cards */
.stack-tab { position: absolute; left: 6px; right: 6px; height: 6px;
bottom: -3px; background: var(--panel-2); border: 1px solid var(--border);
border-top: 0; border-radius: 0 0 8px 8px; opacity: .8; }
.stack-tab.two { bottom: -7px; left: 12px; right: 12px; opacity: .55; height: 5px; }
.card:has(.stack-tab) { margin-bottom: 8px; }
.newsletter-thumb { position: relative; width: 100%; height: 100%;
overflow: hidden; background: #fff; }
/* Render iframe at "desktop newsletter" pixel size and scale it down to fit
the card. transform-origin keeps the top-left visible (newsletters almost
always have the most relevant content — logo + hero — at the top). */
.newsletter-thumb iframe { position: absolute; top: 0; left: 0;
width: 700px; height: 525px;
transform: scale(0.4); transform-origin: 0 0;
border: 0; pointer-events: none; background: #fff; }
/* Transparent overlay that absorbs clicks so the parent always wins
even if the iframe content itself has interactive elements. */
.newsletter-shield { position: absolute; inset: 0; background: transparent;
cursor: pointer; }
.badge { position: absolute; display: inline-flex; align-items: center; gap: 4px;
background: rgba(2,6,23,.7); color: #fff; padding: 4px 8px; border-radius: 999px;
font-size: 11px; font-weight: 600; backdrop-filter: blur(4px); }
.badge.type { top: 8px; left: 8px; }
.badge.type .material-symbols-rounded { font-size: 14px; }
.badge.campaign { top: 8px; right: 8px; max-width: 60%; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.badge.rating { bottom: 8px; right: 8px; background: rgba(0,0,0,.72); }
/* "IA" badge: material generated or edited with AI (tag 'IA') */
.badge.ia { bottom: 8px; left: 8px;
background: linear-gradient(135deg, #7C3AED, #C026D3); color: #fff; }
.badge.ia .material-symbols-rounded { font-size: 13px; }
/* When NUEVO and IA coexist, shift IA to the right of NUEVO */
.thumb:has(.badge.new-badge) .badge.ia { left: 76px; }
.title-row .badge.ia { position: static; }
/* "NUEVO" badge for materials uploaded in the last NEW_BADGE_DAYS days */
.badge.new-badge { bottom: 8px; left: 8px;
background: linear-gradient(135deg, #22d3ee, #10b981);
color: #0b1220; font-weight: 800; letter-spacing: .04em;
box-shadow: 0 2px 10px rgba(34,211,238,.4);
animation: pulse-new 2s ease-in-out infinite; }
@keyframes pulse-new {
0%, 100% { box-shadow: 0 2px 10px rgba(34,211,238,.35); }
50% { box-shadow: 0 2px 18px rgba(34,211,238,.85); }
}
/* Inside detail title-row the badge sits static (no overlay positioning) */
.title-row .badge.new-badge { position: static; }
/* Download history under the detail metadata */
.dl-log { font-size: 12px; }
.dl-log summary { cursor: pointer; color: var(--accent); user-select: none; }
.dl-log summary:hover { color: var(--text); }
.dl-list { list-style: none; padding: 6px 0 0; margin: 0;
max-height: 200px; overflow-y: auto; }
.dl-list li { display: flex; justify-content: space-between; gap: 8px;
padding: 4px 8px; background: var(--panel); border-radius: 6px; margin-top: 4px; }
.dl-user { color: var(--text); font-weight: 600; }
.dl-at { color: var(--muted); font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; }
.card-body { padding: 10px 12px; display: grid; gap: 6px; }
.card-title { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; user-select: text; -webkit-user-select: text; cursor: text; }
.card-meta { font-size: 11px; color: var(--muted); display: flex; gap: 6px; }
.card-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.card-tags .t { background: var(--panel); border-radius: 6px; padding: 2px 6px; font-size: 10px; color: var(--muted); }
/* Brand-coloured channel chips. Works for both .card-tags and detail page. */
.t[data-tag="ia"] { background: linear-gradient(135deg, #7C3AED, #C026D3); color: #fff; }
.t[data-tag="meta"] { background: #1877F2; color: #fff; }
.t[data-tag="google"] { background: #4285F4; color: #fff; }
.t[data-tag="tiktok"] { background: #000000; color: #fff; box-shadow: inset 0 0 0 1px #25F4EE; }
.t[data-tag="x"] { background: #000000; color: #fff; }
.t[data-tag="youtube"] { background: #FF0000; color: #fff; }
.t[data-tag="push"] { background: #7C3AED; color: #fff; }
.t[data-tag="email"] { background: #64748B; color: #fff; }
.t[data-tag="printrest"], .t[data-tag="pinterest"] { background: #E60023; color: #fff; }
.t[data-tag="taboola"] { background: #00C2A8; color: #fff; }
/* pagination */
.pagination { display: flex; gap: 4px; justify-content: center; padding: 28px 0; flex-wrap: wrap; }
.pagination a { padding: 8px 12px; border-radius: 8px; background: var(--panel); border: 1px solid var(--border); font-size: 13px; }
.pagination a.current { background: var(--primary); border-color: var(--primary); color: #fff; }
.pagination .dots { padding: 8px 4px; color: var(--muted); }
/* empty */
.empty { display: grid; place-items: center; padding: 80px 20px; color: var(--muted); text-align: center; }
.empty .material-symbols-rounded { font-size: 48px; color: var(--muted-2); }
.empty h3 { margin: 8px 0 4px; color: var(--text); }
/* ---------- Carousel viewer ---------- */
.carousel { position: relative; width: 100%; background: #000; aspect-ratio: 16/10;
display: grid; place-items: center; overflow: hidden; }
.carousel-track { position: relative; width: 100%; height: 100%; }
.carousel-slide { position: absolute; inset: 0; display: grid; place-items: center;
opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.carousel-slide.active { opacity: 1; pointer-events: auto; }
.carousel-slide img { max-width: 100%; max-height: 100%; object-fit: contain; }
.carousel-slide .slide-name { position: absolute; bottom: 8px; left: 50%;
transform: translateX(-50%); background: rgba(0,0,0,.6); color: #fff;
padding: 4px 10px; border-radius: 999px; font-size: 11px;
backdrop-filter: blur(4px); max-width: 80%; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%);
width: 44px; height: 44px; border-radius: 50%; border: 0;
background: rgba(255,255,255,.95); color: #0b1220; cursor: pointer;
display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.carousel-btn:hover { background: #fff; transform: translateY(-50%) scale(1.05); }
.carousel-btn:disabled { opacity: .35; cursor: default; transform: translateY(-50%); }
.carousel-btn.prev { left: 12px; }
.carousel-btn.next { right: 12px; }
.carousel-counter { position: absolute; top: 10px; right: 12px;
background: rgba(0,0,0,.6); color: #fff; padding: 4px 10px;
border-radius: 999px; font-size: 12px; backdrop-filter: blur(4px); }
.carousel-strip { display: flex; gap: 6px; overflow-x: auto; padding: 10px 4px;
margin-top: 8px; }
.strip-thumb { position: relative; flex: 0 0 96px; height: 72px;
border-radius: 8px; overflow: hidden; border: 2px solid transparent;
background: var(--panel); cursor: pointer; padding: 0; }
.strip-thumb:hover { border-color: var(--muted); }
.strip-thumb.active { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.25); }
.strip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.strip-thumb span { position: absolute; top: 4px; left: 4px;
background: rgba(0,0,0,.7); color: #fff; padding: 1px 6px;
border-radius: 999px; font-size: 10px; font-weight: 600; }
/* ---------- Detail ---------- */
.detail { padding: 24px; max-width: 1400px; margin: 0 auto; }
.detail-back a { color: var(--muted); display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.detail-back a:hover { color: var(--text); }
.detail-grid { display: grid; grid-template-columns: 1fr 380px; gap: 24px; }
@media (max-width: 1024px) { .detail-grid { grid-template-columns: 1fr; } }
.preview { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius);
overflow: hidden; min-height: 360px; display: grid; place-items: center; }
.preview img, .preview video { width: 100%; max-height: 78vh; object-fit: contain; display: block; background: #000; }
.iframe-wrap { width: 100%; aspect-ratio: 16/10; }
.iframe-wrap iframe { width: 100%; height: 100%; border: 0; background: #fff; }
/* "Otros": archivos sin previsualización (pdf, zip, ppt, psd…) */
.file-card { display: grid; place-items: center; gap: 10px; padding: 48px 24px; text-align: center; }
.file-card-icon { font-size: 72px; color: var(--muted); line-height: 1; }
.file-card-ext { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
letter-spacing: .08em; background: var(--panel); border: 1px solid var(--border);
padding: 4px 10px; border-radius: 999px; }
.file-card-name { margin: 0; font-size: 14px; color: var(--muted); word-break: break-all; }
.file-card audio { width: min(100%, 420px); margin-top: 4px; }
.sideinfo { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius);
padding: 18px; align-self: start; position: sticky; top: 84px; }
.title-row { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.title-row .badge { position: static; }
.filename { font-size: 18px; word-break: break-all; margin: 4px 0 6px; }
.desc { color: var(--muted); margin: 4px 0 14px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.meta { display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px; font-size: 13px; margin: 0; }
.meta dt { color: var(--muted); }
.meta dd { margin: 0; word-break: break-word; }
.meta .t { background: var(--panel); border-radius: 6px; padding: 2px 6px; font-size: 11px; color: var(--muted); display: inline-block; }
.related { margin-top: 36px; }
.related h2 { font-size: 18px; margin: 0 0 12px; }
/* ---------- Admin ---------- */
.admin-shell { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 60px); }
.admin-side { background: var(--bg-2); border-right: 1px solid var(--border); padding: 20px 12px; display: grid; gap: 4px; align-content: start; }
.admin-side h3 { margin: 0 0 10px; padding: 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.admin-side a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--muted); font-weight: 500; }
.admin-side a:hover { background: var(--panel); color: var(--text); }
.admin-side a.active { background: linear-gradient(135deg, rgba(99,102,241,.25), rgba(34,211,238,.15)); color: #fff; border: 1px solid rgba(99,102,241,.4); }
.admin-side .material-symbols-rounded { font-size: 20px; }
.admin-side a.back { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 16px; color: var(--muted-2); font-size: 13px; }
.admin-main { padding: 24px 28px; max-width: 1300px; min-width: 0; }
.admin-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.admin-head h1 { margin: 0; font-size: 22px; flex: 1; }
.admin-head .muted-text { font-size: 14px; font-weight: 400; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; }
.stat { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.stat .lbl { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: 6px; }
.stat .lbl .material-symbols-rounded { font-size: 16px; color: var(--accent); }
.stat strong { display: block; font-size: 28px; margin-top: 6px; font-weight: 800; }
.stat.type strong { font-size: 22px; }
.card-panel { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 18px; }
.card-panel h2 { margin: 0 0 12px; font-size: 16px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th, .data-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.data-table th { background: var(--panel); color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.data-table .mini { width: 64px; height: 48px; border-radius: 6px; object-fit: cover; background: var(--panel); }
.data-table .actions-cell { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.btn.small { padding: 6px 10px; font-size: 12px; }
.btn.danger { background: rgba(239,68,68,.16); border-color: rgba(239,68,68,.4); color: #fecaca; }
.btn.danger:hover { background: rgba(239,68,68,.28); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .form-grid { grid-template-columns: 1fr; } }
.form-col { display: grid; gap: 12px; align-content: start; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field { display: grid; gap: 6px; }
.field > span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.field input, .field select, .field textarea {
background: var(--panel); border: 1px solid var(--border); color: var(--text);
padding: 10px 12px; border-radius: 8px; font-size: 14px; font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.18); }
.field.grow { flex: 1; }
.form-inline { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.form-inline .field { min-width: 140px; }
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.block summary { cursor: pointer; padding: 8px 0; color: var(--muted); }
.block { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; display: grid; gap: 10px; }
.dropzone { position: relative; display: block; padding: 36px; border: 2px dashed var(--border); border-radius: 14px; background: var(--panel); cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone.over { border-color: var(--primary); background: rgba(99,102,241,.06); }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone .material-symbols-rounded { font-size: 36px; color: var(--accent); display: block; margin-bottom: 6px; }
.dropzone small { display: block; color: var(--muted); margin-top: 6px; }
#dz-files { margin-top: 12px; display: grid; gap: 4px; text-align: left; }
.dz-file { font-size: 12px; padding: 4px 8px; background: var(--bg-2); border-radius: 6px; border: 1px solid var(--border); }
.inline { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.row-form { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 6px 0; }
.row-form input, .row-form select { background: var(--panel); border: 1px solid var(--border); color: var(--text); padding: 6px 8px; border-radius: 6px; font-size: 12px; }
.inline-search { display: flex; gap: 6px; flex: 1; max-width: 480px; }
.inline-search input { flex: 1; background: var(--panel); border: 1px solid var(--border); color: var(--text); padding: 8px 12px; border-radius: 8px; }
.edit-grid { display: grid; grid-template-columns: 360px 1fr; gap: 24px; }
@media (max-width: 1000px) { .edit-grid { grid-template-columns: 1fr; } }
.preview-pane { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; height: fit-content; }
.preview-pane img { width: 100%; border-radius: 8px; aspect-ratio: 4/3; object-fit: cover; background: var(--panel); }
.fields-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.chip-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip-list li { display: inline-flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--border); padding: 4px 8px; border-radius: 999px; font-size: 12px; }
.chip-list .x { background: transparent; border: 0; color: var(--danger); font-size: 16px; cursor: pointer; padding: 0 4px; }
.ok { color: #bbf7d0; display: flex; align-items: center; gap: 6px; }
.err { color: #fecaca; display: flex; align-items: center; gap: 6px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--panel); padding: 8px 12px; border-radius: 8px; list-style: none; margin: 6px 0 0; max-height: 200px; overflow: auto; }
.howto { padding-left: 18px; color: var(--muted); line-height: 1.6; }
/* ---------- Upload UI ---------- */
.upload-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 18px; padding-bottom: 0; }
.upload-tabs .tab { display: inline-flex; gap: 8px; align-items: center; background: transparent; color: var(--muted);
border: 0; padding: 10px 16px; cursor: pointer; font-weight: 600; font-size: 14px;
border-bottom: 2px solid transparent; }
.upload-tabs .tab.active { color: var(--text); border-bottom-color: var(--primary); }
.upload-tabs .tab:hover { color: var(--text); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.ftp-banner { display: flex; gap: 12px; align-items: flex-start;
background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.4);
color: #fed7aa; padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: 13px; }
.ftp-banner .material-symbols-rounded { color: #fbbf24; flex-shrink: 0; }
.ftp-banner a { color: #fef3c7; text-decoration: underline; }
.field em.req { color: #fca5a5; margin-left: 4px; font-weight: 700; font-style: normal; }
.btn.primary:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(50%); }
.btn.primary:disabled:hover { filter: grayscale(50%); }
.mode-radio { border: 1px solid var(--border); background: var(--panel); border-radius: 10px;
padding: 8px 12px; display: inline-flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.mode-radio legend { padding: 0 6px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.mode-radio .rpill { background: var(--bg-2); padding: 6px 12px; }
.btn.big { padding: 12px 18px; font-size: 15px; justify-content: center; }
.files-toolbar { display: flex; justify-content: flex-end; margin-top: 12px; }
.files-toolbar .btn { display: inline-flex; align-items: center; gap: 6px; }
.files-list { display: grid; gap: 6px; margin-top: 6px; text-align: left; }
.file-row { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.fr-main { display: grid; grid-template-columns: auto 1fr auto auto auto auto; gap: 10px; font-size: 13px; align-items: center; }
.fr-remove {
width: 28px; height: 28px; border-radius: 50%;
border: 1px solid var(--border); background: #fff;
color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer;
display: grid; place-items: center; padding: 0;
transition: background .15s, color .15s, border-color .15s, transform .08s;
}
.fr-remove:hover { background: var(--danger); color: #fff; border-color: var(--danger); transform: scale(1.08); }
/* "Personalizar" button — labelled, clearly OFF (white) vs ON (filled green + glow) */
.fr-edit {
display: inline-flex; align-items: center; gap: 8px;
height: 38px; padding: 0 14px 0 12px; border-radius: 999px;
border: 1.5px solid var(--border); background: #fff;
color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1;
cursor: pointer; white-space: nowrap;
transition: background .15s, color .15s, border-color .15s, transform .08s, box-shadow .15s;
}
.fr-edit .fr-edit-icon { font-size: 18px; line-height: 1; }
.fr-edit:hover { background: rgba(156,199,63,.12); border-color: var(--primary); color: var(--text); transform: translateY(-1px); }
.fr-edit.on {
background: var(--primary); border-color: var(--primary); color: #1a1a1a;
box-shadow: 0 0 0 3px rgba(156,199,63,.28), 0 2px 8px rgba(0,0,0,.10);
}
.fr-edit.on .fr-edit-text::after { content: ' ✓'; }
/* Whole row clickable to toggle; hover and open states are obvious */
.fr-main { cursor: pointer; border-radius: 8px; padding: 4px 6px;
transition: background .12s ease; }
.fr-main:hover { background: rgba(156,199,63,.08); }
.fr-main.open { background: rgba(156,199,63,.14); }
.fr-main.open .fr-name { color: var(--primary); font-weight: 700; }
.file-row.uploading .fr-remove,
.file-row.ok .fr-remove,
.file-row.err .fr-remove,
.file-row.uploading .fr-edit,
.file-row.ok .fr-edit,
.file-row.err .fr-edit { display: none; }
.file-row.uploading .fr-main,
.file-row.ok .fr-main,
.file-row.err .fr-main { cursor: default; }
.file-row.uploading .fr-main:hover,
.file-row.ok .fr-main:hover,
.file-row.err .fr-main:hover { background: transparent; }
/* Hint banner above the file list */
.files-hint { flex: 1; font-size: 12.5px; color: var(--muted);
background: rgba(156,199,63,.10); border: 1px dashed rgba(156,199,63,.45);
border-radius: 8px; padding: 6px 10px; }
.files-hint strong { color: var(--primary); font-weight: 700; }
.files-toolbar { gap: 10px; align-items: center; }
/* Per-file overrides header (with close button) */
.fr-overrides-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin: 4px 0 10px;
padding: 6px 8px; border-radius: 8px;
background: rgba(156,199,63,.10);
border: 1px solid rgba(156,199,63,.30);
}
.fr-overrides-title { font-size: 13px; font-weight: 700; color: var(--text); }
.fr-close {
display: inline-flex; align-items: center; gap: 4px;
height: 30px; padding: 0 12px; border-radius: 999px;
border: 1.5px solid var(--danger); background: #fff;
color: var(--danger); font-size: 12.5px; font-weight: 700;
cursor: pointer; white-space: nowrap;
transition: background .12s, color .12s, transform .08s;
}
.fr-close:hover { background: var(--danger); color: #fff; transform: scale(1.05); }
/* ---------- Chip sections for upload form ----------- */
.chip-section { margin: 12px 0; padding: 0; background: var(--bg-2);
border: 1px solid var(--border); border-radius: 12px;
overflow: hidden; }
.chip-section > summary, .chip-section > header { display: flex;
align-items: center; gap: 10px; padding: 12px 14px;
font-size: 13px; font-weight: 700; color: var(--text);
cursor: pointer; user-select: none; list-style: none;
transition: background 120ms ease; }
.chip-section > summary::-webkit-details-marker { display: none; }
.chip-section > summary:hover { background: rgba(156,199,63,.06); }
.chip-section .chip-title { text-transform: uppercase; letter-spacing: .04em;
font-size: 12px; color: var(--muted); font-weight: 700; }
.chip-section .chip-icon { font-size: 18px; line-height: 1; }
.chip-section .chip-chev { margin-left: auto; display: inline-flex;
width: 22px; height: 22px; align-items: center; justify-content: center;
color: var(--primary); font-size: 12px; font-weight: 700;
background: rgba(156,199,63,.15); border-radius: 50%;
transition: transform 160ms ease, background 160ms ease; }
.chip-section[open] > summary .chip-chev { transform: rotate(90deg);
background: var(--primary); color: #1a1a1a; }
.chip-section > .chip-group,
.chip-section > .rating-pills,
.chip-section > .chip-section-tools { margin: 0 14px 14px; }
.chip-section-tools { display: flex; gap: 8px; margin-bottom: 8px; padding: 0 14px; }
.chip-section .chip-search { flex: 1; max-width: 100%;
padding: 7px 12px; border: 1.5px solid var(--border); border-radius: 8px;
font-size: 13px; background: #fff; color: var(--text); font-family: inherit; }
.chip-section .chip-search:focus { outline: none; border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(156,199,63,.2); }
.field-label { color: var(--muted); font-weight: 600; font-size: 12px;
text-transform: uppercase; letter-spacing: .04em; display: block; margin-bottom: 6px; }
.chip-group { display: flex; flex-wrap: wrap; gap: 6px;
padding: 8px; background: #fff; border: 1px solid var(--border);
border-radius: 10px; }
.chip-group.scrollable { max-height: 130px; overflow-y: auto; padding: 4px; border: 1px solid var(--border); border-radius: 8px; }
.chip-group.big-scroll { max-height: 280px; overflow-y: auto;
padding: 10px; border: 1px solid var(--border); border-radius: 10px;
background: #fff; align-content: flex-start; }
.chip-group.big-scroll::-webkit-scrollbar { width: 8px; }
.chip-group.big-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.chip-group.big-scroll::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }
.adv-block { background: var(--bg-2); border: 1px solid var(--border);
border-radius: 12px; padding: 14px 16px; margin-top: 16px; }
.adv-block > summary { cursor: pointer; font-weight: 700; font-size: 14px;
color: var(--text); padding: 4px 0; user-select: none; }
.adv-block[open] > summary { margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
/* Modern chip pill — Linear/Vercel inspired
- Soft 1px borders, subtle shadows, smooth micro-interactions
- Hardware-accelerated transitions on transform/opacity only for 60fps */
.chip-btn { position: relative; cursor: pointer; user-select: none;
-webkit-tap-highlight-color: transparent; }
.chip-btn input { position: absolute; opacity: 0; pointer-events: none;
inset: 0; margin: 0; }
.chip-btn > span { display: inline-flex; align-items: center; gap: 4px;
padding: 7px 13px; border-radius: 999px; line-height: 1;
border: 1px solid var(--border); background: #ffffff; color: var(--text);
font-size: 13px; font-weight: 500; letter-spacing: -0.005em;
white-space: nowrap; box-shadow: 0 1px 2px rgba(15,23,42,.04);
transition: background 140ms ease, border-color 140ms ease,
color 140ms ease, box-shadow 140ms ease,
transform 80ms ease; will-change: transform; }
.chip-btn:hover > span { background: #f8fafc; border-color: var(--primary-2);
transform: translateY(-1px); box-shadow: 0 2px 6px rgba(15,23,42,.08); }
.chip-btn:active > span { transform: translateY(0) scale(.97); }
.chip-btn input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.chip-btn input:checked + span {
background: var(--primary);
border-color: var(--primary);
color: #1a1a1a; font-weight: 600;
box-shadow: 0 4px 10px rgba(156,199,63,.35),
inset 0 1px 0 rgba(255,255,255,.4);
}
.chip-btn input:checked + span::before { content: "✓"; font-weight: 700; }
.chip-btn.small > span { padding: 5px 10px; font-size: 12px; }
.chip-btn.small input:checked + span::before { content: ""; }
/* Brand-coloured CHANNEL chips when selected — solid bg, white text, subtle glow */
.chip-channel[data-channel="meta"] input:checked + span { background: #1877F2; border-color: #1877F2; color: #fff; box-shadow: 0 4px 12px rgba(24,119,242,.35), inset 0 1px 0 rgba(255,255,255,.15); }
.chip-channel[data-channel="google"] input:checked + span { background: #4285F4; border-color: #4285F4; color: #fff; box-shadow: 0 4px 12px rgba(66,133,244,.35), inset 0 1px 0 rgba(255,255,255,.15); }
.chip-channel[data-channel="tiktok"] input:checked + span { background: linear-gradient(135deg, #000, #1a1a1a); border-color: #25F4EE; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.4), inset 0 0 0 1.5px #25F4EE; }
.chip-channel[data-channel="x"] input:checked + span { background: #000; border-color: #000; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.chip-channel[data-channel="youtube"] input:checked + span { background: #FF0033; border-color: #FF0033; color: #fff; box-shadow: 0 4px 12px rgba(255,0,51,.35); }
.chip-channel[data-channel="push"] input:checked + span { background: #7C3AED; border-color: #7C3AED; color: #fff; box-shadow: 0 4px 12px rgba(124,58,237,.35); }
.chip-channel[data-channel="email"] input:checked + span { background: #64748B; border-color: #64748B; color: #fff; box-shadow: 0 4px 12px rgba(100,116,139,.35); }
.chip-channel[data-channel="pinterest"] input:checked + span,
.chip-channel[data-channel="printrest"] input:checked + span { background: #E60023; border-color: #E60023; color: #fff; box-shadow: 0 4px 12px rgba(230,0,35,.35); }
.chip-channel[data-channel="taboola"] input:checked + span { background: #00C2A8; border-color: #00C2A8; color: #fff; box-shadow: 0 4px 12px rgba(0,194,168,.35); }
/* Brand channels show white check */
.chip-channel input:checked + span::before { content: "✓"; }
/* Verticals and formato use the default green (var(--primary)) when selected
— no per-category color overrides, so the UI stays consistent. */
/* Rating star pills — modern */
.rating-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.rate-pill { position: relative; cursor: pointer; }
.rate-pill input { position: absolute; opacity: 0; pointer-events: none; inset: 0; }
.rate-pill > span { display: inline-block; padding: 6px 12px; border-radius: 10px;
border: 1px solid var(--border); background: #fff; color: #f59e0b;
font-size: 13px; line-height: 1; box-shadow: 0 1px 2px rgba(15,23,42,.04);
transition: background 140ms ease, border-color 140ms ease, transform 80ms ease,
box-shadow 140ms ease; }
.rate-pill:hover > span { transform: translateY(-1px); border-color: var(--primary-2);
box-shadow: 0 2px 6px rgba(15,23,42,.08); }
.rate-pill input:checked + span { background: var(--primary); border-color: var(--primary);
color: #1a1a1a; box-shadow: 0 4px 10px rgba(156,199,63,.35); }
/* Count badge next to chip-section title — appears when ≥1 selected */
.count-badge { display: none; padding: 2px 8px; border-radius: 999px;
background: var(--primary); color: #1a1a1a; font-size: 11px; font-weight: 700;
line-height: 1.4; margin-left: 4px; box-shadow: 0 1px 3px rgba(156,199,63,.3); }
.count-badge.has-count { display: inline-flex; align-items: center; }
/* File preview thumbnails inside upload rows */
.fr-preview { width: 56px; height: 56px; border-radius: 6px; object-fit: cover;
background: var(--panel-2); border: 1px solid var(--border); flex-shrink: 0; }
.fr-preview.placeholder { display: grid; place-items: center; color: var(--muted-2); font-size: 11px; }
.file-row .fr-main { grid-template-columns: 56px 1fr auto auto auto auto; }
/* Per-row override panel — single column, sections stacked vertically */
.fr-overrides { display: flex; flex-direction: column; gap: 10px;
padding: 10px 0 4px; margin-top: 6px; border-top: 1px dashed var(--border); }
/* Critical: explicit display:flex above would shadow the [hidden] attribute,
so re-assert that hidden means hidden (this is what togglePanel relies on). */
.fr-overrides[hidden] { display: none !important; }
.fr-field { display: grid; gap: 4px; font-size: 12px; min-width: 0; }
.fr-field.fr-wide { width: 100%; }
.fr-overrides .chip-section { margin: 0; padding: 10px 12px; }
.fr-overrides .chip-section > header { font-size: 12px; margin-bottom: 8px; }
.fr-overrides .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fr-field > span { color: var(--muted); font-weight: 600; }
.fr-field > span small { color: var(--muted-2); font-weight: 400; margin-left: 4px; }
.fr-field input, .fr-field select {
background: var(--panel); border: 1px solid var(--border); color: var(--text);
padding: 6px 8px; border-radius: 6px; font-size: 13px; font-family: inherit;
width: 100%;
}
.fr-field select[multiple] { padding: 4px; }
.fr-field input:focus, .fr-field select:focus {
outline: none; border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(156,199,63,.20);
}
.fr-adv-wrap { grid-column: 1 / -1; margin-top: 4px; }
.fr-adv-wrap summary { cursor: pointer; color: var(--muted); font-size: 12px;
font-weight: 600; padding: 4px 0; }
.fr-adv-wrap[open] summary { color: var(--text); }
.fr-adv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 6px; }
.fr-adv .fr-field:nth-last-child(-n+2) { grid-column: span 1; }
@media (max-width: 720px) {
.fr-adv { grid-template-columns: 1fr; }
}
.fr-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-size { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.fr-status { font-weight: 600; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fr-bar { height: 4px; background: var(--panel); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.fr-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--primary), var(--accent));
transition: width .15s ease; }
.file-row.pending .fr-status { color: var(--muted-2); }
.file-row.uploading .fr-status { color: var(--accent); }
.file-row.ok .fr-status { color: #4ade80; }
.file-row.ok { border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.06); }
.file-row.err .fr-status { color: #fecaca; }
.file-row.err { border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.08); }
.file-row.skip .fr-status { color: var(--muted); }
#files-summary { background: rgba(99,102,241,.06); border: 1px solid rgba(99,102,241,.25);
border-radius: 10px; padding: 10px 14px; margin-top: 12px; }
.conflict-dialog { background: var(--bg-2); color: var(--text); border: 1px solid var(--border);
border-radius: 14px; padding: 22px 24px; max-width: 480px; box-shadow: var(--shadow); }
.conflict-dialog::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(4px); }
.conflict-dialog h3 { margin: 0 0 10px; }
.conflict-dialog code { background: var(--panel); padding: 2px 6px; border-radius: 4px; font-size: 13px; }
.conflict-actions { display: flex; gap: 8px; padding: 0; margin: 18px 0 0; flex-wrap: wrap; }
/* Slack post-upload confirmation dialog */
.slack-dialog { background: var(--bg-2); color: var(--text);
border: 1px solid var(--border); border-radius: 14px;
padding: 22px 24px; max-width: 640px; width: 90vw;
box-shadow: var(--shadow); }
.slack-dialog::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(4px); }
.slack-dialog h3 { margin: 0 0 6px; }
.slack-dialog textarea { width: 100%; box-sizing: border-box;
background: var(--panel); color: var(--text); border: 1px solid var(--border);
border-radius: 8px; padding: 10px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12.5px; line-height: 1.45; resize: vertical; min-height: 240px; }
.slack-dialog-actions { display: flex; gap: 8px; padding: 0; margin: 14px 0 0;
justify-content: flex-end; flex-wrap: wrap; }
/* error */
.error-page { text-align: center; padding: 80px 20px; }
.error-page h1 { font-size: 96px; margin: 0; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.error-page p { color: var(--muted); margin: 0 0 18px; }
/* ---------- Admin · Usuarios ---------- */
.user-form-grid { display: grid; grid-template-columns: 1fr 1.4fr 1fr 1.4fr; gap: 14px; align-items: end; }
@media (max-width: 1024px) { .user-form-grid { grid-template-columns: 1fr 1fr; } }
.user-form .form-actions { display: flex; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.user-form .small { font-size: 12px; margin: 0; }
.users-table th, .users-table td { vertical-align: top; padding: 12px 10px; }
.users-table .row-admin { background: rgba(156,199,63,.06); }
.role-row { display: flex; flex-wrap: wrap; gap: 6px; }
.role-row.tight { gap: 4px; }
/* Role dropdown — native