@charset "utf-8";
/* CSS Document */
/* IMPORT STYLE
================================================== */
@import url("maquetacion.css");
@import url("notification.css");
@import url("calendario.css");

/* RESET STYLE
================================================== */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
     caption, tbody, tfoot, thead{
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
    }
    /* :focus{ outline: 0; } */
    body, html{ background: #f3f2f1; }

    blockquote:before, blockquote:after,
    q:before, q:after { content: ""; }
    blockquote, q{ quotes: none; } 
    article, aside, details, figcaption, figure, footer, 
    header, hgroup, menu, nav, section{ display: block; }
	
.noActivo { opacity: 0.5 }
	
/* GENERIC TAGS
================================================== */
	html, body { font-size: 13px; font-family: 'Open Sans', sans-serif; height: 100%; }
	
	p {	padding: 0;	margin: 0 0 10px 0; }

	h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', sans-serif; font-style: normal; font-weight: 300; }
	
	th { font-weight:bold; text-align:center; line-height: 20px; vertical-align:middle; }
	
	a {text-decoration: none; }
	a img {border:none; }
	
/* ------------------------------------------------------------ */
#lateral {width: 240px; position:fixed }
#lateral.responsive { margin-left: -250px !important;}
#lateral.responsive .user { display: none; }
#lateral.responsive a span { display:none }

#lateral nav a { display: block; padding:12px; font-weight:400; color: #cbd6e8; border-left: #6e9dc8 solid 4px; font-size:13px; }
#lateral nav a.activo, #lateral nav a.activo:hover { background: #19aa8d; border-left: #ffffff solid 4px; color: #fff; }
#lateral nav a:hover { background: #394a59; border-left: #6e9dc8 solid 4px; color: #adc2e4; }

#lateral nav .submenu { margin:10px; }
#lateral nav .submenu.desplegado { background:#516e89; color: white; transition: background 0.3s; }
#lateral nav .submenu .secciones_submenu { max-height:0px; overflow: hidden; transition: max-height 0.3s; }
#lateral nav .submenu.desplegado .secciones_submenu { max-height:1000px; transition: max-height 0.3s; }

@media only screen and (max-width: 700px) {
	.hidden-mobile { display:none; }
    
    #maincontainer { margin-left: 0px; padding:  0px; 
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }
}


.openmenu { position: absolute; top: -100px; left: 270px; z-index:9999; transition: all 0.8s; }

.responsive .openmenu { top: 35px; }

.custom-file-upload {
            border: none;
            border-radius: 5px;
            display: inline-block;
            padding: 6px 12px;
            cursor: pointer;
            background: #19aa8d;
            color: #fff;
        }

.custom-file-upload input[type="file"] {
            display: none;
        }

.scroll-sidebar {
    height: 100%;
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
}

.scroll-sidebar::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}

.submenu { border: 1px solid #f3f2f1 }
.submenu ~.desplegado {border: none; }


#maincontainer { margin-left: 240px; padding:  0px; 
-webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

#maincontainer.dchaAbierto { margin-right: 200px;  }

#maincontainer.responsive { margin-left: 00px; }
.avisosaplazados { position: absolute; left: 550px; top: 5px; z-index: 3 }
#maincontainer.responsive .avisosaplazados { position: absolute; left: 300px !important; }

#col1 { float:left; width: 60%; padding-right: 10px; }
#col2 { float:left; width: 40%; padding-left: 10px; }

.cabecerafija { position: fixed; left: 220px; top: 0px; display: none;}

@media only screen and (max-width: 800px) {
	.hidden-mobile { display:none; }
}

.fade {
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.fade.fade-out {
    opacity: 0;
}

/* ------------------------------------------------------------ */
/* MENÚ LATERAL */
    :root {
        --bg-main: #f3f2f1;
        --bg-sidebar: #2f4050;
        --bg-header: #ffffff;
        --text-sidebar: #ffffff;
        --sidebar-width: 240px;
        --bg-icon: #eee;
    }

    .topbar {
        background-color: var(--bg-header);
        border-bottom: rgba(0, 0, 0, 0.2) solid 1px;
        height: 50px;
        display: flex;
        position:fixed;
        width:100%;
        z-index: 9;
        top:0px;
    }

    .menu-toggle {
        position: fixed;
        top: 40px;
        left: 5px;
        z-index: 11;
        cursor: pointer;
        padding: 5px;
        width: 30px;
        height: 30px;
        box-sizing: border-box;
        text-align: center;
        border-radius: 100%;
        background-color: var(--bg-header);
        border: rgba(0, 0, 0, 0.2) solid 1px;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: calc(-1 * var(--sidebar-width)); /* Escondido por defecto */
        width: var(--sidebar-width);
        height: 100vh;
        background-color: var(--bg-sidebar);
        color: var(--text-sidebar);
        transition: left 0.3s ease;
        z-index: 10;
        display: flex;
        flex-direction: column;
    }

    .sidebar.active {
        left: 0;
    }

    /* Scroll independiente sin barra visible */
    .sidebar-content {
        flex: 1;
        overflow-y: auto;
        padding: 10px 0;
        -ms-overflow-style: none;  /* IE y Edge */
        scrollbar-width: none;    /* Firefox */
    }

    .sidebar-content::-webkit-scrollbar {
        display: none; /* Chrome, Safari y Opera */
    }

    .sidebar-content nav a { display: block; padding:12px; font-weight:400; color: #cbd6e8; border-left: #6e9dc8 solid 4px; font-size:13px; }
    .sidebar-content nav a.activo, #lateral nav a.activo:hover { background: #19aa8d; border-left: #ffffff solid 4px; color: #fff; }
    .sidebar-content nav a:hover { background: #394a59; border-left: #6e9dc8 solid 4px; color: #adc2e4; }

    .sidebar-content nav .submenu { margin:10px; }
    .sidebar-content nav .submenu.desplegado { background:#516e89; color: white; transition: background 0.3s; }
    .sidebar-content nav .submenu .secciones_submenu { max-height:0px; overflow: hidden; transition: max-height 0.3s; }
    .sidebar-content nav .submenu.desplegado .secciones_submenu { max-height:1000px; transition: max-height 0.3s; }


    .horizontal-scroll {
        flex: 1;
        overflow-x: auto;
        -ms-overflow-style: none;  /* IE y Edge */
        scrollbar-width: none;    /* Firefox */
    }

    .horizontal-scroll::-webkit-scrollbar {
        display: none; /* Chrome, Safari y Opera */
    }