/* GLP Gás Medição Individualizada — mobile first.
   Base = celular (≥ 320 px). Telas maiores ganham colunas progressivamente (@media min-width). */
:root {
  --navy: #1f2a5c;
  --navy-2: #2b3a7a;
  --azul: #5181b5;
  --azul-escuro: #3d6696;
  --azul-claro: #e8f0f9;
  --verde: #9dc443;
  --verde-escuro: #5f7d1c;
  --verde-claro: #f1f8e3;
  --vermelho: #c93c3c;
  --vermelho-claro: #fdecec;
  --laranja-claro: #fff4e5;
  --laranja: #a25a0b;
  --fundo: #f4f6fa;
  --card: #ffffff;
  --texto: #1f2a5c;
  --texto-2: #56617f;
  --borda: #dfe5ef;
  --raio: 12px;
  --toque: 44px;
  --sombra: 0 1px 2px rgba(31, 42, 92, 0.06), 0 4px 14px rgba(31, 42, 92, 0.07);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--texto);
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fundo); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; font-size: 16px; line-height: 1.45; }
[hidden] { display: none !important; }
a { color: var(--azul-escuro); }
h1, h2, h3 { margin: 0 0 12px; line-height: 1.2; }
h1 { font-size: 24px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
p { margin: 0 0 12px; }
.muted { color: var(--texto-2); }
.small { font-size: 14px; }
.mt { margin-top: 14px; }
.codigo { font-family: Consolas, "Courier New", monospace; font-weight: 600; letter-spacing: 0.5px; }
img { max-width: 100%; }

/* ---------------------------------------------------------------- topo */
.topo { background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 20; }
.topo-inner { max-width: 1200px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 10px; min-height: 56px; }
.marca { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; min-width: 0; flex: 1; }
.marca img { height: 34px; width: auto; flex: none; }
.marca-nome { display: flex; flex-direction: column; min-width: 0; }
.marca-nome strong { font-size: 15px; line-height: 1.15; }
.marca-nome span { display: none; font-size: 12px; color: #c9d3ea; }
.topo-user { display: flex; align-items: center; gap: 8px; font-size: 14px; flex: none; }
.topo-user .nome { display: none; }
.topo-user .perfil { display: none; background: var(--verde); color: var(--navy); border-radius: 999px; padding: 2px 10px; font-weight: 700; font-size: 11px; text-transform: uppercase; }
.faixa { height: 4px; background: linear-gradient(90deg, var(--verde) 0 35%, var(--azul) 35% 100%); }

main { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 16px 16px 48px; }
.rodape { text-align: center; color: var(--texto-2); font-size: 12px; padding: 16px; }

/* ------------------------------------------------------------- abas (navegação) */
.tabs { display: flex; gap: 6px; margin: 0 -16px 16px; padding: 0 16px 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; min-height: 40px; border: 1px solid var(--borda); background: #fff; border-radius: 999px; padding: 8px 14px;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--texto-2); cursor: pointer; white-space: nowrap;
}
.tab[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.tab .contador { background: var(--vermelho); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; margin-left: 4px; }

/* --------------------------------------------------------------- cards */
.card { background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 16px; margin-bottom: 16px; }
.card-titulo { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.card-titulo h2 { margin: 0; }
.grid { display: grid; gap: 14px; }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
.kpi { background: var(--card); border: 1px solid var(--borda); border-left: 4px solid var(--azul); border-radius: var(--raio); padding: 12px; min-width: 0; }
.kpi strong { display: block; font-size: 20px; overflow-wrap: anywhere; }
.kpi span { color: var(--texto-2); font-size: 13px; }
.kpi.verde { border-left-color: var(--verde); }
.kpi.vermelho { border-left-color: var(--vermelho); }
.kpi.roxo { border-left-color: #6b4fbb; }

/* ---------------------------------------------------------------- hero */
.hero { display: grid; gap: 20px; }
/* celular: login primeiro; a partir do tablet, login sempre à direita */
.hero #acesso { order: -1; }
.hero-texto h1 { font-size: 25px; }
.hero-texto .destaque { color: var(--azul-escuro); }

/* -------------------------------------------------------------- forms */
form .campos { display: grid; grid-template-columns: 1fr; gap: 12px; }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
label { font-size: 14px; font-weight: 600; color: var(--texto); }
label .opc { font-weight: 400; color: var(--texto-2); }
input, select, textarea {
  font: inherit; font-size: 16px; color: var(--texto); background: #fff; border: 1px solid #c3cde0; border-radius: 10px;
  padding: 10px 12px; width: 100%; min-height: var(--toque);
}
textarea { min-height: 96px; resize: vertical; }
input[type="file"] { padding: 8px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--azul); outline-offset: 0; border-color: var(--azul); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--vermelho); background: var(--vermelho-claro); }
.erro-campo { color: var(--vermelho); font-size: 13px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 15px; }
.check input { width: 22px; min-height: 22px; height: 22px; margin-top: 1px; flex: none; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; align-items: center; }
fieldset { border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px; margin: 0 0 14px; min-width: 0; }
legend { font-weight: 700; padding: 0 6px; }

.btn {
  font: inherit; font-size: 15px; font-weight: 600; border: 1px solid transparent; border-radius: 10px; padding: 10px 16px;
  min-height: var(--toque); cursor: pointer; background: var(--azul-escuro); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; text-align: center;
}
.btn:hover { filter: brightness(0.95); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn.navy { background: var(--navy); }
.btn.verde { background: var(--verde); color: var(--navy); }
.btn.vermelho { background: var(--vermelho); }
.btn.contorno { background: #fff; color: var(--navy); border-color: #c3cde0; }
.btn.link { background: none; color: #fff; border-color: rgba(255, 255, 255, 0.45); min-height: 36px; padding: 6px 12px; font-size: 14px; }
.btn.pequeno { min-height: 38px; padding: 6px 12px; font-size: 14px; }
.btn.grande, .btn.bloco { width: 100%; }
.btn.grande { min-height: 52px; font-size: 17px; }

/* ------------------------------------------------------------- tabelas
   Celular: cada linha vira um cartão com rótulo + valor. Desktop: tabela normal. */
.tabela-wrap { border: 1px solid var(--borda); border-radius: var(--raio); background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
thead { display: none; }
tr { display: block; padding: 10px 12px; border-bottom: 1px solid var(--borda); }
tr:last-child { border-bottom: none; }
td { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; padding: 4px 0; text-align: right; overflow-wrap: anywhere; }
td::before { content: attr(data-label); font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--texto-2); text-align: left; flex: none; max-width: 45%; padding-top: 2px; }
td[data-label=""]::before { display: none; }
td[data-label=""] { justify-content: flex-end; }
td .acoes { margin-top: 4px; justify-content: flex-end; }
.vazio { padding: 22px; text-align: center; color: var(--texto-2); }

.badge { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; background: #edf0f6; color: var(--texto-2); white-space: nowrap; }
.badge.ok { background: var(--verde-claro); color: var(--verde-escuro); }
.badge.alerta { background: var(--laranja-claro); color: var(--laranja); }
.badge.erro { background: var(--vermelho-claro); color: var(--vermelho); }
.badge.info { background: var(--azul-claro); color: var(--azul-escuro); }

/* ------------------------------------------------------ etapas / timeline */
.etapas { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.etapas li { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--texto-2); }
.etapas li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #c3cde0; flex: none; }
.etapas li.feito { color: var(--verde-escuro); font-weight: 600; }
.etapas li.feito::before { background: var(--verde); border-color: var(--verde); }
.etapas li.atual { color: var(--navy); font-weight: 700; }
.etapas li.atual::before { background: var(--azul); border-color: var(--azul); }

.resumo { display: grid; grid-template-columns: 1fr; gap: 2px 16px; margin: 0; }
.resumo dt { color: var(--texto-2); font-size: 13px; margin-top: 6px; }
.resumo dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.aviso { border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 15px; background: var(--azul-claro); border-left: 4px solid var(--azul); }
.aviso.ok { background: var(--verde-claro); border-left-color: var(--verde); }
.aviso.erro { background: var(--vermelho-claro); border-left-color: var(--vermelho); }
.aviso.alerta { background: var(--laranja-claro); border-left-color: #e8862a; }

/* medidor de nível do tanque */
.nivel { height: 14px; border-radius: 999px; background: #e6ebf3; overflow: hidden; margin: 6px 0; }
.nivel > span { display: block; height: 100%; background: var(--verde); border-radius: 999px; }
.nivel.baixo > span { background: var(--vermelho); }

/* ------------------------------------------------------------- toasts */
#toasts { position: fixed; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 8px; z-index: 60; }
.toast { background: var(--navy); color: #fff; padding: 12px 16px; border-radius: 10px; box-shadow: var(--sombra); font-size: 15px; border-left: 5px solid var(--verde); }
.toast.erro { border-left-color: #ff8a8a; }

/* ------------------------------------------------------------- dialog: tela cheia no celular */
dialog { border: none; padding: 0; margin: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; color: var(--texto); background: var(--fundo); }
dialog::backdrop { background: rgba(31, 42, 92, 0.5); }
dialog .dlg-cab { background: var(--navy); color: #fff; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; position: sticky; top: 0; }
dialog .dlg-cab h2 { margin: 0; font-size: 17px; }
dialog .dlg-corpo { padding: 16px; overflow: auto; max-height: calc(100dvh - 60px); }

/* ------------------------------------------------------ telas de campo */
.leitura-input { font-size: 28px; font-weight: 700; text-align: center; letter-spacing: 1px; padding: 12px; min-height: 60px; }
.relogio-card { border: 2px solid var(--azul); border-radius: var(--raio); padding: 14px; background: var(--azul-claro); margin-bottom: 14px; }
.relogio-card .cod { font-family: Consolas, "Courier New", monospace; font-size: 26px; font-weight: 700; letter-spacing: 2px; overflow-wrap: anywhere; }
.relogio-card .partes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.relogio-card .partes span { background: #fff; border-radius: 6px; padding: 2px 8px; font-size: 13px; }
.gps { font-size: 14px; }
.lista-opcoes { display: grid; gap: 8px; }
.opcao {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 10px 14px;
  background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); font: inherit; color: var(--texto); text-align: left; cursor: pointer;
}
.opcao:hover, .opcao:focus { border-color: var(--azul); }
.grade-aptos { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.grade-aptos .btn { padding: 10px 6px; }

/* ======================================================= telas maiores */
@media (min-width: 640px) {
  .hero { grid-template-columns: 1fr minmax(320px, 420px); align-items: center; }
  .hero #acesso { order: 0; }
  h1 { font-size: 26px; }
  .marca img { height: 40px; }
  .marca-nome strong { font-size: 17px; }
  .topo-user .nome { display: inline; }
  .topo-user .perfil { display: inline-block; }
  .marca-nome span { display: block; }
  form .campos { grid-template-columns: repeat(2, 1fr); }
  .campo.largo { grid-column: 1 / -1; }
  .card { padding: 20px; }
  .card-titulo { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .resumo { grid-template-columns: max-content 1fr; }
  .resumo dt { margin-top: 0; }
  .btn.bloco { width: auto; }
  #toasts { left: auto; right: 16px; bottom: 16px; max-width: 420px; }
  dialog { width: min(680px, calc(100vw - 32px)); height: auto; max-height: calc(100dvh - 48px); margin: auto; border-radius: var(--raio); background: #fff; box-shadow: 0 20px 60px rgba(31, 42, 92, 0.3); }
  dialog .dlg-corpo { max-height: calc(100dvh - 120px); padding: 20px; }
}

@media (min-width: 900px) {
  main { padding: 24px 20px 56px; }
  .hero { grid-template-columns: 1fr minmax(360px, 440px); gap: 48px; align-items: center; min-height: 60vh; }
  .hero #acesso { order: 0; }
  .hero-texto h1 { font-size: 30px; }
  form .campos { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .tabs { margin: 0 0 18px; padding: 0; flex-wrap: wrap; overflow: visible; }

  /* tabela tradicional a partir do desktop (operador/admin) */
  .tabela-wrap { overflow-x: auto; }
  table { font-size: 14px; }
  thead { display: table-header-group; }
  tr { display: table-row; padding: 0; border: none; }
  th, td { display: table-cell; text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--borda); vertical-align: top; }
  td::before { display: none; }
  td .acoes { margin-top: 0; justify-content: flex-start; }
  th { background: #f7f9fc; font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--texto-2); white-space: nowrap; }
  tr:last-child td { border-bottom: none; }
  td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
}

/* larguras da barra de nível em passos de 5% (sem style inline, compatível com a CSP) */
.nivel > span.w-0 { width: 0%; }
.nivel > span.w-5 { width: 5%; }
.nivel > span.w-10 { width: 10%; }
.nivel > span.w-15 { width: 15%; }
.nivel > span.w-20 { width: 20%; }
.nivel > span.w-25 { width: 25%; }
.nivel > span.w-30 { width: 30%; }
.nivel > span.w-35 { width: 35%; }
.nivel > span.w-40 { width: 40%; }
.nivel > span.w-45 { width: 45%; }
.nivel > span.w-50 { width: 50%; }
.nivel > span.w-55 { width: 55%; }
.nivel > span.w-60 { width: 60%; }
.nivel > span.w-65 { width: 65%; }
.nivel > span.w-70 { width: 70%; }
.nivel > span.w-75 { width: 75%; }
.nivel > span.w-80 { width: 80%; }
.nivel > span.w-85 { width: 85%; }
.nivel > span.w-90 { width: 90%; }
.nivel > span.w-95 { width: 95%; }
.nivel > span.w-100 { width: 100%; }

/* foto do relógio */
.rotulo-campo { font-size: 14px; font-weight: 600; }
.foto-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.foto-previa { display: block; width: 100%; max-height: 260px; object-fit: contain; border-radius: var(--raio); border: 1px solid var(--borda); background: #fff; margin-top: 8px; }
.foto-previa[hidden] { display: none; }
.foto-grande { display: block; width: 100%; max-height: 75vh; object-fit: contain; border-radius: var(--raio); background: #fff; }

/* aviso de atualização em tempo real */
.barra-atualizacao { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 55; display: flex; gap: 12px; align-items: center; justify-content: space-between;
  background: var(--navy); color: #fff; border-radius: 10px; padding: 10px 14px; box-shadow: var(--sombra); font-size: 15px; }
@media (min-width: 640px) { .barra-atualizacao { left: auto; right: 16px; max-width: 420px; } }
.notificacao { border-left: 4px solid var(--azul); padding: 10px 12px; background: #fff; border-radius: 8px; margin-bottom: 8px; }
.notificacao.nova { border-left-color: var(--verde); background: var(--verde-claro); }
.notificacao .quando { font-size: 12px; color: var(--texto-2); }

/* atendimento (WhatsApp e central) na página de login */
.atendimento { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--borda); text-align: center; }
.atendimento-titulo { font-size: 16px; margin-bottom: 10px; }
.btn.whatsapp { background: #1f8f4e; color: #fff; }
.btn.whatsapp:hover { filter: brightness(0.95); }
.atendimento-info { margin: 10px 0 0; font-size: 15px; }
.atendimento-info a { color: var(--navy); text-decoration: none; }

/* histórico de alterações (admin) */
.mudancas { margin: 0; padding-left: 18px; font-size: 14px; overflow-wrap: anywhere; }
.mudancas li { margin: 2px 0; }

/* câmera dentro da página (foto do relógio sem trocar de app) */
.camera { display: grid; gap: 10px; }
.camera-video { width: 100%; max-height: 70dvh; background: #000; border-radius: 10px; object-fit: contain; }
.link-acao { display: inline-flex; align-items: center; min-height: var(--toque); color: var(--azul); text-decoration: underline; font-size: 14px; cursor: pointer; }

/* olho para mostrar/ocultar a senha */
.senha-caixa { position: relative; display: block; }
.senha-caixa > input { width: 100%; padding-right: 52px; }
.olho-senha { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: var(--toque); height: var(--toque); display: grid; place-items: center; border: 0; background: none; color: var(--texto-2); cursor: pointer; border-radius: 8px; }
.olho-senha:hover { color: var(--navy); }
.olho-senha:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
.olho-senha svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }