:root {
    --fundo: #0D0D0D;
    --superficie: #1D1D1D;
    --elevada: #212121;
    --borda: #303030;
    --texto: #FFFFFF;
    --secundario: #9A9A9A;
    --hover: #B7B7B7;
    --acento: #7E65F8;
    --ambar: #E0AB03;
    --erro: #E5484D;
    --sucesso: #30A46C;
    --acao-fundo: #FFFFFF;
    --acao-texto: #0D0D0D;
    --raio-card: 16px;
    --raio-painel: 12px;
    --raio-botao: 10px;
    --raio-pilula: 999px;
    --fonte: 'Outfit', system-ui, -apple-system, sans-serif;
}

[data-tema="claro"] {
    --fundo: #F7F7F7;
    --superficie: #FFFFFF;
    --elevada: #F0F0F0;
    --borda: #E4E4E4;
    --texto: #0D0D0D;
    --secundario: #5C5C5C;
    --hover: #303030;
    --acento: #6247E8;
    --ambar: #9C6E00;
    --erro: #C6383E;
    --sucesso: #1F7A50;
    --acao-fundo: #0D0D0D;
    --acao-texto: #FFFFFF;
}

* { box-sizing: border-box; min-width: 0; }
html { -webkit-tap-highlight-color: transparent; }
body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: var(--fonte);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; max-width: 100%; }
h1, h2, h3, p, .parada-titulo, .card-titulo, .texto-apoio, .texto-secundario, textarea {
    overflow-wrap: break-word;
    word-break: break-word;
}
.font-num, input, .valor-grande, .parada-hora, .lista-gastos-valor, .lista-barras-valor, .pilula-dia-gasto, .pilula-dia-numero {
    font-variant-numeric: tabular-nums;
}

:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
}

button:disabled { opacity: 0.5; cursor: not-allowed; }
#banner-offline { position: sticky; top: 0; z-index: 15; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* --- Topo --- */
.topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--borda);
    position: sticky;
    top: 0;
    background: var(--fundo);
    z-index: 20;
}
.topo-marca {
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.02em;
}
.topo-acoes { display: flex; gap: 8px; align-items: center; }
.topo-usuario {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 480px) {
    .topo-usuario { display: none; }
}

.conteudo { max-width: 1200px; margin: 0 auto; padding: 20px 20px 100px; }
.conteudo-sem-nav { max-width: 420px; padding-top: 12vh; }

/* --- Tipografia utilitária --- */
.rotulo-mini {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--secundario);
}
.titulo-secao { font-size: 24px; font-weight: 600; margin: 4px 0 0; letter-spacing: -0.01em; }
.card-titulo { font-size: 17px; font-weight: 600; margin: 0; }
.texto-secundario { color: var(--secundario); margin: 2px 0; }
.texto-apoio { font-size: 13px; color: #9A9A9A; }
[data-tema="claro"] .texto-apoio { color: #6B6B6B; }
.valor-grande { font-size: 40px; font-weight: 700; margin: 8px 0 4px; letter-spacing: -0.02em; }
.valor-unidade, .indicador-unidade { font-size: 15px; font-weight: 400; color: var(--secundario); margin-left: 4px; }

/* --- Botões --- */
.btn-primario {
    background: var(--acao-fundo);
    color: var(--acao-texto);
    border: none;
    border-radius: var(--raio-botao);
    padding: 12px 20px;
    font-weight: 600;
    font-size: 15px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-secundario {
    background: transparent;
    color: var(--texto);
    border: 1px solid var(--borda);
    border-radius: var(--raio-botao);
    padding: 11px 18px;
    font-weight: 500;
    font-size: 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-secundario:hover { border-color: var(--hover); }
.btn-pequeno { min-height: 36px; padding: 8px 14px; font-size: 13px; }
.btn-bloco { width: 100%; }
.btn-icone {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #121316;
    border: 1px solid var(--borda);
    color: var(--secundario);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
[data-tema="claro"] .btn-icone { background: #FFFFFF; }
.btn-icone svg { width: 17px; height: 17px; }
.btn-icone:hover { color: var(--texto); }
.btn-icone-pequeno { width: 24px; height: 24px; font-size: 14px; line-height: 1; }
.link-acao { font-size: 13px; color: var(--secundario); border: none; background: none; padding: 0; }
.link-acao:hover { color: var(--texto); }
.link-acao-perigo:hover { color: var(--erro); }
.link-mapa { font-size: 13px; color: var(--acento); }

/* --- Cards --- */
.card, .cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-card);
    overflow: hidden;
}
.cartao { padding: 18px; }
.painel { background: var(--elevada); }

.pagina-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }

.grade-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card-viagem { display: flex; flex-direction: column; }
.card-viagem-link { display: block; }
.card-viagem-capa { height: 140px; background-size: cover; background-position: center; background-color: var(--elevada); }
.card-viagem-capa-vazia { background: linear-gradient(135deg, var(--elevada), var(--superficie)); }
.card-viagem-corpo { padding: 16px; }
.card-viagem-acoes { display: flex; gap: 8px; padding: 0 16px 16px; }

.estado-vazio { text-align: center; padding: 60px 20px; color: var(--secundario); }
.estado-vazio p { margin-bottom: 16px; }
.coluna-linha-tempo .estado-vazio { padding: 32px 20px; }

/* --- Segmentado --- */
.segmentado { display: inline-flex; background: #181818; border-radius: var(--raio-pilula); padding: 4px; gap: 2px; }
[data-tema="claro"] .segmentado { background: #ECECEC; }
.segmentado-opcao {
    border: none; background: transparent; color: var(--secundario);
    padding: 8px 16px; border-radius: var(--raio-pilula); font-size: 13px; font-weight: 500;
    min-height: 36px;
}
.segmentado-opcao.ativa { background: #1C1C1C; color: #F2F2F2; }
[data-tema="claro"] .segmentado-opcao.ativa { background: #FFFFFF; color: #0D0D0D; }

/* --- Barra de progresso --- */
.barra-progresso { height: 6px; border-radius: var(--raio-pilula); background: var(--elevada); overflow: hidden; }
.barra-progresso-preenchimento { height: 100%; background: var(--acento); border-radius: var(--raio-pilula); }
.barra-progresso-erro .barra-progresso-preenchimento { background: var(--erro); }

/* --- Pílula de status --- */
.pilula-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--secundario); }
.ponto-status { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.ponto-ambar { background: var(--ambar); }
.ponto-verde { background: var(--sucesso); }
.ponto-erro { background: var(--erro); }

/* --- Selo de categoria --- */
.selo-categoria {
    display: inline-flex; align-items: center; font-size: 11px; font-weight: 600;
    padding: 3px 10px; border-radius: var(--raio-pilula);
    color: var(--cor-cat, var(--secundario));
    border: 1px solid var(--cor-cat, var(--borda));
    background: color-mix(in srgb, var(--cor-cat, var(--secundario)) 14%, transparent);
}

/* --- Formulários --- */
.form-padrao, .form-auth { display: flex; flex-direction: column; gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.campo-linha { display: flex; gap: 12px; }
@media (max-width: 480px) {
    .campo-linha { flex-direction: column; }
}
.campo-linha-fim { align-items: center; }
.campo-check { flex-direction: row; align-items: center; gap: 10px; }
.campo-check input { width: 20px; height: 20px; }
input[type=text], input[type=date], input[type=time], input[type=number], input[type=password],
input[type=url], input[type=email], select, textarea {
    background: var(--elevada);
    border: 1px solid var(--borda);
    border-radius: var(--raio-painel);
    color: var(--texto);
    padding: 12px 14px;
    font-size: 15px;
    min-height: 44px;
    width: 100%;
}
input[type=color] { width: 44px; height: 44px; padding: 3px; border-radius: 50%; border: 1px solid var(--borda); background: var(--elevada); overflow: hidden; }
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; }
input[type=color]::-webkit-color-swatch { border: none; border-radius: 50%; }
input[type=color]::-moz-color-swatch { border: none; border-radius: 50%; }
textarea { min-height: 80px; resize: vertical; }
.textarea-codigo { font-family: ui-monospace, monospace; font-size: 13px; }
input[type=file] { color: var(--secundario); }
.form-acoes { display: flex; gap: 12px; margin-top: 4px; }

.tela-auth { max-width: 380px; margin: 0 auto; padding: 0 20px; }
.tela-auth-titulo { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 8px; }
.tela-auth-sub { color: var(--secundario); margin-bottom: 24px; }

.aviso { padding: 12px 16px; border-radius: var(--raio-painel); margin-bottom: 16px; font-size: 14px; background: var(--elevada); border: 1px solid var(--borda); }
.aviso-erro { color: var(--erro); border-color: var(--erro); }
.aviso-ambar { color: var(--ambar); border-color: var(--ambar); }
.aviso-sucesso { color: var(--sucesso); border-color: var(--sucesso); }

/* --- Cabeçalho da viagem --- */
.cabecalho-viagem {
    position: relative;
    border-radius: var(--raio-card);
    background-size: cover;
    background-position: center;
    padding: 20px;
    margin-bottom: 16px;
    color: #fff;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.cabecalho-viagem-sem-capa {
    background: var(--superficie); border: 1px solid var(--borda); color: var(--texto);
    justify-content: flex-start;
}
/* A barra de ações fica sempre no fluxo normal (nunca sobreposta ao título) —
   com foto de capa, o degradê abaixo garante contraste; sem capa, ela só some
   no fundo sólido do card. */
.cabecalho-viagem-topo {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 10px;
    margin-bottom: 20px;
}
.cabecalho-viagem-acoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.link-voltar { color: rgba(255,255,255,0.85); font-size: 14px; text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.cabecalho-viagem-sem-capa .link-voltar { color: var(--secundario); text-shadow: none; }
.cabecalho-viagem-nome {
    font-size: 44px; font-weight: 700; letter-spacing: -0.03em; margin: 0; line-height: 1.05;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.cabecalho-viagem-sem-capa .cabecalho-viagem-nome { text-shadow: none; }
@media (min-width: 768px) { .cabecalho-viagem-nome { font-size: 72px; } }
.cabecalho-viagem .texto-secundario,
.cabecalho-viagem .rotulo-mini { text-shadow: 0 1px 3px rgba(0,0,0,0.6); }
.cabecalho-viagem-sem-capa .texto-secundario,
.cabecalho-viagem-sem-capa .rotulo-mini { text-shadow: none; }

.faixa-indicadores { display: flex; gap: 20px; margin-top: 18px; flex-wrap: wrap; }
.indicador { display: flex; flex-direction: column; gap: 2px; padding-right: 20px; border-right: 1px solid rgba(255,255,255,0.2); min-width: 72px; }
@media (max-width: 480px) {
    .faixa-indicadores { gap: 14px; }
    .indicador { padding-right: 14px; min-width: 64px; }
    .cabecalho-viagem-acoes .btn-icone { width: 32px; height: 32px; }
    .cabecalho-viagem-acoes .btn-icone svg { width: 15px; height: 15px; }
    .indicador-numero { font-size: 20px; }
}
.cabecalho-viagem-sem-capa .indicador { border-right-color: var(--borda); }
.indicador:last-child { border-right: none; }
.indicador-numero { font-size: 24px; font-weight: 700; }

/* --- Faixa de dias --- */
.faixa-dias {
    display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 16px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
.pilula-dia {
    scroll-snap-align: start;
    flex: 0 0 auto;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-painel);
    padding: 12px 16px;
    display: flex; flex-direction: column; gap: 2px;
    min-width: 76px;
    position: relative;
}
.pilula-dia-ativa { border-color: var(--acento); }
.pilula-dia-semana { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--secundario); }
.pilula-dia-numero { font-size: 20px; font-weight: 700; }
.pilula-dia-gasto { font-size: 12px; color: var(--secundario); }
.pilula-dia-progresso { font-size: 11px; color: var(--secundario); }
.ponto-hoje { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--ambar); }

/* --- Layout do dia --- */
.layout-dia { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 960px) {
    .layout-dia { flex-direction: row; align-items: flex-start; }
    .coluna-mapa { flex: 1.1; position: sticky; top: 76px; }
    .coluna-linha-tempo { flex: 1; }
}
.coluna-mapa, .coluna-linha-tempo { display: flex; flex-direction: column; gap: 16px; }

.cartao-mapa { padding: 0; overflow: hidden; }
.filtro-categorias { display: flex; gap: 8px; padding: 12px; overflow-x: auto; border-bottom: 1px solid var(--borda); }
.chip-filtro {
    flex: 0 0 auto; border: 1px solid var(--borda); background: transparent; color: var(--secundario);
    padding: 6px 12px; border-radius: var(--raio-pilula); font-size: 12px; min-height: 32px;
}
.chip-filtro[data-cat]:not([data-cat="todas"]) { border-color: var(--cor-cat); }
.chip-filtro-ativa { background: var(--elevada); color: var(--texto); }
.mapa { height: 340px; width: 100%; background: var(--elevada); }
.mapa-mini { height: 220px; border-radius: var(--raio-painel); overflow: hidden; }
.mapa-vazio { padding: 40px 20px; text-align: center; color: var(--secundario); font-size: 13px; }
.leaflet-popup-content-wrapper { background: var(--superficie); color: var(--texto); border-radius: var(--raio-painel); }
.leaflet-popup-tip { background: var(--superficie); }
.leaflet-container a.leaflet-popup-close-button { color: var(--secundario); }

.cartao-clima { padding: 14px 18px; }
.cartao-clima[hidden] { display: none; }

.marcador-numerado {
    width: 28px; height: 28px; border-radius: 50%; background: var(--elevada);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: #fff; border: 2px solid #fff;
}
.marcador-visitado { opacity: 0.45; }

/* --- Editor de dia --- */
.editor-dia { display: flex; flex-direction: column; gap: 14px; }
.editor-dia-linha { display: flex; gap: 10px; }
.input-titulo-dia { flex: 1; font-size: 17px; font-weight: 600; }
.input-notas-dia { font-size: 14px; min-height: 44px; }

.cabecalho-dia { display: flex; align-items: center; gap: 16px; margin: 4px 0; flex-wrap: wrap; }

/* --- Linha do tempo --- */
.linha-tempo { list-style: none; margin: 0; padding: 0; position: relative; }
.parada {
    position: relative;
    display: flex;
    gap: 12px;
    padding-bottom: 24px;
    padding-left: 4px;
}
.parada::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 32px;
    bottom: -8px;
    width: 1px;
    background: var(--borda);
}
.parada:last-child::before { display: none; }
.parada-arraste { cursor: grab; color: var(--secundario); display: flex; align-items: center; touch-action: none; padding: 4px; }
.parada-arraste svg { width: 16px; height: 16px; }
.parada-marcador {
    flex: 0 0 auto;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--elevada);
    border: 2px solid var(--borda);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    z-index: 1;
}
.parada-visitada .parada-marcador { opacity: 0.5; }
.parada-corpo { flex: 1; min-width: 0; }
.parada-visitada .parada-titulo { opacity: 0.5; }
.parada-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.parada-hora { font-size: 13px; color: var(--secundario); }
.parada-titulo { font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.parada-endereco { margin: 0 0 6px; }
.parada-meta { display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--secundario); flex-wrap: wrap; margin-bottom: 6px; }
.parada-fotos { display: flex; gap: 8px; overflow-x: auto; margin: 8px 0; }
.parada-fotos img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--raio-painel); }
.parada-fotos-editar .foto-editar { position: relative; }
.parada-fotos-editar img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--raio-painel); }
.parada-fotos-editar form { position: absolute; top: -6px; right: -6px; }
.parada-notas { margin: 6px 0 0; white-space: pre-line; }
.parada-acoes { display: flex; gap: 14px; margin-top: 6px; }

.botao-check {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid var(--borda);
    background: var(--elevada);
    color: transparent;
    display: flex; align-items: center; justify-content: center;
    align-self: flex-start;
}
.botao-check svg { width: 20px; height: 20px; }
.botao-check-ativo { background: var(--sucesso); border-color: var(--sucesso); color: #fff; }
.botao-check.check-carregando { opacity: 0.6; }

/* --- Gastos avulsos --- */
.secao-gastos { margin-top: 8px; }
.secao-gastos-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.lista-gastos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lista-gastos li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--borda); font-size: 14px; }
.lista-gastos-desc { flex: 1; }
.lista-gastos-valor { font-weight: 600; }

.lista-barras { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lista-barras li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.lista-barras-trilho { flex: 1; height: 8px; background: var(--fundo); border-radius: var(--raio-pilula); overflow: hidden; }
.lista-barras-trilho span { display: block; height: 100%; border-radius: var(--raio-pilula); }
.lista-barras-valor { font-weight: 600; min-width: 70px; text-align: right; }

.grade-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 16px; }
.grade-resumo-dupla { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 800px) { .grade-resumo-dupla { grid-template-columns: 1fr 1fr; } }

.lista-preview { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.lista-preview li { padding: 6px 0; border-bottom: 1px solid var(--borda); display: flex; justify-content: space-between; gap: 10px; }

/* --- Abas de dados --- */
.abas-dados {
    display: flex; background: #181818; border-radius: var(--raio-pilula); padding: 4px; gap: 2px; margin-bottom: 20px;
    max-width: 100%; overflow-x: auto;
}
.abas-dados button { flex: 0 0 auto; white-space: nowrap; }
[data-tema="claro"] .abas-dados { background: #ECECEC; }

/* --- Botão flutuante --- */
.botao-flutuante {
    position: fixed;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom));
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--acao-fundo);
    color: var(--acao-texto);
    display: flex; align-items: center; justify-content: center;
    z-index: 30;
    border: none;
}
.botao-flutuante svg { width: 24px; height: 24px; }

/* --- Print --- */
@media print {
    body { background: #fff !important; color: #000 !important; }
    .topo, .botao-flutuante, .cabecalho-viagem-acoes, .parada-acoes, .botao-check, .parada-arraste,
    .segmentado, .filtro-categorias, .cartao-mapa, .cartao-clima, .faixa-dias, .form-acoes { display: none !important; }
    .conteudo { max-width: 100%; padding: 0; }
    .parada, .cartao { break-inside: avoid; border-color: #ccc !important; }
    .parada::before { background: #ccc !important; }
    * { color: #000 !important; background: transparent !important; }
    .selo-categoria { border: 1px solid #999 !important; }
}