/* [root]/assets/css/style.css */

/*
  Estilos globais e classes de componentes customizadas.
  Estas regras são CSS padrão e complementam as classes utilitárias do Tailwind CSS.
  A diretiva `@apply` foi removida pois não funciona com a versão CDN do Tailwind.
*/

#preview-column {
    background-color: #f0f2f5;
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
    background-size: 15px 15px;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc; /* Cor de fundo equivalente a 'bg-slate-50' do Tailwind */
    color: #0f172a; /* Cor de texto padrão 'text-slate-900' */
}

/* Estilo base para os inputs do formulário */
.form-input {
    width: 100%;
    padding: 0.5rem 1rem; /* py-2 px-4 */
    border: 1px solid #cbd5e1; /* border-slate-300 */
    border-radius: 0.375rem; /* rounded-md */
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* shadow-sm */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    color: #0f172a;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.form-input::placeholder {
    color: #94a3b8; /* placeholder-slate-400 */
}

.form-input:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: #6366f1; /* focus:border-indigo-500 */
    box-shadow: 0 0 0 2px #6366f1; /* focus:ring-2 focus:ring-indigo-500 */
}

/* Estilo base para botões */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem; /* px-4 py-2 */
    border: 1px solid transparent;
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    border-radius: 0.375rem; /* rounded-md */
    color: white;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* shadow-sm */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.btn:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgb(99 102 241 / 50%); /* focus:ring-2 focus:ring-offset-2 */
}

/* Variação de botão primário (cor índigo) */
.btn-primary {
    background-color: #4f46e5; /* bg-indigo-600 */
}

.btn-primary:hover {
    background-color: #4338ca; /* hover:bg-indigo-700 */
}

/* Estilo para componentes de cartão */
.card {
    background-color: white;
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-md */
    padding: 2rem; /* p-8 */
}

/* Ajuste para telas menores */
@media (max-width: 640px) {
    .card {
        padding: 1.5rem; /* p-6 */
    }
}