/* ============================================================================
   ALY FIT · FASE 50 — LAYOUT PROFISSIONAL (isolado e reversível)
   09/09/2026 · só CSS · não altera banco, regra funcional, texto nem estrutura
   ----------------------------------------------------------------------------
   MEDIDO ANTES DE MEXER (tela servida, viewport 2028px):
     - #profWrap estava travado em max-width 920px, com o conteúdo pedindo
       1484px: metade da tela vazia e o painel da Biblioteca vazando;
     - .prof-nav-main tinha scrollWidth 972 contra clientWidth 920 — a barra de
       rolagem horizontal do menu do topo era efeito da largura travada;
     - duas barras fixas no rodapé (#opBtn 42px e #rsv-abrir 39px) ficavam por
       cima do conteúdo, sem nenhuma folga embaixo;
     - texto operacional dominado por 10,5px (2.910 nós) e 12,5px (1.709).
   REVERSÍVEL: tudo depende de `html:not(.c50-off)`.
     desligar → document.documentElement.classList.add('c50-off')
     ligar    → document.documentElement.classList.remove('c50-off')
     (a fase50 .js guarda a escolha e expõe window.__C50.off() / .on())
   ESCOPO: só a área da profissional (#profWrap) e os overlays dela.
     O aplicativo da aluna (#alunaWrap, .av1) e o Questionário Inicial
     (#qiOverlay) ficam intocados de propósito.
   ========================================================================== */

:root{
  --c50-max: 1680px;
  --c50-rodape: 92px;   /* folga para as duas barras fixas do rodapé */
}

/* ---------------------------------------------------------- 1. LARGURA ÚTIL */
html:not(.c50-off) body{
  padding: 18px 18px 0 !important;
}
html:not(.c50-off) #profWrap{
  max-width: var(--c50-max) !important;
  width: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-bottom: var(--c50-rodape) !important;
}

/* ------------------------------------- 2. NADA ATRÁS DAS BARRAS DO RODAPÉ */
html:not(.c50-off) #profWrap .fullscreen-panel{
  padding-bottom: var(--c50-rodape) !important;
}
html:not(.c50-off) body > .picker-overlay:not(#qiOverlay){
  padding-bottom: 56px !important;
}

/* ------------------------------- 3. MENU DO TOPO SEM ROLAGEM HORIZONTAL */
html:not(.c50-off) .prof-nav-main{
  overflow-x: visible !important;
  flex-wrap: wrap !important;
  row-gap: 2px !important;
}
html:not(.c50-off) .prof-nav-main::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
}
html:not(.c50-off) .prof-nav button,
html:not(.c50-off) .prof-nav a{
  font-size: 14px !important;
  padding: 10px 12px !important;
}

/* ------------------------------------------ 4. CONTEÚDO NÃO VAZA DO CARD */
html:not(.c50-off) #profWrap .card{
  height: auto !important;
  min-height: 0 !important;
  max-width: 100% !important;
}
html:not(.c50-off) #profWrap .card *,
html:not(.c50-off) #profWrap .row > *{
  min-width: 0 !important;
}
html:not(.c50-off) #profWrap .card{
  overflow-wrap: anywhere;
  word-break: break-word;
}
html:not(.c50-off) #profWrap table{
  width: 100% !important;
  max-width: 100% !important;
}
html:not(.c50-off) #profWrap img,
html:not(.c50-off) #profWrap video{
  max-width: 100% !important;
  height: auto !important;
}
/* grade que estava travada em 2 colunas fixas */
html:not(.c50-off) #dashAlertGrid{
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
}

/* ------------------------------------------------------ 5. LEGIBILIDADE */
html:not(.c50-off) #profWrap .m,
html:not(.c50-off) body > .picker-overlay:not(#qiOverlay) .m{
  font-size: 12.5px !important;
  line-height: 1.55 !important;
}
html:not(.c50-off) #profWrap .exlib-sub{ font-size: 12px !important; }
html:not(.c50-off) #profWrap .eyebrow{ font-size: 12px !important; }
html:not(.c50-off) #profWrap .sub{ font-size: 14px !important; }
html:not(.c50-off) #profWrap .lib-empty{ font-size: 13.5px !important; }
html:not(.c50-off) #profWrap .icon-btn{ font-size: 12px !important; }
html:not(.c50-off) #profWrap .status-pill,
html:not(.c50-off) #profWrap .status-badge{ font-size: 11.5px !important; }

html:not(.c50-off) #profWrap td,
html:not(.c50-off) body > .picker-overlay:not(#qiOverlay) td{
  font-size: 14px !important;
  padding: 12px 12px !important;
  line-height: 1.45 !important;
}
html:not(.c50-off) #profWrap th,
html:not(.c50-off) body > .picker-overlay:not(#qiOverlay) th{
  font-size: 12px !important;
  padding: 10px 12px !important;
}

html:not(.c50-off) #profWrap input,
html:not(.c50-off) #profWrap select,
html:not(.c50-off) #profWrap textarea,
html:not(.c50-off) body > .picker-overlay:not(#qiOverlay) input,
html:not(.c50-off) body > .picker-overlay:not(#qiOverlay) select,
html:not(.c50-off) body > .picker-overlay:not(#qiOverlay) textarea{
  font-size: 14.5px !important;
  line-height: 1.4 !important;
}
html:not(.c50-off) #profWrap button,
html:not(.c50-off) body > .picker-overlay:not(#qiOverlay) button{
  font-size: 14px !important;
}
html:not(.c50-off) #profWrap .cta,
html:not(.c50-off) body > .picker-overlay:not(#qiOverlay) .cta{
  font-size: 15px !important;
}
/* botões de ação dentro de tabela e de card: alvo maior sem virar bloco */
html:not(.c50-off) #profWrap td button,
html:not(.c50-off) #profWrap .card > .row button{
  padding: 8px 12px !important;
  min-height: 36px !important;
}

/* ------------------------------------------------------- 6. MODAIS MAIORES */
html:not(.c50-off) body > .picker-overlay:not(#qiOverlay) > div,
html:not(.c50-off) body > .picker-overlay:not(#qiOverlay) > .card{
  max-width: min(920px, 94vw) !important;
  width: 100% !important;
  max-height: 86vh !important;
  overflow-y: auto !important;
}

/* ------------------------------------------------------------- 7. CELULAR */
@media (max-width: 560px){
  html:not(.c50-off) body{ padding: 12px 10px 0 !important; }
  html:not(.c50-off) #profWrap button,
  html:not(.c50-off) #profWrap .cta,
  html:not(.c50-off) #profWrap select,
  html:not(.c50-off) #profWrap input,
  html:not(.c50-off) #profWrap textarea{
    min-height: 44px !important;
  }
  html:not(.c50-off) #profWrap td button{ min-height: 44px !important; }
  html:not(.c50-off) #dashAlertGrid{ grid-template-columns: 1fr !important; }
}

/* ------------------------------- 8. PAINEL DE TELA CHEIA (Editor de ficha) */
/* .fb-layout vinha com grid fixo 1504px + 368px = 1900px, mais largo que a
   janela: era daí a rolagem horizontal do documento inteiro. */
html:not(.c50-off) .fullscreen-panel{
  max-width: 100% !important;
  box-sizing: border-box !important;
}
html:not(.c50-off) .fb-layout{
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
  max-width: 100% !important;
}
html:not(.c50-off) .fb-main{ min-width: 0 !important; width: auto !important; }
@media (max-width: 1100px){
  html:not(.c50-off) .fb-layout{ grid-template-columns: 1fr !important; }
}

/* --------------------------------------- 9. LISTA DE ALUNAS: nada cortado */
html:not(.c50-off) .alunas-grid{
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)) !important;
  align-items: start !important;
}
html:not(.c50-off) .aluna-card{ height: auto !important; min-height: 0 !important; }
/* os chips vinham em uma linha só, com scrollWidth 9407px contra 291px de
   card: o texto saía pela borda e sumia. Agora quebram linha e, se forem
   muitos, rolam dentro do próprio card — nenhuma informação é escondida e o
   cartão continua compacto. */
html:not(.c50-off) .essential-chips{
  flex-wrap: wrap !important;
  row-gap: 5px !important;
  max-height: 148px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
html:not(.c50-off) .essential-chips > *{
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
html:not(.c50-off) #profWrap .row{ flex-wrap: wrap !important; }

/* ============ 10. CONTRASTE DO BLOCO "PERÍODO DA FICHA" ==================== */
/* DEFEITO MEDIDO: os botões de duração e o campo de data nasciam com
   `background:#fff; color:inherit`. Dentro do painel escuro da profissional a
   cor herdada é quase branca — texto branco sobre fundo branco. A linha
   "Início … · revisão …" e os rótulos vinham com #666/#888 sobre fundo
   escuro. Aqui todos os estados ganham cor de fundo E cor de texto
   explícitas; nada depende mais de herança.
   Vale para o bloco do modal da ficha (#c48Barra) e para os da atribuição e
   do perfil (#c48bBarraPub, #c48bBarraLista, #c48bPerfil).                   */

html:not(.c50-off) #c48Barra,
html:not(.c50-off) #c48bBarraPub,
html:not(.c50-off) #c48bBarraLista,
html:not(.c50-off) #c48bPerfil{
  background: #f7fafc !important;
  border: 1px solid #c9d6e4 !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  color: #12243b !important;
}
/* rótulos e textos auxiliares: nada de cinza claro sobre claro */
html:not(.c50-off) #c48Barra div,
html:not(.c50-off) #c48Barra span,
html:not(.c50-off) #c48bBarraPub div,
html:not(.c50-off) #c48bBarraPub span,
html:not(.c50-off) #c48bBarraLista div,
html:not(.c50-off) #c48bBarraLista span,
html:not(.c50-off) #c48bPerfil div,
html:not(.c50-off) #c48bPerfil span,
html:not(.c50-off) #c48bPerfil b{
  color: #12243b !important;
}
html:not(.c50-off) #c48Barra > div:first-child,
html:not(.c50-off) #c48bBarraPub > div:nth-child(2),
html:not(.c50-off) #c48bBarraLista > div:nth-child(2),
html:not(.c50-off) #c48bPerfil > div:nth-child(2){
  color: #445a75 !important;   /* auxiliar: escuro o bastante para ler */
  font-size: 12.5px !important;
}
/* a linha "Início … · revisão …" ao lado do selo */
html:not(.c50-off) #c48Sit,
html:not(.c50-off) #c48Sit span,
html:not(.c50-off) [data-c48bres],
html:not(.c50-off) [data-c48bres] b{
  color: #12243b !important;
  font-size: 13px !important;
}
html:not(.c50-off) #c48Erro{ color: #a4232b !important; font-weight: 600 !important; }

/* ---- botões de duração: cinco estados, todos legíveis sem passar o mouse - */
html:not(.c50-off) #c48Barra [data-c48sem],
html:not(.c50-off) [data-c48b]{
  background: #ffffff !important;
  color: #12243b !important;               /* normal: azul-escuro sobre claro */
  border: 1px solid #9fb3c8 !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background .12s, border-color .12s;
}
html:not(.c50-off) #c48Barra [data-c48sem]:hover,
html:not(.c50-off) [data-c48b]:hover{
  background: #dce9f7 !important;
  border-color: #4a7fb5 !important;
  color: #0d1b2e !important;
}
html:not(.c50-off) #c48Barra [data-c48sem]:focus-visible,
html:not(.c50-off) [data-c48b]:focus-visible,
html:not(.c50-off) #c48Barra input:focus-visible,
html:not(.c50-off) [data-c48bdata]:focus-visible,
html:not(.c50-off) [data-c48bnova]:focus-visible{
  outline: 3px solid #1d6fd0 !important;
  outline-offset: 2px !important;
}
html:not(.c50-off) #c48Barra [data-c48sem]:active,
html:not(.c50-off) [data-c48b]:active{
  background: #c3daf2 !important;
}
/* selecionado: fundo cheio, texto branco */
html:not(.c50-off) #c48Barra [data-c48sem][data-c48on="1"],
html:not(.c50-off) [data-c48b][data-c48on="1"]{
  background: #14713f !important;
  border-color: #0e5730 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}
/* desabilitado: continua legível e claramente indisponível */
html:not(.c50-off) #c48Barra [data-c48sem]:disabled,
html:not(.c50-off) [data-c48b]:disabled,
html:not(.c50-off) [data-c48bsalvar]:disabled{
  background: #e4eaf1 !important;
  color: #59708c !important;
  border-color: #b6c4d4 !important;
  border-style: dashed !important;
  cursor: not-allowed !important;
  font-weight: 600 !important;
  opacity: 1 !important;                    /* legível, sem apagar o texto */
}

/* ------------------------------- campos de data e botão de salvar do bloco */
html:not(.c50-off) #c48Barra input[type="date"],
html:not(.c50-off) [data-c48bdata],
html:not(.c50-off) [data-c48bnova]{
  background: #ffffff !important;
  color: #12243b !important;
  border: 1px solid #9fb3c8 !important;
  border-radius: 8px !important;
}
html:not(.c50-off) #c48Barra input[type="date"]::-webkit-calendar-picker-indicator,
html:not(.c50-off) [data-c48bdata]::-webkit-calendar-picker-indicator,
html:not(.c50-off) [data-c48bnova]::-webkit-calendar-picker-indicator{
  filter: none !important;
  opacity: 1 !important;
}
html:not(.c50-off) [data-c48bsalvar]{
  background: #14713f !important;
  color: #ffffff !important;
  border: 1px solid #0e5730 !important;
  font-weight: 600 !important;
}
html:not(.c50-off) [data-c48bsalvar]:hover{ background: #0e5730 !important; }
html:not(.c50-off) [data-c48bok]{ color: #14713f !important; font-weight: 600 !important; }
/* os selos de situação continuam coloridos, mas sobre fundo claro */
html:not(.c50-off) #c48bPerfil span[style*="border-radius:999px"]{
  background: #ffffff !important;
  font-weight: 700 !important;
}

/* rótulos "Início" e "Revisão prevista" no modal da ficha: estavam em
   #7e90ab sobre #0f1e38 (razão 5,12 — passa, mas é o mais fraco do bloco).
   Subidos para ~9:1. */
html:not(.c50-off) label:has(> #ev2mFIni) span,
html:not(.c50-off) label:has(> #ev2mFFim) span{
  color: #cfdcec !important;
  font-size: 12.5px !important;
}
html:not(.c50-off) #ev2mFIni,
html:not(.c50-off) #ev2mFFim{
  color: #f4f7fb !important;
  font-size: 14.5px !important;
}