/* dmc-icons.css — librería de iconos animados de DMC (copia de panel.html ~399-575).
   SVG + CSS, sin loops en reposo. Estados por clase: is-syncing / is-success / is-error / is-sent / is-thinking,
   one-shots: ring (chat) / pop (badge). Hover selectors generalizados (único cambio vs producción). */
/* ── ICONOS ANIMADOS (estilo "animated state icons": SVG + CSS, sin loops en reposo) ── */
.ic {
  width: 18px; height: 18px; flex-shrink: 0; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ic * { transition: transform .28s cubic-bezier(.32,.72,0,1), opacity .2s cubic-bezier(.32,.72,0,1), stroke-dashoffset .35s cubic-bezier(.32,.72,0,1); }
.ic-spin, .ic-lid, .ic-m1, .ic-m3 { transform-box: fill-box; transform-origin: center; }
.ic-lid { transform-origin: 5px 6px; transform-box: view-box; }
/* Hover (desktop) y toque (movil/tablet): mismos micro-movimientos en menu lateral, barra movil y menu inferior */
/* Hover/toque/foco. Lista de contenedores que disparan los micro-movimientos (documentada en SKILL.md):
   .sn-item, .dh-item, .dh-btn, .dh-act, .mob-icon-btn, .mob-drawer-item, [data-ic-hover]
   Para un contenedor propio: añadir data-ic-hover al elemento. */
:is(.sn-item, .dh-item, .dh-btn, .dh-act, .mob-icon-btn, .mob-drawer-item, [data-ic-hover]):is(:hover, :active, :focus-visible) .ic-l2 { transform: translateX(1px); }
:is(.sn-item, .dh-item, .dh-btn, .dh-act, .mob-icon-btn, .mob-drawer-item, [data-ic-hover]):is(:hover, :active, :focus-visible) .ic-l3 { transform: translateX(2px); }
:is(.sn-item, .dh-item, .dh-btn, .dh-act, .mob-icon-btn, .mob-drawer-item, [data-ic-hover]):is(:hover, :active, :focus-visible) .ic-bub { transform: translateY(-1px); }
:is(.sn-item, .dh-item, .dh-btn, .dh-act, .mob-icon-btn, .mob-drawer-item, [data-ic-hover]):is(:hover, :active, :focus-visible) .ic-plus { transform: rotate(90deg); }
:is(.sn-item, .dh-item, .dh-btn, .dh-act, .mob-icon-btn, .mob-drawer-item, [data-ic-hover]):is(:hover, :active, :focus-visible) .ic-up-a { transform: translateY(-2px); }
:is(.sn-item, .dh-item, .dh-btn, .dh-act, .mob-icon-btn, .mob-drawer-item, [data-ic-hover]):is(:hover, :active, :focus-visible) .ic-t1 { transform: translateX(2px); }
:is(.sn-item, .dh-item, .dh-btn, .dh-act, .mob-icon-btn, .mob-drawer-item, [data-ic-hover]):is(:hover, :active, :focus-visible) .ic-t2 { transform: translateX(-2px); }
:is(.sn-item, .dh-item, .dh-btn, .dh-act, .mob-icon-btn, .mob-drawer-item, [data-ic-hover]):is(:hover, :active, :focus-visible) .ic-d1 { transform: translate(-1px,-1px); }
:is(.sn-item, .dh-item, .dh-btn, .dh-act, .mob-icon-btn, .mob-drawer-item, [data-ic-hover]):is(:hover, :active, :focus-visible) .ic-d2 { transform: translate(1px,-1px); }
:is(.sn-item, .dh-item, .dh-btn, .dh-act, .mob-icon-btn, .mob-drawer-item, [data-ic-hover]):is(:hover, :active, :focus-visible) .ic-d3 { transform: translate(-1px,1px); }
:is(.sn-item, .dh-item, .dh-btn, .dh-act, .mob-icon-btn, .mob-drawer-item, [data-ic-hover]):is(:hover, :active, :focus-visible) .ic-d4 { transform: translate(1px,1px); }
:is(.sn-item, .dh-item, .dh-btn, .dh-act, .mob-icon-btn, .mob-drawer-item, [data-ic-hover]):is(:hover, :active, :focus-visible) .ic-spin { transform: rotate(90deg); }
:is(.sn-item, .dh-item, .dh-btn, .dh-act, .mob-icon-btn, .mob-drawer-item, [data-ic-hover]):is(:hover, :active, :focus-visible) .ic-lid { transform: rotate(-14deg) translateY(-1px); }
:is(.sn-item, .dh-item, .dh-btn, .dh-act, .mob-icon-btn, .mob-drawer-item, [data-ic-hover]):is(:hover, :active, :focus-visible) .ic-out { transform: translateX(2px); }
.ic-plus { transition: transform .3s cubic-bezier(.32,.72,0,1); }
[data-ic-hover]:hover .ic-plane { transform: translate(1px,-1px); }
/* Sugerir respuesta (IA): la chispa gira al pasar el mouse y late mientras piensa */
.ic-spark-g { transform-box: fill-box; transform-origin: center; }
[data-ic-hover]:hover .ic-spark-g { transform: rotate(45deg) scale(1.08); }
.is-thinking .ic-spark-g { animation: ic-think 1s ease-in-out infinite; transition: none; }
.is-thinking .ic-spark-s { animation: ic-think 1s ease-in-out .25s infinite; transition: none; }
@keyframes ic-think { 0%,100% { transform: scale(.85); opacity: .6; } 50% { transform: scale(1.12); opacity: 1; } }
/* Sync: gira mientras corre -> check al terminar -> shake si falla */
.ic-check { stroke-dasharray: 20; stroke-dashoffset: 20; opacity: 0; }
.is-syncing .ic-spin { animation: ic-spin .9s linear infinite; transition: none; }
.is-success .ic-spin { opacity: 0; transform: scale(.6); }
.is-success .ic-check { stroke-dashoffset: 0; opacity: 1; }
.is-success .ic-sync { color: var(--color-success, #22C55E); }
.is-error .ic-sync { color: var(--color-danger, #EF4444); animation: ic-shake .4s cubic-bezier(.32,.72,0,1); }
@keyframes ic-spin { to { transform: rotate(360deg); } }
@keyframes ic-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
/* Enviar: el avion sale volando arriba-derecha y vuelve */
.is-sent .ic-plane { animation: ic-fly .9s cubic-bezier(.32,.72,0,1); }
@keyframes ic-fly {
  0% { transform: translate(0,0); opacity: 1; }
  40% { transform: translate(14px,-14px); opacity: 0; }
  41% { transform: translate(-12px,12px); opacity: 0; }
  100% { transform: translate(0,0); opacity: 1; }
}
/* Chat: campana suave cuando sube el no leido + badge que aparece con pop */
.ic-chat { transform-origin: 50% 15%; }
.ic-chat.ring { animation: ic-ring .8s cubic-bezier(.32,.72,0,1); }
@keyframes ic-ring { 0% { transform: rotate(0); } 15% { transform: rotate(-14deg); } 30% { transform: rotate(11deg); } 45% { transform: rotate(-7deg); } 60% { transform: rotate(4deg); } 100% { transform: rotate(0); } }
.nav-badge.pop { animation: ic-pop .4s cubic-bezier(.32,.72,0,1); }
@keyframes ic-pop { 0% { transform: scale(0); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
/* Menu movil: hamburguesa -> X */
.is-open .ic-m1 { transform: translateY(6px) rotate(45deg); }
.is-open .ic-m2 { opacity: 0; }
.is-open .ic-m3 { transform: translateY(-6px) rotate(-45deg); }
/* .nav-badge y .pop/.ring: badge verde (ver sidebar.md) */
@media (prefers-reduced-motion: reduce) {
  .ic, .ic *, .nav-badge, .sn-toggle svg { animation: none !important; transition: none !important; }
  .is-syncing .ic-spin { opacity: .5; }
}
/* Badge verde de contador (copia de panel.html). Mostrar con .on; JS: iconOnce(el,'pop',500). */
.nav-badge {
  display: none; align-items: center; justify-content: center;
  background: var(--color-success, #22C55E); color: #fff; font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.nav-badge.on { display: inline-flex; }
.mob-icon-btn { position: relative; }
.mob-icon-btn .nav-badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; font-size: 9px; padding: 0 4px; }
.mob-drawer-item .nav-badge { margin-left: auto; }