/* One menu for catalog, profile, player and host. Loaded last on every page. */
.menu-juego{position:relative;pointer-events:auto;z-index:60}
.menu-juego .menu-juego-trigger{display:flex;align-items:center;justify-content:center;gap:8px;min-width:44px;height:46px;padding:0 14px;border:2px solid #adc0c9;border-radius:11px 7px 12px 8px;background:#fffefb;color:#233e50;font:800 15px/1 var(--f);cursor:pointer;box-shadow:1px 3px 0 #e1e8e9}
.menu-juego-trigger svg{width:19px;height:19px;flex:none}
.menu-juego .menu-juego-trigger:hover,.menu-juego .menu-juego-trigger[aria-expanded=true]{background:#edf7fb;border-color:#729eaf}
.menu-juego .menu-juego-panel{position:absolute;right:0;top:calc(100% + 10px);width:min(264px,calc(100vw - 32px));max-height:calc(100dvh - 90px);overflow-y:auto;padding:8px;background:#fffefb;border:2px solid #adc0c9;border-radius:12px 8px 15px 8px;box-shadow:3px 5px 0 #d9e7ec}
.menu-juego .menu-juego-panel[hidden]{display:none}
.menu-juego .menu-juego-panel .icono,.barra .menu-juego-panel .icono{display:flex;position:relative;align-items:center;gap:12px;width:100%;height:auto;min-height:46px;padding:11px;border:0;border-radius:8px;background:transparent;color:#233e50!important;font:800 15px/1.4 var(--f);box-shadow:none;text-align:left;text-decoration:none!important;opacity:1!important;aspect-ratio:auto;cursor:pointer}
.menu-juego .menu-juego-panel .icono[hidden]{display:none}
.menu-juego .menu-juego-panel .icono:hover{background:#eaf4f9}
.menu-juego .menu-juego-panel .icono svg{width:20px;height:20px;flex:none}
.menu-juego .menu-juego-panel .icono .sr{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;white-space:normal;margin:0;padding:0}
.menu-juego .menu-juego-panel .icono[aria-pressed=true]::after{display:none}
.menu-juego :focus-visible{outline:3px solid #146ead;outline-offset:2px}
.fq-marca.finquiz-logo img{display:block;width:32px;height:32px;flex:none}
.fq-marca.finquiz-logo::after{left:38px}
@media(max-width:767px){.menu-juego .menu-juego-trigger{width:44px;padding:0}.menu-juego-trigger span{display:none}.menu-juego-panel #b-pantalla{display:none}.fq-top{padding-left:14px;padding-right:14px}.fq-marca.finquiz-logo{font-size:34px;gap:5px}.fq-marca.finquiz-logo img{width:26px;height:26px}.fq-marca.finquiz-logo::after{left:31px}}
@media(max-width:360px){.fq-marca.finquiz-logo{font-size:29px}.fq-marca.finquiz-logo img{width:24px;height:24px}.fq-nav a{padding:8px 5px}.fq-top{gap:4px}}
/* Account dialogs use the same component outside and inside the game. */
#cuenta-dialog,#historial-dialog{box-sizing:border-box;width:min(520px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:24px;border:2px solid #adc0c9;border-radius:18px 9px 20px 10px;background:#fffefb;color:#233e50;font:600 16px/1.5 var(--f);overflow-y:auto;box-shadow:3px 5px 0 #e1e8e9}
#cuenta-dialog::backdrop,#historial-dialog::backdrop{background:#193d5080;backdrop-filter:blur(4px)}
#cuenta-dialog .panel-encabezado,#historial-dialog .panel-encabezado{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;font-weight:900}
#cuenta-dialog .panel-encabezado button,#historial-dialog .panel-encabezado button{border:0;background:#eaf4f8;color:#233e50;min-width:44px;min-height:44px;font-size:22px;cursor:pointer}
#cuenta-dialog h2,#historial-dialog h2{font:900 32px/1.15 var(--f);margin:18px 0 12px}
#cuenta-dialog form{display:grid;gap:14px}#cuenta-dialog label{display:grid;gap:6px;font-size:16px;color:#526e7c}
#cuenta-dialog [hidden]{display:none!important}
/* Las aclaraciones de un campo (el largo mínimo de la clave) son ayuda, no
   error: gris y chica debajo del campo, nunca el rojo de #cuenta-error. */
#cuenta-dialog label small{font-size:13px;font-weight:600;color:#6b8793}
/* El <select> de país va con los <input>: si no, el navegador lo dibuja a su
   manera —19 px de alto, letra de 13, borde gris finito— al lado de campos de
   50 px, y parece roto. El `appearance:none` saca el control nativo y la flecha
   la pone el background (un SVG inline, sin archivo ni pedido extra). */
#cuenta-dialog input:not([type=checkbox]),#cuenta-dialog select{box-sizing:border-box;width:100%;border:2px solid #c2d5dd;border-radius:9px;background:#fff;color:#193d50;padding:12px;font:600 16px var(--f)}
#cuenta-dialog select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23233e50' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:16px}
#cuenta-dialog select:focus-visible,#cuenta-dialog input:focus-visible{outline:3px solid #ffdb70;outline-offset:1px;border-color:#233e50}
#cuenta-dialog label.mail-check{display:flex;align-items:flex-start;font-size:14px;gap:9px}#cuenta-dialog input[type=checkbox]{width:20px;height:20px;flex:none}
#cuenta-error{font-size:14px;color:#a13f30;margin:0}
#cuenta-dialog .boton{padding:14px;font:900 18px var(--f);cursor:pointer}
#cuenta-dialog .ranking-abrir,#historial-dialog .ranking-abrir{display:block;width:100%;margin-top:16px;padding:12px;background:#eaf4f8;color:#146ead;border:0;border-radius:8px;font:800 15px var(--f);cursor:pointer}
.fq-doc .conexion-aviso:not([hidden]){position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#ffe082;border:2px solid #193d50;border-radius:12px;padding:12px 20px;max-width:90%;z-index:70}
#historial-dialog .fila{display:flex;justify-content:space-between;gap:12px;padding:12px;background:#edf5f8;border-radius:10px;margin-top:10px}
@media(max-width:520px){#cuenta-dialog,#historial-dialog{padding:18px}}

/* Identidad moneda-Q: proporciones compartidas en catálogo, juego y vivo. */
.finquiz-logo.marca-moneda{display:inline-flex;gap:0;line-height:1;max-width:100%;font-size:inherit}
.finquiz-logo.marca-moneda::after{display:none;content:none}
.finquiz-logo.marca-moneda img{display:block;width:300px;height:auto;max-width:100%;transform:none;object-fit:contain}
.fq-marca.finquiz-logo.marca-moneda{margin:0;flex-shrink:0}
.fq-marca.finquiz-logo.marca-moneda img{width:270px;height:auto}
.trivia-host .logo-grande.marca-moneda{margin:0 auto 18px}
@media(max-width:767px){.fq-marca.finquiz-logo.marca-moneda img{width:138px}.finquiz-logo.marca-moneda img{width:250px}}
@media(max-width:360px){.fq-marca.finquiz-logo.marca-moneda img{width:118px}}

/* Cerrar sesión: al final del menú, separado del resto por una línea. */
#cuenta-salir-menu{border-top:1px solid #dfe8ec;margin-top:4px;padding-top:12px;color:#c62f1e;font-weight:800}
#cuenta-salir-menu svg{stroke:#c62f1e}
#cuenta-salir-menu .sr,.menu-juego-panel #cuenta-salir-menu{color:#c62f1e!important}
/* "Hola, <nombre>": encabeza el menú con sesión abierta; no es un botón. */
.mj-hola{margin:0 0 4px;padding:8px 12px 12px;border-bottom:1px solid #dfe8ec;font:600 16px/1.3 var(--f,inherit);color:#4d6773}
.mj-hola b{color:#233e50;font-weight:800}
/* "¿Olvidaste tu contraseña?" en el modal de ingreso. */
.cuenta-olvide{display:block;margin:-4px 0 6px auto;padding:2px 0;border:0;background:none;color:#146ead;
  font:700 14px/1.3 var(--f,inherit);text-decoration:underline;cursor:pointer}
.cuenta-olvide[hidden]{display:none}

/* Primer paso del ingreso: "¿Ya tenés cuenta?" con dos botones grandes. */
.cuenta-elegir-txt{margin:0 0 20px;font-size:16.5px;line-height:1.5;color:#3f5a67}
.cuenta-elegir-botones{display:grid;gap:12px}
.cuenta-elegir-botones .boton{width:100%;font-size:18px;padding:16px}
#cuenta-dialog .cuenta-boton-alta{background:#fff;color:#193d50;border:2px solid #193d50}
.cuenta-volver{margin:14px 0 -6px;padding:4px 0;border:0;background:none;color:#146ead;font:700 15px/1.3 var(--f,inherit);cursor:pointer}
#cuenta-error{line-height:1.45}
/* 25-oct: en pantalla ancha, en las páginas del catálogo, el botón Menú solo
   aparece con sesión abierta (ahí tiene "Hola, nombre" y Salir). Sin sesión
   adentro solo quedaba el link a tomicristal.com, que ya está en el pie. En el
   celular sigue siempre, porque ahí lleva Ranking y Mi cuenta. */
@media(min-width:768px){body.fq-doc:not(.fq-con-sesion) .menu-juego{display:none}}
/* Logo nuevo (25-oct, concepto B2 "La correcta"): SVG 367×100. En la cabecera
   del catálogo se mide por el alto, no por el ancho. */
.fq-marca.finquiz-logo.marca-moneda img{width:auto;height:44px}
@media(max-width:767px){.fq-marca.finquiz-logo.marca-moneda img{width:auto;height:34px}}
@media(max-width:360px){.fq-marca.finquiz-logo.marca-moneda img{width:auto;height:30px}}
/* 25-oct: el logo de la cabecera más grande, que se destaque (Pato). */
.fq-marca.finquiz-logo.marca-moneda img{height:60px}
@media(max-width:767px){.fq-marca.finquiz-logo.marca-moneda img{height:42px}}
@media(max-width:360px){.fq-marca.finquiz-logo.marca-moneda img{height:36px}}