/* [Pulso-Supabase] 📣 Cuentas y reglas de pauta de Meta (public/meta-pauta.js). Celular primero; claro y oscuro con las variables
   de estilos.css (cambian solas con el tema). */
.mp-caja .cf-sub { display: block; }
.mp-gen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; margin: 10px 0; border: 1px solid var(--border); border-radius: var(--rs, 10px); background: var(--bg); }
.mp-gen .cf-sub { flex: 1 1 220px; }
.mp-sw { font-size: 14px; color: var(--t1); }
.mp-tabs { display: flex; gap: 6px; margin: 12px 0 10px; overflow-x: auto; scrollbar-width: none; }
.mp-tabs button { border: 1px solid var(--border); background: transparent; color: var(--t2); border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.mp-tabs button.on { background: var(--accent-bg); color: var(--accent); border-color: transparent; }
.mp-bm { border: 1px solid var(--border); border-radius: var(--rs, 10px); padding: 12px; margin: 0 0 12px; background: var(--surface); }
.mp-bm-h { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: flex-start; }
.mp-bm-acc, .mp-r-acc, .mp-p-acc { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mp-prueba { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; padding: 10px; border-radius: var(--rs, 10px); background: var(--bg); font-size: 13px; }
.mp-mal { color: var(--red); }
.mp-ctas .cf-cfg-fila { gap: 8px; flex-wrap: wrap; }
.mp-obs { box-shadow: inset 3px 0 0 var(--accent); }
.mp-modo { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; flex: 0 0 auto; }
.mp-modo button { border: 0; background: transparent; color: var(--t2); padding: 6px 10px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.mp-modo button + button { border-left: 1px solid var(--border); }
.mp-modo button.on { background: var(--accent-bg); color: var(--accent); }
.mp-modo button:disabled { cursor: not-allowed; opacity: .55; }
.mp-nota { margin-top: 6px; }
.mp-form { display: grid; gap: 8px; margin-top: 10px; }
.mp-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--t1); }
.mp-av { margin-top: 12px; display: grid; gap: 8px; }
.mp-para { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mp-texto { min-height: 180px; font-size: 14px; line-height: 1.45; }
.mp-reglas, .mp-borr, .mp-vig { margin-bottom: 14px; }
.mp-lista { margin: 8px 0; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.mp-regla { border: 1px solid var(--border); border-radius: var(--rs, 10px); padding: 10px 12px; background: var(--surface); display: grid; gap: 6px; }
.mp-regla.mp-ok { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.mp-r-txt { font-size: 14px; color: var(--t1); line-height: 1.4; }
.mp-r-orig { font-style: italic; overflow-wrap: anywhere; }
.mp-corr { display: grid; gap: 6px; }
.mp-hist summary { cursor: pointer; font-weight: 600; margin: 6px 0; }
.mp-hv { margin: 8px 0 12px; }
.mp-props { display: grid; gap: 10px; margin-top: 10px; }
.mp-prop { border: 1px solid var(--border); border-radius: var(--rs, 10px); padding: 12px; background: var(--surface); display: grid; gap: 6px; }
.mp-prop.mp-voto-si { box-shadow: inset 3px 0 0 var(--green, #16a34a); }
.mp-prop.mp-voto-no { box-shadow: inset 3px 0 0 var(--red, #dc2626); }
.mp-p-h { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; justify-content: space-between; }
.mp-p-pq { font-size: 13.5px; color: var(--t1); }
.mp-nada { font-size: 11.5px; font-weight: 700; color: var(--t2); border: 1px dashed var(--border); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.mp-nums { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-num { display: inline-flex; flex-direction: column; padding: 4px 8px; border-radius: 8px; background: var(--bg); min-width: 64px; }
.mp-num small { color: var(--t2); font-size: 11px; }
.mp-num b { font-size: 13px; }
.mp-no-on { background: var(--red, #dc2626); border-color: var(--red, #dc2626); color: #fff; }
/* 🔑 (2-nov) tokens por BM: etiqueta por cuenta, comparación personal vs. BM */
.mp-tk { display: inline-block; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--accent); background: var(--accent-bg); border-radius: 999px; padding: 2px 8px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.mp-tk-sin { color: var(--t2); background: transparent; border: 1px dashed var(--border); }
.mp-tk-per { color: var(--t1); background: var(--bg); }
.mp-comp { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--rs, 10px); background: var(--surface); display: grid; gap: 8px; }
.mp-comp-n { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 13px; }
.mp-comp-n small { color: var(--t2); }
@media (max-width: 560px) { .mp-modo button { padding: 6px 8px; font-size: 12px; } .mp-bm { padding: 10px; } }

/* ════════ 📣 (9-nov) el módulo «Pauta» (public/meta-pauta.js · #pa-adm): celular primero, claro y oscuro con las variables de estilos.css ════════ */
html.cf-hx-listo #cf-app .cf-header-actions [data-ico="pauta"]::before, .cf-mmenu-ico[data-ico="pauta"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011v2a1%201%200%200%200%201%201h3l6%204V6L7%2010H4a1%201%200%200%200-1%201z%22/%3E%3Cpath%20d%3D%22M16.5%209a4%204%200%200%201%200%206%22/%3E%3Cpath%20d%3D%22M19%206.5a7.5%207.5%200%200%201%200%2011%22/%3E%3Cpath%20d%3D%22M7%2014l1.5%205h2.5l-1-4.5%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011v2a1%201%200%200%200%201%201h3l6%204V6L7%2010H4a1%201%200%200%200-1%201z%22/%3E%3Cpath%20d%3D%22M16.5%209a4%204%200%200%201%200%206%22/%3E%3Cpath%20d%3D%22M19%206.5a7.5%207.5%200%200%201%200%2011%22/%3E%3Cpath%20d%3D%22M7%2014l1.5%205h2.5l-1-4.5%22/%3E%3C/svg%3E"); }
html.pa-abierta { overflow: hidden; }
.pa-adm { position: fixed; inset: 0; z-index: 150; background: var(--bg); color: var(--t1); display: flex; flex-direction: column; }
.pa-adm[hidden] { display: none !important; }
.pa-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface); }
.pa-logo { width: 36px; height: 36px; border-radius: 28%; display: block; flex: 0 0 auto; box-shadow: 0 6px 16px -8px var(--pp-b, #a855f7); }
.pa-logo svg { display: block; width: 100%; height: 100%; border-radius: 28%; }
.pa-tit { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pa-tit b { font-size: 16px; }
.pa-tit small { color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.pa-esp { flex: 1; }
.pa-ico { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--t1); cursor: pointer; font-size: 16px; flex: 0 0 auto; }
.pa-pill { border: 1px solid var(--border); background: var(--bg); color: var(--t1); border-radius: 999px; padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; min-height: 38px; }
.pa-ico:hover, .pa-pill:hover { border-color: var(--accent); }
.pa-tabs { display: flex; gap: 6px; padding: 8px 14px; background: var(--surface); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.pa-tabs::-webkit-scrollbar { display: none; }
.pa-tabs button { border: 1px solid transparent; background: transparent; color: var(--t2); border-radius: 999px; padding: 8px 13px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; min-height: 38px; display: inline-flex; align-items: center; gap: 6px; }
.pa-tabs button.on { background: var(--accent-bg); color: var(--accent); }
.pa-tabs em { font-style: normal; font-size: 11.5px; font-weight: 700; background: var(--red, #dc2626); color: #fff; border-radius: 999px; padding: 1px 7px; }
.pa-pers em { font-style: normal; font-size: 11.5px; font-weight: 700; background: var(--border); color: var(--t1); border-radius: 999px; padding: 1px 7px; }
.pa-body { flex: 1; overflow: auto; padding: 14px 16px 64px; -webkit-overflow-scrolling: touch; }
.pa-body > * { max-width: 1180px; margin-left: auto !important; margin-right: auto !important; }   /* (todo centrado en el computador, aunque la pieza traiga su margen) */
.pa-body .cf-sub { display: block; }
.pa-cargando, .pa-cargando-in { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--t2); padding: 36px 10px; }
.pa-cargando-in { padding: 6px 0; justify-content: flex-start; }
.pa-giro { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--border-2, var(--border)); border-top-color: var(--accent); animation: pagiro .8s linear infinite; display: inline-block; flex: 0 0 auto; }
@keyframes pagiro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pa-giro { animation-duration: 2.4s; } }
.pa-vacio { max-width: 520px; margin: 22px auto; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 26px 18px; display: grid; gap: 8px; justify-items: center; }
.pa-vacio p { margin: 0; }
.pa-vacio-i { width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center; font-size: 30px; background: var(--accent-bg); }
.pa-guia { background: var(--accent-bg); color: var(--t1); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; margin: 0 0 10px; }
.pa-q { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); color: var(--t2); font: inherit; font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0; margin-left: 4px; flex: 0 0 auto; }
.pa-q:hover { color: var(--accent); border-color: var(--accent); }
/* 🗓️ períodos (los de Métricas) */
.pa-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.pa-pers { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; align-items: center; flex-wrap: nowrap; min-width: 0; margin-top: 4px; margin-bottom: 8px; }
.pa-pers::-webkit-scrollbar { display: none; }
.pa-pers.pa-wrap { flex-wrap: wrap; overflow: visible; }
.pa-pers button { border: 1px solid var(--border); background: var(--surface); color: var(--t2); border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; min-height: 36px; display: inline-flex; gap: 6px; align-items: center; }
.pa-pers button.on { background: var(--accent-bg); color: var(--accent); border-color: transparent; }
.pa-rango { display: flex; gap: 8px; flex-wrap: wrap; }
.pa-rango label { display: grid; gap: 2px; font-size: 12px; color: var(--t2); }
/* 🔢 resumen */
.pa-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.pa-k { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pa-k > span { color: var(--t2); font-size: 12.5px; display: flex; align-items: center; }
.pa-k b { font-size: 18px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pa-k.pa-ok b, .pa-c.pa-ok b, .pa-ok { color: var(--green); }
.pa-k.pa-mal b, .pa-c.pa-mal b { color: var(--red); }
.pa-ley { margin-top: 4px; margin-bottom: 10px; }
@media (min-width: 701px) { .pa-kpis { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
/* 🚦 */
.pa-sem { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--border); flex: 0 0 auto; }
.pa-sem-verde { background: var(--green, #16a34a); } .pa-sem-ambar { background: var(--amber, #d97706); } .pa-sem-rojo { background: var(--red, #dc2626); }
.pa-t-verde b { color: var(--green); } .pa-t-ambar b { color: var(--amber-t, var(--amber)); } .pa-t-rojo b { color: var(--red); }
/* 🏢 cuentas de Hoy y su árbol */
.pa-bm-h { font-size: 12px; font-weight: 700; color: var(--t2); text-transform: uppercase; letter-spacing: .04em; margin-top: 14px; margin-bottom: 6px; padding: 0 2px; }
.pa-cta { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 12px; margin-bottom: 10px; display: grid; gap: 8px; box-shadow: inset 4px 0 0 var(--border); }
.pa-cta.pa-b-verde { box-shadow: inset 4px 0 0 var(--green, #16a34a); } .pa-cta.pa-b-ambar { box-shadow: inset 4px 0 0 var(--amber, #d97706); } .pa-cta.pa-b-rojo { box-shadow: inset 4px 0 0 var(--red, #dc2626); }
.pa-cta-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pa-cta-n { display: flex; flex-direction: column; min-width: 0; flex: 1 1 140px; }
.pa-cta-n b { font-size: 15px; overflow-wrap: anywhere; }
.pa-cta-n small { color: var(--t2); font-size: 12px; }
.pa-obj { border: 1px dashed var(--border); background: var(--bg); color: var(--t1); border-radius: 999px; padding: 5px 10px; font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; min-height: 32px; }
.pa-obj small { color: var(--t2); }
.pa-obj-ed { display: inline-flex; gap: 6px; align-items: center; margin-top: 4px; }
.pa-obj-ed .cf-input { width: 120px; min-height: 34px; }
.pa-met { border: 1px solid var(--border); background: var(--bg); border-radius: 10px; width: 34px; height: 34px; cursor: pointer; font-size: 14px; flex: 0 0 auto; padding: 0; }
.pa-met:hover { border-color: var(--accent); }
.pa-cs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pa-c { display: flex; flex-direction: column; background: var(--bg); border-radius: 10px; padding: 5px 8px; min-width: 0; }
.pa-c small { color: var(--t2); font-size: 11px; white-space: nowrap; }
.pa-c b { font-size: 13.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (min-width: 701px) { .pa-cs { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); } }
.pa-desp { border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 0; text-align: left; justify-self: start; min-height: 32px; }
.pa-arbol, .pa-sub { display: grid; gap: 6px; }
.pa-fila { border: 1px solid var(--border); border-radius: 14px; padding: 8px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; background: var(--surface); }
.pa-fila > .pa-cs, .pa-fila > .pa-sub { grid-column: 1 / -1; }
.pa-n2 { margin-left: 8px; } .pa-n3 { margin-left: 8px; background: var(--bg); }
.pa-n3 .pa-c { background: var(--surface); }
.pa-fila-h { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--t1); font: inherit; text-align: left; cursor: pointer; padding: 2px 0; min-width: 0; min-height: 34px; }
.pa-fila-ad { cursor: default; }
.pa-fila-n { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.pa-fila-n small { color: var(--t2); font-weight: 500; font-size: 11.5px; }
.pa-chev { color: var(--t2); font-size: 11px; margin-left: auto; }
.pa-foco { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 📜 secciones y tarjetas */
.pa-sec { margin-bottom: 18px; }
.pa-sec-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; margin-bottom: 8px; }
.pa-sec-h h3 { margin: 0; font-size: 16px; }
.pa-pls, .pa-sims, .pa-asis { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.pa-pl, .pa-sim, .pa-as { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 12px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.pa-pl.on { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.pa-pl-h, .pa-sim-h, .pa-as-h { display: flex; align-items: center; gap: 10px; }
.pa-pl-h > div, .pa-sim-h > div, .pa-as-h > div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pa-pl-h small, .pa-sim-h small, .pa-as-h small { color: var(--t2); font-size: 12px; }
.pa-pl-i { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: var(--accent-bg); flex: 0 0 auto; }
.pa-pl-sw { font-size: 13px; white-space: nowrap; }
.pa-pl-t { margin: 0; font-size: 13.5px; line-height: 1.45; }
.pa-pl-ed, .pa-topes { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pa-pl-ed label, .pa-topes label { display: grid; gap: 3px; font-size: 12.5px; color: var(--t2); }
.pa-pl-ed .cf-ig-acc { grid-column: 1 / -1; }
.pa-in { display: flex; align-items: center; gap: 6px; } .pa-in .cf-input { min-width: 0; }
/* 🧪 */
.pa-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.pa-pct { font-size: 18px; font-weight: 800; border-radius: 12px; padding: 4px 10px; white-space: nowrap; display: inline-flex; align-items: center; background: var(--bg); }
.pa-pct-ok { color: var(--green); background: var(--green-bg); } .pa-pct-med { color: var(--amber-t, var(--amber)); background: var(--amber-bg); } .pa-pct-mal { color: var(--red); background: var(--red-bg); }
.pa-sim-n { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.pa-bar { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; } .pa-bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.pa-ej summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--accent); }
.pa-ej-i { display: flex; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; }
.pa-ej-i small { display: block; color: var(--t2); } .pa-ej-i p { margin: 2px 0 0; } .pa-ej-d { color: var(--t2); }
/* 👀 */
.pa-estado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); margin-bottom: 8px; font-size: 13.5px; }
.pa-escribe { padding: 10px 12px; border-radius: 14px; background: var(--bg); border: 1px dashed var(--border); font-size: 13px; margin-bottom: 12px; }
.pa-escribe.on { background: var(--amber-bg); border: 1px solid var(--amber-bd, var(--amber)); }
.pa-fuente { font-size: 11.5px; font-weight: 700; color: var(--accent); background: var(--accent-bg); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.pa-dec { font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 3px 10px; background: var(--bg); border: 1px solid var(--border); }
.pa-dec-ok { color: var(--green); background: var(--green-bg); border-color: var(--green-bd); } .pa-dec-mal { color: var(--red); background: var(--red-bg); border-color: var(--red-bd); }
.pa-res { font-size: 13px; border-radius: 10px; padding: 6px 10px; background: var(--bg); }
.pa-res-acierto { background: var(--green-bg); } .pa-res-fallo { background: var(--red-bg); }
.pa-paula { border: 1px solid var(--border); border-radius: 18px; padding: 12px; background: var(--surface); }
.pa-sp { border-top: 1px solid var(--border); padding: 8px 0; display: grid; gap: 4px; font-size: 13.5px; } .pa-sp p { margin: 0; }
.pa-cambios { display: grid; gap: 8px; margin-top: 10px; }
.pa-cambio { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; font-size: 13.5px; }
.pa-cambio.mal { border-color: var(--red-bd); } .pa-cambio small { display: block; color: var(--t2); } .pa-cambio p { margin: 4px 0 0; }
.pa-body .mp-props { margin-top: 10px; }
/* 🤖 */
.pa-av { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--accent-bg); font-size: 22px; flex: 0 0 auto; }
.pa-av img { width: 100%; height: 100%; object-fit: cover; }
.pa-on { font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 9px; background: var(--bg); color: var(--t2); border: 1px solid var(--border); white-space: nowrap; }
.pa-on.on { color: var(--green); background: var(--green-bg); border-color: var(--green-bd); }
.pa-oro { margin: 0; font-size: 12.5px; background: var(--green-bg); border-radius: 10px; padding: 6px 10px; }
.pa-modo { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; max-width: 100%; justify-self: start; }
.pa-modo button { border: 0; background: transparent; color: var(--t2); padding: 7px 10px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; min-height: 34px; }
.pa-modo button + button { border-left: 1px solid var(--border); } .pa-modo button.on { background: var(--accent-bg); color: var(--accent); }
.pa-inf { background: var(--bg); border-radius: 12px; padding: 8px 10px; font-size: 13.5px; } .pa-inf p { margin: 2px 0; }
.pa-hall { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.pa-as-p { display: grid; gap: 2px; font-size: 13.5px; }
/* ⚡ (9-nov) Max, el piloto */
.pa-max { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 14px; display: grid; gap: 12px; margin-bottom: 16px; min-width: 0; box-shadow: inset 4px 0 0 var(--border); }
.pa-max.pa-max-on { box-shadow: inset 4px 0 0 var(--green, #16a34a); } .pa-max.pa-max-ens { box-shadow: inset 4px 0 0 var(--amber, #d97706); }
.pa-max-av { background: linear-gradient(135deg, var(--pp-a, #f43f5e), var(--pp-b, #a855f7)); color: #fff; font-size: 24px; width: 48px; height: 48px; }
.pa-mx-est { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 12px; border-radius: 14px; background: var(--bg); }
.pa-mx-big { font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.pa-max-on .pa-mx-big { color: var(--green); } .pa-max-ens .pa-mx-big { color: var(--amber-t, var(--amber)); } .pa-max-off .pa-mx-big { color: var(--t2); }
.pa-mx-det { font-size: 14px; font-weight: 600; flex: 1 1 220px; min-width: 0; }
.pa-mx-est .cf-sub { flex-basis: 100%; }
.pa-mx-w { margin: 0; font-size: 13px; color: var(--t2); }
.pa-mx-ctrl { display: grid; gap: 10px; }
.pa-mx-fila { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px 10px; align-items: center; }
.pa-mx-fila > .cf-sub { grid-column: 2; }
.pa-mx-l { font-size: 12.5px; font-weight: 700; color: var(--t2); }
.pa-mx-fila .pa-chips { margin: 0; }
.pa-mx-modo { justify-self: start; } .pa-mx-modo button { min-height: 38px; padding: 8px 12px; font-size: 13.5px; }
.pa-max-on .pa-mx-modo button.on { background: var(--green-bg); color: var(--green); } .pa-max-ens .pa-mx-modo button.on { background: var(--amber-bg); color: var(--amber-t, var(--amber)); }
.pa-mx-cuando { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; min-width: 0; }
.pa-mx-hor { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; padding: 4px 8px; border-radius: 12px; border: 1px dashed var(--border); }
.pa-mx-hor.on { border-style: solid; border-color: var(--accent); background: var(--accent-bg); }
.pa-mx-hor input { width: 62px; min-height: 34px; padding: 4px 6px; text-align: center; }
.pa-mx-horas { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pa-mx-horas .cf-chip { min-height: 34px; }
.pa-mx-olas { display: grid; gap: 8px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--amber-bd, var(--amber)); background: var(--amber-bg); }
.pa-mx-olas .pa-sec-h { margin: 0; } .pa-mx-olas h3 { font-size: 14.5px; }
.pa-mx-ola { display: flex; gap: 10px; align-items: center; min-width: 0; } .pa-mx-ola > div { display: flex; flex-direction: column; min-width: 0; } .pa-mx-ola b { overflow-wrap: anywhere; }
.pa-mx-ens { margin: 0; }
.pa-mx-topes { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.pa-mx-tope { display: flex; flex-direction: column; padding: 6px 10px; border-radius: 10px; background: var(--bg); min-width: 0; }
.pa-mx-tope small { color: var(--t2); font-size: 11.5px; } .pa-mx-tope b { font-size: 13.5px; overflow-wrap: anywhere; }
.pa-mx-reglas summary { cursor: pointer; font-size: 13.5px; font-weight: 600; } .pa-mx-reglas ul { margin: 6px 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; }
.pa-mx-lh { margin: 2px 0 0; }
.pa-mx-log { display: grid; gap: 8px; }
.pa-mx-i { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); min-width: 0; }
.pa-mx-i.ens { border-style: dashed; } .pa-mx-i.mal { border-color: var(--red-bd, var(--red)); } .pa-mx-i.nota { background: var(--bg); }
.pa-mx-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pa-mx-t > b { font-size: 14.5px; } .pa-mx-n { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.pa-mx-t p { margin: 2px 0 0; font-size: 13.5px; } .pa-mx-t .mp-nums { margin-top: 4px; }
.pa-mx-pres b { font-size: 15px; } .pa-mx-pq { color: var(--t1); } .pa-mx-vuelve { color: var(--t2); }
.pa-mx-acc { flex: 0 0 auto; }
.pa-mx-ico { width: 72px; height: 72px; border-radius: 14px; display: grid; place-items: center; font-size: 28px; background: var(--bg); flex: 0 0 auto; }
.pa-mini-xl { width: 72px; height: 72px; border-radius: 14px; }
.pa-link { border: 0; background: none; padding: 0; font: inherit; color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: underline; }
@media (max-width: 560px) {
  .pa-max { padding: 12px; }
  .pa-mx-fila { grid-template-columns: minmax(0, 1fr); } .pa-mx-fila > .cf-sub { grid-column: 1; }
  .pa-mx-modo { display: flex; width: 100%; } .pa-mx-modo button { flex: 1; padding: 8px 6px; font-size: 12.5px; }
  .pa-mx-i { flex-wrap: wrap; } .pa-mx-acc { width: 100%; } .pa-mx-acc .cf-btn { width: 100%; }
  .pa-mini-xl, .pa-mx-ico { width: 60px; height: 60px; }
  .pa-mx-big { font-size: 21px; }
  .pa-mx-horas { gap: 4px; } .pa-mx-horas .cf-chip { padding: 6px 9px; min-width: 0; }
}
/* 🏢 */
.pa-w { display: inline-block; margin-top: 4px; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 2px 8px; border: 1px dashed var(--border); color: var(--t2); }
.pa-w-si { color: var(--green); background: var(--green-bg); border: 1px solid var(--green-bd); }
.pa-diag { margin: 10px 0; padding: 10px 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--border); font-size: 13px; }
.pa-diag-si { border-color: var(--green-bd); background: var(--green-bg); } .pa-diag-no { border-color: var(--red-bd); background: var(--red-bg); }
.pa-diag p { margin: 4px 0; } .pa-diag ul { margin: 6px 0; padding-left: 18px; display: grid; gap: 3px; }
.pa-escr { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 12px; }
.mp-abrir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0; padding: 10px 12px; border-radius: var(--rs, 10px); background: var(--accent-bg); }
/* 📊 → 📣 el acceso discreto en cada anuncio de Métricas */
.cf-met-pauta { border: 1px solid var(--border); background: transparent; color: var(--t2); border-radius: 999px; padding: 3px 9px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cf-met-pauta:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 560px) { .cf-met-pauta-l { display: none; } .cf-met-pauta { padding: 3px 7px; } }
@media (max-width: 560px) { .pa-body { padding: 12px 12px 64px; } .pa-top { padding: 8px 10px; } .pa-tabs { padding: 8px 10px; } .pa-cta { padding: 10px; } .pa-n2, .pa-n3 { margin-left: 4px; } }

@media (max-width: 420px) { .pa-obj small { display: none; } }   /* 📱 (9-nov) en el celular «(de Métricas)» empujaba 📊 a otra línea: queda en el «?» y en el título del botón */

/* ════════ 🖼️ (9-nov, pauta2) miniaturas de los anuncios + el anuncio en grande ════════ */
.pa-mini { position: relative; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--bg); padding: 0; cursor: zoom-in; display: inline-grid; place-items: center; transition: transform .15s ease, box-shadow .15s ease; }
.pa-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pa-mini:hover, .pa-mini:focus-visible { transform: scale(1.06); box-shadow: 0 4px 14px rgba(124, 58, 237, .25); outline: none; border-color: var(--accent); }
.pa-mini-l { width: 56px; height: 56px; }
.pa-mini-s { width: 34px; height: 34px; border-radius: 8px; }
.pa-mini-sin { font-size: 18px; opacity: .55; }
.pa-mini-play { position: absolute; right: 3px; bottom: 3px; width: 17px; height: 17px; border-radius: 50%; background: rgba(0, 0, 0, .62); color: #fff; font-size: 9px; font-style: normal; display: grid; place-items: center; padding-left: 1px; }
.pa-tira { display: inline-flex; flex: 0 0 auto; margin-left: auto; padding-left: 6px; }
.pa-tira img { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; border: 2px solid var(--surface); margin-left: -8px; background: var(--bg); }
.pa-tira img:first-child { margin-left: 0; }
.pa-fila-h .pa-tira { margin-left: 6px; }
.pa-fila-ad { gap: 8px; }
.pa-ej-i .pa-mini { width: 40px; height: 40px; }
.pa-ctas-minis { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.mp-p-h { align-items: center; }
.mp-p-h .pa-mini + b { flex: 1 1 180px; }
.pa-ver { position: fixed; inset: 0; z-index: 170; background: rgba(8, 10, 22, .72); display: grid; place-items: center; padding: 16px; animation: paverEntra .18s ease-out; overflow-y: auto; }
.pa-ver[hidden] { display: none; }
.pa-ver-c { position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--surface); color: var(--t1); border-radius: 18px; padding: 14px; display: grid; gap: 10px; box-shadow: var(--shadow); }
.pa-ver-x { position: absolute; right: 10px; top: 10px; z-index: 2; }
.pa-ver-img { position: relative; border-radius: 12px; overflow: hidden; background: var(--bg); display: grid; place-items: center; min-height: 180px; }
.pa-ver-img img { width: 100%; max-height: 62vh; object-fit: contain; display: block; }
.pa-ver-img .pa-mini-play { width: 54px; height: 54px; font-size: 22px; right: auto; bottom: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.pa-ver-ads { display: flex; gap: 6px; flex-wrap: wrap; }
.pa-ver-t { display: grid; gap: 2px; }
.pa-ver-t small { color: var(--t2); }
@keyframes paverEntra { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pa-ver, .pa-mini { animation: none; transition: none; } }
@media (max-width: 560px) { .pa-mini { width: 40px; height: 40px; } .pa-tira img { width: 22px; height: 22px; } .pa-ver { padding: 0; place-items: end stretch; } .pa-ver-c { width: 100%; border-radius: 18px 18px 0 0; max-height: 92vh; } }

/* ════════ ✨ (pauta2) encabezado vivo de Hoy y del asistente: el embudo 3D (three.js) detrás de los números ════════ */
.pa-heroe, .pc-heroe { position: relative; overflow: hidden; border-radius: 18px; padding: 14px 16px; margin: 0 0 12px; min-height: 104px; display: flex; align-items: center;
  background: linear-gradient(120deg, color-mix(in srgb, var(--marca-a, #f43f5e) 12%, var(--surface)), color-mix(in srgb, var(--marca-b, #a855f7) 16%, var(--surface))); border: 1px solid color-mix(in srgb, var(--marca-b, #a855f7) 30%, var(--border)); }
.pa-3d { position: absolute; right: 0; top: 0; bottom: 0; width: 42%; min-width: 150px; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.pa-3d.pa-3d-on { opacity: 1; }
.pa-3d-c { width: 100%; height: 100%; display: block; }
.pa-heroe-n { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; max-width: 62%; }
.pa-heroe-n span { display: flex; flex-direction: column; min-width: 0; }
.pa-heroe-n small { color: var(--t2); font-size: 11.5px; font-weight: 600; }
.pa-heroe-n b { font-size: 20px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.pa-heroe-n i { color: var(--t2); font-style: normal; opacity: .7; }
.pa-heroe-k b { background: linear-gradient(90deg, var(--marca-a, #f43f5e), var(--marca-b, #a855f7)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 560px) { .pa-heroe-n { max-width: 70%; display: grid; grid-template-columns: 1fr 1fr; } .pa-heroe-n b { font-size: 16px; } .pa-heroe-n i { display: none; } .pa-3d { width: 40%; min-width: 120px; } }
@media (prefers-reduced-motion: reduce) { .pa-3d { transition: none; } }
/* 🚀 lo creado desde Pulso arriba de Hoy */
.pa-creadas { display: flex; gap: 8px; align-items: center; overflow-x: auto; scrollbar-width: none; margin: 0 0 10px; padding-bottom: 2px; }
.pa-creadas-t { font-size: 12.5px; font-weight: 700; color: var(--t2); white-space: nowrap; }
.pa-creada { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--t1); border-radius: 999px; padding: 4px 12px 4px 4px; cursor: pointer; font: inherit; flex: 0 0 auto; }
.pa-creada > span:last-child { display: flex; flex-direction: column; text-align: left; line-height: 1.2; }
.pa-creada small { color: var(--t2); font-size: 11px; }
.pa-creada .pa-mini { border-radius: 50%; width: 32px; height: 32px; }

/* ════════ 🔍 (pauta2) la ficha del anuncio: el ciclo rentable ════════ */
.pa-fic { border: 1px solid var(--border); border-radius: 14px; padding: 12px; display: grid; gap: 10px; background: var(--bg); }
.pa-fic-h { display: flex; flex-direction: column; gap: 2px; } .pa-fic-h small { color: var(--t2); }
.pa-emb { display: grid; gap: 6px; }
.pa-et { display: grid; grid-template-columns: minmax(130px, 42%) 1fr auto; align-items: center; gap: 8px; font-size: 13px; }
.pa-et i { height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--marca-a, #f43f5e), var(--marca-b, #a855f7)); width: var(--w, 0%); max-width: 100%; transition: width .5s ease; }
.pa-et-ok i { background: linear-gradient(90deg, var(--marca-b, #a855f7), var(--green, #16a34a)); }
.pa-et-mal i { background: var(--red, #dc2626); }
.pa-et b { font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.pa-et-g { grid-template-columns: 1fr auto; padding-bottom: 4px; border-bottom: 1px dashed var(--border); }
.pa-fic-k { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border-radius: 12px; padding: 10px; background: var(--surface); }
.pa-fic-k div { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .pa-fic-k small { color: var(--t2); font-size: 11px; } .pa-fic-k b { font-size: 17px; }
.pa-fic-k.pa-b-verde { box-shadow: inset 4px 0 0 var(--green, #16a34a); } .pa-fic-k.pa-b-ambar { box-shadow: inset 4px 0 0 var(--amber, #d97706); } .pa-fic-k.pa-b-rojo { box-shadow: inset 4px 0 0 var(--red, #dc2626); }
.pa-fic-g { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--green-bg, #dcfce7); color: var(--t1); font-size: 13px; }
.pa-fic-c { padding: 8px 10px; border-radius: 10px; background: var(--amber-bg, #fef3c7); color: var(--t1); font-size: 13px; } .pa-fic-c ul { margin: 4px 0; padding-left: 18px; }
.pa-fic-b { flex-wrap: wrap; }
@media (max-width: 560px) { .pa-et { grid-template-columns: minmax(110px, 46%) 1fr auto; font-size: 12.5px; } .pa-fic-k b { font-size: 15px; } }

/* ════════ 🚀 (pauta2) el asistente «Crear campaña» (public/meta-pauta-crear.js) ════════ */
.pc-heroe { gap: 10px; flex-wrap: wrap; }
.pc-heroe-t { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 3px; max-width: 64%; }
.pc-heroe-t b { font-size: 19px; } .pc-heroe-t span { color: var(--t2); font-size: 12.5px; }
.pc-pausa { position: relative; z-index: 1; font-size: 11.5px; font-weight: 700; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; }
.pc-3d { width: 38%; }
.pc-pasos { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 12px; }
.pc-paso { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--t2); border-radius: 999px; padding: 5px 12px 5px 5px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .2s ease, color .2s ease; }
.pc-paso i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: var(--bg); font-size: 13px; }
.pc-paso.on { background: var(--accent-bg); color: var(--accent); border-color: transparent; } .pc-paso.on i { background: linear-gradient(135deg, var(--marca-a, #f43f5e), var(--marca-b, #a855f7)); color: #fff; }
.pc-paso.ok i { background: var(--green, #16a34a); color: #fff; } .pc-paso:disabled { opacity: .5; cursor: not-allowed; }
.pc-cuerpo { animation: pcEntra .22s ease-out; }
@keyframes pcEntra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pc-h { font-size: 15px; margin: 14px 0 8px; } .pc-h small { font-weight: 500; }
.pc-h-fila { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .pc-h-fila .pc-h { margin-bottom: 6px; }
.pc-objs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.pc-obj { text-align: left; border: 2px solid var(--border); background: var(--surface); color: var(--t1); border-radius: 18px; padding: 14px; cursor: pointer; font: inherit; display: grid; gap: 6px; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.pc-obj:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(124, 58, 237, .14); }
.pc-obj.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.pc-obj-i { font-size: 30px; } .pc-obj b { font-size: 16px; } .pc-obj small { color: var(--t2); line-height: 1.35; }
.pc-obj em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--accent); }
.pc-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .pc-chips small { opacity: .75; }
.pc-sub { margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--accent-bg); }
.pc-bm { width: 100%; font-size: 11.5px; font-weight: 700; color: var(--t2); margin-top: 4px; }
.pc-pags { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.pc-pag { text-align: left; border: 1px solid var(--border); background: var(--surface); color: var(--t1); border-radius: 12px; padding: 10px; cursor: pointer; font: inherit; display: grid; gap: 2px; }
.pc-pag.on { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); } .pc-pag small { color: var(--t2); }
.pc-pag-est { font-size: 12px; font-weight: 600; } .pc-ok-t { color: var(--green); } .pc-mal-t { color: var(--amber); } .pc-pag-falta { border-style: dashed; background: var(--amber-bg); }
.pc-in { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--t2); margin-top: 8px; max-width: 320px; }
.pc-div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; font-size: 13px; }
.pc-div-b { flex: 0 0 140px; height: 8px; border-radius: 999px; background: var(--bg); overflow: hidden; } .pc-div-b i { display: block; height: 100%; background: linear-gradient(90deg, var(--marca-a, #f43f5e), var(--green, #16a34a)); transition: width .4s ease; }
.pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 10px; }
.pc-pz { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; border: 2px solid var(--border); background: var(--bg); padding: 0; cursor: pointer; transition: transform .15s ease, border-color .15s ease; }
.pc-pz img, .pc-pz video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-pz:hover { transform: scale(1.02); } .pc-pz.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.pc-pz-t { position: absolute; left: 5px; top: 5px; font-size: 11px; font-weight: 700; background: rgba(0, 0, 0, .6); color: #fff; border-radius: 6px; padding: 1px 5px; }
.pc-pz-n { position: absolute; right: 5px; top: 5px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.pc-pz .pa-mini-play { right: auto; left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: 30px; height: 30px; font-size: 13px; }
.pc-est { margin-top: 10px; }
.pc-gan { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.pc-gan-i { display: flex; gap: 8px; align-items: center; border: 1px solid var(--border); border-radius: 12px; padding: 6px; background: var(--surface); }
.pc-gan-i div { display: flex; flex-direction: column; min-width: 0; } .pc-gan-i b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pc-gan-i small { color: var(--t2); }
/* 🖼️ (pauta3) miniaturas GRANDES en Crear (el dueño: «se ven demasiado pequeñas») · ▶ en los videos */
.pc-gan .pa-mini { width: 96px; height: 96px; border-radius: 12px; } .pc-gan .pa-mini .pa-mini-play, .pc-reco-mz .pa-mini .pa-mini-play { width: 26px; height: 26px; font-size: 11px; }
.pc-cr-m .pa-mini { width: 56px; height: 56px; } .pc-ok-ads .pa-mini { width: 112px; height: 112px; border-radius: 12px; }
.pc-pz-g { position: absolute; right: 5px; bottom: 30px; font-size: 11px; font-weight: 800; background: #fef3c7; color: #92400e; border-radius: 6px; padding: 1px 6px; }
.pc-pz-c { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px; font-size: 11.5px; line-height: 1.25; color: #fff; text-align: left; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-mz { position: relative; flex: 0 0 auto; display: inline-grid; place-items: center; width: 120px; height: 120px; border-radius: 12px; overflow: hidden; background: var(--bg); border: 1px solid var(--border); }
.pc-mz img, .pc-mz video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-mz .pa-mini-play { right: auto; left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: 30px; height: 30px; font-size: 13px; }
.pc-mz small { position: absolute; left: 5px; top: 5px; font-size: 10.5px; font-weight: 700; background: rgba(0, 0, 0, .6); color: #fff; border-radius: 6px; padding: 1px 5px; }
.pc-mz-g { position: absolute; right: 5px; top: 5px; font-style: normal; font-size: 13px; background: #fef3c7; border-radius: 6px; padding: 0 4px; }
.pc-mz-0 { font-size: 34px; } .pc-mz-r { width: 96px; height: 96px; }
/* ✓ / ○ lo que pide cada paso */
.pc-guia { margin: 0 0 6px; font-size: 13.5px; color: var(--t2); } .pc-guia b { color: var(--t1); }
.pc-check { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; padding: 0; }
.pc-check li { font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 3px 10px; border: 1px solid var(--border); background: var(--surface); }
.pc-check-ok { color: var(--green); border-color: var(--green-bd, var(--border)) !important; background: var(--green-bg, var(--surface)) !important; }
.pc-check-no { color: var(--amber); border-style: dashed !important; } .pc-check-op { color: var(--t2); } .pc-check small { font-weight: 500; }
/* 🎯 lo que Paula te armó */
.pc-bors { border: 1px solid var(--border); border-radius: 18px; padding: 10px 14px 12px; margin: 0 0 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface)); }
.pc-bors .pc-h { margin-top: 4px; } .pc-bors > .cf-sub { margin: 0 0 8px; }
.pc-bors-c { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 8px 12px; font-size: 13.5px; }
.pc-pedir { display: grid; gap: 8px; border: 1px dashed var(--accent); border-radius: 14px; padding: 10px; margin: 0 0 10px; background: var(--surface); }
.pc-bor-l { display: grid; gap: 10px; }
.pc-bor { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; border: 1px solid var(--border); border-radius: 16px; padding: 10px; background: var(--surface); box-shadow: var(--shadow); }
.pc-bor.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.pc-bor-m { display: grid; grid-template-columns: repeat(2, 120px); gap: 6px; align-content: start; }
.pc-bor-t { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .pc-bor-t > b { font-size: 15.5px; } .pc-bor-t > small { color: var(--t2); }
.pc-bor-k { display: flex; flex-wrap: wrap; gap: 5px; } .pc-bor-k > span { font-size: 12.5px; background: var(--bg); border-radius: 8px; padding: 3px 8px; overflow-wrap: anywhere; }
.pc-bor-cpv { font-size: 14px; } .pc-bor-cpv b { font-size: 20px; color: var(--green); } .pc-bor-cpv small { color: var(--t2); }
.pc-bor-p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--t2); }
.pc-bor-a { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--amber); } .pc-bor-a li { margin: 2px 0; }
.pc-bor-rev { line-height: 1.45; } .pc-bor-rev small { color: var(--t2); }
/* 🏆 la recomendación con datos */
.pc-reco { border: 1px solid var(--border); border-radius: 16px; padding: 12px; margin: 12px 0 4px; background: var(--surface); display: grid; gap: 8px; }
.pc-reco-carg { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--t2); }
.pc-reco-h { display: flex; flex-direction: column; gap: 2px; } .pc-reco-h b { font-size: 15.5px; } .pc-reco-h small { color: var(--t2); }
.pc-reco-g { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; border-radius: 14px; padding: 10px; background: var(--green-bg, var(--bg)); border: 1px solid var(--green-bd, var(--border)); }
.pc-reco-mz { display: flex; gap: 5px; } .pc-reco-mz .pa-mini { width: 96px; height: 96px; border-radius: 12px; }
.pc-reco-d { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .pc-reco-n1 { font-size: 13.5px; overflow-wrap: anywhere; } .pc-reco-n1 small { color: var(--t2); }
.pc-reco-cs { display: flex; flex-wrap: wrap; gap: 6px 14px; } .pc-reco-c { display: flex; flex-direction: column; } .pc-reco-c b { font-size: 18px; line-height: 1.15; } .pc-reco-c small { color: var(--t2); font-size: 11.5px; }
.pc-reco-g .pc-reco-c:first-child b { font-size: 24px; color: var(--green); }
.pc-reco-p { margin: 0; font-size: 13px; line-height: 1.4; } .pc-reco-a { margin: 0; font-size: 12.5px; }
.pc-reco-o { display: grid; gap: 6px; }
.pc-reco-f { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; border-top: 1px dashed var(--border); padding-top: 6px; }
.pc-reco-f .pc-reco-c b { font-size: 14.5px; } .pc-reco-n { margin: 0; }
/* 👀 el resumen final: cambiar cada cosa y ver los creativos elegidos */
.pc-res-f { align-items: center; } .pc-res-f > b { flex: 1 1 auto; } .pc-res-e { flex: 0 0 auto; border: 0; background: none; cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 6px; opacity: .7; } .pc-res-e:hover { opacity: 1; background: var(--bg); }
.pc-res-mz { display: flex; gap: 6px; flex-wrap: wrap; padding: 2px 0 6px; border-bottom: 1px dashed var(--border); }
.pc-txts { margin-bottom: 6px; }
.pc-txt { position: relative; border-radius: 12px; margin-bottom: 8px; }
.pc-txt textarea, .pc-txt input { width: 100%; font-size: 14px; line-height: 1.4; }
.pc-txt.pc-rojo textarea, .pc-txt.pc-rojo input { border-color: var(--red, #dc2626); box-shadow: 0 0 0 2px color-mix(in srgb, var(--red, #dc2626) 20%, transparent); }
.pc-txt.pc-ambar textarea, .pc-txt.pc-ambar input { border-color: var(--amber, #d97706); }
.pc-txt.pc-verde textarea, .pc-txt.pc-verde input { border-color: var(--green, #16a34a); }
.pc-txt-p { display: flex; justify-content: space-between; align-items: center; color: var(--t2); font-size: 11.5px; margin-top: 2px; }
.pc-x { width: 26px; height: 26px; font-size: 12px; }
.pc-r { margin: 2px 0 0; font-size: 12.5px; }
.pc-pres { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .pc-pres span { font-size: 22px; font-weight: 800; } .pc-pres input { max-width: 180px; font-size: 22px; font-weight: 800; } .pc-pres small { color: var(--t2); }
.pc-edad { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 8px; } .pc-edad label { display: grid; gap: 3px; font-size: 12.5px; font-weight: 600; color: var(--t2); } .pc-edad input { width: 82px; }
.pc-lej { margin-top: 10px; font-size: 14px; }
.pc-final { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 16px; align-items: start; }
.pc-prev { display: grid; gap: 6px; justify-items: center; }
.pc-ifr { width: 340px; max-width: 100%; height: 520px; border: 0; border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.pc-sim { width: 340px; max-width: 100%; border-radius: 14px; overflow: hidden; background: #fff; color: #050505; box-shadow: var(--shadow); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
.pc-sim-h { display: flex; gap: 8px; align-items: center; padding: 10px; } .pc-sim-h i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; color: #fff; background: linear-gradient(135deg, #f43f5e, #a855f7); }
.pc-sim-h div { display: flex; flex-direction: column; } .pc-sim-h small { color: #65676b; font-size: 12px; }
.pc-sim p { margin: 0; padding: 0 10px 8px; font-size: 14px; line-height: 1.35; white-space: pre-wrap; }
.pc-sim img, .pc-sim video { width: 100%; display: block; max-height: 420px; object-fit: cover; } .pc-sim-vacio { height: 200px; display: grid; place-items: center; font-size: 40px; background: #f0f2f5; }
.pc-sim-b { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 10px; background: #f0f2f5; } .pc-sim-b div { display: flex; flex-direction: column; min-width: 0; } .pc-sim-b small { color: #65676b; font-size: 11.5px; }
.pc-sim-wa { flex: 0 0 auto; background: #e4e6eb; border-radius: 6px; padding: 7px 10px; font-weight: 700; font-size: 13.5px; }
.pc-res { display: grid; gap: 6px; border: 1px solid var(--border); border-radius: 16px; padding: 12px; background: var(--surface); }
.pc-res-f { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; border-bottom: 1px dashed var(--border); padding-bottom: 5px; } .pc-res-f span { color: var(--t2); } .pc-res-f b { text-align: right; overflow-wrap: anywhere; }
.pc-nom { display: grid; gap: 4px; margin-top: 4px; } .pc-nom small { color: var(--t2); } .pc-nom code { font-size: 11.5px; background: var(--bg); padding: 4px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.pc-crear { width: 100%; justify-content: center; min-height: 48px; font-size: 16px; margin-top: 6px; background: linear-gradient(135deg, var(--marca-a, #f43f5e), var(--marca-b, #a855f7)); border: 0; color: #fff; }
.pc-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; position: sticky; bottom: 0; padding: 10px 0; background: linear-gradient(transparent, var(--bg) 35%); }
.pc-nav [aria-disabled="true"] { opacity: .55; }
.pc-nav.pc-nav-fin { position: static; background: none; }
.pc-falta { text-align: right; }
.pc-ok { text-align: center; display: grid; gap: 8px; justify-items: center; padding: 10px 0 16px; } .pc-ok h3 { margin: 0; } .pc-ok p { margin: 0; }
.pc-ok-i { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; background: var(--green-bg, #dcfce7); animation: pcOk .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pcOk { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.pc-ok-ads { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pc-creadas { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 10px; } .pc-creadas summary { cursor: pointer; font-weight: 700; }
.pc-cr { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.pc-cr-m { display: flex; gap: 3px; flex: 0 0 auto; } .pc-cr-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .pc-cr-t b { font-size: 13px; overflow-wrap: anywhere; } .pc-cr-t small { color: var(--t2); }
@media (max-width: 700px) { .pc-final { grid-template-columns: 1fr; } .pc-ifr { height: 480px; } .pc-heroe-t { max-width: 100%; } .pc-3d.pa-3d-on { opacity: .45; }
  .pc-bor { grid-template-columns: 1fr; } .pc-bor-m { display: flex; overflow-x: auto; scrollbar-width: none; } .pc-bor-m .pc-mz { width: 104px; height: 104px; }
  .pc-reco-g { grid-template-columns: minmax(0, 1fr); } .pc-reco-mz .pa-mini { width: 88px; height: 88px; } .pc-reco-b .cf-btn { width: 100%; justify-content: center; }
  .pc-reco-f { grid-template-columns: minmax(0, 1fr) auto; } .pc-reco-f .pc-reco-cs { grid-column: 1 / -1; grid-row: 2; } }
@media (max-width: 420px) { .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pc-objs { grid-template-columns: 1fr; } .pc-pres input { font-size: 18px; }
  .pc-mz-r { width: 76px; height: 76px; } .pc-gan .pa-mini { width: 80px; height: 80px; } }
@media (prefers-reduced-motion: reduce) { .pc-cuerpo, .pc-ok-i { animation: none; } .pc-obj, .pc-pz, .pc-paso { transition: none; } }

/* ════════ 🧭 (pauta3) Hoy más claro y los creativos en grande. Todo va con el prefijo de la pantalla (.pa-adm / .pa-ver): Vitrina
   (public/vitrina-anuncio-ed.js) mete en la página reglas globales .pa-mini (56×76 con fondo negro), .pa-vacio (letra de 10 px) y .pa-ok
   que pisaban las de Pauta: por eso las miniaturas salían como cuadros negros y los estados vacíos casi no se leían. ════════ */
:is(.pa-adm, .pa-ver) .pa-mini { width: 56px; height: 70px; border-radius: 10px; background: var(--bg); display: inline-grid; place-items: center; }
:is(.pa-adm, .pa-ver) .pa-mini-s { width: 44px; height: 55px; border-radius: 8px; }
:is(.pa-adm, .pa-ver) .pa-mini-m { width: 72px; height: 90px; border-radius: 12px; }
:is(.pa-adm, .pa-ver) .pa-mini-l { width: 88px; height: 110px; border-radius: 12px; }
:is(.pa-adm, .pa-ver) .pa-mini-ad { width: 96px; height: 120px; border-radius: 12px; }
:is(.pa-adm, .pa-ver) .pa-mini-xl { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 12px; }
:is(.pa-adm, .pa-ver) .pa-mini-sin { font-size: 22px; }
:is(.pa-adm, .pa-ver) .pa-mini .pa-mini-play { text-shadow: none; }
:is(.pa-adm, .pa-ver) :is(.pa-mini-ad, .pa-mini-xl, .pa-mini-l, .pa-mini-m) .pa-mini-play { width: 26px; height: 26px; font-size: 12px; right: 6px; bottom: 6px; }
.pa-adm .pa-ej-i .pa-mini { width: 64px; height: 80px; }
.pa-adm .pa-creada .pa-mini { border-radius: 50%; width: 32px; height: 32px; }
:is(.pa-adm, .pa-ver) .pa-vacio { background: var(--surface); font-size: inherit; text-align: center; line-height: inherit; color: inherit; opacity: 1; }
:is(.pa-adm, .pa-ver) .pa-ok { font-weight: inherit; font-size: inherit; }
.pa-adm .pa-ctas-minis { gap: 8px; }
/* 🔢 el encabezado: el embudo arriba y los otros tres números debajo (antes se repetían en 7 tarjetas) */
.pa-adm .pa-heroe { flex-direction: column; align-items: stretch; gap: 10px; }
.pa-heroe-n small, .pa-heroe-s small { display: inline-flex; align-items: center; }
.pa-heroe-s { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px 26px; max-width: 62%; padding-top: 8px; border-top: 1px dashed color-mix(in srgb, var(--marca-b, #a855f7) 30%, var(--border)); }
.pa-heroe-s > span { display: flex; flex-direction: column; min-width: 0; }
.pa-heroe-s small { color: var(--t2); font-size: 11.5px; font-weight: 600; }
.pa-heroe-s b { font-size: 16px; font-variant-numeric: tabular-nums; }
.pa-heroe-s .pa-ok b { color: var(--green); } .pa-heroe-s .pa-mal b { color: var(--red); }
/* 🧭 qué hacer ahora */
.pa-qh { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 12px 14px; margin: 0 0 12px; display: grid; gap: 12px; }
.pa-qh-h { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.pa-qh-h h3 { margin: 0; font-size: 16px; }
.pa-qh-cs { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; }
.pa-qh-c { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; font-size: 13px; background: var(--bg); }
.pa-qh-g { display: grid; gap: 12px; }
.pa-qh-l { display: grid; gap: 6px; min-width: 0; align-content: start; }
.pa-qh-t { font-size: 13.5px; }
.pa-qh-l .cf-sub { margin: 0; }
.pa-qh-p { margin: 0; }
@media (min-width: 900px) { .pa-qh-g { grid-template-columns: 1fr 1fr; } }
/* 🖼️ los creativos en grande, con su 🚦 y su número */
.pa-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pa-tiles-x { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; padding-bottom: 4px; }
.pa-tiles-x .pa-tile { flex: 0 0 104px; scroll-snap-align: start; }
.pa-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pa-tile-n { display: flex; align-items: center; gap: 6px; line-height: 1.1; min-width: 0; }
.pa-tile-n > span { display: flex; flex-direction: column; min-width: 0; }
.pa-tile-n b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.pa-tile-n small { font-size: 11px; color: var(--t2); }
.pa-tile-t { font-size: 11.5px; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-dest { min-width: 0; }
.pa-dest-h { display: block; color: var(--t2); font-size: 11.5px; font-weight: 700; margin-bottom: 4px; }
/* 🏢 la tarjeta de cada cuenta: el semáforo dicho con palabras, sus números, sus creativos y la acción */
.pa-cta-g { display: grid; gap: 10px; min-width: 0; }
.pa-cta-i { display: grid; gap: 8px; min-width: 0; align-content: start; }
@media (min-width: 900px) { .pa-cta-g { grid-template-columns: minmax(0, 1fr) 400px; align-items: start; } }
.pa-vl { margin: 0; display: flex; flex-direction: column; gap: 3px; font-size: 14px; line-height: 1.35; padding: 8px 12px; border-radius: 12px; background: var(--bg); }
.pa-vl small { color: var(--t2); font-size: 12.5px; }
.pa-vl-verde { background: var(--green-bg); } .pa-vl-ambar { background: var(--amber-bg); } .pa-vl-rojo { background: var(--red-bg); }
.pa-vl-c { font-size: 13px; }
.pa-cta-acc { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pa-adm .pa-desp-b { border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 999px; padding: 7px 14px; background: var(--accent-bg); min-height: 38px; }
.pa-pb { border: 1px solid var(--amber-bd, var(--amber)); background: var(--amber-bg); color: var(--t1); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; min-height: 32px; }
.pa-pb:hover { border-color: var(--accent); }
.pa-adm .pa-met-t { width: auto; padding: 0 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--t1); display: inline-flex; align-items: center; gap: 2px; }
.pa-adm .pa-c small { white-space: normal; line-height: 1.15; }
.pa-adm .pa-c { justify-content: space-between; gap: 2px; }
.pa-adm .pa-obj b { font-weight: 700; }
/* 🌳 campañas y conjuntos: la tira más grande; anuncios: el creativo en grande a la izquierda */
.pa-adm .pa-tira { gap: 4px; display: inline-flex; }
.pa-adm .pa-tira img { width: 40px; height: 50px; border-radius: 8px; margin-left: 0; border: 1px solid var(--border); }
.pa-fila-acc { display: inline-flex; align-items: center; gap: 6px; }
.pa-adm .pa-fila.pa-ad { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 8px; align-items: start; }
.pa-adm .pa-ad > .pa-mini { grid-row: 1 / span 3; }
.pa-adm .pa-fila.pa-ad > .pa-cs, .pa-adm .pa-fila.pa-ad > .pa-ad-acc { grid-column: 2; }
.pa-ad-h { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.pa-ad-h .pa-sem { margin-top: 4px; }
.pa-ad-h .pa-fila-n { flex: 1; }
.pa-ad-v { display: block; font-weight: 500; font-size: 12.5px; color: var(--t2); margin-top: 3px; }
.pa-ad-acc { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pa-adm .mp-prop.pa-foco { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 👀 propuestas: el creativo junto al título y al porqué */
.pa-adm .mp-p-h { flex-wrap: nowrap; align-items: flex-start; gap: 12px; }
.mp-p-ht { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.mp-p-ht > b { font-size: 15px; line-height: 1.3; }
.mp-p-ht .pa-fuente { align-self: flex-start; white-space: normal; }
/* ⏳ cargando: el esqueleto de lo que viene */
.pa-esq { display: grid; gap: 10px; }
.pa-esq i { display: block; border-radius: 18px; border: 1px solid var(--border); background: linear-gradient(90deg, var(--surface) 0%, var(--bg) 50%, var(--surface) 100%); background-size: 200% 100%; animation: paEsq 1.4s ease-in-out infinite; }
.pa-esq-h { height: 112px; } .pa-esq-q { height: 170px; } .pa-esq-c { height: 140px; }
.pa-centro { justify-content: center; }
@keyframes paEsq { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* 📱 celular */
@media (max-width: 560px) {
  .pa-tabs { gap: 2px; padding: 6px; }
  .pa-tabs button { flex: 1 0 auto; flex-direction: column; gap: 2px; padding: 5px 6px; min-height: 50px; font-size: 11px; position: relative; justify-content: center; }
  .pa-tab-i { font-size: 18px; line-height: 1; }
  .pa-tabs em { position: absolute; top: 1px; right: 0; font-size: 10px; padding: 0 5px; }
  .pa-heroe-s { max-width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .pa-heroe-s b { font-size: 14px; }
  .pa-qh { padding: 10px; }
  .pa-tiles-x .pa-tile { flex-basis: 92px; }
  :is(.pa-adm, .pa-ver) .pa-mini { width: 52px; height: 65px; }
  :is(.pa-adm, .pa-ver) .pa-mini-m { width: 64px; height: 80px; }
  :is(.pa-adm, .pa-ver) .pa-mini-l { width: 72px; height: 90px; }
  :is(.pa-adm, .pa-ver) .pa-mini-ad { width: 80px; height: 100px; }
  :is(.pa-adm, .pa-ver) .pa-mini-xl { width: 100%; height: auto; }
  .pa-adm .pa-creada .pa-mini { width: 32px; height: 32px; }
  .pa-adm .pa-tira img { width: 28px; height: 35px; border-radius: 6px; }
  .pa-adm .pa-ad > .pa-mini { grid-row: 1; }
  .pa-adm .pa-fila.pa-ad > .pa-cs, .pa-adm .pa-fila.pa-ad > .pa-ad-acc { grid-column: 1 / -1; }
  .pa-adm .pa-arbol .pa-n2, .pa-adm .pa-arbol .pa-n3 { margin-left: 0; }
  .pa-adm .pa-met-t span { display: none; }
  .pa-adm .pa-met-t { padding: 0; width: 34px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .pa-esq i { animation: none; } }
.pa-adm .pa-heroe:not(:has(.pa-3d-on)) :is(.pa-heroe-n, .pa-heroe-s) { max-width: 100%; }   /* (sin 3D: los números usan todo el ancho) */
.pa-qh-h .cf-btn, .pa-ad-acc .cf-btn { margin: 0; }
@media (max-width: 560px) {
  .pa-adm .pa-heroe .pa-3d { width: 34%; min-width: 0; height: 120px; bottom: auto; }
  .pa-adm .pa-heroe-n { max-width: 100%; padding-right: 30%; }
  .pa-adm .pa-heroe:not(:has(.pa-3d-on)) .pa-heroe-n { padding-right: 0; }
  .pa-heroe-n small, .pa-heroe-s small { font-size: 11px; }
  .pa-adm .pa-q { width: 16px; height: 16px; font-size: 10px; margin-left: 3px; }
  .pa-tabs button { padding: 5px 4px; font-size: 10.5px; }
  .pa-qh-h .cf-btn { width: 100%; justify-content: center; }
}