:root {
  --shade: #eee;
  --page-bg-color: var(--shade);
  --body-bg-color: white;
  --text-color: black;
  --link-color: blue;
  --disabled-color: grey;
  --visited-color: blue;
  --ficha-color: Whitesmoke;
  --body-margin: 40px;
  --header-height: 40px;
  --footer-height: 40px;
  --header-padding: 40px;
  --footer-padding: 40px;
  --img-background-color: var(--shade);
  --border-radius: 10px;
  --numero-aureo: 1.618033;
  --page-width: 1024px;
  --column-width: calc(var(--page-width) / 2 - var(--column-gap) / 2);
  --column-gap: 24px;
  --column-min-height: 180px;
  --ratio-a4: 1.414;
  --button-width: 75px;
  --button-height: calc(var(--button-width) / 1.8);
  --doc-width: 800px;
  --doc-min-height: 800px;
  --image-aspect-ratio: var(--ratio-a4);
  --photo-width: 235px;
  --photo-height: calc(var(--photo-width) * var(--image-aspect-ratio));
  --button-active-color: cyan;
  --button-color: blue;
  --button-text-color: white;
}

html {
  font-family: Arial, Helvetica, sans-serif;
  background-color: var(--page-bg-color);
}

body {
  min-height: calc(100vh - 2 * var(--body-margin));
  width: var(--page-width);
  margin: 40px auto;
  background-color: var(--body-bg-color);
}

#photo-gallery {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;

  .photo {
    padding: 5px;
    margin: 5px;
    border-radius: var(--border-radius);

      img {
      width: var(--photo-width);
      height: var(--photo-height);
      object-fit: contain;
    }
  }

  .no-decoration {
    text-decoration: none;
  }
}

#document-gallery {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;

  .document {
    padding: 5px;
    margin: 5px;
    border-radius: var(--border-radius);

      img {
      width: var(--photo-width);
      height: var(--photo-height);
      object-fit: contain;
    }
  }

  .no-decoration {
    text-decoration: none;
  }
}


a:visited {
  color: var(--visited-color);
}

img {
  width: var(--photo-width);
  height: var(--photo-height);
  object-fit: contain;

}

header {
  height: var(--header-height);
  padding: 20px;
  line-height: var(--header-height);
  vertical-align: middle;
}

#titulo-aplicacion {
  font-weight: bold;
  font-size: 1.2em;
}

header a {
  text-decoration: none;
  color: var(--link-color);
}

header button#logout_button {
  text-decoration: none;
  color: var(--link-color);
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}
header a:hover {
  color: blue;
}

#app-title {
  font-weight: bold;
}

main {
  min-height: calc(100vh - 2 * var(--body-margin) - var(--header-height) - var(--footer-height) - var(--header-padding) - var(--footer-padding));
  padding: 0 20px;
}

main h1 {
  font-size: 2.5em;
  font-weight: bold;
}

main h1 a, main h2 a {
  color: var(--link-color);
  text-decoration: none;
}

main h2 {
  font-size: 2em;
  font-weight: bold;
}

main h3 {
  font-size: 1.5em;
  font-weight: bold;
}

main ul {
  list-style-type: disc;
  list-style-position: inside;
  padding-bottom: 20px;
}

footer {
  height: var(--header-height);
  width: 964px;
  padding: 20px;
  text-align: center;
}

.main-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.main-subheader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 20px;
}

.subtitle {
  margin-top: 20px;
  vertical-align: bottom;
}

.actions {
  align-items: center;
  justify-content: flex-end;
}

#colecciones {
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

}

.coleccion {
  font-size: 1.7em;
  margin: 30px;
}

#ficha {
  font-size: 1.2em;

  .field {
    margin: 10px 0;
  }

  .field-name {
    font-weight: bold;
  }

  .field-value {
  }
}

.galeria {
  display: flex;
  flex-direction: row;
  justify-items: flex-start;
  margin-bottom: 20px;
}


ul.ErrorList {
  font-weight: bold;
}

.warning {
  font-size: 1.5em;
  color: red;
  background-color: black;
  padding: 5px;
  text-align: center;
  margin-bottom: 10px;
}

.buttons, .actions, .confirmations {
  height: 30px;
  min-width: 200px;
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.buttons {
  justify-content: flex-start;
}


.confirmations {
  justify-content: center;
}

.buttons a, .actions a, .buttons button, .actions button,
.confirmations a, .confirmations button, #confirm-delete-image form button {
  height: var(--button-height);
  min-width: var(--button-width);
  padding-left: 5px;
  padding-right: 5px;
  text-align: center;
  line-height: var(--button-height);
  vertical-align: middle;
  border: 1px solid black;
  text-decoration: none;
  color: var(--button-text-color);
  background-color: var(--button-color);
}

.buttons a:hover, .actions.a:hover .confirmations.a:hover{
  cursor: pointer;
}

.buttons a:active, .actions.a:active, .confirmations.a:active {
  cursor: pointer;
  background-color: var(--button-active-color);
  color: var(--button-text-color);
}

form.base-form, form.valoracion-form {
  font-size: 1em;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;

  div {
    min-height: 40px;
  }

  .EasyMDEContainer {
    div {
        min-height: 0;
    }
  }

  label.foto-label {
    display: block;
    width: auto;
    text-align: center;
    font-weight: normal;
    font-size: 1em;
  }

  input {
    border: 1px solid #ced4da;
  }

  input[type=submit], input[type=button], input[type=reset],
  button.fancy {
    height: var(--button-height);
    min-width: var(--button-width);
    border: 1px solid black;
    text-decoration: none;
    background-color: var(--button-color);
    padding-left: 5px;
    padding-right: 5px;
    color: var(--button-text-color);
    font-size: 1em;
  }

  input[type=submit]:active, input[type=button]:active, 
  input[type=reset]:active {
    background-color: var(--button-active-color);
    color: var(--button-text-color);
  }

  input[type=submit]:hover, input[type=button]:hover, 
  input[type=reset]:hover {
    cursor: pointer;
  }

  label {
    display: inline-block;
    width: 250px;
    text-align: right;
    font-weight: bold;
  }

  label, legend, input, textarea, select {
    font-size: 1.2em;
  }

  legend {
    font-weight: bold;
    margin-bottom: 20px;
  }

    input[type=checkbox] {
      transform: scale(1.5);
    }

    textarea {
      font-family: monospace;
    }

  .EasyMDEContainer {
    width: 700px;
    margin: 20px 100px;
  }

}

#confirmacion-mensaje {
  width: 100%;
  margin-bottom: 50px;
  font-size: 1.5em;
  text-align: center;
  margin-top: 50px;
}

.no-resize {
  resize: none;
}

.columns {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: var(--column-gap);
  min-height: var(--column-min-height);
}

.column {
  width: var(--column-width);
}

table#coleccionables, table#valoraciones, table#items {
  width: 800px;
  margin: 30px auto 0 auto;
}

table tr th {
  font-weight: bold;
  text-align: left;
  font-size: 1.2em;
}

table tr td {
  padding: 5px;
  height: 1em;
  text-align: left;
  font-size: 1.2em;
}

table .referencia {
  width: 150px;
}

table .objeto {
  width: 450px;
}

table .acciones {
  width: 200px;
}


table tr:nth-child(even) {
  background-color: whitesmoke;
}

table .titulo {
  width: 400px;
  text-align: left;
}


article {
  min-height: calc(var(--doc-min-height) - 2 * 40px);
  width: 760px;
  font-size: 1.4em;
  margin: 40px auto 20px auto;
  padding: 40px;
  background-color: whitesmoke;
}

article h1 {
  margin-bottom: 20px;
  font-size: 2em;
  font-family: sans-serif;
}

article h2 {
  margin-bottom: 20px;
  font-size: 1.6em;
  font-weight: bold;
}

article h3 {
  margin-bottom: 20px;
  font-size: 1.4em;
  font-weight: bold;
}

article h4 {
  margin-bottom: 20px;
  font-size: 1.2em;
  font-weight: bold;
}

article h5 {
  margin-bottom: 20px;
  font-size: 1em;
  font-weight: bold;
}

article p, article li {
  margin-bottom: 20px;
  font-family: monospace;
  font-size: 1em;
}

article strong {
  font-weight: bold;
}

article em {
  font-style: italic;
}

.anuncio {
  width: calc(100% - 10px);
  padding: 20px 0;
  margin: 20px 0;
  line-height: 100%;
  text-align: center;
  font-size: 1.4em;
  font-weight: bold;
}

.anuncio-bajo {
  border: 5px solid black;
}

.anuncio-medio {
  border: 5px solid blue;
}

.anuncio-alto {
  border: 5px solid red;
}

.text {
  padding: 20px 40px;
}

.descripcion {
  width: 760px;
  font-size: 1.4em;
  margin: 40px auto 20px auto;
  padding: 40px;
  background-color: whitesmoke;
}

.descripcion h1 {
  margin-bottom: 20px;
  font-size: 2em;
  font-family: sans-serif;
}

.descripcion h2 {
  margin-bottom: 20px;
  font-size: 1.6em;
  font-weight: bold;
}

.descripcion h3 {
  margin-bottom: 20px;
  font-size: 1.4em;
  font-weight: bold;
}

.descripcion h4 {
  margin-bottom: 20px;
  font-size: 1.2em;
  font-weight: bold;
}

.descripcion h5 {
  margin-bottom: 20px;
  font-size: 1em;
  font-weight: bold;
}

.descripcion p, .descripcion li {
  margin-bottom: 20px;
  font-family: monospace;
  font-size: 1em;
}

.descripcion strong {
  font-weight: bold;
}

.descripcion em {
  font-style: italic;
}

.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#confirm-delete-image {
  width: 100%;
  h1 {
    text-align: center;
    padding: 20px;
  }
  img {
    padding: 20px;
  }
}