/* ===================================
   SISTEMA DE TAMANHOS DE FONTE - VERSÃO CORRIGIDA
   ALTA ESPECIFICIDADE PARA SOBREPOR STYLES.CSS
   ================================= */

/* Variáveis CSS para tamanhos de fonte */
:root {
    /* Tamanho PEQUENO */
    --font-size-small-base: 12px;
    --font-size-small-text: 13px;
    --font-size-small-h1: 20px;
    --font-size-small-h2: 18px;
    --font-size-small-h3: 16px;
    --font-size-small-button: 12px;
    --font-size-small-input: 12px;
    --font-size-small-label: 11px;
    
    /* Tamanho MÉDIO (padrão) */
    --font-size-medium-base: 14px;
    --font-size-medium-text: 15px;
    --font-size-medium-h1: 24px;
    --font-size-medium-h2: 22px;
    --font-size-medium-h3: 18px;
    --font-size-medium-button: 14px;
    --font-size-medium-input: 14px;
    --font-size-medium-label: 13px;
    
    /* Tamanho GRANDE */
    --font-size-large-base: 16px;
    --font-size-large-text: 17px;
    --font-size-large-h1: 28px;
    --font-size-large-h2: 26px;
    --font-size-large-h3: 22px;
    --font-size-large-button: 16px;
    --font-size-large-input: 16px;
    --font-size-large-label: 15px;
}

/* ===================================
   APLICAÇÃO DOS TAMANHOS - MÁXIMA ESPECIFICIDADE
   ================================= */

/* TAMANHO PEQUENO - MÁXIMA ESPECIFICIDADE */
html body.font-small,
html body.font-small * {
    font-size: var(--font-size-small-base) !important;
}

html body.font-small p,
html body.font-small div,
html body.font-small span,
html body.font-small li,
html body.font-small td,
html body.font-small th,
html body.font-small .container,
html body.font-small .form-group,
html body.font-small .result-item,
html body.font-small .input-group,
html body.font-small .calculator-input,
html body.font-small .result-text,
html body.font-small .section-title,
html body.font-small .top-buttons,
html body.font-small .header,
html body.font-small .content,
html body.font-small .form-row,
html body.font-small .form-label,
html body.font-small .form-control,
html body.font-small .section {
    font-size: var(--font-size-small-text) !important;
}

html body.font-small h1,
html body.font-small header h1,
html body.font-small .container h1 {
    font-size: var(--font-size-small-h1) !important;
}

html body.font-small h2,
html body.font-small header h2,
html body.font-small .container h2,
html body.font-small .user-info h2 {
    font-size: var(--font-size-small-h2) !important;
}

html body.font-small h3,
html body.font-small h4,
html body.font-small h5,
html body.font-small h6,
html body.font-small .section h3 {
    font-size: var(--font-size-small-h3) !important;
}

html body.font-small button,
html body.font-small .btn,
html body.font-small .top-buttons button,
html body.font-small input[type="button"],
html body.font-small input[type="submit"],
html body.font-small .close-btn,
html body.font-small .edit-btn {
    font-size: var(--font-size-small-button) !important;
}

html body.font-small input,
html body.font-small select,
html body.font-small textarea,
html body.font-small .form-control input,
html body.font-small .form-control select {
    font-size: var(--font-size-small-input) !important;
}

html body.font-small label,
html body.font-small .form-label,
html body.font-small .help-icon {
    font-size: var(--font-size-small-label) !important;
}

/* TAMANHO MÉDIO - MÁXIMA ESPECIFICIDADE */
html body.font-medium,
html body:not(.font-small):not(.font-large),
html body.font-medium *,
html body:not(.font-small):not(.font-large) * {
    font-size: var(--font-size-medium-base) !important;
}

html body.font-medium p,
html body.font-medium div,
html body.font-medium span,
html body.font-medium li,
html body.font-medium td,
html body.font-medium th,
html body.font-medium .container,
html body.font-medium .form-group,
html body.font-medium .result-item,
html body.font-medium .input-group,
html body.font-medium .calculator-input,
html body.font-medium .result-text,
html body.font-medium .section-title,
html body.font-medium .top-buttons,
html body.font-medium .header,
html body.font-medium .content,
html body.font-medium .form-row,
html body.font-medium .form-label,
html body.font-medium .form-control,
html body.font-medium .section,
html body:not(.font-small):not(.font-large) p,
html body:not(.font-small):not(.font-large) div,
html body:not(.font-small):not(.font-large) span,
html body:not(.font-small):not(.font-large) li,
html body:not(.font-small):not(.font-large) td,
html body:not(.font-small):not(.font-large) th,
html body:not(.font-small):not(.font-large) .container,
html body:not(.font-small):not(.font-large) .form-group,
html body:not(.font-small):not(.font-large) .result-item,
html body:not(.font-small):not(.font-large) .input-group,
html body:not(.font-small):not(.font-large) .calculator-input,
html body:not(.font-small):not(.font-large) .result-text,
html body:not(.font-small):not(.font-large) .section-title,
html body:not(.font-small):not(.font-large) .top-buttons,
html body:not(.font-small):not(.font-large) .header,
html body:not(.font-small):not(.font-large) .content,
html body:not(.font-small):not(.font-large) .form-row,
html body:not(.font-small):not(.font-large) .form-label,
html body:not(.font-small):not(.font-large) .form-control,
html body:not(.font-small):not(.font-large) .section {
    font-size: var(--font-size-medium-text) !important;
}

html body.font-medium h1,
html body.font-medium header h1,
html body.font-medium .container h1,
html body:not(.font-small):not(.font-large) h1,
html body:not(.font-small):not(.font-large) header h1,
html body:not(.font-small):not(.font-large) .container h1 {
    font-size: var(--font-size-medium-h1) !important;
}

html body.font-medium h2,
html body.font-medium header h2,
html body.font-medium .container h2,
html body.font-medium .user-info h2,
html body:not(.font-small):not(.font-large) h2,
html body:not(.font-small):not(.font-large) header h2,
html body:not(.font-small):not(.font-large) .container h2,
html body:not(.font-small):not(.font-large) .user-info h2 {
    font-size: var(--font-size-medium-h2) !important;
}

html body.font-medium h3,
html body.font-medium h4,
html body.font-medium h5,
html body.font-medium h6,
html body.font-medium .section h3,
html body:not(.font-small):not(.font-large) h3,
html body:not(.font-small):not(.font-large) h4,
html body:not(.font-small):not(.font-large) h5,
html body:not(.font-small):not(.font-large) h6,
html body:not(.font-small):not(.font-large) .section h3 {
    font-size: var(--font-size-medium-h3) !important;
}

html body.font-medium button,
html body.font-medium .btn,
html body.font-medium .top-buttons button,
html body.font-medium input[type="button"],
html body.font-medium input[type="submit"],
html body.font-medium .close-btn,
html body.font-medium .edit-btn,
html body:not(.font-small):not(.font-large) button,
html body:not(.font-small):not(.font-large) .btn,
html body:not(.font-small):not(.font-large) .top-buttons button,
html body:not(.font-small):not(.font-large) input[type="button"],
html body:not(.font-small):not(.font-large) input[type="submit"],
html body:not(.font-small):not(.font-large) .close-btn,
html body:not(.font-small):not(.font-large) .edit-btn {
    font-size: var(--font-size-medium-button) !important;
}

html body.font-medium input,
html body.font-medium select,
html body.font-medium textarea,
html body.font-medium .form-control input,
html body.font-medium .form-control select,
html body:not(.font-small):not(.font-large) input,
html body:not(.font-small):not(.font-large) select,
html body:not(.font-small):not(.font-large) textarea,
html body:not(.font-small):not(.font-large) .form-control input,
html body:not(.font-small):not(.font-large) .form-control select {
    font-size: var(--font-size-medium-input) !important;
}

html body.font-medium label,
html body.font-medium .form-label,
html body.font-medium .help-icon,
html body:not(.font-small):not(.font-large) label,
html body:not(.font-small):not(.font-large) .form-label,
html body:not(.font-small):not(.font-large) .help-icon {
    font-size: var(--font-size-medium-label) !important;
}

/* TAMANHO GRANDE - MÁXIMA ESPECIFICIDADE */
html body.font-large,
html body.font-large * {
    font-size: var(--font-size-large-base) !important;
}

html body.font-large p,
html body.font-large div,
html body.font-large span,
html body.font-large li,
html body.font-large td,
html body.font-large th,
html body.font-large .container,
html body.font-large .form-group,
html body.font-large .result-item,
html body.font-large .input-group,
html body.font-large .calculator-input,
html body.font-large .result-text,
html body.font-large .section-title,
html body.font-large .top-buttons,
html body.font-large .header,
html body.font-large .content,
html body.font-large .form-row,
html body.font-large .form-label,
html body.font-large .form-control,
html body.font-large .section {
    font-size: var(--font-size-large-text) !important;
}

html body.font-large h1,
html body.font-large header h1,
html body.font-large .container h1 {
    font-size: var(--font-size-large-h1) !important;
}

html body.font-large h2,
html body.font-large header h2,
html body.font-large .container h2,
html body.font-large .user-info h2 {
    font-size: var(--font-size-large-h2) !important;
}

html body.font-large h3,
html body.font-large h4,
html body.font-large h5,
html body.font-large h6,
html body.font-large .section h3 {
    font-size: var(--font-size-large-h3) !important;
}

html body.font-large button,
html body.font-large .btn,
html body.font-large .top-buttons button,
html body.font-large input[type="button"],
html body.font-large input[type="submit"],
html body.font-large .close-btn,
html body.font-large .edit-btn {
    font-size: var(--font-size-large-button) !important;
}

html body.font-large input,
html body.font-large select,
html body.font-large textarea,
html body.font-large .form-control input,
html body.font-large .form-control select {
    font-size: var(--font-size-large-input) !important;
}

html body.font-large label,
html body.font-large .form-label,
html body.font-large .help-icon {
    font-size: var(--font-size-large-label) !important;
}

/* ===================================
   ELEMENTOS ESPECÍFICOS DA CALCULADORA - MÁXIMA ESPECIFICIDADE
   ================================= */

/* Sobrepor estilos específicos do styles.css */
html body.font-small .top-buttons button {
    font-size: var(--font-size-small-button) !important;
    padding: 8px 12px !important;
}

html body.font-medium .top-buttons button,
html body:not(.font-small):not(.font-large) .top-buttons button {
    font-size: var(--font-size-medium-button) !important;
    padding: 10px 15px !important;
}

html body.font-large .top-buttons button {
    font-size: var(--font-size-large-button) !important;
    padding: 12px 18px !important;
}

/* Header específico */
html body.font-small header h1 {
    font-size: var(--font-size-small-h1) !important;
}

html body.font-medium header h1,
html body:not(.font-small):not(.font-large) header h1 {
    font-size: var(--font-size-medium-h1) !important;
}

html body.font-large header h1 {
    font-size: var(--font-size-large-h1) !important;
}

html body.font-small header p {
    font-size: var(--font-size-small-text) !important;
}

html body.font-medium header p,
html body.font-small .conversion {
    font-size: 0.7rem !important;
}

html body.font-medium .conversion,
html body:not(.font-small):not(.font-large) .conversion {
    font-size: 0.75rem !important;
}

html body.font-large .conversion {
    font-size: 0.85rem !important;
}

html body:not(.font-small):not(.font-large) header p {
    font-size: var(--font-size-medium-text) !important;
}

html body.font-large header p {
    font-size: var(--font-size-large-text) !important;
}

/* ===================================
   ELEMENTOS DO DASHBOARD - MÁXIMA ESPECIFICIDADE
   ================================= */

/* Cards de configuração */
html body.font-small .config-card h3,
html body.font-small .section h3 {
    font-size: var(--font-size-small-h3) !important;
}

html body.font-medium .config-card h3,
html body.font-medium .section h3,
html body:not(.font-small):not(.font-large) .config-card h3,
html body:not(.font-small):not(.font-large) .section h3 {
    font-size: var(--font-size-medium-h3) !important;
}

html body.font-large .config-card h3,
html body.font-large .section h3 {
    font-size: var(--font-size-large-h3) !important;
}

/* Ícones de ajuda */
html body.font-small .help-icon {
    font-size: var(--font-size-small-label) !important;
}

html body.font-medium .help-icon,
html body:not(.font-small):not(.font-large) .help-icon {
    font-size: var(--font-size-medium-label) !important;
}

html body.font-large .help-icon {
    font-size: var(--font-size-large-label) !important;
}

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

/* Em telas pequenas, ajustar tamanhos */
@media (max-width: 768px) {
    html body.font-small,
    html body.font-small * {
        font-size: 11px !important;
    }
    
    html body.font-medium,
    html body:not(.font-small):not(.font-large),
    html body.font-medium *,
    html body:not(.font-small):not(.font-large) * {
        font-size: 13px !important;
    }
    
    html body.font-large,
    html body.font-large * {
        font-size: 15px !important;
    }
}

/* ===================================
   TRANSIÇÕES SUAVES
   ================================= */

html body, 
html body p, 
html body div, 
html body span, 
html body h1, 
html body h2, 
html body h3, 
html body h4, 
html body h5, 
html body h6, 
html body button, 
html body input, 
html body select, 
html body textarea, 
html body label {
    transition: font-size 0.3s ease !important;
}

/* ===================================
   FORÇA APLICAÇÃO EM TODOS OS ELEMENTOS
   ================================= */

/* Garantir que TODOS os elementos herdem o tamanho correto */
html body.font-small * {
    font-size: inherit !important;
}

html body.font-medium *,
html body:not(.font-small):not(.font-large) * {
    font-size: inherit !important;
}

html body.font-large * {
    font-size: inherit !important;
}