/* =========================
   AJUSTES GLOBALES
========================= */
* {
    box-sizing: border-box;
}

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

/* ✅ COLOR FINAL (sin rojo) */
body {
    background-color: #F3EEE3;
    font-family: 'Montserrat', sans-serif;
}

/* =========================
   ESCALA GLOBAL
========================= */
html {
    font-size: 13px !important;
}

/* 🔥 CONTROL GLOBAL DE TEXTO */
body, 
h1, h2, h3, h4, h5, h6,
p, span, a, li, label, input, button {
    font-size: 1em !important;
}

/* =========================
   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; 
}

/* =========================
   TEXTOS CLAVE
========================= */
.brand h1 {
    font-size: 1.6rem !important;
}

.brand span {
    font-size: 0.9rem !important;
}

/* Sidebar */
.sidebar a, 
.menu-lateral a {
    font-size: 0.85rem !important;
    padding: 6px !important;
}

/* =========================
   🎯 CARRUSEL
========================= */
.carrusel-container {
    max-width: 650px; /* 🔥 un poco más compacto */
    margin: 0 auto;
}

.carrusel-container img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 768px) {

    html {
        font-size: 11px !important;
    }

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

    .logo {
        width: 45px !important;
        height: 45px !important;
    }

    .main-content {
        padding: 5px !important;
    }

    .carrusel-container {
        max-width: 90%;
    }

    .carrusel-container img {
        width: 100%;
    }
}