/* =====================================================================
   DÔCE em Dia — tema premium (09/11/2026)
   Camada por cima do app.css: mesma estrutura, acabamento novo em todas as telas.
   Paleta: vinho/vermelho da marca, creme quente, tinta café, dourado de acento.
   ===================================================================== */
:root{
  --vermelho:#b3122e; --vermelho-esc:#7d0c20; --vinho:#5c0918;
  --creme:#f8f3ec; --papel:#ffffff; --tinta:#23170f; --suave:#7a6a5d;
  --linha:#ece2d6; --linha-forte:#dccdbd;
  --dourado:#c09040; --dourado-claro:#f3e5c4;
  --verde:#1f8a52; --amarelo:#c98f00; --azul:#145f75;
  --fundo-verde:#e7f5ec; --fundo-amarelo:#fdf3d6; --fundo-vermelho:#fbe9ec; --fundo-azul:#e4f1f4;
  --raio:18px; --raio-p:12px;
  --sombra-1:0 1px 2px rgba(35,23,15,.05),0 1px 1px rgba(35,23,15,.03);
  --sombra-2:0 2px 6px rgba(35,23,15,.06),0 10px 24px -12px rgba(35,23,15,.18);
  --sombra-3:0 14px 40px -14px rgba(35,23,15,.35);
  --fonte:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --fonte-titulo:"Plus Jakarta Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body{font-family:var(--fonte);background:var(--creme);color:var(--tinta);-webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}
h1,h2,h3,.marca,.contador b,.numero b,.tile b{font-family:var(--fonte-titulo)}
h1{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;line-height:1.2}
h2{font-size:1.08rem;font-weight:750;letter-spacing:-.01em}
h3{font-size:.95rem;font-weight:700}
a{color:var(--vermelho)}
::selection{background:var(--dourado-claro)}

/* ---------- topo ---------- */
.topo{background:linear-gradient(120deg,var(--vinho) 0%,var(--vermelho-esc) 38%,var(--vermelho) 100%);box-shadow:0 6px 18px -10px rgba(92,9,24,.55)}
.topo-in{padding:.65rem 1rem}
.marca{display:inline-flex;align-items:center;gap:.5rem;font-size:1.15rem;font-weight:800;letter-spacing:.02em}
.marca::before{content:"D";display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#fff;color:var(--vermelho);font-weight:900;font-size:1.05rem;
  box-shadow:0 0 0 2px rgba(255,255,255,.25),0 4px 10px -4px rgba(0,0,0,.35)}
.marca span{margin-left:0;opacity:.9;font-weight:500}
.login .marca::before{background:var(--vermelho);color:#fff}
.topo .quem{font-weight:600}
.topo .quem small{color:rgba(255,255,255,.78);font-weight:500}
.hamb,.icone-topo,.sair{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);transition:background .15s}
.hamb:hover,.icone-topo:hover,.sair:hover{background:rgba(255,255,255,.24)}
.icone-topo{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#fff;flex:none}
.icone-topo .ic{width:22px;height:22px}
.icone-topo .ic .d{opacity:.28}
.icone-topo b{position:absolute;top:-5px;right:-5px;background:var(--dourado);color:#fff;border-radius:99px;font-size:.68rem;font-weight:800;padding:0 .35rem;min-width:1.15rem;line-height:1.15rem;text-align:center;box-shadow:0 0 0 2px var(--vermelho)}
.sair{border-radius:12px;padding:.45rem .8rem;font-weight:600}

/* ---------- menu de abas (computador) ---------- */
nav.menu{background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--linha);top:58px}
nav.menu a{font-weight:600;color:var(--suave);border-bottom-width:2px;padding:.75rem .8rem}
nav.menu a:hover{color:var(--tinta)}
nav.menu a.on{color:var(--vermelho);border-color:var(--vermelho)}

/* ---------- gaveta ---------- */
.gaveta{background:linear-gradient(180deg,#fff 0%,#fffaf4 100%)}
.gaveta-topo{background:linear-gradient(135deg,var(--vinho),var(--vermelho));padding:1.1rem 1rem 1rem}
.gaveta-topo b{font-family:var(--fonte-titulo);font-size:1.05rem}
.gaveta-topo .x{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.15);border:0;cursor:pointer}
.gaveta-grupo{color:var(--dourado);letter-spacing:.09em}
.gaveta nav a{border-radius:12px;font-weight:600;transition:background .12s}
.gaveta nav a .ic{width:20px;height:20px}
.gaveta nav a.on{background:linear-gradient(90deg,var(--fundo-vermelho),#fff);color:var(--vermelho-esc);box-shadow:inset 3px 0 0 var(--vermelho)}

/* ---------- área de conteúdo e cabeçalho das telas ---------- */
main{padding:1.2rem 1rem 6rem}
.cab{margin-bottom:1.1rem;padding-bottom:.9rem;border-bottom:1px solid var(--linha);position:relative}
.cab::after{content:"";position:absolute;left:0;bottom:-1px;width:56px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--vermelho),var(--dourado))}
.cab p.suave,.cab .suave{max-width:62rem;line-height:1.5}
.voltar{color:var(--vermelho);font-weight:700}
.grupo{color:var(--dourado);letter-spacing:.09em;display:flex;align-items:center;gap:.6rem}
.grupo::after{content:"";flex:1;height:1px;background:var(--linha)}

/* ---------- cartões ---------- */
.cartao{border:1px solid var(--linha);border-radius:var(--raio);padding:1.1rem 1.15rem;box-shadow:var(--sombra-1);background:var(--papel)}
.cartao>h2:first-child,.cartao>summary>h2{margin-bottom:.75rem}
.cartao h2{display:flex;align-items:center;gap:.5rem}
details.cartao>summary{cursor:pointer;list-style:none;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
details.cartao>summary::-webkit-details-marker{display:none}
details.cartao>summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--suave);border-bottom:2px solid var(--suave);transform:rotate(45deg);transition:transform .15s;flex:none;margin-right:.2rem}
details.cartao[open]>summary::after{transform:rotate(-135deg)}
.cartao.urgente{border-left:4px solid var(--vermelho)}
.item-linha{border-top-color:var(--linha)}
.vazio{color:var(--suave);font-style:normal}

/* ---------- números (Dashboard, painéis) ---------- */
.contador,.numero{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra-1);transition:box-shadow .15s,transform .15s}
a.contador:hover,a.numero:hover{box-shadow:var(--sombra-2);transform:translateY(-1px)}
.contador span{color:var(--suave);font-weight:700;letter-spacing:.06em}
.contador b{letter-spacing:-.02em}

/* ---------- botões ---------- */
.btn{border-radius:var(--raio-p);font-weight:700;letter-spacing:.005em;background:linear-gradient(180deg,#c4183a,var(--vermelho));box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 14px -8px rgba(179,18,46,.7);transition:filter .12s,transform .12s,box-shadow .12s}
.btn:hover{background:linear-gradient(180deg,#b5132f,var(--vermelho-esc));filter:none}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--dourado-claro);outline-offset:2px}
.btn.sec{background:#fff;color:var(--tinta);border:1px solid var(--linha-forte);box-shadow:var(--sombra-1)}
.btn.sec:hover{background:#fffaf4;border-color:var(--dourado)}
.btn.verde{background:linear-gradient(180deg,#24a160,var(--verde));box-shadow:0 6px 14px -8px rgba(31,138,82,.7)}
.btn.verde:hover{background:linear-gradient(180deg,#1f8f55,#18723f)}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ---------- campos ---------- */
label{color:#5e5046;font-weight:650;font-size:.84rem}
input,select,textarea{border:1px solid var(--linha-forte);border-radius:var(--raio-p);background:#fffdfa;transition:border-color .12s,box-shadow .12s,background .12s}
input:hover,select:hover,textarea:hover{border-color:#cdb9a5}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--dourado);box-shadow:0 0 0 4px rgba(192,144,64,.18);background:#fff}
input::placeholder,textarea::placeholder{color:#b3a497}
select{appearance:none;-webkit-appearance:none;padding-right:2.2rem;
  background:#fffdfa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%237a6a5d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .8rem center}
input[type=checkbox],input[type=radio]{accent-color:var(--vermelho)}

/* ---------- avisos e selos ---------- */
.aviso{border-radius:var(--raio-p);border:1px solid transparent;padding:.8rem 1rem;box-shadow:var(--sombra-1)}
.aviso.ok{border-color:#c6e8d3}
.aviso.erro{border-color:#f3c9d1}
.aviso.info{border-color:#c5e2e8}
.selo{border-radius:99px;font-weight:700;letter-spacing:.01em;padding:.2rem .6rem}

/* ---------- tabelas ---------- */
table{border-collapse:separate;border-spacing:0}
th{background:#fbf6ef;color:#6c5c50;font-weight:750;border-bottom:1px solid var(--linha-forte)}
th:first-child{border-top-left-radius:10px}th:last-child{border-top-right-radius:10px}
td{border-bottom:1px solid var(--linha)}
tr:hover td{background:#fffaf3}
table.grade th{background:#f6eee3}

/* ---------- tiles do Início ---------- */
.tile{border:1px solid var(--linha);border-radius:20px;box-shadow:var(--sombra-1);background:linear-gradient(180deg,#fff,#fffcf8)}
.tile:hover{border-color:#e5d2bd;box-shadow:var(--sombra-2)}
.tile b{font-weight:750}
.tile em{background:linear-gradient(180deg,#c4183a,var(--vermelho))}
.avatar{border-radius:16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 6px 14px -10px rgba(35,23,15,.45)}
.ic{stroke-width:1.75}

/* ---------- barra de baixo (celular) ---------- */
@media(max-width:859px){
  .barra-baixo{background:rgba(255,255,255,.94);backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);border-top:1px solid var(--linha);box-shadow:0 -8px 24px -16px rgba(35,23,15,.35)}
  .barra-baixo a,.barra-baixo button{border-radius:14px;margin:.15rem;color:#8a7a6d}
  .barra-baixo a.on{color:var(--vermelho);background:var(--fundo-vermelho)}
  .barra-baixo .ic-aviso b{background:var(--dourado);color:#fff}
  h1{font-size:1.4rem}
  .cartao{padding:1rem}
}

/* ---------- login ---------- */
.login{min-height:100vh;background:radial-gradient(1200px 500px at 50% -10%,rgba(179,18,46,.18),transparent 60%),var(--creme)}
.login .cartao{border-radius:24px;box-shadow:var(--sombra-3);padding:1.8rem 1.6rem}
.login .marca{color:var(--vermelho);font-size:1.7rem}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{.topo,.barra-baixo{box-shadow:none}}

/* ---------- busca do Início ---------- */
.busca-inicio{border:1px solid var(--linha-forte);border-radius:16px;box-shadow:var(--sombra-1);background:#fff;padding:.2rem .9rem}
.busca-inicio:focus-within{border-color:var(--dourado);box-shadow:0 0 0 4px rgba(192,144,64,.18)}
.busca-inicio>span{display:grid;place-items:center;color:var(--suave)}
.busca-inicio .ic{width:22px;height:22px}
.busca-inicio input,.busca-inicio input:focus{box-shadow:none;background:transparent;border:0}
.barra-baixo .ic-aviso .ic{width:22px;height:22px}
.barra-baixo .ic-aviso{line-height:0}
.login .marca::before{display:none}
.icone-topo b{right:-2px;top:-4px}
/* telas bem estreitas (Android pequeno): topo cabe inteiro — nome do usuário fica no menu */
@media(max-width:400px){.topo .quem{display:none}.topo-in{gap:.45rem}.icone-topo{width:38px;height:38px}}
@media(max-width:350px){.marca span{display:none}body.natal .marca::after{width:18px}}