/* ============================================
   Professores Notáveis — Design Tokens v1.0
   ============================================ */

:root {
  /* Brand Purple */
  --pn-brand-50: #F4EEFF;
  --pn-brand-100: #E4D6FF;
  --pn-brand-200: #C9AEFF;
  --pn-brand-300: #AA7EFF;
  --pn-brand-400: #8A57FF;
  --pn-brand-500: #6E3BFF;
  --pn-brand-600: #5A2FE0;
  --pn-brand-700: #4722A8;
  --pn-brand-800: #31186F;
  --pn-brand-900: #1D0E42;

  /* Accent Lime */
  --pn-accent-50: #F6FFE5;
  --pn-accent-100: #EAFFB8;
  --pn-accent-200: #DDFF8B;
  --pn-accent-300: #CFFF5F;
  --pn-accent-400: #BFFF34;
  --pn-accent-500: #B6FF2C;
  --pn-accent-600: #8BC91F;
  --pn-accent-700: #669515;
  --pn-accent-800: #44630D;
  --pn-accent-900: #263807;

  /* Neutral */
  --pn-white: #FFFFFF;
  --pn-neutral-50: #F8F9FB;
  --pn-neutral-100: #ECEEF3;
  --pn-neutral-200: #D9DDE6;
  --pn-neutral-300: #BCC3D0;
  --pn-neutral-400: #8A92A3;
  --pn-neutral-500: #5F6675;
  --pn-neutral-600: #444B57;
  --pn-neutral-700: #2D313A;
  --pn-neutral-800: #1B1D23;
  --pn-neutral-900: #111111;

  /* Semantic */
  --pn-success: #22C55E;
  --pn-warning: #F59E0B;
  --pn-error: #EF4444;
  --pn-info: #3B82F6;

  /* Core tokens */
  --pn-brand: var(--pn-brand-500);
  --pn-brand-dark: var(--pn-brand-700);
  --pn-accent: var(--pn-accent-500);
  --pn-bg: var(--pn-white);
  --pn-surface: var(--pn-neutral-50);
  --pn-text: var(--pn-neutral-900);
  --pn-text-secondary: var(--pn-neutral-500);
  --pn-radius: 20px;
  --pn-shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --pn-shadow-md: 0 8px 20px rgba(0,0,0,.12);
  --pn-shadow-lg: 0 20px 40px rgba(0,0,0,.18);
  --pn-heading: "Poppins", sans-serif;
  --pn-body: "Inter", sans-serif;
  --pn-code: "JetBrains Mono", monospace;
}

* { box-sizing: border-box; }

body {
  font-family: var(--pn-body);
  color: var(--pn-text);
  background: var(--pn-bg);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-heading {
  font-family: var(--pn-heading);
  font-weight: 700;
}

code, pre, .font-code {
  font-family: var(--pn-code);
}

/* Gradients (seção 4 dos Design Tokens) */
.pn-gradient-aurora {
  background: linear-gradient(180deg, #6E3BFF 0%, #4722A8 100%);
}
.pn-gradient-neon {
  background: linear-gradient(135deg, #6E3BFF 0%, #B6FF2C 100%);
}
.pn-gradient-hero {
  background: linear-gradient(160deg, #31186F 0%, #6E3BFF 55%, #B6FF2C 130%);
}

/* Cards */
.pn-card {
  background: var(--pn-white);
  border-radius: var(--pn-radius);
  border: 1px solid var(--pn-neutral-100);
  box-shadow: var(--pn-shadow-md);
}

/* Buttons (seção 12 dos Design Tokens) */
.pn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--pn-heading);
  font-weight: 700;
  border-radius: 999px;
  padding: 0.7rem 1.5rem;
  transition: all 150ms ease-out;
  cursor: pointer;
  border: 2px solid transparent;
  white-space: nowrap;
}
.pn-btn-primary {
  background: var(--pn-brand-500);
  color: var(--pn-white);
}
.pn-btn-primary:hover {
  background: var(--pn-brand-600);
  transform: translateY(-1px);
}
.pn-btn-secondary {
  background: var(--pn-white);
  border-color: var(--pn-brand-500);
  color: var(--pn-brand-700);
}
.pn-btn-secondary:hover {
  background: var(--pn-brand-50);
}
.pn-btn-accent {
  background: var(--pn-accent-500);
  color: var(--pn-neutral-900);
}
.pn-btn-accent:hover {
  background: var(--pn-accent-400);
  transform: translateY(-1px);
}

/* Motion — deve parecer curiosa, rápida e divertida. Nunca dramática. */
.pn-pop {
  animation: pn-pop-in 250ms ease-out;
}
@keyframes pn-pop-in {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.pn-bolt-spin:hover {
  animation: pn-wiggle 400ms ease-out;
}
@keyframes pn-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}

/* Scrollbar geek touch */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--pn-neutral-50); }
::-webkit-scrollbar-thumb { background: var(--pn-brand-200); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--pn-brand-400); }

/* Prose (conteúdo Markdown das aulas/biblioteca) */
.pn-prose h2 { font-family: var(--pn-heading); font-size: 1.5rem; margin-top: 1.75rem; margin-bottom: 0.75rem; color: var(--pn-brand-800); }
.pn-prose h3 { font-family: var(--pn-heading); font-size: 1.2rem; margin-top: 1.4rem; margin-bottom: 0.6rem; }
.pn-prose p { line-height: 1.7; margin-bottom: 1rem; color: var(--pn-neutral-700); }
.pn-prose ul, .pn-prose ol { margin-bottom: 1rem; padding-left: 1.5rem; line-height: 1.7; }
.pn-prose li { margin-bottom: 0.35rem; }
.pn-prose blockquote {
  border-left: 4px solid var(--pn-accent-500);
  background: var(--pn-brand-50);
  padding: 0.75rem 1.25rem;
  border-radius: 0 12px 12px 0;
  margin: 1.25rem 0;
  font-style: italic;
  color: var(--pn-brand-800);
}
.pn-prose pre {
  background: var(--pn-neutral-900);
  color: var(--pn-accent-300);
  padding: 1rem 1.25rem;
  border-radius: 12px;
  overflow-x: auto;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.pn-prose code {
  background: var(--pn-neutral-100);
  color: var(--pn-brand-700);
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
  font-size: 0.9em;
}
.pn-prose pre code { background: transparent; color: inherit; padding: 0; }
.pn-prose table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.pn-prose th, .pn-prose td { border: 1px solid var(--pn-neutral-200); padding: 0.5rem 0.75rem; text-align: left; }
.pn-prose th { background: var(--pn-neutral-50); font-family: var(--pn-heading); }

/* Loading / voice UI (seção 16) */
.pn-loading-dot {
  animation: pn-blink 1s ease-in-out infinite;
}
@keyframes pn-blink {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* ============================================
   Hero animada — marquee de mensagens + grid blueprint
   ============================================ */

/* Grid de fundo estilo "blueprint", esmaecido nas bordas */
.pn-hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(120% 80% at 30% 30%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 80% at 30% 30%, #000 30%, transparent 78%);
}

/* Flutuação suave — o Noto nunca fica parado */
.pn-float {
  animation: pn-float 4s ease-in-out infinite;
}
@keyframes pn-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}

/* Marquee infinito — mesmo mecanismo dos ícones de clientes de referência */
.pn-marquee {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.pn-marquee-track {
  display: flex;
  width: max-content;
  animation: pn-marquee 32s linear infinite;
  will-change: transform;
}
.pn-marquee:hover .pn-marquee-track {
  animation-play-state: paused;
}
.pn-marquee-group {
  display: flex;
  align-items: center;
  flex: none;
}
@keyframes pn-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .pn-marquee-track, .pn-float { animation: none; }
}

/* Chip de mensagem flutuante (fala do Noto / professores) */
.pn-msg-chip {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: 0.65rem 1.15rem;
  margin: 0 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  transition: background .2s, transform .2s;
}
.pn-msg-chip:hover {
  background: rgba(255,255,255,.18);
  transform: translateY(-2px);
}

/* Progress bar */
.pn-progress-track {
  background: var(--pn-neutral-100);
  border-radius: 999px;
  overflow: hidden;
  height: 10px;
}
.pn-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--pn-brand-500), var(--pn-accent-500));
  border-radius: 999px;
  transition: width 400ms ease-out;
}

/* ============================================
   Backoffice (/admin) e Painel de gestão (/gestao)
   ============================================ */

/* Colunas do kanban editorial (Rascunho / Revisão / Publicado) */
.pn-kanban-col {
  background: var(--pn-neutral-50);
  border: 1px solid var(--pn-neutral-100);
  border-radius: var(--pn-radius);
  padding: 1rem;
  min-height: 200px;
}
.pn-kanban-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
}
.pn-kanban-card {
  background: var(--pn-white);
  border: 1px solid var(--pn-neutral-100);
  border-radius: 14px;
  padding: .85rem 1rem;
  margin-bottom: .6rem;
  box-shadow: var(--pn-shadow-sm);
  transition: transform 150ms ease-out, box-shadow 150ms ease-out;
  display: block;
}
.pn-kanban-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--pn-shadow-md);
}

/* Badges de status editorial */
.pn-badge-draft { background: var(--pn-neutral-100); color: var(--pn-neutral-600); }
.pn-badge-review { background: #FFF4D6; color: #92650A; }
.pn-badge-published { background: var(--pn-accent-100); color: var(--pn-accent-800); }
.pn-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .7rem;
  font-weight: 600;
  padding: .25rem .6rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* Tabelas administrativas simples */
.pn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.pn-table th {
  text-align: left;
  font-family: var(--pn-heading);
  font-weight: 700;
  color: var(--pn-neutral-500);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .6rem .75rem;
  border-bottom: 2px solid var(--pn-neutral-100);
}
.pn-table td {
  padding: .75rem;
  border-bottom: 1px solid var(--pn-neutral-100);
  vertical-align: middle;
}
.pn-table tr:hover td { background: var(--pn-neutral-50); }

/* Inputs de formulário administrativo */
.pn-input, .pn-select, .pn-textarea {
  width: 100%;
  padding: 0.65rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--pn-neutral-200);
  font-family: var(--pn-body);
  font-size: .9rem;
  background: var(--pn-white);
}
.pn-input:focus, .pn-select:focus, .pn-textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--pn-brand-100);
  border-color: var(--pn-brand-400);
}
.pn-label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--pn-neutral-600);
  margin-bottom: .3rem;
}