/* Dock inferior: barra flotante compacta, solo íconos de línea, tooltips y estados claros. Va después de soft.css. */
#bar { display:flex; flex-wrap:nowrap; white-space:nowrap; align-items:center; gap:2px; width:max-content; height:62px; padding:8px 12px; border-radius:999px; max-width:calc(100% - 16px); background:rgba(32,35,32,.84); border:1px solid var(--s-dark-line); box-shadow:0 14px 40px rgba(10,16,10,.3), 0 2px 8px rgba(10,16,10,.18); bottom:calc(14px + env(safe-area-inset-bottom)); }
#bar .bg { display:flex; gap:4px; align-items:center; padding:0 8px; position:relative; flex:none; }
#bar .bg:first-child { padding-left:0; } #bar .bg:last-child { padding-right:0; }
#bar .bg + .bg::before { content:""; position:absolute; left:-1px; top:20%; bottom:20%; width:1px; background:rgba(255,255,255,.16); }
#bar button { position:relative; flex:none; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:0; width:46px; height:46px; min-width:0; padding:0; border-radius:16px; color:var(--s-on-dark); background:transparent; font-size:12px; line-height:1; transition:background .12s, transform .12s, box-shadow .12s, color .12s; }
#bar button:hover { background:rgba(255,255,255,.14); transform:translateY(-2px); }
#bar button:active { background:rgba(255,255,255,.22); transform:translateY(0) scale(.95); }
#bar button:focus-visible { outline:3px solid rgba(255,255,255,.7); outline-offset:2px; }
#bar button.has-ni i[data-ic] { display:none; }
#bar button .ni { display:block; pointer-events:none; }
#bar button .lb { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#bar .pri { background:rgba(255,255,255,.14); color:#fff; }

/* micrófono y cámara: redondos; apagados = neutro con raya, encendidos = verde de acento */
#bar .tg { border-radius:50%; }
#bar .tg:not(.live) { background:rgba(255,255,255,.1); color:var(--s-on-dark); }
#bar .tg:not(.live):hover { background:rgba(255,255,255,.2); }
#bar .tg .sl { display:none; } #bar .tg:not(.live) .sl { display:block; stroke:#ff7c85; }
#bar .tg:not(.live)::after { display:block; top:7px; right:7px; left:auto; margin:0; width:8px; height:8px; border:2px solid rgba(36,39,36,.95); background:#ff5c6c; box-shadow:none; }
#bar .tg.live, #bar button.live.tg { background:#2fbf71; color:#fff; box-shadow:0 4px 14px rgba(47,191,113,.45); }
#bar .tg.live:hover { background:#38cc7b; }
#bar .tg.live::after { display:none; }
#bar #scrbtn.live { background:#3b82f6; box-shadow:0 4px 14px rgba(59,130,246,.45); } #bar #scrbtn.live:hover { background:#5594f8; }
#bar .tg.speak { animation:dockring 1.1s ease-out infinite; }
@keyframes dockring { 0% { box-shadow:0 0 0 0 rgba(47,191,113,.65); } 100% { box-shadow:0 0 0 10px rgba(47,191,113,0); } }
/* grabar: punto rojo que pulsa mientras graba */
#bar .tg2::after { display:none; }
#bar #recbtn.live { background:rgba(255,84,104,.3); color:#ff8a98; } #bar #recbtn.live .rd { animation:dockpulse 1.1s ease-in-out infinite; transform-origin:center; }
@keyframes dockpulse { 50% { opacity:.35; } }
/* colgar: solo cuando hay llamada; rojo sólido */
#bar #hangbtn, #bar .hang { width:54px; border-radius:999px; background:#e5484d; color:#fff; box-shadow:0 4px 14px rgba(229,72,77,.45); }
#bar #hangbtn:hover, #bar .hang:hover { background:#f0555a; }
/* insignias numéricas (no leídos, eventos) */
#bar .nb { position:absolute; top:3px; right:3px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:#e5484d; color:#fff; font:700 10px/16px var(--font); text-align:center; border:2px solid rgba(36,39,36,.95); box-sizing:content-box; pointer-events:none; }

/* tooltips: arriba, oscuros, con atajo */
#bar button[data-tip]::before { bottom:calc(100% + 14px); background:rgba(26,28,26,.95); color:#fff; font:600 12px/1.35 var(--font); padding:7px 11px; border-radius:12px; white-space:pre-line; text-align:left; max-width:240px; box-shadow:0 8px 24px rgba(0,0,0,.35); }
#bar button[data-tip]::before { left:50%; right:auto; transform:translate(-50%,4px); }
#bar .bg:first-child button:first-child::before { left:0; transform:translate(0,4px); }
@media (hover:hover) { #bar button[data-tip]:hover::before { opacity:1; transition-delay:.35s; transform:translate(-50%,0); } #bar .bg:first-child button:first-child:hover::before { transform:translate(0,0); } }
#bar button[data-tip].has-ni:focus-visible::before { opacity:1; }

/* menú "…" cuando falta espacio */
#bar #bmore { display:none; }
#bar.compact #bmore { display:flex; }
#bar.compact .g3 { display:none; }
#bar.compact.more-open .g3 { display:flex; position:absolute; right:8px; bottom:calc(100% + 12px); padding:8px; gap:4px; background:var(--s-dark); backdrop-filter:var(--s-blur); -webkit-backdrop-filter:var(--s-blur); border:1px solid var(--s-dark-line); border-radius:26px; box-shadow:0 14px 40px rgba(10,16,10,.35); z-index:5; }
#bar.compact .g3::before { display:none; }
#bar.compact.more-open #bmore { background:rgba(255,255,255,.2); }

/* celular y modo táctil: respeta la zona segura y los tamaños mínimos de toque */
@media (max-width:640px) {
  #bar { padding:7px 8px; width:max-content; max-width:calc(100% - 16px); }
  #bar .bg { padding:0 4px; gap:2px; }
  #bar button { width:44px; height:44px; flex:0 1 44px; }
  #bar button[data-tip]::before { display:none; }
}
@media (max-width:400px) { #bar button { flex-basis:40px; width:40px; } html.touch #bar button { min-width:40px; min-height:40px; } }
html.touch #bar { max-width:calc(100% - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)); }
html.touch #bar button { min-width:40px; min-height:40px; }
html.ahorro #bar { background:rgba(36,39,36,.94); }
#bar.more-open { z-index:8; }   /* el menú "…" queda sobre el joystick y los botones de acción */