/* Estilos da tela "calendario" — extraído de calendario.html (Tarefa 1).
   Cores: só via var(--token) de css/tokens.css. */

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family:'Poppins',sans-serif; background:var(--navy); color:var(--text); min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:24px 20px 100px; }
    .logo { margin-bottom:20px; } .logo img { height:26px; }
    .card { background:var(--card); border:1px solid var(--border); border-radius:20px; padding:28px 24px; max-width:560px; width:100%; box-shadow:0 2px 12px var(--glass-b); margin-bottom:12px; }
    .screen { display:none; } .screen.active { display:block; width:100%; max-width:560px; }
    .eyebrow { font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--laranja); margin-bottom:10px; }
    h2 { font-size:clamp(18px,3.5vw,22px); font-weight:800; color:var(--text); line-height:1.3; margin-bottom:6px; }
    h2 em { color:var(--laranja); font-style:normal; }
    .hint { font-size:13px; color:var(--muted); line-height:1.7; margin-bottom:20px; }

    /* AUTH */
    .auth-icon { width:52px; height:52px; background:var(--laranja-a08); border:1px solid var(--border-orange); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 0 18px; }
    .auth-icon svg { width:24px; height:24px; stroke:var(--laranja); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
    .email-input,.name-input { width:100%; background:var(--card2); border:1.5px solid var(--border); border-radius:10px; padding:13px 15px; font-family:'Poppins',sans-serif; font-size:15px; font-weight:600; color:var(--text); outline:none; transition:border-color 0.2s; margin-bottom:10px; }
    .email-input::placeholder,.name-input::placeholder { color:var(--muted2); font-weight:400; font-size:13px; }
    .email-input:focus,.name-input:focus { border-color:var(--laranja); }
    .error-msg { background:var(--c-dc3545-a10); border:1px solid var(--c-dc3545-a30); border-radius:10px; padding:12px 15px; font-size:13px; color:var(--vermelho); margin-top:10px; display:none; }
    .error-msg.visible { display:block; }
    .btn-primary { display:block; width:100%; background:var(--laranja); color:var(--branco); font-family:'Poppins',sans-serif; font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:15px; border-radius:10px; border:none; cursor:pointer; text-align:center; margin-top:14px; transition:background 0.2s; }
    .btn-primary:hover { background:var(--laranja-hover); }
    .btn-secondary { display:block; width:100%; margin-top:10px; background:transparent; color:var(--muted); font-family:'Poppins',sans-serif; font-size:12px; font-weight:500; padding:10px; border-radius:10px; border:1px solid var(--border); cursor:pointer; text-align:center; }
    .loading-center { text-align:center; padding:48px 0; }
    .spinner { width:30px; height:30px; border:3px solid var(--border); border-top-color:var(--laranja); border-radius:50%; animation:spin 0.8s linear infinite; margin:0 auto 14px; }
    @keyframes spin { to { transform:rotate(360deg); } }

    /* CONSTÂNCIA */
    .page-header { max-width:560px; width:100%; margin-bottom:4px; }
    .page-title { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--laranja-a80); margin-bottom:0; }

    /* STREAK HERO */
    .streak-hero { background:linear-gradient(135deg,var(--laranja-a10) 0%,var(--laranja-a03) 100%); border:1px solid var(--border-orange); border-radius:16px; padding:20px 24px; display:flex; align-items:center; gap:20px; margin-bottom:0; }
    .sh-fire { font-size:40px; line-height:1; flex-shrink:0; }
    .sh-info { flex:1; }
    .sh-num { font-size:36px; font-weight:900; color:var(--laranja); line-height:1; }
    .sh-label { font-size:12px; color:var(--muted); font-weight:500; margin-top:3px; }
    .sh-recorde { text-align:right; flex-shrink:0; }
    .sh-rec-num { font-size:22px; font-weight:800; color:var(--text); opacity:0.4; }
    .sh-rec-label { font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }

    /* STATS ROW */
    .stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
    .stat-box { background:var(--card2); border:1px solid var(--border); border-radius:12px; padding:12px 8px; text-align:center; }
    .stat-n { font-size:22px; font-weight:900; color:var(--text); display:block; line-height:1; }
    .stat-n.verde { color:var(--verde); }
    .stat-n.laranja { color:var(--laranja); }
    .stat-l { font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:0.8px; margin-top:4px; line-height:1.3; display:block; }

    /* CALENDÁRIO */
    .cal-nav-wrap { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
    .cal-nav-btn { width:30px; height:30px; background:var(--card2); border:1px solid var(--border); border-radius:8px; color:var(--muted); font-size:15px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s; padding:0; }
    .cal-nav-btn:hover:not(:disabled) { border-color:var(--border-orange); color:var(--laranja); }
    .cal-nav-btn:disabled { opacity:0.25; cursor:not-allowed; }
    .cal-title-txt { font-size:15px; font-weight:700; color:var(--text); }
    .cal-wds { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:5px; }
    .cal-wds div { text-align:center; font-size:9px; font-weight:700; color:var(--muted); text-transform:uppercase; padding:3px 0; }
    .cal-grid-real { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
    .cd { aspect-ratio:1; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:var(--muted2); position:relative; background:var(--glass); }
    .cd-empty { aspect-ratio:1; }
    .cd-feito { background:var(--c-2e9e5b-a12); color:var(--verde); font-weight:700; border:1px solid var(--c-2e9e5b-a20); }
    .cd-feito::after { content:''; position:absolute; bottom:3px; width:4px; height:4px; border-radius:50%; background:var(--verde); }
    .cd-hoje { border:2px solid var(--laranja) !important; color:var(--laranja); font-weight:900; background:var(--laranja-a06) !important; }
    .cd-hoje::after { background:var(--laranja) !important; }
    .cd-futuro { opacity:0.18; background:transparent; }
    .cal-leg { display:flex; gap:16px; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
    .cl-item { display:flex; align-items:center; gap:6px; font-size:10px; color:var(--muted); }
    .cl-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
    .cl-verde { background:var(--verde); }
    .cl-hoje { background:var(--laranja); }

    /* BOTTOM NAV */
    .bottom-nav { position:fixed; bottom:0; left:0; right:0; background:var(--branco-a97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-around; padding:10px 0 max(12px,env(safe-area-inset-bottom)); z-index:1000; }
    .bn-item { display:flex; flex-direction:column; align-items:center; gap:3px; text-decoration:none; color:var(--preto-a35); flex:1; padding:4px 4px; transition:color 0.2s; }
    .bn-item.active { color:var(--laranja); }
    .bn-item:hover { color:var(--preto-a70); }
    .bn-icon { font-size:20px; line-height:1; }
    .bn-label { font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
    html.embedded .bottom-nav { display:none !important; }