:root{
  --fundo:#E6EAE6; --superficie:#FFFFFF; --tinta:#18211E; --suave:#56625C; --linha:#D3D9D4;
  --ligado:#0E6B57; --parar:#AD3428; --atencao:#8A5A00; --foco:#0E6B57;
  /* tecla neutra */
  --k-top:#FFFFFF; --k-bot:#EDF1EE; --k-borda:#CDD5D0; --k-lado:#B7C2BB;
  --sombra-chao:rgba(24,33,30,.16);
  --curva:cubic-bezier(.3,.7,.4,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{min-height:100vh;font-size:16px;line-height:1.45;background:var(--fundo);color:var(--tinta);font-family:"Familjen Grotesk",system-ui,sans-serif}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
input{font:inherit;color:inherit}
svg{display:block;flex:none}
:focus-visible{outline:3px solid var(--foco);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* ============ Tecla 3D (base de todos os botões) ============
   Face com degradê e brilho no topo, lateral sólida embaixo (--k-alt)
   e sombra no chão. Ao apertar, a face desce a altura da lateral. */
.k3{
  --k-alt:4px;
  position:relative;
  background:linear-gradient(180deg,var(--k-top),var(--k-bot));
  border:1px solid var(--k-borda);
  border-radius:14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 var(--k-alt) 0 var(--k-lado),
    0 calc(var(--k-alt) + 3px) 10px -2px var(--sombra-chao);
  transform:translateY(0);
  transition:transform .16s var(--curva),box-shadow .16s var(--curva),background-color .2s ease,opacity .2s ease;
}
@media (hover:hover){
  .k3:not([disabled]):hover{
    transform:translateY(-1px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 calc(var(--k-alt) + 1px) 0 var(--k-lado),0 calc(var(--k-alt) + 5px) 12px -2px var(--sombra-chao);
  }
}
.k3:not([disabled]):active,
.k3.afundada{
  transform:translateY(calc(var(--k-alt) - 1px));
  box-shadow:inset 0 2px 5px rgba(24,33,30,.16),0 1px 0 var(--k-lado),0 2px 3px -1px var(--sombra-chao);
}
.k3[disabled]{opacity:.5;cursor:default}

/* variações de cor da tecla */
.k3.verde{--k-top:#16836B;--k-bot:#0E6B57;--k-borda:#0B5A49;--k-lado:#07463A;color:#fff}
.k3.vermelha{--k-top:#C4473C;--k-bot:#AD3428;--k-borda:#94281F;--k-lado:#6E1C15;color:#fff}
.k3.verde,.k3.vermelha{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 var(--k-alt) 0 var(--k-lado),0 calc(var(--k-alt) + 3px) 10px -2px var(--sombra-chao)}
.k3.bloq{--k-top:#F8E7E3;--k-bot:#F1D8D2;--k-borda:#E2C2BB;--k-lado:#CFA69E}

/* ============ Botão de liga e desliga ============ */
.liga{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none}
.aro{
  width:84px;height:84px;border-radius:50%;padding:9px;
  background:linear-gradient(180deg,#D3DAD6,#F3F5F4);
  box-shadow:inset 0 3px 6px rgba(24,33,30,.22),inset 0 -1px 0 rgba(255,255,255,.9);
}
.pw{
  --k-alt:5px;
  width:66px;height:66px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 30%,#FFFFFF 0%,#F0F3F1 55%,#DCE3DF 100%);
  border:1px solid #C6CFCA;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -4px 8px rgba(24,33,30,.08),
    0 var(--k-alt) 0 #AEB9B2,
    0 calc(var(--k-alt) + 4px) 12px -3px rgba(24,33,30,.3);
  transform:translateY(-3px);
  transition:transform .18s var(--curva),box-shadow .18s var(--curva);
}
.pw svg{transition:color .2s ease,filter .2s ease}
.pw[aria-checked=true] svg{color:var(--ligado);filter:drop-shadow(0 0 5px rgba(14,107,87,.55))}
.pw[aria-checked=false]{
  transform:translateY(1px);
  background:radial-gradient(circle at 50% 30%,#F4F6F5 0%,#E6EBE8 60%,#D5DDD8 100%);
  box-shadow:inset 0 3px 6px rgba(24,33,30,.18),0 1px 0 #AEB9B2,0 2px 3px -1px rgba(24,33,30,.25);
}
.pw[aria-checked=false] svg{color:var(--parar);filter:drop-shadow(0 0 5px rgba(173,52,40,.45))}
.pw.pausada[aria-checked=false] svg{color:var(--atencao);filter:drop-shadow(0 0 5px rgba(138,90,0,.45))}
.pw:active{transform:translateY(2px);box-shadow:inset 0 3px 6px rgba(24,33,30,.2),0 0 0 #AEB9B2,0 1px 2px rgba(24,33,30,.2)}
.liga span{font-size:14px;font-weight:700}
.liga .on{color:var(--ligado)} .liga .off{color:var(--parar)} .liga .pausa{color:var(--atencao)}

/* ============ Estrutura ============ */
.app{max-width:480px;margin:0 auto;padding:16px 16px 112px}
.topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.topo h1{font-size:26px;line-height:1.15}
.topo small{display:block;font-size:14px;color:var(--suave);font-weight:400}
.topo-resumo{display:none}
.marca{display:none}

.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:center;background:#F4F6F4;border-top:1px solid var(--linha);padding:8px 8px 12px}
.nav div{display:flex;gap:8px;width:100%;max-width:480px}
.nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0;font-size:13px;color:var(--suave);border-radius:12px;--k-alt:3px}
.nav button:not([aria-current=page]){background:none;border-color:transparent;box-shadow:none;transform:none}
.nav button[aria-current=page]{color:var(--tinta);font-weight:700}
.nav button[aria-current=page] svg{color:var(--ligado)}

.toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--tinta);color:#fff;padding:10px 16px;border-radius:12px;font-size:15px;max-width:calc(100% - 32px);transition:opacity .2s ease,transform .2s ease;z-index:40;box-shadow:0 8px 20px -6px rgba(24,33,30,.4)}
.toast.mostra{opacity:1;transform:translate(-50%,0)}

/* ============ Cartão do filho ============ */
.filho{
  background:var(--superficie);border-radius:24px;padding:18px;margin-bottom:16px;
  border:1px solid var(--linha);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 3px 0 #D2D9D4,0 18px 30px -18px rgba(24,33,30,.35);
}
.filho-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.filho-nome{display:flex;align-items:center;gap:8px}
.filho h2{font-size:26px;line-height:1.1;font-weight:700;letter-spacing:-.01em}
.apar{font-size:14px;color:var(--suave);margin-top:2px}
.estado{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:600;margin-top:10px}
.estado i{width:10px;height:10px;border-radius:50%;background:var(--ligado);box-shadow:0 0 0 3px rgba(14,107,87,.15)}
.estado.pausado{color:var(--atencao)} .estado.pausado i{background:var(--atencao);box-shadow:0 0 0 3px rgba(138,90,0,.15)}
.estado.cortado{color:var(--parar)} .estado.cortado i{background:var(--parar);box-shadow:0 0 0 3px rgba(173,52,40,.15)}
.lapis{width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:var(--suave);--k-alt:3px}

.filho{container-type:inline-size}
@container (min-width:440px){.apps{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
.apps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;margin-top:16px;padding-bottom:4px}
.app-t{display:flex;align-items:center;gap:10px;padding:12px;text-align:left}
.app-t .nome{flex:1;font-weight:600;font-size:15px;line-height:1.2}
.app-t .nome em{display:block;font-style:normal;font-weight:500;font-size:13px;color:var(--suave)}
.app-t[aria-checked=true] svg{color:var(--ligado)}
.app-t[aria-checked=false] svg,.app-t[aria-checked=false] .nome em{color:var(--parar)}

.pausas{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;padding-bottom:4px}
.pausas button{padding:9px 14px;border-radius:999px;font-size:14px;font-weight:700;--k-alt:3px}

.alerta{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:12px;border-radius:14px;background:#FBF0D9;color:#5E3E00;font-size:15px;box-shadow:inset 0 2px 4px rgba(94,62,0,.12)}
.alerta button{margin-top:10px;padding:9px 14px;border-radius:10px;font-weight:700;font-size:14px}

.renomear{display:flex;gap:8px;align-items:center}
.renomear input{min-width:0;flex:1;padding:8px 12px;border:1px solid var(--k-borda);border-radius:12px;background:#F4F6F5;font-weight:700;font-size:20px;box-shadow:inset 0 2px 4px rgba(24,33,30,.14)}
.renomear button{padding:9px 14px;border-radius:12px;font-weight:700;font-size:14px;--k-alt:3px}

/* ============ Aparelhos e horários ============ */
.lista-aparelhos{display:flex;flex-direction:column;gap:10px}
.aparelho{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;background:var(--superficie);border:1px solid var(--linha);box-shadow:0 2px 0 #D2D9D4}
.aparelho .info{flex:1;min-width:0}
.aparelho strong{display:block}
.aparelho span{font-size:14px;color:var(--suave)}
.aparelho .acao{padding:9px 14px;border-radius:12px;font-size:14px;font-weight:700;--k-alt:3px}
.nota{font-size:14px;color:var(--suave);margin-top:10px}
.horario{padding:14px;border-radius:16px;background:var(--superficie);border:1px solid var(--linha);box-shadow:0 2px 0 #D2D9D4;margin-bottom:10px}
.horario strong{display:block}
.horario span{font-size:14px;color:var(--suave)}

/* ============ Computador ============ */
@media (min-width:960px){
  .nav{top:0;bottom:0;left:0;right:auto;width:240px;flex-direction:column;justify-content:flex-start;border-top:0;border-right:1px solid var(--linha);padding:24px 16px}
  .nav div{flex-direction:column;gap:8px;max-width:none}
  .nav button{flex:none;flex-direction:row;gap:12px;padding:11px 14px;font-size:15px;justify-content:flex-start}
  .marca{display:block;font-weight:700;font-size:19px;line-height:1.2;padding:0 6px 24px}
  .marca small{display:block;font-weight:400;font-size:13px;color:var(--suave);margin-top:4px}
  .app{max-width:none;margin:0 0 0 240px;padding:32px 40px 48px}
  .topo{margin-bottom:24px;align-items:flex-end}
  .topo h1{font-size:32px}
  .topo-resumo{display:flex;gap:10px}
  .topo-resumo span{padding:8px 14px;border-radius:999px;background:#F4F6F5;border:1px solid var(--linha);font-size:14px;color:var(--suave);box-shadow:inset 0 2px 3px rgba(24,33,30,.08)}
  .topo-resumo b{color:var(--tinta)}
  .filhos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:22px;align-items:start}
  .filho{margin:0;padding:22px}
  .toast{bottom:32px;left:calc(50% + 120px)}
  .lista-aparelhos{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
  .horarios-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
  .filhos-grid{gap:24px}
  .horarios-grid .horario{margin:0}
}

/* ============ Painel real ============ */
.info-filho{min-width:0;flex:1}
.filtro-linha{font-size:13px;color:var(--suave);margin-top:4px}
.nota.topo-nota{margin:0 0 14px}
.k3[aria-busy=true]{transform:translateY(calc(var(--k-alt) - 1px));box-shadow:inset 0 2px 5px rgba(24,33,30,.16),0 1px 0 var(--k-lado);cursor:progress}
.pw[aria-busy=true]{transform:translateY(2px);cursor:progress}
.nav .sair{margin-top:auto}
@media (min-width:960px){.nav div{height:100%}.nav .sair{margin-top:auto}}
.vazio{padding:16px;border-radius:16px;background:var(--superficie);border:1px dashed var(--k-borda);color:var(--suave)}
.carregando{color:var(--suave);padding:24px 0}

/* horários */
.horario{display:flex;align-items:center;gap:12px}
.horario .info{flex:1;min-width:0}
.horario .apagar{padding:8px 12px;border-radius:12px;font-size:14px;font-weight:700;color:var(--parar);--k-alt:3px}
.form-horario{margin-top:20px;padding:18px;border-radius:20px;background:var(--superficie);border:1px solid var(--linha);box-shadow:0 2px 0 #D2D9D4;display:grid;gap:14px;max-width:720px}
.form-horario h2{font-size:19px}
.campo{display:grid;gap:6px}
.campo>span{font-size:14px;font-weight:700}
fieldset.campo{border:0;padding:0;margin:0;min-width:0}
.campos-linha{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.form-horario select,.form-horario input[type=time],.login input{padding:10px 12px;border:1px solid var(--k-borda);border-radius:12px;background:#F4F6F5;font-size:16px;box-shadow:inset 0 2px 4px rgba(24,33,30,.12);width:100%}
.dias{display:flex;flex-wrap:wrap;gap:8px}
.dias label{position:relative}
.dias input{position:absolute;opacity:0;width:1px;height:1px}
.dias span{display:inline-block;padding:8px 12px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;--k-alt:3px}
.dias input:checked+span{--k-top:#16836B;--k-bot:#0E6B57;--k-borda:#0B5A49;--k-lado:#07463A;color:#fff}
.dias input:focus-visible+span{outline:3px solid var(--foco);outline-offset:3px}
.form-horario .salvar{justify-self:start;padding:11px 18px;border-radius:12px;font-weight:700}
.erro-form{color:var(--parar);font-size:14px;font-weight:600}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login form{width:100%;max-width:380px;background:var(--superficie);border:1px solid var(--linha);border-radius:24px;padding:28px;display:grid;gap:16px;box-shadow:0 3px 0 #D2D9D4,0 18px 30px -18px rgba(24,33,30,.35)}
.login h1{font-size:26px;line-height:1.15}
.login p{color:var(--suave);font-size:15px}
.login button{padding:12px 18px;border-radius:14px;font-weight:700;font-size:16px}
.dono{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:13px;color:var(--suave)}
.dono select{padding:5px 8px;border:1px solid var(--k-borda);border-radius:10px;background:#F4F6F5;font-size:14px;color:var(--tinta);box-shadow:inset 0 1px 3px rgba(24,33,30,.12)}
.aparelho{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;column-gap:12px;row-gap:10px}
.aparelho .dono{grid-column:1/-1;margin:0;padding-top:10px;border-top:1px solid var(--linha)}
.dono span{white-space:nowrap}