/* Identidade compartilhada com o Munck; somente apresentação, sem regras de negócio. */
@media screen {
  :root { color-scheme: light; --fundo:#f6f3ee; --cartao:#fff; --texto:#1f1a14; --suave:#5f564b; --marca:#8a3b12; --marca-escura:#6b2c0b; --ok:#1d6b34; --perigo:#a11d1d; --borda:#d8d0c4; --raio:14px; }
  html { font-size:18px; background:#dce5eb; }
  body { max-width:460px; margin:24px auto; border-radius:28px; box-shadow:0 18px 80px #102c4225; min-height:calc(100dvh - 48px); overflow-wrap:anywhere; }
  body.app { padding-bottom:calc(162px + env(safe-area-inset-bottom, 0px)); }
  main { padding:24px 20px; min-width:0; }
  body.app main { padding-bottom:24px; }
  .marca-bar { background:#102c42; color:white; border-radius:28px 28px 0 0; padding:25px 22px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .marca-nome { font-size:27px; font-weight:800; letter-spacing:-.7px; }
  .marca-nome>span { color:#64f0ce; }
  .marca-nome small { display:block; font-size:9px; letter-spacing:1.4px; margin-top:5px; font-weight:600; color:#c1d0d9; }
  .marca-simbolo { background:#64f0ce; color:#102c42; font-weight:900; border-radius:12px; padding:12px 8px; font-size:20px; }
  .cabecalho { padding:0 0 20px; margin-bottom:20px; border-bottom:1px solid var(--borda); flex-wrap:wrap; }
  .cabecalho .saudacao { font-size:23px; letter-spacing:-.5px; }
  .cabecalho small { font-size:14px; margin-top:7px; }
  .cabecalho .relogio { font-size:13px; padding-top:6px; }
  h1 { font-size:29px; letter-spacing:-.8px; line-height:1.25; }
  h2 { font-size:21px; margin-top:24px; }
  button, input, select, textarea, a.botao { font:inherit; touch-action:manipulation; }
  button, a.botao { min-height:50px; font-size:16px; border-width:1px; border-radius:10px; padding:12px 16px; line-height:1.4; }
  button:hover { filter:brightness(.96); }
  button.secundario { background:white; }
  input:not([type=checkbox]):not([type=radio]), select, textarea { width:100%; min-height:50px; padding:12px; border:1px solid #a1b6c1; border-radius:10px; font-size:16px; background:white; color:var(--texto); min-width:0; }
  input[type=checkbox], input[type=radio] { accent-color:var(--marca); }
  label { font-size:16px; font-weight:600; }
  button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline:3px solid #7894a8; outline-offset:3px; }
  .cartao, .numero { padding:20px 16px; box-shadow:0 3px 12px #102c4205; }
  .cartao.frase { background:#102c42; color:white; border-color:#102c42; border-left:0; font-style:normal; line-height:1.65; }
  .cartao.piada { border-left:4px solid var(--marca); }
  .relogio-grande { border:1px solid var(--borda); min-width:120px; flex:1 1 120px; }
  .rg-hora { font-size:clamp(1.8rem, 7vw, 2.3rem); letter-spacing:-1px; white-space:nowrap; overflow-wrap:normal; }
  .cartao.frase .pequeno { color:#c1d0d9; }
  .rg-data { font-size:12px; }
  .numero .rotulo { font-size:12px; }
  .numero .grande { font-size:26px; }
  .numero.largo .grande { font-size:32px; }
  .linha-item { padding:18px 14px; gap:12px; align-items:flex-start; }
  .linha-item>div:first-child { min-width:0; flex:1; }
  .linha-item .nome { font-size:17px; }
  .linha-item small { font-size:13px; line-height:1.6; margin-top:5px; }
  .linha-item .valor { font-size:17px; }
  .segmento { flex-wrap:wrap; }
  .segmento .seg { flex:1 1 100px; }
  .opcoes button, .mais-lista button, .mais-lista a.botao { font-size:17px; min-height:58px; }
  .item-comanda .descricao { min-width:0; flex:1 1 160px; font-size:16px; }
  .pagamento-linha { flex-wrap:wrap; }
  .pagamento-linha input { width:8rem; max-width:100%; }
  nav.abas { left:50%; right:auto; transform:translateX(-50%); width:min(460px,100%); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:10px 10px max(10px,env(safe-area-inset-bottom)); background:#102c42; border-top:1px solid #365467; box-shadow:0 -5px 25px #102c4218; }
  nav.abas button { min-height:61px; font-size:11px; color:#d6e1e8; padding:7px 5px; border-radius:9px; gap:5px; }
  nav.abas button .icone { font-size:21px; }
  nav.abas button.ativa { color:#102c42; background:#64f0ce; }
  .rodape-fixo { bottom:calc(152px + env(safe-area-inset-bottom, 0px)); z-index:10; }
  dialog { width:min(420px,calc(100% - 24px)); max-height:90dvh; padding:24px; border:1px solid var(--borda); border-radius:18px; box-shadow:0 20px 100px #102c4240; }
  dialog::backdrop { background:#102c4280; }
  .dlg-topo { align-items:flex-start; }
  .dlg-topo h1 { font-size:22px; }
  #avisos { width:min(436px,calc(100% - 24px)); left:50%; right:auto; transform:translateX(-50%); }
  .login { margin:0; padding:32px 25px; }
  body:has(main.login) { margin-top:8vh; padding:0; }
  .login h1 { margin:-32px -25px 25px; padding:30px 25px; border-radius:28px 28px 0 0; background:#102c42; color:white; }
  .login p { font-size:16px; color:var(--suave); line-height:1.7; }
  @media(max-width:500px) {
    html { background:var(--fundo); }
    body { margin:0; max-width:100%; min-height:100dvh; border-radius:0; box-shadow:none; }
    .marca-bar { border-radius:0; }
    body:has(main.login) { margin:0; }
    .login h1 { border-radius:0; }
    main { padding-left:18px; padding-right:18px; }
  }
  @media(min-width:1000px) {
    body.app { max-width:1320px; width:calc(100% - 48px); display:grid; grid-template-columns:240px minmax(0,1fr); padding-bottom:0; }
    .marca-bar { grid-column:1; grid-row:1; border-radius:28px 0 0 0; padding:28px 20px; align-items:flex-start; }
    .marca-nome { font-size:24px; }
    .marca-simbolo { font-size:16px; }
    body.app main { grid-column:2; grid-row:1 / span 2; max-width:none; width:100%; padding:30px; }
    nav.abas { position:static; grid-column:1; grid-row:2; transform:none; width:100%; display:flex; flex-direction:column; justify-content:flex-start; border:0; border-radius:0 0 0 28px; padding:12px 18px 28px; box-shadow:none; }
    nav.abas button { flex:none; flex-direction:row; justify-content:flex-start; gap:12px; font-size:14px; min-height:52px; padding:14px; }
    .rodape-fixo { bottom:0; }
  }
}
/* Paleta do Munck aplicada também ao Bar. */
@media screen {
  :root {--fundo:#f3f6f8; --texto:#152c42; --suave:#586b7e; --marca:#006b63; --marca-escura:#00564f; --ok:#006b63; --perigo:#a32b45; --borda:#dce4e9;}
  html {background:#dce5eb;}
  .marca-bar, nav.abas, .cartao.frase, .login h1 {background:#102c42; border-color:#355064;}
  .marca-nome>span {color:#64f0ce;}
  .marca-simbolo, nav.abas button.ativa {background:#64f0ce; color:#102c42;}
  .marca-nome small, .cartao.frase .pequeno, nav.abas button {color:#d6e1e8;}
  nav.abas button.ativa {color:#102c42;}
  .tempo h2 {margin-top:0;}
  .tempo form {display:grid; gap:10px; margin-bottom:14px;}
  .tempo label {margin:0;}
  .tempo-dias {display:grid; grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0;}
  .tempo-dia {padding:12px 8px; border:1px solid var(--borda);border-radius:10px; font-size:14px;line-height:1.7;}
  .tempo-dia small {display:block;color:var(--suave);font-size:12px;}
  .tempo>a {font-size:12px;color:var(--marca);}
  @media(max-width:500px) {html {background:var(--fundo);}}
  @media(max-width:350px) {.tempo-dias {grid-template-columns:1fr;}}
}
/* Mensagem alternada e clima compõem um único painel, como no Munck. */
@media screen {
  .painel-dia {padding:22px 18px; margin-bottom:20px; border-radius:18px; color:#fff; background:radial-gradient(ellipse at 80% 10%,#a6defa55,transparent 48%),linear-gradient(150deg,#103e50,#236a76);}
  .painel-dia[data-sky=night] {background:radial-gradient(circle at 88% 4%,#f6f0d8aa 0 23px,transparent 25px),radial-gradient(circle at 65% 7%,#fff9 0 1px,transparent 2px),linear-gradient(150deg,#101c35,#24485f);}
  .painel-dia[data-sky=clear] {background:radial-gradient(circle at 88% 5%,#fff3b7 0 32px,#f6c55c55 35px,transparent 140px),linear-gradient(145deg,#194c70,#3c8b9b);}
  .painel-dia[data-sky=cloudy] {background:radial-gradient(ellipse at 90% 5%,#d4e6ed66,transparent 55%),linear-gradient(150deg,#284759,#517484);}
  .painel-dia[data-sky=rain],.painel-dia[data-sky=storm] {background:repeating-linear-gradient(110deg,transparent 0 32px,#c9e4fa0d 33px 35px,transparent 36px 66px),linear-gradient(145deg,#172f49,#42677c);}
  .painel-dia .mural-linha {gap:16px; margin:0; align-items:flex-start;}
  .painel-dia .cartao.mural {background:transparent; border:0; border-radius:0; padding:0; box-shadow:none; color:#fff; flex:1 1 170px; font-size:20px; line-height:1.65; font-style:normal;}
  .painel-dia .cartao.relogio-grande {padding:10px; border:1px solid #ffffff40; background:#ffffff0d; color:#fff; flex:0 1 115px; min-width:110px;}
  .painel-dia .rg-data,.painel-dia .pequeno {color:#dfedf5;}
  .painel-dia .tempo {background:transparent; border:0; border-top:1px solid #ffffff40; border-radius:0; box-shadow:none; padding:22px 0 0; margin:22px 0 0; color:white;}
  .painel-dia .tempo h2 {color:#fff;}
  .painel-dia .tempo label {color:#dfedf5;}
  .painel-dia .tempo button.secundario {background:#ffffff14; border-color:#ffffff66; color:#fff;}
  .painel-dia .tempo button:disabled {opacity:.6;}
  .painel-dia .tempo-dia {background:#ffffff10; border-color:#ffffff40;}
  .painel-dia .tempo-dia small,.painel-dia .tempo>a {color:#dfedf5;}
}
/* Paleta quente escolhida pelo Lucas, incluindo o painel de clima e mensagens. */
@media screen {
  :root {--fundo:#f6f3ee; --texto:#1f1a14; --suave:#5f564b; --marca:#8a3b12; --marca-escura:#6b2c0b; --ok:#1d6b34; --perigo:#a11d1d; --borda:#d8d0c4;}
  html {background:#e6dfd5;}
  .marca-bar, nav.abas, .login h1 {background:#6b2c0b; border-color:#8a3b12;}
  .marca-nome>span {color:#ffd8b7;}
  .marca-simbolo, nav.abas button.ativa {background:#f4c397; color:#482009;}
  .marca-nome small, nav.abas button {color:#f3e3d5;}
  nav.abas button.ativa {color:#482009;}
  .painel-dia,.painel-dia[data-sky] {color:#482b14; background:radial-gradient(circle at 88% 5%,#fff1b9 0 32px,#edc36b44 35px,transparent 145px),linear-gradient(145deg,#fff0c6,#efd19a);}
  .painel-dia .cartao.mural,.painel-dia .tempo,.painel-dia .tempo h2,.painel-dia .tempo label {color:#482b14;}
  .painel-dia .rg-data,.painel-dia .pequeno,.painel-dia .tempo-dia small,.painel-dia .tempo>a {color:#624727;}
  .painel-dia .cartao.relogio-grande {background:#fff8e580; border-color:#a7834b66; color:#6b2c0b;}
  .painel-dia .tempo {border-color:#a7834b66;}
  .painel-dia .tempo button.secundario {background:#fff8e5; border-color:#a7834b; color:#6b2c0b;}
  .painel-dia .tempo-dia {background:#fff8e580; border-color:#a7834b66;}
  @media(max-width:500px) {html {background:var(--fundo);}}
}
/* O céu acompanha a hora do aparelho, independentemente da previsão. */
@media screen {
  .abrir-comanda-principal {margin-top:0!important; margin-bottom:18px; min-height:54px;}
  .painel-dia[data-hora=amanhecer] {background:radial-gradient(circle at 88% 85%,#fff2bf 0 28px,transparent 30px),linear-gradient(160deg,#efd1ce,#ffe4a2);color:#482b14;}
  .painel-dia[data-hora=dia] {background:radial-gradient(circle at 88% 12%,#fff0b1 0 28px,transparent 30px),linear-gradient(145deg,#d0e9ef,#fff0c6);color:#263d49;}
  .painel-dia[data-hora=entardecer] {background:radial-gradient(circle at 88% 80%,#ffdb8c 0 28px,transparent 30px),linear-gradient(150deg,#dfbdcb,#f8c88d);color:#482b14;}
  .painel-dia[data-hora=noite] {background:radial-gradient(circle at 88% 12%,#f6e9b9cc 0 20px,transparent 22px),radial-gradient(circle at 65% 18%,#fff9 0 1px,transparent 2px),radial-gradient(circle at 78% 40%,#fff8 0 1px,transparent 2px),linear-gradient(150deg,#172239,#31485c);color:#fff3d5;}
  .painel-dia[data-hora] .cartao.mural,.painel-dia[data-hora] .tempo,.painel-dia[data-hora] .tempo h2,.painel-dia[data-hora] .tempo label,.painel-dia[data-hora] .pequeno,.painel-dia[data-hora] .tempo-dia small,.painel-dia[data-hora] .tempo>a {color:inherit;}
  .painel-dia[data-hora] .cartao.mural {padding-right:35px;}
  .previsao-recolhida {margin-top:18px;border-top:1px solid currentColor;padding-top:14px;}
  .previsao-recolhida>summary {cursor:pointer;min-height:44px;font-size:14px;font-weight:700;padding:10px 0;}
  .previsao-recolhida .tempo {border-top:0;margin-top:0;padding-top:10px;}
}
@media screen {
  .marca-bar-icone {display:block;width:72px;height:64px;object-fit:contain;flex-shrink:0;}
  .marca-bar {align-items:center;}
  .login-marca {display:flex;align-items:center;justify-content:space-between;gap:12px;}
  nav.abas button img.icone {width:22px;height:22px;flex-shrink:0;}
  nav.abas button.ativa img.icone {filter:brightness(.25);}
  @media(min-width:1000px) {
    body.app {max-width:1760px;width:calc(100% - 40px);grid-template-columns:265px minmax(0,1fr);grid-template-rows:128px 1fr;}
    .marca-bar {padding:26px 22px;}
    .marca-nome {font-size:24px;}
    .marca-nome small {font-size:8px;letter-spacing:1px;}
    .marca-bar-icone {width:64px;}
    nav.abas {gap:9px;padding:14px 20px 30px;}
    nav.abas button {min-height:54px;justify-content:flex-start;flex-direction:row;font-size:14px;font-weight:600;padding:14px;border:1px solid transparent;border-radius:10px;gap:12px;}
    nav.abas button:hover {background:#ffffff12;filter:none;}
    nav.abas button.ativa {background:#f4c397;color:#482009;}
    nav.abas button:nth-child(4) {margin-top:22px;border-top:1px solid #ffffff40;}
    body.app main {padding:30px 36px;}
    .cabecalho {align-items:center;margin-bottom:24px;min-height:62px;}
    body.app button:not(.linha-item):not(.seg) {font-size:16px;}
    .abrir-comanda-principal {width:auto!important;min-width:220px;}
    .painel-dia {max-width:none;padding:28px;}
    .painel-dia .cartao.mural {font-size:22px;max-width:850px;}
    dialog {width:min(560px,calc(100% - 32px));max-width:560px;}
    .grade {grid-template-columns:repeat(auto-fill,minmax(170px,1fr));}
  }
}