:root{
  --bg:#e9e2d3;                /* fondo crema (papel) */
  --panel:#ffffff;            /* tarjetas / sidebar */
  --cream:#faf7f0;            /* tinte suave */
  --line:#e7ddcb;             /* bordes */
  --navy:#0f1c33;             /* cabecera */
  --ink:#1f2b3d;              /* titulos oscuros */
  --text:#2c3644;             /* texto */
  --muted:#8a93a0;            /* texto secundario */
  --accent:#2f6fed;           /* azul primario */
  --accent-d:#2559c9;
  --green-b:#e0f3e6; --green-t:#1c9a54;
  --pink-b:#ffe1ec;  --pink-t:#d83b76;
  --blue-b:#e2edff;  --blue-t:#2f6fed;
  --shadow:0 2px 10px rgba(31,43,61,.06);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;color:var(--text);
  background:linear-gradient(180deg,#efe8da,#e5ddcb);
  font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* en columna: asi la cabecera puede ocupar dos filas en el movil sin que
     la parte de abajo se salga de la pantalla */
  display:flex;flex-direction:column;min-height:100dvh}

/* ---------- CABECERA ---------- */
.topbar{height:56px;background:var(--navy);color:#fff;display:flex;align-items:center;
  padding:0 20px;gap:16px}
/* Boton del cajon de receptores: solo en movil */
.tb-menu{display:none;background:transparent;border:1px solid #2a3c5c;color:#cfe0ff;
  border-radius:9px;width:40px;height:38px;font-size:17px;cursor:pointer;flex:none}
.tb-menu:hover{background:#18283f;color:#fff}
.side-fondo{display:none}
.tb-brand{font-size:20px;letter-spacing:1px;font-weight:800;color:#fff;text-decoration:none;cursor:pointer}
.tb-brand:hover{opacity:.85}
.tb-brand b{color:#5aa2ff}
.tb-actions{margin-left:auto;display:flex;align-items:center;gap:14px}
.tb-count{color:#9fb0c9;font-size:13px}
/* Secciones de la casa (QSLCREATOR, CQHAM...) */
.tb-secciones{gap:8px;flex-wrap:wrap}
.tb-sec{background:transparent;color:#cfe0ff;border:1px solid #2a3c5c;border-radius:9px;
  padding:8px 14px;font-size:12.5px;font-weight:700;letter-spacing:.5px;cursor:pointer;
  font-family:inherit;white-space:nowrap}
.tb-sec:hover{background:#18283f;color:#fff}
.tb-sec.on{background:#2f6fd0;border-color:#2f6fd0;color:#fff}
@media (max-width:900px){
  .topbar{height:auto;padding:10px 14px;flex-wrap:wrap}
  .tb-secciones{margin-left:0;width:100%}
  .tb-sec{flex:1 1 auto;padding:8px 10px;font-size:11.5px}
}
.tb-btn{color:#cfe0ff;text-decoration:none;font-size:13px;border:1px solid #2a3c5c;
  padding:7px 13px;border-radius:9px}
.tb-btn:hover{background:#18283f;color:#fff}

/* ---------- LAYOUT ---------- */
.app{display:flex;flex:1;min-height:0;overflow:hidden;padding:16px;gap:16px}

/* ---------- SIDEBAR ---------- */
.sidebar{width:290px;min-width:290px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
.side-title{padding:16px 18px 6px;color:var(--ink);font-weight:800;font-size:15px}
.home-btn{margin:6px 14px 4px;padding:10px 12px;background:var(--blue-b);color:var(--blue-t);
  border:1px solid #cfe0ff;border-radius:10px;cursor:pointer;font-weight:700;text-align:left}
.home-btn:hover{background:#d6e6ff}
.search{margin:8px 14px 10px;padding:10px 13px;background:var(--cream);border:1px solid var(--line);
  border-radius:10px;color:var(--text);outline:none}
.search:focus{border-color:var(--accent)}
.list{flex:1;overflow-y:auto;padding:4px 10px 12px}
.cat{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:1px;
  padding:14px 10px 6px;font-weight:700}
.item{display:block;padding:11px 13px;border-radius:10px;cursor:pointer;color:var(--text);
  text-decoration:none;border:1px solid transparent;margin-bottom:2px}
.item:hover{background:var(--cream)}
.item.active{background:#eef4ff;border-color:#cfe0ff}
.item.active .nm{color:var(--accent-d)}
.item .nm{font-weight:700}
.item .nt{color:var(--muted);font-size:12px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty{color:var(--muted);padding:16px;text-align:center;line-height:1.6}

/* ---------- MAIN ---------- */
.main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.bar{height:50px;background:var(--cream);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;padding:0 16px}
.cur-name{font-weight:800;color:var(--ink)}
.cur-cat{color:var(--muted);font-size:12px;background:var(--blue-b);color:var(--blue-t);
  padding:3px 9px;border-radius:20px}
.bar-actions{margin-left:auto;display:flex;gap:6px}
.bar-actions button{width:34px;height:34px;border:1px solid var(--line);background:#fff;
  color:var(--text);border-radius:9px;cursor:pointer;font-size:15px}
.bar-actions button:hover{border-color:var(--accent);color:var(--accent)}
.frame{flex:1;border:0;width:100%;background:#fff}
.welcome{flex:1;display:flex;align-items:center;justify-content:center;text-align:center}
.w-logo{font-size:42px;font-weight:800;letter-spacing:1px;color:var(--ink);margin-bottom:10px}
.w-logo b{color:var(--accent)}
.welcome p{color:var(--muted);margin:6px 0}
.muted{color:var(--muted)}

/* ---------- MOVIL ----------
   El menu de receptores ocupaba casi toda la pantalla y tapaba el mapa. Ahora
   es un cajon que se abre con el boton de la cabecera y se cierra al elegir. */
@media(max-width:720px){
  .app{padding:10px;gap:10px;position:relative}
  .sidebar{position:absolute;left:10px;top:10px;z-index:30;height:calc(100% - 20px);
    width:86%;max-width:330px;transform:translateX(-115%);transition:transform .22s ease;
    box-shadow:0 14px 34px rgba(8,14,26,.45)}
  .sidebar.abierto{transform:none}
  .side-fondo.on{display:block;position:absolute;inset:0;z-index:25;background:rgba(10,18,32,.45)}
  .tb-menu{display:block}
  .tb-sec{flex:1 1 auto}
}