/* =========================================================
   Painel administrativo — BioVeg UFU
   Reaproveita os tokens de site.css; aqui só o que é específico do admin.
   ========================================================= */

:root {
  --barra: 252px;
  --topo: 64px;
}

body.admin {
  background: var(--areia);
  display: grid;
  grid-template-columns: var(--barra) 1fr;
  grid-template-rows: var(--topo) 1fr;
  grid-template-areas: "barra topo" "barra principal";
  min-height: 100vh;
}

/* ---------------- Barra lateral ---------------- */

.barra {
  grid-area: barra; background: var(--noite); color: #a8bcc7;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 40;
}
.barra__marca {
  display: flex; align-items: center; gap: .7rem; padding: 1rem 1.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08); text-decoration: none; min-height: var(--topo);
}
.barra__marca img { width: 36px; height: 36px; border-radius: 50%; }
.barra__marca strong { color: #fff; font-family: var(--serif); font-size: 1rem; display: block; line-height: 1.2; }
.barra__marca span { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: #6b8795; }

.barra__nav { flex: 1; overflow-y: auto; padding: 1rem .7rem; }
.barra__grupo {
  font-size: .66rem; letter-spacing: .15em; text-transform: uppercase; color: #5b7683;
  font-weight: 700; padding: 1.25rem .6rem .5rem;
}
.barra a.item {
  display: flex; align-items: center; gap: .75rem; padding: .62rem .7rem; border-radius: var(--r-sm);
  color: #a8bcc7; text-decoration: none; font-size: .9rem; font-weight: 500;
  transition: background var(--transicao), color var(--transicao);
}
.barra a.item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.barra a.item[aria-current="page"] { background: var(--ipe); color: var(--noite); font-weight: 600; }
.barra a.item svg { flex-shrink: 0; }
.barra .contador {
  margin-left: auto; font-size: .72rem; font-weight: 700; background: rgba(255, 255, 255, .12);
  padding: .1rem .45rem; border-radius: 999px; min-width: 22px; text-align: center;
}
.barra a.item[aria-current="page"] .contador { background: rgba(12, 39, 51, .18); }

.barra__pe { padding: .9rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.barra__usuario { display: flex; align-items: center; gap: .7rem; padding: .3rem .4rem .8rem; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--ipe); color: var(--noite);
  display: grid; place-items: center; font-weight: 700; font-size: .85rem; flex-shrink: 0;
}
.barra__usuario div { min-width: 0; }
.barra__usuario strong { color: #fff; font-size: .85rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra__usuario span { font-size: .7rem; color: #6b8795; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }

/* ---------------- Topo ---------------- */

.topo {
  grid-area: topo; background: var(--superficie); border-bottom: 1px solid var(--borda);
  display: flex; align-items: center; gap: 1rem; padding: 0 clamp(1rem, 3vw, 2rem);
  position: sticky; top: 0; z-index: 30;
}
.topo h1 { font-size: 1.15rem; margin: 0; font-family: var(--sans); font-weight: 700; letter-spacing: -.01em; }
.topo__acoes { margin-left: auto; display: flex; gap: .55rem; align-items: center; }
.barra-botao { display: none; background: none; border: 1px solid var(--borda); border-radius: var(--r-sm); width: 40px; height: 40px; cursor: pointer; align-items: center; justify-content: center; color: var(--noite); }

.principal { grid-area: principal; padding: clamp(1.25rem, 3vw, 2rem); max-width: 1500px; width: 100%; }

/* ---------------- Cartões de métrica ---------------- */

.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.metrica {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r);
  padding: 1.15rem 1.25rem; position: relative; overflow: hidden;
}
.metrica::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--ipe); }
.metrica--ok::before { background: var(--cerrado); }
.metrica--espera::before { background: var(--ceu); }
.metrica--alerta::before { background: #d98324; }
.metrica dt { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); font-weight: 700; }
.metrica dd { margin: .35rem 0 0; font-family: var(--serif); font-size: 2.1rem; line-height: 1; color: var(--noite); }
.metrica small { display: block; margin-top: .4rem; font-size: .78rem; color: var(--tinta-fraca); }

/* ---------------- Blocos e tabelas ---------------- */

.bloco {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r);
  margin-bottom: 1.5rem; overflow: hidden;
}
.bloco__topo {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--borda);
}
.bloco__topo h2 { font-size: 1rem; margin: 0; font-family: var(--sans); font-weight: 700; }
.bloco__topo .btn { margin-left: auto; }
.bloco__corpo { padding: 1.25rem; }

.tabela-rolagem { overflow-x: auto; }
table.dados { width: 100%; border-collapse: collapse; font-size: .89rem; }
table.dados th {
  text-align: left; padding: .7rem 1rem; background: var(--areia); color: var(--tinta-suave);
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
  white-space: nowrap; border-bottom: 1px solid var(--borda);
}
table.dados th a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
table.dados th a:hover { color: var(--noite); }
table.dados td { padding: .8rem 1rem; border-bottom: 1px solid var(--borda); vertical-align: middle; }
table.dados tr:last-child td { border-bottom: 0; }
table.dados tbody tr { transition: background var(--transicao); }
table.dados tbody tr:hover { background: #fcfbf7; }
table.dados .nowrap { white-space: nowrap; }
/* Larguras mínimas para as colunas densas: a tabela rola na horizontal em vez de espremer. */
table.dados .col-nome { min-width: 190px; }
table.dados .col-email { min-width: 190px; }
table.dados .col-inst { min-width: 200px; }
table.dados .acoes { display: flex; gap: .35rem; justify-content: flex-end; }

.mini-botao {
  width: 32px; height: 32px; border-radius: var(--r-sm); border: 1px solid var(--borda);
  background: var(--superficie); display: grid; place-items: center; cursor: pointer;
  color: var(--tinta-suave); text-decoration: none; transition: all var(--transicao); padding: 0;
}
.mini-botao:hover { border-color: var(--noite); color: var(--noite); }
.mini-botao--perigo:hover { border-color: #c0392b; color: #c0392b; background: #fdf3f2; }

.miniatura { width: 40px; height: 40px; border-radius: var(--r-sm); object-fit: cover; border: 1px solid var(--borda); background: var(--areia); }
.miniatura--contain { object-fit: contain; padding: 3px; }
.miniatura--vazia { display: grid; place-items: center; color: var(--tinta-fraca); }

/* ---------------- Selos de status ---------------- */

.selo {
  display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .6rem; border-radius: 999px;
  font-size: .74rem; font-weight: 600; white-space: nowrap; border: 1px solid;
}
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.selo--PENDENTE { background: #fdf6e3; border-color: #ecd9a0; color: #8a6510; }
.selo--CONFIRMADA { background: var(--cerrado-claro); border-color: #bcd6bd; color: #2f5632; }
.selo--CANCELADA { background: #fdf3f2; border-color: #f0c4bf; color: #8f2c20; }
.selo--ESPERA { background: var(--ceu-claro); border-color: #a9dcf2; color: #0a5f80; }
.selo--sim { background: var(--cerrado-claro); border-color: #bcd6bd; color: #2f5632; }
.selo--nao { background: var(--areia); border-color: var(--borda); color: var(--tinta-fraca); }
.selo--ADMIN { background: var(--noite); border-color: var(--noite); color: #fff; }
.selo--EDITOR { background: var(--areia); border-color: var(--borda); color: var(--tinta-suave); }

/* ---------------- Filtros ---------------- */

.filtros { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; }
.filtros .campo { margin: 0; flex: 1 1 148px; min-width: 0; }
.filtros .campo--busca { flex: 2 1 260px; }
.filtros label { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); font-weight: 700; }
.filtros input, .filtros select { padding: .55rem .75rem; font-size: .88rem; }
.busca-campo { position: relative; }
.busca-campo svg { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--tinta-fraca); pointer-events: none; }
.busca-campo input { padding-left: 2.3rem; }

/* ---------------- Paginação ---------------- */

.paginacao {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .9rem 1.25rem; border-top: 1px solid var(--borda); font-size: .85rem; color: var(--tinta-suave);
}
.paginacao__botoes { display: flex; gap: .3rem; }
.paginacao a, .paginacao span.pag {
  min-width: 34px; height: 34px; padding: 0 .55rem; border-radius: var(--r-sm); border: 1px solid var(--borda);
  display: grid; place-items: center; text-decoration: none; color: var(--tinta-suave); background: var(--superficie);
  transition: all var(--transicao);
}
.paginacao a:hover { border-color: var(--noite); color: var(--noite); }
.paginacao span.pag[aria-current] { background: var(--noite); border-color: var(--noite); color: #fff; font-weight: 600; }
.paginacao span.pag:not([aria-current]) { opacity: .45; }

/* ---------------- Gráficos ---------------- */

.graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 1.25rem; margin-bottom: 1.5rem; }
.grafico-caixa { position: relative; height: 260px; }
.grafico-caixa canvas { max-width: 100%; }

/* ---------------- Login ---------------- */

body.login {
  display: grid; place-items: center; min-height: 100vh; padding: 1.5rem;
  background:
    radial-gradient(760px 420px at 15% 10%, rgba(27, 165, 220, .16) 0%, transparent 60%),
    radial-gradient(640px 380px at 85% 90%, rgba(242, 179, 7, .16) 0%, transparent 60%),
    var(--noite);
}
.login__caixa {
  background: var(--superficie); border-radius: var(--r-xl); box-shadow: var(--sombra-lg);
  padding: clamp(1.75rem, 5vw, 2.75rem); width: min(100%, 420px);
}
.login__marca { text-align: center; margin-bottom: 1.75rem; }
.login__marca img { width: 66px; height: 66px; border-radius: 50%; margin: 0 auto .9rem; }
.login__marca h1 { font-size: 1.35rem; margin-bottom: .2rem; }
.login__marca p { font-size: .85rem; color: var(--tinta-suave); margin: 0; }
.login__rodape { text-align: center; margin-top: 1.5rem; font-size: .85rem; }
.login__rodape a { color: var(--tinta-suave); }
.login__voltar { display: block; text-align: center; margin-top: 1.5rem; color: #7d98a6; font-size: .84rem; text-decoration: none; }
.login__voltar:hover { color: #fff; }

/* ---------------- Formulários do admin ---------------- */

.form-admin { max-width: 720px; }
.form-admin .bloco__corpo > .campo:last-child { margin-bottom: 0; }
.acoes-form {
  display: flex; gap: .7rem; align-items: center; padding: 1rem 1.25rem;
  border-top: 1px solid var(--borda); background: #fcfbf7; flex-wrap: wrap;
}
.acoes-form .btn--perigo { margin-left: auto; }
.btn--perigo { background: #fdf3f2; border-color: #f0c4bf; color: #8f2c20; }
.btn--perigo:hover { background: #c0392b; border-color: #c0392b; color: #fff; }

.previa {
  display: flex; align-items: center; gap: 1rem; padding: .85rem; margin-bottom: .7rem;
  border: 1px dashed var(--borda); border-radius: var(--r-sm); background: var(--areia);
}
.previa img { width: 66px; height: 66px; object-fit: contain; border-radius: var(--r-sm); background: var(--superficie); }

input[type="file"] {
  width: 100%; padding: .6rem; font-size: .86rem; border: 1.5px dashed var(--borda);
  border-radius: var(--r-sm); background: var(--superficie); cursor: pointer;
}
input[type="file"]::file-selector-button {
  border: 1px solid var(--borda); background: var(--areia); padding: .4rem .8rem;
  border-radius: var(--r-sm); margin-right: .8rem; cursor: pointer; font-family: var(--sans); font-weight: 600;
}

/* Editor rico */
.editor { background: var(--superficie); border: 1.5px solid var(--borda); border-radius: var(--r-sm); overflow: hidden; }
.editor:focus-within { border-color: var(--ceu); box-shadow: 0 0 0 3px rgba(27, 165, 220, .15); }
.ql-toolbar.ql-snow { border: 0 !important; border-bottom: 1px solid var(--borda) !important; background: var(--areia); }
.ql-container.ql-snow { border: 0 !important; font-family: var(--sans); font-size: .95rem; }
.ql-editor { min-height: 320px; line-height: 1.7; }
.ql-editor h2 { font-size: 1.4rem; } .ql-editor h3 { font-size: 1.15rem; }

/* ---------------- Detalhe da inscrição ---------------- */

.detalhe-grade { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.25rem; align-items: start; }
.dados-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.15rem; }
.dados-lista dt { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-fraca); font-weight: 700; margin-bottom: .2rem; }
.dados-lista dd { margin: 0; font-size: .94rem; word-break: break-word; }
.dados-lista dd.vazio-valor { color: var(--tinta-fraca); font-style: italic; }
.status-opcoes { display: grid; gap: .5rem; }
.status-opcoes .escolha--caixa { padding: .7rem .9rem; font-size: .88rem; }

/* ---------------- Diversos ---------------- */

.migalhas { font-size: .82rem; color: var(--tinta-fraca); margin-bottom: .85rem; }
.migalhas a { color: var(--tinta-suave); text-decoration: none; }
.migalhas a:hover { color: var(--noite); }

.linha-log { display: flex; gap: .7rem; align-items: baseline; padding: .55rem 0; border-bottom: 1px dashed var(--borda); font-size: .86rem; }
.linha-log:last-child { border-bottom: 0; }
.linha-log time { color: var(--tinta-fraca); font-size: .78rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.acao-tag {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; padding: .12rem .45rem;
  border-radius: 4px; background: var(--areia); color: var(--tinta-suave); white-space: nowrap;
}
.acao-tag--EXCLUIR, .acao-tag--LOGIN_FALHOU, .acao-tag--ACESSO_NEGADO { background: #fdf3f2; color: #8f2c20; }
.acao-tag--CRIAR, .acao-tag--LOGIN { background: var(--cerrado-claro); color: #2f5632; }

.dica { font-size: .85rem; color: var(--tinta-suave); background: var(--areia); border-radius: var(--r-sm); padding: .8rem 1rem; }

/* ---------------- Responsivo ---------------- */

@media (max-width: 1080px) {
  .detalhe-grade { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  body.admin { grid-template-columns: 1fr; grid-template-areas: "topo" "principal"; }
  .barra-botao { display: flex; }
  .barra {
    position: fixed; inset: 0 auto 0 0; width: 262px; transform: translateX(-100%);
    transition: transform 240ms cubic-bezier(.22,.61,.36,1); box-shadow: var(--sombra-lg);
  }
  .barra[data-aberta] { transform: none; }
  .fundo-barra {
    position: fixed; inset: 0; background: rgba(12, 39, 51, .5); z-index: 39;
    opacity: 0; pointer-events: none; transition: opacity 240ms;
  }
  .fundo-barra[data-visivel] { opacity: 1; pointer-events: auto; }
  .topo h1 { font-size: 1rem; }
}

@media (max-width: 620px) {
  .topo__acoes .btn span { display: none; }
  .metrica dd { font-size: 1.7rem; }
  .acoes-form { flex-direction: column; align-items: stretch; }
  .acoes-form .btn { width: 100%; }
  .acoes-form .btn--perigo { margin-left: 0; }
}