/* ========================================
   Calculadora de Escore de Caprini - Dashboard Moderno
   Versão 2.0 - Estilo Dashboard Colorido
   ======================================== */

/* ========================================
   ANIMAÇÕES
   ======================================== */

/* Toast de notificação */
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.toast-notification {
    animation: slideInDown 0.3s ease-out;
}

.toast-notification.hiding {
    animation: slideOutUp 0.3s ease-in;
}

/* Resultado */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.resultado-card {
    animation: fadeIn 0.4s ease-out;
}

/* ========================================
   EFEITOS HOVER NOS CARDS
   ======================================== */

/* Cards principais */
.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform, box-shadow;
}

.card-hover:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Gradientes com brilho no hover */
.bg-gradient-to-r {
    transition: all 0.3s ease;
}

.card-hover:hover .bg-gradient-to-r {
    filter: brightness(1.1);
}

/* ========================================
   CHECKBOXES CUSTOMIZADOS
   ======================================== */

input[type="checkbox"] {
    width: 1.25rem !important;
    height: 1.25rem !important;
    cursor: pointer;
}

/* Cores específicas por campo ao selecionar */
input[name="caprini_1[]"]:checked + span {
    color: #2563EB;
    font-weight: 600;
}

input[name="caprini_2[]"]:checked + span {
    color: #DB2777;
    font-weight: 600;
}

input[name="caprini_3[]"]:checked + span {
    color: #EA580C;
    font-weight: 600;
}

input[name="caprini_5[]"]:checked + span {
    color: #6D28D9;
    font-weight: 600;
}

/* ========================================
   LABELS INTERATIVOS
   ======================================== */

label.cursor-pointer {
    user-select: none;
}

label.cursor-pointer:active {
    transform: scale(0.98);
}

/* Highlight ao selecionar checkbox */
label.border-blue-300 {
    background-color: #EFF6FF !important;
    border-color: #93C5FD !important;
}

label.border-pink-300 {
    background-color: #FCE7F3 !important;
    border-color: #F9A8D4 !important;
}

label.border-orange-300 {
    background-color: #FFEDD5 !important;
    border-color: #FDBA74 !important;
}

label.border-purple-300 {
    background-color: #F3E8FF !important;
    border-color: #D8B4FE !important;
}

/* ========================================
   RESULTADO SIMPLIFICADO
   ======================================== */

.resultado-card {
    background: white;
    border-radius: 0.75rem;
    padding: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 
                0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #E5E7EB;
}

.resultado-card .text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.resultado-card .text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

/* ========================================
   CORES DE RISCO
   ======================================== */

.text-green-600 {
    color: #059669 !important;
}

.text-red-600 {
    color: #DC2626 !important;
}

.text-yellow-600 {
    color: #D97706 !important;
}

.bg-green-50 {
    background-color: #F0FDF4 !important;
}

.bg-red-50 {
    background-color: #FEF2F2 !important;
}

.bg-yellow-50 {
    background-color: #FFFBEB !important;
}

/* ========================================
   TABELA DE INTERPRETAÇÃO
   ======================================== */

.interpretation-table {
    width: 100%;
    margin-top: 1.5rem;
    border-collapse: collapse;
}

.interpretation-table th,
.interpretation-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid #E5E7EB;
}

.interpretation-table th {
    background-color: #F9FAFB;
    font-weight: 600;
    color: #374151;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.interpretation-table tr:hover {
    background-color: #F9FAFB;
}

/* ========================================
   RECOMENDAÇÕES
   ======================================== */

.recommendations-section {
    margin-top: 1.5rem;
}

.recommendations-section h4 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1F2937;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #3B82F6;
}

.recommendations-section ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}

.recommendations-section li {
    color: #4B5563;
    font-size: 0.875rem;
    line-height: 1.75;
    margin: 0.5rem 0;
}

.recommendations-section strong {
    color: #1F2937;
    font-weight: 600;
}

/* Box de alerta */
.alert-box {
    background-color: #FEF3C7;
    border-left: 4px solid #F59E0B;
    padding: 1rem;
    border-radius: 0.375rem;
    margin-top: 1rem;
}

.alert-box h5 {
    color: #92400E;
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
}

.alert-box ul {
    margin: 0;
    padding-left: 1.5rem;
}

.alert-box li {
    color: #92400E;
    font-size: 0.875rem;
    line-height: 1.75;
    margin: 0.5rem 0;
}

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

/* Desktop (≥768px) */
@media (min-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile (<768px) */
@media (max-width: 768px) {
    .resultado-card .text-2xl {
        font-size: 1.5rem !important;
    }
    
    .resultado-card .text-lg {
        font-size: 1rem !important;
    }
    
    .interpretation-table {
        font-size: 0.875rem;
    }
    
    .interpretation-table th,
    .interpretation-table td {
        padding: 0.5rem;
    }
}

/* Tiny (<380px) */
@media (max-width: 380px) {
    .resultado-card .text-2xl {
        font-size: 1.25rem !important;
    }
    
    .resultado-card .text-lg {
        font-size: 0.875rem !important;
    }
    
    .interpretation-table {
        font-size: 0.75rem;
    }
    
    .interpretation-table th,
    .interpretation-table td {
        padding: 0.375rem;
    }
}

/* ========================================
   UTILITÁRIOS
   ======================================== */

.space-y-2 > * + * {
    margin-top: 0.5rem;
}

.space-y-3 > * + * {
    margin-top: 0.75rem;
}

.space-y-4 > * + * {
    margin-top: 1rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

/* ========================================
   IMPRESSÃO
   ======================================== */

@media print {
    .card-hover:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    
    button {
        display: none !important;
    }
    
    .toast-notification {
        display: none !important;
    }
    
    .bg-gradient-to-r,
    .bg-gradient-to-br {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}