/* ===========================================================================
   ÍCONOS CON VOLUMEN — Central Ensigna                            (13/11/2026)
   ===========================================================================
   Se carga última. Cuatro partes:
     1. el relleno de dos tonos de cada ícono (.ico-f: lo dibuja js/iconos.js)
     2. el menú: cada sección con su color y su ficha (.lateral-item > i, .tab > i)
     3. las fichas de adentro de las pantallas (avisos, pasos, menús, subidas)
     4. los distintivos de las redes (ui.red): ficha redonda con brillo
   Los degradés de las redes están una sola vez en index.html (svg.defs-svg).
   =========================================================================== */
.defs-svg { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* color de cada sección (se usa en el menú del costado, la barra de abajo y el título) */
/* --ic-sobre: el color del dibujo cuando la ficha está llena (blanco sobre los tonos del claro, tinta sobre los del oscuro) */
:root {
  --ic-inicio: #E0187E; --ic-estadisticas: #6A45E0; --ic-publico: #0E86BD; --ic-cuentas: #D9620F;
  --ic-contenido: #D92B62; --ic-ingresos: #B87A00; --ic-mas: #6B6390; --ic-azul: #3D57E0; --ic-sobre: #FFFFFF;
}
:root[data-theme="dark"] {
  --ic-inicio: #FF4FA8; --ic-estadisticas: #A47BFF; --ic-publico: #5FD4FF; --ic-cuentas: #FF9A52;
  --ic-contenido: #FF6B8E; --ic-ingresos: #FFC83D; --ic-mas: #B8B0DC; --ic-azul: #8FA2FF; --ic-sobre: #160A2E;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ic-inicio: #FF4FA8; --ic-estadisticas: #A47BFF; --ic-publico: #5FD4FF; --ic-cuentas: #FF9A52;
    --ic-contenido: #FF6B8E; --ic-ingresos: #FFC83D; --ic-mas: #B8B0DC; --ic-azul: #8FA2FF; --ic-sobre: #160A2E;
  }
}
[data-ir="inicio"] { --ic: var(--ic-inicio); }
[data-ir="estadisticas"] { --ic: var(--ic-estadisticas); }
[data-ir="publico"] { --ic: var(--ic-publico); }
[data-ir="cuentas"] { --ic: var(--ic-cuentas); }
[data-ir="contenido"] { --ic: var(--ic-contenido); }
[data-ir="ingresos"] { --ic: var(--ic-ingresos); }
[data-ir="mas"] { --ic: var(--ic-mas); }
[data-ir="guia"] { --ic: var(--g3-verde); }
[data-p="seccion=marcas"] { --ic: var(--ic-estadisticas); }
[data-p="seccion=conexiones"] { --ic: var(--ic-cuentas); }
[data-p="seccion=agentes"] { --ic: var(--ic-azul); }
[data-p="seccion=socios"] { --ic: var(--ic-publico); }
[data-p="seccion=monedas"] { --ic: var(--ic-ingresos); }
[data-p="seccion=apariencia"] { --ic: var(--ic-mas); }

/* ═══ 1 · el relleno de dos tonos ═══════════════════════════════════════════ */
.ico-f { opacity: .2; transition: opacity .2s ease; }
:root[data-theme="dark"] .ico-f { opacity: .28; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ico-f { opacity: .28; } }
.btn-primario .ico-f, .tab-publicar .ico-f { opacity: .34; }

/* ═══ 2 · el menú ═══════════════════════════════════════════════════════════ */
/* costado (compu): una ficha por sección. Apagada: tinte del color. Prendida: el color lleno, con relieve. */
.lateral-item { flex: 0 0 auto; min-height: 38px; gap: 11px; padding: 0 12px 0 5px; font-size: 14.5px; }
.lateral-item > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral-item > i {
  flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: var(--ic, var(--lila));
  background: linear-gradient(150deg, color-mix(in srgb, var(--ic, var(--lila)) 24%, transparent), color-mix(in srgb, var(--ic, var(--lila)) 7%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px color-mix(in srgb, var(--ic, var(--lila)) 30%, transparent);
  transition: transform .28s var(--curva), box-shadow .25s ease, background .25s ease, color .2s ease;
}
.lateral-item > i .ico { color: inherit; filter: none; transform: none; }
.lateral-item.activo > i {
  color: var(--ic-sobre);
  background: linear-gradient(155deg, color-mix(in srgb, var(--ic, var(--lila)) 62%, #FFFFFF), var(--ic, var(--lila)) 58%, color-mix(in srgb, var(--ic, var(--lila)) 76%, #000000));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -3px 5px rgba(0, 0, 0, .26), 0 10px 20px -8px var(--ic, var(--lila)),
              0 0 0 1px color-mix(in srgb, var(--ic, var(--lila)) 55%, transparent);
  transform: scale(1.04);
}
.lateral-item.activo > i .ico { color: inherit; filter: none; transform: none; }
.lateral-item.activo > i .ico-f { opacity: .3; }
.lateral-item.activo { background: linear-gradient(90deg, color-mix(in srgb, var(--ic, var(--lila)) 20%, transparent), color-mix(in srgb, var(--ic, var(--lila)) 4%, transparent)); }
.lateral-item.activo::before { background: var(--ic, var(--lila)); box-shadow: 0 0 12px var(--ic, var(--lila)); }
@media (hover: hover) {
  .lateral-item:hover > i { transform: translateY(-1px) rotate(-5deg) scale(1.08); }
  .lateral-item.activo:hover > i { transform: rotate(-5deg) scale(1.1); }
}

/* ── el panel del costado (compu): TODOS los módulos, en grupos, y se puede ocultar ──────────────
   Entero mide --lateral (256px). Oculto (html[data-lateral="chico"]) queda una tira de 76px con los
   íconos solos; el nombre de cada uno sale al dejar el mouse encima (title). El botón es [data-plegar]
   (lo maneja nucleo.js y lo recuerda en 'ce_lateral'). Si la pantalla es baja, la lista se desliza. */
@media (min-width: 960px) {
  /* overflow: mientras el panel se abre o se cierra, lo de adentro se recorta en vez de pisar la pantalla */
  .lateral { gap: 0; padding: 18px 12px 12px; overflow: hidden; transition: width .28s var(--curva), padding .28s var(--curva); }
  .lateral .marca-nombre, .lateral-grupo > span, .lateral-publicar > span { white-space: nowrap; }
  .principal { transition: margin-left .28s var(--curva); }
  .lateral .marca { flex: 0 0 auto; padding: 2px 4px 14px 6px; }
  .lateral-plegar { flex: 0 0 auto; margin-left: auto; width: 34px; height: 34px; border-radius: 11px; color: var(--texto-3); }
  .lateral-plegar .ico { transition: transform .28s var(--curva); }
  .lateral-nav {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; margin: 0 -4px; padding: 2px 4px 8px;
    overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--linea-fuerte) transparent;
  }
  .lateral-item.activo::before { left: -4px; top: 9px; bottom: 9px; width: 3px; }
  .lateral-grupo {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; padding: 0 8px;
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; color: var(--texto-3);
  }
  .lateral-grupo::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--linea); }
  .lateral-publicar { flex: 0 0 auto; margin: 10px 0 0; }
  .lateral-yo { flex: 0 0 auto; margin-top: 10px; gap: 4px; padding: 8px 0 0; }
  .yo-perfil {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 5px 6px; border: 0; border-radius: 13px;
    background: none; color: inherit; text-align: left; cursor: pointer; transition: background-color .16s ease;
  }
  .yo-perfil:hover, .yo-perfil.activo { background: var(--campo-2); }
  html[data-rol="socio"] [data-solo-principal] { display: none; }

  /* oculto: la tira de íconos */
  html[data-lateral="chico"] { --lateral: 76px; }
  html[data-lateral="chico"] .lateral { padding-left: 10px; padding-right: 10px; }
  html[data-lateral="chico"] .lateral .marca { flex-direction: column; gap: 8px; padding: 2px 0 10px; }
  html[data-lateral="chico"] .marca-nombre { display: none; }
  html[data-lateral="chico"] .lateral-plegar { margin: 0; }
  html[data-lateral="chico"] .lateral-plegar .ico { transform: scaleX(-1); }
  html[data-lateral="chico"] .lateral-nav { align-items: center; scrollbar-width: none; }
  html[data-lateral="chico"] .lateral-nav::-webkit-scrollbar { display: none; }
  html[data-lateral="chico"] .lateral-item { justify-content: center; width: 48px; min-height: 34px; padding: 0; gap: 0; }
  html[data-lateral="chico"] .lateral-item > span { display: none; }
  html[data-lateral="chico"] .lateral-item > i { width: 30px; height: 30px; border-radius: 10px; }
  html[data-lateral="chico"] .lateral-grupo { align-self: stretch; margin: 5px 8px 4px; padding: 0; }
  html[data-lateral="chico"] .lateral-grupo > span { display: none; }
  html[data-lateral="chico"] .lateral-publicar { align-self: center; width: 48px; min-width: 48px; height: 48px; min-height: 48px; padding: 0; border-radius: 50%; }
  html[data-lateral="chico"] .lateral-publicar > span { display: none; }
  html[data-lateral="chico"] .lateral-yo { flex-direction: column; align-items: center; }
  html[data-lateral="chico"] .yo-perfil { flex: 0 0 auto; padding: 4px; }
  html[data-lateral="chico"] .yo-textos { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lateral, .principal, .lateral-plegar .ico { transition: none; } }

/* barra de abajo (teléfono): la sección prendida lleva una pastilla con su color */
.tab > i { display: grid; place-items: center; width: 50px; height: 30px; border-radius: 12px; transition: background .25s ease, box-shadow .25s ease, color .2s ease; }
.tab.activo > i {
  color: var(--ic, var(--lila));
  background: linear-gradient(150deg, color-mix(in srgb, var(--ic, var(--lila)) 30%, transparent), color-mix(in srgb, var(--ic, var(--lila)) 9%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px color-mix(in srgb, var(--ic, var(--lila)) 40%, transparent), 0 8px 18px -10px var(--ic, var(--lila));
}
.tab.activo > i .ico { color: inherit; transform: none; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ic, var(--lila)) 65%, transparent)); }
.tab.activo > i .ico-f { opacity: .36; }

/* ═══ 3 · fichas de adentro: cuadradas de esquinas redondas, con el tinte de su color y filo de luz ═══ */
.pi-aviso-ico, .co-banda-ico, .confirmar-ico, .pi-paso-ico, .cu-camino-ico, .f2-menu-ico, .f2-subida-ico,
.co-panel-vacio-ico, .cu-marca-vacia-ico, .gu-quien-ico {
  border-radius: 34%;
  background: linear-gradient(150deg, color-mix(in srgb, currentColor 26%, transparent), color-mix(in srgb, currentColor 8%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent), 0 8px 14px -11px currentColor;
}
.f2-menu-ico { color: var(--lila); }
/* las fichas de «Más»: mismo relieve, y cada color de serie pasa a su tono vivo (los de serie son para gráficas) */
.mas-tile {
  background: linear-gradient(150deg, color-mix(in srgb, var(--c, var(--acento)) 26%, transparent), color-mix(in srgb, var(--c, var(--acento)) 8%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px color-mix(in srgb, var(--c, var(--acento)) 32%, transparent), 0 8px 14px -11px var(--c, var(--acento));
}
.mas-tile.f2-c1 { --c: var(--ic-publico); } .mas-tile.f2-c2 { --c: var(--ic-inicio); } .mas-tile.f2-c3 { --c: var(--ic-azul); }
.mas-tile.f2-c4 { --c: var(--ic-cuentas); } .mas-tile.f2-c5 { --c: var(--g3-verde); } .mas-tile.f2-c6 { --c: var(--ic-estadisticas); }
.mas-tile.f2-c7 { --c: var(--ic-publico); } .mas-tile.f2-c8 { --c: var(--ic-ingresos); }
.co-soltar-ico, .pb-subir-ico { border-radius: 34%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -3px 5px rgba(96, 18, 120, .3), 0 12px 22px -12px rgba(var(--neon), .9); }
.vacio-ico { border-radius: 32%; }
.vacio-ico::after { border-radius: inherit; }
/* los de las píldoras de estado y los botones chicos: un poco más de trazo para que no se pierdan */
.pill .ico { stroke-width: 2.4; }

/* ═══ 4 · distintivos de las redes ══════════════════════════════════════════ */
.red { color: #FFFFFF; box-shadow: 0 2px 5px -1px rgba(0, 0, 0, .45); }
.cuenta-red .red, .f2-poster-red .red { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .lateral-item > i, .tab > i, .ico-f { transition: none; }
}