/* --- ESTILOS GENERALES Y LAYOUT --- */
body { font-family: 'Inter', sans-serif; background-color: #f8f9fa; }
.main-container { display: flex; min-height: 100vh; }
#sidebar { width: 25%; min-width: 280px; background-color: #ffffff; border-right: 1px solid #dee2e6; padding: 1.5rem; display: flex; flex-direction: column; }
#main-content { width: 75%; padding: 1.5rem; overflow-x: auto; }

/* --- ESTILOS DE LA SIDEBAR --- */
#sidebar h2 { font-weight: 700; color: #343a40; margin-bottom: 2rem; }
.nav-controls { margin-top: 1.5rem; }
#current-month-year { font-weight: 500; color: #495057; }

/* --- ESTILOS DEL CALENDARIO --- */
.calendar-table { table-layout: fixed; border-color: #dee2e6; }
.calendar-table th { text-align: center; font-weight: 500; background-color: #f8f9fa; padding: 0.75rem; }
.calendar-table td { height: 160px; vertical-align: top; padding: 8px; border-color: #dee2e6; transition: background-color 0.2s; }
.day-number { text-align: right; font-size: 0.85em; color: #6c757d; margin-bottom: 4px; }
.other-month { background-color: #f8f9fa !important; }
.other-month .day-number { color: #adb5bd; }
.posts-container { max-height: 125px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #ced4da #f1f3f5; }
.posts-container::-webkit-scrollbar { width: 5px; }
.posts-container::-webkit-scrollbar-track { background: #f1f3f5; }
.posts-container::-webkit-scrollbar-thumb { background-color: #ced4da; border-radius: 20px; }

/* --- ESTILOS DE LOS BLOQUES DE POST --- */
.post-block { padding: 8px 12px; margin-bottom: 6px; border-radius: 6px; border-left: 4px solid; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; font-size: 0.8rem; }
.post-block:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.05); }
.post-caption { font-weight: 500; color: #343a40; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.post-meta-type, .post-meta-stats { font-size: 0.9em; color: #495057; margin: 0; white-space: nowrap; }
.post-video { border-left-color: #0d6efd; background-color: #e7f0ff; }
.post-image { border-left-color: #198754; background-color: #e8f3ee; }
.post-sidecar { border-left-color: #fd7e14; background-color: #fff2e8; }

/* --- ESTILOS DEL MODAL --- */
.modal-image-container img, .modal-image-container .carousel { border-radius: 8px; }
.modal-caption { font-size: 1rem; margin-top: 1rem; }
.modal-stats { font-size: 0.9rem; color: #6c757d; margin-top: 0.5rem; }

/* --- DISEÑO RESPONSIVE --- */
@media (max-width: 992px) { #sidebar { width: 35%; } #main-content { width: 65%; } }
@media (max-width: 767.98px) { .main-container { flex-direction: column; } #sidebar, #main-content { width: 100%; } #sidebar { border-right: none; border-bottom: 1px solid #dee2e6; } .calendar-table td { height: 120px; } .posts-container { max-height: 85px; } }