@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("/Barlow-Regular.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("/Barlow-Medium.ttf") format("truetype"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("/Barlow-SemiBold.ttf") format("truetype"); }
:root { color-scheme: light dark; --fundo: #ececec; --superficie: #ffffff; --linha: #e2e2e2; --tinta: #1a1a1a; --tinta2: #5c5c5c; --tinta3: #6b6b6b; --acento: #3ebe61; --ambar: #d89b1c; --vermelho: #c9362d; --azul: #2f6fd6; --vazio: #d9d9d9; }
@media (prefers-color-scheme: dark) { :root { --fundo: #080808; --superficie: #161616; --linha: #2e2e2e; --tinta: #f0f0f0; --tinta2: #b2b2b2; --tinta3: #8c8c8c; --acento: #3ebe61; --ambar: #e3b04a; --vermelho: #ef6b62; --azul: #6c9cf0; --vazio: #262626; } }
* { box-sizing: border-box; }
html { background: var(--fundo); }
body { margin: 0; background: var(--fundo); color: var(--tinta); font: 400 17px/1.45 "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
main { max-width: 46rem; margin: 0 auto; padding: 1.6rem 1.25rem 3rem; }
.topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.6rem; }
.marca { display: inline-flex; align-items: center; gap: .7rem; font-weight: 600; font-size: 1.25rem; letter-spacing: -.02em; color: var(--tinta); text-decoration: none; }
.marca img { width: 44px; height: 44px; display: block; clip-path: path('M44.00 22.00 L43.99 28.76 L43.95 30.91 L43.89 32.48 L43.81 33.74 L43.70 34.81 L43.56 35.75 L43.40 36.59 L43.22 37.35 L43.01 38.04 L42.77 38.67 L42.50 39.25 L42.21 39.79 L41.89 40.28 L41.54 40.73 L41.15 41.15 L40.73 41.54 L40.28 41.89 L39.79 42.21 L39.25 42.50 L38.67 42.77 L38.04 43.01 L37.35 43.22 L36.59 43.40 L35.75 43.56 L34.81 43.70 L33.74 43.81 L32.48 43.89 L30.91 43.95 L28.76 43.99 L22.00 44.00 L15.24 43.99 L13.09 43.95 L11.52 43.89 L10.26 43.81 L9.19 43.70 L8.25 43.56 L7.41 43.40 L6.65 43.22 L5.96 43.01 L5.33 42.77 L4.75 42.50 L4.21 42.21 L3.72 41.89 L3.27 41.54 L2.85 41.15 L2.46 40.73 L2.11 40.28 L1.79 39.79 L1.50 39.25 L1.23 38.67 L0.99 38.04 L0.78 37.35 L0.60 36.59 L0.44 35.75 L0.30 34.81 L0.19 33.74 L0.11 32.48 L0.05 30.91 L0.01 28.76 L0.00 22.00 L0.01 15.24 L0.05 13.09 L0.11 11.52 L0.19 10.26 L0.30 9.19 L0.44 8.25 L0.60 7.41 L0.78 6.65 L0.99 5.96 L1.23 5.33 L1.50 4.75 L1.79 4.21 L2.11 3.72 L2.46 3.27 L2.85 2.85 L3.27 2.46 L3.72 2.11 L4.21 1.79 L4.75 1.50 L5.33 1.23 L5.96 0.99 L6.65 0.78 L7.41 0.60 L8.25 0.44 L9.19 0.30 L10.26 0.19 L11.52 0.11 L13.09 0.05 L15.24 0.01 L22.00 0.00 L28.76 0.01 L30.91 0.05 L32.48 0.11 L33.74 0.19 L34.81 0.30 L35.75 0.44 L36.59 0.60 L37.35 0.78 L38.04 0.99 L38.67 1.23 L39.25 1.50 L39.79 1.79 L40.28 2.11 L40.73 2.46 L41.15 2.85 L41.54 3.27 L41.89 3.72 L42.21 4.21 L42.50 4.75 L42.77 5.33 L43.01 5.96 L43.22 6.65 L43.40 7.41 L43.56 8.25 L43.70 9.19 L43.81 10.26 L43.89 11.52 L43.95 13.09 L43.99 15.24 Z'); }
.linguas { display: inline-flex; border: 1px solid var(--linha); border-radius: 100px; padding: 2px; }
.linguas button { background: none; border: 0; color: var(--tinta2); font: 500 .85rem/1 "Barlow", system-ui, sans-serif; padding: .45rem .8rem; cursor: pointer; border-radius: 100px; letter-spacing: .04em; }
.linguas button[aria-pressed="true"] { background: var(--tinta); color: var(--fundo); }
.geral { display: flex; align-items: center; gap: 1rem; border: 1px solid var(--linha); border-radius: 28px; padding: 1.1rem 1.3rem; margin-bottom: 1.4rem; }
.geral-texto { flex: 1; min-width: 0; }
.geral h1 { font-size: 1.35rem; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.geral p { margin: .15rem 0 0; font-variant-numeric: tabular-nums; }
.botao { border: 1px solid var(--linha); border-radius: 100px; padding: .45rem 1rem; color: var(--tinta); background: transparent; text-decoration: none; font: 500 .95rem/1.4 "Barlow", system-ui, sans-serif; white-space: nowrap; cursor: pointer; }
.botao:hover { border-color: var(--tinta3); }
h2 { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--tinta3); margin: 1.9rem 0 .5rem; }
.nota, .fraco { color: var(--tinta2); font-size: .95rem; }
.nota { margin: 0 0 .7rem; }
.ponto { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 1.5px solid var(--tinta3); background: transparent; flex: none; }
.ponto.grande { width: 22px; height: 22px; border-width: 2px; }
.ponto.ok { background: var(--acento); border-color: var(--acento); }
.ponto.degradado { background: var(--ambar); border-color: var(--ambar); }
.ponto.em_baixo { background: var(--vermelho); border-color: var(--vermelho); }
.ponto.manutencao { background: var(--azul); border-color: var(--azul); }
.ponto.desligado, .ponto.sem_fonte, .ponto.por_regras { background: transparent; border-color: var(--tinta3); }
.filas { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linha); border-radius: 28px; overflow: hidden; }
.filas li { display: grid; grid-template-columns: auto 1fr auto; gap: .15rem .8rem; align-items: center; padding: .8rem 1.2rem; border-top: 1px solid var(--linha); }
.filas li:first-child { border-top: 0; }
.filas li .ponto { grid-row: 1; grid-column: 1; align-self: center; }
.filas li .nome { font-weight: 500; grid-column: 2; grid-row: 1; }
.filas li .direita { grid-column: 3; grid-row: 1; text-align: right; color: var(--tinta2); font-size: .9rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.filas li .detalhe { grid-column: 2 / span 2; color: var(--tinta2); font-size: .92rem; }
.filas li .barras { grid-column: 2 / span 2; display: flex; gap: 2px; height: 22px; margin-top: .35rem; }
.barras i { flex: 1; border-radius: 2px; background: var(--vazio); min-width: 2px; }
.barras i.ok { background: var(--acento); }
.barras i.degradado { background: var(--ambar); }
.barras i.em_baixo { background: var(--vermelho); }
.filas li .rodape-barras { grid-column: 2 / span 2; display: flex; justify-content: space-between; color: var(--tinta3); font-size: .78rem; margin-top: .15rem; }
.filas li.vazio { display: block; color: var(--tinta2); }
.rede { margin-top: .9rem; }
.rede h3 { font-size: 1rem; font-weight: 600; margin: 0 0 .4rem .2rem; }
.tipo { display: inline-block; border: 1px solid var(--linha); border-radius: 100px; padding: .05rem .55rem; font-size: .75rem; font-weight: 500; color: var(--tinta2); margin-left: .45rem; vertical-align: .12em; letter-spacing: .02em; }
.pastilhas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pastilhas li { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--linha); border-radius: 100px; padding: .4rem .9rem .4rem .7rem; font-size: .95rem; font-weight: 500; }
.pastilhas li .ponto { width: 10px; height: 10px; }
.grafico { border: 1px solid var(--linha); border-radius: 28px; padding: 1rem 1.2rem .6rem; }
.grafico svg { display: block; width: 100%; height: 110px; overflow: visible; }
.grafico .eixo { display: flex; justify-content: space-between; color: var(--tinta3); font-size: .78rem; margin-top: .3rem; }
.incidente { border: 1px solid var(--linha); border-radius: 28px; padding: 1rem 1.2rem; margin-bottom: .8rem; }
.incidente.activo { border-color: var(--ambar); }
.incidente.manutencao { border-color: var(--azul); }
.incidente h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 .2rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.incidente .etiqueta { display: inline-block; border: 1px solid var(--linha); border-radius: 100px; padding: .05rem .6rem; font-size: .75rem; font-weight: 500; letter-spacing: .03em; text-transform: uppercase; color: var(--tinta2); }
.incidente .etiqueta.a_investigar, .incidente .etiqueta.identificado { border-color: var(--ambar); color: var(--ambar); }
.incidente .etiqueta.a_monitorizar, .incidente .etiqueta.agendado, .incidente .etiqueta.em_curso { border-color: var(--azul); color: var(--azul); }
.incidente .etiqueta.resolvido, .incidente .etiqueta.concluido { border-color: var(--acento); color: var(--acento); }
.incidente .quando { color: var(--tinta3); font-size: .85rem; margin: 0 0 .5rem; }
.incidente ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--linha); margin-left: .35rem; }
.incidente ol li { padding: .25rem 0 .25rem 1rem; position: relative; font-size: .95rem; }
.incidente ol li::before { content: ""; position: absolute; left: -5px; top: .85rem; width: 9px; height: 9px; border-radius: 50%; background: var(--fundo); border: 1.5px solid var(--tinta3); }
.incidente ol li b { font-weight: 500; }
.incidente ol li time { color: var(--tinta3); font-size: .85rem; margin-left: .4rem; }
.dia-titulo { font-weight: 600; margin: 1.1rem 0 .4rem; color: var(--tinta2); font-size: .9rem; }
.sem-incidentes { color: var(--tinta2); padding: .4rem .2rem; }
footer { margin-top: 2.2rem; }
.legenda { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; color: var(--tinta2); font-size: .9rem; margin: -.6rem 0 .4rem .4rem; }
.legenda .ponto { margin-right: -.55rem; }
footer .fraco { margin: 0; }
footer a { color: var(--tinta2); }
@media (max-width: 34rem) { .filas li { grid-template-columns: auto 1fr; } .filas li .direita { grid-row: 2; grid-column: 2; text-align: left; } .filas li .detalhe, .filas li .barras, .filas li .rodape-barras { grid-column: 2; } .geral { flex-wrap: wrap; } .botao { margin-left: 2.4rem; } body { font-size: 16px; } }
.subscricao { border: 1px solid var(--linha); border-radius: 28px; padding: 1rem 1.3rem .6rem; margin: -.6rem 0 1.4rem; }
.subscricao .campo { display: flex; gap: .6rem; flex-wrap: wrap; }
.subscricao input[type="email"] { flex: 1; min-width: 14rem; font: inherit; color: var(--tinta); background: transparent; border: 1px solid var(--linha); border-radius: 100px; padding: .55rem 1rem; outline: none; }
.subscricao input[type="email"]:focus { border-color: var(--tinta3); }
.botao.cheio { background: var(--tinta); color: var(--fundo); border-color: var(--tinta); cursor: pointer; font: inherit; font-weight: 500; }
.botao.cheio:disabled { opacity: .5; cursor: default; }
.oculto { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.estado-envio { display: flex; align-items: center; gap: .6rem; margin: .8rem 0 .3rem; font-size: .95rem; color: var(--tinta); }
.estado-envio:empty { display: none; }
.estado-envio .ponto { width: 10px; height: 10px; }
.centro { text-align: center; margin: 1.6rem 0 0; }
.botao.cheio { display: inline-block; padding: .6rem 1.4rem; text-decoration: none; }
.subscricao .accoes { display: flex; justify-content: flex-end; margin: .6rem 0 .2rem; }
.botao.pequeno { font-size: .85rem; padding: .35rem .85rem; color: var(--tinta2); }
.botao.pequeno:hover { color: var(--tinta); }