:root{
    --pdi-range-track-default:#e2e8f0;
    --pdi-prim: #0B99C9;
    --pdi-prim-600: #0987b1;
    --pdi-text-dark: #0f172a;
    --pdi-text-light: #f8fafc;
    --pdi-ok: #10b981;
    --pdi-warn: #f59e0b;
    --pdi-err: #dc2626;
    --pdi-surface: #ffffff;
    --pdi-surface-dark: #0b2530;
}
.dark{
    --pdi-range-track-default:#475569;
    --pdi-text-dark: #e2e8f0;

}

        /* =========================================================
        RANGE: base e reset
        ========================================================= */
        #gradePilares input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            background: transparent;
            /* evita track padrão */
            height: 1.125rem; /* 18px */
            /* centraliza thumb no iOS */
        }

        /* =========================================================
         RANGE: trilho (track) + preenchido (fill) — WebKit/Chromium
        - Antes do thumb (fill):   --pdi-range-fill, largura --p
        - Depois do thumb (track): --pdi-range-track
        ========================================================= */
        #gradePilares input[type="range"]::-webkit-slider-runnable-track {
            height: 0.375rem; /* 6px */
            border-radius: 62.438rem; /* 999px */
            background:
                /* FILL à esquerda do thumb */
                linear-gradient(var(--pdi-range-fill, #0987b1), var(--pdi-range-fill, #0987b1)) 0/var(--p, 0%) 100% no-repeat,
                /* TRACK à direita do thumb */
                var(--pdi-range-track, var(--pdi-range-track-default));
        }

        /* =========================================================
        RANGE: trilho (track) + preenchido (fill) — Firefox
        ========================================================= */
        #gradePilares input[type="range"]::-moz-range-track {
            height: 0.375rem; /* 6px */
            border-radius: 62.438rem; /* 999px */
            background: var(--pdi-range-track, var(--pdi-range-track-default));
            /* depois do thumb */
        }

        #gradePilares input[type="range"]::-moz-range-progress {
            height: 0.375rem; /* 6px */
            border-radius: 62.438rem; /* 999px */
            background: var(--pdi-range-fill, #0987b1);
            /* antes do thumb */
        }

        /* =========================================================
        RANGE: thumb (bolinha)
        ========================================================= */
        #gradePilares input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 0.875rem; /* 14px */
            height: 0.875rem; /* 14px */
            border-radius: 62.438rem; /* 999px */
            background: var(--pdi-range-thumb, #94a3b8);
            border: none;
            margin-top: -0.250rem; /* -4px */
            /* centra no track de 6px */
            box-shadow: 0 0 0 0.250rem rgba(0, 0, 0, 0.04); /* 0 0 0 4px */
        }

        #gradePilares input[type="range"]::-moz-range-thumb {
            width: 0.875rem; /* 14px */
            height: 0.875rem; /* 14px */
            border-radius: 62.438rem; /* 999px */
            background: var(--pdi-range-thumb, #94a3b8);
            border: none;
        }

        /* Thumb colorido mesmo desabilitado */
        .pdi-acao-concluida input[type="range"]:disabled::-webkit-slider-thumb,
        .pdi-acao-em-progresso input[type="range"]:disabled::-webkit-slider-thumb,
        .pdi-acao-zerada input[type="range"]:disabled::-webkit-slider-thumb {
            background: var(--pdi-range-thumb) !important;
        }

        .pdi-acao-concluida input[type="range"]:disabled::-moz-range-thumb,
        .pdi-acao-em-progresso input[type="range"]:disabled::-moz-range-thumb,
        .pdi-acao-zerada input[type="range"]:disabled::-moz-range-thumb {
            background: var(--pdi-range-thumb) !important;
        }

        /* Estado desabilitado sem “apagar” o controle */
        .pdi-acao-concluida input[type="range"]:disabled,
        .pdi-acao-em-progresso input[type="range"]:disabled,
        .pdi-acao-zerada input[type="range"]:disabled {
            opacity: 1;
            cursor: default;
        }

        /* =========================================================
        CORES POR ESTADO (apenas variáveis)
        ========================================================= */
        .pdi-acao-concluida input[type="range"] {
            --pdi-range-track: #bbf7d0;
            /* depois do thumb (verde claro) */
            --pdi-range-fill: #10b981;
            /* antes do thumb (verde) */
            --pdi-range-thumb: #10b981;
            /* bolinha */
        }

        .pdi-acao-concluida {
            border-color: #10b98140;
        }

        .pdi-acao-em-progresso {
            border-color: #0B99C980;
        }

        .pdi-acao-zerada {
            border-color: var(--pdi-range-track-default);
        }

        .pdi-acao-em-progresso input[type="range"] {
            --pdi-range-track: rgba(11, 153, 201, 0.15);
            /* depois do thumb */
            --pdi-range-fill: #0B99C9;
            /* antes do thumb */
            --pdi-range-thumb: #0987b1;
            /* bolinha */
        }

        .pdi-acao-zerada input[type="range"] {
            --pdi-range-track: var(--pdi-range-track-default);
            /* depois do thumb (cinza) */
            --pdi-range-fill: #94a3b8;
            /* antes do thumb (cinza médio) */
            --pdi-range-thumb: #94a3b8;
            /* bolinha */
        }

        /* =========================================================
        LAYOUT/RESPONSIVO (mantidos, sem duplicidade)
        ========================================================= */
        #gradePilares {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
            grid-auto-rows: auto;
            align-items: start;
        }

        @media (min-width: 48rem) { /* 768px */

            /* md */
            #gradePilares {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (min-width: 64rem) { /* 1024px */

            /* lg */
            #gradePilares {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        #gradePilares>section {
            display: flex;
            flex-direction: column;
            align-self: start;
            height: auto;
        }

        #gradePilares>section>div.grid {
            overflow: auto;
        }

        #gradePilares>section>div:first-child {
            display: flex;
            flex-wrap: wrap;
        }

        #gradePilares .rounded-xl {
            min-height: 0;
            display: block;
        }

        #gradePilares .rounded-xl .flex-1 {
            min-height: 0;
        }

        #gradePilares h4,
        #gradePilares p {
            word-break: break-word;
        }

        @media (max-width: 40rem) { /* 640px */
            #gradePilares input[type="range"] {
                width: 100% !important;
            }

            #gradePilares .min-w-\[300px\] {
                min-width: 18.750rem !important; /* 300px */
            }

            #gradePilares .p-4 {
                padding: 0.75rem;
            }

            #gradePilares section {
                padding: 0;
            }
        }

        body.pdi-somenteleitura {
            --tw-ring-color: rgba(11, 153, 201, 0.08);
        }

        /* Faixa */
        .pdi-faixa {
            --ribbon-bg: #c4e5f0;
            --ribbon-shadow: rgba(9, 135, 177, .25);
            position: absolute;
            top: .7rem;
            left: .75rem;
            z-index: 5;
            display: inline-block;
            font-size: .75rem;
            font-weight: 700;
            color: rgba(9, 135, 177);
            background: var(--ribbon-bg);
            padding: .35rem .85rem;
            margin-top: 0.313rem; /* 5px */
            border-radius: 0.500rem; /* 8px */
            box-shadow: 0 0.125rem 0.500rem rgba(11, 153, 201, .25); /* 0 2px 8px */
        }

        .pdi-faixa::after {
            content: "";
            position: absolute;
            top: 50%;
            right: -0.375rem; /* -6px */
            transform: translateY(-50%);
            border-top: 0.750rem solid transparent; /* 12px */
            border-bottom: 0.750rem solid transparent; /* 12px */
            border-left: 0.500rem solid var(--ribbon-bg); /* 8px */
        }

        .pdi-faixa::before {
            content: "";
            position: absolute;
            left: 0.375rem; /* 6px */
            bottom: -0.500rem; /* -8px */
            border-top: 0.500rem solid var(--ribbon-shadow); /* 8px */
            border-left: 0.500rem solid transparent; /* 8px */
            filter: saturate(.9);
        }

        .pdi-cartao {
            position: relative;
            overflow: visible;
        }

        .container-progresso {
            width: 100%;
            height: 1.000rem; /* 16px */
            background: #e2e8f0;
            border-radius: 0.500rem; /* 8px */
            overflow: hidden;
        }

        /* ====== Flags de idioma: ativo colorido, inativo em cinza, hover colorido ====== */
        .flag {
        filter: grayscale(100%);
        opacity: 0.7;
        transition: filter .2s ease, opacity .2s ease, transform .2s ease, box-shadow .2s ease;
        }

        .flag:hover {
        filter: grayscale(0%);
        opacity: 1;
        }

        .flag.ativo {
        filter: grayscale(0%);
        opacity: 1;

        /* anel opcional pro ativo (combina com Tailwind ring-*) */
        box-shadow: 0 0 0 2px #0B99C9; /* fallback caso ring do Tailwind não esteja ativo */
        }

        .flag.ativo.tw-ring {
        box-shadow: none; /* desliga o fallback acima se usar ring utilities */
        }

        /* === Reset do Toastify: mata o gradiente e a sombra padrão === */
        .toastify.toast-pdi{
        background-image: none !important;
        background: var(--toast-bg, #fff) !important;
        color: var(--toast-fg, #111827) !important;
        border-radius: 8px !important;
        box-shadow: 0 6px 24px rgba(0,0,0,.18) !important;
        font-weight: 500 !important;
        padding: 10px 14px !important;
    }

        /* Close “X” herda a cor do texto e fica discreto */
        .toastify.toast-pdi .toast-close{
        color: currentColor !important;
        opacity: .65;
        }

        .toastify.toast-pdi:hover .toast-close{
        opacity: 1;
        }

        /* ===== Paleta alinhada com seus cards ===== */
        /* Sucesso → emerald */
        .toast-pdi--success{
        --toast-bg: #ecfdf5;   /* emerald-50  */
        --toast-fg: #047857;   /* emerald-700 */
        --toast-bd: #a7f3d0;   /* emerald-200 */
        }

        .dark .toast-pdi--success{
        --toast-bg: rgba(6,95,70,.5); /* emerald-900/50 aprox */
        --toast-fg: #34d399;         /* emerald-400 */
        --toast-bd: #065f46;         /* emerald-700 */
        }

        /* Erro → rose */
        .toast-pdi--error{
        --toast-bg: #fff1f2;   /* rose-50  */
        --toast-fg: #be123c;   /* rose-700 */
        --toast-bd: #fecdd3;   /* rose-200 */
        }

        .dark .toast-pdi--error{
        --toast-bg: rgba(244,63,94,.5); /* rose-500/50 */
        --toast-fg: #fecaca;           /* rose-200 */
        --toast-bd: #b91c1c;           /* rose-700 aprox */
        }

        /* Info → sky */
        .toast-pdi--info{
        --toast-bg: #f0f9ff;   /* sky-50  */
        --toast-fg: #0369a1;   /* sky-700 */
        --toast-bd: #bae6fd;   /* sky-200 */
        }

        .dark .toast-pdi--info{
        --toast-bg: rgba(12,74,110,.5); /* sky-900/50 */
        --toast-fg: #38bdf8;           /* sky-400 */
        --toast-bd: #0c4a6e;           /* sky-700 */
        }

        /* Neutro/Warning → slate (igual teu “default”) */
        .toast-pdi--warning{
        --toast-bg: #f1f5f9;   /* slate-100 */
        --toast-fg: #334155;   /* slate-700 */
        --toast-bd: #e2e8f0;   /* slate-200 */
        }

        .dark .toast-pdi--warning{
        --toast-bg: #334155;   /* slate-700 */
        --toast-fg: #f1f5f9;   /* slate-100 */
        --toast-bd: #334155;   /* slate-700 */
        }

        /* Centraliza texto quando usar position: "center" */
        .toast-pdi--center{ text-align: center; }

        /* Conteúdo com largura de A4 útil (190mm = A4 210mm - margens 10mm de cada lado) */
        #conteudoPdf {
          width: 190mm;
          margin: 0 auto;
          background: #fff; /* fundo limpo melhora a renderização */
        }

        /* Forçar quebra antes deste elemento */
        .quebra-pagina {
          break-before: page;
          page-break-before: always; /* legado */
        }

        /* Evitar quebrar dentro (útil para cards) */
        .evitar-quebra {
          break-inside: avoid;
          page-break-inside: avoid; /* legado */
        }

        /* Modo mais estável para PDF: sem sombras, sem sticky, sem animações */
        .pdf-simples * {
          animation: none !important;
          transition: none !important;
        }


        .pdf-simples .sticky {
          position: static !important;
          top: auto !important;
        }
        .pdf-simples .shadow,
        .pdf-simples .shadow-sm,
        .pdf-simples .shadow-md,
        .pdf-simples .shadow-lg {
          box-shadow: none !important;
        }

        /* (Opcional) No PDF, refluímos grid para 1 coluna para reduzir cortes feios */
        .pdf-simples #gradePilares {
          display: grid;
          grid-template-columns: 1fr !important;
          gap: 12mm !important;
        }

        .pdf-simples #gradePilares > section {
          break-inside: avoid;
          page-break-inside: avoid; /* legado */
          break-after: page;
          page-break-after: always; /* legado */
        }

        .pdf-simples #gradePilares > section:last-child {
          break-after: auto;
          page-break-after: auto; /* legado */
        }

        .progress-striped {
        background-image: linear-gradient(
            -45deg,
            rgba(255,255,255,0.2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255,255,255,0.2) 50%,
            rgba(255,255,255,0.2) 75%,
            transparent 75%,
            transparent
        );
        background-size: 1rem 1rem;
        animation: progress-stripes 1s linear infinite;
        }

        @keyframes progress-stripes {
        from { background-position: 0 0; }
        to   { background-position: 1rem 0; }
        }

        /* Para a animação quando a barra estiver completa */
        .progress-striped[style*="width:100%"] {
        animation: none;
        background-color: #0987b1;
        background-image: none
        }
/* 1 coluna no modo PDF, para evitar cortes feios */
.pdf-simples #gradePilares {
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 12mm !important;
}

/* Cada SECTION (página) quebra sozinha e tem altura útil de A4 (297mm - 2x10mm) */
.pdf-simples #gradePilares > section {
  display: flex;                /* para a área de anotações crescer */
  flex-direction: column;
  min-height: calc(297mm - 20mm);
  break-inside: avoid;
  page-break-inside: avoid;     /* legado */
  break-after: page;
  page-break-after: always;     /* legado */
}

.pdf-simples #gradePilares > section:last-child {
  break-after: auto;
  page-break-after: auto;       /* legado */
}

/* Notas só aparecem no PDF */
.notas-only-print { display: none; }
.pdf-simples .notas-only-print { display: block; }

/* Área de anotações preenche o que sobrar da página */
.pdf-simples .area-anotacoes {
  margin-top: 6mm;
  flex: 1 1 auto;         /* cresce para ocupar o restante da página */
  position: relative;
  padding-top: 5mm;       /* espaço para o título "Anotações" */
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

/* Título "Anotações" (i18n opcional depois) */
.pdf-simples .area-anotacoes::before {
  content: attr(data-titulo);
  position: absolute;
  top: 2mm;
  left: 0;
  right: 0;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: #64748b; /* slate-500 */
}

/* Linhas de caderno */
.pdf-simples .area-anotacoes .linhas {
  height: 100%;
  background:
    repeating-linear-gradient(
      to bottom,
      #ffffff 0mm,
      #ffffff 9mm,
      #e2e8f0 9mm,
      #e2e8f0 9.3mm
    );
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}