/* ------------------------------------------------------------------
 * Fichero:  cms.css
 * Objetivo: Hoja de estilos de Curso de Matemáticas de Secundaria
 * Autor:    Pedro Reina <pedro@pedroreina.net>
 * Fecha:    L.27.11.2023
 * Licencia: CC0 1.0 Universal
 *           http://creativecommons.org/publicdomain/zero/1.0/
--------------------------------------------------------------------*/

/* --------------------------------
 * Tipos de letra
 * ------------------------------*/

@font-face
  {
  font-family: texto;
  src: url('fuente/encode-r.ttf');
  }

@font-face
  {
  font-family: texto;
  src: url('fuente/encode-b.ttf');
  font-weight: bold;
  }

@font-face
  {
  font-family: titulo;
  src: url('fuente/oxanium.ttf');
  }


/* --------------------------------
 * Body
 * ------------------------------*/

body
  {
  color: black;
  background-color: white;
  font-family: texto;
  font-size: 18px;
  }


/* --------------------------------
 * Párrafos
 * ------------------------------*/

p.centrado
  { text-align: center; }


/* --------------------------------
 * Vínculos
 * ------------------------------*/

/* Los normales */

a
  {
  text-decoration: none;
  color: #f00;
  }

a:hover
  { color: #800; }

a:active
  { text-decoration: underline; }

/* Los que apuntan a un fichero (PDF): verdes */

a.fichero
  {
  text-decoration: none;
  color: black;
  background-color: #bfb;
  padding: 4px 5px;
  border: 1px solid white;
  white-space: nowrap;
  }

a.fichero:hover
  {
  color: #111;
  background-color: #9f9;
  border: 1px solid #282;
  }

a.fichero:active
  {
  color: red;
  border: 1px solid red;
  text-decoration: underline;
  }

/* Los que apuntan a un código QR (PNG): amarillos */

a.qr
  {
  text-decoration: none;
  color: black;
  background-color: #f7fc92;
  padding: 4px 5px;
  border: 1px solid white;
  }

a.qr:hover
  {
  color: #111;
  background-color: #e3e88b;
  border: 1px solid #afb54c;
  }

a.qr:active
  {
  color: red;
  border: 1px solid red;
  text-decoration: underline;
  }

/* Los que apuntan a un recurso ya visto: naranjas */

a.pasado
  {
  text-decoration: none;
  color: black;
  background-color: #f9bd3b;
  padding: 4px 5px;
  border: 1px solid white;
  }

a.pasado:hover
  {
  color: #111;
  background-color: #d8a538;
  border: 1px solid #c6952b;
  }

a.pasado:active
  {
  color: red;
  border: 1px solid red;
  text-decoration: underline;
  }

/* Los que apuntan a un recurso posterior: azul */

a.futuro
  {
  text-decoration: none;
  color: black;
  background-color: #6ce9fc;
  padding: 4px 5px;
  border: 1px solid white;
  }

a.futuro:hover
  {
  color: #111;
  background-color: #57d2e5;
  border: 1px solid #46a6b5;
  }

a.futuro:active
  {
  color: red;
  border: 1px solid red;
  text-decoration: underline;
  }

/* El que apunta al índice del curso */

a.indice
  {
  text-decoration: none;
  color: #000;
  }

a.indice:hover
  { color: #a22; }

a.indice:active
  { text-decoration: underline; }


/* --------------------------------
 * Listas
 * ------------------------------*/

ul
  {
  list-style-type: square;
  line-height: 2;
  padding: 0;
  margin: 20px;
  }

ul.normal
  { line-height: 1.5; }


/* --------------------------------
 * Divisiones
 * ------------------------------*/

div.cuadro
  {
  margin-bottom: 10px;
  padding: 2px;
  border-style: solid;
  border-color: #ccc;
  border-width: 2px;
  }

div.titulo1
  {
  padding: 10px;
  background-color: #cacaff;
  text-align: center;
  font-size: 32px;
  font-family: titulo;
  text-shadow: 2px 2px 2px #f0f0f0;
  }

div.titulo2
  {
  padding: 10px;
  background-color: #cacaff;
  text-align: center;
  font-size: 28px;
  font-family: titulo;
  text-shadow: 2px 2px 2px #f0f0f0;
  }

div.titulo3
  {
  padding: 10px;
  background-color: #cacaff;
  text-align: center;
  font-size: 24px;
  font-family: titulo;
  text-shadow: 2px 2px 2px #f0f0f0;
  }

div.contenido
  { padding: 10px; }


/* --------------------------------
 * Tablas
 * ------------------------------*/

table
  {
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
  font-size: min(1.6vw, 18px);
  }

table, th, td
  { border: 1px solid black;}

th, td
  { padding: 5px; }