/* ==========================================================
WINE - Sistema de design
Reskin do Bootstrap 5.3 via variaveis CSS (theming nativo):
ao sobrescrever --bs-primary, --bs-body-bg, --bs-border-radius etc,
todo componente Bootstrap (botoes, links, foco de formulario,
badges) se atualiza automaticamente, sem precisar trocar classe
por classe em cada tela.
========================================================== */
:root {
/* Paleta */
--wine-primary: #7A1F3D;
--wine-primary-dark: #4C1226;
--wine-primary-darker: #350B1A;
--wine-primary-rgb: 122, 31, 61;
--wine-ink: #21252B;
--wine-muted: #6B7280;
--wine-bg: #F6F6F8;
--wine-surface: #FFFFFF;
--wine-border: #E3E5E8;
--sidebar-width: 232px;
/* Reskin do Bootstrap */
--bs-primary: var(--wine-primary);
--bs-primary-rgb: var(--wine-primary-rgb);
--bs-link-color: var(--wine-primary);
--bs-link-color-rgb: var(--wine-primary-rgb);
--bs-link-hover-color: var(--wine-primary-dark);
--bs-body-bg: var(--wine-bg);
--bs-body-color: var(--wine-ink);
--bs-body-font-family: 'Inter', system-ui, -apple-system, sans-serif;
--bs-border-radius: .5rem;
--bs-border-radius-sm: .375rem;
--bs-border-radius-lg: .625rem;
--bs-border-color: var(--wine-border);
--bs-secondary-color: var(--wine-muted);
}
body {
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}
h1, h2, h3, .sidebar-brand, .brand-serif {
font-family: 'Fraunces', Georgia, serif;
font-weight: 600;
letter-spacing: -0.01em;
}
h3 { margin-bottom: 1.25rem; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
/* ================================================================
ESTRUTURA GERAL: sidebar fixa + topbar fina + conteudo
================================================================ */
.app-shell {
display: flex;
min-height: 100vh;
}
.sidebar-toggle-checkbox { display: none; }
.sidebar-overlay { display: none; }
.app-sidebar {
width: var(--sidebar-width);
flex-shrink: 0;
background: var(--wine-primary-darker);
color: rgba(255,255,255,.85);
display: flex;
flex-direction: column;
padding: 1.25rem 1rem;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
.sidebar-brand {
color: #fff;
font-size: 1.5rem;
font-style: italic;
text-decoration: none;
display: block;
margin: .25rem 0 1.75rem .5rem;
}
.sidebar-brand-img {
background: #fff;
padding: .5rem .85rem;
border-radius: 10px;
max-width: 100%;
height: auto;
display: block;
}
.sidebar-nav {
display: flex;
flex-direction: column;
gap: .1rem;
flex: 1;
}
.sidebar-link {
display: flex;
align-items: center;
gap: .65rem;
color: rgba(255,255,255,.72);
text-decoration: none;
padding: .6rem .75rem;
border-radius: 8px;
font-size: .9rem;
font-weight: 500;
transition: background .12s ease, color .12s ease;
}
.sidebar-link svg { flex-shrink: 0; opacity: .85; }
.sidebar-link:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.sidebar-link.active { background: var(--wine-primary); color: #fff; }
.sidebar-link-sm {
font-size: .84rem;
padding: .45rem .75rem .45rem 1.65rem;
font-weight: 400;
}
.sidebar-section-label {
text-transform: uppercase;
font-size: .68rem;
font-weight: 600;
letter-spacing: .06em;
color: rgba(255,255,255,.4);
margin: 1.25rem 0 .35rem .75rem;
}
.sidebar-footer {
border-top: 1px solid rgba(255,255,255,.1);
padding-top: .85rem;
margin-top: .75rem;
display: flex;
flex-direction: column;
padding-left: .5rem;
}
.sidebar-user { color: #fff; font-size: .85rem; font-weight: 600; }
.sidebar-user-perfil { color: rgba(255,255,255,.5); font-size: .75rem; text-transform: capitalize; }
.app-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.app-topbar {
height: 58px;
display: flex;
align-items: center;
padding: 0 1.5rem;
background: var(--wine-surface);
border-bottom: 1px solid var(--bs-border-color);
position: sticky;
top: 0;
z-index: 20;
}
.topbar-spacer { flex: 1; }
/* 2.8.42 - Faixa de dicas rotativas (public/js/dicas-topo.js): ocupa o
espaco entre a busca e o nome do usuario; texto de uma linha, cortado com
"..." quando nao cabe (a dica inteira aparece no balao ao passar o mouse).
Some em tela estreita (celular/tablet em pe), onde o topo ja fica apertado. */
.topbar-dicas {
flex: 0 1 760px; min-width: 0; margin: 0 1rem;
display: flex; align-items: center; justify-content: center; gap: .55rem;
padding: .3rem .75rem; border-radius: 999px;
background: rgba(var(--wine-primary-rgb), .06);
border: 1px solid rgba(var(--wine-primary-rgb), .14);
color: var(--wine-ink); font-size: .82rem; cursor: pointer;
transition: background .2s;
}
.topbar-dicas[hidden] { display: none; }
.topbar-dicas:hover, .topbar-dicas:focus { background: rgba(var(--wine-primary-rgb), .11); outline: none; }
.topbar-dicas:focus-visible { outline: 2px solid var(--wine, #B3222E); outline-offset: 2px; } /* 2.8.71 (revisão T06): contorno visível no teclado */
.topbar-dicas-rotulo {
flex-shrink: 0; display: inline-flex; align-items: center; gap: .25rem;
color: var(--wine-primary); font-weight: 600; font-size: .72rem;
text-transform: uppercase; letter-spacing: .04em;
}
.topbar-dicas-texto {
min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
transition: opacity .25s;
}
.topbar-dicas.trocando .topbar-dicas-texto { opacity: 0; }
/* 2.8.44: o espaco flexivel (topbar-spacer) continua empurrando nome, sino
e perfil pro canto DIREITO da tela - antes ele era zerado aqui e esses
itens ficavam no meio em tela larga. */
@media (max-width: 991.98px) { .topbar-dicas { display: none !important; } }
/* 2.8.45 - Pedido do Fernando: dica CENTRALIZADA entre a busca e o nome.
Em tela larga a faixa usa margem automatica dos dois lados (fica no meio
do espaco livre) e o espacador some - a margem da direita e que continua
empurrando nome, sino e perfil pro canto direito. So vale >= 992px: abaixo
disso a faixa nao aparece e o espacador continua fazendo o trabalho dele. */
@media (min-width: 992px) {
.topbar-dicas:not([hidden]) { margin-left: auto; margin-right: auto; }
.topbar-dicas:not([hidden]) + .topbar-spacer { display: none; }
/* folga minima entre a dica e os vizinhos quando a tela e mais estreita */
.topbar-busca { margin-right: 1rem; }
.topbar-actions { margin-left: 1rem; }
}
.topbar-busca { width: 260px; margin-left: 1rem; flex-shrink: 0; }
@media (max-width: 575.98px) { .topbar-busca { display: none; } }
.topbar-menu-btn {
display: none;
color: var(--wine-ink);
cursor: pointer;
padding: .3rem;
}
.topbar-actions { display: flex; align-items: center; gap: .35rem; }
.topbar-icon-btn {
color: var(--wine-ink);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 999px;
text-decoration: none;
}
.topbar-icon-btn:hover { background: var(--wine-bg); }
.app-content {
padding: 1.75rem 2rem 3rem;
flex: 1;
max-width: 1600px;
width: 100%;
}
/* Sidebar responsiva: escondida em telas menores, aberta via checkbox */
@media (max-width: 991.98px) {
.app-sidebar {
position: fixed;
left: calc(-1 * var(--sidebar-width));
top: 0;
z-index: 1050;
transition: left .2s ease;
}
#sidebar-toggle:checked ~ .app-sidebar { left: 0; }
#sidebar-toggle:checked ~ .sidebar-overlay {
display: block;
position: fixed;
inset: 0;
background: rgba(0,0,0,.35);
z-index: 1040;
}
.topbar-menu-btn { display: inline-flex; }
.app-content { padding: 1.25rem 1rem 2.5rem; }
}
/* ---------------- Auth (login) ---------------- */
.auth-shell {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
/* ---------------- Notificacoes ---------------- */
.badge-sininho {
display: inline-block;
background: #B3222E;
color: #fff;
border-radius: 999px;
font-size: .63rem;
font-weight: 700;
padding: .05em .4em;
position: absolute;
top: 2px;
right: 2px;
line-height: 1.3;
border: 1.5px solid #fff;
}
.dropdown-toggle-no-caret::after { display: none; }
.dropdown-notificacoes {
width: 340px;
max-height: 420px;
overflow-y: auto;
}
.notif-item {
white-space: normal;
border-left: 3px solid transparent;
}
.notif-item.notif-nao-lida {
background: #FBF6F0;
border-left-color: var(--wine-primary);
}
.dropdown-menu {
border: 1px solid var(--bs-border-color);
box-shadow: 0 8px 24px rgba(20,10,15,.1);
}
/* ---------------- Tabelas largas sem quebra feia ---------------- */
.table td, .table th { white-space: nowrap; }
.table td.celula-descricao { white-space: normal; max-width: 320px; }
/* Tabela "Informacoes do chamado" - a descricao pode ser bem longa
(link/texto colado sem espaco), sem quebra isso estourava a largura da
tela inteira e empurrava o painel de Acoes pra baixo. */
.resumo-chamado-info table { table-layout: fixed; width: 100%; }
.resumo-chamado-info table td { white-space: normal; word-break: break-word; overflow-wrap: break-word; }
.resumo-chamado-info table th { width: 130px; white-space: nowrap; }
/* ---------------- Manual de uso (conteudo vindo de Markdown) ---------------- */
.manual-conteudo { max-width: 860px; }
.manual-conteudo h1 { font-size: 1.75rem; margin-bottom: 1rem; }
.manual-conteudo h2 { font-size: 1.35rem; margin-top: 2rem; border-bottom: 1px solid var(--bs-border-color); padding-bottom: .4rem; }
.manual-conteudo h3 { font-size: 1.1rem; margin-top: 1.5rem; }
.manual-conteudo p, .manual-conteudo li { line-height: 1.6; }
.manual-conteudo code { background: #EEEFF1; padding: .1em .35em; border-radius: 4px; font-size: .9em; }
.manual-conteudo pre { background: #F5F5F5; border: 1px solid var(--bs-border-color); border-radius: 6px; padding: 1rem; overflow-x: auto; }
.manual-conteudo hr { margin: 2rem 0; }
.manual-conteudo table { width: 100%; margin-bottom: 1.5rem; }
.manual-conteudo table, .manual-conteudo th, .manual-conteudo td { border: 1px solid var(--bs-border-color); border-collapse: collapse; }
.manual-conteudo th, .manual-conteudo td { padding: .5rem .75rem; }
/* ---------------- Cards / tabelas ---------------- */
.card {
box-shadow: 0 1px 2px rgba(20,10,15,.04);
border: 1px solid var(--bs-border-color);
}
.table {
--bs-table-bg: transparent;
}
.table th {
font-size: .78rem;
text-transform: none;
color: var(--wine-muted);
font-weight: 600;
border-bottom-width: 1px;
}
/* ---------------- Cards do Dashboard (com icone) ---------------- */
.stat-card {
border: 1px solid var(--bs-border-color);
border-radius: var(--bs-border-radius-lg);
background: var(--wine-surface);
padding: 1.1rem 1.25rem;
display: flex;
align-items: center;
gap: .9rem;
height: 100%;
}
.stat-card-icon {
width: 42px;
height: 42px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: #EAE6F3;
color: var(--wine-primary);
}
.stat-card-icon.icon-danger { background: #FBE7E9; color: #B3222E; }
.stat-card-icon.icon-success { background: #E4F3EA; color: #1E7A46; }
.stat-card-icon.icon-info { background: #E7F0FB; color: #1D5BA6; }
.stat-card-icon.icon-warning { background: #FBF0DC; color: #8A5A00; }
.stat-card-label { color: var(--wine-muted); font-size: .8rem; margin-bottom: .1rem; }
.stat-card-value { font-size: 1.6rem; font-weight: 700; line-height: 1.15; font-family: 'Fraunces', Georgia, serif; }
.stat-card.stat-card-alerta { border-color: #F3C6CB; }
.stat-card.stat-card-alerta .stat-card-value { color: #B3222E; }
/* Container de altura fixa pro Chart.js - sem isso, o grafico cresce sem
limite e fica desalinhado com os outros cards da mesma linha. */
.chart-box { position: relative; height: 260px; width: 100%; }
/* ---------------- Badges de status (tons abafados, nao o padrao saturado do Bootstrap) ---------------- */
.badge-status {
display: inline-block;
padding: .3em .65em;
border-radius: 999px;
font-size: .78rem;
font-weight: 600;
}
.badge-status.status-aberto { background: #EEEFF1; color: #52565C; }
.badge-status.status-direcionado { background: #E7F0FB; color: #1D5BA6; }
.badge-status.status-aceito { background: #EAE6F3; color: var(--wine-primary); }
.badge-status.status-recusado { background: #FBE7E9; color: #B3222E; }
.badge-status.status-em_deslocamento { background: #FDF1E3; color: #A15C00; }
.badge-status.status-no_local { background: #E3F1FB; color: #0C6690; }
.badge-status.status-em_atendimento { background: #E4F3EA; color: #1E7A46; }
.badge-status.status-interrompido { background: #FBF0DC; color: #8A5A00; }
.badge-status.status-concluido { background: #EAE6F3; color: var(--wine-primary-dark); }
.badge-status.status-cancelado { background: #F1F1F1; color: #8A8D93; }
.badge-criticidade {
display: inline-block;
padding: .3em .65em;
border-radius: 999px;
font-size: .78rem;
font-weight: 600;
background: #EEEFF1;
color: #52565C;
}
.badge-criticidade.crit-alta,
.badge-criticidade.crit-critica {
background: #FBE7E9;
color: #B3222E;
}
/* ---------------- Login ---------------- */
.login-card {
background: var(--wine-surface);
border: 1px solid var(--bs-border-color);
border-radius: var(--bs-border-radius-lg);
padding: 2.5rem 2rem;
box-shadow: 0 12px 32px rgba(20,10,15,.08);
width: 100%;
max-width: 380px;
}
/* 2.8.46: logo oficial no topo do cartão de login */
.login-card .login-logo { margin: 0; line-height: 1; }
.login-card .login-logo img { max-width: 220px; width: 100%; height: auto; display: inline-block; }
.login-card h2 {
font-style: italic;
color: var(--wine-primary-dark);
}
/* ---------------- Assinatura ---------------- */
canvas.assinatura {
touch-action: none;
cursor: crosshair;
border: 1px solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
background: #fff;
max-width: 100%;
}
/* ---------------- Utilidades ---------------- */
.btn { font-weight: 500; }
.btn-teal { background: #0d9488; border-color: #0d9488; color: #fff; }
.btn-teal:hover { background: #0f766e; border-color: #0f766e; color: #fff; }
.btn-roxo { background: #6f42c1; border-color: #6f42c1; color: #fff; }
.btn-roxo:hover { background: #5a34a0; border-color: #5a34a0; color: #fff; }
/* Icone de ajuda (?) - fica do lado de rotulos de campo, com o texto explicativo no title */
.ajuda-icone {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px; border-radius: 50%;
background: var(--wine-bg); color: var(--wine-muted);
font-size: .7rem; font-weight: 700; cursor: help;
border: 1px solid var(--bs-border-color); margin-left: .3rem;
font-style: italic; font-family: Georgia, 'Times New Roman', serif;
vertical-align: middle; user-select: none; flex-shrink: 0;
/* 2.8.41: o "i" virou tocavel (celular) - area de toque maior sem
aumentar o desenho, e destaque ao focar/passar o mouse */
position: relative;
}
.ajuda-icone::after { content: ''; position: absolute; inset: -8px; }
.ajuda-icone:hover, .ajuda-icone:focus {
color: #fff; background: var(--wine-primary); border-color: var(--wine-primary); outline: none;
}
/* "i" de campo sem rotulo (so tem o texto de exemplo dentro): fica DENTRO
do campo, no canto direito (ver colocarDentro em ajuda-campos.js) */
.ajuda-dentro { position: relative; }
.ajuda-dentro > .ajuda-icone {
position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
margin: 0; z-index: 3; background: #fff;
}
.ajuda-dentro.ajuda-dentro-topo > .ajuda-icone { top: .6rem; transform: none; }
.ajuda-dentro.ajuda-dentro-select > .ajuda-icone { right: 2.2rem; }
.com-ajuda-dentro { padding-right: 2rem !important; }
.ajuda-dentro-select > .com-ajuda-dentro { padding-right: 3.6rem !important; }
/* caixas coladas (input-group): o "i" fica logo depois, na mesma linha */
.ajuda-solto { margin-left: .35rem; align-self: center; }
/* Botao de evidencia com largura fixa - assim a coluna de acoes fica alinhada
quer o chamado tenha foto ou nao */
.btn-evidencia { min-width: 58px; }
/* ---------------- Busca livre (Equipamento/Fabricante/Modelo) ---------------- */
.busca-livre-wrapper { position: relative; }
[data-multi-select] { position: relative; }
.multi-select-menu {
position: absolute;
top: 100%; left: 0; right: 0;
z-index: 50;
background: #fff;
border: 1px solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
box-shadow: 0 8px 20px rgba(20,10,15,.12);
padding: .5rem;
max-height: 260px;
overflow-y: auto;
}
.multi-select-menu label {
display: block;
padding: .35rem .5rem;
border-radius: 6px;
font-size: .9rem;
cursor: pointer;
}
.multi-select-menu label:hover { background: var(--wine-bg); }
.multi-select-menu input[type=checkbox] { margin-right: .5rem; }
/* ---------------- Aviso de tecnico em pausa ---------------- */
.aviso-pausa {
background: #FDF1E3;
color: #8A5A00;
border-bottom: 1px solid #F3D9A8;
padding: .5rem 1.5rem;
font-size: .85rem;
text-align: center;
}
/* ---------------- Flatpickr (calendarios) - modelo claro e simples ---------------- */
.flatpickr-calendar {
box-shadow: 0 8px 24px rgba(20,10,15,.15);
border-radius: 10px;
border: 1px solid var(--bs-border-color);
}
.flatpickr-day.selected, .flatpickr-day.selected:hover {
background: var(--wine-primary);
border-color: var(--wine-primary);
color: #fff;
}
.flatpickr-day.today { border-color: var(--wine-primary); }
.flatpickr-day:hover { background: var(--wine-bg); }
.flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover { background: var(--wine-bg); }
/* Cabecalho claro (nao mais vermelho-escuro) - texto normal, so o mes/ano em destaque */
.flatpickr-months { padding-top: .4rem; }
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-months .flatpickr-month { color: var(--bs-body-color); font-weight: 600; }
.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { fill: var(--wine-primary); }
span.flatpickr-weekday { color: var(--wine-muted); font-weight: 600; }
/* ---------------- Select buscavel (loja, tecnico etc) ---------------- */
.select-buscavel-wrapper { position: relative; }
.select-buscavel-lista {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 50;
background: #fff;
border: 1px solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
box-shadow: 0 8px 20px rgba(20,10,15,.12);
max-height: 220px;
overflow-y: auto;
margin-top: 2px;
}
.select-buscavel-item {
display: block;
width: 100%;
text-align: left;
padding: .5rem .75rem;
border: none;
background: none;
font-size: .9rem;
}
.select-buscavel-item:hover { background: var(--wine-bg); }
.select-buscavel-item-desabilitada {
text-decoration: line-through;
color: var(--wine-muted);
cursor: not-allowed;
}
.select-buscavel-item-desabilitada:hover { background: none; }
/* ---------------- Linha de tabela clicavel ---------------- */
.linha-clicavel { cursor: pointer; }
.linha-clicavel:hover { background: var(--wine-bg); }
/* ---------------- Timeline de historico ---------------- */
.timeline-item { font-size: .82rem; padding: .4rem 0; border-bottom: 1px dashed var(--bs-border-color); }
.timeline-item:last-child { border-bottom: none; }
.timeline-item .timeline-acao { font-weight: 600; }
.timeline-item .timeline-data { color: var(--wine-muted); font-size: .75rem; }
/* ---------------- Botoes flutuantes (atalhos) ---------------- */
.fab-container {
position: fixed;
right: 1.5rem;
bottom: 1.5rem;
display: flex;
flex-direction: column;
gap: .75rem;
z-index: 900;
}
.fab-btn {
width: 52px;
height: 52px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 18px rgba(20,10,15,.22);
text-decoration: none;
transition: transform .12s ease;
}
.fab-btn:hover { transform: translateY(-2px); text-decoration: none; }
.fab-btn-primary { background: var(--wine-primary); color: #fff; }
.fab-btn-secundario { background: #fff; color: var(--wine-primary); border: 1px solid var(--bs-border-color); }
@media (max-width: 575.98px) {
.fab-container { right: 1rem; bottom: 1rem; }
.fab-btn { width: 48px; height: 48px; }
}
/* Campo de busca dentro do multi-select (Causa do Defeito, Pendente Aguardando) */
.multi-select-busca { margin-bottom: .5rem; }
/* ==========================================================================
BASE RESPONSIVA - celular e tablet (2.5.14)
--------------------------------------------------------------------------
Este bloco fica NO FIM do arquivo de proposito: ele so ACRESCENTA regras
e nao reescreve nada do que ja existia acima. Assim, se algo aqui
incomodar, da pra apagar o bloco inteiro e o sistema volta exatamente ao
que era.
As tres larguras usadas como referencia (as mesmas da bateria de teste):
390px celular (iPhone 12/13/14, Galaxy S)
820px tablet (iPad em pe)
1366px monitor (notebook)
========================================================================== */
/* ---------------------------------------------------------------- 1) TABELA
A regra ".table td, .table th { white-space: nowrap }" la de cima existe
pra tabela nao ficar com palavra quebrada no meio - e isso esta certo no
monitor. Num celular de 390px, porem, a mesma regra faz a tabela ficar
mais larga que a tela: media 552px a mais na de Pendencias e 694px na de
Auditoria.
A saida NAO e apertar a tabela (as colunas se sobrepoem e viram aquela
papa ilegivel). E dar a ela uma CAIXA COM ROLAGEM PROPRIA: a pagina fica
parada e so a tabela desliza pro lado com o dedo. Quem cria essa caixa em
volta de cada tabela e um pedacinho de JavaScript no rodape - assim vale
pras 50 telas de uma vez, e as telas novas ja nascem certas. */
.table-rolavel {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* rolagem com inercia no iPhone */
}
/* A sombrinha na borda direita avisa que tem mais coisa pro lado - sem ela
muita gente nao descobre que da pra arrastar. */
.table-rolavel.tem-mais-a-direita {
background-image: linear-gradient(to left, rgba(20,10,15,.10), rgba(20,10,15,0) 26px);
background-position: right center;
background-repeat: no-repeat;
background-size: 26px 100%;
}
.table-rolavel > .table { margin-bottom: .5rem; }
@media (max-width: 991.98px) {
/* Dentro da caixa, a tabela pode voltar a ter a largura natural dela.
Sem isso, "table-layout: fixed" + "width: 100%" continuariam espremendo
as colunas ate elas se sobreporem - a rolagem existiria e nao serviria
pra nada. O minimo real e calculado por coluna la no rodape. */
.table-rolavel > .table { width: auto; min-width: 100%; }
}
/* ------------------------------------------------------- 2) ALVO DE TOQUE
Dedo nao e ponteiro de mouse. O minimo recomendado e 44px de altura; o
sistema tinha 36 botoes abaixo de 38px so na lista de chamados.
Vale por LARGURA, nao por "pointer: coarse". A primeira versao usava o
pointer, que e o jeito mais correto no papel - so que so aparelho de
verdade reporta isso, entao a bateria de teste nao conseguia PROVAR que a
regra pegou, e regra que o teste nao alcanca e regra que quebra calada.
Abaixo de 992px o menu lateral ja vira gaveta, ou seja, o sistema ja
esta tratando aquilo como tela de toque - a largura basta. */
@media (max-width: 991.98px) {
.btn, .form-control, .form-select, .page-link {
min-height: 44px;
}
.btn-sm, .form-control-sm, .form-select-sm {
min-height: 40px; /* os pequenos continuam menores, mas alcancaveis */
padding-top: .35rem; padding-bottom: .35rem;
}
/* Botao so de icone dentro de tabela: quadrado, nao esticado. */
.btn-sm.py-0 { min-height: 38px; }
/* Barra do topo: sino e perfil tinham 36px. */
.topbar-icon-btn { width: 44px; height: 44px; }
/* CAIXA DE MARCAR: as da lista de chamados sao puro,
sem a classe do Bootstrap, e mediam 13x13px - alvo impossivel de acertar
com o dedo. O desenho cresce um pouco e o ALVO cresce bem mais, por
causa do recheio invisivel em volta. */
.form-check-input,
input[type=checkbox], input[type=radio] {
width: 20px; height: 20px;
/* O recheio aumenta a area de toque; a margem negativa devolve o espaco
pro layout, entao nada se mexe de lugar na tela. */
padding: 10px; margin: -10px;
background-clip: content-box;
}
/* Dentro de um .form-check (radio/checkbox COM rotulo do Bootstrap), a
margem acima apagava a margem negativa que o Bootstrap usa pra encaixar
a caixinha a esquerda do texto (-1.5em) e alinhar na altura (.25em) -
no celular a bolinha ficava acima/fora do rotulo ("Contrato/Projeto",
"Sem identificacao"). Repoe as duas, ja descontando o recheio. (2.8.15) */
.form-check .form-check-input {
margin: calc(.5em - 10px) -10px -10px calc(-1.5em - 10px);
}
/* Caixa de marcar DENTRO de tabela (lista de chamados, "marcar todos"): a
margem negativa da esquerda empurrava a caixinha pra fora da area rolavel
da tabela e ela aparecia cortada ao meio no celular. Nas celulas, a
margem horizontal fica zero - a celula ja tem espaco de sobra. (2.8.21) */
td > input[type=checkbox], th > input[type=checkbox] {
margin-left: 0; margin-right: 0;
}
.form-check { padding-top: .25rem; padding-bottom: .25rem; }
/* LINK DENTRO DE TABELA: sao os numeros de chamado, as lojas, os "ver
mais". Tinham 15 a 24px de altura. Nao da pra deixa-los com 44px - a
linha da tabela dobraria de altura e a lista viraria um rolo sem fim.
O truque e o mesmo das caixas de marcar: recheio pra cima e pra baixo
aumenta a AREA DE TOQUE, e a margem negativa devolve o espaco, entao a
tabela continua com a mesma altura de antes.
(A lista de chamados vai ganhar um formato de cartao proprio pro
celular na proxima entrega - isto aqui e o que melhora ja.) */
.table a, .card-body > a.small, .stat-card a, a.text-decoration-none.d-block {
display: inline-block;
padding-top: .45rem; padding-bottom: .45rem;
margin-top: -.45rem; margin-bottom: -.45rem;
}
}
/* ------------------------------------------- 3) CAMPO QUE DA ZOOM SOZINHO
O Safari do iPhone DA ZOOM na pagina toda quando o dedo toca um campo com
fonte menor que 16px - e depois a pessoa tem que pinçar pra voltar. Era o
caso de 15 campos so na lista de chamados. Subir a fonte pra 16px no
celular resolve na origem; no monitor nada muda. */
@media (max-width: 991.98px) {
.form-control, .form-select, .form-control-sm, .form-select-sm,
input[type=text], input[type=search], input[type=number], input[type=date],
input[type=password], input[type=email], input[type=tel], select, textarea {
font-size: 16px;
}
}
/* --------------------------------------------- 4) O GRUPO DE BOTOES REDONDOS
Tres botoes empilhados no canto de baixo a direita. No celular eles
encolhem e chegam mais perto da borda; a area segura do iPhone (a faixa
da barra de gestos) entra na conta pra eles nao ficarem embaixo dela. */
.fab-container {
padding-bottom: env(safe-area-inset-bottom, 0px);
padding-right: env(safe-area-inset-right, 0px);
}
#fab-sugestao { border: 1px solid var(--bs-border-color); cursor: pointer; padding: 0; }
/* OS BOTOES SAEM DA FRENTE NO CELULAR.
Tres botoes redondos parados em cima do conteudo funcionam bem num
monitor, onde sobra tela. Num celular de 390px eles ficam POR CIMA da
borda direita dos campos - na tela da RAT davam justamente em cima de
"Fabricante" e "Modelo", e o dedo batia no botao em vez do campo.
Entao, no celular:
- rolando pra BAIXO (lendo, preenchendo), eles somem;
- rolando pra CIMA, ou chegando ao topo/fim da pagina, eles voltam;
- com um campo em foco (teclado aberto), eles somem tambem.
No monitor nada disso vale: os botoes ficam sempre onde estao. */
@media (max-width: 991.98px) {
.fab-container {
transition: transform .22s ease, opacity .22s ease;
}
.fab-container.fab-escondido {
transform: translateY(140%);
opacity: 0;
pointer-events: none;
}
}
/* Espaco no fim da pagina pra que o ultimo botao/campo da tela nunca fique
permanentemente embaixo do grupo flutuante. */
.app-content { padding-bottom: 5.5rem; }
@media (max-width: 991.98px) {
.app-content { padding-bottom: 6.5rem; }
}
/* ------------------------------------------------------- 5) AREA SEGURA
iPhone com recorte na tela: em pe sobra a faixa de baixo; deitado, as
laterais. Sem isto o conteudo passa por baixo do recorte. */
@media (max-width: 991.98px) {
.app-topbar { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
.app-content {
padding-left: max(1rem, env(safe-area-inset-left));
padding-right: max(1rem, env(safe-area-inset-right));
}
}
/* ------------------------------------------------------------- 6) TABLET
Entre 768 e 991px o menu lateral ja sai de cena (vira o botao de tres
riscos), entao sobra largura: da pra respirar mais que no celular sem
chegar ao espacamento do monitor. */
@media (min-width: 768px) and (max-width: 991.98px) {
.app-content { padding: 1.5rem 1.5rem 6.5rem; }
.app-sidebar { width: 300px; } /* dedo abre o menu: itens mais largos */
}
/* --------------------------------------------------- 7) JANELAS (modais)
No celular a janela ocupava so um pedaco da tela e o conteudo dela rolava
dentro de uma caixinha. Melhor ela subir do rodape e ocupar a largura
toda - e o formato que todo aplicativo usa. */
@media (max-width: 575.98px) {
.modal-dialog {
margin: .5rem;
max-width: calc(100% - 1rem);
}
.modal-dialog-centered { min-height: calc(100% - 1rem); }
.modal-body { max-height: 70vh; overflow-y: auto; }
.modal-footer .btn { flex: 1 1 auto; } /* botoes lado a lado ocupam a linha */
}
/* ------------------------------------------------- 8) BUSCA NO CELULAR
A busca do topo estava escondida abaixo de 576px - ou seja, no celular
nao havia busca nenhuma. Ela volta, em uma linha propria embaixo da barra
do topo, ocupando a largura toda. */
@media (max-width: 575.98px) {
.app-topbar { flex-wrap: wrap; height: auto; padding-top: .5rem; padding-bottom: .5rem; row-gap: .5rem; }
.topbar-busca { display: block; order: 10; width: 100%; margin-left: 0; }
.topbar-spacer { order: 5; }
/* 2.8.45: sino e perfil DEPOIS do espacador - antes ficavam grudados no
botao de menu, a esquerda, em vez de no canto direito */
.topbar-actions { order: 6; }
}
/* ------------------------------------------------------ 9) TEXTO COMPRIDO
Numero de serie, link e codigo colados sem espaco estouravam a largura da
tela no celular. */
@media (max-width: 991.98px) {
.card-body, .timeline-item, .manual-conteudo { overflow-wrap: break-word; }
/* Comando escrito no meio da frase do manual (o ) nao quebra
sozinho: "cd /opt/wine && node scripts/listar-taxonomia.js" e uma
palavra so pro navegador, e passava 15px da borda no celular. Foi a
bateria que pegou - o texto novo do manual e que trouxe o caso. */
.manual-conteudo :not(pre) > code { overflow-wrap: anywhere; word-break: break-word; }
/* O bloco de comando (o