/* Área de cliente AdCost Sync. Usa los colores del tema si está activo. */
.acsp-app, .acsp-card { --p-violet: var(--acs-violet, #623FA2); --p-indigo: var(--acs-indigo, #2D214F); --p-electric: var(--acs-electric, #8B00ED); --p-mist: var(--acs-mist, #F5F4F4); --p-line: rgba(39, 38, 43, .14); --p-ink: var(--acs-graphite, #27262B); --p-display: var(--acs-display, "Inter Tight", "Helvetica Neue", Arial, sans-serif); color: var(--p-ink); font-size: 16px; line-height: 1.55; }
.acsp-app *, .acsp-card * { box-sizing: border-box; }
.acsp-app :is(h2, h3), .acsp-card :is(h2, h3) { font-family: var(--p-display); color: var(--p-indigo); letter-spacing: -0.02em; margin: 0; padding: 0; line-height: 1.15; }
.acsp-app h2 { font-weight: 600; font-size: clamp(24px, 3vw, 34px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.acsp-app h3 { font-weight: 600; font-size: 20px; margin-bottom: 14px; }
.acsp-app p, .acsp-card p { margin: 0; padding: 0; }
.acsp-app ul, .acsp-card ul, .acsp-app ol { list-style: none; margin: 0; padding: 0; }

/* Tarjeta para alta y acceso */
.acsp-card { background: #fff; border: 1px solid var(--p-line); padding: clamp(22px, 4vw, 40px); max-width: 760px; margin: 0 auto; }
.acsp-auth--narrow { max-width: 460px; }

/* Layout del dashboard */
.acsp-app { display: grid; grid-template-columns: 240px 1fr; gap: 28px; align-items: start; }
.acsp-side { background: var(--p-indigo); color: #fff; padding: 24px 18px; }
.acsp-side__hello { font: 600 18px/1.2 var(--p-display); color: #fff; }
.acsp-side__company { font-size: 14px; color: rgba(255, 255, 255, .7); margin-top: 4px !important; }
.acsp-side ul { margin-top: 22px; display: grid; gap: 4px; }
.acsp-app .acsp-side a:not(.acsp-btn) { display: block; color: rgba(255, 255, 255, .85); text-decoration: none; padding: 10px 12px; font-weight: 600; border-left: 3px solid transparent; }
.acsp-app .acsp-side a:not(.acsp-btn):hover { color: #fff; background: rgba(255, 255, 255, .06); }
.acsp-app .acsp-side a[aria-current="page"]:not(.acsp-btn) { color: #fff; border-left-color: var(--p-electric); background: rgba(255, 255, 255, .08); }
.acsp-main { min-width: 0; display: grid; gap: 24px; }
@media (max-width: 860px) { .acsp-app { grid-template-columns: 1fr; }  .acsp-side ul { display: flex; flex-wrap: wrap; } }

.acsp-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.acsp-back { font-size: 14px; margin-bottom: 6px !important; }
.acsp-back a, .acsp-app a:not(.acsp-btn), .acsp-card a:not(.acsp-btn) { color: var(--p-violet); }
.acsp-block { background: #fff; border: 1px solid var(--p-line); padding: clamp(18px, 3vw, 28px); min-width: 0; }
.acsp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 760px) { .acsp-cols { grid-template-columns: 1fr; } }
.acsp-muted { color: #6B6A72; }
.acsp-small { font-size: 14px; color: #6B6A72; }

/* KPIs */
.acsp-kpis { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--p-line); border: 1px solid var(--p-line); }
.acsp-kpis--6 { grid-template-columns: repeat(6, 1fr); margin-bottom: 20px; }
.acsp-kpis > div { background: #fff; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.acsp-kpis dt { font-size: 14px; color: #6B6A72; }
.acsp-kpis dd { margin: 0; order: -1; font: 600 clamp(22px, 2.4vw, 30px)/1.1 var(--p-display); color: var(--p-indigo); letter-spacing: -0.02em; }
.acsp-kpis--6 dd { font-size: clamp(18px, 1.8vw, 24px); white-space: nowrap; }
@media (max-width: 900px) { .acsp-kpis, .acsp-kpis--6 { grid-template-columns: repeat(2, 1fr); } }

/* Estados */
.acsp-badge { white-space: nowrap; display: inline-block; font: 600 13px/1 var(--p-display); padding: 6px 10px; background: var(--p-mist); color: var(--p-ink); letter-spacing: 0; vertical-align: middle; }
.acsp-badge--revision { background: #FFF1B8; color: #5C4400; }
.acsp-badge--aprobada { background: #E7E0F7; color: var(--p-indigo); }
.acsp-badge--activa { background: #DDF5E6; color: #1F5B34; }
.acsp-badge--pausada { background: #FDE8D7; color: #7A3B0B; }
.acsp-badge--finalizada { background: var(--p-indigo); color: #fff; }
.acsp-badge--rechazada { background: #FBEAEA; color: #8A2B2B; }
.acsp-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; counter-reset: s; }
.acsp-steps li { font-size: 13px; font-weight: 600; color: #8A8990; padding-top: 10px; border-top: 4px solid var(--p-line); }
.acsp-steps li.is-done { border-top-color: var(--p-violet); color: var(--p-indigo); }
.acsp-steps li.is-current { border-top-color: var(--p-electric); color: var(--p-electric); }
.acsp-note { background: #F1ECFA; border-left: 4px solid var(--p-violet); padding: 16px 18px; }
.acsp-note p { margin-top: 6px !important; }

/* Tablas, archivos, gráfica */
.acsp-table-wrap { overflow-x: auto; }
.acsp-table { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; }
.acsp-table th, .acsp-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--p-line); vertical-align: middle; }
.acsp-table th { font-family: var(--p-display); font-size: 14px; background: var(--p-mist); }
.acsp-progress { display: block; height: 6px; background: var(--p-mist); margin-bottom: 4px; min-width: 120px; }
.acsp-progress i { display: block; height: 100%; background: var(--p-electric); }
.acsp-files { display: grid; gap: 8px; }
.acsp-files li { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.acsp-files small { color: #6B6A72; }
.acsp-chart { margin: 0 0 20px; }
.acsp-chart svg { width: 100%; height: auto; display: block; }
.acsp-chart__bars rect { fill: #CDBDF0; }
.acsp-chart__line { fill: none; stroke: var(--p-electric); stroke-width: 2.5; stroke-linejoin: round; }
.acsp-chart__labels text { font-size: 11px; fill: #6B6A72; }
.acsp-chart figcaption { font-size: 13px; color: #6B6A72; display: flex; gap: 8px; align-items: center; }
.acsp-key { display: inline-block; width: 14px; height: 10px; }
.acsp-key--bar { background: #CDBDF0; }
.acsp-key--line { height: 3px; background: var(--p-electric); margin-left: 10px; }
.acsp-dl { margin: 0; display: grid; grid-template-columns: 180px 1fr; gap: 10px 20px; }
.acsp-dl dt { color: #6B6A72; }
.acsp-dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 560px) { .acsp-dl { grid-template-columns: 1fr; gap: 2px; } .acsp-dl dd { margin-bottom: 10px; } }
.acsp-empty { background: #fff; border: 1px dashed #C9C7D0; padding: 36px; text-align: center; display: grid; gap: 12px; justify-items: center; }

/* Formularios */
.acsp-form { display: grid; gap: 16px; }
.acsp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.acsp-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 640px) { .acsp-grid2, .acsp-grid3 { grid-template-columns: 1fr; } }
.acsp-field { display: grid; gap: 6px; }
.acsp-field > span, .acsp-label { font-size: 14px; font-weight: 600; }
.acsp-field input, .acsp-field textarea, .acsp-field select { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid #CFCDD6; background: #fff; color: var(--p-ink); border-radius: 0; margin: 0; }
.acsp-field input[type="file"] { padding: 10px; background: var(--p-mist); }
.acsp-field input:focus, .acsp-field textarea:focus { border-color: var(--p-violet); outline: none; box-shadow: 0 0 0 3px rgba(98, 63, 162, .2); }
.acsp-choice { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.acsp-choice legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; padding: 0; }
.acsp-choice label { border: 1px solid #CFCDD6; padding: 10px 14px; font-weight: 600; cursor: pointer; font-size: 15px; display: inline-flex; gap: 8px; align-items: center; background: #fff; }
.acsp-choice label:has(input:checked) { border-color: var(--p-violet); background: #F1ECFA; color: var(--p-indigo); }
.acsp-choice--cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.acsp-choice input { accent-color: var(--p-violet); }
.acsp-check { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 14px; color: #55545B; align-items: start; }
.acsp-check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--p-violet); }
.acsp-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.acsp-info { font-size: 13px; color: #6B6A72; }
.acsp-info summary { cursor: pointer; font-weight: 600; }
.acsp-info p { margin-top: 8px !important; }
.acsp-step { border: 1px solid var(--p-line); background: #fff; padding: clamp(18px, 3vw, 28px); margin: 0; display: grid; gap: 16px; }
.acsp-step legend { font: 600 20px var(--p-display); color: var(--p-indigo); padding: 0 6px; }
.acsp-step[hidden] { display: none; }
.acsp-wizard__nav { display: none; }
.acsp-wizard.is-wizard .acsp-wizard__nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.acsp-wizard__nav li { font-size: 13px; font-weight: 600; color: #8A8990; padding-top: 10px; border-top: 4px solid var(--p-line); }
.acsp-wizard__nav li.is-done { border-top-color: var(--p-violet); color: var(--p-indigo); }
.acsp-wizard__nav li.is-current { border-top-color: var(--p-electric); color: var(--p-electric); }
.acsp-wizard__buttons, .acsp-actions, .acsp-inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.acsp-actions { justify-content: flex-end; }
.acsp-wizard__buttons [hidden], .acsp-actions [hidden] { display: none; }

/* Botones */
.acsp-btn { display: inline-flex; align-items: center; justify-content: center; font: 600 16px/1.2 var(--p-display); padding: 13px 34px 13px 22px; border: 0; background: var(--p-electric); color: #fff !important; text-decoration: none; cursor: pointer; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); transition: background-color .2s; }
.acsp-btn:hover { background: #7300C4; }
.acsp-btn--ghost { background: transparent; color: var(--p-indigo) !important; border: 1px solid var(--p-indigo); clip-path: none; padding: 12px 20px; }
.acsp-btn--ghost:hover { background: var(--p-mist); }
.acsp-btn--danger { background: transparent; color: #8A2B2B !important; border: 1px solid #C98C8C; clip-path: none; padding: 12px 20px; }
.acsp-btn--danger:hover { background: #FBEAEA; }
.acsp-btn:focus-visible, .acsp-side a:focus-visible, .acsp-choice label:has(input:focus-visible) { outline: 3px solid var(--p-electric); outline-offset: 2px; }

/* Mensajes */
.acsp-msg { padding: 14px 16px; font-size: 15px; margin-bottom: 4px; }
.acsp-msg--ok { background: #EEF8F1; color: #1F5B34; }
.acsp-msg--err { background: #FBEAEA; color: #8A2B2B; }
.acsp-actions .acsp-wizard__buttons { margin-right: auto; }

/* Informes de datos */
.acsp-report { display: grid; gap: 18px; }
.acsp-report__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.acsp-report__head h3 { margin: 0; }
.acsp-kpis--2 { grid-template-columns: repeat(2, 1fr); }
.acsp-kpis--3 { grid-template-columns: repeat(3, 1fr); }
.acsp-kpis--5 { grid-template-columns: repeat(5, 1fr); }
.acsp-kpis--5 dd { font-size: clamp(18px, 1.9vw, 26px); }
.acsp-report__controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 14px; background: var(--p-mist); }
.acsp-report__controls[hidden] { display: none; }
.acsp-report__ctrl { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.acsp-report__ctrl select { font: inherit; font-weight: 400; font-size: 15px; padding: 8px 10px; border: 1px solid #CFCDD6; background: #fff; min-width: 180px; max-width: 260px; }
.acsp-report__toggle { margin-left: auto; }
.acsp-chart__bar { fill: #CDBDF0; }
.acsp-chart__bar.is-other { fill: #E3E1E8; }
.acsp-chart__lbl { font-size: 11px; fill: #6B6A72; }
.acsp-chart__val { font-size: 12px; font-weight: 600; fill: #2D214F; }
.acsp-table .is-num { text-align: right; white-space: nowrap; }
.acsp-table .is-total td, .acsp-table .is-total th { font-weight: 700; background: var(--p-mist); }
.acsp-report__pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 12px; font-size: 14px; }
.acsp-report__pager .acsp-btn { padding: 6px 14px; }
.acsp-report__pager .acsp-btn:disabled { opacity: .4; cursor: default; }
@media (max-width: 900px) { .acsp-kpis--3, .acsp-kpis--5 { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   Centro de resultados (panel multicanal) · estética de cabina
   ========================================================================== */
.acsp-hub { --hub-bg: #0B0716; --hub-panel: rgba(24, 16, 46, .78); --hub-line: rgba(164, 92, 255, .22); --hub-text: #EDEAF7; --hub-mute: #A39DBD; --hub-accent: #A45CFF; color: var(--hub-text); }
.acsp-hub__loading { background: #fff; border: 1px solid var(--p-line); padding: 18px; }
.acsp-hub__loading[hidden] { display: none; }
.hub { position: relative; background: radial-gradient(120% 70% at 100% 0%, rgba(164, 92, 255, .22), transparent 55%), radial-gradient(90% 60% at 0% 100%, rgba(45, 226, 196, .10), transparent 60%), var(--hub-bg); border: 1px solid var(--hub-line); padding: clamp(18px, 3vw, 32px); overflow: hidden; font-feature-settings: "tnum" 1; }
.hub::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(164, 92, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(164, 92, 255, .07) 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(180deg, #000 0%, transparent 80%); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 80%); }
.hub > * { position: relative; }
.hub-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.hub-head__title { font: 600 13px/1 var(--p-display); letter-spacing: .18em; text-transform: uppercase; color: var(--hub-mute); }
.hub-live { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--p-display); letter-spacing: .08em; text-transform: uppercase; color: #7BF5DA; padding: 7px 12px; border: 1px solid rgba(45, 226, 196, .45); background: rgba(45, 226, 196, .08); }
.hub-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2DE2C4; box-shadow: 0 0 10px #2DE2C4; animation: hubPulse 1.8s ease-in-out infinite; }
@keyframes hubPulse { 50% { opacity: .25; } }

/* Selector de canal */
.hub-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border: 1px solid var(--hub-line); background: rgba(11, 7, 22, .7); margin-bottom: 22px; }
.hub-tab { display: inline-flex; align-items: center; gap: 9px; font: 600 15px/1 var(--p-display); color: var(--hub-mute); background: transparent; border: 1px solid transparent; padding: 12px 18px; cursor: pointer; transition: color .2s, background-color .2s, border-color .2s; }
.hub-tab i { width: 8px; height: 8px; border-radius: 50%; background: var(--hub-accent); box-shadow: 0 0 8px var(--hub-accent); }
.hub-tab:hover { color: #fff; }
.hub-tab[aria-selected="true"] { color: #fff; background: rgba(255, 255, 255, .06); border-color: var(--hub-accent); box-shadow: inset 0 -2px 0 var(--hub-accent), 0 0 22px -8px var(--hub-accent); }
.hub-tab:focus-visible, .hub-btn:focus-visible, .hub-card:focus-visible, .hub-ctrl select:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hub-views .hub-view { display: grid; gap: 18px; animation: hubIn .45s ease-out; }
.hub-views .hub-view[hidden] { display: none; }
@keyframes hubIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hub-meta { margin: 0; font-size: 14px; color: var(--hub-mute); }
.hub-meta a { color: var(--hub-accent); }

/* KPI */
.hub-kpis { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.hub-kpi { position: relative; padding: 16px 18px 14px; background: var(--hub-panel); border: 1px solid var(--hub-line); display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.hub-kpi::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--hub-accent), transparent); }
.hub-kpi dd { margin: 0; order: -1; font: 600 clamp(22px, 2.3vw, 32px)/1.05 var(--p-display); letter-spacing: -0.02em; color: #fff; text-shadow: 0 0 18px rgba(164, 92, 255, .45); white-space: nowrap; }
.hub-kpi dt { font-size: 13px; color: var(--hub-mute); letter-spacing: .02em; }

/* Paneles */
.hub-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hub-grid--summary { grid-template-columns: 300px minmax(0, 1fr); }
.hub-panel { background: var(--hub-panel); border: 1px solid var(--hub-line); padding: 20px; min-width: 0; backdrop-filter: blur(6px); display: flex; flex-direction: column; gap: 12px; }
.hub-panel--wide, .hub-panel--explorer { grid-column: 1 / -1; }
.hub-grid--summary .hub-panel--wide { grid-column: auto; }
.hub-panel__title { margin: 0; font: 600 13px/1.2 var(--p-display); letter-spacing: .14em; text-transform: uppercase; color: var(--hub-mute); }
.hub-panel svg { width: 100%; height: auto; display: block; overflow: visible; }
.hub-gridline { stroke: rgba(164, 92, 255, .14); stroke-width: 1; }
.hub-axis { font: 600 11px var(--p-display); fill: var(--hub-mute); letter-spacing: .06em; }
.hub-today { stroke: #fff; stroke-opacity: .6; stroke-dasharray: 3 4; }
.hub-note { margin: 0; font-size: 13px; color: var(--hub-mute); }
.hub-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--hub-text); }
.hub-legend span { display: inline-flex; align-items: center; gap: 8px; }
.hub-legend i { width: 10px; height: 10px; display: inline-block; border-radius: 2px; }

/* Ritmo de inversión */
.hub-panel--pace svg { max-width: 240px; margin: 0 auto; }
.hub-ring__track { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 14; }
.hub-ring__arc { fill: none; stroke: #A45CFF; stroke-width: 14; stroke-linecap: round; }
.hub-ring__time { fill: none; stroke: #2DE2C4; stroke-width: 3; stroke-dasharray: 2 5; }
.hub-ring__big { font: 700 48px var(--p-display); fill: #fff; letter-spacing: -0.03em; }
.hub-ring__small, .hub-ring__mid { font: 600 13px var(--p-display); fill: var(--hub-mute); letter-spacing: .1em; text-transform: uppercase; }
.hub-ring__mid { font-size: 20px; fill: #fff; letter-spacing: 0; text-transform: none; }
.hub-pace__state { margin: 0; font-size: 15px; line-height: 1.5; color: var(--hub-text); }
.hub-pace__state strong { color: #fff; }

/* Reparto */
.hub-mix { display: flex; gap: 3px; height: 14px; }
.hub-mix span { min-width: 3px; border-radius: 2px; }

/* Tarjetas de canal */
.hub-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.hub-card { text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 20px; cursor: pointer; background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 60%), var(--hub-panel); border: 1px solid var(--hub-line); color: var(--hub-text); font: inherit; transition: border-color .2s, transform .2s, box-shadow .2s; }
.hub-card:hover { border-color: var(--hub-accent); transform: translateY(-2px); box-shadow: 0 10px 40px -18px var(--hub-accent); }
.hub-card__name { font: 600 13px var(--p-display); letter-spacing: .14em; text-transform: uppercase; color: var(--hub-accent); }
.hub-card__value { font: 600 38px/1 var(--p-display); letter-spacing: -0.03em; color: #fff; text-shadow: 0 0 22px var(--hub-accent); }
.hub-card__label { font-size: 14px; color: var(--hub-mute); }
.hub-card__cta { margin-top: 8px; font: 600 14px var(--p-display); color: #fff; }

/* Insights */
.hub-insights { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.hub-insights li { position: relative; padding: 14px 16px 14px 20px; font-size: 15px; line-height: 1.5; background: rgba(255, 255, 255, .03); border: 1px solid var(--hub-line); }
.hub-insights li::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; background: var(--hub-accent); box-shadow: 0 0 10px var(--hub-accent); }
.hub-insights strong { color: #fff; font-family: var(--p-display); }

/* Rankings */
.hub-rank__pos { font: 600 12px var(--p-display); color: var(--hub-mute); }
.hub-rank__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-rank__track { height: 8px; background: rgba(255, 255, 255, .06); border-radius: 4px; overflow: hidden; }
.hub-rank__bar { display: block; height: 100%; border-radius: 4px; transform-origin: left; animation: hubGrowX .8s cubic-bezier(.2, .7, .2, 1) both; }
.hub-rank__val { font: 600 14px var(--p-display); color: #fff; white-space: nowrap; }
@keyframes hubGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* CTV */
.hub-tv__frame { fill: #05030B; stroke: rgba(255, 255, 255, .18); stroke-width: 2; }
.hub-tv__content { fill: #1A1233; }
.hub-tv__label { font: 600 13px var(--p-display); fill: #5F587A; letter-spacing: .2em; }
.hub-tv__tag { font: 700 14px var(--p-display); fill: #fff; letter-spacing: .14em; }
.hub-tv__track { fill: rgba(255, 255, 255, .1); }
.hub-tv__q { font: 600 12px var(--p-display); fill: var(--hub-text); }
.hub-grow { transform-box: fill-box; transform-origin: left; animation: hubGrowX 1.4s cubic-bezier(.2, .7, .2, 1) both; }

/* Audio */
.hub-wave { transform-box: fill-box; transform-origin: center; animation: hubWave .7s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes hubWave { from { transform: scaleY(.05); } to { transform: scaleY(1); } }
.hub-rings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hub-rings figure { margin: 0; text-align: center; }
.hub-rings svg { max-width: 120px; margin: 0 auto; }
.hub-rings figcaption { font: 600 12px var(--p-display); letter-spacing: .1em; text-transform: uppercase; color: var(--hub-mute); }

/* DOOH */
.hub-dot { transform-box: fill-box; transform-origin: center; animation: hubPop .6s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes hubPop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.hub-dot__halo { fill: none; stroke: #fff; stroke-opacity: .7; stroke-dasharray: 4 5; animation: hubSpin 12s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hubSpin { to { transform: rotate(360deg); } }
.hub-map__lbl { font: 600 13px var(--p-display); fill: #fff; }
.hub-val { font: 600 13px var(--p-display); fill: #fff; }
.hub-heat { display: grid; gap: 3px; align-items: center; }
.hub-heat__h, .hub-heat__d { font: 600 11px var(--p-display); color: var(--hub-mute); text-align: center; }
.hub-heat__c { height: 26px; border-radius: 3px; }

/* Explorador */
.hub-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.hub-ctrl { display: grid; gap: 5px; font: 600 12px var(--p-display); letter-spacing: .08em; text-transform: uppercase; color: var(--hub-mute); }
.hub-ctrl select { font: 400 15px var(--acs-text, inherit); letter-spacing: 0; text-transform: none; color: #fff; background: #120B24; border: 1px solid var(--hub-line); padding: 9px 10px; min-width: 170px; max-width: 260px; }
.hub-btn { margin-left: auto; font: 600 14px var(--p-display); color: #fff; background: transparent; border: 1px solid var(--hub-accent); padding: 10px 16px; cursor: pointer; }
.hub-btn:hover { background: rgba(255, 255, 255, .06); }
.hub-btn:disabled { opacity: .35; cursor: default; }
.hub-chart { margin: 0; }
.hub-bar { transform-box: fill-box; transform-origin: bottom; animation: hubGrowY .7s cubic-bezier(.2, .7, .2, 1) both; }
.hub-hbar { transform-box: fill-box; transform-origin: left; animation: hubGrowX .8s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes hubGrowY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.hub-draw { stroke-dasharray: 3000; stroke-dashoffset: 3000; animation: hubDraw 1.6s ease-out forwards; }
@keyframes hubDraw { to { stroke-dashoffset: 0; } }
.hub-table-wrap { overflow-x: auto; }
.hub-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hub-table th, .hub-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(164, 92, 255, .14); white-space: nowrap; }
.hub-table th { font: 600 12px var(--p-display); letter-spacing: .08em; text-transform: uppercase; color: var(--hub-mute); }
.hub-table .is-num { text-align: right; }
.hub-table tbody tr:hover td { background: rgba(255, 255, 255, .03); }
.hub-table .is-total td, .hub-table .is-total th { color: #fff; font-weight: 700; border-top: 1px solid var(--hub-accent); }
.hub-pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 12px; font-size: 14px; color: var(--hub-mute); }
.hub-pager .hub-btn { margin-left: 0; }

@media (max-width: 900px) {
	.hub-grid, .hub-grid--summary { grid-template-columns: 1fr; }
	.hub-btn { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.hub *, .hub *::before, .hub *::after { animation: none !important; transition: none !important; }
	.hub-draw { stroke-dashoffset: 0; }
}
.hub-maps { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hub-maps--1 { grid-template-columns: 1fr; }
.hub-mapbox { margin: 0; border: 1px solid var(--hub-line); background: rgba(11, 7, 22, .55); padding: 8px 8px 12px; }
.hub-mapbox figcaption { font-size: 13px; color: var(--hub-mute); padding: 4px 6px 0; }
.hub-mapbox figcaption strong { color: #fff; font-family: var(--p-display); }
.hub-table-wrap { max-height: 460px; overflow: auto; }
.hub-table thead th { position: sticky; top: 0; background: #140D29; z-index: 1; }
@media (max-width: 760px) { .hub-maps { grid-template-columns: 1fr; } }
.hub-maps--3 .hub-mapbox:first-child { grid-column: 1 / -1; }

/* Galería de creatividades: imagen completa, sin recortes, con su proporción real */
.acsp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; align-items: start; }
.acsp-creative { margin: 0; border: 1px solid var(--p-line); background: #fff; display: flex; flex-direction: column; }
.acsp-creative__frame { display: flex; align-items: center; justify-content: center; padding: 14px; background: repeating-conic-gradient(#F1F0F4 0% 25%, #FFFFFF 0% 50%) 50% / 18px 18px; }
.acsp-creative__frame a { display: block; max-width: 100%; }
.acsp-creative__frame img { display: block; max-width: 100%; width: auto; height: auto; max-height: 560px; object-fit: contain; }
.acsp-creative__frame video { display: block; width: 100%; max-height: 560px; background: #000; }
.acsp-creative__doc { display: grid; place-items: center; width: 120px; height: 150px; border: 1px solid var(--p-line); background: #fff; font: 700 20px var(--p-display); color: var(--p-violet); text-decoration: none; }
.acsp-creative figcaption { padding: 12px 14px 14px; display: grid; gap: 4px; font-size: 14px; border-top: 1px solid var(--p-line); }
.acsp-creative figcaption strong { font-family: var(--p-display); color: var(--p-indigo); overflow-wrap: anywhere; }
.acsp-creative figcaption span { color: #6B6A72; }
.acsp-creative__links a { color: var(--p-violet); }
.acsp-creative--wide { grid-column: span 2; }
@media (max-width: 700px) { .acsp-creative--wide { grid-column: auto; } }
.acsp-head__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.acsp-navbadge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 10px; background: #FF4D8D; color: #fff; font: 700 12px/1 var(--p-display); box-shadow: 0 0 10px rgba(255, 77, 141, .6); }
/* Rankings: una sola rejilla para cabecera y filas, columnas ajustadas a su contenido */
.hub-rank { font-size: 14px; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: max-content minmax(90px, 2fr) minmax(30px, 1fr) max-content max-content; column-gap: 14px; row-gap: 12px; align-items: center; }
.hub-rank--extra { grid-template-columns: max-content minmax(90px, 2fr) minmax(24px, 1fr) max-content max-content max-content; }
.hub-rank li { display: contents; }
.hub-rank__head > span { font: 600 11px/1 var(--p-display); letter-spacing: .06em; text-transform: uppercase; color: var(--hub-mute); white-space: nowrap; align-self: end; }
.hub-rank__sep > span { grid-column: 1 / -1; height: 1px; background: var(--hub-line); margin: -2px 0 2px; }
.hub-rank__head .hub-rank__unit { text-align: right; }
.hub-rank__head .hub-rank__unit--main { color: var(--hub-accent); }
.hub-rank__val { text-align: right; }
.hub-rank__share { font: 600 13px var(--p-display); color: var(--hub-mute); text-align: right; white-space: nowrap; }
.hub-rank__extra { font: 600 13px var(--p-display); color: #fff; text-align: right; white-space: nowrap; }
@media (max-width: 640px) {
	.hub-rank, .hub-rank--extra { grid-template-columns: max-content minmax(80px, 1fr) max-content max-content; }
	.hub-rank__track, .hub-rank__head > span:nth-child(3) { display: none; }
	.hub-rank--extra .hub-rank__extra, .hub-rank--extra .hub-rank__head > span:last-child { display: none; }
}


/* Comprobantes */
.acsp-proofs__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.acsp-proofs__head h3 { margin: 0; }
.acsp-proofs__group { margin: 18px 0 10px; font: 600 13px/1 var(--p-display); letter-spacing: .12em; text-transform: uppercase; color: var(--p-violet); }
/* Agencias */
.acsp-agency { border-left: 4px solid var(--p-electric); }
.acsp-inline-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.acsp-inline-form .acsp-field { min-width: 220px; flex: 1; }
.acsp-inline-form .acsp-field select { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid #CFCDD6; background: #fff; }
.acsp-preview { margin: 0 0 8px !important; padding: 10px 14px; background: #FFF1B8; color: #5C4400; font-size: 14px; font-weight: 600; }
.acsp-proofs__head h3 a { color: inherit; text-decoration: none; }
.acsp-proofs__head h3 a:hover { color: var(--p-violet); }
.acsp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.acsp-app .acsp-chips a { display: inline-block; padding: 8px 14px; border: 1px solid var(--p-line); background: #fff; color: var(--p-indigo); font: 600 14px/1 var(--p-display); text-decoration: none; }
.acsp-app .acsp-chips a[aria-current="true"] { background: var(--p-indigo); border-color: var(--p-indigo); color: #fff; }
.acsp-markup-cell { white-space: nowrap; }
.acsp-markup-cell input { width: 84px; font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid #CFCDD6; }
.acsp-btn--sm { padding: 8px 12px; font-size: 13px; }
.acsp-field--short { max-width: 520px; }

/* Audiencias */
.acsp-aud { display: grid; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--p-line); }
.acsp-aud .acsp-label { margin: 0; }
.acsp-aud__ai { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding: 16px 18px; background: linear-gradient(120deg, #2D214F, #4E2A92); color: #fff; }
.acsp-aud__ai div { display: grid; gap: 4px; max-width: 560px; }
.acsp-aud__ai span { font-size: 14px; color: #D9D3EA; }
.acsp-aud__result { border: 1px solid var(--p-line); background: #FBFAFD; padding: 16px 18px; display: grid; gap: 12px; }
.acsp-aud__title { margin: 0 !important; font: 600 16px var(--p-display); color: var(--p-indigo); }
.acsp-aud__recs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.acsp-aud__recs li { display: flex; gap: 14px; justify-content: space-between; align-items: center; padding: 12px 14px; background: #fff; border: 1px solid var(--p-line); }
.acsp-aud__recs div { display: grid; gap: 2px; }
.acsp-aud__recs small, .acsp-aud__chip small { font: 600 11px var(--p-display); letter-spacing: .08em; text-transform: uppercase; color: var(--p-violet); }
.acsp-aud__recs strong { color: var(--p-indigo); }
.acsp-aud__recs span { font-size: 14px; color: #45434d; }
.acsp-aud__kw { padding: 12px 14px; background: #EFE9FA; display: grid; gap: 6px; font-size: 14px; }
.acsp-aud__kw p { margin: 0; color: var(--p-indigo); font-weight: 600; }
.acsp-aud__disclaimer { font-style: italic; }
.acsp-aud__chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.acsp-aud__count { font-weight: 600; font-size: 14px; margin-right: 4px; }
.acsp-aud__chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 10px; background: #fff; border: 1px solid var(--p-violet); font-size: 14px; }
.acsp-aud__chip button { border: 0; background: var(--p-mist); width: 24px; height: 24px; cursor: pointer; font-size: 16px; line-height: 1; }
.acsp-aud__list { max-height: 360px; overflow-y: auto; border: 1px solid var(--p-line); background: #fff; }
.acsp-aud__group { border-bottom: 1px solid var(--p-line); }
.acsp-aud__group summary { padding: 10px 14px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--p-indigo); }
.acsp-aud__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 14px; padding: 4px 14px 12px; }
.acsp-aud__items label { font-size: 14px; display: flex; gap: 6px; align-items: flex-start; }
.acsp-aud__recs small { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.acsp-aud__fit { font-style: normal; font: 600 11px var(--p-display); letter-spacing: .04em; text-transform: none; padding: 3px 7px; }
.acsp-aud__fit--alto { background: #DDF5E6; color: #1F5B34; }
.acsp-aud__fit--medio { background: #FFF1B8; color: #5C4400; }
.acsp-aud__recs li.is-alto { border-left: 3px solid #2FA36B; }
.acsp-aud__recs li.is-medio { border-left: 3px solid #E0B43A; }