/*
 * R6-A11Y — acessibilidade transversal (vale para todas as páginas que carregam
 * `application.css`). Regras de propósito estreitas: nada de utilitário do
 * Tailwind redefinido aqui (ver test/guardrails/unlayered_utility_css_test.rb).
 */

/* "Pular para o conteúdo": fora da tela até receber foco pelo teclado. */
.nivo-skip-link {
  position: fixed;
  top: -200px;
  left: 16px;
  z-index: 10000;
  padding: 12px 18px;
  border-radius: 12px;
  background: #4338ca;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.nivo-skip-link:focus {
  top: 16px;
}

/* O <main> recebe o foco do skip link (tabindex="-1"): sem anel em volta da página inteira. */
#main-content:focus {
  outline: none;
}

/*
 * Foco visível para quem navega pelo teclado. Vários botões/links do app têm
 * `focus:outline-none` sem anel substituto; `:focus-visible` só aparece na
 * navegação por teclado (não no clique do mouse), então o visual do clique não muda.
 * Campos de texto ficam de fora: já têm `focus:ring-*` próprio.
 */
:is(a[href], button, summary, [role="button"], [role="tab"], [tabindex]:not([tabindex="-1"]), .word-chip, .drop-zone):focus-visible {
  outline: 3px solid #4f46e5 !important;
  outline-offset: 2px !important;
}

/* Lacunas/placeholder das ferramentas do aluno: #9ca3af sobre #f3f4f6 dava 2,3:1. */
.drop-zone-placeholder {
  color: #4b5563;
}

/* Quem pede "reduzir movimento" no sistema não recebe fades, deslizes nem
   rolagem suave (os estados finais continuam iguais). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/*
 * Builder: bloco (ferramenta) recém-adicionado — rolagem até ele e destaque
 * breve. Classe posta e tirada por
 * app/javascript/controllers/teacher/tool_blocks/reveal_controller.js.
 * CSS próprio (sem Tailwind novo) e escopado pela classe: application.css usa
 * require_tree, e regra solta vazaria para o app inteiro.
 */
[data-controller~="teacher--tool-blocks--reveal"],
.tool-block-reveal {
  /* Rolagem para o começo do bloco sem colar na borda do contêiner. */
  scroll-margin-top: 1.5rem;
}

.tool-block-reveal {
  border-radius: 1rem;
  animation: tool-block-reveal 2.4s ease-out both;
}

.tool-block-reveal:focus {
  outline: none;
}

@keyframes tool-block-reveal {
  0%   { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
  12%  { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.55); }
  70%  { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.35); }
  100% { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0); }
}

/* Movimento reduzido: sem animação — o anel fica parado e some junto com a
   classe (o controller a remove depois de ~2,4 s). */
@media (prefers-reduced-motion: reduce) {
  .tool-block-reveal {
    animation: none;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.45);
  }
}
/* Custom Select Styling */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 16px;
  padding-right: 2.5rem !important;
}

/* Focus state for select */
select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%236366F1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Disabled state */
select:disabled {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%9CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity: 0.6;
  cursor: not-allowed;
}

/* Hover effect */
select:hover:not(:disabled) {
  border-color: #D1D5DB;
}

/* Estilização das opções do dropdown */
select option {
  padding: 10px 14px;
  background-color: white;
  color: #1F2937;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}

/* Opção em hover (funciona em alguns navegadores) */
select option:hover {
  background-color: #EEF2FF;
  color: #4F46E5;
}

/* Opção selecionada */
select option:checked {
  background: linear-gradient(to right, #EEF2FF, #E0E7FF);
  color: #4F46E5;
  font-weight: 500;
}

/* Scrollbar customizada para o dropdown (Firefox) */
select {
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 #F1F5F9;
}

/* Scrollbar customizada (Webkit - Chrome, Safari, Edge) */
select::-webkit-scrollbar {
  width: 8px;
}

select::-webkit-scrollbar-track {
  background: #F1F5F9;
  border-radius: 4px;
}

select::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}

select::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}
/* Banner de consentimento de cookies (layouts/_cookie_consent).
   CSS próprio (sem Tailwind) porque também roda na landing, que não carrega o
   tailwind.css: entra no application.css pelo require_tree e é linkado à parte
   no layout landing_option. Tudo escopado em .nv-consent*.
   Visual = toast do app (shared/_toast): cartão branco, borda gray-100,
   rounded-2xl, sombra xl, ícone em círculo índigo. */
.nv-consent {
  position: fixed; z-index: 90; left: 1rem; right: 1rem; bottom: 1rem;
  display: flex; align-items: flex-start; gap: .75rem;
  max-width: 26rem; margin: 0; padding: 1rem;
  background: #fff; color: #111827;
  border: 1px solid #f3f4f6; border-radius: 1rem;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: .875rem; line-height: 1.45; text-align: left;
}
.nv-consent[hidden] { display: none; }
@media (min-width: 640px) { .nv-consent { right: auto; left: 1.25rem; bottom: 1.25rem; } }

.nv-consent-icon {
  display: flex; flex-shrink: 0; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 9999px;
  background: #eef2ff; color: #4f46e5;
}
.nv-consent-body { min-width: 0; flex: 1; }
.nv-consent-title { margin: 0 0 .15rem; font-weight: 600; color: #111827; }
.nv-consent-text { margin: 0; color: #4b5563; }
.nv-consent-link { color: #4338ca; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.nv-consent-link:hover { color: #3730a3; }

/* "Recusar" e "Aceitar" com o MESMO destaque (LGPD: recusar tão fácil quanto aceitar). */
.nv-consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .75rem; }
.nv-consent-btn {
  appearance: none; cursor: pointer; margin: 0;
  padding: .55rem .9rem; border-radius: .75rem;
  border: 1px solid #4f46e5; background: #4f46e5; color: #fff;
  font: inherit; font-weight: 600; line-height: 1.25;
  transition: background-color .15s ease, border-color .15s ease;
}
.nv-consent-btn:hover { background: #4338ca; border-color: #4338ca; }
.nv-consent-btn:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px; }

/* Link "Preferências de cookies" renderizado como <button> nos rodapés. */
.nv-consent-prefs {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer; text-align: inherit;
}
.nv-consent-prefs:hover { text-decoration: underline; }

.dark .nv-consent { background: #1f2937; color: #f9fafb; border-color: #374151; box-shadow: 0 20px 25px -5px rgb(0 0 0 / .5); }
.dark .nv-consent-icon { background: rgb(99 102 241 / .15); color: #a5b4fc; }
.dark .nv-consent-title { color: #f9fafb; }
.dark .nv-consent-text { color: #d1d5db; }
.dark .nv-consent-link { color: #a5b4fc; }
.dark .nv-consent-link:hover { color: #c7d2fe; }

@media (prefers-reduced-motion: no-preference) {
  .nv-consent:not([hidden]) { animation: nv-consent-in .25s ease-out; }
  @keyframes nv-consent-in { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }
}
@media print { .nv-consent { display: none !important; } }

/* Espaço reservado enquanto o banner está aberto (ver reserveSpace() no
   controller): sem isso, no celular o banner fixo cobre o fim da página — o
   botão "Entrar" do login — e não dá para rolar até ele. */
body::after,
.nivo-viewport-h.overflow-y-auto::after {
  content: "";
  display: block;
  flex-shrink: 0;
  height: var(--nv-consent-space, 0px);
}
/*!
 * Cropper.js v1.6.2
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2024-04-21T07:43:02.731Z
 */.cropper-container{-webkit-touch-callout:none;direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{backface-visibility:hidden;display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75);overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}
/*
 * Regras GLOBAIS do app (valem em todas as telas que carregam application.css).
 * Vieram do landing.css antigo, que ia para o app inteiro pelo `require_tree .`
 * (ver docs/orcamentos-de-desempenho.md): barra de rolagem, rolagem suave,
 * cor de seleção, <details>, keyframes `fadeIn`/`bounce` (este SOBRESCREVE o
 * `bounce` do Tailwind no app) e o grifo `.highlighter` do menu/rodapé das
 * páginas institucionais. Mudar qualquer coisa aqui muda o app inteiro:
 * rode `bin/rails test:visual`.
 */
/* Highlighter Effect (already implemented inline in partials, but keeping for reference) */
.highlighter {
  position: relative;
  display: inline-block;
  padding: 0 0.25rem;
  margin: 0 0.25rem;
  z-index: 0;
}

.highlighter::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: skewY(-2deg);
  background-color: rgb(253 224 71 / 0.6); /* yellow-300 */
  border-radius: 0.125rem;
  z-index: -10;
  height: 80%;
  top: 15%;
}

/* Purple variant used in logo and hero title */
.highlight-purple::before {
  background-color: rgb(206 147 255 / 0.6); /* #ce93ff */
}

/* Smooth animations for FAQ details/summary */
details {
  transition: all 0.3s ease-in-out;
}

details summary {
  transition: all 0.2s ease-in-out;
}

details summary::-webkit-details-marker {
  display: none;
}

details summary::marker {
  display: none;
}

details[open] summary {
  margin-bottom: 0.5rem;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Bounce animation for notification badge */
@keyframes bounce {
  0%, 100% {
    transform: translateY(-5%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/* Custom scrollbar for better aesthetics (optional) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Selection color matching design */
::selection {
  background-color: rgb(253 224 71); /* yellow-200 */
  color: black;
}

::-moz-selection {
  background-color: rgb(253 224 71);
  color: black;
}

/* Backdrop blur support check */
@supports (backdrop-filter: blur(12px)) {
  .backdrop-blur-md {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}
/*
 * Rodada 7 (mural): zona de soltar arquivos e editor de imagem antes do upload.
 * JS: controllers/shared/file_intake.js e controllers/shared/image_editor.js.
 * Tudo sob os prefixos .nv-dropzone / .nv-imged — este arquivo entra no
 * application.css (require_tree), então nada de seletor solto.
 */

/* ── Zona de soltar ─────────────────────────────────────────────────────── */
.nv-dropzone { position: relative; }

.nv-dropzone.nv-dropzone--active {
  outline: 2px dashed #6366f1;
  outline-offset: 2px;
  border-radius: 1rem;
}

.nv-dropzone__overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border-radius: 1rem;
  background: rgba(238, 242, 255, 0.92);
  color: #4338ca;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
}

.dark .nv-dropzone__overlay {
  background: rgba(30, 27, 75, 0.9);
  color: #c7d2fe;
}

/* Botão "Ajustar" nos chips de imagem do mural */
.nv-adjust-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  min-height: 1.75rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid #c7d2fe;
  border-radius: 9999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.nv-adjust-btn:hover { background: #e0e7ff; }
.nv-adjust-btn:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.nv-adjust-btn svg { width: 0.875rem; height: 0.875rem; }
/* No celular sobra pouco espaço para o nome do arquivo: só o ícone (o botão
   mantém o aria-label "Ajustar a imagem …"). */
@media (max-width: 480px) {
  .nv-adjust-btn { min-width: 2.25rem; min-height: 2.25rem; justify-content: center; }
  .nv-adjust-btn__text { display: none; }
}
.nv-thumb-btn { flex-shrink: 0; padding: 0; border: 0; background: none; border-radius: 0.5rem; cursor: pointer; }
.nv-thumb-btn:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }

/* ── Editor de imagem (modal) ───────────────────────────────────────────── */
.nv-imged {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.nv-imged__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.7);
}

.nv-imged__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 44rem;
  max-height: calc(100dvh - 2rem);
  padding: 1rem;
  border-radius: 1rem;
  background: #fff;
  color: #111827;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
  overflow: auto;
}

.nv-imged__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.nv-imged__title { margin: 0; font-size: 1rem; font-weight: 700; }
.nv-imged__hint { margin: 0; font-size: 0.8125rem; color: #6b7280; }

.nv-imged__stage {
  position: relative;
  height: min(60vh, 28rem);
  min-height: 12rem;
  border-radius: 0.75rem;
  background: #f3f4f6;
  overflow: hidden;
  touch-action: none;
}
.nv-imged__stage:focus-visible { outline: 3px solid #6366f1; outline-offset: 2px; }
.nv-imged__stage img { display: block; max-width: 100%; }

.nv-imged__busy {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(243, 244, 246, 0.85);
  color: #4b5563;
  font-size: 0.875rem;
  font-weight: 600;
}
.nv-imged__busy[hidden] { display: none; }

.nv-imged__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.nv-imged__ratios,
.nv-imged__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.nv-imged__chip,
.nv-imged__text-btn,
.nv-imged__icon-btn,
.nv-imged__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.625rem;
  background: #fff;
  color: #374151;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.nv-imged__chip { min-width: 2.75rem; padding: 0 0.75rem; }
.nv-imged__chip[aria-pressed="true"] { border-color: #6366f1; background: #eef2ff; color: #4338ca; }
.nv-imged__text-btn { padding: 0 0.75rem; }
.nv-imged__icon-btn { width: 2.5rem; padding: 0; }
.nv-imged__icon-btn svg { width: 1.125rem; height: 1.125rem; }
.nv-imged__chip:hover,
.nv-imged__text-btn:hover,
.nv-imged__icon-btn:hover { background: #f9fafb; }

.nv-imged__chip:focus-visible,
.nv-imged__text-btn:focus-visible,
.nv-imged__icon-btn:focus-visible,
.nv-imged__btn:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }

.nv-imged__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.nv-imged__btn { padding: 0 1.25rem; }
.nv-imged__btn--primary { border-color: #4f46e5; background: #4f46e5; color: #fff; }
.nv-imged__btn--primary:hover { background: #4338ca; }
.nv-imged__btn--primary:disabled { opacity: 0.6; cursor: wait; }

@media (max-width: 480px) {
  .nv-imged { padding: 0; align-items: stretch; }
  .nv-imged__dialog { max-width: none; max-height: 100dvh; border-radius: 0; padding: 0.75rem; }
  .nv-imged__stage { height: 52vh; }
  .nv-imged__footer .nv-imged__btn { flex: 1; }
}

.dark .nv-imged__dialog { background: #111827; color: #f3f4f6; }
.dark .nv-imged__hint { color: #9ca3af; }
.dark .nv-imged__stage { background: #1f2937; }
.dark .nv-imged__busy { background: rgba(31, 41, 55, 0.85); color: #d1d5db; }
.dark .nv-imged__chip,
.dark .nv-imged__text-btn,
.dark .nv-imged__icon-btn,
.dark .nv-imged__btn--ghost { border-color: #374151; background: #1f2937; color: #e5e7eb; }
.dark .nv-imged__chip[aria-pressed="true"] { border-color: #818cf8; background: #312e81; color: #e0e7ff; }
.dark .nv-adjust-btn { border-color: #4338ca; background: #312e81; color: #e0e7ff; }

@media (prefers-reduced-motion: reduce) {
  .nv-imged * { transition: none !important; animation: none !important; }
}
/*
 * Tutoriais guiados (tours) — estilos do motor em
 * app/javascript/controllers/tour_controller.js. CSS próprio (e não classes
 * Tailwind) porque os nós são criados em JS. Tudo `position: fixed`: nada
 * empurra o layout da página. Em < 640px o balão vira folha presa ao rodapé.
 */
.nivo-tour {
  --tour-bg: #ffffff;
  --tour-fg: #111827;
  --tour-muted: #4b5563;
  --tour-accent: #4f46e5;
  --tour-accent-hover: #4338ca;
  --tour-accent-fg: #ffffff;
  --tour-border: #e5e7eb;
  --tour-secondary-bg: #f3f4f6;
  --tour-secondary-hover: #e5e7eb;
  --tour-dim: rgba(15, 23, 42, 0.55);
  --tour-ring: rgba(129, 140, 248, 0.9);

  position: fixed;
  inset: 0;
  z-index: 10000;
  font-family: inherit;
}

/* Modo escuro: acompanha a PÁGINA, não só o sistema. As áreas logadas hoje
   são só claras — um balão escuro sobre elas destoaria. O tema escuro vale
   quando a página se declara escura (classe `dark` / data-theme) ou quando
   aceita os dois esquemas (<meta name="color-scheme" content="light dark">)
   e o sistema está em modo escuro. */
:root.dark .nivo-tour,
:root[data-theme="dark"] .nivo-tour {
  --tour-bg: #1e293b;
  --tour-fg: #f1f5f9;
  --tour-muted: #cbd5e1;
  --tour-accent: #818cf8;
  --tour-accent-hover: #a5b4fc;
  --tour-accent-fg: #0f172a;
  --tour-border: #334155;
  --tour-secondary-bg: #334155;
  --tour-secondary-hover: #475569;
  --tour-dim: rgba(2, 6, 23, 0.7);
}

@media (prefers-color-scheme: dark) {
  :root:has(meta[name="color-scheme"][content~="dark"]):not([data-theme="light"]) .nivo-tour {
    --tour-bg: #1e293b;
    --tour-fg: #f1f5f9;
    --tour-muted: #cbd5e1;
    --tour-accent: #818cf8;
    --tour-accent-hover: #a5b4fc;
    --tour-accent-fg: #0f172a;
    --tour-border: #334155;
    --tour-secondary-bg: #334155;
    --tour-secondary-hover: #475569;
    --tour-dim: rgba(2, 6, 23, 0.7);
  }
}

/* Captura cliques fora do balão (a página fica "em pausa" durante o tour). */
.nivo-tour__backdrop {
  position: fixed;
  inset: 0;
  background: transparent;
}

.nivo-tour--centered .nivo-tour__backdrop {
  background: var(--tour-dim);
}

/* O "furo" iluminado: a sombra enorme escurece o resto da tela. */
.nivo-tour__spotlight {
  position: fixed;
  border-radius: 12px;
  box-shadow: 0 0 0 2px var(--tour-ring), 0 0 0 9999px var(--tour-dim);
  pointer-events: none;
  transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.nivo-tour__spotlight[hidden] {
  display: none;
}

.nivo-tour__popover {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 340px;
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--tour-border);
  background: var(--tour-bg);
  color: var(--tour-fg);
  box-shadow: 0 20px 45px -12px rgba(15, 23, 42, 0.35);
  outline: none;
}

.nivo-tour--centered .nivo-tour__popover {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  width: 400px;
}

.nivo-tour__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.nivo-tour__progress {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tour-accent);
}

.nivo-tour__close {
  width: 32px;
  height: 32px;
  margin: -6px -8px -6px 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tour-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.nivo-tour__close:hover {
  background: var(--tour-secondary-bg);
  color: var(--tour-fg);
}

.nivo-tour__title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.nivo-tour__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--tour-muted);
}

.nivo-tour__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
}

.nivo-tour__nav {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.nivo-tour__button {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nivo-tour__button[hidden] {
  display: none;
}

.nivo-tour__button--primary {
  background: var(--tour-accent);
  color: var(--tour-accent-fg);
}

.nivo-tour__button--primary:hover {
  background: var(--tour-accent-hover);
}

.nivo-tour__button--secondary {
  background: var(--tour-secondary-bg);
  color: var(--tour-fg);
}

.nivo-tour__button--secondary:hover {
  background: var(--tour-secondary-hover);
}

.nivo-tour__button--ghost {
  padding: 0 6px;
  background: transparent;
  color: var(--tour-muted);
}

.nivo-tour__button--ghost:hover {
  color: var(--tour-fg);
  text-decoration: underline;
}

.nivo-tour__button:focus-visible,
.nivo-tour__close:focus-visible {
  outline: 2px solid var(--tour-accent);
  outline-offset: 2px;
}

/* Celular: folha presa ao rodapé, largura total, alvos de toque de 44px. */
@media (max-width: 639px) {
  .nivo-tour__popover,
  .nivo-tour--centered .nivo-tour__popover {
    top: auto !important;
    left: 0 !important;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    transform: none;
    border-radius: 18px 18px 0 0;
    border-width: 1px 0 0;
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .nivo-tour__button {
    min-height: 44px;
  }

  .nivo-tour__close {
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nivo-tour__spotlight {
    transition: none;
  }
}
/*
 * R6-WEBKIT — ajustes para o Safari do iPhone (iOS 15.4+) que o Chrome não pede.
 * Testes: script/webkit (Playwright/WebKit), `cd script/webkit && npm test`.
 * Este arquivo é CSS SEM @layer (require_tree): só classes próprias (nivo-*) e
 * seletores de elemento — nunca nome de utilitário do Tailwind.
 */

/*
 * Casca do app (topo + menu + <main> que rola por dentro). `100vh` no Safari do
 * iPhone é a altura com a barra do navegador RECOLHIDA: com a barra visível, o
 * rodapé da casca (fim da lista, botão "Finalizar", FAB) fica atrás dela e a
 * página inteira "quica". `100dvh` é a altura realmente visível. O `100vh`
 * antes é o fallback para Safari < 15.4.
 */
.nivo-viewport-h {
  height: 100vh;
  height: 100dvh;
}

/* Rodada 6 (fw-ux): telas dentro da casca que descontam a barra do topo (64px),
   ex.: editor da vitrine (antes `h-[calc(100vh-64px)]`). */
.nivo-viewport-h-minus-topbar {
  height: calc(100vh - 64px);
  height: calc(100dvh - 64px);
}

/*
 * iOS dá zoom automático ao focar campo com fonte menor que 16px — e a página
 * fica ampliada depois de sair do campo. Quase todo campo do app usa `text-sm`
 * (14px). Só em telas de toque; campos com fonte já maior ficam como estão.
 */
@media (hover: none) and (pointer: coarse) {
  :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"], [type="hidden"]), textarea, select):not([class*="text-base"], [class*="text-lg"], [class*="text-xl"], [class*="text-2xl"], [class*="text-3xl"], [class*="text-4xl"], [class*="text-5xl"], [class*="text-6xl"]) {
    font-size: 16px;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 * SÓ o CSS do app (telas logadas, aluno, exercício público, login, Central de
 * Ajuda). Lista explícita — nada de `require_tree .`: ele mandava as 9 propostas
 * de landing (~610 KB) para todas as telas. A ordem é a alfabética de antes
 * (a cascata entre arquivos depende dela). Ficam FORA (cada layout/página que usa
 * carrega o seu): landing_*.css (layouts landing_option/landing_preview/
 * landing_experience; landing_grifo também no layout help), landing.css
 * (proposta 0, landing/index), landing_switcher.css, help_center.css (layout
 * help) e valentine.css (pages/valentines). Arquivo novo de CSS do app: inclua
 * aqui. Orçamento: test/integration/perf_budgets_test.rb (CSS por tipo de página).
 *










 */

/*
 * Não declare utilitários do Tailwind aqui (ex.: `.bottom-4`): este arquivo é CSS
 * SEM @layer e vence qualquer utilitário do Tailwind 4 (que vive em
 * `@layer utilities`), inclusive as variantes responsivas. Um `.bottom-4` solto
 * aqui anulava o `sm:bottom-auto` do toast de flash, que ficava com top+bottom
 * e ocupava a altura inteira da tela no desktop. Guarda:
 * test/guardrails/unlayered_utility_css_test.rb
 */