/* Removed custom @font-face to avoid 404s in production. Using system fonts. */
body .mali-mapa-container { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif; }
.mali-mapa-container { display: flex; max-width: 100%; margin: auto; gap: 20px; background-color: #e9e9e9; padding: 20px; border-radius: 0; }
#mali-map { height: 400px; width: 55%; border-radius: 5px; }
.locations-container { width: 45%; max-height: 400px; overflow-y: auto; padding-right: 10px; }
.locations-container::-webkit-scrollbar { width: 6px; }
.locations-container::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.2); border-radius: 4px; }
.locations-container::-webkit-scrollbar-track { background: transparent; }
.locations { list-style: none; padding: 0; }
.district { cursor: pointer; padding: 10px; border-bottom: 1px solid #ccc; font-weight: bold; }
.district:hover { background: #f0f0f0; }
.addresses { display: none; list-style: none; padding-left: 20px; font-weight: normal; }
.addresses li { cursor: pointer; padding: 5px; border-bottom: 1px solid #ddd; }
.addresses li:hover { background: #e0e0e0; }
.mali-intro { font-size: smaller; }
.details { display: none; padding: 10px; background: #dcdcdc; margin-top: 5px; border-radius: 0; }
.details button { font-family: 'BentonSansFB', sans-serif; padding: 5px 10px; background: #702082; color: #fff; border: none; cursor: pointer; border-radius: 0; margin-top: 20px; }
.info-block { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.info-block strong { font-weight: bold; }
.info-block p { margin: 0; font-weight: normal; }
.mali-powered { font-size: 10px; color: #a5a5a5; }
@media (max-width: 768px) { .mali-mapa-container { flex-direction: column; gap: 12px; } #mali-map, .locations-container { width: 100%; } #mali-map { height: 300px; } .locations-container { max-height: 300px; overflow-y: auto; padding-right: 0; } }