.wrapper {
  position: relative;
}

/* ===== CONFIGURACIÓN BASE (Mobile-First) ===== */
html {
	font-size: 100%;
	box-sizing: border-box;
}

a.analisis {
	  text-decoration: none;
	font-weight: bold;
	color: #2b7cff;
}

a.analisis::before {
  content: "🛈 ";
  font-size: 0.85em;
}

img.logo {
	width: 6.25rem; vertical-align: middle; margin-right: 0.625rem;
}
*, *::before, *::after {
	box-sizing: inherit;
}

ul.guiones {
  list-style-type: none; /* quitamos viñetas */
  padding-left: 1.2em;   /* espacio para los guiones */
}

ul.guiones li::marker {
  content: "—"; /* guión como marcador */
}

span.referencia, span.actual { cursor: pointer; }
span.referencia, span.subsiguiente {padding-bottom: 0.0625rem;}	/* Agrega un pequeño espacio para que no choque con las letras */

span.referencia {
	border-bottom: 3px solid green;			/* Usa un borde inferior para la línea en lugar de text-decoration*/
}

span.referencia.subsiguiente {
    border-bottom: 2px solid lightgreen;
}

span.actual { background-color: yellow; }

/* ===== BASE MÓVIL ===== */
body { 
	margin: 0;
	margin-bottom: 1.25rem;
	padding: 0 1rem; /* Espaciado lateral para móvil */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1rem; /* Mejor base para móvil */
	line-height: 1.6;
}

/* ===== HERENCIA FORZADA (elementos rebeldes) ===== */
table, th, td, 
button, input, select, textarea {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

th, td {
	padding: 0.25rem;
	text-align: left;
	vertical-align: top;
}

.cita-abuelo {
    font-style: italic;
	font-weight: bold;
    color: rgb(13, 83, 7);
    border-left: 3px solid #ccc;
    padding-left: 1em;
    margin: 1em 0;
    background-color: #f9f9f9; /* opcional, para resaltar */
}

span.citar {
	font-style: italic;
	font-weight: bold;
	color: rgb(13, 83, 7);
}

/* ===== WRAPPER - BASE MÓVIL ===== */
.wrapper {
	width: 90%;
	padding: 1rem;
	margin: 1rem auto;
	min-height: 31.25rem;
	text-align: center;
	border: thin solid black;
    background-color: white;
    box-shadow: 0px 3px 10px 4px rgba(0, 0, 0, 0.89);
    border-radius: 8px; /* opcional para suavizar bordes */
}

.wrapper.inicio {
    text-align: left;
	margin-bottom: 1.875rem;
    padding: 2rem;
}

h1, h2, h3, h4 {
	text-align: left;
}

/* ===== TIPOGRAFÍA ===== */
h1 { 
	font-family: "Times New Roman", serif;
	font-weight: bold; 
	color: darkgreen;
	font-size: 1.75rem; /* Más pequeño en móvil */
	margin-bottom: 1rem;
	margin-top: 0;
}

h2 {
	color: #188118;
	font-size: 1.25rem;
	margin-bottom: 0.75rem;
}

h3 {
	color: #2b782b;
	font-size: 1.25rem;
}

h4 {
	color: #205a20;
	font-size: 1.25rem;
}

.seccion-indice {
    margin-bottom: 2.5em; /* El espacio entre secciones */
    padding: 1em;
}

p { 
	text-align: justify;
	line-height: 1.7; /* Mejor para móvil */
}

li { 
	text-align: left;
	line-height: 1.7; /* Mejor para móvil */
}

strong.red { color: red; }
dt { color: darkgreen; font-weight: bold; text-align: left}
dd {text-align: left}
em { color: #004040; }
span.titulo-seccion {
    display: block;       /* ahora se comporta como bloque */
    margin: 10px 0;       /* espaciado vertical específico */
    font-weight: bold;
    font-size: 1.5em;
	color:#004040
}

.meta {
  color: darkgray;
  font-size: 0.9em;
}

span.emoji { font-size: x-large;}

div.titulo_libro {
	font-size: 1rem;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.25em;
}

/* Evitar aplicar fondo global a todos los <nav>: limitar a la navegación de capítulos */
nav.bookNav {
	background: #a0f199;
}

/* ===== FORMULARIOS - BASE MÓVIL ===== */
input { 
	padding: 0.75rem 0.5rem; /* Más fácil de tocar */
}

dl {
	text-align: left;
	margin-left: 2rem;
 }

textarea { 
	width: 100%; /* Ancho completo en móvil */
	height: 6.25rem; 
	margin-top: 0.1875rem; 
}

nav .nav-title {
	flex-basis: 100%;   /* ocupa toda la fila */
	text-align: center;
	font-weight: bold;
	margin-bottom: 0.3125rem;
}

/* ===== UTILIDADES ===== */
.dn { display: none; }
.lf { text-align: left; }
.rt { text-align: right; }
.cr { text-align: center; }
.ar { text-align: right; }
.am { vertical-align: middle; }
.fl { float: left; }
.fr { float: right; }
.cl { clear: both; }
.bold { font-weight: bold; }

.mi-tooltip {
	color: red;
	font-weight: bold;
	max-height: 0;
	font-size: 0.875rem;
	opacity: 0;
	transition:
		opacity 2s ease,
		max-height 2s ease;
}

.mi-tooltip.is-visible {
	opacity: 1;
	max-height: 4rem; 
}

img.chapter-img  {
	width: 50%;
	border-radius: 0.5rem;
	box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
	margin-bottom: 0.3125rem;
	float: right;
}

div.layer_a_la_derecha {
	width: 50%;
	float:right;
	padding-left:8px;
	padding-right:5px;
	margin-left: 0px;
	margin-right:0px;
	padding-top: 0px;
	padding-bottom: 0px;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif; font-size:8pt;
}

div.layer_a_la_izquierda {
	width: 50%;
	float:left;
	padding-right:8px;
	padding-left:5px;
	margin-left: 0px;
	margin-right:0px;
	padding-top: 0px;
	padding-bottom: 0px;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif; font-size:8pt;
}

.pie_de_foto {
	text-align:center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	line-height: 12pt;
	color:#FFCC99;
	font-weight:bold; background-color:#000000;
	padding: 5px;
}

.red { color: red; }
.warning { background-color: orange; }
.kk { font-size: 12pt; color: red; }
.casikk { font-size: 10pt; color: #FF8000; }
div.kk { color: red; font-weight: bold; }

.mandatoryField { background-color: #FCBFAB; }
.fieldInError { background-color: #f1e2c6; border-color: red; }
.fieldInWarn { background-color: #FFA500; color: white; }

.shadow { box-shadow: 10px 10px 5px #888888; }
.imgbtn { cursor: pointer; }
img.chapter-img { width: 100% }

/* ===== BIOGRAFÍA - BASE MÓVIL (Reglas añadidas) ===== */
/* Por defecto, apilamos verticalmente en móvil */
.bio-section {
    display: flex; 
    flex-direction: column; /* Asegura el apilamiento en móvil */
	gap: 1.25rem; 
    align-items: center; /* Centra el contenido en móvil */
	margin-bottom: 1.875rem; 
}
.bio-image {
    text-align: center; /* Centra la imagen dentro de su contenedor */
}

.bio-image img {
    max-width: 100%;
    height: auto;
	border-radius: 0.5rem; 
	box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

.bio-text {
    flex: 1; 
    width: 100%; /* Ocupa todo el ancho disponible en móvil */
}

/* Estilo específico para el caption de la foto */
.bio-image .caption {
    /* Desactivamos el justificado por defecto de <p> */
    text-align: center; 
    /* Estilo de texto más sutil para un caption */
    font-size: 0.9rem; 
    color: #666;
    font-style: italic;
    /* Reducir margen superior e inferior para pegarlo a la foto */
	margin-top: 0.3125rem; 
    margin-bottom: 0;
    line-height: 1.2;
}

/* Ajuste opcional: Eliminar el margen superior del H2 cuando está en la columna derecha */
.bio-text h2 {
    /* La cabecera H2 en el texto de la biografía no debe tener margen superior */
    margin-top: 0; 
}

/* Asegurar que el título H2 esté alineado a la izquierda (ya está en las reglas originales, pero por si acaso) */
.bio-text h2 {
    text-align: left;
}
/* ===== RESPONSIVE - TABLET (481px+) ===== */
@media screen and (min-width: 481px) {
	body {
		padding: 0 1.5rem;
	}
	
	#wrapper {
		padding: 1.5rem;
	}
	
	h1 {
		font-size: 2rem;
	}
	
	h2 {
		font-size: 1.375rem;
	}
	
	table {
		font-size: 1rem;
	}
	
	th, td {
		padding: 0.5rem;
	}
    
	/* Reglas de Tablet para Biografía: se mantienen apilados */
	.bio-section {
		gap: 1.875rem; 
	}
}

/* ===== RESPONSIVE - DESKTOP (801px+) ===== */
/* Solo pantallas grandes (desktop / tablet landscape) */
@media screen and (min-width: 801px) {
	body {
		font-size: 12pt; /* Tu tamaño original */
		padding: 0; /* Sin padding lateral */
	margin-bottom: 6.25rem;
	}
	body.mes-background,
	.catalog.mes-background,
	.book.mes-background {
		background-image: url('mes-bg.svg');
		background-repeat: no-repeat;
		background-attachment: fixed;      /* efecto parallax sutil en escritorio */
		background-position: center top;
		background-size: cover;           /* cubre todo el viewport */
		position: relative;
		z-index: 0;
	}

  /* Capa de lectura encima del fondo: evita que texto quede ilegible */
  body.mes-background > .page-overlay,
  .catalog.mes-background > .page-overlay,
  .book.mes-background > .page-overlay {
    position: relative;
    z-index: 2;
    background: linear-gradient(to bottom, rgba(255,255,255,0.96), rgba(255,255,255,0.92));
    /* Usalo solo en zonas de contenido; si prefieres transparencias, baja los alphas */
  }

  /* Si prefieres mantener el fondo visible pero atenuar contenido */
  .mes-bg-dim::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,8,20,0.32);   /* oscurece/acentúa el fondo */
    z-index: 1;
    pointer-events: none;
  }

  /* Asegurar que el contenedor de contenido esté por encima de la capa */
  .mes-content {
    position: relative;
    z-index: 3;
  }
	
	#wrapper { 
	min-height: 31.25rem;
	}

	.wrapper {
		width: 90%;
	max-width: 64rem;
	padding: 0.625rem;
	margin: 0.625rem auto;
		border: thin solid black;
		text-align: center;
	}

	h1 {
		font-size: 2em; /* Tu tamaño original */
	}
	
	h2 {
		font-size: 1.5em; /* Tu tamaño original */
	}
	
	p {
		line-height: 1.6; /* Tu line-height original */
	}
	
	table {
		font-size: 12pt; /* Tu tamaño original */
		width: 90%; /* Tu ancho original */
	}
	
	th, td {
	padding: 0.25rem; /* Tu padding original */
	}
	
	textarea { 
		width: 25rem; /* Tu ancho original */
		height: 6.25rem; /* Tu alto original */
	}
    
    /* Reglas de Escritorio para Biografía: foto a la izquierda del texto */
    .bio-section {
        flex-direction: row; /* Coloca la imagen y el texto lado a lado */
        align-items: flex-start; /* Alinea al inicio (arriba) */
        text-align: left;
    }
    
    .bio-image {
        /* Fija un ancho para la imagen y permite que el texto se adapte */
	flex: 0 0 15.625rem; 
    }
}