/* ════════════════════════════════════════════════════════════
   CONTENIDO — selector rápido de cuenta de Instagram en cabecera.
   Lo pinta `js/conectores/instagram.js` (`pintarSelector`); lo usan
   la tarjeta de Contenido (junto a las pestañas IG/TikTok) y
   `/analizar` (junto al periodo). Ver docs/decisiones.md, entrada
   2026-09-07. Sin backdrop-filter nuevo, motion con los tokens de
   css/motion.css.
   ════════════════════════════════════════════════════════════ */

.ig-sel-cab{display:flex;align-items:center}
.ig-sel{position:relative;display:inline-flex}

.ig-sel-solo{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 6px;border-radius:9px;
  font-family:var(--f-ui);font-size:11.5px;font-weight:500;color:var(--tx-2);
  background:color-mix(in srgb, var(--a) 12%, rgba(255,255,255,.03));
  border:1px solid color-mix(in srgb, var(--a) 20%, transparent);
}

.ig-sel-btn{
  display:inline-flex;align-items:center;gap:6px;padding:5px 8px 5px 6px;border-radius:9px;
  font-family:var(--f-ui);font-size:11.5px;font-weight:500;color:var(--tx-2);
  background:color-mix(in srgb, var(--a) 12%, rgba(255,255,255,.03));
  border:1px solid color-mix(in srgb, var(--a) 20%, transparent);
  transition:background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.ig-sel-btn:hover{color:var(--tx);background:color-mix(in srgb, var(--a) 20%, rgba(255,255,255,.05))}
.ig-sel-btn:focus-visible{outline:none;border-color:color-mix(in srgb, var(--a) 55%, var(--line-2))}
.ig-sel-btn[aria-expanded="true"]{color:var(--tx);background:color-mix(in srgb, var(--a) 26%, rgba(255,255,255,.06))}
.ig-sel-btn span{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-sel-btn svg{width:12px;height:12px;flex:0 0 auto;color:var(--tx-3);transition:transform var(--dur-1) var(--ease-out)}
.ig-sel-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.ig-sel-btn:active{transform:scale(.97)}

.ig-sel-av{
  width:18px;height:18px;border-radius:50%;flex:0 0 auto;position:relative;overflow:hidden;
  display:grid;place-items:center;background:color-mix(in srgb, var(--a) 55%, #000);
  font-family:var(--f-mo);font-size:8.5px;color:#fff;
}
.ig-sel-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.ig-sel-lista{
  position:absolute;z-index:40;top:calc(100% + 6px);left:0;min-width:196px;max-width:260px;padding:5px;border-radius:11px;
  background:var(--card-hi);border:1px solid color-mix(in srgb, var(--a) 40%, var(--line-2));
  box-shadow:0 18px 50px -18px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.05) inset;
  list-style:none;margin:0;
  transform-origin:top left;transform:scale(.97);opacity:0;
  transition:transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.ig-sel-lista[hidden]{display:none}
.ig-sel-lista.is-open{transform:scale(1);opacity:1}
.ig-sel-lista li{
  display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:7px;cursor:pointer;
  font-size:12px;color:var(--tx-2);
  transition:background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.ig-sel-lista li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-sel-lista li:hover,.ig-sel-lista li:focus-visible{color:var(--tx);background:color-mix(in srgb, var(--a) 22%, rgba(255,255,255,.05));outline:none}
.ig-sel-lista li.on{color:var(--tx);background:color-mix(in srgb, var(--a) 14%, transparent)}

@media(max-width:420px){.ig-sel-btn span{max-width:64px}}

/* La cabecera de esta tarjeta lleva más cosas que ninguna otra: logo, título, pestañas
   IG/TikTok, el selector de cuenta y la rueda. En la rejilla de tres columnas no caben en
   una fila, y el título acababa partido en tres líneas con el logo aplastado. La fila
   ahora envuelve: si no cabe, el bloque de controles baja entero a una segunda línea. */
.card:has(#c-contenido) > header{ flex-wrap: wrap; row-gap: 10px; }
.card:has(#c-contenido) > header > .tile{ flex: 0 0 56px; }
.card:has(#c-contenido) > header > h2{ flex: 1 1 150px; min-width: 0; text-wrap: balance; }
.card:has(#c-contenido) > header > .r{ flex: 1 1 auto; justify-content: flex-end; }
.ig-sel-cab{ flex: 0 1 auto; min-width: 0; }