/* =====================================================================================
   TESPUNTOS · banner común de todas las páginas (portal NOC, login, árbol de topología y
   las que se agreguen). Mismo estilo que el menú del sitio principal.
   Uso en cualquier página:
     <link rel="stylesheet" href="/comun/tespuntos.css">
     <script src="/comun/banner.js" defer></script>
   ===================================================================================== */
:root {
    --tp-h: 64px;
    --tp-bg: #070609;
    --tp-texto: #F4E9DC;
    --tp-oro: var(--color-gold, #F4A261);
    --tp-oro2: #FFC857;
    --tp-rojo: var(--color-red, #E63946);
    --tp-azul: var(--color-blue, #00A8E8);
    --tp-verde: #2A9D8F;
    --tp-cobre: #C87D53;
}
body.tp-con-banner { padding-top: var(--tp-h); }

.tp-banner {
    position: fixed; top: 0; left: 0; right: 0; height: var(--tp-h); z-index: 40;
    background: rgba(7, 6, 9, 0.84); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-family: 'Space Grotesk', system-ui, sans-serif; color: var(--tp-texto);
}
.tp-banner * { box-sizing: border-box; }
.tp-in { height: 100%; max-width: 1400px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 14px; }
.tp-marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex: none; }
.tp-marca img { width: 46px; height: 50px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(244, 162, 97, 0.55)); }
.tp-marca b { display: block; font-family: 'Cinzel', serif; font-weight: 900; font-size: 18px; letter-spacing: 0.12em; line-height: 1.1; }
.tp-marca small { display: block; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tp-oro); }
.tp-holo {
    background: linear-gradient(135deg, #FFC857 0%, #F4A261 20%, #E63946 42%, #8B263E 60%, #2A9D8F 80%, #00A8E8 100%);
    background-size: 300% 300%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: tpHolo 7s ease infinite;
}
@keyframes tpHolo { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.tp-menu { flex: 1; min-width: 0; display: flex; justify-content: center; }
.tp-menu-in { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.tp-menu-in::-webkit-scrollbar { display: none; }
.tp-menu a { display: flex; align-items: center; gap: 6px; white-space: nowrap; padding: 7px 9px; border-radius: 999px;
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #D6D3D1; text-decoration: none;
    border: 1px solid transparent; transition: all 0.3s ease; }
.tp-menu a:hover, .tp-menu a:focus-visible { color: #fff; border-color: rgba(255, 200, 87, 0.8); box-shadow: 0 0 18px rgba(244, 162, 97, 0.35); outline: none; }
.tp-menu a[aria-current="page"] { color: #fff; background: rgba(244, 162, 97, 0.16); border-color: rgba(244, 162, 97, 0.5); }
.tp-menu a i { width: 7px; height: 7px; border-radius: 50%; flex: none; }

.tp-acc { display: flex; align-items: center; gap: 8px; flex: none; }
.tp-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 999px; white-space: nowrap;
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; cursor: pointer;
    font-family: inherit; color: var(--tp-azul); background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(0, 168, 232, 0.45); transition: all 0.3s ease; }
.tp-btn:hover { background: rgba(0, 168, 232, 0.16); }
.tp-btn.oro { color: var(--tp-oro2); border-color: rgba(244, 162, 97, 0.55); }
.tp-btn.oro:hover { background: rgba(244, 162, 97, 0.16); }
.tp-usuario { font-size: 11px; color: #A8A29E; text-align: right; line-height: 1.25; }
.tp-usuario b { display: block; color: var(--tp-texto); font-weight: 600; }
.tp-hamb { display: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(244, 162, 97, 0.4); background: rgba(0, 0, 0, 0.4);
    color: var(--tp-oro); cursor: pointer; font-size: 20px; line-height: 1; }
.tp-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: linear-gradient(90deg, #E63946, #C87D53, #F4A261, #FFC857, #2A9D8F, #00A8E8, #8B263E, #E63946);
    background-size: 200% 100%; animation: tpFlujo 6s linear infinite; opacity: 0.85; }
@keyframes tpFlujo { to { background-position: 200% 50%; } }
.tp-desp { display: none; position: absolute; top: var(--tp-h); left: 0; right: 0; padding: 12px 16px 16px; background: rgba(12, 10, 12, 0.97);
    border-bottom: 1px solid rgba(244, 162, 97, 0.3); flex-direction: column; gap: 6px; }
.tp-desp.ver { display: flex; }
.tp-desp a { display: block; padding: 11px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--tp-texto); text-decoration: none; font-family: 'Cinzel', serif; font-size: 14px; }

@media (max-width: 1500px) { .tp-usuario { display: none; } .tp-marca small { letter-spacing: 0.14em; } }
@media (max-width: 1180px) { .tp-menu { display: none; } .tp-hamb { display: inline-block; } .tp-in { justify-content: space-between; } }
@media (max-width: 640px) { .tp-acc { display: none; } .tp-marca b { font-size: 15px; } }  /* Portal, Gestor y Salir quedan en el menú ☰ */
@media (max-width: 380px) { .tp-marca small { display: none; } }
@media (prefers-reduced-motion: reduce) { .tp-holo, .tp-bar { animation: none; } }