/* ============================================
   RESET Y VARIABLES GLOBALES - 15% MÁS GRANDES
============================================ */
:root {
    /* Colores principales */
    --color-primary: #2c5282;
    --color-secondary: #4299e1;
    --color-accent: #38b2ac;
    --color-danger: #e53e3e;
    --color-dark: #2d3748;
    --color-gray: #718096;
    --color-light: #f7fafc;
    
    /* Espaciado - 15% más grande */
    --space-xs: 0.2875rem; /* 0.25 × 1.15 = 0.2875rem */
    --space-sm: 0.575rem; /* 0.5 × 1.15 = 0.575rem */
    --space-md: 1.15rem; /* 1 × 1.15 = 1.15rem */
    --space-lg: 1.725rem; /* 1.5 × 1.15 = 1.725rem */
    --space-xl: 2.3rem; /* 2 × 1.15 = 2.3rem */
    
    /* Tipografía - 15% más grande */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
    --font-size-sm: 1.00625rem; /* 0.875 × 1.15 = 1.00625rem */
    --font-size-base: 1.15rem; /* 1 × 1.15 = 1.15rem */
    --font-size-lg: 1.29375rem; /* 1.125 × 1.15 = 1.29375rem */
    --font-size-xl: 1.4375rem; /* 1.25 × 1.15 = 1.4375rem */
    
    /* Bordes */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    
    /* Sombras */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Reset minimalista */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 18px; }
body {
    font-family: var(--font-sans);
    line-height: 1.5;
    color: var(--color-dark);
    background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
    min-height: 100vh;
}

/* Contenedor principal */
.app {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    background: rgba(255, 255, 255, 0.98);
    position: relative;
}

/* ============================================
   HEADER CON MENÚ HAMBURGUESA - 15% MÁS GRANDE
============================================ */

/* Header principal */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.15rem; /* var(--space-md) = 1.15rem */
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: white;
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 69px; /* 60 × 1.15 = 69px */
}

.app-title {
    font-size: 1.29375rem; /* var(--font-size-lg) = 1.29375rem */
    font-weight: 600;
    text-align: center;
    flex: 1;
    margin: 0 1.15rem; /* var(--space-md) = 1.15rem */
}

/* Botones de icono */
.btn-icon {
    background: none;
    border: none;
    width: 41.4px; /* 36 × 1.15 = 41.4px */
    height: 41.4px; /* 36 × 1.15 = 41.4px */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background 0.2s;
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Menú toggle (hamburguesa) 15% más grande */
.menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 27.6px; /* 24 × 1.15 = 27.6px */
    width: 34.5px;  /* 30 × 1.15 = 34.5px */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 3.45px; /* 3 × 1.15 = 3.45px */
    background: white;
    border-radius: 1px;
}

/* Contenido principal */
.app-content {
    padding: 1.15rem; /* var(--space-md) = 1.15rem */
    max-width: 1200px;
    margin: 0 auto;
}

/* ============================================
   RESPONSIVE BASE - 15% MÁS GRANDE
============================================ */

/* Móviles pequeños */
@media (max-width: 480px) {
    .app-header {
        padding: 0.8625rem; /* 0.75 × 1.15 = 0.8625rem */
        height: 64.4px; /* 56 × 1.15 = 64.4px */
    }
    
    .app-title {
        font-size: 1.15rem; /* var(--font-size-base) = 1.15rem */
    }
    
    .app-content {
        padding: 0.575rem; /* var(--space-sm) = 0.575rem */
    }
    
    /* Hamburguesa para móvil */
    .menu-toggle {
        height: 23px; /* 20 × 1.15 = 23px */
        width: 28.75px; /* 25 × 1.15 = 28.75px */
    }
    
    .menu-toggle span {
        height: 2.875px; /* 2.5 × 1.15 = 2.875px */
    }
    
    .btn-icon {
        width: 36.8px; /* 32 × 1.15 = 36.8px */
        height: 36.8px; /* 32 × 1.15 = 36.8px */
    }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1023px) {
    .app-header {
        height: 73.6px; /* 64 × 1.15 = 73.6px */
        padding: 1.15rem; /* 1 × 1.15 = 1.15rem */
    }
    
    .app-title {
        font-size: 1.29375rem; /* var(--font-size-lg) = 1.29375rem */
    }
    
    .menu-toggle {
        height: 27.6px; /* 24 × 1.15 = 27.6px */
        width: 34.5px; /* 30 × 1.15 = 34.5px */
    }
    
    .menu-toggle span {
        height: 3.45px; /* 3 × 1.15 = 3.45px */
    }
}

/* Desktop grande */
@media (min-width: 1024px) {
    .app-header {
        height: 80.5px; /* 70 × 1.15 = 80.5px */
        padding: 1.4375rem; /* 1.25 × 1.15 = 1.4375rem */
    }
    
    .app-title {
        font-size: 1.4375rem; /* var(--font-size-xl) = 1.4375rem */
    }
    
    .menu-toggle {
        height: 27.6px; /* 24 × 1.15 = 27.6px */
        width: 34.5px; /* 30 × 1.15 = 34.5px */
    }
    
    .menu-toggle span {
        height: 3.45px; /* 3 × 1.15 = 3.45px */
    }
    
    .btn-icon {
        width: 46px; /* 40 × 1.15 = 46px */
        height: 46px; /* 40 × 1.15 = 46px */
    }
}