:root {
  --pk-ink: #092f3c;
  --pk-muted: #5d7280;
  --pk-primary: #087e8b;
  --pk-primary-dark: #075765;
  --pk-coral: #ff6f61;
  --pk-sun: #f7c948;
  --pk-cream: #fff8ec;
  --pk-soft: #f2fbfa;
  --pk-card: #ffffff;
  --pk-border: rgba(9, 47, 60, .12);
  --pk-shadow: 0 18px 55px rgba(9, 47, 60, .12);
}

[data-bs-theme="dark"] {
  --pk-ink: #ecfdff;
  --pk-muted: #a9c1ca;
  --pk-primary: #2dcbd3;
  --pk-primary-dark: #53e4e8;
  --pk-coral: #ff8d82;
  --pk-sun: #f8d86d;
  --pk-cream: #102d38;
  --pk-soft: #0f2630;
  --pk-card: #132f3a;
  --pk-border: rgba(255,255,255,.12);
  --pk-shadow: 0 18px 55px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--pk-ink);
  background:
    radial-gradient(circle at top left, rgba(247,201,72,.22), transparent 32rem),
    linear-gradient(180deg, var(--pk-cream), #fff 42%, var(--pk-soft));
  min-height: 100vh;
}
[data-bs-theme="dark"] body { background: linear-gradient(180deg, #071b23, #0b2029 46%, #071b23); }
a { color: var(--pk-primary); }
.btn-primary {
  --bs-btn-bg: var(--pk-primary);
  --bs-btn-border-color: var(--pk-primary);
  --bs-btn-hover-bg: var(--pk-primary-dark);
  --bs-btn-hover-border-color: var(--pk-primary-dark);
}
.btn-outline-primary {
  --bs-btn-color: var(--pk-primary);
  --bs-btn-border-color: var(--pk-primary);
  --bs-btn-hover-bg: var(--pk-primary);
  --bs-btn-hover-border-color: var(--pk-primary);
}
.app-navbar {
  backdrop-filter: blur(18px);
  background: color-mix(in srgb, var(--pk-card), transparent 12%) !important;
}
.brand-logo { filter: drop-shadow(0 10px 20px rgba(8,126,139,.18)); }
.brand-name { font-weight: 800; letter-spacing: -.02em; color: var(--pk-ink); }
.nav-link.active { color: var(--pk-primary) !important; font-weight: 800; }
.page-hero { padding: 5rem 0 3rem; }
.section-spacing { padding: 4rem 0; }
.bg-soft { background: color-mix(in srgb, var(--pk-soft), transparent 8%); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--pk-primary);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero-title, h1, h2, h3 { letter-spacing: -.035em; }
.lead { color: var(--pk-muted); }
.text-secondary { color: var(--pk-muted) !important; }
.card, .modal-content, .form-control, .form-select, .input-group-text {
  border-color: var(--pk-border);
}
.card { background-color: var(--pk-card); }
.soft-card, .feature-card, .lesson-card, .territory-card, .admin-panel {
  border: 1px solid var(--pk-border);
  background: var(--pk-card);
  border-radius: 1.5rem;
  box-shadow: 0 12px 35px rgba(9,47,60,.07);
}
.shadow-soft { box-shadow: var(--pk-shadow); }
.stat-card { padding: 1rem; border: 1px solid var(--pk-border); border-radius: 1.25rem; background: var(--pk-card); }
.stat-card strong { display: block; font-size: 1.7rem; color: var(--pk-primary); }
.stat-card span { color: var(--pk-muted); font-size: .9rem; }
.feature-card { padding: 1.35rem; height: 100%; transition: transform .2s ease, box-shadow .2s ease; }
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--pk-shadow); }
.feature-icon { width: 3rem; height: 3rem; border-radius: 1rem; display: grid; place-items: center; background: rgba(8,126,139,.12); font-size: 1.35rem; }
.teacher-panel {
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
  background: linear-gradient(135deg, rgba(8,126,139,.14), rgba(255,111,97,.13));
  border: 1px solid var(--pk-border);
  padding: 1.5rem;
}
.teacher-avatar { width: min(220px, 65vw); animation: floaty 3.2s ease-in-out infinite; }
.teacher-avatar-small { width: 4rem; height: 4rem; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.professor-bubble {
  position: relative;
  padding: 1rem 1.15rem;
  border-radius: 1.4rem 1.4rem 1.4rem .35rem;
  background: var(--pk-card);
  border: 1px solid var(--pk-border);
  box-shadow: 0 18px 45px rgba(9,47,60,.10);
}
.professor-bubble::before {
  content: "";
  position: absolute;
  left: -8px;
  bottom: 18px;
  border: 9px solid transparent;
  border-right-color: var(--pk-card);
}
.territory-pill, .category-pill {
  border: 1px solid var(--pk-border);
  background: var(--pk-card);
  color: var(--pk-ink);
  border-radius: 999px;
  padding: .55rem .85rem;
  font-weight: 700;
}
.territory-pill.active, .category-pill.active { background: var(--pk-primary); border-color: var(--pk-primary); color: #fff; }
.lesson-card { padding: 1.25rem; height: 100%; }
.lesson-card .badge { font-weight: 700; }
.lesson-word { font-size: 1.6rem; font-weight: 900; letter-spacing: -.02em; }
.audio-missing { opacity: .75; }
.quiz-option { width: 100%; text-align: left; border-radius: 1rem; padding: .85rem 1rem; border: 1px solid var(--pk-border); background: var(--pk-card); color: var(--pk-ink); font-weight: 700; }
.quiz-option:hover { border-color: var(--pk-primary); }
.quiz-option.correct { border-color: #198754; background: rgba(25,135,84,.12); }
.quiz-option.wrong { border-color: #dc3545; background: rgba(220,53,69,.12); }
.site-footer { border-top: 1px solid var(--pk-border); background: color-mix(in srgb, var(--pk-card), transparent 10%); }

/* Chatbot flottant */
.pk-chat-launcher {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1080;
  border: 0;
  border-radius: 999px;
  background: var(--pk-primary);
  color: #fff;
  box-shadow: 0 16px 45px rgba(8,126,139,.35);
  padding: .8rem 1rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 850;
}
.pk-chat-window {
  position: fixed;
  right: 1rem;
  bottom: 5.1rem;
  z-index: 1081;
  width: min(390px, calc(100vw - 2rem));
  height: min(620px, calc(100vh - 7rem));
  display: none;
  border-radius: 1.5rem;
  background: var(--pk-card);
  border: 1px solid var(--pk-border);
  box-shadow: var(--pk-shadow);
  overflow: hidden;
}
.pk-chat-window.open { display: flex; flex-direction: column; }
.pk-chat-header { padding: .9rem 1rem; background: linear-gradient(135deg, var(--pk-primary), var(--pk-primary-dark)); color: #fff; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.pk-chat-body { flex: 1; overflow-y: auto; padding: 1rem; background: color-mix(in srgb, var(--pk-soft), transparent 24%); }
.pk-message { display: flex; gap: .55rem; margin-bottom: .85rem; }
.pk-message.user { justify-content: flex-end; }
.pk-message-bubble { max-width: 84%; border-radius: 1rem; padding: .75rem .85rem; background: var(--pk-card); border: 1px solid var(--pk-border); white-space: pre-line; }
.pk-message.user .pk-message-bubble { background: var(--pk-primary); color: #fff; border-color: var(--pk-primary); }
.pk-chat-form { padding: .75rem; border-top: 1px solid var(--pk-border); background: var(--pk-card); }
.pk-typing { font-size: .85rem; color: var(--pk-muted); padding: 0 1rem .5rem; display: none; }
.pk-typing.show { display: block; }
.admin-list { max-height: 520px; overflow: auto; }
.admin-item { border: 1px solid var(--pk-border); border-radius: 1rem; padding: 1rem; background: var(--pk-card); margin-bottom: .85rem; }
.page-link-card { text-decoration: none; color: inherit; }
.page-link-card:hover .feature-card { transform: translateY(-4px); box-shadow: var(--pk-shadow); }
@media (max-width: 767.98px) {
  .page-hero { padding: 3rem 0 2rem; }
  .section-spacing { padding: 3rem 0; }
  .pk-chat-launcher { left: 1rem; right: 1rem; justify-content: center; }
  .pk-chat-window { left: 1rem; right: 1rem; width: auto; }
  .teacher-panel { text-align: center; }
  .professor-bubble::before { display: none; }
}

.admin-panel {
  border: 1px solid var(--pk-border);
  border-radius: 1.5rem;
  background: var(--pk-card);
  box-shadow: 0 18px 45px rgba(9,47,60,.06);
}
.admin-panel textarea.form-control { min-height: 7rem; }
.admin-panel .form-select,
.admin-panel .form-control { border-color: var(--pk-border); }
.admin-panel pre { max-height: 280px; overflow: auto; }