/* Estilos generales */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
}

.backgroud_principal { 
   background-color: #c3c276;
}

.backgroud_secundario { 
   background-color: #C38703;
}

.container {
    display: flex;
    height: 100vh;  /* La página ocupará el 100% del alto del viewport */
}

.encabezado {
    position: fixed; /* Hace que el encabezado se quede fijo en la parte superior */
    top: 0; /* Alinea el encabezado en la parte superior */
    left: 0; /* Alinea el encabezado al borde izquierdo */
    width: 100%; /* El encabezado debe ocupar el ancho completo de la ventana */
    height: 120px; /* Fija la altura en 120px */
    background-color: #c3c276; /* Color de fondo del encabezado (puedes cambiarlo) */
    z-index: 1000; /* Asegura que el encabezado quede por encima del contenido */
    margin-left: 200px;
}

.icon {
    width: 200px;  /* Ancho del menú a la izquierda */
    height: 120px;  /* Alto del menú a la izquierda */
    background-color: #c3c276;
    color: black;
    margin: 0;
    padding: 0;
    display: flex;  /* Habilita Flexbox */
    align-items: center;  /* Centra verticalmente */
    justify-content: center;  /* Centra horizontalmente */
    overflow: hidden;
}

/* Estilo para el menú lateral */
.menu {
    background-color: #C38703; /* Color de fondo del menú */
    min-height: 100vh; /* Altura mínima: 100% de la ventana */
    width: 200px; /* Ancho fijo para el menú */
    position: fixed; /* Hace que el menú sea fijo en la ventana */
    top: 0; /* Alinea el menú en la parte superior */
    left: 0; /* Alinea el menú al borde izquierdo */
    padding-top: 0px; /* Espacio superior dentro del menú */
}

/* Ajustes para el contenido principal */
.contenido {
    margin-left: 200px;
    padding-top: 120px;
    flex-grow: 1; 
    background-color: white;
}

/* Estilo para la lista de enlaces dentro del menú */
.menu ul {
    list-style: none;
    padding: 20;
    padding-top: 50px;
}

.menu ul li {
    margin-bottom: 15px;
}

.menu ul li a {
    color: black;
    font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma; 
    font-size: 12px;
    text-decoration: none;
    position: relative;  /* Para posicionar el símbolo en relación con el enlace */
    padding-left: 16px;  /* Deja espacio para el símbolo */
}

/* Inserta un símbolo antes de los enlaces */
.menu ul li a::before {
    content: "";  /* El contenido está vacío ya que solo se dibuja el cuadrado */
    position: absolute;
    left: 0;  /* Alinea el cuadrado a la izquierda */
    top: 50%;  /* Centra verticalmente el cuadrado */
    transform: translateY(-50%);  /* Ajuste preciso para centrar */
    width: 10px;  /* Ancho del cuadrado */
    height: 10px;  /* Alto del cuadrado */
    background-color: black;  /* Color del cuadrado */
}

.menu ul li a:hover {
    text-decoration: none;
}
/*
.content h1 {
    margin-bottom: 20px;
}
*/
.backgroud { 
    background-color: #c3c276;
 }

.contenedor {
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    height: 100vh; /* Ajusta la altura del contenedor al 100% del viewport */
}

a:link { text-decoration: none; }
a:visited {	text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }

.Estilo1 { color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma; font-size: 12px; }
.Estilo2 { color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma; font-size: 10px; }
.Estilo3 { color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma; font-size: 13px; }
.Estilo4 { color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma; font-size: 16px; }
.Estilo5 { color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma; font-size: 18PX; }

.Estilo_principal { color: #2E5B5B; font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma; font-size: 12px; }
.Estilo_rojo { color: red; font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma; font-size: 14px; }
.Estilo_rojo1 { color: red; font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma; font-size: 12px; }

.textfield { height:40px; width:350px; border-radius:10px; font-size:18px; background-color: #FFFFFF; text-align:center; border:2px solid #000000; padding:5px; }
.textfield1 { height:30px; width:350px; border-radius:10px; font-size:18px; background-color: #FFFFFF; text-align:center; border:2px solid #000000; padding:5px; }
.textfield2 { height:30px; width:250px; border-radius:10px; font-size:18px; background-color: #FFFFFF; text-align:center; border:2px solid #000000; padding:5px; }
.textfield3 { height:30px; width:80px; border-radius: 10px; font-size:10pt; background-color: #FFC492; text-align:center; border:0px solid #2E5B5B; padding:5px; }
.textfield4 { height:30px; width:250px; border-radius:10px; font-size:12px; background-color: #FFFFFF; text-align:center; border:2px solid #000000; padding:5px; }
.textfield5 { height:40px; width:700px; border-radius:10px; font-size:18px; background-color: #FFFFFF; text-align:center; border:2px solid #000000; padding:5px; }
.textfield6 { height:30px; width:80px; border-radius: 10px; font-size:10pt; background-color: #FFFFFF; text-align:center; border:2px solid #000000; padding:5px; }

.textarea { width:350px; border-radius:10px; font-size:12pt; background-color: #FFFFFF; border:2px solid #000000; padding:5px; }

.select { text-align: center; text-align-last: center; display: block; border-radius:10px; width: 350px; height:40px; padding: 5px; font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma; font-size: 12px; border:2px solid #000000; -webkit-appearance: none;  }
.select1 { text-align: center; text-align-last: center; display: block; border-radius:10px; width: 100px; height:30px; padding: 5px; font-family: Verdana, Arial, Helvetica, sans-serif, Tahoma; font-size: 12px; border:2px solid #000000; -webkit-appearance: none;  }

.botones  { border:2px solid #000000; border-radius:10px; padding:5px; background-color:black; color:#FFFFFF; text-align:center; font-size:12px; font-weight:bold; width:350px; height:40px; cursor:pointer;  }
.botones1 { border:2px solid #000000; border-radius:10px; padding:5px; background-color:black; color:#FFFFFF; text-align:center; font-size:12px; font-weight:bold; width:140px; height:30px; cursor:pointer; }
.botones2 { border:2px solid #000000; border-radius:10px; padding:5px; background-color:white; color:#000000; text-align:center; font-size:12px; font-weight:bold; width:140px; height:30px; cursor:pointer; }
.botones3 { border:2px solid #000000; border-radius:10px; padding:5px; background-color:#FFFFFF; color:#000000; text-align:center; font-size:12px; font-weight:bold; width:80px; height:30px; cursor:pointer;  }
.botones4 { border:2px solid #000000; border-radius:10px; padding:5px; background-color:black; color:#FFFFFF; text-align:center; font-size:12px; font-weight:bold; width:80px; height:30px; cursor:pointer;  }

.botones_p1 { 
    border:2px solid red; 
    border-radius:6px; padding:2px; 
    background-color:white; 
    color:red; 
    text-align:center; 
    font-size:8px; 
    font-weight:bold; 
    width:80px; 
    height:20px; 
    cursor:pointer;  
}

.botones_p2 { 
    border:2px solid #000000; 
    border-radius:6px; padding:2px; 
    background-color:white; 
    color:#000000; 
    text-align:center; 
    font-size:8px; 
    font-weight:bold; 
    width:80px; 
    height:20px; 
    cursor:pointer;  
}

.botones_p3 { 
    border:2px solid green; 
    border-radius:6px; padding:2px; 
    background-color:white; 
    color:green; 
    text-align:center; 
    font-size:8px; 
    font-weight:bold; 
    width:80px; 
    height:20px; 
    cursor:pointer;  
}

.botones_volver { 
    border: 2px solid #000000; 
    border-radius: 10px; 
    padding: 5px; 
    background-color: white; 
    color: #000000; 
    text-align: center; 
    font-size: 12px; 
    font-weight: bold; 
    width: 80px; 
    height: 30px; 
    cursor: pointer; 
}

.botones_menu { 
    border: 2px solid #C38703; 
    border-radius: 10px; 
    padding: 5px; 
    background-color: #C38703; 
    color: #000000; 
    text-align: center; 
    font-size: 12px; 
    font-weight: bold; 
    width: 400px; 
    height: 30px; 
    cursor: pointer; 
}

.botones_menu1 { 
    border: 2px solid red; 
    border-radius: 10px; 
    padding: 5px; 
    background-color: red; 
    color: white; 
    text-align: center; 
    font-size: 12px; 
    font-weight: bold; 
    width: 350px; 
    height: 30px; 
    cursor: pointer; 
}

.botones_calendario { border:0px solid #000000; background-color:transparent; color:white; text-align:center; font-size:12px; font-weight:bold; cursor:pointer; }
.botones_calendario1 { border:0px solid #000000; background-color:transparent; color:black; text-align:center; font-size:12px; font-weight:bold; cursor:pointer; }

.submit-detalles { background-image: url("images/i1.png"); background-size: cover; background-color: transparent; border: none; width: 35px; height: 35px; cursor: pointer; color: transparent; }
.submit-desactivar { background-image: url("images/i2.png"); background-size: cover; background-color: transparent; border: none; width: 35px; height: 35px; cursor: pointer; color: transparent; }
.submit-activar { background-image: url("images/i3.png"); background-size: cover; background-color: transparent; border: none; width: 35px; height: 35px; cursor: pointer; color: transparent; }
.submit-quitar { background-image: url("images/i4.png"); background-size: cover; background-color: transparent; border: none; width: 35px; height: 35px; cursor: pointer; color: transparent; }
.submit-usuarios { background-image: url("images/i5.png"); background-size: cover; background-color: transparent; border: none; width: 35px; height: 35px; cursor: pointer; color: transparent; }