/* ============================================================= */
/* Lekto V3 · Perfil — Minha Conta, popover do usuário e modais     */
/* Base: Downloads/edição de perfil 6.1, 6.1.1, 6.1.2 + modais       */
/* Integrado ao protótipo (index.html). Cores via var(--lkt-*).      */
/* ============================================================= */

.view--conta { padding-bottom: 48px; }

/* Cabeçalho da seção: usa o padrão .view-head (styles.css) */
/* Largura cheia: os cards da conta acompanham a coluna de conteúdo da .view
   (que já desconta o rail), sem teto próprio — o mesmo que as demais views da
   Lekto fazem. O respiro lateral vem do padding da .view, não de um max-width. */
.mc-wrap { display: grid; gap: 18px; }

/* ---------- Card de perfil (borda com gradiente) ---------- */
.mc-profile {
  position: relative; border-radius: var(--border-radius-md); padding: 26px 28px;
  background:
    linear-gradient(#FFF, #FFF) padding-box,
    linear-gradient(120deg, var(--color-accent-pure), var(--color-success-pure)) border-box;
  border: 1.5px solid transparent; box-shadow: var(--theme-card-shadow);
}
.mc-profile__top { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.mc-profile__avatar { width: 76px; height: 76px; flex: 0 0 76px; border-radius: var(--border-radius-circle); overflow: hidden; border: 1px solid var(--theme-panel-border); }
.mc-profile__avatar img { width: 100%; height: 100%; object-fit: cover; }
.mc-profile__name { margin: 0; font-family: var(--theme-font-family-heading); font-weight: 800; letter-spacing: -.01em; font-size: clamp(24px, 3vw, 30px); color: var(--theme-text-heading); }
.mc-profile__actions { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.mc-link { background: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 14.5px; color: var(--color-accent-dark); }
.mc-link:hover { text-decoration: underline; }
.mc-profile__meta { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 18px; }
.mc-meta { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; color: var(--theme-text-heading); }
.mc-meta svg { width: 18px; height: 18px; color: var(--color-surface-soft); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mc-meta b { color: var(--color-surface-pure); font-weight: 600; }

/* ---------- Card de status (professor / atribuições) ---------- */
.mc-status { display: flex; flex-direction: column; gap: 16px; background: #FFF; border: 1px solid var(--theme-panel-border); border-radius: var(--border-radius-md); padding: 22px 26px; box-shadow: var(--theme-card-shadow); }
.mc-badge { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; padding: 7px 14px; border-radius: var(--border-radius-pill); background: var(--color-primary-pure); color: #FFF; font-size: 13.5px; font-weight: 700; }
.mc-badge svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mc-status__line { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; color: var(--theme-text-muted); }
.mc-status__line svg { width: 18px; height: 18px; color: var(--color-surface-soft); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mc-status__line b { color: var(--theme-text-heading); font-weight: 700; }
.mc-done { padding: 5px 12px; border-radius: var(--border-radius-pill); background: var(--color-success-tinted); color: var(--color-success-darker); font-size: 12.5px; font-weight: 700; }

/* Perfil + a troca dele na mesma linha do card (Minha Conta da Administração).
   O badge tem align-self:flex-start por causa do .mc-status, que é coluna; nesta
   linha o alinhamento é do flex de fora. */
.mc-perfilrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-xs); }

/* ---------- Anos escolares ---------- */
.mc-anos__head { display: flex; align-items: center; gap: 12px; margin: 8px 0 2px; }
.mc-anos__head svg { width: 20px; height: 20px; color: var(--color-surface-soft); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mc-anos__title { font-family: var(--theme-font-family-heading); font-size: 15px; font-weight: 700; color: var(--theme-text-muted); }
.mc-level { background: #FFF; border: 1px solid var(--theme-panel-border); border-radius: var(--border-radius-md); padding: 20px 24px; box-shadow: var(--theme-card-shadow); }
.mc-level__head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.mc-level__name { font-family: var(--theme-font-family-heading); font-weight: 700; letter-spacing: -.01em; font-size: 18px; color: var(--theme-text-heading); }
.mc-seg { padding: 5px 13px; border-radius: var(--border-radius-pill); background: var(--color-primary-pure); color: #FFF; font-size: 12.5px; font-weight: 700; }
.mc-turmas { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.mc-turmas__label { font-size: 14px; color: var(--color-surface-pure); margin-right: 4px; }
.mc-tchip { padding: 6px 13px; border-radius: var(--border-radius-pill); border: 1.5px solid var(--color-primary-pale); color: var(--color-primary-dark); background: #FFF; font-size: 12.5px; font-weight: 700; }

/* ---------- Popover do usuário (rail) ---------- */
.userpop { position: fixed; z-index: 200; left: calc(var(--rail-w) + 24px); bottom: 20px; width: min(360px, calc(100vw - 32px));
  background: #FFF; border: 1px solid var(--theme-panel-border); border-radius: var(--border-radius-md); box-shadow: var(--theme-modal-shadow); padding: 18px; }
.userpop[hidden] { display: none; }
.userpop__hi { margin: 0 0 14px; font-family: var(--theme-font-family-heading); font-weight: 800; letter-spacing: -.01em; font-size: 20px; color: var(--theme-text-heading); }
/* flex-wrap porque o rótulo do perfil varia de tamanho: "Professor" cabe na
   linha com o "Trocar de Perfil", "Administrador Lekto" não. Sem isso o pill
   quebrava em duas linhas por dentro e desalinhava o ícone; agora o botão é que
   desce. Quando cabe, nada muda. */
.userpop__profile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--border-radius-sm); background: var(--color-primary-tinted); margin-bottom: 12px; }
.userpop__profile .mc-badge { margin: 0; white-space: nowrap; }
.userpop__profile-label { font-size: 13.5px; color: var(--theme-text-muted); }
.userpop__switch { margin-left: auto; background: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 13.5px; color: var(--color-accent-dark); }
.userpop__switch:hover { text-decoration: underline; }
.userpop__list { display: grid; gap: 4px; }
.userpop__item { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 11px 12px; border-radius: var(--border-radius-sm); transition: background var(--motion-dur-fast) var(--motion-ease); }
.userpop__item:hover { background: var(--theme-surface-muted); }
.userpop__ic { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--border-radius-sm); background: var(--theme-surface-muted); color: var(--theme-text-muted); }
.userpop__ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.userpop__txt { display: grid; gap: 1px; }
.userpop__txt b { font-size: 14.5px; font-weight: 700; color: var(--theme-text-heading); }
.userpop__txt span { font-size: 12.5px; color: var(--color-surface-pure); }
.userpop__chev { margin-left: auto; width: 18px; height: 18px; color: var(--base-400); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Item-toggle (ex.: Modo Offline): mesma linha dos demais, mas termina num
   DS:Switch em vez do chevron de navegação — troca de tela e troca de estado
   pedem affordance diferente. O <span class="switch"> reaproveita o token de
   css/styles.css; role/aria-checked vivem no botão da linha inteira, que é
   quem responde ao clique (o span é só o desenho). */
.userpop__item--switch .switch { margin-left: auto; }
.userpop__ver { margin: 14px 0 0; text-align: center; font-size: 12px; color: var(--color-surface-soft); }
.userpop__scrim { position: fixed; inset: 0; z-index: 199; background: transparent; }
.userpop__scrim[hidden] { display: none; }

/* ---------- Modais de perfil ----------
   Esqueleto único (.modal__card--sheet), conforme o contrato DS:Modal
   (css/styles.css): NADA fixo. Cabeçalho, corpo e rodapé ficam no fluxo e o
   cartão inteiro rola junto com a sobreposição. As ações do rodapé seguem a
   regra da base — à direita, primário por último, empilhando no celular. */
.modal__card--sheet {
  --modal-pad: 0;
  gap: 0; align-items: stretch;
  display: flex; flex-direction: column;
}
.modal__card--sheet .modal__close { top: 18px; right: 18px; z-index: 2; }

.mcs-head { display: flex; align-items: flex-start; gap: 12px; padding: 26px 28px 20px; }
.mcs-head__ic { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--border-radius-sm); background: var(--color-primary-tinted); color: var(--color-primary-pure); }
.mcs-head__ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mcs-head__txt { min-width: 0; padding-right: 46px; } /* calha do botão de fechar */
.mcs-head__txt h2 { margin: 0; font-family: var(--theme-font-family-heading); font-size: 22px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.mcs-head__txt p { margin: 5px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--color-surface-pure); }

.mcs-body { padding: 4px 28px 24px; display: flex; flex-direction: column; gap: 16px; }
.mcs-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 28px 20px; border-top: 1px solid var(--color-surface-pale); }
.mcs-foot > p:first-child { margin-right: auto; } /* texto de apoio empurra as ações para a direita */

@media (max-width: 560px) {
  .mcs-foot { flex-direction: column-reverse; align-items: stretch; }
  .mcs-foot > * { width: 100%; justify-content: center; }
  .mcs-foot > p:first-child { margin-right: 0; }
}

.mc-textbtn { padding: 10px 16px; min-height: 44px; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 700; font-size: 14.5px; color: var(--color-surface-pure); border-radius: var(--border-radius-pill); transition: background var(--motion-dur-fast) var(--motion-ease), color var(--motion-dur-fast) var(--motion-ease); }
.mc-textbtn:hover { background: var(--theme-surface-muted); color: var(--theme-text-heading); }

/* --- Editar Perfil --- */
.modal__card--perfil { width: min(560px, 100%); }

.mc-identity { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--border-radius-sm-14); background: var(--theme-surface-muted); flex-wrap: wrap; }
.mc-identity__avatar { width: 58px; height: 58px; flex: 0 0 58px; border-radius: var(--border-radius-circle); overflow: hidden; border: 2px solid #FFF; box-shadow: var(--theme-card-shadow); }
.mc-identity__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-identity__txt { flex: 1; min-width: 120px; display: flex; flex-direction: column; gap: 2px; }
.mc-identity__txt strong { font-size: 15px; font-weight: 800; color: var(--theme-text-heading); }
.mc-identity__txt span { font-size: 12.5px; color: var(--color-surface-pure); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-identity__acts { display: flex; gap: 6px; flex-shrink: 0; }

.mc-ghostbtn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; min-height: 40px; border-radius: var(--border-radius-pill); border: 1px solid var(--theme-panel-border); background: #FFF; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: var(--theme-text-muted); transition: border-color var(--motion-dur-fast) var(--motion-ease), color var(--motion-dur-fast) var(--motion-ease); }
.mc-ghostbtn:hover { border-color: var(--color-accent-pure); color: var(--color-accent-dark); }
.mc-ghostbtn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mc-ghostbtn--danger { color: var(--color-surface-pure); }
.mc-ghostbtn--danger:hover { border-color: var(--color-error-pure); color: var(--color-error-pure); }

/* Campos próprios: o .field global carrega margens da tela de login */
.mcf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.mcf { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mcf--full { grid-column: 1 / -1; }
.mcf__label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--theme-text-muted); }
.mcf__input { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; color: var(--theme-text-heading); padding: 12px 14px; min-height: 46px; border: 1px solid var(--theme-panel-border); border-radius: var(--border-radius-sm); background: #FFF; transition: border-color var(--motion-dur-fast) var(--motion-ease), box-shadow var(--motion-dur-fast) var(--motion-ease); }
.mcf__input:focus { outline: none; border-color: var(--color-accent-pure); box-shadow: var(--theme-input-focus-ring); }
.mcf__input:disabled { background: var(--theme-surface-muted); color: var(--color-surface-pure); cursor: not-allowed; }
.mcf__hint { font-size: 12px; line-height: 1.45; color: var(--color-surface-soft); }
.mcf__lock { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--border-radius-pill); background: var(--theme-surface-muted); color: var(--color-surface-pure); font-size: 10.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.mcf__lock svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* --- Editar Foto --- */
.modal__card--foto { width: min(560px, 100%); }
.mc-crop { position: relative; border-radius: var(--border-radius-sm); overflow: hidden; background: var(--theme-text-heading); aspect-ratio: 4 / 3; display: grid; place-items: center; }
.mc-crop img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.mc-crop__box { position: absolute; top: 12%; left: 24%; width: 52%; height: 60%; border: 2px solid #FFF; box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--color-surface-deepest) 55%, transparent); }
.mc-crop__box span { position: absolute; width: 10px; height: 10px; background: #FFF; border: 1px solid var(--base-400); }
.mc-crop__box span:nth-child(1) { top: -5px; left: -5px; } .mc-crop__box span:nth-child(2) { top: -5px; right: -5px; }
.mc-crop__box span:nth-child(3) { bottom: -5px; left: -5px; } .mc-crop__box span:nth-child(4) { bottom: -5px; right: -5px; }
/* .modal__card alinha os filhos ao início — sem width:100% as ações não vão à direita */
.mc-foto-actions { width: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* --- Editar Anos Escolares: light mode, aderente aos demais modais ---
   Mesmo esqueleto .modal__card--sheet do Editar Perfil. A hierarquia que antes
   vinha de camadas de branco sobre a superfície de marca agora vem de borda +
   tom de superfície; o acento marca só o que está selecionado. */
.modal__card--anos { width: min(600px, 100%); }
.modal__card--anos .mcs-body { gap: 10px; }
.modal__card--anos .mcs-foot { flex-wrap: wrap; }

.mc-anos-summary { margin: 0 auto 0 0; font-size: 13px; font-weight: 700; color: var(--color-surface-pure); }

/* Grupo = um cartão só; o painel abre dentro dele, não colado nas bordas */
.mc-grp { border-radius: var(--border-radius-sm-14); border: 1px solid var(--theme-panel-border); background: var(--theme-surface-muted); transition: border-color var(--motion-dur-fast) var(--motion-ease), background var(--motion-dur-fast) var(--motion-ease); }
.mc-grp:hover { border-color: var(--theme-border-subtle); }
.mc-grp.is-open { background: #FFF; border-color: var(--theme-border-subtle); box-shadow: var(--theme-card-shadow); }
.mc-grp__row { display: flex; align-items: stretch; }
.mc-grp__check { display: grid; place-items: center; padding: 0 4px 0 16px; border: 0; background: none; cursor: pointer; flex-shrink: 0; }
.mc-grp__main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 14px 16px 14px 12px; border: 0; background: none; cursor: pointer; color: inherit; font: inherit; text-align: left; }
.mc-grp__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.mc-grp__txt small { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--theme-text-muted); }
.mc-grp__txt strong { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; color: var(--theme-text-heading); }
.mc-grp__count { flex-shrink: 0; padding: 4px 10px; border-radius: var(--border-radius-pill); background: var(--color-accent-tinted); color: var(--color-accent-dark); font-size: 11.5px; font-weight: 800; }
.mc-grp__count[hidden] { display: none; }
.mc-grp__chev { flex-shrink: 0; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; color: var(--color-surface-pure); transition: transform var(--motion-dur-fast) var(--motion-ease); }
.mc-grp.is-open .mc-grp__chev { transform: rotate(180deg); }

/* Checkbox tri-estado do grupo: vazio / traço (alguns) / check (todos) */
.mc-grp__box { position: relative; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--theme-border-subtle); background: #FFF; transition: background var(--motion-dur-fast) var(--motion-ease), border-color var(--motion-dur-fast) var(--motion-ease); }
.mc-grp__box svg { width: 14px; height: 14px; fill: none; stroke: #FFF; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.mc-grp__box i { position: absolute; width: 10px; height: 2.5px; border-radius: var(--border-radius-pill); background: #FFF; opacity: 0; }
.mc-grp__check:hover .mc-grp__box { border-color: var(--color-accent-soft); }
.mc-grp.is-all .mc-grp__box, .mc-grp.is-some .mc-grp__box { background: var(--color-accent-pure); border-color: var(--color-accent-pure); }
.mc-grp.is-all .mc-grp__box svg { opacity: 1; }
.mc-grp.is-some .mc-grp__box i { opacity: 1; }
.mc-grp__check:focus-visible .mc-grp__box, .mc-grp__main:focus-visible { outline: 2px solid var(--color-accent-pure); outline-offset: 2px; }

.mc-grp__panel { padding: 0 16px 16px 52px; }
.mc-grp__panel[hidden] { display: none; }
.mc-yrs { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.mc-yr { display: flex; align-items: center; gap: 8px; padding: 10px 12px; min-height: 44px; border-radius: var(--border-radius-sm); border: 1.5px solid var(--theme-panel-border); background: #FFF; color: var(--theme-text-muted); cursor: pointer; font: inherit; transition: border-color var(--motion-dur-fast) var(--motion-ease), background var(--motion-dur-fast) var(--motion-ease), color var(--motion-dur-fast) var(--motion-ease); }
.mc-yr:hover { border-color: var(--color-accent-soft); background: var(--theme-surface-muted); }
.mc-yr.is-checked { border-color: var(--color-accent-pure); background: var(--color-accent-tinted); color: var(--color-accent-darker); }
.mc-yr__box { display: grid; place-items: center; width: 19px; height: 19px; flex: 0 0 19px; border-radius: 6px; border: 2px solid var(--theme-border-subtle); background: #FFF; }
.mc-yr.is-checked .mc-yr__box { background: var(--color-accent-pure); border-color: var(--color-accent-pure); }
.mc-yr__box svg { width: 12px; height: 12px; fill: none; stroke: #FFF; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.mc-yr.is-checked .mc-yr__box svg { opacity: 1; }
.mc-yr:focus-visible { outline: 2px solid var(--color-accent-pure); outline-offset: 2px; }
.mc-yr__name { font-family: var(--theme-font-family-heading); font-size: 13.5px; font-weight: 700; white-space: nowrap; }

@media (max-width: 640px) {
  .mc-profile__actions { margin-left: 0; width: 100%; }
  .mcs-head, .mcs-body, .mcs-foot { padding-left: 20px; padding-right: 20px; }
  .mcf-grid { grid-template-columns: 1fr; }
  .mc-identity__acts { width: 100%; }
  .mc-ghostbtn { flex: 1; justify-content: center; }
  .mc-grp__panel { padding-left: 20px; }
  /* rodapé: resumo em cima, ações lado a lado com o primário ocupando a sobra */
  .mcs-foot { flex-wrap: wrap; }
  .mcs-foot > :first-child { margin-right: 0; }
  .mc-anos-summary { width: 100%; margin: 0 0 8px; }
  .mcs-foot .btn { flex: 1; justify-content: center; font-size: 14px; white-space: nowrap; }
  .mcs-foot .btn .i-arrow { display: none; } /* no estreito o rótulo vem antes da seta */
  .userpop { left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-grp, .mc-grp__chev, .mc-yr, .mc-ghostbtn, .mc-textbtn, .mcf__input { transition: none; }
}