/* =====================================================================================
   TRESPUNTOS · 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); }
/* marca blanca: usuario de una empresa cliente: su logo (sobre fondo claro, los logos de empresa suelen ser oscuros) y su nombre */
.tp-marca.tp-cliente img { width: auto; height: 38px; max-width: 110px; padding: 4px 6px; border-radius: 8px; background: #fff; filter: none; }
.tp-marca.tp-cliente b { font-family: inherit; font-weight: 800; letter-spacing: 0.02em; color: var(--tp-cliente, #fff); background: none; -webkit-text-fill-color: currentColor; animation: none; }
.tp-marca.tp-cliente small { letter-spacing: 0.08em; text-transform: none; color: #a8a29e; }
.tp-pie-powered { position: fixed; right: 10px; bottom: 6px; z-index: 40; display: inline-flex; align-items: center; font-size: 10px; color: #a8a29e; background: rgba(12, 10, 9, 0.75); padding: 3px 9px; border-radius: 6px; text-decoration: none; }
.tp-pie-powered b { color: var(--tp-oro); margin-left: 3px; }
.tp-pw-lema { color: #78716c; letter-spacing: 0.04em; }
.tp-marca.tp-cliente small .tp-pw-lema { color: #78716c; }
/* el escudo de TresPuntos al lado de «Powered by» (gana sobre el estilo del logo de la empresa en el banner) */
.tp-pw-logo, .tp-marca.tp-cliente small img.tp-pw-logo { height: 14px; width: auto; max-width: none; padding: 0; margin: 0 5px 0 0; border-radius: 0; background: none; vertical-align: -3px; }
.tp-pie-powered .tp-pw-logo { height: 16px; }
@media (max-width: 640px) { .tp-pw-lema { display: none; } }
@media print { .tp-pie-powered { display: none; } }
/* lo que se imprime del portal de una empresa: su logo arriba y el «Powered by TresPuntos» abajo (solo en papel) */
.tp-imp-cab, .tp-imp-pie { display: none; }
@media print {
  .marca-cliente .tp-banner { display: none !important; }  /* en papel, el encabezado de la empresa reemplaza al banner */
  .tp-imp-cab { display: block !important; padding: 0 0 8px; margin-bottom: 10px; border-bottom: 2px solid #222; }
  .tp-imp-cab img { height: 42px; width: auto; }
  .tp-imp-pie { display: block !important; text-align: center; font: 10px Arial, sans-serif; color: #666; margin-top: 18px; }
  .tp-imp-pie .tp-pw-logo { height: 13px; width: auto; vertical-align: -3px; margin-right: 4px; }
}
.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; }
/* mientras llegan el menú y el usuario (primera página de la pestaña): sin mostrar opciones que después se van */
.tp-banner.tp-cargando .tp-menu, .tp-banner.tp-cargando .tp-acc, .tp-banner.tp-cargando .tp-marca { visibility: hidden; }  /* tampoco la marca: por la dirección de una empresa no aparece TresPuntos un instante */
.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; } }