:root {
    --color-01: #e6e7e8;
    --color-02: #07070c;
    --color-03: #a3d5ff;
    --color-04: #0d72b9;
    --color-05: #f2f2f2;
    --color-06: #004067;
    --color-07: #E2C675;
    --color-08: #0A3D63;
    --color-09: #E1C272;
    --color-10: #00213a;
    --color-11: #cda349;
    --color-12: #00001e;
    --color-fondo: var(--color-05);
    --color-texto: var(--color-02);
    --color-fencabezado: var(--color-06);
    --color-fnav: var(--color-12);
    --color-fetabla: var(--color-10);
}
body {
    font-family: Poppins, sans-serif;
    background-color: var(--color-fondo); /* Fondo claro */
    color: var(--color-texto); /* Texto oscuro */
    margin: 0;
    padding: 0;
}

header {
    background-color: var(--color-fencabezado);
    color: #ffffff;
    text-align: center;
    height:70px;
}

h2 {font-weight: 400;}

nav {
    background-color: var(--color-fnav);
    padding: 10px 0;

    height:20px;
    display:flex;
    justify-content:space-between;
    /*position:fixed;*/
    z-index:1000;
    width:100%;
    box-shadow:0 0 6px 0 rgba(0, 0, 0, 0.5);
}

footer p {
    font-family: 'Poppins';
    font-weight: 300;
    font-size: 13px;
    color: #949494;}

.DivisionMenuHamburguesa
{
    display:none;
}
.MenuUno{
    display:flex;
}
.MenuDos{
    display:none;
}
.DivisionLogo
{
    height:64px;
    width:80px;
    /*
        background:var(--ColorSolido4);
        */
    margin-left:80px;
    display:none;
    justify-content:space-around;
    align-items:center;
    border-radius:3px;
    margin-top:-20px;
}
.DivisionLogo img
{
    width:68px;
    object-fit:cover;
}
.DivisionEnlaces
{
    height:100%;
    width:57%;
    margin: auto;
    justify-content:space-around;
    align-items:center;
    flex-wrap:wrap;
    line-height: 1em;
}
.DivisionEnlaces a /*, .Activo*/
{
    color:#ffffff;
    font-weight:300;
    text-decoration:none;
    font-size:16px;
    margin-right:10px;
    border-top:1px solid transparent;
    border-bottom:1px solid transparent;
    padding: 4px 0;
    transition: 0.7s ease-out;
}

.DivisionEnlaces a:hover /*.Activo*/
{
    font-weight:400;
    border-top:1px solid rgb(245, 245, 220);
    border-bottom:1px solid rgb(245, 245, 220);
}
main {
    padding: 20px;
}

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

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #ffffff; /* Fondo blanco */
    border: 1px solid #cccccc;
}

th, td {
    padding: 12px;
    border: 1px solid #dddddd;
}

tr td {font-size: 14px;
    font-weight: 300;
    color: #6e6e6e;}

th {
    background-color: #dadada;
    color: #555;
    font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3em;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

tr:hover {
    background-color: #d1e7dc;
}


label {
        display: block;
        margin-bottom: 5px;
        font-weight: 400;
    }

select {
        width: 100%;
        padding: 8px;
        font-size: 13px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #f8f9fa;
        color: #212529;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-bottom: 15px;
    }

    select:hover {
        border-color: #0056b3;
        background-color: #e9ecef;
    }

    select:focus {
        outline: none;
        border-color: #0056b3;
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    }
button {
    /*padding: 10px;
    margin-top: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #354B63;
    color: #fff;*/
padding: .3em 1em;
color: #FFFFFF;
border: 1px solid #0D72B9;
border-radius: 30px;
font-size: 14px;
text-transform: uppercase;
background-image: linear-gradient(180deg, #0d72b9 0%, #003559 100%);
background-color: #004067;
box-shadow: 0px 12px 18px -6px rgba(0, 0, 0, 0.3);
transition: all 300ms ease 0ms;
font-weight: 500;
line-height: 1.7em;
cursor: pointer;
}
button:hover {
    background-image: linear-gradient(180deg, #003559 0%, #0d72b9 100%);
}
/* Estilo para el formulario */
form {
    margin: 40px auto; /* Espaciado superior e inferior */
    width: 51%;
    max-width:1080px;
    padding: 55px 45px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Estilo para los inputs y botones */
form input, form button {
    width: 140px;
    padding: 5px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

form input {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

form button {
    /*background-color: #354B63;
    color: #fff;
    border: none;
    cursor: pointer;*/
    color: #FFFFFF;
border: 1px solid #0D72B9;
border-radius: 30px;
font-size: 14px;
text-transform: uppercase;
background-image: linear-gradient(180deg, #0d72b9 0%, #003559 100%);
background-color: #004067;
box-shadow: 0px 12px 18px -6px rgba(0, 0, 0, 0.3);
font-weight: 500;
line-height: 1.7em;
cursor: pointer;
}

form button:hover {
    background-image: linear-gradient(180deg, #003559 0%, #0d72b9 100%);
background-color: #004067;
transition: all 300ms ease 0ms;
}

p {
    font-size: 18px;
    text-align: center;
    color: var(--color-texto);
}

/* ESTILO 7W */
/* =Back Office Custom
------------------------------------------------------- */
::placeholder {color:#b6b6b6;}

.body {background-color:#f2f2f2;}

.home-window {
    margin: 40px auto;
    max-width: 550px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}

.form {
width: 51%;
max-width:1080px;
padding: 55px 45px;
}

.clearfix {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

.form-input {
margin-bottom: 23px;
}
.form-input-half {
width: 49%;
margin-bottom:15px;
margin-right:9px;
display: flex;
flex-direction: column;
float: left;

}

.form-input-half-last{
width: 49%;
display: flex;
flex-direction: column;
float: left;
}

.form-input-third {
margin-right: 9px;
margin-bottom: 7px;
width: 32%;
display: flex;
flex-direction: column;
float: left;
}

.form-input-third-last {
width: 32%;
display: flex;
flex-direction: column;
float: left;}

.form-input-full {
margin-right: 9px;
width: 98%;
display: flex;
flex-direction: column;
float: left;
}

.label {
display: block;
margin-bottom: 1px;
padding-left:5px;
font-weight: 400;
font-family: "Poppins", serif;
color: #6a6a6a;
font-size: 14px;
}

.titulo-form {
margin-top:15px;
color: #414141;
font-weight: 600;
}

.select-form {
border: 1px solid #b6b6b6;
color: #474646;
background-color: #fff;
font-size:13px;
}

.divider {
display: block;
width:100%;
border-top:1px solid #c2c2c2;
margin-bottom: 30px;
}

.txt {
display: block;
clear: both;
}

.input-btn {
display: block;
width:210px;
margin-top: 32px;
padding: .3em 1em;
color: #FFFFFF;
border: 1px solid #0D72B9;
border-radius: 30px;
font-size: 14px;
text-transform: uppercase;
background-image: linear-gradient(180deg, #0d72b9 0%, #003559 100%);
background-color: #004067;
box-shadow: 0px 12px 18px -6px rgba(0, 0, 0, 0.3);
transition: all 300ms ease 0ms;
font-weight: 500;
line-height: 1.7em;
cursor:pointer;
}

@media (max-width: 980px) {
    
.form {
width: 80%;
padding: 55px 25px;}

.form-input-full, .form-input-half, .form-input-half-last, .form-input-third, .form-input-third-last {
width: 100%;
margin-bottom:10px;
margin-right:0px;
}


}

@media screen and (max-width:800px)
{
    .DivisionMenuHamburguesa
    {
        display:flex;
        justify-content:center;
        height:100%;
        align-items:center;
        color:#ffffff;;
        padding:20px;
        z-index:1000;
        cursor:pointer;
        margin-right:40px;
        margin-top:-20px;
    }
    .MenuUno
    {
        display:none;
    }
    .MenuDos
    {
        display:flex;
    }
    .DivisionEnlaces 
    {
        position:fixed;
        right:0;
        height:calc(100vh - 110px);
        flex-direction:column;
        transition:all 1s ease;
        background-color:#354B63;
        align-items:flex-start;
        padding-left: 10px;
        padding-top:40px;
    }
}
@media screen and (max-width:500px)
{
    .MenuUno
    {
        display:none;
    }
    .MenuDos
    {
        display:flex;
    }
    /*
    nav
    {
        text-align: center;
        padding:30px 0 30 0;
        height:120px;
    }
    */
    .DivisionEnlaces 
    {
        padding-top:5px;
        padding-bottom:10px;
    }
    nav > a
    {
        margin-right:5px;
    }
}