:root {
    --mod-acento: #006cc9;
    --mod-acento-claro: #1a87e6;
    --mod-superficie: #ffffff;
    --mod-superficie-topo: rgba(255, 255, 255, 0.96);
    --mod-borda: rgba(15, 23, 42, 0.08);
    --mod-texto: #18181b;
    --mod-texto-suave: #52525b;
    --mod-veu: rgba(15, 23, 42, 0.45);
    --mod-sombra: 0 24px 60px -12px rgba(15, 23, 42, 0.35);
    --mod-sucesso: #16a34a;
    --mod-aviso: #d97706;
    --mod-erro: #dc2626;
    --mod-info: #006cc9;
}

.dark, [data-tema="escuro"] {
    --mod-superficie: #18181b;
    --mod-superficie-topo: rgba(24, 24, 27, 0.96);
    --mod-borda: rgba(255, 255, 255, 0.1);
    --mod-texto: #fafafa;
    --mod-texto-suave: #a1a1aa;
    --mod-veu: rgba(0, 0, 0, 0.7);
    --mod-sombra: 0 24px 60px -12px rgba(0, 0, 0, 0.75);
    --mod-sucesso: #4ade80;
    --mod-aviso: #fbbf24;
    --mod-erro: #f87171;
    --mod-info: #60a5fa;
}

.mod-veu {
    position: fixed;
    inset: 0;
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--mod-veu);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.22s ease;
}

.mod-veu[data-visivel="1"] { opacity: 1; }

.mod-caixa {
    position: relative;
    width: 100%;
    max-width: 26rem;
    background: var(--mod-superficie-topo);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 1rem;
    box-shadow: var(--mod-sombra), 0 0 0 1px var(--mod-borda);
    padding: 1.75rem 1.5rem 1.375rem;
    text-align: center;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--mod-texto);
    transform: translateY(14px) scale(0.97);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
    overflow: hidden;
}

.mod-veu[data-visivel="1"] .mod-caixa {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.mod-selo {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(128, 128, 128, 0.12);
    background: color-mix(in srgb, var(--mod-cor) 12%, transparent);
    box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.25);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mod-cor) 25%, transparent);
    color: var(--mod-cor);
}

.mod-selo svg {
    width: 1.75rem;
    height: 1.75rem;
    stroke: currentColor;
    stroke-width: 2.2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mod-caixa[data-tipo="sucesso"] { --mod-cor: var(--mod-sucesso); }
.mod-caixa[data-tipo="aviso"]   { --mod-cor: var(--mod-aviso); }
.mod-caixa[data-tipo="erro"]    { --mod-cor: var(--mod-erro); }
.mod-caixa[data-tipo="info"]    { --mod-cor: var(--mod-info); }
.mod-caixa[data-tipo="pergunta"]{ --mod-cor: var(--mod-info); }

.mod-titulo {
    margin: 0 0 0.4rem;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.mod-texto {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--mod-texto-suave);
    word-break: break-word;
}

.mod-acoes {
    display: flex;
    gap: 0.625rem;
    margin-top: 1.5rem;
}

.mod-acoes button {
    flex: 1;
    border: 0;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.mod-acoes button:focus-visible,
.mod-fechar:focus-visible {
    outline: 2px solid rgba(128, 128, 128, 0.45);
    outline: 2px solid color-mix(in srgb, var(--mod-texto) 38%, transparent);
    outline-offset: 3px;
}

.mod-confirmar {
    color: #fff;
    background: linear-gradient(to right, var(--mod-acento), var(--mod-acento-claro));
    box-shadow: 0 10px 20px -8px rgba(0, 108, 201, 0.55);
    box-shadow: 0 10px 20px -8px color-mix(in srgb, var(--mod-acento) 60%, transparent);
}

.mod-confirmar:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px -8px rgba(0, 108, 201, 0.7);
    box-shadow: 0 14px 26px -8px color-mix(in srgb, var(--mod-acento) 75%, transparent);
}

.mod-confirmar:active { transform: translateY(0); }

.mod-cancelar {
    color: var(--mod-texto);
    background: rgba(128, 128, 128, 0.12);
    background: color-mix(in srgb, var(--mod-texto) 8%, transparent);
    box-shadow: inset 0 0 0 1px var(--mod-borda);
}

.mod-cancelar:hover {
    background: rgba(128, 128, 128, 0.2);
    background: color-mix(in srgb, var(--mod-texto) 14%, transparent);
}

.mod-fechar {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--mod-texto-suave);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    font-size: 1.125rem;
    line-height: 1;
}

.mod-fechar:hover {
    background: rgba(128, 128, 128, 0.12);
    background: color-mix(in srgb, var(--mod-texto) 8%, transparent);
    color: var(--mod-texto);
}

.mod-barra {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: var(--mod-cor);
    transform-origin: left center;
    opacity: 0.8;
}

@media (max-width: 480px) {
    .mod-caixa { padding: 1.5rem 1.25rem 1.25rem; border-radius: 0.875rem; }
    .mod-acoes { flex-direction: column-reverse; }
}

@media (prefers-reduced-motion: reduce) {
    .mod-veu, .mod-caixa { transition: none; }
    .mod-caixa { transform: none; }
    .mod-barra { transition: none; }
}