/* anuncios-estado.css · Anuncios del equipo (23/10): todos los estudios, detalle con semáforo y «Lo que conviene hacer», flechas de comparación.
   Archivo propio; se apoya en accesos-anuncios.css (tarjetas, líneas, campañas) y en los colores del portal (--ok, --warn, --bad, --mute, --line).
   Todo cabe en una pantalla: lo que sobra se desliza DENTRO de .llena-scroll. Toques de 44 px; piso de letra 11 px. */

/* ---------- flechas de comparación con los 7 días anteriores ---------- */
.aa-fl{display:inline-flex;align-items:center;gap:.1875rem;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.aa-fl i{font-style:normal;font-size:.75rem;line-height:1}
.aa-fl.ok{color:var(--ok)}.aa-fl.mal{color:var(--bad)}.aa-fl.neu{color:var(--mute)}
.aa-sc{color:var(--mute);font-size:.75rem;font-weight:500}
.aa-7{color:var(--mute);font-size:.75rem;font-weight:500}
.aa-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.aa-cmp{display:flex;align-items:center;gap:.375rem;flex-wrap:wrap;flex-basis:100%}

/* ---------- tarjetas de arriba (4) ---------- */
.ae-kpis4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ae-kpis4 .kpi{padding:.625rem var(--pad)}
.ae-kpis4 .kpi .pie-k{gap:.375rem;min-height:1.25rem}
.ae-kpis4 .kpi .pie-k .pill{height:1.375rem}
.ae-kpis4 .ae-atencion .v{color:var(--warn)}
.ae-cargar{min-height:max(2.75rem,44px);padding:0 .25rem;font-size:.75rem}

/* ---------- tabla de estudios y de campañas ---------- */
.ae-tabla{padding:0;gap:0;overflow:hidden}
.ae-th,.ae-fila{display:grid;grid-template-columns:minmax(0,1.7fr) repeat(4,minmax(5.5rem,1fr)) minmax(7.5rem,1fr) 6.5rem;align-items:center;column-gap:.75rem;padding:0 var(--pad)}
.ae-th{min-height:2.25rem;font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);font-weight:600}
.ae-th span:not(:first-child){text-align:right}
.ae-fila{width:100%;min-height:max(3.25rem,44px);border:0;border-top:1px solid var(--line);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.ae-fila:hover{background:var(--raised)}
.ae-fila:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ae-nom{min-width:0;display:flex;flex-direction:column;gap:.0625rem}
.ae-nom b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ae-nom small{color:var(--mute);font-size:.75rem;overflow-wrap:anywhere}
.ae-cif{display:flex;flex-direction:column;align-items:flex-end;text-align:right;min-width:0}
.ae-cif b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.ae-cif small{display:none;font-size:.75rem;color:var(--mute)}
.ae-sem{display:flex;justify-content:flex-end}
.pill.ae-hueco{background:none;border:1px dashed var(--line);color:var(--mute)}
.ae-h{margin:.25rem 0 0;font-size:.875rem;font-weight:600;color:var(--mute)}
.ae-sin{padding:0;gap:0;overflow:hidden}
.ae-sinf{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:max(3.25rem,44px);padding:.25rem var(--pad);border-top:1px solid var(--line)}
.ae-sin>:first-child{border-top:0}
.ae-sinf .btn{min-height:max(2.75rem,44px);flex:none}

/* ---------- detalle de un estudio ---------- */
.ae-barra{display:inline-flex;align-items:center;gap:.5rem 1rem;flex-wrap:wrap}
.ae-volver{min-height:max(2.75rem,44px)}
.ae-rec{padding:.75rem var(--pad) .25rem;gap:0}
.ae-rec h2{margin:0 0 .25rem;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-weight:600}
.ae-acc{display:flex;align-items:center;gap:.75rem;min-height:max(3.25rem,44px);padding:.25rem 0;border-top:1px solid var(--line)}
.ae-rec h2+.ae-acc{border-top:0}
.ae-frase{flex:1 1 0;min-width:0;overflow-wrap:anywhere}
.ae-acc .btn{flex:none;min-height:max(2.75rem,44px)}
.ae-acc .pill{flex:none;min-width:4.25rem;justify-content:center}
.ae-nada{margin:0;padding:.5rem 0 .75rem;color:var(--mute)}
.ae-aviso{margin:0;color:var(--mute)}
.ae-camp{grid-template-columns:minmax(0,1.7fr) 7rem repeat(4,minmax(5.5rem,1fr));column-gap:.75rem}
.ae-th5{grid-template-columns:minmax(0,1.7fr) 7rem repeat(4,minmax(5.5rem,1fr))}
.ae-camp .ae-est{align-items:flex-end}
.ae-ok{color:var(--ok)}.ae-mal{color:var(--bad)}.ae-avi{color:var(--warn)}

/* ---------- panel «Configuración»: objetivos ---------- */
.cp-obj{align-items:flex-end}
.cp-obj-c{display:flex;flex-direction:column;gap:.25rem;flex:1 1 11rem;min-width:0}
.cp-obj .inp,.cp-obj .btn{min-height:max(2.75rem,44px)}

/* ---------- celular: cada estudio y cada campaña es una tarjeta ---------- */
html[data-ancho=cel] .ae-kpis4{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
html[data-ancho=cel] .ae-kpis4 .kpi{padding:.625rem}
html[data-ancho=cel] .ae-kpis4 .kpi .v{font-size:1.25rem}
html[data-ancho=cel] .ae-kpis4 .kpi .pie-k{font-size:.75rem}
html[data-ancho=cel] .ae-th{display:none}
html[data-ancho=cel] .ae-fila{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:.375rem;padding:.625rem var(--pad)}
html[data-ancho=cel] .ae-fila .ae-nom{grid-column:1 / 3}
html[data-ancho=cel] .ae-fila .ae-nom b{white-space:normal}
html[data-ancho=cel] .ae-fila .ae-sem{grid-column:3;grid-row:1}
html[data-ancho=cel] .ae-fila .ae-tend{grid-column:2 / 4}
html[data-ancho=cel] .ae-cif{align-items:flex-start;text-align:left}
html[data-ancho=cel] .ae-cif small{display:block}
html[data-ancho=cel] .ae-camp{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:.375rem}
html[data-ancho=cel] .ae-camp .aa-dato{grid-column:1 / -1}
html[data-ancho=cel] .ae-camp .ae-est{grid-column:1 / -1;flex-direction:row;align-items:center;gap:.5rem}
html[data-ancho=cel] .ae-camp .ae-est::before{content:attr(data-et) ':';color:var(--mute);font-size:.75rem}
html[data-ancho=cel] .ae-acc{flex-wrap:wrap}
html[data-ancho=cel] .ae-acc .ae-frase{flex:1 1 100%;order:3}
html[data-ancho=cel] .ae-acc .btn{margin-left:auto}
html[data-ancho=cel] .ae-barra{width:100%}
html[data-ancho=cel] .ae-barra .sel-cl{flex:1 1 10rem}
html[data-ancho=cel] .ae-sinf{flex-wrap:wrap}
@media (max-width:360px){html[data-ancho=cel] .ae-kpis4 .kpi .v{font-size:1.125rem}}

/* pantallas bajas (notebook 1366×640): el detalle muestra tarjetas, recomendaciones y las primeras campañas sin deslizar */
@media (min-width:861px) and (max-height:720px){
  .ae-kpis4 .kpi{padding:.5rem var(--pad);gap:.125rem}
  .ae-kpis4 .kpi .v{font-size:1.25rem}
  .ae-rec{padding-top:.5rem}
  .ae-acc{min-height:2.75rem}
  .ae-fila{min-height:2.75rem}
  .ae-camp{min-height:2.75rem}
  .ae-th{min-height:1.875rem}
}