/* ============================================================
   "Once pestañas": las escenas propias de esta historia.
   - .browser  [data-wide="browser"]: una ventana que va sumando pestañas.
   - .clients  [data-wide="clients"]: la misma ventana, por doce clientes.
   - .folio    [data-wide="folio"]:   el portafolio con el ROAS mezclado.
   El motor (story.js) prende la escena y le pone data-step; el resto lo
   hace once-pestanas.js.
   ============================================================ */

/* ---------- Navegador ---------- */
.browser { padding: 0; background: #F1F1F4; overflow: hidden; container-type: inline-size; }
.bw-bar { display: flex; align-items: flex-end; gap: 10px; padding: 10px 14px 0; background: #DCDCE4; }
.bw-dots { display: flex; gap: 6px; padding-bottom: 12px; flex: none; }
.bw-dots i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.bw-dots i:nth-child(2) { background: #FEBC2E; }
.bw-dots i:nth-child(3) { background: #28C840; }
.bw-tabs { display: flex; gap: 2px; min-width: 0; flex: 1; overflow: hidden; }
.bw-tab {
  display: flex; align-items: center; gap: 6px; min-width: 0; flex: 0 1 150px;
  padding: 8px 10px; border-radius: 10px 10px 0 0; background: #C9C9D3;
  font-size: 11.5px; font-weight: 600; color: #3A3A4E; white-space: nowrap; overflow: hidden;
  max-width: 0; padding-left: 0; padding-right: 0; opacity: 0;
  transition: max-width 600ms var(--ease), padding 600ms var(--ease), opacity 400ms var(--ease), background .3s, flex-basis 600ms var(--ease);
}
.bw-tab.is-open { max-width: 160px; padding-left: 10px; padding-right: 10px; opacity: 1; }
.bw-tab.is-cur { background: #F1F1F4; color: #111; }
.bw-label { overflow: hidden; text-overflow: ellipsis; transition: opacity .3s; }
.bw-fav { flex: none; width: 14px; height: 14px; border-radius: 4px; display: grid; place-items: center; font-size: 9px; font-weight: 800; color: #fff; }
/* Con muchas pestañas abiertas, cada una se achica hasta quedar en el ícono. */
.browser[data-open="many"] .bw-tab.is-open:not(.is-cur) { flex-basis: 34px; }
.browser[data-open="many"] .bw-tab.is-open:not(.is-cur) .bw-label { opacity: 0; }

.bw-panes { position: relative; height: 392px; }
.bw-pane {
  position: absolute; inset: 0; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px;
  opacity: 0; transform: translateY(8px); transition: opacity 380ms var(--ease), transform 480ms var(--ease);
}
.bw-pane.is-cur { opacity: 1; transform: none; }
.bw-url { align-self: stretch; padding: 7px 12px; background: #fff; border-radius: 999px; font-size: 12px; color: #555; }
.bw-url::before { content: "🔒 "; font-size: 10px; }
.bw-head { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; }
.bw-head small { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; color: #6A6A7E; text-transform: uppercase; letter-spacing: .05em; }
.bw-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bw-kpi { padding: 12px 14px; background: #fff; border-radius: 12px; }
.bw-kpi span { display: block; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #6A6A7E; }
.bw-kpi b { display: block; margin-top: 4px; font-family: var(--font-cond); font-weight: 400; font-size: 28px; line-height: 1; }
.bw-kpi.is-key { outline: 2.5px solid var(--st-violet); outline-offset: -2px; }
.bw-note { margin: 0; font-size: 12px; color: #6A6A7E; }
.bw-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bw-list li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; background: #fff; border-radius: 10px; font-size: 12.5px; }
.bw-list li b { font-family: var(--font-mono); font-size: 12px; }
.bw-tag { padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.bw-tag.best { background: #D1FFCA; color: #0B6B3A; }
.bw-tag.good { background: #E4ECFF; color: #1A47B8; }
.bw-tag.low { background: #FFD9DA; color: #A3262A; }

/* La planilla: lo que se copia a mano. */
.bw-sheet { border-collapse: collapse; width: 100%; background: #fff; font-size: 12.5px; }
.bw-sheet th, .bw-sheet td { border: 1px solid #E1E1E8; padding: 7px 10px; text-align: right; }
.bw-sheet th { background: #F4F4F7; font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: #6A6A7E; text-transform: uppercase; }
.bw-sheet th:first-child, .bw-sheet td:first-child { text-align: left; }
.bw-sheet tr.is-sum td { font-weight: 700; background: #FFF6C2; }
.bw-sheet tr.is-real td { font-weight: 700; background: #111; color: #fff; }
.bw-sheet td.is-bad { color: var(--st-no); }

/* WhatsApp Web, para contestar. */
.bw-chat { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: #EFE7DD; border-radius: 12px; flex: 1; }
.bw-msg { max-width: 75%; padding: 8px 11px; border-radius: 10px; background: #fff; font-size: 13px; line-height: 1.35; }
.bw-msg.me { align-self: flex-end; background: #D9FDD3; }
.bw-msg small { display: block; margin-top: 2px; font-size: 10px; color: #6A6A7E; text-align: right; }
.bw-typing { align-self: flex-end; opacity: 0; transition: opacity .4s; }
.browser[data-step="11"] .bw-typing { opacity: 1; }

/* El contador de abajo. */
.bw-count { display: flex; gap: 8px; padding: 10px 14px 12px; background: #14141F; color: #F4F2FA; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .03em; }
.bw-count span { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.bw-count b { color: var(--st-caption); font-weight: 500; }
.bw-count .bw-ex { margin-left: auto; background: none; color: #9B9BB4; }

@container (max-width: 560px) {
  .bw-kpis { grid-template-columns: 1fr 1fr; }
  .bw-kpi b { font-size: 22px; }
  .bw-panes { height: 420px; }
  .bw-count { flex-wrap: wrap; }
  .bw-count .bw-ex { margin-left: 0; }
}

/* ---------- Doce clientes ---------- */
.clients { padding: 22px 24px; }
.cl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cl-tile {
  border-radius: 10px; background: #F1F1F4; overflow: hidden;
  opacity: 0; transform: translateY(16px) scale(.94);
  transition: opacity 420ms var(--ease), transform 600ms var(--ease-pop);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.clients[data-step="1"] .cl-tile:first-child, .clients:not([data-step="1"]) .cl-tile { opacity: 1; transform: none; }
.clients[data-step="1"] .cl-tile:first-child { transition-delay: 0ms; }
.cl-tabs { display: flex; gap: 2px; padding: 6px 6px 0; background: #DCDCE4; }
.cl-tabs i { height: 7px; flex: 1; border-radius: 3px 3px 0 0; background: #B8B8C6; }
.cl-tabs i:first-child { background: #F1F1F4; }
.cl-name { padding: 8px 10px 10px; font-size: 12px; font-weight: 700; color: #14141F; }
.cl-name small { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 10px; color: #6A6A7E; }
.cl-total { display: flex; align-items: baseline; gap: 14px; margin: 18px 0 0; flex-wrap: wrap; }
.cl-total b { font-family: var(--font-cond); font-weight: 400; font-size: 46px; line-height: 1; color: #14141F; }
.cl-total span { font-size: 13.5px; color: #4A4A5E; max-width: 360px; }
.cl-total .cl-big { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease) .6s, transform .5s var(--ease) .6s; }
.clients[data-step="2"] .cl-big.is-tabs, .clients[data-step="3"] .cl-big.is-hours { opacity: 1; transform: none; }
.clients[data-step="3"] .cl-big.is-tabs { display: none; }
.clients:not([data-step="3"]) .cl-big.is-hours { display: none; }
.clients[data-step="1"] .cl-big { display: none; }
@container (max-width: 560px) { .cl-grid { grid-template-columns: repeat(3, 1fr); } }
.clients { container-type: inline-size; }

/* ---------- Portafolio ---------- */
.folio { padding: 22px 24px 18px; container-type: inline-size; }
.fo-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.fo-head p { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #6A6A7E; }
.fo-head b { font-family: var(--font-cond); font-weight: 400; font-size: 22px; text-transform: uppercase; color: #14141F; }
.fo-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.fo-table th { padding: 8px 8px 10px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: #6A6A7E; text-align: right; border-bottom: 2px solid #14141F; line-height: 1.25; vertical-align: bottom; }
.fo-table th:first-child { text-align: left; }
.fo-table td { padding: 11px 8px; border-bottom: 1px solid #ECECF1; text-align: right; font-family: var(--font-mono); font-size: 12.5px; transition: background .5s var(--ease), opacity .5s var(--ease); }
.fo-table td:first-child { text-align: left; font-family: var(--font-sans); font-weight: 600; font-size: 13px; }
.fo-table td small { display: block; color: #8A8AA0; font-size: 10.5px; }
.fo-plat { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: 1px; }
.fo-plat i { width: 7px; height: 7px; border-radius: 50%; }
.fo-mer { font-weight: 700; }
.fo-delta.is-down { color: var(--st-no); }
.fo-delta.is-up { color: #1F9D5C; }
.fo-claim { color: #8A8AA0; text-decoration: line-through; text-decoration-thickness: 1.5px; }
/* Pasos: 1 la tabla, 2 la columna del ROAS mezclado, 3 el cliente que cae, 4 el de dos monedas. */
.folio[data-step="2"] td.is-mer, .folio[data-step="2"] th.is-mer { background: #EFE9FF; }
.folio[data-step="3"] tbody tr:not(.is-drop) td, .folio[data-step="4"] tbody tr:not(.is-fx) td { opacity: .3; }
.folio[data-step="3"] tr.is-drop td { background: #FFF1F1; }
.folio[data-step="4"] tr.is-fx td { background: #FFF9DB; }
.fo-alert {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: #14141F; color: #F4F2FA; font-size: 12.5px; line-height: 1.4;
  opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease) .3s, transform .5s var(--ease) .3s;
}
.fo-alert b { color: var(--st-caption); }
.fo-alert .fo-slack { flex: none; width: 22px; height: 22px; border-radius: 6px; background: #4A154B; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff; }
.folio[data-step="3"] .fo-alert { opacity: 1; transform: none; }
.folio:not([data-step="3"]) .fo-alert { position: absolute; pointer-events: none; }
.fo-foot { margin: 12px 0 0; font-size: 11.5px; color: #6A6A7E; }
@container (max-width: 560px) {
  .fo-table .fo-hide-sm { display: none; }
  .fo-table td, .fo-table th { padding-left: 5px; padding-right: 5px; }
}

/* La WhatsApp del cliente, en el teléfono. */
.scr-wa { background: #EFE7DD; }
.wa-top { display: flex; align-items: center; gap: 10px; padding: 44px 14px 10px; background: #F7F5F2; border-bottom: 1px solid #E2DDD6; font-size: 13px; }
.wa-top b { display: block; font-size: 14px; }
.wa-top small { color: #6A6A7E; font-size: 11px; }
.wa-ava { width: 34px; height: 34px; border-radius: 50%; background: #111; color: #fff; display: grid; place-items: center; font-weight: 800; }
.wa-body { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.wa-day { align-self: center; padding: 3px 10px; border-radius: 8px; background: #fff; font-size: 11px; color: #6A6A7E; }
.wa-msg { max-width: 82%; padding: 8px 11px; border-radius: 10px; background: #fff; font-size: 13.5px; line-height: 1.35; color: #111; }
.wa-msg small { display: block; margin-top: 2px; font-size: 10px; color: #6A6A7E; text-align: right; }
.wa-msg.me { align-self: flex-end; background: #D9FDD3; }
.wa-late { opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease) .5s, transform .4s var(--ease) .5s; }
.screen.is-on .wa-late { opacity: 1; transform: none; }
.scr-wa .wa-q2 { display: none; }
.scr-wa.is-q2 .wa-q2 { display: block; }

/* ---------- Pestañas con el layout de cada plataforma (datos de ejemplo) ---------- */
.bw-pane.pv { gap: 10px; padding: 14px 18px; overflow: hidden; }
.pt { width: 100%; border-collapse: collapse; background: #fff; font-size: 12px; color: #1C1E21; }
.pt th { padding: 8px 9px; font-size: 11px; font-weight: 700; text-align: left; border-bottom: 1px solid #DADDE1; white-space: nowrap; }
.pt td { padding: 8px 9px; border-bottom: 1px solid #EBEDF0; vertical-align: top; }
.pt .r { text-align: right; }
.pt td small { display: block; font-size: 10.5px; color: #65676B; white-space: nowrap; }
.mt-t td { padding-top: 7px; padding-bottom: 7px; }
.mt-t td:nth-child(3) { white-space: nowrap; font-size: 11px; color: #444950; }
.pt tfoot td { background: #F7F8FA; border-bottom: 0; }
.pt a { color: #0A66C2; text-decoration: none; }
.pt u { text-decoration: underline dotted; text-underline-offset: 2px; }
.pt .is-key { background: #F3EEFF; font-weight: 700; }
.pt-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #31A24C; vertical-align: 0; }
.pt-dot.is-off { background: #BCC0C4; }

/* Meta Ads Manager */
.mt-top { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.mt-top span { margin-left: auto; padding: 4px 10px; border: 1px solid #CED0D4; border-radius: 6px; font-size: 11.5px; color: #444950; background: #fff; }
.mt-tabs { display: flex; gap: 4px; }
.mt-tabs span { padding: 7px 14px; border-radius: 8px 8px 0 0; background: #E4E6EB; font-size: 12px; font-weight: 600; color: #444950; }
.mt-tabs span.is-on { background: #fff; color: #0A66C2; }
.mt-sw { display: inline-block; width: 24px; height: 13px; margin-right: 8px; border-radius: 999px; background: #0A66C2; vertical-align: -2px; position: relative; }
.mt-sw::after { content: ""; position: absolute; right: 2px; top: 2px; width: 9px; height: 9px; border-radius: 50%; background: #fff; }

/* TikTok Ads Manager */
.tt-top { display: flex; align-items: center; gap: 14px; padding: 9px 12px; border-radius: 8px; background: #141414; color: #fff; font-size: 12px; }
.tt-top img { filter: invert(1); }
.tt-top b { font-size: 13px; margin-right: 6px; }
.tt-top span { color: #A8A8A8; }
.tt-top span.is-on { color: #fff; font-weight: 700; }
.tt-t th { color: #6B6B6B; font-weight: 600; }
.tt-sw { display: inline-block; width: 26px; height: 14px; border-radius: 999px; background: #1BC3B4; position: relative; }
.tt-sw::after { content: ""; position: absolute; right: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.tt-sw.is-off { background: #D4D4D4; }
.tt-sw.is-off::after { right: auto; left: 2px; }

/* Google Ads */
.gg-top { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #3C4043; }
.gg-top .gg-h { margin-left: 10px; font-size: 16px; color: #202124; }
.gg-top .gg-d { margin-left: auto; padding: 4px 10px; border: 1px solid #DADCE0; border-radius: 4px; font-size: 11.5px; background: #fff; }
.gg-kpis { display: grid; grid-template-columns: repeat(3, 1fr) 1.4fr; background: #fff; border: 1px solid #DADCE0; border-radius: 6px; overflow: hidden; }
.gg-kpis > div { padding: 8px 12px; font-size: 11px; color: #3C4043; }
.gg-kpis > div b { display: block; font-size: 20px; font-weight: 400; color: #202124; }
.gg-kpis > div.is-on { background: #1A73E8; color: #fff; }
.gg-kpis > div.is-on b { color: #fff; }
.gg-kpis svg { width: 100%; height: 100%; padding: 8px; }
.gg-t th { color: #5F6368; font-weight: 500; }
.gg-t a { color: #1A0DAB; }
.gg-st { border-bottom: 1px dashed #9AA0A6; }

/* Creativos */
.cr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; min-height: 0; }
.cr-card { display: flex; flex-direction: column; margin: 0; padding: 8px; background: #fff; border-radius: 10px; }
.cr-img { position: relative; height: 172px; border-radius: 6px; overflow: hidden; }
.cr-card.is-v .cr-img { height: 196px; }
.cr-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cr-card.is-v .cr-img { background: #111; }
.cr-card.is-v .cr-img img { width: auto; margin: 0 auto; }
.cr-play { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11px; font-style: normal; display: grid; place-items: center; }
.cr-dur { position: absolute; right: 6px; bottom: 6px; padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 9.5px; font-family: var(--font-mono); }
.cr-card figcaption { min-width: 0; padding: 8px 2px 0; font-size: 12px; }
.cr-card figcaption > b { font-size: 12.5px; line-height: 1.2; }
.cr-card figcaption > small { margin-left: 6px; font-size: 10.5px; color: #6A6A7E; }
.cr-card dl { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 3px 8px; margin: 6px 0 0; }
.cr-card dt { color: #6A6A7E; font-size: 11px; white-space: nowrap; }
.cr-card dd { margin: 0; text-align: right; font-family: var(--font-mono); font-size: 11.5px; }
.cr-card dd.is-key { padding: 0 4px; border-radius: 4px; background: #F3EEFF; font-weight: 700; }
.gg-assets { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; align-items: start; }
.gg-img { margin: 0; padding: 8px; background: #fff; border-radius: 10px; }
.gg-img img { display: block; width: 100%; height: auto; border-radius: 6px; }
.gg-img figcaption { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 12px; }
.gg-sub { margin: 0 0 8px; font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: #6A6A7E; }

@container (max-width: 760px) {
  .pt .pt-sm, .pt .pt-xs, .pt td small { display: none; }
  .pt { font-size: 11.5px; }
  .pt th, .pt td { padding: 7px 6px; }
  .mt-tabs span { padding: 6px 9px; font-size: 11px; }
  .cr-grid { grid-template-columns: 1fr; gap: 6px; }
  .cr-card { display: grid; grid-template-columns: 64px 1fr; gap: 8px; padding: 6px; }
  .cr-img, .cr-card.is-v .cr-img { height: 80px; }
  .cr-card figcaption { padding: 0; }
  .cr-card figcaption > small { display: none; }
  .cr-card dl { grid-template-columns: repeat(2, 1fr auto); gap: 1px 6px; margin-top: 3px; }
  .cr-card dt, .cr-card dd { font-size: 10.5px; }
  .gg-assets { grid-template-columns: 1fr; }
  .gg-kpis { grid-template-columns: repeat(3, 1fr); }
  .gg-kpis svg { display: none; }
  .tt-top span:not(.is-on) { display: none; }
}