/*
 * Folha de estilos principal para o Portal de Aprendizagem.
 * Define um layout moderno e responsivo com uma barra lateral,
 * uma área de cabeçalho e conteúdo principal. As cores principais
 * podem ser definidas dinamicamente em cada página via a variável
 * CSS `--cor-principal`, tornando possível personalizar a aparência
 * para administradores, professores e alunos.
 */

/* Variáveis de temas globais.  Estas são cores de fallback; páginas PHP
   podem sobrescrever --cor-principal via um bloco <style> no cabeçalho. */
:root {
  --page-width:1239px;
  --page-pad-x: 0px;
  --page-pad-mobile: 16px;
    --cor-principal: #007bff;       /* cor de destaque (botões, topbar) */
    --cor-sidebar: #1e2530;         /* fundo da barra lateral */
    --cor-fundo: #f7f9fc;           /* cor de fundo da área principal */
    --cor-topbar: var(--cor-principal); /* cor do cabeçalho */
    --cor-texto: #323f52;           /* texto principal */
    --cor-texto-invertido: #ffffff; /* texto em áreas escuras */
    --cor-borda: #e5e8ef;           /* cor de bordas */
    --sombras: 0 2px 4px rgba(0,0,0,0.08);
    --raio-borda: 6px;              /* raio das bordas */
}

/* Base global */
*,*::before,*::after{ box-sizing:border-box; }


/* Estilo base para o corpo da página */
body {
    margin: 0;
    font-family: 'Segoe UI', 'Helvetica', 'Arial', sans-serif;
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    line-height: 1.6;
}

/* Cartões de formulário (login, registro) */
.form-card {
    background: var(--surface);
    padding: 30px;
    border-radius: var(--raio-borda);
    box-shadow: var(--sombras);
    margin: 40px auto;
}
.form-card h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.5em;
    text-align: center;
    color: var(--cor-texto);
}
.form-card label {
    display: block;
    margin-bottom: 12px;
    font-weight: 500;
    color: var(--cor-texto);
}
.form-card label input,
.form-card label select {
    width: 100%;
    padding: 8px 10px;
    margin-top: 4px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda);
    font-size: 0.9em;
    background-color: #fafafa;
    color: var(--cor-texto);
}
.form-card input[type="submit"],
.form-card .btn {
    width: 100%;
    margin-top: 20px;
    cursor: pointer;
}
.form-card .error-message {
    color: #d9534f;
    margin-bottom: 15px;
    font-size: 0.9em;
}

/* Mensagens de validação por campo (registro/login/forms) */
.form-card .field-error{
  display:none;
  color:#dc2626;
  font-size:0.85em;
  margin-top:6px;
  line-height:1.2;
}
.form-card .is-invalid input,
.form-card .is-invalid select{
  border-color:#dc2626;
  box-shadow: 0 0 0 3px rgba(220,38,38,.08);
}
.form-card .is-invalid .field-error{ display:block; }

/* ------------------------------------------------------------------ */
/* Navegação principal (topo)                                          */
/* A barra de navegação fora dos painéis usa uma estrutura em contêiner
   para centralizar conteúdo. A logomarca e os links ficam alinhados
   horizontalmente. O CSS define cor de fundo, textos e espaços. */
.nav {
    background-color: var(--cor-topbar);
    color: var(--cor-texto-invertido);
}
.nav .container {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--page-pad-x);
}


@media (max-width: 1240px){
  :root{ --page-pad-x: var(--page-pad-mobile); }
}
.nav-brand {
    font-size: 1.6em;
    font-weight: 600;
    color: var(--cor-texto-invertido);
    margin: 0;
    display: flex;
    align-items: center;
}
.nav-brand img {
    max-height: 56px;
    width: auto;
}
.nav-links a {
    color: var(--cor-texto-invertido);
    margin-left: 20px;
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s ease;
}
.nav-links a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Contêiner genérico para seções do site */
.container {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--page-pad-x);
}


/* Seção principal de destaque na landing page */
.hero {
    background-color: var(--cor-principal);
    color: var(--cor-texto-invertido);
    padding: 60px 20px;
    text-align: center;
}
.hero h1 {
    margin: 0 0 15px 0;
    font-size: 2.4em;
    font-weight: 700;
}
.hero p {
    margin: 0;
    font-size: 1.2em;
    opacity: 0.9;
}

/* Seção de listagem de cursos */
.courses-section {
    padding: 40px 20px;
}
.courses-section h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.8em;
    color: var(--cor-texto);
}

/* Botões genéricos */
.btn {
    background-color: var(--cor-principal);
    color: var(--cor-texto-invertido);
    padding: 8px 16px;
    border: none;
    border-radius: var(--raio-borda);
    text-decoration: none;
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.btn:hover {
    /* Usa filtro de brilho para escurecer levemente o botão ao passar o mouse */
    filter: brightness(0.9);
    text-decoration: none;
}

main {
    padding: 24px;
}

/* Lista de cursos na página inicial */
.lista-cursos {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.curso-item {
    background: var(--surface);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda);
    width: 280px;
    padding: 15px;
    box-shadow: var(--sombras);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.curso-item img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: var(--raio-borda);
    margin-bottom: 10px;
}
.curso-item h3 {
    margin: 0 0 8px 0;
    font-size: 1.1em;
    color: var(--cor-texto);
}
.curso-item p {
    margin: 4px 0;
    font-size: 0.9em;
    color: #555;
}
.curso-item .btn {
    margin-top: 10px;
    align-self: flex-start;
}



/* FORCE 1239 — padroniza largura do conteúdo */
.container, .nav .container, .main-content{ box-sizing:border-box; }
.table-card, .form-card, .card, .panel-card, .chat-box, .cert-container, .filter-bar, .course-grid, .course-card{ width:100% !important; max-width:none !important; }
/* Responsividade geral */
@media (max-width: 768px) {
    .layout {
        flex-direction: column;
    }
    .sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
    }
    .sidebar a {
        flex: 1;
        text-align: center;
        border-bottom: none;
        border-right: 1px solid rgba(255,255,255,0.1);
    }
    .main {
        margin-left: 0;
    }
    .topbar {
        flex-direction: column;
        align-items: flex-start;
    }
    .topbar nav a {
        margin-left: 0;
        margin-right: 10px;
    }
    table {
        display: block;
        overflow-x: auto;
    }
    .lista-cursos {
        flex-direction: column;
        align-items: center;
    }
    .curso-item {
        width: 100%;}
}

/* Estrutura geral: barra lateral + conteúdo */
.layout {
    display: flex;
    min-height: 100vh;
}

/* Barra lateral fixa à esquerda */
.sidebar {
    width: 240px;
    background-color: var(--cor-sidebar);
    color: var(--cor-texto-invertido);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    min-height: 100vh;
    box-shadow: var(--sombras);
}

/* Área da logo dentro da barra lateral */
.sidebar .logo {
    padding: 24px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-size: 1.3em;
    font-weight: bold;
    height: 72px;
}

.sidebar .logo img {
    max-height: 45px;
    max-width: 100%;
    object-fit: contain;
}

.sidebar .logo span {
    margin-left: 10px;
}

/* Links do menu na barra lateral */
.sidebar a {
    padding: 12px 20px;
    color: var(--cor-texto-invertido);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    transition: background 0.3s ease;
    font-size: 0.95em;
    display: block;
}

.sidebar a:hover,
.sidebar a.ativo {
    background-color: rgba(255,255,255,0.15);
}

/* Área principal (à direita da barra lateral) */
.main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--cor-fundo);
}

/* Barra superior fixa na área principal */
.topbar {
    background-color: var(--cor-topbar);
    color: var(--cor-texto-invertido);
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--sombras);
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar h1 {
    margin: 0;
    font-size: 1.4em;
    font-weight: 600;
}

.topbar nav a {
    color: var(--cor-texto-invertido);
    margin-left: 20px;
    text-decoration: none;
    font-weight: 500;
}
.topbar nav a:hover {
    text-decoration: underline;
}

/* Área de conteúdo dentro da área principal */
.main-content {
    flex-grow: 1;
    padding: 24px var(--page-pad-x);
    overflow-y: auto;
    max-width: var(--page-width);
    margin: 0 auto;
}

/* Estilo de tabelas padronizadas */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

table th,
table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--cor-borda);
    text-align: left;
    font-size: 0.95em;
}

table th {
    background-color: #f8f9fc;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Zebra striping para melhor legibilidade */
table tbody tr:nth-child(odd) {
    background-color: var(--surface);
}
table tbody tr:nth-child(even) {
    background-color: #f9fafc;
}

/* Botões genéricos */
.btn {
    display: inline-block;
    padding: 8px 14px;
    margin-top: 8px;
    background-color: var(--cor-principal);
    color: var(--cor-texto-invertido);
    text-decoration: none;
    border-radius: var(--raio-borda);
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
    font-size: 0.9em;
    font-weight: 500;
}
.btn:hover {
    filter: brightness(0.95);
}

/* Botão secundário */
.btn-secondary {
    background-color: #6c757d;
    color: var(--cor-texto-invertido);
}
.btn-secondary:hover {
    background-color: #5a6268;
}

/* Cartões (cards) para dashboards e resumos */
.dashboard {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    background: var(--surface);
    padding: 20px;
    border: 1px solid var(--cor-borda);
    box-shadow: var(--sombras);
    border-radius: var(--raio-borda);
    flex: 1 1 calc(50% - 20px);
    box-sizing: border-box;
    min-width: 220px;
}

/* Listagem de cursos na página inicial (landing) */
.lista-cursos {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}

.curso-item {
    background-color: var(--surface);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda);
    padding: 20px;
    width: calc(33.333% - 30px);
    box-sizing: border-box;
    box-shadow: var(--sombras);
    transition: transform 0.2s ease;
}
.curso-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.12);
}
.curso-item img {
    max-width: 100%;
    height: auto;
    border-radius: var(--raio-borda);
}
.curso-item h3 {
    margin-top: 12px;
    margin-bottom: 8px;
    font-size: 1.1em;
}

/* Barra de progresso */
.progress-bar {
    width: 100%;
    background-color: #e8ebf2;
    border-radius: var(--raio-borda);
    overflow: hidden;
    height: 12px;
    margin-bottom: 6px;
}
.progress-bar div {
    height: 100%;
    background-color: var(--cor-principal);
    width: 0;
    transition: width 0.4s ease;
}

/* Rodapé genérico */
footer {
    background-color: var(--cor-sidebar);
    color: var(--cor-texto-invertido);
    text-align: center;
    padding: 15px 0;
    font-size: 0.85em;
}

/* Estilização de formulários */
form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 0.95em;
    color: var(--cor-texto);
}
form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="number"],
form input[type="date"],
form select,
form textarea,
form input[type="file"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda);
    box-sizing: border-box;
    font-size: 1em;
    margin-bottom: 12px;
    background-color: var(--surface);
    color: var(--cor-texto);
    transition: border-color 0.2s ease;
}
form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus,
form input[type="number"]:focus,
form select:focus,
form textarea:focus {
    outline: none;
    border-color: var(--cor-principal);
    box-shadow: 0 0 0 2px rgba(0,123,255,0.15);
}

/* Classes utilitárias para margens e flex */
.text-center { text-align: center; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }

/* Estilos responsivos para telas pequenas */
@media (max-width: 768px) {
    /* Empilha barra lateral acima do conteúdo */
    .layout {
        flex-direction: column;
    }
    .sidebar {
        width: 100%;
        min-height: auto;
        order: 1;
    }
    .main {
        order: 2;
    }
    .sidebar a {
        border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    /* Permite rolagem horizontal para tabelas e dashboards largos */
    table, .dashboard {
        display: block;
        overflow-x: auto;
    }
    .curso-item {
        width: 100%;
    }
}

/* ============================================================
   PERFIL DO USUÁRIO (ESTUDANTE/PROFESSOR/ADMIN) — TOPBAR + CARD
   ============================================================ */
.topbar .topbar-left{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
}
.topbar .topbar-user{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}
.topbar .topbar-user .avatar{
    width:40px !important;
    height:40px !important;
    max-width:40px !important;
    max-height:40px !important;
    border-radius:50%;
    object-fit:cover !important;
    border:2px solid rgba(255,255,255,.85);
    background: rgba(255,255,255,.15);
    flex:0 0 auto;
}
.topbar .topbar-user .welcome{
    font-weight:600;
    font-size:.95em;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.topbar .btn-sair-top{
    background: var(--surface);
    color: var(--cor-principal);
    padding:8px 14px;
    border-radius: var(--raio-borda);
    text-decoration:none;
    font-weight:700;
    letter-spacing:.3px;
    border:1px solid rgba(255,255,255,.7);
}
.topbar .btn-sair-top:hover{ filter:brightness(.95); text-decoration:none; }

.topbar .topbar-right{
    display:flex;
    align-items:center;
    gap:10px;
    flex:0 0 auto;
}

.topbar .btn-top-icon{
    position:relative;
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border-radius: var(--raio-borda);
    border:1px solid rgba(255,255,255,.7);
    background: var(--surface);
    color: var(--cor-principal);
    text-decoration:none;
    font-weight:900;
}
.topbar .btn-top-icon:hover{ filter:brightness(.95); text-decoration:none; }

.topbar .btn-top-icon .notif-badge{
    position:absolute;
    top:-6px;
    right:-6px;
    min-width:20px;
    height:20px;
    padding:0 6px;
    border-radius:999px;
    background:#ef4444;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:900;
    border:2px solid #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
}


.profile-card{
    background: var(--surface);
    border:1px solid var(--cor-borda);
    border-radius: 12px;
    box-shadow: var(--sombras);
    padding:18px;
    margin-bottom:22px;
}
.profile-card .profile-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
}
.profile-card .profile-ident{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
}
.profile-card .profile-ident .avatar-lg{
    width:72px !important;
    height:72px !important;
    max-width:72px !important;
    max-height:72px !important;
    border-radius:50%;
    object-fit:cover !important;
    background:#eef2f7;
    border:1px solid var(--cor-borda);
    flex:0 0 auto;
}
.profile-card .profile-ident .info{
    min-width:0;
}
.profile-card .profile-ident .info h3{
    margin:0;
    font-size:1.15em;
    line-height:1.15;
}
.profile-card .profile-ident .info p{
    margin:4px 0 0;
    opacity:.9;
    word-break:break-word;
}
.profile-card .profile-grid{
    margin-top:14px;
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:12px;
}
.profile-card .profile-item{
    background:#fafbfe;
    border:1px solid var(--cor-borda);
    border-radius:10px;
    padding:10px 12px;
}
.profile-card .profile-item small{
    display:block;
    opacity:.75;
    font-weight:600;
    margin-bottom:2px;
}
.profile-card .profile-item span{
    display:block;
    font-weight:600;
    word-break:break-word;
}
@media (max-width: 820px){
    .topbar .topbar-user .welcome{ white-space:normal; }
    .profile-card .profile-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
    .profile-card .profile-grid{ grid-template-columns: 1fr; }
}

/* ===============================
   STEP20 — Chat em Modal + FAB
   =============================== */
.chat-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}
.chat-modal.is-open{ display:block; }
.chat-modal__overlay{
  position:absolute;
  inset:0;
  /* modal leve (não "mata" a página por trás) */
  background:rgba(15,23,42,.28);
}
.chat-modal__dialog{
  /* Desktop: janela de chat no canto inferior direito (não fica no meio) */
  position:absolute;
  right:16px;
  bottom:86px;
  left:auto;
  top:auto;
  transform:none;
  width:min(440px, calc(100vw - 32px));
  max-height:min(72vh, 640px);
  background: var(--surface);
  border-radius:18px;
  box-shadow:0 30px 80px rgba(2,6,23,.25);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.chat-modal__close{
  position:absolute;
  right:12px;
  top:10px;
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  background: var(--surface);
  cursor:pointer;
  font-size:22px;
  line-height:1;
}
.chat-modal__header{
  padding:14px 16px;
  border-bottom:1px solid rgba(15,23,42,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.chat-modal__who{ display:flex; align-items:center; gap:12px; min-width:0; }
.chat-avatar{
  width:42px;
  height:42px;
  border-radius:14px;
  object-fit:cover;
  border:1px solid rgba(15,23,42,.10);
  background: var(--bg);
}
.chat-modal__whoText{ min-width:0; }
.chat-who-name{ font-weight:800; color: var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-who-course{ font-size:12px; color: var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-status{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background: var(--bg);
  color: var(--muted);
  border:1px solid rgba(15,23,42,.10);
}
.chat-status.is-online{ background:rgba(34,197,94,.12); color:#166534; border-color:rgba(34,197,94,.25); }

.chat-modal__body{ flex:1 1 auto; overflow:hidden; }
.chat-messages{
  height:100%;
  overflow-y:auto;
  padding:14px;
  background: var(--bg);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.chat-loading,.chat-empty{ color: var(--muted); font-size:13px; padding:8px; }
.chat-error{ color:#b91c1c; background:rgba(185,28,28,.08); border:1px solid rgba(185,28,28,.18); padding:10px 12px; border-radius:14px; }

.chat-msg{
  max-width:78%;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.10);
  background: var(--surface);
  color: var(--text);
  align-self:flex-start;
}
.chat-msg.is-self{
  align-self:flex-end;
  background:var(--cor-principal,#6d28d9);
  border-color:transparent;
  color:#ffffff;
}
.chat-msg__text{ white-space:pre-wrap; word-break:break-word; }
.chat-msg__meta{ font-size:11px; opacity:.8; margin-top:6px; }

.chat-modal__form{
  display:flex;
  gap:10px;
  padding:12px;
  border-top:1px solid rgba(15,23,42,.10);
  background: var(--surface);
}
.chat-input{
  flex:1 1 auto;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  padding:0 12px;
  outline:none;
}
.chat-input:focus{ border-color:rgba(109,40,217,.45); box-shadow:0 0 0 4px rgba(109,40,217,.12); }
.chat-send{ height:44px; padding:0 14px; }

/* Botão flutuante (aluno) */
.chat-fab{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:9998;
  width:56px;
  height:56px;
  border-radius:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--cor-principal,#6d28d9);
  color:#fff;
  border:none;
  box-shadow:0 18px 40px rgba(2,6,23,.20);
  cursor:pointer;
}
.chat-fab i{ font-size:18px; }

.chat-fab.is-disabled{ opacity:.55; filter:grayscale(.25); }

/* Badge de aviso (nova mensagem) */
.chat-fab__badge{
  position:absolute;
  right:10px;
  top:10px;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  font-size:11px;
  font-weight:900;
  display:none;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 18px rgba(239,68,68,.35);
}
.chat-fab.has-unread .chat-fab__badge{ display:inline-flex; }

/* Toast "Nova mensagem" */
.chat-toast{
  position:fixed;
  right:16px;
  bottom:80px;
  z-index:9999;
  width:min(360px, calc(100vw - 32px));
  background: var(--surface);
  border:1px solid rgba(15,23,42,.12);
  border-radius:16px;
  box-shadow:0 18px 40px rgba(2,6,23,.18);
  padding:12px 12px 12px 12px;
  display:none;
}
.chat-toast.is-show{ display:block; }
.chat-toast__row{ display:flex; gap:10px; align-items:flex-start; }
.chat-toast__avatar{ width:34px; height:34px; border-radius:12px; object-fit:cover; border:1px solid rgba(15,23,42,.10); background: var(--bg); }
.chat-toast__txt{ min-width:0; }
.chat-toast__title{ font-weight:900; color: var(--text); font-size:13px; line-height:1.2; }
.chat-toast__msg{ color: var(--muted); font-size:12px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-toast__close{
  margin-left:auto;
  border:1px solid rgba(15,23,42,.12);
  background: var(--surface);
  border-radius:12px;
  width:32px;
  height:32px;
  cursor:pointer;
}

/* Toggle online do professor */
.chat-online-toggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  background: var(--surface);
}
.chat-online-toggle input{ width:18px; height:18px; accent-color:var(--cor-principal,#6d28d9); }
.chat-online-toggle .txt{ font-size:12px; color: var(--text); font-weight:700; }

@media (max-width: 600px){
  /* Mobile: modal central e maior */
  .chat-modal__dialog{ left:50%; top:50%; right:auto; bottom:auto; transform:translate(-50%,-50%); width:96vw; max-height:92vh; border-radius:16px; }
  .chat-msg{ max-width:86%; }
}

/* ==============================
   UPGRADE UI — PAINEL DO ESTUDANTE
   (dashboard / perfil / cursos)
   ============================== */

:root{
  --raio-borda: 14px;
  --shadow-card: 0 14px 34px rgba(2,6,23,.08);
  --shadow-soft: 0 6px 18px rgba(2,6,23,.06);
}

/* Layout geral */
.layout{ background:#f6f8fc; }
.main{ background:transparent; }
.main-content{ padding:24px var(--page-pad-x); }

/* Sidebar mais elegante */
.sidebar{
  width:240px;
  background: linear-gradient(180deg,#0b1220 0%, #0f172a 100%);
  border-right:1px solid rgba(255,255,255,.06);
}
.sidebar .logo{ padding:22px 18px; }
.sidebar .logo span{ letter-spacing:.3px; }
.sidebar a{
  padding:12px 18px;
  font-weight:700;
  letter-spacing:.2px;
  border-left:3px solid transparent;
}
.sidebar a:hover{ background: rgba(255,255,255,.06); }
.sidebar a.ativo{
  background: rgba(255,255,255,.08);
  border-left-color: var(--cor-principal);
}

/* Cabeçalho de páginas */
.page-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin: 6px 0 14px;
}
.page-title{
  margin:0;
  font-size:26px;
  font-weight:900;
  letter-spacing:.2px;
  color: var(--text);
}

/* Botões */
.btn{ border-radius:12px; box-shadow:0 10px 22px rgba(2,6,23,.08); }
.btn.btn-secondary{
  background: var(--surface);
  color: var(--text);
  border:1px solid var(--cor-borda);
  box-shadow:none;
}
.btn.btn-secondary:hover{ background: var(--bg); }

/* Cards */
.table-card{
  background: var(--surface);
  border:1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  box-shadow: var(--shadow-card);
  padding:14px;
  overflow:auto;
}

.empty-state{
  padding:22px;
  border:1px dashed var(--cor-borda);
  border-radius: var(--raio-borda);
  background: var(--surface);
}
.empty-state h3{ margin:0 0 6px; font-size:18px; }
.empty-state p{ margin:0 0 12px; color:var(--cor-texto); opacity:.85; }

/* Filtros (Explorar Cursos) */
.filter-bar{
  display:flex;
  gap:12px;
  align-items:end;
  flex-wrap:wrap;
  background: var(--surface);
  border:1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  box-shadow: var(--shadow-soft);
  padding:14px;
}
.filter-bar .filter-item label{ display:block; font-weight:800; font-size:12px; color: var(--muted); margin:0 0 6px; }
.filter-bar input, .filter-bar select{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--cor-borda);
  background: var(--surface);
}
.filter-bar .filter-actions{ display:flex; gap:10px; align-items:center; }

/* Cursos */
.category-block{ margin-top:16px; }
.category-title{
  font-weight:900;
  color: var(--text);
  margin: 18px 2px 10px;
  font-size:16px;
  letter-spacing:.2px;
}
.course-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}
.course-card{
  background: var(--surface);
  border:1px solid var(--cor-borda);
  border-radius: var(--raio-borda);
  overflow:hidden;
  box-shadow: var(--shadow-soft);
  display:flex;
  flex-direction:column;
}
.course-cover{ height:140px; background:#e2e8f0; overflow:hidden; }
.course-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.course-cover--empty{ display:flex; align-items:center; justify-content:center; color: var(--muted); font-weight:900; }
.course-body{ padding:14px; display:flex; flex-direction:column; gap:10px; flex:1; }
.course-title{ margin:0; font-size:16px; font-weight:900; color: var(--text); }
.course-meta{ display:flex; flex-direction:column; gap:4px; font-size:13px; color: var(--muted); }
.course-desc{ margin:0; color: var(--muted); opacity:.88; font-size:13px; line-height:1.45; }
.course-actions{ margin-top:auto; }

/* Paginação */
.pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin: 18px 0 6px;
  flex-wrap:wrap;
}
.pg-btn,.pg-num{
  padding:9px 12px;
  border-radius:12px;
  border:1px solid var(--cor-borda);
  background: var(--surface);
  color: var(--text);
  font-weight:800;
  text-decoration:none;
}
.pg-num.active{
  background: var(--cor-principal);
  color:#fff;
  border-color: var(--cor-principal);
}
.pg-btn.disabled{ opacity:.45; pointer-events:none; }
.pg-ellipsis{ padding:0 6px; color: var(--muted); font-weight:900; }

/* Tabela mais limpa */
.table-card table{ width:100%; border-collapse:collapse; }
.table-card th{
  text-align:left;
  font-weight:900;
  font-size:12px;
  letter-spacing:.35px;
  color: var(--muted);
  padding:10px;
  border-bottom:1px solid var(--cor-borda);
  text-transform:uppercase;
}
.table-card td{ padding:12px 10px; border-bottom:1px solid #eef2f7; vertical-align:middle; }
.table-card tr:last-child td{ border-bottom:0; }

/* Responsivo */
@media (max-width: 980px){
  .course-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px){
  .layout{ flex-direction:column; }
  .sidebar{
    width:100%;
    height:auto;
    position:static;
    display:flex;
    flex-direction:row;
    align-items:center;
    overflow:auto;
  }
  .sidebar .logo{ flex:0 0 auto; padding:14px 14px; }
  .sidebar a{ flex:0 0 auto; white-space:nowrap; border-left:none; border-bottom:3px solid transparent; }
  .sidebar a.ativo{ border-bottom-color: var(--cor-principal); }
  .main{ margin-left:0; }
  .page-title{ font-size:22px; }
  .course-grid{ grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

/* =====================================================
   PORTAL EAD PREMIUM — HOME + CURSO + ESTRELINHAS
   (novos componentes, sem quebrar o resto do sistema)
===================================================== */

/* NAV mais "portal" */
.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(148,163,184,.35);
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
}
.nav .container {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--page-pad-x);
}

.nav-brand span{ font-weight:900; letter-spacing:.2px; color: var(--text); }
.nav-brand img{ height:42px; width:auto; }
.nav-links a{ color: var(--text); background:transparent; border:1px solid transparent; }
.nav-links a:hover{ background:rgba(15,23,42,.06); border-color:rgba(148,163,184,.35); }

/* HOME HERO (650px) */
.home-hero{
  position:relative;
  height: var(--hero-h, 650px);
  min-height: 480px;
  overflow:hidden;
  display:flex;
  align-items:center;
  background: radial-gradient(1200px 600px at 20% 10%, rgba(59,130,246,.22), transparent 55%),
              radial-gradient(1200px 600px at 80% 0%, rgba(14,165,233,.18), transparent 55%),
              linear-gradient(135deg, #0f172a 0%, #111827 50%, #0b1220 100%);
}
.home-hero__bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.03);
  filter: saturate(1.05) contrast(1.04) brightness(.92);
}
.home-hero__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(2,6,23,.78) 0%, rgba(2,6,23,.48) 55%, rgba(2,6,23,.20) 100%),
    radial-gradient(900px 400px at 20% 20%, rgba(59,130,246,.20), transparent 60%),
    radial-gradient(900px 400px at 70% 0%, rgba(14,165,233,.14), transparent 60%);
}
.home-hero__content{ position:relative; z-index:2; }
.home-hero__kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.86);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-weight:900;
  font-size:12px;
}
.home-hero__title{
  margin:14px 0 10px;
  color:#fff;
  font-weight:900;
  letter-spacing:-.02em;
  font-size: clamp(30px, 4vw, 52px);
  max-width: 820px;
  line-height:1.06;
}
.home-hero__desc{
  margin:0 0 18px;
  color: rgba(255,255,255,.82);
  font-size: clamp(15px, 1.6vw, 18px);
  max-width: 720px;
}
.home-hero__actions{ display:flex; gap:12px; flex-wrap:wrap; }

.btn-cta{
  background: var(--cor-principal);
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 34px rgba(2,6,23,.28);
}
.btn-cta:hover{ filter: brightness(1.05); transform: translateY(-1px); }

.btn-cta:hover{ transform: translateY(-2px); filter:saturate(1.05); }
.btn-secondary{
  background: rgba(255,255,255,.12);
  color:#fff;
  border-color: rgba(255,255,255,.22);
}
.btn-secondary:hover{ background: rgba(255,255,255,.18); transform: translateY(-2px); }

/* Cabeçalho de seção */
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; }
.section-head h2{ margin:0; font-size:22px; }
.section-sub{ color: var(--muted); font-weight:700; }

/* Estrelas (visual pro) */
.stars{
  position:relative;
  display:inline-block;
  font-size: 16px;
  letter-spacing: 2px;
  line-height:1;
}
.stars-bg{ color: rgba(148,163,184,.65); }
.stars-fill{
  position:absolute;
  top:0; left:0;
  overflow:hidden;
  white-space:nowrap;
  color: #f59e0b;
}
.rating-text{ color: var(--muted); font-weight:800; font-size:13px; }
.rating-empty{ color: var(--muted); font-weight:800; font-size:13px; }

/* Cards de cursos (HOME) */
.course-grid--public{
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.course-grid--public .course-card{ min-height: 100%; }
.course-grid--public .course-desc{ margin-top:10px; }
.course-grid--public .course-meta{ margin-top:10px; }
.course-grid--public .course-rating{ display:flex; align-items:center; gap:10px; margin-top:8px; }
.course-grid--public .course-cover{ height: 170px; }

@media (max-width: 1100px){
  .course-grid--public{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px){
  .course-grid--public{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-head{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 520px){
  .home-hero{ min-height: 620px; }
  .course-grid--public{ grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

/* PÁGINA DO CURSO */
.course-hero{
  position:relative;
  padding: 52px 0;
  background-size:cover;
  background-position:center;
  background-image: radial-gradient(1200px 600px at 20% 10%, rgba(59,130,246,.22), transparent 55%),
                    linear-gradient(135deg, #0f172a 0%, #0b1220 100%);
}
.course-hero__overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(2,6,23,.78) 0%, rgba(2,6,23,.52) 55%, rgba(2,6,23,.30) 100%);
}
.course-hero__content{ position:relative; z-index:2; }
.course-hero__kicker{ color:rgba(255,255,255,.82); text-transform:uppercase; letter-spacing:.25em; font-weight:900; font-size:12px; }
.course-hero__title{ margin:10px 0 12px; color:#fff; font-weight:900; letter-spacing:-.02em; font-size: clamp(26px, 3.6vw, 44px); line-height:1.1; max-width: 900px; }
.course-hero__meta{ display:flex; flex-wrap:wrap; gap:14px; color:rgba(255,255,255,.82); font-weight:700; }
.course-hero__meta b{ color:#fff; }
.course-hero__rating{ display:flex; align-items:center; gap:10px; margin-top:12px; }

.course-page{ padding: 28px 0 50px; }
.course-layout{ display:grid; grid-template-columns: 1.6fr .9fr; gap:16px; align-items:start; }
.course-main .card{ padding:16px; }
.course-side .card{ padding:16px; position:sticky; top:92px; }
.course-side .card + .card{ position:static; }
.course-side__price{ font-size:28px; font-weight:900; color: var(--text); }
.section-title{ margin:0 0 10px; font-size:18px; font-weight:900; color: var(--text); }
.richtext{ color: var(--muted); }
.richtext p{ margin:0 0 10px; }

.module-item{
  border:1px solid var(--cor-borda);
  border-radius: 14px;
  padding: 0;
  margin-top: 10px;
  overflow:hidden;
  background: var(--surface);
}
.module-item summary{
  cursor:pointer;
  list-style:none;
  padding: 14px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-weight:900;
  color: var(--text);
  background: linear-gradient(180deg, #fff, #f8fafc);
}
.module-item summary::-webkit-details-marker{ display:none; }
.module-count{ color: var(--muted); font-weight:900; font-size:12px; }
.lesson-list{ margin:0; padding: 10px 18px 16px; color: var(--muted); }
.lesson-list li{ padding:6px 0; border-bottom:1px dashed rgba(148,163,184,.4); }
.lesson-list li:last-child{ border-bottom:0; }

.notice{
  padding:12px 14px;
  border-radius: 12px;
  border:1px solid var(--cor-borda);
  margin-bottom: 14px;
  font-weight:800;
}
.notice--success{ background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.25); color:#14532d; }
.notice--warn{ background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.25); color:#7c2d12; }

/* Formulário de avaliação (estrelas clicáveis) */
.rating-form textarea{ width:100%; }
.star-input{
  display:flex;
  flex-direction:row-reverse;
  justify-content:flex-end;
  gap:6px;
  margin: 2px 0 10px;
}
.star-input input{ display:none; }
.star-input label{
  cursor:pointer;
  font-size:24px;
  line-height:1;
  color: rgba(148,163,184,.75);
  transition: transform .12s ease, color .12s ease;
}
.star-input label:hover,
.star-input label:hover ~ label{ color:#f59e0b; transform: translateY(-1px); }
.star-input input:checked ~ label{ color:#f59e0b; }

@media (max-width: 980px){
  .course-layout{ grid-template-columns: 1fr; }
  .course-side .card{ position:static; top:auto; }
}


/* HERO SLIDER (HOME) */
.hero-slider{
  position:relative;
  height: var(--hero-h, 650px);
  min-height: 480px;
  overflow:hidden;
}
.hero-slider__viewport{
  position:relative;
  z-index:1;
  height:100%;
  overflow:hidden;
}
.hero-slider__track{
  display:flex;
  height:100%;
  transform: translate3d(0,0,0);
  transition: transform .95s cubic-bezier(.2,.9,.2,1);
  will-change: transform;
}

/* Camadas/Click: garante setas e dots sempre clicáveis */
.hero-slider__nav{ z-index:6; }
.hero-slider__dots{ z-index:7; }

/* Efeito mais profissional: fade/slide do conteúdo + zoom sutil do fundo */
.hero-slider .hero-slide .home-hero__content{
  opacity:0;
  transform: translate3d(0,14px,0);
  transition: opacity .55s ease .12s, transform .65s cubic-bezier(.2,.9,.2,1) .12s;
}
.hero-slider .hero-slide.is-active .home-hero__content{
  opacity:1;
  transform: translate3d(0,0,0);
}
.hero-slider .home-hero__bg{
  transform: scale(1.10);
  transition: transform 1.25s cubic-bezier(.2,.9,.2,1), filter .6s ease;
}
.hero-slider .hero-slide.is-active .home-hero__bg{
  transform: scale(1.03);
}
.hero-slider .home-hero.hero-slide{
  flex: 0 0 100%;
  min-width: 100%;
  height: 100%;
}

/* Setas (navegação) */
.hero-slider__nav{
  --tx:0px;
  position:absolute;
  top:50%;
  transform: translate3d(var(--tx), -50%, 0);
  width:48px;
  height:48px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(2,6,23,.35);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .25s ease, border-color .25s ease, transform .25s ease, opacity .25s ease;
}
.hero-slider__nav:hover{
  background: rgba(2,6,23,.55);
  border-color: rgba(255,255,255,.35);
}
.hero-slider__nav:active{ transform: translate3d(var(--tx), -50%, 0) scale(.96); }
.hero-slider__nav--prev{ left:16px; }
.hero-slider__nav--next{ right:16px; }
.hero-slider__nav--prev:hover{ --tx:-6px; }
.hero-slider__nav--next:hover{ --tx:6px; }

@media (max-width: 640px){
  .hero-slider__nav{ width:44px; height:44px; }
  .hero-slider__nav--prev{ left:10px; }
  .hero-slider__nav--next{ right:10px; }
}

/* Paginação */
.hero-slider__dots{
  position:absolute;
  left:50%;
  bottom:16px;
  transform: translateX(-50%);
  display:flex;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(2,6,23,.22);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 5;
}
.hero-slider__dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:none;
  background: rgba(255,255,255,.35);
  cursor:pointer;
  transition: width .22s ease, background .22s ease, transform .22s ease, opacity .22s ease;
  opacity:.9;
}
.hero-slider__dot:hover{ opacity:1; transform: scale(1.08); }
.hero-slider__dot.is-active{
  width:24px;
  background: rgba(255,255,255,.95);
  opacity:1;
}

/* ==============================
   PRO LAYOUT OVERRIDES (2026-01-30)
   Baseado no Painel do Estudante
   ============================== */

:root{
  --bg-soft: #f6f8fc;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e5e7eb;
  --shadow-pro: 0 14px 40px rgba(2,6,23,.08);
}

/* Fundo geral mais suave */
body{ background: var(--bg-soft); }

/* Conteúdo centralizado como no painel do aluno */
.main-content{ max-width: var(--page-width); margin: 0 auto; }

/* Sidebar: mais premium */
.sidebar{
  background: linear-gradient(180deg, rgba(17,24,39,1) 0%, rgba(15,23,42,1) 100%);
  border-right: 1px solid rgba(255,255,255,.08);
}
.sidebar a{
  border-radius: 12px;
  margin: 4px 12px;
  padding: 12px 14px;
}
.sidebar a.ativo{
  background: rgba(255,255,255,.10);
  color:#fff;
}
.sidebar a:hover{
  background: rgba(255,255,255,.08);
}

/* Topbar estilo welcome */
.topbar.topbar--welcome{
    max-width: var(--page-width);
  width: min(100%, var(--page-width));
background: var(--surface);
  color: var(--ink);
  border-radius: 18px;
  margin: 16px auto 0;
  padding: 14px 18px;
  box-shadow: var(--shadow-pro);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.topbar-user{ display:flex; align-items:center; gap:12px; }
.topbar img.avatar{
  width:42px; height:42px; border-radius:999px;
  object-fit:cover;
  border:1px solid var(--line);
}
.welcome{ font-size:14px; color: var(--ink); }
.welcome b{ font-weight:800; }
.btn-sair-top{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  padding: 10px 16px;
  text-decoration:none;
  background: var(--cor-principal);
  color:#fff;
  font-weight:700;
  box-shadow: 0 10px 25px rgba(0,0,0,.12);
}
.btn-sair-top:hover{ filter: brightness(.95); }

/* Cabeçalho da página */
.page-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin: 18px 0 14px;
}
.page-title{
  margin:0;
  font-size: 22px;
  letter-spacing: -.2px;
}

/* Cards e tabelas */
.table-card, .form-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow-pro);
}
.table-card table{ box-shadow:none !important; border-radius: 12px; overflow:hidden; }
.table-card thead th{ background: var(--bg); }
.table-card tbody tr:hover{ background: var(--bg); }

/* Botões mais consistentes */
.btn{
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
}
.btn-secondary{
  background: rgba(15,23,42,.06);
  color: var(--ink);
  border: 1px solid rgba(15,23,42,.10);
}
.btn-secondary:hover{ background: rgba(15,23,42,.09); }

/* Avisos */
.notice{
  border-radius: 14px;
  padding: 12px 14px;
  border:1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 8px 20px rgba(2,6,23,.06);
}
.notice--success{ border-color: rgba(34,197,94,.25); background: rgba(34,197,94,.08); }
.notice--error{ border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.08); }

/* Mobile refinado */
@media (max-width: 900px){
  .topbar.topbar--welcome{   max-width: var(--page-width);
  width: min(100%, var(--page-width));
margin: 12px auto 0; }
  .main-content{ padding: 16px var(--page-pad-x) !important; }
}

/* Badge */
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.10);
  color: var(--ink);
  font-weight: 800;
  font-size: 12px;
}
.page-actions{ display:flex; align-items:center; gap:10px; }



/* Cabeçalho de cards */
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.card-title{ margin:0; font-size:1.05rem; font-weight:800; color: var(--ink); }
/* Largura padronizada (1239px): conteúdo ocupa 100% do container
   (NÃO forçar filhos diretos de .container, pois quebra NAV/headers) */
.main-content,
.container{ width:100%; }

.main-content > *{ width:100%; }

/* Cards/tabelas/formulários sempre em 100% do container */
.form-card,.table-card,.card,.panel-card,.chat-box,.cert-container,
.page-body,.page-content,.content,.content-inner{ width:100%; max-width:none; }

/* Evita caixas internas limitando a largura */
.form-card,.table-card,.card,.panel-card,.chat-box,.cert-container{ max-width:none; }


/* ===============================
   STEP2 — ICONES + FORM GRID + NAV
================================= */


/* NAV (HOME/LOGIN/REGISTRO) – alinhamento + botões */
.nav .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px var(--page-pad-x);
}
.nav-brand{ display:flex; align-items:center; gap:12px; }
.nav-links{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
  flex:1;
  flex-wrap:wrap;
}
.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-end;
}
.nav-actions .btn-cta{
  background: var(--cor-principal);
  color: var(--cor-texto-invertido);
  border: none;
  box-shadow: 0 10px 25px rgba(0,0,0,.12);
}
.nav-actions .btn-cta:hover{ filter: brightness(.95); }

/* Cartão do usuário logado no topo (substitui Sou Estudante/Professor) */
.nav-user{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0;
  border-radius:0;
  background: transparent;
  border:none;
}
.nav-user-avatar{
  width:36px;
  height:36px;
  border-radius:999px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background: transparent;
  border:1px solid rgba(148,163,184,.45);
}
.nav-user-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.nav-user-initial{ font-weight:800; color: var(--text); }
.nav-user-meta{ display:flex; flex-direction:row; align-items:center; gap:12px; }
.nav-user-hello{ font-weight:800; line-height:1; white-space:nowrap; color: var(--text); font-size:13px; }
.nav-user-buttons{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.nav-user-buttons .btn{ white-space:nowrap; padding:8px 10px; border-radius:14px; }
.btn-logout{
  background: transparent;
  color: var(--text);
  border:1px solid rgba(148,163,184,.6);
  box-shadow:none;
}
.btn-logout:hover{ background: rgba(15,23,42,.06); }
.nav-links a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:14px;
  white-space:nowrap;
}
.nav-links a.btn{
  padding:9px 12px;
  border-radius:14px;
}
.btn-nav{
  background: rgba(15,23,42,.06);
  color: var(--text);
  border:1px solid rgba(148,163,184,.35);
}
.btn-nav:hover{ background: rgba(15,23,42,.10); }
@media (max-width: 640px){
  .nav .container{ flex-wrap:wrap; }
  .nav-user-meta{ flex-direction:column; align-items:flex-start; gap:6px; }
  .nav-actions{ width:100%; justify-content:flex-start; flex-wrap:wrap; }
  .nav-links{ width:100%; justify-content:flex-start; padding-bottom:6px; flex-wrap:wrap; }
}

/* SIDEBAR – ícones */
.sidebar a{ display:flex; align-items:center; gap:10px; }
.sidebar a .menu-ico{ width:18px; text-align:center; opacity:.9; }
.sidebar a span{ flex:1; }
.sidebar a.ativo .menu-ico{ opacity:1; }
.btn-sair-top i{ margin-right:8px; }

/* FORM – campos lado a lado (2~3 por linha) */
.form-card form,
form.form-card{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  align-items:end;
}
.form-card form > label,
.form-card form .form-group,
form.form-card > label,
form.form-card .form-group{
  margin:0;
}
.form-card label{ margin-bottom:0; }

/* Wrappers de grupos de campos (evita coluna vazia; mantém 3 por linha) */
.form-card form .aluno-only,
.form-card form .form-fields,
form.form-card .aluno-only,
form.form-card .form-fields{
  display: contents;
}

.form-card input[type="submit"],
.form-card form button,
.form-card form .form-actions,
.form-card form .form-submit,
form.form-card input[type="submit"],
form.form-card button,
form.form-card .form-actions,
form.form-card .form-submit{
  grid-column:1 / -1;
}

/* Textareas, uploads e selects múltiplos ficam full-width */
.form-card form > label:has(textarea),
.form-card form > label:has(select[multiple]),
.form-card form .form-group:has(textarea),
.form-card form .form-group:has(select[multiple]),
form.form-card > label:has(textarea),
form.form-card > label:has(select[multiple]),
form.form-card .form-group:has(textarea),
form.form-card .form-group:has(select[multiple]){
  grid-column:1 / -1;
}

@media (max-width: 980px){
  .form-card form,
  form.form-card{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .form-card form,
  form.form-card{ grid-template-columns: 1fr; }
}

/* FORM – utilitários */
.grid-full{ grid-column: 1 / -1; }

/* Vínculo Comunitário e Liderança Social (painéis + público) */
.community-card{
  border-top: 1px dashed #dbe6f4;
  padding-top: 12px;
}
.community-card__title{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
  font-weight: 900;
  color: var(--text);
  margin: 0 0 10px;
}
.community-card__title i{
  color: var(--cor-principal);
}
.field-label{
  display:block;
  font-size: 12px;
  font-weight: 800;
  color:#344255;
  margin: 0 0 8px;
}
.field-hint{
  display:block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.25;
}

/* Checklist com divisórias (elegante) */
.check-list{ display:flex; flex-direction: column; gap: 0; }
.check-item{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  margin:0;
  user-select:none;
}
.check-item input{ margin-top: 3px; width:auto; }
.check-item span{ font-weight: 800; color: var(--text); }
.check-list--divided .check-item{
  border: 0;
  border-bottom: 1px solid #dbe6f4;
  border-radius: 0;
  padding: 10px 0;
  background: transparent;
  cursor:pointer;
}
.check-list--divided .check-item:hover{ background: rgba(15,23,42,0.03); }
.check-list--divided .check-item:last-child{ border-bottom: 1px solid #dbe6f4; }
.field-group.is-invalid .check-list--divided .check-item{
  border-bottom-color:#ef4444 !important;
  background: rgba(239,68,68,0.06);
}

/* BUILDER DE CURSO (MÓDULOS/AULAS) — 3 POR LINHA */
.form-card form #modulos{ grid-column:1 / -1; }
.modulo-campo, .modulo-block{
  grid-column:1 / -1;
  border:1px solid var(--cor-borda);
  background: var(--surface);
  border-radius: var(--raio-borda);
  padding:16px;
  box-shadow: var(--sombras);
  margin: 10px 0;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  align-items:end;
}
.modulo-campo > h4,
.modulo-block > h3,
.modulo-campo > .aulas-container,
.modulo-block > .aulas{
  grid-column:1 / -1;
  margin:0 0 8px 0;
}
.modulo-campo > button,
.modulo-block > button{
  grid-column:1 / -1;
  width:100%;
}

.aula-item, .aula-group{
  grid-column:1 / -1;
  border:1px dashed var(--cor-borda);
  border-radius: var(--raio-borda);
  padding:12px;
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  align-items:end;
  background: var(--surface);
}
.aula-item > h5{ grid-column:1 / -1; margin:0 0 6px 0; }
.aula-group input,
.aula-group textarea,
.aula-group select{ width:100%; }

@media (max-width: 980px){
  .modulo-campo, .modulo-block{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .aula-item, .aula-group{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .modulo-campo, .modulo-block{ grid-template-columns: 1fr; }
  .aula-item, .aula-group{ grid-template-columns: 1fr; }
}

/* Ícones dentro dos campos (injetado via JS) */
.fi{ position:relative; display:block; }
.fi .fi-ico{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  color: var(--muted);
  font-size:14px;
  pointer-events:none;
  opacity:.95;
}
.fi .fi-field{ padding-left:40px !important; }
.fi textarea.fi-field{ padding-left:40px !important; min-height:110px; }
.fi select.fi-field{ padding-left:40px !important; }

/* Deixa os inputs com altura consistente */
.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="password"],
.form-card input[type="number"],
.form-card input[type="date"],
.form-card input[type="file"],
.form-card select,
form.form-card input[type="text"],
form.form-card input[type="email"],
form.form-card input[type="password"],
form.form-card input[type="number"],
form.form-card input[type="date"],
form.form-card input[type="file"],
form.form-card select{
  min-height:44px;
}

/* ===============================
   STEP6 — MENUS HAMBURGUER (MOBILE)
   - NAV público em formato hamburguer
   - Sidebar dos painéis em off-canvas
================================= */

/* BOTÃO HAMBURGUER (NAV pública) */
.nav-toggle{
  display:none;
  border:1px solid rgba(148,163,184,.35);
  background: rgba(15,23,42,.06);
  color: var(--text);
  padding:10px 12px;
  border-radius:14px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  line-height:1;
}
.nav-toggle i{ font-size:16px; }

/* BOTÃO HAMBURGUER (painéis) */
.sidebar-toggle{
  display:none;
  width:44px;
  height:44px;
  border-radius:14px;
  /* Topbar é clara (branca), então o botão precisa ser visível no mobile */
  border:1px solid rgba(15,23,42,.14);
  background: rgba(15,23,42,.04);
  color: var(--ink);
  box-shadow: 0 6px 16px rgba(2,6,23,.08);
  flex: 0 0 auto;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  line-height:1;
}
.sidebar-toggle:hover{ background: rgba(15,23,42,.07); }

/* X dentro do menu lateral */
.sidebar-close{
  display:none;
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: var(--cor-texto-invertido);
  align-items:center;
  justify-content:center;
  cursor:pointer;
  line-height:1;
}
.sidebar-close:hover{ background: rgba(255,255,255,.16); }

/* Backdrop do sidebar */
.sidebar-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(2,6,23,.55);
  z-index:940;
}

/* trava scroll quando menu aberto */
html.sidebar-open,
body.sidebar-open{ overflow:hidden; }

/* MOBILE */
@media (max-width: 900px){

  /* NAV pública vira hamburguer */
  .nav .container{ flex-wrap:wrap; }
  /* Progressive enhancement: só vira hamburguer quando JS está ativo */
  .js .nav-toggle{ display:inline-flex; margin-left:auto; }

  .js .nav-links,
  .js .nav-actions{ display:none; width:100%; }

  .js header.nav.is-open .nav-links,
  .js header.nav.is-open .nav-actions{ display:flex; }

  .nav-links{
    order:3;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    padding:10px 0 6px;
    flex: 0 0 100%;
  }
  .nav-links a{
    width:100%;
    justify-content:flex-start;
    margin-left:0;
  }
  .nav-actions{
    order:4;
    justify-content:stretch;
    gap:10px;
    padding:8px 0 12px;
  }
  .nav-actions a.btn{ flex:1; justify-content:center; }

  /* Sidebar dos painéis vira off-canvas */
  /* Sidebar off-canvas só com JS ativo; sem JS, mantém fallback (menus visíveis) */
  .js .sidebar-toggle{ display:inline-flex; }
  .sidebar-backdrop{ display:none; }

  html.js.sidebar-open .sidebar-backdrop{ display:block; }

  .js .sidebar{
    position:fixed;
    left:0;
    top:0;
    height:100vh;
    width:280px;
    max-width:86vw;
    transform: translateX(-105%);
    transition: transform .25s ease;
    z-index:950;
    flex-direction:column;
    /* Em telas bem pequenas existia uma regra antiga que deixava align-items:center.
       Aqui garantimos alinhamento à esquerda (stretch) pra NÃO centralizar os itens. */
    align-items:stretch;
    overflow-y:auto;
    overflow-x:hidden;
  }
  html.js.sidebar-open .sidebar{ transform: translateX(0); }

  /* Links ocupam toda a largura do menu (não ficam "miúdos" e centralizados) */
  .js .sidebar a{ width:100%; justify-content:flex-start; text-align:left; }

  /* desfaz o "menu horizontal" antigo */
  .js .layout{ flex-direction:row !important; }
  .sidebar a{
    flex: initial !important;
    white-space:normal !important;
    border-right:none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    text-align:left !important;
    justify-content:flex-start !important;
    width:100% !important;
  }

  .sidebar .logo{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    position:sticky;
    top:0;
    background: var(--cor-sidebar);
    z-index:1;
  }
  .sidebar-close{ display:inline-flex; }

  .js .main{ margin-left:0 !important; width:100%; }
  /* topbar-left precisa comportar botão + usuário/título */
  .topbar-left{ display:flex; align-items:center; gap:12px; min-width:0; }
  .topbar-left h1{ margin:0; font-size:1.2em; }
}

/* Ajuste extra para telas bem pequenas */
@media (max-width: 420px){
  .nav-actions{ flex-direction:column; }
  .nav-actions a.btn{ width:100%; }
}

/* ===============================
   STEP10 — AJUSTES MENU MOBILE (PAINEIS)
   - Itens do menu alinhados à esquerda
   - Logomarca centralizada no topo do menu
================================= */
.sidebar a{ justify-content:flex-start; text-align:left; }
.sidebar a span{ text-align:left; }

.sidebar .logo{
  justify-content:center;
  text-align:center;
  position:relative;
}
.sidebar .logo span{ margin-left:0; }

/* No mobile, logo central e botão fechar no canto direito (sem empurrar o centro) */
@media (max-width: 900px){
  .sidebar .logo{ justify-content:center !important; }
  .sidebar-close{
    position:absolute;
    right:12px;
    top:50%;
    transform: translateY(-50%);
  }
  .sidebar .logo img,
  .sidebar .logo span{ margin:0 auto; }
}

/* ===============================
   STEP12 — MOBILE PRO (SEM MEXER NO DESKTOP)
   Objetivo: tornar TODAS as páginas 100% utilizáveis no mobile
   sem alterar o visual do desktop.
================================= */

@media (max-width: 900px){
  /* Espaçamento e leitura */
  main{ padding: 16px var(--page-pad-x); }
  .main-content{ padding: 16px var(--page-pad-x); }

  /* Evita zoom automático em iOS (inputs abaixo de 16px) */
  form input[type="text"],
  form input[type="email"],
  form input[type="password"],
  form input[type="number"],
  form input[type="date"],
  form input[type="file"],
  form select,
  form textarea{
    font-size:16px;
  }

  /* Cabeçalho de página (título + ações) empilha */
  .page-header{ flex-direction: column; align-items: flex-start; }
  .page-title{ font-size: 20px; }
  .page-header .btn,
  .page-header .btn-secondary,
  .page-header a.btn,
  .page-header button.btn{ width:100%; justify-content:center; }

  /* Topbar: reduz altura e melhora texto longo (boas-vindas) */
  .topbar{ padding: 12px 14px; gap:12px; }
  .topbar .btn-sair-top{ padding: 10px 12px; font-size: .9em; }
  .topbar-user{ min-width:0; }
  .topbar .topbar-user .welcome{
    font-size:.82em;
    line-height:1.15;
    white-space:normal;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }

  /* Cards/telas: mantém tudo com boa área de toque */
  .card,
  .table-card,
  .form-card,
  .profile-card,
  .panel-card,
  .chat-box,
  .cert-container{
    padding:16px;
    border-radius:16px;
  }
  .form-card{ margin: 18px auto; }

  /* Botões maiores no mobile */
  .btn,
  button.btn,
  input[type="submit"].btn{
    min-height:44px;
    padding:10px 14px;
  }

  /* Grids/dashboards: 1 coluna */
  .dashboard{ flex-direction: column; }
  .card{ flex: 1 1 100%; min-width: 0; }
  .stats-grid,
  .kpi-grid,
  .grid,
  .course-grid,
  .course-grid--public,
  .profile-card .profile-grid{
    grid-template-columns: 1fr !important;
  }
  .lista-cursos{ padding:0; }

  /* Imagens e vídeos não estouram */
  img, video{ max-width:100%; height:auto; }

  /* Filtros e ações (ex.: Explorar Cursos) — tudo em coluna */
  .filter-bar{ flex-direction:column; align-items:stretch; }
  .filter-bar .filter-item{ width:100%; }
  .filter-bar .filter-actions{ width:100%; flex-direction:column; align-items:stretch; }
  .filter-bar .filter-actions .btn,
  .filter-bar .filter-actions button,
  .filter-bar .filter-actions a.btn{ width:100%; justify-content:center; }

  /* Paginação com botões confortáveis */
  .pagination{ gap:8px; }
  .pg-btn,.pg-num{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }

  /* Tabelas: rolagem horizontal segura (sem quebrar layout) */
  .table-card{ overflow-x:auto; -webkit-overflow-scrolling: touch; }
  .table-card table{ min-width: 680px; display: table; }
  table th, table td{ white-space: nowrap; font-size: 14px; padding: 10px 12px; }

  /* Chat: lista de mensagens ocupa mais altura útil */
  .mensagens{ max-height: 60vh !important; }
  form textarea{ height: 110px !important; }

  /* Certificado / validação: evita cortes */
  .cert-container{ max-width: 100% !important; }

  /* Evita estouro por strings longas (emails, links, tokens) */
  .card, .table-card, .form-card, .panel-card, .cert-container{
    overflow-wrap:anywhere;
    word-break:break-word;
  }
}

@media (max-width: 520px){
  .page-title{ font-size: 18px; }
  .topbar .topbar-user .welcome{ -webkit-line-clamp:3; }
  .nav-brand img{ max-height:44px; }
}

/* ===============================
   Upload de vídeo com progresso
   (Passo 2 – Criar curso)
   =============================== */
.upload-progress{ margin-top:10px; }
.upload-track{
  height:10px;
  background:#e5e7eb;
  border-radius:999px;
  overflow:hidden;
}
.upload-fill{
  height:100%;
  width:0%;
  background:#22c55e;
  transition:width .15s linear;
}
.upload-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  margin-top:6px;
  color:var(--cor-texto-sec, #64748b);
}
.upload-meta .upload-status{ white-space:nowrap; }

.btn-success{ background:#22c55e; color:#fff; }
.btn-success:hover{ filter:brightness(.95); }

/* estado desabilitado (não altera desktop, só melhora feedback) */
.btn[disabled],
button.btn[disabled],
input.btn[disabled]{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}


/* ===============================
   Video preview box (cadastro/edição)
   =============================== */
.video-box{ margin-top:10px; max-width:520px; }
.video-embed{
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--cor-borda, #e5e7eb);
}
.video-embed iframe,
.video-embed video{
  width:100%;
  height:100%;
  display:block;
}
.video-embed video{ background:#000; }



/* ===============================
   Aprender (aluno/aprender.php)
   =============================== */

.learn-wrap{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:16px;
  align-items:start;
}
.learn-main, .learn-side{ min-width:0; }
.learn-card{ flex: initial; }
.learn-main > .learn-card + .learn-card{ margin-top:16px; }
.learn-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.learn-progress-meta{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.learn-alert{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--cor-borda, #e5e7eb);
  background: var(--bg);
}
.learn-alert--success{
  background: rgba(34,197,94,.08);
  border-color: rgba(34,197,94,.22);
}
.learn-actions{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.watch-gate{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
}
.video-box-lg{
  max-width:760px;
  margin-inline:auto;
}
.module-acc{
  border:1px solid var(--cor-borda, #e5e7eb);
  border-radius:16px;
  overflow:hidden;
  margin-top:12px;
  background: var(--surface);
}
.module-acc summary{
  cursor:pointer;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-weight:700;
}
.module-acc summary::-webkit-details-marker{ display:none; }
.module-acc[open] summary{
  border-bottom:1px solid var(--cor-borda, #e5e7eb);
  background: var(--bg);
}
.module-name{ min-width:0; }
.module-meta{
  font-size:12px;
  color: var(--cor-texto-sec, #64748b);
  font-weight:600;
  white-space:nowrap;
}
.lesson-list{
  list-style:none;
  padding:12px 14px;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.lesson-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--cor-borda, #e5e7eb);
  border-radius:14px;
  background: var(--surface);
}
.lesson-row.is-active{
  box-shadow: 0 0 0 2px rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.10);
}
.lesson-meta{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex: 1 1 auto;
}
.lesson-meta i{ color: var(--cor-principal); opacity:.9; }
.lesson-name{
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lesson-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--cor-borda, #e5e7eb);
  color: var(--cor-texto-sec, #64748b);
  background: var(--surface);
  white-space:nowrap;
}
.lesson-row.is-done{
  background: rgba(34,197,94,.06);
  border-color: rgba(34,197,94,.16);
}
.lesson-row.is-done .lesson-name{
  text-decoration: line-through;
  color:#16a34a;
}
.lesson-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Evita quebra de texto em botões/OK no mobile */
.lesson-actions{ flex: 0 0 auto; }
.lesson-actions .btn,
.lesson-actions .btn-sm,
.lesson-actions .muted{
  white-space:nowrap;
  overflow-wrap:normal;
  word-break:normal;
}
.lesson-actions .btn-sm{ min-width:92px; justify-content:center; }
.lesson-actions .muted{ min-width:92px; text-align:center; font-weight:700; }
.btn-sm{
  padding:8px 12px;
  font-size:.85em;
  margin-top:0;
}
.lesson-actions .btn{ margin-top:0; }

.instructor-meta{
  display:flex;
  align-items:center;
  gap:12px;
}
.instructor-avatar{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid var(--cor-borda, #e5e7eb);
  background: var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--cor-principal);
}
.instructor-name{ font-weight:700; }

@media (max-width: 980px){
  .learn-wrap{ grid-template-columns:1fr; }
  .learn-actions{ justify-content:flex-start; }
  .watch-gate{ justify-content:flex-start; }
  .video-box-lg{ max-width:100%; }
}


/* ===============================
   Aprender — Polimento (mobile/desktop)
   =============================== */
@media (max-width: 600px){
  .topbar.topbar--welcome{
    padding:10px 12px;
    border-radius:16px;
    align-items:flex-start;
  }
  .topbar-left{
    display:flex;
    align-items:flex-start;
    gap:10px;
    min-width:0;
    flex:1 1 auto;
  }
  .topbar-user{ min-width:0; }
  .welcome{
    font-size:12px;
    line-height:1.2;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .btn-sair-top{ padding:8px 12px; font-size:12px; box-shadow:none; }
  .sidebar-toggle{ width:42px; height:42px; border-radius:14px; }
}

@media (max-width: 520px){
  .learn-wrap{ gap:14px; }
  .learn-card{ padding:14px; border-radius:16px; }
  .card-title{ font-size:1rem; }
  .module-acc{ border-radius:16px; }
  .module-acc summary{ padding:10px 12px; font-size:14px; }
  .lesson-list{ padding:10px 12px; gap:8px; }
  .lesson-row{ padding:9px 10px; gap:10px; border-radius:14px; }
  .lesson-name{ font-size:13px; }
  .lesson-badge{ font-size:11px; padding:3px 8px; }
  .lesson-actions .btn-sm{ min-width:78px; padding:7px 10px; font-size:12px; }
  .lesson-actions .muted{ min-width:78px; font-size:12px; }
  .learn-head .muted{ font-size:12px; }
  .badge{ padding:6px 10px; }
  .video-box-lg{ max-width:100%; }
  /* Evita botão quebrar em 2 linhas (somente na página de aprender) */
  .learn-wrap .btn{ white-space:nowrap; }
}



/* =====================================================
   PRO POLISH 20260201 — Padronização final (override seguro)
   ===================================================== */
:root{
  --shadow-soft: 0 10px 30px rgba(2,6,23,.06);
  --shadow-md: 0 18px 45px rgba(2,6,23,.10);
  --shadow-lg: 0 28px 80px rgba(2,6,23,.18);
}

/* Cards e painéis com acabamento mais premium */
.card, .panel-card, .form-card, .table-card{
  border:1px solid rgba(148,163,184,.35);
  box-shadow: var(--shadow-soft);
}
.card:hover, .panel-card:hover{
  box-shadow: var(--shadow-md);
  transition: box-shadow .18s ease, transform .18s ease;
}

/* Botões: consistência visual */
.btn{
  border-radius: 14px;
  font-weight: 800;
  letter-spacing:.2px;
  transition: transform .12s ease, filter .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn:active{ transform: translateY(1px); }
.btn.btn-primary, .btn.primary, .btn--primary{
  box-shadow: 0 12px 26px rgba(2,6,23,.10);
}

/* Curso: cards com altura padronizada e textos com clamp */
.course-card{ 
  border:1px solid rgba(148,163,184,.35);
  box-shadow: var(--shadow-soft);
  transition: transform .16s ease, box-shadow .18s ease, border-color .18s ease;
  min-height: 100%;
}
.course-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(2,6,23,.18);
}
.course-cover{ height: 170px; }
.course-title{
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 44px;
}
.course-desc{
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  min-height: 60px;
}

/* Modal padrão do sistema (Admin/Professor/Aluno)
   - Centralizado
   - Não estoura a tela
   - Conteúdo com rolagem interna
*/
html.modal-open, body.modal-open{ overflow:hidden; }
body.modal-open{ touch-action: none; }
.sys-modal-backdrop{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  background: rgba(15,23,42,.55);
  z-index: 10000;
}
.sys-modal-backdrop.open{ display:flex; }
.sys-modal{
  width: min(620px, 100%);
  background: var(--surface);
  border-radius: 18px;
  border:1px solid rgba(148,163,184,.35);
  box-shadow: var(--shadow-lg);
  overflow:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
  max-height: min(92vh, calc(100vh - 32px));
}
.sys-modal-close{
  position:absolute;
  right:10px;
  top:10px;
  width:42px;
  height:42px;
  border-radius: 14px;
  border:1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.85);
  cursor:pointer;
  font-size: 22px;
  line-height: 1;
}
.sys-modal-body{
  padding: 18px;
  overflow-y:auto;
  overflow-x:auto;
  word-break: break-word;
  flex: 1 1 auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  word-break: break-word;
}
.sys-modal-top{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.sys-modal-icon{
  width:46px; height:46px;
  border-radius: 16px;
  background: rgba(59,130,246,.12);
  color: var(--cor-principal);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  flex:0 0 auto;
  border: 1px solid rgba(59,130,246,.22);
}
.sys-modal-kicker{
  font-size: 12px;
  letter-spacing: .32px;
  color: var(--muted);
  font-weight: 900;
  text-transform: uppercase;
}
.sys-modal-title{
  margin: 4px 0 0 0;
  font-size: 18px;
  font-weight: 1000;
  color: var(--text);
}
.sys-modal-content{ margin-top: 14px; }
.sys-modal-desc{
  margin: 0;
  white-space: pre-line;
  color: var(--muted);
  opacity: .95;
  line-height: 1.55;
}
.sys-modal-meta{ margin-top: 12px; }
.sys-modal-dl{
  margin:0;
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 8px 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.30);
  background: rgba(248,250,252,.9);
}
.sys-modal-dl dt{
  margin:0;
  font-weight: 900;
  color: var(--text);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .28px;
}
.sys-modal-dl dd{
  margin:0;
  color: var(--muted);
  font-size: 14px;
}
.sys-modal-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top: 0;
  padding: 0 18px 18px;
  border-top: 1px solid rgba(148,163,184,.18);
  background: var(--surface);
  flex: 0 0 auto;
}

@media (max-width: 520px){
  .sys-modal-body{ padding: 14px; }
  .sys-modal-dl{ grid-template-columns: 1fr; }
}


/* ==========================================================
 * Centro de Mensagens (Admin) — botão fixo + modal com lista
 * ========================================================== */
.sys-fab{
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.18);
  background: var(--cor-painel, var(--cor-principal));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  z-index: 9999;
}
.sys-fab i{ font-size: 20px; }
.sys-fab:hover{ filter: brightness(1.02); transform: translateY(-1px); }
.sys-fab:active{ transform: translateY(0); filter: brightness(.98); }
.sys-fab-badge{
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 12px;
  font-weight: 1000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
}
.sys-fab-dot{
  position:absolute;
  left: -6px;
  bottom: -6px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #f59e0b;
  border: 2px solid #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

.sys-center{ width: min(820px, 100%); }
.sys-center-stats{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 12px;
}
.sys-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(248,250,252,.9);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}
.sys-chip b{ font-weight: 1100; }
.sys-chip i{ opacity: .9; }
.sys-chip-warn{
  background: rgba(245,158,11,.10);
  border-color: rgba(245,158,11,.22);
  color: #92400e;
}

.sys-center-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(148,163,184,.25);
}
.sys-tab{
  appearance:none;
  border: 1px solid rgba(148,163,184,.35);
  background: var(--surface);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 1000;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size: 13px;
}
.sys-tab:hover{ background: rgba(15,23,42,.03); }
.sys-tab.is-active{
  background: rgba(15,23,42,.06);
  border-color: rgba(15,23,42,.22);
}
.sys-tab-badge{
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(15,23,42,.08);
  border: 1px solid rgba(15,23,42,.16);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  font-weight: 1100;
}
.sys-tab-ghost{
  margin-left:auto;
  background: rgba(248,250,252,.9);
}

.sys-center-list{
  margin-top: 12px;
  max-height: min(56vh, 520px);
  overflow:auto;
  padding-right: 6px;
}
.sys-msg{
  border: 1px solid rgba(148,163,184,.30);
  border-radius: 16px;
  background: var(--surface);
  padding: 12px 12px;
  margin-bottom: 10px;
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
}
.sys-msg.is-new{
  border-color: rgba(59,130,246,.35);
  background: rgba(59,130,246,.04);
}
.sys-msg.is-action{
  border-color: rgba(245,158,11,.35);
  background: rgba(245,158,11,.05);
}
.sys-msg-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.sys-msg-title{
  font-weight: 1100;
  color: var(--text);
  margin:0;
  font-size: 14px;
  line-height: 1.35;
}
.sys-msg-desc{
  margin: 8px 0 0 0;
  color: var(--muted);
  white-space: pre-line;
  font-size: 13px;
  line-height: 1.55;
  display:-webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.sys-msg-meta{
  margin-top: 10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  color: var(--muted);
  font-size: 12px;
}
.sys-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.30);
  background: rgba(248,250,252,.9);
  color: var(--text);
  font-weight: 1000;
  font-size: 12px;
}
.sys-tag-new{ background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.22); color:#1d4ed8; }
.sys-tag-action{ background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.25); color:#92400e; }
.sys-tag-done{ background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.22); color:#166534; }
.sys-msg-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin-top: 10px;
}
.sys-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.30);
  background: var(--surface);
  color: var(--text);
  font-weight: 1000;
  text-decoration:none;
  font-size: 12px;
}
.sys-link:hover{ background: rgba(15,23,42,.03); }

@media (max-width: 520px){
  .sys-fab{ right: 14px; bottom: 14px; width: 56px; height: 56px; border-radius: 16px; }
  .sys-center-tabs .sys-tab-ghost{ width: 100%; justify-content:center; margin-left:0; }
}


/* ===========================
   Complementos UI (CRUD Admin)
   =========================== */
.btn-sm{ padding:8px 10px; font-size:12px; border-radius:12px; }
.btn-danger{ background:#dc2626; border-color:#b91c1c; color:#fff; }
.btn-danger:hover{ filter:brightness(.95); }

.form-grid{ display:grid; grid-template-columns: 1fr; gap:12px; }
.form-field{ display:flex; flex-direction:column; gap:6px; }
.form-field--full{ grid-column: 1 / -1; }
.checkline{ display:flex; align-items:center; gap:10px; font-weight:800; color: var(--text); padding:10px 12px; border:1px solid rgba(148,163,184,.25); border-radius:14px; background: var(--surface); }
.checkline input{ width:18px; height:18px; }

.badge--success{ background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.25); color:#166534; }
.badge--warning{ background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.25); color:#92400e; }
.badge--neutral{ background: rgba(148,163,184,.16); border-color: rgba(148,163,184,.30); color: var(--muted); }


/* Badge (vermelho) */
.badge--danger{ background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.25); color:#991b1b; }

/* Alias para avisos (páginas antigas) */
.notice--danger{ border-color: rgba(239,68,68,.25) !important; background: rgba(239,68,68,.08) !important; color:#991b1b !important; }

/* Alert legado (fallback) */
.alert{ padding:12px 14px; border-radius:14px; border:1px solid var(--line); background: var(--surface); box-shadow: 0 8px 20px rgba(2,6,23,.06); font-weight:800; margin-bottom: 14px; }
.alert-success{ border-color: rgba(34,197,94,.25); background: rgba(34,197,94,.08); color:#14532d; }
.alert-danger{ border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.08); color:#991b1b; }
.alert-warning{ border-color: rgba(245,158,11,.25); background: rgba(245,158,11,.08); color:#7c2d12; }

/* Tabelas genéricas (para páginas que usam class=table) */
.table-wrap{ width:100%; overflow:auto; -webkit-overflow-scrolling: touch; }
.table{ width:100%; border-collapse:separate; border-spacing:0; }
.table thead th{ position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--muted); font-weight: 950; font-size: 12px; letter-spacing: .25px; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.table th, .table td{ padding: 14px 14px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.table tbody tr:hover{ background: rgba(15,23,42,.02); }
.table tbody tr:last-child td{ border-bottom: 0; }

/* Linha de usuário (avatar + nome) */
.user-row{ display:flex; align-items:center; gap:10px; }
.avatar{ width:42px; height:42px; border-radius:999px; object-fit:cover; border:1px solid rgba(148,163,184,.45); background: var(--surface); }
.avatar--ph{ width:42px; height:42px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:#eef2ff; color:#1e3a8a; font-weight:900; border:1px solid rgba(148,163,184,.45); }
.user-name{ font-weight:900; line-height:1.1; }
.user-sub{ font-size:12px; color:var(--muted,#64748b); }

@media (min-width: 860px){
  .form-grid{ grid-template-columns: 1fr 1fr; }
}

.card-body{ padding:0; }


/* Student modal card */

#studentModalBackdrop .sys-modal{ max-width:850px; width:calc(100% - 24px); }
.profile-card .profile-avatar{
  width:86px; height:86px; border-radius:999px; object-fit:cover;
  border:2px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 28px rgba(2,6,23,.10);
  background: var(--bg);
}
.profile-card .profile-head{
  align-items:flex-start;
  justify-content:flex-start;
}
.profile-card .profile-top{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.profile-card .profile-badges{
  margin-left:auto;
  display:flex; gap:8px; flex-wrap:wrap;
}
@media (max-width: 520px){
  .profile-card .profile-avatar{ width:72px; height:72px; }
  .profile-card .profile-badges{ width:100%; margin-left:0; }
}


/* Admin quick search */

.admin-search{ }
.admin-search__row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.admin-search__field{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--cor-borda);
  border-radius:14px;
  background: var(--surface);
  box-shadow: var(--sombras);
  flex: 1 1 320px;
}
.admin-search__field i{ color: var(--muted); }
.admin-search__field input{
  border:0;
  outline:0;
  background:transparent;
  width:100%;
  font-weight:800;
  color: var(--text);
}
.admin-search__meta{
  margin-left:auto;
  color: var(--muted);
  font-weight:900;
}


/* ===================================================================
   2026-02-01 — PADRONIZAÇÃO TOTAL (GLOBAL)
   Objetivo:
   - Deixar TODOS os formulários, tabelas, cards e páginas consistentes
   - Corrigir alinhamento (inputs estreitos, grids quebrados, etc.)
   - Adicionar efeitos visuais profissionais sem alterar a lógica do sistema
   =================================================================== */

/* Tokens de UI (mantém compatível com --cor-principal já existente) */
:root{
  --page-width: 1240px;
  --radius-xl: 18px;
  --radius-lg: 16px;
  --radius-md: 14px;
  --radius-sm: 12px;
  --line: rgba(15,23,42,.10);
  --line-2: rgba(15,23,42,.07);
  --bg: #f3f6fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --ink: #0f172a;
  --muted: #64748b;
  --shadow-1: 0 10px 30px rgba(2,6,23,.06);
  --shadow-2: 0 22px 60px rgba(2,6,23,.12);
  --focus-ring: 0 0 0 4px rgba(59,130,246,.18);
}

html, body{ height:100%; }
body{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(59,130,246,.09), transparent 60%),
    radial-gradient(900px 540px at 95% 0%, rgba(16,185,129,.08), transparent 55%),
    var(--bg);
  color: var(--ink);
}

img{ max-width:100%; height:auto; }

/* Conteúdo central (admin/aluno/professor) */
.main-content{
  width:100%;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 26px 22px 44px;
}
@media (max-width: 900px){
  .main-content{ padding: 18px 14px 34px; }
}

/* Cabeçalhos */
.page-title{
  font-weight: 950;
  letter-spacing: .2px;
}
.muted{ color: var(--muted) !important; }

/* Cards padronizados */
.card, .table-card, .form-card, .panel-card, .chat-box, .cert-container{
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* Evita "pular" ao passar o mouse em tabelas (transform em .table-card incomoda) */
.card:hover, .form-card:hover, .panel-card:hover, .cert-container:hover{
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

/* Evita "card-body" sem padding (causava layout amador/estreito) */
.card-body{ padding: 18px !important; }

/* Botões consistentes */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  font-weight: 900;
  letter-spacing: .2px;
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 10px 26px rgba(2,6,23,.08);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, background .15s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 16px 34px rgba(2,6,23,.12); }
.btn:active{ transform: translateY(0); box-shadow: 0 10px 26px rgba(2,6,23,.08); }
.btn.btn-secondary{ background: rgba(15,23,42,.05); color: var(--ink); }
.btn.btn-secondary:hover{ background: rgba(15,23,42,.08); }
.btn.btn-danger{ background:#ef4444 !important; border-color: rgba(239,68,68,.35) !important; color:#fff !important; }
.btn.btn-danger:hover{ filter: brightness(.96); }
.btn.btn-primary{ background: var(--cor-principal) !important; border-color: rgba(255,255,255,.12) !important; color:#fff !important; }
.btn.btn-primary:hover{ filter: brightness(.96); }
.btn.btn-sm{ height: 34px; padding: 0 12px; border-radius: var(--radius-sm); font-size: 13px; }

/* Formulários — corrigir inputs estreitos e alinhar tudo */
form .form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 860px){
  form .form-grid{ grid-template-columns: 1fr; }
}

.form-field{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.form-field label{
  margin:0;
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .25px;
  color: var(--muted);
}

/* Força largura total (resolve problema de input pequeno no editar) */
.main-content form input[type="text"],
.main-content form input[type="email"],
.main-content form input[type="password"],
.main-content form input[type="number"],
.main-content form input[type="date"],
.main-content form input[type="search"],
.main-content form input[type="file"],
.main-content form select,
.main-content form textarea{
  width: 100% !important;
  display:block;
  min-height: 44px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(15,23,42,.14);
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.main-content form textarea{ min-height: 110px; padding-top: 12px; }
.main-content form input:focus,
.main-content form select:focus,
.main-content form textarea:focus{
  outline: none;
  border-color: rgba(59,130,246,.55);
  box-shadow: var(--focus-ring);
}

/* Wrapper com ícone (injetado via JS) — precisa ocupar 100% */
.fi{ width:100%; }
.fi .fi-field{ width:100% !important; display:block; }
.fi textarea.fi-field{ width:100% !important; }

/* Tabelas — padronizadas e bonitas */
.table-card{ padding: 0 !important; }
.table-card table{ width:100%; border-collapse: separate; border-spacing: 0; }
.table-card thead th{
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .25px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.table-card th, .table-card td{
  padding: 14px 14px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
}
.table-card tbody tr:hover{ background: rgba(15,23,42,.02); }
.table-card tbody tr:last-child td{ border-bottom: 0; }

/* Se a tela for pequena, deixa a tabela rolável sem quebrar */
@media (max-width: 900px){
  .table-card{ overflow:auto; }
  .table-card table{ min-width: 760px; }
}

/* Cursos (cards) — efeito profissional */
.course-card{
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow:hidden;
  background: var(--surface);
  box-shadow: var(--shadow-1);
  transition: transform .18s ease, box-shadow .18s ease;
}
.course-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-2); }
.course-cover img{ transition: transform .25s ease; }
.course-card:hover .course-cover img{ transform: scale(1.03); }

/* Modal padrão (SysModal) — garante largura boa e conteúdo alinhado */
.sys-modal__dialog{ border-radius: var(--radius-xl) !important; }
.sys-modal__body{ color: var(--ink); }

/* Acessibilidade — respeita usuários que preferem menos movimento */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================
   Image Lightbox (clique na foto para ampliar)
   - Tamanho padrão, responsivo (não estoura as bordas)
   ========================================================== */
.img-clickable{ cursor: zoom-in; }

.img-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.68);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 100000; /* acima do SysModal e outros */
}
.img-modal-backdrop.open{ display: flex; }

.img-modal{
  width: min(980px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  background: rgba(15,23,42,.92);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
  padding: 14px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
}

.img-modal img{
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(88vh - 90px);
  object-fit: contain;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
}

.img-modal-caption{
  margin-top: 10px;
  color: rgba(255,255,255,.85);
  font-size: .95rem;
  line-height: 1.35;
  text-align: center;
}

.img-modal-close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(15,23,42,.85);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.img-modal-close:hover{ filter: brightness(1.08); }

@media (max-width: 520px){
  .img-modal{ padding: 12px; border-radius: 16px; }
  .img-modal img{ max-height: calc(86vh - 86px); }
}




/* =========================================================
   HOME — refinamento do "cartão postal"
   ========================================================= */
.hero-slider + .home-stats{
  /* Não sobrepor o banner (evita itens "fora do lugar" e dots no meio) */
  margin-top: 18px;
  position: relative;
  z-index: 1;
}
@media (max-width: 520px){
  .hero-slider + .home-stats{ margin-top: 14px; }
}

/* HOME: fundo totalmente branco */
body.page-home{ background: var(--surface); }
body.page-home .home-stats,
body.page-home .home-search,
body.page-home .courses-section,
body.page-home .home-testimonials,
body.page-home .home-instructors{ background: var(--surface); }

/* HOME: grid de cards se adapta ao número de itens (evita coluna vazia) */
body.page-home .course-grid--public{
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Barra de busca rápida */
.home-search{ padding: 10px 0 28px; }
.home-search__card{
  display:flex;
  align-items:center;
  gap:10px;
  background: var(--surface);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  padding: 12px 12px;
  box-shadow: 0 18px 50px rgba(2,6,23,.10);
}
.home-search__icon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background: rgba(15,23,42,.06);
  color: var(--cor-principal);
  flex:0 0 42px;
}
.home-search__input{
  flex:1;
  min-width:0;
  border:0 !important;
  outline:none !important;
  background:transparent !important;
  padding: 10px 8px !important;
  margin:0 !important;
  font-size: 1rem;
}
.home-search__card .btn{ white-space:nowrap; }
@media (max-width: 640px){
  .home-search__card{ flex-direction:column; align-items:stretch; }
  .home-search__icon{ width:44px; height:44px; }
  .home-search__card .btn{ width:100%; justify-content:center; }
}

/* Depoimentos — garante snap (fallback global) */
.t-track{ scroll-snap-type: x mandatory; }
.t-slide{ scroll-snap-align:start; scroll-snap-stop:always; }

/* ==========================================================
   FIX PRO 20260201_uiv5
   - Cards de cursos/instrutores: imagens sem corte, alinhamento e altura padrão
   - Depoimentos: espaçamento e controles mais consistentes
   ========================================================== */

/* Cards com imagem: não cortar (object-fit:contain) e manter proporção */
.course-cover{
  height: auto !important;           /* sobrescreve alturas antigas */
  aspect-ratio: 16 / 9;
  background: linear-gradient(180deg, rgba(148,163,184,.16), rgba(148,163,184,.08));
  display:flex;
  align-items:center;
  justify-content:center;
}
.course-cover img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;    /* evita cortar imagem */
  background: rgba(255,255,255,.75);
  padding: 6px;
  transform: none !important;        /* evita zoom/corte em hover */
}
/* hover mantém elegância sem distorcer imagem */
.course-card:hover .course-cover img{ transform:none !important; }

/* Ajuste de respiro e alinhamento dos cards */
.course-grid{ gap: 18px; }
.course-body{ gap: 10px; }
.course-meta{ gap: 6px; }
.course-actions .btn{ width: fit-content; }

/* HOME: quando houver poucos cursos, mantém layout equilibrado */
body.page-home .course-grid--public{
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
}

/* Depoimentos: seta e área clicável mais confortáveis */
.t-shell{ padding: 2px 44px 10px; }
.t-nav{ width: 38px; height: 38px; }
@media (max-width: 640px){
  .t-shell{ padding: 2px 14px 10px; }
  .t-nav{ display:none; }
}



/* ==========================================================
   FIX PRO 20260201_uiv6 — HOME PROFISSIONAL (cards + depo)
   - Cards de cursos/instrutores alinhados, sem cortar imagem
   - Slider de depoimentos funcionando (desktop + mobile)
   ========================================================== */

/* HOME sempre branca e sem “faixas” */
body.page-home{ background: var(--surface) !important; }
body.page-home .home-stats,
body.page-home .home-search,
body.page-home .courses-section,
body.page-home .home-testimonials,
body.page-home .home-instructors{ background: var(--surface) !important; }

/* ===== Cards (Cursos / Instrutores) ===== */
.course-grid{ gap: 18px; }
.course-card{
  height: 100%;
  display:flex;
  flex-direction:column;
}

.course-cover{
  height: 180px !important;
  background: var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.course-cover img{
  width:100%;
  height:100%;
  object-fit: contain !important; /* NÃO CORTA */
  display:block;
  padding: 8px;
}

/* Instrutores: um pouco mais alto para fotos */
.is-card .course-cover{ height: 220px !important; }
.is-card .course-cover img{ padding: 10px; }

.course-body{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Título/descrição com clamp para manter todos iguais */
.course-title{
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow:hidden;
  min-height: 44px;
}
.course-desc{
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow:hidden;
  min-height: 56px;
}

/* Botão sempre no rodapé do card */
.course-actions{ margin-top:auto; padding-top: 6px; }
.course-actions .btn{ width: fit-content; }

/* ===== Depoimentos (slider) ===== */
.home-testimonials .t-shell{
  position:relative;
  margin-top: 14px;
  padding: 0 44px 14px; /* espaço p/ setas */
}

.home-testimonials .t-track{
  display:flex;
  gap: 18px;
  overflow-x:auto;
  overflow-y:hidden;
  padding: 8px 2px 18px;
  scroll-snap-type: x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling: touch;
}
.home-testimonials .t-track::-webkit-scrollbar{ height: 0; }

.home-testimonials .t-slide{
  scroll-snap-align: start;
  scroll-snap-stop: always;
  flex: 0 0 calc((100% - 36px)/3);
  min-width: 280px;
}

@media (max-width: 1024px){
  .home-testimonials .t-slide{ flex-basis: calc((100% - 18px)/2); }
}
@media (max-width: 640px){
  .home-testimonials .t-shell{ padding: 0 14px 12px; }
  .home-testimonials .t-slide{ flex-basis: 88%; }
}

/* Card depoimento */
.home-testimonials .t-card{
  background: var(--surface);
  border:1px solid rgba(148,163,184,.35);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  padding: 16px 16px 12px;
  display:flex;
  flex-direction:column;
  min-height: 170px;
}
.home-testimonials .t-stars{ display:flex; align-items:center; gap:8px; }
.home-testimonials .t-star{ color:#f59e0b; font-size: 14px; line-height:1; }
.home-testimonials .t-quote{
  margin: 10px 0 12px;
  color: var(--text);
  opacity:.92;
  line-height:1.45;
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow:hidden;
}
.home-testimonials .t-meta{ margin-top:auto; border-top:1px dashed #e2e8f0; padding-top: 10px; }
.home-testimonials .t-user{ display:flex; align-items:center; gap:10px; }
.home-testimonials .t-avatar{
  width: 42px; height: 42px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(148,163,184,.5);
  background: var(--bg);
  flex: 0 0 auto;
}
.home-testimonials .t-avatar--ph{
  display:flex; align-items:center; justify-content:center;
  font-weight: 900;
  color: var(--muted);
}
.home-testimonials .t-name{ font-weight: 900; color: var(--text); }
.home-testimonials .t-course{ font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Setas */
.home-testimonials .t-nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.55);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 5;
}
.home-testimonials .t-nav.prev{ left: 6px; }
.home-testimonials .t-nav.next{ right: 6px; }
.home-testimonials .t-nav:hover{ box-shadow: var(--shadow-md); transform: translateY(-50%) scale(1.02); }
@media (max-width: 640px){
  .home-testimonials .t-nav{ display:none !important; }
}

/* Dots */
.home-testimonials .t-dots{
  display:flex;
  gap: 8px;
  justify-content:center;
  margin-top: 10px;
}
.home-testimonials .t-dot{
  width: 7px; height: 7px;
  border-radius: 999px;
  border: 0;
  background:#cbd5e1;
  cursor:pointer;
}
.home-testimonials .t-dot.is-on{ background: var(--cor-primaria); }

/* arrasto: cursor legal no desktop */
.home-testimonials .t-track.is-dragging{ cursor: grabbing; }
.home-testimonials .t-track{ cursor: grab; }


/* ==========================================================
   FIX PRO 20260201_uiv7 — BOTÕES + IMAGENS DOS CARDS
   - Remove botões com gradiente/duas cores: usa a cor do tema (--cor-principal)
   - Imagens dos cards preenchem o espaço (object-fit: cover)
   - Dots do slider usando a variável correta
   ========================================================== */

/* Botões CTA/Busca (sem gradiente) */
.btn-cta,
.home-search__card .btn.btn-cta{
  background: var(--cor-principal) !important;
  background-image: none !important;
  color:#fff !important;
  border-color: rgba(255,255,255,.14) !important;
}
.btn-cta:hover,
.home-search__card .btn.btn-cta:hover{
  filter: brightness(.95);
  transform: translateY(-1px);
}

/* Botão secundário: outline com a cor do tema (igual painel) */
.btn-secondary,
.btn.btn-secondary{
  background: var(--surface) !important;
  color: var(--cor-principal) !important;
  border: 1px solid var(--cor-principal) !important;
}
.btn-secondary:hover,
.btn.btn-secondary:hover{
  background: var(--cor-principal) !important;
  color:#fff !important;
  filter: brightness(.98);
}

/* Cards: imagem preenchendo a área (sem borda/padding) */
.course-cover{
  height: 180px !important;
  aspect-ratio: auto !important;
  background: var(--bg) !important;
  overflow:hidden !important;
}
.course-cover img{
  width:100% !important;
  height:100% !important;
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Instrutores: um pouco mais alto */
.is-card .course-cover{ height: 220px !important; }

/* Hover suave (opcional) */
.course-card:hover .course-cover img{ transform: scale(1.03) !important; transition: transform .25s ease; }

/* Dots do slider usando variável correta */
.home-testimonials .t-dot.is-on{ background: var(--cor-principal) !important; }


/* ===== Ajuste global: ações dos cards (curso/instrutor) ===== */
.course-actions{ margin-top:auto; padding-top:8px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }


/* ===============================
   FIX: painel (panel-card) sem padding
   Evita texto/elementos colados na borda
   =============================== */
.panel-card{
  padding: 18px 20px;
}
@media (max-width: 860px){
  .panel-card{ padding: 14px; }
}



/* ==========================================================
   UI PROFISSIONAL — 2026 PRO REFRESH (global)
   Objetivo: leveza, elegância e consistência em TODO o sistema
   - Mantém as cores por painel via --cor-principal
   ========================================================== */

:root{
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 12px;

  --shadow-0: 0 1px 1px rgba(2,6,23,.04);
  --shadow-1: 0 12px 28px rgba(2,6,23,.08);
  --shadow-2: 0 18px 54px rgba(2,6,23,.12);

  --surface: #ffffff;
  --surface-glass: rgba(255,255,255,.78);
  --ink: #0f172a;
  --muted: #475569;
  --line-soft: rgba(15,23,42,.10);
  --bg-soft: #f6f8fc;
}

html{ scroll-behavior: smooth; }
body{
  position: relative;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 500px at 16% 0%, rgba(99,102,241,.10), transparent 60%),
    radial-gradient(900px 420px at 100% 10%, rgba(56,189,248,.10), transparent 55%),
    var(--bg-soft);
}

/* Brilho/soft shapes (sem imagens) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 340px at 40% 45%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(700px 260px at 82% 70%, rgba(255,255,255,.55), transparent 60%);
  opacity: .35;
}

a{ -webkit-tap-highlight-color: transparent; }
::selection{ background: rgba(2,6,23,.10); }

/* ===== Layout (painéis) ===== */
.layout{ background: transparent; }
.main{ background: transparent; }

/* Sidebar: mais premium e "leve" */
.sidebar{
  width: 260px;
  box-shadow: none;
}
.sidebar .logo{
  height: auto;
  padding: 20px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar a{
  border-bottom: none;
  border-radius: 14px;
  margin: 4px 12px;
  padding: 12px 14px;
  transition: transform .14s ease, background .14s ease, box-shadow .14s ease;
}
.sidebar a:hover{ transform: translateX(2px); }
.sidebar a.ativo{
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}

/* Topbar "glass" elegante (painéis) */
.topbar.topbar--welcome{
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.70);
}
.topbar .topbar-user .welcome{
  color: var(--muted);
  font-weight: 700;
  line-height: 1.25;
}
.topbar .topbar-user .welcome b{ color: var(--ink); }

/* Conteúdo */
.main-content{
  padding-top: 18px;
}

/* Cabeçalho de página */
.page-title{
  font-size: 24px;
  font-weight: 950;
  letter-spacing: -.4px;
}

/* Cards: consistência visual */
.card,
.table-card,
.form-card,
.panel-card,
.stat-card,
.quick-card,
.quiz-card,
.question-card{
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-soft);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.card:hover,
.stat-card:hover,
.quick-card:hover{
  box-shadow: var(--shadow-2);
}

/* Tabelas: header mais bonito e hover suave */
.table-card{ overflow: hidden; }
.table-card thead th{
  background: linear-gradient(180deg,#f8fafc,#f1f5f9);
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.table-card tbody tr:hover{ background: rgba(2,6,23,.03); }

/* Botões: micro-interações elegantes */
.btn,
.btn-sair-top,
.pg-btn,
.pg-num{
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover,
.btn-sair-top:hover{ transform: translateY(-1px); }
.btn:active,
.btn-sair-top:active{ transform: translateY(0); }

.btn{
  border-radius: 12px;
  box-shadow: var(--shadow-0);
}
.btn-secondary,
.btn.btn-secondary{
  box-shadow: none;
}

/* Inputs: foco com anel (usa cor do painel quando possível) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="date"],
input[type="time"],
select,
textarea{
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: var(--surface);
  transition: box-shadow .15s ease, border-color .15s ease;
}

input:focus,
select:focus,
textarea:focus{
  outline: none;
  border-color: var(--cor-principal);
  /* fallback */
  box-shadow: 0 0 0 4px rgba(99,102,241,.18);
  /* se suportado, usa a cor do painel */
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor-principal) 22%, transparent);
}

/* Scrollbar discreta (WebKit) */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-track{ background: rgba(2,6,23,.04); border-radius: 999px; }
*::-webkit-scrollbar-thumb{ background: rgba(2,6,23,.18); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover{ background: rgba(2,6,23,.26); }

/* Rodapé: card de vidro discreto */
.site-footer{
  background: transparent;
  padding: 22px 0 28px;
  color: rgba(15,23,42,.65);
}
.site-footer .container{
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  box-shadow: var(--shadow-0);
}

/* Responsivo */
@media (max-width: 980px){
  .topbar.topbar--welcome{ border-radius: 16px; }
}

/* Acessibilidade: reduz animações */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition:none !important; animation:none !important; }
}



/* FIX MENU LINKS MOBILE: garante que nada fique por cima do menu e que links recebam toque */
@media (max-width: 900px){
  .sidebar{ z-index: 5000 !important; pointer-events:auto !important; -webkit-overflow-scrolling: touch; }
  .sidebar a{ pointer-events:auto !important; touch-action: manipulation; }
  .sidebar-backdrop{ z-index: 4990 !important; }
}


/* ==========================================
   PERFIL (ALUNO) — editar_perfil.php
   - layout mais profissional, com seções e avatar
   (escopado em .profile-form para não afetar outras telas)
========================================== */
form.profile-form{
  margin: 0;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.45);
  background: var(--surface);
  box-shadow: 0 12px 30px rgba(2,6,23,.06);
}
form.profile-form .form-actions{
  grid-column: 1 / -1;
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  margin-top: 4px;
}
form.profile-form .form-actions .btn{
  width: auto;
  min-width: 220px;
  border-radius: 16px;
  padding: 12px 16px;
}
form.profile-form .btn i{ margin-right: 8px; }

.profile-head{
  display:flex;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 18px;
  border: 1px dashed rgba(148,163,184,.55);
  background: rgba(2,6,23,.02);
}
.profile-avatar{ flex: 0 0 auto; }
.avatar-xl{
  width: 72px;
  height: 72px;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid rgba(148,163,184,.45);
  background: var(--surface);
  display:block;
}
.avatar-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: var(--text);
  background: rgba(15,23,42,.06);
}
.profile-meta{ flex: 1 1 auto; min-width: 0; }
.profile-name{
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 4px;
}
.profile-sub{
  font-weight: 800;
  color: var(--muted);
  display:flex;
  align-items:center;
  gap: 8px;
  line-height: 1.2;
  margin-bottom: 6px;
  word-break: break-word;
}
.profile-note{
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.25;
}

.profile-upload{ flex: 0 0 auto; display:flex; flex-direction: column; align-items:flex-end; gap: 6px; }
.file-pill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.45);
  background: rgba(15,23,42,.04);
  cursor: pointer;
  user-select:none;
  font-weight: 900;
  color: var(--text);
  white-space: nowrap;
}
.file-pill:hover{ background: rgba(15,23,42,.07); }
.file-pill input[type="file"]{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
}

/* Separadores de seção */
.form-sep{
  grid-column: 1 / -1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(2,6,23,.02);
}
.form-sep__left{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 900;
  color: var(--text);
}
.form-sep__left i{ color: var(--cor-principal); }
.form-sep__right{
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}

/* Colspan utilitário */
.col-2{ grid-column: span 2; }
@media (max-width: 980px){
  .col-2{ grid-column: 1 / -1; }
}
@media (max-width: 640px){
  .profile-head{ flex-direction: column; align-items:flex-start; }
  .profile-upload{ align-items:flex-start; width:100%; }
  form.profile-form .form-actions{ justify-content:stretch; }
  form.profile-form .form-actions .btn{ width:100%; min-width: 0; }
}

/* Comunidade: vira card completo e grid interno 2 colunas */
form.profile-form .community-card{
  border: 1px solid rgba(148,163,184,.35);
  border-radius: 18px;
  padding: 14px;
  background: rgba(2,6,23,.015);
}
form.profile-form .community-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items:start;
}
form.profile-form .community-grid__full{ grid-column: 1 / -1; }
@media (max-width: 980px){
  form.profile-form .community-grid{ grid-template-columns: 1fr; }
}

/* Chip pequeno “Obrigatório” */
.chip{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid rgba(148,163,184,.45);
  background: rgba(15,23,42,.04);
  color: var(--text);
}
.chip-required{
  border-color: rgba(245,158,11,.35);
  background: rgba(245,158,11,.10);
  color:#7c2d12;
}