/* Botones "Inicio" y "Cuenta" de la barra + diálogo de cuenta */
.boton-barra{cursor:pointer;text-decoration:none}
.boton-barra:hover{background:#00000066;color:#fff}
.boton-inicio{margin-right:4px}
.boton-inicio svg{width:17px;height:17px;flex:0 0 auto}
.boton-cuenta{background:var(--teal-btn);color:#fff}
.boton-cuenta:hover{background:var(--teal-btn-d)}
.boton-cuenta.conectado{background:#0000003d;color:#c9dbee;box-shadow:inset 0 0 0 1px #17a39880}
.boton-cuenta #botonCuentaTexto{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){.boton-inicio span,.boton-cuenta #botonCuentaTexto{display:none}}

.cuenta-pestanas{display:flex;gap:6px;margin-bottom:16px;background:var(--paper);padding:4px;border-radius:12px}
.cuenta-pestanas button{flex:1;border:0;background:transparent;font:inherit;font-size:.86rem;font-weight:600;color:var(--ink-soft);padding:9px 8px;border-radius:9px;cursor:pointer}
.cuenta-pestanas button[aria-selected="true"]{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}
.cuenta-form{display:flex;flex-direction:column;gap:10px}
.cuenta-form .etiqueta{display:flex;flex-direction:column;gap:5px}
.cuenta-form .resolver{justify-content:center;margin-top:4px}
.cuenta-nota{font-size:.82rem;color:var(--ink-soft);line-height:1.45;margin:0 0 4px}
.cuenta-links{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.84rem}
.cuenta-mensaje{min-height:1.2em;margin:12px 0 0;font-size:.86rem;color:var(--ink-soft)}
.cuenta-mensaje.error{color:var(--warn-texto)}
.cuenta-mensaje.ok{color:var(--teal-texto)}
.cuenta-perfil{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.cuenta-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--blueprint));color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px}
.cuenta-perfil b{font-size:1.05rem}
.cuenta-plan{display:inline-block;background:var(--resalte);color:var(--brass-texto);font-weight:700;font-size:.78rem;padding:4px 10px;border-radius:20px}
.cuenta-perfil .acciones{justify-content:center;margin-top:10px;flex-wrap:wrap}

/* ---- Barra superior en tablet: solo íconos para que entre todo en una fila ---- */
@media (min-width:641px) and (max-width:1280px){
  .topbar{gap:10px}
  .topbar .chip{display:none}
  .topbar .boton-barra span:not(.aa){display:none}
  .topbar .boton-barra{padding:8px 10px}
  .topbar .brand small{white-space:nowrap}
}

/* ---- Barra superior en celular: dos filas, sin superposiciones (14/10/2026) ---- */
@media (max-width:640px){
  .topbar{flex-wrap:wrap;gap:6px 6px;padding:calc(8px + env(safe-area-inset-top,0px)) 10px 8px}
  .topbar .boton-inicio{order:0;margin-right:0}
  .topbar .brand{order:1;flex:1 1 calc(100% - 60px);min-width:0;margin-right:0;gap:9px}
  .topbar .brand .mark{width:32px;height:32px;border-radius:9px}
  .topbar .brand .mark svg{width:18px;height:18px}
  .topbar .brand>div:last-child{min-width:0}
  .topbar .brand b{font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .brand small{font-size:.62rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* segunda fila: todas las acciones, alineadas y sin cortarse */
  .topbar>button,.topbar>.opciones-wrap{order:2}
  .topbar>.opciones-wrap{display:flex}
  .topbar #botonGraficador{margin-left:0}
  .topbar .chip-plan{order:3;margin-left:auto;padding:6px 10px;font-size:.72rem;white-space:nowrap;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .topbar .boton-barra{padding:8px 10px;flex:0 0 auto}
  .areas-wrap{top:calc(var(--alto-barra,100px) + env(safe-area-inset-top,0px))}
}
/* Textos de la barra en una sola línea; la frase decorativa solo en pantallas anchas */
.topbar .boton-barra,.topbar .chip-plan{white-space:nowrap;flex-shrink:0}
@media (max-width:1500px){.topbar .chip{display:none}}
@media (max-width:640px){.topbar .chip-plan{flex-shrink:1}}
.topbar .brand small{white-space:nowrap}