:root{
  --bg:#0f1535;
  --glass:rgba(13, 20, 47, .6);
  --glass-stroke:rgba(226,232,240,0.08);
  --muted:#a0aec0;
  --ink:#fff;
  --brand1:#422AFB;
  --brand2:#6AD2FF;
  --green:#01B574;
  --red:#E31A1A;
  --yellow:#FFB547;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  background:radial-gradient(1200px 700px at -10% -10%, rgba(66,42,251,.32), transparent),
             radial-gradient(1200px 700px at 110% -10%, rgba(106,210,255,.22), transparent),
             #0b1437;
  font:14px/1.55 "DM Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Helvetica, Arial, sans-serif;
}
a{color:inherit;text-decoration:none}
.layout{display:grid; grid-template-columns:260px 1fr; min-height:100vh}
.main-area{min-width:0}

/* Sidebar */
.sidebar{
  position:sticky; top:0; height:100vh; padding:18px 14px;
  border-right:1px solid var(--glass-stroke);
  background:linear-gradient(180deg, rgba(66,42,251,.15), rgba(106,210,255,.08) 30%, transparent 100%);
}
.brand{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:8px}
.brand .name{font-weight:800; letter-spacing:.02em; font-size:15px}
.nav{margin-top:10px; display:flex; flex-direction:column; gap:6px}
.nav .section{margin:16px 12px 6px; font-size:11px; text-transform:uppercase; color:#94a3b8; letter-spacing:.12em}
.nav a{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; color:#cbd5e1;
}
.nav a.active, .nav a:hover{ background:rgba(255,255,255,.06); color:#fff }
.nav a .chip{margin-left:auto; padding:2px 8px; border-radius:999px; font-size:11px; background:rgba(255,255,255,.08); border:1px solid var(--glass-stroke)}

/* Topbar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; position:sticky; top:0; backdrop-filter: blur(12px) saturate(160%);
  background:var(--glass); border-bottom:1px solid var(--glass-stroke); z-index:10;
}
.left-actions{display:flex; gap:10px; align-items:center}
.menu-btn{display:none; border:1px solid var(--glass-stroke); padding:8px; border-radius:12px; background:rgba(255,255,255,.04)}
.search{display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--glass-stroke); border-radius:12px; background:rgba(255,255,255,.06); min-width:260px}
.search input{border:0; outline:0; background:transparent; color:#fff; width:220px}
.right-actions{display:flex; align-items:center; gap:10px}
.icon-btn{display:grid; place-items:center; width:38px; height:38px; border-radius:12px; border:1px solid var(--glass-stroke); background:rgba(255,255,255,.04)}

.content{padding:22px 22px 34px}
h1.page{font-size:22px; margin:10px 0 18px; font-weight:800}
.grid{display:grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap:16px}

/* Cards base */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid var(--glass-stroke); border-radius:20px; padding:16px; box-shadow:0 10px 26px rgba(0,0,0,.28);
  min-width:0;
}
.card h3{margin:0 0 12px; font-size:14px; font-weight:700}
.loading-card{display:flex; align-items:center; justify-content:center; min-height:128px}

.loading-state{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:#d1d5db;
  line-height:1.3;
}
.loading-state--md{min-height:88px; font-size:13px}
.loading-state--sm{min-height:38px; font-size:12px}
.loading-state__spinner{
  width:20px;
  height:20px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.22);
  border-top-color:var(--brand2);
  animation:dash-spinner .8s linear infinite;
  flex:0 0 auto;
}
.loading-state--sm .loading-state__spinner{
  width:16px;
  height:16px;
  border-width:2px;
}
.loading-state__text{opacity:.95}
@keyframes dash-spinner{
  to{transform:rotate(360deg);}
}

.kpi{display:flex; flex-direction:column; gap:8px}
.kpi .label{color:var(--muted); font-size:12px}
.kpi .value{font-size:22px; font-weight:800}
.kpi .delta{font-size:12px; display:flex; align-items:center; gap:6px}
.kpi .delta.up{color:var(--green)} .kpi .delta.down{color:var(--red)}
.card.kpi { cursor:pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease; }
.card.kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.08); }
.card.kpi.selected {
  border:2px solid var(--primary, #6AD2FF);
  background-color:rgba(106,210,255,.12);
  box-shadow:0 8px 18px rgba(14,165,233,.22), 0 6px 14px rgba(0,0,0,.12);
}
.card.kpi.kpi-static { cursor: default; }
.card.kpi.kpi-static:hover { transform: none; box-shadow: var(--shadow); }

/* Tabela base */
.table{width:100%; border-collapse:collapse; font-size:13px}
.table th,.table td{padding:10px; border-bottom:1px solid var(--glass-stroke); color:#cbd5e1; text-align:left; vertical-align:middle}
.table th{font-size:12px; text-transform:uppercase; color:#94a3b8}

/* Badge */
.badge{padding:4px 8px; font-size:11px; border-radius:999px; border:1px solid var(--glass-stroke); background:rgba(255,255,255,.06)}
.badge-launch { border-color:#4facfe; color:#4facfe; }
.badge-launched { border-color:#f6d365; color:#f6d365; }

/* Row helpers */
.row{ display:flex; align-items:center; gap:10px; }
.ava{width:28px; height:28px; border-radius:999px; display:grid; place-items:center; overflow:hidden; border:1px solid var(--glass-stroke); background:rgba(255,255,255,.06)}
.progress{height:8px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden}
.progress > i{display:block; height:100%; background:linear-gradient(90deg, var(--brand1), var(--brand2))}

.timeline{display:flex; flex-direction:column; gap:12px}
.ti{display:grid; grid-template-columns:20px 1fr; gap:10px; align-items:start}
.ti .dot{width:10px; height:10px; border-radius:50%; margin-top:5px}
.ti .dot.green{background:var(--green)} .ti .dot.yellow{background:var(--yellow)} .ti .dot.red{background:var(--red)}
.ti .line{grid-column:1; grid-row:2; width:2px; height:100%; background:rgba(255,255,255,.08); justify-self:center}

.chart-card{
  height:320px;
  overflow:hidden;
}
.chart-holder{
  position:relative;
  width:100%;
  height:calc(100% - 34px);
}
.loading-overlay{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(8, 13, 33, .58);
  backdrop-filter:blur(1px);
  border-radius:12px;
  z-index:2;
}
.loading-overlay.is-active{display:flex;}
.chart-card--pie{
  height:auto;
  min-height:360px;
}
.chart-holder--pie{
  min-height:300px;
  height:300px;
}
.chart-holder--pie canvas{
  width:100% !important;
  height:100% !important;
  max-height:100%;
  display:block;
}
canvas{max-width:100%}

.overview-card{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.overview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.overview-head h3{
  margin:0;
}

.overview-card--risk-list{
  min-height:320px;
}
.risk-list-wrap{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:240px;
  max-height:262px;
  overflow:auto;
  padding-right:6px;
}
.risk-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--glass-stroke);
  background:rgba(255,255,255,.03);
}
.risk-row__main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.risk-row__name{
  font-weight:700;
  color:#f8fafc;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.risk-row__meta{
  font-size:12px;
  color:#a8b5c7;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.risk-pill{
  padding:4px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
  color:#fca5a5;
  border:1px solid rgba(248,113,113,.45);
  background:rgba(127,29,29,.2);
  white-space:nowrap;
}
.risk-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:120px;
  border:1px dashed rgba(148,163,184,.35);
  border-radius:14px;
  color:#cbd5e1;
  font-size:13px;
  text-align:center;
  padding:10px 12px;
}

.overview-card--engagement{
  min-height:320px;
}
.engagement-kpis{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.engagement-kpi{
  border:1px solid var(--glass-stroke);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  padding:9px 10px;
}
.engagement-kpi .label{
  display:block;
  color:#9fb0c6;
  font-size:11px;
  margin-bottom:4px;
}
.engagement-kpi strong{
  font-size:18px;
  color:#f8fafc;
}
.chart-holder--engagement{
  height:130px;
  min-height:130px;
}

.overview-card--risk-chart{
  min-height:320px;
}
.chart-holder--risk{
  height:228px;
  min-height:228px;
}
#risk-chart-caption{
  margin:0;
  font-size:12px;
}

.lessons-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:14px;
}
.lessons-add-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 16px;
  border-radius:12px;
  font-size:13px;
  font-weight:700;
}
.lessons-add-btn img{
  width:16px;
  height:16px;
  filter:brightness(0) invert(1);
}
.table-lessons .col-encontro .in-encontro{
  width:74px;
  text-align:center;
}

/* Botão padrão */
.btn{display:inline-block; padding:10px 14px; border-radius:12px; font-weight:700;
     background:linear-gradient(90deg, var(--brand1), var(--brand2)); color:white; border:0}

/* Inputs padrão */
.form input{width:100%; padding:12px; border-radius:12px; border:1px solid var(--glass-stroke); background:rgba(255,255,255,.04); color:#fff}

/* Select do semestre no topo */
.search.select-mode{position:relative; display:flex; align-items:center; padding:0 12px; gap:8px;}
.search.select-mode .label{flex:1; color:inherit; font-size:14px; opacity:.85;}
.search.select-mode select{
  flex:0; min-width:90px; text-align:right; background:transparent; border:none; outline:none; color:inherit; font:inherit;
  padding:10px 18px 10px 0; cursor:pointer; appearance:none; -webkit-appearance:none; -moz-appearance:none;
}
.search.select-mode select option{ color:#111; }
.search.select-mode::after{
  content:""; position:absolute; right:10px; top:50%; transform:translateY(-50%); width:12px; height:12px; pointer-events:none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M7 10l5 5 5-5z'/></svg>") no-repeat center/12px 12px;
  opacity:.9;
}
.search.select-mode:focus-within{ box-shadow:0 0 0 2px rgba(255,255,255,.15) inset; }

/* KPI com logo à direita ocupando as 3 linhas */
.card.kpi.has-logo{
  display:grid; grid-template-columns:1fr 88px; grid-template-rows:auto auto auto; gap:6px 14px; align-items:center;
}
.card.kpi.has-logo .label{ grid-column:1; grid-row:1; }
.card.kpi.has-logo .value{
  grid-column:1;
  grid-row:2;
  font-size:17px;
  line-height:1.25;
  font-weight:700;
}
.card.kpi.has-logo .meta { grid-column:1; grid-row:3; }
.card.kpi.has-logo .label,
.card.kpi.has-logo .value,
.card.kpi.has-logo .meta{
  min-width:0;
  overflow-wrap:anywhere;
}
.kpi-logo{ grid-column:2; grid-row:1 / span 3; align-self:stretch; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.65); opacity:.95; }
.kpi-logo svg,.kpi-logo img{ width:100%; height:100%; max-height:88px; filter:drop-shadow(0 2px 10px rgba(0,0,0,.25)); }
@media (max-width:720px){
  .card.kpi.has-logo{ grid-template-columns:1fr 72px; }
  .card.kpi.has-logo .value{ font-size:15px; }
}

/* Modal */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.8); z-index:60}
.modal.open{display:flex}
.modal-box{
  width:min(760px, 92vw); max-height:86vh; overflow:auto;
  background:var(--glass); border:1px solid var(--glass-stroke);
  border-radius:20px; padding:18px 18px 16px; color:var(--ink);
  box-shadow:0 20px 60px rgba(0,0,0,.45)
}
.modal-title{margin:0 0 12px; font-size:18px; font-weight:800}
.modal-close{
  position:absolute; right:18px; top:12px; width:34px; height:34px;
  border-radius:12px; border:1px solid var(--glass-stroke);
  background:rgba(255,255,255,.06); color:var(--ink); font-size:22px; line-height:1;
}
.modal-body table{width:100%; border-collapse:collapse; font-size:14px}
.modal-body th,.modal-body td{padding:10px; border-bottom:1px solid var(--glass-stroke); text-align:left}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:12px}
.modal-body .table-input{
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--glass-stroke);
  background:rgba(255,255,255,.04); color:#fff;
}
#attendance-modal #attendance-modal-body input[type="checkbox"]{
  width:14px;
  height:14px;
  transform:scale(2.2);
  transform-origin:center;
  cursor:pointer;
  accent-color:var(--brand2);
}

/* Toast */
.toast{
  position:fixed; right:20px; bottom:20px; display:grid; grid-auto-flow:column; align-items:center; gap:10px;
  padding:10px 14px; border-radius:14px; background:var(--glass); border:1px solid var(--glass-stroke); color:var(--ink);
  box-shadow:0 10px 26px rgba(0,0,0,.28); opacity:0; transform:translateY(8px); animation:toast-in .24s ease forwards; z-index:9999;
}
.toast .badge{ margin-left:2px; }
.toast.success .badge{ border-color:rgba(1,181,116,.35); background:rgba(1,181,116,.12); }
.toast.error   .badge{ border-color:rgba(227,26,26,.35);  background:rgba(227,26,26,.12); }
@keyframes toast-in{ to{ opacity:1; transform:translateY(0);} }
@keyframes toast-out{ to{ opacity:0; transform:translateY(8px);} }

/* Responsivo layout */
@media (max-width:1080px){
  .layout{grid-template-columns:1fr}
  .sidebar{
    position:fixed;
    left:-280px;
    top:0;
    width:260px;
    transition:left .25s ease;
    z-index:20;
    background:#0b1437;
    border-right:1px solid rgba(148,163,184,.22);
    box-shadow:10px 0 28px rgba(2,6,23,.45);
  }
  .sidebar.open{left:0}
  .menu-btn{display:block}
  body.sidebar-open{overflow:hidden}
  body.sidebar-open::before{
    content:'';
    position:fixed;
    inset:0;
    background:rgba(2,6,23,.46);
    z-index:19;
  }
  .content{padding-top:10px}
  #kpi-grid > .card.kpi{grid-column:span 6 !important}
}
@media (max-width:900px){
  .engagement-kpis{
    grid-template-columns:1fr;
  }
}
@media (max-width:720px){
  .topbar{padding:12px; gap:10px}
  .right-actions{gap:8px}
  .search{min-width:0}
  .search.select-mode{min-width:0; width:auto}
  #kpi-grid > .card.kpi{grid-column:span 12 !important}
  .card.kpi.has-logo{
    grid-template-columns:1fr 64px;
    gap:6px 10px;
  }
  .card.kpi.has-logo .label{font-size:13px}
  .card.kpi.has-logo .value{font-size:16px}
  .card.kpi.has-logo .meta{
    font-size:11px !important;
    margin-top:2px !important;
  }
  .kpi-logo svg,.kpi-logo img{max-height:64px}
}


/* =========================================================
   TABELA DE LIÇÕES (card em 2 linhas por registro)
   ========================================================= */

/* fundo padrão do bloco */
:root { --lesson-block-bg: rgba(255,255,255,.05); }

/* base da tabela */
table.table-lessons{
  width:100%;
  border-collapse: separate;     /* permite cantos arredondados */
  border-spacing: 0;
  table-layout: fixed;
}
.table-lessons thead th{
  text-align:left;
  padding:10px;
  font-size:.95rem;
  color:rgba(255,255,255,.85);
  border:0;                      /* sem linha de thead */
}
.table-lessons tbody td{
  padding:10px;
  vertical-align:middle;
  border:0;                      /* vamos desenhar só o contorno externo */
}

/* fundo ÚNICO para as duas linhas do bloco */
.table-lessons tbody tr.mainrow > td,
.table-lessons tbody tr.subrow  > td,
.table-lessons tbody td.actions{
  background: var(--lesson-block-bg) !important;
}

/* contorno EXTERNO do bloco (topo, base e laterais) */
.table-lessons tbody tr.mainrow > td{ border-top:1px solid var(--glass-stroke) !important; }
.table-lessons tbody tr.subrow  > td{ border-bottom:1px solid var(--glass-stroke) !important; }
.table-lessons tbody tr.mainrow > td:first-child,
.table-lessons tbody tr.subrow  > td:first-child{ border-left:1px solid var(--glass-stroke) !important; }
/* lado direito é o TD de ações */
.table-lessons tbody tr.mainrow > td.actions,
.table-lessons tbody tr.subrow > td.actions{
  border-right:1px solid var(--glass-stroke) !important;
}

/* cantos somente por fora */
.table-lessons tbody tr.mainrow > td:first-child  { border-top-left-radius:14px !important; }
.table-lessons tbody tr.mainrow > td.actions      { border-top-right-radius:14px !important; }
.table-lessons tbody tr.subrow > td.actions       { border-bottom-right-radius:14px !important; }
.table-lessons tbody tr.subrow  > td:first-child  { border-bottom-left-radius:14px !important; }

/* zera raios internos para não criar “degrau” */
.table-lessons tbody tr.mainrow > td{
  border-bottom-left-radius:0 !important;
  border-bottom-right-radius:0 !important;
}
.table-lessons tbody tr.subrow > td{
  border-top-left-radius:0 !important;
  border-top-right-radius:0 !important;
}

/* mata emendas verticais internas */
.table-lessons tbody tr.mainrow > td:not(:first-child):not(.actions),
.table-lessons tbody tr.subrow  > td:not(:first-child):not(.actions){
  border-left:0 !important;
  border-right:0 !important;
}

/* espaçador entre “cards” */
.table-lessons tbody tr.gap-row td{
  height:12px;
  padding:0;
  border:0 !important;
  background:transparent !important;
}

/* larguras: assunto pequeno; conteúdo grande */
.table-lessons .col-subject input{ max-width:100%; width:100%; min-width:0; }
.table-lessons .col-content  input{ min-width:0; width:100%; }

/* inputs/seletores dentro da tabela */
.table-lessons input[type="number"],
.table-lessons input[type="text"],
.table-lessons input[type="date"],
.table-lessons select{
  width:100%;
  padding:8px 10px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  background:#fff;
  color:#111;
}

/* célula de Ação (botões ficam entre as duas linhas) */
td.actions{ width:140px; text-align:center; vertical-align:middle; }
.table-lessons td.actions{
  margin-top:0 !important;
}
.actions-wrap{ display:inline-flex; gap:10px; }
.actions-spacer{ padding:0 !important; min-height:64px; }

/* botões redondos com o mesmo degradê do "Lançar" */
.btn.launch-btn.btn-action{
  width:44px !important; height:44px !important; border-radius:999px !important; padding:0 !important;
  display:inline-flex !important; align-items:center; justify-content:center; border:0;
  background:linear-gradient(135deg, var(--brand1) 0%, var(--brand2) 100%) !important;
  box-shadow:0 8px 18px rgba(66,42,251,.28);
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.btn.launch-btn.btn-action:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(66,42,251,.34); }
.btn.launch-btn.btn-action:active{ transform:translateY(0); }
.btn.launch-btn.btn-action[disabled]{ opacity:.6; pointer-events:none; }
.btn.launch-btn.btn-action img{ width:18px; height:18px; filter:brightness(0) invert(1); display:block; }
.btn.launch-btn.btn-action.is-loading{
  position:relative;
  cursor:wait;
}
.btn.launch-btn.btn-action.is-loading[disabled]{
  opacity:1;
}
.btn.launch-btn.btn-action.is-loading img{
  opacity:0;
}
.btn.launch-btn.btn-action.is-loading::after{
  content:'';
  position:absolute;
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  animation:lesson-btn-spin .8s linear infinite;
}
@keyframes lesson-btn-spin{
  to{ transform:rotate(360deg); }
}

/* 2ª linha – distribuição:
   - sub-col-subject: "Imagem" (select + preview) fica sob ASSUNTO
   - sub-col-content: Arquivo 1 e Arquivo 2 ficam sob CONTEÚDO
   - sub-col-date: célula vazia para manter o bloco, mesma cor   */
.table-lessons tbody tr.subrow > td.sub-col-subject  { border-left:0 !important; }
.table-lessons tbody tr.subrow > td.sub-col-content  { border-left:0 !important; }
.table-lessons tbody tr.subrow > td.sub-col-date     { border-left:0 !important; border-right:0 !important; }
.table-lessons tbody tr.subrow > td.sub-col-encontro { padding:0 !important; }
.table-lessons .sub-col-date .in-location{
  width:100%;
}

/* grupos da 2ª linha */
.attachments{ padding:10px 8px; }
.attachments-inner{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

.select-wrap{ display:inline-flex; gap:10px; align-items:center; }
.select-wrap select{
  padding:8px 10px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  background:#fff;
  color:#111;
}
.img-preview{
  width:28px; height:28px; border-radius:8px;
  object-fit:cover; object-position:center;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}

/* botões/labels de arquivo (visual) */
.file-group{ display:inline-flex; gap:8px; align-items:center; flex-wrap:wrap; min-width:0; }
.btn-file{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  background:#fff; color:#111; cursor:pointer;
}
.btn-file.is-loading{
  position:relative;
  cursor:wait;
  pointer-events:none;
  opacity:.92;
  padding-right:34px;
}
.btn-file.is-loading::after{
  content:'';
  position:absolute;
  right:10px;
  top:50%;
  width:14px;
  height:14px;
  border-radius:50%;
  border:2px solid rgba(17,17,17,.22);
  border-top-color:#111;
  transform:translateY(-50%);
  animation:file-btn-spin .8s linear infinite;
}
@keyframes file-btn-spin{
  to{ transform:translateY(-50%) rotate(360deg); }
}
.file-name{
  font-size:.9rem; opacity:.85; max-width:180px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.file-name.picked{ color:#fff; opacity:1; }

.table-lessons .image-select{
  width:100%;
  max-width:320px;
}

/* responsivo: se apertar, a 2ª linha quebra */
@media (max-width:900px){
  .attachments-inner{ flex-wrap:wrap; }
}

/* -----------------------------------------
   Lesson card mobile/tablet
   ----------------------------------------- */
@media (max-width:860px){
  .table-lessons colgroup,
  .table-lessons thead{
    display:none;
  }

  .table-lessons,
  .table-lessons tbody,
  .table-lessons tr,
  .table-lessons td{
    display:block;
    width:100%;
  }

  .table-lessons tbody tr.mainrow,
  .table-lessons tbody tr.subrow{
    border:1px solid var(--glass-stroke) !important;
    border-radius:14px;
    background:var(--lesson-block-bg) !important;
    padding:10px 12px;
  }

  .table-lessons tbody tr.mainrow{
    border-bottom-left-radius:0 !important;
    border-bottom-right-radius:0 !important;
    border-bottom:0 !important;
    margin:0;
    padding-bottom:6px;
  }

  .table-lessons tbody tr.subrow{
    border-top-left-radius:0 !important;
    border-top-right-radius:0 !important;
    margin:0 0 12px 0;
    padding-top:6px;
  }

  .table-lessons tbody tr.mainrow > td,
  .table-lessons tbody tr.subrow > td,
  .table-lessons tbody td.actions{
    border:0 !important;
    background:transparent !important;
    padding:8px 0 !important;
    border-radius:0 !important;
  }

  .table-lessons tbody tr.gap-row{
    display:none;
  }

  .table-lessons .col-encontro::before,
  .table-lessons .col-subject::before,
  .table-lessons .col-content::before,
  .table-lessons .col-date::before,
  .table-lessons .actions::before,
  .table-lessons .sub-col-subject::before,
  .table-lessons .sub-col-content::before,
  .table-lessons .sub-col-date::before{
    display:block;
    margin-bottom:6px;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:#9fb0c6;
  }

  .table-lessons .col-encontro::before{ content:'Encontro'; }
  .table-lessons .col-subject::before{ content:'Assunto'; }
  .table-lessons .col-content::before{ content:'Conteúdo'; }
  .table-lessons .col-date::before{ content:'Data'; }
  .table-lessons .actions::before{ content:'Ações'; }
  .table-lessons .sub-col-subject::before{ content:'Imagem / Ícone'; }
  .table-lessons .sub-col-content::before{ content:'Arquivos'; }
  .table-lessons .sub-col-date::before{ content:'Local'; }

  .table-lessons .sub-col-encontro{
    display:none !important;
  }
  .table-lessons .actions-spacer{
    display:none !important;
  }

  .table-lessons .actions-wrap{
    justify-content:flex-start;
    flex-wrap:wrap;
  }

  .table-lessons .btn.launch-btn.btn-action{
    width:40px !important;
    height:40px !important;
  }

  .table-lessons .image-select{
    width:100%;
    max-width:none;
  }

  .table-lessons .attachments{
    padding:2px 0 0 !important;
  }

  .table-lessons .attachments-inner{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }

  .table-lessons .file-group{
    width:100%;
  }

  .table-lessons .file-name{
    max-width:100%;
  }

  .table-lessons .btn-file{
    width:auto;
  }
}





/* === Image Select === */
/* === Image Select (custom) ===================================== */
.image-select{
  position: relative;
  width: 240px;            /* ajuste livre */
  font: inherit;
}

/* Controle fechado (botão do select) */
.image-select .is-control{
  display: flex; align-items: center; gap: .5rem;
  background: #fff;
  border: 1px solid #e5e7eb; border-radius: 10px;
  padding: .5rem .75rem;
  box-shadow: var(--shadow, 0 8px 20px rgba(0,0,0,.08));
  cursor: pointer; min-height: 42px;
}
.image-select .is-control:focus-visible{
  outline: 2px solid var(--primary, #046b99);
  outline-offset: 2px;
}
.image-select .is-control img{
  width: 24px; height: 24px; border-radius: 6px;
  object-fit: cover; object-position: center;
  flex: 0 0 24px; display: inline-block;
}
.image-select .is-control .is-label{
  flex: 1; min-width: 0;            /* para o ellipsis funcionar */
  color: var(--text, #2c3e50);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.image-select .is-control .is-caret{
  margin-left: .25rem; transform: translateY(1px);
  opacity: .6;
}

/* Dropdown — oculto por padrão; aparece quando .open */
.image-select .is-dropdown{
  display: none;                     /* fechado por padrão */
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  z-index: 10000;
  background: #fff;
  border: 1px solid #e5e7eb; border-radius: 12px;
  padding: .25rem;
  max-height: 280px; overflow: auto;
  box-shadow: var(--shadow, 0 8px 20px rgba(0,0,0,.12));
}
.image-select.open .is-dropdown{
  display: block;
  background: var(--accent, #d9edf7);     /* fundo quando aberto */
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* Opções do dropdown */
.image-select .is-option{
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .6rem;
  border-radius: 10px; cursor: pointer;
  background: transparent;
}
.image-select .is-option:hover{
  background: rgba(255,255,255,.6);       /* contraste no hover */
}
.image-select .is-option.active{
  outline: 2px solid var(--primary, #046b99);
}
.image-select .is-option img{
  width: 24px; height: 24px; border-radius: 6px;
  object-fit: cover; object-position: center;
  flex: 0 0 24px; display: inline-block;
}
/* Texto do arquivo ao lado do ícone (com extensão) */
.image-select .is-option > *:last-child{
  color: #111;                         /* legível sobre o accent */
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* Estado “sem imagens” */
.image-select .is-empty{
  padding: .75rem; color: #6b7280; text-align: center;
}

/* Blindagem contra regras globais de img dentro da tabela */
.table-lessons .image-select img{
  max-width: 24px !important;
  height: 24px !important;
}

/* Se algum container cortar o dropdown */
.table-wrapper,
#kpi-details, #kpi-details .grid, #kpi-details .card,
#kpi-details .table-lessons, .image-select{
  overflow: visible !important;
}
.card{ overflow: visible; }

/* Touch: mantém feedback no toque */
@media (hover:none){
  .image-select .is-option:hover{ background: transparent; }
  .image-select .is-option:active{ background: rgba(255,255,255,.6); }
}

/* === Quando o dropdown é portado para o <body> ===================
   Estes seletores pegam o menu mesmo fora de .image-select
-------------------------------------------------------------------*/

/* Caixa do menu (cor de fundo branca, borda e sombra) */
.is-dropdown{
  position: fixed;                /* o JS já posiciona; mantemos consistente */
  background: #fff !important;    /* >>> fundo branco visível */
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: .25rem !important;
  max-height: 280px !important;
  overflow: auto !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
  z-index: 10000 !important;
}

/* Cada opção: ícone + nome do arquivo AO LADO */
.is-dropdown .is-option{
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .6rem; border-radius: 10px; cursor: pointer;
  background: transparent;
}
.is-dropdown .is-option:hover{ background: rgba(0,0,0,.06); }
.is-dropdown .is-option.active{ outline: 2px solid var(--primary, #046b99); }

/* Ícone sempre pequeno/padronizado */
.is-dropdown .is-option img{
  width: 24px; height: 24px; border-radius: 6px;
  object-fit: cover; object-position: center;
  flex: 0 0 24px; display: inline-block;
}

/* Texto do arquivo (com extensão) ao lado do ícone */
.is-dropdown .is-option > *:last-child{
  color: #111;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Botão X do anexo */
.btn-remove-file{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 8px;
  border: none;
  border-radius: 50%;          /* redondo */
  background: #e74c3c;         /* vermelho */
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  transition: background .2s ease;
}
.btn-remove-file:hover{
  background: #c0392b;         /* vermelho mais escuro no hover */
}
.btn-remove-file img{
  width: 14px;
  height: 14px;
  filter: brightness(0) invert(1); /* força o ícone a ficar branco */
}
.btn-remove-file.is-loading{
  position: relative;
  cursor: wait;
  pointer-events: none;
}
.btn-remove-file.is-loading img{
  opacity: 0;
}
.btn-remove-file.is-loading::after{
  content:'';
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  animation:remove-file-spin .8s linear infinite;
}
@keyframes remove-file-spin{
  to{ transform:rotate(360deg); }
}

/* Botões SweetAlert integrados ao modelo */
.swal2-popup {
  font-family: 'DM Sans', sans-serif;
  border-radius: var(--radius);
}

.swal2-title {
  font-weight: 700;
  color: var(--text);
}

.btn-confirm {
  background-color: var(--error);
  color: #fff;
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 500;
}

.btn-cancel {
  background-color: var(--accent);
  color: var(--text);
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 500;
}

/* Aparência do SweetAlert integrada ao tema */
.swal2-rounded { border-radius: var(--radius); font-family: 'DM Sans', sans-serif; }
.swal2-title { font-weight: 700; color: var(--text); }

/* Botões do modal seguindo o padrão do projeto */
.btn-confirm, .btn-cancel {
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 500;
}

/* =========================
   Grade (Lançamento de Notas)
   ========================= */
#grade-table th.center,
#grade-table td.center{
  text-align:center;
}

#grade-table .td-left{
  text-align:left;
}

#grade-table .grade-input{
  width:72px;
  padding:8px 10px;
  border:1px solid var(--glass-stroke);
  border-radius:10px;
  background:rgba(255,255,255,.04);
  color:#fff;
  text-align:center;
}

#grade-table .readonly{
  display:inline-block;
  min-width:24px;
  font-weight:700;
}

#grade-table .grade-assessment-head{
  white-space:nowrap;
}

#grade-table .grade-assessment-actions{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:8px;
  vertical-align:middle;
}

#grade-table .grade-assessment-btn{
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid var(--glass-stroke);
  background:rgba(255,255,255,.08);
  color:#fff;
  line-height:1;
  font-weight:700;
  cursor:pointer;
}

#grade-table .grade-assessment-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.btn-confirm { background: var(--error); color: #fff; }
.btn-cancel  { background: var(--accent); color: var(--text); }

/* ===== SweetAlert2 — tema escopado APENAS ao modal do logout ===== */

.swal2-container { backdrop-filter: blur(2px) saturate(140%); }

/* Popup claro, borda e sombra suaves */
.swal2-popup.swal2-themed{
  background: #fff;
  color: #0b1437;               /* texto escuro p/ fundo branco */
  border-radius: 14px;
  border: 1px solid rgba(2, 6, 23, 0.08);
  box-shadow: 0 18px 60px rgba(2, 6, 23, .18);
  font-family: "DM Sans", ui-sans-serif, -apple-system, Segoe UI, Roboto, Ubuntu, Helvetica, Arial, sans-serif;
}

/* Título e texto dentro do popup (escopo fechado) */
.swal2-popup.swal2-themed .swal2-title{
  font-weight: 800;
  color: #0b1437;
  letter-spacing: .01em;
}
.swal2-popup.swal2-themed .swal2-html-container{
  color: rgba(11, 20, 55, .88);
  font-size: 0.98rem;
}

/* Ações: melhorar respiro entre os botões */
.swal2-popup.swal2-themed .swal2-actions{
  gap: 10px !important;
  margin-top: 12px !important;
}

/* Botões — usam as classes definidas no JS (customClass) */
.swal2-popup.swal2-themed .btn-confirm,
.swal2-popup.swal2-themed .btn-cancel{
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 10px 16px;
  border-radius: 14px;
  font-weight: 800;
  line-height: 1.1;
  cursor: pointer;
  user-select: none;
  transition: transform .06s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease, border-color .12s ease;
  outline: none;
  border: 1px solid transparent;
}

/* Confirmar — vermelho sólido, **texto branco visível** */
.swal2-popup.swal2-themed .btn-confirm{
  background: var(--red, #E31A1A);
  color: #fff;
  box-shadow: 0 8px 20px rgba(227, 26, 26, .28);
}
.swal2-popup.swal2-themed .btn-confirm:hover{ filter: brightness(0.95); transform: translateY(-1px); }
.swal2-popup.swal2-themed .btn-confirm:active{ transform: translateY(0); }
.swal2-popup.swal2-themed .btn-confirm:focus-visible{
  box-shadow: 0 0 0 3px rgba(227, 26, 26, .26);
}

/* Cancelar — ghost/outline com alto contraste no fundo branco */
.swal2-popup.swal2-themed .btn-cancel{
  background: #fff;
  color: #0b1437;
  border-color: rgba(11, 20, 55, .18);
}
.swal2-popup.swal2-themed .btn-cancel:hover{
  background: rgba(106,210,255,.12);   /* leve “accent”, sem poluir */
}
.swal2-popup.swal2-themed .btn-cancel:active{ filter: brightness(0.98); }
.swal2-popup.swal2-themed .btn-cancel:focus-visible{
  box-shadow: 0 0 0 3px rgba(66, 42, 251, .26);
}

/* Ícone do alerta (mantém padrão, só suaviza a borda no tema) */
.swal2-popup.swal2-themed .swal2-icon{
  box-shadow: none !important;
  border-color: rgba(11, 20, 55, .18) !important;
}

/* Barra de progresso (se usada) com degradê da marca */
.swal2-popup.swal2-themed .swal2-timer-progress-bar{
  background: linear-gradient(90deg, var(--brand1, #422AFB), var(--brand2, #6AD2FF));
}

/* Disabled */
.swal2-popup.swal2-themed .btn-confirm:disabled,
.swal2-popup.swal2-themed .btn-cancel:disabled{
  opacity: .6;
  pointer-events: none;
}

/* ====== PÁGINA DE LOGIN (escopo: .auth-*) ====== */
.auth-wrap{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.auth-card{
  width: min(440px, 92vw);
  background: var(--glass);
  border: 1px solid var(--glass-stroke);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.28);
  color: var(--ink);
  padding: 26px 22px 22px;
  backdrop-filter: blur(12px) saturate(160%);
}
.auth-header{
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: start;
  gap: 12px;
  margin-bottom: 14px;
}
.auth-title{ margin:0; font-weight: 800; letter-spacing: .02em; font-size: 20px; }
.auth-sub{ margin: 4px 0 0; font-size: 13px; color: var(--muted); }

.form .group{ margin-top: 14px; }
.form label{ display:block; font-size: 12px; color:#cbd5e1; margin:0 0 6px 2px; }

.field{ position: relative; display: grid; align-items: center; }

/* input base */
.field input{
  width: 100%;
  padding: 12px 44px 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--glass-stroke);
  background: rgba(255,255,255,.06);
  color: #fff;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.field input::placeholder{ color: #94a3b8; }
.field input:focus{ box-shadow: 0 0 0 2px rgba(255,255,255,.15) inset; }

/* botão revelar senha */
.toggle-pass{
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--glass-stroke);
  background: rgba(255,255,255,.06);
  color: var(--ink);
  cursor: pointer;
}

/* sufixo fixo @ufpr.br no campo de email */
.field .suffix{
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  height: 34px; display: grid; place-items: center;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--glass-stroke);
  background: rgba(255,255,255,.06);
  color: #e2e8f0;
  font-size: 13px;
  pointer-events: none;
}
.field input.email-localpart{
  padding-right: 110px; /* espaço pro @ufpr.br */
}

.auth-card .actions{ margin-top: 18px; display: grid; gap: 10px; }
.btn:disabled{ opacity:.7; pointer-events: none; }

#submitBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
}

#submitBtn.is-loading{ cursor: wait; }

.auth-btn-spinner{
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  animation:auth-btn-spin .8s linear infinite;
}

@keyframes auth-btn-spin{
  to{ transform: rotate(360deg); }
}

/* rodapé sutil */
.auth-footer{
  margin-top: 14px; padding-top: 10px;
  border-top: 1px solid var(--glass-stroke);
  font-size: 12px; color: #94a3b8; text-align: center;
}

/* ===== SweetAlert2 — tema escopado só no modal ===== */
.swal2-container{ backdrop-filter: blur(2px) saturate(140%); }

.swal2-popup.swal2-themed{
  background: #fff; color: #0b1437;
  border-radius: 14px;
  border: 1px solid rgba(2, 6, 23, 0.08);
  box-shadow: 0 18px 60px rgba(2, 6, 23, .18);
  font-family: "DM Sans", ui-sans-serif, -apple-system, Segoe UI, Roboto, Ubuntu, Helvetica, Arial, sans-serif;
}
.swal2-popup.swal2-themed .swal2-title{
  font-weight: 800; color: #0b1437; letter-spacing: .01em;
}
.swal2-popup.swal2-themed .swal2-html-container{
  color: rgba(11, 20, 55, .88); font-size: 0.98rem;
}
.swal2-popup.swal2-themed .swal2-actions{ gap: 10px !important; margin-top: 12px !important; }

.swal2-popup.swal2-themed .btn-confirm,
.swal2-popup.swal2-themed .btn-cancel{
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:10px 16px; border-radius:14px; font-weight:800; line-height:1.1;
  cursor:pointer; user-select:none; transition:transform .06s, box-shadow .12s, background-color .12s, color .12s, border-color .12s;
  outline:none; border:1px solid transparent;
}
.swal2-popup.swal2-themed .btn-confirm{
  background: var(--red, #E31A1A); color:#fff;
  box-shadow: 0 8px 20px rgba(227,26,26,.28);
}
.swal2-popup.swal2-themed .btn-confirm:hover{ filter:brightness(.95); transform:translateY(-1px); }
.swal2-popup.swal2-themed .btn-confirm:active{ transform:translateY(0); }
.swal2-popup.swal2-themed .btn-confirm:focus-visible{ box-shadow:0 0 0 3px rgba(227,26,26,.26); }

.swal2-popup.swal2-themed .btn-cancel{
  background:#fff; color:#0b1437; border-color: rgba(11,20,55,.18);
}
.swal2-popup.swal2-themed .btn-cancel:hover{ background: rgba(106,210,255,.12); }
.swal2-popup.swal2-themed .btn-cancel:active{ filter:brightness(.98); }
.swal2-popup.swal2-themed .btn-cancel:focus-visible{ box-shadow:0 0 0 3px rgba(66,42,251,.26); }



/* ===== Fix dos SelectItem (tela criar turma) ===== */
[data-page="create-class"] .search.select-mode {
  display: flex !important;       /* o wrapper é flex */
  align-items: stretch;           /* o select ocupa a altura toda */
  position: relative;
}

/* rótulo flutuante */
[data-page="create-class"] .search.select-mode .label {
  position: absolute; left: 14px; top: 7px;
  font-size: 12px; opacity: .75; pointer-events: none;
}

/* >>> CRÍTICO: faz o <select> expandir no flex e não encolher (Safari/Chrome) */
[data-page="create-class"] .search.select-mode select {
  flex: 1 1 auto !important;   /* deixa crescer/encolher */
  min-width: 0 !important;     /* Safari precisa disso para liberar largura */
  width: auto !important;      /* ignora larguras herdadas estranhas */
  display: block;

  height: 56px;
  padding: 26px 64px 10px 14px;  /* espaço pro label e setinha */
  border-radius: 12px;
  box-sizing: border-box;

  /* resets tipográficos que causavam “S↵e” */
  text-indent: 0 !important;
  white-space: nowrap !important;
  letter-spacing: normal !important;
  word-break: normal !important;
  writing-mode: horizontal-tb !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  -webkit-appearance: none;
  appearance: none;
}

/* larguras confortáveis dos 3 campos */
[data-page="create-class"] #semesterCreateControl   { flex: 0 0 260px; min-width: 240px; }
[data-page="create-class"] #courseCreateControl,
[data-page="create-class"] #disciplineCreateControl { flex: 1 1 420px; min-width: 360px; }

/* Botão mini dentro do seletor (tela create-class) */
[data-page="create-class"] .select-kebab {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 28px;
  height: 28px;
  display: none;                 /* só aparece quando há valor selecionado */
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: .8;
}
[data-page="create-class"] .select-kebab:hover { opacity: 1; }
[data-page="create-class"] .search.select-mode.has-value .select-kebab { display: inline-flex; }
[data-page="create-class"] .select-kebab img { width: 18px; height: 18px; }

/* ===== Tela Criar novo curso/turma ===== */
[data-page="create-class"] .table-students input[type="text"].big-input{
  width: 100%;
  height: 46px;
  padding: 10px 12px;
  font-size: 16px;
  line-height: 1.25;
  border-radius: 12px;
}

[data-page="create-class"] .table-students .row-actions{
  display: flex;
  gap: 8px;
  justify-content: center;
}

[data-page="create-class"] .table-students .row-actions .btn{
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

[data-page="create-class"] .table-students .row-actions .btn img{
  width: 18px; height: 18px;
}

/* 1) Diga para a tabela respeitar as larguras do <colgroup> */
[data-page="create-class"] .table-students{
  table-layout: fixed;   /* <- importante pra largura pegar certinho */
  width: 100%;
}

/* 2) Aumente a coluna da Matrícula */
[data-page="create-class"] .table-students col:nth-child(1){
  width: 220px !important;    /* ajuste aqui */
}
[data-page="create-class"] .table-students .col-matricula{
  min-width: 480px;           /* combine com o valor acima */
}

/* (opcional) altura do input */
[data-page="create-class"] .table-students .col-matricula .big-input{
  height: 50px;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;          /* altura do footer */
  background: rgba(226,232,240,0.08);      /* cor de fundo */
  color: #fff;           /* cor do texto */
  text-align: center;
  line-height: 40px;     /* centralizar verticalmente */
}