/* ============================================================
   ISUCaL · Estilos complementares ao Tailwind
   Paleta derivada do selo institucional
   ============================================================ */

:root {
  --deep:    #0B3B44;
  --primary: #1B9AA5;
  --light:   #7ED8DE;
  --mist:    #EFF8F9;
  --gold:    #C9A227;
}

/* ── Fundo com o halo do selo ─────────────────────────────── */
body {
  background-image:
    radial-gradient(1100px 480px at 88% -12%, rgba(126, 216, 222, .30), transparent 62%),
    radial-gradient(760px 400px at -8% 108%, rgba(27, 154, 165, .12), transparent 60%);
  background-attachment: fixed;
}

/* ── Navegação lateral ────────────────────────────────────── */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .85rem;
  border-radius: .7rem;
  font-size: .925rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .66);
  transition: color .18s ease, background-color .18s ease;
}
.nav-item:hover  { color: #fff; background: rgba(255, 255, 255, .07); }
.nav-on          { color: #fff; background: rgba(126, 216, 222, .16); }

/* A marca activa cita o traço da fita do selo */
.nav-marca {
  position: absolute;
  left: -.75rem;
  width: 3px;
  height: 0;
  border-radius: 0 3px 3px 0;
  background: var(--gold);
  transition: height .22s ease;
}
.nav-on .nav-marca { height: 1.6rem; }

/* ── Fita do lema ─────────────────────────────────────────── */
.fita {
  position: relative;
  text-align: center;
  padding: .5rem 1rem;
  color: var(--deep);
  background: var(--light);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
  letter-spacing: .01em;
}

/* ── Anel de progresso do selo académico ──────────────────── */
.anel { transform: rotate(-90deg); }
.anel circle { fill: none; stroke-linecap: round; }
.anel .trilho { stroke: rgba(11, 59, 68, .10); }
.anel .valor  { stroke: var(--primary); transition: stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1); }

/* ── Barra de nota (0–20) ─────────────────────────────────── */
.barra-nota {
  height: 5px;
  border-radius: 999px;
  background: rgba(11, 59, 68, .09);
  overflow: hidden;
}
.barra-nota span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--primary);
  transition: width .8s cubic-bezier(.22,1,.36,1);
}
.barra-nota.reprovado span { background: #e11d48; }

/* ── Tabelas ──────────────────────────────────────────────── */
.tabela { width: 100%; border-collapse: collapse; }
.tabela thead th {
  text-align: left;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(18, 52, 59, .5);
  font-weight: 600;
  padding: .6rem .9rem;
  border-bottom: 1px solid rgba(11, 59, 68, .10);
  white-space: nowrap;
}
.tabela tbody td {
  padding: .85rem .9rem;
  border-bottom: 1px solid rgba(11, 59, 68, .06);
  font-size: .92rem;
  vertical-align: middle;
}
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: rgba(126, 216, 222, .07); }

/* ── Campos de formulário ─────────────────────────────────── */
.campo {
  width: 100%;
  padding: .7rem .9rem;
  border: 1px solid rgba(11, 59, 68, .16);
  border-radius: .7rem;
  background: #fff;
  font-size: .95rem;
  color: var(--deep);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.campo:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(27, 154, 165, .16);
}
.rotulo {
  display: block;
  margin-bottom: .35rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(18, 52, 59, .6);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1.3rem;
  border-radius: .7rem;
  font-weight: 600;
  font-size: .925rem;
  background: var(--primary);
  color: #fff;
  transition: background-color .15s ease, transform .12s ease;
}
.btn:hover    { background: #17848d; }
.btn:active   { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-suave    { background: rgba(27, 154, 165, .10); color: var(--deep); }
.btn-suave:hover { background: rgba(27, 154, 165, .18); }

/* ── Assistente virtual ───────────────────────────────────── */
.bolha {
  max-width: 46rem;
  padding: .85rem 1.1rem;
  border-radius: 1.1rem;
  line-height: 1.65;
  font-size: .95rem;
  animation: subir .3s ease both;
}
.bolha-ia {
  background: #fff;
  border: 1px solid rgba(11, 59, 68, .08);
  border-bottom-left-radius: .35rem;
  box-shadow: 0 1px 2px rgba(11, 59, 68, .05);
}
.bolha-eu {
  background: var(--deep);
  color: #fff;
  border-bottom-right-radius: .35rem;
  margin-left: auto;
}
.bolha p + p { margin-top: .6rem; }
.bolha ul, .bolha ol { margin: .5rem 0 .5rem 1.15rem; }
.bolha li { margin: .2rem 0; }
.bolha ul { list-style: disc; }
.bolha ol { list-style: decimal; }
.bolha strong { font-weight: 650; }

.pontos span {
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--primary);
  animation: pulsar 1.1s infinite;
}
.pontos span:nth-child(2) { animation-delay: .15s; }
.pontos span:nth-child(3) { animation-delay: .3s; }

.sugestao {
  padding: .5rem .9rem;
  border: 1px solid rgba(27, 154, 165, .28);
  border-radius: 999px;
  font-size: .84rem;
  color: var(--deep);
  background: rgba(255, 255, 255, .7);
  transition: background-color .15s ease, border-color .15s ease;
}
.sugestao:hover { background: #fff; border-color: var(--primary); }

/* ── Movimento ────────────────────────────────────────────── */
@keyframes subir  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pulsar { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
.fade-in { animation: subir .35s ease both; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}