/* Reset de estilos */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #ffffff;
}

.header{
  position:relative;
  width:100%;
  max-width:800px;
  margin:0 auto;
}
.header img{
  width:100%;
}

.main{
  position:relative;
  width:90%;
  max-width:720px;
  margin:20px auto;
}

h1{
  color:#666;
  font-size:24px;
  display: inline-block;
}
.volver{
  float:right;
  border: 1px solid #900721;
  color: #900721;
  text-decoration:none;
  border-radius: 5px;
  padding: 5px;
}
.col{
  display:inline-block; /* --> probar con table-cell para tambien obtener un formato de menu */
  width:250px;
  padding:5px;
  margin-left:10px;
}

@media (min-width: 800px) {
  .header, .main{
    top:-150px;
  }

  h1{
    font-size:28px;
  }
}
button, .button{
  display:block;
  width:90%;
  margin:0 auto;
  padding: 10px;
  font-size: 20px;
  background-color: #FFF;
  border: 2px solid #900721;
  color: #900721;
  border-radius: 10px;
  cursor: pointer;
  text-decoration:none;
  text-align: center;
  box-sizing:border-box;
  margin-top:10px;
  margin-bottom:10px;
}
button:hover, .button:hover, .volver:hover{
  background-color: #900721;
  color: #FFF;
} 
button[disabled], .disabled{
  background-color: #AAA;
  color: #333;
  border: 2px solid #333;
}
button[disabled]:hover, .disabled:hover{
  background-color: #888;
  color: #333;
}


#login {
  text-align: center;
}

h2 {
  margin-bottom: 10px;
}

input[type=text],input[type=password], select {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width:100%;
}

button[type="submit"] {
  background-color: #900721;
  color: #ffffff;
}

hr{
  max-width:300px;
  margin:30px auto;
}
.footer {
  padding: 20px;
  text-align: center;
  background-color: #f8f9fa;
}
.footer img{
  max-width:250px;
}

#ap{
  cursor:pointer;
  color:#900721;
  font-size:16px;
  text-align:left;
  margin-left:20px;
}
#form{
  display:none;
  margin: 0px 20px;
}

#modal{
  display:none;
  position:absolute;
  top:50px;
  left:0;
  right:0;
  max-width:700px;
  margin: 0 auto;
  height:80%;
  background-color:#E5E5E5;
  border:3px solid #333;
  padding:10px;
}
#modal .titulo{
  font-size:25px;
  margin-bottom:10px;
}
#modal .contenido{
  height:75%;
  overflow-x: hidden;
  overflow-y: auto;
  margin-bottom:10px;
}
#modal div:nth-child(3){
  text-align: center;
}
.categorias{
  margin-top:20px;
  margin-bottom:20px;
  display:flex;
  flex-direction: row;
  gap:20px;
}
.loginerror{
  color:#900721;
}


/* gestion */
details .gestion{
  padding-left: 50px;
}
.gestion .child{
  display:none;
}
.gestion .row{
  display:inline-flex;
}
.gestion input, .gestion button, select{
  display:inline-flex;
  width:auto;
  margin:5px;
  height:40px;
  font-size:16px;
}
.input-corto{
  width:140px !important;
}

.msg{
  border:1px solid #888;
  background-color: #ffe4c4;
  margin:10px;
  padding:10px;
}