/* =========================================================
   Simulador de Portfólio (portfolio.html)
   A aparência do portfólio em si fica no JS (PF_CSS), porque
   é a mesma na prévia e no arquivo que o aluno baixa.
   ========================================================= */
.pf-section{ padding:clamp(36px,5vw,64px) 0; }
.pf-lead{ max-width:720px; }

/* ---- modelos ---- */
.pf-models{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:22px; }
@media(max-width:860px){ .pf-models{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .pf-models{ grid-template-columns:1fr; } }
.pf-model{ text-align:left; font:inherit; color:var(--text); cursor:pointer; background:var(--surface);
  border:1px solid var(--line-soft); border-radius:var(--radius); padding:0; overflow:hidden; transition:.2s;
  display:flex; flex-direction:column; }
.pf-model:hover{ border-color:var(--accent); transform:translateY(-3px); }
.pf-model.on{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }
.pf-model__img{ height:120px; background-size:cover; background-position:center; position:relative; }
.pf-model__img span{ position:absolute; left:14px; bottom:-18px; font-size:1.7rem; width:46px; height:46px;
  display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--line); border-radius:50%; }
.pf-model__body{ padding:26px 16px 16px; }
.pf-model__body h3{ margin:0 0 .15em; font-size:1.1rem; }
.pf-model__body b{ display:block; color:var(--accent); font-size:.86rem; margin-bottom:.35em; }
.pf-model__body p{ margin:0; color:var(--text-soft); font-size:.9rem; }

/* ---- topo + nota ---- */
.pf-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:18px; flex-wrap:wrap; margin-bottom:18px; }
.pf-score{ display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line-soft);
  border-radius:60px; padding:6px 18px 6px 6px; }
.pf-score strong{ display:block; font-size:.9rem; }
.pf-score span{ font-size:.82rem; }
.pf-score__ring{ position:relative; width:52px; height:52px; }
.pf-score__ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.pf-score__ring circle{ fill:none; stroke-width:4; }
.pf-score__ring .bg{ stroke:var(--line); }
.pf-score__ring .fg{ stroke:var(--accent); stroke-linecap:round; stroke-dasharray:119.4; stroke-dashoffset:119.4; transition:.4s; }
.pf-score__ring b{ position:absolute; inset:0; display:grid; place-items:center; font-size:.95rem; }

.pf-mission{ background:linear-gradient(135deg,rgba(94,200,192,.1),var(--surface) 60%); border:1px solid var(--line-soft);
  border-left:3px solid var(--teal); border-radius:var(--radius-sm); padding:14px 18px; margin-bottom:18px; }
.pf-mission__tag{ font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); }
.pf-mission p{ margin:.35em 0 0; color:var(--text-soft); }

/* ---- grade editor / prévia ---- */
.pf-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:22px; align-items:start; }
@media(max-width:1000px){ .pf-grid{ grid-template-columns:1fr; } }
.pf-editor{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); padding:16px; min-width:0; }

.pf-tabs{ display:flex; gap:6px; overflow-x:auto; padding-bottom:6px; margin-bottom:12px; border-bottom:1px solid var(--line-soft); }
.pf-tabs button{ font:inherit; font-size:.85rem; font-weight:600; white-space:nowrap; cursor:pointer; color:var(--text-soft);
  background:transparent; border:1px solid transparent; border-radius:30px; padding:7px 13px; }
.pf-tabs button:hover{ color:var(--text); }
.pf-tabs button.on{ background:var(--accent); color:#1a1205; }
.pf-pane{ display:none; }
.pf-pane.on{ display:block; }

.pf-editor label{ display:block; font-size:.84rem; font-weight:600; color:var(--text-soft); margin-bottom:12px; }
.pf-editor label small{ font-weight:400; color:var(--text-mute); }
.pf-editor input:not([type=checkbox]):not([type=color]):not([type=file]), .pf-editor textarea{
  display:block; width:100%; margin-top:5px; font:inherit; font-size:.95rem; color:var(--text);
  background:var(--bg-2); border:1px solid var(--line); border-radius:8px; padding:9px 11px; resize:vertical; }
.pf-editor input:focus, .pf-editor textarea:focus{ outline:none; border-color:var(--accent); }
.pf-editor input[type=color]{ display:block; margin-top:6px; width:64px; height:38px; border:1px solid var(--line); border-radius:8px; background:none; padding:2px; cursor:pointer; }
.pf-row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pf-row3{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media(max-width:520px){ .pf-row2,.pf-row3{ grid-template-columns:1fr; } }
.pf-hint{ font-size:.88rem; color:var(--text-soft); background:var(--bg-2); border-radius:8px; padding:10px 12px; margin:0 0 14px; }
.pf-count.warn{ color:var(--warn); }
.pf-count.ok{ color:var(--ok); }

/* fotos */
.pf-photos{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media(max-width:420px){ .pf-photos{ grid-template-columns:1fr; } }
.pf-photo{ background:var(--bg-2); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.pf-photo__img{ position:relative; display:block; aspect-ratio:4/3; background:var(--surface-2) center/cover no-repeat; cursor:pointer; margin:0 !important; }
.pf-photo__img em{ position:absolute; left:6px; top:6px; font-style:normal; font-size:.66rem; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; padding:3px 7px; border-radius:20px; background:rgba(0,0,0,.65); color:#fff; }
.pf-photo__img em.mine{ background:var(--ok); color:#07170e; }
.pf-photo__img:hover::after{ content:"Trocar foto"; position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(0,0,0,.45); color:#fff; font-weight:700; }
.pf-photo input[type=text]{ margin:0 !important; border:0 !important; border-radius:0 !important; font-size:.84rem !important; }

/* pacotes */
.pf-pack{ border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:12px; background:var(--bg-2); }
.pf-pack__head{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:8px; }
.pf-pack__head b{ font-size:.8rem; color:var(--accent); letter-spacing:.06em; text-transform:uppercase; }
.pf-pack .pf-row3 label{ margin-bottom:8px; }
.pf-calc{ display:flex; flex-wrap:wrap; gap:4px 10px; font-size:.8rem; color:var(--text-mute); border-top:1px dashed var(--line); padding-top:8px; }
.pf-calc strong{ color:var(--text); }
.pf-calc .tot{ margin-left:auto; font-size:1rem; color:var(--teal); font-weight:800; }
.pf-alert{ font-size:.82rem; color:var(--rose); margin:6px 0 0; }

/* swot */
.pf-swot{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:520px){ .pf-swot{ grid-template-columns:1fr; } }
.pf-swot label{ border-radius:10px; padding:10px; margin:0 !important; }
.pf-swot .s-f{ background:rgba(94,200,192,.1); }
.pf-swot .s-o{ background:rgba(244,176,62,.1); }
.pf-swot .s-fr{ background:rgba(232,115,107,.1); }
.pf-swot .s-a{ background:rgba(179,157,219,.12); }
.pf-editor .pf-check{ display:flex; gap:10px; align-items:flex-start; font-weight:500; margin-top:14px; }
.pf-check input{ margin-top:3px; accent-color:var(--accent); }

/* layouts */
.pf-layouts{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.pf-layouts button{ font:inherit; font-weight:700; font-size:.88rem; color:var(--text); cursor:pointer; background:var(--bg-2);
  border:1px solid var(--line); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:3px; }
.pf-layouts button small{ font-weight:400; color:var(--text-mute); font-size:.74rem; }
.pf-layouts button.on{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }
.lt{ display:block; height:54px; border-radius:6px; margin-bottom:6px; }
.lt--classico{ background:linear-gradient(#f7f3ec 0 30%, #d8cfc0 30% 34%, #f7f3ec 34%), #f7f3ec;
  background:repeating-linear-gradient(90deg,#cfc5b4 0 30%,#f7f3ec 30% 35%) 0 60%/100% 40% no-repeat, #f7f3ec; }
.lt--galeria{ background:linear-gradient(#0d0d0d 0 0) 0 100%/100% 35% no-repeat, linear-gradient(135deg,#666,#222); }
.lt--revista{ background:linear-gradient(90deg,#8e5cd9 0 45%, #fff 45%), #fff; }

/* ações */
.pf-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft); }
.pf-actions .btn{ padding:10px 16px; font-size:.86rem; }
.pf-editor label.pf-file{ margin:0; font-size:.86rem; font-weight:600; color:var(--text); }
.pf-saved{ font-size:.78rem; margin:8px 0 0; min-height:1.2em; }

/* prévia */
.pf-preview{ position:sticky; top:calc(var(--header-h) + 14px); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg-2); min-width:0; }
@media(max-width:1000px){ .pf-preview{ position:static; } }
.pf-preview__bar{ display:flex; align-items:center; gap:10px; padding:8px 12px; background:var(--surface-2); border-bottom:1px solid var(--line); }
.pf-preview__bar .dots{ display:flex; gap:5px; }
.pf-preview__bar .dots i{ width:9px; height:9px; border-radius:50%; background:var(--line); }
.pf-preview__bar .url{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.78rem; color:var(--text-mute);
  background:var(--bg-2); border-radius:20px; padding:4px 12px; }
.pf-device button{ font-size:.9rem; background:none; border:1px solid transparent; border-radius:6px; cursor:pointer; padding:2px 5px; opacity:.55; }
.pf-device button.on{ opacity:1; border-color:var(--line); }
.pf-frame-wrap{ height:min(78vh,860px); display:flex; justify-content:center; background:var(--bg-2); }
.pf-frame-wrap iframe{ width:100%; height:100%; border:0; background:#fff; transition:width .25s; }
.pf-frame-wrap.mob{ padding:14px 0; }
.pf-frame-wrap.mob iframe{ width:375px; max-width:100%; border-radius:18px; box-shadow:0 0 0 6px #111; }

/* checklist */
.pf-checklist{ margin-top:22px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px 16px; }
@media(max-width:860px){ .pf-checklist{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .pf-checklist{ grid-template-columns:1fr; } }
.pf-checklist div{ font-size:.86rem; color:var(--text-soft); display:flex; gap:8px; }
.pf-checklist div.done{ color:var(--text); }
.pf-checklist i{ font-style:normal; }