/* ══════════════════════════════════════════════════════════════════════════
   CollembolaBR — Sistema de Design
   Folha compartilhada por todas as páginas (portal, módulos, admin).
   Direção: técnico/científico, dark refinado, tipografia com propósito
   (nomes taxonômicos em itálico serifado — mesma convenção de periódicos
   de taxonomia), profundidade sutil, um único padrão de navegação.
   ══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Source+Serif+4:ital,wght@1,400;1,500;1,600&display=swap');

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root{
  /* Superfícies */
  --bg:        #0b0e14;
  --surface:   #131822;
  --surface2:  #1a2130;
  --surface3:  #232b3d;
  --border:    #2a3346;
  --border2:   #1f273a;

  /* Texto */
  --text:      #e8edf6;
  --text2:     #93a1b8;
  --text3:     #6b7890;
  --muted:     var(--text2);   /* alias legado */

  /* Marca */
  --accent:    #5aa2ff;
  --accent2:   #3ecb70;
  --warn:      #dba01e;
  --danger:    #f0605a;

  /* Módulos (paleta com hues distintos e distinguíveis entre si) */
  --m-gbif:      #3ecb70;   /* verde   — Collembola GBIF */
  --m-collid:    #5aa2ff;   /* azul    — Collembola ID */
  --m-slink:     #e3b341;   /* âmbar   — SpeciesLink */
  --m-worms:     #a371f7;   /* violeta — WoRMS */
  --m-crz:       #ff8f66;   /* coral   — Cruzamento */
  --m-dwc:       #ec6faa;   /* rosa    — Curadoria DwC */
  --m-protura:   #39c5cf;   /* ciano   — Protura */
  --m-diplura:   #f472b6;   /* magenta — Diplura */

  /* Forma */
  --radius:    9px;
  --r:         var(--radius); /* alias legado */
  --radius-lg: 14px;
  --ease:      cubic-bezier(.2,.7,.3,1);

  /* Tipografia */
  --font-ui:   'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --font-taxon:'Source Serif 4', Georgia, serif;

  /* Sombra */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 6px 20px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.4);
  --shadow-lg: 0 20px 56px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
}

/* ── Reset & base ────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-color:var(--border) transparent}
body{
  font-family:var(--font-ui);
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(90,162,255,.05), transparent 60%),
    radial-gradient(900px 480px at 100% 0%, rgba(62,203,112,.045), transparent 55%),
    var(--bg);
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{font-family:inherit}
a{color:var(--accent);text-decoration:none;transition:color .15s var(--ease)}
a:hover{color:#7fb6ff}
::selection{background:rgba(90,162,255,.28);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--text3)}

/* Números e coordenadas ganham feel técnico */
.mono, .stat-val, .val, td.mono{font-family:var(--font-mono)}

/* Nomes científicos: itálico serifado, como em publicação de taxonomia */
.taxon-nome, em, i, .esp-table em, #esp-table em{font-family:var(--font-taxon);font-style:italic}

/* ── Header + navegação (padrão único para todas as páginas) ───────────── */
header{
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface) 100%);
  border-bottom:1px solid var(--border);
  padding:0 24px;
  height:56px;
  display:flex;
  align-items:center;
  gap:12px;
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter:blur(10px);
}
header h1{font-size:1.02rem;font-weight:600;letter-spacing:-.01em}
header > a:not(.back){color:var(--text2);font-size:.85rem}
header > a:not(.back):hover{color:var(--accent)}

.back{
  background:var(--surface2);border:1px solid var(--border);color:var(--text2);
  padding:5px 12px;border-radius:var(--radius);font-size:.83rem;cursor:pointer;
  text-decoration:none;display:flex;align-items:center;gap:6px;
  transition:color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.back:hover{color:var(--text);border-color:var(--text3);background:var(--surface3)}

.logo{font-size:1.08rem;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.logo .g, .logo .c, .logo span{color:var(--accent2)}
.logo .id{color:var(--accent)}

nav{display:flex;gap:3px;margin-left:auto;flex-wrap:wrap}
nav button{
  background:none;border:none;color:var(--text2);cursor:pointer;
  padding:7px 14px;border-radius:var(--radius);font-size:.84rem;font-weight:500;
  transition:background .15s var(--ease), color .15s var(--ease);
}
nav button:hover{background:var(--surface2);color:var(--text)}
nav button.active{background:rgba(90,162,255,.14);color:var(--accent);font-weight:600}

/* Padrão alternativo (worms/specieslink/cruzamento): nav em barra separada */
body > nav, .navbar{
  background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;gap:3px;padding:8px 24px;margin:0;
}

.h-user, .user-chip{
  background:var(--surface2);border:1px solid var(--border);border-radius:20px;
  padding:4px 12px;font-size:.78rem;color:var(--text2);display:flex;align-items:center;gap:7px;
}
.h-user strong, .user-chip b{color:var(--text);font-weight:600}
.hbadge{background:var(--surface2);border:1px solid var(--border);color:var(--text3);
  font-size:.66rem;font-weight:700;padding:2px 9px;border-radius:20px;letter-spacing:.5px}

.logout-btn{
  background:transparent;border:1px solid var(--border);color:var(--text2);
  cursor:pointer;padding:5px 14px;border-radius:var(--radius);font-size:.8rem;
  transition:all .15s var(--ease);
}
.logout-btn:hover{border-color:var(--danger);color:var(--danger)}

/* ── Layout ──────────────────────────────────────────────────────────────── */
main{max-width:1320px;margin:0 auto;padding:28px 20px}
.section{display:none}
.section.active{display:block;animation:fadein .25s var(--ease)}
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.page-title{margin-bottom:18px}
.page-title h2{font-size:1.32rem;font-weight:700;letter-spacing:-.015em}
.page-title p{color:var(--text2);font-size:.85rem;margin-top:5px;line-height:1.5}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:22px;margin-bottom:16px;box-shadow:var(--shadow-sm);
}
.card h3{font-size:.92rem;font-weight:600;color:var(--accent2);margin-bottom:14px;letter-spacing:-.005em}

.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px}
.stat-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:16px;text-align:center;transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.stat-card:hover{border-color:var(--border2);transform:translateY(-1px)}
.stat-val, .stat-card .val{font-size:1.55rem;font-weight:700;color:var(--accent2);letter-spacing:-.02em}
.stat-lbl, .stat-card .lbl{font-size:.72rem;color:var(--text2);margin-top:5px}

/* ── Botões ──────────────────────────────────────────────────────────────── */
.btn{
  padding:9px 20px;border-radius:var(--radius);font-size:.85rem;font-weight:600;
  cursor:pointer;border:none;font-family:var(--font-ui);
  transition:filter .15s var(--ease), transform .1s var(--ease), opacity .15s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-green, .btn-success, .access-btn{background:var(--accent2);color:#06110a}
.btn-green:hover, .btn-success:hover, .access-btn:hover{filter:brightness(1.12)}
.btn-blue, .btn-primary{background:var(--accent);color:#061423}
.btn-blue:hover, .btn-primary:hover{filter:brightness(1.12)}
.btn-outline{background:none;border:1px solid var(--border);color:var(--text2)}
.btn-outline:hover{border-color:var(--text3);color:var(--text)}
.btn-sm{padding:5px 12px;font-size:.78rem}
.btn-toggle{
  background:var(--surface2);border:1px solid var(--border);color:var(--text2);
  padding:6px 14px;border-radius:var(--radius);font-size:.82rem;cursor:pointer;
  transition:all .15s var(--ease);
}
.btn-toggle:hover{border-color:var(--text3);color:var(--text)}
.btn-toggle.active{background:rgba(62,203,112,.14);border-color:var(--accent2);color:var(--accent2)}

/* ── Formulários / filtros ───────────────────────────────────────────────── */
.filters{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.filter-group{display:flex;flex-direction:column;gap:5px;flex:1;min-width:150px}
.filter-group label, label{font-size:.77rem;color:var(--text2);font-weight:500}
input, select, textarea{
  background:var(--surface2);border:1px solid var(--border);color:var(--text);
  padding:8px 12px;border-radius:var(--radius);font-size:.85rem;width:100%;
  font-family:var(--font-ui);transition:border-color .15s var(--ease), background .15s var(--ease);
}
input:focus, select:focus, textarea:focus{outline:none;border-color:var(--accent);background:var(--surface3)}
input::placeholder{color:var(--text3)}

/* ── Tabelas ─────────────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:.83rem}
th{
  text-align:left;padding:9px 12px;color:var(--text2);font-weight:600;
  border-bottom:1px solid var(--border);font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;
}
td{padding:10px 12px;border-bottom:1px solid var(--border2);vertical-align:middle}
tr:hover td{background:var(--surface2)}
td a{color:var(--accent);font-size:.78rem}

/* ── Badges / chips ──────────────────────────────────────────────────────── */
.badge{display:inline-block;padding:2px 9px;border-radius:12px;font-size:.68rem;font-weight:700;white-space:nowrap;letter-spacing:.2px}
.badge-green{background:rgba(62,203,112,.15);color:var(--accent2)}
.badge-blue{background:rgba(90,162,255,.15);color:var(--accent)}
.badge-warn{background:rgba(219,160,30,.15);color:var(--warn)}
.badge-danger{background:rgba(240,96,90,.15);color:var(--danger)}
.badge-muted{background:rgba(147,161,184,.12);color:var(--text2)}

.mod-chip{
  padding:1px 9px;border-radius:10px;font-size:.7rem;
  background:var(--surface3);border:1px solid var(--border);color:var(--text2);white-space:nowrap;
}
.chip-gbif{border-color:#1c4a2e;color:var(--m-gbif);background:#0d2416}
.chip-coll{border-color:#1c3a5e;color:var(--m-collid);background:#0c1f36}
.chip-slink{border-color:#4a3a15;color:var(--m-slink);background:#241c08}
.chip-worms{border-color:#3a2a5e;color:var(--m-worms);background:#1a1233}
.chip-crz{border-color:#5e3420;color:var(--m-crz);background:#2b160a}
.chip-dwc{border-color:#5e2a44;color:var(--m-dwc);background:#2b1220}
.chip-protura{border-color:#134a4d;color:var(--m-protura);background:#0a2528}
.chip-diplura{border-color:#5e1f42;color:var(--m-diplura);background:#2a0f1f}

/* ── Paginação / estados ─────────────────────────────────────────────────── */
.pagination{display:flex;align-items:center;gap:12px;margin-top:14px;justify-content:flex-end}
.pagination span{font-size:.82rem;color:var(--text2)}
.loading{text-align:center;padding:36px;color:var(--text2);font-size:.9rem}
.loading::before{content:'';display:block;width:22px;height:22px;margin:0 auto 12px;
  border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;
  animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{text-align:center;padding:36px;color:var(--text2);font-size:.88rem;line-height:1.8}
.spinner{display:inline-block;width:13px;height:13px;border:2px solid var(--border);
  border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}

/* ── Tela de login ───────────────────────────────────────────────────────── */
#login-screen, #login-overlay{position:fixed;inset:0;background:var(--bg);z-index:10000;
  display:flex;align-items:center;justify-content:center;flex-direction:column}
.login-wrap{width:100%;max-width:400px;padding:0 20px}
.login-brand{text-align:center;margin-bottom:32px}
.login-brand .logo-big, .login-logo{font-size:1.65rem;font-weight:800;letter-spacing:-.03em}
.login-brand p, .login-sub{color:var(--text2);font-size:.85rem;margin-top:6px}
.login-card, .login-box{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:32px;box-shadow:var(--shadow-lg);
}
.login-card h3{font-size:.92rem;font-weight:700;margin-bottom:20px;color:var(--text)}
.lfield{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.lfield label, .login-label{font-size:.73rem;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.4px}
.login-input, .lfield input{margin-bottom:0}
.login-btn{
  width:100%;margin-top:6px;background:var(--accent);color:#061423;border:none;
  border-radius:var(--radius);padding:11px;font-size:.9rem;font-weight:700;cursor:pointer;
  transition:filter .15s var(--ease);
}
.login-btn:hover{filter:brightness(1.12)}
.login-btn:disabled{opacity:.6;cursor:default}
.login-err{min-height:18px;margin-top:10px;color:var(--danger);font-size:.82rem;text-align:center}

/* ── Portal: grid de módulos ─────────────────────────────────────────────── */
.mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.mod-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:26px 24px;display:flex;flex-direction:column;gap:18px;
  transition:border-color .2s var(--ease), transform .18s var(--ease), box-shadow .2s var(--ease);
  text-decoration:none;color:inherit;cursor:pointer;position:relative;overflow:hidden;
}
.mod-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg, var(--card-color1,var(--accent)), var(--card-color2,var(--accent2)));
  opacity:0;transition:opacity .2s var(--ease)}
.mod-card:hover::before{opacity:1}
.mod-card:hover{border-color:var(--card-border,var(--border));transform:translateY(-3px);box-shadow:var(--shadow-md)}
.mod-card.locked{opacity:.5;cursor:not-allowed;pointer-events:none}

.mod-card.gbif{--card-color1:var(--m-gbif);--card-color2:#26a641;--card-border:rgba(62,203,112,.4)}
.mod-card.collid{--card-color1:var(--m-collid);--card-color2:#1f6feb;--card-border:rgba(90,162,255,.4)}
.mod-card.slink{--card-color1:var(--m-slink);--card-color2:#c68f1e;--card-border:rgba(227,179,65,.4)}
.mod-card.worms{--card-color1:var(--m-worms);--card-color2:#8957e5;--card-border:rgba(163,113,247,.4)}
.mod-card.crz{--card-color1:var(--m-crz);--card-color2:#d9620b;--card-border:rgba(255,143,102,.4)}
.mod-card.dwc{--card-color1:var(--m-dwc);--card-color2:#c23e82;--card-border:rgba(236,111,170,.4)}
.mod-card.protura{--card-color1:var(--m-protura);--card-color2:#1f9aa3;--card-border:rgba(57,197,207,.4)}
.mod-card.diplura{--card-color1:var(--m-diplura);--card-color2:#db61a2;--card-border:rgba(244,114,182,.4)}

.card-head{display:flex;align-items:flex-start;gap:14px}
.card-icon{width:48px;height:48px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;font-size:1.45rem;flex-shrink:0}
.icon-gbif{background:rgba(62,203,112,.1);border:1px solid rgba(62,203,112,.25)}
.icon-collid{background:rgba(90,162,255,.1);border:1px solid rgba(90,162,255,.25)}
.icon-slink{background:rgba(227,179,65,.1);border:1px solid rgba(227,179,65,.25)}
.icon-worms{background:rgba(163,113,247,.1);border:1px solid rgba(163,113,247,.25)}
.icon-crz{background:rgba(255,143,102,.1);border:1px solid rgba(255,143,102,.25)}
.icon-dwc{background:rgba(236,111,170,.1);border:1px solid rgba(236,111,170,.25)}
.icon-protura{background:rgba(57,197,207,.1);border:1px solid rgba(57,197,207,.25)}
.icon-diplura{background:rgba(244,114,182,.1);border:1px solid rgba(244,114,182,.25)}

.card-title-wrap{flex:1}
.card-tag{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;padding:2px 9px;border-radius:20px;margin-bottom:6px}
.tag-gbif{background:rgba(62,203,112,.12);color:var(--m-gbif)}
.tag-collid{background:rgba(90,162,255,.12);color:var(--m-collid)}
.tag-slink{background:rgba(227,179,65,.12);color:var(--m-slink)}
.tag-worms{background:rgba(163,113,247,.12);color:var(--m-worms)}
.tag-crz{background:rgba(255,143,102,.12);color:var(--m-crz)}
.tag-dwc{background:rgba(236,111,170,.12);color:var(--m-dwc)}
.tag-protura{background:rgba(57,197,207,.12);color:var(--m-protura)}
.tag-diplura{background:rgba(244,114,182,.12);color:var(--m-diplura)}

.card-title{font-size:1.14rem;font-weight:700;letter-spacing:-.01em}
.card-desc{color:var(--text2);font-size:.84rem;line-height:1.6}
.submods{display:flex;flex-direction:column;gap:7px}
.submod-item{display:flex;align-items:center;gap:9px;font-size:.83rem}
.submod-item.has{color:var(--text)}
.submod-item.no{color:var(--text3);text-decoration:line-through}
.sub-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.sub-dot.has-gbif{background:var(--m-gbif)}
.sub-dot.has-collid{background:var(--m-collid)}
.sub-dot.has-slink{background:var(--m-slink)}
.sub-dot.has-worms{background:var(--m-worms)}
.sub-dot.has-crz{background:var(--m-crz)}
.sub-dot.has-dwc{background:var(--m-dwc)}
.sub-dot.has-protura{background:var(--m-protura)}
.sub-dot.has-diplura{background:var(--m-diplura)}
.sub-dot.no{background:var(--border)}
.card-footer{margin-top:auto}
.access-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;
  padding:10px 18px;border-radius:var(--radius);border:none;cursor:pointer;
  font-size:.85rem;font-weight:700;font-family:var(--font-ui);
  transition:filter .15s var(--ease);
}
.btn-gbif{background:var(--m-gbif);color:#06170e}
.btn-collid{background:var(--m-collid);color:#061423}
.btn-slink{background:var(--m-slink);color:#241c08}
.btn-worms{background:var(--m-worms);color:#160c2e}
.btn-crz{background:var(--m-crz);color:#2b160a}
.btn-dwc{background:var(--m-dwc);color:#2b1220}
.btn-protura{background:var(--m-protura);color:#062226}
.btn-diplura{background:var(--m-diplura);color:#2a0f1f}
.btn-gbif:hover,.btn-collid:hover,.btn-slink:hover,.btn-worms:hover,
.btn-crz:hover,.btn-dwc:hover,.btn-protura:hover,.btn-diplura:hover{filter:brightness(1.1)}
.btn-locked{background:var(--surface2);color:var(--text3);cursor:not-allowed;border:1px solid var(--border)}

/* ── Rodapé ──────────────────────────────────────────────────────────────── */
footer{background:var(--surface);border-top:1px solid var(--border);
  padding:18px 32px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
footer span{color:var(--text3);font-size:.78rem}
.footer-links{display:flex;gap:16px}
.footer-links a{color:var(--text3);font-size:.78rem}
.footer-links a:hover{color:var(--text)}

/* ── Responsivo ──────────────────────────────────────────────────────────── */
@media(max-width:640px){
  header{height:auto;min-height:52px;padding:8px 12px 0;flex-wrap:wrap;row-gap:0}
  .back{font-size:.75rem;padding:4px 9px}
  .logo{font-size:.95rem}
  nav{width:100%;margin:4px -12px 0;padding:0 12px 6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  nav::-webkit-scrollbar{display:none}
  nav button{padding:8px 12px;font-size:.78rem;white-space:nowrap}
  main{padding:14px 10px}
  .card{padding:16px 14px}
  .page-title h2{font-size:1.12rem}
  .stat-val,.stat-card .val{font-size:1.22rem}
  .stat-card{padding:11px 8px}
  .stats-grid{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
  .btn{min-height:42px;padding:10px 16px}
  .btn-sm{min-height:34px;padding:6px 12px}
  .filters{gap:8px}
  .filter-group{min-width:100px}
  .pagination{justify-content:center;flex-wrap:wrap;gap:8px}
}