/* Estilos da tela "postreino" — extraído de postreino.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); background-image: radial-gradient(ellipse 60% 50% at 10% 20%, var(--laranja-a06) 0%, transparent 60%), radial-gradient(ellipse 50% 60% at 90% 80%, var(--c-1c4e80-a04) 0%, transparent 55%); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 32px 20px 80px; }
    .logo { margin-bottom: 28px; } .logo img { height: 28px; }
    .logo-text { font-size: 18px; font-weight: 900; color: var(--branco); letter-spacing: 1px; }
    .logo-text span { color: var(--laranja); }

    .card { background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 36px 32px; max-width: 560px; width: 100%; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 2px 12px var(--preto-a06), 0 0 0 1px var(--preto-a03); }
    .screen { display: none; } .screen.active { display: block; }
    .eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--laranja); margin-bottom: 12px; }
    h2 { font-size: clamp(18px, 3.5vw, 22px); font-weight: 800; color: var(--branco); 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: 24px; }

    /* AUTH */
    .auth-icon { width: 56px; height: 56px; background: var(--c-1c4e80-a15); border: 1px solid var(--c-1c4e80-a30); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 0 20px; }
    .auth-icon svg { width: 26px; height: 26px; stroke: var(--azul-c); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    .name-input, .email-input { width: 100%; background: var(--branco-a04); border: 1.5px solid var(--border); border-radius: 10px; padding: 14px 16px; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600; color: var(--branco); outline: none; transition: border-color 0.2s; margin-bottom: 12px; }
    .name-input::placeholder, .email-input::placeholder { color: var(--muted2); font-weight: 400; font-size: 13px; }
    .name-input:focus, .email-input:focus { border-color: var(--laranja); }

    /* BOTOES */
    .btn-next { display: block; width: 100%; margin-top: 22px; background: linear-gradient(135deg, var(--laranja) 0%, var(--laranja-hover) 100%); box-shadow: 0 8px 24px var(--border-orange), inset 0 1px 0 var(--branco-a15); color: var(--branco); font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 16px; border-radius: 10px; border: none; cursor: pointer; transition: background 0.2s, transform 0.15s; }
    .btn-next:hover { background: linear-gradient(135deg, var(--laranja-hover) 0%, var(--c-b85a20) 100%); transform: translateY(-1px); }
    .btn-next:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
    .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; transition: border-color 0.2s, color 0.2s; }
    .btn-secondary:hover { border-color: var(--muted); color: var(--text); }

    /* OPCOES DE GRADE */
    .options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
    .opt-card { background: var(--branco-a02); border: 1.5px solid var(--border); border-radius: 12px; padding: 14px 12px; cursor: pointer; transition: border-color 0.2s, background 0.2s; text-align: center; }
    .opt-card:hover { border-color: var(--border-orange); background: var(--laranja-a03); }
    .opt-card.selected { border-color: var(--laranja); background: var(--laranja-a08); }
    .opt-card .oc-icon { font-size: 22px; margin-bottom: 6px; }
    .opt-card .oc-label { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.3; }
    .opt-card .oc-met { font-size: 10px; color: var(--muted); margin-top: 2px; }

    /* DURACAO */
    .dur-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
    .dur-item { background: var(--branco-a02); border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 8px; cursor: pointer; transition: border-color 0.2s, background 0.2s; text-align: center; font-size: 13px; font-weight: 700; color: var(--text); }
    .dur-item:hover { border-color: var(--border-orange); }
    .dur-item.selected { border-color: var(--laranja); background: var(--laranja-a08); }
    .dur-item span { display: block; font-size: 10px; font-weight: 400; color: var(--muted); margin-top: 2px; }

    /* ESCALA */
    .scale-wrap { display: flex; gap: 8px; margin-bottom: 8px; }
    .scale-item { flex: 1; background: var(--branco-a03); border: 1.5px solid var(--border); border-radius: 10px; padding: 14px 4px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
    .scale-item:hover { border-color: var(--border-orange); }
    .scale-item.selected { border-color: var(--laranja); background: var(--laranja-a08); }
    .scale-item .s-num { font-size: 20px; font-weight: 900; color: var(--branco); display: block; margin-bottom: 3px; }
    .scale-item .s-emoji { font-size: 16px; display: block; margin-bottom: 2px; }
    .scale-item .s-label { font-size: 9px; color: var(--muted); line-height: 1.3; display: block; }

    /* CAMPO TEXTO */
    .field { margin-bottom: 16px; }
    .field label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
    .field textarea { width: 100%; background: var(--branco-a04); border: 1.5px solid var(--border); border-radius: 10px; padding: 13px 16px; font-family: 'Poppins', sans-serif; font-size: 14px; color: var(--branco); outline: none; transition: border-color 0.2s; resize: none; height: 80px; }
    .field textarea::placeholder { color: var(--muted2); font-weight: 400; font-size: 13px; }
    .field textarea:focus { border-color: var(--laranja); }

    /* FOTO */
    .photo-upload-area { border: 2px dashed var(--muted2); border-radius: 16px; padding: 28px 20px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; margin-bottom: 12px; position: relative; overflow: hidden; }
    .photo-upload-area:hover { border-color: var(--laranja); background: var(--laranja-a03); }
    .photo-upload-area.has-photo { border-color: var(--laranja); border-style: solid; padding: 0; }
    .photo-upload-area input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
    .photo-preview { width: 100%; max-height: 260px; object-fit: cover; border-radius: 14px; display: none; }
    .photo-preview.visible { display: block; }
    .photo-placeholder strong { display: block; font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
    .photo-placeholder span { font-size: 12px; color: var(--muted); }

    /* KCAL PREVIEW */
    .kcal-preview { background: var(--laranja-a08); border: 1px solid var(--border-orange); border-radius: 14px; padding: 20px 24px; margin: 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    .kcal-preview.hidden { display: none; }
    .kp-left .kp-label { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--laranja); margin-bottom: 4px; }
    .kp-left .kp-val { font-size: 36px; font-weight: 900; color: var(--branco); line-height: 1; }
    .kp-left .kp-unit { font-size: 13px; color: var(--muted); margin-top: 2px; }
    .kp-right { font-size: 11px; color: var(--muted); line-height: 1.6; max-width: 160px; text-align: right; }
    .kp-fire { font-size: 32px; }

    /* RESULTADO */
    .result-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--c-48bb78-a10); border: 1px solid var(--c-48bb78-a30); border-radius: 100px; padding: 6px 16px; margin-bottom: 18px; }
    .result-badge span { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--verde); }
    .res-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
    .res-stat { background: var(--card2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 10px; text-align: center; }
    .rs-label { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
    .rs-value { font-size: 18px; font-weight: 900; color: var(--branco); }
    .rs-value.orange { color: var(--laranja); }
    .rs-unit { font-size: 10px; color: var(--muted); }

    .nota-block { background: var(--card2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
    .nb-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--laranja); margin-bottom: 6px; }
    .nb-text { font-size: 13px; color: var(--text); line-height: 1.7; font-style: italic; }

    /* CARD COMPARTILHAR */
    .share-section { margin-top: 20px; }
    .share-title { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
    .canvas-wrap { border-radius: 16px; overflow: hidden; margin-bottom: 12px; background: var(--c-07101e); }
    canvas { display: block; width: 100%; height: auto; border-radius: 16px; }
    .btn-download { display: block; width: 100%; background: var(--card2); color: var(--text); font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; padding: 14px; border-radius: 10px; border: 1px solid var(--border); cursor: pointer; transition: border-color 0.2s; margin-bottom: 8px; }
    .btn-download:hover { border-color: var(--laranja); color: var(--branco); }
    .share-note { font-size: 11px; color: var(--muted2); text-align: center; line-height: 1.6; }

    /* LOADING */
    .loading { text-align: center; padding: 20px 0; }
    .spinner { width: 32px; height: 32px; border: 3px solid var(--branco-a10); border-top-color: var(--laranja); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 16px; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .error-msg { background: var(--c-dc3545-a10); border: 1px solid var(--c-dc3545-a30); border-radius: 10px; padding: 12px 16px; font-size: 13px; color: var(--c-fc8181); margin-top: 12px; display: none; }
    .error-msg.visible { display: block; }

    .divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
    .section-label { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }

    @media (max-width: 480px) { .card { padding: 24px 18px; } .options-grid { grid-template-columns: 1fr 1fr; } .scale-wrap { flex-wrap: wrap; } .res-stats { grid-template-columns: 1fr 1fr; } }
  /* ─── Bottom Navigation ─── */
  .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 8px; 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; }

  /* ═══ TEMA CLARO — overrides ═══ */
  .logo-text { color: var(--text); }
  h2 { color: var(--text); }
  .name-input, .email-input { color: var(--text); }
  .scale-item .s-num { color: var(--text); }
  .field textarea { color: var(--text); }
  .kp-left .kp-val { color: var(--text); }
  .rs-value { color: var(--text); }
  .opt-card .oc-label { color: var(--text); }
  .dur-item { color: var(--text); }
  .photo-placeholder strong { color: var(--text); }