/* ============================================
   CLASSES TAILWIND ESSENCIAIS PARA MODAIS
   ============================================ */

/* Posicionamento fixo */
.fixed {
    position: fixed !important;
}

/* Cobertura total da tela */
.inset-0 {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
}

/* Z-index alto para modais */
.z-50 {
    z-index: 50 !important;
}

.z-10 {
    z-index: 10 !important;
}

/* Overflow para scroll em modais */
.overflow-y-auto {
    overflow-y: auto !important;
}

/* Flexbox para centralização */
.flex {
    display: flex !important;
}

.items-center {
    align-items: center !important;
}

.justify-center {
    justify-content: center !important;
}

.min-h-screen {
    min-height: 100vh !important;
}

/* Background com opacidade para overlay */
.bg-black {
    background-color: #000 !important;
}

.bg-opacity-50 {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Posicionamento relativo */
.relative {
    position: relative !important;
}

/* Background branco para modal */
.bg-white {
    background-color: #fff !important;
}

/* Largura máxima */
.max-w-2xl {
    max-width: 42rem !important;
}

.max-w-lg {
    max-width: 32rem !important;
}

.w-full {
    width: 100% !important;
}

/* Shadow para modal */
.shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Alpine.js x-cloak */
[x-cloak] {
    display: none !important;
}

/* ============================================
   BOTÕES DE MODAIS - CORES VISÍVEIS
   ============================================ */

/* Botão Cancelar (cinza) */
button.bg-gray-600,
button.bg-gray-700 {
    background-color: #4b5563 !important;
    color: #ffffff !important;
}

button.bg-gray-600:hover,
button.hover\:bg-gray-700:hover {
    background-color: #374151 !important;
    color: #ffffff !important;
}

/* Botão Salvar (azul) */
button.bg-blue-600,
button.bg-blue-700 {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

button.bg-blue-600:hover,
button.hover\:bg-blue-700:hover {
    background-color: #1d4ed8 !important;
    color: #ffffff !important;
}

/* Garantir que botões em modais sempre tenham texto visível */
.fixed button {
    color: #ffffff !important;
}

/* Rounded corners */
.rounded-lg {
    border-radius: 0.5rem !important;
}

.rounded-md {
    border-radius: 0.375rem !important;
}

/* Padding */
.p-6 {
    padding: 1.5rem !important;
}

.px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}