/* =========================================================================
 * Notificações do painel — estilo "painel" do PNotify (modelo novo).
 *
 * Substitui o styling 'bootstrap3' nos toasts. O mapa de classes é
 * registrado no painel.js (PNotify.styling.painel); aqui é só a aparência.
 *
 * Direção tonal: fundo no tom claro e tinta no tom forte, o mesmo par que o
 * .frm-badge do formulario.css já usa nas listagens — o usuário lê a mesma
 * cor pro mesmo estado nos dois lugares.
 *
 * Os ícones são lucide embutidos como mask-image, então acompanham o
 * currentColor de cada estado e dispensam a fonte Glyphicons do Bootstrap 3.
 *
 * Fora daqui: os PNotify com addclass="stack-modal" ($pn.notify.confirm,
 * $pn.notify.loading e o confirm da PRDFRM006) seguem em bootstrap3 — são
 * modais, não toasts, e têm ícone próprio.
 * ========================================================================= */

/* O painel.css trava .ui-pnotify em `max-width:300px !important` — apertado
   demais pras listas de validação. Alargamos só a pilha de toasts: os PNotify
   modais não têm .pnpainel e seguem com a largura (e a centragem) de sempre. */
.ui-pnotify:has(.pnpainel) {
    max-width: 380px !important;
    width: 380px !important;
}

.pnpainel.ui-pnotify-container {
    align-items: start;
    border-radius: var(--frm-radius, 12px);
    border-style: solid;
    border-width: 1px;
    column-gap: 11px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    /* pnotify.css manda height:100%, o que esticava a caixa bem além do
       conteúdo nos toasts de uma linha. */
    height: auto;
    /* A folga à direita é fixa, não só no hover: fechar/fixar aparecem no
       hover e mudar o padding ali faria o texto refluir sob o cursor. */
    padding: 13px 32px 13px 14px;
    position: relative;
}

/* O clearfix do pnotify.css cria uma linha fantasma no grid */
.pnpainel.ui-pnotify-container::after { content: none; }

/* Sombra mais leve que a do vendor (0 6px 28px rgba(0,0,0,.1)) */
.ui-pnotify .pnpainel.ui-pnotify-shadow {
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .06),
        0 8px 24px rgba(16, 24, 40, .10);
}

/* ---------- conteúdo ---------- */

.pnpainel .ui-pnotify-title {
    font-size: 14px;
    font-weight: 620;
    letter-spacing: -.005em;
    line-height: 1.35;
    margin: 0;
}

.pnpainel .ui-pnotify-text {
    font-size: 13.5px;
    line-height: 1.45;
    opacity: .82;
}

/* Título e texto ocupam a 2ª coluna. Sem título, o PNotify esconde o
   elemento (display:none) e o texto sobe pra 1ª linha sozinho. */
.pnpainel .ui-pnotify-title,
.pnpainel .ui-pnotify-text { grid-column: 2; }

/* msgErros2Html devolve lista quando há mais de um erro de validação. O
   painel.css esconde o marcador mas mantém 20px de recuo — sem bolinha pra
   pendurar ali, o primeiro nível fica desalinhado do resto do texto. Os
   níveis internos seguem recuados, que é onde o recuo ainda informa algo. */
.pnpainel .ui-pnotify-text > ul { margin: 4px 0 0; padding-left: 0; }
.pnpainel .ui-pnotify-text li { margin-top: 2px; }
.pnpainel .ui-pnotify-text a { color: inherit; text-decoration: underline; }

/* ---------- ícone de estado ---------- */

/* Linha 1, sem span: o ícone alinha com o título (ou com o texto, quando não
   há título). Um `span 2` abriria uma linha implícita vazia nos toasts de uma
   linha só e os deixaria altos demais. */
.pnpainel .ui-pnotify-icon {
    float: none;
    grid-column: 1;
    grid-row: 1;
    margin: 0;
}

/* Precisa do descendente pra bater o `.ui-pnotify-icon span` do pnotify.css,
   que é mais específico que uma classe sozinha e traz float + margin-right. */
.pnpainel .ui-pnotify-icon span.pnpainel__ico {
    background-color: currentColor;
    display: block;
    float: none;
    height: 19px;
    margin: 1px 0 0;
    width: 19px;
    -webkit-mask: center / contain no-repeat var(--pn-ico);
    mask: center / contain no-repeat var(--pn-ico);
}

.pnpainel__ico--success {
    --pn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
.pnpainel__ico--error {
    --pn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E");
}
.pnpainel__ico--notice {
    --pn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
.pnpainel__ico--info {
    --pn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}

/* ---------- fechar / fixar ---------- */

.pnpainel .ui-pnotify-closer,
.pnpainel .ui-pnotify-sticker {
    float: none;
    margin: 0;
    position: absolute;
    top: 11px;
}
.pnpainel .ui-pnotify-closer { right: 11px; }
.pnpainel .ui-pnotify-sticker { right: 32px; }

.pnpainel__act {
    background-color: currentColor;
    cursor: pointer;
    display: block;
    height: 15px;
    opacity: .5;
    transition: opacity .15s ease;
    width: 15px;
    -webkit-mask: center / contain no-repeat var(--pn-ico);
    mask: center / contain no-repeat var(--pn-ico);
}
.pnpainel__act:hover { opacity: 1; }

.pnpainel__act--close {
    --pn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
}
.pnpainel__act--pin-up {
    --pn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='14' y='4' width='4' height='16' rx='1'/%3E%3Crect x='6' y='4' width='4' height='16' rx='1'/%3E%3C/svg%3E");
}
.pnpainel__act--pin-down {
    --pn-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='6 3 20 12 6 21 6 3'/%3E%3C/svg%3E");
}

/* ---------- estados ----------
 * Mesmos pares do .frm-badge (formulario.css): fundo no -light do token,
 * tinta no tom forte. A borda é um meio-termo, pra separar do fundo branco
 * da tela sem virar contorno duro.
 */

.pnpainel--success {
    background: var(--success-light, #DCFCE7);
    border-color: #A7E9BF;
    color: #15803d;
}
.pnpainel--error {
    background: var(--danger-light, #FEE2E2);
    border-color: #F5AFAF;
    color: #b91c1c;
}
.pnpainel--notice {
    background: var(--warning-light, #FEF3C7);
    border-color: #F2D48A;
    color: #b45309;
}
.pnpainel--info {
    background: var(--info-light, #DBEAFE);
    border-color: #A9C8FA;
    color: #1d4ed8;
}

/* ---------- telas estreitas ----------
 * O :has mira só a pilha de toasts; os PNotify modais (stack-modal) têm
 * centragem própria por margin-left e não podem ser esticados.
 */
@media (max-width: 560px) {
    .ui-pnotify:has(.pnpainel) {
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pnpainel__act { transition: none; }
}