/* ============================================
  PIRAMIDES - CSS ESPECÍFICO DEL CUENTO
   (SOLO CLASES QUE NO ESTÁN EN LAS HOJAS GLOBALES)
   ============================================ */


/* ============================================
   ACORDEONES UNIFICADOS
   ============================================ */

/* === ACORDEÓN ESTÁNDAR (entrevistas, capítulos) === */
.acordeon-item,
.acordeon-capitulo {
    margin-bottom: 1.5rem;
    width: 100%;
    box-sizing: border-box;
    display: block;
    border: 1px solid #333333;
    background: #2a2a2a;
    transition: box-shadow 0.3s;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
}

.acordeon-item:hover,
.acordeon-capitulo:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Cabecera del acordeón - UNIFICADA */
.acordeon-item .acordeon-header,
.acordeon-capitulo .capitulo-header {
    cursor: pointer;
    padding: 1rem 1.5rem;
    background: #3a3a3a !important;  /* UNIFICADO */
    color: #e8e8e8 !important;
    border: none !important;
    user-select: none;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: background 0.3s;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 1.1rem;
}

.acordeon-item .acordeon-header:hover,
.acordeon-capitulo .capitulo-header:hover {
    background: #4a4a4a !important;
}

.acordeon-item .acordeon-header .header-text,
.acordeon-capitulo .capitulo-header .header-text {
    flex: 1;
}

/* Indicador de apertura/cierre - UNIFICADO */
.acordeon-item .acordeon-header::after,
.acordeon-capitulo .capitulo-header::after {
    content: "\25B8";  /* ▸ */
    display: inline-block;
    transition: transform 0.3s;
    color: #aaaaaa !important;
    margin-left: auto;
    font-size: 1.8rem;
    line-height: 1;
    width: 2rem;
    height: 2rem;
    text-align: center;
}

.acordeon-item .acordeon-header.abierto::after,
.acordeon-capitulo .capitulo-header.abierto::after {
    content: "\25BE";  /* ▾ */
}

.acordeon-item .acordeon-header.cerrado::after,
.acordeon-capitulo .capitulo-header.cerrado::after {
    content: "\25B8";  /* ▸ */
}

.acordeon-item .acordeon-header::before,
.acordeon-capitulo .capitulo-header::before {
    content: none;
}

/* Contenido del acordeón - UNIFICADO */
.acordeon-item .acordeon-contenido,
.acordeon-capitulo .capitulo-contenido {
    display: none;
    padding: 2rem 2.5rem;
    background: #4a4a4a !important;  /* UNIFICADO */
    border-top: 1px solid #555555;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    color: #e8e8e8;
}

/* ============================================
   ACORDEÓN BIBLIOTECA (estilo especial)
   ============================================ */
.acordeon-biblioteca {
    margin-bottom: 2em;
    width: 100%;
    box-sizing: border-box;
    display: block;
    border: 1px solid #3a3228;
    background: #2a2218;
    transition: box-shadow 0.3s;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
}

.acordeon-biblioteca:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.acordeon-biblioteca .acordeon-header {
    cursor: pointer;
    padding: 1rem 1.5rem;
    background: #5a4a2a;
    color: #f0e8d8 !important;
    border: none !important;
    user-select: none;
    font-family: 'Georgia', 'Times New Roman', serif;
    transition: background 0.3s;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 1px;
}

.acordeon-biblioteca .acordeon-header:hover {
    background: #6a5a3a;
}

.acordeon-biblioteca .acordeon-header .header-text {
    flex: 1;
}

.acordeon-biblioteca .acordeon-header::after {
    content: "\25B8";
    display: inline-block;
    transition: transform 0.3s;
    color: #d0c8b8 !important;
    margin-left: auto;
    font-size: 1.4rem;
    line-height: 1;
}

.acordeon-biblioteca .acordeon-header.abierto::after {
    content: "\25BE";
}

.acordeon-biblioteca .acordeon-header.cerrado::after {
    content: "\25B8";
}

.acordeon-biblioteca .acordeon-contenido {
    display: none;
    padding: 2rem 2.5rem;
    background: #3a3228;
    border-top: 2px solid #4a3a2a;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    font-family: 'Georgia', 'Times New Roman', serif;
    color: #e8ddd0;
}

/* ============================================
   DOCUMENTO
   ============================================ */
.documento {
    background: #f5f0e8;
    padding: 10px 80px 60px 80px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #1a1a1a;
    width: 100%;
    margin-bottom: 2em;
}

.documento h1, .documento h2, .documento h3, .documento h4, .documento h5, .documento h6,
.documento p, .documento strong, .documento .doc-parte, .documento .direccion,
.documento .doc-title, .documento .doc-subtitle {
    color: #1a1a1a;
}

.documento .doc-fecha, .documento .doc-firma p:first-child {
    color: #555;
}

.documento .doc-divider {
    color: #999;
    border-color: #ccc;
}

.documento .campo {
    border-bottom-color: #999;
}

.documento .doc-title small {
    color: #555;
}

.doc-title {
    text-align: center;
    font-size: 24px;
    letter-spacing: 6px;
    text-transform: uppercase;
    border-bottom: 2px solid #8aaa8a;
    padding-bottom: 20px;
    margin: 30px 0 20px;
}

.doc-title small {
    display: block;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: none;
    margin-top: 8px;
}

.doc-subtitle {
    text-align: center;
    font-size: 18px;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 400;
    margin: 30px 0 20px;
}

.doc-fecha {
    text-align: center;
    font-size: 13px;
    letter-spacing: 1px;
}

.doc-parte {
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 25px 0 5px;
}

.doc-compra {
    margin-top: 25px;
}

.doc-divider {
    margin: 30px 0 20px;
    text-align: center;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    padding: 12px 0;
}

.campo {
    display: inline-block;
    min-width: 150px;
    border-bottom: 1px dotted #666;
    padding: 0 10px;
}

.direccion {
    display: block;
    padding-left: 20px;
    margin: 2px 0;
    font-size: 13px;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
     .acordeon-item .acordeon-contenido,
    .acordeon-capitulo .capitulo-contenido,
    .acordeon-biblioteca .acordeon-contenido {
        padding: 1.2rem 1.2rem;
    }
    
    .acordeon-contenido h1,
    .capitulo-contenido h1 {
        font-size: 1.5rem;
    }
    
    .acordeon-biblioteca .acordeon-header {
        font-size: 1rem;
        padding: 0.8rem 1.2rem;
    }
 
    .documento {
        padding: 10px 40px 40px 40px;
    }
}

@media (max-width: 480px) {
   
    
    .documento {
        padding: 10px 20px 30px 20px;
    }
    
    .doc-title {
        font-size: 20px;
        letter-spacing: 4px;
    }
    
    .doc-subtitle {
        font-size: 16px;
        letter-spacing: 3px;
    }
}
/* ============================================
   QUOTE (estilo sobrio, sin bordes redondeados)
   ============================================ */
.quote {
    margin: 2rem 0;
    padding: 1.8rem 2.5rem;
    background: var(--bg-content);
    border-left: 4px solid #c9a84c;
    border-top: 1px solid rgba(201, 168, 76, 0.15);
    border-right: 1px solid rgba(201, 168, 76, 0.15);
    border-bottom: 1px solid rgba(201, 168, 76, 0.15);
    border-radius: 0;  /* Sin bordes redondeados */
    color: var(--text-color);
    font-style: italic;
    position: relative;
}

.quote::before {
    content: '“';
    position: absolute;
    left: 0.8rem;
    top: 0 rem;
    font-size: 3.5rem;
    color: var(--text-color);
    line-height: 1;
    opacity: 0.6;
}

.quote .attribution {
    display: block;
    margin-top: 0.8rem;
    font-style: normal;
    font-size: 0.9rem;
    color: var(--text-color);
    text-align: right;
}

.quote .attribution::before {
    content: "— ";
}
/* ============================================
   PANTALLA EES - ESTILO PRESENTACIÓN
   ============================================ */

.pantalla-ees {
	width: 100%;
	max-width: 100%;
	margin: 25px 0;
	font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
	background-color: var(--bg-content);
	color: var(--text-color);
	border: 4px solid var(--border-color);
	box-shadow: inset 0 0 0 1px var(--border-color), 0 8px 32px rgba(0, 0, 0, 0.15);
	transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* --- HEADER DE LA PANTALLA --- */
.pantalla-ees-header {
	background-color: var(--bg-footer);
	color: var(--text-color);
	padding: 10px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.8em;
	letter-spacing: 1px;
	text-transform: uppercase;
	border-bottom: 2px solid var(--border-color);
}

.pantalla-ees-icono {
	color: var(--text-color);
	margin-right: 8px;
	font-size: 1.2em;
}

.pantalla-ees-titulo {
	font-weight: 600;
	color: var(--text-color);  /* Usa text-color, no text-light */
}

.pantalla-ees-hora {
	color: var(--text-muted);
	font-size: 0.85em;
}

/* --- CUERPO DE LA PANTALLA --- */
.pantalla-ees-cuerpo {
	padding: 25px 30px;
}

.pantalla-ees-titulo-principal {
	font-family: var(--font-serif, 'Georgia', 'Times New Roman', serif);
	font-size: 1.6em;
	font-weight: 700;
	color: var(--heading-color, var(--text-color));
	margin-top: 0;
	margin-bottom: 15px;
	text-align: center;
	letter-spacing: 0.5px;
	border-bottom: 2px solid var(--border-color);
	padding-bottom: 12px;
}

.pantalla-ees-texto {
	font-size: 1.05em;
	line-height: 1.6;
	margin-bottom: 20px;
	color: var(--text-color);
}

/* --- TABLA ESTILO PRESENTACIÓN --- */
.pantalla-ees-tabla {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92em;
	margin-top: 10px;
}

.pantalla-ees-tabla thead th {
	background-color: var(--bg-footer);
	color: var(--text-color);  /* Usa text-color, no text-light */
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 10px 12px;
	text-align: left;
	border: 1px solid var(--border-color);
	font-size: 0.85em;
}

.pantalla-ees-tabla tbody td {
	padding: 10px 12px;
	border: 1px solid var(--border-color);
	background-color: var(--bg-card);
	color: var(--text-color);
	vertical-align: top;
	line-height: 1.5;
}

.pantalla-ees-tabla tbody tr:nth-child(even) td {
	background-color: var(--bg-content);
}

.pantalla-ees-tabla tbody td:first-child {
	font-weight: 600;
	color: var(--text-color);  /* Usa text-color, no accent-tert */
	width: 18%;
}

.pantalla-ees-tabla tbody td:nth-child(2) {
	width: 52%;
}

.pantalla-ees-tabla tbody td:last-child {
	width: 30%;
}

/* --- PIE DE LA PANTALLA --- */
.pantalla-ees-pie {
	background-color: var(--bg-footer);
	color: var(--text-muted);
	padding: 8px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.75em;
	letter-spacing: 1px;
	text-transform: uppercase;
	border-top: 2px solid var(--border-color);
}

.pantalla-ees-pie-texto {
	color: var(--text-color);  /* Usa text-color */
	font-weight: 600;
}

.pantalla-ees-pie-numero {
	color: var(--text-muted);
}