/* ==========================================================================
   Literuninho UI (nível médio de isolamento)
   - Paleta arco-íris
   - Toques grandes (≥44px)
   - Componentes prefixados .ln-
   - Foco visível e acessível
   --------------------------------------------------------------------------
   Observação: tokens principais vêm inline no layout via :root.
   Este arquivo só adiciona estilos e componentes reutilizáveis.
   ========================================================================== */

:root{
  --ln-radius: 24px;
  --ln-duration: .2s;
}

/* Resets suaves apenas no escopo kids */
.ln-body * { box-sizing: border-box; }
.ln-body a { text-decoration: none; }
.ln-body a:focus,
.ln-body button:focus,
.ln-body [tabindex]:focus {
  outline: 3px solid rgba(77,150,255,.6); /* azul acessível */
  outline-offset: 2px;
  border-radius: 10px;
}

/* --------------------------------------------------------------------------
   Utilitários
   -------------------------------------------------------------------------- */
.ln-rounded     { border-radius: var(--ln-radius); }
.ln-shadow      { box-shadow: 0 10px 28px rgba(0,0,0,.10); }
.ln-shadow-sm   { box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.ln-shadow-in   { box-shadow: inset 0 0 0 3px rgba(255,255,255,.6); }
.ln-text-ink    { color: var(--ln-ink); }
.ln-bg-white    { background:#fff; }
.ln-bg-soft     { background: var(--ln-bg); }
.ln-w-100       { width: 100%; }
.ln-h-100       { height: 100%; }
.ln-gap-1       { gap: .25rem; }
.ln-gap-2       { gap: .5rem; }
.ln-gap-3       { gap: .75rem; }
.ln-gap-4       { gap: 1rem; }
.ln-flex        { display:flex; }
.ln-flex-col    { display:flex; flex-direction: column; }
.ln-center      { display:flex; align-items:center; justify-content:center; }

/* Cores em gradiente */
.ln-gradient {
  background: linear-gradient(90deg, var(--ln-red), var(--ln-yellow), var(--ln-green), var(--ln-blue), var(--ln-purple));
  background-size: 200% 100%;
  animation: lnRainbow 12s linear infinite;
}
@keyframes lnRainbow { 0%{background-position:0 0;} 100%{background-position:200% 0;} }

/* --------------------------------------------------------------------------
   Botões grandes (tiles de navegação)
   -------------------------------------------------------------------------- */
.ln-tile {
  display:flex; align-items:center; justify-content:center;
  min-height: 88px;
  border: 0; border-radius: 28px;
  background: #fff;
  color: #111827;
  font-family: var(--ln-font-display, system-ui);
  font-size: 1.25rem; font-weight: 800;
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
  transition: transform var(--ln-duration) ease, box-shadow var(--ln-duration) ease;
}
.ln-tile:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.18); }
.ln-tile:active { transform: translateY(0); }

.ln-tile .ln-emoji, .ln-tile .bi { font-size: 1.5rem; margin-right: .5rem; }

/* Variações com borda interna colorida (para lembrar “brinquedo”) */
.ln-tile--red    { box-shadow: inset 0 0 0 6px rgba(255,107,107,.25), 0 10px 28px rgba(0,0,0,.14); }
.ln-tile--yellow { box-shadow: inset 0 0 0 6px rgba(255,217,61,.25),  0 10px 28px rgba(0,0,0,.14); }
.ln-tile--green  { box-shadow: inset 0 0 0 6px rgba(107,203,119,.25), 0 10px 28px rgba(0,0,0,.14); }
.ln-tile--blue   { box-shadow: inset 0 0 0 6px rgba(77,150,255,.25),  0 10px 28px rgba(0,0,0,.14); }
.ln-tile--purple { box-shadow: inset 0 0 0 6px rgba(155,93,229,.25),  0 10px 28px rgba(0,0,0,.14); }

/* --------------------------------------------------------------------------
   Cards de conteúdo
   -------------------------------------------------------------------------- */
.ln-card {
  background:#fff; border-radius: 28px; border:0;
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  overflow: hidden;
}
.ln-card__media {
  width: 100%; height: 200px; object-fit: cover; display:block;
}
.ln-card__body { padding: 1rem 1.25rem; }
.ln-card__title {
  font-family: var(--ln-font-display, system-ui);
  font-size: 1.35rem; font-weight: 800; margin: 0 0 .25rem 0;
}
.ln-card__meta  { color:#64748b; font-size:.95rem; }
.ln-card__cta {
  display:flex; align-items:center; justify-content:space-between;
  padding: .75rem 1.25rem; border-top: 1px solid rgba(0,0,0,.06);
}

/* Grade responsiva de cards */
.ln-grid {
  display:grid; grid-template-columns: repeat(12, 1fr); gap: 1rem;
}
.ln-col-12 { grid-column: span 12; }
.ln-col-6  { grid-column: span 6; }
.ln-col-4  { grid-column: span 4; }
.ln-col-3  { grid-column: span 3; }
@media (max-width: 991.98px){
  .ln-col-lg-6 { grid-column: span 6; }
  .ln-col-lg-12 { grid-column: span 12; }
}
@media (max-width: 767.98px){
  .ln-col-md-12 { grid-column: span 12; }
}

/* --------------------------------------------------------------------------
   Badges / Selos
   -------------------------------------------------------------------------- */
.badge-ln {
  display:inline-flex; align-items:center;
  padding:.35rem .65rem; border-radius: 999px;
  font-weight: 800; color:#111827; background:#fff;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.6), 0 6px 18px rgba(0,0,0,.08);
}
.badge-ln .bi { margin-right:.25rem; }

/* --------------------------------------------------------------------------
   Reações (emojis) – simplificado
   -------------------------------------------------------------------------- */
.ln-reactions { display:flex; gap:.5rem; padding:.5rem 0; }
.ln-reaction {
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius: 50%;
  background:#fff; border:0;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  font-size: 1.25rem;
  transition: transform .08s ease, box-shadow .2s ease;
}
.ln-reaction:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.16); }

/* --------------------------------------------------------------------------
   Progresso lúdico (bolha)
   -------------------------------------------------------------------------- */
.ln-progress-bubble {
  position: relative; width: 64px; height: 64px; border-radius: 50%;
  background: conic-gradient(var(--ln-blue) var(--ln-pct, 0%), #e5e7eb 0);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.ln-progress-bubble::after{
  content: attr(data-label);
  position: absolute; inset: 8px;
  background:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight: 800; color:#111827; font-size:.9rem;
}

/* --------------------------------------------------------------------------
   Hero kids
   -------------------------------------------------------------------------- */
.ln-hero {
  border-radius: 32px;
  padding: 1.25rem 1.25rem;
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.8)), 
              linear-gradient(90deg, var(--ln-red), var(--ln-yellow), var(--ln-green), var(--ln-blue), var(--ln-purple));
  background-size: auto, 200% 100%;
  animation: lnRainbow 16s linear infinite;
  box-shadow: 0 12px 34px rgba(0,0,0,.12);
}
.ln-hero__title {
  font-family: var(--ln-font-display, system-ui);
  font-size: 2rem; font-weight: 800; margin: 0;
  color:#0f172a;
}
.ln-hero__subtitle { color:#334155; margin-top:.25rem; }

/* --------------------------------------------------------------------------
   Menu de “ilhas” (cards circulares)
   -------------------------------------------------------------------------- */
.ln-islands {
  display:grid; grid-template-columns: repeat(12, 1fr); gap: 1rem;
  margin-top: 1rem;
}
.ln-island {
  grid-column: span 4;
  background:#fff; border-radius: 999px;
  height: 110px;
  display:flex; align-items:center; justify-content:center;
  font-weight: 900; font-size: 1.1rem;
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  transition: transform .1s ease;
}
.ln-island:hover { transform: translateY(-2px); }
.ln-island--red    { border: 6px solid rgba(255,107,107,.25); }
.ln-island--yellow { border: 6px solid rgba(255,217,61,.25); }
.ln-island--green  { border: 6px solid rgba(107,203,119,.25); }
.ln-island--blue   { border: 6px solid rgba(77,150,255,.25); }
.ln-island--purple { border: 6px solid rgba(155,93,229,.25); }
@media (max-width: 991.98px){
  .ln-island { grid-column: span 6; }
}
@media (max-width: 575.98px){
  .ln-island { grid-column: span 12; }
}

/* --------------------------------------------------------------------------
   Tamanhos e tipografia
   -------------------------------------------------------------------------- */
.ln-title-lg {
  font-family: var(--ln-font-display, system-ui);
  font-size: 1.75rem; font-weight: 800; margin: 0 0 .5rem 0;
}
.ln-title-md {
  font-family: var(--ln-font-display, system-ui);
  font-size: 1.35rem; font-weight: 800; margin: 0 0 .25rem 0;
}
.ln-text-muted { color:#64748b; }

/* --------------------------------------------------------------------------
   Segurança visual: esconder tudo que não seja kids quando ln_mode estiver ativo
   (Use classes no HTML adulto para poder esconder blocos inteiros.)
   -------------------------------------------------------------------------- */
.ln-mode-active .hide-when-kids { display: none !important; }

/* --------------------------------------------------------------------------
   Helpers de espaçamento (apenas alguns para não colidir com Bootstrap)
   -------------------------------------------------------------------------- */
.ln-mb-0  { margin-bottom: 0 !important; }
.ln-mb-1  { margin-bottom: .25rem !important; }
.ln-mb-2  { margin-bottom: .5rem !important; }
.ln-mb-3  { margin-bottom: .75rem !important; }
.ln-mb-4  { margin-bottom: 1rem !important; }
.ln-mt-4  { margin-top: 1rem !important; }
.ln-pt-2  { padding-top: .5rem !important; }
.ln-pt-3  { padding-top: .75rem !important; }
.ln-p-3   { padding: .75rem !important; }
.ln-p-4   { padding: 1rem !important; }
.ln-px-4  { padding-left: 1rem !important; padding-right: 1rem !important; }

/* --------------------------------------------------------------------------
   Mini componentes
   -------------------------------------------------------------------------- */
.ln-pill {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .6rem; border-radius:999px; background:#fff; color:#111827;
  font-weight:800; box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.ln-kid-avatar {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  border: 4px solid #fff;
}

/* --------------------------------------------------------------------------
   Mensagens / estados
   -------------------------------------------------------------------------- */
.ln-alert {
  border:0; border-radius: 16px;
  padding: .75rem 1rem; font-weight: 700;
}
.ln-alert--ok    { background: #e6f7ff; color:#0c4a6e; }
.ln-alert--warn  { background: #fff4e5; color:#7c2d12; }
.ln-alert--info  { background: #eef2ff; color:#3730a3; }

/* --------------------------------------------------------------------------
   Transições básicas
   -------------------------------------------------------------------------- */
.ln-fade-in { animation: lnFadeIn .18s ease-out both; }
@keyframes lnFadeIn { from{ opacity:0; transform: translateY(4px) } to{ opacity:1; transform:none } }

/* --------------------------------------------------------------------------
   Tocar/Click feedback
   -------------------------------------------------------------------------- */
.ln-pressable { transition: transform .08s ease, box-shadow .2s ease; }
.ln-pressable:active { transform: translateY(1px) scale(.99); }