:root {
      --color-principal: #00435A;
      --color-secundario: #3D8495;
      --color-terciario: #A6C4B1;
      --color-adicional: #ffffff;

      --color-fondo-menu: #fcfcfc;
      --color-fondo-menu-nvl01: #fcfcfc;
      --color-fondo-menu-respon: #cccccc;

      --color-texto-menu: #00435A;
      --color-adicional2: #FFD700; /* Amarillo para destacar */
    }

        body { scroll-behavior: smooth; font-size: 16px;}

        /* Contenedor Menu */
        .contenedor_csMenu {
            font-size: 16px;
            font-family: Arial, Helvetica, sans-serif;
            /*background-color: var(--color-fondo-menu);*/
            width: 100%;
            text-align: center; /* Centrar el menú */
            /*position: relative;*/
            height: 60px;
        }

        /* Estilo de la barra horizontal (nav) */
        #csMenu {
            display: inline-block;
            font-size: 16px;
            font-weight: bold;
            font-family: Arial, Helvetica, sans-serif;
            /*background-color: var(--color-fondo-menu);*/
            width: 100%;
            height: auto;
            text-align: right; /* right, left */
            position: relative;
        }

        /* Estilo de bloque del primer nivel y bloque de primer nivel en responcive */
        #csMenu ul {
            margin: 0;
            padding: 10px 0;
            display: inline-block; /* Cambio para centrar */
            list-style: none;
            width: 100%;
            /*background-color: var(--color-fondo-menu-nvl01);*/
            border-radius: 5px;
        }

        /* Estilo de cada celda */
        #csMenu ul li {
            display: inline-block; /* Cambio para centrar */
            position: relative; /* Añadido para alinear submenús */
        }

        /* Estilo de cada enlace */
        #csMenu ul li a {
            color: var(--color-texto-menu);
            display: block;
            padding: 0.6em 0.8em;
            text-decoration: none;
        }

        /* Estilo de cada enlace (sobre) */
        #csMenu ul li a:hover {
            color: var(--color-secundario); /*#aaa;*/
        }
        #csMenu > ul > li > a:hover {
            border-bottom: 2px var(--color-adicional2) solid;
        }

        /* Estilo de bloque del segundo nivel, cuando no es minimizado */
        #csMenu ul li ul {
            display: none;
            position: absolute;
            background-color: var(--color-fondo-menu); /*#0070B8; /*#0093B8;*/
            box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.55);
            top: 100%; /* Añadido para alinear submenús */
            left: 0; /* Añadido para alinear submenús */
            width: 220px; /* Añadido para alinear submenús */
            z-index: 100;
        }

        #csMenu #subMenu01 .subMenuAct::before,
        #csMenu #subMenu02 .subMenuAct::before,
        #csMenu #subMenu03 .subMenuAct::before
        { content: ' ►'; }
        #csMenu #subMenu01:hover .subMenuAct::before,
        #csMenu #subMenu02:hover .subMenuAct::before,
        #csMenu #subMenu03:hover .subMenuAct::before
         { content: ' ▼'; }

        /* Estilo de bloque del segundo nivel (sobre) */
        #csMenu ul li:hover ul {
            display: block;
        }

        /* Estilo de cada celda */
        #csMenu ul li ul li {
            display: block;
        }

        /* Estilo de cada enlace  los submenus nivel 1 despues del menu principal*/
        #csMenu ul li ul li a {
            text-align: left;
        }

        /* Estilo de cada enlace (sobre) los submenus nivel 1 despues del menu principal*/
        #csMenu ul li ul li a:hover {
            background-color: var(--color-fondo-menu-nvl01); /*#0070B8; /* black; */
        }

        /* Estilo de bloque del tercer nivel */
        #csMenu ul li ul li ul {
            display: none !important;
            width: 100%; /* Añadido para alinear submenús */
        }

        /* Estilo de bloque del tercer nivel (sobre) */
        #csMenu ul li ul li:hover ul {
            top: 0;
            left: 100%;
            display: block !important;
        }
        .verMenu { display: block;}
        .ocultaMenu {display: none;}

        /* Getar */
    .getar_izquierda { justify-content: left; text-align: left;}
    .getar_derecha { justify-content: rigth; text-align: rigth;}
    .getar_centro { justify-content: center; text-align: center;}

    .getar_izquierda .getar_imgLogo {
        width: 70px;
        height: 70px;
        object-fit: cover;
        margin-right: 20px;
        min-width: 50px;
        min-height: 50px;
	border: 1px red solid;
    }
    .getar_izquierda .getar_imgLogoLargo {
        width: 140px;
        height: 70px;
        object-fit: cover;
        margin-right: 20px;
        min-width: 140px;
        min-height: 50px;
    }
    .getar_izquierda .getar_imgLogoCuadrado {
        width: 90px;
        height: 90px;
        object-fit: cover;
        margin-right: 20px;
        min-width: 90px;
        min-height: 90px;
    }
    .getar_imgLogoSecc140 {
        width: 140px;
        height: 140px;
        object-fit: cover;
        min-width: 140px;
        min-height: 140px;
    }
    .getar_imgLogoSecc180 {
        width: 180px;
        height: 180px;
        object-fit: cover;
        min-width: 180px;
        min-height: 180px;
    }

    .flxGetarMenu { display: flex; }
    .clrFndMenu { background-color: var(--color-fondo-menu-nvl01); }

    .brdsGetarMenu { 
        border-bottom: 1px #999 solid;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    }

    .activoGetarMenu a { 
        color: var(--color-secundario);
        border-bottom: 2px var(--color-adicional2) solid;
    }


        /* Estilo para hacer responsive */
        @media (max-width: 768px) {
        /* Estilo de la barra horizontal (nav) */
            #csMenu { width: 100%; }
            #menu-btn {top: 12px !important;}
            .activoGetarMenu { color: var(--color-secundario);  border: 0;}

            #csMenu ul { /*--- Menu Principal modo responsive ---*/
                display: none;
                background: var(--color-fondo-menu-respon);
                border-radius: 10px 0 0 10px;
                position: absolute;
                width: 60%;
                z-index: 90;
                top: 40px; /* Añadido para alinear con el botón */
                right: 0;
            }

            #csMenu ul li {
                display: block;
                text-align: left;
                width: 100%;
            }

            #csMenu ul li a {
                padding: 0.6em 1em;
                position: relative;
            }

            #csMenu ul li a:hover { color: var(--color-secundario); }


            /* Cambios para mostrar los símbolos ► o ▼ */
            #csMenu ul li a[data-nivel="submenu"]:after,
            #csMenu ul li a[data-nivel="submenu01"]:after,
            #csMenu ul li a[data-nivel="submenu02"]:after,
            #csMenu ul li a[data-nivel="submenu03"]:after {
                content: '';
                position: absolute;
                right: 10px;
            }

            #csMenu ul li:hover ul {
                display: none;
                width: 100%;
            }

	/*------------------*/
            #csMenu ul li ul { /* seccion de segundo nivel  */
                display: none;
                background-color: var(--color-fondo-menu-nvl01: #ffffff;); /*#0070B8;*/
                position: relative;
                width: 90% !important;
                padding-left: 20px;
            }

            #csMenu ul li:hover ul {
                display: block;
                left: 0;
            }

            #csMenu ul li ul li ul { /* seccion de tercer nivel  */
                display: none;
                background-color:  #0090B8;
                position: relative;
                padding-left: 20px;
            }
            #csMenu ul li ul li:hover ul {
                display: block;
                left: 0;
            }


            /* Cambio para mostrar los símbolos ► o ▼ */
            #csMenu ul li:hover a[data-nivel="submenu"]:after,
            #csMenu ul li:hover a[data-nivel="submenu01"]:after,
            #csMenu ul li:hover a[data-nivel="submenu02"]:after,
            #csMenu ul li:hover a[data-nivel="submenu03"]:after {
                content: '';
            }

        }

        /* Mostrar el botón de menú en dispositivos móviles */
        #menu-btn {
            display: block;
            color: var(--color-secundario); /*#dde5eb;*/
            position: absolute;
            top: 20px;
            right: 25px;
            cursor: pointer;
            z-index: 2; /* Añadido para que esté sobre el menú */
            font-size: 20px;
        }

        @media (max-width: 1025px) {
            /*#vslMenu ul {padding: 0;}*/
            #csMenu ul {padding: 0;}
        }


        @media (min-width: 769px) {
            #menu-btn { display: none; }
            #csMenu ul {display: inline-block;}

        }


        .dark-mode  #csMenu {
            background-color: #004b7a;
        }
        .dark-mode #csMenu ul li ul {
            background:  #004b7a;
        }
        .dark-mode .contenedor_csMenu {
            background-color: #004b7a;
        }
        .dark-mode #csMenu ul {background-color: #004b7a;}

    /* Estilos para el menú flotante */
    #contenedorNav.flotante {
            position: fixed;
            top: 0;
            z-index: 100;
            width: 100%;
            background-color: var(--color-fondo-menu);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    }

    /* Estilo para el espacio que ocupa el menú flotante */
    #contenedorNav.flotante + .contenedor_csMenu {
            margin-top: 60px; 
    }

    .margenIzDr05px{margin: 0 5px;}
    .margenIzDr10px{margin: 0 10px;}
    .margenIzDr15px{margin: 0 15px;}
    .margenIzDr20px{margin: 0 20px;}
    .margenIz05px{margin-left: 5px;}
    .margenDr05px{margin-rigth: 5px;}

    .divTmn25px {width: 25px;}