/* TKS-Items — tipografía y barra común. Se carga también en la página de Precios (al final del <head>). */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url(/static/fonts/plex-sans-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-style:normal;font-display:swap;src:url(/static/fonts/plex-sans-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url(/static/fonts/plex-sans-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:700;font-style:normal;font-display:swap;src:url(/static/fonts/plex-sans-700.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url(/static/fonts/plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url(/static/fonts/plex-mono-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:600;font-style:normal;font-display:swap;src:url(/static/fonts/plex-mono-600.woff2) format("woff2")}

:root{
  --ui:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}

/* la barra oscura es la misma en todas las pantallas */
.bar{font-family:var(--ui)}
.bar h1{font-weight:600;letter-spacing:0}
.bar .sub{letter-spacing:0}
.pnav{display:flex;align-items:center;gap:2px;margin-left:20px;height:100%}
.pnav a{font:500 13.5px var(--ui);color:#9DB0B0;text-decoration:none;padding:0 12px;height:100%;display:flex;align-items:center;
        border-bottom:2px solid transparent;white-space:nowrap}
.pnav a:hover{color:#F1F5F4}
.pnav a[aria-current=page]{color:#F1F5F4;border-bottom-color:#4FC3A5}
.puser{display:flex;align-items:center;gap:10px;font:13px var(--ui);color:#9DB0B0;margin-left:14px;white-space:nowrap}
.puser a{color:#F1F5F4;text-decoration:none;font-weight:500}
.puser a:hover{text-decoration:underline}
.puser button{font:500 12.5px var(--ui);color:#F1F5F4;background:transparent;border:1px solid #33474D;border-radius:6px;padding:6px 11px;cursor:pointer}
.puser button:hover{border-color:#5E7579}
.flag{font:500 11.5px var(--ui);color:#F2C46B;background:#F2C46B14;border:1px solid #F2C46B40;border-radius:6px;padding:4px 8px;white-space:nowrap}
.flag.demo{color:#9FD8FF;background:#9FD8FF12;border-color:#9FD8FF40}
.flag.bad{color:#FF9A88;background:#FF9A8814;border-color:#FF9A8850}
.bar h1,.bar .logout,.bar .status,.bar .who{white-space:nowrap}
@media(max-width:1480px){.bar .sub{display:none}.pnav{margin-left:8px}.pnav a{padding:0 9px}}
@media(max-width:1240px){
  .bar{height:auto!important;flex-wrap:wrap;padding:10px 20px!important;row-gap:6px}
  .pnav{order:5;width:100%;margin-left:0;height:36px;overflow-x:auto}
  .puser{margin-left:auto;flex-wrap:wrap;justify-content:flex-end;row-gap:6px;white-space:normal}
}