/* Visual da Lukrar (lukrar.com.br) para todas as telas do Entregas.
   Carregado por último em cada página: troca as cores do tema e refina os componentes.
   Paleta e fontes iguais às do site: creme, tinta vinho, vermelho em degradê, botões em pílula. */

/* ---- Tema claro (padrão, como o site) ---- */
:root:root:root:not([data-theme="dark"]) {
  --brand: #FD1C22; --brand-2: #FF4F41; --brand-fg: #fff; --brand-ink: #D40207;
  --ink: #FFF4E6; --surface: #FFFFFF; --surface-2: #FFF9F1; --surface-3: #FBEBD6;
  --texto: #1F0709; --muted: #6E4F4A; --faint: #957771;
  --borda: rgba(108, 2, 5, .13); --linha: rgba(108, 2, 5, .10); --vidro-borda: rgba(108, 2, 5, .12); --bd: rgba(108, 2, 5, .12);
  --brilho-topo: rgba(255, 255, 255, .85);
  --gold-ink: #B7790A; --gold-fg: #1F0709;
  --jade-ink: #0B7D6C; --violet: #7C5CE0; --violet-ink: #5B3FD0; --erro: #D40207;
  --card: #FFFFFF; --card-grad: linear-gradient(180deg, #fff, #FFF7EA); --paper: #FBEBD6; --ink-l: #1F0709; --mute: #7A5A55;
  --barra: rgba(255, 244, 230, .88); --seg: rgba(251, 235, 214, .8); --campo: #FFFFFF; --campo-bd: rgba(108, 2, 5, .18);
  --glow-1: rgba(243, 181, 63, .26); --glow-2: rgba(253, 28, 34, .08); --sombra: rgba(108, 2, 5, .45);
  --btn-neutro: #FFFFFF; --btn-neutro-bd: rgba(31, 7, 9, .16);
  --p-amber-bg: #FFEFC9; --p-amber: #8a5a00; --p-teal-bg: #D9F7F1; --p-teal: #0B7D6C; --p-green-bg: #DDF6E8; --p-green: #167a46; --p-red-bg: #FFE0DD; --p-red: #D40207;
  --toast-bg: #1F0709; --toast-fg: #FFF4E6;
  color-scheme: light;
}
/* ---- Tema escuro Lukrar (vinho-preto, mesmas cores de destaque) ---- */
:root:root:root[data-theme="dark"] {
  --brand: #FD1C22; --brand-2: #FF4F41; --brand-fg: #fff; --brand-ink: #FF6B63;
  --ink: #150809; --surface: #211012; --surface-2: #2A1517; --surface-3: #35191C;
  --texto: #FFF4E6; --muted: #D2B8AE; --faint: #A58D85;
  --borda: rgba(255, 244, 230, .13); --linha: rgba(255, 244, 230, .10); --vidro-borda: rgba(255, 244, 230, .12); --bd: rgba(255, 244, 230, .12);
  --brilho-topo: rgba(255, 255, 255, .08);
  --gold-ink: #F3B53F; --gold-fg: #1F0709;
  --jade-ink: #2ED3B7; --violet: #9b7bff; --violet-ink: #b9a3ff; --erro: #FF7A70;
  --card: #241214; --card-grad: linear-gradient(180deg, #2a1517, #211012); --paper: #35191C; --ink-l: #FFF4E6; --mute: #C4A99F;
  --barra: rgba(21, 8, 9, .88); --seg: rgba(53, 25, 28, .8); --campo: #2A1517; --campo-bd: rgba(255, 244, 230, .20);
  --glow-1: rgba(243, 181, 63, .10); --glow-2: rgba(253, 28, 34, .14); --sombra: rgba(0, 0, 0, .7);
  --btn-neutro: #2A1517; --btn-neutro-bd: rgba(255, 244, 230, .20);
  --p-amber-bg: rgba(243, 181, 63, .16); --p-amber: #F3B53F; --p-teal-bg: rgba(46, 211, 183, .15); --p-teal: #2ED3B7; --p-green-bg: rgba(92, 225, 160, .15); --p-green: #5CE1A0; --p-red-bg: rgba(255, 107, 99, .16); --p-red: #FF8A80;
  --toast-bg: #FFF4E6; --toast-fg: #1F0709;
  color-scheme: dark;
}
/* ---- Comum aos dois temas ---- */
:root:root:root {
  --red: #FD1C22; --red2: #FF4F41; --crimson: #D40207; --wine: #6C0205; --gold: #F3B53F; --amber: #CA890D; --teal: #2ED3B7;
  --jade: #2ED3B7; --jade-strong: #14B79C; --verde: #12A27A;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --grad: linear-gradient(100deg, var(--amber), var(--crimson) 55%, #D61000);
  --display: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
  --raio: 20px;
}

html { background: var(--ink); }
body {
  background-color: var(--ink) !important;
  background-image:
    radial-gradient(55% 42% at 100% 0%, var(--glow-1), transparent 70%),
    radial-gradient(50% 40% at 0% 100%, var(--glow-2), transparent 70%) !important;
  background-attachment: fixed;
  color: var(--texto);
  font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, Arial, sans-serif;
}

/* Títulos: Bricolage, apertados, como no site */
h1, h2, h3, .marca, .br-janela h2 { font-family: var(--display); letter-spacing: -.025em; color: var(--ink-l); }
h1 { font-weight: 800; }

/* "Entregas" em degradê âmbar → vermelho, como o grifo do site */
.marca span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent !important; }

/* Etiquetas pequenas em caixa-alta no estilo "eyebrow" do site */
.saldo-principal > span, .grade-saldos span, .cartao-local.detalhe small, .lojas small.eyebrow, .dica-topo {
  font-family: var(--mono); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute);
}

/* ---------- Botões: pílulas ---------- */
.btn, .btn-gigante, .br-acoes button, button.principal, .btn-principal, .btn-brand {
  border-radius: 999px !important; letter-spacing: .01em; transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.principal, .btn-principal, .btn-brand, .br-sim, .btn-gigante.principal {
  background: linear-gradient(135deg, var(--red), var(--red2)) !important; color: #fff !important; border: 0;
  box-shadow: 0 12px 26px -12px rgba(253, 28, 34, .65), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}
.principal:hover:not(:disabled), .btn-principal:hover:not(:disabled), .btn-gigante.principal:hover:not(:disabled) { transform: translateY(-1px); filter: saturate(1.08); }
.neutro, .btn-fantasma, .btn-gigante.neutro, .contorno, .btn-gigante.contorno, .br-nao, .pilula, .cartao-local .acoes button {
  background: var(--btn-neutro) !important; color: var(--ink-l) !important; border: 1.5px solid var(--btn-neutro-bd) !important;
  box-shadow: 0 6px 16px -12px var(--sombra) !important;
}
.neutro:hover:not(:disabled), .btn-fantasma:hover:not(:disabled), .pilula:hover { border-color: var(--red) !important; color: var(--brand-ink) !important; background: var(--btn-neutro) !important; }
.btn-ouro, .btn-gigante.ouro { background: linear-gradient(135deg, var(--gold), #f7c65f) !important; color: #3a2400 !important; box-shadow: 0 10px 22px -12px rgba(202, 137, 13, .7) !important; }
.btn-jade, .aprovar, .btn-gigante.jade { background: linear-gradient(135deg, var(--teal), #5fe6d0) !important; color: #04332b !important; box-shadow: 0 10px 22px -12px rgba(20, 183, 156, .7) !important; }
.btn-perigo, .reprovar { background: var(--btn-neutro) !important; color: var(--p-red) !important; border: 1.5px solid rgba(212, 2, 7, .35) !important; box-shadow: none !important; }
.br-sim.perigo { background: var(--crimson) !important; }
button:not(.btn):not(.btn-gigante):not(.perfil):not(.link):not(.pilula):not([class*="aba"]) { font-family: inherit; }

/* ---------- Cartões ---------- */
.cartao, .pedido, .caixa, .cad, a.card, .cartao-local, .cartao-ganhos, .ganhos-grade div, .vantagens li, .requisitos, .termos,
.oferta-linhas > div, .saldo-principal, .perfil, .br-cal, .br-janela, .cartao-chave, .item-extrato, .grade-saldos div, .extrato div {
  background: var(--card) !important; border: 1px solid var(--bd) !important; color: var(--texto);
  box-shadow: 0 14px 30px -24px var(--sombra) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.cartao, .pedido, .caixa, .cad, a.card, .cartao-local, .saldo-principal { border-radius: 22px; }
.saldo-principal { background: var(--card-grad) !important; border-color: rgba(243, 181, 63, .45) !important; }
.saldo-principal > b, .cartao-ganhos b, .ganhos-grade b, .oferta-valor, .final .valor { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.grade-saldos div { background: var(--surface-2) !important; box-shadow: none !important; border-radius: 14px; }
.grade-saldos b { color: var(--gold-ink) !important; }
.grade-saldos .pend b { color: var(--ink-l) !important; }
a.card:hover { border-color: var(--red) !important; transform: translateY(-2px); transition: .2s var(--ease); }
a.card code, .caixa code { color: var(--gold-ink) !important; font-family: var(--mono); }
.perfil[aria-checked="true"] { border-color: var(--red) !important; background: var(--card-grad) !important; box-shadow: 0 14px 30px -18px rgba(253, 28, 34, .55) !important; }

/* ---------- Campos ---------- */
input, select, textarea, .campo input {
  background: var(--campo) !important; color: var(--ink-l) !important; border: 1.5px solid var(--campo-bd) !important; border-radius: 14px;
  font-family: inherit;
}
input::placeholder, textarea::placeholder { color: #b49a95; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(253, 28, 34, .22) !important; border-color: var(--red) !important; }
.campo, label.campo { color: var(--mute); }
input[type=checkbox], input[type=radio] { accent-color: var(--red); }

/* ---------- Topo, abas e barra inferior ---------- */
.topo, header.topo {
  background: var(--barra) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bd) !important;
}
.abas { background: var(--seg) !important; border-radius: 999px !important; padding: 4px; }
.abas button { border-radius: 999px !important; color: var(--mute) !important; background: none !important; box-shadow: none !important; }
.abas button.ativa, .abas button[aria-selected="true"] { background: var(--card) !important; color: var(--brand-ink) !important; box-shadow: 0 6px 14px -8px var(--sombra) !important; }
nav, .barra, .navegacao, .tabbar { background: var(--barra) !important; border-top: 1px solid var(--bd) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
nav button, nav a { color: var(--mute); }
nav button[aria-selected="true"], nav button.ativa, nav .ativa, nav [aria-current] { color: var(--brand-ink) !important; background: rgba(253, 28, 34, .10) !important; border-radius: 18px; }

/* ---------- Chips, etiquetas e avisos (antes em tons escuros) ---------- */
.pill { background: var(--paper) !important; color: var(--ink-l) !important; }
.pill.PROCURANDO { background: var(--p-amber-bg) !important; color: var(--p-amber) !important; }
.pill.ACEITA, .pill.NA_LOJA, .pill.COLETADA, .pill.A_CAMINHO { background: var(--p-teal-bg) !important; color: var(--p-teal) !important; }
.pill.ENTREGUE { background: var(--p-green-bg) !important; color: var(--p-green) !important; }
.pill.CANCELADA, .pill.FALHOU { background: var(--p-red-bg) !important; color: var(--p-red) !important; }
.EM_ANALISE, .tag.pendente { background: var(--p-amber-bg) !important; color: var(--p-amber) !important; }
.APROVADO, .tag.ok { background: var(--p-green-bg) !important; color: var(--p-green) !important; }
.REPROVADO, .tag.ruim, .tag.bloqueado { background: var(--p-red-bg) !important; color: var(--p-red) !important; }
.tag { background: var(--paper) !important; color: var(--mute) !important; }
.ear-CONFERIDO, .ok { color: var(--p-green) !important; } .ear-AGUARDANDO, .pend { color: var(--p-amber) !important; } .ear-RECUSADO { color: var(--p-red) !important; } .ear-NAO_INFORMADO { color: var(--mute) !important; }
.relogio .estado { color: var(--p-amber) !important; } .relogio .estado.real { color: var(--p-green) !important; }
.extrato b.mais { color: var(--gold-ink) !important; }
.chip { color: var(--gold-ink) !important; background: rgba(243, 181, 63, .18) !important; border-color: rgba(243, 181, 63, .5) !important; }
.erro, p.erro { color: var(--p-red) !important; background: var(--p-red-bg) !important; border: 1px solid var(--p-red) !important; }
.aviso, .toast { background: var(--toast-bg) !important; color: var(--toast-fg) !important; border: 0 !important; border-radius: 999px !important; }
.aviso-saldo { background: var(--p-amber-bg) !important; color: var(--p-amber) !important; border: 1px solid rgba(243, 181, 63, .6) !important; border-radius: 16px !important; }
.selo-proto { background: var(--toast-bg) !important; color: var(--toast-fg) !important; border-radius: 999px !important; font-family: var(--mono); letter-spacing: .06em; font-weight: 600; }
.dica, .dica b { color: var(--mute); }
.link { color: var(--mute); }
a { color: inherit; }

/* Linhas, mapas e barras de progresso */
.etapa::before { background: var(--paper) !important; } .etapa.feita::before { background: var(--teal) !important; }
.mapa-grande, #mapa-moto { border-color: var(--bd) !important; border-radius: 22px; }
.br-cal::backdrop, .br-janela::backdrop { background: rgba(31, 7, 9, .45); }
.br-cal-dias button.escolhido { background: linear-gradient(135deg, var(--red), var(--red2)); color: #fff; }
.br-cal-dias button.hoje { box-shadow: inset 0 0 0 2px var(--gold); }


/* Central: página larga, no mesmo estilo */
main h1 { font-size: clamp(28px, 4vw, 40px); }
main h1 span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
h2 small { color: var(--mute) !important; font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .04em; }

.marcar { background: transparent; border: 0; box-shadow: none; }

.pedido-pronto { color: var(--jade-ink) !important; }

/* Botão de tema (telas sem o botão do próprio app) */
.lk-tema { position: fixed; right: 14px; bottom: 14px; z-index: 2600; width: 46px; height: 46px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; font-size: 22px; line-height: 1; cursor: pointer; border: 1.5px solid var(--btn-neutro-bd);
  background: var(--btn-neutro); color: var(--ink-l); box-shadow: 0 10px 24px -12px var(--sombra); transition: transform .2s var(--ease); }
.lk-tema:hover { transform: scale(1.07); } .lk-tema:active { transform: scale(.94); }
.lk-tema:focus-visible { outline: 3px solid rgba(253, 28, 34, .35); outline-offset: 2px; }