/* Siguiendo sus Pisadas - estilos comunes (barra lateral de navegación) */

body {
  margin: 0;
  padding: 8px 8px 8px 171px;
  font-family: "Source Sans 3", Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  background: #ffffff;
}

/* Las tablas heredan el tamaño de letra (en modo compatibilidad no lo hacen). */
table {
  font-size: inherit;
}

/* Alineación */
.centrado {
  text-align: center;
}

.centrado table {
  margin-left: auto;
  margin-right: auto;
}

.izquierda {
  text-align: left;
}

.derecha {
  text-align: right;
}

.justificado {
  text-align: justify;
}

/* Tamaños de texto */
.t-chico {
  font-size: 14px;
}

.t-normal {
  font-size: 17px;
}

.t-grande {
  font-size: 20px;
}

.t-mayor {
  font-size: 25px;
}

/* Colores de texto */
.c-rojo { color: #990000; }
.c-bordo { color: #990033; }
.c-crema { color: #ffff99; }
.c-amarillo { color: #ffff00; }
.c-blanco { color: #ffffff; }
.c-negro { color: #000000; }
.c-oliva { color: #333300; }
.c-marron { color: #993300; }
.c-naranja { color: #cc6600; }
.c-verde { color: #339966; }
.c-verde-oscuro { color: #008000; }
.c-gris { color: #666666; }

/* Barra roja con el nombre de la sección, arriba de cada estudio */
.barra-titulo {
  margin: 0;
  padding: 3px 4px;
  background: #990000;
  color: #ffff99;
  text-align: center;
}

/* Barra lateral fija, igual al antiguo marco "Navegador" */
.ssp-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 163px;
  padding-top: 100px;
  overflow-y: auto;
  background: #ffffff url(fondo_nav.jpg) repeat-y left top;
}

.ssp-menu a {
  display: block;
  width: 136px;
  height: 27px;
  margin-left: 8px;
}

.ssp-menu img {
  display: block;
  border: 0;
}

/* El botón "Menú" solo se usa en pantallas angostas */
.ssp-menu-boton {
  display: none;
}

/* Paginador de Perlas */
.ssp-subnav {
  margin: 0 0 16px;
  text-align: center;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
}

.ssp-subnav img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 8px;
  border: 0;
}

.ssp-subnav b {
  color: #990000;
}

.ssp-subnav a,
.ssp-subnav strong {
  display: inline-block;
  min-width: 1.6em;
  margin: 2px 1px;
  padding: 2px 4px;
  border-radius: 3px;
}

.ssp-subnav a {
  color: #990000;
}

.ssp-subnav strong {
  background: #990000;
  color: #ffff99;
}

/* ===== Pantallas angostas (celulares) =====
   El menú lateral pasa a una franja arriba que se despliega con el botón "Menú",
   y el contenido ocupa todo el ancho. En computadora no cambia nada. */
@media (max-width: 760px) {
  body {
    padding: 56px 12px 12px;
  }

  .ssp-menu {
    bottom: auto;
    right: 0;
    width: auto;
    padding: 0;
    overflow: visible;
    z-index: 10;
    /* la parte roja de fondo_nav.jpg (152 de sus 279 px) estirada a todo el ancho */
    background: #97011a url(fondo_nav.jpg) repeat-y left top / 184vw auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  }

  .ssp-menu-boton {
    display: block;
    width: 100%;
    height: 44px;
    padding: 0 16px;
    border: 0;
    background: none;
    color: #ffff99;
    font: bold 18px "Source Sans 3", Arial, sans-serif;
    font-variant: small-caps;
    letter-spacing: 0.04em;
    text-align: left;
    cursor: pointer;
  }

  .ssp-menu-lista {
    display: none;
    padding: 4px 16px 14px;
  }

  .ssp-menu.abierto .ssp-menu-lista {
    display: block;
  }

  .ssp-menu a {
    margin: 0 0 6px;
  }

  /* Muchas páginas usan listas anidadas (hasta 8 niveles) solo para indentar:
     con la sangría normal de 40 px por nivel el texto se sale de la pantalla. */
  ul,
  ol {
    padding-left: 12px;
  }

  blockquote,
  dd {
    margin-left: 12px;
    margin-right: 0;
  }

  body {
    overflow-wrap: anywhere;
  }

  /* Imágenes y tablas se achican para entrar en la pantalla */
  img {
    max-width: 100%;
    height: auto;
  }

  table {
    max-width: 100%;
  }
}