/* 
 * CSS personalizado para o Sistema de Risco Obstétrico
 * Substitui estilos inline e melhora performance
 */

/* ============================================================================
 * CLASSES PARA SUBSTITUIR ESTILOS INLINE
 * ============================================================================ */

/* Classe para elementos ocultos inicialmente (substitui style="display: none") */
.hidden-initial {
    display: none !important;
}

/* Classes para cores de classificação de risco */
.bg-classification-vermelho {
    background-color: #dc3545 !important; /* Bootstrap danger */
}

.bg-classification-laranja {
    background-color: #fd7e14 !important; /* Orange */
}

.bg-classification-amarelo {
    background-color: #ffc107 !important; /* Bootstrap warning */
}

.bg-classification-verde {
    background-color: #198754 !important; /* Bootstrap success */
}

.bg-classification-azul {
    background-color: #0dcaf0 !important; /* Bootstrap info */
}

/* Ícones coloridos para classificação */
.icon-classification-vermelho {
    color: #dc3545 !important;
}

.icon-classification-laranja {
    color: #fd7e14 !important;
}

.icon-classification-amarelo {
    color: #ffc107 !important;
}

.icon-classification-verde {
    color: #198754 !important;
}

.icon-classification-azul {
    color: #0dcaf0 !important;
}

/* Badges com cores de classificação */
.badge-classification-vermelho {
    background-color: #dc3545 !important;
    color: white !important;
}

.badge-classification-laranja {
    background-color: #fd7e14 !important;
    color: white !important;
}

.badge-classification-amarelo {
    background-color: #ffc107 !important;
    color: black !important;
}

.badge-classification-verde {
    background-color: #198754 !important;
    color: white !important;
}

.badge-classification-azul {
    background-color: #0dcaf0 !important;
    color: black !important;
}

/* ============================================================================
 * MELHORIAS DE COMPATIBILIDADE CSS
 * ============================================================================ */

/* Corrigir text-align para compatibilidade */
.text-align-fallback {
    text-align: -webkit-match-parent;
    text-align: match-parent;
}

/* Ajuste de tamanho de texto para melhor compatibilidade */
.text-size-adjust {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Color adjust para impressão */
.color-adjust-exact {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* ============================================================================
 * MELHORIAS DE ACESSIBILIDADE
 * ============================================================================ */

/* Melhor contraste para links */
a:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

/* Skip link para acessibilidade */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #000;
    color: #fff;
    padding: 8px;
    text-decoration: none;
    z-index: 9999;
}

.skip-link:focus {
    top: 6px;
}

/* Melhor foco para elementos de formulário */
.form-control:focus,
.form-select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* ============================================================================
 * OTIMIZAÇÕES DE PERFORMANCE
 * ============================================================================ */

/* Usar transform para animações mais suaves */
.hover-transform {
    transition: transform 0.2s ease-in-out;
}

.hover-transform:hover {
    transform: translateY(-2px);
}

/* Otimizar fontes */
.font-display-swap {
    font-display: swap;
}

/* Lazy loading - removido pois é atributo HTML, não CSS */

/* ============================================================================
 * RESPONSIVE DESIGN MELHORADO
 * ============================================================================ */

/* Container responsivo melhorado */
@media (max-width: 576px) {
    .container-responsive {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .card-responsive {
        margin: 0;
        border-radius: 0;
    }
    
    .btn-responsive {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* Melhorar legibilidade em telas pequenas */
@media (max-width: 768px) {
    .text-responsive {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    
    .table-responsive-improved {
        font-size: 0.85rem;
    }
}

/* ============================================================================
 * CLASSES UTILITÁRIAS ADICIONAIS
 * ============================================================================ */

/* Truncar texto com ellipsis */
.text-truncate-2-lines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Espaçamento consistente */
.spacing-consistent {
    margin: 1rem 0;
}

/* Sombras padronizadas */
.shadow-subtle {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.shadow-moderate {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.shadow-strong {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* ============================================================================
 * PRINT STYLES
 * ============================================================================ */

@media print {
    .no-print {
        display: none !important;
    }
    
    .print-break-before {
        page-break-before: always;
    }
    
    .print-break-after {
        page-break-after: always;
    }
    
    .print-break-inside-avoid {
        page-break-inside: avoid;
    }
}