/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: #436a7b;
  background-image: url('../images/fondos/Verde-natural.jpg');
	background-size: cover;        /* Cubre toda la pantalla */
  background-position: center;   /* Centra la imagen */
  background-repeat: no-repeat;  /* No se repite */
  background-attachment: fixed;  /* Fijo al hacer scroll */
  font-size: 18px;
  font-family: Georgia, "Times New Roman", serif;
  margin: 0;
}

p {
  line-height: 1.6em; /*I find the default HTML line-height tends to be a bit claustrophobic for main text*/
  /* Efecto de lectura cómoda */
  text-rendering: optimizeLegibility;  /* Mejor renderizado */
  -webkit-font-smoothing: antialiased; /* Suavizado en Mac */
  -moz-osx-font-smoothing: grayscale;  /* Suavizado en Windows */
}

hr {
  border: solid #c7b591;
  border-width: 2px 0 0 0;
}
/*IMAGENES*/
img {
  max-width: 100%;
  height: auto;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.right {
  float: right;
  margin-left: 1em;
}
.left {
  float: left;
  margin-right: 1em;
}
.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}
@media only screen and (min-width: 600px) {
  .small {
    max-width: 60%;
    height: auto;
  }
}
.caption {
  margin-top: 0;
  font-size: 0.9em;
  font-style: italic;
}

a:hover { 
  background-color: #fff6e6;
}

/*TEXTO*/
/* ====== TITULOS  ====== */
h1, h2, h3, h4, h5 {
  font-family: Tahoma, Geneva, sans-serif;
  color: #34436f;
}

/* ====== PÁRRAFOS  ====== */
p {
  /* TEXTO */
  font-size: 1rem;
  color: #2c3e50;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  
  /* ESPACIADO */
  line-height: 1.7;
  margin: 0 0 1.5em 0;  /* top right bottom left */
  
  /* SANGRÍA */
  text-indent: 2em;
  
  /* RENDERIZADO */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ESTILOS PÁRRAFOS ESPECIFICOS*/
/* Primer párrafo después de título*/
h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
  text-indent: 0;
  margin-top: 0.5em;  /* Para h1 */
}

/* Ajustes específicos para niveles de títulos */
h2 + p { margin-top: 0.8em; }
h3 + p { margin-top: 1em; }

/* Párrafos después de otros elementos - sin sangría */
ul + p, ol + p, blockquote + p, img + p, .sin-sangria {
  text-indent: 1em;
}

/* Párrafo después de imagen - estilo especial */
img + p {
  font-size: 0.9em;
  color: #666;
  text-align: center;
  font-style: italic;
  margin-top: 0.3em;  /* Reducido de 5px a 0.3em para consistencia */
}

/* ====== CLASES ESPECÍFICAS PARA PÁRRAFOS ====== */

/* Párrafo con clase "lista" (dentro de listas) */
p.lista, ul p, ol p {  /*sin espacio */
  font-size: 0.95rem;
  line-height: 1.6;
  color: #34495e;
  margin-bottom: 1em;
  text-indent: 0;  /* Sin sangría */
}

/* Párrafo pequeño (notas, pies de foto) */
p.nivel, .pie-foto p, .nota p {  /*sin espacio */
  font-size: 0.85rem;
  line-height: 1.5;
  color: #7f8c8d;
  margin-bottom: 0.8em;
  text-indent: 0;  /* Sin sangría */
}

/* Párrafo introductorio */
p.intro {  /*sin espacio */
  font-size: 1.1em;
  font-weight: bold;
  text-indent: 0;
}

/* Párrafo destacado */
p.destacado {  /*sin espacio */
  background-color: #f8f9fa;
  border-left: 3px solid #ff6b6b;
  padding: 1em;
  text-indent: 0;
}

/* Citas */
.quote {
  padding-left: 50px;
  border-left: 4px solid #2c3e50;
  font-family: 'Georgia', 'Times New Roman', serif;
}
.quote p {
  font-style: normal;
  font-weight: normal;
  font-size: 22px;
  line-height: 28px;
  color: #333333;
}

.quote cite {
  font-style: italic;
  font-weight: normal;
  font-size: 22px;
  line-height: 28px;
  color: #aaaaaa;
}

/* ====== SELECTION ====== */
p::selection {
  background-color: rgba(255, 107, 107, 0.3);
  color: #000;
}

/* ====== RESPONSIVE Y LAYOUT AVANZADO ====== */

/* Columnas para posts largos */
@media (min-width: 992px) {
  .post-largo p {
    column-count: 2;
    column-gap: 40px;
  }
  
  /* Párrafos que deben ocupar ambas columnas */
  p.intro, p.destacado {
    column-span: all;
  }
}

/* Móviles: ajustes para mejor lectura */
@media (max-width: 768px) {
  p {
    text-align: left;  /* Justificar en móviles puede verse mal */
    text-indent: 0;    /* Sin sangría en móviles */
    hyphens: none;     /* Mejor no dividir palabras en móviles */
    font-size: 1.05rem; /* Un poco más grande en móviles */
  }
  
.post-largo p {
    column-count: 1;  /* Una sola columna en móviles */
  }
}

/* TOOLTIP PARA BLOG-CUADRO DE TEXTO POPUP */
.definicion {
  position: relative;
  display: inline;
  color: #c77b21; /* Color cálido */
  cursor: help;
  border-bottom: 1px dashed #c77b21;
  transition: all 0.2s;
}

.definicion:hover {
  background-color: rgba(199, 123, 33, 0.1);
  border-bottom-style: solid;
}

.cuadro-definicion {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  width: 280px;
  background: #fffaf0; /* Fondo marfil */
  border: 1px solid #e6d3b8;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  font-size: 0.9em;
  line-height: 1.5;
  color: #5a4a3a;
  text-align: left;
}

.cuadro-definicion::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-top-color: #e6d3b8;
}

.cuadro-definicion::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 9px solid transparent;
  border-top-color: #fffaf0;
  margin-top: -1px;
}

.definicion:hover .cuadro-definicion {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Título dentro del cuadro */
.cuadro-titulo {
  font-weight: bold;
  color: #8b4513;
  margin-bottom: 8px;
  font-size: 1em;
  border-bottom: 1px solid #e6d3b8;
  padding-bottom: 5px;
}

/* Para definiciones técnicas */
.definicion.tecnica {
  color: #2c5282;
  border-bottom-color: #2c5282;
  font-family: 'Courier New', monospace;
}

.definicion.tecnica:hover {
  background-color: rgba(44, 82, 130, 0.1);
}

.definicion.tecnica .cuadro-definicion {
  background: #f0f8ff;
  border-color: #b0c4de;
}

.definicion.tecnica .cuadro-definicion::before {
  border-top-color: #b0c4de;
}

.definicion.tecnica .cuadro-definicion::after {
  border-top-color: #f0f8ff;
}

/*#CONTAINER is the rectangle that contains everything but the background!*/
#container {
  margin: 3em auto;
  width: 90%;
	max-width: 700px;
	background-color: #f1e3c9;
  color: #151515; 
  outline-color: #a9a9a9;
  outline-style: ridge;
  outline-width: 4px;
  outline-offset: 0;
}

#content {
  padding: 10px 5% 20px 5%;
}

/*HEADER STYLE*/
#header {
  background-color: #075348;
  padding: 0 5%;
  border-color: #a9a9a9;
  border-style: ridge;
  border-width: 0 0 4px 0;
}
#header ul {
  list-style-type: none;
  padding: 0.5em 0;
  margin: 0;
}
#header li {
  font-size: 1.2em;
  display: inline-block;
  margin-right: 1.5em;
  margin-bottom: 0.2em;
  margin-top: 0.2em;
}
#header li a {
  color: white;
  text-decoration: none;
  background-color: inherit;
}
#header li a:hover {
  text-decoration: underline;
}

/*POST LIST STYLE*/
#postlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none;
}
#recentpostlistdiv ul {
  font-size: 1.2em;
  padding: 0;
  list-style-type: none;
}
.moreposts {
  font-size: 0.8em;
  margin-top: 0.2em;
}

/* Gallery Container */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    max-width: 900px;
    margin: auto;
}

/* Gallery Items */
.gallery-item {
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* Responsive Design */

@media (max-width: 600px) {
    .gallery {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

/*NEXT AND PREVIOUS LINKS STYLE*/
#nextprev {
  text-align: center;
  margin-top: 1.4em;
}

/*DISQUS STYLE*/
#disqus_thread {
  margin-top: 1.6em;
}

/*FOOTER STYLE*/
#footer {
  font-size: 0.8em;
  padding: 0 5% 10px 5%;
    }