*	{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'EB Garamond', serif;
    padding: 0;
	overflow: hidden;
}

html, body	{	height: 100%;	}

#principal	{
            height: 100%;
            width: 100%;
            display: grid;
            position: absolute;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: 80px 60px repeat(10, 1fr) 35px;
            overflow-x: hidden;
            overflow-y: auto;
        }

#logo   {
            grid-column: 1 / 4;
            grid-row: 1 / 1;
            padding: 1% 1% 1% 10%;
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            grid-template-rows: 1fr;
        }

#logo img	{	
                width: 100%;
                height: 100%;
                display: flex;
                grid-column: 1 / 9;
                grid-row: 1 / 1;
            }

#titulo-pagina	{
                display: flex;
                grid-column: 1 / 13;
                grid-row: 2 / 3;
                justify-content: start;
                align-items: center;
                padding-left: 20px;
            }

#titulo-pagina h1	{
                    color: white;
                    font-size: 2.5em;
                    font-weight: 500;
                }

#contenedor {
            display: flex;
            grid-column: 1 / 13;
            grid-row: 3 / 13;
            margin: 3px;
            padding: 5px;
            /* background-image: url("../img/fondo_principal.png"); */
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            display: grid;
            grid-template-columns:1fr;
        }

#footer{
    display: flex;
    grid-column: 1 / 13;
    grid-row: 13 / 14;
    padding-left: 20px;
    padding-right: 30px;
    align-items: center;
    background: linear-gradient(to left, #C10D0E, transparent);
    justify-content: space-between;
}

#titulo-pagina {
                    display: flex;
                    grid-column: 5 / 13;
                    grid-row: 1 / 1;
                    justify-content: end;
                    align-items: center;
                    padding-right: 20px;
                    position: relative;
                }

.linea-degradado{
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 4px;
                    background: linear-gradient(to left, #024880, transparent);
                }

#titulo-pagina h1, .nom-footer  {
                                    color: #024880;
                                    font-weight: 500;
                                }

.btn-salir	{
                color: #ffffff;
                font-weight: 500;
                text-decoration: none;
            }

.btn-salir	a {
    text-decoration: none;
    color: #ffffff;
}

.btn-salir:hover  {
    color: #fff;	
    cursor: pointer;
    background: #000000;
    border-radius: 10px;
    width: 5%;
    padding: 2px;
    text-align: center;
    border: 2px solid white;
}

#cargar	{
			position: absolute; 
			width: 100%; 
			height: 100%; 
			top: 0; 
			left: 0;
            background: rgba(0, 0, 0, 0.5); 
            z-index: 1000;
			display: block;
		}

#cargar div {
				position: relative; 
				height: 20%; 
				top: 40%; 
				text-align: center;
			}

#titulo-pagina h1{ font-size: 2.5em; }

.nom-footer	{   font-size: 1.5em;   }

.btn-salir	{   font-size: 1.4em;   }

.btn-alerta, .btn-alerta-cancela	{
                border: none;
                width: 100px;
                height: 30px;
                font-weight: 600;
                padding: 5px 5px 8px 5px;
                color: #0B163F;
                font-size: 1em;
                cursor: pointer;
                border-radius: 15px;
                justify-content: center;
                background-color: transparent;
            }

.boton:hover, .btn-alerta:hover	{
                                    color: white;
                                    border:1px solid white;
                                    background-color: #00427A;
                                    transition: all 0.7s;
                                    transition-timing-function: ease-in;
                                }


.btn-alerta-cancela:hover {
    color: white;
    border:1px solid white;
    background-color: #C10D0E;
    transition: all 0.7s;
    transition-timing-function: ease-in;
}


/* --------------------------------------------------------------------------------------- 0B163F*/

.col input[type='text'], .col textarea, .col input[type='date'], .col input[type='file'], .col select
                                                                                                    {
                                                                                                        position: absolute;
                                                                                                        top:20px;
                                                                                                        width: calc(100% - 12px);
                                                                                                        margin: 5px 0;
                                                                                                        height: 30px;
                                                                                                        color:  #13100D;
                                                                                                        font-size: 1.1em;
                                                                                                        text-align: left;
                                                                                                        border: 1px solid #024880;
                                                                                                        border-radius: 5px;	
                                                                                                        background: white;
                                                                                                        /* padding: 5px; */
                                                                                                    }

.input-cant {
                width: calc(25% - 12px);
                height: 30px;
                color: #13100D;
                font-size: 1.3em;
                text-align: left;
                border: 1px solid #024880;
                border-radius: 5px;	
                background: white;
                padding: 5px;
                box-sizing: border-box;
            }
                       
.estilo-textarea {
                    position: absolute;
                    top: 20px;
                    width: calc(100% - 12px);
                    margin: 5px 0;
                    height: 30px;
                    color: #13100D;
                    font-size: 1.1em;
                    text-align: left;
                    border: 1px solid #024880;
                    border-radius: 5px;    
                    background: white;
                    padding: 5px;
                    resize: none;
                }

input::placeholder 	{
                        color: #B1B1B1;
                        font-size: 1em;
                        font-style: italic;
                    }

.col label  {
                position: absolute;
                display: block;	
                margin-left: 7px;
                margin-top: 5px;
                font-size: 1em;
                font-weight: 600;
                color: #024880;
            }

.small-etiqueta-white, .small-etiqueta-gray {
                                                width: 100%;
                                                padding: 2% 2%;
                                                margin: 2% 0;
                                                background: rgba(0,66,122,0.35);
                                            }

.small-etiqueta-white p, .small-etiqueta-gray p {
                                                    font-size: 0.85em;
                                                    line-height : 1.2;
                                                    font-style: italic;
                                                    text-align: justify;
                                                }

.small-etiqueta-white p {	color: white;	}

.small-etiqueta-gray p 	{	color: #3D3D3D;	}

/* --------------------------------------------------------------------------------------- */

/*  -------------------------------------SUB MENU--------------------------------------------------------------------------- */

.submenu    {
                position: absolute;
                width: 250px;
                height: auto;
                padding: 15px 10px;
                background-color:#ffffff ;
                border: 3px solid #C10D0E;
                border-radius: 10px;
                z-index: 99;
            }

.submenu > ul 	{
    list-style-type: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.submenu > ul > li > a 	{
    display: block;
    padding: 3px 8px;
    text-decoration: none;
    color: #0B163F;
    font-size: 0.8em;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
}

.submenu > ul > li > a:hover 	{
    color: #DADADA;
    background-color: #000000;
    border-radius: 5px;
}

/*  -------------------------------------ALERTA--------------------------------------------------------------------------- */
#alert-container	{
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0,0,0, 0.8);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    justify-items: center;
    z-index: 1001;
}

#alert-container .alerta-box 	{
    max-width: 60%;
    min-width: 40%;
    padding: 0;
    background-color: #DEDEDE;
    text-align: center;
    border-radius: 20px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 50px;
    border: 2px solid #0B163F;
}

.alerta-mensaje	{
    grid-column: 1 / 2;
    grid-row:  1 / 2;
    justify-self: center;
    align-self: center;
    padding: 5%;
    overflow-y: auto;
    max-height: 400px;
}

.alerta-mensaje span 	{
    font-size: 1.3em;
    color: #172541;
    font-weight: 500;
}

.alerta-btn	{
    grid-column: 1 / 2;
    grid-row:  2 / 3;
    align-self: center;
    justify-self: center;
    background-color: #699CC7;
    width: 100%;
    height: 100%;
    padding-top: 8px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.small-etiqueta-white, .small-etiqueta-gray {
                                                width: 100%;
                                                padding: 1% 5%;
                                                margin-top: -10px;
                                            }

.small-etiqueta-white p, .small-etiqueta-gray p {
                                                    font-size: 0.7em;
                                                    line-height : 1.2;
                                                    font-style: italic;
                                                    text-align: justify;
                                                }

.small-etiqueta-white p {	color: white;	}

.small-etiqueta-gray p 	{	color: #3D3D3D;	}
/*  ---------------------------------------------------------------------------------------------------------------------- */
.col-contenedor	{
    display: flex;
    grid-column: 1 / 10;
    grid-row: 1 / 2;
    height: auto;
}

.form-group {
    display: flex;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    display: grid;
    grid-template-columns: 1fr;
}

.row {
    padding: 0;
    height: 100%;
    display: flex;
    grid-column: 1 / 13;
}

.row-1-2 {
    grid-row: 1 / 2;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-1-3 {
    grid-row: 1 / 3;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-1-4 {
    grid-row: 1 / 4;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-1-5 {
    grid-row: 1 / 5;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-1-6 {
    grid-row: 1 / 6;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-1-7 {
    grid-row: 1 / 7;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-1-8 {
    grid-row: 1 / 8;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-1-9 {
    grid-row: 1 / 9;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-1-10 {
    grid-row: 1 / 10;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-1-11 {
    grid-row: 1 / 11;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-1-12 {
    grid-row: 1 / 12;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-1-13 {
    grid-row: 1 / 13;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-2-3 {
    grid-row: 2 / 3;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-2-4 {
    grid-row: 2 / 4;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-2-5 {
    grid-row: 2 / 5;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-2-6 {
    grid-row: 2 / 6;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-2-7 {
    grid-row: 2 / 7;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-2-8 {
    grid-row: 2 / 8;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-2-9 {
    grid-row: 2 / 9;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-2-10 {
    grid-row: 2 / 10;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-2-11 {
    grid-row: 2 / 11;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-2-12 {
    grid-row: 2 / 12;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-2-13 {
    grid-row: 2 / 13;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-3-4 {
    grid-row: 3 / 4;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-3-5 {
    grid-row: 3 / 5;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-3-6 {
    grid-row: 3 / 6;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-3-7 {
    grid-row: 3 / 7;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-3-8 {
    grid-row: 3 / 8;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-3-9 {
    grid-row: 3 / 9;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-3-10 {
    grid-row: 3 / 10;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-3-11 {
    grid-row: 3 / 11;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-3-12 {
    grid-row: 3 / 12;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-4-5 {
    grid-row: 4 / 5;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-4-6 {
    grid-row: 4 / 6;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-4-7 {
    grid-row: 4 / 7;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-4-8 {
    grid-row: 4 / 8;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-4-9 {
    grid-row: 4 / 9;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-4-10 {
    grid-row: 4 / 10;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-4-11 {
    grid-row: 4 / 11;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-4-12 {
    grid-row: 4 / 12;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-5-6 {
    grid-row: 5 / 6;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-5-7 {
    grid-row: 5 / 7;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-5-8 {
    grid-row: 5 / 8;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-5-9 {
    grid-row: 5 / 9;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-5-10 {
    grid-row: 5 / 10;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-5-11 {
    grid-row: 5 / 11;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-5-12 {
    grid-row: 5 / 12;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-6-7 {
    grid-row: 6 / 7;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-6-8 {
    grid-row: 6 / 8;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-6-9 {
    grid-row: 6 / 9;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-6-10 {
    grid-row: 6 / 10;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-6-11 {
    grid-row: 6 / 11;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-6-12 {
    grid-row: 6 / 12;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-7-8 {
    grid-row: 7 / 8;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-7-9 {
    grid-row: 7 / 9;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-7-10 {
    grid-row: 7 / 10;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-7-11 {
    grid-row: 7 / 11;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-7-12 {
    grid-row: 7 / 12;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-8-9 {
    grid-row: 8 / 9;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-8-10 {
    grid-row: 8 / 10;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-8-11 {
    grid-row: 8 / 11;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-8-12 {
    grid-row: 8 / 12;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-9-10 {
    grid-row: 9 / 10;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-9-11 {
    grid-row: 9 / 11;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-9-12 {
    grid-row: 9 / 12;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-10-11 {
    grid-row: 10 / 11;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-10-12 {
    grid-row: 10 / 12;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-11-12 {
    grid-row: 11 / 12;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-11-13 {
    grid-row: 11 / 13;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-12-13 {
    grid-row: 12 / 13;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-12-14 {
    grid-row: 12 / 14;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-13-14 {
    grid-row: 13 / 14;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-14-15 {
    grid-row: 14 / 15;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-14-19 {
    grid-row: 14 / 19;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-15-16 {
    grid-row: 15 / 16;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-15-17 {
    grid-row: 15 / 17;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-15-18 {
    grid-row: 15 / 18;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-15-19 {
    grid-row: 15 / 19;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-15-20 {
    grid-row: 15 / 20;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-16-17 {
    grid-row: 16 / 17;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-16-18 {
    grid-row: 16 / 18;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-16-19 {
    grid-row: 16 / 19;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-16-20 {
    grid-row: 16 / 20;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-19-20 {
    grid-row: 19 / 20;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-20-21 {
    grid-row: 20 / 21;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-21-22 {
    grid-row: 21 / 22;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-21-23 {
    grid-row: 21 / 23;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-22-23 {
    grid-row: 22 / 23;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.row-23-24 {
    grid-row: 23 / 24;
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(12, 1fr);
}

.col  {
    margin: 0;
    position: relative;
    display: flex;
    grid-row: 1 / 2;
    padding: 0 6px;
}

.col-1-1    {	grid-column: 1 / 1;	}
.col-1-2	{	grid-column: 1 / 2;	}
.col-1-3	{	grid-column: 1 / 3;	}
.col-1-4	{	grid-column: 1 / 4;	}
.col-1-5	{	grid-column: 1 / 5;	}
.col-1-6	{	grid-column: 1 / 6;	}
.col-1-7	{	grid-column: 1 / 7;	}
.col-1-8	{	grid-column: 1 / 8;	}
.col-1-9	{	grid-column: 1 / 9; }
.col-1-10	{	grid-column: 1 / 10; }
.col-1-11	{	grid-column: 1 / 11; }
.col-1-12	{	grid-column: 1 / 12; }
.col-1-13	{	grid-column: 1 / 13; }

.col-2-2	{	grid-column: 2 / 2;	}
.col-2-3	{	grid-column: 2 / 3;	}
.col-2-4	{	grid-column: 2 / 4;	}
.col-2-5	{	grid-column: 2 / 5;	}
.col-2-6	{	grid-column: 2 / 6;	}
.col-2-7	{	grid-column: 2 / 7;	}
.col-2-8	{	grid-column: 2 / 8;	}
.col-2-9	{	grid-column: 2 / 9;	}
.col-2-10	{	grid-column: 2 / 10; }
.col-2-11	{	grid-column: 2 / 11; }
.col-2-12	{	grid-column: 2 / 12; }
.col-2-13	{	grid-column: 2 / 13; }
.col-2-14	{	grid-column: 2 / 14; }
.col-2-15	{	grid-column: 2 / 15; }

.col-3-3	{	grid-column: 3 / 3;	}
.col-3-4	{	grid-column: 3 / 4;	}
.col-3-5	{	grid-column: 3 / 5;	}
.col-3-6	{	grid-column: 3 / 6;	}
.col-3-7	{	grid-column: 3 / 7;	}
.col-3-8	{	grid-column: 3 / 8;	}
.col-3-9	{	grid-column: 3 / 9;	}
.col-3-10	{	grid-column: 3 / 10; }
.col-3-11	{	grid-column: 3 / 11; }
.col-3-12	{	grid-column: 3 / 12; }
.col-3-13	{	grid-column: 3 / 13; }

.col-4-4	{	grid-column: 4 / 4;	}
.col-4-5	{	grid-column: 4 / 5;	}
.col-4-6	{	grid-column: 4 / 6;	}
.col-4-7	{	grid-column: 4 / 7;	}
.col-4-8	{	grid-column: 4 / 8;	}
.col-4-9	{	grid-column: 4 / 9;	}
.col-4-10	{	grid-column: 4 / 10; }
.col-4-11	{	grid-column: 4 / 11; }
.col-4-12	{	grid-column: 4 / 12; }
.col-4-13	{	grid-column: 4 / 13; }

.col-5-5	{	grid-column: 5 / 5;	}
.col-5-6	{	grid-column: 5 / 6;	}
.col-5-7	{	grid-column: 5 / 7;	}
.col-5-8	{	grid-column: 5 / 8;	}
.col-5-9	{	grid-column: 5 / 9;	}
.col-5-10	{	grid-column: 5 / 10; }
.col-5-11	{	grid-column: 5 / 11; }
.col-5-12	{	grid-column: 5 / 12; }
.col-5-13	{	grid-column: 5 / 13; }

.col-6-6	{	grid-column: 6 / 6;	}
.col-6-7	{	grid-column: 6 / 7;	}
.col-6-8	{	grid-column: 6 / 8;	}
.col-6-9	{	grid-column: 6 / 9;	}
.col-6-10	{	grid-column: 6 / 10; }
.col-6-11	{	grid-column: 6 / 11; }
.col-6-12	{	grid-column: 6 / 12; }
.col-6-13	{	grid-column: 6 / 13; }

.col-7-7	{	grid-column: 7 / 7;	}
.col-7-8	{	grid-column: 7 / 8;	}
.col-7-9	{	grid-column: 7 / 9;	}
.col-7-10	{	grid-column: 7 / 10; }
.col-7-11	{	grid-column: 7 / 11; }
.col-7-12	{	grid-column: 7 / 12; }
.col-7-13	{	grid-column: 7 / 13; }
.col-7-14	{	grid-column: 7 / 14; }

.col-8-8	{	grid-column: 8 / 8;	}
.col-8-9	{	grid-column: 8 / 9;	}
.col-8-10	{	grid-column: 8 / 10; }
.col-8-11	{	grid-column: 8 / 11; }
.col-8-12	{	grid-column: 8 / 12; }
.col-8-13	{	grid-column: 8 / 13; }

.col-9-9	{	grid-column: 9 / 9;	}
.col-9-10	{	grid-column: 9 / 10; }
.col-9-11	{	grid-column: 9 / 11; }
.col-9-12	{	grid-column: 9 / 12; }
.col-9-13	{	grid-column: 9 / 13; }

.col-10-10	{	grid-column: 10 / 10;	}
.col-10-11	{	grid-column: 10 / 11;	}
.col-10-12	{	grid-column: 10 / 12;	}
.col-10-13	{	grid-column: 10 / 13;	}

.col-11-11	{	grid-column: 11 / 11;	}
.col-11-12	{	grid-column: 11 / 12;	}
.col-11-13	{	grid-column: 11 / 13;	}
.col-11-14	{	grid-column: 11 / 14;	}
.col-11-15	{	grid-column: 11 / 15;	}
.col-11-16	{	grid-column: 11 / 16;	}

.col-12-12	{	grid-column: 12 / 12;	}
.col-12-13	{	grid-column: 12 / 13;	}

.col-13-13	{	grid-column: 13 / 13;	}

.col-14-17	{	grid-column: 14 / 17;	}

.col-17-23	{	grid-column: 17 / 23;	}

.text-flex-left		{	justify-content: start;	}
.text-flex-center 	{	justify-content: center; }
.text-flex-right 	{ 	justify-content:end; }

.text-center-v	{ align-items: center; }

.he-30 { height: 30px; }
.col textarea { height: 70px; }

.pb-5	{ padding-bottom: 5px; }
.pb-10	{ padding-bottom: 10px; }
.pb-15	{ padding-bottom: 15px; }
.pb-20	{ padding-bottom: 20px; }
.pb-25	{ padding-bottom: 25px; }
.pb-30	{ padding-bottom: 30px; }

.pt-5	{	padding-top: 5px; }
.pt-10	{	padding-top: 10px; }
.pt-15	{	padding-top: 15px; }
.pt-20	{	padding-top: 20px; }
.pt-25	{	padding-top: 25px; }
.pt-30	{	padding-top: 30px; }

.pl-0	{ padding-left: 0; }
.pl-5	{ padding-left: 5; }
.pl-10	{ padding-left: 10; }
.pl-15	{ padding-left: 15; }
.pl-20	{ padding-left: 20; }
.pl-25	{ padding-left: 25; }
.pl-30	{ padding-left: 30; }

.pr-0	{	padding-right: 0; }
.pr-5	{	padding-right: 5; }
.pr-10	{	padding-right: 10px; }
.pr-15	{	padding-right: 15px; }
.pr-20	{	padding-right: 20px; }
.pr-25	{	padding-right: 25px; }
.pr-30	{	padding-right: 30px; }
.pr-17{ padding-right: 17px; }

.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-25 { margin-top: 25px; }
.mt-30 { margin-top: 30px; }

.mb-5 { margin-bottom:5px; }
.mb-10 { margin-bottom:10px; }
.mb-15 { margin-bottom:15px; }
.mb-20 { margin-bottom:20px; }
.mb-25 { margin-bottom:25px; }
.mb-30 { margin-bottom:30px; }
.mb-40 { margin-bottom:40px; }

.ml-0	{ margin-left: 0; }
.ml-5	{ margin-left: 5px; }
.ml-10	{ margin-left: 10px; }
.ml-15	{ margin-left: 15px; }
.ml-20	{ margin-left: 20px; }
.ml-25	{ margin-left: 25px; }
.ml-30	{ margin-left: 30px; }
.ml-40	{ margin-left: 40px; }
.ml-6   { margin-left: -6px; }

.mlm-20	{ margin-left: -20px; }

.mr-0	{ margin-right: 0; }
.mr-5	{ margin-right: 5px; }
.mr-10	{ margin-right: 10px; }
.mr-15	{ margin-right: 15px; }
.mr-20	{ margin-right: 20px; }
.mr-25	{ margin-right: 25px; }
.mr-30	{ margin-right: 30px; }
.mr-20m { margin-right: -20px; }

.w5		{	width: 5%;	}
.w10	{	width: 10%;	}
.w15	{	width: 15%;	}
.w20	{	width: 20%;	}
.w25	{	width: 25%;	}
.w30	{	width: 30%;	}
.w35	{	width: 35%;	}
.w40	{	width: 40%;	}
.w45	{	width: 45%;	}
.w50	{	width: 50%;	}
.w55	{	width: 55%;	}
.w60	{	width: 60%;	}
.w65	{	width: 65%;	}
.w70	{	width: 70%;	}
.w75	{	width: 75%;	}
.w80	{	width: 80%;	}
.w85	{	width: 85%;	}
.w90	{	width: 90%;	}
.w95	{	width: 95%;	}
.w100	{	width: 100%; }

.he5    { height: 5%;}
.he10    { height: 10%;}
.he15    { height: 15%;}
.he20    { height: 20%;}
.he25    { height: 25%;}
.he30    { height: 30%;}
.he35    { height: 35%;}
.he40    { height: 40%;}
.he45    { height: 45%;}
.he50    { height: 50%;}

.text-center	{	text-align: center; }

.df{
    display: flex;
}

.jcc{
    justify-content: center;
}

.color-blue{ background: #024880; }
/*=======================================================================*/

.button-acerama {
	cursor: pointer;
	position: relative;
	padding: 10px 24px;
	font-size: 18px;
	color: #03579C;
	border: 2px solid #0B08A9;
	border-radius: 34px;
	background-color: transparent;
	font-weight: 600;
	transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
    width: 100%;
}

.button-acerama::before {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 100%;
	height: 50px;
	border-radius: inherit;
	scale: 0;
	z-index: -1;
	background-color: rgb(3, 87, 156);
	transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.button-acerama:hover::before {	scale: 3;	}

.button-acerama:hover {
    color: #ffffff;
	scale: 1;
    width: 90%;
}

.button-acerama:active { scale: 1; }


/* ================================TABLA========================================== */

.over-fl{
    overflow: auto;
}

.thead-table{
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background: #1D1C1B;
    margin-left: 6px;
    margin-right: 6px;
}

.table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 1em;
    text-align: left;
    background-color: #1D1C1B;
    /* border-radius: 20px; */
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    height: 40px;
}

th, td {
    padding: 15px;
    text-align: center;
}

th {
    background-color: #1D1C1B;
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: bold;
    border-radius: 20px 20px 0 0;
}

tbody tr {
    transition: background-color 0.3s, color 0.3s;
}

tr {
    height: 10px;
}

tbody tr:nth-child(even) {
    /* background-color: #024880; */
    background-color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.9);
}

tbody tr:nth-child(odd) {
    /* background-color: #C10D0E; rgba(231, 41, 41, 1)*/
    background-color: rgba(105, 156, 199, 1);
    border-bottom: 1px solid #C10D0E;
}

tbody tr:hover {
    /* background-color: #C10D0E; */
    background-color: #70706F;
    color: #FFFFFF;
}

caption {
    font-size: 1.75em;
    margin: 15px;
    color: #C10D0E;
    font-weight: bold;
}

.boton-table	{
    width: 100%;	
    display: flex;
    /* color: #0B163F; */
    background-color: #699CC7;
    color: white;
    border:1px solid white;
    cursor: pointer;
    font-weight: 600;
    padding: 5px 20px;
    border-radius: 15px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.boton-table:hover {
    color: white;
    border:1px solid #FFFFFF;
    background-color: #03579C;
    transition: all 0.7s;
    transition-timing-function: ease-in;
}

.img-product {
    width: 50px;
    height: auto;
    border-radius: 50%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: white;
}

.img-product:hover {
    transform: scale(1.5);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.icons {
    display: flex;
    /* justify-content: space-evenly; */
    justify-content: space-around;
    align-items: center;
    overflow: visible;
    height: 100%;
}

.icons a {
    display: inline-block;
    overflow: visible;
    position: relative;
}

.icons img {
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: transform 0.3s ease;
    transform-origin: center;
}

.icons img:hover {
    transform: scale(1.3);
}

.line-bottom{
                border-bottom: 2px solid gray;
                padding-bottom: 10px;
            }

input[type='checkbox'] {
    appearance: none;
    height: 20px;
    width: 20px;
    cursor: pointer;
    border-radius: 5px;
    border: 1px solid #001125;
    background-color: white;
    position: relative;
    transition: background-color 0.2s;
}

input[type='checkbox']:checked { background-color: #001125;  }

input[type='checkbox']::after {
    content: "✓";
    position: absolute;
    left: 2px;
    top: -2px;
    font-size: 18px;
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
}

input[type='checkbox']:checked::after { opacity: 1; }            
            
/* ============================================estilos de drag and drop ============================================*/

.file-drop-area {
    position: relative;
    border: 2px dashed #024880;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    width: 400px;
    margin: 0 auto;
    cursor: pointer;
    transition: border-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.file-drop-area:hover {
    border-color: #777;
}

.file-drop-area .fake-btn {
    background-color: #007bff;
    color: white;
    padding: 8px 20px;
    border-radius: 5px;
    margin-bottom: 10px;
    display: inline-block;
    cursor: pointer;
}

.file-drop-area .file-msg {
    margin-left: 10px;
    font-size: 1.2em;
    color: #C10D0E;
}

.file-drop-area input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}

#preview {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

#preview img {
    width: 70%;
    height: 70%;
    object-fit: cover;
}

.cont-venta{
    border: 2px solid #024880;
    border-radius: 15px;
    background-color: #FFF;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.cont-venta:hover {
    border-color: #C10D0E;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.rotate-on-hover {
    transition: transform 0.3s ease-in-out;
}

.rotate-on-hover:hover {
    transform: rotate(80deg);
}

.grid-5 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(5, 1fr);
}

.grid-6 {
    display: grid;
    /* grid-template-columns: repeat(6, 1fr); */
    grid-template-rows: repeat(6, 1fr);
}

/* --------------------------------------------------------------------------------------------- Ventanas emergentes */
.box-window	{
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0,0,0, 0.4);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
    z-index: 150;
}

.title-modal{
    justify-content: center;
    color: #1D1C1B; 
    font-size: 2em; 
    font-weight: bold;
}

.cont-cliente {
    border: 2px solid #024880;
    border-radius: 15px;
    background-color: #E0E2E1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.cont-product {
    /* border: 2px solid #024880; */
    border-radius: 15px;
    /* background-color: #E0E2E1; */
    background-color: rgba(224, 226, 225, 0);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.img-disp {
    display: flex; 
    justify-content: center; 
    align-items: star;
}

/* -------------------------------- Diseño autocompletar --------------------------------*/
.autocompletar	{
					position: relative;
					display: inline-block;
                    overflow-y: auto;
				}

.lista-autocompletar-items	{
								color: white;
								font-size: 1.1em;
								position: absolute;
								border: 1px solid #0A3302;
								background-color: rgba(105, 156, 199, 1);
								top: 7%;
								left: 2%;
								right: 0;
								width: 95%;
								border-radius: 10px;
								z-index: 9999;
                                overflow: auto;
							}

.lista-autocompletar-items div	{
									padding: 5px;
									cursor: pointer;
									background-color: transparent;
								}

.lista-autocompletar-items div:hover	{
											background-color: #70706F;
											border-radius: 10px;	
										}

.autocompletar-active	{
							background-color: #004CA3;
							border-radius: 10px;
						}														 */

/*  ----------------------------------------------------- */


/* -------------------------------------------------MEDIA QUERYS---------------------------------------------------------------- */

/*= . = . = . = . = . = . = . = . = . = . = . = . = . = . = . = .
										CELULAR HORIZONTAL
 = . = . = . = . = . = . = . = . = . = . = . = . = . = . = . = .*/
 @media only screen and (max-width: 1024px) and (min-width: 769px) and (orientation: landscape){
    #logo {
        display: flex;
        grid-column: 1 / 5;
        grid-row: 1 / 1;
    }

    /* .button-acerama {
        padding: 8px 16px;
        font-size: 1px;
        border-radius: 30px;
    }

    .button-acerama::before {
        height: 40px;
    } */

}

/*= . = . = . = . = . = . = . = . = . = . = . = . = . = . = . = .
			  				TABLET
 = . = . = . = . = . = . = . = . = . = . = . = . = . = . = . = .*/
 @media only screen and (max-width: 769px) and (orientation: landscape){
    #logo{	
        display: flex;
        grid-column: 1 / 5;
        grid-row: 1 / 1;
    }

    .button-acerama {
        padding: 9px 20px;
        font-size: 17px;
        border-radius: 32px;
    }

    .button-acerama::before {
        height: 45px;
    }
}

/* Estilos para pantallas grandes */
@media (min-width: 1920px) {

    #logo img	{	
                    width: 100%;
                    height: 100%;
                    display: flex;
                    grid-column: 1 / 8;
                    grid-row: 1 / 1;
                }

    #titulo-pagina h1	{ font-size: 4em; }
    
    .button-acerama {
        padding: 10px 24px;
        font-size: 18px;
        border-radius: 34px;
    }

    .button-acerama::before {
        height: 50px;
    }
}