/* menu.css — estilos de la barra común (comun/inc/menu.php). Antes iban incrustados en cada página. */
:root{--mb-bg:#ffffff;--mb-line:#e2e8f0;--mb-txt:#1e293b;--mb-gray:#64748b;--mb-dim:#94a3b8;--mb-aqua:var(--bl-acc2,#0B75C4);--mb-drop:#ffffff;--mb-sel:color-mix(in srgb,var(--bl-acc2,#0B75C4) 8%,transparent);--mb-in-bg:#f0f4f8;--mb-in-txt:#0f172a;--mb-vela:#081426}
html.bl-oscuro{--mb-bg:#16202d;--mb-line:#2a3441;--mb-txt:#e1e1e1;--mb-gray:#d8dee4;--mb-dim:#a8b2bc;--mb-aqua:var(--bl-acc2,#42a5f5);--mb-drop:#16202d;--mb-sel:color-mix(in srgb,var(--bl-acc2,#42a5f5) 12%,transparent);--mb-in-bg:#0a101b;--mb-in-txt:#e1e1e1;--mb-vela:#e1e1e1}
.mb-hd{background:var(--mb-bg);border-bottom:1px solid var(--mb-line);position:sticky;top:0;z-index:500;font-family:'Segoe UI',Consolas,monospace}
/* ===== fila 1: logo + buscador + indices + usuario + tema ===== */
.mb-inner{height:42px;display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:0 10px;border-bottom:1px solid var(--mb-line)}
.mb-logo{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.mb-logo-box{border:2px solid var(--bl-acc,#FF6B00);border-radius:6px;padding:2px 8px;text-align:center;line-height:1.15;display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.mb-logo-box:hover{background:color-mix(in srgb,var(--bl-acc,#FF6B00) 8%,transparent)}
.mb-logo-box svg{width:17px;height:17px;flex:0 0 auto}
.mb-logo-box .l1{font-size:14.5px;font-weight:900;letter-spacing:-.5px;color:var(--mb-txt);white-space:nowrap}
.mb-logo-box .l1 b{color:var(--bl-acc,#FF6B00)}
.mb-busca{position:relative;flex:0 0 130px}
.mb-busca input{width:100%;box-sizing:border-box;background:var(--mb-in-bg);border:1px solid var(--mb-line);border-radius:6px;color:var(--mb-in-txt);font-size:12px;padding:2px 7px;outline:none;font-family:inherit;font-weight:600}
.mb-busca input::placeholder{color:var(--mb-gray);font-weight:400}
/* lupa: solo en estrecho, donde el buscador se esconde; al pulsarla, el buscador baja a todo el ancho bajo la cabecera */
.mb-lupa{display:none;flex:0 0 auto;align-items:center;justify-content:center;width:32px;height:30px;border:1px solid var(--mb-line);border-radius:7px;background:transparent;color:var(--mb-txt);cursor:pointer;padding:0}
.mb-lupa[aria-expanded="true"]{border-color:var(--bl-acc,#FF6B00);color:var(--bl-acc,#FF6B00)}
.mb-drop{display:none;position:absolute;top:105%;left:0;right:0;background:var(--mb-drop);border:1px solid var(--mb-line);border-radius:0 0 8px 8px;z-index:600;max-height:300px;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.mb-drop a{display:flex;align-items:center;gap:8px;padding:6px 10px;text-decoration:none;border-bottom:1px solid var(--mb-line);font-size:13.5px;color:var(--mb-txt)}
.mb-drop a:hover,.mb-drop a.primer{background:var(--mb-sel)}
.mb-drop .mb-n{font-weight:700}
.mb-drop .mb-d{color:var(--mb-dim);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* indices en la cabecera: refresco por API cada 30 s (sin WebSocket) */
#mbInds{flex:1 1 auto;min-width:0;overflow:hidden;font-size:11.5px;font-variant-numeric:tabular-nums;font-family:'Segoe UI',Consolas,monospace;white-space:nowrap}
.mb-cinta{display:inline-flex;align-items:center}   /* fija (sin desplazamiento): cada índice una vez */
.mb-ind{color:var(--mb-dim);cursor:default;flex:0 0 auto;margin-right:6px;padding:1px 4px;border-radius:4px}
/* engranaje para elegir los índices de la cabecera (como en la web original) */
 .mb-indcfg{color:var(--mb-gray);cursor:pointer;flex:0 0 auto;font-size:13px;line-height:1;padding:2px;margin-left:6px;user-select:none}
.mb-indcfg:hover{color:var(--bl-acc,#FF6B00)}
#mbIndsPop{display:none;position:fixed;background:var(--mb-drop);border:1px solid var(--mb-line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.3);z-index:900;padding:14px 16px;min-width:250px;font-size:12.5px;color:var(--mb-txt);font-family:'Segoe UI',sans-serif}
#mbIndsPop .titulo{font-weight:800;margin-bottom:8px}
#mbIndsPop label{display:flex;gap:8px;align-items:center;padding:3px 0;cursor:pointer}
#mbIndsPop label:hover{color:var(--bl-acc,#FF6B00)}
#mbIndsPop .nm{color:var(--mb-dim);font-size:11px}
#mbIndsPop .bts{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
#mbIndsPop button{border-radius:6px;padding:4px 12px;font:700 11.5px 'Segoe UI',sans-serif;cursor:pointer}
#mbIndNo{border:1px solid var(--mb-line);background:transparent;color:var(--mb-gray)}
#mbIndOk{border:none;background:var(--bl-acc,#FF6B00);color:#fff}
/* destello al cambiar el precio: el fondo se ilumina y se desvanece */
.mb-ind.mb-sube{animation:mbSube 1.6s ease-out}
.mb-ind.mb-baja{animation:mbBaja 1.6s ease-out}
@keyframes mbSube{from{background:color-mix(in srgb,var(--bl-sube,#16a34a) 35%,transparent)}to{background:transparent}}
@keyframes mbBaja{from{background:color-mix(in srgb,var(--bl-baja,#dc2626) 35%,transparent)}to{background:transparent}}
.mb-ind b{color:var(--mb-txt);font-weight:600;margin-left:3px}
.mb-ind .pos{color:var(--bl-sube,#16a34a);font-weight:700}
.mb-ind .neg{color:var(--bl-baja,#dc2626);font-weight:700}
html.bl-oscuro .mb-ind .pos, html.oscuro2 .mb-ind .pos, .tema-oscuro .mb-ind .pos{color:#3cc47a}
html.bl-oscuro .mb-ind .neg, html.oscuro2 .mb-ind .neg, .tema-oscuro .mb-ind .neg{color:#f26b6b}
.mb-cuenta{position:relative;flex:0 0 auto}
.mb-cuenta-btn{background:color-mix(in srgb,var(--bl-acc2,#0B75C4) 8%,transparent);border:1px solid color-mix(in srgb,var(--bl-acc2,#0B75C4) 25%,transparent);border-radius:7px;padding:3px 10px;font-weight:800;font-size:11.5px;font-family:inherit;color:var(--mb-txt);cursor:pointer;white-space:nowrap;font-family:inherit;letter-spacing:.3px}
.mb-cuenta-btn:hover{background:color-mix(in srgb,var(--bl-acc2,#0B75C4) 15%,transparent)}
.mb-cuenta-menu{display:none;position:absolute;top:100%;right:0;background:var(--mb-drop);border:1px solid var(--mb-line);border-radius:8px;min-width:180px;z-index:800;box-shadow:0 10px 30px rgba(0,0,0,.3);padding:5px;margin-top:2px}
.mb-cuenta-menu a{display:flex;align-items:center;gap:8px;padding:10px 14px;text-decoration:none;font-size:13.5px;color:var(--mb-txt);border-radius:5px;white-space:nowrap}
.mb-cuenta-menu a:hover{background:var(--mb-sel)}
.mb-cuenta-sep{height:1px;background:var(--mb-line);margin:4px 8px}
.mb-cuenta:hover .mb-cuenta-menu,.mb-cuenta.open .mb-cuenta-menu{display:block}
.mb-tamc{display:inline-flex;align-items:center;height:22px;flex:0 0 auto;border:1px solid var(--mb-line);border-radius:11px;overflow:hidden}
.mb-tam{background:none;border:0;cursor:pointer;color:var(--mb-txt);font:700 11px/1 'Segoe UI',system-ui;padding:0 3px;height:100%}
.mb-tam:hover{color:var(--mb-aqua)}
.mb-tam.gra{font-size:14px}
.mb-pct{font-size:10px;color:var(--mb-dim);padding:0 1px;text-align:center;white-space:nowrap;cursor:default;user-select:none}   /* junto: sin ancho mínimo ni relleno */
.mb-tema{border:1px solid var(--mb-line);border-radius:7px;padding:3px 8px;font-size:12px;font-weight:700;color:var(--mb-txt);text-decoration:none;white-space:nowrap;flex:0 0 auto;font-family:inherit;cursor:pointer;background:transparent}
/* ===== fila 2: navegación principal ===== */
.mb-nav{display:flex;gap:3px;align-items:center;padding:3px 10px 3px;border-bottom:1px solid var(--mb-line);overflow-x:auto;scrollbar-width:none}
.mb-nav::-webkit-scrollbar{display:none}
.mb-tab{background:transparent;border:1px solid transparent;border-radius:5px;padding:3px 10px;font-size:12px;font-weight:800;letter-spacing:.4px;color:var(--mb-gray);text-decoration:none;cursor:pointer;white-space:nowrap;font-family:inherit;flex:0 0 auto;display:inline-flex;align-items:center;gap:5px}
.mb-tab:hover{color:var(--mb-txt);border-color:var(--mb-line)}
.mb-tab.on{background:var(--bl-acc,#FF6B00);border-color:var(--bl-acc,#FF6B00);color:#fff}
@media(min-width:901px){.mb-tab:not(.mb-hoja) svg{display:none}}   /* escritorio: solo el texto; en estrecho, solo el icono */
/* tecla de función (F7, F8): pulsarla hace lo mismo que la tecla */
.mb-tecla{flex:0 0 auto;font:700 10px/1 Consolas,monospace;color:var(--mb-txt);background:var(--mb-in-bg);border:1px solid var(--mb-line);border-bottom-width:2px;border-radius:4px;padding:3px 5px;cursor:pointer}
button.mb-tecla:hover,.mb-hoja:hover .mb-tecla,.mb-espacio:hover .mb-tecla,.mb-chat:hover .mb-tecla{border-color:var(--mb-aqua);color:var(--mb-aqua)}
/* F7 dentro del botón naranja de Mi espacio: tecla blanca sobre el naranja */
.mb-hoja,.mb-espacio,.mb-chat{gap:4px;padding:2px 6px}   /* CHAT (F9): como LIBROS, sin el fondo de ESPACIOS */   /* ESPACIOS (F7) y LIBROS (F8): pestañas normales con su tecla */
/* ESPACIOS (arriba y en el lateral): el color principal del tema (naranja en el clásico) con transparencia: destaca sin tapar */
.mb-espacio,.mb-lado a.mb-esp{background:color-mix(in srgb,var(--bl-acc,#FF6B00) 22%,transparent);border-color:color-mix(in srgb,var(--bl-acc,#FF6B00) 50%,transparent);color:var(--mb-txt)}
.mb-espacio:hover,.mb-lado a.mb-esp:hover{background:color-mix(in srgb,var(--bl-acc,#FF6B00) 32%,transparent);border-color:color-mix(in srgb,var(--bl-acc,#FF6B00) 70%,transparent);color:var(--mb-txt)}
.mb-lado a.mb-esp{color:var(--bl-acc,#FF6B00)}
/* esfera de conexión + hora del servidor (fila 2, a la derecha): en todas las páginas con barra */
.mb-conex{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;padding:0 4px 0 10px;font:600 11.5px 'Segoe UI',Consolas,monospace;color:var(--mb-gray);font-variant-numeric:tabular-nums;white-space:nowrap;cursor:default}
.mb-conex i{width:8px;height:8px;border-radius:50%;background:var(--bl-baja,#dc2626);animation:mbParp .6s infinite}
.mb-conex.ok i{background:var(--bl-sube,#16a34a);box-shadow:0 0 6px var(--bl-sube,#16a34a);animation:mbLate 2s infinite}
.mb-conex b{font-weight:600}
@keyframes mbParp{50%{opacity:.25}}
/* rótulo «Conectando al flujo de datos» (al entrar) */
#blFlujo{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);z-index:950;min-width:290px;max-width:min(420px,92vw);padding:22px 28px 20px;text-align:center;
  background:var(--mb-drop);color:var(--mb-txt);border:1px solid var(--mb-line);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.28);font-family:'Segoe UI',system-ui,sans-serif;animation:bfEntra .3s ease-out;pointer-events:none}
#blFlujo b{display:block;font-size:15px;font-weight:700;letter-spacing:.2px}
#blFlujo b::after{content:'';display:inline-block;width:1.2em;text-align:left;animation:bfPuntos 1.2s steps(4) infinite}
#blFlujo.ok b::after,#blFlujo.ko b::after{display:none}
#blFlujo p{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--mb-gray)}
#blFlujo .bf-ani{display:flex;justify-content:center;align-items:flex-end;gap:5px;height:34px;margin-bottom:12px}
#blFlujo .bf-ani i{width:6px;border-radius:3px;background:var(--mb-aqua);animation:bfOnda 1s ease-in-out infinite}
#blFlujo .bf-ani i:nth-child(2){animation-delay:.12s}#blFlujo .bf-ani i:nth-child(3){animation-delay:.24s}
#blFlujo .bf-ani i:nth-child(4){animation-delay:.36s}#blFlujo .bf-ani i:nth-child(5){animation-delay:.48s}
#blFlujo .bf-ok{display:block;width:40px;height:40px;margin:0 auto 6px;fill:none;stroke:var(--bl-sube,#16a34a);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#blFlujo .bf-ok circle{stroke-dasharray:107;stroke-dashoffset:107;animation:bfTraza .45s ease-out forwards}
#blFlujo .bf-ok path{stroke-dasharray:26;stroke-dashoffset:26;animation:bfTraza .3s .4s ease-out forwards}
#blFlujo.ok{border-color:var(--bl-sube,#16a34a);animation:bfLatido .5s .7s}
#blFlujo.ko{pointer-events:auto;border-color:var(--bl-baja,#dc2626)}
#blFlujo.ko .bf-ani i{background:var(--bl-baja,#dc2626);animation:none;height:8px}
#blFlujo .bf-bt{display:flex;justify-content:center;gap:8px;margin-top:14px}
#blFlujo .bf-bt button{border:1px solid var(--mb-line);border-radius:7px;padding:6px 16px;font:600 13px 'Segoe UI',system-ui,sans-serif;cursor:pointer;background:transparent;color:var(--mb-txt)}
#blFlujo .bf-bt button:first-child{background:var(--mb-aqua);border-color:var(--mb-aqua);color:#fff}
#blFlujo.fuera{opacity:0;transform:translate(-50%,-50%) scale(.96);transition:opacity .35s,transform .35s;pointer-events:none}
@keyframes bfOnda{0%,100%{height:8px}50%{height:34px}}
@keyframes bfTraza{to{stroke-dashoffset:0}}
@keyframes bfLatido{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--bl-sube,#16a34a) 25%,transparent),0 18px 50px rgba(0,0,0,.28)}}
@keyframes bfPuntos{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
@keyframes bfEntra{from{opacity:0;transform:translate(-50%,-46%)}}
@media (prefers-reduced-motion:reduce){#blFlujo .bf-ani i{animation:none;height:20px}#blFlujo b::after{animation:none}#blFlujo .bf-ok *{animation:none;stroke-dashoffset:0}}
@keyframes mbLate{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.mb-conex i{animation:none}}
/* transición suave entre páginas (sin marco: móvil): al irse, el contenido (no la barra) se difumina; la página nueva
   aparece desde ese difuminado. En el marco de escritorio lo hace app.php */
html.bl-saliendo body > :not(.mb-hd){filter:blur(1.5px);opacity:.55;transition:filter .2s,opacity .2s}
html.bl-entra body > :not(.mb-hd){animation:blEntra .3s ease-out}
@keyframes blEntra{from{filter:blur(1.5px);opacity:.55}}
@media (prefers-reduced-motion:reduce){html.bl-saliendo body > :not(.mb-hd){transition:none}html.bl-entra body > :not(.mb-hd){animation:none}}
/* ===== barra lateral fija (solo iconos): el contenido se aparta 44px; la cabecera sigue a todo el ancho ===== */
.mb-lado{position:fixed;left:0;bottom:0;width:44px;z-index:450;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0;background:var(--mb-bg);border-right:1px solid var(--mb-line);overflow-y:auto;scrollbar-width:none}
.mb-lado a,.mb-lado button{width:34px;height:34px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--mb-gray);cursor:pointer;text-decoration:none}
.mb-lado svg{width:18px;height:18px}
.mb-lado a:hover,.mb-lado button:hover{color:var(--mb-txt);border-color:var(--mb-line)}
.mb-lado a.on{background:var(--bl-acc,#FF6B00);border-color:var(--bl-acc,#FF6B00);color:#fff}
body:has(> .mb-hd .mb-lado){padding-left:44px}
body:has(> .mb-hd .mb-lado) > .mb-hd{margin-left:-44px}
@media(max-width:900px){
    .mb-lado{display:none}
    body:has(> .mb-hd .mb-lado){padding-left:0}
    body:has(> .mb-hd .mb-lado) > .mb-hd{margin-left:0}
    .mb-inner{gap:5px;padding:0 4px}
    .mb-nav{gap:2px;padding:2px 4px}
    .mb-tab{padding:3px 6px;font-size:10px}
    /* estrecho: sin menú lateral y la barra solo con iconos (el nombre, en el tooltip) */
    .mb-tt{display:none}
    .mb-tab{padding:4px 7px}
    .mb-tab svg{width:17px;height:17px}
    /* Mi espacio y la hoja de cálculo no se ofrecen en estrecho / móvil */
    .mb-espacio,.mb-hoja,.mb-chat{display:none}
    .mb-logo-box{padding:2px 5px}
    .mb-logo-box .l1{font-size:13px}
    /* fila 1 en estrecho: logo, lupa, índices en cinta (el hueco que quede) y, a la derecha, letra, noche/día y el usuario */
    .mb-logo{order:1}
    .mb-lupa{order:2}
    #mbInds{order:3;display:block}
    .mb-tamc{order:4}
    .mb-tema{order:5}
    .mb-cuenta{order:6}
    .mb-cuenta-btn{max-width:96px;overflow:hidden;text-overflow:ellipsis}
    .mb-busca{display:none}
    .mb-lupa{display:inline-flex}
    .mb-hd.mb-buscando .mb-busca{display:block;position:absolute;left:6px;right:6px;top:44px;z-index:900;flex:none}
    .mb-hd.mb-buscando .mb-busca input{font-size:16px;padding:8px 10px;box-shadow:0 6px 20px rgba(0,0,0,.25)}   /* 16px: el móvil no hace zoom al escribir */
    .mb-tema{padding:3px 6px}
    .mb-conex{display:none}   /* móvil: sin hora ni esfera de conexión */
    /* los botones de letra y tema los mueve el JS a esta barra en móvil */
    .mb-nav .mb-tamc{margin-left:auto}
    .mb-nav .mb-tema{padding:3px 6px}
    /* móvil: un solo índice visible, rotando cada 5 segundos (JS en menu.js) */
    #mbInds{display:flex;align-items:center;gap:4px}
    .mb-cinta{display:block;position:relative;min-width:90px}
    .mb-ind{display:none !important}
    .mb-ind.mb-ind-on{display:inline-flex !important}
}