/* Variables CSS para tamaños de fuente */
:root {
    --font-size-multiplier: 1;
    --base-font-size: 16px;
    --base-size: 16px;
    --h1-size: calc(2.5rem * var(--font-size-multiplier));
    --h2-size: calc(2rem * var(--font-size-multiplier));
    --h3-size: calc(1.75rem * var(--font-size-multiplier));
    --h4-size: calc(1.5rem * var(--font-size-multiplier));
    --h5-size: calc(1.25rem * var(--font-size-multiplier));
    --h6-size: calc(1rem * var(--font-size-multiplier));
    --body-size: calc(1rem * var(--font-size-multiplier));
    --small-size: calc(0.875rem * var(--font-size-multiplier));
}

/* Aplicar tamaños de fuente */
body {
    font-size: var(--body-size);
}

h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }
h5 { font-size: var(--h5-size); }
h6 { font-size: var(--h6-size); }

.table { font-size: var(--body-size); }
.form-control { font-size: var(--body-size); }
.form-select { font-size: var(--body-size); }
.btn { font-size: var(--body-size); }
.nav-link { font-size: var(--body-size); }
small, .small { font-size: var(--small-size); }

/* Controles de tamaño de fuente */
.font-size-controls {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 8px;
    background: white;
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1050;
}

.font-size-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 4px;
    background: #f8f9fa;
    color: #212529;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s;
}

.font-size-btn:hover {
    background: #e9ecef;
}

.font-size-btn:active {
    transform: scale(0.95);
}

.font-size-reset {
    font-size: 0.875rem;
    padding: 0 12px;
    width: auto;
}