/* Reset básico para evitar márgenes inesperados y asegurar 100% alto */
html, body, form, #form1 {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* ======================
   HEADER (30px) - título centrado
   ====================== */
header.header {
    height: 30px;
    background-color: #8db44b;
    color: whitesmoke;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center; /* centra vertical */
    justify-content: center; /* centra horizontal */
    box-sizing: border-box;
    padding: 0 10px;
}

    /* Quitar estilos inline preferibles: aplica al h6 del header si hay uno */
    header.header h6 {
        margin: 0;
        font-weight: 600;
        font-size: 0.95rem;
        color: whitesmoke;
    }

/* ======================
   NAVBAR que contiene el RadMenu
   - tu HTML tiene <nav></nav> seguido de un <div> con el RadMenu.
   - Usamos selector hermano (nav + div) para adaptarnos sin cambiar markup.
   ====================== */
nav {
    /* nav se reserva como contenedor (puede quedar vacío), dejamos sin altura visible */
    height: 0;
}

    /* Selector para el div que contiene el RadMenu (es el hermano inmediatamente después de nav) */
    nav + div {
        height: 25px; /* altura de tu RadMenu (coincide con Height="25px") */
        background-color: #F2CB05;
        position: fixed;
        top: 30px; /* justo debajo del header */
        left: 0;
        right: 0;
        z-index: 999;
        display: flex;
        align-items: center;
        padding: 0 8px;
        box-sizing: border-box;
    }

/* Asegurar que el RadMenu ocupe todo el ancho del contenedor */
#RadMenu1 {
    width: 100% !important; /* Telerik puede generar estilos inline; forzamos ancho */
    height: 30px !important; /* forzamos altura consistente */
    box-sizing: border-box;
}

/* ======================
   CONTENIDO (entre header+nav y footer) con scroll bidireccional
   ====================== */
/* .content-wrapper es la clase que usas en tu markup */
.content-wrapper {
    position: fixed;
    top: 65px;/*calc(30px + 25px); header (30) + nav (25) */
    bottom: 30px; /* espacio para footer fijo */
    left: 0;
    right: 0;
    overflow: auto; /* scroll vertical y horizontal cuando haga falta */
    -webkit-overflow-scrolling: touch; /* mejor scroll en móviles */
    background-color:white;
    padding: 15px;
    box-sizing: border-box;
}

/* .inner-content centrado, con ancho máximo y estilo elegante */
.inner-content {
    max-width: 1200px;
    margin: 0 auto; /* centra horizontalmente */
    padding: 20px;
    background-color:white;
    min-height: 100%; /* para que el fondo interno ocupe todo el alto disponible */
    box-sizing: border-box;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    overflow: visible; /* que los elementos hijos manejen su propio overflow si lo necesitan */
}

/* Cuando el contenido interno sea más estrecho en pantallas pequeñas */
@media (max-width: 600px) {
    .inner-content {
        padding: 12px;
        margin: 0 8px;
        border-radius: 4px;
    }
}

/* ======================
   FOOTER fijo (30px) con texto centrado
   ====================== */
footer.footer {
    height: 30px;
    background-color: #F23030;
    color: whitesmoke;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 10px;
}

    footer.footer p {
        margin: 0;
        font-size: 0.85rem;
        color: whitesmoke;
    }

/* ======================
   Opcional: asegurar compatibilidad con Bootstrap (evitar que contenedores añadan padding/margins sorpresa)
   ====================== */
.container, .container-fluid {
    max-width: 100%;
}

/* Si quieres que el contenido interno pueda usar scroll independiente (ej: tablas grandes dentro),
   asegúrate de aplicar overflow:auto a esos bloques en vez de al .inner-content (para evitar dobles-scroll). */