/* ============================================================================
   BASE MODALS - Sistema de Modais Teleportados + ERP Modal Premium v2.1
   Extraido de base.html em 08/02/2026 | Atualizado 09/02/2026
   Conteudo: Teleport modals, ERP modal premium (11 breakpoints, dark, glow)
   v2.1: CSS vars teleport, -webkit-backdrop-filter, scrollbar theme-aware,
         Firefox scrollbar, focus-visible, @media print, warning variant
   ============================================================================ */

/* ═══════════════════════════════════════════════════════════════════════════════
   SISTEMA DE MODAIS TELEPORTADOS - CSS GLOBAL (2025-11-10)
   ═══════════════════════════════════════════════════════════════════════════════

   CSS global para modais com x-teleport do Alpine.js
   Garante que modais sejam centralizados, responsivos e sem deformações

   Baseado em: template_modalcorreto.MD
   Compatível com: Desktop, Mobile, Tablets
   ═══════════════════════════════════════════════════════════════════════════════ */

/* 1. Bloqueia scroll do body quando modal está aberto */
body.modal-open {
    overflow: hidden !important;
}
/* 1b. SAFEGUARD: No mobile, não travar scroll se classe ficou presa sem modal visível */
@media (max-width: 768px) {
    body.modal-open:not(:has(.modal-teleport-container[style*="display: block"])):not(:has(.erp-modal-active)) {
        overflow-y: auto !important;
    }
}

/* 2. Força z-index máximo para elementos teleportados */
body > div[x-cloak] {
    z-index: 99999 !important;
}

/* 3. Container principal do modal teleportado */
.modal-teleport-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 99999 !important;
    overflow-y: auto !important;
}

/* 4. Overlay (fundo escuro com blur) */
.modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 99998 !important;
    transition: opacity 0.3s ease !important;
}

/* 5. Container de centralização */
.modal-center-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    padding: 1rem !important;
    position: relative !important;
    z-index: 99999 !important;
}

/* 6. Conteúdo do modal - CRÍTICO: Usar flexbox para layout vertical */
/* Baseado em template_modalcorreto.MD v6.4 - 11 breakpoints responsivos */
.modal-content-teleport {
    position: relative !important;
    background-color: var(--bg-surface, white) !important;
    color: var(--text-primary, #263B4A) !important;
    border-radius: var(--radius-xl, 1rem) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(212, 168, 37, 0.2) !important;
    width: 100% !important;
    max-width: calc(100vw - 1rem); /* Margem minima - breakpoints refinam. Sem !important p/ inline override */
    max-height: calc(100vh - 1rem) !important;
    max-height: calc(100dvh - 1rem) !important; /* Dynamic viewport (mobile) */
    overflow: hidden !important;
    z-index: 99999 !important;
    /* CRÍTICO: Usar flexbox para manter footer visível */
    display: flex !important;
    flex-direction: column !important;
    transform-origin: center center !important;
    /* FIX: Forçar light color-scheme para prevenir Chrome Auto Dark Mode */
    color-scheme: light !important;
}

/* Dark mode - Gold glow premium (Verde Premium + Dourado) */
.dark .modal-content-teleport {
    background-color: var(--bg-surface, #1f2937) !important;
    color: var(--text-primary, #FAFAFA) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), 0 0 60px rgba(212, 168, 37, 0.15) !important;
    border: 2px solid rgba(212, 168, 37, 0.6) !important;
    color-scheme: dark !important;
}

/* 7. Body com scroll - AJUSTADO para não cortar footer */
.modal-body-scrollable {
    max-height: calc(80vh - 180px) !important;
    overflow-y: auto !important;
    flex: 1 !important; /* Cresce para ocupar espaço disponível */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* 8. Footer sempre visível - CRÍTICO */
.modal-footer-fixed {
    flex-shrink: 0 !important; /* Não encolhe */
    margin-top: auto !important; /* Sempre no final */
}

/* ═══════════════════════════════════════════════════════════════════════════════
   9. BREAKPOINTS RESPONSIVOS - 11 Breakpoints (template_modalcorreto.MD v6.4)
   Mobile-first, do menor para o maior
   ═══════════════════════════════════════════════════════════════════════════════ */

/* 9.1 CELULARES MUITO PEQUENOS (< 360px) - iPhone SE 1ª gen, Galaxy J1 */
@media screen and (max-width: 359px) {
    .modal-center-container {
        padding: 0.25rem !important;
        align-items: flex-start !important;
        padding-top: 0.5rem !important;
    }
    .modal-content-teleport {
        max-width: calc(100vw - 0.5rem);
        max-height: calc(100vh - 0.5rem) !important;
        max-height: calc(100dvh - 0.5rem) !important;
        border-radius: 0.5rem !important;
        margin: 0.25rem !important;
    }
    .modal-body-scrollable {
        padding: 0.75rem !important;
        max-height: calc(100dvh - 140px) !important;
    }
    .modal-footer-fixed {
        padding: 0.5rem 0.75rem !important;
        gap: 0.5rem !important;
    }
    .modal-footer-fixed .btn,
    .modal-content-teleport button {
        min-height: 44px !important;
        flex: 1 !important;
    }
}

/* 9.2 CELULARES PEQUENOS (360px - 479px) - iPhone SE 2/3, Galaxy A */
@media screen and (min-width: 360px) and (max-width: 479px) {
    .modal-center-container {
        padding: 0.5rem !important;
    }
    .modal-content-teleport {
        max-width: calc(100vw - 1rem);
        max-height: calc(100vh - 1rem) !important;
        max-height: calc(100dvh - 1rem) !important;
        border-radius: 0.75rem !important;
    }
    .modal-body-scrollable {
        max-height: calc(100dvh - 150px) !important;
    }
    .modal-footer-fixed .btn,
    .modal-content-teleport button {
        min-height: 48px !important;
    }
}

/* 9.3 CELULARES GRANDES (480px - 639px) - iPhone Plus/Max, Pixel */
@media screen and (min-width: 480px) and (max-width: 639px) {
    .modal-center-container {
        padding: 0.75rem !important;
    }
    .modal-content-teleport {
        max-width: min(480px, calc(100vw - 1.5rem));
        max-height: calc(100vh - 1.5rem) !important;
        max-height: calc(100dvh - 1.5rem) !important;
        border-radius: 0.875rem !important;
    }
    .modal-body-scrollable {
        max-height: calc(100dvh - 160px) !important;
    }
    .modal-footer-fixed .btn,
    .modal-content-teleport button {
        min-height: 48px !important;
    }
}

/* 9.4 TABLETS PEQUENOS / LANDSCAPE MOBILE (640px - 767px) */
@media screen and (min-width: 640px) and (max-width: 767px) {
    .modal-center-container {
        padding: 1rem !important;
    }
    .modal-content-teleport {
        max-width: min(560px, calc(100vw - 2rem));
        max-height: calc(100vh - 2rem) !important;
        border-radius: 1rem !important;
    }
    .modal-content-teleport.modal-sm { max-width: min(380px, calc(100vw - 2rem)); }
    .modal-content-teleport.modal-lg { max-width: min(640px, calc(100vw - 2rem)); }
    .modal-content-teleport.modal-xl { max-width: min(720px, calc(100vw - 2rem)); }
    .modal-body-scrollable {
        max-height: calc(90vh - 170px) !important;
    }
}

/* 9.5 TABLETS / LAPTOPS PEQUENOS 10-11" (768px - 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .modal-center-container {
        padding: 1.5rem !important;
    }
    .modal-content-teleport {
        max-width: min(640px, calc(100vw - 3rem));
        max-height: calc(95vh - 3rem) !important;
        border-radius: 1rem !important;
    }
    .modal-content-teleport.modal-sm { max-width: min(400px, calc(100vw - 3rem)); }
    .modal-content-teleport.modal-lg { max-width: min(720px, calc(100vw - 3rem)); }
    .modal-content-teleport.modal-xl { max-width: min(800px, calc(100vw - 3rem)); }
    .modal-body-scrollable {
        max-height: calc(85vh - 180px) !important;
    }
}

/* 9.6 LAPTOPS 13-14" (1024px - 1279px) */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
    .modal-center-container {
        padding: 2rem !important;
    }
    .modal-content-teleport {
        max-width: min(600px, calc(100vw - 4rem));
        max-height: calc(90vh - 4rem) !important;
        border-radius: 1rem !important;
    }
    .modal-content-teleport.modal-sm { max-width: 420px; }
    .modal-content-teleport.modal-lg { max-width: min(800px, calc(100vw - 4rem)); }
    .modal-content-teleport.modal-xl { max-width: min(960px, calc(100vw - 4rem)); }
    .modal-body-scrollable {
        max-height: calc(80vh - 180px) !important;
    }
}

/* 9.7 MONITORES 15-19" (1280px - 1439px) */
@media screen and (min-width: 1280px) and (max-width: 1439px) {
    .modal-center-container {
        padding: 2rem !important;
    }
    .modal-content-teleport {
        max-width: 600px;
        max-height: calc(88vh - 4rem) !important;
        border-radius: 1rem !important;
    }
    .modal-content-teleport.modal-sm { max-width: 440px; }
    .modal-content-teleport.modal-lg { max-width: 850px; }
    .modal-content-teleport.modal-xl { max-width: 1000px; }
    .modal-body-scrollable {
        max-height: calc(78vh - 180px) !important;
    }
}

/* 9.8 MONITORES 20-22" (1440px - 1599px) */
@media screen and (min-width: 1440px) and (max-width: 1599px) {
    .modal-center-container {
        padding: 2.5rem !important;
    }
    .modal-content-teleport {
        max-width: 620px;
        max-height: calc(85vh - 5rem) !important;
    }
    .modal-content-teleport.modal-sm { max-width: 460px; }
    .modal-content-teleport.modal-lg { max-width: 900px; }
    .modal-content-teleport.modal-xl { max-width: 1100px; }
    .modal-body-scrollable {
        max-height: calc(75vh - 180px) !important;
    }
}

/* 9.9 MONITORES 24-27" FHD/2K (1600px - 1919px) */
@media screen and (min-width: 1600px) and (max-width: 1919px) {
    .modal-center-container {
        padding: 3rem !important;
    }
    .modal-content-teleport {
        max-width: 650px;
        max-height: calc(82vh - 6rem) !important;
    }
    .modal-content-teleport.modal-sm { max-width: 480px; }
    .modal-content-teleport.modal-lg { max-width: 950px; }
    .modal-content-teleport.modal-xl { max-width: 1200px; }
    .modal-body-scrollable {
        max-height: calc(72vh - 180px) !important;
    }
}

/* 9.10 MONITORES 27-32" FHD/2K (1920px - 2559px) */
@media screen and (min-width: 1920px) and (max-width: 2559px) {
    .modal-center-container {
        padding: 4rem !important;
    }
    .modal-content-teleport {
        max-width: 700px;
        max-height: calc(80vh - 8rem) !important;
        border-radius: 1.25rem !important;
    }
    .modal-content-teleport.modal-sm { max-width: 500px; }
    .modal-content-teleport.modal-lg { max-width: 1000px; }
    .modal-content-teleport.modal-xl { max-width: 1300px; }
    .modal-content-teleport.modal-fullscreen {
        max-width: calc(100vw - 8rem);
        max-height: calc(100vh - 8rem) !important;
    }
    .modal-body-scrollable {
        max-height: calc(70vh - 180px) !important;
    }
}

/* 9.11 MONITORES 4K / ULTRAWIDE (2560px+) */
@media screen and (min-width: 2560px) {
    .modal-center-container {
        padding: 5rem !important;
    }
    .modal-content-teleport {
        max-width: 800px;
        max-height: calc(75vh - 10rem) !important;
        border-radius: 1.5rem !important;
    }
    .modal-content-teleport.modal-sm { max-width: 550px; }
    .modal-content-teleport.modal-lg { max-width: 1100px; }
    .modal-content-teleport.modal-xl { max-width: 1500px; }
    .modal-content-teleport.modal-fullscreen {
        max-width: calc(100vw - 10rem);
        max-height: calc(100vh - 10rem) !important;
    }
    .modal-body-scrollable {
        max-height: calc(65vh - 200px) !important;
    }
}

/* Landscape mode (mobile/tablet) */
@media (max-width: 896px) and (orientation: landscape) {
    .modal-content-teleport {
        max-height: calc(100vh - 2rem) !important;
    }
}

/* Telas muito altas */
@media (min-height: 1200px) {
    .modal-content-teleport {
        max-height: 900px !important;
    }
}

/* Predefined size classes - usar: <div class="modal-content-teleport modal-sm"> */
.modal-content-teleport.modal-xs { max-width: 320px; }
.modal-content-teleport.modal-fullscreen {
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem) !important;
    border-radius: 0.5rem !important;
}

/* iOS safe areas */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 639px) {
        .modal-content-teleport {
            max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 1rem) !important;
        }
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .modal-content-teleport,
    .modal-overlay,
    .modal-close-btn {
        transition: none !important;
        animation: none !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .modal-content-teleport {
        border: 2px solid currentColor !important;
    }
}

/* 10. Header do modal - cores e estilos */
.modal-header-teleport {
    border-top-left-radius: var(--radius-xl, 1rem) !important;
    border-top-right-radius: var(--radius-xl, 1rem) !important;
    padding: 1.25rem 1.5rem !important;
    border-bottom: 1px solid var(--border-default, #dee2e6) !important;
}

.dark .modal-header-teleport {
    border-bottom-color: var(--border-default, #374151) !important;
}

/* 11. Footer do modal - cores e estilos */
.modal-footer-teleport {
    border-bottom-left-radius: var(--radius-xl, 1rem) !important;
    border-bottom-right-radius: var(--radius-xl, 1rem) !important;
    padding: 1rem 1.5rem !important;
    border-top: 1px solid var(--border-default, #dee2e6) !important;
    background-color: var(--bg-surface-elevated, #f9fafb) !important;
}

.dark .modal-footer-teleport {
    border-top-color: var(--border-default, #374151) !important;
    background-color: var(--bg-surface-elevated, #111827) !important;
}

/* 12. Botão X de fechar - GRANDE e VISÍVEL */
.modal-close-btn {
    font-size: 2rem !important;
    min-width: 2.5rem !important;
    min-height: 2.5rem !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.modal-close-btn:hover {
    transform: scale(1.1) !important;
}

.modal-close-btn:focus-visible {
    outline: 2px solid var(--color-accent, #d4a825) !important;
    outline-offset: 2px !important;
}

/* 13. Scrollbar personalizada para modais - Theme-aware */
.modal-body-scrollable::-webkit-scrollbar {
    width: 8px;
}

.modal-body-scrollable::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
    margin: 4px;
}

.modal-body-scrollable::-webkit-scrollbar-thumb {
    background: var(--border-default, #cbd5e1);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.modal-body-scrollable::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent, #d4a825);
    border: 2px solid transparent;
    background-clip: padding-box;
}

.dark .modal-body-scrollable::-webkit-scrollbar-thumb {
    background: #4b5563;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.dark .modal-body-scrollable::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent, #d4a825);
}

/* Firefox scrollbar */
.modal-body-scrollable {
    scrollbar-width: thin;
    scrollbar-color: var(--border-default, #cbd5e1) transparent;
}

.dark .modal-body-scrollable {
    scrollbar-color: #4b5563 transparent;
}

/* 14. Print - esconde modais teleportados na impressão */
@media print {
    .modal-teleport-container,
    .modal-overlay,
    .modal-center-container {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FIM DO CSS DE MODAIS TELEPORTADOS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   ERP BASE MODAL - CSS Universal PREMIUM (base_modal.html)
   Integrado com sistema de temas via CSS Variables
   Versao: 2.0.0 - 05/02/2026
   Inclui: 11 breakpoints, dark mode, glow premium, spinner dourado, landscape
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ========== CONTAINER E OVERLAY ========== */
.erp-modal-container {
    position: fixed;
    inset: 0;
    z-index: 99999;
    isolation: isolate;
}

.erp-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: -1;
    transition: backdrop-filter 0.3s ease;
}

.dark .erp-modal-overlay {
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ========== CENTRALIZACAO ========== */
.erp-modal-center {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ========== CONTEUDO DO MODAL ========== */
.erp-modal-content {
    position: relative;
    background-color: var(--bg-surface, #ffffff);
    border-radius: var(--radius-xl, 1rem);
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 10px 30px -10px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-height: calc(100vh - 3rem);
    max-height: calc(100dvh - 3rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-origin: center center;
}

/* Glow dourado premium no dark mode */
.dark .erp-modal-content {
    background-color: var(--bg-surface, #1f2937);
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(212, 168, 37, 0.1),
        0 0 80px -20px rgba(212, 168, 37, 0.25);
}

/* Glow especifico por cor no dark mode */
.dark .erp-modal-content[data-modal-color="green"] {
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.8),
        0 0 80px -20px rgba(212, 168, 37, 0.3);
}

.dark .erp-modal-content[data-modal-color="danger"] {
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.8),
        0 0 80px -20px rgba(220, 38, 38, 0.3);
}

.dark .erp-modal-content[data-modal-color="gold"] {
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.8),
        0 0 100px -20px rgba(212, 168, 37, 0.4);
}

/* ========== TAMANHOS RESPONSIVOS ========== */
.erp-modal-sm { max-width: 24rem; }      /* 384px */
.erp-modal-md { max-width: 32rem; }      /* 512px */
.erp-modal-lg { max-width: 48rem; }      /* 768px */
.erp-modal-xl { max-width: 64rem; }      /* 1024px */
.erp-modal-full { max-width: min(95vw, 1600px); }

/* Limite para telas 4K+ */
@media (min-width: 2560px) {
    .erp-modal-sm { max-width: 28rem; }
    .erp-modal-md { max-width: 36rem; }
    .erp-modal-lg { max-width: 54rem; }
    .erp-modal-xl { max-width: 72rem; }
}

/* ========== HEADER PREMIUM ========== */
.erp-modal-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 1.5rem;
    color: #ffffff;
    border-top-left-radius: calc(var(--radius-xl, 1rem) - 2px);
    border-top-right-radius: calc(var(--radius-xl, 1rem) - 2px);
    position: relative;
    overflow: hidden;
}

/* Brilho sutil no header */
.erp-modal-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.3) 50%,
        transparent 100%);
}

.erp-modal-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.erp-modal-title i {
    font-size: 1.25rem;
}

/* ========== BOTAO FECHAR PREMIUM ========== */
.erp-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 1.25rem;
    cursor: pointer;
    border-radius: 0.5rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(4px);
}

.erp-modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.erp-modal-close:active {
    transform: scale(0.95);
}

/* ========== BODY ========== */
.erp-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5rem;
    color: var(--text-primary, #1f2937);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.dark .erp-modal-body {
    color: var(--text-primary, #f3f4f6);
}

/* Scrollbar premium */
.erp-modal-body::-webkit-scrollbar {
    width: 8px;
}

.erp-modal-body::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
    margin: 4px;
}

.erp-modal-body::-webkit-scrollbar-thumb {
    background: var(--border-default, #cbd5e1);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.erp-modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent, #d4a825);
    border: 2px solid transparent;
    background-clip: padding-box;
}

.dark .erp-modal-body::-webkit-scrollbar-thumb {
    background: #4b5563;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.dark .erp-modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent, #d4a825);
}

/* Firefox scrollbar */
.erp-modal-body {
    scrollbar-width: thin;
    scrollbar-color: var(--border-default, #cbd5e1) transparent;
}

.dark .erp-modal-body {
    scrollbar-color: #4b5563 transparent;
}

/* ========== FOOTER ========== */
.erp-modal-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background-color: var(--bg-surface-elevated, #f8fafc);
    border-top: 1px solid var(--border-default, #e5e7eb);
    border-bottom-left-radius: calc(var(--radius-xl, 1rem) - 2px);
    border-bottom-right-radius: calc(var(--radius-xl, 1rem) - 2px);
}

.dark .erp-modal-footer {
    background-color: rgba(31, 41, 55, 0.8);
    border-top-color: rgba(55, 65, 81, 0.5);
}

/* ========== BOTOES PREMIUM ========== */
.erp-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.15),
        0 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

/* Brilho hover */
.erp-btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.5s ease;
}

.erp-btn-primary:hover:not(:disabled)::before {
    left: 100%;
}

.erp-btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.2),
        0 4px 8px rgba(0, 0, 0, 0.1);
}

.erp-btn-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.erp-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.erp-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--text-primary, #374151);
    background-color: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-default, #d1d5db);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.erp-btn-secondary:hover:not(:disabled) {
    background-color: var(--bg-hover, #f3f4f6);
    border-color: var(--color-accent, #d4a825);
    color: var(--color-primary, #0f4c3a);
}

.erp-btn-secondary:active:not(:disabled) {
    transform: scale(0.98);
}

.erp-btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dark .erp-btn-secondary {
    color: #e5e7eb;
    background-color: #374151;
    border-color: #4b5563;
}

.dark .erp-btn-secondary:hover:not(:disabled) {
    background-color: #4b5563;
    border-color: var(--color-accent, #d4a825);
    color: var(--color-accent, #d4a825);
}

/* ========== LOADING STATE PREMIUM ========== */
.erp-modal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    min-height: 200px;
}

/* Spinner antigo (fallback) */
.erp-modal-spinner {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--border-default, #e5e7eb);
    border-top-color: var(--color-accent, #d4a825);
    border-radius: 50%;
    animation: erp-spin 0.8s linear infinite;
}

/* Spinner PREMIUM com 3 aneis */
.erp-modal-spinner-premium {
    position: relative;
    width: 4rem;
    height: 4rem;
}

.erp-modal-spinner-premium .spinner-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
    animation: erp-spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.erp-modal-spinner-premium .spinner-ring:nth-child(1) {
    border-top-color: var(--color-primary, #0f4c3a);
    animation-delay: -0.45s;
}

.erp-modal-spinner-premium .spinner-ring:nth-child(2) {
    inset: 6px;
    border-right-color: var(--color-accent, #d4a825);
    animation-delay: -0.3s;
    animation-direction: reverse;
}

.erp-modal-spinner-premium .spinner-ring:nth-child(3) {
    inset: 12px;
    border-bottom-color: var(--color-primary, #1a6b52);
    animation-delay: -0.15s;
}

.erp-modal-loading-text {
    margin-top: 1.5rem;
    color: var(--text-secondary, #6b7280);
    font-size: 0.9375rem;
    font-weight: 500;
}

@keyframes erp-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Spinner do botao */
.erp-btn-spinner {
    width: 1rem;
    height: 1rem;
    animation: erp-spin 0.75s linear infinite;
}

.erp-btn-loading,
.erp-btn-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* ========== RESPONSIVO: MOBILE (< 640px) ========== */
@media (max-width: 639px) {
    .erp-modal-center {
        padding: 0;
        align-items: flex-end;
    }

    .erp-modal-content {
        max-height: 95vh;
        max-height: 95dvh;
        border-radius: 1.5rem 1.5rem 0 0;
        margin-top: auto;
    }

    .erp-modal-header {
        padding: 1rem;
        border-radius: 1.5rem 1.5rem 0 0;
    }

    .erp-modal-title {
        font-size: 1rem;
    }

    .erp-modal-body {
        padding: 1rem;
        max-height: calc(95vh - 140px);
        max-height: calc(95dvh - 140px);
    }

    .erp-modal-footer {
        padding: 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
        border-radius: 0;
    }

    .erp-modal-footer button {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 0;
        min-height: 48px;
        padding: 0.875rem 1rem;
    }

    .erp-modal-sm,
    .erp-modal-md,
    .erp-modal-lg,
    .erp-modal-xl,
    .erp-modal-full {
        max-width: 100%;
    }
}

/* ========== MOBILE LANDSCAPE ========== */
@media (max-width: 896px) and (orientation: landscape) {
    .erp-modal-center {
        padding: 0.5rem;
        align-items: center;
    }

    .erp-modal-content {
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem);
        border-radius: var(--radius-xl, 1rem);
    }

    .erp-modal-body {
        max-height: calc(100vh - 140px);
        padding: 0.75rem 1rem;
    }

    .erp-modal-header {
        padding: 0.75rem 1rem;
    }

    .erp-modal-footer {
        padding: 0.75rem 1rem;
    }
}

/* ========== TABLET (640px - 1023px) ========== */
@media (min-width: 640px) and (max-width: 1023px) {
    .erp-modal-center {
        padding: 1rem;
    }

    .erp-modal-sm { max-width: 24rem; }
    .erp-modal-md { max-width: 32rem; }
    .erp-modal-lg { max-width: 42rem; }
    .erp-modal-xl { max-width: 90vw; }
}

/* ========== DESKTOP (1024px - 1919px) ========== */
@media (min-width: 1024px) and (max-width: 1919px) {
    .erp-modal-center {
        padding: 2rem;
    }

    .erp-modal-header {
        padding: 1.25rem 1.75rem;
    }

    .erp-modal-body {
        padding: 1.75rem;
    }

    .erp-modal-footer {
        padding: 1.25rem 1.75rem;
    }
}

/* ========== MONITORES GRANDES (1920px+) ========== */
@media (min-width: 1920px) {
    .erp-modal-center {
        padding: 3rem;
    }

    .erp-modal-content {
        max-height: calc(100vh - 6rem);
    }

    .erp-modal-header {
        padding: 1.5rem 2rem;
    }

    .erp-modal-title {
        font-size: 1.25rem;
    }

    .erp-modal-body {
        padding: 2rem;
    }

    .erp-modal-footer {
        padding: 1.5rem 2rem;
    }

    .erp-btn-primary,
    .erp-btn-secondary {
        padding: 0.875rem 1.75rem;
        font-size: 0.9375rem;
    }
}

/* ========== SAFE AREAS (iOS) ========== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 639px) {
        .erp-modal-footer {
            padding-bottom: calc(1rem + env(safe-area-inset-bottom));
        }
    }
}

/* ========== REDUCE MOTION ========== */
@media (prefers-reduced-motion: reduce) {
    .erp-modal-content,
    .erp-modal-overlay,
    .erp-modal-close,
    .erp-btn-primary,
    .erp-btn-secondary,
    .erp-modal-spinner,
    .erp-modal-spinner-premium .spinner-ring,
    .erp-btn-spinner {
        transition: none !important;
        animation: none !important;
    }

    .erp-btn-primary::before {
        display: none;
    }
}

/* ========== FOCUS VISIBLE (Acessibilidade) ========== */
.erp-modal-close:focus-visible,
.erp-btn-primary:focus-visible,
.erp-btn-secondary:focus-visible {
    outline: 2px solid var(--color-accent, #d4a825);
    outline-offset: 2px;
}

/* ========== HIGH CONTRAST MODE ========== */
@media (prefers-contrast: high) {
    .erp-modal-content {
        border-width: 3px;
    }

    .erp-btn-primary,
    .erp-btn-secondary {
        border: 2px solid currentColor;
    }
}

/* ========== PRINT ========== */
@media print {
    .erp-modal-container {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FIM DO CSS ERP BASE MODAL PREMIUM v2.0
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   PREMIUM CONFIRMATION MODALS - Theme-aware v1.1
   Uses CSS Variables from _css-variables.css for multi-theme support
   (Verde, Azul, Roxo, Bordô, Dark)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Botão primário de modal (Confirmar/Sim) - usa gradiente do tema ativo */
.modal-btn-theme-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    min-height: 44px;
    font-weight: 600;
    font-size: 0.875rem;
    color: #ffffff;
    background: var(--gradient-primary);
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb, 15, 76, 58), 0.25);
    position: relative;
    overflow: hidden;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.modal-btn-theme-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.5s ease;
}

.modal-btn-theme-primary:hover:not(:disabled)::before {
    left: 100%;
}

.modal-btn-theme-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--color-primary-rgb, 15, 76, 58), 0.35);
    filter: brightness(1.08);
}

.modal-btn-theme-primary:active:not(:disabled) {
    transform: scale(0.97);
    box-shadow: 0 1px 4px rgba(var(--color-primary-rgb, 15, 76, 58), 0.2);
}

.modal-btn-theme-primary:focus-visible {
    outline: 2px solid var(--color-accent, #d4a825);
    outline-offset: 2px;
}

/* Botão de perigo de modal (Excluir) */
.modal-btn-theme-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    min-height: 44px;
    font-weight: 600;
    font-size: 0.875rem;
    color: #ffffff;
    background: linear-gradient(135deg, #DC2626, #B91C1C);
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
    position: relative;
    overflow: hidden;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.modal-btn-theme-danger::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.5s ease;
}

.modal-btn-theme-danger:hover:not(:disabled)::before {
    left: 100%;
}

.modal-btn-theme-danger:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.35);
    filter: brightness(1.08);
}

.modal-btn-theme-danger:active:not(:disabled) {
    transform: scale(0.97);
}

.modal-btn-theme-danger:focus-visible {
    outline: 2px solid var(--color-accent, #d4a825);
    outline-offset: 2px;
}

/* Botão warning de modal (Atenção/Cuidado) */
.modal-btn-theme-warning {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    min-height: 44px;
    font-weight: 600;
    font-size: 0.875rem;
    color: #1a1a1a;
    background: linear-gradient(135deg, #F59E0B, #D97706);
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
    position: relative;
    overflow: hidden;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.modal-btn-theme-warning::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.modal-btn-theme-warning:hover:not(:disabled)::before {
    left: 100%;
}

.modal-btn-theme-warning:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35);
    filter: brightness(1.08);
}

.modal-btn-theme-warning:active:not(:disabled) {
    transform: scale(0.97);
}

.modal-btn-theme-warning:focus-visible {
    outline: 2px solid var(--color-accent, #d4a825);
    outline-offset: 2px;
}

/* Header premium com gradiente de warning */
.modal-header-theme-warning {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: #1a1a1a;
}

/* Botão cancelar de modal - theme aware */
.modal-btn-theme-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    min-height: 44px;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--text-primary, #374151);
    background-color: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-default, #d1d5db);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.modal-btn-theme-cancel:hover:not(:disabled) {
    background-color: var(--bg-hover, #f3f4f6);
    border-color: var(--color-accent, #d4a825);
    color: var(--color-primary, #0f4c3a);
}

.modal-btn-theme-cancel:active:not(:disabled) {
    transform: scale(0.97);
}

.modal-btn-theme-cancel:focus-visible {
    outline: 2px solid var(--color-accent, #d4a825);
    outline-offset: 2px;
}

.dark .modal-btn-theme-cancel {
    color: var(--text-primary, #e5e7eb);
    background-color: var(--bg-surface-elevated, #374151);
    border-color: var(--border-default, #4b5563);
}

.dark .modal-btn-theme-cancel:hover:not(:disabled) {
    background-color: var(--bg-hover, #4b5563);
    border-color: var(--color-accent, #d4a825);
    color: var(--color-accent, #d4a825);
}

/* Header com shimmer premium (adicionar a qualquer header de modal) */
.modal-header-shimmer {
    position: relative;
    overflow: hidden;
}

.modal-header-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
}

/* Header premium com gradiente do tema */
.modal-header-theme-primary {
    background: var(--gradient-primary);
    color: #ffffff;
}

/* Header premium com gradiente de perigo */
.modal-header-theme-danger {
    background: linear-gradient(135deg, #DC2626, #B91C1C);
    color: #ffffff;
}

/* Responsive mobile */
@media (max-width: 639px) {
    .modal-btn-theme-primary,
    .modal-btn-theme-danger,
    .modal-btn-theme-warning,
    .modal-btn-theme-cancel {
        min-height: 48px;
        padding: 0.875rem 1.25rem;
        font-size: 0.9375rem;
    }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .modal-btn-theme-primary,
    .modal-btn-theme-danger,
    .modal-btn-theme-warning,
    .modal-btn-theme-cancel {
        transition: none !important;
    }

    .modal-btn-theme-primary::before,
    .modal-btn-theme-danger::before,
    .modal-btn-theme-warning::before {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FIM PREMIUM CONFIRMATION MODALS v1.1
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   POST-SAVE MODAL - Action Buttons Premium v1.1
   Theme-aware via CSS Variables (Verde Premium + Dourado)
   Corrige: Tailwind opacity modifiers não funcionam com CSS variables
   v1.1: Protecao contra Chrome Auto Dark Mode quando tema ERP e light
   ═══════════════════════════════════════════════════════════════════════════════ */

/* FIX v2: Protecao NUCLEAR contra Chrome Auto Dark Mode / Force Dark Mode.
   Quando navegador e dark mas tema ERP e light (sem .dark class),
   forcar cores OPACAS (nao rgba!) e color-scheme: only light.
   Chrome Force Dark inverte fundo e cores transparentes deixam vazar. */
@media (prefers-color-scheme: dark) {
    /* Forcar color-scheme em TODOS os elementos do modal */
    html:not(.dark) .modal-content-teleport,
    html:not(.dark) .modal-content-teleport * {
        color-scheme: only light !important;
    }
    html:not(.dark) .modal-content-teleport {
        background-color: #ffffff !important;
        color: #18181b !important;
    }
    /* Wrapper do body e footer - garantir fundo opaco */
    html:not(.dark) .modal-content-teleport > div {
        background-color: #ffffff !important;
        color: #1f2937 !important;
    }
    /* Header verde deve manter sua cor (nao forcar branco) */
    html:not(.dark) .modal-content-teleport .modal-body-scrollable {
        background-color: inherit !important;
    }
    /* Botoes base */
    html:not(.dark) .modal-content-teleport .modal-post-action {
        background-color: #ffffff !important;
        color: #1f2937 !important;
        border-color: #e5e7eb !important;
    }
    /* Accent (Continuar Editando) - OPACO: rgba(212,168,37,0.06) on white = #fcfaf2 */
    html:not(.dark) .modal-content-teleport .modal-post-action.post-accent {
        background-color: #fcfaf2 !important;
        border-color: #e0d49b !important;
    }
    html:not(.dark) .modal-content-teleport .modal-post-action.post-accent:hover {
        background-color: #f9f4e2 !important;
        border-color: #d4a825 !important;
    }
    /* Primary (Cadastrar Novo) - OPACO: rgba(15,76,58,0.05) on white = #f3f6f5 */
    html:not(.dark) .modal-content-teleport .modal-post-action.post-primary {
        background-color: #f3f6f5 !important;
        border-color: #c3d5cf !important;
    }
    html:not(.dark) .modal-content-teleport .modal-post-action.post-primary:hover {
        background-color: #e7efec !important;
        border-color: #0f4c3a !important;
    }
    /* Neutral (Voltar para Lista) - ja opaco */
    html:not(.dark) .modal-content-teleport .modal-post-action.post-neutral {
        background-color: #f9fafb !important;
        border-color: #e5e7eb !important;
    }
    /* Textos */
    html:not(.dark) .modal-content-teleport .modal-post-title {
        color: #1f2937 !important;
    }
    html:not(.dark) .modal-content-teleport .modal-post-desc {
        color: #6b7280 !important;
    }
    html:not(.dark) .modal-content-teleport .modal-post-desc.desc-accent {
        color: #b8922a !important;
    }
    html:not(.dark) .modal-content-teleport .modal-post-desc.desc-primary {
        color: #0f4c3a !important;
    }
    html:not(.dark) .modal-content-teleport .modal-post-arrow {
        color: #9ca3af !important;
    }
    /* Icones dentro dos botoes */
    html:not(.dark) .modal-content-teleport .modal-post-action svg,
    html:not(.dark) .modal-content-teleport .modal-post-action i {
        color: inherit !important;
    }
    /* Rodape do modal (timer, atalhos) */
    html:not(.dark) .modal-content-teleport [style*="color: var(--text-muted"] {
        color: #6b7280 !important;
        background-color: #ffffff !important;
    }
    /* Badges de atalho (1, 2, 3, Esc) */
    html:not(.dark) .modal-content-teleport kbd,
    html:not(.dark) .modal-content-teleport code {
        background-color: #f3f4f6 !important;
        color: #374151 !important;
        border-color: #d1d5db !important;
    }
}

/* Base action button */
.modal-post-action {
    width: 100%;
    padding: 1rem;
    min-height: 72px;
    border-radius: 0.75rem;
    border: 1.5px solid var(--border-default, #e5e7eb);
    background-color: var(--bg-surface, #ffffff);
    color: inherit;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    color-scheme: light;
}

.modal-post-action:hover:not(:disabled) {
    transform: translateY(-1px);
}

.modal-post-action:active:not(:disabled) {
    transform: scale(0.98);
}

.modal-post-action:disabled {
    opacity: 0.6;
    cursor: wait;
}

.modal-post-action:focus-visible {
    outline: 2px solid var(--color-accent, #d4a825);
    outline-offset: 2px;
}

/* ---- Accent variant (Continuar Editando - Gold) ---- */
.modal-post-action.post-accent {
    border-color: rgba(var(--color-gold-rgb, 212, 168, 37), 0.35);
    background-color: rgba(var(--color-gold-rgb, 212, 168, 37), 0.06);
}

.modal-post-action.post-accent:hover:not(:disabled) {
    border-color: rgba(var(--color-gold-rgb, 212, 168, 37), 0.6);
    background-color: rgba(var(--color-gold-rgb, 212, 168, 37), 0.12);
    box-shadow: 0 4px 20px rgba(var(--color-gold-rgb, 212, 168, 37), 0.12);
}

.modal-post-action.post-accent.post-active {
    box-shadow: 0 0 0 2px rgba(var(--color-gold-rgb, 212, 168, 37), 0.5),
                0 0 0 4px rgba(var(--color-gold-rgb, 212, 168, 37), 0.15);
}

/* ---- Primary variant (Cadastrar Novo - Green) ---- */
.modal-post-action.post-primary {
    border-color: rgba(var(--color-primary-rgb, 15, 76, 58), 0.25);
    background-color: rgba(var(--color-primary-rgb, 15, 76, 58), 0.05);
}

.modal-post-action.post-primary:hover:not(:disabled) {
    border-color: rgba(var(--color-primary-rgb, 15, 76, 58), 0.45);
    background-color: rgba(var(--color-primary-rgb, 15, 76, 58), 0.1);
    box-shadow: 0 4px 20px rgba(var(--color-primary-rgb, 15, 76, 58), 0.12);
}

.modal-post-action.post-primary.post-active {
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb, 15, 76, 58), 0.5),
                0 0 0 4px rgba(var(--color-primary-rgb, 15, 76, 58), 0.15);
}

/* ---- Neutral variant (Voltar para Lista) ---- */
.modal-post-action.post-neutral {
    border-color: var(--border-default, #e5e7eb);
    background-color: var(--bg-surface-elevated, #f9fafb);
}

.modal-post-action.post-neutral:hover:not(:disabled) {
    border-color: var(--border-strong, #d1d5db);
    background-color: var(--bg-hover, #f3f4f6);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.modal-post-action.post-neutral.post-active {
    box-shadow: 0 0 0 2px var(--border-strong, #9ca3af),
                0 0 0 4px rgba(0, 0, 0, 0.08);
}

/* ---- Dark mode overrides ---- */
.dark .modal-post-action {
    background-color: var(--bg-surface-elevated, #27272A);
    border-color: var(--border-default, #27272A);
}

.dark .modal-post-action.post-accent {
    border-color: rgba(var(--color-gold-rgb, 212, 168, 37), 0.25);
    background-color: rgba(var(--color-gold-rgb, 212, 168, 37), 0.06);
}

.dark .modal-post-action.post-accent:hover:not(:disabled) {
    border-color: rgba(var(--color-gold-rgb, 212, 168, 37), 0.5);
    background-color: rgba(var(--color-gold-rgb, 212, 168, 37), 0.12);
    box-shadow: 0 4px 24px rgba(var(--color-gold-rgb, 212, 168, 37), 0.1);
}

.dark .modal-post-action.post-primary {
    border-color: rgba(var(--color-primary-rgb, 79, 175, 153), 0.2);
    background-color: rgba(var(--color-primary-rgb, 79, 175, 153), 0.06);
}

.dark .modal-post-action.post-primary:hover:not(:disabled) {
    border-color: rgba(var(--color-primary-rgb, 79, 175, 153), 0.4);
    background-color: rgba(var(--color-primary-rgb, 79, 175, 153), 0.12);
    box-shadow: 0 4px 24px rgba(var(--color-primary-rgb, 79, 175, 153), 0.1);
}

.dark .modal-post-action.post-neutral {
    border-color: var(--border-default, #3F3F46);
    background-color: rgba(255, 255, 255, 0.04);
}

.dark .modal-post-action.post-neutral:hover:not(:disabled) {
    border-color: var(--border-strong, #52525B);
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

/* ---- Icon circles ---- */
.modal-post-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    transition: transform 0.15s ease;
    font-size: 1.125rem;
}

.modal-post-action:active:not(:disabled) .modal-post-icon {
    transform: scale(0.9);
}

.modal-post-icon.icon-accent {
    background: var(--gradient-accent, linear-gradient(135deg, #E0BC4A, #d4a825));
    box-shadow: 0 2px 8px rgba(var(--color-gold-rgb, 212, 168, 37), 0.3);
}

.modal-post-icon.icon-primary {
    background: var(--gradient-primary, linear-gradient(135deg, #0f4c3a, #1a6b52));
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb, 15, 76, 58), 0.3);
}

.modal-post-icon.icon-neutral {
    background: var(--border-strong, #d1d5db);
    color: var(--text-secondary, #6b7280);
    box-shadow: none;
}

.dark .modal-post-icon.icon-neutral {
    background: var(--border-strong, #3F3F46);
    color: var(--text-muted, #A1A1AA);
}

/* ---- Text styles ---- */
.modal-post-title {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary, #1f2937);
    margin: 0;
    line-height: 1.3;
}

.modal-post-desc {
    font-size: 0.8125rem;
    margin: 0.125rem 0 0 0;
    line-height: 1.3;
}

.modal-post-desc.desc-accent {
    color: var(--color-accent, #d4a825);
}

.modal-post-desc.desc-primary {
    color: var(--color-primary, #0f4c3a);
}

.dark .modal-post-desc.desc-primary {
    color: var(--color-primary, #4FAF99);
}

.modal-post-desc.desc-neutral {
    color: var(--text-muted, #6b7280);
}

/* ---- Arrow indicator ---- */
.modal-post-arrow {
    color: var(--text-muted, #9ca3af);
    font-size: 1rem;
    flex-shrink: 0;
    transition: transform 0.2s ease, color 0.2s ease;
}

.modal-post-action:hover:not(:disabled) .modal-post-arrow {
    transform: translateX(3px);
    color: var(--color-accent, #d4a825);
}

/* ---- Responsive mobile ---- */
@media (max-width: 639px) {
    .modal-post-action {
        padding: 0.875rem;
        gap: 0.625rem;
    }

    .modal-post-icon {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }

    .modal-post-title {
        font-size: 0.875rem;
    }

    .modal-post-desc {
        font-size: 0.75rem;
    }
}

@media (min-width: 640px) {
    .modal-post-icon {
        width: 3rem;
        height: 3rem;
        font-size: 1.25rem;
    }

    .modal-post-title {
        font-size: 1rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FIM POST-SAVE MODAL BUTTONS v1.0
   ═══════════════════════════════════════════════════════════════════════════════ */