/**
 * ============================================================
 * GabiBot UI Design System v2.0
 * Paleta de Cores, Padrões de Botões e Cards Padronizados
 * ============================================================
 * 
 * Este arquivo consolidates todos os padrões de design do GabiBot
 * para garantir consistência visual e facilitar manutenção.
 * 
 * Organização:
 * 1. Variáveis de Cores Root
 * 2. Padrões de Cards (Principal e Secundário)
 * 3. Padrões de Botões
 * 4. Padrões de Badges
 * 5. Padrões de Modals
 * 6. Utilitários
 */

/* ============================================================
   1. VARIÁVEIS DE CORES ROOT
   ============================================================ */

:root {
    /* === Paleta de Cores Primária (Marrom) === */
    --color-brown-light: #c6a69b;      /* Marrom claro */
    --color-brown-dark: #a07c71;       /* Marrom escuro (gradiente início) */
    --color-brown-accent: #8b6655;     /* Marrom acentuado (texto principal) */
    --color-brown-muted: #d4a8a0;      /* Marrom muted */
    --brown-gradient: linear-gradient(135deg, #a07c71, #c6a69b);
    
    /* === Cores Neutras === */
    --color-white: #ffffff;
    --color-bg-light: #faf9f6;         /* Background muito claro */
    --color-bg-soft: #f8f9fa;
    --color-text-dark: #0f172a;
    --color-text-muted: #8b6655;       /* Use este em vez de #94a3b8 */
    --color-border-light: rgba(255, 255, 255, 0.2);
    --color-border-muted: rgba(93, 64, 55, 0.15);
    
    /* === Cores de Estado === */
    --color-error: #d32f2f;
    --color-error-light: #f44336;
    --color-success: #4caf50;
    --color-success-light: #22c55e;
    --card-bg: #ffffff;
}

/* ============================================================
   2. PADRÕES DE CARDS
   ============================================================ */

/**
 * Card Principal (Main/Hero Cards)
 * Uso: Dashboard cards, Welcome sections, Main content areas
 */
.card-main,
.page-card-main {
    text-align: center;
    margin-bottom: 40px;
    color: white;
    background: #ffffff;
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
}

.card-main:hover {
    backdrop-filter: blur(15px);
    box-shadow: 0 8px 24px rgba(93, 64, 55, 0.1);
}

/**
 * Card Secundário (Secondary/Overlay Cards)
 * Uso: Cards dentro de containers principais, itens de lista, small cards
 */
.card-secondary,
.card-item,
.quick-feature-item,
.interaction-card {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(93, 64, 55, 0.15);
    border-radius: 12px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(93, 64, 55, 0.06);
}

.card-secondary:hover,
.card-item:hover,
.quick-feature-item:hover,
.interaction-card:hover {
    box-shadow: 0 4px 16px rgba(93, 64, 55, 0.12);
    border-color: rgba(93, 64, 55, 0.25);
    transform: translateY(-2px);
}

/* ============================================================
   3. PADRÕES DE BOTÕES
   ============================================================ */

/**
 * Botão Primário (Primary Button)
 * Uso: Ações principais, CTA (Call-To-Action), Submit buttons
 * Variantes: .btn-primary, .btn-primary.btn-full, .btn-primary.btn-small
 */
.btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    background: linear-gradient(135deg, #a07c71, #c6a69b);
    color: white;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(93, 64, 55, 0.25);
}

.btn-primary.btn-full {
    width: 100%;
}

.btn-primary.btn-small {
    padding: 8px 12px;
    font-size: 0.85rem;
    border-radius: 8px;
}

/**
 * Botão Secundário (Secondary Button)
 * Uso: Ações secundárias, Cancel buttons, Less important actions
 */
.btn-secondary {
    background: #ffffff;
    color: #5D4037;
    padding: 12px 20px;
    border: 1.5px solid rgba(93, 64, 55, 0.2);
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Poppins', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-secondary:hover {
    background: rgba(93, 64, 55, 0.05);
    border-color: rgba(93, 64, 55, 0.3);
    transform: translateY(-1px);
}

/**
 * Botão Cancel
 * Uso: Fechar diálogos, cancelar ações
 */
.btn-cancel {
    background: #ffffff;
    color: #5D4037;
    padding: 12px 20px;
    border: 1.5px solid rgba(93, 64, 55, 0.2);
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Poppins', sans-serif;
}

.btn-cancel:hover {
    background: rgba(93, 64, 55, 0.05);
    border-color: rgba(93, 64, 55, 0.3);
    transform: translateY(-1px);
}

/**
 * Botão de Ação (Action/Icon Button)
 * Uso: Edit, delete, view details - small square buttons with icons
 * Tamanho padrão: 36x36px
 * Variantes: .btn-action, .btn-action.btn-action-danger
 */
.btn-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: white;
    border: 1px solid rgba(93, 64, 55, 0.15);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #8b6655;
    flex-shrink: 0;
}

.btn-action:hover {
    background: #f8f9fa;
    border-color: rgba(93, 64, 55, 0.3);
    transform: translateY(-1px);
}

.btn-action i,
.btn-action svg {
    width: 18px;
    height: 18px;
}

/* Variante: Botão de ação com cor de perigo */
.btn-action.btn-action-danger {
    color: #d32f2f;
    border-color: rgba(211, 47, 47, 0.15);
}

.btn-action.btn-action-danger:hover {
    background: rgba(211, 47, 47, 0.05);
    border-color: rgba(211, 47, 47, 0.3);
}

/**
 * Botão de Fechar Modal (Modal Close Button)
 * Uso: X button no header dos modals
 */
.modal-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #64748b;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.modal-close-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-radius: 8px;
}

/* ============================================================
   4. PADRÕES DE BADGES
   ============================================================ */

/**
 * Badge de Contagem (Count Badge)
 * Uso: Mostrar número de itens, respostas, etc.
 */
.badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    background: transparent;
    color: #8b6655;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 4px;
}

/* ============================================================
   5. PADRÕES DE MODALS
   ============================================================ */

/**
 * Modal Backdrop
 */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
}

/**
 * Modal Container
 */
.modal {
    background: white;
    border-radius: 16px;
    padding: 32px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/**
 * Modal Header (com close button)
 */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(93, 64, 55, 0.08);
}

.modal-header h2,
.modal-header h3 {
    margin: 0;
    color: #8b6655;
}

/* ============================================================
   6. UTILITÁRIOS
   ============================================================ */

/**
 * Animações
 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/**
 * Classes utilitárias
 */
.hidden {
    display: none !important;
}

.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================================
   RESPONSIVIDADE
   ============================================================ */

@media (max-width: 768px) {
    .card-main {
        padding: 20px;
    }

    .card-secondary {
        padding: 14px;
        gap: 10px;
    }

    .btn-primary,
    .btn-secondary,
    .btn-cancel {
        padding: 10px 16px;
        font-size: 0.9rem;
    }

    .btn-action {
        width: 32px;
        height: 32px;
    }

    .btn-action i,
    .btn-action svg {
        width: 16px;
        height: 16px;
    }
}

/* ============================================================
   NOTAS IMPORTANTES
   ============================================================
   
   1. CORES PRIMÁRIAS:
      - Gradiente principal: linear-gradient(135deg, #a07c71, #c6a69b)
      - Texto escuro: #8b6655
      - Borders: rgba(93, 64, 55, 0.15)
   
   2. NOMENCLATURA:
      - btn-primary: Ação principal
      - btn-secondary: Ação secundária / Cancel
      - btn-action: Ícone pequeno (edit, delete, etc)
      - btn-action.btn-action-danger: Ícone vermelho
   
   3. TAMANHOS PADRÃO:
      - btn-action: 36x36px
      - badge-count: 24px altura
      - Espaçamento gap: 8-12px
   
   4. SOMBRAS:
      - Leve: 0 2px 8px rgba(93, 64, 55, 0.06)
      - Média: 0 4px 16px rgba(93, 64, 55, 0.12)
      - Forte: 0 20px 60px rgba(0, 0, 0, 0.15)
   
   5. TRANSITIONS:
      - Padrão: all 0.2s ease
      - Hover state: translateY(-1px ou -2px) + box-shadow
   
   ============================================================
*/