/*
Campus Night UA
Alejandro Hernández Zapata
mailto:ahz6@ arroba @alu.ua.es
*/

/* =========================================================
   Reset cl?sico compatible
   ========================================================= */
html, body, div, span, h1, h2, h3, p, a, ul, li, dl, dt, dd {
  margin: 0;
  padding: 0;
  border: 0;
}
ul { list-style: none; }
body { line-height: 1; }

/* =========================================================
   Base
   ========================================================= */
body{
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.75;
  color: #eef3ff;
  background: #0b1020 url(fondo.png) repeat;
}

/* Enlaces */
a{ color:#7fdcff; text-decoration:none; }
a:hover{ text-decoration:underline; }
a:focus{
  text-decoration: underline;
  outline: 1px dotted #7fdcff;
  outline-offset: 2px;
}
a:visited{ color:#c3b4ff; }

/* =========================================================
   Contenedor (responsive + centrado)
   ========================================================= */
#contenedor{
  width: 92%;
  max-width: 1000px;
  margin: 26px auto;
  padding: 16px;
  background: #0f1730;
  border: 1px solid #1f2a4d;
}
#contenedor:after{
  content:"";
  display:block;
  clear:both;
}

/* =========================================================
   CABECERA + LOGO (320x180) centrado arriba
   ========================================================= */
#intro{
  position: relative;
  margin-bottom: 14px;
  background: #0c1328;
  border: 1px solid #22305a;

  /* espacio para el logo + separaci?n */
  padding: 230px 22px 20px 22px;
}

/* Logo centrado (320x180) */
#intro:before{
  content:"";
  position: absolute;
  top: 18px;
  left: 50%;
  width: 320px;
  height: 180px;
  margin-left: -160px;
  background: url(logo.png) no-repeat center center;
  /* si no hay soporte, simplemente se ignora */
  background-size: contain;
}

/* L?nea decorativa bajo el logo */
#intro:after{
  content:"";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 212px;
  height: 1px;
  background: #3a4c88;
}

/* =========================================================
   T?tulos (ne?n est?tico, compatible)
   ========================================================= */
#titulo{
  text-align: center;
  padding-top: 10px;
}

#titulo h1{
  font-size: 30px;
  font-weight: bold;
  color: #d6c9ff;
  text-shadow:
    0 0 4px #b88cff,
    0 0 10px #8a6cff,
    0 0 18px #6b4cff;
}

#titulo h2{
  margin-top: 6px;
  font-size: 14px;
  font-weight: normal;
  color: #86e6ff;
  text-shadow:
    0 0 3px #5fd1ff,
    0 0 8px #3aa8ff;
}

/* =========================================================
   Bloques superiores (resumen + comentario)
   ========================================================= */
#resumen, #comentario{
  margin-top: 14px;
  padding: 14px 16px;
  background: #0c1530;
  border: 1px solid #24305a;
}

#resumen .p1, #resumen .p2, #resumen .p3, #resumen .p4{
  margin: 8px 0;
}

#resumen .ul1{
  margin: 10px 0 10px 22px;
  list-style: disc;
}
#resumen .ul1 li{ margin: 5px 0; }

#comentario{
  color:#dbe4ff;
}
#comentario a{
  color:#7fdcff;
  text-decoration: underline;
}

/* =========================================================
   Layout 2 columnas (cl?sico)
   ========================================================= */
#enlacesintra, #enlaces, #enlacesversiones{
  float: left;
  width: 28%;
  margin-right: 3%;
  margin-bottom: 12px;
  padding: 12px;
  background: #0c1530;
  border: 1px solid #24305a;
}

#apartados{
  float: left;
  width: 69%;
}

/* =========================================================
   T?tulos laterales (ne?n suave)
   ========================================================= */
#enlacesintra h3,
#enlaces h3,
#enlacesversiones h3{
  font-size: 13px;
  font-weight: bold;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #22305a;
  color: #8fd8ff;
  text-shadow:
    0 0 3px #5fd1ff,
    0 0 7px #3aa8ff;
}

/* =========================================================
   Men? Apartados
   ========================================================= */
#enlacesintra li{ margin: 8px 0; }

#enlacesintra a{
  display: block;
  padding: 10px;
  background: #0f1730;
  border: 1px solid #22305a;
}
#enlacesintra a:hover,
#enlacesintra a:focus{
  background: #101d3d;
  border-color: #6b4cff;
}

/* =========================================================
   Contenido principal
   ========================================================= */
#apartados > div{
  margin-bottom: 14px;
  background: #0c1530;
  border: 1px solid #24305a;
}

/* T?tulos de secci?n */
#apartados h3{
  padding: 12px 16px;
  font-size: 16px;
  background: #0f1730;
  border-bottom: 1px solid #22305a;
  color: #d9cfff;
  text-shadow:
    0 0 4px #b88cff,
    0 0 10px #7a5cff;
}

#apartados p,
#apartados ul,
#apartados dl{
  padding: 12px 16px;
}

/* Listas */
#apartados ul{
  margin-left: 22px;
  list-style: disc;
}
#apartados li{ margin: 6px 0; }
#apartados ul ul{
  margin-top: 8px;
  list-style: circle;
}

/* Profesores / Bibliograf?a */
#profesores dt,
#bibliografia dt{
  font-weight: bold;
  margin-top: 10px;
  color: #eef3ff;
}
#profesores dd,
#bibliografia dd{
  margin-left: 14px;
  color: #c6d1ea;
}
#bibliografia .autores{ font-weight: bold; }
#bibliografia .isbn{ white-space: nowrap; }

/* =========================================================
   Enlaces laterales
   ========================================================= */
#enlaces li,
#enlacesversiones li{
  margin: 8px 0;
}

#enlaces a,
#enlacesversiones a{
  display: inline-block;
  padding: 4px 8px;
  background: #0f1730;
  border: 1px solid #22305a;
}
#enlaces a:hover,
#enlaces a:focus,
#enlacesversiones a:hover,
#enlacesversiones a:focus{
  background: #101d3d;
  border-color: #7fdcff;
}

/* =========================================================
   Extras ocultos (no usamos extraDivs)
   ========================================================= */
#extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6{
  position: absolute;
  left: -9999px;
}
#extraDiv1 span, #extraDiv2 span, #extraDiv3 span,
#extraDiv4 span, #extraDiv5 span, #extraDiv6 span{
  display: none;
}

/* =========================================================
   RESPONSIVE (obligatorio)
   - En pantallas estrechas: una columna
   - Logo se reduce proporcionalmente
   ========================================================= */
@media screen and (max-width: 640px){
  #contenedor{
    width: 95%;
    padding: 12px;
  }

  #enlacesintra, #enlaces, #enlacesversiones, #apartados{
    float: none;
    width: auto;
    margin-right: 0;
  }

  /* Cabecera con menos altura */
  #intro{
    padding-top: 190px;
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Logo adaptado */
  #intro:before{
    width: 240px;
    height: 135px;
    margin-left: -120px;
  }

  /* L?nea bajo logo recolocada */
  #intro:after{
    left: 14px;
    right: 14px;
    top: 165px;
  }

  #titulo h1{ font-size: 22px; }
  #titulo h2{ font-size: 13px; }
}