/* ───────────────────────────────────────────────────────────────
   Direção "Guarda-sol" — Missão Jesus no Litoral.

   A copa listrada de laranja e azul abre o app; o painel da função é
   a própria copa; a hora de cada saída vive num gomo de cor. Nada de
   canto reto: a tela é redonda como o guarda-sol da praia.

   As três cores da missão fazem trabalho semântico, não decoração:
     laranja do colete  → Missão   (você veste e sai)
     amarelo do sol     → QG       (cozinha e limpeza, fica)
     azul do chapéu     → Tenda    (a tenda, a oração)

   Calibrado para ser lido na areia, ao meio-dia, de relance.
   ─────────────────────────────────────────────────────────────── */
:root{
  --ground:#FDF1DC; --surface:#FFFFFF; --sunk:#F4E5CB;
  --ink:#1D3B66; --ink-2:#4F668C; --muted:#8497B5;
  --rule:#EBDCC1; --rule-2:#E2D2B6; --alert:#C33B14;

  --laranja:#E8621C; --laranja-claro:#F2922B; --cobalto:#2A5CAB; --sol:#F7B733;

  --own:#E8621C; --own-2:#F2922B; --own-ink:#FFFFFF; --own-soft:#FFE8CE; --own-sub:#A8683A;
  --sombra:0 14px 30px -20px rgba(29,59,102,.85);

  --f-display:'Fredoka',system-ui,-apple-system,sans-serif;
  --f-body:'Fredoka',system-ui,-apple-system,sans-serif;
  --f-label:'Archivo',system-ui,sans-serif;

  /* Visual único, de propósito: o app é lido na areia, ao meio-dia. */
  color-scheme:light;
}
[data-func="qg"]   { --own:#B87400; --own-2:#F7B733; --own-ink:#FFFFFF; --own-soft:#FFF0C9; --own-sub:#946212; }
[data-func="tenda"]{ --own:#2A5CAB; --own-2:#4C86D4; --own-ink:#FFFFFF; --own-soft:#DEE9F9; --own-sub:#456494; }
[data-func="geral"]{ --own:#1D3B66; --own-2:#3C5C8C; --own-ink:#FFFFFF; --own-soft:#E4E9F1; --own-sub:#5A6C88; }

*{box-sizing:border-box}
/* Uma classe com display:flex vence o atributo hidden por especificidade.
   Sem esta linha, esconder um bloco pelo hidden simplesmente não funciona. */
[hidden]{display:none !important;}

body{
  background-color:var(--ground); color:var(--ink);
  background-image:
    radial-gradient(circle at 22% 28%, rgba(232,98,28,.05) 0 1.1px, transparent 1.6px),
    radial-gradient(circle at 68% 64%, rgba(42,92,171,.045) 0 1.1px, transparent 1.6px),
    radial-gradient(circle at 45% 85%, rgba(247,183,51,.06) 0 1.2px, transparent 1.7px);
  background-size:23px 23px, 31px 31px, 41px 41px;
  font-family:var(--f-body); font-size:16px; line-height:1.45;
  margin:0; padding:0;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:440px; margin:0 auto; padding-inline:16px;}

/* ── o céu: o mar e o sol grande, como no logo ──────────────── */
.ceu{
  position:relative; overflow:hidden; padding-block:26px 24px;
  background:linear-gradient(170deg,#6FA0DB 0%,#4A83CB 55%,#3C74C0 100%);
}
/* Ancorados ao centro, não à borda da tela: em telas largas o sol
   continua junto do conteúdo, e não perdido no canto. */
.sol{
  position:absolute; top:24px; left:50%; margin-left:84px;
  width:176px; height:176px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #FBB040, #F07C24); opacity:.93;
}
.anel{
  position:absolute; top:10px; left:50%; margin-left:68px;
  width:212px; height:212px; border-radius:50%;
  border:2px solid rgba(255,255,255,.3);
}
.ceu .wrap{position:relative;}
.onda{display:block; width:100%; height:58px; background:#3C74C0; margin-bottom:-1px;}

/* ── a marca oficial, dentro do céu ─────────────────────────── */
.brand{display:flex; align-items:center; gap:12px;}
.marca-jnl{width:46px; height:43px; flex:none;}
.brandtx{flex:1; min-width:0; line-height:1.05;}
.brandtx .nome{font-family:var(--f-display); font-size:21px; font-weight:600; color:#FFFFFF;}
.brandtx .sub{font-family:var(--f-label); font-size:9.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.8); margin-top:5px;}

/* ── identidade da equipe: pastilha branca sobre o mar ─────── */
.ident{
  display:flex; align-items:center; gap:13px; margin-top:20px;
  background:rgba(255,255,255,.95); border-radius:26px;
  padding:9px 14px 9px 9px; box-shadow:0 12px 28px -14px rgba(8,30,66,.85);
}
/* Santinho: topo em arco, como a estampa que se leva no bolso.
   O fundo é o desenho de reserva — some sob a imagem quando ela existe. */
.santo{
  width:62px; height:78px; flex:none; overflow:hidden;
  border-radius:31px 31px 8px 8px;
  /* A imagem vem primeiro na pilha; o degradê é a camada de baixo. */
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C96A16' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='3.6'/%3E%3Cpath d='M4.5 20c1.6-4 4.2-6 7.5-6s5.9 2 7.5 6'/%3E%3C/svg%3E") center/28px no-repeat,
             linear-gradient(150deg,#FFE3BE,#FFC98A);
  box-shadow:0 0 0 2px rgba(255,255,255,.9);
}
.santo img{width:100%; height:100%; object-fit:cover; display:block;}
.identtx{flex:1; min-width:0;}
.identtx .lbl{font-family:var(--f-label); font-size:9.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--muted);}
.identtx .nm{font-family:var(--f-display); font-size:17.5px; font-weight:600; line-height:1.14; margin-top:1px; text-wrap:balance;}
.trocar{
  flex:none; font-family:var(--f-label); font-size:10px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  background:transparent; border:1.5px solid var(--rule-2);
  border-radius:100px; padding:7px 13px; cursor:pointer;
}
.trocar:hover{border-color:var(--laranja); color:var(--laranja);}

/* ── abas ──────────────────────────────────────────────────── */
.tabs{display:flex; gap:8px; margin-top:14px;}
.tab{
  flex:1; cursor:pointer; padding:11px 4px;
  font-family:var(--f-display); font-size:14px; font-weight:500;
  color:rgba(255,255,255,.85); background:transparent;
  border:1.5px solid rgba(255,255,255,.42); border-radius:100px;
}
.tab[aria-pressed="true"]{background:#FFFFFF; border-color:#FFFFFF; color:var(--ink); font-weight:600;}
.tab:disabled{opacity:.4; cursor:default;}

/* ── escolha de equipe ─────────────────────────────────────── */
#escolha{display:flex; flex-direction:column; gap:9px; padding-block:22px;}
#escolha .lbl{font-family:var(--f-label); font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 6px;}
#escolha .eq{
  display:flex; align-items:center; gap:14px;
  font-family:var(--f-display); font-size:17px; font-weight:500; text-align:left;
  cursor:pointer; padding:10px 18px 10px 10px; border:0; border-radius:26px;
  background:var(--surface); color:var(--ink); box-shadow:var(--sombra);
}
#escolha .eq .mini{
  width:44px; height:55px; flex:none; overflow:hidden;
  border-radius:22px 22px 6px 6px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C96A16' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='3.6'/%3E%3Cpath d='M4.5 20c1.6-4 4.2-6 7.5-6s5.9 2 7.5 6'/%3E%3C/svg%3E") center/21px no-repeat,
             linear-gradient(150deg,#FFE3BE,#FFC98A);
}
#escolha .eq .mini img{width:100%; height:100%; object-fit:cover; display:block;}
#escolha .eq:hover{color:var(--laranja);}
.tab:focus-visible,#escolha .eq:focus-visible,.trocar:focus-visible,.espiar .dia:focus-visible{
  outline:3px solid var(--sol); outline-offset:3px;
}

/* ── cabeçalho do dia ──────────────────────────────────────── */
.dayhead{padding-block:22px 0;}
.dayhead h1{font-family:var(--f-display); font-size:26px; font-weight:600; line-height:1.12; margin:0; text-wrap:balance;}
.dayhead .meta{font-family:var(--f-label); font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:8px;}

/* ── função: a própria copa vira o painel ──────────────────── */
.func{
  margin-top:20px; padding:26px 24px;
  background:linear-gradient(150deg, var(--own-2), var(--own));
  color:var(--own-ink); text-align:center;
  border-radius:160px 160px 32px 32px; box-shadow:var(--sombra);
}
.func .kicker{font-family:var(--f-label); font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; opacity:.92;}
.func h2{font-family:var(--f-display); font-size:40px; font-weight:600; letter-spacing:-.02em; line-height:1; margin:9px 0 0; text-wrap:balance;}
.func p{font-size:14.5px; font-weight:400; line-height:1.45; margin:11px 0 0; opacity:.95;}

/* ── saídas: cada hora num gomo de cor ─────────────────────── */
.saidas{margin-top:22px;}
.saidas .hd{font-family:var(--f-label); font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:13px;}
.saida{
  display:grid; grid-template-columns:82px 1fr; align-items:stretch;
  background:var(--surface); border-radius:26px; overflow:hidden;
  box-shadow:var(--sombra); margin-bottom:12px;
}
/* Os gomos do guarda-sol: as três cores se revezam saída a saída.
   A cor da função vive na cúpula e nos blocos marcados; aqui o que
   manda é o ritmo listrado da copa. */
.saidas .saida:nth-child(3n+2) .hr{background:var(--laranja);}
.saidas .saida:nth-child(3n+3) .hr{background:var(--cobalto);}
.saidas .saida:nth-child(3n+4) .hr{background:var(--laranja-claro);}
.saida .hr{
  background:var(--laranja); color:#FFFFFF;
  display:grid; place-items:center; text-align:center;
  font-family:var(--f-display); font-size:16px; font-weight:600;
  font-variant-numeric:tabular-nums; padding:16px 6px;
}
.saida > div:last-child{padding:15px 18px; min-width:0;}
.saida .dest{font-family:var(--f-display); font-size:15.5px; font-weight:600; line-height:1.2; text-wrap:balance;}
.saida .veic{font-size:13px; color:var(--ink-2); margin-top:4px;}
.saida .veic b{font-weight:600; color:var(--cobalto);}
.saida .volta{font-family:var(--f-label); font-size:11.5px; font-weight:500; color:var(--muted); margin-top:3px; font-variant-numeric:tabular-nums;}
.nosai{
  background:var(--own-soft); border-radius:26px; padding:22px 22px;
  text-align:center;
}
.nosai b{font-family:var(--f-display); font-size:25px; font-weight:600; line-height:1.1; display:block; color:var(--own);}
.nosai span{font-size:14.5px; color:var(--ink-2); display:block; margin-top:7px;}

/* ── avisos ────────────────────────────────────────────────── */
.avisos{margin-top:20px; display:flex; flex-direction:column; gap:11px;}
.aviso{background:var(--sunk); border-radius:22px; padding:14px 18px; font-size:14.5px; color:var(--ink-2);}
.aviso b{display:block; font-family:var(--f-label); font-size:9.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:5px;}
.aviso.minha{background:var(--own-soft);}
.aviso.minha b{color:var(--own);}

/* ── programação ───────────────────────────────────────────── */
.secthead{margin-top:30px; margin-bottom:12px;}
.secthead h3{font-family:var(--f-label); font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0;}

.prog{
  background:var(--surface);
  border:2px solid #E4CFA8;
  border-radius:28px; padding:2px 16px;
  box-shadow:0 3px 0 rgba(29,59,102,.05), 0 14px 26px -16px rgba(29,59,102,.6);
}
.row{
  display:grid; grid-template-columns:58px 1fr; gap:13px;
  padding:14px 0; align-items:baseline;
  border-bottom:1px solid var(--rule);
}
.row:last-child{border-bottom:0;}
.row .h{font-family:var(--f-display); font-size:14px; font-weight:500; font-variant-numeric:tabular-nums; color:var(--muted);}
.row .t{font-size:15px; line-height:1.34;}
.row .sub{font-size:12.5px; color:var(--muted); margin-top:3px;}
.row.meu{
  background:var(--own-soft); border-radius:20px;
  padding:14px 14px; margin-inline:-12px; margin-block:4px;
  border-bottom-color:transparent;
}
.row.meu + .row{border-top:1px solid var(--rule);}
.row.meu .h{color:var(--own); font-weight:600;}
.row.meu .t{font-family:var(--f-display); font-size:15.5px; font-weight:600;}
.row.meu .sub{color:var(--own-sub);}
.row.fora .t{color:var(--muted); text-decoration:line-through; text-decoration-thickness:2px;}
.row.fora .sub{text-decoration:none; color:var(--alert);}

.tag{
  display:inline-block; font-family:var(--f-label); font-size:9.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  padding:3px 9px; border-radius:100px; margin-bottom:6px;
  background:var(--own); color:var(--own-ink);
}
.tag.warn{background:var(--alert); color:#FFFFFF;}

/* ── rodapé, selo e estados vazios ─────────────────────────── */
.foot{margin-top:30px; font-size:13px; color:var(--muted); display:flex; flex-direction:column; gap:6px;}
.foot .dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--laranja); margin-right:8px; vertical-align:middle;}
.selo{
  margin:26px -16px 0; padding:20px 22px 28px;
  border-top:2px dashed var(--rule-2);
  display:flex; align-items:center; gap:13px;
}
.marca-rcc{width:44px; height:35px; flex:none;}
.selotx{flex:1; min-width:0;}
.selotx .lbl{font-family:var(--f-label); font-size:9.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--muted);}
.selotx .org{font-size:13.5px; font-weight:500; line-height:1.25; margin-top:3px; color:#2E6B3C;}
.selotx .org span{color:var(--ink-2);}

.vazio{padding-block:28px 18px; color:var(--ink-2); font-size:15.5px; text-align:center; line-height:1.6;}
.espiar{display:flex; flex-direction:column; gap:9px; padding-bottom:10px;}
.espiar .lbl{font-family:var(--f-label); font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 4px;}
.espiar .dia{
  font-family:var(--f-display); font-size:15px; font-weight:500; text-align:left;
  cursor:pointer; padding:13px 18px; border:0; border-radius:22px;
  background:var(--surface); color:var(--ink); box-shadow:var(--sombra);
}
.espiar .dia:hover{color:var(--laranja);}