/* ==========================================================================
   Sistema de Cautela — SOBRASA / LifeSaving Club
   Fundo branco, marinho estrutural, laranja para ação, azul da água nos dados.
   Mobile primeiro: navegação inferior, alvos de toque de 48px, uma coluna.
   ========================================================================== */

@font-face {
  font-family: 'Jakarta';
  src: url('/fontes/jakarta-latin.woff2') format('woff2');
  font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: 'Jakarta';
  src: url('/fontes/jakarta-latin-ext.woff2') format('woff2');
  font-weight: 200 800; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+2020-20AB;
}

:root {
  /* Marca SOBRASA */
  --marinho: #2B2C6B;
  --marinho-fraco: #5a5c96;
  --laranja: #F07E22;
  --laranja-escuro: #d66a12;
  --laranja-fraco: #FFF1E4;
  --agua: #29ABE2;
  --agua-fraca: #E8F6FD;
  --agua-clara: #A6DCF2;

  /* Superfícies */
  --branco: #ffffff;
  --nevoa: #F6F9FC;
  --borda: #E4EAF2;
  --tinta: #1F2144;
  --tinta-fraca: #6E7595;

  /* Estados */
  --perigo: #D0342C;
  --perigo-fraco: #FDECEA;
  --ok: #17876D;
  --ok-fraco: #E3F5F0;

  --r: 14px;
  --sombra: 0 1px 2px rgba(43, 44, 107, .05), 0 6px 20px rgba(43, 44, 107, .06);
  --barra-inferior: 0px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--branco);
  color: var(--tinta);
  font-family: 'Jakarta', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--barra-inferior) + env(safe-area-inset-bottom));
}

/* ------------------------------------------------------------- cabeçalho */

header {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px 12px;
  background: var(--branco);
  position: relative;
}
header::after {                       /* faixa de água do logo */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--laranja) 0 34%, var(--agua) 34% 67%, var(--agua-clara) 67%);
}
.marca { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; }
.marca img { height: 66px; width: auto; flex: 0 0 auto; }
.marca h1 {
  margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.03em;
  color: var(--marinho); line-height: 1.1;
}
.marca small {
  display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-fraca);
}
.chip-usuario {
  flex: 0 0 auto; display: flex; align-items: center; gap: 9px; cursor: pointer;
  background: var(--nevoa); border: 1.5px solid var(--borda); border-radius: 999px;
  padding: 6px 14px 6px 6px; font-family: inherit; font-size: 14px; font-weight: 700;
  color: var(--marinho); min-height: 44px;
}
.chip-usuario:hover { border-color: var(--agua); }
.chip-usuario #usuario-inicial {
  width: 30px; height: 30px; border-radius: 50%; background: var(--marinho); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 800;
}

/* ---------------------------------------------------------- navegação topo */

#abas {
  display: flex; gap: 2px; padding: 10px 16px;
  background: var(--branco); border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; z-index: 20; overflow-x: auto; scrollbar-width: none;
}
#abas::-webkit-scrollbar { display: none; }
#abas button {
  flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
  color: var(--tinta-fraca); font-family: inherit; font-size: 15px; font-weight: 600;
  padding: 10px 16px; border-radius: 999px; display: flex; align-items: center; gap: 7px;
  transition: background .15s, color .15s;
}
#abas button svg { width: 18px; height: 18px; }
#abas button:hover { background: var(--nevoa); color: var(--marinho); }
#abas button.ativa { background: var(--marinho); color: #fff; }

/* -------------------------------------------------------- navegação mobile */

.nav-inferior { display: none; }

@media (max-width: 720px) {
  :root { --barra-inferior: 68px; }
  header { padding: 12px 16px 10px; }
  .marca img { height: 54px; }
  .marca h1 { font-size: 18px; }
  .marca small { display: none; }
  /* no celular sobra pouca largura: fica so a inicial do usuario */
  .chip-usuario { padding: 6px; }
  .chip-usuario #usuario-nome { display: none; }
  #abas { display: none; }

  .nav-inferior {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    align-items: stretch; background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px);
    border-top: 1px solid var(--borda); box-shadow: 0 -2px 16px rgba(31, 33, 68, .06);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .nav-inferior button {
    flex: 1; min-width: 0; border: 0; background: transparent; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 2px; color: var(--tinta-fraca); font-family: inherit;
    font-size: 10.5px; font-weight: 600; border-radius: 10px;
  }
  .nav-inferior button svg { width: 22px; height: 22px; }
  .nav-inferior button.ativa { color: var(--laranja); }
}

/* ------------------------------------------------------------------ layout */

main { padding: 18px 20px 40px; max-width: 940px; margin: 0 auto; }
@media (max-width: 720px) { main { padding: 16px 16px 32px; } }

.aba { display: none; }
.aba.ativa { display: block; animation: surge .18s ease-out; }
@keyframes surge { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

h2 {
  font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinta-fraca); margin: 26px 0 12px;
}
h2:first-child { margin-top: 0; }
h3 { font-size: 15px; font-weight: 700; color: var(--marinho); margin: 20px 0 10px; }

.linha { display: flex; gap: 12px; flex-wrap: wrap; }
.linha > label { flex: 1 1 220px; }
.linha-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.linha-topo > div { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- campos */

label {
  display: block; margin-bottom: 14px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tinta-fraca);
}
input, select, textarea {
  width: 100%; padding: 13px 14px; font-family: inherit; font-size: 16px;
  color: var(--tinta); background: var(--branco);
  border: 1.5px solid var(--borda); border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
label input, label select, label textarea { margin-top: 6px; font-weight: 500; text-transform: none; letter-spacing: 0; }
input::placeholder { color: #a8afc9; }
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--agua); box-shadow: 0 0 0 4px var(--agua-fraca);
}
select {
  appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236E7595' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; padding-right: 38px;
}

/* --------------------------------------------------------------- botões */

button.principal, button.secundario, button.perigo {
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  padding: 13px 20px; border-radius: 12px; border: 1.5px solid transparent;
  min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s, border-color .15s, transform .08s;
}
button.principal { background: var(--laranja); color: #fff; box-shadow: 0 2px 8px rgba(240, 126, 34, .28); }
button.principal:hover { background: var(--laranja-escuro); }
button.secundario { background: var(--branco); color: var(--marinho); border-color: var(--borda); }
button.secundario:hover { border-color: var(--marinho-fraco); background: var(--nevoa); }
button.principal:active, button.secundario:active { transform: scale(.98); }
button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* Ação principal fixa ao pé da tela, alcançável com o polegar. */
.rodape-acao {
  position: sticky; bottom: calc(var(--barra-inferior) + env(safe-area-inset-bottom)); z-index: 10;
  padding: 14px 0 6px; margin-top: 24px;
  background: var(--branco); border-top: 1px solid var(--borda);
}
.rodape-acao button { width: 100%; font-size: 16px; padding: 16px; }

/* ---------------------------------------------------------------- busca */

.barra-busca { display: flex; gap: 10px; margin: 14px 0 16px; }
.campo-busca { position: relative; flex: 1; }
.campo-busca svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--tinta-fraca); pointer-events: none;
}
.campo-busca input { padding-left: 42px; background: var(--nevoa); border-color: transparent; }
.campo-busca input:focus { background: var(--branco); }
.barra-busca button { flex: 0 0 auto; padding: 13px 16px; white-space: nowrap; }

/* --------------------------------------------------------------- cartões */

.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
@media (max-width: 720px) { .cartoes { grid-template-columns: 1fr 1fr; gap: 10px; } }
.cartao {
  background: var(--branco); border: 1.5px solid var(--borda); border-radius: var(--r);
  padding: 16px; position: relative; overflow: hidden;
}
.cartao::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--agua); }
.cartao b {
  display: block; font-size: 32px; font-weight: 800; line-height: 1;
  letter-spacing: -.03em; color: var(--marinho);
}
.cartao span {
  display: block; margin-top: 6px; font-size: 12px; font-weight: 600;
  line-height: 1.3; color: var(--tinta-fraca);
}
.cartao.destaque::before { background: var(--laranja); }
.cartao.perigo::before { background: var(--perigo); }
.cartao.perigo b { color: var(--perigo); }

/* ---------------------------------------------------------------- listas */

.lista { display: flex; flex-direction: column; gap: 10px; }
.item {
  background: var(--branco); border: 1.5px solid var(--borda); border-radius: var(--r);
  padding: 14px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  transition: border-color .15s, box-shadow .15s;
}
.item:hover { border-color: var(--agua-clara); box-shadow: var(--sombra); }
.item .corpo { flex: 1 1 220px; min-width: 0; }
.item .titulo { font-weight: 700; color: var(--marinho); font-size: 15.5px; letter-spacing: -.01em; }
.item .detalhe { font-size: 13px; color: var(--tinta-fraca); margin-top: 3px; }
.item .detalhe b { color: var(--tinta); font-weight: 700; }
.item .acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.item .acoes button { padding: 10px 16px; font-size: 14px; min-height: 44px; }
@media (max-width: 480px) {
  .item .acoes { width: 100%; }
  .item .acoes button { flex: 1; }
}
.item.atrasado { border-color: var(--perigo); background: var(--perigo-fraco); }
.item.clicavel { cursor: pointer; }
.item.inativo { opacity: .55; }

.etiq {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .03em;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--agua-fraca); color: #0d6a94;
}
.etiq.vermelha { background: #fff; color: var(--perigo); border: 1.5px solid var(--perigo); }
.etiq.laranja  { background: var(--laranja-fraco); color: var(--laranja-escuro); }
.etiq.verde    { background: var(--ok-fraco); color: var(--ok); }

.vazio {
  color: var(--tinta-fraca); font-size: 14px; padding: 32px 16px; text-align: center;
  background: var(--nevoa); border-radius: var(--r); margin: 0;
}

.sugestoes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.sugestoes .item { padding: 12px 16px; cursor: pointer; }
.sugestoes .item:hover { border-color: var(--laranja); }

.kits { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 4px 0 16px; }
.kits button { padding: 9px 16px; border-radius: 999px; min-height: 42px; font-size: 14px; }
.kits .rotulo { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-fraca); }

/* ---------------------------------------------------------------- modais */

.modal {
  position: fixed; inset: 0; z-index: 50; padding: 20px;
  background: rgba(31, 33, 68, .55); backdrop-filter: blur(3px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.modal.oculto { display: none; }
.caixa {
  background: var(--branco); border-radius: 18px; padding: 24px;
  width: min(100%, 480px); max-height: 88vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(31, 33, 68, .3);
}
.caixa h3 { margin: 0 0 4px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.caixa > .detalhe { color: var(--tinta-fraca); font-size: 14px; margin: 0 0 18px; }
.caixa .linha-botoes { display: flex; gap: 10px; margin-top: 20px; }
.caixa .linha-botoes button { flex: 1; }
@media (max-width: 720px) {
  .modal { padding: 0; justify-content: flex-end; }
  .caixa { width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); }
}

/* ----------------------------------------------------------------- aviso */

.aviso {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--barra-inferior) + 20px + env(safe-area-inset-bottom));
  background: var(--marinho); color: #fff; font-size: 14px; font-weight: 600;
  padding: 14px 20px; border-radius: 12px; z-index: 60; max-width: calc(100vw - 32px);
  box-shadow: 0 8px 30px rgba(31, 33, 68, .35);
}
.aviso.erro { background: var(--perigo); }
.aviso.oculto { display: none; }

.oculto { display: none !important; }