/* MeuCrono — style.css
Extraído de index.html (v2.13.0) para permitir cache separado do
navegador entre alterações de estilo e de lógica. Ver commit da
divisão em style.css/app.js para o histórico. */
/* ============================================================
PALETA — commit 2 da reforma visual (aprovada na simulação)
============================================================
17 variáveis, mapeadas a partir do uso REAL medido no arquivo
antes desta mudança (as ~20 cores mais frequentes cobriam ~620
das ~1050 declarações de cor do CSS). Cores raras/um-uso-só
(tema escuro do painel admin, variações de erro específicas
etc.) foram deixadas de fora deste commit — baixo risco visual,
alto risco de regressão se trocadas às pressas.
Isso também é a base para um modo escuro futuro: quando/se
fizermos isso, é só redefinir estas mesmas 17 variáveis dentro
de @media (prefers-color-scheme: dark) — nada mais no arquivo
precisa mudar. */
:root {
/* superfícies */
--ground: #F2F6FD; /* fundo da página */
--panel: #FFFFFF; /* cartões, modais */
--panel-2: #F7FAFD; /* superfície secundária / hover leve */
--line: #E5EBF5; /* borda padrão */
/* texto */
--ink: #2F3A4D; /* texto principal */
--ink-soft: #6C7485; /* texto secundário */
--ink-faint: #9AA5B5; /* texto terciário / rótulos */
/* ação (accent) — colapsa os dois azuis quase-idênticos que existiam */
--accent: #3F72AF; /* ação primária, texto de link */
--accent-wash: #EEF4FD; /* fundo tonal */
--accent-border: #C5D5EE; /* borda tonal */
--accent-chip: #A7BDF6; /* chip/dot mais saturado */
/* estado: concluído */
--good: #1A6B4A;
--good-wash: #E8F7F1;
--good-border: #BFE7D5;
/* estado: em andamento / atenção */
--warn: #854F0B;
--warn-wash: #FFF5E6;
--warn-border: #FAC775;
/* estado: erro / crítico */
--bad: #791F1F;
--bad-wash: #FCEBEB;
--bad-border: #F09595;
/* ============================================================
ESCALAS DE ESTRUTURA — commit "layout" da reforma visual
============================================================
Antes desta mudança havia ~20 valores de padding avulsos
(3–40px) e 5+ raios de borda diferentes (6,8,10,12,14px) para
componentes que deveriam compartilhar um sistema. Estas escalas
dão UM conjunto fixo de onde os valores saem, em vez de números
escolhidos por componente. Base 4pt. */
/* espaçamento (gap / padding / margin) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
/* raio de borda — degraus + pílula; cards no teto de 12–14px */
--radius-sm: 6px; /* inputs pequenos, chips de estado */
--radius-md: 10px; /* botões, campos */
--radius-chip: 16px; /* chips/abas de alternância (wiz-chip, sched-tab...) */
--radius-lg: 14px; /* cards, painéis, modais */
--radius-pill: 999px;/* tags/abas em formato pílula */
/* elevação — escala única em vez de sombras avulsas por componente */
--elev-1: 0 1px 3px rgba(80,100,180,0.07);
--elev-2: 0 4px 14px rgba(80,100,180,0.10);
--elev-3: 0 12px 30px rgba(47,58,77,0.16);
/* empilhamento — escala semântica (dropdown < sticky < modal < toast) */
--z-sticky: 90;
--z-dropdown: 400;
--z-fab: 1200;
--z-panel: 1201;
--z-backdrop: 4000;
--z-modal: 5000;
--z-toast: 9000;
}
/* === RESET & BASE === */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Poppins', system-ui, sans-serif; background: var(--ground); color: var(--ink); font-size: 13px; }
/* Ícone base: herda a cor do texto ao redor (currentColor), tamanho fixo por
contexto via CSS — nada de emoji com peso/proporção imprevisível entre
plataformas. Ver sprite de / no início do . */
.icon { width: 16px; height: 16px; flex-shrink: 0; display: inline-block; vertical-align: -3px; }
/* ===== AUTH LOADING ===== */
#auth-loading {
position: fixed; inset: 0; z-index: 9999;
background: var(--ground);
display: flex; align-items: center; justify-content: center;
flex-direction: column; gap: 20px;
font-family: 'Poppins', system-ui, sans-serif;
}
#auth-loading .al-logo { display:flex; align-items:center; gap:12px; }
#auth-loading .al-brand { font-size:28px; font-weight:600; letter-spacing:-0.5px; }
#auth-loading .al-meu { color:var(--ink); }
#auth-loading .al-crono { color:var(--accent-chip); }
#auth-loading .al-spinner {
width:36px; height:36px; border:3px solid #D6D1F7;
border-top-color:var(--accent-chip); border-radius:50%; animation:lp-spin 0.8s linear infinite;
}
@keyframes lp-spin { to { transform:rotate(360deg); } }
#auth-loading .al-text { font-size:13px; color:var(--ink-faint); font-family:'Poppins',system-ui,sans-serif; }
/* ===== LANDING PAGE ===== */
#landing-page {
min-height: 100vh; background: var(--ground);
font-family: 'Poppins', system-ui, sans-serif;
display: none;
flex-direction: column;
}
.lp-wrap {
flex: 1; display: flex; align-items: center; justify-content: center;
gap: 60px; padding: 48px 32px; max-width: 1100px; margin: 0 auto; width: 100%;
}
/* Left — brand */
.lp-left { flex: 1; max-width: 480px; }
.lp-logo { display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.lp-brand { font-size:36px; font-weight:600; letter-spacing:-0.5px; line-height:1; }
.lp-meu { color:var(--ink); }
.lp-crono { color:var(--accent-chip); }
.lp-tagline {
font-size:13px; color:var(--ink-faint); letter-spacing:1.5px; text-transform:uppercase;
font-weight:500; margin-bottom:24px;
}
.lp-headline {
font-size:28px; font-weight:600; color:var(--ink); line-height:1.3;
margin-bottom:14px; letter-spacing:-0.5px;
}
.lp-headline em { font-style:normal; color:var(--accent-chip); }
.lp-desc { font-size:14px; color:var(--ink-soft); line-height:1.7; margin-bottom:28px; }
.lp-features { display:flex; flex-direction:column; gap:10px; }
.lp-feature {
display:flex; align-items:center; gap:10px;
font-size:13px; color:var(--ink-soft);
}
.lp-feature-dot {
width:8px; height:8px; border-radius:50%; background:var(--accent-chip); flex-shrink:0;
}
.lp-values { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.lp-badge {
font-size:11px; color:var(--ink-soft); background:#fff; border:1px solid #DCE5F2;
border-radius:20px; padding:4px 12px; font-weight:500;
}
/* Right — form card */
.lp-right { width:380px; flex-shrink:0; }
.lp-card {
background:#fff; border-radius:24px; padding:36px 32px;
box-shadow: var(--elev-3);
}
.lp-tabs { display:flex; gap:0; border-bottom:2px solid var(--ground); margin-bottom:28px; }
.lp-tab {
flex:1; background:none; border:none; font-family:'Poppins',system-ui,sans-serif;
font-size:14px; font-weight:500; color:var(--ink-faint); padding:10px 0;
cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px;
transition:all 0.15s;
}
.lp-tab.active { color:var(--ink); border-bottom-color:var(--accent); }
.lp-label { display:block; font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; }
.lp-input {
width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:12px;
font-size:14px; font-family:'Poppins',system-ui,sans-serif; color:var(--ink);
outline:none; margin-bottom:16px; transition:border-color 0.15s; background:#fff;
}
.lp-input:focus { border-color:var(--accent-chip); }
.lp-input::placeholder { color:#C5CEDB; }
.lp-msg {
font-size:12px; min-height:18px; margin:-8px 0 12px;
font-weight:600; line-height:1.4;
}
.lp-btn-primary {
width:100%; padding:13px; background:var(--accent); color:#fff;
border:none; border-radius:14px; font-size:14px; font-weight:600;
font-family:'Poppins',system-ui,sans-serif; cursor:pointer;
box-shadow:0 4px 16px rgba(167,189,246,0.4);
transition:all 0.15s; letter-spacing:0.02em;
}
.lp-btn-primary:hover { background:#8AAAF0; transform:translateY(-1px); box-shadow:0 6px 20px rgba(167,189,246,0.5); }
.lp-btn-primary:active { transform:translateY(0); }
.lp-btn-primary:disabled { opacity:0.6; cursor:default; transform:none; }
.lp-hint { font-size:11px; color:var(--ink-faint); text-align:center; margin-top:14px; line-height:1.5; }
.lp-forgot { background:none; border:none; color:var(--accent); font-size:12px; cursor:pointer; font-family:inherit; text-decoration:underline; padding:8px 0 0; display:block; margin:0 auto; }
.lp-forgot:hover { color:var(--accent); }
/* Footer */
.lp-footer {
text-align:center; padding:20px 32px;
font-size:12px; color:var(--ink-faint); font-family:'Poppins',system-ui,sans-serif;
border-top:1px solid var(--line); background:#fff;
}
.lp-footer strong { color:var(--ink); }
/* Responsive */
@media (max-width: 780px) {
.lp-wrap { flex-direction:column; gap:32px; padding:32px 20px; }
.lp-right { width:100%; }
.lp-headline { font-size:22px; }
.lp-brand { font-size:28px; }
}
/* === HEADER (consolidado) ===
Uma faixa reúne título + KPIs (esquerda) e status/ações/conta (direita).
O progresso é uma linha fina na base, sem ocupar uma linha própria. */
.header-bar { background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: var(--elev-1); position: relative; }
.header-bar-main { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4) var(--space-3); }
.header-bar-text { min-width: 0; }
.header-bar-text h1 { font-size: 17px; font-weight: 650; margin-bottom: 3px; color: var(--ink); letter-spacing: -0.3px; text-wrap: balance; }
/* KPIs em linha ("6h estudadas · 0 questões · 0% desempenho"), não mais chips */
.header-kpis { font-size: 12.5px; color: var(--ink-soft); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.header-kpis .kpi { white-space: nowrap; }
.header-kpis .kpi strong { color: var(--ink); font-weight: 700; }
.header-kpis .kpi.alert strong { color: var(--warn); }
.header-kpis .kpi-sep { color: var(--ink-faint); }
/* Ações do cabeçalho: status de sync sempre visível + menu Ações + conta */
.header-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.tbtn.acct { color: #0F6E56; border-color: #4CAF94; background: #E8F7F3; font-weight: 600; }
.tbtn.acct:hover { background: #D6F0E8; }
/* Linha de progresso fina, rente à borda inferior do cabeçalho */
.header-bar .progress-track { height: 4px; border-radius: 0; background: var(--line); overflow: hidden; }
.header-bar .progress-fill { height: 100%; background: var(--good-border); transition: width 0.4s cubic-bezier(0.22,1,0.36,1); }
/* Botões seletor de dias — diálogo de adaptação */
.adapt-day-btn { padding: 7px 13px; border-radius: 8px; border: 1.5px solid var(--line); background: #fff; color: #4A5568; font-size: 13px; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s, font-weight 0.1s; }
.adapt-day-btn.adapt-sel { border-color: var(--accent); background: #EBF4FF; color: #1E3A5F; font-weight: 600; }
.adapt-day-btn:hover:not(.adapt-sel) { border-color: #B5C9E8; background: #F5F9FF; }
/* Modal edição de título */
/* Botões seletor de dias — diálogo de adaptação */
.adapt-day-btn { padding: 7px 13px; border-radius: 8px; border: 1.5px solid var(--line); background: #fff; color: #4A5568; font-size: 13px; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s, font-weight 0.1s; }
.adapt-day-btn.adapt-sel { border-color: var(--accent); background: #EBF4FF; color: #1E3A5F; font-weight: 600; }
.adapt-day-btn:hover:not(.adapt-sel) { border-color: #B5C9E8; background: #F5F9FF; }
/* Modal edição de título */
/* z-index 10000: precisa renderizar ACIMA de #admin-overlay (9999), já que
este modal costuma abrir por cima do Painel Admin (ex: editar plano do
catálogo) — bug relatado 26/07/2026, ficava escondido atrás do painel. */
.title-edit-overlay { position: fixed; inset: 0; background: rgba(30,40,60,0.28); z-index: 10000; display: flex; align-items: center; justify-content: center; }
.title-edit-modal { background: #fff; border-radius: 14px; padding: 24px 22px 18px; width: 90%; max-width: 380px; box-shadow: 0 8px 32px rgba(80,100,180,0.14); }
.title-edit-modal h3 { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 16px; }
.title-edit-modal label { display: block; font-size: 11px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.title-edit-modal input:not([type="radio"]):not([type="checkbox"]) { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 8px; padding: 9px 11px; font-size: 13px; color: var(--ink); font-family: inherit; outline: none; margin-bottom: 14px; transition: border-color 0.15s; }
.title-edit-modal input:not([type="radio"]):not([type="checkbox"]):focus { border-color: var(--accent-chip); }
.title-edit-actions { display: flex; gap: 8px; justify-content: flex-end; }
.title-edit-cancel { background: none; border: 1.5px solid var(--line); border-radius: 8px; padding: 7px 16px; font-size: 13px; color: var(--ink-soft); cursor: pointer; font-family: inherit; }
.title-edit-save { background: var(--accent); border: none; border-radius: 8px; padding: 7px 18px; font-size: 13px; color: #fff; cursor: pointer; font-family: inherit; font-weight: 600; }
/* Assistente de novo cronograma */
.wiz-modal { max-width: 460px; }
.wiz-steps { display: flex; gap: 5px; margin-bottom: 16px; }
.wiz-step-dot { flex: 1; height: 3px; border-radius: 2px; background: var(--line); }
.wiz-step-dot.done, .wiz-step-dot.current { background: var(--accent); }
.wiz-subtitle { font-size: 12px; color: var(--ink-soft); margin: -8px 0 16px; line-height: 1.5; }
.wiz-chip-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.wiz-chip { padding: 8px 15px; border-radius: var(--radius-chip); border: 1.5px solid var(--line); background: #fff; color: #4A5568; font-size: 13px; cursor: pointer; transition: all 0.15s; font-family: inherit; }
.wiz-chip:hover:not(.wiz-chip-sel) { border-color: #B5C9E8; background: #F5F9FF; }
.wiz-chip.wiz-chip-sel { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 600; }
.wiz-textarea { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 8px; padding: 9px 11px; font-size: 13px; color: var(--ink); font-family: inherit; outline: none; margin-bottom: 14px; resize: vertical; min-height: 56px; transition: border-color 0.15s; }
.wiz-textarea:focus, .wiz-modal input:focus { border-color: var(--accent); }
.wiz-icon-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.wiz-icon-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.wiz-icon-btn { width: 34px; height: 34px; border-radius: 8px; border: 1.5px solid var(--line); background: #fff; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; padding: 0; }
.wiz-icon-btn:hover:not(.wiz-icon-sel) { border-color: #B5C9E8; background: #F5F9FF; }
.wiz-icon-btn.wiz-icon-sel { border-color: var(--accent); background: #EBF4FF; }
.wiz-actions { display: flex; gap: 8px; justify-content: space-between; align-items: center; margin-top: 4px; }
.wiz-skip-link { background: none; border: none; color: var(--ink-faint); font-size: 12px; cursor: pointer; font-family: inherit; text-decoration: underline; padding: 0; }
/* Cards de modelo (biblioteca de planos) — passo 1 do wizard */
.wiz-tpl-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; max-height: 220px; overflow-y: auto; }
.wiz-tpl-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 13px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; transition: all 0.15s; font-family: inherit; }
.wiz-tpl-card:hover:not(.wiz-tpl-sel) { border-color: #B5C9E8; background: #F5F9FF; }
.wiz-tpl-card.wiz-tpl-sel { border-color: var(--accent); background: #EBF4FF; }
.wiz-tpl-icon { font-size: 20px; flex-shrink: 0; }
.wiz-tpl-texts { display: flex; flex-direction: column; min-width: 0; }
.wiz-tpl-nome { font-size: 13px; font-weight: 700; color: var(--ink); }
.wiz-tpl-desc { font-size: 11px; color: var(--ink-faint); line-height: 1.4; margin-top: 1px; }
/* Admin — chips do catálogo de matérias */
.admin-mat-list { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-mat-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 16px; padding: 5px 6px 5px 12px; font-size: 12px; color: var(--ink); }
.admin-mat-chip button { background: none; border: none; color: var(--ink-faint); cursor: pointer; font-size: 11px; padding: 3px 6px; border-radius: 50%; line-height: 1; }
.admin-mat-chip button:hover { color: #A32D2D; background: var(--bad-wash); }
/* === PROGRESS BAR === */
.progress-bar-wrap { background: #fff; padding: 0 18px 12px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.progress-track { flex: 1; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--good-border); border-radius: 3px; transition: width 0.4s; }
.progress-label { font-size: 12px; color: var(--ink-soft); min-width: 100px; text-align: right; }
/* === NAVEGAÇÃO LATERAL (modo sidebar, opcional) ===
Oculta por padrão. Só aparece quando #app-container tem .nav-sidebar.
No mobile some (a navegação volta ao topo/rodapé de sempre). */
#app-sidebar { display: none; }
#app-container.nav-sidebar #app-sidebar {
display: flex; flex-direction: column;
position: fixed; left: 0; top: 0; bottom: 0; width: 236px; z-index: var(--z-sticky);
background: var(--ink); color: #fff; padding: var(--space-4) var(--space-3);
}
#app-container.nav-sidebar { padding-left: 236px; }
.sb-brand { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2) var(--space-5); }
.sb-brand-mark { display: inline-flex; }
.sb-brand-mark .icon { width: 22px; height: 22px; color: var(--accent-chip); }
.sb-brand-name { font-size: 19px; letter-spacing: -0.3px; color: #fff; }
.sb-brand-name strong { color: var(--accent-chip); font-weight: 700; }
.sb-nav, .sb-nav-hub { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }
.sb-item { display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left;
background: none; border: none; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 500;
color: rgba(255,255,255,0.72); padding: 10px 12px; border-radius: var(--radius-md); transition: background .12s, color .12s; }
.sb-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sb-item.active { background: var(--accent); color: #fff; font-weight: 600; }
.sb-ico { width: 17px; height: 17px; }
/* Modo "por seção" (hubs + sub-abas) dentro da lateral — mesmo menu de dois
níveis que hoje fica no topo, só que agrupado e recolhível. Só um grupo
fica expandido por vez (o da aba ativa). */
.sb-nav-hub { display: none; }
.sb-group { display: flex; flex-direction: column; }
.sb-hub { display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left;
background: none; border: none; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 600;
color: rgba(255,255,255,0.78); padding: 10px 12px; border-radius: var(--radius-md); transition: background .12s, color .12s; }
.sb-hub:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sb-group.open > .sb-hub { color: #fff; }
.sb-caret { margin-left: auto; font-size: 10px; color: rgba(255,255,255,0.45); transition: transform .15s; }
.sb-group.open .sb-caret { transform: rotate(-180deg); }
.sb-sub { display: none; flex-direction: column; gap: 1px; padding: 2px 0 6px 33px; }
.sb-group.open .sb-sub { display: flex; }
.sb-subitem { display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
font-family: inherit; font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,0.60);
padding: 7px 10px; border-radius: var(--radius-sm); transition: background .12s, color .12s; }
.sb-subitem:hover { background: rgba(255,255,255,0.07); color: #fff; }
.sb-subitem.active { background: var(--accent); color: #fff; font-weight: 600; }
/* O menu.mode escolhe qual dos dois menus (lista plana ou por seção) aparece */
#app-container.nav-sidebar.nav-menu-hub .sb-nav { display: none; }
#app-container.nav-sidebar.nav-menu-hub .sb-nav-hub { display: flex; }
.sb-foco { margin-top: var(--space-3); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
border-radius: var(--radius-lg); padding: var(--space-3); cursor: pointer; font-family: inherit; text-align: left;
display: flex; flex-direction: column; gap: 6px; transition: background .12s; }
.sb-foco:hover { background: rgba(255,255,255,0.11); }
.sb-foco-head { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.75); }
.sb-foco-num { font-size: 17px; font-weight: 700; color: #fff; }
.sb-foco-track { height: 5px; border-radius: 3px; background: rgba(255,255,255,0.14); overflow: hidden; }
.sb-foco-fill { display: block; height: 100%; width: 0%; background: var(--good-border); border-radius: 3px; transition: width .4s; }
.sb-foco-meta { font-size: 11px; color: rgba(255,255,255,0.6); }
@media(max-width:900px){
#app-container.nav-sidebar { padding-left: 0; }
#app-container.nav-sidebar #app-sidebar { display: none; }
}
/* === TABS (nível 1: hubs) === */
.hub-nav { background: #EEF2F8; display: flex; gap: 2px; padding: 6px 8px 0; overflow-x: auto; }
.hub-btn { background: none; border: none; border-top: 3px solid transparent; color: var(--ink-soft); font-size: 13.5px; font-weight: 600; padding: 9px 20px 10px; cursor: pointer; border-radius: 8px 8px 0 0; white-space: nowrap; transition: background 0.15s, color 0.15s; flex-shrink: 0; }
.hub-btn:hover { color: var(--ink); background: #E1E9F5; }
.hub-btn.active { color: var(--ink); background: #fff; border-top-color: var(--accent); }
/* === Navegação inferior (barra fixa, só aparece no mobile) === */
.bottom-nav { display: none; }
.bn-btn { background:none; border:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; flex:1; padding:6px 2px 5px; color:var(--ink-faint); cursor:pointer; font-family:inherit; }
.bn-icon { font-size:19px; line-height:1; }
.bn-label { font-size:10px; font-weight:600; line-height:1; }
.bn-btn.active { color:var(--accent); }
/* === TABS (nível 2: sub-abas) === */
.tab-nav { background: #fff; display: flex; gap: 0; border-bottom: 2px solid var(--line); overflow-x: auto; }
.tab-btn { background: none; border: none; color: #64708A; font-size: 12.5px; font-weight: 500; padding: 11px 18px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.15s; white-space: nowrap; }
.tab-btn:hover { color: var(--ink); background: var(--ground); }
.tab-btn.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.tab-sep { width: 1px; background: var(--line); margin: 8px 0; flex-shrink: 0; align-self: stretch; }
/* === PAINEL HOJE === */
/* === PAINEL "CONTINUAR DE ONDE PAROU" ===
Responde à pergunta "o que eu faço agora?" logo na abertura da tela. */
#painel-hoje { background: #fff; border-bottom: 1px solid var(--line); padding: 12px 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ph-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ph-label { font-size: 10px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.6px; }
.ph-value { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.ph-value.muted { color: var(--ink-faint); font-weight: 400; }
.ph-div { width: 1px; background: var(--line); align-self: stretch; flex-shrink: 0; }
.ph-scroll-btn { background: #fff; border: 1.5px solid var(--accent-border); border-radius: 8px; color: var(--accent); font-size: 12px; padding: 7px 12px; cursor: pointer; font-family: inherit; font-weight: 600; white-space: nowrap; }
.ph-scroll-btn:hover { background: var(--accent-wash); }
/* Herói: a próxima tarefa e a ação de começar */
.ph-hero { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 14px;
background: var(--panel-2); border: 1px solid var(--line); border-left: 4px solid var(--accent);
border-radius: 12px; padding: 10px 14px; flex-wrap: wrap; }
.ph-hero-txt { flex: 1; min-width: 170px; }
.ph-hero-task { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em;
line-height: 1.3; margin: 1px 0 2px; }
.ph-hero-meta { font-size: 11.5px; color: var(--ink-soft); }
.ph-hero-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ph-hero-go { background: var(--accent); color: #fff; border: none; border-radius: var(--radius-md);
font-size: 13px; font-weight: 700; padding: 9px 20px; cursor: pointer;
font-family: inherit; white-space: nowrap; transition: background .14s;
box-shadow: 0 2px 8px rgba(167,189,246,0.35); }
.ph-hero-go:hover { background: #35608F; }
.ph-hero-go:active { transform: scale(.98); }
.ph-hero-cta-hint { font-size: 11px; font-weight: 500; color: var(--ink-soft); white-space: nowrap; }
.ph-hero.done { border-left-color: var(--good); }
.ph-hero.running { border-left-color: #B4690E; background: #FFF9F0; }
@media(max-width:600px){
#painel-hoje { padding: 10px 12px; gap: 10px; }
.ph-hero { padding: 10px 12px; }
.ph-hero-cta { width: 100%; align-items: center; }
.ph-hero-go { width: 100%; }
/* Cabeçalho empilha no mobile: título+KPIs em cima (largura total),
ações embaixo — em vez de espremer o título numa coluna estreita. */
.header-bar-main { flex-direction: column; align-items: stretch; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-2); }
.header-bar-text h1 { font-size: 16px; }
.header-actions { justify-content: flex-start; flex-wrap: wrap; gap: var(--space-2); }
/* Alvos de toque: 44px mínimo em tudo que é clicável no mobile */
.header-actions .tbtn, .header-actions #btn-account, .header-actions #btn-more {
min-height: 44px; display: inline-flex; align-items: center; }
#cron-toolbar { gap: var(--space-2); }
#cron-toolbar .btn-methods, #cron-toolbar #btn-toggle-weeks, #cron-toolbar #btn-legend {
min-height: 44px; display: inline-flex; align-items: center; }
#cron-toolbar .cron-search-wrap { flex: 1 1 100%; max-width: none; }
#cron-search { min-height: 44px; }
/* Cabeçalho de cada semana: ✏️ + 🛠️ + "✓ Marcar tudo" + badge + chevron não
cabem numa linha só na largura do bloco no mobile — estouravam cortados
por .block{overflow:hidden}. Deixa a linha quebrar em vez de cortar,
sem esconder nenhuma ação. */
.hdr-right { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
.hdr { align-items: flex-start; }
.hdr-left { padding-top: 2px; }
}
/* botão expandir/recolher semanas */
.btn-toggle-weeks { font-size: 11.5px; background: none; border: 1.5px solid var(--line); border-radius: 7px; color: var(--ink-soft); padding: 4px 10px; cursor: pointer; font-family: inherit; }
/* === LEGEND === */
/* Legenda: agora vive num popover (não mais numa faixa sempre aberta) */
.leg-item { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--ink-soft); }
.leg-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.legend-menu { min-width: 190px; }
.legend-menu .leg-item { padding: 6px 8px; }
/* === TOOLBAR (única e fixa) === */
.toolbar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) var(--space-4); background: var(--panel-2); border-bottom: 1px solid var(--line);
position: sticky; top: 0; z-index: var(--z-sticky); box-shadow: var(--elev-1); }
.toolbar-label { font-size: 11px; color: var(--ink-faint); font-weight: 500; margin-right: 4px; }
.tbtn { font-size: 12px; font-weight: 500; padding: 5px 13px; border-radius: 8px; border: 1px solid; cursor: pointer; background: #fff; transition: background 0.12s; }
.tbtn.save { color: var(--good); border-color: var(--good-border); }
.tbtn.save:hover { background: var(--good-wash); }
.tbtn.load { color: var(--accent); border-color: var(--accent-border); }
.tbtn.load:hover { background: var(--accent-wash); }
.tbtn.reset { color: var(--bad); border-color: var(--bad-border); }
.tbtn.reset:hover { background: var(--bad-wash); }
.tbtn.more { color: var(--ink-soft); border-color: var(--line); background: #fff; }
.tbtn.more:hover { background: var(--accent-wash); border-color: var(--accent-border); color: var(--accent); }
.tb-status { font-size: 11px; color: var(--good); font-style: italic; margin-left: 6px; min-height: 16px; }
#file-input { display: none; }
.sync-bar-global { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 6px 18px; background: var(--panel-2); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.sync-btns { display: flex; align-items: center; gap: 5px; }
.tbtn.sync-save { color: #0F6E56; border-color: #4CAF94; background:#E8F7F3; font-weight:600; }
.tbtn.sync-save:hover { background: #C8EDE4; }
.tbtn.sync-save:disabled { opacity:0.5; cursor:default; }
.tbtn.sync-load { color: var(--accent); border-color: var(--accent-border); background:var(--accent-wash); font-weight:600; }
.tbtn.sync-load:hover { background: #DCE8F8; }
.tbtn.sync-load:disabled { opacity:0.5; cursor:default; }
/* === CRONOGRAMA === */
.container { padding: 10px 12px 40px; }
.block { margin-bottom: 10px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: 0 2px 8px rgba(80,100,180,0.05); }
.hdr { padding: 11px 16px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; }
.hdr.done { background: var(--good-wash); }
.hdr.current { background: var(--warn-wash); }
.hdr.pending { background: var(--accent-wash); }
.hdr.brk { background: #F4F4F2; }
.hdr-left { display: flex; align-items: center; gap: 10px; }
.hdr-info h2 { font-size: 13px; font-weight: 600; }
.hdr-info p { font-size: 11px; margin-top: 1px; }
.done .hdr-info h2 { color: var(--good); } .done .hdr-info p { color: #4A9B7F; }
.current .hdr-info h2 { color: #7A4800; } .current .hdr-info p { color: #BA7517; }
.pending .hdr-info h2 { color: var(--ink); } .pending .hdr-info p { color: #7B9ED9; }
.brk .hdr-info h2 { color: #5A5A58; } .brk .hdr-info p { color: #888780; }
.hdr-right { display: flex; align-items: center; gap: 8px; }
.badge { font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 10px; }
.badge.done { background: var(--good-border); color: var(--good); }
.badge.current { background: var(--warn-border); color: #7A4800; }
.badge.pending { background: #D6D1F7; color: var(--accent); }
.badge.brk { background: #E0DED8; color: #5A5A58; }
.chev { font-size: 10px; color: #888; transition: transform 0.2s; display: inline-block; }
.chev.open { transform: rotate(90deg); }
.body { display: none; border-top: 1px solid #e8e8e8; }
.body.open { display: block; }
.grid { display: grid; grid-template-columns: repeat(var(--week-cols,5), minmax(130px,1fr)); overflow-x: auto; }
.daycol { border-right: 1px solid #eee; display: flex; flex-direction: column; }
.daycol:last-child { border-right: none; }
.dayhead { padding: 6px 8px; font-size: 11px; font-weight: 600; text-align: center; background: #f8f8f8; border-bottom: 1px solid #eee; color: #555; display: flex; align-items: center; justify-content: center; gap: 5px; }
/* Destaque do dia de hoje (semana atual) */
.today-badge { background:var(--accent); color:#fff; font-size:9px; font-weight:700; padding:1px 6px; border-radius:8px; letter-spacing:.5px; vertical-align:1px; }
.daycol.today-col .dayhead { background:#EBF4FF; color:#1E3A5F; }
.task { padding: 7px 8px; border-bottom: 1px solid #f0f0f0; cursor: pointer; display: flex; gap: 6px; align-items: flex-start; transition: background 0.1s; }
.task:last-child { border-bottom: none; }
.task:hover { background: var(--panel-2); }
.task.done-t { background: var(--good-wash); }
.task.done-t .tc { opacity: 0.6; }
.chkbox { width: 14px; height: 14px; border: 1.5px solid var(--accent-border); border-radius: 4px; flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; background: #fff; transition: all 0.15s; }
.task.done-t .chkbox { background: #4A9B7F; border-color: #4A9B7F; }
.chkmark { display: none; }
.task.done-t .chkmark { display: block; }
.tcat { font-size: 10px; font-weight: 600; display: block; margin-bottom: 2px; }
.tname { font-size: 11.5px; font-weight: 500; display: block; line-height: 1.3; }
.tdesc { font-size: 10.5px; color: #888; display: block; margin-top: 2px; line-height: 1.25; }
.tlinks { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.lnk { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 3px; text-decoration: none; cursor: pointer; }
.lnk.qc { background: #E6F1FB; color: #185FA5; }
.lnk.qc:hover { background: #B5D4F4; }
.lnk.tec { background: #FAEEDA; color: var(--warn); }
.lnk.tec:hover { background: var(--warn-border); }
.brk-msg { padding: 20px; text-align: center; color: #999; font-size: 13px; }
.cur-marker { background: var(--warn-border); color: #633806; font-size: 10px; font-weight: 600; padding: 3px 14px; text-align: center; border-bottom: 1px solid #EF9F27; }
.empty-cell { padding: 10px 8px; font-size: 11px; color: #ccc; flex: 1; }
svg.ring { transform: rotate(-90deg); }
/* === NOTAS POR DIA === */
.note-btn { background: none; border: none; cursor: pointer; font-size: 13px; padding: 1px 3px; border-radius: 3px; line-height: 1; color: #ccc; transition: color 0.15s; }
.note-btn:hover { color: #EF9F27; }
.note-btn.has-note { color: #EF9F27; }
.day-note-wrap { border-top: 1px dashed #e5e0d0; background: #FFFDE7; padding: 6px 7px; margin-top: auto; }
.day-note-wrap.hidden { display: none; }
.day-note-wrap textarea { width: 100%; font-size: 11px; border: 1px solid #e0c870; border-radius: 4px; padding: 4px 6px; resize: vertical; min-height: 52px; background: #FFFFF0; color: #4a3500; font-family: inherit; outline: none; line-height: 1.4; }
.day-note-wrap textarea:focus { border-color: #EF9F27; box-shadow: 0 0 0 2px rgba(239,159,39,0.12); }
.day-note-label { font-size: 10px; color: #BA7517; font-weight: 600; margin-bottom: 3px; }
/* === DASHBOARD === */
#tab-dashboard { display: none; padding: 16px 16px 40px; }
.dash-section-title { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin: 20px 0 12px; padding-bottom: 6px; border-bottom: 1.5px solid var(--line); letter-spacing: 0.3px; text-transform: uppercase; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 6px; }
.dash-card { background: #fff; border-radius: 20px; border: 1px solid var(--line); padding: 20px; box-shadow: var(--elev-1); }
.reg-estudo-tbl { width:100%; border-collapse:collapse; }
.reg-estudo-tbl th { font-size:10.5px; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.4px; padding:6px 8px; text-align:center; }
.reg-estudo-tbl th:first-child { text-align:left; }
.reg-estudo-tbl td { padding:9px 8px; text-align:center; font-size:14px; font-weight:700; color:var(--ink); border-top:1px solid var(--ground); }
.reg-estudo-tbl td.reg-lbl { text-align:left; font-size:12.5px; font-weight:600; color:#4A5568; }
.reg-estudo-tbl td:nth-child(2) { color:var(--accent); }
.reg-estudo-hint { font-size:11px; color:var(--ink-faint); margin-top:12px; line-height:1.5; }
.dash-card h3 { font-size: 11px; font-weight: 600; color: var(--ink-faint); margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.6px; }
.mini-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.mini-box { background: var(--panel-2); border-radius: 12px; padding: 10px 12px; text-align: center; }
.mini-box .mbn { font-size: 24px; font-weight: 700; }
.mini-box .mbs { font-size: 10px; color: var(--ink-faint); margin-top: 2px; }
.mbn.green { color: var(--good); }
.mbn.orange { color: var(--warn); }
.mbn.purple { color: #6B8FE8; }
.mbn.red { color: #C0392B; }
.mbn.gray { color: var(--ink-soft); }
.mat-row { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.mat-label { font-size: 11px; color: #333; min-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mat-bar-wrap { flex: 1; height: 7px; background: #e8e8e8; border-radius: 4px; overflow: hidden; }
.mat-bar { height: 100%; border-radius: 4px; transition: width 0.5s; }
.mat-val { font-size: 11px; font-weight: 600; color: #555; min-width: 38px; text-align: right; }
.erros-por-mat { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.em-chip { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 12px; background: var(--bad-wash); color: var(--bad); }
.em-chip.ok { background: #EAF3DE; color: #27500A; }
.btn-primary { background: var(--accent); color: #fff; border: none; padding: 9px 20px; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s; font-family: inherit; box-shadow: 0 2px 8px rgba(167,189,246,0.35); }
.btn-primary:hover { background: #8AAAF0; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(167,189,246,0.45); }
.filter-sel { font-size: 12px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); outline: none; cursor: pointer; font-family: inherit; }
.filter-sel:focus { border-color: var(--accent-chip); }
.act-btn { font-size: 11px; padding: 4px 11px; border-radius: var(--radius-sm); border: 1px solid; cursor: pointer; background: #fff; transition: background 0.12s; font-weight: 500; }
.act-btn.rev { color: var(--good); border-color: var(--good-border); }
.act-btn.rev:hover { background: var(--good-wash); }
.act-btn.edit { color: var(--accent); border-color: var(--accent-border); }
.act-btn.edit:hover { background: var(--accent-wash); }
.act-btn.del { color: var(--bad); border-color: var(--bad-border); }
.act-btn.del:hover { background: var(--bad-wash); }
.act-btn.link { color: #185FA5; border-color: #85B7EB; }
.act-btn.link:hover { background: #E6F1FB; }
/* === MODAL === */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(47,58,77,0.35); z-index: 200; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
.modal-overlay.open { display: flex; }
.modal { background: #fff; border-radius: 20px; padding: 26px 28px; width: min(540px, 96vw); max-height: 92vh; overflow-y: auto; box-shadow: 0 12px 50px rgba(80,100,180,0.16); }
.modal-title { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1.5px solid var(--line); }
.form-group { margin-bottom: 13px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 4px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 10px; font-size: 13px; font-family: inherit; outline: none; color: var(--ink); background: #fff; transition: border-color 0.15s; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent-chip); box-shadow: 0 0 0 3px rgba(167,189,246,0.15); }
.form-group textarea { min-height: 68px; resize: vertical; line-height: 1.45; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-hint { font-size: 10.5px; color: var(--ink-faint); margin-top: 3px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.btn-cancel { background: var(--panel-2); color: var(--ink-soft); border: 1px solid var(--line); padding: 8px 18px; border-radius: var(--radius-md); font-size: 13px; cursor: pointer; font-family: inherit; }
.btn-cancel:hover { background: var(--accent-wash); }
.aprendizado-section { display: none; margin-top: 4px; padding: 10px; background: var(--good-wash); border: 1px dashed var(--good-border); border-radius: 10px; }
.aprendizado-section.visible { display: block; }
/* Handles de arrastar semana */
.week-drag-handle {
cursor: grab; color: var(--accent-border); font-size: 16px; padding: 0 6px;
user-select: none; -webkit-user-select: none;
line-height: 1; flex-shrink: 0;
touch-action: none; -webkit-touch-callout: none;
}
.week-drag-handle:active { cursor: grabbing; }
.block.dragging-week { opacity: 0.35; border: 2px dashed var(--accent-border); }
.block.drag-over-week { border: 2px solid var(--accent-chip); box-shadow: 0 0 0 3px rgba(167,189,246,0.2); }
/* === Botão de modo edição (na barra do topo; só aparece na aba Cronograma) === */
#fab-edit-mode {
display: none; /* showTab() controla; vira inline-flex na aba Cronograma */
align-items: center; gap: 6px;
background: var(--ink); color: #fff;
border: none; border-radius: 16px;
padding: 6px 14px;
font-size: 13px; font-weight: 600; font-family: inherit;
cursor: pointer;
transition: background .15s, transform .1s;
white-space: nowrap;
}
#fab-edit-mode:hover { background: var(--accent); }
#fab-edit-mode:active { transform: scale(.96); }
#fab-edit-mode.editing { background: #E6670A; }
#fab-edit-mode.editing:hover { background: #c25508; }
/* === Cronômetro flutuante — botão circular fixo (sempre visível) === */
#float-timer-stop {
display: none; position: fixed; right: 26px; bottom: 96px; z-index: 1199;
width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
background: #8A1C1C; color: #fff; font-size: 16px;
box-shadow: 0 4px 16px rgba(138,28,28,.4); transition: transform .12s, background .15s;
}
#float-timer-stop:hover { background: #a52424; transform: scale(1.06); }
#float-timer-stop.visible { display: flex; align-items: center; justify-content: center; }
#float-timer-fab {
position: fixed; right: 24px; bottom: 24px; z-index: 1200;
width: 58px; height: 58px; border-radius: 50%; cursor: pointer;
display: flex; align-items: center; justify-content: center; flex-direction: column;
background: var(--accent); color: #fff; border: none; font-family: inherit;
box-shadow: 0 6px 20px rgba(63,114,175,.45); transition: transform .12s, background .2s, box-shadow .2s;
gap: 1px;
}
#float-timer-fab:hover { transform: scale(1.07); box-shadow: 0 8px 26px rgba(63,114,175,.55); }
#float-timer-fab:active { transform: scale(.97); }
#float-timer-fab #ft-fab-icon.icon { width: 24px; height: 24px; }
#float-timer-fab #ft-fab-time { display: none; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .2px; }
#float-timer-fab.running { background: var(--ink); animation: ft-pulse 2.2s ease-in-out infinite; }
#float-timer-fab.paused { background: #B4690E; animation: none; }
#float-timer-fab.overflow{ background: #8A1C1C; }
#float-timer-fab.running #ft-fab-icon, #float-timer-fab.paused #ft-fab-icon, #float-timer-fab.overflow #ft-fab-icon { display: none; }
#float-timer-fab.running #ft-fab-time, #float-timer-fab.paused #ft-fab-time, #float-timer-fab.overflow #ft-fab-time { display: block; }
@keyframes ft-pulse {
0%, 100% { box-shadow: 0 6px 20px rgba(47,58,77,.45); }
50% { box-shadow: 0 6px 26px rgba(47,58,77,.75), 0 0 0 6px rgba(47,58,77,.12); }
}
@media (prefers-reduced-motion: reduce) { #float-timer-fab.running { animation: none; } }
@media(max-width:600px){
#float-timer-fab { right: 16px; bottom: 78px; width: 52px; height: 52px; }
#float-timer-stop { right: 20px; bottom: 140px; width: 40px; height: 40px; }
}
/* === PAINEL FLUTUANTE DO CRONÔMETRO ===
Recebe a própria .timer-bar (movida do topo) quando o modo é "flutuante". */
#float-timer-panel {
display: none; position: fixed; right: 24px; bottom: 24px; z-index: 1201;
width: 300px; max-width: calc(100vw - 32px);
background: #fff; border: 1px solid var(--line); border-radius: 14px;
box-shadow: 0 10px 34px rgba(47,58,77,.22); overflow: hidden;
animation: ftp-in .16s ease;
}
#float-timer-panel.open { display: block; }
@keyframes ftp-in { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { #float-timer-panel { animation: none; } }
#ftp-head {
display: flex; align-items: center; gap: 8px; padding: 9px 12px;
background: var(--panel-2); border-bottom: 1px solid var(--line);
font-size: 12px; font-weight: 700; color: #4A5568;
}
#ftp-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ftp-min {
background: none; border: none; cursor: pointer; color: var(--ink-faint);
font-size: 18px; line-height: 1; padding: 0 4px; font-family: inherit;
}
#ftp-min:hover { color: var(--ink); }
/* A barra, quando está dentro do painel: empilha em coluna em vez de linha */
.timer-bar.in-panel {
background: #fff; flex-direction: column; align-items: stretch; gap: 9px;
padding: 12px; border-bottom: none;
}
.timer-bar.in-panel > label { display: none; }
.timer-bar.in-panel .timer-mode-btns { display: flex; }
.timer-bar.in-panel .timer-mat-sel,
.timer-bar.in-panel .timer-tipo-sel { width: 100%; }
.timer-bar.in-panel .timer-display {
font-size: 30px; text-align: center; color: var(--ink); letter-spacing: 1px; padding: 2px 0;
}
.timer-bar.in-panel .timer-btns { display: flex; gap: 7px; }
.timer-bar.in-panel .timer-btn { flex: 1; justify-content: center; text-align: center; }
.timer-bar.in-panel .timer-sessions { text-align: center; font-size: 11px; }
.timer-bar.in-panel .timer-expand-btn { display: none; }
.timer-bar.in-panel .timer-cd-row { justify-content: center; flex-wrap: wrap; }
/* Os controles abaixo foram estilizados para o fundo escuro da barra fixa
(texto claro sobre translúcido branco). Dentro do painel o fundo é branco,
então precisam de cores escuras/legíveis — sem alterar o modo barra. */
.timer-bar.in-panel .timer-mat-sel,
.timer-bar.in-panel .timer-tipo-sel {
color: var(--ink); background: var(--panel-2); border-color: var(--line);
}
.timer-bar.in-panel .timer-mode-btns { border-color: var(--accent-border); }
.timer-bar.in-panel .tmode-btn { color: var(--ink-soft); }
.timer-bar.in-panel .timer-preset-btn {
color: var(--accent); background: var(--accent-wash); border-color: var(--accent-border);
}
.timer-bar.in-panel .timer-cd-input {
color: var(--ink); background: var(--panel-2); border-color: var(--line);
}
.timer-bar.in-panel .timer-pause-info { color: var(--warn); }
.timer-bar.in-panel .timer-sessions { color: var(--ink-faint); }
.timer-bar.in-panel .timer-sessions:hover { color: var(--ink); }
/* Dentro do painel os botões são alvo de toque, não item de barra compacta */
.timer-bar.in-panel .timer-btn { min-height: 40px; font-size: 13px; padding: 9px 14px; }
.timer-bar.in-panel .timer-mat-sel,
.timer-bar.in-panel .timer-tipo-sel { min-height: 38px; font-size: 13px; }
.timer-bar.in-panel .tmode-btn { min-height: 34px; flex: 1; }
/* No celular o painel ancora acima da navegação inferior, ocupando a largura —
assim ele não flutua sobre o meio do conteúdo nem cobre as abas de navegação. */
@media(max-width:600px){
#float-timer-panel {
right: 0; left: 0; bottom: 58px; width: auto; max-width: none;
border-radius: 16px 16px 0 0; border-left: none; border-right: none; border-bottom: none;
}
.timer-bar.in-panel { padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0px)); }
.timer-bar.in-panel .timer-display { font-size: 28px; }
.timer-bar.in-panel .timer-btn { min-height: 44px; }
}
/* Botão ✏️ de edição da semana */
.week-edit-quick {
background: none; border: 1px solid transparent; border-radius: 8px;
color: var(--accent-border); font-size: 13px; padding: 2px 6px; cursor: pointer;
transition: all .12s; flex-shrink: 0;
}
.week-edit-quick:hover { border-color: var(--accent-border); color: var(--accent-chip); background: var(--accent-wash); }
.week-mode-toggle.active { color: var(--good); background: var(--good-wash); border-color: var(--good-border); }
.week-mode-toggle.active:hover { background: var(--good-wash); }
/* Botão rápido + em cada dia */
.quickadd-day-btn {
background: none; border: 1px solid var(--line); border-radius: 6px;
color: var(--accent-border); font-size: 13px; font-weight: 700; line-height: 1;
padding: 1px 5px; cursor: pointer; transition: all 0.12s; flex-shrink: 0;
}
.quickadd-day-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Handle de arrastar coluna-dia (modo edição) */
.day-drag-handle {
cursor: grab; color: var(--accent-border); font-size: 13px; padding: 0 3px;
user-select: none; -webkit-user-select: none;
line-height: 1; flex-shrink: 0;
touch-action: none; -webkit-touch-callout: none;
}
.day-drag-handle:active { cursor: grabbing; }
.daycol.dragging-day { opacity: 0.3; background: var(--accent-wash) !important; }
.daycol.drag-over-day {
background: var(--accent-wash) !important;
outline: 2px solid var(--accent-chip);
outline-offset: -2px;
}
/* Botões de ação da semana (modo edição) */
.week-edit-btns { display: flex; gap: 6px; align-items: center; }
.week-edit-btn { font-size: 11px; padding: 4px 11px; border-radius: var(--radius-sm); border: 1px solid; cursor: pointer; background: #fff; font-weight: 500; font-family: inherit; }
.week-edit-btn.edit { color: var(--accent); border-color: var(--accent-border); }
.week-edit-btn.edit:hover { background: var(--accent-wash); }
.week-edit-btn.del { color: var(--bad); border-color: var(--bad-border); }
.week-edit-btn.del:hover { background: var(--bad-wash); }
/* Botão adicionar semana */
.add-week-btn {
display: block; width: 100%; margin: 12px 0 4px;
padding: 12px; border: 2px dashed var(--accent-border); border-radius: 16px;
background: var(--panel-2); color: var(--ink-soft); font-size: 13px; font-weight: 500;
cursor: pointer; text-align: center; transition: all 0.15s; font-family: inherit;
}
.add-week-btn:hover { background: var(--accent-wash); border-color: var(--accent-chip); color: var(--accent); }
/* Task drag handle */
.task-drag-handle {
cursor: grab; color: var(--accent-border); font-size: 13px; padding: 0 2px;
flex-shrink: 0; align-self: center; user-select: none;
-webkit-user-select: none; touch-action: none;
-webkit-touch-callout: none;
}
.task-drag-handle:active { cursor: grabbing; }
.task.dragging-task { opacity: 0.3; border: 1.5px dashed var(--accent-border); }
.task.drag-over-task { border-top: 2px solid var(--accent-chip); background: var(--accent-wash); }
/* Botões inline de edição de tarefa */
.task-edit-btns { display: flex; gap: 3px; margin-top: 5px; }
.task-act { font-size: 10px; padding: 2px 7px; border-radius: var(--radius-sm); border: 1px solid; cursor: pointer; background: #fff; font-family: inherit; }
.task-act.edit { color: var(--accent); border-color: var(--accent-border); }
.task-act.edit:hover { background: var(--accent-wash); }
.task-act.del { color: var(--bad); border-color: var(--bad-border); }
.task-act.del:hover { background: var(--bad-wash); }
/* Botão adicionar tarefa */
.add-task-btn {
display: block; width: calc(100% - 16px); margin: 6px 8px;
padding: 5px; border: 1.5px dashed var(--line); border-radius: 8px;
background: var(--panel-2); color: var(--ink-faint); font-size: 11px;
cursor: pointer; text-align: center; transition: all 0.15s; font-family: inherit;
}
.add-task-btn:hover { background: var(--accent-wash); border-color: var(--accent-chip); color: var(--accent); }
/* Indicador de drop entre tarefas */
.task-drop-line {
height: 3px; background: var(--accent-chip); border-radius: 2px;
margin: 0 8px; display: none;
}
.task-drop-line.visible { display: block; }
/* === GIST SYNC === */
.sync-indicator {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11px; font-weight: 500; padding: 4px 11px;
border-radius: 6px; border: 1px solid; cursor: pointer;
transition: all 0.2s; white-space: nowrap;
}
/* Versão compacta: só o ponto de status, cor muda conforme o estado.
O texto completo fica no title (aparece ao passar o mouse). */
.sync-indicator.sync-compact { padding: 6px; border-radius: 50%; }
.sync-indicator.sync-compact .sync-dot { width: 9px; height: 9px; }
.sync-indicator.idle { color: var(--ink-soft); border-color: var(--line); background: var(--panel-2); }
.sync-indicator.ok { color: var(--good); border-color: var(--good-border); background: var(--good-wash); }
.sync-indicator.saving { color: var(--warn); border-color: var(--warn-border); background: var(--warn-wash); }
.sync-indicator.error { color: var(--bad); border-color: var(--bad-border); background: var(--bad-wash); }
.sync-indicator.loading { color: var(--accent); border-color: var(--accent-border); background: var(--accent-wash); }
.sync-label { white-space: nowrap; }
.sync-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dot-idle { background: var(--accent-border); }
.dot-ok { background: var(--good); }
.dot-saving { background: #EF9F27; animation: pulse 1s infinite; }
.dot-error { background: #A32D2D; }
.dot-loading { background: var(--accent-chip); animation: pulse 0.7s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
.gist-form-hint {
font-size: 11px; color: var(--ink-soft); background: var(--panel-2);
border: 1px solid var(--line); border-radius: 8px;
padding: 8px 11px; line-height: 1.6; margin-bottom: 12px;
}
.gist-form-hint a { color: var(--accent); }
.gist-form-hint code { background: var(--accent-wash); padding: 1px 4px; border-radius: 3px; font-size: 10.5px; }
.gist-status-msg { font-size: 12px; min-height: 18px; margin-top: 8px; font-style: italic; }
/* === CRONÔMETRO === */
.timer-bar {
background: var(--ink); display: flex; align-items: center; gap: 8px;
padding: 7px 14px; flex-wrap: wrap; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.timer-bar label { font-size: 11px; color: var(--ink-faint); font-weight: 500; white-space: nowrap; }
.timer-mat-sel {
font-size: 12px; padding: 4px 8px; border-radius: 8px;
border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.08); color: var(--line);
cursor: pointer; min-width: 140px; font-family: inherit;
}
.timer-tipo-sel {
font-size: 11px; padding: 4px 6px; border-radius: 8px;
border: 1px solid rgba(167,189,246,0.35); background: rgba(167,189,246,0.1); color: var(--line);
cursor: pointer; min-width: 110px; font-family: inherit;
}
/* Opções do dropdown: texto escuro sobre branco (menu nativo tem fundo claro) */
.timer-mat-sel option, .timer-tipo-sel option { color: var(--ink); background: #fff; }
.timer-mode-btns { display:flex; border-radius:8px; overflow:hidden; border:1px solid rgba(167,189,246,0.3); flex-shrink:0; }
.tmode-btn {
font-size: 11px; font-weight: 600; padding: 4px 9px; border: none; cursor: pointer;
background: transparent; color: var(--ink-faint); transition: all 0.15s; white-space: nowrap; font-family: inherit;
}
.tmode-btn.active { background: var(--accent); color: #fff; }
.timer-display {
font-size: 20px; font-weight: 700; color: var(--line); letter-spacing: 2px;
font-family: 'Courier New', monospace; min-width: 90px; text-align: center;
}
.timer-display.running { color: var(--good-border); }
.timer-display.paused { color: var(--warn-border); }
.timer-display.overflow { color: var(--bad-border); }
.timer-btn {
font-size: 12px; font-weight: 600; padding: 5px 14px; border-radius: 8px;
border: none; cursor: pointer; transition: all 0.15s; white-space: nowrap; font-family: inherit;
}
.timer-btn.start { background: var(--good-border); color: #1A4A35; }
.timer-btn.pause { background: var(--warn-border); color: #4a2800; }
.timer-btn.resume { background: var(--good-border); color: #1A4A35; }
.timer-btn.stop { background: var(--bad-border); color: #4a0000; }
.timer-btns { display:flex; gap:5px; align-items:center; }
.timer-cd-row { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.timer-preset-btn {
font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px;
border: 1px solid rgba(167,189,246,0.35); background: rgba(167,189,246,0.1); color: var(--accent-border); cursor: pointer;
transition: background 0.12s; font-family: inherit;
}
.timer-preset-btn:hover { background: rgba(167,189,246,0.25); }
.timer-preset-btn.selected { background: var(--accent); border-color: var(--accent); color: #fff; }
.timer-cd-input {
font-size: 12px; padding: 3px 5px; border-radius: 6px; border: 1px solid rgba(167,189,246,0.35);
background: rgba(255,255,255,0.08); color: var(--line); width: 52px; text-align: center; font-family: inherit;
}
.timer-cd-input::placeholder { color: var(--ink-soft); }
.timer-pause-info { font-size: 11px; color: var(--warn-border); white-space: nowrap; }
.timer-alert-btn {
font-size: 14px; background: none; border: none; cursor: pointer; padding: 2px 4px;
opacity: 0.7; line-height: 1;
}
.timer-alert-btn:hover { opacity: 1; }
.timer-alert-btn.muted { opacity: 0.3; }
.timer-sessions { font-size: 11px; color: var(--ink-faint); margin-left: auto; cursor: pointer; white-space: nowrap; }
.timer-sessions:hover { color: var(--line); }
/* Botão "⋯" que expande os controles do cronômetro — só existe no mobile */
.timer-expand-btn { display: none; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; color: var(--line); font-size: 15px; line-height: 1; padding: 4px 10px; cursor: pointer; margin-left: auto; }
/* Stats de tempo na aba Evolução */
.evol-tempo-filter { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.evol-tempo-filter button { font-size:11px; font-weight:600; padding:4px 12px; border-radius:8px; border:1px solid var(--line); background:var(--panel-2); color:var(--ink-soft); cursor:pointer; font-family:inherit; }
.evol-tempo-filter button.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.tempo-cat-section { margin-bottom:14px; }
.tempo-cat-title { font-size:12px; font-weight:700; color:var(--ink); margin-bottom:6px; }
/* === DASHBOARD – TEMPO === */
.tempo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
@media(max-width:600px){ .tempo-grid { grid-template-columns: 1fr; } }
.tempo-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.tempo-label { font-size: 12px; color: var(--ink-soft); width: 150px; flex-shrink: 0; }
.tempo-bar-wrap { flex: 1; height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.tempo-bar { height: 100%; border-radius: 4px; transition: width 0.4s; }
.tempo-val { font-size: 12px; color: var(--ink-soft); min-width: 55px; text-align: right; }
/* === PONTOS FRACOS === */
.pontos-top { display: flex; align-items: center; gap: 10px; padding: 12px 18px; flex-wrap: wrap;
border-bottom: 1px solid var(--line); background: var(--panel-2); }
.pontos-list { padding: 12px 18px 40px; }
.ponto-card {
background: #fff; border: 1px solid var(--line); border-radius: 16px;
margin-bottom: 10px; overflow: hidden; box-shadow: 0 2px 8px rgba(47,58,77,0.05);
}
.ponto-header {
display: flex; align-items: center; gap: 8px; padding: 9px 14px;
border-bottom: 1px solid var(--ground);
}
.ponto-mat-tag {
font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
background: var(--accent-wash); color: var(--accent); white-space: nowrap;
}
.ponto-topico { font-size: 13px; font-weight: 600; color: var(--ink); flex: 1; }
.ponto-acertos { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 8px; white-space: nowrap; }
.ponto-acertos.ruim { background: var(--bad-wash); color: var(--bad); }
.ponto-acertos.medio { background: var(--warn-wash); color: var(--warn); }
.ponto-acertos.bom { background: var(--good-wash); color: var(--good); }
.ponto-body { padding: 8px 14px 10px; }
.ponto-desc { font-size: 12px; color: var(--ink-soft); margin-bottom: 6px; white-space: pre-wrap; }
.ponto-bar-wrap { height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.ponto-bar { height: 100%; border-radius: 3px; transition: width 0.4s; }
.ponto-actions { display: flex; gap: 6px; }
.ponto-btn { font-size: 11px; padding: 4px 11px; border-radius: var(--radius-sm); border: 1px solid; cursor: pointer; background: #fff; font-family: inherit; }
.ponto-btn.edit { color: var(--accent); border-color: var(--accent-border); }
.ponto-btn.edit:hover { background: var(--accent-wash); }
.ponto-btn.del { color: var(--bad); border-color: var(--bad-border); }
.ponto-btn.del:hover { background: var(--bad-wash); }
.ponto-revisado { font-size: 11px; color: var(--good); margin-left: auto; }
.ponto-empty { color: var(--ink-faint); font-size: 13px; text-align: center; padding: 30px 0; }
/* ===== ABA IMPORTAR PDF ===== */
.importar-wrap { padding: 16px 18px 60px; max-width: 960px; }
.importar-header { margin-bottom: 16px; }
.importar-header h2 { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.importar-header p { font-size: 12px; color: var(--ink-soft); }
.pdf-upload-zone { border: 2px dashed var(--accent-border); border-radius: 16px; background: var(--accent-wash); padding: 32px; text-align: center; cursor: pointer; transition: all 0.2s; }
.pdf-upload-zone:hover { background: #dce9f9; border-color: var(--accent-chip); }
.pdf-upload-zone.drag-over { background: #dce9f9; border-color: var(--accent); }
.pdf-upload-icon { font-size: 36px; margin-bottom: 8px; }
.pdf-upload-label { font-size: 14px; font-weight: 600; color: var(--accent); }
.pdf-upload-sub { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.pdf-status { font-size: 12px; margin-top: 8px; min-height: 18px; font-style: italic; color: var(--good); }
.pdf-section-title { font-size: 13px; font-weight: 700; color: var(--ink); margin: 18px 0 8px; display: flex; align-items: center; gap: 10px; }
.pdf-text-preview { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; font-size: 11px; font-family: monospace; color: #444; max-height: 200px; overflow-y: auto; white-space: pre-wrap; line-height: 1.5; }
/* Week builder cards */
.wbuilder-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; margin-bottom: 12px; overflow: hidden; }
.wbuilder-hdr { background: var(--panel-2); padding: 10px 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wbuilder-hdr input, .wbuilder-hdr select { font-size: 12px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-family: inherit; }
.wbuilder-hdr input.wtitle { flex: 1; min-width: 140px; font-weight: 600; }
.wbuilder-hdr input.wdates { width: 140px; }
.wbuilder-del { margin-left: auto; background: none; border: none; font-size: 16px; cursor: pointer; color: var(--accent-border); }
.wbuilder-del:hover { color: #A32D2D; }
.wbuilder-grid { display: grid; grid-template-columns: repeat(5, minmax(120px,1fr)); border-top: 1px solid var(--line); overflow-x: auto; }
.wbuilder-col { border-right: 1px solid var(--line); padding: 8px; }
.wbuilder-col:last-child { border-right: none; }
.wbuilder-day-label { font-size: 11px; font-weight: 700; color: var(--accent); margin-bottom: 6px; text-align: center; }
.wbuilder-task-row { display: flex; gap: 4px; margin-bottom: 5px; align-items: flex-start; }
.wbuilder-task-row input { font-size: 11px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; width: 100%; font-family: inherit; }
.wbuilder-task-del { background: none; border: none; color: var(--accent-border); cursor: pointer; font-size: 13px; flex-shrink: 0; padding: 2px; }
.wbuilder-task-del:hover { color: #A32D2D; }
.wbuilder-add-task { font-size: 11px; color: var(--ink-soft); background: none; border: 1px dashed var(--accent-border); border-radius: 6px; padding: 3px 6px; cursor: pointer; width: 100%; margin-top: 2px; font-family: inherit; }
.wbuilder-add-task:hover { background: var(--accent-wash); color: var(--accent); }
.wbuilder-add-week-btn { background: none; border: 2px dashed var(--accent-border); border-radius: 16px; padding: 10px; width: 100%; color: var(--ink-soft); font-size: 13px; font-weight: 600; cursor: pointer; margin-bottom: 12px; font-family: inherit; }
.wbuilder-add-week-btn:hover { background: var(--accent-wash); border-color: var(--accent-chip); color: var(--accent); }
/* === TROCAR CRONOGRAMA (modal aberto pelo menu Ações) === */
.troca-sched-overlay { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(30,40,60,.42); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.troca-sched-modal { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--elev-3); width: 100%; max-width: 400px; overflow: hidden; animation: ftp-in .16s ease; }
.troca-sched-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-4) var(--space-3); border-bottom: 1px solid var(--line); }
.troca-sched-head h3 { font-size: 15px; font-weight: 700; color: var(--ink); }
.troca-sched-close { background: none; border: none; cursor: pointer; color: var(--ink-faint); font-size: 16px; line-height: 1; padding: 4px; border-radius: var(--radius-sm); }
.troca-sched-close:hover { color: var(--ink); background: var(--panel-2); }
.troca-sched-hint { font-size: 11.5px; color: var(--ink-faint); padding: var(--space-2) var(--space-4) 0; }
.troca-sched-list { max-height: 52vh; overflow-y: auto; padding: var(--space-2); }
.troca-sched-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); cursor: pointer; transition: background .12s; }
.troca-sched-item:hover { background: var(--panel-2); }
.troca-sched-item.active { background: var(--accent-wash); }
.troca-sched-icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
.troca-sched-namewrap { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2); }
.troca-sched-name { font-size: 13.5px; color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.troca-sched-item.active .troca-sched-name { font-weight: 700; }
.troca-sched-badge { flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: .02em; color: var(--warn); background: var(--warn-wash); border: 1px solid var(--warn-border); padding: 1px 7px; border-radius: var(--radius-pill); }
.troca-sched-check { color: var(--accent); font-weight: 700; flex-shrink: 0; }
.troca-sched-acts { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.troca-sched-act { background: none; border: none; cursor: pointer; color: var(--ink-faint); font-size: 13px; padding: 6px; border-radius: var(--radius-sm); line-height: 1; }
.troca-sched-act:hover { color: var(--ink); background: #fff; }
/* Editar precisa ser mais legível que os demais ícones (excluir/estrela) —
texto ao lado do ícone, não só o emoji sozinho. */
.troca-sched-edit { width: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--accent); padding: 6px 9px; }
.troca-sched-edit:hover { color: var(--accent); background: var(--accent-wash); }
/* Estrela do principal: cheia (marcado) e o botão de contorno (marcar) */
.troca-sched-star { flex-shrink: 0; color: var(--warn-border); font-size: 16px; line-height: 1; padding: 6px; }
.troca-sched-star.is-principal { color: #E6A417; }
.troca-sched-star-btn { font-size: 16px; color: var(--ink-faint); }
.troca-sched-star-btn:hover { color: #E6A417; background: var(--warn-wash); }
.troca-sched-new { display: block; width: calc(100% - 2*var(--space-2)); margin: 0 var(--space-2) var(--space-2); padding: var(--space-3); border: 1px dashed var(--accent-border); border-radius: var(--radius-md); background: #fff; color: var(--accent); font-weight: 600; font-size: 13px; cursor: pointer; font-family: inherit; }
.troca-sched-new:hover { background: var(--accent-wash); }
@media(max-width:600px){
.troca-sched-modal { max-width: none; }
.troca-sched-item { padding: var(--space-4) var(--space-3); }
.troca-sched-act { padding: 10px; min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.troca-sched-edit { width: auto; min-width: 0; padding: 10px 12px; }
}
.importar-actions { display: flex; gap: 10px; flex-wrap: wrap; padding: 6px 0 4px; }
/* import option cards */
.import-option-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 20px; margin-bottom:16px; position:relative; box-shadow: 0 2px 8px rgba(47,58,77,0.05); }
.import-option-card.recommended { border-color:var(--good-border); background:#F0FBF6; }
.import-option-card h3 { font-size:14px; font-weight:700; color:var(--ink); margin-bottom:6px; }
.import-option-card p { font-size:12px; color:var(--ink-soft); margin-bottom:14px; line-height:1.5; }
.import-option-badge { position:absolute; top:12px; right:14px; background:var(--good); color:#fff; font-size:10px; font-weight:700; padding:2px 8px; border-radius:10px; }
/* Comando pronto pra IA (card "Via assistente de IA") */
.ia-cmd-box { background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:14px; }
.ia-cmd-box pre { font-family:monospace; font-size:11px; color:var(--ink); line-height:1.6; white-space:pre-wrap; word-break:break-word; max-height:220px; overflow-y:auto; margin:0 0 10px; }
#json-paste-input { width:100%; height:180px; font-family:monospace; font-size:11px; padding:10px; border:1px solid var(--line); border-radius:8px; resize:vertical; background:var(--panel-2); color:var(--ink); line-height:1.5; }
#json-paste-input:focus { outline:none; border-color:var(--good-border); background:#fff; }
.json-import-status { font-size:12px; min-height:18px; margin:6px 0 2px; font-style:italic; }
/* === CRIAR PLANO (acordeão) === */
.criar-plano-head h2 { font-size:22px; font-weight:700; color:var(--ink); margin-bottom:6px; letter-spacing:-0.01em; }
.criar-plano-head p { font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin-bottom:0; max-width:640px; }
/* -- Passos (contexto visual — hoje é uma tela única; os passos 2 e 3
ainda não existem como telas separadas) -- */
.pr-steps { display:flex; align-items:center; gap:10px; padding:14px 0; margin-bottom:6px; }
.pr-step { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink-faint); }
.pr-step-num { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11.5px; background:var(--panel-2); color:var(--ink-faint); flex-shrink:0; }
.pr-step-active { color:var(--accent); }
.pr-step-active .pr-step-num { background:var(--accent); color:#fff; }
.pr-step-line { width:40px; height:1.5px; background:var(--line); flex-shrink:0; }
/* -- Layout principal: cards + acordeão à esquerda, prévia + comparativo
à direita -- */
.pr-layout { display:grid; grid-template-columns:1fr 320px; gap:var(--space-6); align-items:start; margin-top:var(--space-5); }
@media (max-width:1000px) { .pr-layout { grid-template-columns:1fr; } }
/* -- Cards principais: plano pronto (primário) x criar do zero -- */
.pr-main-cards { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); margin-bottom:var(--space-6); align-items:stretch; }
@media (max-width:680px) { .pr-main-cards { grid-template-columns:1fr; } }
.cp-card { position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:0 2px 8px rgba(47,58,77,0.05); padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-4); }
.cp-card-primary { border:1.5px solid var(--accent-border); box-shadow:0 6px 20px rgba(63,114,175,0.12); background:linear-gradient(180deg,#FBFDFF 0%,#fff 120px); }
.cp-badge { position:absolute; top:-12px; left:22px; background:var(--accent); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.2px; padding:4px 12px; border-radius:var(--radius-pill); box-shadow:0 2px 6px rgba(63,114,175,0.35); display:flex; align-items:center; gap:4px; }
.pr-icon-circle { width:52px; height:52px; border-radius:50%; background:var(--accent-wash); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pr-icon-circle .icon { width:26px; height:26px; color:var(--accent); }
.pr-icon-circle--muted { background:var(--panel-2); }
.pr-icon-circle--muted .icon { color:var(--ink-soft); }
.pr-card-sub { font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0; }
.cp-perks { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.cp-perks li { font-size:12.5px; color:var(--ink-soft); padding-left:20px; position:relative; }
.cp-perks li::before { content:'✓'; position:absolute; left:0; color:var(--good); font-weight:700; }
.pr-tags-label { font-size:11px; font-weight:600; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.4px; margin:2px 0 -2px; }
.pr-tags { display:flex; flex-wrap:wrap; gap:6px; }
.pr-tag { font-size:11.5px; color:var(--ink-soft); background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius-pill); padding:4px 12px; }
.cp-card-primary .pr-tag { background:var(--accent-wash); border-color:var(--accent-border); color:var(--accent); }
.pr-cta { margin-top:auto; align-self:stretch; text-align:center; font-size:14px; padding:11px 20px; }
.pr-trust { font-size:11.5px; color:var(--ink-faint); text-align:center; margin-top:-8px; }
.cp-catalogo-body { margin-top:2px; }
/* -- Divisor entre opções principais e secundárias -- */
.cp-divider { display:flex; align-items:center; gap:12px; margin:0 0 var(--space-4); color:var(--ink-faint); font-size:12px; font-weight:600; }
.cp-divider::before, .cp-divider::after { content:''; flex:1; height:1px; background:var(--line); }
/* -- Aside: prévia ilustrativa do plano + comparativo rápido -- */
.pr-aside-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:0 2px 8px rgba(47,58,77,0.05); padding:var(--space-4); margin-bottom:var(--space-5); }
.pr-aside-title { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:var(--space-3); }
.pr-aside-title .icon { width:16px; height:16px; color:var(--accent); }
.pr-sample-tag { font-weight:400; font-size:11px; color:var(--ink-faint); margin-left:auto; }
.pr-day-row { display:flex; gap:12px; padding:8px 0; border-bottom:1px solid var(--ground); }
.pr-day-row:last-of-type { border-bottom:none; }
.pr-day-badge { width:34px; height:34px; border-radius:8px; background:var(--panel-2); color:var(--ink-soft); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pr-day-subjects { flex:1; display:flex; flex-direction:column; gap:5px; }
.pr-subject-line { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink); }
.pr-subject-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.pr-subject-line span.pr-dur { margin-left:auto; color:var(--ink-faint); font-size:11px; }
.pr-compare-mini { width:100%; border-collapse:collapse; font-size:12px; }
.pr-compare-mini th, .pr-compare-mini td { padding:7px 4px; text-align:right; border-bottom:1px solid var(--ground); }
.pr-compare-mini th:first-child, .pr-compare-mini td:first-child { text-align:left; }
.pr-compare-mini thead th { color:var(--ink-faint); font-weight:600; font-size:11px; }
.pr-compare-mini thead th:nth-child(2) { color:var(--accent); }
.pr-compare-mini tbody th { font-weight:500; color:var(--ink-soft); }
.pr-compare-mini tbody tr:last-child th, .pr-compare-mini tbody tr:last-child td { border-bottom:none; }
.pr-confirm-box { background:var(--accent-wash); border:1px solid var(--accent-border); border-radius:var(--radius-md); padding:12px 14px; font-size:12px; color:var(--ink-soft); line-height:1.5; }
.pr-confirm-box strong { color:var(--ink); display:block; margin-bottom:2px; }
.criar-metodo { background:#fff; border:1px solid var(--line); border-radius:14px; margin-bottom:12px; box-shadow:0 2px 8px rgba(47,58,77,0.05); overflow:hidden; }
.criar-metodo[open] { border-color:var(--accent-border); }
.criar-metodo-secondary { box-shadow:none; }
.criar-metodo > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:16px 18px; user-select:none; }
.criar-metodo > summary::-webkit-details-marker { display:none; }
.criar-metodo > summary:hover { background:var(--panel-2); }
.cm-icon { font-size:20px; flex-shrink:0; width:26px; text-align:center; }
.cm-texts { flex:1; min-width:0; }
.cm-title { font-size:14.5px; font-weight:700; color:var(--ink); display:block; }
.cm-desc { font-size:12px; color:var(--ink-faint); display:block; margin-top:1px; }
.cm-chev { color:var(--accent-border); font-size:14px; transition:transform .2s; flex-shrink:0; }
.criar-metodo[open] > summary .cm-chev { transform:rotate(180deg); }
.cm-body { padding:0 18px 18px; border-top:1px solid var(--ground); }
.cm-body p { font-size:12.5px; color:var(--ink-soft); line-height:1.55; margin:14px 0; }
.cm-badge { background:var(--good); color:#fff; font-size:10px; font-weight:700; padding:2px 8px; border-radius:10px; flex-shrink:0; }
/* Bloco opcional dentro de "Criar do zero" (colar edital) */
.cm-optional { margin-top:18px; padding:14px 15px 4px; background:var(--panel-2); border:1px solid #EAF0F8; border-radius:10px; }
.cm-optional-head { font-size:13px; font-weight:700; color:var(--ink); }
.cm-optional-head span { font-size:11px; font-weight:600; color:var(--ink-faint); }
.cm-optional p { margin:8px 0 12px !important; }
#colar-edital-input { width:100%; height:150px; font-size:13px; padding:11px; border:1px solid var(--line); border-radius:8px; resize:vertical; background:var(--panel-2); color:var(--ink); line-height:1.6; font-family:inherit; box-sizing:border-box; }
#colar-edital-input:focus { outline:none; border-color:var(--accent); background:#fff; }
.colar-preview { font-size:12px; color:var(--accent); margin:8px 0 12px; min-height:16px; font-weight:600; }
/* No mobile, textareas de ID próprio vão a 16px para o iOS não dar zoom ao focar */
@media(max-width:600px){ #colar-edital-input, #json-paste-input { font-size:16px; } }
/* === BACKUP LOCAL === */
.backup-card { background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 2px 8px rgba(47,58,77,0.05); overflow:hidden; }
.backup-card.danger { border-color:#F0C4C4; }
.backup-row { display:flex; align-items:center; gap:16px; padding:16px 18px; }
.backup-row + .backup-row { border-top:1px solid var(--ground); }
.backup-info { flex:1; min-width:0; }
.backup-title { font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:3px; }
.backup-desc { font-size:12px; color:var(--ink-soft); line-height:1.5; }
.backup-btn { flex-shrink:0; padding:8px 16px; border-radius:var(--radius-md); border:1.5px solid var(--accent-border); background:#fff; color:var(--accent); font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit; transition:all 0.15s; white-space:nowrap; }
.backup-btn:hover { background:var(--accent-wash); }
.backup-btn.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.backup-btn.primary:hover { background:#345f91; }
.backup-btn.danger { color:#A32D2D; border-color:#F0C4C4; }
.backup-btn.danger:hover { background:var(--bad-wash); }
@media(max-width:560px){ .backup-row { flex-direction:column; align-items:stretch; } .backup-btn { width:100%; } }
/* === SELETOR DE CRONOGRAMAS === */
.sched-bar { display:flex; align-items:center; gap:6px; padding:6px 18px; background:var(--panel-2); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.sched-bar-label { font-size:11px; color:var(--ink-faint); font-weight:600; white-space:nowrap; flex-shrink:0; }
.sched-tabs { display:flex; gap:5px; flex-wrap:wrap; flex:1; }
.sched-tab { font-size:12px; font-weight:500; padding:4px 13px; border-radius:var(--radius-chip); border:1px solid var(--line); cursor:pointer; background:#fff; color:var(--ink-soft); transition:all 0.13s; display:inline-flex; align-items:center; gap:5px; }
.sched-tab:hover { background:var(--accent-wash); border-color:var(--accent-border); color:var(--accent); }
.sched-tab.active { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:600; }
.sched-tab-icon { font-size:12px; flex-shrink:0; line-height:1; }
.sched-tab-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
.sched-tab-del { background:none; border:none; cursor:pointer; color:inherit; font-size:12px; opacity:0.5; padding:0; line-height:1; flex-shrink:0; }
.sched-tab.active .sched-tab-del { opacity:0.75; }
.sched-tab-del:hover { opacity:1 !important; }
/* Ações (editar/excluir) só aparecem no hover do tab — libera espaço pro nome */
.sched-tab-actions { display:inline-flex; align-items:center; gap:5px; max-width:0; overflow:hidden; transition:max-width .15s ease; }
.sched-tab:hover .sched-tab-actions, .sched-tab:focus-within .sched-tab-actions { max-width:50px; margin-left:2px; }
@media (hover:none) { .sched-tab-actions { max-width:50px; margin-left:2px; } }
.sched-add-btn { font-size:12px; font-weight:600; padding:4px 12px; border-radius:var(--radius-chip); border:1px dashed var(--accent-border); cursor:pointer; background:none; color:var(--ink-soft); transition:all 0.13s; flex-shrink:0; font-family:inherit; }
.sched-add-btn:hover { background:var(--accent-wash); border-color:var(--accent-chip); color:var(--accent); }
/* === SELETOR DE CRONOGRAMA (dropdown — mostra só o ativo) === */
.sched-dd { position:relative; display:inline-block; }
.sched-dd-btn { display:inline-flex; align-items:center; gap:7px; font-family:inherit; font-size:13px; font-weight:600; color:var(--ink); background:#fff; border:1px solid var(--accent-border); border-radius:18px; padding:5px 12px; cursor:pointer; transition:all 0.13s; max-width:min(320px,70vw); }
.sched-dd-btn:hover { background:var(--accent-wash); border-color:var(--accent-chip); }
.sched-dd-btn-icon { flex-shrink:0; line-height:1; }
.sched-dd-btn-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sched-dd-count { flex-shrink:0; font-size:10px; font-weight:700; color:#fff; background:var(--accent); border-radius:9px; padding:1px 6px; line-height:1.5; }
.sched-dd-caret { flex-shrink:0; font-size:10px; color:var(--ink-faint); transition:transform .15s; }
.sched-dd-menu { display:none; position:absolute; top:calc(100% + 6px); left:0; z-index:500; min-width:260px; max-width:min(360px,88vw); background:#fff; border-radius:12px; box-shadow: var(--elev-2); padding:6px; max-height:70vh; overflow-y:auto; }
.sched-dd-menu.open { display:block; }
.sched-dd-menu-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-faint); padding:6px 10px 4px; }
.sched-dd-item { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; cursor:pointer; color:#4A5568; font-size:13px; transition:background .12s; }
.sched-dd-item:hover { background:var(--accent-wash); }
.sched-dd-item.active { background:#EAF1FB; color:#2D3A8C; font-weight:600; }
.sched-dd-item-icon { flex-shrink:0; line-height:1; }
.sched-dd-item-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sched-dd-check { flex-shrink:0; color:var(--accent); font-weight:700; }
.sched-dd-item-actions { display:inline-flex; align-items:center; gap:4px; flex-shrink:0; }
.sched-dd-item-actions .sched-tab-del { opacity:.55; font-size:13px; }
.sched-dd-item-actions .sched-tab-del:hover { opacity:1; }
.sched-dd-new { width:100%; margin-top:4px; border-top:1px solid var(--ground); padding:9px 10px 6px; background:none; border-left:none; border-right:none; border-bottom:none; text-align:left; font-family:inherit; font-size:13px; font-weight:600; color:var(--accent); cursor:pointer; border-radius:0 0 8px 8px; }
.sched-dd-new:hover { background:var(--accent-wash); }
/* === MENU BAIXAR (PDF / XLS / JSON) na barra do topo === */
.dl-dd { position:relative; display:inline-block; }
.dl-dd-menu { display:none; position:absolute; top:calc(100% + 6px); right:0; z-index:600; min-width:220px; background:#fff; border-radius:10px; box-shadow: var(--elev-2); padding:6px; }
.dl-dd-menu.open { display:block; }
.dl-dd-menu button { display:block; width:100%; text-align:left; background:none; border:none; padding:9px 12px; border-radius:7px; font-family:inherit; font-size:13px; color:#4A5568; cursor:pointer; }
.dl-dd-menu button:hover { background:var(--accent-wash); color:#2D3A8C; }
/* === GERADOR DE CRONOGRAMA DERIVADO (painel admin) === */
.adm-der-lbl { display:block; font-size:11px; font-weight:700; color:var(--ink-soft); margin:10px 0 4px; text-transform:uppercase; letter-spacing:.4px; }
.adm-der-input, .adm-der-select { width:100%; border:1.5px solid var(--line); border-radius:8px; padding:8px 10px; font-size:13px; font-family:inherit; color:var(--ink); box-sizing:border-box; background:#fff; }
.adm-der-input:focus, .adm-der-select:focus { outline:none; border-color:var(--accent); }
.adm-der-radio { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink); cursor:pointer; }
.adm-der-chk { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink); padding:5px 8px; border-radius:6px; cursor:pointer; }
.adm-der-chk:hover { background:var(--panel-2); }
.adm-der-filtros-hint { font-size:12px; color:var(--ink-soft); line-height:1.5; margin-bottom:6px; }
/* === MODAL DESTINO DE IMPORTAÇÃO === */
.import-dest-overlay { display:none; position:fixed; inset:0; background:rgba(47,58,77,0.45); z-index:400; align-items:center; justify-content:center; }
.import-dest-overlay.open { display:flex; }
/* Botão Marcar Tudo */
.btn-toggle-all { font-size:11px; font-weight:600; padding:3px 10px; border-radius:12px; border:1px solid var(--accent-border); background:#fff; color:var(--accent); cursor:pointer; margin-right:6px; transition:all 0.15s; white-space:nowrap; font-family:inherit; }
.btn-toggle-all:hover { background:var(--accent-wash); }
/* Botão Métodos na legenda */
.btn-methods { font-size:12px; font-weight:600; padding:5px 12px; border-radius:var(--radius-md); border:1px solid var(--line); background:#fff; color:var(--ink-soft); cursor:pointer; transition:all 0.15s; font-family:inherit; white-space:nowrap; }
.btn-methods:hover { background:var(--accent-wash); border-color:var(--accent-border); color:var(--accent); }
/* Modal de Métodos */
.method-item { display:flex; align-items:center; gap:10px; padding:8px 4px; border-bottom:1px solid var(--ground); }
.method-item:last-child { border-bottom:none; }
.method-dot { width:14px; height:14px; border-radius:50%; flex-shrink:0; }
.method-cat { font-size:12px; font-weight:700; color:var(--ink); min-width:80px; }
.method-label { font-size:13px; color:var(--ink-soft); flex:1; }
.method-color-pick { width:32px; height:28px; border:none; border-radius:4px; cursor:pointer; padding:0; }
.method-del-btn { background:none; border:none; cursor:pointer; font-size:14px; opacity:0.6; padding:2px 4px; }
.method-del-btn:hover { opacity:1; }
/* Toggle switch */
.method-toggle { position:relative; display:inline-block; width:36px; height:20px; flex-shrink:0; }
.method-toggle input { opacity:0; width:0; height:0; }
.method-toggle-slider { position:absolute; inset:0; background:var(--accent-border); border-radius:20px; cursor:pointer; transition:0.2s; }
.method-toggle input:checked + .method-toggle-slider { background:var(--accent-chip); }
.method-toggle-slider:before { content:''; position:absolute; width:14px; height:14px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:0.2s; }
.method-toggle input:checked + .method-toggle-slider:before { transform:translateX(16px); }
.import-dest-modal { background:#fff; border-radius:20px; padding:26px 28px 22px; max-width:440px; width:92%; box-shadow:0 8px 40px rgba(47,58,77,0.18); }
.import-dest-modal h3 { font-size:16px; font-weight:700; color:var(--ink); margin-bottom:6px; }
.import-dest-modal > p { font-size:12px; color:var(--ink-soft); margin-bottom:18px; line-height:1.5; }
.import-dest-flabel { font-size:12px; font-weight:600; color:var(--ink-soft); display:block; margin-bottom:5px; }
.import-dest-input { width:100%; padding:8px 11px; border:1px solid var(--line); border-radius:10px; font-size:13px; font-family:inherit; color:var(--ink); outline:none; margin-bottom:18px; box-sizing:border-box; }
.import-dest-input:focus { border-color:var(--accent-chip); box-shadow:0 0 0 3px rgba(167,189,246,0.15); }
.import-dest-opts { display:flex; gap:10px; flex-wrap:wrap; }
.import-dest-opts .btn-import-new { flex:1; min-width:140px; background:var(--accent); color:#fff; border:none; padding:9px 16px; border-radius:10px; font-size:13px; font-weight:600; cursor:pointer; transition:background 0.15s; font-family:inherit; }
.import-dest-opts .btn-import-new:hover { background:#8aaaf0; }
.import-dest-opts .btn-import-merge { flex:1; min-width:140px; background:var(--panel-2); color:var(--accent); border:1px solid var(--accent-border); padding:9px 16px; border-radius:10px; font-size:13px; font-weight:500; cursor:pointer; transition:background 0.15s; font-family:inherit; }
.import-dest-opts .btn-import-merge:hover { background:var(--accent-wash); }
.import-dest-cancel { margin-top:13px; text-align:center; }
.import-dest-cancel button { background:none; border:none; color:var(--ink-faint); font-size:12px; cursor:pointer; padding:4px 8px; font-family:inherit; }
.import-dest-cancel button:hover { color:var(--ink-soft); }
.btn-secondary { background:var(--panel-2); color:var(--accent); border:1px solid var(--accent-border); padding:8px 16px; border-radius:var(--radius-md); font-size:13px; font-weight:500; cursor:pointer; transition:background 0.15s; font-family:inherit; }
.btn-secondary:hover { background:var(--accent-wash); }
/* ===== AGENDA / CALENDÁRIO ===== */
.cal-nav { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.cal-nav h3 { flex:1; text-align:center; margin:0; font-size:16px; color:var(--ink); font-weight:700; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.cal-dow { text-align:center; font-size:11px; font-weight:700; color:var(--ink-faint); padding:5px 0; }
.cal-cell { min-height:72px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:7px; cursor:pointer; transition:box-shadow 0.12s; user-select:none; }
.cal-cell:hover { box-shadow:0 2px 10px rgba(167,189,246,0.25); border-color:var(--accent-border); }
.cal-cell.today { background:var(--accent); border-color:var(--accent); }
.cal-cell.today .cal-day-num { color:#fff; }
.cal-cell.has-prova { background:#FFF5F5; border-color:var(--bad-border); }
.cal-cell.has-sim { background:#FFF8EF; border-color:var(--warn-border); }
.cal-cell.has-sess { background:var(--accent-wash); }
.cal-cell.selected { box-shadow:0 0 0 2px var(--accent-chip); }
.cal-cell.empty { background:transparent; border-color:transparent; cursor:default; }
.cal-cell.empty:hover { box-shadow:none; }
.cal-day-num { font-size:13px; font-weight:700; color:var(--ink); margin-bottom:4px; }
.cal-dots { display:flex; gap:3px; flex-wrap:wrap; }
.cal-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.cal-evt-count { font-size:9px; color:var(--ink-faint); margin-top:2px; }
.cal-detail { background:#fff; border-radius:16px; padding:16px 20px; box-shadow:0 2px 12px rgba(47,58,77,0.07); border:1px solid var(--line); margin-top:16px; }
.cal-detail-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cal-detail-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--ground); font-size:13px; }
.cal-detail-row:last-child { border-bottom:none; }
.cal-day-summary { display:flex; gap:8px; flex-wrap:wrap; padding:2px 0 12px; margin-bottom:6px; border-bottom:1px solid var(--ground); }
.cds-chip { display:inline-flex; align-items:center; gap:5px; background:var(--panel-2); border:1px solid var(--line); border-radius:16px; padding:4px 11px; font-size:11.5px; color:#4A5568; }
.cds-chip strong { color:var(--ink); }
.cal-legend { display:flex; gap:14px; flex-wrap:wrap; font-size:11px; color:var(--ink-faint); margin-top:10px; }
/* ===== SCANNER DE LINKS ===== */
.link-scan-section { background:#fff; border-radius:16px; box-shadow:0 2px 8px rgba(47,58,77,0.07); padding:16px 20px; margin-bottom:18px; border:1px solid var(--line); }
.link-scan-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.link-scan-top h3 { margin:0; font-size:15px; color:var(--ink); font-weight:700; flex:1; }
.platform-toggle { display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.platform-btn { padding:5px 12px; border:none; font-size:12px; cursor:pointer; font-family:inherit; transition:background 0.15s; background:#fff; color:var(--ink-soft); }
.platform-btn.active { background:var(--accent); color:#fff; font-weight:700; }
.link-row { display:grid; grid-template-columns:1fr 1fr 120px; gap:8px; align-items:center; padding:9px 0; border-bottom:1px solid var(--ground); font-size:12px; }
.link-row:last-child { border-bottom:none; }
.link-row-header { font-weight:700; font-size:11px; color:var(--ink-faint); text-transform:uppercase; }
.link-chip { display:inline-block; padding:3px 10px; border-radius:6px; font-size:11px; font-weight:600; text-decoration:none; cursor:pointer; transition:opacity 0.15s; }
.link-chip:hover { opacity:0.8; }
.link-chip.qc { background:#E8F0FE; color:#1a56db; }
.link-chip.tec { background:var(--warn-wash); color:var(--warn); }
.link-chip.none { background:var(--ground); color:var(--accent-border); cursor:default; }
.link-scan-empty { text-align:center; padding:20px; color:var(--ink-faint); font-size:13px; }
/* ===== METODOLOGIA DE PERFORMANCE ===== */
.perf-wrap { max-width:960px; margin:0 auto; padding:20px 16px 60px; }
.perf-top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
.perf-top h2 { margin:0; font-size:18px; color:var(--ink); font-weight:700; }
/* Simulados */
.sim-card { background:#fff; border-radius:16px; box-shadow:0 2px 8px rgba(47,58,77,0.07); margin-bottom:12px; overflow:hidden; border:1px solid var(--line); }
.sim-card-header { display:flex; align-items:center; gap:12px; padding:14px 18px; cursor:pointer; user-select:none; transition:background 0.12s; }
.sim-card-header:hover { background:var(--panel-2); }
.sim-card-name { font-size:14px; font-weight:700; color:var(--ink); flex:1; }
.sim-card-date { font-size:12px; color:var(--ink-faint); }
.sim-card-body { display:none; padding:0 18px 16px; }
.sim-card-body.open { display:block; }
.sim-mat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; margin-top:12px; }
.sim-mat-card { background:var(--panel-2); border-radius:10px; padding:12px; }
.sim-mat-name { font-size:11px; font-weight:600; color:var(--ink-soft); margin-bottom:4px; }
.sim-mat-tab { font-size:22px; font-weight:800; }
.sim-mat-metrics { font-size:11px; color:var(--ink-faint); margin-top:3px; line-height:1.6; }
.sim-tab-badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:700; }
.perf-empty { text-align:center; padding:40px 16px; color:var(--ink-faint); font-size:14px; }
/* Focos */
.fase-card { border-radius:16px; padding:20px 22px; margin-bottom:18px; border-left:5px solid; }
.fase-title { font-size:15px; font-weight:700; margin-bottom:6px; }
.fase-desc { font-size:13px; line-height:1.65; }
.pareto-card, .streak-card { background:#fff; border-radius:16px; box-shadow:0 2px 8px rgba(47,58,77,0.07); padding:18px 22px; margin-bottom:18px; border:1px solid var(--line); }
.pareto-title, .streak-title { font-size:15px; font-weight:700; color:var(--ink); margin-bottom:14px; }
.pareto-item { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--ground); }
.pareto-item:last-child { border-bottom:none; }
.pareto-mat { font-size:13px; font-weight:600; color:var(--ink); }
.pareto-bar-wrap { width:100px; height:7px; background:var(--accent-wash); border-radius:4px; overflow:hidden; margin:4px 0; }
.pareto-bar { height:100%; border-radius:4px; }
.pareto-action { font-size:11px; color:var(--ink-faint); margin-top:3px; }
.streak-stats { display:flex; gap:24px; flex-wrap:wrap; }
.streak-num { font-size:28px; font-weight:800; color:var(--accent-chip); }
.streak-label { font-size:12px; color:var(--ink-faint); }
/* Questões */
.sessao-list { background:#fff; border-radius:16px; box-shadow:0 2px 8px rgba(47,58,77,0.07); overflow:hidden; border:1px solid var(--line); }
.sessao-row { display:grid; grid-template-columns:1fr 90px 72px 72px; gap:8px; padding:11px 18px; border-bottom:1px solid var(--ground); align-items:center; font-size:13px; }
.sessao-row:last-child { border-bottom:none; }
.sessao-row.hdr { background:var(--panel-2); font-weight:700; font-size:11px; color:var(--ink-faint); padding:8px 18px; }
.sessao-mat { font-weight:600; color:var(--ink); }
.sessao-topico { font-size:11px; color:var(--ink-faint); }
.sessao-filter { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.sessao-filter select { border:1px solid var(--line); border-radius:8px; padding:5px 8px; font-size:12px; font-family:inherit; }
/* Evolução */
.evol-section { background:#fff; border-radius:16px; box-shadow:0 2px 8px rgba(47,58,77,0.07); padding:20px 22px; margin-bottom:18px; border:1px solid var(--line); }
.evol-section h3 { margin:0 0 14px; font-size:15px; color:var(--ink); font-weight:700; }
.evol-table { width:100%; border-collapse:collapse; font-size:13px; }
.evol-table th { background:var(--panel-2); padding:8px 12px; text-align:left; font-size:11px; color:var(--ink-faint); font-weight:700; }
.evol-table td { padding:10px 12px; border-bottom:1px solid var(--ground); }
.evol-table tr:last-child td { border-bottom:none; }
.heatmap-grid { display:flex; gap:3px; flex-wrap:wrap; }
.hm-cell { width:14px; height:14px; border-radius:2px; cursor:default; }
/* Tooltips de siglas (TAB, TAL, Tipo A/B/C, etc.) */
.gloss-tip { cursor:help; border-bottom:1px dotted var(--accent-border); position:relative; display:inline; }
.gloss-tip::after { content:attr(data-tip); position:absolute; bottom:130%; left:50%; transform:translateX(-50%); background:rgba(47,58,77,.95); color:#fff; padding:5px 9px; border-radius:8px; font-size:11px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s; z-index:300; max-width:240px; text-align:center; line-height:1.4; }
.gloss-tip:hover::after, .gloss-tip.tip-open::after { opacity:1; }
/* Form extras por matéria no simulado */
.sim-mat-extras { padding:8px 0 4px; display:flex; flex-direction:column; gap:8px; border-top:1px dashed #ede9f8; margin-top:8px; }
.sim-mat-erros-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; }
.sim-mat-liq { font-size:11px; color:var(--bad); font-weight:600; margin-top:2px; }
.sim-mat-grid5 { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
/* Forms modais */
.form-2col { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.form-1col { margin-bottom:10px; }
.fg label { display:block; font-size:11px; font-weight:700; color:var(--ink-faint); margin-bottom:4px; text-transform:uppercase; letter-spacing:0.4px; }
.fg input, .fg select, .fg textarea { width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:10px; padding:8px 10px; font-size:13px; font-family:inherit; outline:none; color:var(--ink); }
.fg input:focus, .fg select:focus { border-color:var(--accent-chip); box-shadow:0 0 0 3px rgba(167,189,246,0.15); }
.sim-mat-card-row { background:var(--panel-2); border-radius:10px; padding:10px 12px; margin-bottom:8px; border:1px solid var(--line); }
.sim-mat-card-top { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.sim-mat-card-top input { flex:1; padding:7px 9px; font-size:13px; border:1px solid var(--line); border-radius:8px; outline:none; font-family:inherit; color:var(--ink); }
.sim-mat-card-top input:focus { border-color:var(--accent-chip); }
.sim-mat-grid4 { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.sim-mat-label { font-size:10px; font-weight:700; color:var(--ink-faint); text-transform:uppercase; margin-bottom:3px; letter-spacing:.3px; }
.sim-mat-input { width:100%; padding:6px 8px; font-size:13px; border:1px solid var(--line); border-radius:8px; outline:none; font-family:inherit; box-sizing:border-box; color:var(--ink); }
.sim-mat-input:focus { border-color:var(--accent-chip); }
.btn-add-mat { background:none; border:1px dashed var(--accent-border); border-radius:8px; padding:7px; cursor:pointer; font-size:12px; color:var(--ink-faint); width:100%; margin-top:6px; font-family:inherit; }
.btn-add-mat:hover { background:var(--accent-wash); border-color:var(--accent-chip); color:var(--accent); }
.btn-rm-mat { background:none; border:none; cursor:pointer; color:#e74c3c; font-size:15px; padding:2px 4px; line-height:1; flex-shrink:0; }
/* Badge TAB no cronograma */
.cron-tab-badge { font-size:9px; font-weight:700; padding:1px 5px; border-radius:8px; margin-left:4px; vertical-align:middle; white-space:nowrap; }
/* === BUSCA NO CRONOGRAMA === */
.cron-search-wrap { display:flex; align-items:center; gap:7px; flex:1; max-width:280px; position:relative; }
.cron-search-wrap input { width:100%; border:1px solid var(--line); border-radius:20px; padding:5px 30px 5px 12px; font-size:12px; font-family:inherit; outline:none; background:#fff; color:var(--ink); }
.cron-search-wrap input:focus { border-color:var(--accent-chip); box-shadow:0 0 0 2px rgba(167,189,246,.15); }
.cron-search-clear { position:absolute; right:9px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--accent-border); font-size:14px; line-height:1; padding:0; }
.cron-search-clear:hover { color:var(--accent-chip); }
.task-hidden { display:none !important; }
.week-hidden { display:none !important; }
/* Highlight de busca */
.search-highlight { background:#fff3b0; border-radius:2px; padding:0 1px; }
/* === SESSÃO: TAB PREVIEW === */
.tab-preview-bar { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; margin-top:6px; font-size:12px; font-weight:600; transition:background .2s; }
.tab-preview-bar.green { background:var(--good-wash); color:var(--good); }
.tab-preview-bar.yellow { background:var(--warn-wash); color:var(--warn); }
.tab-preview-bar.red { background:var(--bad-wash); color:var(--bad); }
.tab-preview-bar.neutral { background:var(--accent-wash); color:var(--accent); }
/* Botão quick-register na tarefa */
.lnk.reg { background:var(--accent); color:#fff; border:none; font-size:10px; font-weight:700; padding:2px 6px; border-radius:6px; cursor:pointer; display:inline-flex; align-items:center; margin-left:4px; font-family:inherit; }
.lnk.reg:hover { background:#8aaaf0; }
/* === RESPONSIVO GERAL === */
@media(max-width:600px){
.tab-nav { overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; }
.tab-btn { white-space:nowrap; flex-shrink:0; padding:10px 14px; font-size:12px; }
.hub-nav { -webkit-overflow-scrolling:touch; }
.hub-btn { padding:9px 15px 10px; font-size:13px; }
.form-2col { grid-template-columns:1fr; }
.sim-mat-grid4 { grid-template-columns:1fr 1fr; }
.container .week-grid, .container .col { grid-template-columns:1fr !important; }
.toolbar { flex-wrap:wrap; }
.cron-search-wrap { max-width:100%; }
.sessao-row { flex-wrap:wrap; }
.form-row { grid-template-columns: 1fr; }
/* ── Cronograma VERTICAL: dias empilhados, sem scroll horizontal ── */
.grid { display:flex; flex-direction:column; min-width:0; }
.daycol { border-right:none; border-bottom:6px solid var(--ground); }
.daycol:last-child { border-bottom:none; }
.dayhead { justify-content:flex-start; padding:10px 14px; font-size:13px; }
.daycol.today-col { border-left:4px solid var(--accent); }
.task { padding:11px 12px; }
.tname { font-size:13px; }
.empty-cell { padding:10px 14px; font-size:12px; color:var(--accent-border); }
.quickadd-day-btn, .note-btn { min-width:34px; min-height:30px; font-size:14px; }
/* ── Topo compacto ── */
.header-bar { padding:9px 14px 7px; }
.header-bar-text p { display:none; } /* subtítulo some no mobile */
.hdr-resumo-row { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:0 14px 8px; }
.hdr-resumo-chip { flex-shrink:0; }
/* Cronômetro em 1 linha: controles secundários atrás do botão ⋯ */
.timer-expand-btn { display:inline-block; }
.timer-bar:not(.expanded) .timer-mode-btns,
.timer-bar:not(.expanded) .timer-tipo-sel,
.timer-bar:not(.expanded) .timer-sessions { display:none; }
.timer-bar.expanded .timer-expand-btn { background:var(--accent); border-color:var(--accent); }
.timer-mat-sel { min-width:0; flex:1; }
/* Sync em linha única e enxuta */
.sync-bar-global { flex-direction:row; align-items:center; gap:5px; padding:5px 10px; flex-wrap:nowrap; }
.tb-status { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-left:0; }
.sync-btns .tbtn { padding:5px 8px; font-size:11px; min-height:36px; display:inline-flex; align-items:center; }
#btn-more { min-width:36px; justify-content:center; }
#fab-edit-mode { min-height:36px; padding:5px 10px; font-size:11px; }
/* Legenda: só as ações; as bolinhas explicativas somem */
.legend .leg-item { display:none; }
.sched-bar-label { display:none; }
/* ── Navegação inferior fixa (substitui a fileira de hubs no topo) ── */
.hub-nav { display:none; }
.bottom-nav { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:950;
background:#fff; border-top:1px solid var(--line); box-shadow:0 -2px 12px rgba(47,58,77,0.08);
padding-bottom: env(safe-area-inset-bottom, 0); }
body { padding-bottom: 58px; }
}
/* ── Fase 4: toque e tipografia nas telas internas (mobile) ── */
@media(max-width:600px){
/* Impede o zoom automático do iOS ao focar um campo de texto
(o Safari amplia a tela quando a fonte do campo é < 16px).
Só campos de digitação — os