* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}

/* =========================
   ESCALA GLOBAL
========================= */
html {
    font-size: 14px;
}

/* =========================
   CONTENEDOR
========================= */
.middle-wrapper {
    display: flex;
    width: 100%;
    max-width: 100vw;
}

/* =========================
   TABLAS RESPONSIVAS
========================= */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 1rem;
}

table {
    width: 100%;
    min-width: 600px;
}

/* =========================
   AJUSTES GENERALES TEXTO
========================= */
h1 { font-size: 1.8rem; }
h2 { font-size: 1.4rem; }
p { font-size: 0.95rem; }

/* =========================
   RESPONSIVE MÓVIL
========================= */
@media (max-width: 768px) {
    html {
        font-size: 12px;
    }

    .middle-wrapper,
    .footer-content,
    .footer {
        flex-direction: column !important;
        width: 100% !important;
        padding: 5px !important;
    }

    /* ELIMINADO flex-direction: column de .navbar para que no crezca el alto */
    .navbar {
        flex-direction: row !important; 
        width: 100% !important;
        padding: 0 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    h1, .brand h1 {
        font-size: 1.2rem !important; /* Reducido */
        text-align: left;
    }

    .brand span {
        font-size: 0.7rem !important; /* Reducido */
    }

    .logo {
        width: 35px !important; /* Reducido */
        height: 35px !important;
    }

    .sidebar a,
    .menu-lateral a {
        font-size: 0.9rem;
        padding: 6px;
    }

    .main-content {
        padding: 5px;
        width: 100%;
    }
}