html, body{font-family:Georgia, "Times New Roman", Times, serif; font-size:14px; color:#000; overflow-x: hidden; max-width: 100%;}
body{background:#f7f7f7; margin:0; padding:0;}
.clear{clear:both;}
.aligncenter{text-align:center;}
.alignleft{text-align:left;}
.alignright{text-align:right;}
.alignjustify{text-align:justify;}
.sub{position:relative; max-width:1000px; width:100%; margin:0 auto; box-sizing:border-box; padding:0 10px;}

a{text-decoration:none; color:#369;}
a:hover{text-decoration:underline;}

h1{letter-spacing:-3px; font-weight:normal; padding:0;}

#cookie-accept{
    padding: .5em;
    background: #c7c7c7;
    border: 2px solid #000;
    font-weight: normal;
    font-size: .9em;
	z-index: 99999;
}

/* Cabecera moderna con flexbox */
#cabecera {
    position: relative;
    width: 100%;
    background: #f7f7f7;
    overflow: hidden;
}

#cabecera .sub {
    height: 150px;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Imágenes de cabecera por civilización */
#cabecera .general { background-image: url('/imagenes/cabecera_general.gif'); }
#cabecera .egipto { background-image: url('/imagenes/cabecera_egipto.gif'); }
#cabecera .grecia { background-image: url('/imagenes/cabecera_grecia.gif'); }
#cabecera .japon { background-image: url('/imagenes/cabecera_japon.gif'); }
#cabecera .babilonia { background-image: url('/imagenes/cabecera_babilonia.gif'); }
#cabecera .persia { background-image: url('/imagenes/cabecera_persia.gif'); }
#cabecera .roma { background-image: url('/imagenes/cabecera_roma.gif'); }
#cabecera .azteca { background-image: url('/imagenes/cabecera_azteca.gif'); }
#cabecera .maya { background-image: url('/imagenes/cabecera_maya.gif'); }

#cabecera h1 {
    font-size: 2em;
    text-align: right;
    margin: 0;
    padding: 20px;
    position: absolute;
    bottom: 10px;
    right: 0;
}

/* Topbar moderno con flexbox */
#topbar {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    z-index: 10;
}

#topbar .sub {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    position: relative;
}

#topbar .buscador {
    position: absolute;
    right: 20px;
    top: 90%;
    transform: translateY(-50%);
}

#topbar .buscador input[type="text"] {
    width: 200px;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

#topbar .buscador input[type="submit"] {
    padding: 5px 10px;
    margin-left: 5px;
    background: #336699;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

#topbar #socialbookmarks {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 10px;
}

#contenido{background:#fff; border-top:2px solid #888; width:100%; box-sizing:border-box; overflow-x:hidden;}
#menu{font-size:.9em;}
#menu h3{}
#menu ul{list-style-type:circle; margin:0; padding:0 0 0 1.5em;}

/* Mejoras visuales del menú */
#menu ul li a {
    display: block;
    padding: 4px 0;
    border-radius: 3px;
    transition: all 0.3s ease;
    text-decoration: none;
}

#menu ul li a:hover {
    background: rgba(212, 175, 55, 0.15);
    padding-left: 12px;
    color: #8b7355;
}

/* Secciones con iconos - mismo estilo que civilizaciones */
#menu .civilizaciones,
#menu .con-iconos {
    list-style-type: none;
    padding-left: 0;
}

#menu .civilizaciones li a::before {
    content: "🏛️";
    margin-left: 0.2em;
    margin-right: 8px;
    font-size: 0.9em;
}

/* Clase genérica para listas con iconos - sin círculos */
#menu .links {
    list-style-type: none;
    padding-left: 1.5em;
}

/* Iconos para títulos de sección */
#menu h3 {
    color: #8b7355;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    padding-bottom: 4px;
    margin-bottom: 8px;
}

#menu ul#rss{list-style-type:none; width:100%; padding:0 .25em 0 .5em; margin:.5em 0; background:#eef; border:1px solid #000;}
#menu ul#rss a{color:#0054af;}
#menu ul#rss li{clear:both; min-height:40px; padding:0 0 0 .25em; margin:.5em 0; border-bottom:1px solid #ccf;}
#menu ul#rss li span{float:left; width:25px; min-height:40px; display:block;}
#menu ul#rss li.rss-feed span{background:url('/imagenes/rss-feed.png') center left no-repeat;}
#menu ul#rss li.rss-comments span{background:url('/imagenes/rss-comments.png') center left no-repeat;}
#menu ul#rss li.rss-email span{background:url('/imagenes/rss-email.png') center left no-repeat;}
#menu ul#rss li div{margin:0 0 0 3em; padding:.5em 0 0 0;}
#menu ul#rss li div h4{padding:0; margin:0; color:#0054af; font-size:1em;}
#menu ul#rss li div p{padding:0; margin:0; font-size:.9em; color:#000;}
#menu ul#rss li div form input{font-size:0.90em; width:80px;}

#texto{margin-top: 1em; text-align:justify;}

#breadCrumb{margin-top: 0.5em;}

#texto h1.titulo{padding:0;}
#texto h1.titulo_documento{height:100px; padding:0 0 0 125px;}
#texto h1.titulo, #texto h1.titulo_documento{margin:.5em 0;}
#texto .share{position:absolute; top:8em; left:10em;}

#texto .documento a{font-weight:bold;}

/*#texto .civilizacion_portada{float:left; width:45%; min-height:275px; padding:0.5em; margin:0.5em;}*/

/* Altura mínima para evitar descompensación */
#texto .civilizacion_portada {
    min-height: 200px;
}

#texto .civilizacion_portada h3{
    text-align:center; 
    color:#336699; 
    border-bottom:1px solid #000;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5em;
}

/* Tamaños dinámicos de título según longitud */
#texto .civilizacion_portada h3.titulo-normal { font-size: 1.75rem; } /* Tamaño Bootstrap h3 original */
#texto .civilizacion_portada h3.titulo-mediano { font-size: 1.5rem; } /* Ligeramente más pequeño */
#texto .civilizacion_portada h3.titulo-pequeno { font-size: 1.3rem; } /* Claramente más pequeño */
#texto .civilizacion_portada p{letter-spacing:0;}
#texto .civilizacion_portada .texto_civilizacion{min-height:120px;}
#texto .civilizacion_portada img{float:left; width:100px; height:100px; margin:0.5em; border:1px solid #000;}
#texto .civilizacion_portada span{float:right;}
#texto .civilizacion_portada a.preview:before{content:"Leer todo sobre ";}

#texto blockquote{background:#ddd; color:#333; border:1px solid #000; padding:0.5em 1em; letter-spacing:1px;}
#texto p span.initial{float:left; margin:0 5px 2px 0; padding:0.3em 0.5em; background:#ccc; color:#000; font-family:"Times New Roman", Times, serif; font-size:2em; line-height:21px; font-weight:bold; border:1px solid #000;}

#texto div.masestacat{color:#333; background:#f7f7f7; border:1px solid #888; margin:1em 0; padding:.5em 1em; font-size:.9em;}
#texto div.masestacat h3{text-align:center;}
#texto div.masestacat h3:before{content:"¿Quiza buscabas otra informacion relacionada con ";}
#texto div.masestacat h3:after{content:"?";}
#texto div.masestacat ul{list-style-type:none; margin:0; padding:0; display:flex; flex-wrap:wrap; margin-bottom:1.5em;}
#texto div.masestacat ul li{flex:0 0 24.5%; padding:0 0.25%; margin-bottom:0.5em; box-sizing:border-box; overflow:hidden;}
#texto div.masestacat ul li a{display:block; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:100%;}
#texto div.masestacat p.aligncenter{margin-top:1.5em; padding-top:1em; border-top:1px solid #ddd;}

#texto div.relacionados{color:#333; background:#f7f7f7; border:1px solid #888; margin:1em 0; padding:.5em 1em; font-size:.9em;}
#texto div.relacionados h3{text-align:center;}
#texto div.relacionados h3:before{content:"Otros documentos que hacen referencia a ";}
#texto div.relacionados ul{list-style-type:none; margin:0; padding:0; display:flex; flex-wrap:wrap; margin-bottom:1.5em;}
#texto div.relacionados ul li{flex:0 0 24.5%; padding:0 0.25%; margin-bottom:0.5em; box-sizing:border-box; overflow:hidden;}
#texto div.relacionados ul li a{display:block; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:100%;}

#texto .adsenseRight{float:right; background:#fff; margin:0 0 .5em .5em;}

#texto ul.listadocs{list-style-type:none; margin:0; padding:0;}
#texto ul.listadocs li{padding:.5em 0;}
#texto ul.listadocs li img{float:left; border:1px solid #000; width:12%; height:auto;}
#texto ul.listadocs li div.doc{float:left; width:85%; margin-left:2%;}
#texto ul.listadocs li h3{font-size:1.2em; margin:0 0 .5em 0; padding:0;}
#texto ul.listadocs li p{text-align:justify; margin:0;}

#pie{text-align:center; border-top:1px solid #000; padding:1em 0;}
#pie .lastupdate{text-align:center; margin:.5em 0;}
#pie span{}

/* Thumbnails placeholder para artículos sin imagen */
.thumbnail-placeholder {
    border: 1px solid #000;
    display: inline-flex;
    align-items: flex-end;
    justify-content: flex-start;
    font-family: Garamond, "EB Garamond", "Times New Roman", serif;
    font-size: 28px;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
    float: left;
    padding: 8px 8px 4px 8px;
}

/* Colores específicos para placeholders */
.thumbnail-placeholder.color-1 { background: linear-gradient(135deg, #d4af37, #b8860b); } /* Dorado */
.thumbnail-placeholder.color-2 { background: linear-gradient(135deg, #d4c5a9, #c4b59a); } /* Piedra */
.thumbnail-placeholder.color-3 { background: linear-gradient(135deg, #c49b8a, #a67c6a); } /* Terracota */
.thumbnail-placeholder.color-4 { background: linear-gradient(135deg, #9a9572, #7a755f); } /* Verde oliva */
.thumbnail-placeholder.color-5 { background: linear-gradient(135deg, #7b8a9b, #66748a); } /* Azul grisáceo */
.thumbnail-placeholder.color-6 { background: linear-gradient(135deg, #a19b94, #8b857e); } /* Gris cálido */

/* Placeholder en listados de documentos */
#texto ul.listadocs li .thumbnail-placeholder {
    width: 12%;
    height: 80px;
}

/* Placeholder en portada de civilizaciones */
#texto .civilizacion_portada .thumbnail-placeholder {
    width: 100px;
    height: 100px;
    margin: 0.5em;
}
#pie span:before{content:" | "}
#pie span.copy:before{content:""}