/* META ADS (29/09/2026) · lo pinta meta-ads.js. Tokens del manual: cobalto para la acción y la barra de
   gasto; ámbar SOLO para «cerca del tope» y para la categoría especial (lo que pide atención). La barra
   entra con la animación común de movimiento.css (.barra span), que ya respeta «reducir movimiento». */
.hoja-overlay.ma-hoja { width: min(860px, 100vw); }
.ma-bloque { display: grid; gap: 10px; padding: 14px 0; border-top: 1px solid var(--costura); }
.ma-bloque h3 { margin: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--papel-tenue); font-weight: 600; }
.ma-lista { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: .88rem; color: var(--papel); }
.ma-form { display: grid; gap: 8px; }
.ma-fila { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.ma-fila > p { grid-column: 1 / -1; margin: 0; }
.ma-form input, .ma-form select { font: inherit; font-size: .9rem; min-height: 40px; padding: 6px 10px; color: var(--papel); background: var(--grafito-panel); border: 1px solid var(--costura-fuerte); border-radius: var(--r-control); min-width: 0; }
.ma-guia { display: grid; gap: 8px; }
.ma-paso-texto { margin: 0; font-size: .92rem; color: var(--papel); line-height: 1.5; }
.ma-paso-texto:focus { outline: none; }
.ma-paso-texto:focus-visible { outline: 2px solid var(--cobalto-claro); outline-offset: 4px; }
/* Gasto frente al tope: la cifra en texto siempre (la barra es apoyo, no la única señal). */
.ma-gasto { display: grid; gap: 6px; }
.ma-gasto-cifra { margin: 0; font-size: .95rem; font-weight: 600; color: var(--papel); }
.ma-barra { height: 10px; }
.ma-gasto-alto .ma-barra span { background: var(--ambar); }
.ma-gasto-alto .ma-gasto-cifra strong { color: var(--ambar-texto); }
/* Campañas: tarjeta con la vista previa del anuncio al lado de sus datos. */
.ma-campana { display: grid; gap: 8px; animation: ma-entra 280ms var(--mv-curva, ease-out) both; }
.ma-campana-cab { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; overflow-wrap: anywhere; }
.ma-previa { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 12px; align-items: start; }
.ma-previa .redes-video { margin: 0; max-width: 200px; }
.ma-previa-texto p { margin: 0 0 6px; overflow-wrap: anywhere; }
.ma-previa-texto .redes-texto { white-space: pre-line; }
.ma-datos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: .86rem; }
.ma-datos dt { color: var(--papel-tenue); }
.ma-datos dd { margin: 0; color: var(--papel); overflow-wrap: anywhere; }
.ma-especial { margin: 0; display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: .86rem; color: var(--papel); border: 1px solid var(--ambar-texto); border-radius: var(--r-panel); background: var(--ambar-tenue); }
.ma-especial-marca { flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--ambar); }
/* Semiautomático: pasos numerados, cada uno con su botón de copiar (objetivo de 24 px o más). */
.ma-semi { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--costura-fuerte); border-radius: var(--r-panel); background: var(--grafito-panel); }
.ma-pasos { margin: 0; padding-left: 22px; display: grid; gap: 8px; font-size: .88rem; color: var(--papel); }
.ma-pasos li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; justify-content: space-between; }
.ma-paso { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.ma-copiar, .ma-bloque .enlace-discreto, .ma-bloque .pulsador { min-height: 32px; min-width: 24px; }
.ma-copiado { margin: 0; min-height: 1em; }
.ma-cambio { display: grid; gap: 6px; }
.ma-cambio p { margin: 0; }
/* Informe: cada línea con su cifra y, debajo, de dónde sale. */
.ma-informe { margin: 0 0 8px; padding: 0; list-style: none; display: grid; gap: 6px; font-size: .88rem; color: var(--papel); }
.ma-informe li { display: grid; gap: 2px; }
.ma-informe li.ma-sin-datos .ma-cifra { color: var(--papel-apagado); }
.ma-fuente { overflow-wrap: anywhere; }
@keyframes ma-entra { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .ma-campana { animation: none; }
}
@media (max-width: 640px) {
  .nav-boton#abrir-meta-ads::before { content: '◎'; font-size: 1.05rem; }
  .cabecera-derecha:has(#abrir-meta-ads:not([hidden])) { gap: 4px; }
  .ma-previa { grid-template-columns: minmax(0, 1fr); }
  .ma-fila { grid-template-columns: minmax(0, 1fr); }
}