/* Buscador e idioma, arriba a la derecha. Va despues de cabecera.css porque
   reusa el negro de la barra y del menu del socio, y porque le saca a esos
   tres controles el recuadro que ese archivo les pone.

   Los tres van sin borde: son iconos sobre una barra negra, y tres cuadritos
   alineados competian con el menu. Al pasar el mouse no se dibuja ningun
   marco: el icono se enciende y aparece lo que hace, sea el globito de la lupa
   o el desplegable del idioma y de la cuenta. */

.lupa,
.lang .ltrig,
.acct .ic{border:0 !important;background:transparent !important;
color:#B4B4BA;border-radius:6px;transition:color .15s}
.lupa:hover,
.lang:hover .ltrig,.lang.open .ltrig,
.acct:hover .ic,.acct.open .ic{color:#fff}

/* Juntos, pero sin tocarse: el area clickeable sigue siendo comoda. */
.lupa{position:relative;width:36px;height:36px;flex:none;display:flex;
align-items:center;justify-content:center;cursor:pointer;margin-right:2px}
.acct .ic{width:36px;height:36px}

/* La lupa es la unica que no despliega nada, asi que dice que es en un globito.
   El idioma y la cuenta ya se explican solos al abrirse. */
.lupa:after{content:"Buscar";position:absolute;top:calc(100% + 8px);left:50%;
transform:translateX(-50%) translateY(-4px);
background:#26262B;border:1px solid #35353C;border-radius:7px;
color:#E6E6EA;font-size:11.5px;line-height:1;padding:6px 10px;white-space:nowrap;
box-shadow:0 10px 24px rgba(0,0,0,.4);pointer-events:none;
opacity:0;visibility:hidden;transition:opacity .15s,transform .15s,visibility .15s}
.lupa:hover:after,.lupa:focus:after{opacity:1;visibility:visible;transform:translateX(-50%)}

/* ---- idioma ---- */
.lang{position:relative;margin-right:2px}
.ltrig{display:flex;align-items:center;gap:7px;padding:8px 8px;cursor:pointer;
font-size:13px;line-height:1}
.ltrig .ch{font-size:9px;color:#8A8A92;transition:transform .18s}
.lang:hover .ch,.lang.open .ch{transform:rotate(180deg);color:#fff}
.bnd{width:18px;height:12px;display:block;flex:none;border-radius:2px}

.lpan{position:absolute;right:0;top:calc(100% + 10px);min-width:186px;
background:#26262B;border:1px solid #35353C;border-radius:12px;padding:6px;
box-shadow:0 18px 44px rgba(0,0,0,.45);z-index:75;
opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .16s,transform .16s,visibility .16s}
/* Puente invisible: sin esto el hueco corta el hover al bajar hacia el panel. */
.lpan:before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.lang:hover .lpan,.lang.open .lpan,.lang:focus-within .lpan{opacity:1;visibility:visible;transform:none}
.lpan a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:7px;
font-size:13.5px;color:#E6E6EA}
.lpan a span{flex:1}
.lpan a em{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:9.5px;
letter-spacing:.1em;text-transform:uppercase;color:#8A8A94}
.lpan a.on{background:#33333A;color:#fff}
.lpan a.on em{color:var(--red)}
/* Ingles todavia no traduce: se ve, se lee y no invita a tocarlo. */
.lpan a.no{cursor:default;opacity:.55}

/* ---- ventana de busqueda ---- */
.buswrap{position:fixed;inset:0;z-index:150;background:rgba(17,17,19,.55);
backdrop-filter:blur(2px);display:flex;align-items:flex-start;justify-content:center;
padding:90px 24px 24px}
.busbox{width:100%;max-width:600px;max-height:74vh;display:flex;flex-direction:column;
background:var(--paper);border-radius:14px;overflow:hidden;
box-shadow:0 30px 70px rgba(17,17,19,.34)}

.bushd{display:flex;align-items:center;gap:12px;padding:14px 18px;
border-bottom:1px solid var(--line);color:var(--mut2)}
.bushd input{flex:1;min-width:0;border:0;outline:none;background:transparent;
font-family:inherit;font-size:16px;color:var(--ink)}
.bushd input::placeholder{color:var(--mut2)}
.busx{background:none;border:0;font-family:inherit;font-size:23px;line-height:1;
color:var(--mut2);cursor:pointer;padding:0 2px}
.busx:hover{color:var(--ink)}

.buslista{flex:1;overflow-y:auto;padding:6px 8px 10px}
.busgrp{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.16em;
text-transform:uppercase;color:var(--mut2);padding:12px 11px 5px}
.busit{display:block;padding:9px 11px;border-radius:7px;cursor:pointer}
.busit:hover{background:var(--surf2)}
.busit .t{display:block;font-size:14.5px;font-weight:600;line-height:1.3}
.busit .d{display:block;font-size:12.5px;color:var(--mut);line-height:1.45;margin-top:2px}
.busayuda{padding:26px 20px;text-align:center;font-size:13.5px;color:var(--mut);line-height:1.6}
.busayuda b{color:var(--ink);font-weight:600}

@media(max-width:1000px){
.ltrig span:not(.ch){display:none}
.ltrig{padding:8px 5px}
.buswrap{padding:70px 16px 16px}
/* Sin mouse el globito no aparece nunca: no tiene sentido reservarle lugar. */
.lupa:after{display:none}
}