body{font-family:'Roboto',Arial,Helvetica,sans-serif;margin:0;color:#222;background:#fff;}
h1,h2,h3,h4{font-family:'Montserrat',sans-serif;}
.container{max-width:1100px;margin:0 auto;padding:20px;}
.header-inner{display:flex;flex-direction:column;align-items:flex-start;padding:10px 0;}
.site-title a{font-size:1.6rem;font-weight:700;color:#007BFF;text-decoration:none;}
.menu-area{width:100%;margin-top:8px;border-top:1px solid #eee;padding-top:12px;}
.menu-area ul{list-style:none;margin:0;padding:0;display:flex;gap:18px;}
.menu-area a{text-decoration:none;padding:8px 6px;display:inline-block;border-radius:6px;color:#007BFF;}
.menu-area a:hover{background:#007BFF;color:#fff;transition:.3s;}
.breadcrumbs{font-size:.9rem;margin:10px 0;color:#555;}
.with-sidebar{display:flex;gap:20px;}
.content{flex:3;}
.sidebar{flex:1;}
.article-item{display:flex;gap:18px;padding:16px 0;border-bottom:1px solid #f0f0f0;align-items:flex-start;}
.article-item img{width:150px;height:100px;object-fit:cover;border-radius:6px;transition:.3s;}
.article-item img:hover{transform:scale(1.05);}
.article-item h2{margin:0 0 8px 0;font-size:1.2rem;color:#007BFF;}
.article-item h2 a{text-decoration:none;color:#007BFF;}
.article-item p{margin:0;color:#444;line-height:1.5;}
.single-article {margin: 20px 0;}
.single-article .article-title {font-size: 1.8rem; margin-bottom: 10px; color: #007BFF;}
.single-article .article-image {max-width: 100%; margin: 15px 0; border-radius:6px;}
.single-article .article-content {line-height: 1.6; color:#333;}
#back-to-top{position:fixed;bottom:20px;right:20px;background:#007BFF;color:#fff;padding:10px 14px;border-radius:50%;text-decoration:none;font-size:1.2rem;display:none;}
#back-to-top:hover{background:#0056b3;}
/* Frontend edit buttons to the right */
#system-message-container,
.module-edit, 
.module-edit a,
a.btn, 
a.module-edit {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    left: auto !important;
    z-index: 9999 !important;
}
.article-and-sidebar {
    display: flex;
    gap: 20px;
}

.article-content {
    flex: 1 1 0; /* ocupa el máximo posible */
    min-width: 0; /* evita overflow */
}

.article-sidebar {
    width: 300px; /* ancho fijo del sidebar */
    background: #f9f9f9;
    padding: 15px;
    border: 1px solid #ddd;
}
.module-edit a, a.btn { display:inline-block; margin:0 5px; }
@media (max-width:720px){.with-sidebar{flex-direction:column;}.sidebar{order:-1;}.article-item{flex-direction:column;}.article-item img{width:100%;height:auto;}.menu-area ul{flex-wrap:wrap;gap:8px;}}