/* Etapa 6: anuncios (configuración, tarjetas, editor, feed) y piezas nuevas del revisor. */

/* ---------- Configuración ---------- */
.paneles-anuncios { display: flex; flex-direction: column; gap: 16px; }
.config-anuncios__rejilla { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); align-items: start; }
.contador-num { display: inline-flex; align-items: center; gap: 6px; }
.contador-num__valor { min-width: 32px; text-align: center; font-size: 18px; font-weight: var(--mp-font-weight-semibold); }
.contador-num .btn-icono { font-size: 18px; font-weight: var(--mp-font-weight-semibold); }
.chips-multi { display: flex; flex-wrap: wrap; gap: 6px; }
.chip--conmutable { display: inline-flex; align-items: center; gap: 6px; }
.chip--conmutable[aria-pressed="true"] { border-color: var(--mp-color-primary); background: var(--mp-color-primary-soft); color: var(--mp-color-primary-text); font-weight: var(--mp-font-weight-semibold); }
.grupo-chips { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.grupo-chips__nombre { font-size: 12px; font-weight: var(--mp-font-weight-semibold); color: var(--mp-color-text-secondary); }
.fila-casillas { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.plan-anuncios { padding: 12px 14px; border-radius: var(--mp-radius-md); background: var(--mp-color-surface-sunken); display: flex; flex-direction: column; gap: 8px; }
.plan-anuncios__titulo { margin: 0; font-size: 13px; }
.plan-anuncios__lista { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.plan-anuncios__lista li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.plan-anuncios p { margin: 0; }
.comprobaciones--abierta { padding: 12px 14px 0; }
.utm-ejemplo { margin: 0; font-size: 12px; word-break: break-all; padding: 8px 10px; border-radius: var(--mp-radius-sm); background: var(--mp-color-surface-sunken); }
.referencias-anuncio { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.referencia-anuncio { margin: 0; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--mp-color-border); border-radius: var(--mp-radius-md); padding: 8px; min-width: 0; }
.referencia-anuncio img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--mp-radius-sm); background: var(--mp-color-surface-sunken); }
.referencia-anuncio__texto { aspect-ratio: 4 / 5; overflow: hidden; padding: 10px; font-size: 12.5px; line-height: 1.45; border-radius: var(--mp-radius-sm); background: var(--mp-color-surface-sunken); color: var(--mp-color-text-secondary); }
.referencia-anuncio__cabecera { display: flex; align-items: center; gap: 6px; justify-content: space-between; font-size: 13px; }
.referencia-anuncio__cabecera b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Etiquetas ---------- */
.etiqueta-temp { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--mp-radius-sm); font-size: 12px; font-weight: var(--mp-font-weight-semibold); background: var(--mp-color-surface-sunken); color: var(--mp-color-text-secondary); white-space: nowrap; }
.etiqueta-temp--retargeting { background: var(--mp-color-accent-soft); color: var(--mp-color-accent-text); }
.etiqueta-orig { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--mp-radius-sm); font-size: 12px; font-weight: var(--mp-font-weight-semibold); white-space: nowrap; }
.etiqueta-orig--exito { background: var(--mp-color-success-soft); color: var(--mp-color-success-text); }
.etiqueta-orig--aviso { background: var(--mp-color-warning-soft); color: var(--mp-color-warning-text); }
.etiqueta-orig--error { background: var(--mp-color-error-soft); color: var(--mp-color-error-text); }
.etiqueta-orig--neutro { background: var(--mp-color-surface-sunken); color: var(--mp-color-text-secondary); }
.codigo-anuncio { font-size: 13px; font-weight: var(--mp-font-weight-semibold); padding: 2px 8px; border-radius: var(--mp-radius-sm); background: var(--mp-color-primary); color: var(--mp-color-on-primary); }
.chip-menu { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: var(--mp-radius-sm); border: 1px dashed var(--mp-color-border-field); background: var(--mp-color-surface); color: var(--mp-color-text); font: inherit; font-size: 12.5px; cursor: pointer; }
@media (hover: hover) { .chip-menu:hover { border-color: var(--mp-color-primary); background: var(--mp-color-primary-soft); } }
.chip-menu:focus-visible { outline: none; box-shadow: var(--mp-shadow-focus); }

/* ---------- Lista de anuncios ---------- */
.barra-anuncios { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lista-anuncios { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.tarjeta-anuncio { display: flex; flex-direction: column; gap: 12px; padding: 16px; min-width: 0; }
.tarjeta-anuncio__cabecera { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tarjeta-anuncio__angulo { margin: 0; font-size: 13px; }
.tarjeta-anuncio__cuerpo { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 768px) { .tarjeta-anuncio__cuerpo { grid-template-columns: 240px minmax(0, 1fr); } }
@media (min-width: 1200px) { .tarjeta-anuncio__cuerpo { grid-template-columns: 280px minmax(0, 1fr); } }
.tarjeta-anuncio__textos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); align-items: start; }
.tarjeta-anuncio__acciones { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; border-top: 1px solid var(--mp-color-border); padding-top: 10px; }
.campo-anuncio { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo-anuncio--fila { flex-direction: row; align-items: center; gap: 10px; }
.campo-anuncio__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.campo-anuncio__etiqueta { font-size: 12px; font-weight: var(--mp-font-weight-semibold); color: var(--mp-color-text-secondary); }
.campo-anuncio__contador { font-size: 11.5px; color: var(--mp-color-text-tertiary); }
.campo-anuncio__contador.is-cerca { color: var(--mp-color-warning-text); }
.campo-anuncio__contador.is-corta { color: var(--mp-color-error-text); font-weight: var(--mp-font-weight-semibold); }
.campo-anuncio__texto { font-size: 14px; line-height: 1.55; border: 1px solid var(--mp-color-border); border-radius: var(--mp-radius-md); padding: 8px 10px; background: var(--mp-color-surface-sunken); white-space: pre-line; overflow-wrap: anywhere; }
.boton-anuncio { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--mp-radius-sm); background: var(--mp-color-surface-sunken); border: 1px solid var(--mp-color-border); font-size: 13px; font-weight: var(--mp-font-weight-semibold); }
.lista-carrusel { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.5; }
.campo__contador.is-corta { color: var(--mp-color-error-text); font-weight: var(--mp-font-weight-semibold); }

.media-anuncio { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.media-anuncio__marco { width: 100%; border-radius: var(--mp-radius-md); overflow: hidden; background: var(--mp-color-surface-sunken); border: 1px solid var(--mp-color-border); }
.media-anuncio__marco > img { display: block; width: 100%; height: auto; }
.media-anuncio__marco--1-1 { aspect-ratio: 1 / 1; }
.media-anuncio__marco--4-5 { aspect-ratio: 4 / 5; }
.media-anuncio__marco--9-16 { aspect-ratio: 9 / 16; max-height: 420px; }
.media-anuncio__marco--9-16 > img { height: 100%; object-fit: cover; }
.media-anuncio__marco .bloque { height: 100%; }
.media-anuncio__idea p { margin: 2px 0 0; font-size: 13px; color: var(--mp-color-text-secondary); }
.media-anuncio__nota { margin: 0; font-size: 12px; }
.media-anuncio .segmentado { align-self: flex-start; }
.carrusel-anuncio { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; height: 100%; }
.carrusel-anuncio img { flex: 0 0 86%; width: 86%; aspect-ratio: 1 / 1; object-fit: cover; scroll-snap-align: start; border-radius: var(--mp-radius-sm); }

.guion-anuncio { display: flex; flex-direction: column; gap: 6px; }
.guion-anuncio h4 { margin: 0; font-size: 14px; }
.guion-anuncio p { margin: 0; }
.guion-anuncio__tabla { display: flex; flex-direction: column; border: 1px solid var(--mp-color-border); border-radius: var(--mp-radius-md); overflow: hidden; }
.guion-anuncio__fila { display: grid; grid-template-columns: 70px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 8px 12px; font-size: 13.5px; line-height: 1.45; border-top: 1px solid var(--mp-color-border); }
.guion-anuncio__fila--cabecera { border-top: none; background: var(--mp-color-surface-sunken); font-size: 12px; font-weight: var(--mp-font-weight-semibold); color: var(--mp-color-text-secondary); }
@media (max-width: 767px) {
  .guion-anuncio__fila { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .guion-anuncio__fila--cabecera { display: none; }
  .guion-anuncio__fila > span::before { content: attr(data-et) " · "; font-size: 11.5px; color: var(--mp-color-text-tertiary); }
}

.utm-anuncio { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--mp-color-text-secondary); }
.utm-anuncio__url { flex: 1; min-width: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav-anuncios { position: sticky; bottom: calc(69px + env(safe-area-inset-bottom)); z-index: var(--mp-z-sticky); display: flex; align-items: center; gap: 8px; padding: 10px 0; background: var(--mp-color-bg); border-top: 1px solid var(--mp-color-border); }
.nav-anuncios__pos { font-size: 13px; color: var(--mp-color-text-secondary); }
.nav-anuncios .btn--principal { margin-left: auto; min-height: 44px; }
.nav-anuncios .btn-icono { width: 44px; height: 44px; }

/* ---------- Editor ---------- */
.editor-anuncio { display: flex; flex-direction: column; gap: 14px; }
.editor-anuncio__fila { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
.editor-guion { display: flex; flex-direction: column; gap: 10px; }
.editor-guion__escena { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); border: 1px solid var(--mp-color-border); border-radius: var(--mp-radius-md); padding: 10px 12px; margin: 0; align-items: end; }
.editor-guion__escena legend { font-size: 12px; font-weight: var(--mp-font-weight-semibold); color: var(--mp-color-text-secondary); padding: 0 4px; }
.editor-guion > .btn { align-self: flex-start; }

/* ---------- Feed ---------- */
.feed { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); align-items: start; }
.feed__post { max-width: 420px; width: 100%; justify-self: center; background: var(--mp-color-surface); border: 1px solid var(--mp-color-border); border-radius: 12px; overflow: hidden; box-shadow: var(--mp-shadow-1); }
.feed__post.is-mio { border: 1.5px solid var(--mp-color-primary); }
.feed__post.is-foco { box-shadow: 0 0 0 3px var(--mp-color-focus-ring), var(--mp-shadow-2); }
.feed__cabecera { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.feed__avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--mp-color-surface-sunken); font-weight: var(--mp-font-weight-semibold); flex: none; }
.feed__quien { display: flex; flex-direction: column; min-width: 0; flex: 1; font-size: 13px; line-height: 1.3; }
.feed__quien b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed__quien span { font-size: 11.5px; color: var(--mp-color-text-tertiary); }
.feed__etiqueta { font-size: 11px; font-weight: var(--mp-font-weight-semibold); padding: 2px 7px; border-radius: var(--mp-radius-xs); white-space: nowrap; background: var(--mp-color-surface-sunken); color: var(--mp-color-text-secondary); }
.feed__etiqueta.is-mio { font-family: var(--mp-font-mono); background: var(--mp-color-primary); color: var(--mp-color-on-primary); }
.feed__texto { margin: 0; padding: 0 12px 10px; font-size: 14px; line-height: 1.45; }
.feed__media { position: relative; background: var(--mp-color-surface-sunken); min-height: 120px; }
.feed__media img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; }
.feed__media .bloque { height: 240px; margin: 0; border-radius: 0; }
.feed__sin-imagen { display: flex; align-items: center; justify-content: center; height: 120px; color: var(--mp-color-text-tertiary); font-size: 13px; }
.feed__video { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--mp-radius-full); font-size: 11.5px; background: rgba(0, 0, 0, .6); color: #fff; }
.feed__pie { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--mp-color-surface-sunken); }
.feed__pie > div { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; }
.feed__pie b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed__dominio { font-size: 11px; color: var(--mp-color-text-tertiary); text-transform: uppercase; }
.feed__boton { flex: none; height: 32px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: var(--mp-radius-sm); background: var(--mp-color-surface); border: 1px solid var(--mp-color-border); font-size: 13px; font-weight: var(--mp-font-weight-semibold); }
.feed__meta { margin: 0; padding: 6px 12px 10px; font-size: 11.5px; }

/* ---------- Revisor: herramientas, piezas, frases marcadas y globo ---------- */
.revisor__herramientas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.revisor__herramientas .segmentado { flex: 1 1 auto; }
.revisor__herramientas .segmentado__opcion { flex: 1; font-size: 12.5px; }
.revisor__piezas { border: 1px solid var(--mp-color-border); border-radius: 10px; padding: 8px 12px; font-size: 13px; }
.revisor__piezas summary { cursor: pointer; }
.revisor__piezas-lista { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.revisor__piezas-lista li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.revisor__pieza { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.revisor__vacio { flex-wrap: wrap; }
.revisor__vacio p { margin: 0; }
.marcado--pulsable { cursor: pointer; border-radius: 2px; }
.marcado--pulsable:focus-visible { outline: none; box-shadow: var(--mp-shadow-focus); }
@media (hover: hover) { .marcado--pulsable:hover { background: var(--mp-color-surface-hover); } }
.globo-revisor { position: absolute; z-index: var(--mp-z-dropdown); display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 10px; background: var(--mp-color-surface-raised); border: 1px solid var(--mp-color-border); box-shadow: var(--mp-shadow-2); }
.globo-revisor p { margin: 0; }
.globo-revisor--error .alerta__cabecera { color: var(--mp-color-error-text); }
.globo-revisor--aviso .alerta__cabecera { color: var(--mp-color-warning-text); }
.globo-revisor__cuerpo { display: flex; flex-direction: column; gap: 8px; }
.globo-revisor__cuerpo .alerta--error { color: var(--mp-color-error-text); }
.globo-revisor__cuerpo .alerta--aviso { color: var(--mp-color-warning-text); }

/* ---------- Originalidad del diseño de las páginas ---------- */
.diseno-pagina { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.diseno-pagina img { width: 120px; border-radius: var(--mp-radius-sm); border: 1px solid var(--mp-color-border); }
.diseno-pagina__textos { flex: 1 1 200px; display: flex; flex-direction: column; gap: 6px; }
.diseno-pagina__textos p { margin: 0; }

@media (max-width: 767px) {
  .tarjeta-anuncio { padding: 14px; }
  .tarjeta-anuncio__acciones .btn { min-height: 44px; }
  .campo-anuncio__texto { font-size: 14.5px; }
  .chip-menu { height: 36px; }
  .feed { grid-template-columns: minmax(0, 1fr); }
}