/* Estilo para programa de gestión de procesos para asociaciones pendiente de
 * nombre.
 *
 * Copyright (c) 2024 Guillermo Martínez J.
 * Para licencia, archivo LICENCIA.txt.
 */

@font-face {
  font-family: "Bebas Neue";
  src: url('BebasNeue.otf');
}



body {
  background-color: #DDEDFD;
  color: #568;
  font-family: sans-serif;
}

main, footer {
  margin: 0 auto;
  width: 300px;
}

main > header > h1 {
  background-color: #DDEDFD;
  background-image: url('../imagenes/logotipo-peque.png');
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: 260px 0;
}



a {
  color: #568;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
}

  a.accion {
    display: inline-block;
    background-color: #FFF;
    border: 1px solid #CDD;
    border-radius: 1em;
    height: 1.5em;
    padding: 0.5em 0.5em 0 0.5em;
    box-shadow: 3px 3px 5px #CDD;
  }

  a:hover.accion {
    border-color: #59E;
    text-decoration: none;
  }



ul.menu {
  list-style-type: none;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

  ul.menu li {
    background-color: #FFF;
    border: 1px solid #CDD;
    border-radius: 8px;
    width: 300px;
    margin: 1em auto;
    box-shadow: 3px 3px 5px #CDD;
  }

  ul.menu a {
    display: inline-block;

    padding: 2em 0 1em 0;
    height: 2em;
    text-align: center;
    vertical-align: middle;
    width: 100%;
  }
    ul.menu a:hover {
      text-decoration: none;
    }



/* Tablas. */
table {
  border-collapse: collapse;
  margin: 0 auto;
  overflow: scroll;
}

  table tr th
  {
    border: 1px solid #ABB;
    background: #ABB;
    font-weight: bold;
    padding: 0.5em;
  }

  table tr td {
    border: 1px solid #ABB;
    padding: 0.5em;
  }



/* Formularios. */
fieldset
{
  border: 1px solid #ABB;
  border-radius: 1em;
  width: 300px;
  margin: 1em auto;
}

  fieldset p a {
    background-color: #FFF;
    border: 1px solid #CDD;
    border-radius: 1em;
    font-weight: normal;
    height: 1.5em;
    width: 250px;
    margin: 0 1em;
    box-shadow: 3px 3px 5px #CDD;

    padding-top: 0.5em;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
  }
    fieldset p a:hover {
      text-decoration: none;
    }



select, input, textarea {
  background-color: #FFF;
  border: 1px solid #CDD;
  border-radius: 1em;
  color: #568;
  height: 2em;
  width: 250px;
  margin: 0 1em;
  box-shadow: 3px 3px 5px #CDD;
}

  option {
    color: #568;
  }

  select:focus, input:focus {
    border-color: #59E;
  }

  select:disabled, input:disabled {
    color: #CDD;
  }

input[type=checkbox] {
  height: 1em;
  width: 1em;
}

textarea {
  border-radius: 0.5em;
  min-height: 5em;
  min-width: 250px;
}

::-ms-input-placeholder {
  color: #568;
}
::placeholder {
  color: #568;
}



/* Elementos DOM usados por JavaScript, AJAX y demás. */

div#autocomplete, div#hint {
  background-color: #FFF;
  border: 1px solid #59E;
  border-radius: 0.5em;
  color: #568;
  box-shadow: 3px 3px 5px #CDD;
  max-width: 250px;
  padding: 0.25em;
  position: absolute;
/* Para ocultarlo mientras no se use. */
  visibility: hidden;
  left: 0px;
  top: 0px;
}

  div#autocomplete p, div#hint p {
    margin: 0;
    padding: 0;
  }

  div#autocomplete a, div#hint a {
    font-weight: normal;
  }



/* Smartphone horizontal. */
@media screen and (min-width: 480px)
{
  main, footer {
    width: 450px;
  }

  main > header > h1 {
    background-position: 400px 0;
  }
}



/* Tablet o portátil pequeño (notebook). */
@media screen and (min-width: 767px)
{
  main, footer {
    width: 650px;
  }

  main > header > h1 {
    background-position: 600px 0;
  }
}



/* Sobremesa, televisión... */
@media screen and (min-width: 950px)
{
  main, footer {
    width: 750px;
  }

  main > header > h1 {
    background-position: 700px 0;
  }
}