/* Portal — identidade Brazil Transports (verde-floresta + ouro), a mesma família visual dos três sistemas. Fontes locais, sem CDN. Tema claro/escuro por data-tema no , com a chave 'ti.tema' que os sistemas já usam. */ :root { --verde: #124F2C; --verde-escuro: #0C3C20; --verde-claro: #E4F1E9; --ouro: #D9B303; --fundo: #F1F4F2; --branco: #FFFFFF; --linha: #E3E8E4; --linha-forte: #CFD8D1; --texto: #182A1F; --cinza: #5E6B62; --erro: #BA1A1A; --erro-fundo: #FDECEC; --ok: #15803D; --sombra: 0 1px 2px rgba(12, 60, 32, .06), 0 8px 24px rgba(12, 60, 32, .08); --sombra-alta: 0 2px 4px rgba(12, 60, 32, .08), 0 16px 40px rgba(12, 60, 32, .16); } html[data-tema="escuro"] { --verde: #1B6B3C; --verde-escuro: #0B3219; --verde-claro: #10301E; --fundo: #0E1512; --branco: #16201B; --linha: #24312A; --linha-forte: #324237; --texto: #E6EDE8; --cinza: #9DAEA3; --erro: #FF8A80; --erro-fundo: #3A1B1B; --ok: #6FD495; --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3); --sombra-alta: 0 2px 4px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .45); } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--fundo); color: var(--texto); font: 15px/1.55 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; } /* ---------------------------------------------------------------- topo --- */ header { background: linear-gradient(135deg, var(--verde-escuro), var(--verde)); color: #fff; padding: 0 16px; min-height: 64px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; box-shadow: var(--sombra); } header img { height: 34px; width: auto; background: #fff; border-radius: 6px; padding: 3px 7px; } header .marca { font-weight: 600; letter-spacing: .2px; line-height: 1.15; } header .marca small { display: block; font-weight: 400; font-size: 12px; opacity: .78; } header .espaco { flex: 1; } header .quem { font-size: 13px; opacity: .9; } .btn-topo { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); color: #fff; border-radius: 8px; padding: 7px 12px; cursor: pointer; font: inherit; font-size: 13px; } .btn-topo:hover { background: rgba(255, 255, 255, .2); } main { flex: 1; width: 100%; max-width: 1000px; margin: 0 auto; padding: 40px 20px 40px; } h1 { margin: 0 0 6px; font-size: 26px; letter-spacing: -.2px; } h2 { margin: 0 0 4px; font-size: 18px; } .sub { margin: 0 0 28px; color: var(--cinza); } /* --------------------------------------------------------------- login --- */ .login-palco { display: grid; place-items: center; min-height: 60vh; } .login-caixa { width: 100%; max-width: 380px; background: var(--branco); border: 1px solid var(--linha-forte); border-radius: 14px; box-shadow: var(--sombra-alta); padding: 32px 28px; } .login-marca { text-align: center; margin-bottom: 22px; } .login-marca img { height: 54px; width: auto; } .login-marca .t { margin-top: 10px; font-size: 19px; font-weight: 600; } .login-marca .s { color: var(--cinza); font-size: 13.5px; } label { display: block; font-size: 13px; font-weight: 600; color: var(--cinza); margin: 14px 0 5px; } input[type=text], input[type=password], select { width: 100%; padding: 10px 12px; border: 1px solid var(--linha-forte); border-radius: 9px; background: var(--branco); color: var(--texto); font: inherit; } input:focus, select:focus { outline: 2px solid var(--verde); outline-offset: 1px; border-color: var(--verde); } .btn { display: inline-block; border: 0; border-radius: 9px; padding: 11px 18px; font: inherit; font-weight: 600; cursor: pointer; background: var(--verde); color: #fff; } .btn:hover { background: var(--verde-escuro); } .btn:disabled { opacity: .6; cursor: default; } .btn-largo { width: 100%; margin-top: 20px; } .btn-ouro { background: var(--ouro); color: #201A00; } .btn-ouro:hover { background: #C4A203; } .btn-fraco { background: transparent; color: var(--verde); border: 1px solid var(--linha-forte); } .btn-fraco:hover { background: var(--verde-claro); } .btn-peq { padding: 6px 11px; font-size: 13px; border-radius: 7px; } .aviso { margin: 14px 0 0; padding: 11px 13px; border-radius: 9px; font-size: 13.5px; background: var(--erro-fundo); color: var(--erro); border: 1px solid currentColor; } .aviso.ok { background: var(--verde-claro); color: var(--ok); } .aviso.neutro { background: var(--verde-claro); color: var(--texto); border-color: var(--linha-forte); } /* -------------------------------------------------------------- cartões -- */ .cartoes { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } a.cartao { display: flex; flex-direction: column; gap: 11px; padding: 24px; background: var(--branco); border: 1px solid var(--linha-forte); border-radius: 14px; box-shadow: var(--sombra); color: inherit; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } a.cartao:hover, a.cartao:focus-visible { transform: translateY(-3px); box-shadow: var(--sombra-alta); border-color: var(--verde); outline: none; } .icone { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 11px; background: var(--verde-claro); color: var(--verde); font-size: 23px; } .cartao p { margin: 0; color: var(--cinza); font-size: 14px; } .papel { align-self: flex-start; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--verde); background: var(--verde-claro); border-radius: 999px; padding: 3px 10px; } .entrar { margin-top: 4px; align-self: flex-start; font-weight: 600; font-size: 14px; color: var(--verde); border-bottom: 2px solid var(--ouro); padding-bottom: 1px; } html[data-tema="escuro"] .entrar, html[data-tema="escuro"] .papel { color: #7FD3A0; } /* -------------------------------------------------------------- pessoas -- */ .barra { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .barra .espaco { flex: 1; } .tabela-caixa { background: var(--branco); border: 1px solid var(--linha-forte); border-radius: 12px; box-shadow: var(--sombra); overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 720px; } th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--linha); vertical-align: middle; } th { background: var(--verde-claro); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--cinza); } tr:last-child td { border-bottom: 0; } td.acoes { text-align: right; white-space: nowrap; } td.acoes .btn { margin-left: 6px; } .pill { display: inline-block; font-size: 12px; border-radius: 999px; padding: 2px 9px; margin: 1px 3px 1px 0; background: var(--verde-claro); color: var(--verde); } .pill.off { background: var(--linha); color: var(--cinza); } html[data-tema="escuro"] .pill { color: #7FD3A0; } .inativo td { opacity: .55; } /* -------------------------------------------------------------- diálogo -- */ .fundo-modal { position: fixed; inset: 0; background: rgba(8, 26, 16, .55); display: grid; place-items: center; padding: 20px; z-index: 40; } .modal { width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; background: var(--branco); border: 1px solid var(--linha-forte); border-radius: 14px; box-shadow: var(--sombra-alta); padding: 24px; } .modal h2 { margin-bottom: 14px; } .modal .rodape-modal { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; } fieldset { border: 1px solid var(--linha-forte); border-radius: 11px; padding: 12px 14px 16px; margin: 18px 0 0; } legend { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--cinza); padding: 0 6px; } .linha-sistema { display: flex; align-items: center; gap: 10px; padding: 7px 0; flex-wrap: wrap; } .linha-sistema .nome { flex: 1; min-width: 150px; font-weight: 600; font-size: 14px; } .linha-sistema select { width: auto; min-width: 150px; } .marca-caixa { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--texto); font-weight: 500; } .marca-caixa input { width: auto; } footer { padding: 16px 20px 28px; text-align: center; color: var(--cinza); font-size: 12.5px; }