html{height:100%; width:100%}
body{font-family:"Segoe UI",Verdana;background-color:white;}
#header{font-size:17px;line-height:26px;width:auto;margin:0 auto;margin-top:4px;padding:6px;border:0px solid #ddd;} 
#page{width:auto;padding:10px;margin:0 auto;margin-top:6px;}
#migaspan{font-size:14px;margin-top:6px;}
#bar{background-color:#7fb1fc;width:96%;border:1px solid #ddd;padding:16px 10px 16px 10px;margin:0 auto;font-size:40px;}
.footer{background-color:white;text-align:center;padding:6px;}
h1,h2,h3,h4{font-family:"Trebuchet MS",serif;font-weight:normal;}
h1{font-size:30px;line-height:30px;margin:16px 0 16px 0;}
h2{font-size:24px;line-height:28px;margin:20px 0 16px 0;}
h3{font-size:22px;margin:16px 0 16px 0;}
h4{font-size:20px;margin:16px 0 2px 0;}
img{max-width:100%;height:auto;border:0;}
.enlaces{border:1px solid #ccc;padding:16px;margin:12px 0 12px 0;line-height:30px;border-radius:10px;width:95%;}
.intro{border:1px solid #7fb1fc;padding:8px;margin:12px 0 12px 0;border-radius:8px; text-align: justify}
.style1
{
    color: #0000FF;
    font-weight: bold;
    font-family: Arial;
    font-size: large ;
    text-align: center;
    background-color: #e0e0e0;
}
.style2
{
    color: black;
    font-weight: bold;
    font-family: Arial;
    font-size: 18px;
    vertical-align: top;
}
.style3
{
    font-family: Arial;
    text-align: center;
    font-weight: bold;
    font-size:  large;
}
.style4
{
    color: #0000FF;
    font-weight: bold;
    font-family: Arial;
    font-size: smaller;
    text-align: center;
}
.style5
{
    color: black;
    font-weight: bold;
    font-family: Arial;
    font-size: 14px;
    vertical-align: top;
}
.barra1
{
    color:  #000000 ;
    font-weight: bold;
    font-family: Arial;
    font-size: 16px;
    text-align: center;
    background-color: #cfd8dc ;
}
.menuvisual
{
    color: #0000FF;
    font-weight: bold;
    font-family: Arial;
    font-size: smaller;
    text-align: center;
	background-color: #d7bde2;
}
	
.areacliente
{
    font-family: Arial;
    text-align: right;
    font-weight: bold;
    font-size:  small;
}
.stylemenu
{
	width:auto;
	padding:8px;
	margin:12px 0 12px 10px;
	margin-top:4px;
	font-size:17px;
	line-height:26px;
	border:1px solid #7fb1fc;
	border-radius:8px;
	text-align: justify;
}	
.table-container {
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    text-align: left;
    border: 1;
}
.table-container2 {
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    text-align: left;
    border: 1;
    table-layout: fixed;
}
.thtd {
    border: 0px solid #ddd;
    padding: 5px;
    text-align: left;
}
.btn 
{
    border: none; 
    color: white; 
    padding: 14px 28px; 
    cursor: pointer; 
    border-radius: 5px;
    font-size: smaller;
    width: 100px;
}
.aceptar {background-color: #43aa56;} 
.aceptar:hover {background: #15aa30;}
.guardar {background-color: #007bff;} 
.guardar:hover {background: #095da1;}
.cancelar {background-color: #c7c3c3; color: black;} 
.cancelar:hover {background: rgb(161, 160, 160);}
.editar {background-color: #f1670b;padding: 1px 24px;;} 
.editar:hover {background: #d85d0b;}
.eliminar {background-color: #d40707;} 
.eliminar:hover {background: #920707;}
.detalle {background-color: #1e9ca0;padding: 1px 24px;;} 
.detalle:hover {background: #156d70;}
.cerrar {background-color: #f43a64;} 
.cerrar:hover {background: #f6053b;}
.menu
{
    background-color: #CC9900; 
    font-family:Sans-Serif;
    padding:0% -10%;
}
.menu ul
{
    margin:0;
    list-style:none;
    padding:0%;
    vertical-align: top;
}
.menu ul li
{
    float:left;
}
.menu ul li:hover
{
    background:rgba(0,0,0,0.3);
}
.menu ul li a
{
    display:block;
    padding:15px 6px;
    color:#754818;
    text-decoration:none;
}
.iconomenu
{
    height:auto; 
    background-color: blue; 
    display:none;
}        
.iconomenu label
{
    display:none;
    width:30px;
    height:30px;
    padding:10px;
}
.iconomenu label:hover
{
    cursor:pointer;
    background:rgba(0,0,0,0.3);
}
.banner
{
    width: 100%;
    height: auto;
    margin: auto;
    margin: auto;
    border:1px solid #7fb1fc;
    border-radius:10px;
}
.correo button:hover
{
    cursor:pointer;
}
.entradas
{
    height:30px;
    font-size:16px;	
    width:100%;
    background:#fff;
}	
.entradascheck
{
    height:30px;
    width:5%;
    background:#fff;
}	
.imagenencabezado
{
    width:100%;
    height:auto;
}
.fecha-selector
{
    display: flex;
    justify-content: left;
    gap: 0;
}
.fecha-selector input[type="number"]
{
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    margin: 0;
}
.textarea
{
    height: 300px; /* Ajusta según el tamaño de fuente */
    width: 100%;
    padding: 8px;
    line-height: 1.5; /* Espaciado entre líneas */
    font-size:16px;	
}
 /* Opcional: Contenedor padre para agrupar botones */
@media (min-width: 768px) {
    .container {
        display: flex;
        flex-wrap: wrap;
    }
    nav, aside {
        flex: 1 1 20%;
    }
    main {
        flex: 1 1 60%;
    }
}
@media (max-width: 768px)
{
    nav, main, aside {
        flex: 1 1 100%;
    }
    .botones-container
    {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .aceptar,
    .guardar,
    .eliminar,
    .cancelar {
      width: 100%; /* Ocupa todo el ancho disponible */
      min-width: 100px; /* Ancho mínimo para mantener legibilidad */
      padding: 10px 15px;
      font-size: 14px;
      margin: 5px 0; /* Espaciado vertical entre botones */
      display: block; /* Para que se apilen verticalmente */
    }
}