<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotina Imperatriz — {{NOME}}</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
  :root {
    --dourado: #D4AF37;
    --dourado-claro: #E8C76B;
    --dourado-escuro: #A8862A;
    --preto: #0A0A0A;
    --preto-suave: #1C1C1C;
    --creme: #FAF8F3;
    --creme-escuro: #F0EBDD;
    --verde: #1A3A2E;
    --verde-claro: #2A5A47;
    --cinza: #6B6B6B;
    --cinza-claro: #D9D5C8;
    --amarelo-alerta: #F4D35E;
    --verde-success: #4A7C59;
    --vermelho-alerta: #B0413E;
    --shadow: 0 4px 24px rgba(10, 10, 10, 0.08);
    --shadow-hover: 0 8px 32px rgba(10, 10, 10, 0.12);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    font-family: 'Inter', sans-serif;
    background: var(--creme);
    color: var(--preto);
    line-height: 1.6;
    min-height: 100vh;
  }

  h1, h2, h3, h4 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  /* ============ HEADER ============ */
  .header {
    background: linear-gradient(180deg, var(--preto) 0%, var(--preto-suave) 100%);
    color: var(--creme);
    padding: 28px 32px;
    border-bottom: 3px solid var(--dourado);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow);
  }

  .header-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
  }

  .logo {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .logo-mark {
    width: 44px;
    height: 44px;
    border: 2px solid var(--dourado);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 22px;
    color: var(--dourado);
    background: rgba(212, 175, 55, 0.08);
  }

  .logo-text h1 {
    font-size: 22px;
    color: var(--creme);
    line-height: 1.1;
  }

  .logo-text .subtitle {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dourado);
    margin-top: 4px;
  }

  .user-info {
    text-align: right;
  }

  .user-info .nome {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    color: var(--creme);
    font-weight: 600;
  }

  .user-info .nivel {
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--dourado);
    margin-top: 4px;
  }

  /* ============ CONTAINER ============ */
  .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px;
  }

  /* ============ BANNER ALERTA ============ */
  .alerta {
    padding: 16px 24px;
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: 14px;
    font-weight: 500;
    display: none;
    align-items: center;
    gap: 12px;
    animation: fadeIn 0.4s ease;
  }

  .alerta.ativo { display: flex; }

  .alerta.amarelo {
    background: rgba(244, 211, 94, 0.18);
    border-left: 4px solid var(--amarelo-alerta);
    color: var(--preto);
  }

  .alerta.verde {
    background: rgba(74, 124, 89, 0.15);
    border-left: 4px solid var(--verde-success);
    color: var(--verde);
  }

  .alerta-icone {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 700;
  }

  /* ============ INDICADORES TOPO ============ */
  .indicadores-topo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
  }

  .indicador-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--shadow);
    border-top: 3px solid var(--dourado);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .indicador-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
  }

  .indicador-label {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cinza);
    font-weight: 500;
  }

  .indicador-valor {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    font-weight: 700;
    color: var(--preto);
    margin-top: 8px;
    line-height: 1;
  }

  .indicador-valor.dourado { color: var(--dourado-escuro); }
  .indicador-valor.verde { color: var(--verde); }

  .indicador-sub {
    font-size: 12px;
    color: var(--cinza);
    margin-top: 6px;
  }

  /* Barra de progresso */
  .progresso-barra {
    height: 6px;
    background: var(--creme-escuro);
    border-radius: 3px;
    margin-top: 12px;
    overflow: hidden;
  }

  .progresso-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--dourado-escuro), var(--dourado));
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* ============ PROJETO ANCORA ============ */
  .projeto-ancora {
    background: var(--verde);
    color: var(--creme);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow);
  }

  .projeto-ancora .label {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--dourado);
    font-weight: 500;
  }

  .projeto-ancora .nome-projeto {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 600;
    margin-top: 2px;
  }

  /* ============ TABS ============ */
  .tabs {
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 32px;
  }

  .tabs-nav {
    display: flex;
    background: var(--creme-escuro);
    overflow-x: auto;
    border-bottom: 1px solid var(--cinza-claro);
    scrollbar-width: thin;
  }

  .tabs-nav::-webkit-scrollbar { height: 4px; }
  .tabs-nav::-webkit-scrollbar-thumb { background: var(--dourado); border-radius: 2px; }

  .tab-btn {
    background: transparent;
    border: none;
    padding: 18px 24px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cinza);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .tab-btn:hover {
    color: var(--preto);
    background: rgba(212, 175, 55, 0.06);
  }

  .tab-btn.ativo {
    color: var(--preto);
    border-bottom-color: var(--dourado);
    background: white;
  }

  .tab-content {
    padding: 32px;
    display: none;
    animation: fadeIn 0.4s ease;
  }

  .tab-content.ativo { display: block; }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ============ CONTEUDO DAS TABS ============ */
  .tab-title {
    font-size: 28px;
    color: var(--preto);
    margin-bottom: 8px;
  }

  .tab-subtitle {
    font-size: 14px;
    color: var(--cinza);
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--cinza-claro);
  }

  /* Bloco de turno (manhã, tarde, noite) */
  .turno {
    background: var(--creme);
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 20px;
    border-left: 3px solid var(--dourado);
  }

  .turno-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
  }

  .turno-titulo {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--preto);
  }

  .turno-horario {
    font-size: 12px;
    color: var(--cinza);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* Checkbox custom */
  .check-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .check-item:hover {
    opacity: 0.85;
  }

  .check-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .check-box {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 2px solid var(--cinza-claro);
    border-radius: 4px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-top: 2px;
  }

  .check-item:hover .check-box {
    border-color: var(--dourado);
  }

  .check-item input:checked + .check-box {
    background: var(--dourado);
    border-color: var(--dourado);
    animation: checkPop 0.3s ease;
  }

  @keyframes checkPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
  }

  .check-box::after {
    content: '';
    width: 6px;
    height: 11px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.2s ease;
    margin-bottom: 2px;
  }

  .check-item input:checked + .check-box::after {
    transform: rotate(45deg) scale(1);
  }

  .check-label {
    font-size: 14px;
    color: var(--preto);
    line-height: 1.5;
    flex: 1;
  }

  .check-item input:checked ~ .check-label {
    color: var(--cinza);
    text-decoration: line-through;
    text-decoration-color: var(--dourado);
  }

  /* Dia da semana */
  .dia-semana {
    background: white;
    border: 1px solid var(--cinza-claro);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 16px;
    transition: box-shadow 0.2s ease;
  }

  .dia-semana:hover {
    box-shadow: var(--shadow);
  }

  .dia-semana-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--creme-escuro);
  }

  .dia-nome {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--preto);
  }

  .dia-funcao {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dourado-escuro);
    font-weight: 600;
  }

  .dia-turnos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
  }

  .dia-turno-bloco {
    background: var(--creme);
    border-radius: 8px;
    padding: 14px;
  }

  .dia-turno-bloco .turno-mini-titulo {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cinza);
    margin-bottom: 8px;
    font-weight: 600;
  }

  /* Ciclo quinzenal */
  .ciclo {
    background: white;
    border: 1px solid var(--cinza-claro);
    border-left: 4px solid var(--verde);
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 16px;
  }

  .ciclo-numero {
    font-family: 'Playfair Display', serif;
    font-size: 14px;
    color: var(--dourado-escuro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }

  .ciclo-titulo {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--preto);
    margin-bottom: 12px;
  }

  /* Semana do lançamento */
  .semana-lancamento {
    background: linear-gradient(135deg, white 0%, var(--creme) 100%);
    border: 1px solid var(--cinza-claro);
    border-radius: 10px;
    padding: 24px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
  }

  .semana-lancamento::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--dourado), var(--dourado-escuro));
  }

  .semana-lancamento-numero {
    font-family: 'Playfair Display', serif;
    font-size: 12px;
    color: var(--dourado-escuro);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
  }

  .semana-lancamento-titulo {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--preto);
    margin: 4px 0 16px;
  }

  /* Pulso de Domingo */
  .pulso-pergunta {
    background: white;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 14px;
    box-shadow: var(--shadow);
    border-left: 3px solid var(--dourado);
  }

  .pulso-numero {
    display: inline-block;
    width: 28px;
    height: 28px;
    background: var(--dourado);
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 28px;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 14px;
    margin-right: 10px;
  }

  .pulso-texto {
    font-size: 15px;
    color: var(--preto);
    line-height: 1.5;
    display: inline;
  }

  /* Indicadores KPI */
  .kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
  }

  .kpi-card {
    background: white;
    border: 1px solid var(--cinza-claro);
    border-radius: 10px;
    padding: 20px;
    transition: all 0.2s ease;
  }

  .kpi-card:hover {
    border-color: var(--dourado);
    box-shadow: var(--shadow);
  }

  .kpi-nome {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cinza);
    font-weight: 600;
  }

  .kpi-descricao {
    font-size: 14px;
    color: var(--preto);
    margin-top: 8px;
    line-height: 1.5;
  }

  .kpi-meta {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    color: var(--dourado-escuro);
    margin-top: 10px;
    font-weight: 600;
  }

  /* Arsenal de skills */
  .arsenal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
  }

  .arsenal-card {
    background: white;
    border: 1px solid var(--cinza-claro);
    border-radius: 10px;
    padding: 20px;
    text-decoration: none;
    color: var(--preto);
    transition: all 0.2s ease;
    display: block;
  }

  .arsenal-card:hover {
    border-color: var(--dourado);
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
  }

  .arsenal-momento {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dourado-escuro);
    font-weight: 600;
  }

  .arsenal-skill {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--preto);
    margin: 6px 0 8px;
  }

  .arsenal-desc {
    font-size: 13px;
    color: var(--cinza);
    line-height: 1.5;
  }

  /* ============ FOOTER ============ */
  .footer {
    background: var(--preto);
    color: var(--creme);
    padding: 32px;
    text-align: center;
    border-top: 3px solid var(--dourado);
  }

  .footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
  }

  .footer-text {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: var(--dourado);
    font-size: 14px;
  }

  .footer-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  .btn {
    background: var(--dourado);
    color: var(--preto);
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .btn:hover {
    background: var(--dourado-claro);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
  }

  .btn.outline {
    background: transparent;
    color: var(--dourado);
    border: 1px solid var(--dourado);
  }

  .btn.outline:hover {
    background: var(--dourado);
    color: var(--preto);
  }

  /* ============ RESPONSIVO ============ */
  @media (max-width: 768px) {
    .header { padding: 20px 16px; }
    .header-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
    .user-info { text-align: left; }
    .container { padding: 20px 16px; }
    .indicador-valor { font-size: 28px; }
    .tab-btn { padding: 14px 18px; font-size: 12px; }
    .tab-content { padding: 20px; }
    .tab-title { font-size: 22px; }
    .dia-turnos { grid-template-columns: 1fr; }
    .footer { padding: 24px 16px; }
    .footer-inner { flex-direction: column; }
  }

  /* ============ PRINT ============ */
  @media print {
    .header, .footer, .tabs-nav, .alerta { display: none !important; }
    .tab-content { display: block !important; padding: 0; }
    .container { padding: 16px; }
    body { background: white; }
    .indicador-card, .turno, .dia-semana, .ciclo, .semana-lancamento, .pulso-pergunta, .kpi-card, .arsenal-card {
      box-shadow: none !important;
      border: 1px solid #ccc;
      page-break-inside: avoid;
    }
    .check-box { border: 1.5px solid #333 !important; }
  }
</style>
</head>
<body>

<!-- ============ HEADER ============ -->
<header class="header">
  <div class="header-inner">
    <div class="logo">
      <div class="logo-mark">R</div>
      <div class="logo-text">
        <h1>Rotina Imperatriz</h1>
        <div class="subtitle">Mentoria Imperio IA</div>
      </div>
    </div>
    <div class="user-info">
      <div class="nome">{{NOME}}</div>
      <div class="nivel">Nivel {{NIVEL}}</div>
    </div>
  </div>
</header>

<!-- ============ MAIN ============ -->
<main class="container">

  <!-- BANNERS DE ALERTA -->
  <div id="alerta-baixo" class="alerta amarelo" role="status" aria-live="polite">
    <span class="alerta-icone">!</span>
    <span>Sua semana ta abaixo de 70% de cumprimento. Pulso de domingo e hoje?</span>
  </div>
  <div id="alerta-completo" class="alerta verde" role="status" aria-live="polite">
    <span class="alerta-icone">&#10003;</span>
    <span>Semana 100% cumprida. Imperatriz.</span>
  </div>

  <!-- INDICADORES TOPO -->
  <section class="indicadores-topo" aria-label="Indicadores principais">
    <div class="indicador-card">
      <div class="indicador-label">Cumprimento Semanal</div>
      <div class="indicador-valor dourado" id="pct-cumprimento">0%</div>
      <div class="indicador-sub" id="pct-detalhe">0 de 0 blocos concluidos</div>
      <div class="progresso-barra"><div class="progresso-fill" id="pct-fill" style="width: 0%"></div></div>
    </div>
    <div class="indicador-card">
      <div class="indicador-label">Dias ate Proxima Imersao</div>
      <div class="indicador-valor verde" id="dias-imersao">{{DIAS_IMERSAO}}</div>
      <div class="indicador-sub">{{DATA_IMERSAO}}</div>
    </div>
    <div class="indicador-card">
      <div class="indicador-label">Streak da Semana</div>
      <div class="indicador-valor" id="streak-semana">0</div>
      <div class="indicador-sub">dias consecutivos no ritmo</div>
    </div>
    <div class="indicador-card">
      <div class="indicador-label">Hoje</div>
      <div class="indicador-valor dourado" id="data-hoje">--/--</div>
      <div class="indicador-sub" id="dia-semana-hoje">--</div>
    </div>
  </section>

  <!-- PROJETO ANCORA -->
  <section class="projeto-ancora">
    <div>
      <div class="label">Projeto-Ancora do Eixo</div>
      <div class="nome-projeto">{{PROJETO_ANCORA}}</div>
    </div>
  </section>

  <!-- TABS -->
  <section class="tabs">
    <nav class="tabs-nav" role="tablist" aria-label="Navegacao das rotinas">
      <button class="tab-btn ativo" data-tab="diario" role="tab" aria-selected="true">Diario</button>
      <button class="tab-btn" data-tab="semanal" role="tab" aria-selected="false">Semanal</button>
      <button class="tab-btn" data-tab="quinzenal" role="tab" aria-selected="false">Quinzenal</button>
      <button class="tab-btn" data-tab="mensal" role="tab" aria-selected="false">Mensal</button>
      <button class="tab-btn" data-tab="pulso" role="tab" aria-selected="false">Pulso</button>
      <button class="tab-btn" data-tab="indicadores" role="tab" aria-selected="false">Indicadores</button>
      <button class="tab-btn" data-tab="arsenal" role="tab" aria-selected="false">Arsenal</button>
    </nav>

    <!-- TAB DIARIO -->
    <div class="tab-content ativo" id="tab-diario" role="tabpanel">
      <h2 class="tab-title">Rotina Diaria</h2>
      <p class="tab-subtitle">3 turnos sagrados. Marque conforme cumpre. Sem culpa, com presenca.</p>

      <div class="turno">
        <div class="turno-header">
          <h3 class="turno-titulo">Manha</h3>
          <span class="turno-horario">6h00 - 12h00</span>
        </div>
        <label class="check-item">
          <input type="checkbox" id="diario-manha-1" data-categoria="diario">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">{{BLOCO_MANHA_1}}</span>
        </label>
        <label class="check-item">
          <input type="checkbox" id="diario-manha-2" data-categoria="diario">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">{{BLOCO_MANHA_2}}</span>
        </label>
        <label class="check-item">
          <input type="checkbox" id="diario-manha-3" data-categoria="diario">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">{{BLOCO_MANHA_3}}</span>
        </label>
        <label class="check-item">
          <input type="checkbox" id="diario-manha-4" data-categoria="diario">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">{{BLOCO_MANHA_4}}</span>
        </label>
      </div>

      <div class="turno">
        <div class="turno-header">
          <h3 class="turno-titulo">Tarde</h3>
          <span class="turno-horario">13h00 - 18h00</span>
        </div>
        <label class="check-item">
          <input type="checkbox" id="diario-tarde-1" data-categoria="diario">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">{{BLOCO_TARDE_1}}</span>
        </label>
        <label class="check-item">
          <input type="checkbox" id="diario-tarde-2" data-categoria="diario">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">{{BLOCO_TARDE_2}}</span>
        </label>
        <label class="check-item">
          <input type="checkbox" id="diario-tarde-3" data-categoria="diario">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">{{BLOCO_TARDE_3}}</span>
        </label>
        <label class="check-item">
          <input type="checkbox" id="diario-tarde-4" data-categoria="diario">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">{{BLOCO_TARDE_4}}</span>
        </label>
      </div>

      <div class="turno">
        <div class="turno-header">
          <h3 class="turno-titulo">Noite</h3>
          <span class="turno-horario">19h00 - 22h00</span>
        </div>
        <label class="check-item">
          <input type="checkbox" id="diario-noite-1" data-categoria="diario">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">{{BLOCO_NOITE_1}}</span>
        </label>
        <label class="check-item">
          <input type="checkbox" id="diario-noite-2" data-categoria="diario">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">{{BLOCO_NOITE_2}}</span>
        </label>
        <label class="check-item">
          <input type="checkbox" id="diario-noite-3" data-categoria="diario">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">{{BLOCO_NOITE_3}}</span>
        </label>
      </div>
    </div>

    <!-- TAB SEMANAL -->
    <div class="tab-content" id="tab-semanal" role="tabpanel">
      <h2 class="tab-title">Rotina Semanal</h2>
      <p class="tab-subtitle">Cada dia tem funcao. Cada turno tem entrega. Imperatriz nao improvisa a semana.</p>

      <div class="dia-semana">
        <div class="dia-semana-header">
          <span class="dia-nome">Segunda</span>
          <span class="dia-funcao">{{SEG_FUNCAO}}</span>
        </div>
        <div class="dia-turnos">
          <div class="dia-turno-bloco">
            <div class="turno-mini-titulo">Manha</div>
            <label class="check-item">
              <input type="checkbox" id="semanal-seg-manha" data-categoria="semanal">
              <span class="check-box" aria-hidden="true"></span>
              <span class="check-label">{{SEG_MANHA}}</span>
            </label>
          </div>
          <div class="dia-turno-bloco">
            <div class="turno-mini-titulo">Tarde</div>
            <label class="check-item">
              <input type="checkbox" id="semanal-seg-tarde" data-categoria="semanal">
              <span class="check-box" aria-hidden="true"></span>
              <span class="check-label">{{SEG_TARDE}}</span>
            </label>
          </div>
          <div class="dia-turno-bloco">
            <div class="turno-mini-titulo">Noite</div>
            <label class="check-item">
              <input type="checkbox" id="semanal-seg-noite" data-categoria="semanal">
              <span class="check-box" aria-hidden="true"></span>
              <span class="check-label">{{SEG_NOITE}}</span>
            </label>
          </div>
        </div>
      </div>

      <div class="dia-semana">
        <div class="dia-semana-header">
          <span class="dia-nome">Terca</span>
          <span class="dia-funcao">{{TER_FUNCAO}}</span>
        </div>
        <div class="dia-turnos">
          <div class="dia-turno-bloco">
            <div class="turno-mini-titulo">Manha</div>
            <label class="check-item">
              <input type="checkbox" id="semanal-ter-manha" data-categoria="semanal">
              <span class="check-box" aria-hidden="true"></span>
              <span class="check-label">{{TER_MANHA}}</span>
            </label>
          </div>
          <div class="dia-turno-bloco">
            <div class="turno-mini-titulo">Tarde</div>
            <label class="check-item">
              <input type="checkbox" id="semanal-ter-tarde" data-categoria="semanal">
              <span class="check-box" aria-hidden="true"></span>
              <span class="check-label">{{TER_TARDE}}</span>
            </label>
          </div>
          <div class="dia-turno-bloco">
            <div class="turno-mini-titulo">Noite</div>
            <label class="check-item">
              <input type="checkbox" id="semanal-ter-noite" data-categoria="semanal">
              <span class="check-box" aria-hidden="true"></span>
              <span class="check-label">{{TER_NOITE}}</span>
            </label>
          </div>
        </div>
      </div>

      <div class="dia-semana">
        <div class="dia-semana-header">
          <span class="dia-nome">Quarta</span>
          <span class="dia-funcao">{{QUA_FUNCAO}}</span>
        </div>
        <div class="dia-turnos">
          <div class="dia-turno-bloco">
            <div class="turno-mini-titulo">Manha</div>
            <label class="check-item">
              <input type="checkbox" id="semanal-qua-manha" data-categoria="semanal">
              <span class="check-box" aria-hidden="true"></span>
              <span class="check-label">{{QUA_MANHA}}</span>
            </label>
          </div>
          <div class="dia-turno-bloco">
            <div class="turno-mini-titulo">Tarde</div>
            <label class="check-item">
              <input type="checkbox" id="semanal-qua-tarde" data-categoria="semanal">
              <span class="check-box" aria-hidden="true"></span>
              <span class="check-label">{{QUA_TARDE}}</span>
            </label>
          </div>
          <div class="dia-turno-bloco">
            <div class="turno-mini-titulo">Noite</div>
            <label class="check-item">
              <input type="checkbox" id="semanal-qua-noite" data-categoria="semanal">
              <span class="check-box" aria-hidden="true"></span>
              <span class="check-label">{{QUA_NOITE}}</span>
            </label>
          </div>
        </div>
      </div>

      <div class="dia-semana">
        <div class="dia-semana-header">
          <span class="dia-nome">Quinta</span>
          <span class="dia-funcao">{{QUI_FUNCAO}}</span>
        </div>
        <div class="dia-turnos">
          <div class="dia-turno-bloco">
            <div class="turno-mini-titulo">Manha</div>
            <label class="check-item">
              <input type="checkbox" id="semanal-qui-manha" data-categoria="semanal">
              <span class="check-box" aria-hidden="true"></span>
              <span class="check-label">{{QUI_MANHA}}</span>
            </label>
          </div>
          <div class="dia-turno-bloco">
            <div class="turno-mini-titulo">Tarde</div>
            <label class="check-item">
              <input type="checkbox" id="semanal-qui-tarde" data-categoria="semanal">
              <span class="check-box" aria-hidden="true"></span>
              <span class="check-label">{{QUI_TARDE}}</span>
            </label>
          </div>
          <div class="dia-turno-bloco">
            <div class="turno-mini-titulo">Noite</div>
            <label class="check-item">
              <input type="checkbox" id="semanal-qui-noite" data-categoria="semanal">
              <span class="check-box" aria-hidden="true"></span>
              <span class="check-label">{{QUI_NOITE}}</span>
            </label>
          </div>
        </div>
      </div>

      <div class="dia-semana">
        <div class="dia-semana-header">
          <span class="dia-nome">Sexta</span>
          <span class="dia-funcao">{{SEX_FUNCAO}}</span>
        </div>
        <div class="dia-turnos">
          <div class="dia-turno-bloco">
            <div class="turno-mini-titulo">Manha</div>
            <label class="check-item">
              <input type="checkbox" id="semanal-sex-manha" data-categoria="semanal">
              <span class="check-box" aria-hidden="true"></span>
              <span class="check-label">{{SEX_MANHA}}</span>
            </label>
          </div>
          <div class="dia-turno-bloco">
            <div class="turno-mini-titulo">Tarde</div>
            <label class="check-item">
              <input type="checkbox" id="semanal-sex-tarde" data-categoria="semanal">
              <span class="check-box" aria-hidden="true"></span>
              <span class="check-label">{{SEX_TARDE}}</span>
            </label>
          </div>
          <div class="dia-turno-bloco">
            <div class="turno-mini-titulo">Noite</div>
            <label class="check-item">
              <input type="checkbox" id="semanal-sex-noite" data-categoria="semanal">
              <span class="check-box" aria-hidden="true"></span>
              <span class="check-label">{{SEX_NOITE}}</span>
            </label>
          </div>
        </div>
      </div>

      <div class="dia-semana">
        <div class="dia-semana-header">
          <span class="dia-nome">Sabado</span>
          <span class="dia-funcao">{{SAB_FUNCAO}}</span>
        </div>
        <div class="dia-turnos">
          <div class="dia-turno-bloco">
            <div class="turno-mini-titulo">Manha</div>
            <label class="check-item">
              <input type="checkbox" id="semanal-sab-manha" data-categoria="semanal">
              <span class="check-box" aria-hidden="true"></span>
              <span class="check-label">{{SAB_MANHA}}</span>
            </label>
          </div>
          <div class="dia-turno-bloco">
            <div class="turno-mini-titulo">Tarde</div>
            <label class="check-item">
              <input type="checkbox" id="semanal-sab-tarde" data-categoria="semanal">
              <span class="check-box" aria-hidden="true"></span>
              <span class="check-label">{{SAB_TARDE}}</span>
            </label>
          </div>
          <div class="dia-turno-bloco">
            <div class="turno-mini-titulo">Noite</div>
            <label class="check-item">
              <input type="checkbox" id="semanal-sab-noite" data-categoria="semanal">
              <span class="check-box" aria-hidden="true"></span>
              <span class="check-label">{{SAB_NOITE}}</span>
            </label>
          </div>
        </div>
      </div>

      <div class="dia-semana">
        <div class="dia-semana-header">
          <span class="dia-nome">Domingo</span>
          <span class="dia-funcao">{{DOM_FUNCAO}}</span>
        </div>
        <div class="dia-turnos">
          <div class="dia-turno-bloco">
            <div class="turno-mini-titulo">Manha</div>
            <label class="check-item">
              <input type="checkbox" id="semanal-dom-manha" data-categoria="semanal">
              <span class="check-box" aria-hidden="true"></span>
              <span class="check-label">{{DOM_MANHA}}</span>
            </label>
          </div>
          <div class="dia-turno-bloco">
            <div class="turno-mini-titulo">Tarde</div>
            <label class="check-item">
              <input type="checkbox" id="semanal-dom-tarde" data-categoria="semanal">
              <span class="check-box" aria-hidden="true"></span>
              <span class="check-label">{{DOM_TARDE}}</span>
            </label>
          </div>
          <div class="dia-turno-bloco">
            <div class="turno-mini-titulo">Noite</div>
            <label class="check-item">
              <input type="checkbox" id="semanal-dom-noite" data-categoria="semanal">
              <span class="check-box" aria-hidden="true"></span>
              <span class="check-label">{{DOM_NOITE}}</span>
            </label>
          </div>
        </div>
      </div>
    </div>

    <!-- TAB QUINZENAL -->
    <div class="tab-content" id="tab-quinzenal" role="tabpanel">
      <h2 class="tab-title">Ciclos Quinzenais</h2>
      <p class="tab-subtitle">14 dias pra entregar, medir e corrigir. Quem nao tem ciclo, vira refem do urgente.</p>

      <div class="ciclo">
        <div class="ciclo-numero">Ciclo 1 — Dias 1 a 14</div>
        <div class="ciclo-titulo">{{CICLO_1_TITULO}}</div>
        <label class="check-item">
          <input type="checkbox" id="quinzenal-c1-1" data-categoria="quinzenal">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">{{CICLO_1_ENTREGA_1}}</span>
        </label>
        <label class="check-item">
          <input type="checkbox" id="quinzenal-c1-2" data-categoria="quinzenal">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">{{CICLO_1_ENTREGA_2}}</span>
        </label>
        <label class="check-item">
          <input type="checkbox" id="quinzenal-c1-3" data-categoria="quinzenal">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">{{CICLO_1_ENTREGA_3}}</span>
        </label>
      </div>

      <div class="ciclo">
        <div class="ciclo-numero">Ciclo 2 — Dias 15 a 28</div>
        <div class="ciclo-titulo">{{CICLO_2_TITULO}}</div>
        <label class="check-item">
          <input type="checkbox" id="quinzenal-c2-1" data-categoria="quinzenal">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">{{CICLO_2_ENTREGA_1}}</span>
        </label>
        <label class="check-item">
          <input type="checkbox" id="quinzenal-c2-2" data-categoria="quinzenal">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">{{CICLO_2_ENTREGA_2}}</span>
        </label>
        <label class="check-item">
          <input type="checkbox" id="quinzenal-c2-3" data-categoria="quinzenal">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">{{CICLO_2_ENTREGA_3}}</span>
        </label>
      </div>
    </div>

    <!-- TAB MENSAL -->
    <div class="tab-content" id="tab-mensal" role="tabpanel">
      <h2 class="tab-title">Mes do Lancamento</h2>
      <p class="tab-subtitle">4 semanas. 4 funcoes. Constroi-aquecimento-vendas-pos. Nao pula etapa.</p>

      <div class="semana-lancamento">
        <div class="semana-lancamento-numero">Semana 1 — Construcao</div>
        <div class="semana-lancamento-titulo">{{SEMANA_1_TITULO}}</div>
        <label class="check-item">
          <input type="checkbox" id="mensal-s1-1" data-categoria="mensal">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">{{SEMANA_1_ENTREGA_1}}</span>
        </label>
        <label class="check-item">
          <input type="checkbox" id="mensal-s1-2" data-categoria="mensal">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">{{SEMANA_1_ENTREGA_2}}</span>
        </label>
        <label class="check-item">
          <input type="checkbox" id="mensal-s1-3" data-categoria="mensal">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">{{SEMANA_1_ENTREGA_3}}</span>
        </label>
      </div>

      <div class="semana-lancamento">
        <div class="semana-lancamento-numero">Semana 2 — Aquecimento</div>
        <div class="semana-lancamento-titulo">{{SEMANA_2_TITULO}}</div>
        <label class="check-item">
          <input type="checkbox" id="mensal-s2-1" data-categoria="mensal">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">{{SEMANA_2_ENTREGA_1}}</span>
        </label>
        <label class="check-item">
          <input type="checkbox" id="mensal-s2-2" data-categoria="mensal">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">{{SEMANA_2_ENTREGA_2}}</span>
        </label>
        <label class="check-item">
          <input type="checkbox" id="mensal-s2-3" data-categoria="mensal">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">{{SEMANA_2_ENTREGA_3}}</span>
        </label>
      </div>

      <div class="semana-lancamento">
        <div class="semana-lancamento-numero">Semana 3 — Vendas</div>
        <div class="semana-lancamento-titulo">{{SEMANA_3_TITULO}}</div>
        <label class="check-item">
          <input type="checkbox" id="mensal-s3-1" data-categoria="mensal">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">{{SEMANA_3_ENTREGA_1}}</span>
        </label>
        <label class="check-item">
          <input type="checkbox" id="mensal-s3-2" data-categoria="mensal">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">{{SEMANA_3_ENTREGA_2}}</span>
        </label>
        <label class="check-item">
          <input type="checkbox" id="mensal-s3-3" data-categoria="mensal">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">{{SEMANA_3_ENTREGA_3}}</span>
        </label>
      </div>

      <div class="semana-lancamento">
        <div class="semana-lancamento-numero">Semana 4 — Pos e Retencao</div>
        <div class="semana-lancamento-titulo">{{SEMANA_4_TITULO}}</div>
        <label class="check-item">
          <input type="checkbox" id="mensal-s4-1" data-categoria="mensal">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">{{SEMANA_4_ENTREGA_1}}</span>
        </label>
        <label class="check-item">
          <input type="checkbox" id="mensal-s4-2" data-categoria="mensal">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">{{SEMANA_4_ENTREGA_2}}</span>
        </label>
        <label class="check-item">
          <input type="checkbox" id="mensal-s4-3" data-categoria="mensal">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">{{SEMANA_4_ENTREGA_3}}</span>
        </label>
      </div>
    </div>

    <!-- TAB PULSO -->
    <div class="tab-content" id="tab-pulso" role="tabpanel">
      <h2 class="tab-title">Pulso de Domingo</h2>
      <p class="tab-subtitle">7 perguntas. 30 minutos. So existe semana proxima pra quem fecha a anterior.</p>

      <div class="pulso-pergunta">
        <span class="pulso-numero">1</span>
        <span class="pulso-texto">{{PULSO_PERGUNTA_1}}</span>
        <label class="check-item" style="margin-top: 12px;">
          <input type="checkbox" id="pulso-1" data-categoria="pulso">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">Respondida e registrada</span>
        </label>
      </div>

      <div class="pulso-pergunta">
        <span class="pulso-numero">2</span>
        <span class="pulso-texto">{{PULSO_PERGUNTA_2}}</span>
        <label class="check-item" style="margin-top: 12px;">
          <input type="checkbox" id="pulso-2" data-categoria="pulso">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">Respondida e registrada</span>
        </label>
      </div>

      <div class="pulso-pergunta">
        <span class="pulso-numero">3</span>
        <span class="pulso-texto">{{PULSO_PERGUNTA_3}}</span>
        <label class="check-item" style="margin-top: 12px;">
          <input type="checkbox" id="pulso-3" data-categoria="pulso">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">Respondida e registrada</span>
        </label>
      </div>

      <div class="pulso-pergunta">
        <span class="pulso-numero">4</span>
        <span class="pulso-texto">{{PULSO_PERGUNTA_4}}</span>
        <label class="check-item" style="margin-top: 12px;">
          <input type="checkbox" id="pulso-4" data-categoria="pulso">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">Respondida e registrada</span>
        </label>
      </div>

      <div class="pulso-pergunta">
        <span class="pulso-numero">5</span>
        <span class="pulso-texto">{{PULSO_PERGUNTA_5}}</span>
        <label class="check-item" style="margin-top: 12px;">
          <input type="checkbox" id="pulso-5" data-categoria="pulso">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">Respondida e registrada</span>
        </label>
      </div>

      <div class="pulso-pergunta">
        <span class="pulso-numero">6</span>
        <span class="pulso-texto">{{PULSO_PERGUNTA_6}}</span>
        <label class="check-item" style="margin-top: 12px;">
          <input type="checkbox" id="pulso-6" data-categoria="pulso">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">Respondida e registrada</span>
        </label>
      </div>

      <div class="pulso-pergunta">
        <span class="pulso-numero">7</span>
        <span class="pulso-texto">{{PULSO_PERGUNTA_7}}</span>
        <label class="check-item" style="margin-top: 12px;">
          <input type="checkbox" id="pulso-7" data-categoria="pulso">
          <span class="check-box" aria-hidden="true"></span>
          <span class="check-label">Respondida e registrada</span>
        </label>
      </div>
    </div>

    <!-- TAB INDICADORES -->
    <div class="tab-content" id="tab-indicadores" role="tabpanel">
      <h2 class="tab-title">KPIs da Semana</h2>
      <p class="tab-subtitle">O que nao se mede, vira fe. Imperatriz mede.</p>

      <div class="kpi-grid">
        <div class="kpi-card">
          <div class="kpi-nome">KPI 01</div>
          <div class="kpi-descricao">{{KPI_1}}</div>
          <div class="kpi-meta">Meta: {{KPI_1_META}}</div>
        </div>
        <div class="kpi-card">
          <div class="kpi-nome">KPI 02</div>
          <div class="kpi-descricao">{{KPI_2}}</div>
          <div class="kpi-meta">Meta: {{KPI_2_META}}</div>
        </div>
        <div class="kpi-card">
          <div class="kpi-nome">KPI 03</div>
          <div class="kpi-descricao">{{KPI_3}}</div>
          <div class="kpi-meta">Meta: {{KPI_3_META}}</div>
        </div>
        <div class="kpi-card">
          <div class="kpi-nome">KPI 04</div>
          <div class="kpi-descricao">{{KPI_4}}</div>
          <div class="kpi-meta">Meta: {{KPI_4_META}}</div>
        </div>
        <div class="kpi-card">
          <div class="kpi-nome">KPI 05</div>
          <div class="kpi-descricao">{{KPI_5}}</div>
          <div class="kpi-meta">Meta: {{KPI_5_META}}</div>
        </div>
        <div class="kpi-card">
          <div class="kpi-nome">KPI 06</div>
          <div class="kpi-descricao">{{KPI_6}}</div>
          <div class="kpi-meta">Meta: {{KPI_6_META}}</div>
        </div>
      </div>
    </div>

    <!-- TAB ARSENAL -->
    <div class="tab-content" id="tab-arsenal" role="tabpanel">
      <h2 class="tab-title">Arsenal por Momento</h2>
      <p class="tab-subtitle">Skill certa, na hora certa. Sem mais procurar no Slack.</p>

      <div class="arsenal-grid">
        <a class="arsenal-card" href="{{SKILL_BLOCO_1_LINK}}" aria-label="Abrir skill">
          <div class="arsenal-momento">{{SKILL_BLOCO_1_MOMENTO}}</div>
          <div class="arsenal-skill">{{SKILL_BLOCO_1}}</div>
          <div class="arsenal-desc">{{SKILL_BLOCO_1_DESC}}</div>
        </a>
        <a class="arsenal-card" href="{{SKILL_BLOCO_2_LINK}}" aria-label="Abrir skill">
          <div class="arsenal-momento">{{SKILL_BLOCO_2_MOMENTO}}</div>
          <div class="arsenal-skill">{{SKILL_BLOCO_2}}</div>
          <div class="arsenal-desc">{{SKILL_BLOCO_2_DESC}}</div>
        </a>
        <a class="arsenal-card" href="{{SKILL_BLOCO_3_LINK}}" aria-label="Abrir skill">
          <div class="arsenal-momento">{{SKILL_BLOCO_3_MOMENTO}}</div>
          <div class="arsenal-skill">{{SKILL_BLOCO_3}}</div>
          <div class="arsenal-desc">{{SKILL_BLOCO_3_DESC}}</div>
        </a>
        <a class="arsenal-card" href="{{SKILL_BLOCO_4_LINK}}" aria-label="Abrir skill">
          <div class="arsenal-momento">{{SKILL_BLOCO_4_MOMENTO}}</div>
          <div class="arsenal-skill">{{SKILL_BLOCO_4}}</div>
          <div class="arsenal-desc">{{SKILL_BLOCO_4_DESC}}</div>
        </a>
        <a class="arsenal-card" href="{{SKILL_BLOCO_5_LINK}}" aria-label="Abrir skill">
          <div class="arsenal-momento">{{SKILL_BLOCO_5_MOMENTO}}</div>
          <div class="arsenal-skill">{{SKILL_BLOCO_5}}</div>
          <div class="arsenal-desc">{{SKILL_BLOCO_5_DESC}}</div>
        </a>
        <a class="arsenal-card" href="{{SKILL_BLOCO_6_LINK}}" aria-label="Abrir skill">
          <div class="arsenal-momento">{{SKILL_BLOCO_6_MOMENTO}}</div>
          <div class="arsenal-skill">{{SKILL_BLOCO_6}}</div>
          <div class="arsenal-desc">{{SKILL_BLOCO_6_DESC}}</div>
        </a>
      </div>
    </div>
  </section>

</main>

<!-- ============ FOOTER ============ -->
<footer class="footer">
  <div class="footer-inner">
    <div class="footer-text">"Disciplina e a coroa que ninguem ve."</div>
    <div class="footer-actions">
      <button class="btn outline" id="btn-reset" aria-label="Resetar checkboxes da semana">Resetar Semana</button>
      <button class="btn" id="btn-print" aria-label="Imprimir checklist em A4">Imprimir Checklist A4</button>
    </div>
  </div>
</footer>

<script>
(function() {
  'use strict';

  // ============ CONFIG ============
  var NOME = '{{NOME}}';
  var STORAGE_KEY = 'rotina-imperatriz-' + NOME.replace(/\s+/g, '-').toLowerCase();

  // ============ TABS ============
  var tabBtns = document.querySelectorAll('.tab-btn');
  var tabContents = document.querySelectorAll('.tab-content');

  tabBtns.forEach(function(btn) {
    btn.addEventListener('click', function() {
      var tab = btn.getAttribute('data-tab');
      tabBtns.forEach(function(b) {
        b.classList.remove('ativo');
        b.setAttribute('aria-selected', 'false');
      });
      tabContents.forEach(function(c) { c.classList.remove('ativo'); });
      btn.classList.add('ativo');
      btn.setAttribute('aria-selected', 'true');
      var content = document.getElementById('tab-' + tab);
      if (content) content.classList.add('ativo');
    });
  });

  // ============ STORAGE ============
  function carregarEstado() {
    try {
      var raw = localStorage.getItem(STORAGE_KEY);
      return raw ? JSON.parse(raw) : {};
    } catch (e) {
      return {};
    }
  }

  function salvarEstado(estado) {
    try {
      localStorage.setItem(STORAGE_KEY, JSON.stringify(estado));
    } catch (e) {
      console.warn('localStorage indisponivel', e);
    }
  }

  function getEstado() {
    return carregarEstado();
  }

  // ============ CHECKBOXES ============
  var checkboxes = document.querySelectorAll('input[type="checkbox"][data-categoria]');

  function restaurarCheckboxes() {
    var estado = getEstado();
    checkboxes.forEach(function(cb) {
      if (estado[cb.id] === true) {
        cb.checked = true;
      }
    });
  }

  function salvarCheckbox(cb) {
    var estado = getEstado();
    estado[cb.id] = cb.checked;
    salvarEstado(estado);
  }

  checkboxes.forEach(function(cb) {
    cb.addEventListener('change', function() {
      salvarCheckbox(cb);
      atualizarIndicadores();
    });
  });

  // ============ INDICADORES ============
  function calcularCumprimentoSemanal() {
    var semanais = document.querySelectorAll('input[data-categoria="semanal"]');
    var total = semanais.length;
    var marcados = 0;
    semanais.forEach(function(cb) { if (cb.checked) marcados++; });
    var pct = total > 0 ? Math.round((marcados / total) * 100) : 0;
    return { pct: pct, marcados: marcados, total: total };
  }

  function calcularStreak() {
    // simplificado: conta quantos dias da semana tem pelo menos 1 turno marcado
    var dias = ['seg', 'ter', 'qua', 'qui', 'sex', 'sab', 'dom'];
    var streak = 0;
    dias.forEach(function(d) {
      var algumMarcado = false;
      ['manha', 'tarde', 'noite'].forEach(function(t) {
        var cb = document.getElementById('semanal-' + d + '-' + t);
        if (cb && cb.checked) algumMarcado = true;
      });
      if (algumMarcado) streak++;
    });
    return streak;
  }

  function atualizarIndicadores() {
    var res = calcularCumprimentoSemanal();
    var pctEl = document.getElementById('pct-cumprimento');
    var detEl = document.getElementById('pct-detalhe');
    var fillEl = document.getElementById('pct-fill');
    var streakEl = document.getElementById('streak-semana');
    var alertaBaixo = document.getElementById('alerta-baixo');
    var alertaCompleto = document.getElementById('alerta-completo');

    if (pctEl) pctEl.textContent = res.pct + '%';
    if (detEl) detEl.textContent = res.marcados + ' de ' + res.total + ' blocos concluidos';
    if (fillEl) fillEl.style.width = res.pct + '%';
    if (streakEl) streakEl.textContent = calcularStreak();

    // Alertas
    if (alertaBaixo) alertaBaixo.classList.remove('ativo');
    if (alertaCompleto) alertaCompleto.classList.remove('ativo');

    if (res.total > 0) {
      if (res.pct === 100) {
        if (alertaCompleto) alertaCompleto.classList.add('ativo');
      } else if (res.pct < 70) {
        if (alertaBaixo) alertaBaixo.classList.add('ativo');
      }
    }
  }

  // ============ DATA / DIA DE HOJE ============
  function atualizarDataHoje() {
    var hoje = new Date();
    var dd = String(hoje.getDate()).padStart(2, '0');
    var mm = String(hoje.getMonth() + 1).padStart(2, '0');
    var dataEl = document.getElementById('data-hoje');
    if (dataEl) dataEl.textContent = dd + '/' + mm;

    var diasSem = ['Domingo', 'Segunda-feira', 'Terca-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'Sabado'];
    var diaEl = document.getElementById('dia-semana-hoje');
    if (diaEl) diaEl.textContent = diasSem[hoje.getDay()];
  }

  // ============ RESETAR SEMANA ============
  var btnReset = document.getElementById('btn-reset');
  if (btnReset) {
    btnReset.addEventListener('click', function() {
      if (!confirm('Resetar todos os checkboxes da rotina semanal? Indicadores e ciclos ficam intactos.')) return;
      var semanais = document.querySelectorAll('input[data-categoria="semanal"]');
      var estado = getEstado();
      semanais.forEach(function(cb) {
        cb.checked = false;
        delete estado[cb.id];
      });
      // tambem reseta diario (semana nova)
      var diarios = document.querySelectorAll('input[data-categoria="diario"]');
      diarios.forEach(function(cb) {
        cb.checked = false;
        delete estado[cb.id];
      });
      salvarEstado(estado);
      atualizarIndicadores();
    });
  }

  // ============ IMPRIMIR ============
  var btnPrint = document.getElementById('btn-print');
  if (btnPrint) {
    btnPrint.addEventListener('click', function() {
      // expande todas as tabs antes de imprimir
      tabContents.forEach(function(c) { c.classList.add('ativo'); });
      window.print();
      // restaura apos imprimir
      setTimeout(function() {
        tabContents.forEach(function(c) { c.classList.remove('ativo'); });
        var ativa = document.querySelector('.tab-btn.ativo');
        if (ativa) {
          var tab = ativa.getAttribute('data-tab');
          var content = document.getElementById('tab-' + tab);
          if (content) content.classList.add('ativo');
        }
      }, 500);
    });
  }

  // ============ INIT ============
  restaurarCheckboxes();
  atualizarIndicadores();
  atualizarDataHoje();
})();
</script>

</body>
</html>
