@layer components {

    /* Estilos para o card do cliente */
    /* CONTAINER PRINCIPAL DO CARD */
    .client-card {
        /* Layout: Flex-col (vertical) */
        @apply flex flex-col justify-between;
        @apply hover:transition duration-150 ease-in-out hover:scale-110;

        /* Estilo: Sombra, borda, fundo branco */
        @apply bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 ease-in-out;
        @apply border border-gray-100;

        /* Garante que o conteúdo não vaze */
        @apply overflow-hidden;
    }

    /* O "RETÂNGULO" SUPERIOR (Avatar + Opções) */
    .client-card-header {
        /* 1. POSIÇÃO: 'relative' para ancorar o menu de opções */
        @apply relative;

        /* 2. LAYOUT: Centraliza o avatar */
        @apply flex justify-center items-center;

        /* 3. ESPAÇAMENTO: Padding interno */
        @apply p-6;

        /* 4. (Opcional) Fundo sutil para o retângulo */
        @apply bg-gray-50;
    }

    /* AVATAR DO CLIENTE */
    .client-avatar {
        /* A imagem <img> interna já tem as classes de tamanho (w-32 h-32) */
    }

    /* MENU DE OPÇÕES (Três Pontinhos) */
    .client-options-menu {
        /* 1. POSIÇÃO: Flutua sobre o header */
        @apply absolute top-4 right-4;
    }

    .client-options-button {
        @apply p-2 rounded-full hover:bg-gray-200 transition-colors;
        @apply focus:outline-none focus:ring-2 focus:ring-blue-500;
    }

    /* LISTA DE OPÇÕES (Dropdown) */
    .client-options-list {
        @apply absolute right-0 mt-2 w-48 bg-white border border-gray-200 rounded-md shadow-lg py-1 z-10;
        @apply divide-y divide-gray-100;
    }

    .client-option-item {
        @apply block px-4 py-2 text-sm text-gray-700 hover:bg-blue-100 hover:text-blue-800 transition-colors;
        @apply cursor-pointer;
    }


    /* NOME DO CLIENTE (Área inferior) */
    .client-card-name {
        @apply text-lg font-semibold text-gray-800 text-center;

        /* Espaçamento e uma borda sutil no topo */
        @apply p-4 border-t border-gray-100;
    }
}
}