/* ============================================================
 * Beleza SaaS — Estilos Customizados
 * TailwindCSS cobre 95%. Aqui só os ajustes finos.
 * ============================================================ */

/* Esconde elementos Alpine até inicializar (evita flicker) */
[x-cloak] { display: none !important; }

/* Transições suaves entre páginas */
.fade-enter { opacity: 0; transform: translateY(10px); }
.fade-enter-active { transition: opacity 0.2s ease, transform 0.2s ease; }

/* Scrollbar fina (Webkit) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a1a1a1; }

/* Sidebar ativa */
.sidebar-link.ativo {
    background-color: #fce7f3;  /* rosa-100 */
    color: #db2777;             /* rosa-600 */
    font-weight: 500;
}

/* Cards do dashboard */
.card-dashboard {
    transition: box-shadow 0.2s ease;
}
.card-dashboard:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Status badges */
.badge-status {
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Tabelas */
.tabela-beleza th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    background-color: #f9fafb;
}

/* Input com ícone */
.input-icon {
    padding-left: 2.5rem;
}

/* Página de login — fundo gradiente */
.login-bg {
    background: linear-gradient(135deg, #fce7f3 0%, #ede9fe 50%, #f3e8ff 100%);
}